Merge pull request #369 from IBM/datatable

DataTable: add ToolbarMenu, ToolbarMenuItem, fix batch actions selection cancellation

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 152 components exported from carbon-components-svelte 0.20.0
+> 154 components exported from carbon-components-svelte 0.20.0
 
 - Accordion
   - [Accordion](#accordion)
@@ -44,6 +44,8 @@
   - [Toolbar](#toolbar)
   - [ToolbarBatchActions](#toolbarbatchactions)
   - [ToolbarContent](#toolbarcontent)
+  - [ToolbarMenu](#toolbarmenu)
+  - [ToolbarMenuItem](#toolbarmenuitem)
   - [ToolbarSearch](#toolbarsearch)
 - [DataTableSkeleton](#datatableskeleton)
 - DatePicker
@@ -796,6 +798,7 @@ interface ComboBoxItem {
 | id               | <code>string</code>                                         | --            | Set an id for the list box component.                                     |
 | name             | <code>string</code>                                         | --            | Specify a name attribute for the input.                                   |
 | ref              | <code>null &#124; HTMLInputElement</code>                   | `null`        | Obtain a reference to the input HTML element.                             |
+| listRef          | <code>null &#124; HTMLDivElement</code>                     | `null`        | Obtain a reference to the list HTML element.                              |
 
 ### Slots
 
@@ -807,6 +810,7 @@ No slots.
 - `on:focus`
 - `on:blur`
 - `on:clear`
+- `on:scroll`
 
 ### Dispatched events
 
@@ -2363,7 +2367,7 @@ import { ListBoxMenu } from "carbon-components-svelte";
 
 ### Forwarded events
 
-No forwarded events.
+- `on:scroll`
 
 ### Dispatched events
 
@@ -3019,6 +3023,8 @@ import { OverflowMenu } from "carbon-components-svelte";
 | iconClass        | <code>string</code>                                                 | --                                 | Specify the icon class.                                            |
 | iconDescription  | <code>string</code>                                                 | `"Open and close list of options"` | Specify the ARIA label for the icon.                               |
 | id               | <code>string</code>                                                 | --                                 | Set an id for the button element.                                  |
+| buttonRef        | <code>null &#124; HTMLButtonElement</code>                          | `null`                             | Obtain a reference to the trigger button element.                  |
+| menuRef          | <code>null &#124; HTMLUListElement</code>                           | `null`                             | Obtain a reference to the overflow menu element.                   |
 
 ### Slots
 
@@ -5322,6 +5328,59 @@ No dispatched events.
 
 ---
 
+## ToolbarMenu
+
+### Import path
+
+```js
+import { ToolbarMenu } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToolbarMenuItem
+
+### Import path
+
+```js
+import { ToolbarMenuItem } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+- `on:click`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
 ## ToolbarSearch
 
 ### Import path

docs/src/pages/components/DataTable.svx

@@ -1,9 +1,9 @@
 ---
-components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarBatchActions"]
+components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
 ---
 
 <script>
-  import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, Button, Link } from "carbon-components-svelte";
+  import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import Preview from "../../components/Preview.svelte";
 </script>
@@ -316,7 +316,12 @@ The slot name for the table header cells is `"cell-header"`.
   <Toolbar>
     <ToolbarContent>
       <ToolbarSearch />
-      <Button>Create</Button>
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
     </ToolbarContent>
   </Toolbar>
 </DataTable>
@@ -378,7 +383,12 @@ The slot name for the table header cells is `"cell-header"`.
   <Toolbar size="sm">
     <ToolbarContent>
       <ToolbarSearch />
-      <Button>Create</Button>
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
     </ToolbarContent>
   </Toolbar>
 </DataTable>

docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte

@@ -4,6 +4,8 @@
     Toolbar,
     ToolbarContent,
     ToolbarSearch,
+    ToolbarMenu,
+    ToolbarMenuItem,
     ToolbarBatchActions,
     Button,
   } from "carbon-components-svelte";
@@ -36,7 +38,14 @@
     </ToolbarBatchActions>
     <ToolbarContent>
       <ToolbarSearch />
-      <Button>Create</Button>
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
+          API Documentation
+        </ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
     </ToolbarContent>
   </Toolbar>
 </DataTable>

src/Checkbox/InlineCheckbox.svelte

@@ -22,9 +22,16 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
+  export let ref = null;
 </script>
 
 <input
+  bind:this="{ref}"
   type="checkbox"
   class:bx--checkbox="{true}"
   checked="{indeterminate ? false : checked}"

src/ComboBox/ComboBox.svelte

@@ -107,11 +107,11 @@
    */
   export let ref = null;
 
-	/**
+  /**
-	 * Obtain a reference to the list HTML element
+   * Obtain a reference to the list HTML element
-	 * @type {null | HTMLDivElement} [ref=null]
+   * @type {null | HTMLDivElement} [ref=null]
-	 */
+   */
-	export let listRef = null  
+  export let listRef = null;
 
   /**
    * @typedef {{ id: string; text: string; }} ComboBoxItem
@@ -290,7 +290,12 @@
       />
     </ListBoxField>
     {#if open}
-      <ListBoxMenu aria-label="{ariaLabel}" id="{id}" on:scroll bind:ref={listRef}>
+      <ListBoxMenu
+        aria-label="{ariaLabel}"
+        id="{id}"
+        on:scroll
+        bind:ref="{listRef}"
+      >
         {#each filteredItems as item, i (item.id)}
           <ListBoxMenuItem
             id="{item.id}"

src/DataTable/DataTable.svelte

@@ -131,7 +131,9 @@
     tableSortable,
     batchSelectedIds,
     resetSelectedRowIds: () => {
+      selectAll = false;
       selectedRowIds = [];
+      if (refSelectAll) refSelectAll.checked = false;
     },
     add: (id) => {
       headerItems.update((_) => [..._, id]);
@@ -147,6 +149,8 @@
   );
 
   let selectAll = false;
+  let refSelectAll = null;
+
   $: batchSelectedIds.set(selectedRowIds);
   $: indeterminate =
     selectedRowIds.length > 0 && selectedRowIds.length < rows.length;
@@ -221,6 +225,7 @@
         {#if batchSelection && !radio}
           <th scope="col" class:bx--table-column-checkbox="{true}">
             <InlineCheckbox
+              bind:ref="{refSelectAll}"
               aria-label="Select all rows"
               checked="{selectAll}"
               indeterminate="{indeterminate}"

src/DataTable/Toolbar.svelte

@@ -4,16 +4,30 @@
    * @type {"sm" | "default"} [size="default"]
    */
   export let size = "default";
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  let ref = null;
+
+  const overflowVisible = writable(false);
+
+  setContext("Toolbar", {
+    overflowVisible,
+    setOverflowVisible: (visible) => {
+      overflowVisible.set(visible);
+      if (ref) ref.style.overflow = visible ? "visible" : "inherit";
+    },
+  });
 </script>
 
 <section
+  bind:this="{ref}"
   aria-label="data table toolbar"
   class:bx--table-toolbar="{true}"
   class:bx--table-toolbar--small="{size === 'sm'}"
   class:bx--table-toolbar--normal="{size === 'default'}"
   {...$$restProps}
 >
-  <div class:bx--toolbar-content="{true}">
+  <slot />
-    <slot />
-  </div>
 </section>

src/DataTable/ToolbarBatchActions.svelte

@@ -18,27 +18,41 @@
     batchSelectedIds = value;
   });
 
-  onMount(() => unsubscribe);
+  let overflowVisible = false;
+
+  const ctxToolbar = getContext("Toolbar");
+  const unsubscribeOverflow = ctxToolbar.overflowVisible.subscribe((value) => {
+    overflowVisible = value;
+  });
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+      unsubscribeOverflow();
+    };
+  });
 </script>
 
-<div
+{#if !overflowVisible}
-  class:bx--batch-actions="{true}"
+  <div
-  class:bx--batch-actions--active="{showActions}"
+    class:bx--batch-actions="{true}"
-  {...$$restProps}
+    class:bx--batch-actions--active="{showActions}"
->
+    {...$$restProps}
-  <div class:bx--batch-summary="{true}">
+  >
-    <p class:bx--batch-summary__para="{true}">
+    <div class:bx--batch-summary="{true}">
-      <span> {formatTotalSelected(batchSelectedIds.length)} </span>
+      <p class:bx--batch-summary__para="{true}">
-    </p>
+        <span> {formatTotalSelected(batchSelectedIds.length)} </span>
+      </p>
+    </div>
+    <div class:bx--action-list="{true}">
+      <slot />
+      <Button
+        class="bx--batch-summary__cancel"
+        tabindex="{showActions ? '0' : '-1'}"
+        on:click="{ctx.resetSelectedRowIds}"
+      >
+        Cancel
+      </Button>
+    </div>
   </div>
-  <div class:bx--action-list="{true}">
+{/if}
-    <slot />
-    <Button
-      class="bx--batch-summary__cancel"
-      tabindex="{showActions ? '0' : '-1'}"
-      on:click="{ctx.resetSelectedRowIds}"
-    >
-      Cancel
-    </Button>
-  </div>
-</div>

src/DataTable/ToolbarMenu.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { getContext } from "svelte";
+  import Settings16 from "carbon-icons-svelte/lib/Settings16";
+  import { OverflowMenu } from "../OverflowMenu";
+
+  const ctx = getContext("Toolbar");
+
+  let menuRef = null;
+
+  $: ctx.setOverflowVisible(menuRef != null);
+  $: if (menuRef) menuRef.style.top = "100%";
+</script>
+
+<OverflowMenu
+  bind:menuRef
+  icon="{Settings16}"
+  {...$$restProps}
+  class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
+  flipped
+>
+  <slot />
+</OverflowMenu>

src/DataTable/ToolbarMenuItem.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { OverflowMenuItem } from "../OverflowMenu";
+</script>
+
+<OverflowMenuItem {...$$restProps} on:click on:keydown>
+  <slot />
+</OverflowMenuItem>

src/DataTable/index.js

@@ -10,3 +10,5 @@ export { default as Toolbar } from "./Toolbar.svelte";
 export { default as ToolbarContent } from "./ToolbarContent.svelte";
 export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
 export { default as ToolbarBatchActions } from "./ToolbarBatchActions.svelte";
+export { default as ToolbarMenu } from "./ToolbarMenu.svelte";
+export { default as ToolbarMenuItem } from "./ToolbarMenuItem.svelte";

src/OverflowMenu/OverflowMenu.svelte

@@ -53,6 +53,18 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
 
+  /**
+   * Obtain a reference to the trigger button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let buttonRef = null;
+
+  /**
+   * Obtain a reference to the overflow menu element
+   * @type {null | HTMLUListElement} [ref=null]
+   */
+  export let menuRef = null;
+
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
   import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
@@ -64,10 +76,8 @@
   const focusedId = writable(undefined);
   const currentIndex = writable(-1);
 
-  $: buttonRef = undefined;
+  let buttonWidth = undefined;
-  $: buttonWidth = undefined;
+  let didOpen = false;
-  $: menuRef = undefined;
-  $: didOpen = false;
 
   setContext("OverflowMenu", {
     focusedId,

src/index.js

@@ -27,6 +27,8 @@ export {
   ToolbarContent,
   ToolbarSearch,
   ToolbarBatchActions,
+  ToolbarMenu,
+  ToolbarMenuItem,
 } from "./DataTable";
 export { DataTableSkeleton } from "./DataTableSkeleton";
 export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";

types/index.d.ts

@@ -662,6 +662,12 @@ export class ComboBox extends CarbonSvelteComponent {
      * @default null
      */
     ref?: null | HTMLInputElement;
+
+    /**
+     * Obtain a reference to the list HTML element
+     * @default null
+     */
+    listRef?: null | HTMLDivElement;
   };
 }
 
@@ -2929,6 +2935,18 @@ export class OverflowMenu extends CarbonSvelteComponent {
      * Set an id for the button element
      */
     id?: string;
+
+    /**
+     * Obtain a reference to the trigger button element
+     * @default null
+     */
+    buttonRef?: null | HTMLButtonElement;
+
+    /**
+     * Obtain a reference to the overflow menu element
+     * @default null
+     */
+    menuRef?: null | HTMLUListElement;
   };
 
   $$slot_def: { menu: {}; default: {} };
@@ -5124,6 +5142,14 @@ export class ToolbarContent extends CarbonSvelteComponent {
   $$slot_def: { default: {} };
 }
 
+export class ToolbarMenu extends CarbonSvelteComponent {
+  $$slot_def: { default: {} };
+}
+
+export class ToolbarMenuItem extends CarbonSvelteComponent {
+  $$slot_def: { default: {} };
+}
+
 export class ToolbarSearch extends CarbonSvelteComponent {
   $$prop_def: {
     /**