@cloudscape-design/components 3.0.879 → 3.0.881

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.
Files changed (24) hide show
  1. package/app-layout/visual-refresh-toolbar/compute-layout.d.ts +15 -0
  2. package/app-layout/visual-refresh-toolbar/compute-layout.d.ts.map +1 -1
  3. package/app-layout/visual-refresh-toolbar/compute-layout.js +13 -0
  4. package/app-layout/visual-refresh-toolbar/compute-layout.js.map +1 -1
  5. package/app-layout/visual-refresh-toolbar/index.d.ts.map +1 -1
  6. package/app-layout/visual-refresh-toolbar/index.js +11 -7
  7. package/app-layout/visual-refresh-toolbar/index.js.map +1 -1
  8. package/internal/components/chart-legend/styles.css.js +6 -6
  9. package/internal/components/chart-legend/styles.scoped.css +15 -18
  10. package/internal/components/chart-legend/styles.selectors.js +6 -6
  11. package/internal/environment.js +1 -1
  12. package/internal/environment.json +1 -1
  13. package/internal/manifest.json +1 -1
  14. package/package.json +1 -1
  15. package/popover/interfaces.d.ts +3 -2
  16. package/popover/interfaces.d.ts.map +1 -1
  17. package/popover/interfaces.js.map +1 -1
  18. package/popover/internal.js +2 -2
  19. package/popover/internal.js.map +1 -1
  20. package/popover/styles.css.js +54 -53
  21. package/popover/styles.scoped.css +96 -70
  22. package/popover/styles.selectors.js +54 -53
  23. package/table/body-cell/index.js +1 -1
  24. package/table/body-cell/index.js.map +1 -1
