@cloudscape-design/components-themeable 3.0.1333 → 3.0.1335

package/lib/internal/template/table/header-cell/index.js

@@ -7,23 +7,99 @@ import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { useInternalI18n } from '../../i18n/context';
 import InternalIcon from '../../icon/internal';
+import ScreenreaderOnly from '../../internal/components/screenreader-only';
+import { fireNonCancelableEvent } from '../../internal/events';
 import { KeyCode } from '../../internal/keycode';
+import { appendSort, getSortIndex, removeSort, replaceSort, setDirection, toggleDirection, } from '../multi-column-sort/utils';
 import { Divider, Resizer } from '../resizer';
+import { SortMenu } from './sort-menu';
 import { TableThElement } from './th-element';
 import { getSortingIconName, getSortingStatus, isSorted } from './utils';
 import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
-export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, colSpan, rowSpan, columnGroupId, isLastChildOfGroup, isLast, tableVariant, }) {
+export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, colSpan, rowSpan, columnGroupId, isLastChildOfGroup, isLast, tableVariant, multiColumnSort, i18nStrings, ariaLabels, }) {
     var _a;
     const i18n = useInternalI18n('table');
     const sortable = !!column.sortingComparator || !!column.sortingField;
-    const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);
-    const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);
     const isGrouped = !!columnGroupId || (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) > 1;
-    const handleClick = () => onClick({
-        sortingColumn: column,
-        isDescending: sorted ? !sortingDescending : false,
-    });
+    // The sort menu only renders for a sortable, enabled column under multi-column sort.
+    const hasSortMenu = !!multiColumnSort && sortable && !sortingDisabled;
+    // Multi-column sort context — derived from `multiColumnSort.sortingColumns` when present.
+    const multiSortIndex = multiColumnSort ? getSortIndex(multiColumnSort.sortingColumns, column) : null;
+    const multiSortEntry = multiSortIndex !== null && multiColumnSort ? multiColumnSort.sortingColumns[multiSortIndex - 1] : undefined;
+    const inMultiSort = multiSortIndex !== null;
+    const isPrimaryMultiSort = multiSortIndex === 1;
+    // Priority badges are only meaningful when 2+ columns are sorted; with a single column, the position number adds no information.
+    const showPriorityBadge = !!multiColumnSort && multiColumnSort.sortingColumns.length >= 2 && multiSortIndex !== null;
+    // For multi-sort, derive sorted/descending from the matching entry; otherwise fall back to single-sort props.
+    const sorted = multiColumnSort ? inMultiSort : !!activeSortingColumn && isSorted(column, activeSortingColumn);
+    const descending = multiColumnSort ? !!(multiSortEntry === null || multiSortEntry === void 0 ? void 0 : multiSortEntry.isDescending) : !!sortingDescending;
+    const sortingStatus = getSortingStatus(sortable, sorted, descending, !!sortingDisabled);
+    // In multi-sort, only the primary column declares aria-sort (ARIA only allows one column sorted at a time).
+    const suppressAriaSort = !!multiColumnSort && inMultiSort && !isPrimaryMultiSort;
+    // Screen-reader-only text appended to a sorted column header. The visible header text supplies the column name;
+    // this adds the sort direction (only when `aria-sort` is suppressed, i.e. secondary columns) and the sort priority.
+    const sortDirectionLabel = descending
+        ? i18n('ariaLabels.sortDescending', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.sortDescending)
+        : i18n('ariaLabels.sortAscending', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.sortAscending);
+    const sortPriorityLabel = i18n('ariaLabels.sortPriority', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.sortPriority, format => ({ priority }) => format({ priority }));
+    const sortAccessibleText = inMultiSort
+        ? [
+            suppressAriaSort ? sortDirectionLabel : undefined,
+            showPriorityBadge ? sortPriorityLabel === null || sortPriorityLabel === void 0 ? void 0 : sortPriorityLabel({ priority: multiSortIndex !== null && multiSortIndex !== void 0 ? multiSortIndex : 0 }) : undefined,
+        ]
+            .filter(Boolean)
+            .join(' ')
+        : '';
+    const handleClick = (shiftKey = false) => {
+        if (multiColumnSort) {
+            const current = multiColumnSort.sortingColumns;
+            let next;
+            if (shiftKey && !inMultiSort) {
+                next = appendSort(current, column, false);
+            }
+            else if (inMultiSort) {
+                next = toggleDirection(current, column);
+            }
+            else {
+                next = replaceSort(column, false);
+            }
+            fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: next });
+            return;
+        }
+        onClick({
+            sortingColumn: column,
+            isDescending: sorted ? !sortingDescending : false,
+        });
+    };
+    const handleSortMenuAction = (action) => {
+        // The sort menu is only rendered when `multiColumnSort` is set (see render below), so this guard
+        // exists purely to narrow the type for the accesses that follow and is unreachable at runtime.
+        /* istanbul ignore next */
+        if (!multiColumnSort) {
+            return;
+        }
+        const current = multiColumnSort.sortingColumns;
+        let next;
+        switch (action) {
+            case 'sort-ascending':
+                next = inMultiSort ? setDirection(current, column, false) : replaceSort(column, false);
+                break;
+            case 'sort-descending':
+                next = inMultiSort ? setDirection(current, column, true) : replaceSort(column, true);
+                break;
+            case 'add-to-sort-ascending':
+                next = appendSort(current, column, false);
+                break;
+            case 'add-to-sort-descending':
+                next = appendSort(current, column, true);
+                break;
+            case 'remove-from-sort':
+                next = removeSort(current, column);
+                break;
+        }
+        fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: next });
+    };
     // Elements with role="button" do not have the default behavior of <button>, where pressing
     // Enter or Space will trigger a click event. Therefore we need to add this ourselves.
     // The native <button> element cannot be used due to a misaligned implementation in Firefox:
