@cloudscape-design/components 3.0.821 → 3.0.823

package/app-layout/visual-refresh-toolbar/navigation/index.js

@@ -5,14 +5,14 @@ import clsx from 'clsx';
 import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
 import { InternalButton } from '../../../button/internal';
 import { createWidgetizedComponent } from '../../../internal/widgets';
-import { getDrawerTopOffset } from '../compute-layout';
+import { getDrawerStyles } from '../compute-layout';
 import sharedStyles from '../../resize/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
     var _a, _b;
     const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement, verticalOffsets, } = appLayoutInternals;
-    const drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement);
+    const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
     // Close the Navigation drawer on mobile when a user clicks a link inside.
     const onNavigationClick = (event) => {
         const hasLink = findUpUntil(event.target, node => node.tagName === 'A' && !!node.href);
@@ -24,10 +24,10 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
             [styles['is-navigation-open']]: navigationOpen,
             [testutilStyles['drawer-closed']]: !navigationOpen,
         }, testutilStyles.navigation, sharedStyles['with-motion-horizontal']), "aria-hidden": !navigationOpen, onClick: onNavigationClick, style: {
-            blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,
-            insetBlockStart: drawersTopOffset,
+            blockSize: drawerHeight,
+            insetBlockStart: drawerTopOffset,
         } },
-        React.createElement("div", { className: clsx(styles['animated-content']) },
+        React.createElement("div", { className: clsx(styles['content-container'], styles['animated-content']) },
             React.createElement("div", { className: clsx(styles['hide-navigation']) },
                 React.createElement(InternalButton, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _b !== void 0 ? _b : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: () => onNavigationToggle(false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationFocusControl.refs.close })),
             navigation)));

package/app-layout/visual-refresh-toolbar/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,SAAS,EACT,eAAe,GAChB,GAAG,kBAAkB,CAAC;IAEvB,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAElF,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;SACnD,EACD,cAAc,CAAC,UAAU,EACzB,YAAY,CAAC,wBAAwB,CAAC,CACvC,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,gBAAgB,gBAAgB,QAAQ,SAAS,CAAC,aAAa,KAAK;YAC/E,eAAe,EAAE,gBAAgB;SAClC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getDrawerTopOffset } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement);\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n          [testutilStyles['drawer-closed']]: !navigationOpen,\n        },\n        testutilStyles.navigation,\n        sharedStyles['with-motion-horizontal']\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: drawersTopOffset,\n      }}\n    >\n      <div className={clsx(styles['animated-content'])}>\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,SAAS,EACT,eAAe,GAChB,GAAG,kBAAkB,CAAC;IAEvB,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEhG,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;SACnD,EACD,cAAc,CAAC,UAAU,EACzB,YAAY,CAAC,wBAAwB,CAAC,CACvC,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,YAAY;YACvB,eAAe,EAAE,eAAe;SACjC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC3E,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n          [testutilStyles['drawer-closed']]: !navigationOpen,\n        },\n        testutilStyles.navigation,\n        sharedStyles['with-motion-horizontal']\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: drawerHeight,\n        insetBlockStart: drawerTopOffset,\n      }}\n    >\n      <div className={clsx(styles['content-container'], styles['animated-content'])}>\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}

package/app-layout/visual-refresh-toolbar/navigation/styles.css.js

@@ -1,9 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "navigation": "awsui_navigation_2p2ab_lud9e_149",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_lud9e_167",
-  "animated-content": "awsui_animated-content_2p2ab_lud9e_171",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_lud9e_181"
+  "navigation": "awsui_navigation_2p2ab_qizqd_149",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_qizqd_169",
+  "content-container": "awsui_content-container_2p2ab_qizqd_173",
+  "animated-content": "awsui_animated-content_2p2ab_qizqd_176",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_qizqd_186"
 };
   

package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css

@@ -146,7 +146,7 @@ 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
 */
