@cloudscape-design/components-themeable 3.0.893 → 3.0.895
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/table/body-cell/styles.scss +39 -18
- package/lib/internal/scss/table/header-cell/styles.scss +2 -2
- package/lib/internal/template/flashbar/collapsible-flashbar.d.ts.map +1 -1
- package/lib/internal/template/flashbar/collapsible-flashbar.js +0 -2
- package/lib/internal/template/flashbar/collapsible-flashbar.js.map +1 -1
- package/lib/internal/template/flashbar/flash.d.ts.map +1 -1
- package/lib/internal/template/flashbar/flash.js +1 -6
- package/lib/internal/template/flashbar/flash.js.map +1 -1
- package/lib/internal/template/flashbar/index.d.ts.map +1 -1
- package/lib/internal/template/flashbar/index.js +1 -7
- package/lib/internal/template/flashbar/index.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/plugins/helpers/metrics.js +2 -2
- package/lib/internal/template/internal/plugins/helpers/metrics.js.map +1 -1
- package/lib/internal/template/internal/utils/date-time/calendar.d.ts.map +1 -1
- package/lib/internal/template/internal/utils/date-time/calendar.js +1 -6
- package/lib/internal/template/internal/utils/date-time/calendar.js.map +1 -1
- package/lib/internal/template/table/body-cell/disabled-inline-editor.d.ts.map +1 -1
- package/lib/internal/template/table/body-cell/disabled-inline-editor.js +8 -9
- package/lib/internal/template/table/body-cell/disabled-inline-editor.js.map +1 -1
- package/lib/internal/template/table/body-cell/index.d.ts.map +1 -1
- package/lib/internal/template/table/body-cell/index.js +9 -9
- package/lib/internal/template/table/body-cell/index.js.map +1 -1
- package/lib/internal/template/table/body-cell/styles.css.js +46 -44
- package/lib/internal/template/table/body-cell/styles.scoped.css +397 -367
- package/lib/internal/template/table/body-cell/styles.selectors.js +46 -44
- package/lib/internal/template/table/body-cell/td-element.d.ts +2 -2
- package/lib/internal/template/table/body-cell/td-element.d.ts.map +1 -1
- package/lib/internal/template/table/body-cell/td-element.js +4 -3
- package/lib/internal/template/table/body-cell/td-element.js.map +1 -1
- package/lib/internal/template/table/header-cell/index.js +1 -1
- package/lib/internal/template/table/header-cell/index.js.map +1 -1
- package/lib/internal/template/table/header-cell/styles.css.js +28 -28
- package/lib/internal/template/table/header-cell/styles.scoped.css +66 -66
- package/lib/internal/template/table/header-cell/styles.selectors.js +28 -28
- package/package.json +1 -1
- package/lib/internal/template/flashbar/internal/analytics.d.ts +0 -5
- package/lib/internal/template/flashbar/internal/analytics.d.ts.map +0 -1
- package/lib/internal/template/flashbar/internal/analytics.js +0 -29
- package/lib/internal/template/flashbar/internal/analytics.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __rest } 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, { useRef
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import Icon from '../../icon/internal';
|
|
7
7
|
import Portal from '../../internal/components/portal';
|
|
@@ -18,15 +18,12 @@ import styles from './styles.css.js';
|
|
|
18
18
|
export function DisabledInlineEditor(_a) {
|
|
19
19
|
var _b;
|
|
20
20
|
var { item, column, ariaLabels, isEditing, onEditStart, onEditEnd, editDisabledReason } = _a, rest = __rest(_a, ["item", "column", "ariaLabels", "isEditing", "onEditStart", "onEditEnd", "editDisabledReason"]);
|
|
21
|
+
const isExpandableColumn = rest.level !== undefined;
|
|
21
22
|
const clickAwayRef = useClickAway(() => {
|
|
22
23
|
if (isEditing) {
|
|
23
24
|
onEditEnd(true);
|
|
24
25
|
}
|
|
25
26
|
});
|
|
26
|
-
const [hasHover, setHasHover] = useState(false);
|
|
27
|
-
const [hasFocus, setHasFocus] = useState(false);
|
|
28
|
-
// When a cell is both expandable and editable the icon is always shown.
|
|
29
|
-
const showIcon = hasHover || hasFocus || isEditing;
|
|
30
27
|
const iconRef = useRef(null);
|
|
31
28
|
const buttonRef = useRef(null);
|
|
32
29
|
const portalRef = useRef(null);
|
|
@@ -43,12 +40,14 @@ export function DisabledInlineEditor(_a) {
|
|
|
43
40
|
const { targetProps, descriptionEl } = useHiddenDescription(editDisabledReason);
|
|
44
41
|
const portalClasses = usePortalModeClasses(portalRef);
|
|
45
42
|
const { tabIndex } = useSingleTabStopNavigation(buttonRef);
|
|
46
|
-
return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: { 'data-inline-editing-active': isEditing.toString() }, isEditing: isEditing, isEditingDisabled: true, onClick: !isEditing ? onClick : undefined,
|
|
43
|
+
return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: { 'data-inline-editing-active': isEditing.toString() }, isEditing: isEditing, isEditingDisabled: true, onClick: !isEditing && !isExpandableColumn ? onClick : undefined, ref: !isExpandableColumn ? clickAwayRef : undefined }),
|
|
47
44
|
column.cell(item),
|
|
48
45
|
React.createElement("div", { className: styles['body-cell-editor-wrapper'] },
|
|
49
|
-
React.createElement("
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
React.createElement("div", { ref: isExpandableColumn ? clickAwayRef : undefined },
|
|
47
|
+
React.createElement("button", Object.assign({ ref: buttonRef, tabIndex: tabIndex, className: clsx(styles['body-cell-editor'], styles['body-cell-editor-disabled'], isExpandableColumn && styles['body-cell-editor-focusable']), onClick: !isEditing && isExpandableColumn ? onClick : undefined, "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column, item), "aria-haspopup": "dialog", "aria-disabled": "true", onKeyDown: handleEscape }, targetProps),
|
|
48
|
+
React.createElement("span", { className: styles['body-cell-editor-icon'] },
|
|
49
|
+
React.createElement(Icon, { name: "lock-private", variant: "normal", __internalRootRef: iconRef })),
|
|
50
|
+
descriptionEl))),
|
|
52
51
|
isEditing && (React.createElement("span", { ref: portalRef },
|
|
53
52
|
React.createElement(Portal, null,
|
|
54
53
|
React.createElement("span", { className: portalClasses },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"disabled-inline-editor.js","sourceRoot":"","sources":["../../../../src/table/body-cell/disabled-inline-editor.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"disabled-inline-editor.js","sourceRoot":"","sources":["../../../../src/table/body-cell/disabled-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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport Icon from '../../icon/internal';\nimport Portal from '../../internal/components/portal';\nimport { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { usePortalModeClasses } from '../../internal/hooks/use-portal-mode-classes';\nimport InternalLiveRegion from '../../live-region/internal';\nimport Arrow from '../../popover/arrow';\nimport PopoverBody from '../../popover/body';\nimport PopoverContainer from '../../popover/container';\nimport { useClickAway } from './click-away';\nimport { TableBodyCellProps } from './index';\nimport { TableTdElement, TableTdElementProps } from './td-element';\n\nimport styles from './styles.css.js';\n\ninterface DisabledInlineEditorProps<ItemType> extends TableBodyCellProps<ItemType> {\n editDisabledReason: string;\n}\n\nexport function DisabledInlineEditor<ItemType>({\n item,\n column,\n ariaLabels,\n isEditing,\n onEditStart,\n onEditEnd,\n editDisabledReason,\n ...rest\n}: DisabledInlineEditorProps<ItemType>) {\n const isExpandableColumn = rest.level !== undefined;\n const clickAwayRef = useClickAway(() => {\n if (isEditing) {\n onEditEnd(true);\n }\n });\n\n const iconRef = useRef(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const portalRef = useRef<HTMLSpanElement>(null);\n\n function handleEscape(event: React.KeyboardEvent): void {\n if (event.key === 'Escape') {\n onEditEnd(true);\n }\n }\n\n const onClick = () => {\n onEditStart();\n buttonRef.current?.focus();\n };\n\n const { targetProps, descriptionEl } = useHiddenDescription(editDisabledReason);\n const portalClasses = usePortalModeClasses(portalRef);\n\n const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={\n { 'data-inline-editing-active': isEditing.toString() } as TableTdElementProps['nativeAttributes']\n }\n isEditing={isEditing}\n isEditingDisabled={true}\n onClick={!isEditing && !isExpandableColumn ? onClick : undefined}\n ref={!isExpandableColumn ? clickAwayRef : undefined}\n >\n {column.cell(item)}\n\n <div className={styles['body-cell-editor-wrapper']}>\n <div ref={isExpandableColumn ? clickAwayRef : undefined}>\n <button\n ref={buttonRef}\n tabIndex={tabIndex}\n className={clsx(\n styles['body-cell-editor'],\n styles['body-cell-editor-disabled'],\n isExpandableColumn && styles['body-cell-editor-focusable']\n )}\n onClick={!isEditing && isExpandableColumn ? onClick : undefined}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n aria-haspopup=\"dialog\"\n aria-disabled=\"true\"\n onKeyDown={handleEscape}\n {...targetProps}\n >\n <span className={styles['body-cell-editor-icon']}>\n <Icon name=\"lock-private\" variant=\"normal\" __internalRootRef={iconRef} />\n </span>\n {descriptionEl}\n </button>\n </div>\n </div>\n\n {isEditing && (\n <span ref={portalRef}>\n <Portal>\n <span className={portalClasses}>\n <PopoverContainer\n size=\"medium\"\n fixedWidth={false}\n position=\"top\"\n trackRef={iconRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={true}\n zIndex={2000}\n >\n <PopoverBody\n dismissButton={false}\n dismissAriaLabel={undefined}\n header={null}\n onDismiss={() => {}}\n overflowVisible=\"both\"\n >\n <InternalLiveRegion tagName=\"span\">{editDisabledReason}</InternalLiveRegion>\n </PopoverBody>\n </PopoverContainer>\n </span>\n </Portal>\n </span>\n )}\n </TableTdElement>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAQnE,MAAM,WAAW,kBAAkB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IACvE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrD,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;AAgHD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,eAkB1E"}
|
|
@@ -2,6 +2,7 @@ import { __rest } from "tslib";
|
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import React, { useEffect, useRef, useState } from 'react';
|
|
5
|
+
import clsx from 'clsx';
|
|
5
6
|
import { useInternalI18n } from '../../i18n/context';
|
|
6
7
|
import Icon from '../../icon/internal';
|
|
7
8
|
import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';
|
|
@@ -23,6 +24,7 @@ function TableCellEditable(_a) {
|
|
|
23
24
|
'data-inline-editing-active': isEditing.toString(),
|
|
24
25
|
};
|
|
25
26
|
const isFocusMoveNeededRef = useRef(false);
|
|
27
|
+
const isExpandableColumn = rest.level !== undefined;
|
|
26
28
|
useEffect(() => {
|
|
27
29
|
if (!isEditing && editActivateRef.current && isFocusMoveNeededRef.current) {
|
|
28
30
|
isFocusMoveNeededRef.current = false;
|
|
@@ -30,10 +32,7 @@ function TableCellEditable(_a) {
|
|
|
30
32
|
}
|
|
31
33
|
}, [isEditing]);
|
|
32
34
|
// To improve the initial page render performance we only show the edit icon when necessary.
|
|
33
|
-
const [hasHover, setHasHover] = useState(false);
|
|
34
35
|
const [hasFocus, setHasFocus] = useState(false);
|
|
35
|
-
// When a cell is both expandable and editable the icon is always shown.
|
|
36
|
-
const showIcon = hasHover || hasFocus;
|
|
37
36
|
const prevSuccessfulEdit = usePrevious(successfulEdit);
|
|
38
37
|
const prevHasFocus = usePrevious(hasFocus);
|
|
39
38
|
const [showSuccessIcon, setShowSuccessIcon] = useState(false);
|
|
@@ -48,13 +47,13 @@ function TableCellEditable(_a) {
|
|
|
48
47
|
}
|
|
49
48
|
}, [hasFocus, successfulEdit, prevHasFocus, prevSuccessfulEdit]);
|
|
50
49
|
const { tabIndex: editActivateTabIndex } = useSingleTabStopNavigation(editActivateRef);
|
|
51
|
-
return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, isEditing: isEditing, hasSuccessIcon: showSuccessIcon &&
|
|
50
|
+
return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, isEditing: isEditing, hasSuccessIcon: showSuccessIcon && hasFocus, onClick: !isEditing && !isExpandableColumn ? onEditStart : undefined, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false) }), isEditing && column.editConfig ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: options => {
|
|
52
51
|
setShowSuccessIcon(false);
|
|
53
52
|
isFocusMoveNeededRef.current = options.refocusCell;
|
|
54
53
|
onEditEnd(options.cancelled);
|
|
55
54
|
}, submitEdit: submitEdit !== null && submitEdit !== void 0 ? submitEdit : submitHandlerFallback })) : (React.createElement(React.Fragment, null,
|
|
56
55
|
column.cell(item),
|
|
57
|
-
showSuccessIcon &&
|
|
56
|
+
showSuccessIcon && hasFocus && (React.createElement(React.Fragment, null,
|
|
58
57
|
React.createElement("span", { className: styles['body-cell-success'], "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.successfulEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), role: "img", onMouseDown: e => {
|
|
59
58
|
// Prevent the editor's Button blur event to be fired when clicking the success icon.
|
|
60
59
|
// This prevents unfocusing the button and triggers the `TableTdElement` onClick event which initiates the edit mode.
|
|
@@ -63,18 +62,19 @@ function TableCellEditable(_a) {
|
|
|
63
62
|
React.createElement(Icon, { name: "status-positive", variant: "success" })),
|
|
64
63
|
React.createElement(InternalLiveRegion, { tagName: "span", hidden: true }, i18n('ariaLabels.successfulEditLabel', (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.successfulEditLabel) === null || _c === void 0 ? void 0 : _c.call(ariaLabels, column))))),
|
|
65
64
|
React.createElement("div", { className: styles['body-cell-editor-wrapper'] },
|
|
66
|
-
React.createElement("button", { className: styles['body-cell-editor'], "aria-label": (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _d === void 0 ? void 0 : _d.call(ariaLabels, column, item), ref: editActivateRef,
|
|
65
|
+
React.createElement("button", { className: clsx(styles['body-cell-editor'], isExpandableColumn && styles['body-cell-editor-focusable']), "aria-label": (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _d === void 0 ? void 0 : _d.call(ariaLabels, column, item), ref: editActivateRef, onClick: !isEditing && isExpandableColumn ? onEditStart : undefined, tabIndex: editActivateTabIndex },
|
|
66
|
+
React.createElement("span", { className: styles['body-cell-editor-icon'] },
|
|
67
|
+
React.createElement(Icon, { name: "edit" }))))))));
|
|
67
68
|
}
|
|
68
69
|
export function TableBodyCell(props) {
|
|
69
70
|
var _a, _b;
|
|
70
|
-
const isExpandableColumnCell = props.level !== undefined;
|
|
71
71
|
const editDisabledReason = (_b = (_a = props.column.editConfig) === null || _a === void 0 ? void 0 : _a.disabledReason) === null || _b === void 0 ? void 0 : _b.call(_a, props.item);
|
|
72
72
|
// Inline editing is deactivated for expandable column because editable cells are interactive
|
|
73
73
|
// and cannot include interactive content such as expand toggles.
|
|
74
|
-
if (editDisabledReason
|
|
74
|
+
if (editDisabledReason) {
|
|
75
75
|
return React.createElement(DisabledInlineEditor, Object.assign({ editDisabledReason: editDisabledReason }, props));
|
|
76
76
|
}
|
|
77
|
-
if (
|
|
77
|
+
if (props.isEditable || props.isEditing) {
|
|
78
78
|
return React.createElement(TableCellEditable, Object.assign({}, props));
|
|
79
79
|
}
|
|
80
80
|
const { column, item } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport Icon from '../../icon/internal';\nimport { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';\nimport { usePrevious } from '../../internal/hooks/use-previous';\nimport InternalLiveRegion from '../../live-region/internal';\nimport { TableProps } from '../interfaces';\nimport { DisabledInlineEditor } from './disabled-inline-editor';\nimport { InlineEditor } from './inline-editor';\nimport { TableTdElement, TableTdElementProps } from './td-element';\n\nimport styles from './styles.css.js';\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\nexport interface TableBodyCellProps<ItemType> extends TableTdElementProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n successfulEdit?: boolean;\n onEditStart: () => void;\n onEditEnd: (cancelled: boolean) => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType>({\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n successfulEdit = false,\n ...rest\n}: TableBodyCellProps<ItemType>) {\n const i18n = useInternalI18n('table');\n const editActivateRef = useRef<HTMLButtonElement>(null);\n const tdNativeAttributes = {\n 'data-inline-editing-active': isEditing.toString(),\n };\n const isFocusMoveNeededRef = useRef(false);\n\n useEffect(() => {\n if (!isEditing && editActivateRef.current && isFocusMoveNeededRef.current) {\n isFocusMoveNeededRef.current = false;\n editActivateRef.current.focus();\n }\n }, [isEditing]);\n // To improve the initial page render performance we only show the edit icon when necessary.\n const [hasHover, setHasHover] = useState(false);\n const [hasFocus, setHasFocus] = useState(false);\n // When a cell is both expandable and editable the icon is always shown.\n const showIcon = hasHover || hasFocus;\n\n const prevSuccessfulEdit = usePrevious(successfulEdit);\n const prevHasFocus = usePrevious(hasFocus);\n const [showSuccessIcon, setShowSuccessIcon] = useState(false);\n\n useEffect(() => {\n // Hide the success icon after a successful edit, when cell loses focus.\n if (successfulEdit && prevSuccessfulEdit && !hasFocus && prevHasFocus) {\n setShowSuccessIcon(false);\n }\n // Show success icon right after a successful edit, when `successfulEdit` switches to true.\n if (successfulEdit && !prevSuccessfulEdit) {\n setShowSuccessIcon(true);\n }\n }, [hasFocus, successfulEdit, prevHasFocus, prevSuccessfulEdit]);\n\n const { tabIndex: editActivateTabIndex } = useSingleTabStopNavigation(editActivateRef);\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n isEditing={isEditing}\n hasSuccessIcon={showSuccessIcon && showIcon}\n onClick={!isEditing ? onEditStart : undefined}\n onMouseEnter={() => setHasHover(true)}\n onMouseLeave={() => setHasHover(false)}\n >\n {isEditing && column.editConfig ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={options => {\n setShowSuccessIcon(false);\n isFocusMoveNeededRef.current = options.refocusCell;\n onEditEnd(options.cancelled);\n }}\n submitEdit={submitEdit ?? submitHandlerFallback}\n />\n ) : (\n <>\n {column.cell(item)}\n\n {showSuccessIcon && showIcon && (\n <>\n <span\n className={styles['body-cell-success']}\n aria-label={ariaLabels?.successfulEditLabel?.(column)}\n role=\"img\"\n onMouseDown={e => {\n // Prevent the editor's Button blur event to be fired when clicking the success icon.\n // This prevents unfocusing the button and triggers the `TableTdElement` onClick event which initiates the edit mode.\n e.preventDefault();\n }}\n >\n <Icon name=\"status-positive\" variant=\"success\" />\n </span>\n <InternalLiveRegion tagName=\"span\" hidden={true}>\n {i18n('ariaLabels.successfulEditLabel', ariaLabels?.successfulEditLabel?.(column))}\n </InternalLiveRegion>\n </>\n )}\n\n <div className={styles['body-cell-editor-wrapper']}>\n <button\n className={styles['body-cell-editor']}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n ref={editActivateRef}\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n tabIndex={editActivateTabIndex}\n >\n {showIcon && <Icon name=\"edit\" />}\n </button>\n </div>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType>(props: TableBodyCellProps<ItemType>) {\n const isExpandableColumnCell = props.level !== undefined;\n const editDisabledReason = props.column.editConfig?.disabledReason?.(props.item);\n\n // Inline editing is deactivated for expandable column because editable cells are interactive\n // and cannot include interactive content such as expand toggles.\n if (editDisabledReason && !isExpandableColumnCell) {\n return <DisabledInlineEditor editDisabledReason={editDisabledReason} {...props} />;\n }\n if ((props.isEditable || props.isEditing) && !isExpandableColumnCell) {\n return <TableCellEditable {...props} />;\n }\n\n const { column, item } = props;\n return (\n <TableTdElement {...props} isEditable={false}>\n {column.cell(item)}\n </TableTdElement>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport Icon from '../../icon/internal';\nimport { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';\nimport { usePrevious } from '../../internal/hooks/use-previous';\nimport InternalLiveRegion from '../../live-region/internal';\nimport { TableProps } from '../interfaces';\nimport { DisabledInlineEditor } from './disabled-inline-editor';\nimport { InlineEditor } from './inline-editor';\nimport { TableTdElement, TableTdElementProps } from './td-element';\n\nimport styles from './styles.css.js';\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\nexport interface TableBodyCellProps<ItemType> extends TableTdElementProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n successfulEdit?: boolean;\n onEditStart: () => void;\n onEditEnd: (cancelled: boolean) => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType>({\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n successfulEdit = false,\n ...rest\n}: TableBodyCellProps<ItemType>) {\n const i18n = useInternalI18n('table');\n const editActivateRef = useRef<HTMLButtonElement>(null);\n const tdNativeAttributes = {\n 'data-inline-editing-active': isEditing.toString(),\n };\n const isFocusMoveNeededRef = useRef(false);\n const isExpandableColumn = rest.level !== undefined;\n\n useEffect(() => {\n if (!isEditing && editActivateRef.current && isFocusMoveNeededRef.current) {\n isFocusMoveNeededRef.current = false;\n editActivateRef.current.focus();\n }\n }, [isEditing]);\n // To improve the initial page render performance we only show the edit icon when necessary.\n const [hasFocus, setHasFocus] = useState(false);\n\n const prevSuccessfulEdit = usePrevious(successfulEdit);\n const prevHasFocus = usePrevious(hasFocus);\n const [showSuccessIcon, setShowSuccessIcon] = useState(false);\n\n useEffect(() => {\n // Hide the success icon after a successful edit, when cell loses focus.\n if (successfulEdit && prevSuccessfulEdit && !hasFocus && prevHasFocus) {\n setShowSuccessIcon(false);\n }\n // Show success icon right after a successful edit, when `successfulEdit` switches to true.\n if (successfulEdit && !prevSuccessfulEdit) {\n setShowSuccessIcon(true);\n }\n }, [hasFocus, successfulEdit, prevHasFocus, prevSuccessfulEdit]);\n\n const { tabIndex: editActivateTabIndex } = useSingleTabStopNavigation(editActivateRef);\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n isEditing={isEditing}\n hasSuccessIcon={showSuccessIcon && hasFocus}\n onClick={!isEditing && !isExpandableColumn ? onEditStart : undefined}\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n >\n {isEditing && column.editConfig ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={options => {\n setShowSuccessIcon(false);\n isFocusMoveNeededRef.current = options.refocusCell;\n onEditEnd(options.cancelled);\n }}\n submitEdit={submitEdit ?? submitHandlerFallback}\n />\n ) : (\n <>\n {column.cell(item)}\n\n {showSuccessIcon && hasFocus && (\n <>\n <span\n className={styles['body-cell-success']}\n aria-label={ariaLabels?.successfulEditLabel?.(column)}\n role=\"img\"\n onMouseDown={e => {\n // Prevent the editor's Button blur event to be fired when clicking the success icon.\n // This prevents unfocusing the button and triggers the `TableTdElement` onClick event which initiates the edit mode.\n e.preventDefault();\n }}\n >\n <Icon name=\"status-positive\" variant=\"success\" />\n </span>\n <InternalLiveRegion tagName=\"span\" hidden={true}>\n {i18n('ariaLabels.successfulEditLabel', ariaLabels?.successfulEditLabel?.(column))}\n </InternalLiveRegion>\n </>\n )}\n\n <div className={styles['body-cell-editor-wrapper']}>\n <button\n className={clsx(styles['body-cell-editor'], isExpandableColumn && styles['body-cell-editor-focusable'])}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n ref={editActivateRef}\n onClick={!isEditing && isExpandableColumn ? onEditStart : undefined}\n tabIndex={editActivateTabIndex}\n >\n <span className={styles['body-cell-editor-icon']}>\n <Icon name=\"edit\" />\n </span>\n </button>\n </div>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType>(props: TableBodyCellProps<ItemType>) {\n const editDisabledReason = props.column.editConfig?.disabledReason?.(props.item);\n\n // Inline editing is deactivated for expandable column because editable cells are interactive\n // and cannot include interactive content such as expand toggles.\n if (editDisabledReason) {\n return <DisabledInlineEditor editDisabledReason={editDisabledReason} {...props} />;\n }\n if (props.isEditable || props.isEditing) {\n return <TableCellEditable {...props} />;\n }\n\n const { column, item } = props;\n return (\n <TableTdElement {...props} isEditable={false}>\n {column.cell(item)}\n </TableTdElement>\n );\n}\n"]}
|
|
@@ -1,49 +1,51 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"expandable-toggle-wrapper": "awsui_expandable-toggle-
|
|
5
|
-
"body-cell": "awsui_body-
|
|
6
|
-
"body-cell-content": "awsui_body-cell-
|
|
7
|
-
"expandable-level-0": "awsui_expandable-level-
|
|
8
|
-
"expandable-level-1": "awsui_expandable-level-
|
|
9
|
-
"expandable-level-2": "awsui_expandable-level-
|
|
10
|
-
"expandable-level-3": "awsui_expandable-level-
|
|
11
|
-
"expandable-level-4": "awsui_expandable-level-
|
|
12
|
-
"expandable-level-5": "awsui_expandable-level-
|
|
13
|
-
"expandable-level-6": "awsui_expandable-level-
|
|
14
|
-
"expandable-level-7": "awsui_expandable-level-
|
|
15
|
-
"expandable-level-8": "awsui_expandable-level-
|
|
16
|
-
"expandable-level-9": "awsui_expandable-level-
|
|
17
|
-
"expandable-level-next": "awsui_expandable-level-
|
|
18
|
-
"body-cell-align-top": "awsui_body-cell-align-
|
|
19
|
-
"body-cell-wrap": "awsui_body-cell-
|
|
20
|
-
"is-visual-refresh": "awsui_is-visual-
|
|
21
|
-
"body-cell-edit-active": "awsui_body-cell-edit-
|
|
22
|
-
"body-cell-
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"body-cell-
|
|
28
|
-
"body-cell-
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"sticky-cell
|
|
33
|
-
"sticky-cell-last-inline-
|
|
34
|
-
"
|
|
35
|
-
"body-cell-
|
|
36
|
-
"body-cell-
|
|
37
|
-
"body-cell-
|
|
38
|
-
"body-cell-
|
|
39
|
-
"body-cell-editor
|
|
40
|
-
"body-cell-editor-
|
|
41
|
-
"body-cell-editor-
|
|
42
|
-
"body-cell-editor-
|
|
43
|
-
"body-cell-
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
4
|
+
"expandable-toggle-wrapper": "awsui_expandable-toggle-wrapper_c6tup_196fv_145",
|
|
5
|
+
"body-cell": "awsui_body-cell_c6tup_196fv_152",
|
|
6
|
+
"body-cell-content": "awsui_body-cell-content_c6tup_196fv_160",
|
|
7
|
+
"expandable-level-0": "awsui_expandable-level-0_c6tup_196fv_166",
|
|
8
|
+
"expandable-level-1": "awsui_expandable-level-1_c6tup_196fv_173",
|
|
9
|
+
"expandable-level-2": "awsui_expandable-level-2_c6tup_196fv_180",
|
|
10
|
+
"expandable-level-3": "awsui_expandable-level-3_c6tup_196fv_187",
|
|
11
|
+
"expandable-level-4": "awsui_expandable-level-4_c6tup_196fv_194",
|
|
12
|
+
"expandable-level-5": "awsui_expandable-level-5_c6tup_196fv_201",
|
|
13
|
+
"expandable-level-6": "awsui_expandable-level-6_c6tup_196fv_208",
|
|
14
|
+
"expandable-level-7": "awsui_expandable-level-7_c6tup_196fv_215",
|
|
15
|
+
"expandable-level-8": "awsui_expandable-level-8_c6tup_196fv_222",
|
|
16
|
+
"expandable-level-9": "awsui_expandable-level-9_c6tup_196fv_229",
|
|
17
|
+
"expandable-level-next": "awsui_expandable-level-next_c6tup_196fv_236",
|
|
18
|
+
"body-cell-align-top": "awsui_body-cell-align-top_c6tup_196fv_259",
|
|
19
|
+
"body-cell-wrap": "awsui_body-cell-wrap_c6tup_196fv_262",
|
|
20
|
+
"is-visual-refresh": "awsui_is-visual-refresh_c6tup_196fv_359",
|
|
21
|
+
"body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_196fv_449",
|
|
22
|
+
"body-cell-expandable": "awsui_body-cell-expandable_c6tup_196fv_449",
|
|
23
|
+
"body-cell-editable": "awsui_body-cell-editable_c6tup_196fv_449",
|
|
24
|
+
"has-striped-rows": "awsui_has-striped-rows_c6tup_196fv_532",
|
|
25
|
+
"sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_c6tup_196fv_698",
|
|
26
|
+
"has-selection": "awsui_has-selection_c6tup_196fv_864",
|
|
27
|
+
"body-cell-first-row": "awsui_body-cell-first-row_c6tup_196fv_1033",
|
|
28
|
+
"body-cell-last-row": "awsui_body-cell-last-row_c6tup_196fv_1036",
|
|
29
|
+
"body-cell-selected": "awsui_body-cell-selected_c6tup_196fv_1036",
|
|
30
|
+
"has-footer": "awsui_has-footer_c6tup_196fv_1036",
|
|
31
|
+
"body-cell-shaded": "awsui_body-cell-shaded_c6tup_196fv_1046",
|
|
32
|
+
"sticky-cell": "awsui_sticky-cell_c6tup_196fv_698",
|
|
33
|
+
"sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_c6tup_196fv_1108",
|
|
34
|
+
"sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_c6tup_196fv_1117",
|
|
35
|
+
"body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_196fv_1139",
|
|
36
|
+
"body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_196fv_1146",
|
|
37
|
+
"body-cell-editor-wrapper": "awsui_body-cell-editor-wrapper_c6tup_196fv_1172",
|
|
38
|
+
"body-cell-success": "awsui_body-cell-success_c6tup_196fv_1177",
|
|
39
|
+
"body-cell-editor": "awsui_body-cell-editor_c6tup_196fv_1172",
|
|
40
|
+
"body-cell-editor-disabled": "awsui_body-cell-editor-disabled_c6tup_196fv_1202",
|
|
41
|
+
"body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_196fv_1211",
|
|
42
|
+
"body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_196fv_1221",
|
|
43
|
+
"body-cell-editor-row-editor": "awsui_body-cell-editor-row-editor_c6tup_196fv_1224",
|
|
44
|
+
"body-cell-editor-focusable": "awsui_body-cell-editor-focusable_c6tup_196fv_1227",
|
|
45
|
+
"body-cell-editor-icon": "awsui_body-cell-editor-icon_c6tup_196fv_1248",
|
|
46
|
+
"resizable-columns": "awsui_resizable-columns_c6tup_196fv_1360",
|
|
47
|
+
"expandable-cell-content": "awsui_expandable-cell-content_c6tup_196fv_1363",
|
|
48
|
+
"body-cell-edit-disabled-popover": "awsui_body-cell-edit-disabled-popover_c6tup_196fv_1411",
|
|
49
|
+
"body-cell-has-success": "awsui_body-cell-has-success_c6tup_196fv_1414"
|
|
48
50
|
};
|
|
49
51
|
|