@@ -31,7 +107,7 @@ export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sorting
     const handleKeyPress = ({ nativeEvent: e }) => {
         if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {
             e.preventDefault();
-            handleClick();
+            handleClick(e.shiftKey);
         }
     };
     const headerId = useUniqueId('table-header-');
@@ -47,7 +123,7 @@ export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sorting
     useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {
         updateColumn(columnId, entry.borderBoxWidth);
     });
-    return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRefCombined, sortingStatus: sortingStatus, sortingDisabled: sortingDisabled, focusedComponent: focusedComponent, stuck: stuck, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: columnId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, colSpan: colSpan, rowSpan: rowSpan, columnGroupId: columnGroupId, isLast: isLast, ...(sortingDisabled
+    return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRefCombined, sortingStatus: sortingStatus, sortingDisabled: sortingDisabled, suppressAriaSort: suppressAriaSort, focusedComponent: focusedComponent, stuck: stuck, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: columnId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, colSpan: colSpan, rowSpan: rowSpan, columnGroupId: columnGroupId, isLast: isLast, ...(sortingDisabled
             ? {}
             : getAnalyticsMetadataAttribute({
                 action: 'sort',
@@ -55,32 +131,45 @@ export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sorting
                     position: `${colIndex + 1}`,
                     columnId: column.id ? `${column.id}` : '',
                     label: `.${analyticsSelectors['header-cell-text']}`,
-                    sortingDescending: `${!sortingDescending}`,
+                    sortingDescending: `${!descending}`,
                 },
             })) },
