npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1086 → 3.0.1088 - Mend

@cloudscape-design/components-themeable 3.0.1086 → 3.0.1088

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 (184) hide show

package/lib/internal/template/spinner/styles.scoped.css CHANGED Viewed

@@ -150,52 +150,52 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@keyframes awsui_spinner-rotator_1612d_14hpv_1 {
+@keyframes awsui_spinner-rotator_1612d_11v9n_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-rotator-from-kiajpc));
+    transform: rotate(var(--awsui-spinner-rotator-from-y15yd5));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-rotator-to-kiajpc));
+    transform: rotate(var(--awsui-spinner-rotator-to-y15yd5));
   }
 }
-@keyframes awsui_spinner-line-left_1612d_14hpv_1 {
+@keyframes awsui_spinner-line-left_1612d_11v9n_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-line-left-from-kiajpc));
+    transform: rotate(var(--awsui-spinner-line-left-from-y15yd5));
   }
   50% {
-    transform: rotate(var(--awsui-spinner-line-left-to-kiajpc));
+    transform: rotate(var(--awsui-spinner-line-left-to-y15yd5));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-line-left-from-kiajpc));
+    transform: rotate(var(--awsui-spinner-line-left-from-y15yd5));
   }
 }
-@keyframes awsui_spinner-line-right_1612d_14hpv_1 {
+@keyframes awsui_spinner-line-right_1612d_11v9n_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-line-right-from-kiajpc));
+    transform: rotate(var(--awsui-spinner-line-right-from-y15yd5));
   }
   50% {
-    transform: rotate(var(--awsui-spinner-line-right-to-kiajpc));
+    transform: rotate(var(--awsui-spinner-line-right-to-y15yd5));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-line-right-from-kiajpc));
+    transform: rotate(var(--awsui-spinner-line-right-from-y15yd5));
   }
 }