package/popover/styles.selectors.js CHANGED
@@ -2,58 +2,59 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "arrow": "awsui_arrow_xjuzf_hg5hv_289",
6
- "arrow-outer": "awsui_arrow-outer_xjuzf_hg5hv_293",
7
- "arrow-inner": "awsui_arrow-inner_xjuzf_hg5hv_293",
8
- "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_hg5hv_335",
9
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_hg5hv_335",
10
- "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_hg5hv_338",
11
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_hg5hv_338",
12
- "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_hg5hv_341",
13
- "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_hg5hv_341",
14
- "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_hg5hv_341",
15
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_hg5hv_341",
16
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_hg5hv_344",
17
- "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_hg5hv_344",
18
- "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_hg5hv_344",
19
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_hg5hv_344",
20
- "body": "awsui_body_xjuzf_hg5hv_492",
21
- "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_hg5hv_528",
22
- "has-dismiss": "awsui_has-dismiss_xjuzf_hg5hv_532",
23
- "dismiss": "awsui_dismiss_xjuzf_hg5hv_537",
24
- "dismiss-control": "awsui_dismiss-control_xjuzf_hg5hv_545",
25
- "header-row": "awsui_header-row_xjuzf_hg5hv_549",
26
- "header": "awsui_header_xjuzf_hg5hv_549",
27
- "content": "awsui_content_xjuzf_hg5hv_574",
28
- "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_hg5hv_582",
29
- "container": "awsui_container_xjuzf_hg5hv_730",
30
- "container-body": "awsui_container-body_xjuzf_hg5hv_738",
31
- "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_hg5hv_778",
32
- "container-body-size-small": "awsui_container-body-size-small_xjuzf_hg5hv_783",
33
- "fixed-width": "awsui_fixed-width_xjuzf_hg5hv_786",
34
- "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_hg5hv_790",
35
- "container-body-size-large": "awsui_container-body-size-large_xjuzf_hg5hv_797",
36
- "container-arrow": "awsui_container-arrow_xjuzf_hg5hv_809",
37
- "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_hg5hv_813",
38
- "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_hg5hv_813",
39
- "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_hg5hv_830",
40
- "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_hg5hv_830",
41
- "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_hg5hv_847",
42
- "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_hg5hv_847",
43
- "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_hg5hv_847",
44
- "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_hg5hv_847",
45
- "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_hg5hv_863",
46
- "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_hg5hv_867",
47
- "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_hg5hv_871",
48
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_hg5hv_1",
49
- "refresh": "awsui_refresh_xjuzf_hg5hv_1041",
50
- "root": "awsui_root_xjuzf_hg5hv_1063",
51
- "no-wrap": "awsui_no-wrap_xjuzf_hg5hv_1095",
52
- "root-filtering-token": "awsui_root-filtering-token_xjuzf_hg5hv_1099",
53
- "trigger": "awsui_trigger_xjuzf_hg5hv_1103",
54
- "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_hg5hv_1110",
55
- "trigger-type-text": "awsui_trigger-type-text_xjuzf_hg5hv_1118",
56
- "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_hg5hv_1154",
57
- "popover-inline-content": "awsui_popover-inline-content_xjuzf_hg5hv_1158"
5
+ "arrow": "awsui_arrow_xjuzf_rerzy_289",
6
+ "arrow-outer": "awsui_arrow-outer_xjuzf_rerzy_293",
7
+ "arrow-inner": "awsui_arrow-inner_xjuzf_rerzy_293",
8
+ "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_rerzy_335",
9
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_rerzy_335",
10
+ "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_rerzy_338",
11
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_rerzy_338",
12
+ "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_rerzy_341",
13
+ "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_rerzy_341",
14
+ "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_rerzy_341",
15
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_rerzy_341",
16
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_rerzy_344",
17
+ "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_rerzy_344",
18
+ "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_rerzy_344",
19
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_rerzy_344",
20
+ "body": "awsui_body_xjuzf_rerzy_492",
21
+ "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_rerzy_528",
22
+ "has-dismiss": "awsui_has-dismiss_xjuzf_rerzy_532",
23
+ "dismiss": "awsui_dismiss_xjuzf_rerzy_537",
24
+ "dismiss-control": "awsui_dismiss-control_xjuzf_rerzy_545",
25
+ "header-row": "awsui_header-row_xjuzf_rerzy_549",
26
+ "header": "awsui_header_xjuzf_rerzy_549",
27
+ "content": "awsui_content_xjuzf_rerzy_574",
28
+ "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_rerzy_582",
29
+ "container": "awsui_container_xjuzf_rerzy_730",
30
+ "container-body": "awsui_container-body_xjuzf_rerzy_738",
31
+ "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_rerzy_778",
32
+ "container-body-size-small": "awsui_container-body-size-small_xjuzf_rerzy_783",
33
+ "fixed-width": "awsui_fixed-width_xjuzf_rerzy_786",
34
+ "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_rerzy_790",
35
+ "container-body-size-large": "awsui_container-body-size-large_xjuzf_rerzy_797",
36
+ "container-arrow": "awsui_container-arrow_xjuzf_rerzy_809",
37
+ "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_rerzy_813",
38
+ "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_rerzy_813",
39
+ "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_rerzy_830",
40
+ "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_rerzy_830",
41
+ "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_rerzy_847",
42
+ "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_rerzy_847",
43
+ "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_rerzy_847",
44
+ "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_rerzy_847",
45
+ "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_rerzy_863",
46
+ "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_rerzy_867",
47
+ "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_rerzy_871",
48
+ "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_rerzy_1",
49
+ "refresh": "awsui_refresh_xjuzf_rerzy_1041",
50
+ "root": "awsui_root_xjuzf_rerzy_1063",
51
+ "no-wrap": "awsui_no-wrap_xjuzf_rerzy_1095",
52
+ "root-filtering-token": "awsui_root-filtering-token_xjuzf_rerzy_1099",
53
+ "trigger": "awsui_trigger_xjuzf_rerzy_1103",
54
+ "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_rerzy_1110",
55
+ "trigger-type-text-inline": "awsui_trigger-type-text-inline_xjuzf_rerzy_1118",
56
+ "trigger-type-text": "awsui_trigger-type-text_xjuzf_rerzy_1118",
57
+ "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_rerzy_1179",
58
+ "popover-inline-content": "awsui_popover-inline-content_xjuzf_rerzy_1183"
58
59
  };
59
60
 
package/table/body-cell/index.js CHANGED
@@ -48,7 +48,7 @@ function TableCellEditable(_a) {
48
48
  }
49
49
  }, [hasFocus, successfulEdit, prevHasFocus, prevSuccessfulEdit]);
50
50
  const { tabIndex: editActivateTabIndex } = useSingleTabStopNavigation(editActivateRef);
51
- return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, isEditing: isEditing, hasSuccessIcon: showSuccessIcon && showIcon, onClick: !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: options => {
51
+ return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, isEditing: isEditing, hasSuccessIcon: showSuccessIcon && showIcon, onClick: !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing && column.editConfig ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: options => {
52
52
  setShowSuccessIcon(false);
53
53
  isFocusMoveNeededRef.current = options.refocusCell;
54
54
  onEditEnd(options.cancelled);
package/table/body-cell/index.js.map CHANGED
@@ -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 ? (\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';\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"]}