-        React.createElement("div", { ref: clickableHeaderRef, "data-focus-id": `sorting-control-${String(columnId)}`, className: clsx(styles['header-cell-content'], {
-                [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,
-                [styles['header-cell-content-expandable']]: isExpandable,
-            }), "aria-label": column.ariaLabel
-                ? column.ariaLabel({
-                    sorted: sorted,
-                    descending: sorted && !!sortingDescending,
-                    disabled: !!sortingDisabled,
-                })
-                : undefined, ...(sortingStatus && !sortingDisabled
-                ? {
-                    onKeyPress: handleKeyPress,
-                    tabIndex: clickableHeaderTabIndex,
-                    role: 'button',
-                    onClick: handleClick,
-                }
-                : {}) },
-            React.createElement("div", { className: clsx(styles['header-cell-text'], analyticsSelectors['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId },
-                column.header,
-                isEditable ? (React.createElement("span", { className: styles['edit-icon'] },
-                    React.createElement(InternalIcon, { name: "edit", ariaLabel: i18n('columnDefinitions.editConfig.editIconAriaLabel', (_a = column.editConfig) === null || _a === void 0 ? void 0 : _a.editIconAriaLabel) }))) : null),
-            sortingStatus && (React.createElement("span", { className: styles['sorting-icon'] },
-                React.createElement(InternalIcon, { name: getSortingIconName(sortingStatus) })))),
+        React.createElement("div", { className: clsx(styles['header-cell-main'], hasSortMenu && styles['header-cell-main-with-menu']) },
+            React.createElement("div", { ref: clickableHeaderRef, "data-focus-id": `sorting-control-${String(columnId)}`, className: clsx(styles['header-cell-content'], {
+                    [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,
+                    [styles['header-cell-content-expandable']]: isExpandable,
+                    [styles['header-cell-content-multi-sorted']]: showPriorityBadge,
+                    [styles['header-cell-content-with-menu']]: hasSortMenu,
+                }), "aria-label": column.ariaLabel
+                    ? column.ariaLabel({
+                        sorted: sorted,
+                        descending: sorted && descending,
+                        disabled: !!sortingDisabled,
+                        sortIndex: multiSortIndex !== null && multiSortIndex !== void 0 ? multiSortIndex : undefined,
+                    })
+                    : undefined, ...(sortingStatus && !sortingDisabled
+                    ? {
+                        onKeyPress: handleKeyPress,
+                        tabIndex: clickableHeaderTabIndex,
+                        role: 'button',
+                        onClick: event => handleClick(event.shiftKey),
+                        // Prevent the browser from extending the text selection on Shift+click.
+                        onMouseDown: (event) => {
+                            if (event.shiftKey) {
+                                event.preventDefault();
+                            }
+                        },
+                    }
+                    : {}) },
+                React.createElement("div", { className: clsx(styles['header-cell-text'], analyticsSelectors['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId },
+                    column.header,
+                    isEditable ? (React.createElement("span", { className: styles['edit-icon'] },
+                        React.createElement(InternalIcon, { name: "edit", ariaLabel: i18n('columnDefinitions.editConfig.editIconAriaLabel', (_a = column.editConfig) === null || _a === void 0 ? void 0 : _a.editIconAriaLabel) }))) : null),
+                sortAccessibleText && React.createElement(ScreenreaderOnly, null, sortAccessibleText),
+                sortingStatus && (React.createElement("span", { className: styles['sorting-icon'] },
+                    showPriorityBadge && (React.createElement("span", { className: styles['sort-priority-badge'], "aria-hidden": "true" }, multiSortIndex)),
+                    React.createElement(InternalIcon, { name: getSortingIconName(sortingStatus) })))),
+            hasSortMenu && (React.createElement(SortMenu, { column: column, inSort: inMultiSort, isSortedAscending: inMultiSort && !descending, isSortedDescending: inMultiSort && descending, i18nStrings: i18nStrings, ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.sortMenuTriggerLabel, ariaDescribedby: headerId, onAction: handleSortMenuAction }))),
         resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-control-${String(columnId)}`, showFocusRing: focusedComponent === `resize-control-${String(columnId)}`, onWidthUpdate: newWidth => updateColumn(columnId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth, roleDescription: i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription), 
             // TODO: Replace with this when strings are available
             // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}

package/lib/internal/template/table/header-cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalIcon from '../../icon/internal';\nimport { KeyCode } from '../../internal/keycode';\nimport { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';\nimport { TableProps } from '../interfaces';\nimport { Divider, Resizer } from '../resizer';\nimport { BaseHeaderCellProps } from './common-props';\nimport { TableThElement } from './th-element';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {\n  column: TableProps.ColumnDefinition<ItemType>;\n  activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n  sortingDescending?: boolean;\n  sortingDisabled?: boolean;\n  stuck?: boolean;\n  onClick(detail: TableProps.SortingState<any>): void;\n  updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n  isEditable?: boolean;\n  columnId: PropertyKey;\n  isExpandable?: boolean;\n  hasDynamicContent?: boolean;\n  colSpan?: number;\n  rowSpan?: number;\n  columnGroupId?: string;\n  isLastChildOfGroup?: boolean;\n  isLast?: boolean;\n}\n\nexport function TableHeaderCell<ItemType>({\n  tabIndex,\n  column,\n  activeSortingColumn,\n  sortingDescending,\n  sortingDisabled,\n  wrapLines,\n  focusedComponent,\n  stuck,\n  sticky,\n  hidden,\n  stripedRows,\n  onClick,\n  colIndex,\n  updateColumn,\n  resizableColumns,\n  resizableStyle,\n  onResizeFinish,\n  isEditable,\n  columnId,\n  stickyState,\n  cellRef,\n  tableRole,\n  resizerRoleDescription,\n  resizerTooltipText,\n  isExpandable,\n  hasDynamicContent,\n  variant,\n  colSpan,\n  rowSpan,\n  columnGroupId,\n  isLastChildOfGroup,\n  isLast,\n  tableVariant,\n}: TableHeaderCellProps<ItemType>) {\n  const i18n = useInternalI18n('table');\n  const sortable = !!column.sortingComparator || !!column.sortingField;\n  const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n  const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\n  const isGrouped = !!columnGroupId || (rowSpan ?? 1) > 1;\n  const handleClick = () =>\n    onClick({\n      sortingColumn: column,\n      isDescending: sorted ? !sortingDescending : false,\n    });\n\n  // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n  // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n  // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n  const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n    if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {\n      e.preventDefault();\n      handleClick();\n    }\n  };\n\n  const headerId = useUniqueId('table-header-');\n\n  const clickableHeaderRef = useRef<HTMLDivElement>(null);\n  const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n  const cellRefObject = useRef<HTMLElement>(null);\n  const cellRefCombined = useMergeRefs(cellRef, cellRefObject);\n\n  // Keep sticky and non-sticky headers in sync for dynamic cell\n  // content changes. This is only needed when:\n  // - Column has dynamic content\n  // - This is the non-sticky version of a sticky header (hidden === true)\n  // - Columns are not resizable\n  useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {\n    updateColumn(columnId, entry.borderBoxWidth);\n  });\n\n  return (\n    <TableThElement\n      resizableStyle={resizableStyle}\n      cellRef={cellRefCombined}\n      sortingStatus={sortingStatus}\n      sortingDisabled={sortingDisabled}\n      focusedComponent={focusedComponent}\n      stuck={stuck}\n      sticky={sticky}\n      resizable={resizableColumns}\n      hidden={hidden}\n      stripedRows={stripedRows}\n      colIndex={colIndex}\n      columnId={columnId}\n      stickyState={stickyState}\n      tableRole={tableRole}\n      variant={variant}\n      tableVariant={tableVariant}\n      colSpan={colSpan}\n      rowSpan={rowSpan}\n      columnGroupId={columnGroupId}\n      isLast={isLast}\n      {...(sortingDisabled\n        ? {}\n        : getAnalyticsMetadataAttribute({\n            action: 'sort',\n            detail: {\n              position: `${colIndex + 1}`,\n              columnId: column.id ? `${column.id}` : '',\n              label: `.${analyticsSelectors['header-cell-text']}`,\n              sortingDescending: `${!sortingDescending}`,\n            },\n          } as GeneratedAnalyticsMetadataTableSort))}\n    >\n      <div\n        ref={clickableHeaderRef}\n        data-focus-id={`sorting-control-${String(columnId)}`}\n        className={clsx(styles['header-cell-content'], {\n          [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n          [styles['header-cell-content-expandable']]: isExpandable,\n        })}\n        aria-label={\n          column.ariaLabel\n            ? column.ariaLabel({\n                sorted: sorted,\n                descending: sorted && !!sortingDescending,\n                disabled: !!sortingDisabled,\n              })\n            : undefined\n        }\n        {...(sortingStatus && !sortingDisabled\n          ? {\n              onKeyPress: handleKeyPress,\n              tabIndex: clickableHeaderTabIndex,\n              role: 'button',\n              onClick: handleClick,\n            }\n          : {})}\n      >\n        <div\n          className={clsx(\n            styles['header-cell-text'],\n            analyticsSelectors['header-cell-text'],\n            wrapLines && styles['header-cell-text-wrap']\n          )}\n          id={headerId}\n        >\n          {column.header}\n          {isEditable ? (\n            <span className={styles['edit-icon']}>\n              <InternalIcon\n                name=\"edit\"\n                ariaLabel={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}\n              />\n            </span>\n          ) : null}\n        </div>\n        {sortingStatus && (\n          <span className={styles['sorting-icon']}>\n            <InternalIcon name={getSortingIconName(sortingStatus)} />\n          </span>\n        )}\n      </div>\n      {resizableColumns ? (\n        <Resizer\n          tabIndex={tabIndex}\n          focusId={`resize-control-${String(columnId)}`}\n          showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n          onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n          onWidthUpdateCommit={onResizeFinish}\n          ariaLabelledby={headerId}\n          minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n          roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n          // TODO: Replace with this when strings are available\n          // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}\n          tooltipText={resizerTooltipText}\n          isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'}\n          isLast={isLast}\n          isGrouped={isGrouped}\n          dividerPosition={isLastChildOfGroup ? 'top' : undefined}\n        />\n      ) : (\n        <Divider\n          className={styles['resize-divider']}\n          position={isLastChildOfGroup ? 'top' : undefined}\n          isGrouped={isGrouped}\n        />\n      )}\n    </TableThElement>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalIcon from '../../icon/internal';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';\nimport { TableProps } from '../interfaces';\nimport {\n  appendSort,\n  getSortIndex,\n  removeSort,\n  replaceSort,\n  setDirection,\n  toggleDirection,\n} from '../multi-column-sort/utils';\nimport { Divider, Resizer } from '../resizer';\nimport { BaseHeaderCellProps } from './common-props';\nimport { SortMenu, SortMenuAction } from './sort-menu';\nimport { TableThElement } from './th-element';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {\n  column: TableProps.ColumnDefinition<ItemType>;\n  activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n  sortingDescending?: boolean;\n  sortingDisabled?: boolean;\n  stuck?: boolean;\n  onClick(detail: TableProps.SortingState<any>): void;\n  multiColumnSort?: TableProps.MultiColumnSort<ItemType>;\n  i18nStrings?: TableProps.I18nStrings;\n  ariaLabels?: TableProps.AriaLabels<ItemType>;\n  updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n  isEditable?: boolean;\n  columnId: PropertyKey;\n  isExpandable?: boolean;\n  hasDynamicContent?: boolean;\n  colSpan?: number;\n  rowSpan?: number;\n  columnGroupId?: string;\n  isLastChildOfGroup?: boolean;\n  isLast?: boolean;\n}\n\nexport function TableHeaderCell<ItemType>({\n  tabIndex,\n  column,\n  activeSortingColumn,\n  sortingDescending,\n  sortingDisabled,\n  wrapLines,\n  focusedComponent,\n  stuck,\n  sticky,\n  hidden,\n  stripedRows,\n  onClick,\n  colIndex,\n  updateColumn,\n  resizableColumns,\n  resizableStyle,\n  onResizeFinish,\n  isEditable,\n  columnId,\n  stickyState,\n  cellRef,\n  tableRole,\n  resizerRoleDescription,\n  resizerTooltipText,\n  isExpandable,\n  hasDynamicContent,\n  variant,\n  colSpan,\n  rowSpan,\n  columnGroupId,\n  isLastChildOfGroup,\n  isLast,\n  tableVariant,\n  multiColumnSort,\n  i18nStrings,\n  ariaLabels,\n}: TableHeaderCellProps<ItemType>) {\n  const i18n = useInternalI18n('table');\n  const sortable = !!column.sortingComparator || !!column.sortingField;\n  const isGrouped = !!columnGroupId || (rowSpan ?? 1) > 1;\n  // The sort menu only renders for a sortable, enabled column under multi-column sort.\n  const hasSortMenu = !!multiColumnSort && sortable && !sortingDisabled;\n\n  // Multi-column sort context — derived from `multiColumnSort.sortingColumns` when present.\n  const multiSortIndex = multiColumnSort ? getSortIndex(multiColumnSort.sortingColumns, column) : null;\n  const multiSortEntry =\n    multiSortIndex !== null && multiColumnSort ? multiColumnSort.sortingColumns[multiSortIndex - 1] : undefined;\n  const inMultiSort = multiSortIndex !== null;\n  const isPrimaryMultiSort = multiSortIndex === 1;\n  // Priority badges are only meaningful when 2+ columns are sorted; with a single column, the position number adds no information.\n  const showPriorityBadge = !!multiColumnSort && multiColumnSort.sortingColumns.length >= 2 && multiSortIndex !== null;\n\n  // For multi-sort, derive sorted/descending from the matching entry; otherwise fall back to single-sort props.\n  const sorted = multiColumnSort ? inMultiSort : !!activeSortingColumn && isSorted(column, activeSortingColumn);\n  const descending = multiColumnSort ? !!multiSortEntry?.isDescending : !!sortingDescending;\n  const sortingStatus = getSortingStatus(sortable, sorted, descending, !!sortingDisabled);\n  // In multi-sort, only the primary column declares aria-sort (ARIA only allows one column sorted at a time).\n  const suppressAriaSort = !!multiColumnSort && inMultiSort && !isPrimaryMultiSort;\n\n  // Screen-reader-only text appended to a sorted column header. The visible header text supplies the column name;\n  // this adds the sort direction (only when `aria-sort` is suppressed, i.e. secondary columns) and the sort priority.\n  const sortDirectionLabel = descending\n    ? i18n('ariaLabels.sortDescending', ariaLabels?.sortDescending)\n    : i18n('ariaLabels.sortAscending', ariaLabels?.sortAscending);\n  const sortPriorityLabel = i18n(\n    'ariaLabels.sortPriority',\n    ariaLabels?.sortPriority,\n    format =>\n      ({ priority }) =>\n        format({ priority })\n  );\n  const sortAccessibleText = inMultiSort\n    ? [\n        suppressAriaSort ? sortDirectionLabel : undefined,\n        showPriorityBadge ? sortPriorityLabel?.({ priority: multiSortIndex ?? 0 }) : undefined,\n      ]\n        .filter(Boolean)\n        .join(' ')\n    : '';\n  const handleClick = (shiftKey = false) => {\n    if (multiColumnSort) {\n      const current = multiColumnSort.sortingColumns;\n      let next: ReadonlyArray<TableProps.SortingState<ItemType>>;\n      if (shiftKey && !inMultiSort) {\n        next = appendSort(current, column, false);\n      } else if (inMultiSort) {\n        next = toggleDirection(current, column);\n      } else {\n        next = replaceSort(column, false);\n      }\n      fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: next });\n      return;\n    }\n    onClick({\n      sortingColumn: column,\n      isDescending: sorted ? !sortingDescending : false,\n    });\n  };\n\n  const handleSortMenuAction = (action: SortMenuAction) => {\n    // The sort menu is only rendered when `multiColumnSort` is set (see render below), so this guard\n    // exists purely to narrow the type for the accesses that follow and is unreachable at runtime.\n    /* istanbul ignore next */\n    if (!multiColumnSort) {\n      return;\n    }\n    const current = multiColumnSort.sortingColumns;\n    let next: ReadonlyArray<TableProps.SortingState<ItemType>>;\n    switch (action) {\n      case 'sort-ascending':\n        next = inMultiSort ? setDirection(current, column, false) : replaceSort(column, false);\n        break;\n      case 'sort-descending':\n        next = inMultiSort ? setDirection(current, column, true) : replaceSort(column, true);\n        break;\n      case 'add-to-sort-ascending':\n        next = appendSort(current, column, false);\n        break;\n      case 'add-to-sort-descending':\n        next = appendSort(current, column, true);\n        break;\n      case 'remove-from-sort':\n        next = removeSort(current, column);\n        break;\n    }\n    fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: next });\n  };\n\n  // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n  // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n  // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n  const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n    if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {\n      e.preventDefault();\n      handleClick(e.shiftKey);\n    }\n  };\n\n  const headerId = useUniqueId('table-header-');\n\n  const clickableHeaderRef = useRef<HTMLDivElement>(null);\n  const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n  const cellRefObject = useRef<HTMLElement>(null);\n  const cellRefCombined = useMergeRefs(cellRef, cellRefObject);\n\n  // Keep sticky and non-sticky headers in sync for dynamic cell\n  // content changes. This is only needed when:\n  // - Column has dynamic content\n  // - This is the non-sticky version of a sticky header (hidden === true)\n  // - Columns are not resizable\n  useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {\n    updateColumn(columnId, entry.borderBoxWidth);\n  });\n\n  return (\n    <TableThElement\n      resizableStyle={resizableStyle}\n      cellRef={cellRefCombined}\n      sortingStatus={sortingStatus}\n      sortingDisabled={sortingDisabled}\n      suppressAriaSort={suppressAriaSort}\n      focusedComponent={focusedComponent}\n      stuck={stuck}\n      sticky={sticky}\n      resizable={resizableColumns}\n      hidden={hidden}\n      stripedRows={stripedRows}\n      colIndex={colIndex}\n      columnId={columnId}\n      stickyState={stickyState}\n      tableRole={tableRole}\n      variant={variant}\n      tableVariant={tableVariant}\n      colSpan={colSpan}\n      rowSpan={rowSpan}\n      columnGroupId={columnGroupId}\n      isLast={isLast}\n      {...(sortingDisabled\n        ? {}\n        : getAnalyticsMetadataAttribute({\n            action: 'sort',\n            detail: {\n              position: `${colIndex + 1}`,\n              columnId: column.id ? `${column.id}` : '',\n              label: `.${analyticsSelectors['header-cell-text']}`,\n              sortingDescending: `${!descending}`,\n            },\n          } as GeneratedAnalyticsMetadataTableSort))}\n    >\n      <div className={clsx(styles['header-cell-main'], hasSortMenu && styles['header-cell-main-with-menu'])}>\n        <div\n          ref={clickableHeaderRef}\n          data-focus-id={`sorting-control-${String(columnId)}`}\n          className={clsx(styles['header-cell-content'], {\n            [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n            [styles['header-cell-content-expandable']]: isExpandable,\n            [styles['header-cell-content-multi-sorted']]: showPriorityBadge,\n            [styles['header-cell-content-with-menu']]: hasSortMenu,\n          })}\n          aria-label={\n            column.ariaLabel\n              ? column.ariaLabel({\n                  sorted: sorted,\n                  descending: sorted && descending,\n                  disabled: !!sortingDisabled,\n                  sortIndex: multiSortIndex ?? undefined,\n                })\n              : undefined\n          }\n          {...(sortingStatus && !sortingDisabled\n            ? {\n                onKeyPress: handleKeyPress,\n                tabIndex: clickableHeaderTabIndex,\n                role: 'button',\n                onClick: event => handleClick(event.shiftKey),\n                // Prevent the browser from extending the text selection on Shift+click.\n                onMouseDown: (event: React.MouseEvent) => {\n                  if (event.shiftKey) {\n                    event.preventDefault();\n                  }\n                },\n              }\n            : {})}\n        >\n          <div\n            className={clsx(\n              styles['header-cell-text'],\n              analyticsSelectors['header-cell-text'],\n              wrapLines && styles['header-cell-text-wrap']\n            )}\n            id={headerId}\n          >\n            {column.header}\n            {isEditable ? (\n              <span className={styles['edit-icon']}>\n                <InternalIcon\n                  name=\"edit\"\n                  ariaLabel={i18n(\n                    'columnDefinitions.editConfig.editIconAriaLabel',\n                    column.editConfig?.editIconAriaLabel\n                  )}\n                />\n              </span>\n            ) : null}\n          </div>\n          {sortAccessibleText && <ScreenreaderOnly>{sortAccessibleText}</ScreenreaderOnly>}\n          {sortingStatus && (\n            <span className={styles['sorting-icon']}>\n              {showPriorityBadge && (\n                <span className={styles['sort-priority-badge']} aria-hidden=\"true\">\n                  {multiSortIndex}\n                </span>\n              )}\n              <InternalIcon name={getSortingIconName(sortingStatus)} />\n            </span>\n          )}\n        </div>\n        {hasSortMenu && (\n          <SortMenu<ItemType>\n            column={column}\n            inSort={inMultiSort}\n            isSortedAscending={inMultiSort && !descending}\n            isSortedDescending={inMultiSort && descending}\n            i18nStrings={i18nStrings}\n            ariaLabel={ariaLabels?.sortMenuTriggerLabel}\n            ariaDescribedby={headerId}\n            onAction={handleSortMenuAction}\n          />\n        )}\n      </div>\n      {resizableColumns ? (\n        <Resizer\n          tabIndex={tabIndex}\n          focusId={`resize-control-${String(columnId)}`}\n          showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n          onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n          onWidthUpdateCommit={onResizeFinish}\n          ariaLabelledby={headerId}\n          minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n          roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n          // TODO: Replace with this when strings are available\n          // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}\n          tooltipText={resizerTooltipText}\n          isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'}\n          isLast={isLast}\n          isGrouped={isGrouped}\n          dividerPosition={isLastChildOfGroup ? 'top' : undefined}\n        />\n      ) : (\n        <Divider\n          className={styles['resize-divider']}\n          position={isLastChildOfGroup ? 'top' : undefined}\n          isGrouped={isGrouped}\n        />\n      )}\n    </TableThElement>\n  );\n}\n"]}

package/lib/internal/template/table/header-cell/sort-menu.d.ts

@@ -0,0 +1,14 @@
+import { TableProps } from '../interfaces';
+export type SortMenuAction = 'sort-ascending' | 'sort-descending' | 'add-to-sort-ascending' | 'add-to-sort-descending' | 'remove-from-sort';
+export interface SortMenuProps<T> {
+    column: TableProps.ColumnDefinition<T>;
+    inSort: boolean;
+    isSortedAscending: boolean;
+    isSortedDescending: boolean;
+    i18nStrings?: TableProps.I18nStrings;
+    ariaLabel?: string;
+    ariaDescribedby?: string;
+    onAction: (action: SortMenuAction) => void;
+}
+export declare function SortMenu<T>({ inSort, isSortedAscending, isSortedDescending, i18nStrings, ariaLabel, ariaDescribedby, onAction, }: SortMenuProps<T>): JSX.Element;
+//# sourceMappingURL=sort-menu.d.ts.map

package/lib/internal/template/table/header-cell/sort-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-menu.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/sort-menu.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,cAAc,GACtB,gBAAgB,GAChB,iBAAiB,GACjB,uBAAuB,GACvB,wBAAwB,GACxB,kBAAkB,CAAC;AAEvB,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,SAAS,EACT,eAAe,EACf,QAAQ,GACT,EAAE,aAAa,CAAC,CAAC,CAAC,eA+DlB"}

package/lib/internal/template/table/header-cell/sort-menu.js

@@ -0,0 +1,50 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalButtonDropdown from '../../button-dropdown/internal';
+import { useInternalI18n } from '../../i18n/context';
+export function SortMenu({ inSort, isSortedAscending, isSortedDescending, i18nStrings, ariaLabel, ariaDescribedby, onAction, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const i18n = useInternalI18n('table');
+    const items = [
+        {
+            id: 'sort-ascending',
+            itemType: 'checkbox',
+            text: (_a = i18n('i18nStrings.sortDropdownSortAscending', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownSortAscending)) !== null && _a !== void 0 ? _a : '',
+            checked: isSortedAscending,
+        },
+        {
+            id: 'sort-descending',
+            itemType: 'checkbox',
+            text: (_b = i18n('i18nStrings.sortDropdownSortDescending', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownSortDescending)) !== null && _b !== void 0 ? _b : '',
+            checked: isSortedDescending,
+        },
+        {
+            id: 'multi-column-sort-group',
+            itemType: 'group',
+            text: (_c = i18n('i18nStrings.sortDropdownMultiColumnSortGroup', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownMultiColumnSortGroup)) !== null && _c !== void 0 ? _c : '',
+            items: [
+                {
+                    id: 'add-to-sort-ascending',
+                    text: (_d = i18n('i18nStrings.sortDropdownAddToSortAscending', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownAddToSortAscending)) !== null && _d !== void 0 ? _d : '',
+                    disabled: inSort,
+                    disabledReason: i18n('i18nStrings.sortDropdownAddToSortDisabledReason', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownAddToSortDisabledReason),
+                },
+                {
+                    id: 'add-to-sort-descending',
+                    text: (_e = i18n('i18nStrings.sortDropdownAddToSortDescending', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownAddToSortDescending)) !== null && _e !== void 0 ? _e : '',
+                    disabled: inSort,
+                    disabledReason: i18n('i18nStrings.sortDropdownAddToSortDisabledReason', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownAddToSortDisabledReason),
+                },
+                {
+                    id: 'remove-from-sort',
+                    text: (_f = i18n('i18nStrings.sortDropdownRemoveFromSort', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownRemoveFromSort)) !== null && _f !== void 0 ? _f : '',
+                    disabled: !inSort,
+                    disabledReason: i18n('i18nStrings.sortDropdownRemoveFromSortDisabledReason', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.sortDropdownRemoveFromSortDisabledReason),
+                },
+            ],
+        },
+    ];
+    return (React.createElement(InternalButtonDropdown, { items: items, variant: "icon", compactTrigger: true, expandToViewport: true, ariaLabel: (_g = i18n('ariaLabels.sortMenuTriggerLabel', ariaLabel)) !== null && _g !== void 0 ? _g : '', ariaDescribedby: ariaDescribedby, onItemClick: ({ detail }) => onAction(detail.id) }));
+}
+//# sourceMappingURL=sort-menu.js.map

package/lib/internal/template/table/header-cell/sort-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-menu.js","sourceRoot":"","sources":["../../../../src/table/header-cell/sort-menu.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAqBrD,MAAM,UAAU,QAAQ,CAAI,EAC1B,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,SAAS,EACT,eAAe,EACf,QAAQ,GACS;;IACjB,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,KAAK,GAAsC;QAC/C;YACE,EAAE,EAAE,gBAAgB;YACpB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,MAAA,IAAI,CAAC,uCAAuC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CAAC,mCAAI,EAAE;YACjG,OAAO,EAAE,iBAAiB;SAC3B;QACD;YACE,EAAE,EAAE,iBAAiB;YACrB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,MAAA,IAAI,CAAC,wCAAwC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,0BAA0B,CAAC,mCAAI,EAAE;YACnG,OAAO,EAAE,kBAAkB;SAC5B;QACD;YACE,EAAE,EAAE,yBAAyB;YAC7B,QAAQ,EAAE,OAAO;YACjB,IAAI,EAAE,MAAA,IAAI,CAAC,8CAA8C,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gCAAgC,CAAC,mCAAI,EAAE;YAC/G,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,uBAAuB;oBAC3B,IAAI,EAAE,MAAA,IAAI,CAAC,4CAA4C,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAAC,mCAAI,EAAE;oBAC3G,QAAQ,EAAE,MAAM;oBAChB,cAAc,EAAE,IAAI,CAClB,iDAAiD,EACjD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mCAAmC,CACjD;iBACF;gBACD;oBACE,EAAE,EAAE,wBAAwB;oBAC5B,IAAI,EAAE,MAAA,IAAI,CAAC,6CAA6C,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,+BAA+B,CAAC,mCAAI,EAAE;oBAC7G,QAAQ,EAAE,MAAM;oBAChB,cAAc,EAAE,IAAI,CAClB,iDAAiD,EACjD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mCAAmC,CACjD;iBACF;gBACD;oBACE,EAAE,EAAE,kBAAkB;oBACtB,IAAI,EAAE,MAAA,IAAI,CAAC,wCAAwC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,0BAA0B,CAAC,mCAAI,EAAE;oBACnG,QAAQ,EAAE,CAAC,MAAM;oBACjB,cAAc,EAAE,IAAI,CAClB,sDAAsD,EACtD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wCAAwC,CACtD;iBACF;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,sBAAsB,IACrB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,MAAM,EACd,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,IAAI,EACtB,SAAS,EAAE,MAAA,IAAI,CAAC,iCAAiC,EAAE,SAAS,CAAC,mCAAI,EAAE,EACnE,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAoB,CAAC,GAClE,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ButtonDropdownProps } from '../../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../../button-dropdown/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport { TableProps } from '../interfaces';\n\nexport type SortMenuAction =\n  | 'sort-ascending'\n  | 'sort-descending'\n  | 'add-to-sort-ascending'\n  | 'add-to-sort-descending'\n  | 'remove-from-sort';\n\nexport interface SortMenuProps<T> {\n  column: TableProps.ColumnDefinition<T>;\n  inSort: boolean;\n  isSortedAscending: boolean;\n  isSortedDescending: boolean;\n  i18nStrings?: TableProps.I18nStrings;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n  onAction: (action: SortMenuAction) => void;\n}\n\nexport function SortMenu<T>({\n  inSort,\n  isSortedAscending,\n  isSortedDescending,\n  i18nStrings,\n  ariaLabel,\n  ariaDescribedby,\n  onAction,\n}: SortMenuProps<T>) {\n  const i18n = useInternalI18n('table');\n\n  const items: ButtonDropdownProps.ItemOrGroup[] = [\n    {\n      id: 'sort-ascending',\n      itemType: 'checkbox',\n      text: i18n('i18nStrings.sortDropdownSortAscending', i18nStrings?.sortDropdownSortAscending) ?? '',\n      checked: isSortedAscending,\n    },\n    {\n      id: 'sort-descending',\n      itemType: 'checkbox',\n      text: i18n('i18nStrings.sortDropdownSortDescending', i18nStrings?.sortDropdownSortDescending) ?? '',\n      checked: isSortedDescending,\n    },\n    {\n      id: 'multi-column-sort-group',\n      itemType: 'group',\n      text: i18n('i18nStrings.sortDropdownMultiColumnSortGroup', i18nStrings?.sortDropdownMultiColumnSortGroup) ?? '',\n      items: [\n        {\n          id: 'add-to-sort-ascending',\n          text: i18n('i18nStrings.sortDropdownAddToSortAscending', i18nStrings?.sortDropdownAddToSortAscending) ?? '',\n          disabled: inSort,\n          disabledReason: i18n(\n            'i18nStrings.sortDropdownAddToSortDisabledReason',\n            i18nStrings?.sortDropdownAddToSortDisabledReason\n          ),\n        },\n        {\n          id: 'add-to-sort-descending',\n          text: i18n('i18nStrings.sortDropdownAddToSortDescending', i18nStrings?.sortDropdownAddToSortDescending) ?? '',\n          disabled: inSort,\n          disabledReason: i18n(\n            'i18nStrings.sortDropdownAddToSortDisabledReason',\n            i18nStrings?.sortDropdownAddToSortDisabledReason\n          ),\n        },\n        {\n          id: 'remove-from-sort',\n          text: i18n('i18nStrings.sortDropdownRemoveFromSort', i18nStrings?.sortDropdownRemoveFromSort) ?? '',\n          disabled: !inSort,\n          disabledReason: i18n(\n            'i18nStrings.sortDropdownRemoveFromSortDisabledReason',\n            i18nStrings?.sortDropdownRemoveFromSortDisabledReason\n          ),\n        },\n      ],\n    },\n  ];\n\n  return (\n    <InternalButtonDropdown\n      items={items}\n      variant=\"icon\"\n      compactTrigger={true}\n      expandToViewport={true}\n      ariaLabel={i18n('ariaLabels.sortMenuTriggerLabel', ariaLabel) ?? ''}\n      ariaDescribedby={ariaDescribedby}\n      onItemClick={({ detail }) => onAction(detail.id as SortMenuAction)}\n    />\n  );\n}\n"]}

package/lib/internal/template/table/header-cell/styles.css.js

@@ -1,38 +1,43 @@
 
     import './styles.scoped.css';
     export default {
-  "header-cell": "awsui_header-cell_1spae_wqnmg_149",
-  "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_wqnmg_183",
-  "header-cell-group": "awsui_header-cell-group_1spae_wqnmg_204",
-  "header-cell-grouped": "awsui_header-cell-grouped_1spae_wqnmg_204",
-  "header-cell-spans-rows": "awsui_header-cell-spans-rows_1spae_wqnmg_204",
-  "resize-divider": "awsui_resize-divider_1spae_wqnmg_209",
-  "header-cell-sticky": "awsui_header-cell-sticky_1spae_wqnmg_212",
-  "header-cell-stuck": "awsui_header-cell-stuck_1spae_wqnmg_218",
-  "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_wqnmg_218",
-  "header-cell-hidden": "awsui_header-cell-hidden_1spae_wqnmg_224",
-  "header-cell-variant-embedded": "awsui_header-cell-variant-embedded_1spae_wqnmg_227",
-  "is-visual-refresh": "awsui_is-visual-refresh_1spae_wqnmg_227",
-  "sticky-cell": "awsui_sticky-cell_1spae_wqnmg_227",
-  "header-cell-variant-borderless": "awsui_header-cell-variant-borderless_1spae_wqnmg_227",
-  "header-cell-sortable": "awsui_header-cell-sortable_1spae_wqnmg_230",
-  "table-variant-full-page": "awsui_table-variant-full-page_1spae_wqnmg_251",
-  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_wqnmg_254",
-  "has-selection": "awsui_has-selection_1spae_wqnmg_254",
-  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_wqnmg_257",
-  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_wqnmg_269",
-  "sorting-icon": "awsui_sorting-icon_1spae_wqnmg_279",
-  "edit-icon": "awsui_edit-icon_1spae_wqnmg_287",
-  "header-cell-content": "awsui_header-cell-content_1spae_wqnmg_293",
-  "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_wqnmg_299",
-  "header-cell-disabled": "awsui_header-cell-disabled_1spae_wqnmg_354",
-  "header-cell-sorted": "awsui_header-cell-sorted_1spae_wqnmg_354",
-  "header-cell-text": "awsui_header-cell-text_1spae_wqnmg_385",
-  "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_wqnmg_389",
-  "header-cell-ascending": "awsui_header-cell-ascending_1spae_wqnmg_395",
-  "header-cell-descending": "awsui_header-cell-descending_1spae_wqnmg_396",
-  "has-striped-rows": "awsui_has-striped-rows_1spae_wqnmg_510",
-  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_wqnmg_510",
-  "header-cell-resizable": "awsui_header-cell-resizable_1spae_wqnmg_522"
+  "header-cell": "awsui_header-cell_1spae_1oja5_149",
+  "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1oja5_183",
+  "header-cell-group": "awsui_header-cell-group_1spae_1oja5_204",
+  "header-cell-grouped": "awsui_header-cell-grouped_1spae_1oja5_204",
+  "header-cell-spans-rows": "awsui_header-cell-spans-rows_1spae_1oja5_204",
+  "resize-divider": "awsui_resize-divider_1spae_1oja5_209",
+  "header-cell-sticky": "awsui_header-cell-sticky_1spae_1oja5_212",
+  "header-cell-stuck": "awsui_header-cell-stuck_1spae_1oja5_218",
+  "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1oja5_218",
+  "header-cell-hidden": "awsui_header-cell-hidden_1spae_1oja5_224",
+  "header-cell-variant-embedded": "awsui_header-cell-variant-embedded_1spae_1oja5_227",
+  "is-visual-refresh": "awsui_is-visual-refresh_1spae_1oja5_227",
+  "sticky-cell": "awsui_sticky-cell_1spae_1oja5_227",
+  "header-cell-variant-borderless": "awsui_header-cell-variant-borderless_1spae_1oja5_227",
+  "header-cell-sortable": "awsui_header-cell-sortable_1spae_1oja5_230",
+  "table-variant-full-page": "awsui_table-variant-full-page_1spae_1oja5_251",
+  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_1oja5_254",
+  "has-selection": "awsui_has-selection_1spae_1oja5_254",
+  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_1oja5_257",
+  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_1oja5_269",
+  "sorting-icon": "awsui_sorting-icon_1spae_1oja5_279",
+  "header-cell-main": "awsui_header-cell-main_1spae_1oja5_287",
+  "sort-priority-badge": "awsui_sort-priority-badge_1spae_1oja5_292",
+  "edit-icon": "awsui_edit-icon_1spae_1oja5_296",
+  "header-cell-content": "awsui_header-cell-content_1spae_1oja5_302",
+  "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_1oja5_308",
+  "header-cell-content-multi-sorted": "awsui_header-cell-content-multi-sorted_1spae_1oja5_366",
+  "header-cell-disabled": "awsui_header-cell-disabled_1spae_1oja5_369",
+  "header-cell-sorted": "awsui_header-cell-sorted_1spae_1oja5_369",
+  "header-cell-main-with-menu": "awsui_header-cell-main-with-menu_1spae_1oja5_373",
+  "header-cell-content-with-menu": "awsui_header-cell-content-with-menu_1spae_1oja5_378",
+  "header-cell-text": "awsui_header-cell-text_1spae_1oja5_410",
+  "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1oja5_414",
+  "header-cell-ascending": "awsui_header-cell-ascending_1spae_1oja5_420",
+  "header-cell-descending": "awsui_header-cell-descending_1spae_1oja5_421",
+  "has-striped-rows": "awsui_has-striped-rows_1spae_1oja5_535",
+  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_1oja5_535",
+  "header-cell-resizable": "awsui_header-cell-resizable_1spae_1oja5_547"
 };