@cloudscape-design/components 3.0.105 → 3.0.107
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/internal/environment.js +1 -1
- package/package.json +1 -1
- package/pagination/interfaces.d.ts +4 -0
- package/pagination/interfaces.d.ts.map +1 -1
- package/pagination/interfaces.js.map +1 -1
- package/pagination/internal.d.ts.map +1 -1
- package/pagination/internal.js +2 -1
- package/pagination/internal.js.map +1 -1
- package/table/header-cell/index.d.ts +5 -2
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +8 -4
- package/table/header-cell/index.js.map +1 -1
- package/table/resizer/index.d.ts +3 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +45 -11
- package/table/resizer/index.js.map +1 -1
- package/table/resizer/styles.css.js +6 -4
- package/table/resizer/styles.scoped.css +29 -7
- package/table/resizer/styles.selectors.js +6 -4
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +1 -2
- package/table/thead.js.map +1 -1
package/internal/environment.js
CHANGED
package/package.json
CHANGED
|
@@ -23,6 +23,8 @@ export interface PaginationProps {
|
|
|
23
23
|
disabled?: boolean;
|
|
24
24
|
/**
|
|
25
25
|
* Adds aria-labels to the pagination buttons:
|
|
26
|
+
* * `paginationLabel` (string) - Label for the entire pagination group. It allows users to distinguish context
|
|
27
|
+
* * in cases of multiple pagination components in a page.
|
|
26
28
|
* * `previousPageLabel` (string) - Previous page button.
|
|
27
29
|
* * `pageLabel` (number => string) - Individual page button, this function is called for every page number that's rendered.
|
|
28
30
|
* * `nextPageLabel` (string) - Next page button
|
|
@@ -31,6 +33,7 @@ export interface PaginationProps {
|
|
|
31
33
|
* ```
|
|
32
34
|
* {
|
|
33
35
|
* nextPageLabel: 'Next page',
|
|
36
|
+
* paginationLabel: 'Table pagination'
|
|
34
37
|
* previousPageLabel: 'Previous page',
|
|
35
38
|
* pageLabel: pageNumber => `Page ${pageNumber}`
|
|
36
39
|
* }
|
|
@@ -58,6 +61,7 @@ export interface PaginationProps {
|
|
|
58
61
|
export declare namespace PaginationProps {
|
|
59
62
|
interface Labels {
|
|
60
63
|
nextPageLabel?: string;
|
|
64
|
+
paginationLabel?: string;
|
|
61
65
|
previousPageLabel?: string;
|
|
62
66
|
pageLabel?: (pageNumber: number) => string;
|
|
63
67
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/pagination/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/pagination/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;;;;;;;;;OAiBG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC;IAEpC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAEnE;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAEjF;;;;;OAKG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;CAC9E;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,MAAM;QACrB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;KAC5C;IAED,UAAiB,eAAe;QAC9B,sBAAsB,EAAE,OAAO,CAAC;QAChC,kBAAkB,EAAE,MAAM,CAAC;KAC5B;IAED,UAAiB,YAAY;QAC3B,gBAAgB,EAAE,MAAM,CAAC;KAC1B;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/pagination/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface PaginationProps {\n /**\n * Index of the current page. The first page has an index of 1.\n */\n currentPageIndex: number;\n\n /**\n * Sets the total number of pages. Only positive integers are allowed.\n */\n pagesCount: number;\n\n /**\n * Sets the pagination variant. It can be either default (when setting it to `false`) or open ended (when setting it\n * to `true`). Default pagination navigates you through the items list. The open-end variant enables you\n * to lazy-load your items because it always displays three dots before the next page icon. The next page button is\n * never disabled. When the user clicks on it but there are no more items to show, the\n * `onNextPageClick` handler is called with `requestedPageAvailable: false` in the event detail.\n */\n openEnd?: boolean;\n\n /**\n * If set to `true`, the pagination links will be disabled. Use it, for example, if you want to prevent the user\n * from changing page before items are loaded.\n */\n disabled?: boolean;\n\n /**\n * Adds aria-labels to the pagination buttons:\n * * `previousPageLabel` (string) - Previous page button.\n * * `pageLabel` (number => string) - Individual page button, this function is called for every page number that's rendered.\n * * `nextPageLabel` (string) - Next page button\n *\n * Example:\n * ```\n * {\n * nextPageLabel: 'Next page',\n * previousPageLabel: 'Previous page',\n * pageLabel: pageNumber => `Page ${pageNumber}`\n * }\n * ```\n */\n ariaLabels?: PaginationProps.Labels;\n\n /**\n * Called when a user interaction causes a pagination change. The event `detail` contains the new `currentPageIndex`.\n */\n onChange?: NonCancelableEventHandler<PaginationProps.ChangeDetail>;\n\n /**\n * Called when the previous page arrow is clicked. The event `detail` contains the following:\n * * `requestedPageAvailable` (boolean) - Always set to `true`.\n * * `requestedPageIndex` (integer) - The index of the requested page.\n */\n onPreviousPageClick?: NonCancelableEventHandler<PaginationProps.PageClickDetail>;\n\n /**\n * Called when the next page arrow is clicked. The event `detail` contains the following:\n * * `requestedPageAvailable` (boolean) - Indicates whether the requested page is available for display.\n * The value can be `false` when the `openEnd` property is set to `true`.\n * * `requestedPageIndex` (integer) - The index of the requested page.\n */\n onNextPageClick?: NonCancelableEventHandler<PaginationProps.PageClickDetail>;\n}\n\nexport namespace PaginationProps {\n export interface Labels {\n nextPageLabel?: string;\n previousPageLabel?: string;\n pageLabel?: (pageNumber: number) => string;\n }\n\n export interface PageClickDetail {\n requestedPageAvailable: boolean;\n requestedPageIndex: number;\n }\n\n export interface ChangeDetail {\n currentPageIndex: number;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/pagination/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface PaginationProps {\n /**\n * Index of the current page. The first page has an index of 1.\n */\n currentPageIndex: number;\n\n /**\n * Sets the total number of pages. Only positive integers are allowed.\n */\n pagesCount: number;\n\n /**\n * Sets the pagination variant. It can be either default (when setting it to `false`) or open ended (when setting it\n * to `true`). Default pagination navigates you through the items list. The open-end variant enables you\n * to lazy-load your items because it always displays three dots before the next page icon. The next page button is\n * never disabled. When the user clicks on it but there are no more items to show, the\n * `onNextPageClick` handler is called with `requestedPageAvailable: false` in the event detail.\n */\n openEnd?: boolean;\n\n /**\n * If set to `true`, the pagination links will be disabled. Use it, for example, if you want to prevent the user\n * from changing page before items are loaded.\n */\n disabled?: boolean;\n\n /**\n * Adds aria-labels to the pagination buttons:\n * * `paginationLabel` (string) - Label for the entire pagination group. It allows users to distinguish context\n * * in cases of multiple pagination components in a page.\n * * `previousPageLabel` (string) - Previous page button.\n * * `pageLabel` (number => string) - Individual page button, this function is called for every page number that's rendered.\n * * `nextPageLabel` (string) - Next page button\n *\n * Example:\n * ```\n * {\n * nextPageLabel: 'Next page',\n * paginationLabel: 'Table pagination'\n * previousPageLabel: 'Previous page',\n * pageLabel: pageNumber => `Page ${pageNumber}`\n * }\n * ```\n */\n ariaLabels?: PaginationProps.Labels;\n\n /**\n * Called when a user interaction causes a pagination change. The event `detail` contains the new `currentPageIndex`.\n */\n onChange?: NonCancelableEventHandler<PaginationProps.ChangeDetail>;\n\n /**\n * Called when the previous page arrow is clicked. The event `detail` contains the following:\n * * `requestedPageAvailable` (boolean) - Always set to `true`.\n * * `requestedPageIndex` (integer) - The index of the requested page.\n */\n onPreviousPageClick?: NonCancelableEventHandler<PaginationProps.PageClickDetail>;\n\n /**\n * Called when the next page arrow is clicked. The event `detail` contains the following:\n * * `requestedPageAvailable` (boolean) - Indicates whether the requested page is available for display.\n * The value can be `false` when the `openEnd` property is set to `true`.\n * * `requestedPageIndex` (integer) - The index of the requested page.\n */\n onNextPageClick?: NonCancelableEventHandler<PaginationProps.PageClickDetail>;\n}\n\nexport namespace PaginationProps {\n export interface Labels {\n nextPageLabel?: string;\n paginationLabel?: string;\n previousPageLabel?: string;\n pageLabel?: (pageNumber: number) => string;\n }\n\n export interface PageClickDetail {\n requestedPageAvailable: boolean;\n requestedPageIndex: number;\n }\n\n export interface ChangeDetail {\n currentPageIndex: number;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/pagination/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/pagination/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AA+D/C,aAAK,uBAAuB,GAAG,eAAe,GAAG,0BAA0B,CAAC;AAE5E,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,OAAO,EACP,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,mBAAmB,EACnB,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,uBAAuB,eAgFzB"}
|
package/pagination/internal.js
CHANGED
|
@@ -11,6 +11,7 @@ import styles from './styles.css.js';
|
|
|
11
11
|
import { getPaginationState, range } from './utils';
|
|
12
12
|
var defaultAriaLabels = {
|
|
13
13
|
nextPageLabel: '',
|
|
14
|
+
paginationLabel: '',
|
|
14
15
|
previousPageLabel: '',
|
|
15
16
|
pageLabel: function (pageNumber) { return "".concat(pageNumber); }
|
|
16
17
|
};
|
|
@@ -51,7 +52,7 @@ export default function InternalPagination(_a) {
|
|
|
51
52
|
function handlePageClick(requestedPageIndex) {
|
|
52
53
|
fireNonCancelableEvent(onChange, { currentPageIndex: requestedPageIndex });
|
|
53
54
|
}
|
|
54
|
-
return (React.createElement("ul", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, disabled && styles['root-disabled']), ref: __internalRootRef }),
|
|
55
|
+
return (React.createElement("ul", __assign({ "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.paginationLabel }, baseProps, { className: clsx(baseProps.className, styles.root, disabled && styles['root-disabled']), ref: __internalRootRef }),
|
|
55
56
|
React.createElement(PageButton, { className: styles.arrow, pageIndex: currentPageIndex - 1, ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.previousPageLabel) !== null && _c !== void 0 ? _c : defaultAriaLabels.nextPageLabel, disabled: disabled || currentPageIndex === 1, onClick: handlePrevPageClick },
|
|
56
57
|
React.createElement(InternalIcon, { name: "angle-left", variant: disabled ? 'disabled' : 'normal' })),
|
|
57
58
|
React.createElement(PageNumber, { pageIndex: 1, isCurrent: currentPageIndex === 1, disabled: disabled, ariaLabel: pageNumberLabelFn(1), onClick: handlePageClick }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/pagination/internal.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/pagination/internal.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 InternalIcon from '../icon/internal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport styles from './styles.css.js';\nimport { getPaginationState, range } from './utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { PaginationProps } from './interfaces';\n\nconst defaultAriaLabels: Required<PaginationProps.Labels> = {\n nextPageLabel: '',\n paginationLabel: '',\n previousPageLabel: '',\n pageLabel: pageNumber => `${pageNumber}`,\n};\n\ninterface PageButtonProps {\n className?: string;\n ariaLabel: string;\n disabled?: boolean;\n pageIndex: number;\n isCurrent?: boolean;\n children?: React.ReactNode;\n onClick: (requestedIndex: number) => void;\n}\n\nfunction PageButton({\n className,\n ariaLabel,\n disabled,\n pageIndex,\n isCurrent = false,\n children,\n onClick,\n}: PageButtonProps) {\n const focusVisible = useFocusVisible();\n function handleClick(event: React.MouseEvent) {\n event.preventDefault();\n onClick(pageIndex);\n }\n return (\n <li className={styles['page-item']}>\n <button\n {...focusVisible}\n className={clsx(\n className,\n styles.button,\n disabled && styles['button-disabled'],\n isCurrent && styles['button-current']\n )}\n type=\"button\"\n aria-label={ariaLabel}\n disabled={disabled}\n onClick={handleClick}\n aria-current={isCurrent}\n >\n {children}\n </button>\n </li>\n );\n}\n\nfunction PageNumber({ pageIndex, ...rest }: PageButtonProps) {\n return (\n <PageButton className={styles['page-number']} pageIndex={pageIndex} {...rest}>\n {pageIndex}\n </PageButton>\n );\n}\n\ntype InternalPaginationProps = PaginationProps & InternalBaseComponentProps;\n\nexport default function InternalPagination({\n openEnd,\n currentPageIndex,\n ariaLabels,\n pagesCount,\n disabled,\n onChange,\n onNextPageClick,\n onPreviousPageClick,\n __internalRootRef = null,\n ...rest\n}: InternalPaginationProps) {\n const baseProps = getBaseProps(rest);\n const pageNumberLabelFn = ariaLabels?.pageLabel ?? defaultAriaLabels.pageLabel;\n const { leftDots, leftIndex, rightIndex, rightDots } = getPaginationState(currentPageIndex, pagesCount, openEnd);\n\n function handlePrevPageClick(requestedPageIndex: number) {\n handlePageClick(requestedPageIndex);\n fireNonCancelableEvent(onPreviousPageClick, {\n requestedPageAvailable: true,\n requestedPageIndex: requestedPageIndex,\n });\n }\n\n function handleNextPageClick(requestedPageIndex: number) {\n handlePageClick(requestedPageIndex);\n fireNonCancelableEvent(onNextPageClick, {\n requestedPageAvailable: currentPageIndex < pagesCount,\n requestedPageIndex: requestedPageIndex,\n });\n }\n\n function handlePageClick(requestedPageIndex: number) {\n fireNonCancelableEvent(onChange, { currentPageIndex: requestedPageIndex });\n }\n\n return (\n <ul\n aria-label={ariaLabels?.paginationLabel}\n {...baseProps}\n className={clsx(baseProps.className, styles.root, disabled && styles['root-disabled'])}\n ref={__internalRootRef}\n >\n <PageButton\n className={styles.arrow}\n pageIndex={currentPageIndex - 1}\n ariaLabel={ariaLabels?.previousPageLabel ?? defaultAriaLabels.nextPageLabel}\n disabled={disabled || currentPageIndex === 1}\n onClick={handlePrevPageClick}\n >\n <InternalIcon name=\"angle-left\" variant={disabled ? 'disabled' : 'normal'} />\n </PageButton>\n <PageNumber\n pageIndex={1}\n isCurrent={currentPageIndex === 1}\n disabled={disabled}\n ariaLabel={pageNumberLabelFn(1)}\n onClick={handlePageClick}\n />\n {leftDots && <li className={styles.dots}>...</li>}\n {range(leftIndex, rightIndex).map(pageIndex => (\n <PageNumber\n key={pageIndex}\n isCurrent={currentPageIndex === pageIndex}\n pageIndex={pageIndex}\n disabled={disabled}\n ariaLabel={pageNumberLabelFn(pageIndex)}\n onClick={handlePageClick}\n />\n ))}\n {rightDots && <li className={styles.dots}>...</li>}\n {!openEnd && pagesCount > 1 && (\n <PageNumber\n isCurrent={currentPageIndex === pagesCount}\n pageIndex={pagesCount}\n disabled={disabled}\n ariaLabel={pageNumberLabelFn(pagesCount)}\n onClick={handlePageClick}\n />\n )}\n <PageButton\n className={styles.arrow}\n pageIndex={currentPageIndex + 1}\n ariaLabel={ariaLabels?.nextPageLabel ?? defaultAriaLabels.nextPageLabel}\n disabled={disabled || (!openEnd && (pagesCount === 0 || currentPageIndex === pagesCount))}\n onClick={handleNextPageClick}\n >\n <InternalIcon name=\"angle-right\" variant={disabled ? 'disabled' : 'normal'} />\n </PageButton>\n </ul>\n );\n}\n"]}
|
|
@@ -9,12 +9,15 @@ interface TableHeaderCellProps {
|
|
|
9
9
|
sortingDescending: boolean | undefined;
|
|
10
10
|
sortingDisabled: boolean | undefined;
|
|
11
11
|
wrapLines: boolean | undefined;
|
|
12
|
-
resizer: React.ReactNode;
|
|
13
12
|
showFocusRing: boolean;
|
|
14
13
|
onClick(detail: TableProps.SortingState<any>): void;
|
|
14
|
+
onResizeFinish: () => void;
|
|
15
|
+
colIndex: number;
|
|
16
|
+
updateColumn: (colIndex: number, newWidth: number) => void;
|
|
15
17
|
onFocus?: () => void;
|
|
16
18
|
onBlur?: () => void;
|
|
19
|
+
resizableColumns?: boolean;
|
|
17
20
|
}
|
|
18
|
-
export declare function TableHeaderCell({ className, style, tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines,
|
|
21
|
+
export declare function TableHeaderCell({ className, style, tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, showFocusRing, onClick, colIndex, onFocus, onBlur, updateColumn, resizableColumns, onResizeFinish, }: TableHeaderCellProps): JSX.Element;
|
|
19
22
|
export {};
|
|
20
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACzC,mBAAmB,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IAC/D,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,aAAa,EACb,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,cAAc,GACf,EAAE,oBAAoB,eAoFtB"}
|
|
@@ -8,9 +8,11 @@ import useFocusVisible from '../../internal/hooks/focus-visible';
|
|
|
8
8
|
import { KeyCode } from '../../internal/keycode';
|
|
9
9
|
import { getAriaSort, getSortingIconName, getSortingStatus, isSorted } from './utils';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
|
+
import { Resizer } from '../resizer';
|
|
12
|
+
import { useUniqueId } from '../../internal/hooks/use-unique-id';
|
|
11
13
|
export function TableHeaderCell(_a) {
|
|
12
14
|
var _b, _c, _d;
|
|
13
|
-
var className = _a.className, style = _a.style, tabIndex = _a.tabIndex, column = _a.column, activeSortingColumn = _a.activeSortingColumn, sortingDescending = _a.sortingDescending, sortingDisabled = _a.sortingDisabled, wrapLines = _a.wrapLines,
|
|
15
|
+
var className = _a.className, style = _a.style, tabIndex = _a.tabIndex, column = _a.column, activeSortingColumn = _a.activeSortingColumn, sortingDescending = _a.sortingDescending, sortingDisabled = _a.sortingDisabled, wrapLines = _a.wrapLines, showFocusRing = _a.showFocusRing, onClick = _a.onClick, colIndex = _a.colIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, updateColumn = _a.updateColumn, resizableColumns = _a.resizableColumns, onResizeFinish = _a.onResizeFinish;
|
|
14
16
|
var focusVisible = useFocusVisible();
|
|
15
17
|
var sortable = !!column.sortingComparator || !!column.sortingField;
|
|
16
18
|
var sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);
|
|
@@ -32,8 +34,9 @@ export function TableHeaderCell(_a) {
|
|
|
32
34
|
handleClick();
|
|
33
35
|
}
|
|
34
36
|
};
|
|
37
|
+
var headerId = useUniqueId('table-header-');
|
|
35
38
|
return (React.createElement("th", { className: clsx(className, (_b = {},
|
|
36
|
-
_b[styles['header-cell-resizable']] = !!
|
|
39
|
+
_b[styles['header-cell-resizable']] = !!resizableColumns,
|
|
37
40
|
_b[styles['header-cell-sortable']] = sortingStatus,
|
|
38
41
|
_b[styles['header-cell-sorted']] = sortingStatus === 'ascending' || sortingStatus === 'descending',
|
|
39
42
|
_b[styles['header-cell-disabled']] = sortingDisabled,
|
|
@@ -50,9 +53,10 @@ export function TableHeaderCell(_a) {
|
|
|
50
53
|
})
|
|
51
54
|
: undefined }, (sortingDisabled || !sortingStatus
|
|
52
55
|
? (_d = {}, _d['aria-disabled'] = 'true', _d) : __assign(__assign({ onKeyPress: handleKeyPress, tabIndex: tabIndex, role: 'button' }, focusVisible), { onClick: handleClick, onFocus: onFocus, onBlur: onBlur }))),
|
|
53
|
-
React.createElement("div", { className: clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap']) }, column.header),
|
|
56
|
+
React.createElement("div", { className: clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId }, column.header),
|
|
54
57
|
sortingStatus && (React.createElement("span", { className: styles['sorting-icon'] },
|
|
55
58
|
React.createElement(InternalIcon, { name: getSortingIconName(sortingStatus) })))),
|
|
56
|
-
|
|
59
|
+
resizableColumns && (React.createElement(React.Fragment, null,
|
|
60
|
+
React.createElement(Resizer, { onDragMove: function (newWidth) { return updateColumn(colIndex, newWidth); }, onFinish: onResizeFinish, ariaLabelledby: headerId, minWidth: typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth })))));
|
|
57
61
|
}
|
|
58
62
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtF,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
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 clsx from 'clsx';\nimport React from 'react';\nimport InternalIcon from '../../icon/internal';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport { KeyCode } from '../../internal/keycode';\nimport { TableProps } from '../interfaces';\nimport { getAriaSort, getSortingIconName, getSortingStatus, isSorted } from './utils';\nimport styles from './styles.css.js';\nimport { Resizer } from '../resizer';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\ninterface TableHeaderCellProps {\n className?: string;\n style?: React.CSSProperties;\n tabIndex: number;\n column: TableProps.ColumnDefinition<any>;\n activeSortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n wrapLines: boolean | undefined;\n showFocusRing: boolean;\n onClick(detail: TableProps.SortingState<any>): void;\n onResizeFinish: () => void;\n colIndex: number;\n updateColumn: (colIndex: number, newWidth: number) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n resizableColumns?: boolean;\n}\n\nexport function TableHeaderCell({\n className,\n style,\n tabIndex,\n column,\n activeSortingColumn,\n sortingDescending,\n sortingDisabled,\n wrapLines,\n showFocusRing,\n onClick,\n colIndex,\n onFocus,\n onBlur,\n updateColumn,\n resizableColumns,\n onResizeFinish,\n}: TableHeaderCellProps) {\n const focusVisible = useFocusVisible();\n const sortable = !!column.sortingComparator || !!column.sortingField;\n const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\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 return (\n <th\n className={clsx(className, {\n [styles['header-cell-resizable']]: !!resizableColumns,\n [styles['header-cell-sortable']]: sortingStatus,\n [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',\n [styles['header-cell-disabled']]: sortingDisabled,\n [styles['header-cell-ascending']]: sortingStatus === 'ascending',\n [styles['header-cell-descending']]: sortingStatus === 'descending',\n })}\n aria-sort={sortingStatus && getAriaSort(sortingStatus)}\n style={style}\n scope=\"col\"\n >\n <div\n className={clsx(styles['header-cell-content'], {\n [styles['header-cell-fake-focus']]: showFocusRing && focusVisible['data-awsui-focus-visible'],\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 {...(sortingDisabled || !sortingStatus\n ? { ['aria-disabled']: 'true' }\n : {\n onKeyPress: handleKeyPress,\n tabIndex: tabIndex,\n role: 'button',\n ...focusVisible,\n onClick: handleClick,\n onFocus,\n onBlur,\n })}\n >\n <div className={clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap'])} id={headerId}>\n {column.header}\n </div>\n {sortingStatus && (\n <span className={styles['sorting-icon']}>\n <InternalIcon name={getSortingIconName(sortingStatus)} />\n </span>\n )}\n </div>\n {resizableColumns && (\n <>\n <Resizer\n onDragMove={newWidth => updateColumn(colIndex, newWidth)}\n onFinish={onResizeFinish}\n ariaLabelledby={headerId}\n minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n />\n </>\n )}\n </th>\n );\n}\n"]}
|
package/table/resizer/index.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
interface ResizerProps {
|
|
2
2
|
onDragMove: (newWidth: number) => void;
|
|
3
3
|
onFinish: () => void;
|
|
4
|
+
ariaLabelledby?: string;
|
|
5
|
+
minWidth?: number;
|
|
4
6
|
}
|
|
5
|
-
export declare function Resizer({ onDragMove, onFinish }: ResizerProps): JSX.Element;
|
|
7
|
+
export declare function Resizer({ onDragMove, onFinish, ariaLabelledby, minWidth }: ResizerProps): JSX.Element;
|
|
6
8
|
export declare function ResizeTracker(): JSX.Element;
|
|
7
9
|
export {};
|
|
8
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/resizer/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/resizer/index.tsx"],"names":[],"mappings":"AAYA,UAAU,YAAY;IACpB,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAMD,wBAAgB,OAAO,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAwB,EAAE,EAAE,YAAY,eAoIvG;AAED,wBAAgB,aAAa,gBAE5B"}
|
package/table/resizer/index.js
CHANGED
|
@@ -7,18 +7,22 @@ import { getOverflowParents } from '../../internal/utils/scrollable-containers';
|
|
|
7
7
|
import { findUpUntil } from '../../internal/utils/dom';
|
|
8
8
|
import tableStyles from '../styles.css.js';
|
|
9
9
|
import styles from './styles.css.js';
|
|
10
|
+
import { KeyCode } from '../../internal/keycode';
|
|
11
|
+
import { DEFAULT_WIDTH } from '../use-column-widths';
|
|
10
12
|
var AUTO_GROW_START_TIME = 10;
|
|
11
13
|
var AUTO_GROW_INTERVAL = 10;
|
|
12
14
|
var AUTO_GROW_INCREMENT = 5;
|
|
13
15
|
export function Resizer(_a) {
|
|
14
|
-
var onDragMove = _a.onDragMove, onFinish = _a.onFinish;
|
|
15
|
-
var
|
|
16
|
-
var
|
|
16
|
+
var onDragMove = _a.onDragMove, onFinish = _a.onFinish, ariaLabelledby = _a.ariaLabelledby, _b = _a.minWidth, minWidth = _b === void 0 ? DEFAULT_WIDTH : _b;
|
|
17
|
+
var _c = useState(false), isDragging = _c[0], setIsDragging = _c[1];
|
|
18
|
+
var _d = useState(), headerCell = _d[0], setHeaderCell = _d[1];
|
|
17
19
|
var autoGrowTimeout = useRef();
|
|
18
20
|
var onFinishStable = useStableEventHandler(onFinish);
|
|
19
21
|
var onDragStable = useStableEventHandler(onDragMove);
|
|
22
|
+
var _e = useState(false), resizerHasFocus = _e[0], setResizerHasFocus = _e[1];
|
|
23
|
+
var _f = useState(0), headerCellWidth = _f[0], setHeaderCellWidth = _f[1];
|
|
20
24
|
useEffect(function () {
|
|
21
|
-
if (!isDragging || !headerCell) {
|
|
25
|
+
if ((!isDragging && !resizerHasFocus) || !headerCell) {
|
|
22
26
|
return;
|
|
23
27
|
}
|
|
24
28
|
var rootElement = findUpUntil(headerCell, function (element) { return element.className.indexOf(tableStyles.root) > -1; });
|
|
@@ -34,10 +38,12 @@ export function Resizer(_a) {
|
|
|
34
38
|
tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';
|
|
35
39
|
};
|
|
36
40
|
var updateColumnWidth = function (newWidth) {
|
|
41
|
+
var _a = headerCell.getBoundingClientRect(), right = _a.right, width = _a.width;
|
|
42
|
+
var updatedWidth = newWidth < minWidth ? minWidth : newWidth;
|
|
43
|
+
updateTrackerPosition(right + updatedWidth - width);
|
|
44
|
+
setHeaderCellWidth(newWidth);
|
|
37
45
|
// callbacks must be the last calls in the handler, because they may cause an extra update
|
|
38
46
|
onDragStable(newWidth);
|
|
39
|
-
// we read the element size again because the previous callback changes it
|
|
40
|
-
updateTrackerPosition(headerCell.getBoundingClientRect().right);
|
|
41
47
|
};
|
|
42
48
|
var resizeColumn = function (offset) {
|
|
43
49
|
if (offset > leftEdge) {
|
|
@@ -70,18 +76,39 @@ export function Resizer(_a) {
|
|
|
70
76
|
onFinishStable();
|
|
71
77
|
clearTimeout(autoGrowTimeout.current);
|
|
72
78
|
};
|
|
79
|
+
var onKeyDown = function (event) {
|
|
80
|
+
// prevent screenreader cursor move
|
|
81
|
+
if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
}
|
|
84
|
+
// update width
|
|
85
|
+
if (event.keyCode === KeyCode.left) {
|
|
86
|
+
updateColumnWidth(headerCell.getBoundingClientRect().width - 10);
|
|
87
|
+
}
|
|
88
|
+
if (event.keyCode === KeyCode.right) {
|
|
89
|
+
updateColumnWidth(headerCell.getBoundingClientRect().width + 10);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
73
92
|
updateTrackerPosition(headerCell.getBoundingClientRect().right);
|
|
74
93
|
document.body.classList.add(styles['resize-active']);
|
|
75
|
-
document.
|
|
76
|
-
|
|
94
|
+
document.body.classList.remove(styles['resize-active-with-focus']);
|
|
95
|
+
if (isDragging) {
|
|
96
|
+
document.addEventListener('mousemove', onMouseMove);
|
|
97
|
+
document.addEventListener('mouseup', onMouseUp);
|
|
98
|
+
}
|
|
99
|
+
if (resizerHasFocus) {
|
|
100
|
+
document.body.classList.add(styles['resize-active-with-focus']);
|
|
101
|
+
headerCell.addEventListener('keydown', onKeyDown);
|
|
102
|
+
}
|
|
77
103
|
return function () {
|
|
78
104
|
clearTimeout(autoGrowTimeout.current);
|
|
79
105
|
document.body.classList.remove(styles['resize-active']);
|
|
80
106
|
document.removeEventListener('mousemove', onMouseMove);
|
|
81
107
|
document.removeEventListener('mouseup', onMouseUp);
|
|
108
|
+
headerCell.removeEventListener('keydown', onKeyDown);
|
|
82
109
|
};
|
|
83
|
-
}, [headerCell, isDragging, onDragStable, onFinishStable]);
|
|
84
|
-
return (React.createElement("span", { className: clsx(styles.resizer, isDragging && styles['resizer-active']), onMouseDown: function (event) {
|
|
110
|
+
}, [headerCell, isDragging, onDragStable, onFinishStable, resizerHasFocus, minWidth]);
|
|
111
|
+
return (React.createElement("span", { className: clsx(styles.resizer, isDragging && styles['resizer-active'], resizerHasFocus && styles['has-focus']), onMouseDown: function (event) {
|
|
85
112
|
if (event.button !== 0) {
|
|
86
113
|
return;
|
|
87
114
|
}
|
|
@@ -89,7 +116,14 @@ export function Resizer(_a) {
|
|
|
89
116
|
var headerCell = findUpUntil(event.currentTarget, function (element) { return element.tagName.toLowerCase() === 'th'; });
|
|
90
117
|
setIsDragging(true);
|
|
91
118
|
setHeaderCell(headerCell);
|
|
92
|
-
}
|
|
119
|
+
}, onFocus: function (event) {
|
|
120
|
+
var headerCell = findUpUntil(event.currentTarget, function (element) { return element.tagName.toLowerCase() === 'th'; });
|
|
121
|
+
setHeaderCellWidth(headerCell.getBoundingClientRect().width);
|
|
122
|
+
setResizerHasFocus(true);
|
|
123
|
+
setHeaderCell(headerCell);
|
|
124
|
+
}, onBlur: function () {
|
|
125
|
+
setResizerHasFocus(false);
|
|
126
|
+
}, role: "separator", "aria-orientation": "vertical", "aria-labelledby": ariaLabelledby, "aria-valuenow": headerCellWidth, "aria-valuetext": headerCellWidth.toString(), "aria-valuemin": minWidth, tabIndex: 0 }));
|
|
93
127
|
}
|
|
94
128
|
export function ResizeTracker() {
|
|
95
129
|
return React.createElement("span", { className: styles.tracker });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/resizer/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 clsx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\n\ninterface ResizerProps {\n onDragMove: (newWidth: number) => void;\n onFinish: () => void;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({ onDragMove, onFinish }: ResizerProps) {\n const [isDragging, setIsDragging] = useState(false);\n const [headerCell, setHeaderCell] = useState<HTMLElement>();\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const onFinishStable = useStableEventHandler(onFinish);\n const onDragStable = useStableEventHandler(onDragMove);\n useEffect(() => {\n if (!isDragging || !headerCell) {\n return;\n }\n const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1)!;\n const tableElement = rootElement.querySelector<HTMLElement>(`table`)!;\n // tracker is rendered inside table wrapper to align with its size\n const tracker = rootElement.querySelector<HTMLElement>(`.${styles.tracker}`)!;\n const scrollParent = getOverflowParents(headerCell)[0];\n const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();\n\n const updateTrackerPosition = (newOffset: number) => {\n const { left: scrollParentLeft } = tableElement.getBoundingClientRect();\n tracker.style.top = headerCell.getBoundingClientRect().height + 'px';\n // minus one pixel to offset the cell border\n tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onDragStable(newWidth);\n // we read the element size again because the previous callback changes it\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > leftEdge) {\n const cellLeft = headerCell.getBoundingClientRect().left;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const width = headerCell.getBoundingClientRect().width;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(width + AUTO_GROW_INCREMENT);\n scrollParent.scrollLeft += AUTO_GROW_INCREMENT;\n };\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = event.pageX;\n if (offset > rightEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(event.pageX);\n setIsDragging(false);\n onFinishStable();\n clearTimeout(autoGrowTimeout.current);\n };\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n document.body.classList.add(styles['resize-active']);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n }, [headerCell, isDragging, onDragStable, onFinishStable]);\n return (\n <span\n className={clsx(styles.resizer, isDragging && styles['resizer-active'])}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setIsDragging(true);\n setHeaderCell(headerCell);\n }}\n />\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/resizer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AASrD,IAAM,oBAAoB,GAAG,EAAE,CAAC;AAChC,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,UAAU,OAAO,CAAC,EAAgF;QAA9E,UAAU,gBAAA,EAAE,QAAQ,cAAA,EAAE,cAAc,oBAAA,EAAE,gBAAwB,EAAxB,QAAQ,mBAAG,aAAa,KAAA;IAChF,IAAA,KAA8B,QAAQ,CAAC,KAAK,CAAC,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAC;IAC9C,IAAA,KAA8B,QAAQ,EAAe,EAApD,UAAU,QAAA,EAAE,aAAa,QAA2B,CAAC;IAC5D,IAAM,eAAe,GAAG,MAAM,EAA6C,CAAC;IAC5E,IAAM,cAAc,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACvD,IAAM,YAAY,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;IACjD,IAAA,KAAwC,QAAQ,CAAC,KAAK,CAAC,EAAtD,eAAe,QAAA,EAAE,kBAAkB,QAAmB,CAAC;IACxD,IAAA,KAAwC,QAAQ,CAAC,CAAC,CAAC,EAAlD,eAAe,QAAA,EAAE,kBAAkB,QAAe,CAAC;IAE1D,SAAS,CAAC;QACR,IAAI,CAAC,CAAC,UAAU,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE;YACpD,OAAO;SACR;QACD,IAAM,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAhD,CAAgD,CAAE,CAAC;QAC1G,IAAM,YAAY,GAAG,WAAW,CAAC,aAAa,CAAc,OAAO,CAAE,CAAC;QACtE,kEAAkE;QAClE,IAAM,OAAO,GAAG,WAAW,CAAC,aAAa,CAAc,WAAI,MAAM,CAAC,OAAO,CAAE,CAAE,CAAC;QAC9E,IAAM,YAAY,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACjD,IAAA,KAAuC,YAAY,CAAC,qBAAqB,EAAE,EAAnE,QAAQ,UAAA,EAAS,SAAS,WAAyC,CAAC;QAElF,IAAM,qBAAqB,GAAG,UAAC,SAAiB;YACtC,IAAM,gBAAgB,GAAK,YAAY,CAAC,qBAAqB,EAAE,KAAzC,CAA0C;YACxE,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;YACrE,4CAA4C;YAC5C,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS,GAAG,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC;QAC/D,CAAC,CAAC;QAEF,IAAM,iBAAiB,GAAG,UAAC,QAAgB;YACnC,IAAA,KAAmB,UAAU,CAAC,qBAAqB,EAAE,EAAnD,KAAK,WAAA,EAAE,KAAK,WAAuC,CAAC;YAC5D,IAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC/D,qBAAqB,CAAC,KAAK,GAAG,YAAY,GAAG,KAAK,CAAC,CAAC;YACpD,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,0FAA0F;YAC1F,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC;QAEF,IAAM,YAAY,GAAG,UAAC,MAAc;YAClC,IAAI,MAAM,GAAG,QAAQ,EAAE;gBACrB,IAAM,QAAQ,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC;gBACzD,IAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;gBACnC,0FAA0F;gBAC1F,iBAAiB,CAAC,QAAQ,CAAC,CAAC;aAC7B;QACH,CAAC,CAAC;QAEF,IAAM,UAAU,GAAG;YACjB,IAAM,KAAK,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YACvD,eAAe,CAAC,OAAO,GAAG,UAAU,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;YACrE,0FAA0F;YAC1F,iBAAiB,CAAC,KAAK,GAAG,mBAAmB,CAAC,CAAC;YAC/C,YAAY,CAAC,UAAU,IAAI,mBAAmB,CAAC;QACjD,CAAC,CAAC;QACF,IAAM,WAAW,GAAG,UAAC,KAAiB;YACpC,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACtC,IAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;YAC3B,IAAI,MAAM,GAAG,SAAS,EAAE;gBACtB,eAAe,CAAC,OAAO,GAAG,UAAU,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;aACxE;iBAAM;gBACL,YAAY,CAAC,MAAM,CAAC,CAAC;aACtB;QACH,CAAC,CAAC;QACF,IAAM,SAAS,GAAG,UAAC,KAAiB;YAClC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC1B,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,cAAc,EAAE,CAAC;YACjB,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC,CAAC;QACF,IAAM,SAAS,GAAG,UAAC,KAAoB;YACrC,mCAAmC;YACnC,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,EAAE;gBACrE,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;YACD,eAAe;YACf,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,EAAE;gBAClC,iBAAiB,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;aAClE;YACD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,EAAE;gBACnC,iBAAiB,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;aAClE;QACH,CAAC,CAAC;QAEF,qBAAqB,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QAChE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;QACnE,IAAI,UAAU,EAAE;YACd,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACjD;QACD,IAAI,eAAe,EAAE;YACnB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;YAChE,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACnD;QAED,OAAO;YACL,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACtC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;YACxD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtF,OAAO,CACL,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,IAAI,MAAM,CAAC,gBAAgB,CAAC,EAAE,eAAe,IAAI,MAAM,CAAC,WAAW,CAAC,CAAC,EAC/G,WAAW,EAAE,UAAA,KAAK;YAChB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,OAAO;aACR;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,aAAa,EAAE,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,EAAtC,CAAsC,CAAE,CAAC;YACxG,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,aAAa,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC,EACD,OAAO,EAAE,UAAA,KAAK;YACZ,IAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,aAAa,EAAE,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,EAAtC,CAAsC,CAAE,CAAC;YACxG,kBAAkB,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;YAC7D,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,aAAa,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC,EACD,MAAM,EAAE;YACN,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,EACD,IAAI,EAAC,WAAW,sBACC,UAAU,qBACV,cAAc,mBAChB,eAAe,oBAEd,eAAe,CAAC,QAAQ,EAAE,mBAC3B,QAAQ,EACvB,QAAQ,EAAE,CAAC,GACX,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,OAAO,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAAC;AAC7C,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, { useEffect, useRef, useState } from 'react';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { DEFAULT_WIDTH } from '../use-column-widths';\n\ninterface ResizerProps {\n onDragMove: (newWidth: number) => void;\n onFinish: () => void;\n ariaLabelledby?: string;\n minWidth?: number;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({ onDragMove, onFinish, ariaLabelledby, minWidth = DEFAULT_WIDTH }: ResizerProps) {\n const [isDragging, setIsDragging] = useState(false);\n const [headerCell, setHeaderCell] = useState<HTMLElement>();\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const onFinishStable = useStableEventHandler(onFinish);\n const onDragStable = useStableEventHandler(onDragMove);\n const [resizerHasFocus, setResizerHasFocus] = useState(false);\n const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n useEffect(() => {\n if ((!isDragging && !resizerHasFocus) || !headerCell) {\n return;\n }\n const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1)!;\n const tableElement = rootElement.querySelector<HTMLElement>(`table`)!;\n // tracker is rendered inside table wrapper to align with its size\n const tracker = rootElement.querySelector<HTMLElement>(`.${styles.tracker}`)!;\n const scrollParent = getOverflowParents(headerCell)[0];\n const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();\n\n const updateTrackerPosition = (newOffset: number) => {\n const { left: scrollParentLeft } = tableElement.getBoundingClientRect();\n tracker.style.top = headerCell.getBoundingClientRect().height + 'px';\n // minus one pixel to offset the cell border\n tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n const { right, width } = headerCell.getBoundingClientRect();\n const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n updateTrackerPosition(right + updatedWidth - width);\n setHeaderCellWidth(newWidth);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onDragStable(newWidth);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > leftEdge) {\n const cellLeft = headerCell.getBoundingClientRect().left;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const width = headerCell.getBoundingClientRect().width;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(width + AUTO_GROW_INCREMENT);\n scrollParent.scrollLeft += AUTO_GROW_INCREMENT;\n };\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = event.pageX;\n if (offset > rightEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(event.pageX);\n setIsDragging(false);\n onFinishStable();\n clearTimeout(autoGrowTimeout.current);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n // prevent screenreader cursor move\n if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {\n event.preventDefault();\n }\n // update width\n if (event.keyCode === KeyCode.left) {\n updateColumnWidth(headerCell.getBoundingClientRect().width - 10);\n }\n if (event.keyCode === KeyCode.right) {\n updateColumnWidth(headerCell.getBoundingClientRect().width + 10);\n }\n };\n\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n document.body.classList.add(styles['resize-active']);\n document.body.classList.remove(styles['resize-active-with-focus']);\n if (isDragging) {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n if (resizerHasFocus) {\n document.body.classList.add(styles['resize-active-with-focus']);\n headerCell.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n headerCell.removeEventListener('keydown', onKeyDown);\n };\n }, [headerCell, isDragging, onDragStable, onFinishStable, resizerHasFocus, minWidth]);\n return (\n <span\n className={clsx(styles.resizer, isDragging && styles['resizer-active'], resizerHasFocus && styles['has-focus'])}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setIsDragging(true);\n setHeaderCell(headerCell);\n }}\n onFocus={event => {\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setHeaderCellWidth(headerCell.getBoundingClientRect().width);\n setResizerHasFocus(true);\n setHeaderCell(headerCell);\n }}\n onBlur={() => {\n setResizerHasFocus(false);\n }}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-labelledby={ariaLabelledby}\n aria-valuenow={headerCellWidth}\n // aria-valuetext is needed because the VO announces \"collapsed\" when only aria-valuenow set without aria-valuemax\n aria-valuetext={headerCellWidth.toString()}\n aria-valuemin={minWidth}\n tabIndex={0}\n />\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"resize-active": "awsui_resize-
|
|
5
|
-
"
|
|
6
|
-
"resizer
|
|
7
|
-
"
|
|
4
|
+
"resize-active": "awsui_resize-active_x7peu_1tckh_93",
|
|
5
|
+
"resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_1tckh_93",
|
|
6
|
+
"resizer": "awsui_resizer_x7peu_1tckh_98",
|
|
7
|
+
"resizer-active": "awsui_resizer-active_x7peu_1tckh_114",
|
|
8
|
+
"has-focus": "awsui_has-focus_x7peu_1tckh_123",
|
|
9
|
+
"tracker": "awsui_tracker_x7peu_1tckh_146"
|
|
8
10
|
};
|
|
9
11
|
|
|
@@ -90,13 +90,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.awsui_resize-
|
|
93
|
+
.awsui_resize-active_x7peu_1tckh_93:not(#\9):not(.awsui_resize-active-with-focus_x7peu_1tckh_93) * {
|
|
94
94
|
cursor: col-resize;
|
|
95
95
|
-webkit-user-select: none;
|
|
96
96
|
user-select: none;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
.
|
|
99
|
+
.awsui_resizer_x7peu_1tckh_98:not(#\9) {
|
|
100
100
|
bottom: 0;
|
|
101
101
|
cursor: col-resize;
|
|
102
102
|
position: absolute;
|
|
@@ -105,14 +105,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
105
105
|
width: var(--space-l-4vl6xu, 20px);
|
|
106
106
|
z-index: 10;
|
|
107
107
|
}
|
|
108
|
-
.awsui_resize-
|
|
108
|
+
.awsui_resize-active_x7peu_1tckh_93 .awsui_resizer_x7peu_1tckh_98:not(#\9) {
|
|
109
109
|
pointer-events: none;
|
|
110
110
|
}
|
|
111
|
-
th:not(#\9):last-child > .
|
|
111
|
+
th:not(#\9):last-child > .awsui_resizer_x7peu_1tckh_98 {
|
|
112
112
|
width: calc(var(--space-l-4vl6xu, 20px) / 2);
|
|
113
113
|
right: 0;
|
|
114
114
|
}
|
|
115
|
-
th:not(#\9):not(:last-child) > .
|
|
115
|
+
th:not(#\9):not(:last-child) > .awsui_resizer_x7peu_1tckh_98:hover::before, th:not(#\9):not(:last-child) > .awsui_resizer-active_x7peu_1tckh_114::before {
|
|
116
116
|
content: "";
|
|
117
117
|
position: absolute;
|
|
118
118
|
left: calc(var(--space-l-4vl6xu, 20px) / 2 - 2px);
|
|
@@ -121,8 +121,30 @@ th:not(#\9):not(:last-child) > .awsui_resizer_x7peu_1luui_98:hover::before, th:n
|
|
|
121
121
|
box-sizing: border-box;
|
|
122
122
|
border-left: 2px solid var(--color-border-divider-active-nnnfx9, #7d8998);
|
|
123
123
|
}
|
|
124
|
+
.awsui_resizer_x7peu_1tckh_98.awsui_has-focus_x7peu_1tckh_123:not(#\9) {
|
|
125
|
+
position: relative;
|
|
126
|
+
position: absolute;
|
|
127
|
+
}
|
|
128
|
+
.awsui_resizer_x7peu_1tckh_98.awsui_has-focus_x7peu_1tckh_123:not(#\9) {
|
|
129
|
+
outline: 2px dotted transparent;
|
|
130
|
+
outline-offset: calc(var(--space-table-header-focus-outline-gutter-rbx7m7, 0px) - 1px);
|
|
131
|
+
}
|
|
132
|
+
.awsui_resizer_x7peu_1tckh_98.awsui_has-focus_x7peu_1tckh_123:not(#\9)::before {
|
|
133
|
+
content: " ";
|
|
134
|
+
display: block;
|
|
135
|
+
position: absolute;
|
|
136
|
+
left: calc(-1 * var(--space-table-header-focus-outline-gutter-rbx7m7, 0px));
|
|
137
|
+
top: calc(-1 * var(--space-table-header-focus-outline-gutter-rbx7m7, 0px));
|
|
138
|
+
width: calc(100% + 2 * var(--space-table-header-focus-outline-gutter-rbx7m7, 0px));
|
|
139
|
+
height: calc(100% + 2 * var(--space-table-header-focus-outline-gutter-rbx7m7, 0px));
|
|
140
|
+
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
141
|
+
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
142
|
+
}
|
|
143
|
+
.awsui_resizer_x7peu_1tckh_98.awsui_has-focus_x7peu_1tckh_123:not(#\9)::before {
|
|
144
|
+
box-shadow: inset 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
145
|
+
}
|
|
124
146
|
|
|
125
|
-
.
|
|
147
|
+
.awsui_tracker_x7peu_1tckh_146:not(#\9) {
|
|
126
148
|
display: none;
|
|
127
149
|
position: absolute;
|
|
128
150
|
border-left: var(--border-divider-list-width-hacikr, 1px) dashed var(--color-border-divider-active-nnnfx9, #7d8998);
|
|
@@ -130,6 +152,6 @@ th:not(#\9):not(:last-child) > .awsui_resizer_x7peu_1luui_98:hover::before, th:n
|
|
|
130
152
|
top: 0;
|
|
131
153
|
bottom: 0;
|
|
132
154
|
}
|
|
133
|
-
.awsui_resize-
|
|
155
|
+
.awsui_resize-active_x7peu_1tckh_93 .awsui_tracker_x7peu_1tckh_146:not(#\9) {
|
|
134
156
|
display: block;
|
|
135
157
|
}
|
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"resize-active": "awsui_resize-
|
|
6
|
-
"
|
|
7
|
-
"resizer
|
|
8
|
-
"
|
|
5
|
+
"resize-active": "awsui_resize-active_x7peu_1tckh_93",
|
|
6
|
+
"resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_1tckh_93",
|
|
7
|
+
"resizer": "awsui_resizer_x7peu_1tckh_98",
|
|
8
|
+
"resizer-active": "awsui_resizer-active_x7peu_1tckh_114",
|
|
9
|
+
"has-focus": "awsui_has-focus_x7peu_1tckh_123",
|
|
10
|
+
"tracker": "awsui_tracker_x7peu_1tckh_146"
|
|
9
11
|
};
|
|
10
12
|
|
package/table/thead.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,qBAAqB,CAAC;IACtC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC;AAED,QAAA,MAAM,KAAK,wFA8FV,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/table/thead.js
CHANGED
|
@@ -8,7 +8,6 @@ import { focusMarkers } from './use-selection';
|
|
|
8
8
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
9
9
|
import { getColumnKey } from './utils';
|
|
10
10
|
import { TableHeaderCell } from './header-cell';
|
|
11
|
-
import { Resizer } from './resizer';
|
|
12
11
|
import { useColumnWidths } from './use-column-widths';
|
|
13
12
|
import styles from './styles.css.js';
|
|
14
13
|
import headerCellStyles from './header-cell/styles.css.js';
|
|
@@ -40,7 +39,7 @@ var Thead = React.forwardRef(function (_a, outerRef) {
|
|
|
40
39
|
width: widthOverride || column.width,
|
|
41
40
|
minWidth: sticky ? undefined : column.minWidth,
|
|
42
41
|
maxWidth: resizableColumns || sticky ? undefined : column.maxWidth
|
|
43
|
-
}, tabIndex: sticky ? -1 : 0, showFocusRing: colIndex === showFocusRing, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines,
|
|
42
|
+
}, tabIndex: sticky ? -1 : 0, showFocusRing: colIndex === showFocusRing, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, 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 }));
|
|
44
43
|
}))));
|
|
45
44
|
});
|
|
46
45
|
export default Thead;
|
package/table/thead.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAA2C,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,
|
|
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 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}\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 showFocusRing = null,\n sticky = false,\n hidden = false,\n stuck = false,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\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 );\n const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);\n const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr {...focusMarkers.all} ref={outerRef}>\n {selectionType === 'multi' && (\n <th className={clsx(headerCellClass, selectionCellClass)} scope=\"col\">\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 className={clsx(headerCellClass, selectionCellClass)} scope=\"col\">\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 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 />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
|