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>