@cloudscape-design/components 3.0.220 → 3.0.222

package/table/thead.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
@@ -13,20 +12,21 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import styles from './styles.css.js';
 import headerCellStyles from './header-cell/styles.css.js';
 import ScreenreaderOnly from '../internal/components/screenreader-only';
-var Thead = React.forwardRef(function (_a, outerRef) {
-    var containerWidth = _a.containerWidth, selectionType = _a.selectionType, selectAllProps = _a.selectAllProps, columnDefinitions = _a.columnDefinitions, sortingColumn = _a.sortingColumn, sortingDisabled = _a.sortingDisabled, sortingDescending = _a.sortingDescending, resizableColumns = _a.resizableColumns, variant = _a.variant, wrapLines = _a.wrapLines, onFocusMove = _a.onFocusMove, onCellFocus = _a.onCellFocus, onCellBlur = _a.onCellBlur, onSortingChange = _a.onSortingChange, onResizeFinish = _a.onResizeFinish, singleSelectionHeaderAriaLabel = _a.singleSelectionHeaderAriaLabel, stripedRows = _a.stripedRows, _b = _a.showFocusRing, showFocusRing = _b === void 0 ? null : _b, _c = _a.sticky, sticky = _c === void 0 ? false : _c, _d = _a.hidden, hidden = _d === void 0 ? false : _d, _e = _a.stuck, stuck = _e === void 0 ? false : _e;
-    var isVisualRefresh = useVisualRefresh();
-    var headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles["header-cell-variant-".concat(variant)], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck'], stripedRows && headerCellStyles['has-striped-rows'], isVisualRefresh && headerCellStyles['is-visual-refresh']);
-    var selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header'], isVisualRefresh && styles['is-visual-refresh']);
-    var _f = useColumnWidths(), columnWidths = _f.columnWidths, totalWidth = _f.totalWidth, updateColumn = _f.updateColumn;
+const Thead = React.forwardRef(({ containerWidth, selectionType, selectAllProps, columnDefinitions, sortingColumn, sortingDisabled, sortingDescending, resizableColumns, variant, wrapLines, onFocusMove, onSortingChange, onResizeFinish, singleSelectionHeaderAriaLabel, stripedRows, sticky = false, hidden = false, stuck = false, focusedComponent, onFocusedComponentChange, }, outerRef) => {
+    const isVisualRefresh = useVisualRefresh();
+    const headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles[`header-cell-variant-${variant}`], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck'], stripedRows && headerCellStyles['has-striped-rows'], isVisualRefresh && headerCellStyles['is-visual-refresh']);
+    const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header'], isVisualRefresh && styles['is-visual-refresh']);
+    const { columnWidths, totalWidth, updateColumn } = useColumnWidths();
     return (React.createElement("thead", { className: clsx(!hidden && styles['thead-active']) },
-        React.createElement("tr", __assign({}, focusMarkers.all, { ref: outerRef, "aria-rowindex": 1 }),
+        React.createElement("tr", Object.assign({}, focusMarkers.all, { ref: outerRef, "aria-rowindex": 1 }),
             selectionType === 'multi' && (React.createElement("th", { className: clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden']), scope: "col" },
-                React.createElement(SelectionControl, __assign({ onFocusDown: function (event) { return onFocusMove(event.target, -1, +1); } }, selectAllProps, (hidden ? { tabIndex: -1 } : {}))))),
+                React.createElement(SelectionControl, Object.assign({ onFocusDown: event => {
+                        onFocusMove(event.target, -1, +1);
+                    }, focusedComponent: focusedComponent, onFocusedComponentChange: onFocusedComponentChange }, selectAllProps, (sticky ? { tabIndex: -1 } : {}))))),
             selectionType === 'single' && (React.createElement("th", { className: clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden']), scope: "col" },
                 React.createElement(ScreenreaderOnly, null, singleSelectionHeaderAriaLabel))),
-            columnDefinitions.map(function (column, colIndex) {
-                var widthOverride;
+            columnDefinitions.map((column, colIndex) => {
+                let widthOverride;
                 if (resizableColumns) {
                     if (columnWidths) {
                         // use stateful value if available
@@ -40,8 +40,8 @@ var Thead = React.forwardRef(function (_a, outerRef) {
                 return (React.createElement(TableHeaderCell, { key: getColumnKey(column, colIndex), className: headerCellClass, style: {
                         width: widthOverride || column.width,
                         minWidth: sticky ? undefined : column.minWidth,
-                        maxWidth: resizableColumns || sticky ? undefined : column.maxWidth
-                    }, tabIndex: sticky ? -1 : 0, showFocusRing: colIndex === showFocusRing, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, hidden: hidden, colIndex: colIndex, updateColumn: updateColumn, onResizeFinish: function () { return onResizeFinish(columnWidths); }, resizableColumns: resizableColumns, onClick: function (detail) { return fireNonCancelableEvent(onSortingChange, detail); }, onFocus: function () { return onCellFocus === null || onCellFocus === void 0 ? void 0 : onCellFocus(colIndex); }, onBlur: onCellBlur, isEditable: !!column.editConfig }));
+                        maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,
+                    }, tabIndex: sticky ? -1 : 0, focusedComponent: focusedComponent, onFocusedComponentChange: onFocusedComponentChange, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, hidden: hidden, colIndex: colIndex, updateColumn: updateColumn, onResizeFinish: () => onResizeFinish(columnWidths), resizableColumns: resizableColumns, onClick: detail => fireNonCancelableEvent(onSortingChange, detail), isEditable: !!column.editConfig }));
             }))));
 });
 export default Thead;

package/table/thead.js.map

@@ -1 +1 @@
-{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport interface TheadProps {\n  containerWidth: number | null;\n  selectionType: TableProps.SelectionType | undefined;\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  sortingColumn: TableProps.SortingColumn<any> | undefined;\n  sortingDescending: boolean | undefined;\n  sortingDisabled: boolean | undefined;\n  variant: TableProps.Variant;\n  wrapLines: boolean | undefined;\n  resizableColumns: boolean | undefined;\n  selectAllProps: SelectionControlProps;\n  onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n  onCellFocus?: (colIndex: number) => void;\n  onCellBlur?: () => void;\n  onResizeFinish: (newWidths: Record<string, number>) => void;\n  showFocusRing?: number | null;\n  onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n  sticky?: boolean;\n  hidden?: boolean;\n  stuck?: boolean;\n  singleSelectionHeaderAriaLabel?: string;\n  stripedRows?: boolean;\n}\n\nconst Thead = React.forwardRef(\n  (\n    {\n      containerWidth,\n      selectionType,\n      selectAllProps,\n      columnDefinitions,\n      sortingColumn,\n      sortingDisabled,\n      sortingDescending,\n      resizableColumns,\n      variant,\n      wrapLines,\n      onFocusMove,\n      onCellFocus,\n      onCellBlur,\n      onSortingChange,\n      onResizeFinish,\n      singleSelectionHeaderAriaLabel,\n      stripedRows,\n      showFocusRing = null,\n      sticky = false,\n      hidden = false,\n      stuck = false,\n    }: TheadProps,\n    outerRef: React.Ref<HTMLTableRowElement>\n  ) => {\n    const isVisualRefresh = useVisualRefresh();\n\n    const headerCellClass = clsx(\n      headerCellStyles['header-cell'],\n      headerCellStyles[`header-cell-variant-${variant}`],\n      sticky && headerCellStyles['header-cell-sticky'],\n      stuck && headerCellStyles['header-cell-stuck'],\n      stripedRows && headerCellStyles['has-striped-rows'],\n      isVisualRefresh && headerCellStyles['is-visual-refresh']\n    );\n\n    const selectionCellClass = clsx(\n      styles['selection-control'],\n      styles['selection-control-header'],\n      isVisualRefresh && styles['is-visual-refresh']\n    );\n\n    const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n    return (\n      <thead className={clsx(!hidden && styles['thead-active'])}>\n        <tr {...focusMarkers.all} ref={outerRef} aria-rowindex={1}>\n          {selectionType === 'multi' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <SelectionControl\n                onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n                {...selectAllProps}\n                {...(hidden ? { tabIndex: -1 } : {})}\n              />\n            </th>\n          )}\n          {selectionType === 'single' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n            </th>\n          )}\n          {columnDefinitions.map((column, colIndex) => {\n            let widthOverride;\n            if (resizableColumns) {\n              if (columnWidths) {\n                // use stateful value if available\n                widthOverride = columnWidths[getColumnKey(column, colIndex)];\n              }\n              if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n                // let the last column grow and fill the container width\n                widthOverride = 'auto';\n              }\n            }\n            return (\n              <TableHeaderCell\n                key={getColumnKey(column, colIndex)}\n                className={headerCellClass}\n                style={{\n                  width: widthOverride || column.width,\n                  minWidth: sticky ? undefined : column.minWidth,\n                  maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n                }}\n                tabIndex={sticky ? -1 : 0}\n                showFocusRing={colIndex === showFocusRing}\n                column={column}\n                activeSortingColumn={sortingColumn}\n                sortingDescending={sortingDescending}\n                sortingDisabled={sortingDisabled}\n                wrapLines={wrapLines}\n                hidden={hidden}\n                colIndex={colIndex}\n                updateColumn={updateColumn}\n                onResizeFinish={() => onResizeFinish(columnWidths)}\n                resizableColumns={resizableColumns}\n                onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n                onFocus={() => onCellFocus?.(colIndex)}\n                onBlur={onCellBlur}\n                isEditable={!!column.editConfig}\n              />\n            );\n          })}\n        </tr>\n      </thead>\n    );\n  }\n);\n\nexport default Thead;\n"]}
+{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport type InteractiveComponent =\n  | { type: 'selection' }\n  | { type: 'column'; col: number }\n  | { type: 'resizer'; col: number };\n\nexport interface TheadProps {\n  containerWidth: number | null;\n  selectionType: TableProps.SelectionType | undefined;\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  sortingColumn: TableProps.SortingColumn<any> | undefined;\n  sortingDescending: boolean | undefined;\n  sortingDisabled: boolean | undefined;\n  variant: TableProps.Variant;\n  wrapLines: boolean | undefined;\n  resizableColumns: boolean | undefined;\n  selectAllProps: SelectionControlProps;\n  onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n  onResizeFinish: (newWidths: Record<string, number>) => void;\n  onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n  sticky?: boolean;\n  hidden?: boolean;\n  stuck?: boolean;\n  singleSelectionHeaderAriaLabel?: string;\n  stripedRows?: boolean;\n\n  focusedComponent?: InteractiveComponent | null;\n  onFocusedComponentChange?: (element: InteractiveComponent | null) => void;\n}\n\nconst Thead = React.forwardRef(\n  (\n    {\n      containerWidth,\n      selectionType,\n      selectAllProps,\n      columnDefinitions,\n      sortingColumn,\n      sortingDisabled,\n      sortingDescending,\n      resizableColumns,\n      variant,\n      wrapLines,\n      onFocusMove,\n      onSortingChange,\n      onResizeFinish,\n      singleSelectionHeaderAriaLabel,\n      stripedRows,\n      sticky = false,\n      hidden = false,\n      stuck = false,\n\n      focusedComponent,\n      onFocusedComponentChange,\n    }: TheadProps,\n    outerRef: React.Ref<HTMLTableRowElement>\n  ) => {\n    const isVisualRefresh = useVisualRefresh();\n\n    const headerCellClass = clsx(\n      headerCellStyles['header-cell'],\n      headerCellStyles[`header-cell-variant-${variant}`],\n      sticky && headerCellStyles['header-cell-sticky'],\n      stuck && headerCellStyles['header-cell-stuck'],\n      stripedRows && headerCellStyles['has-striped-rows'],\n      isVisualRefresh && headerCellStyles['is-visual-refresh']\n    );\n\n    const selectionCellClass = clsx(\n      styles['selection-control'],\n      styles['selection-control-header'],\n      isVisualRefresh && styles['is-visual-refresh']\n    );\n\n    const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n    return (\n      <thead className={clsx(!hidden && styles['thead-active'])}>\n        <tr {...focusMarkers.all} ref={outerRef} aria-rowindex={1}>\n          {selectionType === 'multi' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <SelectionControl\n                onFocusDown={event => {\n                  onFocusMove!(event.target as HTMLElement, -1, +1);\n                }}\n                focusedComponent={focusedComponent}\n                onFocusedComponentChange={onFocusedComponentChange}\n                {...selectAllProps}\n                {...(sticky ? { tabIndex: -1 } : {})}\n              />\n            </th>\n          )}\n          {selectionType === 'single' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n            </th>\n          )}\n          {columnDefinitions.map((column, colIndex) => {\n            let widthOverride;\n            if (resizableColumns) {\n              if (columnWidths) {\n                // use stateful value if available\n                widthOverride = columnWidths[getColumnKey(column, colIndex)];\n              }\n              if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n                // let the last column grow and fill the container width\n                widthOverride = 'auto';\n              }\n            }\n            return (\n              <TableHeaderCell\n                key={getColumnKey(column, colIndex)}\n                className={headerCellClass}\n                style={{\n                  width: widthOverride || column.width,\n                  minWidth: sticky ? undefined : column.minWidth,\n                  maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n                }}\n                tabIndex={sticky ? -1 : 0}\n                focusedComponent={focusedComponent}\n                onFocusedComponentChange={onFocusedComponentChange}\n                column={column}\n                activeSortingColumn={sortingColumn}\n                sortingDescending={sortingDescending}\n                sortingDisabled={sortingDisabled}\n                wrapLines={wrapLines}\n                hidden={hidden}\n                colIndex={colIndex}\n                updateColumn={updateColumn}\n                onResizeFinish={() => onResizeFinish(columnWidths)}\n                resizableColumns={resizableColumns}\n                onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n                isEditable={!!column.editConfig}\n              />\n            );\n          })}\n        </tr>\n      </thead>\n    );\n  }\n);\n\nexport default Thead;\n"]}

package/table/tools-header.js

@@ -4,11 +4,10 @@ import clsx from 'clsx';
 import React from 'react';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import styles from './styles.css.js';
-export default function ToolsHeader(_a) {
-    var header = _a.header, filter = _a.filter, pagination = _a.pagination, preferences = _a.preferences;
-    var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
-    var isSmall = breakpoint === 'default';
-    var hasTools = filter || pagination || preferences;
+export default function ToolsHeader({ header, filter, pagination, preferences }) {
+    const [breakpoint, ref] = useContainerBreakpoints(['xs']);
+    const isSmall = breakpoint === 'default';
+    const hasTools = filter || pagination || preferences;
     return (React.createElement(React.Fragment, null,
         header,
         hasTools && (React.createElement("div", { ref: ref, className: clsx(styles.tools, isSmall && styles['tools-small']) },

package/table/tools-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"tools-header.js","sourceRoot":"","sources":["../../../src/table/tools-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAA6D;QAA3D,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,WAAW,iBAAA;IACrE,IAAA,KAAoB,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAlD,UAAU,QAAA,EAAE,GAAG,QAAmC,CAAC;IAC1D,IAAM,OAAO,GAAG,UAAU,KAAK,SAAS,CAAC;IACzC,IAAM,QAAQ,GAAG,MAAM,IAAI,UAAU,IAAI,WAAW,CAAC;IACrD,OAAO,CACL;QACG,MAAM;QACN,QAAQ,IAAI,CACX,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC;YAC3E,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,MAAM,CAAO;YACpE,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBACxC,UAAU,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,UAAU,CAAO;gBAC5E,WAAW,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,WAAW,CAAO,CAC5E,CACF,CACP,CACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport styles from './styles.css.js';\n\ninterface ToolsHeaderProps {\n  header: React.ReactNode;\n  filter?: React.ReactNode;\n  pagination?: React.ReactNode;\n  preferences?: React.ReactNode;\n}\n\nexport default function ToolsHeader({ header, filter, pagination, preferences }: ToolsHeaderProps) {\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const isSmall = breakpoint === 'default';\n  const hasTools = filter || pagination || preferences;\n  return (\n    <>\n      {header}\n      {hasTools && (\n        <div ref={ref} className={clsx(styles.tools, isSmall && styles['tools-small'])}>\n          {filter && <div className={styles['tools-filtering']}>{filter}</div>}\n          <div className={styles['tools-align-right']}>\n            {pagination && <div className={styles['tools-pagination']}>{pagination}</div>}\n            {preferences && <div className={styles['tools-preferences']}>{preferences}</div>}\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"tools-header.js","sourceRoot":"","sources":["../../../src/table/tools-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAoB;IAC/F,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,KAAK,SAAS,CAAC;IACzC,MAAM,QAAQ,GAAG,MAAM,IAAI,UAAU,IAAI,WAAW,CAAC;IACrD,OAAO,CACL;QACG,MAAM;QACN,QAAQ,IAAI,CACX,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC;YAC3E,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,MAAM,CAAO;YACpE,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBACxC,UAAU,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,UAAU,CAAO;gBAC5E,WAAW,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,WAAW,CAAO,CAC5E,CACF,CACP,CACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport styles from './styles.css.js';\n\ninterface ToolsHeaderProps {\n  header: React.ReactNode;\n  filter?: React.ReactNode;\n  pagination?: React.ReactNode;\n  preferences?: React.ReactNode;\n}\n\nexport default function ToolsHeader({ header, filter, pagination, preferences }: ToolsHeaderProps) {\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const isSmall = breakpoint === 'default';\n  const hasTools = filter || pagination || preferences;\n  return (\n    <>\n      {header}\n      {hasTools && (\n        <div ref={ref} className={clsx(styles.tools, isSmall && styles['tools-small'])}>\n          {filter && <div className={styles['tools-filtering']}>{filter}</div>}\n          <div className={styles['tools-align-right']}>\n            {pagination && <div className={styles['tools-pagination']}>{pagination}</div>}\n            {preferences && <div className={styles['tools-preferences']}>{preferences}</div>}\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/table/use-column-widths.js

@@ -1,37 +1,35 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState, createContext, useContext } from 'react';
 import { getColumnKey } from './utils';
 import headerCellStyles from './header-cell/styles.css.js';
 import { warnOnce } from '../internal/logging';
-export var DEFAULT_WIDTH = 120;
-var SELECTION_CELL_WIDTH = 54;
+export const DEFAULT_WIDTH = 120;
+const SELECTION_CELL_WIDTH = 54;
 function checkProperty(column, name) {
-    var value = column[name];
+    const value = column[name];
     if (typeof value !== 'number' && typeof value !== 'undefined') {
-        warnOnce('Table', "resizableColumns feature requires ".concat(name, " property to be a number, got ").concat(value, ". The component may work incorrectly."));
+        warnOnce('Table', `resizableColumns feature requires ${name} property to be a number, got ${value}. The component may work incorrectly.`);
     }
 }
 export function checkColumnWidths(columnDefinitions) {
-    for (var _i = 0, columnDefinitions_1 = columnDefinitions; _i < columnDefinitions_1.length; _i++) {
-        var column = columnDefinitions_1[_i];
+    for (const column of columnDefinitions) {
         checkProperty(column, 'minWidth');
         checkProperty(column, 'width');
     }
 }
 function readWidths(headerEl, columnDefinitions, hasSelection) {
-    var result = {};
-    for (var index = 0; index < columnDefinitions.length; index++) {
-        var column = columnDefinitions[index];
-        var id = getColumnKey(columnDefinitions[index], index);
-        var width = column.width || 0;
-        var minWidth = column.minWidth || width || DEFAULT_WIDTH;
+    const result = {};
+    for (let index = 0; index < columnDefinitions.length; index++) {
+        const column = columnDefinitions[index];
+        const id = getColumnKey(columnDefinitions[index], index);
+        let width = column.width || 0;
+        const minWidth = column.minWidth || width || DEFAULT_WIDTH;
         if (!width && // read width from the DOM if it is missing in the config
             index !== columnDefinitions.length - 1 // skip reading for the last column, because it expands to fully fit the container
         ) {
-            var colIndex = hasSelection ? index + 2 : index + 1;
-            var colEl = headerEl.querySelector(".".concat(headerCellStyles['header-cell'], ":nth-child(").concat(colIndex, ")"));
+            const colIndex = hasSelection ? index + 2 : index + 1;
+            const colEl = headerEl.querySelector(`.${headerCellStyles['header-cell']}:nth-child(${colIndex})`);
             width = colEl.getBoundingClientRect().width;
         }
         result[id] = Math.max(width, minWidth);
@@ -39,63 +37,55 @@ function readWidths(headerEl, columnDefinitions, hasSelection) {
     return result;
 }
 function updateWidths(columnDefinitions, oldWidths, newWidth, colIndex) {
-    var _a;
-    var definition = columnDefinitions[colIndex];
-    var id = getColumnKey(definition, colIndex);
-    var minWidth = typeof definition.minWidth === 'number' ? definition.minWidth : DEFAULT_WIDTH;
+    const definition = columnDefinitions[colIndex];
+    const id = getColumnKey(definition, colIndex);
+    const minWidth = typeof definition.minWidth === 'number' ? definition.minWidth : DEFAULT_WIDTH;
     newWidth = Math.max(newWidth, minWidth);
     if (oldWidths[id] === newWidth) {
         return oldWidths;
     }
-    return __assign(__assign({}, oldWidths), (_a = {}, _a[id] = newWidth, _a));
+    return Object.assign(Object.assign({}, oldWidths), { [id]: newWidth });
 }
-var WidthsContext = createContext({
+const WidthsContext = createContext({
     totalWidth: 0,
     columnWidths: {},
-    updateColumn: function () { }
+    updateColumn: () => { },
 });
-export function ColumnWidthsProvider(_a) {
-    var tableRef = _a.tableRef, visibleColumnDefinitions = _a.visibleColumnDefinitions, resizableColumns = _a.resizableColumns, hasSelection = _a.hasSelection, children = _a.children;
-    var visibleColumns = useRef(null);
-    var _b = useState({}), columnWidths = _b[0], setColumnWidths = _b[1];
-    useEffect(function () {
+export function ColumnWidthsProvider({ tableRef, visibleColumnDefinitions, resizableColumns, hasSelection, children, }) {
+    const visibleColumns = useRef(null);
+    const [columnWidths, setColumnWidths] = useState({});
+    useEffect(() => {
         if (!resizableColumns) {
             return;
         }
-        var lastVisible = visibleColumns.current;
+        const lastVisible = visibleColumns.current;
         if (lastVisible) {
-            var _loop_1 = function (index) {
-                var column = visibleColumnDefinitions[index];
-                var id = getColumnKey(column, index);
+            for (let index = 0; index < visibleColumnDefinitions.length; index++) {
+                const column = visibleColumnDefinitions[index];
+                const id = getColumnKey(column, index);
                 if (!columnWidths[id] && lastVisible.indexOf(column.id) === -1) {
-                    setColumnWidths(function (columnWidths) {
-                        var _a;
-                        return (__assign(__assign({}, columnWidths), (_a = {}, _a[id] = column.width || DEFAULT_WIDTH, _a)));
-                    });
+                    setColumnWidths(columnWidths => (Object.assign(Object.assign({}, columnWidths), { [id]: column.width || DEFAULT_WIDTH })));
                 }
-            };
-            for (var index = 0; index < visibleColumnDefinitions.length; index++) {
-                _loop_1(index);
             }
         }
-        visibleColumns.current = visibleColumnDefinitions.map(function (column) { return column.id; });
+        visibleColumns.current = visibleColumnDefinitions.map(column => column.id);
     }, [columnWidths, resizableColumns, visibleColumnDefinitions]);
-    useEffect(function () {
+    useEffect(() => {
         if (!resizableColumns) {
             return;
         }
-        setColumnWidths(function () { return readWidths(tableRef.current, visibleColumnDefinitions, hasSelection); });
+        setColumnWidths(() => readWidths(tableRef.current, visibleColumnDefinitions, hasSelection));
         // This code is intended to run only at the first render and should not re-run when table props change
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     function updateColumn(colIndex, newWidth) {
-        setColumnWidths(function (columnWidths) { return updateWidths(visibleColumnDefinitions, columnWidths, newWidth, colIndex); });
+        setColumnWidths(columnWidths => updateWidths(visibleColumnDefinitions, columnWidths, newWidth, colIndex));
     }
-    var totalWidth = visibleColumnDefinitions.reduce(function (total, column, index) { return total + (columnWidths[getColumnKey(column, index)] || DEFAULT_WIDTH); }, 0);
+    let totalWidth = visibleColumnDefinitions.reduce((total, column, index) => total + (columnWidths[getColumnKey(column, index)] || DEFAULT_WIDTH), 0);
     if (hasSelection) {
         totalWidth += SELECTION_CELL_WIDTH;
     }
-    return React.createElement(WidthsContext.Provider, { value: { columnWidths: columnWidths, totalWidth: totalWidth, updateColumn: updateColumn } }, children);
+    return React.createElement(WidthsContext.Provider, { value: { columnWidths, totalWidth, updateColumn } }, children);
 }
 export function useColumnWidths() {
     return useContext(WidthsContext);

package/table/use-column-widths.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-column-widths.js","sourceRoot":"","sources":["../../../src/table/use-column-widths.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, { useEffect, useRef, useState, createContext, useContext } from 'react';\nimport { TableProps } from './interfaces';\nimport { getColumnKey } from './utils';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport { warnOnce } from '../internal/logging';\n\nexport const DEFAULT_WIDTH = 120;\nconst SELECTION_CELL_WIDTH = 54;\n\nfunction checkProperty(column: TableProps.ColumnDefinition<any>, name: 'width' | 'minWidth') {\n  const value = column[name];\n  if (typeof value !== 'number' && typeof value !== 'undefined') {\n    warnOnce(\n      'Table',\n      `resizableColumns feature requires ${name} property to be a number, got ${value}. The component may work incorrectly.`\n    );\n  }\n}\n\nexport function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {\n  for (const column of columnDefinitions) {\n    checkProperty(column, 'minWidth');\n    checkProperty(column, 'width');\n  }\n}\n\nfunction readWidths(\n  headerEl: HTMLElement,\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>,\n  hasSelection: boolean\n) {\n  const result: Record<string, number> = {};\n  for (let index = 0; index < columnDefinitions.length; index++) {\n    const column = columnDefinitions[index];\n    const id = getColumnKey(columnDefinitions[index], index);\n    let width = (column.width as number) || 0;\n    const minWidth = (column.minWidth as number) || width || DEFAULT_WIDTH;\n    if (\n      !width && // read width from the DOM if it is missing in the config\n      index !== columnDefinitions.length - 1 // skip reading for the last column, because it expands to fully fit the container\n    ) {\n      const colIndex = hasSelection ? index + 2 : index + 1;\n      const colEl = headerEl.querySelector<HTMLElement>(`.${headerCellStyles['header-cell']}:nth-child(${colIndex})`)!;\n      width = colEl.getBoundingClientRect().width;\n    }\n    result[id] = Math.max(width, minWidth);\n  }\n  return result;\n}\n\nfunction updateWidths(\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>,\n  oldWidths: Record<string, number>,\n  newWidth: number,\n  colIndex: number\n) {\n  const definition = columnDefinitions[colIndex];\n  const id = getColumnKey(definition, colIndex);\n  const minWidth = typeof definition.minWidth === 'number' ? definition.minWidth : DEFAULT_WIDTH;\n  newWidth = Math.max(newWidth, minWidth);\n  if (oldWidths[id] === newWidth) {\n    return oldWidths;\n  }\n  return { ...oldWidths, [id]: newWidth };\n}\n\ninterface WidthsContext {\n  totalWidth: number;\n  columnWidths: Record<string, number>;\n  updateColumn: (colIndex: number, newWidth: number) => void;\n}\n\nconst WidthsContext = createContext<WidthsContext>({\n  totalWidth: 0,\n  columnWidths: {},\n  updateColumn: () => {},\n});\n\ninterface WidthProviderProps {\n  tableRef: React.MutableRefObject<HTMLElement | null>;\n  visibleColumnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  resizableColumns: boolean | undefined;\n  hasSelection: boolean;\n  children: React.ReactNode;\n}\n\nexport function ColumnWidthsProvider({\n  tableRef,\n  visibleColumnDefinitions,\n  resizableColumns,\n  hasSelection,\n  children,\n}: WidthProviderProps) {\n  const visibleColumns = useRef<(string | undefined)[] | null>(null);\n  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});\n\n  useEffect(() => {\n    if (!resizableColumns) {\n      return;\n    }\n    const lastVisible = visibleColumns.current;\n    if (lastVisible) {\n      for (let index = 0; index < visibleColumnDefinitions.length; index++) {\n        const column = visibleColumnDefinitions[index];\n        const id = getColumnKey(column, index);\n        if (!columnWidths[id] && lastVisible.indexOf(column.id) === -1) {\n          setColumnWidths(columnWidths => ({ ...columnWidths, [id]: (column.width as number) || DEFAULT_WIDTH }));\n        }\n      }\n    }\n    visibleColumns.current = visibleColumnDefinitions.map(column => column.id);\n  }, [columnWidths, resizableColumns, visibleColumnDefinitions]);\n\n  useEffect(() => {\n    if (!resizableColumns) {\n      return;\n    }\n    setColumnWidths(() => readWidths(tableRef.current!, visibleColumnDefinitions, hasSelection));\n    // This code is intended to run only at the first render and should not re-run when table props change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function updateColumn(colIndex: number, newWidth: number) {\n    setColumnWidths(columnWidths => updateWidths(visibleColumnDefinitions, columnWidths, newWidth, colIndex));\n  }\n\n  let totalWidth = visibleColumnDefinitions.reduce(\n    (total, column, index) => total + (columnWidths[getColumnKey(column, index)] || DEFAULT_WIDTH),\n    0\n  );\n  if (hasSelection) {\n    totalWidth += SELECTION_CELL_WIDTH;\n  }\n\n  return <WidthsContext.Provider value={{ columnWidths, totalWidth, updateColumn }}>{children}</WidthsContext.Provider>;\n}\n\nexport function useColumnWidths() {\n  return useContext(WidthsContext);\n}\n"]}
+{"version":3,"file":"use-column-widths.js","sourceRoot":"","sources":["../../../src/table/use-column-widths.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, { useEffect, useRef, useState, createContext, useContext } from 'react';\nimport { TableProps } from './interfaces';\nimport { getColumnKey } from './utils';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport { warnOnce } from '../internal/logging';\n\nexport const DEFAULT_WIDTH = 120;\nconst SELECTION_CELL_WIDTH = 54;\n\nfunction checkProperty(column: TableProps.ColumnDefinition<any>, name: 'width' | 'minWidth') {\n  const value = column[name];\n  if (typeof value !== 'number' && typeof value !== 'undefined') {\n    warnOnce(\n      'Table',\n      `resizableColumns feature requires ${name} property to be a number, got ${value}. The component may work incorrectly.`\n    );\n  }\n}\n\nexport function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {\n  for (const column of columnDefinitions) {\n    checkProperty(column, 'minWidth');\n    checkProperty(column, 'width');\n  }\n}\n\nfunction readWidths(\n  headerEl: HTMLElement,\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>,\n  hasSelection: boolean\n) {\n  const result: Record<string, number> = {};\n  for (let index = 0; index < columnDefinitions.length; index++) {\n    const column = columnDefinitions[index];\n    const id = getColumnKey(columnDefinitions[index], index);\n    let width = (column.width as number) || 0;\n    const minWidth = (column.minWidth as number) || width || DEFAULT_WIDTH;\n    if (\n      !width && // read width from the DOM if it is missing in the config\n      index !== columnDefinitions.length - 1 // skip reading for the last column, because it expands to fully fit the container\n    ) {\n      const colIndex = hasSelection ? index + 2 : index + 1;\n      const colEl = headerEl.querySelector<HTMLElement>(`.${headerCellStyles['header-cell']}:nth-child(${colIndex})`)!;\n      width = colEl.getBoundingClientRect().width;\n    }\n    result[id] = Math.max(width, minWidth);\n  }\n  return result;\n}\n\nfunction updateWidths(\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>,\n  oldWidths: Record<string, number>,\n  newWidth: number,\n  colIndex: number\n) {\n  const definition = columnDefinitions[colIndex];\n  const id = getColumnKey(definition, colIndex);\n  const minWidth = typeof definition.minWidth === 'number' ? definition.minWidth : DEFAULT_WIDTH;\n  newWidth = Math.max(newWidth, minWidth);\n  if (oldWidths[id] === newWidth) {\n    return oldWidths;\n  }\n  return { ...oldWidths, [id]: newWidth };\n}\n\ninterface WidthsContext {\n  totalWidth: number;\n  columnWidths: Record<string, number>;\n  updateColumn: (colIndex: number, newWidth: number) => void;\n}\n\nconst WidthsContext = createContext<WidthsContext>({\n  totalWidth: 0,\n  columnWidths: {},\n  updateColumn: () => {},\n});\n\ninterface WidthProviderProps {\n  tableRef: React.MutableRefObject<HTMLElement | null>;\n  visibleColumnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  resizableColumns: boolean | undefined;\n  hasSelection: boolean;\n  children: React.ReactNode;\n}\n\nexport function ColumnWidthsProvider({\n  tableRef,\n  visibleColumnDefinitions,\n  resizableColumns,\n  hasSelection,\n  children,\n}: WidthProviderProps) {\n  const visibleColumns = useRef<(string | undefined)[] | null>(null);\n  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});\n\n  useEffect(() => {\n    if (!resizableColumns) {\n      return;\n    }\n    const lastVisible = visibleColumns.current;\n    if (lastVisible) {\n      for (let index = 0; index < visibleColumnDefinitions.length; index++) {\n        const column = visibleColumnDefinitions[index];\n        const id = getColumnKey(column, index);\n        if (!columnWidths[id] && lastVisible.indexOf(column.id) === -1) {\n          setColumnWidths(columnWidths => ({ ...columnWidths, [id]: (column.width as number) || DEFAULT_WIDTH }));\n        }\n      }\n    }\n    visibleColumns.current = visibleColumnDefinitions.map(column => column.id);\n  }, [columnWidths, resizableColumns, visibleColumnDefinitions]);\n\n  useEffect(() => {\n    if (!resizableColumns) {\n      return;\n    }\n    setColumnWidths(() => readWidths(tableRef.current!, visibleColumnDefinitions, hasSelection));\n    // This code is intended to run only at the first render and should not re-run when table props change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function updateColumn(colIndex: number, newWidth: number) {\n    setColumnWidths(columnWidths => updateWidths(visibleColumnDefinitions, columnWidths, newWidth, colIndex));\n  }\n\n  let totalWidth = visibleColumnDefinitions.reduce(\n    (total, column, index) => total + (columnWidths[getColumnKey(column, index)] || DEFAULT_WIDTH),\n    0\n  );\n  if (hasSelection) {\n    totalWidth += SELECTION_CELL_WIDTH;\n  }\n\n  return <WidthsContext.Provider value={{ columnWidths, totalWidth, updateColumn }}>{children}</WidthsContext.Provider>;\n}\n\nexport function useColumnWidths() {\n  return useContext(WidthsContext);\n}\n"]}

package/table/use-row-events.js

@@ -3,27 +3,26 @@
 import { fireNonCancelableEvent, fireCancelableEvent } from '../internal/events/index';
 import { findUpUntil } from '../internal/utils/dom';
 import styles from './styles.css.js';
-export function useRowEvents(_a) {
-    var onRowClick = _a.onRowClick, onRowContextMenu = _a.onRowContextMenu;
-    var onRowClickHandler = function (rowIndex, item, event) {
-        var tableCell = findUpUntil(event.target, function (element) { return element.tagName.toLowerCase() === 'td'; });
+export function useRowEvents({ onRowClick, onRowContextMenu }) {
+    const onRowClickHandler = (rowIndex, item, event) => {
+        const tableCell = findUpUntil(event.target, element => element.tagName.toLowerCase() === 'td');
         if (!tableCell || !tableCell.classList.contains(styles['selection-control'])) {
-            var details = { rowIndex: rowIndex, item: item };
+            const details = { rowIndex, item };
             fireNonCancelableEvent(onRowClick, details);
         }
     };
-    var onRowContextMenuHandler = function (rowIndex, item, event) {
-        var details = {
-            rowIndex: rowIndex,
-            item: item,
+    const onRowContextMenuHandler = (rowIndex, item, event) => {
+        const details = {
+            rowIndex,
+            item,
             clientX: event.clientX,
-            clientY: event.clientY
+            clientY: event.clientY,
         };
         fireCancelableEvent(onRowContextMenu, details, event);
     };
     return {
         onRowClickHandler: onRowClick && onRowClickHandler,
-        onRowContextMenuHandler: onRowContextMenu && onRowContextMenuHandler
+        onRowContextMenuHandler: onRowContextMenu && onRowContextMenuHandler,
     };
 }
 //# sourceMappingURL=use-row-events.js.map

package/table/use-row-events.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-row-events.js","sourceRoot":"","sources":["../../../src/table/use-row-events.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEvF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,YAAY,CAAI,EAAqF;QAAnF,UAAU,gBAAA,EAAE,gBAAgB,sBAAA;IAC5D,IAAM,iBAAiB,GAAG,UAAC,QAAgB,EAAE,IAAO,EAAE,KAAuB;QAC3E,IAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,MAAqB,EAAE,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,EAAtC,CAAsC,CAAC,CAAC;QAC9G,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE;YAC5E,IAAM,OAAO,GAAmC,EAAE,QAAQ,UAAA,EAAE,IAAI,MAAA,EAAE,CAAC;YACnE,sBAAsB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;SAC7C;IACH,CAAC,CAAC;IACF,IAAM,uBAAuB,GAAG,UAAC,QAAgB,EAAE,IAAO,EAAE,KAAuB;QACjF,IAAM,OAAO,GAAyC;YACpD,QAAQ,UAAA;YACR,IAAI,MAAA;YACJ,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,OAAO,EAAE,KAAK,CAAC,OAAO;SACvB,CAAC;QACF,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO;QACL,iBAAiB,EAAE,UAAU,IAAI,iBAAiB;QAClD,uBAAuB,EAAE,gBAAgB,IAAI,uBAAuB;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { fireNonCancelableEvent, fireCancelableEvent } from '../internal/events/index';\nimport { TableProps } from './interfaces';\nimport { findUpUntil } from '../internal/utils/dom';\nimport styles from './styles.css.js';\n\nexport function useRowEvents<T>({ onRowClick, onRowContextMenu }: Pick<TableProps, 'onRowClick' | 'onRowContextMenu'>) {\n  const onRowClickHandler = (rowIndex: number, item: T, event: React.MouseEvent) => {\n    const tableCell = findUpUntil(event.target as HTMLElement, element => element.tagName.toLowerCase() === 'td');\n    if (!tableCell || !tableCell.classList.contains(styles['selection-control'])) {\n      const details: TableProps.OnRowClickDetail<T> = { rowIndex, item };\n      fireNonCancelableEvent(onRowClick, details);\n    }\n  };\n  const onRowContextMenuHandler = (rowIndex: number, item: T, event: React.MouseEvent) => {\n    const details: TableProps.OnRowContextMenuDetail<T> = {\n      rowIndex,\n      item,\n      clientX: event.clientX,\n      clientY: event.clientY,\n    };\n    fireCancelableEvent(onRowContextMenu, details, event);\n  };\n\n  return {\n    onRowClickHandler: onRowClick && onRowClickHandler,\n    onRowContextMenuHandler: onRowContextMenu && onRowContextMenuHandler,\n  };\n}\n"]}
+{"version":3,"file":"use-row-events.js","sourceRoot":"","sources":["../../../src/table/use-row-events.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEvF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,YAAY,CAAI,EAAE,UAAU,EAAE,gBAAgB,EAAuD;IACnH,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,IAAO,EAAE,KAAuB,EAAE,EAAE;QAC/E,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,MAAqB,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,CAAC;QAC9G,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE;YAC5E,MAAM,OAAO,GAAmC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YACnE,sBAAsB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;SAC7C;IACH,CAAC,CAAC;IACF,MAAM,uBAAuB,GAAG,CAAC,QAAgB,EAAE,IAAO,EAAE,KAAuB,EAAE,EAAE;QACrF,MAAM,OAAO,GAAyC;YACpD,QAAQ;YACR,IAAI;YACJ,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,OAAO,EAAE,KAAK,CAAC,OAAO;SACvB,CAAC;QACF,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO;QACL,iBAAiB,EAAE,UAAU,IAAI,iBAAiB;QAClD,uBAAuB,EAAE,gBAAgB,IAAI,uBAAuB;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { fireNonCancelableEvent, fireCancelableEvent } from '../internal/events/index';\nimport { TableProps } from './interfaces';\nimport { findUpUntil } from '../internal/utils/dom';\nimport styles from './styles.css.js';\n\nexport function useRowEvents<T>({ onRowClick, onRowContextMenu }: Pick<TableProps, 'onRowClick' | 'onRowContextMenu'>) {\n  const onRowClickHandler = (rowIndex: number, item: T, event: React.MouseEvent) => {\n    const tableCell = findUpUntil(event.target as HTMLElement, element => element.tagName.toLowerCase() === 'td');\n    if (!tableCell || !tableCell.classList.contains(styles['selection-control'])) {\n      const details: TableProps.OnRowClickDetail<T> = { rowIndex, item };\n      fireNonCancelableEvent(onRowClick, details);\n    }\n  };\n  const onRowContextMenuHandler = (rowIndex: number, item: T, event: React.MouseEvent) => {\n    const details: TableProps.OnRowContextMenuDetail<T> = {\n      rowIndex,\n      item,\n      clientX: event.clientX,\n      clientY: event.clientY,\n    };\n    fireCancelableEvent(onRowContextMenu, details, event);\n  };\n\n  return {\n    onRowClickHandler: onRowClick && onRowClickHandler,\n    onRowContextMenuHandler: onRowContextMenu && onRowContextMenuHandler,\n  };\n}\n"]}