-.awsui_root_1612d_14hpv_183:not(#\9) {
-  --awsui-spinner-rotator-from-kiajpc: 0deg;
-  --awsui-spinner-rotator-to-kiajpc: 360deg;
-  --awsui-spinner-line-left-from-kiajpc: 0deg;
-  --awsui-spinner-line-left-to-kiajpc: 120deg;
-  --awsui-spinner-line-right-from-kiajpc: 90deg;
-  --awsui-spinner-line-right-to-kiajpc: -30deg;
+.awsui_root_1612d_11v9n_183:not(#\9) {
+  --awsui-spinner-rotator-from-y15yd5: 0deg;
+  --awsui-spinner-rotator-to-y15yd5: 360deg;
+  --awsui-spinner-line-left-from-y15yd5: 0deg;
+  --awsui-spinner-line-left-to-y15yd5: 120deg;
+  --awsui-spinner-line-right-from-y15yd5: 90deg;
+  --awsui-spinner-line-right-to-y15yd5: -30deg;
   display: inline-block;
   vertical-align: top;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation: awsui_spinner-rotator_1612d_14hpv_1 0.7s linear infinite;
+  animation: awsui_spinner-rotator_1612d_11v9n_1 0.7s linear infinite;
   box-sizing: border-box;
   line-height: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_root_1612d_14hpv_183.awsui_size-normal_1612d_14hpv_198:not(#\9) {
+.awsui_root_1612d_11v9n_183.awsui_size-normal_1612d_11v9n_198:not(#\9) {
   inline-size: var(--size-icon-normal-2f5zkr, 16px);
   block-size: var(--size-icon-normal-2f5zkr, 16px);
   padding-block: calc((var(--size-icon-normal-2f5zkr, 16px) - 12px) / 2);
@@ -203,7 +203,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-body-m-bedeoh, 22px) - var(--size-icon-normal-2f5zkr, 16px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_14hpv_183.awsui_size-big_1612d_14hpv_206:not(#\9) {
+.awsui_root_1612d_11v9n_183.awsui_size-big_1612d_11v9n_206:not(#\9) {
   inline-size: var(--size-icon-big-hnqj8f, 32px);
   block-size: var(--size-icon-big-hnqj8f, 32px);
   padding-block: calc((var(--size-icon-big-hnqj8f, 32px) - 24px) / 2);
@@ -211,7 +211,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-heading-xl-vs1f23, 36px) - var(--size-icon-big-hnqj8f, 32px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_14hpv_183.awsui_size-large_1612d_14hpv_214:not(#\9) {
+.awsui_root_1612d_11v9n_183.awsui_size-large_1612d_11v9n_214:not(#\9) {
   inline-size: var(--size-icon-large-gj7xfw, 48px);
   block-size: var(--size-icon-large-gj7xfw, 48px);
   padding-block: calc((var(--size-icon-large-gj7xfw, 48px) - 36px) / 2);
@@ -219,32 +219,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-display-l-3zghmm, 56px) - var(--size-icon-large-gj7xfw, 48px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_14hpv_183.awsui_variant-normal_1612d_14hpv_222:not(#\9) {
+.awsui_root_1612d_11v9n_183.awsui_variant-normal_1612d_11v9n_222:not(#\9) {
   color: currentColor;
 }
-.awsui_root_1612d_14hpv_183.awsui_variant-disabled_1612d_14hpv_225:not(#\9) {
+.awsui_root_1612d_11v9n_183.awsui_variant-disabled_1612d_11v9n_225:not(#\9) {
   color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
 }
-.awsui_root_1612d_14hpv_183.awsui_variant-inverted_1612d_14hpv_228:not(#\9) {
+.awsui_root_1612d_11v9n_183.awsui_variant-inverted_1612d_11v9n_228:not(#\9) {
   color: var(--color-text-inverted-2l365o, #ffffff);
 }
-.awsui_root_1612d_14hpv_183:not(#\9):dir(rtl) {
-  --awsui-spinner-rotator-from-kiajpc: 360deg;
-  --awsui-spinner-rotator-to-kiajpc: 0deg;
-  --awsui-spinner-line-left-from-kiajpc: 0deg;
-  --awsui-spinner-line-left-to-kiajpc: -120deg;
-  --awsui-spinner-line-right-from-kiajpc: -90deg;
-  --awsui-spinner-line-right-to-kiajpc: 30deg;
+.awsui_root_1612d_11v9n_183:not(#\9):dir(rtl) {
+  --awsui-spinner-rotator-from-y15yd5: 360deg;
+  --awsui-spinner-rotator-to-y15yd5: 0deg;
+  --awsui-spinner-line-left-from-y15yd5: 0deg;
+  --awsui-spinner-line-left-to-y15yd5: -120deg;
+  --awsui-spinner-line-right-from-y15yd5: -90deg;
+  --awsui-spinner-line-right-to-y15yd5: 30deg;
 }
-.awsui_circle_1612d_14hpv_240:not(#\9) {
+.awsui_circle_1612d_11v9n_240:not(#\9) {
   display: inline-block;
   inline-size: 50%;
   block-size: 100%;
   overflow: hidden;
   position: relative;
 }
-.awsui_circle_1612d_14hpv_240:not(#\9):after {
+.awsui_circle_1612d_11v9n_240:not(#\9):after {
   position: absolute;
   box-sizing: border-box;
   content: "";
@@ -257,7 +257,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline-end-color: transparent;
   border-block-end-color: transparent;
 }
-.awsui_circle_1612d_14hpv_240:not(#\9):after {
+.awsui_circle_1612d_11v9n_240:not(#\9):after {
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
   animation: 1.5s ease-in-out infinite;
   inset-block-start: 0;
@@ -265,13 +265,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
   inline-size: 200%;
 }
-.awsui_circle_1612d_14hpv_240.awsui_circle-left_1612d_14hpv_268:not(#\9):after {
+.awsui_circle_1612d_11v9n_240.awsui_circle-left_1612d_11v9n_268:not(#\9):after {
   inset-inline-start: 0;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation-name: awsui_spinner-line-left_1612d_14hpv_1;
+  animation-name: awsui_spinner-line-left_1612d_11v9n_1;
 }
-.awsui_circle_1612d_14hpv_240.awsui_circle-right_1612d_14hpv_273:not(#\9):after {
+.awsui_circle_1612d_11v9n_240.awsui_circle-right_1612d_11v9n_273:not(#\9):after {
   inset-inline-start: -100%;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation-name: awsui_spinner-line-right_1612d_14hpv_1;
+  animation-name: awsui_spinner-line-right_1612d_11v9n_1;
 }

package/lib/internal/template/spinner/styles.selectors.js CHANGED Viewed

@@ -2,18 +2,18 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1612d_14hpv_183",
-  "spinner-rotator": "awsui_spinner-rotator_1612d_14hpv_1",
-  "size-normal": "awsui_size-normal_1612d_14hpv_198",
-  "size-big": "awsui_size-big_1612d_14hpv_206",
-  "size-large": "awsui_size-large_1612d_14hpv_214",
-  "variant-normal": "awsui_variant-normal_1612d_14hpv_222",
-  "variant-disabled": "awsui_variant-disabled_1612d_14hpv_225",
-  "variant-inverted": "awsui_variant-inverted_1612d_14hpv_228",
-  "circle": "awsui_circle_1612d_14hpv_240",
-  "circle-left": "awsui_circle-left_1612d_14hpv_268",
-  "spinner-line-left": "awsui_spinner-line-left_1612d_14hpv_1",
-  "circle-right": "awsui_circle-right_1612d_14hpv_273",
-  "spinner-line-right": "awsui_spinner-line-right_1612d_14hpv_1"
+  "root": "awsui_root_1612d_11v9n_183",
+  "spinner-rotator": "awsui_spinner-rotator_1612d_11v9n_1",
+  "size-normal": "awsui_size-normal_1612d_11v9n_198",
+  "size-big": "awsui_size-big_1612d_11v9n_206",
+  "size-large": "awsui_size-large_1612d_11v9n_214",
+  "variant-normal": "awsui_variant-normal_1612d_11v9n_222",
+  "variant-disabled": "awsui_variant-disabled_1612d_11v9n_225",
+  "variant-inverted": "awsui_variant-inverted_1612d_11v9n_228",
+  "circle": "awsui_circle_1612d_11v9n_240",
+  "circle-left": "awsui_circle-left_1612d_11v9n_268",
+  "spinner-line-left": "awsui_spinner-line-left_1612d_11v9n_1",
+  "circle-right": "awsui_circle-right_1612d_11v9n_273",
+  "spinner-line-right": "awsui_spinner-line-right_1612d_11v9n_1"
 };

package/lib/internal/template/table/body-cell/disabled-inline-editor.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { __rest } from "tslib";
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { Portal } from '@cloudscape-design/component-toolkit/internal';
+import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import Icon from '../../icon/internal';
-import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import useHiddenDescription from '../../internal/hooks/use-hidden-description';
 import { usePortalModeClasses } from '../../internal/hooks/use-portal-mode-classes';
 import InternalLiveRegion from '../../live-region/internal';

package/lib/internal/template/table/body-cell/disabled-inline-editor.js.map CHANGED Viewed

	@@ -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,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,EAAE,MAAM,+CAA+C,CAAC;~~AAEvE~~,OAAO,~~IAAI~~,MAAM,~~qBAAqB,~~CAAC;~~AACvC~~,OAAO,~~EAAE~~,~~0BAA0B,EAAE,~~MAAM,~~2DAA2D~~,CAAC;~~AACvG~~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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 { Portal } from '@cloudscape-design/component-toolkit/internal';\n\nimport ~~Icon~~ from '~~../../icon~~/internal';\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={7000} // When used in portal we need z-index to be higher than modal's\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	+ {"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 { Portal } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport Icon from '../../icon/internal';\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={7000} // When used in portal we need z-index to be higher than modal's\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"]}

package/lib/internal/template/table/body-cell/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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;AA8GD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,eAkB1E"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";AAWA,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;AA8GD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,eAkB1E"}

package/lib/internal/template/table/body-cell/index.js CHANGED Viewed

@@ -3,9 +3,9 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import { useInternalI18n } from '../../i18n/context';
 import Icon from '../../icon/internal';
-import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';
 import { usePrevious } from '../../internal/hooks/use-previous';
 import InternalLiveRegion from '../../live-region/internal';
 import { DisabledInlineEditor } from './disabled-inline-editor';

package/lib/internal/template/table/body-cell/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,8DAA8D,CAAC;AAC1G,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAuB,MAAM,cAAc,CAAC;AAEnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACjC,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;AAClF,CAAC,CAAC;AAYF,SAAS,iBAAiB,CAAW,EAUN;;QAVM,EACnC,IAAI,EACJ,MAAM,EACN,SAAS,EACT,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,cAAc,GAAG,KAAK,OAEO,EAD1B,IAAI,cAT4B,yGAUpC,CADQ;IAEP,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG;QACzB,4BAA4B,EAAE,SAAS,CAAC,QAAQ,EAAE;KACnD,CAAC;IACF,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,eAAe,CAAC,OAAO,IAAI,oBAAoB,CAAC,OAAO,EAAE;YACzE,oBAAoB,CAAC,OAAO,GAAG,KAAK,CAAC;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,4FAA4F;IAC5F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,kBAAkB,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,wEAAwE;QACxE,IAAI,cAAc,IAAI,kBAAkB,IAAI,CAAC,QAAQ,IAAI,YAAY,EAAE;YACrE,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;QACD,2FAA2F;QAC3F,IAAI,cAAc,IAAI,CAAC,kBAAkB,EAAE;YACzC,kBAAkB,CAAC,IAAI,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEjE,MAAM,EAAE,QAAQ,EAAE,oBAAoB,EAAE,GAAG,0BAA0B,CAAC,eAAe,CAAC,CAAC;IAEvF,OAAO,CACL,oBAAC,cAAc,oBACT,IAAI,IACR,gBAAgB,EAAE,kBAA6D,EAC/E,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,eAAe,IAAI,QAAQ,EAC3C,OAAO,EAAE,CAAC,SAAS,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACpE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,KAE/B,SAAS,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAChC,oBAAC,YAAY,IACX,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,CAAC,EAAE;YACnB,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC1B,oBAAoB,CAAC,OAAO,GAAG,OAAO,CAAC,WAAW,CAAC;YACnD,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAC/B,CAAC,EACD,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,qBAAqB,GAC/C,CACH,CAAC,CAAC,CAAC,CACF;QACG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QAEjB,eAAe,IAAI,QAAQ,IAAI,CAC9B;YACE,8BACE,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,EACtC,WAAW,EAAE,CAAC,CAAC,EAAE;oBACf,qFAAqF;oBACrF,qHAAqH;oBACrH,CAAC,CAAC,cAAc,EAAE,CAAC;gBACrB,CAAC;gBAED,oBAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,2DAAG,MAAM,CAAC,GAAI,CAClG;YACP,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,IAC5C,IAAI,CAAC,gCAAgC,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,2DAAG,MAAM,CAAC,CAAC,CAC/D,CACpB,CACJ;QAED,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;YAChD,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,IAAI,MAAM,CAAC,4BAA4B,CAAC,CAAC,gBAC3F,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,iBAAiB,2DAAG,MAAM,EAAE,IAAI,CAAC,EACzD,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,CAAC,SAAS,IAAI,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACnE,QAAQ,EAAE,oBAAoB;gBAE9B,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;oBAC9C,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CACf,CACA,CACL,CACL,CACJ,CACc,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAW,KAAmC;;IACzE,MAAM,kBAAkB,GAAG,MAAA,MAAA,KAAK,CAAC,MAAM,CAAC,UAAU,0CAAE,cAAc,mDAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAEjF,6FAA6F;IAC7F,iEAAiE;IACjE,IAAI,kBAAkB,EAAE;QACtB,OAAO,oBAAC,oBAAoB,kBAAC,kBAAkB,EAAE,kBAAkB,IAAM,KAAK,EAAI,CAAC;KACpF;IACD,IAAI,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,SAAS,EAAE;QACvC,OAAO,oBAAC,iBAAiB,oBAAK,KAAK,EAAI,CAAC;KACzC;IAED,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/B,OAAO,CACL,oBAAC,cAAc,oBAAK,KAAK,IAAE,UAAU,EAAE,KAAK,KACzC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CACH,CAClB,CAAC;AACJ,CAAC","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 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\" ariaLabel={ariaLabels?.successfulEditLabel?.(column)} />\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	+ {"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 { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport Icon from '../../icon/internal';\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 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\" ariaLabel={ariaLabels?.successfulEditLabel?.(column)} />\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"]}

package/lib/internal/template/table/body-cell/td-element.js CHANGED Viewed

@@ -4,9 +4,9 @@ import { __rest } from "tslib";
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { ExpandToggleButton } from '../../internal/components/expand-toggle-button';
-import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { useStickyCellStyles } from '../sticky-columns';
 import { getTableCellRoleProps } from '../table-role';

package/lib/internal/template/table/body-cell/td-element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"td-element.js","sourceRoot":"","sources":["../../../../src/table/body-cell/td-element.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,~~8BAA8B~~,EAAE,MAAM,~~kEAAkE,~~CAAC;~~AAElH~~,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,~~gDAAgD~~,CAAC;~~AACpF~~,OAAO,EAAE,~~0BAA0B~~,EAAE,MAAM,~~2DAA2D~~,CAAC;~~AACvG~~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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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { ~~copyAnalyticsMetadataAttribute~~ } from '@cloudscape-design/component-toolkit/internal~~/analytics-metadata~~';\n\nimport { ~~ExpandToggleButton~~ } from '~~../../~~internal/~~components/expand~~-~~toggle-button~~';\nimport { ~~useSingleTabStopNavigation~~ } from '../../internal/~~context~~/~~single~~-~~tab~~-~~stop-navigation-context~~';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces.js';\nimport { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';\nimport { getTableCellRoleProps, TableRole } from '../table-role';\nimport { getStickyClassNames } from '../utils';\n\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableTdElementProps {\n wrapLines: boolean \| undefined;\n isRowHeader?: boolean;\n isFirstRow: boolean;\n isLastRow: boolean;\n isSelected: boolean;\n isNextSelected: boolean;\n isPrevSelected: boolean;\n nativeAttributes?: Omit<\n React.TdHTMLAttributes<HTMLTableCellElement> \| React.ThHTMLAttributes<HTMLTableCellElement>,\n 'style' \| 'className' \| 'onClick'\n >;\n onClick?: () => void;\n onFocus?: () => void;\n onBlur?: () => void;\n children?: React.ReactNode;\n isEvenRow?: boolean;\n stripedRows?: boolean;\n isSelection?: boolean;\n hasSelection?: boolean;\n hasFooter?: boolean;\n columnId: PropertyKey;\n colIndex: number;\n stickyState: StickyColumnsModel;\n tableRole: TableRole;\n level?: number;\n isExpandable?: boolean;\n isExpanded?: boolean;\n onExpandableItemToggle?: () => void;\n expandButtonLabel?: string;\n collapseButtonLabel?: string;\n verticalAlign?: TableProps.VerticalAlign;\n resizableColumns?: boolean;\n resizableStyle?: ColumnWidthStyle;\n isEditable: boolean;\n isEditing: boolean;\n isEditingDisabled?: boolean;\n hasSuccessIcon?: boolean;\n tableVariant?: string;\n}\n\nexport const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(\n (\n {\n children,\n wrapLines,\n isRowHeader,\n isFirstRow,\n isLastRow,\n isSelected,\n isNextSelected,\n isPrevSelected,\n nativeAttributes,\n onClick,\n onFocus,\n onBlur,\n isEvenRow,\n stripedRows,\n isSelection,\n hasSelection,\n hasFooter,\n columnId,\n colIndex,\n stickyState,\n tableRole,\n level,\n isExpandable,\n isExpanded,\n onExpandableItemToggle,\n expandButtonLabel,\n collapseButtonLabel,\n verticalAlign,\n resizableColumns,\n resizableStyle,\n isEditable,\n isEditing,\n isEditingDisabled,\n hasSuccessIcon,\n tableVariant,\n ...rest\n },\n ref\n ) => {\n const Element = isRowHeader ? 'th' : 'td';\n const isVisualRefresh = useVisualRefresh();\n\n resizableStyle = resizableColumns ? {} : resizableStyle;\n\n nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };\n\n const stickyStyles = useStickyCellStyles({\n stickyColumns: stickyState,\n columnId,\n getClassName: props => getStickyClassNames(styles, props),\n });\n\n const cellRefObject = useRef<HTMLTableCellElement>(null);\n const mergedRef = useMergeRefs(stickyStyles.ref, ref, cellRefObject);\n const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);\n const isEditingActive = isEditing && !isEditingDisabled;\n\n return (\n <Element\n style={{ ...resizableStyle, ...stickyStyles.style }}\n className={clsx(\n styles['body-cell'],\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 isSelection && tableStyles['selection-control'],\n hasSelection && styles['has-selection'],\n hasFooter && styles['has-footer'],\n resizableColumns && styles['resizable-columns'],\n verticalAlign === 'top' && styles['body-cell-align-top'],\n isEditable && styles['body-cell-editable'],\n isEditing && !isEditingDisabled && styles['body-cell-edit-active'],\n isEditing && isEditingDisabled && styles['body-cell-edit-disabled-popover'],\n hasSuccessIcon && styles['body-cell-has-success'],\n level !== undefined && !isEditingActive && styles['body-cell-expandable'],\n level !== undefined && !isEditingActive && styles[`expandable-level-${getLevelClassSuffix(level)}`],\n tableVariant && styles[`table-variant-${tableVariant}`],\n stickyStyles.className\n )}\n onClick={onClick}\n onFocus={onFocus}\n onBlur={onBlur}\n ref={mergedRef}\n {...nativeAttributes}\n tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}\n {...copyAnalyticsMetadataAttribute(rest)}\n >\n {level !== undefined && isExpandable && !isEditingActive && (\n <div className={styles['expandable-toggle-wrapper']}>\n <ExpandToggleButton\n isExpanded={isExpanded}\n onExpandableItemToggle={onExpandableItemToggle}\n expandButtonLabel={expandButtonLabel}\n collapseButtonLabel={collapseButtonLabel}\n />\n </div>\n )}\n\n <div className={clsx(styles['body-cell-content'], wrapLines && styles['body-cell-wrap'])}>{children}</div>\n </Element>\n );\n }\n);\n\nfunction getLevelClassSuffix(level: number) {\n return 0 <= level && level <= 9 ? level : 'next';\n}\n"]}
1	+ {"version":3,"file":"td-element.js","sourceRoot":"","sources":["../../../../src/table/body-cell/td-element.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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ExpandToggleButton } from '../../internal/components/expand-toggle-button';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces.js';\nimport { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';\nimport { getTableCellRoleProps, TableRole } from '../table-role';\nimport { getStickyClassNames } from '../utils';\n\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableTdElementProps {\n wrapLines: boolean \| undefined;\n isRowHeader?: boolean;\n isFirstRow: boolean;\n isLastRow: boolean;\n isSelected: boolean;\n isNextSelected: boolean;\n isPrevSelected: boolean;\n nativeAttributes?: Omit<\n React.TdHTMLAttributes<HTMLTableCellElement> \| React.ThHTMLAttributes<HTMLTableCellElement>,\n 'style' \| 'className' \| 'onClick'\n >;\n onClick?: () => void;\n onFocus?: () => void;\n onBlur?: () => void;\n children?: React.ReactNode;\n isEvenRow?: boolean;\n stripedRows?: boolean;\n isSelection?: boolean;\n hasSelection?: boolean;\n hasFooter?: boolean;\n columnId: PropertyKey;\n colIndex: number;\n stickyState: StickyColumnsModel;\n tableRole: TableRole;\n level?: number;\n isExpandable?: boolean;\n isExpanded?: boolean;\n onExpandableItemToggle?: () => void;\n expandButtonLabel?: string;\n collapseButtonLabel?: string;\n verticalAlign?: TableProps.VerticalAlign;\n resizableColumns?: boolean;\n resizableStyle?: ColumnWidthStyle;\n isEditable: boolean;\n isEditing: boolean;\n isEditingDisabled?: boolean;\n hasSuccessIcon?: boolean;\n tableVariant?: string;\n}\n\nexport const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(\n (\n {\n children,\n wrapLines,\n isRowHeader,\n isFirstRow,\n isLastRow,\n isSelected,\n isNextSelected,\n isPrevSelected,\n nativeAttributes,\n onClick,\n onFocus,\n onBlur,\n isEvenRow,\n stripedRows,\n isSelection,\n hasSelection,\n hasFooter,\n columnId,\n colIndex,\n stickyState,\n tableRole,\n level,\n isExpandable,\n isExpanded,\n onExpandableItemToggle,\n expandButtonLabel,\n collapseButtonLabel,\n verticalAlign,\n resizableColumns,\n resizableStyle,\n isEditable,\n isEditing,\n isEditingDisabled,\n hasSuccessIcon,\n tableVariant,\n ...rest\n },\n ref\n ) => {\n const Element = isRowHeader ? 'th' : 'td';\n const isVisualRefresh = useVisualRefresh();\n\n resizableStyle = resizableColumns ? {} : resizableStyle;\n\n nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };\n\n const stickyStyles = useStickyCellStyles({\n stickyColumns: stickyState,\n columnId,\n getClassName: props => getStickyClassNames(styles, props),\n });\n\n const cellRefObject = useRef<HTMLTableCellElement>(null);\n const mergedRef = useMergeRefs(stickyStyles.ref, ref, cellRefObject);\n const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);\n const isEditingActive = isEditing && !isEditingDisabled;\n\n return (\n <Element\n style={{ ...resizableStyle, ...stickyStyles.style }}\n className={clsx(\n styles['body-cell'],\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 isSelection && tableStyles['selection-control'],\n hasSelection && styles['has-selection'],\n hasFooter && styles['has-footer'],\n resizableColumns && styles['resizable-columns'],\n verticalAlign === 'top' && styles['body-cell-align-top'],\n isEditable && styles['body-cell-editable'],\n isEditing && !isEditingDisabled && styles['body-cell-edit-active'],\n isEditing && isEditingDisabled && styles['body-cell-edit-disabled-popover'],\n hasSuccessIcon && styles['body-cell-has-success'],\n level !== undefined && !isEditingActive && styles['body-cell-expandable'],\n level !== undefined && !isEditingActive && styles[`expandable-level-${getLevelClassSuffix(level)}`],\n tableVariant && styles[`table-variant-${tableVariant}`],\n stickyStyles.className\n )}\n onClick={onClick}\n onFocus={onFocus}\n onBlur={onBlur}\n ref={mergedRef}\n {...nativeAttributes}\n tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}\n {...copyAnalyticsMetadataAttribute(rest)}\n >\n {level !== undefined && isExpandable && !isEditingActive && (\n <div className={styles['expandable-toggle-wrapper']}>\n <ExpandToggleButton\n isExpanded={isExpanded}\n onExpandableItemToggle={onExpandableItemToggle}\n expandButtonLabel={expandButtonLabel}\n collapseButtonLabel={collapseButtonLabel}\n />\n </div>\n )}\n\n <div className={clsx(styles['body-cell-content'], wrapLines && styles['body-cell-wrap'])}>{children}</div>\n </Element>\n );\n }\n);\n\nfunction getLevelClassSuffix(level: number) {\n return 0 <= level && level <= 9 ? level : 'next';\n}\n"]}

package/lib/internal/template/table/header-cell/index.js CHANGED Viewed

@@ -3,10 +3,10 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { useInternalI18n } from '../../i18n/context';
 import InternalIcon from '../../icon/internal';
-import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { KeyCode } from '../../internal/keycode';
 import { Divider, Resizer } from '../resizer';
 import { TableThElement } from './th-element';

package/lib/internal/template/table/header-cell/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalIcon from '../../icon/internal';\nimport { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';\nimport { KeyCode } from '../../internal/keycode';\nimport { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces';\nimport { Divider, Resizer } from '../resizer';\nimport { StickyColumnsModel } from '../sticky-columns';\nimport { TableRole } from '../table-role';\nimport { TableThElement } from './th-element';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableHeaderCellProps<ItemType> {\n tabIndex: number;\n column: TableProps.ColumnDefinition<ItemType>;\n activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n sortingDescending?: boolean;\n sortingDisabled?: boolean;\n wrapLines?: boolean;\n stuck?: boolean;\n sticky?: boolean;\n hidden?: boolean;\n stripedRows?: boolean;\n onClick(detail: TableProps.SortingState<any>): void;\n onResizeFinish: () => void;\n colIndex: number;\n updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n resizableColumns?: boolean;\n resizableStyle?: ColumnWidthStyle;\n isEditable?: boolean;\n columnId: PropertyKey;\n stickyState: StickyColumnsModel;\n cellRef: React.RefCallback<HTMLElement>;\n focusedComponent?: null \| string;\n tableRole: TableRole;\n resizerRoleDescription?: string;\n isExpandable?: boolean;\n hasDynamicContent?: boolean;\n variant: TableProps.Variant;\n tableVariant?: string;\n}\n\nexport function TableHeaderCell<ItemType>({\n tabIndex,\n column,\n activeSortingColumn,\n sortingDescending,\n sortingDisabled,\n wrapLines,\n focusedComponent,\n stuck,\n sticky,\n hidden,\n stripedRows,\n onClick,\n colIndex,\n updateColumn,\n resizableColumns,\n resizableStyle,\n onResizeFinish,\n isEditable,\n columnId,\n stickyState,\n cellRef,\n tableRole,\n resizerRoleDescription,\n isExpandable,\n hasDynamicContent,\n variant,\n tableVariant,\n}: TableHeaderCellProps<ItemType>) {\n const i18n = useInternalI18n('table');\n const sortable = !!column.sortingComparator \|\| !!column.sortingField;\n const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\n const handleClick = () =>\n onClick({\n sortingColumn: column,\n isDescending: sorted ? !sortingDescending : false,\n });\n\n // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n if (e.keyCode === KeyCode.enter \|\| e.keyCode === KeyCode.space) {\n e.preventDefault();\n handleClick();\n }\n };\n\n const headerId = useUniqueId('table-header-');\n\n const clickableHeaderRef = useRef<HTMLDivElement>(null);\n const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n const cellRefObject = useRef<HTMLElement>(null);\n const cellRefCombined = useMergeRefs(cellRef, cellRefObject);\n\n // Keep sticky and non-sticky headers in sync for dynamic cell\n // content changes. This is only needed when:\n // - Column has dynamic content\n // - This is the non-sticky version of a sticky header (hidden === true)\n // - Columns are not resizable\n useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {\n updateColumn(columnId, entry.borderBoxWidth);\n });\n\n return (\n <TableThElement\n resizableStyle={resizableStyle}\n cellRef={cellRefCombined}\n sortingStatus={sortingStatus}\n sortingDisabled={sortingDisabled}\n focusedComponent={focusedComponent}\n stuck={stuck}\n sticky={sticky}\n resizable={resizableColumns}\n hidden={hidden}\n stripedRows={stripedRows}\n colIndex={colIndex}\n columnId={columnId}\n stickyState={stickyState}\n tableRole={tableRole}\n variant={variant}\n tableVariant={tableVariant}\n {...(sortingDisabled\n ? {}\n : getAnalyticsMetadataAttribute({\n action: 'sort',\n detail: {\n position: `${colIndex + 1}`,\n columnId: column.id ? `${column.id}` : '',\n label: `.${analyticsSelectors['header-cell-text']}`,\n sortingDescending: `${!sortingDescending}`,\n },\n } as GeneratedAnalyticsMetadataTableSort))}\n >\n <div\n ref={clickableHeaderRef}\n data-focus-id={`sorting-control-${String(columnId)}`}\n className={clsx(styles['header-cell-content'], {\n [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n [styles['header-cell-content-expandable']]: isExpandable,\n })}\n aria-label={\n column.ariaLabel\n ? column.ariaLabel({\n sorted: sorted,\n descending: sorted && !!sortingDescending,\n disabled: !!sortingDisabled,\n })\n : undefined\n }\n {...(sortingStatus && !sortingDisabled\n ? {\n onKeyPress: handleKeyPress,\n tabIndex: clickableHeaderTabIndex,\n role: 'button',\n onClick: handleClick,\n }\n : {})}\n >\n <div\n className={clsx(\n styles['header-cell-text'],\n analyticsSelectors['header-cell-text'],\n wrapLines && styles['header-cell-text-wrap']\n )}\n id={headerId}\n >\n {column.header}\n {isEditable ? (\n <span className={styles['edit-icon']}>\n <InternalIcon\n name=\"edit\"\n ariaLabel={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}\n />\n </span>\n ) : null}\n </div>\n {sortingStatus && (\n <span className={styles['sorting-icon']}>\n <InternalIcon name={getSortingIconName(sortingStatus)} />\n </span>\n )}\n </div>\n {resizableColumns ? (\n <Resizer\n tabIndex={tabIndex}\n focusId={`resize-control-${String(columnId)}`}\n showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n onWidthUpdateCommit={onResizeFinish}\n ariaLabelledby={headerId}\n minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n />\n ) : (\n <Divider className={styles['resize-divider']} />\n )}\n </TableThElement>\n );\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalIcon from '../../icon/internal';\nimport { KeyCode } from '../../internal/keycode';\nimport { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces';\nimport { Divider, Resizer } from '../resizer';\nimport { StickyColumnsModel } from '../sticky-columns';\nimport { TableRole } from '../table-role';\nimport { TableThElement } from './th-element';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableHeaderCellProps<ItemType> {\n tabIndex: number;\n column: TableProps.ColumnDefinition<ItemType>;\n activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n sortingDescending?: boolean;\n sortingDisabled?: boolean;\n wrapLines?: boolean;\n stuck?: boolean;\n sticky?: boolean;\n hidden?: boolean;\n stripedRows?: boolean;\n onClick(detail: TableProps.SortingState<any>): void;\n onResizeFinish: () => void;\n colIndex: number;\n updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n resizableColumns?: boolean;\n resizableStyle?: ColumnWidthStyle;\n isEditable?: boolean;\n columnId: PropertyKey;\n stickyState: StickyColumnsModel;\n cellRef: React.RefCallback<HTMLElement>;\n focusedComponent?: null \| string;\n tableRole: TableRole;\n resizerRoleDescription?: string;\n isExpandable?: boolean;\n hasDynamicContent?: boolean;\n variant: TableProps.Variant;\n tableVariant?: string;\n}\n\nexport function TableHeaderCell<ItemType>({\n tabIndex,\n column,\n activeSortingColumn,\n sortingDescending,\n sortingDisabled,\n wrapLines,\n focusedComponent,\n stuck,\n sticky,\n hidden,\n stripedRows,\n onClick,\n colIndex,\n updateColumn,\n resizableColumns,\n resizableStyle,\n onResizeFinish,\n isEditable,\n columnId,\n stickyState,\n cellRef,\n tableRole,\n resizerRoleDescription,\n isExpandable,\n hasDynamicContent,\n variant,\n tableVariant,\n}: TableHeaderCellProps<ItemType>) {\n const i18n = useInternalI18n('table');\n const sortable = !!column.sortingComparator \|\| !!column.sortingField;\n const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\n const handleClick = () =>\n onClick({\n sortingColumn: column,\n isDescending: sorted ? !sortingDescending : false,\n });\n\n // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n if (e.keyCode === KeyCode.enter \|\| e.keyCode === KeyCode.space) {\n e.preventDefault();\n handleClick();\n }\n };\n\n const headerId = useUniqueId('table-header-');\n\n const clickableHeaderRef = useRef<HTMLDivElement>(null);\n const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n const cellRefObject = useRef<HTMLElement>(null);\n const cellRefCombined = useMergeRefs(cellRef, cellRefObject);\n\n // Keep sticky and non-sticky headers in sync for dynamic cell\n // content changes. This is only needed when:\n // - Column has dynamic content\n // - This is the non-sticky version of a sticky header (hidden === true)\n // - Columns are not resizable\n useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {\n updateColumn(columnId, entry.borderBoxWidth);\n });\n\n return (\n <TableThElement\n resizableStyle={resizableStyle}\n cellRef={cellRefCombined}\n sortingStatus={sortingStatus}\n sortingDisabled={sortingDisabled}\n focusedComponent={focusedComponent}\n stuck={stuck}\n sticky={sticky}\n resizable={resizableColumns}\n hidden={hidden}\n stripedRows={stripedRows}\n colIndex={colIndex}\n columnId={columnId}\n stickyState={stickyState}\n tableRole={tableRole}\n variant={variant}\n tableVariant={tableVariant}\n {...(sortingDisabled\n ? {}\n : getAnalyticsMetadataAttribute({\n action: 'sort',\n detail: {\n position: `${colIndex + 1}`,\n columnId: column.id ? `${column.id}` : '',\n label: `.${analyticsSelectors['header-cell-text']}`,\n sortingDescending: `${!sortingDescending}`,\n },\n } as GeneratedAnalyticsMetadataTableSort))}\n >\n <div\n ref={clickableHeaderRef}\n data-focus-id={`sorting-control-${String(columnId)}`}\n className={clsx(styles['header-cell-content'], {\n [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n [styles['header-cell-content-expandable']]: isExpandable,\n })}\n aria-label={\n column.ariaLabel\n ? column.ariaLabel({\n sorted: sorted,\n descending: sorted && !!sortingDescending,\n disabled: !!sortingDisabled,\n })\n : undefined\n }\n {...(sortingStatus && !sortingDisabled\n ? {\n onKeyPress: handleKeyPress,\n tabIndex: clickableHeaderTabIndex,\n role: 'button',\n onClick: handleClick,\n }\n : {})}\n >\n <div\n className={clsx(\n styles['header-cell-text'],\n analyticsSelectors['header-cell-text'],\n wrapLines && styles['header-cell-text-wrap']\n )}\n id={headerId}\n >\n {column.header}\n {isEditable ? (\n <span className={styles['edit-icon']}>\n <InternalIcon\n name=\"edit\"\n ariaLabel={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}\n />\n </span>\n ) : null}\n </div>\n {sortingStatus && (\n <span className={styles['sorting-icon']}>\n <InternalIcon name={getSortingIconName(sortingStatus)} />\n </span>\n )}\n </div>\n {resizableColumns ? (\n <Resizer\n tabIndex={tabIndex}\n focusId={`resize-control-${String(columnId)}`}\n showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n onWidthUpdateCommit={onResizeFinish}\n ariaLabelledby={headerId}\n minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n />\n ) : (\n <Divider className={styles['resize-divider']} />\n )}\n </TableThElement>\n );\n}\n"]}

package/lib/internal/template/table/header-cell/th-element.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { __rest } from "tslib";
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
-import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { useStickyCellStyles } from '../sticky-columns';
 import { getTableColHeaderRoleProps } from '../table-role';

package/lib/internal/template/table/header-cell/th-element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"th-element.js","sourceRoot":"","sources":["../../../../src/table/header-cell/th-element.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,~~8BAA8B~~,EAAE,MAAM,~~kEAAkE,~~CAAC;~~AAElH~~,OAAO,EAAE,~~0BAA0B~~,EAAE,MAAM,~~2DAA2D~~,CAAC;~~AACvG~~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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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { ~~copyAnalyticsMetadataAttribute~~ } from '@cloudscape-design/component-toolkit/internal~~/analytics-metadata~~';\n\nimport { ~~useSingleTabStopNavigation~~ } from '~~../../~~internal/~~context/single~~-~~tab-stop-navigation-context~~';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces';\nimport { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';\nimport { getTableColHeaderRoleProps, TableRole } from '../table-role';\nimport { getStickyClassNames } from '../utils';\nimport { SortingStatus } from './utils';\n\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableThElementProps {\n resizableStyle?: ColumnWidthStyle;\n sortingStatus?: SortingStatus;\n sortingDisabled?: boolean;\n focusedComponent?: null \| string;\n stuck?: boolean;\n sticky?: boolean;\n resizable?: boolean;\n hidden?: boolean;\n stripedRows?: boolean;\n isSelection?: boolean;\n colIndex: number;\n columnId: PropertyKey;\n stickyState: StickyColumnsModel;\n cellRef?: React.RefCallback<HTMLElement> \| null;\n tableRole: TableRole;\n children: React.ReactNode;\n variant: TableProps.Variant;\n ariaLabel?: string;\n tableVariant?: string;\n}\n\nexport function TableThElement({\n resizableStyle,\n sortingStatus,\n sortingDisabled,\n focusedComponent,\n stuck,\n sticky,\n resizable,\n hidden,\n stripedRows,\n isSelection,\n colIndex,\n columnId,\n stickyState,\n cellRef,\n tableRole,\n children,\n variant,\n ariaLabel,\n tableVariant,\n ...props\n}: TableThElementProps) {\n const isVisualRefresh = useVisualRefresh();\n\n const stickyStyles = useStickyCellStyles({\n stickyColumns: stickyState,\n columnId,\n getClassName: props => getStickyClassNames(styles, props),\n });\n\n const cellRefObject = useRef<HTMLTableCellElement>(null);\n const mergedRef = useMergeRefs(stickyStyles.ref, cellRef, cellRefObject);\n const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);\n\n return (\n <th\n data-focus-id={`header-${String(columnId)}`}\n className={clsx(\n styles['header-cell'],\n styles[`header-cell-variant-${variant}`],\n sticky && styles['header-cell-sticky'],\n resizable && styles['header-cell-resizable'],\n stuck && styles['header-cell-stuck'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n isSelection && clsx(tableStyles['selection-control'], tableStyles['selection-control-header']),\n tableVariant && styles[`table-variant-${tableVariant}`],\n {\n [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,\n [styles['header-cell-sortable']]: sortingStatus,\n [styles['header-cell-sorted']]: sortingStatus === 'ascending' \|\| sortingStatus === 'descending',\n [styles['header-cell-disabled']]: sortingDisabled,\n [styles['header-cell-ascending']]: sortingStatus === 'ascending',\n [styles['header-cell-descending']]: sortingStatus === 'descending',\n [styles['header-cell-hidden']]: hidden,\n },\n stickyStyles.className\n )}\n style={{ ...resizableStyle, ...stickyStyles.style }}\n ref={mergedRef}\n {...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex })}\n tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}\n {...copyAnalyticsMetadataAttribute(props)}\n {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}\n >\n {children}\n </th>\n );\n}\n"]}
1	+ {"version":3,"file":"th-element.js","sourceRoot":"","sources":["../../../../src/table/header-cell/th-element.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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces';\nimport { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';\nimport { getTableColHeaderRoleProps, TableRole } from '../table-role';\nimport { getStickyClassNames } from '../utils';\nimport { SortingStatus } from './utils';\n\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableThElementProps {\n resizableStyle?: ColumnWidthStyle;\n sortingStatus?: SortingStatus;\n sortingDisabled?: boolean;\n focusedComponent?: null \| string;\n stuck?: boolean;\n sticky?: boolean;\n resizable?: boolean;\n hidden?: boolean;\n stripedRows?: boolean;\n isSelection?: boolean;\n colIndex: number;\n columnId: PropertyKey;\n stickyState: StickyColumnsModel;\n cellRef?: React.RefCallback<HTMLElement> \| null;\n tableRole: TableRole;\n children: React.ReactNode;\n variant: TableProps.Variant;\n ariaLabel?: string;\n tableVariant?: string;\n}\n\nexport function TableThElement({\n resizableStyle,\n sortingStatus,\n sortingDisabled,\n focusedComponent,\n stuck,\n sticky,\n resizable,\n hidden,\n stripedRows,\n isSelection,\n colIndex,\n columnId,\n stickyState,\n cellRef,\n tableRole,\n children,\n variant,\n ariaLabel,\n tableVariant,\n ...props\n}: TableThElementProps) {\n const isVisualRefresh = useVisualRefresh();\n\n const stickyStyles = useStickyCellStyles({\n stickyColumns: stickyState,\n columnId,\n getClassName: props => getStickyClassNames(styles, props),\n });\n\n const cellRefObject = useRef<HTMLTableCellElement>(null);\n const mergedRef = useMergeRefs(stickyStyles.ref, cellRef, cellRefObject);\n const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);\n\n return (\n <th\n data-focus-id={`header-${String(columnId)}`}\n className={clsx(\n styles['header-cell'],\n styles[`header-cell-variant-${variant}`],\n sticky && styles['header-cell-sticky'],\n resizable && styles['header-cell-resizable'],\n stuck && styles['header-cell-stuck'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n isSelection && clsx(tableStyles['selection-control'], tableStyles['selection-control-header']),\n tableVariant && styles[`table-variant-${tableVariant}`],\n {\n [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,\n [styles['header-cell-sortable']]: sortingStatus,\n [styles['header-cell-sorted']]: sortingStatus === 'ascending' \|\| sortingStatus === 'descending',\n [styles['header-cell-disabled']]: sortingDisabled,\n [styles['header-cell-ascending']]: sortingStatus === 'ascending',\n [styles['header-cell-descending']]: sortingStatus === 'descending',\n [styles['header-cell-hidden']]: hidden,\n },\n stickyStyles.className\n )}\n style={{ ...resizableStyle, ...stickyStyles.style }}\n ref={mergedRef}\n {...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex })}\n tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}\n {...copyAnalyticsMetadataAttribute(props)}\n {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}\n >\n {children}\n </th>\n );\n}\n"]}

package/lib/internal/template/table/resizer/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '@cloudscape-design/component-toolkit/internal';
-import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';
+import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { KeyCode } from '../../internal/keycode';
 import handleKey, { isEventLike } from '../../internal/utils/handle-key';