-.awsui_navigation_2p2ab_lud9e_149:not(#\9) {
+.awsui_navigation_2p2ab_qizqd_149:not(#\9) {
   position: sticky;
   z-index: 830;
   background-color: var(--color-background-container-content-z79u4u, #ffffff);
@@ -158,27 +158,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overscroll-behavior-y: contain;
   word-wrap: break-word;
   pointer-events: auto;
+  display: flex;
+  flex-direction: column;
   /*
   A non-semantic node is added with a fixed width equal to the final Navigation
   width. This will create the visual appearance of horizontal movement and
   prevent unwanted text wrapping.
   */
 }
-.awsui_navigation_2p2ab_lud9e_149:not(#\9):not(.awsui_is-navigation-open_2p2ab_lud9e_167) {
+.awsui_navigation_2p2ab_qizqd_149:not(#\9):not(.awsui_is-navigation-open_2p2ab_qizqd_169) {
   inline-size: 0px;
   display: none;
 }
-.awsui_navigation_2p2ab_lud9e_149 > .awsui_animated-content_2p2ab_lud9e_171:not(#\9) {
+.awsui_navigation_2p2ab_qizqd_149 > .awsui_content-container_2p2ab_qizqd_173:not(#\9) {
+  flex-grow: 1;
+}
+.awsui_navigation_2p2ab_qizqd_149 > .awsui_animated-content_2p2ab_qizqd_176:not(#\9) {
   inline-size: var(--awsui-navigation-width-g964ok);
 }
 @media (max-width: 688px) {
-  .awsui_navigation_2p2ab_lud9e_149:not(#\9) {
+  .awsui_navigation_2p2ab_qizqd_149:not(#\9) {
     --awsui-navigation-width-g964ok: 100vw;
     z-index: 1001;
   }
 }
 
-.awsui_hide-navigation_2p2ab_lud9e_181:not(#\9) {
+.awsui_hide-navigation_2p2ab_qizqd_186:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-m-udix3p, 16px);
   inset-block-start: 14px;

package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js

@@ -2,9 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "navigation": "awsui_navigation_2p2ab_lud9e_149",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_lud9e_167",
-  "animated-content": "awsui_animated-content_2p2ab_lud9e_171",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_lud9e_181"
+  "navigation": "awsui_navigation_2p2ab_qizqd_149",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_qizqd_169",
+  "content-container": "awsui_content-container_2p2ab_qizqd_173",
+  "animated-content": "awsui_animated-content_2p2ab_qizqd_176",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_qizqd_186"
 };
   

package/app-layout/visual-refresh-toolbar/split-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAsB,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,UAAU,gDAAgD;IACxD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,mBAAmB,EAAE,uBAAuB,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,GACpB,EAAE,gDAAgD,eAiBlD;AAED,MAAM,WAAW,kDAAkD;IACjE,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,mBAAmB,EAAE,uBAAuB,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,GACpB,EAAE,kDAAkD,eAEpD;AAED,eAAO,MAAM,6CAA6C,iIAEzD,CAAC;AAEF,eAAO,MAAM,+CAA+C,qIAE3D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAsB,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,UAAU,gDAAgD;IACxD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,mBAAmB,EAAE,uBAAuB,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,GACpB,EAAE,gDAAgD,eAkBlD;AAED,MAAM,WAAW,kDAAkD;IACjE,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,mBAAmB,EAAE,uBAAuB,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,GACpB,EAAE,kDAAkD,eAEpD;AAED,eAAO,MAAM,6CAA6C,iIAEzD,CAAC;AAEF,eAAO,MAAM,+CAA+C,qIAE3D,CAAC"}

package/app-layout/visual-refresh-toolbar/split-panel/index.js

@@ -3,14 +3,14 @@
 import React from 'react';
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { SplitPanelProvider } from '../../split-panel';
+import { getDrawerStyles } from '../compute-layout';
 import styles from './styles.css.js';
 export function AppLayoutSplitPanelDrawerSideImplementation({ children, appLayoutInternals, splitPanelInternals, }) {
-    var _a;
-    const { splitPanelControlId, placement, verticalOffsets } = appLayoutInternals;
-    const drawerTopOffset = (_a = verticalOffsets.drawers) !== null && _a !== void 0 ? _a : placement.insetBlockStart;
+    const { splitPanelControlId, placement, verticalOffsets, isMobile } = appLayoutInternals;
+    const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
     return (React.createElement(SplitPanelProvider, Object.assign({}, splitPanelInternals),
         React.createElement("section", { id: splitPanelControlId, className: styles['split-panel-side'], style: {
-                blockSize: `calc(100vh - ${drawerTopOffset}px - ${placement.insetBlockEnd}px)`,
+                blockSize: drawerHeight,
                 insetBlockStart: drawerTopOffset,
             } }, children)));
 }

package/app-layout/visual-refresh-toolbar/split-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAA2B,MAAM,mBAAmB,CAAC;AAGhF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,UAAU,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,GAC8B;;IACjD,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,kBAAkB,CAAC;IAC/E,MAAM,eAAe,GAAG,MAAA,eAAe,CAAC,OAAO,mCAAI,SAAS,CAAC,eAAe,CAAC;IAC7E,OAAO,CACL,oBAAC,kBAAkB,oBAAK,mBAAmB;QACzC,iCACE,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EACrC,KAAK,EAAE;gBACL,SAAS,EAAE,gBAAgB,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;gBAC9E,eAAe,EAAE,eAAe;aACjC,IAEA,QAAQ,CACD,CACS,CACtB,CAAC;AACJ,CAAC;AAQD,MAAM,UAAU,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,GACgC;IACnD,OAAO,oBAAC,kBAAkB,oBAAK,mBAAmB,GAAG,QAAQ,CAAsB,CAAC;AACtF,CAAC;AAED,MAAM,CAAC,MAAM,6CAA6C,GAAG,yBAAyB,CACpF,2CAA2C,CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,+CAA+C,GAAG,yBAAyB,CACtF,6CAA6C,CAC9C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { SplitPanelProvider, SplitPanelProviderProps } from '../../split-panel';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AppLayoutSplitPanelDrawerSideImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerSideImplementation({\n  children,\n  appLayoutInternals,\n  splitPanelInternals,\n}: AppLayoutSplitPanelDrawerSideImplementationProps) {\n  const { splitPanelControlId, placement, verticalOffsets } = appLayoutInternals;\n  const drawerTopOffset = verticalOffsets.drawers ?? placement.insetBlockStart;\n  return (\n    <SplitPanelProvider {...splitPanelInternals}>\n      <section\n        id={splitPanelControlId}\n        className={styles['split-panel-side']}\n        style={{\n          blockSize: `calc(100vh - ${drawerTopOffset}px - ${placement.insetBlockEnd}px)`,\n          insetBlockStart: drawerTopOffset,\n        }}\n      >\n        {children}\n      </section>\n    </SplitPanelProvider>\n  );\n}\n\nexport interface AppLayoutSplitPanelDrawerBottomImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerBottomImplementation({\n  children,\n  splitPanelInternals,\n}: AppLayoutSplitPanelDrawerBottomImplementationProps) {\n  return <SplitPanelProvider {...splitPanelInternals}>{children}</SplitPanelProvider>;\n}\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerSide = createWidgetizedComponent(\n  AppLayoutSplitPanelDrawerSideImplementation\n);\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerBottom = createWidgetizedComponent(\n  AppLayoutSplitPanelDrawerBottomImplementation\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAA2B,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,UAAU,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,GAC8B;IACjD,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,kBAAkB,CAAC;IACzF,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEhG,OAAO,CACL,oBAAC,kBAAkB,oBAAK,mBAAmB;QACzC,iCACE,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EACrC,KAAK,EAAE;gBACL,SAAS,EAAE,YAAY;gBACvB,eAAe,EAAE,eAAe;aACjC,IAEA,QAAQ,CACD,CACS,CACtB,CAAC;AACJ,CAAC;AAQD,MAAM,UAAU,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,GACgC;IACnD,OAAO,oBAAC,kBAAkB,oBAAK,mBAAmB,GAAG,QAAQ,CAAsB,CAAC;AACtF,CAAC;AAED,MAAM,CAAC,MAAM,6CAA6C,GAAG,yBAAyB,CACpF,2CAA2C,CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,+CAA+C,GAAG,yBAAyB,CACtF,6CAA6C,CAC9C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { SplitPanelProvider, SplitPanelProviderProps } from '../../split-panel';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AppLayoutSplitPanelDrawerSideImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerSideImplementation({\n  children,\n  appLayoutInternals,\n  splitPanelInternals,\n}: AppLayoutSplitPanelDrawerSideImplementationProps) {\n  const { splitPanelControlId, placement, verticalOffsets, isMobile } = appLayoutInternals;\n  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n\n  return (\n    <SplitPanelProvider {...splitPanelInternals}>\n      <section\n        id={splitPanelControlId}\n        className={styles['split-panel-side']}\n        style={{\n          blockSize: drawerHeight,\n          insetBlockStart: drawerTopOffset,\n        }}\n      >\n        {children}\n      </section>\n    </SplitPanelProvider>\n  );\n}\n\nexport interface AppLayoutSplitPanelDrawerBottomImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerBottomImplementation({\n  children,\n  splitPanelInternals,\n}: AppLayoutSplitPanelDrawerBottomImplementationProps) {\n  return <SplitPanelProvider {...splitPanelInternals}>{children}</SplitPanelProvider>;\n}\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerSide = createWidgetizedComponent(\n  AppLayoutSplitPanelDrawerSideImplementation\n);\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerBottom = createWidgetizedComponent(\n  AppLayoutSplitPanelDrawerBottomImplementation\n);\n"]}

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (d8edc994)";
+export var PACKAGE_VERSION = "3.0.0 (672e7f80)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (d8edc994)",
+  "PACKAGE_VERSION": "3.0.0 (672e7f80)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "d8edc99418d44d17ad2a54ade2340d6a486bf023"
+  "commit": "672e7f80aeeac9b1907e1a3ae13a3e702b6b5951"
 }

package/package.json

@@ -128,7 +128,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.821",
+  "version": "3.0.823",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/table/body-cell/disabled-inline-editor.d.ts

@@ -3,6 +3,6 @@ import { TableBodyCellProps } from './index';
 interface DisabledInlineEditorProps<ItemType> extends TableBodyCellProps<ItemType> {
     editDisabledReason: string;
 }
-export declare function DisabledInlineEditor<ItemType>({ className, item, column, ariaLabels, isEditing, onEditStart, onEditEnd, editDisabledReason, isVisualRefresh, interactiveCell, resizableColumns, ...rest }: DisabledInlineEditorProps<ItemType>): JSX.Element;
+export declare function DisabledInlineEditor<ItemType>({ className, item, column, ariaLabels, isEditing, onEditStart, onEditEnd, editDisabledReason, isVisualRefresh, resizableColumns, ...rest }: DisabledInlineEditorProps<ItemType>): JSX.Element;
 export {};
 //# sourceMappingURL=disabled-inline-editor.d.ts.map

package/table/body-cell/disabled-inline-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disabled-inline-editor.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/disabled-inline-editor.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C,UAAU,yBAAyB,CAAC,QAAQ,CAAE,SAAQ,kBAAkB,CAAC,QAAQ,CAAC;IAChF,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,EAC7C,SAAS,EACT,IAAI,EACJ,MAAM,EACN,UAAU,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,eAAsB,EACtB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,yBAAyB,CAAC,QAAQ,CAAC,eAqGrC"}
+{"version":3,"file":"disabled-inline-editor.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/disabled-inline-editor.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C,UAAU,yBAAyB,CAAC,QAAQ,CAAE,SAAQ,kBAAkB,CAAC,QAAQ,CAAC;IAChF,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,EAC7C,SAAS,EACT,IAAI,EACJ,MAAM,EACN,UAAU,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,yBAAyB,CAAC,QAAQ,CAAC,eAmGrC"}

package/table/body-cell/disabled-inline-editor.js

@@ -17,7 +17,7 @@ import { TableTdElement } from './td-element';
 import styles from './styles.css.js';
 export function DisabledInlineEditor(_a) {
     var _b;
-    var { className, item, column, ariaLabels, isEditing, onEditStart, onEditEnd, editDisabledReason, isVisualRefresh, interactiveCell = true, resizableColumns = false } = _a, rest = __rest(_a, ["className", "item", "column", "ariaLabels", "isEditing", "onEditStart", "onEditEnd", "editDisabledReason", "isVisualRefresh", "interactiveCell", "resizableColumns"]);
+    var { className, item, column, ariaLabels, isEditing, onEditStart, onEditEnd, editDisabledReason, isVisualRefresh, resizableColumns = false } = _a, rest = __rest(_a, ["className", "item", "column", "ariaLabels", "isEditing", "onEditStart", "onEditEnd", "editDisabledReason", "isVisualRefresh", "resizableColumns"]);
     const clickAwayRef = useClickAway(() => {
         if (isEditing) {
             onEditEnd(true);
@@ -26,7 +26,7 @@ export function DisabledInlineEditor(_a) {
     const [hasHover, setHasHover] = useState(false);
     const [hasFocus, setHasFocus] = useState(false);
     // When a cell is both expandable and editable the icon is always shown.
-    const showIcon = hasHover || hasFocus || isEditing || !interactiveCell;
+    const showIcon = hasHover || hasFocus || isEditing;
     const iconRef = useRef(null);
     const buttonRef = useRef(null);
     const portalRef = useRef(null);
@@ -43,10 +43,10 @@ export function DisabledInlineEditor(_a) {
     const { targetProps, descriptionEl } = useHiddenDescription(editDisabledReason);
     const portalClasses = usePortalModeClasses(portalRef);
     const { tabIndex } = useSingleTabStopNavigation(buttonRef);
-    return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: { 'data-inline-editing-active': isEditing.toString() }, className: clsx(className, styles['body-cell-editable'], interactiveCell && styles['body-cell-interactive'], resizableColumns && styles['resizable-columns'], isEditing && styles['body-cell-edit-disabled-popover'], isVisualRefresh && styles['is-visual-refresh']), onClick: interactiveCell && !isEditing ? onClick : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false), ref: clickAwayRef }),
+    return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: { 'data-inline-editing-active': isEditing.toString() }, className: clsx(className, styles['body-cell-editable'], resizableColumns && styles['resizable-columns'], isEditing && styles['body-cell-edit-disabled-popover'], isVisualRefresh && styles['is-visual-refresh']), onClick: !isEditing ? onClick : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false), ref: clickAwayRef }),
         column.cell(item),
         React.createElement("div", { className: styles['body-cell-editor-wrapper'] },
-            React.createElement("button", Object.assign({ ref: buttonRef, tabIndex: tabIndex, className: clsx(styles['body-cell-editor'], styles['body-cell-editor-disabled']), "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column, item), "aria-haspopup": "dialog", "aria-disabled": "true", onClick: !interactiveCell && !isEditing ? onClick : undefined, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), onKeyDown: handleEscape }, targetProps),
+            React.createElement("button", Object.assign({ ref: buttonRef, tabIndex: tabIndex, className: clsx(styles['body-cell-editor'], styles['body-cell-editor-disabled']), "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column, item), "aria-haspopup": "dialog", "aria-disabled": "true", onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), onKeyDown: handleEscape }, targetProps),
                 showIcon && React.createElement(Icon, { name: "lock-private", variant: "normal", __internalRootRef: iconRef }),
                 descriptionEl)),
         isEditing && (React.createElement("span", { ref: portalRef },

package/table/body-cell/disabled-inline-editor.js.map

@@ -1 +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, useState } from 'react';\nimport clsx from 'clsx';\n\nimport Icon from '../../icon/internal';\nimport Portal from '../../internal/components/portal';\nimport { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { usePortalModeClasses } from '../../internal/hooks/use-portal-mode-classes';\nimport InternalLiveRegion from '../../live-region/internal';\nimport Arrow from '../../popover/arrow';\nimport PopoverBody from '../../popover/body';\nimport PopoverContainer from '../../popover/container';\nimport { useClickAway } from './click-away';\nimport { TableBodyCellProps } from './index';\nimport { TableTdElement, TableTdElementProps } from './td-element';\n\nimport styles from './styles.css.js';\n\ninterface DisabledInlineEditorProps<ItemType> extends TableBodyCellProps<ItemType> {\n  editDisabledReason: string;\n}\n\nexport function DisabledInlineEditor<ItemType>({\n  className,\n  item,\n  column,\n  ariaLabels,\n  isEditing,\n  onEditStart,\n  onEditEnd,\n  editDisabledReason,\n  isVisualRefresh,\n  interactiveCell = true,\n  resizableColumns = false,\n  ...rest\n}: DisabledInlineEditorProps<ItemType>) {\n  const clickAwayRef = useClickAway(() => {\n    if (isEditing) {\n      onEditEnd(true);\n    }\n  });\n\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 || isEditing || !interactiveCell;\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      className={clsx(\n        className,\n        styles['body-cell-editable'],\n        interactiveCell && styles['body-cell-interactive'],\n        resizableColumns && styles['resizable-columns'],\n        isEditing && styles['body-cell-edit-disabled-popover'],\n        isVisualRefresh && styles['is-visual-refresh']\n      )}\n      onClick={interactiveCell && !isEditing ? onClick : undefined}\n      onMouseEnter={() => setHasHover(true)}\n      onMouseLeave={() => setHasHover(false)}\n      ref={clickAwayRef}\n    >\n      {column.cell(item)}\n\n      <div className={styles['body-cell-editor-wrapper']}>\n        <button\n          ref={buttonRef}\n          tabIndex={tabIndex}\n          className={clsx(styles['body-cell-editor'], styles['body-cell-editor-disabled'])}\n          aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n          aria-haspopup=\"dialog\"\n          aria-disabled=\"true\"\n          onClick={!interactiveCell && !isEditing ? onClick : undefined}\n          onFocus={() => setHasFocus(true)}\n          onBlur={() => setHasFocus(false)}\n          onKeyDown={handleEscape}\n          {...targetProps}\n        >\n          {showIcon && <Icon name=\"lock-private\" variant=\"normal\" __internalRootRef={iconRef} />}\n          {descriptionEl}\n        </button>\n      </div>\n\n      {isEditing && (\n        <span ref={portalRef}>\n          <Portal>\n            <span className={portalClasses}>\n              <PopoverContainer\n                size=\"medium\"\n                fixedWidth={false}\n                position=\"top\"\n                trackRef={iconRef}\n                arrow={position => <Arrow position={position} />}\n                renderWithPortal={true}\n                zIndex={2000}\n              >\n                <PopoverBody\n                  dismissButton={false}\n                  dismissAriaLabel={undefined}\n                  header={null}\n                  onDismiss={() => {}}\n                  overflowVisible=\"both\"\n                >\n                  <InternalLiveRegion tagName=\"span\">{editDisabledReason}</InternalLiveRegion>\n                </PopoverBody>\n              </PopoverContainer>\n            </span>\n          </Portal>\n        </span>\n      )}\n    </TableTdElement>\n  );\n}\n"]}
+{"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, useState } from 'react';\nimport clsx from 'clsx';\n\nimport Icon from '../../icon/internal';\nimport Portal from '../../internal/components/portal';\nimport { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { usePortalModeClasses } from '../../internal/hooks/use-portal-mode-classes';\nimport InternalLiveRegion from '../../live-region/internal';\nimport Arrow from '../../popover/arrow';\nimport PopoverBody from '../../popover/body';\nimport PopoverContainer from '../../popover/container';\nimport { useClickAway } from './click-away';\nimport { TableBodyCellProps } from './index';\nimport { TableTdElement, TableTdElementProps } from './td-element';\n\nimport styles from './styles.css.js';\n\ninterface DisabledInlineEditorProps<ItemType> extends TableBodyCellProps<ItemType> {\n  editDisabledReason: string;\n}\n\nexport function DisabledInlineEditor<ItemType>({\n  className,\n  item,\n  column,\n  ariaLabels,\n  isEditing,\n  onEditStart,\n  onEditEnd,\n  editDisabledReason,\n  isVisualRefresh,\n  resizableColumns = false,\n  ...rest\n}: DisabledInlineEditorProps<ItemType>) {\n  const clickAwayRef = useClickAway(() => {\n    if (isEditing) {\n      onEditEnd(true);\n    }\n  });\n\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 || isEditing;\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      className={clsx(\n        className,\n        styles['body-cell-editable'],\n        resizableColumns && styles['resizable-columns'],\n        isEditing && styles['body-cell-edit-disabled-popover'],\n        isVisualRefresh && styles['is-visual-refresh']\n      )}\n      onClick={!isEditing ? onClick : undefined}\n      onMouseEnter={() => setHasHover(true)}\n      onMouseLeave={() => setHasHover(false)}\n      ref={clickAwayRef}\n    >\n      {column.cell(item)}\n\n      <div className={styles['body-cell-editor-wrapper']}>\n        <button\n          ref={buttonRef}\n          tabIndex={tabIndex}\n          className={clsx(styles['body-cell-editor'], styles['body-cell-editor-disabled'])}\n          aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n          aria-haspopup=\"dialog\"\n          aria-disabled=\"true\"\n          onFocus={() => setHasFocus(true)}\n          onBlur={() => setHasFocus(false)}\n          onKeyDown={handleEscape}\n          {...targetProps}\n        >\n          {showIcon && <Icon name=\"lock-private\" variant=\"normal\" __internalRootRef={iconRef} />}\n          {descriptionEl}\n        </button>\n      </div>\n\n      {isEditing && (\n        <span ref={portalRef}>\n          <Portal>\n            <span className={portalClasses}>\n              <PopoverContainer\n                size=\"medium\"\n                fixedWidth={false}\n                position=\"top\"\n                trackRef={iconRef}\n                arrow={position => <Arrow position={position} />}\n                renderWithPortal={true}\n                zIndex={2000}\n              >\n                <PopoverBody\n                  dismissButton={false}\n                  dismissAriaLabel={undefined}\n                  header={null}\n                  onDismiss={() => {}}\n                  overflowVisible=\"both\"\n                >\n                  <InternalLiveRegion tagName=\"span\">{editDisabledReason}</InternalLiveRegion>\n                </PopoverBody>\n              </PopoverContainer>\n            </span>\n          </Portal>\n        </span>\n      )}\n    </TableTdElement>\n  );\n}\n"]}

package/table/body-cell/index.d.ts

@@ -11,7 +11,6 @@ export interface TableBodyCellProps<ItemType> extends TableTdElementProps {
     onEditEnd: (cancelled: boolean) => void;
     submitEdit?: TableProps.SubmitEditFunction<ItemType>;
     ariaLabels: TableProps['ariaLabels'];
-    interactiveCell?: boolean;
 }
 export declare function TableBodyCell<ItemType>({ isEditable, ...rest }: TableBodyCellProps<ItemType> & {
     isEditable: boolean;

package/table/body-cell/index.d.ts.map

@@ -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,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,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;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6HD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,EACtC,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAexD"}
+{"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,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,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;AA0HD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,EACtC,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAexD"}

package/table/body-cell/index.js

@@ -17,7 +17,7 @@ const submitHandlerFallback = () => {
 };
 function TableCellEditable(_a) {
     var _b, _c, _d;
-    var { className, item, column, isEditing, onEditStart, onEditEnd, submitEdit, ariaLabels, isVisualRefresh, resizableColumns = false, successfulEdit = false, interactiveCell = true } = _a, rest = __rest(_a, ["className", "item", "column", "isEditing", "onEditStart", "onEditEnd", "submitEdit", "ariaLabels", "isVisualRefresh", "resizableColumns", "successfulEdit", "interactiveCell"]);
+    var { className, item, column, isEditing, onEditStart, onEditEnd, submitEdit, ariaLabels, isVisualRefresh, resizableColumns = false, successfulEdit = false } = _a, rest = __rest(_a, ["className", "item", "column", "isEditing", "onEditStart", "onEditEnd", "submitEdit", "ariaLabels", "isVisualRefresh", "resizableColumns", "successfulEdit"]);
     const i18n = useInternalI18n('table');
     const editActivateRef = useRef(null);
     const tdNativeAttributes = {
@@ -34,7 +34,7 @@ function TableCellEditable(_a) {
     const [hasHover, setHasHover] = useState(false);
     const [hasFocus, setHasFocus] = useState(false);
     // When a cell is both expandable and editable the icon is always shown.
-    const showIcon = hasHover || hasFocus || !interactiveCell;
+    const showIcon = hasHover || hasFocus;
     const prevSuccessfulEdit = usePrevious(successfulEdit);
     const prevHasFocus = usePrevious(hasFocus);
     const [showSuccessIcon, setShowSuccessIcon] = useState(false);
@@ -49,7 +49,7 @@ function TableCellEditable(_a) {
         }
     }, [hasFocus, successfulEdit, prevHasFocus, prevSuccessfulEdit]);
     const { tabIndex: editActivateTabIndex } = useSingleTabStopNavigation(editActivateRef);
-    return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], interactiveCell && styles['body-cell-interactive'], resizableColumns && styles['resizable-columns'], isEditing && styles['body-cell-edit-active'], showSuccessIcon && showIcon && styles['body-cell-has-success'], isVisualRefresh && styles['is-visual-refresh']), onClick: interactiveCell && !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: options => {
+    return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], resizableColumns && styles['resizable-columns'], isEditing && styles['body-cell-edit-active'], showSuccessIcon && showIcon && styles['body-cell-has-success'], isVisualRefresh && styles['is-visual-refresh']), onClick: !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: options => {
             setShowSuccessIcon(false);
             isFocusMoveNeededRef.current = options.refocusCell;
             onEditEnd(options.cancelled);
@@ -64,7 +64,7 @@ function TableCellEditable(_a) {
                 React.createElement(Icon, { name: "status-positive", variant: "success" })),
             React.createElement(InternalLiveRegion, { tagName: "span", hidden: true }, i18n('ariaLabels.successfulEditLabel', (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.successfulEditLabel) === null || _c === void 0 ? void 0 : _c.call(ariaLabels, column))))),
         React.createElement("div", { className: styles['body-cell-editor-wrapper'] },
-            React.createElement("button", { className: styles['body-cell-editor'], "aria-label": (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _d === void 0 ? void 0 : _d.call(ariaLabels, column, item), ref: editActivateRef, onClick: !interactiveCell && !isEditing ? onEditStart : undefined, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), tabIndex: editActivateTabIndex }, showIcon && React.createElement(Icon, { name: "edit" })))))));
+            React.createElement("button", { className: styles['body-cell-editor'], "aria-label": (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _d === void 0 ? void 0 : _d.call(ariaLabels, column, item), ref: editActivateRef, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), tabIndex: editActivateTabIndex }, showIcon && React.createElement(Icon, { name: "edit" })))))));
 }
 export function TableBodyCell(_a) {
     var _b, _c;

package/table/body-cell/index.js.map

@@ -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';\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  isEditing: boolean;\n  resizableColumns?: boolean;\n  successfulEdit?: boolean;\n  onEditStart: () => void;\n  onEditEnd: (cancelled: boolean) => void;\n  submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n  ariaLabels: TableProps['ariaLabels'];\n  interactiveCell?: boolean;\n}\n\nfunction TableCellEditable<ItemType>({\n  className,\n  item,\n  column,\n  isEditing,\n  onEditStart,\n  onEditEnd,\n  submitEdit,\n  ariaLabels,\n  isVisualRefresh,\n  resizableColumns = false,\n  successfulEdit = false,\n  interactiveCell = true,\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 || !interactiveCell;\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      className={clsx(\n        className,\n        styles['body-cell-editable'],\n        interactiveCell && styles['body-cell-interactive'],\n        resizableColumns && styles['resizable-columns'],\n        isEditing && styles['body-cell-edit-active'],\n        showSuccessIcon && showIcon && styles['body-cell-has-success'],\n        isVisualRefresh && styles['is-visual-refresh']\n      )}\n      onClick={interactiveCell && !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              onClick={!interactiveCell && !isEditing ? onEditStart : undefined}\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>({\n  isEditable,\n  ...rest\n}: TableBodyCellProps<ItemType> & { isEditable: boolean }) {\n  const isExpandableColumnCell = rest.level !== undefined;\n  const editDisabledReason = rest.column.editConfig?.disabledReason?.(rest.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} {...rest} />;\n  }\n  if ((isEditable || rest.isEditing) && !isExpandableColumnCell) {\n    return <TableCellEditable {...rest} />;\n  }\n\n  const { column, item } = rest;\n  return <TableTdElement {...rest}>{column.cell(item)}</TableTdElement>;\n}\n"]}
+{"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;AAcF,SAAS,iBAAiB,CAAW,EAaN;;QAbM,EACnC,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,EACT,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,GAAG,KAAK,EACxB,cAAc,GAAG,KAAK,OAEO,EAD1B,IAAI,cAZ4B,6JAapC,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;IAE3C,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;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,wEAAwE;IACxE,MAAM,QAAQ,GAAG,QAAQ,IAAI,QAAQ,CAAC;IAEtC,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,IAAI,CACb,SAAS,EACT,MAAM,CAAC,oBAAoB,CAAC,EAC5B,gBAAgB,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC/C,SAAS,IAAI,MAAM,CAAC,uBAAuB,CAAC,EAC5C,eAAe,IAAI,QAAQ,IAAI,MAAM,CAAC,uBAAuB,CAAC,EAC9D,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAC/C,EACD,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC7C,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACrC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,KAErC,SAAS,CAAC,CAAC,CAAC,CACX,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,gBAC1B,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,2DAAG,MAAM,CAAC,EACrD,IAAI,EAAC,KAAK,EACV,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,GAAG,CAC5C;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,MAAM,CAAC,kBAAkB,CAAC,gBACzB,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,iBAAiB,2DAAG,MAAM,EAAE,IAAI,CAAC,EACzD,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAChC,QAAQ,EAAE,oBAAoB,IAE7B,QAAQ,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CAC1B,CACL,CACL,CACJ,CACc,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAW,EAGiB;;QAHjB,EACtC,UAAU,OAE6C,EADpD,IAAI,cAF+B,cAGvC,CADQ;IAEP,MAAM,sBAAsB,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC;IACxD,MAAM,kBAAkB,GAAG,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,UAAU,0CAAE,cAAc,mDAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IAE/E,6FAA6F;IAC7F,iEAAiE;IACjE,IAAI,kBAAkB,IAAI,CAAC,sBAAsB,EAAE;QACjD,OAAO,oBAAC,oBAAoB,kBAAC,kBAAkB,EAAE,kBAAkB,IAAM,IAAI,EAAI,CAAC;KACnF;IACD,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,sBAAsB,EAAE;QAC7D,OAAO,oBAAC,iBAAiB,oBAAK,IAAI,EAAI,CAAC;KACxC;IAED,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC9B,OAAO,oBAAC,cAAc,oBAAK,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAkB,CAAC;AACxE,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  isEditing: boolean;\n  resizableColumns?: boolean;\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  className,\n  item,\n  column,\n  isEditing,\n  onEditStart,\n  onEditEnd,\n  submitEdit,\n  ariaLabels,\n  isVisualRefresh,\n  resizableColumns = false,\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      className={clsx(\n        className,\n        styles['body-cell-editable'],\n        resizableColumns && styles['resizable-columns'],\n        isEditing && styles['body-cell-edit-active'],\n        showSuccessIcon && showIcon && styles['body-cell-has-success'],\n        isVisualRefresh && styles['is-visual-refresh']\n      )}\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>({\n  isEditable,\n  ...rest\n}: TableBodyCellProps<ItemType> & { isEditable: boolean }) {\n  const isExpandableColumnCell = rest.level !== undefined;\n  const editDisabledReason = rest.column.editConfig?.disabledReason?.(rest.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} {...rest} />;\n  }\n  if ((isEditable || rest.isEditing) && !isExpandableColumnCell) {\n    return <TableCellEditable {...rest} />;\n  }\n\n  const { column, item } = rest;\n  return <TableTdElement {...rest}>{column.cell(item)}</TableTdElement>;\n}\n"]}

