feat: migrate floating label, line ripple, and notched outline to typ…

…escript

packages/banner/ambient.d.ts

@@ -3,6 +3,8 @@ declare namespace svelte.JSX {
     ['onSMUIBannerButton:primaryActionClick']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
-    ['onSMUIBannerButton:secondaryActionClick']?: any;
+    ['onSMUIBannerButton:secondaryActionClick']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
   }
 }

packages/chips/ambient.d.ts

@@ -3,7 +3,9 @@ declare namespace svelte.JSX {
     ['onSMUIChipsChip:mount']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
-    ['onSMUIChipsChip:unmount']?: any;
+    ['onSMUIChipsChip:unmount']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
     ['onMDCChip:interaction']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;

packages/data-table/Body.svelte

@@ -6,8 +6,8 @@
     [className]: true,
     'mdc-data-table__content': true,
   })}
-  on:SMUI:data-table:row:mount={handleRowMount}
-  on:SMUI:data-table:row:unmount={handleRowUnmount}
+  on:SMUIDataTableRow:mount={handleRowMount}
+  on:SMUIDataTableRow:unmount={handleRowUnmount}
   {...$$restProps}><slot /></tbody
 >
 

packages/data-table/Row.svelte

@@ -65,10 +65,10 @@
       addAttr,
     };
 
-    dispatch(getElement(), 'SMUI:data-table:row:mount', accessor);
+    dispatch(getElement(), 'SMUIDataTableRow:mount', accessor);
 
     return () => {
-      dispatch(getElement(), 'SMUI:data-table:row:unmount');
+      dispatch(getElement(), 'SMUIDataTableRow:unmount');
     };
   });
 

packages/floating-label/FloatingLabel.svelte

@@ -32,12 +32,12 @@
       .map(([name, value]) => `${name}: ${value};`)
       .concat([style])
       .join(' ')}
-    for={forId || (inputProps ? inputProps.id : null)}
+    for={forId || (inputProps ? inputProps.id : undefined)}
     {...$$restProps}><slot /></label
   >
 {/if}
 
-<script>
+<script lang="ts">
   import { MDCFloatingLabelFoundation } from '@material/floating-label';
   import { onMount, getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
@@ -46,34 +46,38 @@
     classMap,
     useActions,
     dispatch,
+    ActionArray,
   } from '@smui/common/internal';
 
+  import type { SMUIFloatingLabelAccessor } from './FloatingLabel.types';
+
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let style = '';
-  let forId = null;
+  let forId: string | undefined = undefined;
   export { forId as for };
   export let floatAbove = false;
   export let required = false;
   export let wrapped = false;
 
-  let element;
-  let instance;
-  let internalClasses = {};
-  let internalStyles = {};
-  let inputProps = getContext('SMUI:generic:input:props') || {};
+  let element: HTMLSpanElement | HTMLLabelElement;
+  let instance: MDCFloatingLabelFoundation;
+  let internalClasses: { [k: string]: boolean } = {};
+  let internalStyles: { [k: string]: string } = {};
+  let inputProps =
+    getContext<{ id?: string } | undefined>('SMUI:generic:input:props') ?? {};
 
   let previousFloatAbove = floatAbove;
-  $: if (previousFloatAbove !== floatAbove) {
+  $: if (instance && previousFloatAbove !== floatAbove) {
     previousFloatAbove = floatAbove;
     instance.float(floatAbove);
   }
 
   let previousRequired = required;
-  $: if (previousRequired !== required) {
+  $: if (instance && previousRequired !== required) {
     previousRequired = required;
     instance.setRequired(required);
   }
@@ -84,53 +88,53 @@
       removeClass,
       getWidth: () => {
         const el = getElement();
-        const clone = el.cloneNode(true);
-        el.parentNode.appendChild(clone);
+        const clone = el.cloneNode(true) as typeof el;
+        el.parentNode?.appendChild(clone);
         clone.classList.add('smui-floating-label--remove-transition');
         clone.classList.add('smui-floating-label--force-size');
         clone.classList.remove('mdc-floating-label--float-above');
         const scrollWidth = clone.scrollWidth;
-        el.parentNode.removeChild(clone);
+        el.parentNode?.removeChild(clone);
         return scrollWidth;
       },
       registerInteractionHandler: (evtType, handler) =>
-        getElement().addEventListener(evtType, handler),
+        getElement().addEventListener(evtType, handler as EventListener),
       deregisterInteractionHandler: (evtType, handler) =>
-        getElement().removeEventListener(evtType, handler),
+        getElement().removeEventListener(evtType, handler as EventListener),
     });
 
-    const accessor = {
+    const accessor: SMUIFloatingLabelAccessor = {
       get element() {
         return getElement();
       },
       addStyle,
       removeStyle,
     };
 
-    dispatch(element, 'SMUI:floating-label:mount', accessor);
+    dispatch(element, 'SMUIFloatingLabel:mount', accessor);
 
     instance.init();
 
     return () => {
-      dispatch(element, 'SMUI:floating-label:unmount', accessor);
+      dispatch(element, 'SMUIFloatingLabel:unmount', accessor);
 
       instance.destroy();
     };
   });
 
-  function addClass(className) {
+  function addClass(className: string) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
     }
   }
 
-  function removeClass(className) {
+  function removeClass(className: string) {
     if (!(className in internalClasses) || internalClasses[className]) {
       internalClasses[className] = false;
     }
   }
 
-  function addStyle(name, value) {
+  function addStyle(name: string, value: string) {
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
@@ -141,22 +145,22 @@
     }
   }
 
-  function removeStyle(name) {
+  function removeStyle(name: string) {
     if (name in internalStyles) {
       delete internalStyles[name];
       internalStyles = internalStyles;
     }
   }
 
-  export function shake(shouldShake) {
+  export function shake(shouldShake: boolean) {
     instance.shake(shouldShake);
   }
 
-  export function float(shouldFloat) {
+  export function float(shouldFloat: boolean) {
     floatAbove = shouldFloat;
   }
 
-  export function setRequired(isRequired) {
+  export function setRequired(isRequired: boolean) {
     required = isRequired;
   }
 

packages/floating-label/FloatingLabel.types.ts

@@ -0,0 +1,5 @@
+export interface SMUIFloatingLabelAccessor {
+  readonly element: HTMLSpanElement | HTMLLabelElement;
+  addStyle(name: string, value: string): void;
+  removeStyle(name: string): void;
+}

packages/floating-label/bare.ts

@@ -0,0 +1,2 @@
+export * from './index';
+export { default } from './index';

packages/floating-label/index.js → packages/floating-label/index.ts

@@ -1,3 +1,4 @@
 import FloatingLabel from './FloatingLabel.svelte';
+export * from './FloatingLabel.types';
 
 export default FloatingLabel;