@cloudscape-design/components 3.0.1277 → 3.0.1279

package/drawer/styles.selectors.js

@@ -2,17 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer": "awsui_drawer_1sxt8_1gt83_189",
-  "with-footer": "awsui_with-footer_1sxt8_1gt83_221",
-  "content": "awsui_content_1sxt8_1gt83_226",
-  "header": "awsui_header_1sxt8_1gt83_230",
-  "with-additional-action": "awsui_with-additional-action_1sxt8_1gt83_247",
-  "with-runtime-context": "awsui_with-runtime-context_1sxt8_1gt83_255",
-  "with-toolbar": "awsui_with-toolbar_1sxt8_1gt83_258",
-  "header-actions": "awsui_header-actions_1sxt8_1gt83_277",
-  "content-with-paddings": "awsui_content-with-paddings_1sxt8_1gt83_283",
-  "footer": "awsui_footer_1sxt8_1gt83_290",
-  "is-sticky": "awsui_is-sticky_1sxt8_1gt83_296",
-  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_1gt83_304"
+  "drawer": "awsui_drawer_1sxt8_zqi16_189",
+  "position-absolute": "awsui_position-absolute_1sxt8_zqi16_222",
+  "position-sticky": "awsui_position-sticky_1sxt8_zqi16_222",
+  "position-fixed": "awsui_position-fixed_1sxt8_zqi16_222",
+  "with-footer": "awsui_with-footer_1sxt8_zqi16_225",
+  "position-static": "awsui_position-static_1sxt8_zqi16_229",
+  "content": "awsui_content_1sxt8_zqi16_232",
+  "header": "awsui_header_1sxt8_zqi16_236",
+  "with-additional-action": "awsui_with-additional-action_1sxt8_zqi16_253",
+  "with-runtime-context": "awsui_with-runtime-context_1sxt8_zqi16_261",
+  "with-toolbar": "awsui_with-toolbar_1sxt8_zqi16_264",
+  "header-actions": "awsui_header-actions_1sxt8_zqi16_283",
+  "content-with-paddings": "awsui_content-with-paddings_1sxt8_zqi16_289",
+  "footer": "awsui_footer_1sxt8_zqi16_296",
+  "is-sticky": "awsui_is-sticky_1sxt8_zqi16_302",
+  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_zqi16_310"
 };
   

package/drawer/utils.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { NextDrawerProps } from './interfaces';
+type PositionProps = Pick<NextDrawerProps, 'position' | 'placement' | 'offset' | 'stickyOffset' | 'zIndex'>;
+export declare function getPositionStyles({
+  position,
+  zIndex,
+  ...props
+}: PositionProps): {
+  className: string;
+  style: React.CSSProperties;
+};
+export {};

package/drawer/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/drawer/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI/C,KAAK,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,QAAQ,CAAC,CAAC;AAE5G,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,GAAG;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,CAmBA"}

