@cloudscape-design/components 3.0.240 → 3.0.241
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/components/focus-lock/index.d.ts +8 -1
- package/internal/components/focus-lock/index.d.ts.map +1 -1
- package/internal/components/focus-lock/index.js +8 -2
- package/internal/components/focus-lock/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/table/body-cell/inline-editor.d.ts.map +1 -1
- package/table/body-cell/inline-editor.js +16 -10
- package/table/body-cell/inline-editor.js.map +1 -1
|
@@ -6,5 +6,12 @@ export interface FocusLockProps {
|
|
|
6
6
|
restoreFocus?: boolean;
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
}
|
|
9
|
-
export
|
|
9
|
+
export interface FocusLockRef {
|
|
10
|
+
/**
|
|
11
|
+
* Focuses the first element in the component.
|
|
12
|
+
*/
|
|
13
|
+
focusFirst(): void;
|
|
14
|
+
}
|
|
15
|
+
declare const _default: React.ForwardRefExoticComponent<FocusLockProps & React.RefAttributes<FocusLockRef>>;
|
|
16
|
+
export default _default;
|
|
10
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAqED,wBAA2C"}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
4
4
|
import { useMergeRefs } from '../../hooks/use-merge-refs';
|
|
5
5
|
import TabTrap from '../tab-trap/index';
|
|
6
6
|
import { getFirstFocusable, getLastFocusable } from './utils';
|
|
7
|
-
|
|
7
|
+
function FocusLock({ className, disabled, autoFocus, restoreFocus, children }, ref) {
|
|
8
|
+
useImperativeHandle(ref, () => {
|
|
9
|
+
return {
|
|
10
|
+
focusFirst,
|
|
11
|
+
};
|
|
12
|
+
});
|
|
8
13
|
const returnFocusToRef = useRef(null);
|
|
9
14
|
const containerRef = useRef(null);
|
|
10
15
|
// Using a callback ref to detect component unmounts, which is safer than using useEffect.
|
|
@@ -50,4 +55,5 @@ export default function FocusLock({ className, disabled, autoFocus, restoreFocus
|
|
|
50
55
|
React.createElement("div", { className: className, ref: mergedRef }, children),
|
|
51
56
|
React.createElement(TabTrap, { disabled: disabled, focusNextCallback: focusFirst })));
|
|
52
57
|
}
|
|
58
|
+
export default React.forwardRef(FocusLock);
|
|
53
59
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiB9D,SAAS,SAAS,CAChB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAkB,EAC1E,GAA4B;IAE5B,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE;QAC5B,OAAO;YACL,UAAU;SACX,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,0FAA0F;IAC1F,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,IAA2B,EAAE,EAAE;;QAC9B,IAAI,IAAI,KAAK,IAAI,IAAI,YAAY,EAAE;YACjC,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACnC;IACH,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;IAElE,MAAM,UAAU,GAAG,GAAG,EAAE;;QACtB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,MAAA,iBAAiB,CAAC,YAAY,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;SAClD;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;;QACrB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,MAAA,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;SACjD;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,QAAQ,EAAE;YAC1B,gBAAgB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAwC,CAAC;YAC7E,UAAU,EAAE,CAAC;SACd;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,0DAA0D;IAC1D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7D,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,YAAY,KAAK,CAAC,CAAC,QAAQ,EAAE;YAC/B,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC5B,IAAI,QAAQ,IAAI,YAAY,EAAE;gBAC5B,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAClC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;aACjC;SACF;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3C,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,SAAS,GAAI;QAC7D,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,IACtC,QAAQ,CACL;QACN,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,GAAI,CAC7D,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n className?: string;\n disabled?: boolean;\n autoFocus?: boolean;\n restoreFocus?: boolean;\n children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n /**\n * Focuses the first element in the component.\n */\n focusFirst(): void;\n}\n\nfunction FocusLock(\n { className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,\n ref: React.Ref<FocusLockRef>\n) {\n useImperativeHandle(ref, () => {\n return {\n focusFirst,\n };\n });\n\n const returnFocusToRef = useRef<HTMLOrSVGElement | null>(null);\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n // Using a callback ref to detect component unmounts, which is safer than using useEffect.\n const restoreFocusHandler = useCallback(\n (elem: HTMLDivElement | null) => {\n if (elem === null && restoreFocus) {\n returnFocusToRef.current?.focus();\n }\n },\n [restoreFocus]\n );\n\n const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n const focusFirst = () => {\n if (containerRef.current) {\n getFirstFocusable(containerRef.current)?.focus();\n }\n };\n\n const focusLast = () => {\n if (containerRef.current) {\n getLastFocusable(containerRef.current)?.focus();\n }\n };\n\n useEffect(() => {\n if (autoFocus && !disabled) {\n returnFocusToRef.current = document.activeElement as HTMLOrSVGElement | null;\n focusFirst();\n }\n }, [autoFocus, disabled]);\n\n // Returns focus when disabled changes from false to true.\n const [prevDisabled, setPrevDisabled] = useState(!!disabled);\n useEffect(() => {\n if (prevDisabled !== !!disabled) {\n setPrevDisabled(!!disabled);\n if (disabled && restoreFocus) {\n returnFocusToRef.current?.focus();\n returnFocusToRef.current = null;\n }\n }\n }, [prevDisabled, disabled, restoreFocus]);\n\n return (\n <>\n <TabTrap disabled={disabled} focusNextCallback={focusLast} />\n <div className={className} ref={mergedRef}>\n {children}\n </div>\n <TabTrap disabled={disabled} focusNextCallback={focusFirst} />\n </>\n );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inline-editor.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"inline-editor.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C,UAAU,iBAAiB,CAAC,QAAQ;IAClC,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,EACrC,UAAU,EACV,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,CAAC,QAAQ,CAAC,eAiH7B"}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { __awaiter } from "tslib";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import React, { useEffect, useState } from 'react';
|
|
4
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import Button from '../../button/internal';
|
|
6
6
|
import FormField from '../../form-field/internal';
|
|
7
7
|
import SpaceBetween from '../../space-between/internal';
|
|
8
8
|
import { useClickAway } from './click-away';
|
|
9
9
|
import styles from './styles.css.js';
|
|
10
|
+
import FocusLock from '../../internal/components/focus-lock';
|
|
10
11
|
// A function that does nothing
|
|
11
12
|
const noop = () => undefined;
|
|
12
13
|
export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit, __onRender, }) {
|
|
13
|
-
var _a, _b;
|
|
14
|
+
var _a, _b, _c;
|
|
14
15
|
const [currentEditLoading, setCurrentEditLoading] = useState(false);
|
|
15
16
|
const [currentEditValue, setCurrentEditValue] = useState();
|
|
17
|
+
const focusLockRef = useRef(null);
|
|
16
18
|
const cellContext = {
|
|
17
19
|
currentValue: currentEditValue,
|
|
18
20
|
setValue: setCurrentEditValue,
|
|
@@ -24,6 +26,7 @@ export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit,
|
|
|
24
26
|
onEditEnd();
|
|
25
27
|
}
|
|
26
28
|
function onSubmitClick(evt) {
|
|
29
|
+
var _a;
|
|
27
30
|
return __awaiter(this, void 0, void 0, function* () {
|
|
28
31
|
evt.preventDefault();
|
|
29
32
|
if (currentEditValue === undefined) {
|
|
@@ -38,6 +41,7 @@ export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit,
|
|
|
38
41
|
}
|
|
39
42
|
catch (e) {
|
|
40
43
|
setCurrentEditLoading(false);
|
|
44
|
+
(_a = focusLockRef.current) === null || _a === void 0 ? void 0 : _a.focusFirst();
|
|
41
45
|
}
|
|
42
46
|
});
|
|
43
47
|
}
|
|
@@ -61,13 +65,15 @@ export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit,
|
|
|
61
65
|
}, [__onRender]);
|
|
62
66
|
// asserting non-undefined editConfig here because this component is unreachable otherwise
|
|
63
67
|
const { ariaLabel = undefined, validation = noop, errorIconAriaLabel, constraintText, editingCell, } = column.editConfig;
|
|
64
|
-
return (React.createElement(
|
|
65
|
-
React.createElement(
|
|
66
|
-
React.createElement("
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
return (React.createElement(FocusLock, { restoreFocus: true, ref: focusLockRef },
|
|
69
|
+
React.createElement("div", { role: "dialog", ref: clickAwayRef, "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _a === void 0 ? void 0 : _a.call(ariaLabels, column), onKeyDown: handleEscape },
|
|
70
|
+
React.createElement("form", { onSubmit: onSubmitClick, className: styles['body-cell-editor-form'] },
|
|
71
|
+
React.createElement(FormField, { stretch: true, label: ariaLabel, constraintText: constraintText, __hideLabel: true, __disableGutters: true, i18nStrings: { errorIconAriaLabel }, errorText: validation(item, currentEditValue) },
|
|
72
|
+
React.createElement("div", { className: styles['body-cell-editor-row'] },
|
|
73
|
+
editingCell(item, cellContext),
|
|
74
|
+
React.createElement("span", { className: styles['body-cell-editor-controls'] },
|
|
75
|
+
React.createElement(SpaceBetween, { direction: "horizontal", size: "xxs" },
|
|
76
|
+
!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,
|
|
77
|
+
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 })))))))));
|
|
72
78
|
}
|
|
73
79
|
//# sourceMappingURL=inline-editor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inline-editor.js","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"inline-editor.js","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } 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';\nimport FocusLock, { FocusLockRef } from '../../internal/components/focus-lock';\n\n// A function that does nothing\nconst noop = () => undefined;\n\ninterface InlineEditorProps<ItemType> {\n ariaLabels: TableProps['ariaLabels'];\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n onEditEnd: () => void;\n submitEdit: TableProps.SubmitEditFunction<ItemType>;\n __onRender?: () => void;\n}\n\nexport function InlineEditor<ItemType>({\n ariaLabels,\n item,\n column,\n onEditEnd,\n submitEdit,\n __onRender,\n}: InlineEditorProps<ItemType>) {\n const [currentEditLoading, setCurrentEditLoading] = useState(false);\n const [currentEditValue, setCurrentEditValue] = useState<Optional<any>>();\n\n const focusLockRef = useRef<FocusLockRef>(null);\n\n const cellContext = {\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 focusLockRef.current?.focusFirst();\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 {\n ariaLabel = undefined,\n validation = noop,\n errorIconAriaLabel,\n constraintText,\n editingCell,\n } = column.editConfig!;\n\n return (\n <FocusLock restoreFocus={true} ref={focusLockRef}>\n <div\n role=\"dialog\"\n ref={clickAwayRef}\n aria-label={ariaLabels?.activateEditLabel?.(column)}\n onKeyDown={handleEscape}\n >\n <form onSubmit={onSubmitClick} className={styles['body-cell-editor-form']}>\n <FormField\n stretch={true}\n label={ariaLabel}\n constraintText={constraintText}\n __hideLabel={true}\n __disableGutters={true}\n i18nStrings={{ errorIconAriaLabel }}\n errorText={validation(item, currentEditValue)}\n >\n <div className={styles['body-cell-editor-row']}>\n {editingCell(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 </div>\n </FocusLock>\n );\n}\n"]}
|