Alignment with Carbon version 10.32 (#588)

* feat(code-snippet): add copy functionality

- docs: add custom feedback copy text example

* feat(tile): support disabled state for SelectableTile, RadioTile

Closes #539

* build(rollup): add clipboard-copy to globals

* feat(copy-button): add copy functionality

* feat(content-switcher): deprecate the light prop

- docs: remove the light variant example

* fix(toolbar-search): remove outer div

* feat(search): add searchClass prop

* fix(composed-modal): set hasScrollingContent class on ModalBody

* docs(data-table): add expandable size examples

* feat(tooltip): add TooltipFooter component

* fix(time-picker): correctly display invalidText

* feat(breadcrumb): support overflow menu

* feat(multi-select): export inputRef prop

* chore(deps-dev): upgrade carbon-components to v10.32.0

* feat(form): add noMargin prop to FormGroup

* docs(tooltip): document TooltipFooter

* feat(context-menu): support danger kind for ContextMenuOption

* feat(data-table): support rendering empty table header in skeleton

* refactor(types): use shorter import path in DataTableSkeleton

* feat(data-table): allow sorting to be disabled for a specific header

* docs(data-table): update example to desort the Protocol header

As an example, it makes more sense because all the values ("http") are the same.

* fix(context-menu): set initial y offset of context menu based on window height #577

* fix(context-menu): render submenu based on viewport constraints #577

src/DataTable/DataTable.svelte

@@ -2,8 +2,8 @@
   /**
    * @typedef {string} DataTableKey
    * @typedef {any} DataTableValue
-   * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableEmptyHeader
-   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableNonEmptyHeader
+   * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableEmptyHeader
+   * @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
@@ -13,7 +13,7 @@
    * @slot {{ row: DataTableRow; cell: DataTableCell; }} cell
    * @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
    * @event {{ expanded: boolean; }} click:header--expand
-   * @event {{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }} click:header
+   * @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
    * @event {DataTableRow} click:row
    * @event {DataTableRow} mouseenter:row
    * @event {DataTableRow} mouseleave:row
@@ -250,20 +250,26 @@
             <th scope="col"></th>
           {:else}
             <TableHeader
+              disableSorting="{header.sort === false}"
               on:click="{() => {
                 dispatch('click', { header });
-                let active = header.key === $sortHeader.key;
-                let currentSortDirection = active
-                  ? $sortHeader.sortDirection
-                  : 'none';
-                let sortDirection = sortDirectionMap[currentSortDirection];
-                dispatch('click:header', { header, sortDirection });
-                sortHeader.set({
-                  id: sortDirection === 'none' ? null : $thKeys[header.key],
-                  key: header.key,
-                  sort: header.sort,
-                  sortDirection,
-                });
+
+                if (header.sort === false) {
+                  dispatch('click:header', { header });
+                } else {
+                  let active = header.key === $sortHeader.key;
+                  let currentSortDirection = active
+                    ? $sortHeader.sortDirection
+                    : 'none';
+                  let sortDirection = sortDirectionMap[currentSortDirection];
+                  dispatch('click:header', { header, sortDirection });
+                  sortHeader.set({
+                    id: sortDirection === 'none' ? null : $thKeys[header.key],
+                    key: header.key,
+                    sort: header.sort,
+                    sortDirection,
+                  });
+                }
               }}"
             >
               <slot name="cell-header" header="{header}">{header.value}</slot>

src/DataTable/DataTableSkeleton.svelte

@@ -1,5 +1,5 @@
 <script>
-  /** @extends {"../DataTable/DataTable"} DataTableHeader */
+  /** @extends {"./DataTable"} DataTableHeader */
 
   /**
    * Specify the number of columns
@@ -77,7 +77,11 @@
     <thead>
       <tr>
         {#each cols as col (col)}
-          <th>{values[col] || ""}</th>
+          {#if typeof values[col] === "object" && values[col].empty === true}
+            <th></th>
+          {:else}
+            <th>{values[col] || ""}</th>
+          {/if}
         {/each}
       </tr>
     </thead>

src/DataTable/TableHeader.svelte

@@ -1,4 +1,7 @@
 <script>
+  /** Set to `true` to disable sorting on this specific cell */
+  export let disableSorting = false;
+
   /** Specify the `scope` attribute */
   export let scope = "col";
 
@@ -12,8 +15,8 @@
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";
-  import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20";
-  import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20";
+  import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20/ArrowUp20.svelte";
+  import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20/ArrowsVertical20.svelte";
 
   const { sortHeader, tableSortable, add } = getContext("DataTable");
 
@@ -24,7 +27,7 @@
   $: ariaLabel = translateWithId();
 </script>
 
-{#if $tableSortable}
+{#if $tableSortable && !disableSorting}
   <th
     aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
     scope="{scope}"

src/DataTable/ToolbarSearch.svelte

@@ -32,32 +32,33 @@
     await tick();
     ref.focus();
   }
+
+  $: classes = [
+    expanded && "bx--toolbar-search-container-active",
+    persistent
+      ? "bx--toolbar-search-container-persistent"
+      : "bx--toolbar-search-container-expandable",
+    disabled && "bx--toolbar-search-container-disabled",
+  ]
+    .filter(Boolean)
+    .join(" ");
 </script>
 
-<div
-  tabindex="{expanded || disabled ? '-1' : tabindex}"
-  class:bx--toolbar-action="{true}"
-  class:bx--toolbar-search-container-active="{expanded}"
-  class:bx--toolbar-search-container-expandable="{!persistent}"
-  class:bx--toolbar-search-container-persistent="{persistent}"
-  class:bx--toolbar-search-container-disabled="{disabled}"
-  on:click="{expandSearch}"
+<Search
+  size="sm"
+  tabindex="{tabindex}"
+  disabled="{disabled}"
+  {...$$restProps}
+  searchClass="{classes} {$$restProps.class}"
+  bind:ref
+  bind:value
+  on:clear
+  on:change
+  on:input
+  on:focus
   on:focus="{expandSearch}"
->
-  <Search
-    size="sm"
-    tabindex="{expanded ? tabindex : '-1'}"
-    disabled="{disabled}"
-    {...$$restProps}
-    bind:ref
-    bind:value
-    on:clear
-    on:change
-    on:input
-    on:focus
-    on:blur
-    on:blur="{() => {
-      expanded = !persistent && !!value.length;
-    }}"
-  />
-</div>
+  on:blur
+  on:blur="{() => {
+    expanded = !persistent && !!value.length;
+  }}"
+/>