package/drawer/utils.js

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import styles from './styles.css.js';
+export function getPositionStyles({ position, zIndex, ...props }) {
+    if (position === 'sticky' && (props.placement === 'start' || props.placement === 'end')) {
+        warnOnce('Drawer', `position="sticky" is not supported with placement="${props.placement}" and falls back to position="static".`);
+        position = 'static';
+    }
+    switch (position) {
+        case 'absolute':
+            return getStyles(position, { position: 'absolute', zIndex, ...computeAbsoluteOffsets(props) });
+        case 'sticky':
+            return getStyles(position, { position: 'sticky', zIndex, ...computeStickyOffsets(props) });
+        case 'fixed':
+            return getStyles(position, { position: 'fixed', zIndex, ...computeAbsoluteOffsets(props) });
+        case 'static':
+        default:
+            return getStyles(position);
+    }
+}
+function getStyles(position = 'static', style = {}) {
+    return { className: styles[`position-${position}`], style };
+}
+function computeAbsoluteOffsets({ placement, offset: { top, bottom, start, end } = {}, }) {
+    const style = {};
+    const offset = { top: top !== null && top !== void 0 ? top : 0, bottom: bottom !== null && bottom !== void 0 ? bottom : 0, start: start !== null && start !== void 0 ? start : 0, end: end !== null && end !== void 0 ? end : 0 };
+    switch (placement) {
+        case 'top':
+            style.insetBlockStart = offset.top;
+            style.insetInlineStart = offset.start;
+            style.insetInlineEnd = offset.end;
+            break;
+        case 'bottom':
+            style.insetBlockEnd = offset.bottom;
+            style.insetInlineStart = offset.start;
+            style.insetInlineEnd = offset.end;
+            break;
+        case 'start':
+            style.insetInlineStart = offset.start;
+            style.insetBlockStart = offset.top;
+            style.insetBlockEnd = offset.bottom;
+            break;
+        case 'end':
+            style.insetInlineEnd = offset.end;
+            style.insetBlockStart = offset.top;
+            style.insetBlockEnd = offset.bottom;
+            break;
+    }
+    return style;
+}
+function computeStickyOffsets({ placement, offset: { top, bottom, start, end } = {}, stickyOffset: { top: stickyTop, bottom: stickyBottom } = {}, }) {
+    const style = {};
+    const offset = { top: top !== null && top !== void 0 ? top : 0, bottom: bottom !== null && bottom !== void 0 ? bottom : 0, start: start !== null && start !== void 0 ? start : 0, end: end !== null && end !== void 0 ? end : 0 };
+    const stickyOffset = { top: stickyTop !== null && stickyTop !== void 0 ? stickyTop : 0, bottom: stickyBottom !== null && stickyBottom !== void 0 ? stickyBottom : 0 };
+    switch (placement) {
+        case 'top':
+            style.insetBlockStart = stickyOffset.top;
+            style.marginBlockStart = offset.top;
+            style.marginInlineStart = offset.start;
+            style.marginInlineEnd = offset.end;
+            style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;
+            break;
+        case 'bottom':
+            style.insetBlockEnd = stickyOffset.bottom;
+            style.marginBlockEnd = offset.bottom;
+            style.marginInlineStart = offset.start;
+            style.marginInlineEnd = offset.end;
+            style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;
+            break;
+    }
+    return style;
+}
+//# sourceMappingURL=utils.js.map

