Fixes (#749)

* fix(data-table): type DataTableRowId as "any" #530

Fixes #530

* fix(tree-view): make first node focusable if activeId does not match selected

* fix(overflow-menu): set type="button" to prevent default submit behavior #554

Fixes #554

* fix(overflow-menu): update semantic attributes in OverflowMenuItem

* fix(number-input): do not dispatch change event on initialization #561

Fixes #561

* fix(tree-view): make first focusable node tabbable regardless of active/selected states

* fix(date-picker): load rangePlugin dynamically

* build(rollup): enable inlineDynamicImports

* build(rollup): remove "clipboard-copy" global

* fix(overflow-menu): do not render title if using a slot #537

Fixes #537

* fix(select): forward missing focus, input events #501

Fixes #501

COMPONENT_INDEX.md

@@ -963,7 +963,7 @@ export interface DataTableRow {
   [key: string]: DataTableValue;
 }
 
-export type DataTableRowId = string;
+export type DataTableRowId = any;
 
 export interface DataTableCell {
   key: DataTableKey;
@@ -3242,6 +3242,8 @@ None.
 | Event name | Type       | Detail              |
 | :--------- | :--------- | :------------------ |
 | change     | dispatched | <code>string</code> |
+| input      | forwarded  | --                  |
+| focus      | forwarded  | --                  |
 | blur       | forwarded  | --                  |
 
 ## `SelectItem`

docs/src/COMPONENT_API.json

@@ -2431,9 +2431,9 @@
           "ts": "interface DataTableRow { id: any; [key: string]: DataTableValue; }"
         },
         {
-          "type": "string",
+          "type": "any",
           "name": "DataTableRowId",
-          "ts": "type DataTableRowId = string"
+          "ts": "type DataTableRowId = any"
         },
         {
           "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }",
@@ -9304,6 +9304,8 @@
       ],
       "events": [
         { "type": "dispatched", "name": "change", "detail": "string" },
+        { "type": "forwarded", "name": "input", "element": "select" },
+        { "type": "forwarded", "name": "focus", "element": "select" },
         { "type": "forwarded", "name": "blur", "element": "select" }
       ],
       "typedefs": [],

rollup.config.js

@@ -10,14 +10,12 @@ export default ["es", "umd"].map((format) => {
 
   return {
     input: "src",
+    inlineDynamicImports: true,
     output: {
       format,
       file: UMD ? pkg.main : pkg.module,
       name: UMD ? "carbon-components-svelte" : undefined,
-      globals: {
+      globals: { flatpickr: "flatpickr" },
-        flatpickr: "flatpickr",
-        "clipboard-copy": "copy",
-      },
     },
     external: Object.keys(pkg.dependencies),
     plugins: [

src/DataTable/DataTable.svelte

@@ -6,7 +6,7 @@
    * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableNonEmptyHeader
    * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
    * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
-   * @typedef {string} DataTableRowId
+   * @typedef {any} DataTableRowId
    * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell
    * @slot {{ row: DataTableRow; }} expanded-row
    * @slot {{ header: DataTableNonEmptyHeader; }} cell-header

src/DatePicker/DatePicker.svelte

@@ -128,43 +128,43 @@
     },
   });
 
+  async function initCalendar() {
+    calendar = await createCalendar({
+      options: {
+        appendTo: datePickerRef,
+        dateFormat,
+        defaultDate: $inputValue,
+        locale,
+        maxDate,
+        minDate,
+        mode: $mode,
+      },
+      base: inputRef,
+      input: inputRefTo,
+      dispatch: (event) => {
+        const detail = { selectedDates: calendar.selectedDates };
+
+        if ($range) {
+          const from = inputRef.value;
+          const to = inputRefTo.value;
+
+          detail.dateStr = {
+            from: inputRef.value,
+            to: inputRefTo.value,
+          };
+
+          valueFrom = from;
+          valueTo = to;
+        } else {
+          detail.dateStr = inputRef.value;
+        }
+
+        return dispatch(event, detail);
+      },
+    });
+  }
+
   afterUpdate(() => {
-    if ($hasCalendar && !calendar) {
-      calendar = createCalendar({
-        options: {
-          appendTo: datePickerRef,
-          dateFormat,
-          defaultDate: $inputValue,
-          locale,
-          maxDate,
-          minDate,
-          mode: $mode,
-        },
-        base: inputRef,
-        input: inputRefTo,
-        dispatch: (event) => {
-          const detail = { selectedDates: calendar.selectedDates };
-
-          if ($range) {
-            const from = inputRef.value;
-            const to = inputRefTo.value;
-
-            detail.dateStr = {
-              from: inputRef.value,
-              to: inputRefTo.value,
-            };
-
-            valueFrom = from;
-            valueTo = to;
-          } else {
-            detail.dateStr = inputRef.value;
-          }
-
-          return dispatch(event, detail);
-        },
-      });
-    }
-
     if (calendar) {
       if ($range) {
         calendar.setDate([$inputValueFrom, $inputValueTo]);
@@ -189,6 +189,7 @@
   $: valueFrom = $inputValueFrom;
   $: inputValueTo.set(valueTo);
   $: valueTo = $inputValueTo;
+  $: if ($hasCalendar && !calendar && inputRef) initCalendar();
 </script>
 
 <svelte:body

src/DatePicker/DatePickerInput.svelte

@@ -72,9 +72,7 @@
 
   add({ id, labelText });
 
-  onMount(() => {
+  $: if (ref) declareRef({ id, ref });
-    declareRef({ id, ref });
-  });
 </script>
 
 <div

src/DatePicker/createCalendar.js

@@ -1,5 +1,4 @@
 import flatpickr from "flatpickr";
-import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 
 let l10n;
 
@@ -48,7 +47,7 @@ function updateMonthNode(instance) {
   }
 }
 
-function createCalendar({ options, base, input, dispatch }) {
+async function createCalendar({ options, base, input, dispatch }) {
   let locale = options.locale;
 
   if (options.locale === "en" && l10n && l10n.en) {
@@ -61,6 +60,13 @@ function createCalendar({ options, base, input, dispatch }) {
     locale = l10n.en;
   }
 
+  let rangePlugin;
+
+  if (options.mode === "range") {
+    const importee = await import("flatpickr/dist/esm/plugins/rangePlugin");
+    rangePlugin = importee.default;
+  }
+
   return new flatpickr(base, {
     ...options,
     allowInput: true,

src/NumberInput/NumberInput.svelte

@@ -103,7 +103,7 @@
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
-  import { createEventDispatcher, afterUpdate } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
   import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
@@ -129,12 +129,9 @@
     }
   }
 
-  afterUpdate(() => {
-    dispatch("change", value);
-  });
-
   let inputValue = value;
 
+  $: dispatch("change", value);
   $: incrementLabel = translateWithId("increment");
   $: decrementLabel = translateWithId("decrement");
   $: value = Number(inputValue);

src/OverflowMenu/OverflowMenu.svelte

@@ -175,6 +175,7 @@
 
 <button
   bind:this="{buttonRef}"
+  type="button"
   aria-haspopup
   aria-expanded="{open}"
   aria-label="{ariaLabel}"

src/OverflowMenu/OverflowMenuItem.svelte

@@ -43,16 +43,17 @@
 
   $: primaryFocus = $focusedId === id;
   $: buttonProps = {
+    role: "menuitem",
     tabindex: "-1",
-    title: requireTitle ? text : undefined,
     class: "bx--overflow-menu-options__btn",
     disabled: href ? undefined : disabled,
     href: href ? href : undefined,
+    title: requireTitle ? ($$slots.default ? undefined : text) : undefined,
   };
 </script>
 
 <li
-  role="menuitem"
+  role="none"
   id="{id}"
   class:bx--overflow-menu-options__option="{true}"
   class:bx--overflow-menu--divider="{hasDivider}"

src/Select/Select.svelte

@@ -119,6 +119,8 @@
             on:change="{({ target }) => {
               selectedValue.set(target.value);
             }}"
+            on:input
+            on:focus
             on:blur
           >
             <slot />
@@ -160,6 +162,8 @@
           on:change="{({ target }) => {
             selectedValue.set(target.value);
           }}"
+          on:input
+          on:focus
           on:blur
         >
           <slot />

src/TreeView/TreeView.svelte

@@ -81,14 +81,12 @@
   }
 
   onMount(() => {
-    if ($activeNodeId === "") {
+    const firstFocusableNode = ref.querySelector(
-      const firstFocusableNode = ref.querySelector(
+      "li.bx--tree-node:not(.bx--tree-node--disabled)"
-        "li.bx--tree-node:not(.bx--tree-node--disabled)"
+    );
-      );
 
-      if (firstFocusableNode != null) {
+    if (firstFocusableNode != null) {
-        firstFocusableNode.tabIndex = "0";
+      firstFocusableNode.tabIndex = "0";
-      }
     }
   });
 

tests/DataTable.test.svelte

@@ -172,7 +172,7 @@
   ]}"
   rows="{[
     {
-      id: 'a',
+      id: 0,
       name: 'Load Balancer 3',
       protocol: 'HTTP',
       port: 3000,

types/DataTable/DataTable.d.ts

@@ -28,7 +28,7 @@ export interface DataTableRow {
   [key: string]: DataTableValue;
 }
 
-export type DataTableRowId = string;
+export type DataTableRowId = any;
 
 export interface DataTableCell {
   key: DataTableKey;

types/Select/Select.d.ts

@@ -99,6 +99,11 @@ export interface SelectProps
 
 export default class Select extends SvelteComponentTyped<
   SelectProps,
-  { change: CustomEvent<string>; blur: WindowEventMap["blur"] },
+  {
+    change: CustomEvent<string>;
+    input: WindowEventMap["input"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+  },
   { default: {}; labelText: {} }
 > {}