fix: type errors after making site package strict

Author: hperrin

packages/checkbox/Checkbox.svelte

@@ -42,7 +42,7 @@
     bind:checked={nativeChecked}
     data-indeterminate={!isUninitializedValue(indeterminate) && indeterminate
       ? 'true'
-      : null}
+      : undefined}
     on:blur
     on:focus
     {...nativeControlAttrs}
@@ -92,7 +92,7 @@
   export let touch = false;
   export let indeterminate: UninitializedValue | boolean = uninitializedValue;
   export let group: UninitializedValue | any[] = uninitializedValue;
-  export let checked: UninitializedValue | boolean = uninitializedValue;
+  export let checked: UninitializedValue | boolean | null = uninitializedValue;
   export let value: any = null;
   export let valueKey: UninitializedValue | string = uninitializedValue;
   export let input$use: ActionArray = [];
@@ -107,10 +107,10 @@
   let rippleActive = false;
   let inputProps =
     getContext<{ id?: string } | undefined>('SMUI:generic:input:props') ?? {};
-  let nativeChecked = isUninitializedValue(group)
+  let nativeChecked: boolean | undefined = isUninitializedValue(group)
     ? isUninitializedValue(checked)
       ? false
-      : checked
+      : checked ?? undefined
     : group.indexOf(value) !== -1;
   let context = getContext<string | undefined>('SMUI:checkbox:context');
   let dataTableHeader = getContext<boolean | undefined>(
@@ -160,19 +160,22 @@
 
     // Now check individual state.
     if (isUninitializedValue(checked)) {
-      if (previousNativeChecked !== nativeChecked) {
+      if (!!previousNativeChecked !== !!nativeChecked) {
         // The checkbox was clicked by the user.
         callHandleChange = true;
       }
-    } else if (checked !== nativeChecked) {
+    } else if (checked !== (nativeChecked ?? null)) {
       if (checked === previousChecked) {
         // The checkbox was clicked by the user
         // and the change needs to flow up.
-        checked = nativeChecked;
+        checked = nativeChecked ?? null;
+        if (!isUninitializedValue(indeterminate)) {
+          indeterminate = false;
+        }
       } else {
         // The checkbox was changed programmatically
         // and the change needs to flow down.
-        nativeChecked = checked;
+        nativeChecked = checked ?? undefined;
       }
       callHandleChange = true;
     }
@@ -205,12 +208,15 @@
   }
 
   onMount(() => {
+    checkbox.indeterminate =
+      !isUninitializedValue(indeterminate) && indeterminate;
+
     instance = new MDCCheckboxFoundation({
       addClass,
       forceLayout: () => element.offsetWidth,
       hasNativeControl: () => true,
       isAttachedToDOM: () => Boolean(element.parentNode),
-      isChecked: () => nativeChecked,
+      isChecked: () => nativeChecked ?? false,
       isIndeterminate: () =>
         isUninitializedValue(indeterminate) ? false : indeterminate,
       removeClass,
@@ -225,7 +231,7 @@
         return getElement();
       },
       get checked() {
-        return nativeChecked;
+        return nativeChecked ?? false;
       },
       set checked(value) {
         if (nativeChecked !== value) {

packages/common/useActions.ts

@@ -4,7 +4,7 @@ export type SvelteActionReturnType<P> = {
 } | void;
 
 export type SvelteActionType<P> = (
-  node: Element,
+  node: HTMLElement,
   params?: P
 ) => SvelteActionReturnType<P>;
 
@@ -14,7 +14,7 @@ export type ActionEntry<P extends any = any> =
 
 export type ActionArray = ActionEntry[];
 
-export function useActions(node: Element, actions: ActionArray) {
+export function useActions(node: HTMLElement, actions: ActionArray) {
   let actionReturns: SvelteActionReturnType<any>[] = [];
 
   if (actions) {

packages/select/Select.svelte

@@ -261,7 +261,7 @@
   export let variant: 'standard' | 'filled' | 'outlined' = 'standard';
   export let noLabel = false;
   export let label: string | undefined = undefined;
-  export let value = '';
+  export let value: any = '';
   export let key: (item: any) => string = (item) => item;
   export let dirty = false;
 

packages/site/src/lib/Demo.svelte

@@ -84,7 +84,7 @@
 
   export let file: string | undefined = undefined;
   export let files: string[] = typeof file === 'string' ? [file] : [];
-  export let component: SvelteComponent | string;
+  export let component: typeof SvelteComponent | string;
 
   let sourceContainer: HTMLDivElement | undefined = undefined;
   let show = false;

packages/site/src/routes/__layout.svelte

@@ -14,7 +14,7 @@
         <Title
           component={A}
           href="/"
-          on:click={() => (activeSection = null)}
+          on:click={() => (activeSection = undefined)}
           class="mdc-theme--primary"
           style={miniWindow ? 'padding-left: 0;' : ''}
         >
@@ -110,7 +110,7 @@
                   ? section.route
                   : 'shortcut' in section
                   ? section.shortcut
-                  : null}
+                  : undefined}
                 activated={section === activeSection}
                 style={section.indent
                   ? 'margin-left: ' + section.indent * 25 + 'px;'
@@ -177,8 +177,8 @@
     }
     themeLink.href = `/smui${lightTheme ? '' : '-dark'}.css`;
     document.head
-      .querySelector('link[href="/smui-dark.css"]')
-      .insertAdjacentElement('afterend', themeLink);
+      .querySelector<HTMLLinkElement>('link[href="/smui-dark.css"]')
+      ?.insertAdjacentElement('afterend', themeLink);
 
     let siteLink = document.head.querySelector<HTMLLinkElement>('#site');
     if (!siteLink) {
@@ -188,8 +188,8 @@
     }
     siteLink.href = `/site${lightTheme ? '' : '-dark'}.css`;
     document.head
-      .querySelector('link[href="/site-dark.css"]')
-      .insertAdjacentElement('afterend', siteLink);
+      .querySelector<HTMLLinkElement>('link[href="/site-dark.css"]')
+      ?.insertAdjacentElement('afterend', siteLink);
   }
 
   type DemoSection = {
@@ -509,9 +509,10 @@
   ];
 
   $: activeSection = sections.find(
-    (section) => 'route' in section && routesEqual(section.route, $page.path)
-  ) as DemoSection;
-  let previousPagePath = null;
+    (section) =>
+      'route' in section && routesEqual(section.route ?? '', $page.path)
+  ) as DemoSection | undefined;
+  let previousPagePath: string | undefined = undefined;
   $: if (mainContent && previousPagePath !== $page.path) {
     drawerOpen = false;
     const hashEl =

packages/site/src/routes/demo/checkbox/_Indeterminate.svelte

@@ -1,7 +1,11 @@
 <FormField>
   <!--
     Note: binding to `indeterminate` is probably a bad idea.
-    The component will never set `indeterminate` internally.
+    The component will set `indeterminate`, but it should be
+    always related to `checked`.
+
+    `indeterminate` is required for the correct state, even
+    if `checked` is null.
   -->
   <Checkbox bind:checked indeterminate={checked === null} input$required />
   <span slot="label">I agree to the terms.</span>
@@ -17,5 +21,5 @@
   import FormField from '@smui/form-field';
   import Button from '@smui/button';
 
-  let checked = null;
+  let checked: boolean | null = null;
 </script>

packages/site/src/routes/demo/common/_ForwardEventsBuilder.svelte

@@ -17,7 +17,7 @@
   let key = 'None';
   let focused = false;
 
-  function handleKeyPress(event: CustomEvent & KeyboardEvent) {
+  const handleKeyPress = (((event: KeyboardEvent) => {
     key = event.key;
-  }
+  }) as unknown) as (event: CustomEvent) => void;
 </script>

packages/site/src/routes/demo/list/_TwoLineSelection.svelte

@@ -66,7 +66,7 @@
   let selection = 'Stephen Hawking';
   // This value is updated when the component is initialized, based on the
   // selected Item's `selected` prop.
-  let selectionIndex = null;
+  let selectionIndex: number | undefined = undefined;
 </script>
 
 <style>

packages/site/src/routes/demo/menu-surface/_ManualAnchor.svelte

@@ -44,5 +44,5 @@
 
   let surface: MenuSurface;
   let anchor: HTMLDivElement;
-  let anchorClasses = {};
+  let anchorClasses: { [k: string]: boolean } = {};
 </script>

packages/site/src/routes/demo/select/_Objects.svelte

@@ -17,7 +17,7 @@
     </Select>
 
     <pre
-      class="status">Selected: {valueA ? valueA.label : 'None'}, Price: {valueA ?  valueA.price : '0'}¢</pre>
+      class="status">Selected: {valueA ? valueA.label : 'None'}, Price: {valueA ?  valueA.price : '-'}¢</pre>
   </div>
 
   <div>
@@ -34,7 +34,7 @@
     </Select>
 
     <pre
-      class="status">Selected: {valueB ? valueB.label : 'None'}, Price: {valueB ?  valueB.price : '0'}¢</pre>
+      class="status">Selected: {valueB ? valueB.label : 'None'}, Price: {valueB ?  valueB.price : '-'}¢</pre>
   </div>
 
   <div>
@@ -44,28 +44,29 @@
       bind:value={valueC}
       label="Outlined"
     >
-      <Option value={null} />
+      <Option value={undefined} />
       {#each fruits as fruit (fruit.label)}
         <Option value={fruit}>{fruit.label}</Option>
       {/each}
     </Select>
 
     <pre
-      class="status">Selected: {valueC ? valueC.label : 'None'}, Price: {valueC ?  valueC.price : '0'}¢</pre>
+      class="status">Selected: {valueC ? valueC.label : 'None'}, Price: {valueC ?  valueC.price : '-'}¢</pre>
   </div>
 </div>
 
 <script lang="ts">
   import Select, { Option } from '@smui/select';
 
-  let fruits = [
+  type Fruit = { label: string; price: number };
+  let fruits: Fruit[] = [
     { label: 'Apple', price: 35 },
     { label: 'Orange', price: 38 },
     { label: 'Banana', price: 28 },
     { label: 'Mango', price: 25 },
   ];
 
-  let valueA = null;
-  let valueB = null;
-  let valueC = null;
+  let valueA: Fruit | undefined = undefined;
+  let valueB: Fruit | undefined = undefined;
+  let valueC: Fruit | undefined = undefined;
 </script>