@cloudscape-design/components 3.0.154 → 3.0.156
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/button/internal.d.ts +0 -1
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +2 -2
- package/button/internal.js.map +1 -1
- package/cards/index.d.ts.map +1 -1
- package/cards/index.js +6 -1
- package/cards/index.js.map +1 -1
- package/form-field/interfaces.d.ts +0 -10
- package/form-field/interfaces.d.ts.map +1 -1
- package/form-field/interfaces.js.map +1 -1
- package/form-field/internal.d.ts +1 -1
- package/form-field/internal.d.ts.map +1 -1
- package/form-field/internal.js +4 -5
- package/form-field/internal.js.map +1 -1
- package/input/internal.d.ts.map +1 -1
- package/input/internal.js +4 -16
- package/input/internal.js.map +1 -1
- package/internal/context/form-field-context.d.ts +2 -6
- package/internal/context/form-field-context.d.ts.map +1 -1
- package/internal/context/form-field-context.js +1 -7
- package/internal/context/form-field-context.js.map +1 -1
- package/internal/environment.js +1 -1
- package/{table → internal/hooks}/use-mouse-down-target.d.ts +0 -0
- package/internal/hooks/use-mouse-down-target.d.ts.map +1 -0
- package/{table → internal/hooks}/use-mouse-down-target.js +1 -1
- package/internal/hooks/use-mouse-down-target.js.map +1 -0
- package/internal/manifest.json +1 -1
- package/internal/types.d.ts +0 -9
- package/internal/types.d.ts.map +1 -1
- package/internal/types.js +2 -0
- package/internal/types.js.map +1 -1
- package/package.json +1 -1
- package/select/parts/styles.css.js +9 -9
- package/select/parts/styles.scoped.css +9 -27
- package/select/parts/styles.selectors.js +9 -9
- package/table/body-cell/index.d.ts +20 -11
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +9 -48
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +12 -18
- package/table/body-cell/styles.scoped.css +46 -229
- package/table/body-cell/styles.selectors.js +12 -18
- package/table/header-cell/index.d.ts +7 -8
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +2 -6
- package/table/header-cell/index.js.map +1 -1
- package/table/header-cell/styles.css.js +18 -19
- package/table/header-cell/styles.scoped.css +35 -40
- package/table/header-cell/styles.selectors.js +18 -19
- package/table/header-cell/utils.d.ts +1 -1
- package/table/header-cell/utils.d.ts.map +1 -1
- package/table/interfaces.d.ts +10 -85
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +19 -69
- package/table/internal.js.map +1 -1
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +1 -1
- package/table/thead.js.map +1 -1
- package/table/utils.d.ts +1 -1
- package/table/utils.d.ts.map +1 -1
- package/test-utils/dom/table/index.d.ts +0 -4
- package/test-utils/dom/table/index.js +5 -21
- package/test-utils/dom/table/index.js.map +1 -1
- package/test-utils/selectors/table/index.d.ts +0 -4
- package/test-utils/selectors/table/index.js +5 -21
- package/test-utils/selectors/table/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/table/body-cell/click-away.d.ts +0 -9
- package/table/body-cell/click-away.d.ts.map +0 -1
- package/table/body-cell/click-away.js +0 -38
- package/table/body-cell/click-away.js.map +0 -1
- package/table/body-cell/inline-editor.d.ts +0 -12
- package/table/body-cell/inline-editor.d.ts.map +0 -1
- package/table/body-cell/inline-editor.js +0 -88
- package/table/body-cell/inline-editor.js.map +0 -1
- package/table/body-cell/td-element.d.ts +0 -21
- package/table/body-cell/td-element.d.ts.map +0 -1
- package/table/body-cell/td-element.js +0 -11
- package/table/body-cell/td-element.js.map +0 -1
- package/table/body-cell/use-stable-scroll-position.d.ts +0 -17
- package/table/body-cell/use-stable-scroll-position.d.ts.map +0 -1
- package/table/body-cell/use-stable-scroll-position.js +0 -48
- package/table/body-cell/use-stable-scroll-position.js.map +0 -1
- package/table/use-mouse-down-target.d.ts.map +0 -1
- package/table/use-mouse-down-target.js.map +0 -1
- package/table/use-table-focus-navigation.d.ts +0 -16
- package/table/use-table-focus-navigation.d.ts.map +0 -1
- package/table/use-table-focus-navigation.js +0 -131
- package/table/use-table-focus-navigation.js.map +0 -1
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { __awaiter, __generator } from "tslib";
|
|
2
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import React, { useEffect, useState } from 'react';
|
|
5
|
-
import Button from '../../button/internal';
|
|
6
|
-
import FormField from '../../form-field/internal';
|
|
7
|
-
import SpaceBetween from '../../space-between/internal';
|
|
8
|
-
import { useClickAway } from './click-away';
|
|
9
|
-
import styles from './styles.css.js';
|
|
10
|
-
// A function that does nothing
|
|
11
|
-
var noop = function () { return undefined; };
|
|
12
|
-
export function InlineEditor(_a) {
|
|
13
|
-
var _b, _c;
|
|
14
|
-
var ariaLabels = _a.ariaLabels, item = _a.item, column = _a.column, onEditEnd = _a.onEditEnd, submitEdit = _a.submitEdit, __onRender = _a.__onRender;
|
|
15
|
-
var _d = useState(false), currentEditLoading = _d[0], setCurrentEditLoading = _d[1];
|
|
16
|
-
var _e = useState(), currentEditValue = _e[0], setCurrentEditValue = _e[1];
|
|
17
|
-
var cellContext = {
|
|
18
|
-
isEditing: true,
|
|
19
|
-
currentValue: currentEditValue,
|
|
20
|
-
setValue: setCurrentEditValue
|
|
21
|
-
};
|
|
22
|
-
function finishEdit(cancel) {
|
|
23
|
-
if (cancel === void 0) { cancel = false; }
|
|
24
|
-
if (!cancel) {
|
|
25
|
-
setCurrentEditValue(undefined);
|
|
26
|
-
}
|
|
27
|
-
onEditEnd();
|
|
28
|
-
}
|
|
29
|
-
function onSubmitClick(evt) {
|
|
30
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
31
|
-
var e_1;
|
|
32
|
-
return __generator(this, function (_a) {
|
|
33
|
-
switch (_a.label) {
|
|
34
|
-
case 0:
|
|
35
|
-
evt.preventDefault();
|
|
36
|
-
if (currentEditValue === undefined) {
|
|
37
|
-
finishEdit();
|
|
38
|
-
return [2 /*return*/];
|
|
39
|
-
}
|
|
40
|
-
setCurrentEditLoading(true);
|
|
41
|
-
_a.label = 1;
|
|
42
|
-
case 1:
|
|
43
|
-
_a.trys.push([1, 3, , 4]);
|
|
44
|
-
return [4 /*yield*/, submitEdit(item, column, currentEditValue)];
|
|
45
|
-
case 2:
|
|
46
|
-
_a.sent();
|
|
47
|
-
setCurrentEditLoading(false);
|
|
48
|
-
finishEdit();
|
|
49
|
-
return [3 /*break*/, 4];
|
|
50
|
-
case 3:
|
|
51
|
-
e_1 = _a.sent();
|
|
52
|
-
setCurrentEditLoading(false);
|
|
53
|
-
return [3 /*break*/, 4];
|
|
54
|
-
case 4: return [2 /*return*/];
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
function onCancel() {
|
|
60
|
-
if (currentEditLoading) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
finishEdit(true);
|
|
64
|
-
}
|
|
65
|
-
function handleEscape(event) {
|
|
66
|
-
if (event.key === 'Escape') {
|
|
67
|
-
onCancel();
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
var clickAwayRef = useClickAway(onCancel);
|
|
71
|
-
useEffect(function () {
|
|
72
|
-
if (__onRender) {
|
|
73
|
-
var timer_1 = setTimeout(__onRender, 1);
|
|
74
|
-
return function () { return clearTimeout(timer_1); };
|
|
75
|
-
}
|
|
76
|
-
}, [__onRender]);
|
|
77
|
-
// asserting non-undefined editConfig here because this component is unreachable otherwise
|
|
78
|
-
var _f = column.editConfig, _g = _f.ariaLabel, ariaLabel = _g === void 0 ? undefined : _g, _h = _f.validation, validation = _h === void 0 ? noop : _h, errorIconAriaLabel = _f.errorIconAriaLabel;
|
|
79
|
-
return (React.createElement("form", { ref: clickAwayRef, onSubmit: onSubmitClick, onKeyDown: handleEscape, className: styles['body-cell-editor-form'] },
|
|
80
|
-
React.createElement(FormField, { stretch: true, label: ariaLabel, __hideLabel: true, __disableGutters: true, __useReactAutofocus: true, i18nStrings: { errorIconAriaLabel: errorIconAriaLabel }, errorText: validation(item, currentEditValue) },
|
|
81
|
-
React.createElement("div", { className: styles['body-cell-editor-row'] },
|
|
82
|
-
column.cell(item, cellContext),
|
|
83
|
-
React.createElement("span", { className: styles['body-cell-editor-controls'] },
|
|
84
|
-
React.createElement(SpaceBetween, { direction: "horizontal", size: "xxs" },
|
|
85
|
-
!currentEditLoading ? (React.createElement(Button, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cancelEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), formAction: "none", iconName: "close", variant: "inline-icon", onClick: onCancel })) : null,
|
|
86
|
-
React.createElement(Button, { ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.submitEditLabel) === null || _c === void 0 ? void 0 : _c.call(ariaLabels, column), formAction: "submit", iconName: "check", variant: "inline-icon", loading: currentEditLoading })))))));
|
|
87
|
-
}
|
|
88
|
-
//# sourceMappingURL=inline-editor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"inline-editor.js","sourceRoot":"","sources":["../../../../src/table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,YAAY,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,+BAA+B;AAC/B,IAAM,IAAI,GAAG,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;AAW7B,MAAM,UAAU,YAAY,CAAsB,EAOT;;QANvC,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,UAAU,gBAAA;IAEJ,IAAA,KAA8C,QAAQ,CAAC,KAAK,CAAC,EAA5D,kBAAkB,QAAA,EAAE,qBAAqB,QAAmB,CAAC;IAC9D,IAAA,KAA0C,QAAQ,EAAuB,EAAxE,gBAAgB,QAAA,EAAE,mBAAmB,QAAmC,CAAC;IAEhF,IAAM,WAAW,GAAG;QAClB,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,gBAAgB;QAC9B,QAAQ,EAAE,mBAAmB;KAC9B,CAAC;IAEF,SAAS,UAAU,CAAC,MAAc;QAAd,uBAAA,EAAA,cAAc;QAChC,IAAI,CAAC,MAAM,EAAE;YACX,mBAAmB,CAAC,SAAS,CAAC,CAAC;SAChC;QACD,SAAS,EAAE,CAAC;IACd,CAAC;IAED,SAAe,aAAa,CAAC,GAAoB;;;;;;wBAC/C,GAAG,CAAC,cAAc,EAAE,CAAC;wBACrB,IAAI,gBAAgB,KAAK,SAAS,EAAE;4BAClC,UAAU,EAAE,CAAC;4BACb,sBAAO;yBACR;wBAED,qBAAqB,CAAC,IAAI,CAAC,CAAC;;;;wBAE1B,qBAAM,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAA;;wBAAhD,SAAgD,CAAC;wBACjD,qBAAqB,CAAC,KAAK,CAAC,CAAC;wBAC7B,UAAU,EAAE,CAAC;;;;wBAEb,qBAAqB,CAAC,KAAK,CAAC,CAAC;;;;;;KAEhC;IAED,SAAS,QAAQ;QACf,IAAI,kBAAkB,EAAE;YACtB,OAAO;SACR;QACD,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,SAAS,YAAY,CAAC,KAA0B;QAC9C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC;IAED,IAAM,YAAY,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;IAE5C,SAAS,CAAC;QACR,IAAI,UAAU,EAAE;YACd,IAAM,OAAK,GAAG,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;YACxC,OAAO,cAAM,OAAA,YAAY,CAAC,OAAK,CAAC,EAAnB,CAAmB,CAAC;SAClC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,0FAA0F;IACpF,IAAA,KAAmE,MAAM,CAAC,UAAW,EAAnF,iBAAqB,EAArB,SAAS,mBAAG,SAAS,KAAA,EAAE,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EAAE,kBAAkB,wBAAuB,CAAC;IAE5F,OAAO,CACL,8BACE,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,YAAY,EACvB,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;QAE1C,oBAAC,SAAS,IACR,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,IAAI,EACjB,gBAAgB,EAAE,IAAI,EACtB,mBAAmB,EAAE,IAAI,EACzB,WAAW,EAAE,EAAE,kBAAkB,oBAAA,EAAE,EACnC,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,gBAAgB,CAAC;YAE7C,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;gBAC3C,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;gBAC/B,8BAAM,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC;oBAClD,oBAAC,YAAY,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,KAAK;wBAC5C,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACrB,oBAAC,MAAM,IACL,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,2DAAG,MAAM,CAAC,EAChD,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE,QAAQ,GACjB,CACH,CAAC,CAAC,CAAC,IAAI;wBACR,oBAAC,MAAM,IACL,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,2DAAG,MAAM,CAAC,EAChD,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE,kBAAkB,GAC3B,CACW,CACV,CACH,CACI,CACP,CACR,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\nimport Button from '../../button/internal';\nimport FormField from '../../form-field/internal';\nimport SpaceBetween from '../../space-between/internal';\nimport { useClickAway } from './click-away';\nimport { TableProps } from '../interfaces';\nimport styles from './styles.css.js';\nimport { Optional } from '../../internal/types';\n\n// A function that does nothing\nconst noop = () => undefined;\n\ninterface InlineEditorProps<ItemType, ValueType> {\n ariaLabels: TableProps['ariaLabels'];\n column: TableProps.EditableColumnDefinition<ItemType, ValueType>;\n item: ItemType;\n onEditEnd: () => void;\n submitEdit: TableProps.SubmitEditFunction<ItemType, ValueType>;\n __onRender?: () => void;\n}\n\nexport function InlineEditor<ItemType, ValueType>({\n ariaLabels,\n item,\n column,\n onEditEnd,\n submitEdit,\n __onRender,\n}: InlineEditorProps<ItemType, ValueType>) {\n const [currentEditLoading, setCurrentEditLoading] = useState(false);\n const [currentEditValue, setCurrentEditValue] = useState<Optional<ValueType>>();\n\n const cellContext = {\n isEditing: true,\n currentValue: currentEditValue,\n setValue: setCurrentEditValue,\n };\n\n function finishEdit(cancel = false) {\n if (!cancel) {\n setCurrentEditValue(undefined);\n }\n onEditEnd();\n }\n\n async function onSubmitClick(evt: React.FormEvent) {\n evt.preventDefault();\n if (currentEditValue === undefined) {\n finishEdit();\n return;\n }\n\n setCurrentEditLoading(true);\n try {\n await submitEdit(item, column, currentEditValue);\n setCurrentEditLoading(false);\n finishEdit();\n } catch (e) {\n setCurrentEditLoading(false);\n }\n }\n\n function onCancel() {\n if (currentEditLoading) {\n return;\n }\n finishEdit(true);\n }\n\n function handleEscape(event: React.KeyboardEvent): void {\n if (event.key === 'Escape') {\n onCancel();\n }\n }\n\n const clickAwayRef = useClickAway(onCancel);\n\n useEffect(() => {\n if (__onRender) {\n const timer = setTimeout(__onRender, 1);\n return () => clearTimeout(timer);\n }\n }, [__onRender]);\n\n // asserting non-undefined editConfig here because this component is unreachable otherwise\n const { ariaLabel = undefined, validation = noop, errorIconAriaLabel } = column.editConfig!;\n\n return (\n <form\n ref={clickAwayRef}\n onSubmit={onSubmitClick}\n onKeyDown={handleEscape}\n className={styles['body-cell-editor-form']}\n >\n <FormField\n stretch={true}\n label={ariaLabel}\n __hideLabel={true}\n __disableGutters={true}\n __useReactAutofocus={true}\n i18nStrings={{ errorIconAriaLabel }}\n errorText={validation(item, currentEditValue)}\n >\n <div className={styles['body-cell-editor-row']}>\n {column.cell(item, cellContext)}\n <span className={styles['body-cell-editor-controls']}>\n <SpaceBetween direction=\"horizontal\" size=\"xxs\">\n {!currentEditLoading ? (\n <Button\n ariaLabel={ariaLabels?.cancelEditLabel?.(column)}\n formAction=\"none\"\n iconName=\"close\"\n variant=\"inline-icon\"\n onClick={onCancel}\n />\n ) : null}\n <Button\n ariaLabel={ariaLabels?.submitEditLabel?.(column)}\n formAction=\"submit\"\n iconName=\"check\"\n variant=\"inline-icon\"\n loading={currentEditLoading}\n />\n </SpaceBetween>\n </span>\n </div>\n </FormField>\n </form>\n );\n}\n"]}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface TableTdElementProps {
|
|
3
|
-
className?: string;
|
|
4
|
-
style?: React.CSSProperties;
|
|
5
|
-
wrapLines: boolean | undefined;
|
|
6
|
-
isFirstRow: boolean;
|
|
7
|
-
isLastRow: boolean;
|
|
8
|
-
isSelected: boolean;
|
|
9
|
-
isNextSelected: boolean;
|
|
10
|
-
isPrevSelected: boolean;
|
|
11
|
-
nativeAttributes?: Omit<React.HTMLAttributes<HTMLTableCellElement>, 'style' | 'className' | 'onClick'>;
|
|
12
|
-
onClick?: () => void;
|
|
13
|
-
children?: React.ReactNode;
|
|
14
|
-
isEvenRow?: boolean;
|
|
15
|
-
stripedRows?: boolean;
|
|
16
|
-
hasSelection?: boolean;
|
|
17
|
-
hasFooter?: boolean;
|
|
18
|
-
isVisualRefresh?: boolean;
|
|
19
|
-
}
|
|
20
|
-
export declare const TableTdElement: React.ForwardRefExoticComponent<TableTdElementProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
21
|
-
//# sourceMappingURL=td-element.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"td-element.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/td-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;IACvG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,kGAgD1B,CAAC"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import clsx from 'clsx';
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import styles from './styles.css.js';
|
|
7
|
-
export var TableTdElement = React.forwardRef(function (_a, ref) {
|
|
8
|
-
var className = _a.className, style = _a.style, children = _a.children, wrapLines = _a.wrapLines, isFirstRow = _a.isFirstRow, isLastRow = _a.isLastRow, isSelected = _a.isSelected, isNextSelected = _a.isNextSelected, isPrevSelected = _a.isPrevSelected, nativeAttributes = _a.nativeAttributes, onClick = _a.onClick, isEvenRow = _a.isEvenRow, stripedRows = _a.stripedRows, isVisualRefresh = _a.isVisualRefresh, hasSelection = _a.hasSelection, hasFooter = _a.hasFooter;
|
|
9
|
-
return (React.createElement("td", __assign({ style: style, className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer']), onClick: onClick, ref: ref }, nativeAttributes), children));
|
|
10
|
-
});
|
|
11
|
-
//# sourceMappingURL=td-element.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"td-element.js","sourceRoot":"","sources":["../../../../src/table/body-cell/td-element.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAqBrC,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,UACE,EAiBC,EACD,GAAG;QAjBD,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,eAAe,qBAAA,EACf,YAAY,kBAAA,EACZ,SAAS,eAAA;IAIX,OAAO,CACL,qCACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,WAAW,CAAC,EACnB,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,UAAU,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC1C,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,CAAC,SAAS,IAAI,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACvD,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC9C,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,CAClC,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,IACJ,gBAAgB,GAEnB,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CACF,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 styles from './styles.css.js';\n\nexport interface TableTdElementProps {\n className?: string;\n style?: React.CSSProperties;\n wrapLines: boolean | undefined;\n isFirstRow: boolean;\n isLastRow: boolean;\n isSelected: boolean;\n isNextSelected: boolean;\n isPrevSelected: boolean;\n nativeAttributes?: Omit<React.HTMLAttributes<HTMLTableCellElement>, 'style' | 'className' | 'onClick'>;\n onClick?: () => void;\n children?: React.ReactNode;\n isEvenRow?: boolean;\n stripedRows?: boolean;\n hasSelection?: boolean;\n hasFooter?: boolean;\n isVisualRefresh?: boolean;\n}\n\nexport const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(\n (\n {\n className,\n style,\n children,\n wrapLines,\n isFirstRow,\n isLastRow,\n isSelected,\n isNextSelected,\n isPrevSelected,\n nativeAttributes,\n onClick,\n isEvenRow,\n stripedRows,\n isVisualRefresh,\n hasSelection,\n hasFooter,\n },\n ref\n ) => {\n return (\n <td\n style={style}\n className={clsx(\n className,\n styles['body-cell'],\n wrapLines && styles['body-cell-wrap'],\n isFirstRow && styles['body-cell-first-row'],\n isLastRow && styles['body-cell-last-row'],\n isSelected && styles['body-cell-selected'],\n isNextSelected && styles['body-cell-next-selected'],\n isPrevSelected && styles['body-cell-prev-selected'],\n !isEvenRow && stripedRows && styles['body-cell-shaded'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n hasSelection && styles['has-selection'],\n hasFooter && styles['has-footer']\n )}\n onClick={onClick}\n ref={ref}\n {...nativeAttributes}\n >\n {children}\n </td>\n );\n }\n);\n"]}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare function isScrollable(ele: HTMLElement): boolean;
|
|
3
|
-
export declare function getScrollableParent(ele: HTMLElement | null): HTMLElement;
|
|
4
|
-
export interface UseStableScrollPositionResult {
|
|
5
|
-
/** Stores the current scroll position of the nearest scrollable container. */
|
|
6
|
-
storeScrollPosition: () => void;
|
|
7
|
-
/** Restores the scroll position of the nearest scrollable container to the last stored position. */
|
|
8
|
-
restoreScrollPosition: () => void;
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* This hook stores the scroll position of the nearest scrollable parent of the
|
|
12
|
-
* `activeElementRef` when `storeScrollPosition` is called, and restores it when
|
|
13
|
-
* `restoreScrollPosition` is called.
|
|
14
|
-
* @param activeElementRef Ref to an active element in the table. This is used to find the nearest scrollable parent.
|
|
15
|
-
*/
|
|
16
|
-
export declare function useStableScrollPosition<T extends HTMLElement>(activeElementRef: React.RefObject<T>): UseStableScrollPositionResult;
|
|
17
|
-
//# sourceMappingURL=use-stable-scroll-position.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-stable-scroll-position.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/use-stable-scroll-position.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,wBAAgB,YAAY,CAAC,GAAG,EAAE,WAAW,WAK5C;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,CAMxE;AAED,MAAM,WAAW,6BAA6B;IAC5C,8EAA8E;IAC9E,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,oGAAoG;IACpG,qBAAqB,EAAE,MAAM,IAAI,CAAC;CACnC;AAMD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,WAAW,EAC3D,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GACnC,6BAA6B,CAsB/B"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import { useCallback, useRef } from 'react';
|
|
4
|
-
export function isScrollable(ele) {
|
|
5
|
-
var overflowXStyle = window.getComputedStyle(ele).overflowX;
|
|
6
|
-
var isOverflowHidden = overflowXStyle.indexOf('hidden') !== -1;
|
|
7
|
-
return ele.scrollWidth > ele.clientWidth && !isOverflowHidden;
|
|
8
|
-
}
|
|
9
|
-
export function getScrollableParent(ele) {
|
|
10
|
-
return !ele || ele === document.body
|
|
11
|
-
? document.body
|
|
12
|
-
: isScrollable(ele)
|
|
13
|
-
? ele
|
|
14
|
-
: getScrollableParent(ele.parentElement);
|
|
15
|
-
}
|
|
16
|
-
var shouldScroll = function (_a, _b) {
|
|
17
|
-
var cx = _a[0], cy = _a[1];
|
|
18
|
-
var px = _b[0], py = _b[1];
|
|
19
|
-
return cx - px > 5 || cy - py > 5;
|
|
20
|
-
};
|
|
21
|
-
/**
|
|
22
|
-
* This hook stores the scroll position of the nearest scrollable parent of the
|
|
23
|
-
* `activeElementRef` when `storeScrollPosition` is called, and restores it when
|
|
24
|
-
* `restoreScrollPosition` is called.
|
|
25
|
-
* @param activeElementRef Ref to an active element in the table. This is used to find the nearest scrollable parent.
|
|
26
|
-
*/
|
|
27
|
-
export function useStableScrollPosition(activeElementRef) {
|
|
28
|
-
var scrollRef = useRef();
|
|
29
|
-
var storeScrollPosition = useCallback(function () {
|
|
30
|
-
var _a;
|
|
31
|
-
var scrollableParent = getScrollableParent((_a = activeElementRef.current) !== null && _a !== void 0 ? _a : document.body);
|
|
32
|
-
if (scrollableParent) {
|
|
33
|
-
scrollRef.current = [scrollableParent.scrollLeft, scrollableParent.scrollTop];
|
|
34
|
-
}
|
|
35
|
-
}, [activeElementRef]);
|
|
36
|
-
var restoreScrollPosition = useCallback(function () {
|
|
37
|
-
var _a;
|
|
38
|
-
var _b;
|
|
39
|
-
var scrollableParent = getScrollableParent((_b = activeElementRef.current) !== null && _b !== void 0 ? _b : document.body);
|
|
40
|
-
if (scrollRef.current &&
|
|
41
|
-
scrollRef.current.toString() !== '0,0' &&
|
|
42
|
-
shouldScroll(scrollRef.current, [scrollableParent.scrollLeft, scrollableParent.scrollTop])) {
|
|
43
|
-
_a = scrollRef.current, scrollableParent.scrollLeft = _a[0], scrollableParent.scrollTop = _a[1];
|
|
44
|
-
}
|
|
45
|
-
}, [activeElementRef]);
|
|
46
|
-
return { storeScrollPosition: storeScrollPosition, restoreScrollPosition: restoreScrollPosition };
|
|
47
|
-
}
|
|
48
|
-
//# sourceMappingURL=use-stable-scroll-position.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-stable-scroll-position.js","sourceRoot":"","sources":["../../../../src/table/body-cell/use-stable-scroll-position.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAc,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,UAAU,YAAY,CAAC,GAAgB;IAC3C,IAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC;IAC9D,IAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAEjE,OAAO,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW,IAAI,CAAC,gBAAgB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,GAAuB;IACzD,OAAO,CAAC,GAAG,IAAI,GAAG,KAAK,QAAQ,CAAC,IAAI;QAClC,CAAC,CAAC,QAAQ,CAAC,IAAI;QACf,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC;YACnB,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AAC7C,CAAC;AASD,IAAM,YAAY,GAAG,UAAC,EAA0B,EAAE,EAA0B;QAArD,EAAE,QAAA,EAAE,EAAE,QAAA;QAAsB,EAAE,QAAA,EAAE,EAAE,QAAA;IACvD,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,uBAAuB,CACrC,gBAAoC;IAEpC,IAAM,SAAS,GAAG,MAAM,EAAyC,CAAC;IAElE,IAAM,mBAAmB,GAAG,WAAW,CAAC;;QACtC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,MAAA,gBAAgB,CAAC,OAAO,mCAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QACxF,IAAI,gBAAgB,EAAE;YACpB,SAAS,CAAC,OAAO,GAAG,CAAC,gBAAgB,CAAC,UAAU,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;SAC/E;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,IAAM,qBAAqB,GAAG,WAAW,CAAC;;;QACxC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,MAAA,gBAAgB,CAAC,OAAO,mCAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QACxF,IACE,SAAS,CAAC,OAAO;YACjB,SAAS,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,KAAK;YACtC,YAAY,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC,EAC1F;YACA,KAA4D,SAAS,CAAC,OAAO,EAA5E,gBAAgB,CAAC,UAAU,QAAA,EAAE,gBAAgB,CAAC,SAAS,QAAA,CAAsB;SAC/E;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,EAAE,mBAAmB,qBAAA,EAAE,qBAAqB,uBAAA,EAAE,CAAC;AACxD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useRef } from 'react';\n\nexport function isScrollable(ele: HTMLElement) {\n const overflowXStyle = window.getComputedStyle(ele).overflowX;\n const isOverflowHidden = overflowXStyle.indexOf('hidden') !== -1;\n\n return ele.scrollWidth > ele.clientWidth && !isOverflowHidden;\n}\n\nexport function getScrollableParent(ele: HTMLElement | null): HTMLElement {\n return !ele || ele === document.body\n ? document.body\n : isScrollable(ele)\n ? ele\n : getScrollableParent(ele.parentElement);\n}\n\nexport interface UseStableScrollPositionResult {\n /** Stores the current scroll position of the nearest scrollable container. */\n storeScrollPosition: () => void;\n /** Restores the scroll position of the nearest scrollable container to the last stored position. */\n restoreScrollPosition: () => void;\n}\n\nconst shouldScroll = ([cx, cy]: [number, number], [px, py]: [number, number]) => {\n return cx - px > 5 || cy - py > 5;\n};\n\n/**\n * This hook stores the scroll position of the nearest scrollable parent of the\n * `activeElementRef` when `storeScrollPosition` is called, and restores it when\n * `restoreScrollPosition` is called.\n * @param activeElementRef Ref to an active element in the table. This is used to find the nearest scrollable parent.\n */\nexport function useStableScrollPosition<T extends HTMLElement>(\n activeElementRef: React.RefObject<T>\n): UseStableScrollPositionResult {\n const scrollRef = useRef<Parameters<HTMLBodyElement['scroll']>>();\n\n const storeScrollPosition = useCallback(() => {\n const scrollableParent = getScrollableParent(activeElementRef.current ?? document.body);\n if (scrollableParent) {\n scrollRef.current = [scrollableParent.scrollLeft, scrollableParent.scrollTop];\n }\n }, [activeElementRef]);\n\n const restoreScrollPosition = useCallback(() => {\n const scrollableParent = getScrollableParent(activeElementRef.current ?? document.body);\n if (\n scrollRef.current &&\n scrollRef.current.toString() !== '0,0' &&\n shouldScroll(scrollRef.current, [scrollableParent.scrollLeft, scrollableParent.scrollTop])\n ) {\n [scrollableParent.scrollLeft, scrollableParent.scrollTop] = scrollRef.current;\n }\n }, [activeElementRef]);\n\n return { storeScrollPosition, restoreScrollPosition };\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-mouse-down-target.d.ts","sourceRoot":"","sources":["../../../src/table/use-mouse-down-target.ts"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,sBAMzC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-mouse-down-target.js","sourceRoot":"","sources":["../../../src/table/use-mouse-down-target.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,IAAM,0BAA0B,GAAG,sBAAsB,CAAc,UAAA,SAAS;IAC9E,SAAS,eAAe,CAAC,KAAiB;QACxC,SAAS,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;IAClC,CAAC;IACD,SAAS,aAAa;QACpB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IACD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IACtD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAClD,OAAO;QACL,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACzD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,IAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACrD,0BAA0B,CAAC,UAAA,MAAM;QAC/B,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,OAAO,cAAM,OAAA,kBAAkB,CAAC,OAAO,EAA1B,CAA0B,CAAC;AAC1C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useRef } from 'react';\nimport { createSingletonHandler } from '../internal/hooks/use-singleton-handler';\n\nconst useEventListenersSingleton = createSingletonHandler<Node | null>(setTarget => {\n function handleMouseDown(event: MouseEvent) {\n setTarget(event.target as Node);\n }\n function handleKeyDown() {\n setTarget(null);\n }\n window.addEventListener('mousedown', handleMouseDown);\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n window.removeEventListener('mousedown', handleMouseDown);\n window.removeEventListener('keydown', handleKeyDown);\n };\n});\n\n/**\n * Captures last mouse down target and clears it on keydown.\n * @returns a callback to get the last detected mouse down target.\n */\nexport default function useMouseDownTarget() {\n const mouseDownTargetRef = useRef<null | Node>(null);\n useEventListenersSingleton(target => {\n mouseDownTargetRef.current = target;\n });\n return () => mouseDownTargetRef.current;\n}\n"]}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
import { TableProps } from './interfaces';
|
|
3
|
-
/**
|
|
4
|
-
* This hook is used to navigate between table cells using the keyboard arrow keys.
|
|
5
|
-
* All the functionality is implemented in the hook, so the table component does not
|
|
6
|
-
* need to implement any keyboard event handlers.
|
|
7
|
-
* @param enable - Toggle functionality of the hook
|
|
8
|
-
* @param tableRoot - A ref to a table container. Ideally the root element of the table (<table>); tbody is also acceptable.
|
|
9
|
-
* @param columnDefinitions - The column definitions for the table.
|
|
10
|
-
* @param numRows - The number of rows in the table.
|
|
11
|
-
*/
|
|
12
|
-
declare function useTableFocusNavigation<T extends {
|
|
13
|
-
editConfig?: TableProps.EditConfig<any>;
|
|
14
|
-
}>(selectionType: "none" | "single" | "multi" | undefined, tableRoot: RefObject<HTMLTableElement>, columnDefinitions: Readonly<T[]>, numRows: number): void;
|
|
15
|
-
export default useTableFocusNavigation;
|
|
16
|
-
//# sourceMappingURL=use-table-focus-navigation.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-table-focus-navigation.d.ts","sourceRoot":"","sources":["../../../src/table/use-table-focus-navigation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA2C,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAa1C;;;;;;;;GAQG;AACH,iBAAS,uBAAuB,CAAC,CAAC,SAAS;IAAE,UAAU,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;CAAE,EACpF,aAAa,yCAAsC,EACnD,SAAS,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACtC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAChC,OAAO,EAAE,MAAM,QAqIhB;AAED,eAAe,uBAAuB,CAAC"}
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
4
|
-
function iterateTableCells(table, func) {
|
|
5
|
-
table.querySelectorAll('tr').forEach(function (row, rowIndex) {
|
|
6
|
-
row.querySelectorAll('td').forEach(function (cell, cellIndex) {
|
|
7
|
-
func(cell, rowIndex, cellIndex);
|
|
8
|
-
});
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* This hook is used to navigate between table cells using the keyboard arrow keys.
|
|
13
|
-
* All the functionality is implemented in the hook, so the table component does not
|
|
14
|
-
* need to implement any keyboard event handlers.
|
|
15
|
-
* @param enable - Toggle functionality of the hook
|
|
16
|
-
* @param tableRoot - A ref to a table container. Ideally the root element of the table (<table>); tbody is also acceptable.
|
|
17
|
-
* @param columnDefinitions - The column definitions for the table.
|
|
18
|
-
* @param numRows - The number of rows in the table.
|
|
19
|
-
*/
|
|
20
|
-
function useTableFocusNavigation(selectionType, tableRoot, columnDefinitions, numRows) {
|
|
21
|
-
if (selectionType === void 0) { selectionType = 'none'; }
|
|
22
|
-
var currentFocusCell = useRef(null);
|
|
23
|
-
var focusableColumns = useMemo(function () {
|
|
24
|
-
var cols = columnDefinitions.map(function (column) { return !!column.editConfig; });
|
|
25
|
-
if (selectionType !== 'none') {
|
|
26
|
-
cols.unshift(false);
|
|
27
|
-
}
|
|
28
|
-
return cols;
|
|
29
|
-
}, [columnDefinitions, selectionType]);
|
|
30
|
-
var maxColumnIndex = useMemo(function () { return focusableColumns.length - 1; }, [focusableColumns]);
|
|
31
|
-
var minColumnIndex = useMemo(function () { return (selectionType !== 'none' ? 1 : 0); }, [selectionType]);
|
|
32
|
-
var focusCell = useCallback(function (rowIndex, columnIndex) {
|
|
33
|
-
if (tableRoot === null || tableRoot === void 0 ? void 0 : tableRoot.current) {
|
|
34
|
-
iterateTableCells(tableRoot.current, function (cell, rIndex, cIndex) {
|
|
35
|
-
var _a;
|
|
36
|
-
if (rIndex === rowIndex && cIndex === columnIndex) {
|
|
37
|
-
var editButton = cell.querySelector('button:last-child');
|
|
38
|
-
(_a = editButton === null || editButton === void 0 ? void 0 : editButton.focus) === null || _a === void 0 ? void 0 : _a.call(editButton, { preventScroll: true });
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
}, [tableRoot]);
|
|
43
|
-
var shiftFocus = useCallback(function (vertical, horizontal) {
|
|
44
|
-
// istanbul ignore if next
|
|
45
|
-
if (!currentFocusCell.current) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
var _a = currentFocusCell.current.slice(), rowIndex = _a[0], columnIndex = _a[1];
|
|
49
|
-
var newRowIndex = rowIndex;
|
|
50
|
-
var newColumnIndex = columnIndex;
|
|
51
|
-
if (vertical !== 0) {
|
|
52
|
-
newRowIndex = Math.min(numRows, Math.max(rowIndex + vertical, 0));
|
|
53
|
-
}
|
|
54
|
-
if (horizontal !== 0) {
|
|
55
|
-
while (newColumnIndex <= maxColumnIndex && newColumnIndex >= minColumnIndex) {
|
|
56
|
-
newColumnIndex += horizontal;
|
|
57
|
-
if (focusableColumns[newColumnIndex]) {
|
|
58
|
-
break;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
if ((rowIndex !== newRowIndex || columnIndex !== newColumnIndex) &&
|
|
63
|
-
currentFocusCell.current &&
|
|
64
|
-
tableRoot.current) {
|
|
65
|
-
focusCell(newRowIndex, newColumnIndex);
|
|
66
|
-
}
|
|
67
|
-
}, [focusCell, focusableColumns, maxColumnIndex, minColumnIndex, numRows, tableRoot]);
|
|
68
|
-
var handleArrowKeyEvents = useCallback(function (event) {
|
|
69
|
-
var _a, _b;
|
|
70
|
-
var abort = !!((_a = tableRoot.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-inline-editing-active = "true"]')) ||
|
|
71
|
-
!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.closest('[data-inline-editing-active]'));
|
|
72
|
-
if (abort) {
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
switch (event.key) {
|
|
76
|
-
case 'ArrowUp':
|
|
77
|
-
event.preventDefault();
|
|
78
|
-
shiftFocus(-1, 0);
|
|
79
|
-
break;
|
|
80
|
-
case 'ArrowDown':
|
|
81
|
-
event.preventDefault();
|
|
82
|
-
shiftFocus(1, 0);
|
|
83
|
-
break;
|
|
84
|
-
case 'ArrowLeft':
|
|
85
|
-
event.preventDefault();
|
|
86
|
-
shiftFocus(0, -1);
|
|
87
|
-
break;
|
|
88
|
-
case 'ArrowRight':
|
|
89
|
-
event.preventDefault();
|
|
90
|
-
shiftFocus(0, 1);
|
|
91
|
-
break;
|
|
92
|
-
// istanbul ignore next (default case = do nothing, not testable)
|
|
93
|
-
default:
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
}, [shiftFocus, tableRoot]);
|
|
97
|
-
useEffect(function () {
|
|
98
|
-
var eventListeners = new Map();
|
|
99
|
-
// istanbul ignore if
|
|
100
|
-
if (!tableRoot.current) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
var tableElement = tableRoot.current;
|
|
104
|
-
// istanbul ignore next (tested in use-focus-navigation.test.tsx#L210)
|
|
105
|
-
function cleanUpListeners() {
|
|
106
|
-
iterateTableCells(tableElement, function (cell, rowIndex, columnIndex) {
|
|
107
|
-
var listeners = eventListeners.get([rowIndex, columnIndex]);
|
|
108
|
-
if (listeners === null || listeners === void 0 ? void 0 : listeners.focusin) {
|
|
109
|
-
cell.removeEventListener('focusin', listeners.focusin);
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
tableElement.removeEventListener('keydown', handleArrowKeyEvents);
|
|
113
|
-
}
|
|
114
|
-
iterateTableCells(tableElement, function (cell, rowIndex, cellIndex) {
|
|
115
|
-
if (!focusableColumns[cellIndex]) {
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
var listenerFns = {
|
|
119
|
-
focusin: function () {
|
|
120
|
-
currentFocusCell.current = [rowIndex, cellIndex];
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
eventListeners.set([rowIndex, cellIndex], listenerFns);
|
|
124
|
-
cell.addEventListener('focusin', listenerFns.focusin, { passive: true });
|
|
125
|
-
});
|
|
126
|
-
tableElement.addEventListener('keydown', handleArrowKeyEvents);
|
|
127
|
-
return function () { return tableElement && cleanUpListeners(); };
|
|
128
|
-
}, [focusableColumns, handleArrowKeyEvents, tableRoot]);
|
|
129
|
-
}
|
|
130
|
-
export default useTableFocusNavigation;
|
|
131
|
-
//# sourceMappingURL=use-table-focus-navigation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-table-focus-navigation.js","sourceRoot":"","sources":["../../../src/table/use-table-focus-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';\nimport { TableProps } from './interfaces';\n\nfunction iterateTableCells<T extends HTMLElement>(\n table: T,\n func: (cell: HTMLTableCellElement, rowIndex: number, columnIndex: number) => void\n) {\n table.querySelectorAll('tr').forEach((row: HTMLTableRowElement, rowIndex: number) => {\n row.querySelectorAll('td').forEach((cell, cellIndex) => {\n func(cell, rowIndex, cellIndex);\n });\n });\n}\n\n/**\n * This hook is used to navigate between table cells using the keyboard arrow keys.\n * All the functionality is implemented in the hook, so the table component does not\n * need to implement any keyboard event handlers.\n * @param enable - Toggle functionality of the hook\n * @param tableRoot - A ref to a table container. Ideally the root element of the table (<table>); tbody is also acceptable.\n * @param columnDefinitions - The column definitions for the table.\n * @param numRows - The number of rows in the table.\n */\nfunction useTableFocusNavigation<T extends { editConfig?: TableProps.EditConfig<any> }>(\n selectionType: 'single' | 'multi' | 'none' = 'none',\n tableRoot: RefObject<HTMLTableElement>,\n columnDefinitions: Readonly<T[]>,\n numRows: number\n) {\n const currentFocusCell = useRef<[number, number] | null>(null);\n\n const focusableColumns = useMemo(() => {\n const cols = columnDefinitions.map(column => !!column.editConfig);\n if (selectionType !== 'none') {\n cols.unshift(false);\n }\n return cols;\n }, [columnDefinitions, selectionType]);\n\n const maxColumnIndex = useMemo(() => focusableColumns.length - 1, [focusableColumns]);\n const minColumnIndex = useMemo(() => (selectionType !== 'none' ? 1 : 0), [selectionType]);\n\n const focusCell = useCallback(\n (rowIndex: number, columnIndex: number) => {\n if (tableRoot?.current) {\n iterateTableCells(tableRoot.current, (cell, rIndex, cIndex) => {\n if (rIndex === rowIndex && cIndex === columnIndex) {\n const editButton = cell.querySelector('button:last-child') as HTMLButtonElement | null;\n editButton?.focus?.({ preventScroll: true });\n }\n });\n }\n },\n [tableRoot]\n );\n\n const shiftFocus = useCallback(\n (vertical: -1 | 0 | 1, horizontal: -1 | 0 | 1) => {\n // istanbul ignore if next\n if (!currentFocusCell.current) {\n return;\n }\n const [rowIndex, columnIndex] = currentFocusCell.current.slice();\n let newRowIndex = rowIndex;\n let newColumnIndex = columnIndex;\n\n if (vertical !== 0) {\n newRowIndex = Math.min(numRows, Math.max(rowIndex + vertical, 0));\n }\n\n if (horizontal !== 0) {\n while (newColumnIndex <= maxColumnIndex && newColumnIndex >= minColumnIndex) {\n newColumnIndex += horizontal;\n if (focusableColumns[newColumnIndex]) {\n break;\n }\n }\n }\n\n if (\n (rowIndex !== newRowIndex || columnIndex !== newColumnIndex) &&\n currentFocusCell.current &&\n tableRoot.current\n ) {\n focusCell(newRowIndex, newColumnIndex);\n }\n },\n [focusCell, focusableColumns, maxColumnIndex, minColumnIndex, numRows, tableRoot]\n );\n\n const handleArrowKeyEvents = useCallback(\n (event: KeyboardEvent) => {\n const abort =\n !!tableRoot.current?.querySelector('[data-inline-editing-active = \"true\"]') ||\n !document.activeElement?.closest('[data-inline-editing-active]');\n\n if (abort) {\n return;\n }\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n shiftFocus(-1, 0);\n break;\n case 'ArrowDown':\n event.preventDefault();\n shiftFocus(1, 0);\n break;\n case 'ArrowLeft':\n event.preventDefault();\n shiftFocus(0, -1);\n break;\n case 'ArrowRight':\n event.preventDefault();\n shiftFocus(0, 1);\n break;\n // istanbul ignore next (default case = do nothing, not testable)\n default:\n return;\n }\n },\n [shiftFocus, tableRoot]\n );\n\n useEffect(() => {\n const eventListeners = new Map<[number, number], { focusin(evt: any): void }>();\n // istanbul ignore if\n if (!tableRoot.current) {\n return;\n }\n\n const tableElement = tableRoot.current;\n\n // istanbul ignore next (tested in use-focus-navigation.test.tsx#L210)\n function cleanUpListeners() {\n iterateTableCells(tableElement, (cell, rowIndex, columnIndex) => {\n const listeners = eventListeners.get([rowIndex, columnIndex]);\n if (listeners?.focusin) {\n cell.removeEventListener('focusin', listeners.focusin);\n }\n });\n tableElement.removeEventListener('keydown', handleArrowKeyEvents);\n }\n\n iterateTableCells(tableElement, (cell, rowIndex, cellIndex) => {\n if (!focusableColumns[cellIndex]) {\n return;\n }\n const listenerFns = {\n focusin: () => {\n currentFocusCell.current = [rowIndex, cellIndex];\n },\n };\n eventListeners.set([rowIndex, cellIndex], listenerFns);\n cell.addEventListener('focusin', listenerFns.focusin, { passive: true });\n });\n tableElement.addEventListener('keydown', handleArrowKeyEvents);\n\n return () => tableElement && cleanUpListeners();\n }, [focusableColumns, handleArrowKeyEvents, tableRoot]);\n}\n\nexport default useTableFocusNavigation;\n"]}
|