package/drawer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/drawer/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { NextDrawerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype PositionProps = Pick<NextDrawerProps, 'position' | 'placement' | 'offset' | 'stickyOffset' | 'zIndex'>;\n\nexport function getPositionStyles({ position, zIndex, ...props }: PositionProps): {\n  className: string;\n  style: React.CSSProperties;\n} {\n  if (position === 'sticky' && (props.placement === 'start' || props.placement === 'end')) {\n    warnOnce(\n      'Drawer',\n      `position=\"sticky\" is not supported with placement=\"${props.placement}\" and falls back to position=\"static\".`\n    );\n    position = 'static';\n  }\n  switch (position) {\n    case 'absolute':\n      return getStyles(position, { position: 'absolute', zIndex, ...computeAbsoluteOffsets(props) });\n    case 'sticky':\n      return getStyles(position, { position: 'sticky', zIndex, ...computeStickyOffsets(props) });\n    case 'fixed':\n      return getStyles(position, { position: 'fixed', zIndex, ...computeAbsoluteOffsets(props) });\n    case 'static':\n    default:\n      return getStyles(position);\n  }\n}\n\nfunction getStyles(position: NextDrawerProps.Position = 'static', style: React.CSSProperties = {}) {\n  return { className: styles[`position-${position}`], style };\n}\n\nfunction computeAbsoluteOffsets({\n  placement,\n  offset: { top, bottom, start, end } = {},\n}: Pick<NextDrawerProps, 'placement' | 'offset'>) {\n  const style: React.CSSProperties = {};\n  const offset = { top: top ?? 0, bottom: bottom ?? 0, start: start ?? 0, end: end ?? 0 };\n  switch (placement) {\n    case 'top':\n      style.insetBlockStart = offset.top;\n      style.insetInlineStart = offset.start;\n      style.insetInlineEnd = offset.end;\n      break;\n    case 'bottom':\n      style.insetBlockEnd = offset.bottom;\n      style.insetInlineStart = offset.start;\n      style.insetInlineEnd = offset.end;\n      break;\n    case 'start':\n      style.insetInlineStart = offset.start;\n      style.insetBlockStart = offset.top;\n      style.insetBlockEnd = offset.bottom;\n      break;\n    case 'end':\n      style.insetInlineEnd = offset.end;\n      style.insetBlockStart = offset.top;\n      style.insetBlockEnd = offset.bottom;\n      break;\n  }\n  return style;\n}\n\nfunction computeStickyOffsets({\n  placement,\n  offset: { top, bottom, start, end } = {},\n  stickyOffset: { top: stickyTop, bottom: stickyBottom } = {},\n}: Pick<NextDrawerProps, 'placement' | 'offset' | 'stickyOffset'>) {\n  const style: React.CSSProperties = {};\n  const offset = { top: top ?? 0, bottom: bottom ?? 0, start: start ?? 0, end: end ?? 0 };\n  const stickyOffset = { top: stickyTop ?? 0, bottom: stickyBottom ?? 0 };\n  switch (placement) {\n    case 'top':\n      style.insetBlockStart = stickyOffset.top;\n      style.marginBlockStart = offset.top;\n      style.marginInlineStart = offset.start;\n      style.marginInlineEnd = offset.end;\n      style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;\n      break;\n    case 'bottom':\n      style.insetBlockEnd = stickyOffset.bottom;\n      style.marginBlockEnd = offset.bottom;\n      style.marginInlineStart = offset.start;\n      style.marginInlineEnd = offset.end;\n      style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;\n      break;\n  }\n  return style;\n}\n"]}

package/internal/base-component/styles.scoped.css

@@ -283,6 +283,7 @@ body {
   --color-background-input-disabled-dihaja:var(--color-neutral-250-vs1is4);
   --color-background-item-selected-9gppru:var(--color-primary-50-1y05xv);
   --color-background-layout-main-5ilwcb:var(--color-white-p1zlvy);
+  --color-background-drawer-5hs0eh:var(--color-background-layout-panel-content-xto15e);
   --color-background-layout-mobile-panel-ed0ava:var(--color-neutral-950-lxybh8);
   --color-background-layout-panel-content-xto15e:var(--color-background-container-content-6u8rvp);
   --color-background-layout-panel-hover-tguulw:var(--color-neutral-250-vs1is4);
@@ -1401,6 +1402,7 @@ body {
   --color-background-card-p5vrq0:var(--color-background-container-content-6u8rvp);
   --color-background-item-card-ww2wfv:var(--color-background-card-p5vrq0);
   --color-background-dropdown-item-selected-f3v6te:var(--color-background-item-selected-9gppru);
+  --color-background-drawer-5hs0eh:var(--color-background-layout-panel-content-xto15e);
   --color-background-layout-panel-content-xto15e:var(--color-background-container-content-6u8rvp);
   --color-background-modal-overlay-d7uby0:var(--color-grey-opaque-70-p0svy7);
   --color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
@@ -1668,6 +1670,7 @@ body {
   --color-background-card-p5vrq0:var(--color-background-container-content-6u8rvp);
   --color-background-item-card-ww2wfv:var(--color-background-card-p5vrq0);
   --color-background-dropdown-item-selected-f3v6te:var(--color-background-item-selected-9gppru);
+  --color-background-drawer-5hs0eh:var(--color-background-layout-panel-content-xto15e);
   --color-background-layout-panel-content-xto15e:var(--color-background-container-content-6u8rvp);
   --color-background-modal-overlay-d7uby0:var(--color-grey-opaque-70-p0svy7);
   --color-background-segment-hover-800sl4:var(--color-background-button-normal-hover-53op9s);
@@ -2067,6 +2070,7 @@ body {
   --color-background-card-p5vrq0:var(--color-background-container-content-6u8rvp);
   --color-background-item-card-ww2wfv:var(--color-background-card-p5vrq0);
   --color-background-dropdown-item-selected-f3v6te:var(--color-background-item-selected-9gppru);
+  --color-background-drawer-5hs0eh:var(--color-background-layout-panel-content-xto15e);
   --color-background-layout-panel-content-xto15e:var(--color-background-container-content-6u8rvp);
   --color-background-modal-overlay-d7uby0:var(--color-grey-opaque-70-p0svy7);
   --color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
@@ -2232,5 +2236,5 @@ body {
   }
 }
 :root {
-  --awsui-version-info-52ff00f9: true;
+  --awsui-version-info-d634ab40: true;
 }

package/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (52ff00f9)";
-export var GIT_SHA = "52ff00f9";
+export var PACKAGE_VERSION = "3.0.0 (d634ab40)";
+export var GIT_SHA = "d634ab40";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (52ff00f9)",
-  "GIT_SHA": "52ff00f9",
+  "PACKAGE_VERSION": "3.0.0 (d634ab40)",
+  "GIT_SHA": "d634ab40",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true

package/internal/generated/styles/tokens.d.ts

@@ -325,6 +325,7 @@ export const colorBackgroundInputDefault: string;
 export const colorBackgroundInputDisabled: string;
 export const colorBackgroundItemSelected: string;
 export const colorBackgroundLayoutMain: string;
+export const colorBackgroundDrawer: string;
 export const colorBackgroundLayoutMobilePanel: string;
 export const colorBackgroundLayoutPanelContent: string;
 export const colorBackgroundLayoutPanelHover: string;

package/internal/generated/styles/tokens.js

@@ -325,6 +325,7 @@ export var colorBackgroundInputDefault = "var(--color-background-input-default-i
 export var colorBackgroundInputDisabled = "var(--color-background-input-disabled-dihaja, #ebebf0)";
 export var colorBackgroundItemSelected = "var(--color-background-item-selected-9gppru, #f0fbff)";
 export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwcb, #ffffff)";
+export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";
 export var colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel-ed0ava, #0f141a)";
 export var colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content-xto15e, #ffffff)";
 export var colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover-tguulw, #ebebf0)";

package/internal/generated/theming/index.cjs

@@ -1347,6 +1347,10 @@ module.exports.preset = {
         "light": "{colorWhite}",
         "dark": "{colorNeutral850}"
       },
+      "colorBackgroundDrawer": {
+        "light": "{colorBackgroundLayoutPanelContent}",
+        "dark": "{colorBackgroundLayoutPanelContent}"
+      },
       "colorBackgroundLayoutMobilePanel": {
         "light": "{colorNeutral950}",
         "dark": "{colorNeutral950}"
@@ -3921,6 +3925,10 @@ module.exports.preset = {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -5366,6 +5374,10 @@ module.exports.preset = {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -6739,6 +6751,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -7997,6 +8013,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -9255,6 +9275,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -10515,6 +10539,10 @@ module.exports.preset = {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -11884,6 +11912,7 @@ module.exports.preset = {
       "colorBackgroundInputDisabled": "color",
       "colorBackgroundItemSelected": "color",
       "colorBackgroundLayoutMain": "color",
+      "colorBackgroundDrawer": "color",
       "colorBackgroundLayoutMobilePanel": "color",
       "colorBackgroundLayoutPanelContent": "color",
       "colorBackgroundLayoutPanelHover": "color",
@@ -13664,6 +13693,7 @@ module.exports.preset = {
     "colorBackgroundInputDisabled": "color-background-input-disabled",
     "colorBackgroundItemSelected": "color-background-item-selected",
     "colorBackgroundLayoutMain": "color-background-layout-main",
+    "colorBackgroundDrawer": "color-background-drawer",
     "colorBackgroundLayoutMobilePanel": "color-background-layout-mobile-panel",
     "colorBackgroundLayoutPanelContent": "color-background-layout-panel-content",
     "colorBackgroundLayoutPanelHover": "color-background-layout-panel-hover",
@@ -14554,6 +14584,7 @@ module.exports.preset = {
     "colorBackgroundInputDisabled": "--color-background-input-disabled-dihaja",
     "colorBackgroundItemSelected": "--color-background-item-selected-9gppru",
     "colorBackgroundLayoutMain": "--color-background-layout-main-5ilwcb",
+    "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",
     "colorBackgroundLayoutMobilePanel": "--color-background-layout-mobile-panel-ed0ava",
     "colorBackgroundLayoutPanelContent": "--color-background-layout-panel-content-xto15e",
     "colorBackgroundLayoutPanelHover": "--color-background-layout-panel-hover-tguulw",

package/internal/generated/theming/index.js

@@ -1347,6 +1347,10 @@ export var preset = {
         "light": "{colorWhite}",
         "dark": "{colorNeutral850}"
       },
+      "colorBackgroundDrawer": {
+        "light": "{colorBackgroundLayoutPanelContent}",
+        "dark": "{colorBackgroundLayoutPanelContent}"
+      },
       "colorBackgroundLayoutMobilePanel": {
         "light": "{colorNeutral950}",
         "dark": "{colorNeutral950}"
@@ -3921,6 +3925,10 @@ export var preset = {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -5366,6 +5374,10 @@ export var preset = {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -6739,6 +6751,10 @@ export var preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -7997,6 +8013,10 @@ export var preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -9255,6 +9275,10 @@ export var preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -10515,6 +10539,10 @@ export var preset = {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -11884,6 +11912,7 @@ export var preset = {
       "colorBackgroundInputDisabled": "color",
       "colorBackgroundItemSelected": "color",
       "colorBackgroundLayoutMain": "color",
+      "colorBackgroundDrawer": "color",
       "colorBackgroundLayoutMobilePanel": "color",
       "colorBackgroundLayoutPanelContent": "color",
       "colorBackgroundLayoutPanelHover": "color",
@@ -13664,6 +13693,7 @@ export var preset = {
     "colorBackgroundInputDisabled": "color-background-input-disabled",
     "colorBackgroundItemSelected": "color-background-item-selected",
     "colorBackgroundLayoutMain": "color-background-layout-main",
+    "colorBackgroundDrawer": "color-background-drawer",
     "colorBackgroundLayoutMobilePanel": "color-background-layout-mobile-panel",
     "colorBackgroundLayoutPanelContent": "color-background-layout-panel-content",
     "colorBackgroundLayoutPanelHover": "color-background-layout-panel-hover",
@@ -14554,6 +14584,7 @@ export var preset = {
     "colorBackgroundInputDisabled": "--color-background-input-disabled-dihaja",
     "colorBackgroundItemSelected": "--color-background-item-selected-9gppru",
     "colorBackgroundLayoutMain": "--color-background-layout-main-5ilwcb",
+    "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",
     "colorBackgroundLayoutMobilePanel": "--color-background-layout-mobile-panel-ed0ava",
     "colorBackgroundLayoutPanelContent": "--color-background-layout-panel-content-xto15e",
     "colorBackgroundLayoutPanelHover": "--color-background-layout-panel-hover-tguulw",

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "52ff00f93218b659c42bc49c07b0cb6affa94be7"
+  "commit": "d634ab4089a8a3ab98d37da33f302d309e4a63cc"
 }

package/package.json

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

package/table/selection/interfaces.d.ts

@@ -7,6 +7,7 @@ export interface ItemSelectionProps {
   onChange: () => void;
   onShiftToggle?: (value: boolean) => void;
   ariaLabel?: string;
+  ariaDescribedby?: string;
   selectionGroupLabel?: string;
 }
 export interface SelectionProps<T> {

package/table/selection/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/table/selection/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,kBAAkB,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,kBAAkB,CAAC;IACxD,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,kBAAkB,CAAC;CAClE"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/table/selection/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,kBAAkB,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,kBAAkB,CAAC;IACxD,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,kBAAkB,CAAC;CAClE"}

package/table/selection/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/table/selection/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ItemSelectionProps {\n  name: string;\n  disabled: boolean;\n  selectionType: 'single' | 'multi';\n  indeterminate?: boolean;\n  checked: boolean;\n  onChange: () => void;\n  onShiftToggle?: (value: boolean) => void;\n  ariaLabel?: string;\n  selectionGroupLabel?: string;\n}\n\nexport interface SelectionProps<T> {\n  isItemSelected: (item: T) => boolean;\n  getSelectAllProps?: () => ItemSelectionProps;\n  getItemSelectionProps?: (item: T) => ItemSelectionProps;\n  getLoaderSelectionProps?: (item: null | T) => ItemSelectionProps;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/table/selection/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ItemSelectionProps {\n  name: string;\n  disabled: boolean;\n  selectionType: 'single' | 'multi';\n  indeterminate?: boolean;\n  checked: boolean;\n  onChange: () => void;\n  onShiftToggle?: (value: boolean) => void;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n  selectionGroupLabel?: string;\n}\n\nexport interface SelectionProps<T> {\n  isItemSelected: (item: T) => boolean;\n  getSelectAllProps?: () => ItemSelectionProps;\n  getItemSelectionProps?: (item: T) => ItemSelectionProps;\n  getLoaderSelectionProps?: (item: null | T) => ItemSelectionProps;\n}\n"]}

package/table/selection/selection-control.d.ts

@@ -19,6 +19,7 @@ export declare function SelectionControl({
   onFocusDown,
   name,
   ariaLabel,
+  ariaDescribedby,
   focusedComponent,
   rowIndex,
   itemKey,

package/table/selection/selection-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAiB,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAS/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D,aAAa,CAAC,CAAC,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,aAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,aAAwB,EACxB,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,qBAAqB,eAoFvB"}
+{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAiB,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAS/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D,aAAa,CAAC,CAAC,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,aAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,aAAwB,EACxB,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,qBAAqB,eAqGvB"}

package/table/selection/selection-control.js

@@ -8,7 +8,7 @@ import InternalCheckbox from '../../checkbox/internal';
 import RadioButton from '../../internal/components/radio-button';
 import { KeyCode } from '../../internal/keycode';
 import styles from './styles.css.js';
-export function SelectionControl({ selectionType, indeterminate = false, onShiftToggle, onFocusUp, onFocusDown, name, ariaLabel, focusedComponent, rowIndex, itemKey, verticalAlign = 'middle', onChange, ...sharedProps }) {
+export function SelectionControl({ selectionType, indeterminate = false, onShiftToggle, onFocusUp, onFocusDown, name, ariaLabel, ariaDescribedby, focusedComponent, rowIndex, itemKey, verticalAlign = 'middle', onChange, ...sharedProps }) {
     const controlId = useUniqueId();
     const isMultiSelection = selectionType === 'multi';
     const { navigationActive } = useSingleTabStopNavigation(null);
@@ -46,7 +46,14 @@ export function SelectionControl({ selectionType, indeterminate = false, onShift
         // Clicking on input, does not focus it on Firefox (AWSUI-11345)
         nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.focus();
     };
-    const selector = isMultiSelection ? (React.createElement(InternalCheckbox, { ...sharedProps, onChange: onChange, showOutline: focusedComponent === 'selection-control', controlId: controlId, "data-focus-id": "selection-control", indeterminate: indeterminate })) : (React.createElement(RadioButton, { ...sharedProps, controlId: controlId, name: name, value: '', onSelect: onChange }));
+    const nativeInputAttributes = {};
+    if (ariaLabel) {
+        nativeInputAttributes['aria-label'] = ariaLabel;
+    }
+    if (ariaDescribedby) {
+        nativeInputAttributes['aria-describedby'] = ariaDescribedby;
+    }
+    const selector = isMultiSelection ? (React.createElement(InternalCheckbox, { ...sharedProps, onChange: onChange, showOutline: focusedComponent === 'selection-control', controlId: controlId, "data-focus-id": "selection-control", indeterminate: indeterminate, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby })) : (React.createElement(RadioButton, { ...sharedProps, controlId: controlId, name: name, value: '', onSelect: onChange, nativeInputAttributes: Object.keys(nativeInputAttributes).length > 0 ? nativeInputAttributes : undefined }));
     return (React.createElement(React.Fragment, null,
         React.createElement("label", { onKeyDown: handleKeyDown, onKeyUp: setShiftState, onMouseDown: onMouseDownHandler, onMouseUp: setShiftState, onClick: handleClick, htmlFor: controlId, className: clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top']), "aria-label": ariaLabel, title: ariaLabel, ...(rowIndex !== undefined && !sharedProps.disabled
                 ? getAnalyticsMetadataAttribute({

package/table/selection/selection-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.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, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../internal/components/radio-button';\nimport { KeyCode } from '../../internal/keycode';\nimport { ItemSelectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface SelectionControlProps extends ItemSelectionProps {\n  onShiftToggle?(shiftPressed: boolean): void;\n  onFocusUp?: KeyboardEventHandler;\n  onFocusDown?: KeyboardEventHandler;\n  ariaLabel?: string;\n  tabIndex?: -1;\n  focusedComponent?: null | string;\n  rowIndex?: number;\n  itemKey?: string;\n  verticalAlign?: 'middle' | 'top';\n}\n\nexport function SelectionControl({\n  selectionType,\n  indeterminate = false,\n  onShiftToggle,\n  onFocusUp,\n  onFocusDown,\n  name,\n  ariaLabel,\n  focusedComponent,\n  rowIndex,\n  itemKey,\n  verticalAlign = 'middle',\n  onChange,\n  ...sharedProps\n}: SelectionControlProps) {\n  const controlId = useUniqueId();\n  const isMultiSelection = selectionType === 'multi';\n  const { navigationActive } = useSingleTabStopNavigation(null);\n\n  const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n    if (isMultiSelection) {\n      onShiftToggle?.(event.shiftKey);\n    }\n  };\n\n  const onMouseDownHandler = (event: MouseEvent) => {\n    setShiftState(event);\n    if (isMultiSelection) {\n      // To overcome an issue\n      // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n      event.preventDefault();\n    }\n  };\n\n  // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n  const handleKeyDown = (event: KeyboardEvent) => {\n    setShiftState(event);\n    if (isMultiSelection && !navigationActive) {\n      if (event.keyCode === KeyCode.up) {\n        event.preventDefault();\n        onFocusUp?.(event);\n      }\n      if (event.keyCode === KeyCode.down) {\n        event.preventDefault();\n        onFocusDown?.(event);\n      }\n    }\n  };\n\n  const handleClick = (event: MouseEvent) => {\n    const target = event.currentTarget;\n    const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n    // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n    nativeInput?.focus();\n  };\n\n  const selector = isMultiSelection ? (\n    <InternalCheckbox\n      {...sharedProps}\n      onChange={onChange}\n      showOutline={focusedComponent === 'selection-control'}\n      controlId={controlId}\n      data-focus-id=\"selection-control\"\n      indeterminate={indeterminate}\n    />\n  ) : (\n    <RadioButton {...sharedProps} controlId={controlId} name={name} value={''} onSelect={onChange} />\n  );\n\n  return (\n    <>\n      <label\n        onKeyDown={handleKeyDown}\n        onKeyUp={setShiftState}\n        onMouseDown={onMouseDownHandler}\n        onMouseUp={setShiftState}\n        onClick={handleClick}\n        htmlFor={controlId}\n        className={clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top'])}\n        aria-label={ariaLabel}\n        title={ariaLabel}\n        {...(rowIndex !== undefined && !sharedProps.disabled\n          ? getAnalyticsMetadataAttribute({\n              detail: {\n                position: `${rowIndex + 1}`,\n                item: itemKey || '',\n              },\n            })\n          : {})}\n      >\n        {selector}\n      </label>\n      <span className={styles.stud} aria-hidden={true}>\n        &nbsp;\n      </span>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.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, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../internal/components/radio-button';\nimport { KeyCode } from '../../internal/keycode';\nimport { ItemSelectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface SelectionControlProps extends ItemSelectionProps {\n  onShiftToggle?(shiftPressed: boolean): void;\n  onFocusUp?: KeyboardEventHandler;\n  onFocusDown?: KeyboardEventHandler;\n  ariaLabel?: string;\n  tabIndex?: -1;\n  focusedComponent?: null | string;\n  rowIndex?: number;\n  itemKey?: string;\n  verticalAlign?: 'middle' | 'top';\n}\n\nexport function SelectionControl({\n  selectionType,\n  indeterminate = false,\n  onShiftToggle,\n  onFocusUp,\n  onFocusDown,\n  name,\n  ariaLabel,\n  ariaDescribedby,\n  focusedComponent,\n  rowIndex,\n  itemKey,\n  verticalAlign = 'middle',\n  onChange,\n  ...sharedProps\n}: SelectionControlProps) {\n  const controlId = useUniqueId();\n  const isMultiSelection = selectionType === 'multi';\n  const { navigationActive } = useSingleTabStopNavigation(null);\n\n  const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n    if (isMultiSelection) {\n      onShiftToggle?.(event.shiftKey);\n    }\n  };\n\n  const onMouseDownHandler = (event: MouseEvent) => {\n    setShiftState(event);\n    if (isMultiSelection) {\n      // To overcome an issue\n      // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n      event.preventDefault();\n    }\n  };\n\n  // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n  const handleKeyDown = (event: KeyboardEvent) => {\n    setShiftState(event);\n    if (isMultiSelection && !navigationActive) {\n      if (event.keyCode === KeyCode.up) {\n        event.preventDefault();\n        onFocusUp?.(event);\n      }\n      if (event.keyCode === KeyCode.down) {\n        event.preventDefault();\n        onFocusDown?.(event);\n      }\n    }\n  };\n\n  const handleClick = (event: MouseEvent) => {\n    const target = event.currentTarget;\n    const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n    // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n    nativeInput?.focus();\n  };\n\n  const nativeInputAttributes: Record<string, string> = {};\n  if (ariaLabel) {\n    nativeInputAttributes['aria-label'] = ariaLabel;\n  }\n  if (ariaDescribedby) {\n    nativeInputAttributes['aria-describedby'] = ariaDescribedby;\n  }\n\n  const selector = isMultiSelection ? (\n    <InternalCheckbox\n      {...sharedProps}\n      onChange={onChange}\n      showOutline={focusedComponent === 'selection-control'}\n      controlId={controlId}\n      data-focus-id=\"selection-control\"\n      indeterminate={indeterminate}\n      ariaLabel={ariaLabel}\n      ariaDescribedby={ariaDescribedby}\n    />\n  ) : (\n    <RadioButton\n      {...sharedProps}\n      controlId={controlId}\n      name={name}\n      value={''}\n      onSelect={onChange}\n      nativeInputAttributes={Object.keys(nativeInputAttributes).length > 0 ? nativeInputAttributes : undefined}\n    />\n  );\n\n  return (\n    <>\n      <label\n        onKeyDown={handleKeyDown}\n        onKeyUp={setShiftState}\n        onMouseDown={onMouseDownHandler}\n        onMouseUp={setShiftState}\n        onClick={handleClick}\n        htmlFor={controlId}\n        className={clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top'])}\n        aria-label={ariaLabel}\n        title={ariaLabel}\n        {...(rowIndex !== undefined && !sharedProps.disabled\n          ? getAnalyticsMetadataAttribute({\n              detail: {\n                position: `${rowIndex + 1}`,\n                item: itemKey || '',\n              },\n            })\n          : {})}\n      >\n        {selector}\n      </label>\n      <span className={styles.stud} aria-hidden={true}>\n        &nbsp;\n      </span>\n    </>\n  );\n}\n"]}