package/table/body-cell/styles.css.js

@@ -1,52 +1,51 @@
 
     import './styles.scoped.css';
     export default {
-  "expandable-toggle-wrapper": "awsui_expandable-toggle-wrapper_c6tup_1iipf_141",
-  "body-cell": "awsui_body-cell_c6tup_1iipf_148",
-  "body-cell-content": "awsui_body-cell-content_c6tup_1iipf_156",
-  "expandable-level-0": "awsui_expandable-level-0_c6tup_1iipf_162",
-  "expandable-level-1": "awsui_expandable-level-1_c6tup_1iipf_169",
-  "expandable-level-2": "awsui_expandable-level-2_c6tup_1iipf_176",
-  "expandable-level-3": "awsui_expandable-level-3_c6tup_1iipf_183",
-  "expandable-level-4": "awsui_expandable-level-4_c6tup_1iipf_190",
-  "expandable-level-5": "awsui_expandable-level-5_c6tup_1iipf_197",
-  "expandable-level-6": "awsui_expandable-level-6_c6tup_1iipf_204",
-  "expandable-level-7": "awsui_expandable-level-7_c6tup_1iipf_211",
-  "expandable-level-8": "awsui_expandable-level-8_c6tup_1iipf_218",
-  "expandable-level-9": "awsui_expandable-level-9_c6tup_1iipf_225",
-  "expandable-level-next": "awsui_expandable-level-next_c6tup_1iipf_232",
-  "body-cell-wrap": "awsui_body-cell-wrap_c6tup_1iipf_253",
-  "is-visual-refresh": "awsui_is-visual-refresh_c6tup_1iipf_267",
-  "has-striped-rows": "awsui_has-striped-rows_c6tup_1iipf_279",
-  "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_1iipf_362",
-  "body-cell-interactive": "awsui_body-cell-interactive_c6tup_1iipf_362",
-  "body-cell-editable": "awsui_body-cell-editable_c6tup_1iipf_362",
-  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_c6tup_1iipf_445",
-  "has-selection": "awsui_has-selection_c6tup_1iipf_445",
-  "body-cell-align-top": "awsui_body-cell-align-top_c6tup_1iipf_784",
-  "body-cell-first-row": "awsui_body-cell-first-row_c6tup_1iipf_787",
-  "body-cell-last-row": "awsui_body-cell-last-row_c6tup_1iipf_790",
-  "body-cell-selected": "awsui_body-cell-selected_c6tup_1iipf_790",
-  "has-footer": "awsui_has-footer_c6tup_1iipf_790",
-  "body-cell-shaded": "awsui_body-cell-shaded_c6tup_1iipf_800",
-  "sticky-cell": "awsui_sticky-cell_c6tup_1iipf_445",
-  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_c6tup_1iipf_848",
-  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_c6tup_1iipf_945",
-  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_c6tup_1iipf_954",
-  "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_1iipf_976",
-  "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_1iipf_983",
-  "body-cell-editor-wrapper": "awsui_body-cell-editor-wrapper_c6tup_1iipf_1009",
-  "body-cell-success": "awsui_body-cell-success_c6tup_1iipf_1014",
-  "body-cell-editor": "awsui_body-cell-editor_c6tup_1iipf_1009",
-  "body-cell-editor-disabled": "awsui_body-cell-editor-disabled_c6tup_1iipf_1039",
-  "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_1iipf_1048",
-  "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_1iipf_1058",
-  "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_1iipf_1068",
-  "body-cell-editor-row-editor": "awsui_body-cell-editor-row-editor_c6tup_1iipf_1071",
-  "body-cell-expandable": "awsui_body-cell-expandable_c6tup_1iipf_1074",
-  "resizable-columns": "awsui_resizable-columns_c6tup_1iipf_1095",
-  "expandable-cell-content": "awsui_expandable-cell-content_c6tup_1iipf_1098",
-  "body-cell-has-success": "awsui_body-cell-has-success_c6tup_1iipf_1167",
-  "body-cell-edit-disabled-popover": "awsui_body-cell-edit-disabled-popover_c6tup_1iipf_1167"
+  "expandable-toggle-wrapper": "awsui_expandable-toggle-wrapper_c6tup_lq48p_141",
+  "body-cell": "awsui_body-cell_c6tup_lq48p_148",
+  "body-cell-content": "awsui_body-cell-content_c6tup_lq48p_156",
+  "expandable-level-0": "awsui_expandable-level-0_c6tup_lq48p_162",
+  "expandable-level-1": "awsui_expandable-level-1_c6tup_lq48p_169",
+  "expandable-level-2": "awsui_expandable-level-2_c6tup_lq48p_176",
+  "expandable-level-3": "awsui_expandable-level-3_c6tup_lq48p_183",
+  "expandable-level-4": "awsui_expandable-level-4_c6tup_lq48p_190",
+  "expandable-level-5": "awsui_expandable-level-5_c6tup_lq48p_197",
+  "expandable-level-6": "awsui_expandable-level-6_c6tup_lq48p_204",
+  "expandable-level-7": "awsui_expandable-level-7_c6tup_lq48p_211",
+  "expandable-level-8": "awsui_expandable-level-8_c6tup_lq48p_218",
+  "expandable-level-9": "awsui_expandable-level-9_c6tup_lq48p_225",
+  "expandable-level-next": "awsui_expandable-level-next_c6tup_lq48p_232",
+  "body-cell-wrap": "awsui_body-cell-wrap_c6tup_lq48p_253",
+  "is-visual-refresh": "awsui_is-visual-refresh_c6tup_lq48p_267",
+  "has-striped-rows": "awsui_has-striped-rows_c6tup_lq48p_279",
+  "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_lq48p_362",
+  "body-cell-editable": "awsui_body-cell-editable_c6tup_lq48p_362",
+  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_c6tup_lq48p_445",
+  "has-selection": "awsui_has-selection_c6tup_lq48p_445",
+  "body-cell-align-top": "awsui_body-cell-align-top_c6tup_lq48p_784",
+  "body-cell-first-row": "awsui_body-cell-first-row_c6tup_lq48p_787",
+  "body-cell-last-row": "awsui_body-cell-last-row_c6tup_lq48p_790",
+  "body-cell-selected": "awsui_body-cell-selected_c6tup_lq48p_790",
+  "has-footer": "awsui_has-footer_c6tup_lq48p_790",
+  "body-cell-shaded": "awsui_body-cell-shaded_c6tup_lq48p_800",
+  "sticky-cell": "awsui_sticky-cell_c6tup_lq48p_445",
+  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_c6tup_lq48p_848",
+  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_c6tup_lq48p_945",
+  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_c6tup_lq48p_954",
+  "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_lq48p_976",
+  "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_lq48p_983",
+  "body-cell-editor-wrapper": "awsui_body-cell-editor-wrapper_c6tup_lq48p_1009",
+  "body-cell-success": "awsui_body-cell-success_c6tup_lq48p_1014",
+  "body-cell-editor": "awsui_body-cell-editor_c6tup_lq48p_1009",
+  "body-cell-editor-disabled": "awsui_body-cell-editor-disabled_c6tup_lq48p_1039",
+  "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_lq48p_1048",
+  "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_lq48p_1058",
+  "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_lq48p_1068",
+  "body-cell-editor-row-editor": "awsui_body-cell-editor-row-editor_c6tup_lq48p_1071",
+  "body-cell-expandable": "awsui_body-cell-expandable_c6tup_lq48p_1074",
+  "resizable-columns": "awsui_resizable-columns_c6tup_lq48p_1092",
+  "expandable-cell-content": "awsui_expandable-cell-content_c6tup_lq48p_1095",
+  "body-cell-has-success": "awsui_body-cell-has-success_c6tup_lq48p_1143",
+  "body-cell-edit-disabled-popover": "awsui_body-cell-edit-disabled-popover_c6tup_lq48p_1143"
 };