npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.839 → 3.0.841 - Mend

@cloudscape-design/components-themeable 3.0.839 → 3.0.841

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/lib/internal/template/breadcrumb-group/item/styles.scoped.css CHANGED Viewed

@@ -138,22 +138,22 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_link_1kosq_co5oc_141:not(#\9):after {
+.awsui_link_1kosq_idgry_141:not(#\9):after {
   display: none;
 }
-.awsui_breadcrumb_1kosq_co5oc_145:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_co5oc_146:not(#\9) {
+.awsui_breadcrumb_1kosq_idgry_145:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_idgry_146:not(#\9) {
   display: flex;
 }
-.awsui_breadcrumb_1kosq_co5oc_145 > .awsui_icon_1kosq_co5oc_149:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_icon_1kosq_co5oc_149:not(#\9) {
+.awsui_breadcrumb_1kosq_idgry_145 > .awsui_icon_1kosq_idgry_149:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_icon_1kosq_idgry_149:not(#\9) {
   margin-block: 0;
   margin-inline: var(--space-xs-6dgkww, 8px);
   color: var(--color-text-breadcrumb-icon-hqnw0m, #687078);
 }
-.awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9) {
+.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9) {
   min-inline-size: 0;
   overflow: hidden;
   text-underline-offset: 0.25em;
@@ -169,42 +169,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-kd6k1u, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9),
-  .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9) {
+  .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9),
+  .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9), .awsui-motion-disabled .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9), .awsui-mode-entering .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9) {
+.awsui-motion-disabled .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9), .awsui-motion-disabled .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9), .awsui-mode-entering .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9):hover,
-.awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9):hover {
+.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):hover,
+.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-jvu4dp, #0a4a74);
 }
-.awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9):focus,
-.awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9):focus {
+.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus,
+.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus {
   outline: none;
 }
-.awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9):active,
-.awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9):active {
+.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):active,
+.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):active {
   color: var(--color-text-link-hover-jvu4dp, #0a4a74);
 }
-.awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9):active, .awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9):focus, .awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9):hover, .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9):active, .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9):focus, .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9):hover {
+.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):active, .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus, .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):hover, .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):active, .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus, .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155 > .awsui_text_1kosq_co5oc_202:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155 > .awsui_text_1kosq_co5oc_202:not(#\9) {
+.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155 > .awsui_text_1kosq_idgry_202:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155 > .awsui_text_1kosq_idgry_202:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
 }
-body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_co5oc_145 > .awsui_anchor_1kosq_co5oc_155:not(#\9):focus,
-body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .awsui_anchor_1kosq_co5oc_155:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-bptw2p, 5px auto Highlight);
   outline-offset: 2px;
@@ -215,18 +215,14 @@ body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .a
   border-end-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-yrkso1, 0px) var(--color-border-item-focused-q68bgg, #0073bb);
 }
-.awsui_breadcrumb_1kosq_co5oc_145.awsui_last_1kosq_co5oc_221 > .awsui_icon_1kosq_co5oc_149:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_co5oc_146.awsui_last_1kosq_co5oc_221 > .awsui_icon_1kosq_co5oc_149:not(#\9) {
+.awsui_breadcrumb_1kosq_idgry_145.awsui_last_1kosq_idgry_221 > .awsui_icon_1kosq_idgry_149:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_idgry_146.awsui_last_1kosq_idgry_221 > .awsui_icon_1kosq_idgry_149:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb_1kosq_co5oc_145.awsui_last_1kosq_co5oc_221 > .awsui_anchor_1kosq_co5oc_155:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_co5oc_146.awsui_last_1kosq_co5oc_221 > .awsui_anchor_1kosq_co5oc_155:not(#\9) {
+.awsui_breadcrumb_1kosq_idgry_145.awsui_last_1kosq_idgry_221 > .awsui_anchor_1kosq_idgry_155:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_idgry_146.awsui_last_1kosq_idgry_221 > .awsui_anchor_1kosq_idgry_155:not(#\9) {
   color: var(--color-text-breadcrumb-current-e96tx0, #687078);
   font-weight: 700;
   text-decoration: none;
   cursor: default;
-}
-.awsui_text-hidden_1kosq_co5oc_233:not(#\9) {
-  display: none;
 }

package/lib/internal/template/breadcrumb-group/item/styles.selectors.js CHANGED Viewed

@@ -2,13 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "link": "awsui_link_1kosq_co5oc_141",
-  "breadcrumb": "awsui_breadcrumb_1kosq_co5oc_145",
-  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_co5oc_146",
-  "icon": "awsui_icon_1kosq_co5oc_149",
-  "anchor": "awsui_anchor_1kosq_co5oc_155",
-  "text": "awsui_text_1kosq_co5oc_202",
-  "last": "awsui_last_1kosq_co5oc_221",
-  "text-hidden": "awsui_text-hidden_1kosq_co5oc_233"
+  "link": "awsui_link_1kosq_idgry_141",
+  "breadcrumb": "awsui_breadcrumb_1kosq_idgry_145",
+  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_idgry_146",
+  "icon": "awsui_icon_1kosq_idgry_149",
+  "anchor": "awsui_anchor_1kosq_idgry_155",
+  "text": "awsui_text_1kosq_idgry_202",
+  "last": "awsui_last_1kosq_idgry_221"
 };

package/lib/internal/template/breadcrumb-group/skeleton.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-/// <reference types="react" />
-import { BreadcrumbGroupProps, InternalBreadcrumbGroupProps } from './interfaces';
-export declare function BreadcrumbGroupSkeleton<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({ items, }: InternalBreadcrumbGroupProps<T>): JSX.Element;
+import React from 'react';
+export declare const BreadcrumbGroupSkeleton: React.ForwardRefExoticComponent<import("./interfaces").BreadcrumbGroupProps<import("./interfaces").BreadcrumbGroupProps.Item> & import("../internal/hooks/use-base-component").InternalBaseComponentProps<any> & {
+    __injectAnalyticsComponentMetadata?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=skeleton.d.ts.map

package/lib/internal/template/breadcrumb-group/skeleton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":"~~;AAIA~~,OAAO,~~EAAE~~,~~oBAAoB,EAAE,4BAA4B,EAAE,~~MAAM,~~cAAc~~,CAAC;~~AAGlF~~,~~wBAAgB~~,uBAAuB,CAAC~~,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EACvG,KAAK,GACN,EAAE,4BAA4B,CAAC,CAAC,CAAC,eAMjC~~"}
1	+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,uBAAuB;;qCAMlC,CAAC"}

package/lib/internal/template/breadcrumb-group/skeleton.js CHANGED Viewed

@@ -2,11 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import { FunnelBreadcrumbItem } from './item/funnel';
-export function BreadcrumbGroupSkeleton({ items, }) {
-    const lastItem = items[items.length - 1];
-    if (!lastItem) {
-        return React.createElement(React.Fragment, null);
-    }
-    return React.createElement(FunnelBreadcrumbItem, { hidden: true, last: true, text: lastItem.text });
-}
+import styles from './styles.css.js';
+export const BreadcrumbGroupSkeleton = React.forwardRef(({ items }, ref) => (React.createElement("div", { ref: ref, className: styles['breadcrumbs-skeleton'] }, items.map((item, index) => (React.createElement(FunnelBreadcrumbItem, { itemIndex: index, totalCount: items.length, text: item.text, key: index }))))));
 //# sourceMappingURL=skeleton.js.map

package/lib/internal/template/breadcrumb-group/skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,~~UAAU~~,~~uBAAuB~~,~~CAAkE~~,~~EACvG~~,~~KAAK~~,~~GAC2B;IAChC,~~MAAM,~~QAAQ~~,GAAG,KAAK,CAAC,KAAK,CAAC,~~MAAM~~,GAAG,CAAC,CAAC,CAAC~~;IACzC~~,~~IAAI~~,CAAC,~~QAAQ~~,EAAE~~;QACb~~,~~OAAO~~,~~yCAAK~~,CAAC~~;KACd;IACD~~,~~OAAO~~,oBAAC,oBAAoB,IAAC,~~MAAM~~,EAAE,~~IAAI~~,EAAE,~~IAAI~~,EAAE,~~IAAI~~,EAAE,IAAI,EAAE,~~QAAQ~~,CAAC,IAAI,GAAI,CAAC~~;AACjF~~,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 { ~~BreadcrumbGroupProps,~~ InternalBreadcrumbGroupProps } from './interfaces';\nimport { FunnelBreadcrumbItem } from './item/funnel';\n\nexport ~~function~~ BreadcrumbGroupSkeleton<T ~~extends~~ ~~BreadcrumbGroupProps~~.~~Item~~ ~~= BreadcrumbGroupProps.Item~~>({\n items~~,\n~~}: ~~InternalBreadcrumbGroupProps<T>~~) {\n ~~const~~ ~~lastItem~~ = ~~items[items~~.~~length~~ - 1];\n if ~~(!lastItem~~) ~~{\n return~~ ~~<></>;\n }~~\n ~~return~~ <FunnelBreadcrumbItem ~~hidden~~={~~true~~} ~~last~~={~~true~~} text={~~lastItem~~.text} ~~/>;\~~n}\n"]}
1	+ {"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAA4C,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACrH,6BAAK,GAAG,EAAE,GAAgC,EAAE,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,IAClF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,oBAAoB,IAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAClG,CAAC,CACE,CACP,CAAC,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 { InternalBreadcrumbGroupProps } from './interfaces';\nimport { FunnelBreadcrumbItem } from './item/funnel';\n\nimport styles from './styles.css.js';\n\nexport const BreadcrumbGroupSkeleton = React.forwardRef<HTMLElement, InternalBreadcrumbGroupProps>(({ items }, ref) => (\n <div ref={ref as React.Ref<HTMLDivElement>} className={styles['breadcrumbs-skeleton']}>\n {items.map((item, index) => (\n <FunnelBreadcrumbItem itemIndex={index} totalCount={items.length} text={item.text} key={index} />\n ))}\n </div>\n));\n"]}

package/lib/internal/template/breadcrumb-group/styles.css.js CHANGED Viewed

@@ -1,14 +1,15 @@
     import './styles.scoped.css';
     export default {
-  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_1vilx_141",
-  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_1vilx_179",
-  "ghost": "awsui_ghost_d19fg_1vilx_190",
-  "item": "awsui_item_d19fg_1vilx_195",
-  "ghost-item": "awsui_ghost-item_d19fg_1vilx_196",
-  "ellipsis": "awsui_ellipsis_d19fg_1vilx_197",
-  "hide": "awsui_hide_d19fg_1vilx_204",
-  "visible": "awsui_visible_d19fg_1vilx_210",
-  "icon": "awsui_icon_d19fg_1vilx_214"
+  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_525rx_141",
+  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_525rx_179",
+  "ghost": "awsui_ghost_d19fg_525rx_190",
+  "item": "awsui_item_d19fg_525rx_195",
+  "ghost-item": "awsui_ghost-item_d19fg_525rx_196",
+  "ellipsis": "awsui_ellipsis_d19fg_525rx_197",
+  "hide": "awsui_hide_d19fg_525rx_204",
+  "visible": "awsui_visible_d19fg_525rx_210",
+  "icon": "awsui_icon_d19fg_525rx_214",
+  "breadcrumbs-skeleton": "awsui_breadcrumbs-skeleton_d19fg_525rx_220"
 };

package/lib/internal/template/breadcrumb-group/styles.scoped.css CHANGED Viewed

@@ -138,7 +138,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_breadcrumb-group_d19fg_1vilx_141:not(#\9) {
+.awsui_breadcrumb-group_d19fg_525rx_141:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -177,7 +177,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-xxs-y2432o, 4px);
   padding-inline: 0;
 }
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179:not(#\9) {
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179:not(#\9) {
   display: flex;
   align-items: center;
   padding-block: 0;
@@ -188,32 +188,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 100%;
   flex-wrap: nowrap;
 }
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179.awsui_ghost_d19fg_1vilx_190:not(#\9) {
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179.awsui_ghost_d19fg_525rx_190:not(#\9) {
   flex-wrap: wrap;
   position: absolute;
   inset-inline-start: -9000px;
 }
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179 > .awsui_item_d19fg_1vilx_195:not(#\9),
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179 > .awsui_ghost-item_d19fg_1vilx_196:not(#\9),
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179 > .awsui_ellipsis_d19fg_1vilx_197:not(#\9) {
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179 > .awsui_item_d19fg_525rx_195:not(#\9),
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179 > .awsui_ghost-item_d19fg_525rx_196:not(#\9),
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179 > .awsui_ellipsis_d19fg_525rx_197:not(#\9) {
   display: inline-block;
   padding-block: 0;
   padding-inline: 0;
   margin-block: 0;
   margin-inline: 0;
 }
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179 > .awsui_item_d19fg_1vilx_195.awsui_hide_d19fg_1vilx_204:not(#\9) {
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179 > .awsui_item_d19fg_525rx_195.awsui_hide_d19fg_525rx_204:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179 > .awsui_ellipsis_d19fg_1vilx_197:not(#\9) {
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179 > .awsui_ellipsis_d19fg_525rx_197:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179 > .awsui_ellipsis_d19fg_1vilx_197.awsui_visible_d19fg_1vilx_210:not(#\9) {
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179 > .awsui_ellipsis_d19fg_525rx_197.awsui_visible_d19fg_525rx_210:not(#\9) {
   display: flex;
   flex-shrink: 0;
 }
-.awsui_breadcrumb-group_d19fg_1vilx_141 > .awsui_breadcrumb-group-list_d19fg_1vilx_179 > .awsui_ellipsis_d19fg_1vilx_197 > .awsui_icon_d19fg_1vilx_214:not(#\9) {
+.awsui_breadcrumb-group_d19fg_525rx_141 > .awsui_breadcrumb-group-list_d19fg_525rx_179 > .awsui_ellipsis_d19fg_525rx_197 > .awsui_icon_d19fg_525rx_214:not(#\9) {
   margin-block: 0;
   margin-inline: 10px;
   color: var(--color-text-breadcrumb-icon-hqnw0m, #687078);
+}
+.awsui_breadcrumbs-skeleton_d19fg_525rx_220:not(#\9) {
+  display: none;
 }

package/lib/internal/template/breadcrumb-group/styles.selectors.js CHANGED Viewed

@@ -2,14 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_1vilx_141",
-  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_1vilx_179",
-  "ghost": "awsui_ghost_d19fg_1vilx_190",
-  "item": "awsui_item_d19fg_1vilx_195",
-  "ghost-item": "awsui_ghost-item_d19fg_1vilx_196",
-  "ellipsis": "awsui_ellipsis_d19fg_1vilx_197",
-  "hide": "awsui_hide_d19fg_1vilx_204",
-  "visible": "awsui_visible_d19fg_1vilx_210",
-  "icon": "awsui_icon_d19fg_1vilx_214"
+  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_525rx_141",
+  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_525rx_179",
+  "ghost": "awsui_ghost_d19fg_525rx_190",
+  "item": "awsui_item_d19fg_525rx_195",
+  "ghost-item": "awsui_ghost-item_d19fg_525rx_196",
+  "ellipsis": "awsui_ellipsis_d19fg_525rx_197",
+  "hide": "awsui_hide_d19fg_525rx_204",
+  "visible": "awsui_visible_d19fg_525rx_210",
+  "icon": "awsui_icon_d19fg_525rx_214",
+  "breadcrumbs-skeleton": "awsui_breadcrumbs-skeleton_d19fg_525rx_220"
 };

package/lib/internal/template/button-group/icon-toggle-button-item.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ButtonProps } from '../button/interfaces.js';
+import { CancelableEventHandler } from '../internal/events/index.js';
+import { ButtonGroupProps } from './interfaces.js';
+declare const IconToggleButtonItem: React.ForwardRefExoticComponent<{
+    item: ButtonGroupProps.IconToggleButton;
+    showTooltip: boolean;
+    showFeedback: boolean;
+    onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;
+} & React.RefAttributes<ButtonProps.Ref>>;
+export default IconToggleButtonItem;
+//# sourceMappingURL=icon-toggle-button-item.d.ts.map

package/lib/internal/template/button-group/icon-toggle-button-item.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icon-toggle-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-toggle-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAuB,MAAM,6BAA6B,CAAC;AAG1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,QAAA,MAAM,oBAAoB;UAQd,iBAAiB,gBAAgB;iBAC1B,OAAO;kBACN,OAAO;;yCAwD1B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/internal/template/button-group/icon-toggle-button-item.js ADDED Viewed

@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import Tooltip from '../internal/components/tooltip/index.js';
+import { fireCancelableEvent } from '../internal/events/index.js';
+import InternalLiveRegion from '../live-region/internal.js';
+import { InternalToggleButton } from '../toggle-button/internal.js';
+import testUtilStyles from './test-classes/styles.css.js';
+const IconToggleButtonItem = forwardRef(({ item, showTooltip, showFeedback, onItemClick, }, ref) => {
+    var _a;
+    const containerRef = React.useRef(null);
+    const hasIcon = item.iconName || item.iconUrl || item.iconSvg;
+    const hasPressedIcon = item.pressedIconName || item.pressedIconUrl || item.pressedIconSvg;
+    if (!hasIcon) {
+        warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);
+    }
+    if (!hasPressedIcon) {
+        warnOnce('ButtonGroup', `Missing pressed icon for item with id: ${item.id}`);
+    }
+    const feedbackContent = item.pressed ? (_a = item.pressedPopoverFeedback) !== null && _a !== void 0 ? _a : item.popoverFeedback : item.popoverFeedback;
+    const canShowTooltip = showTooltip && !item.disabled && !item.loading;
+    const canShowFeedback = showTooltip && showFeedback && feedbackContent;
+    return (React.createElement("div", { ref: containerRef },
+        React.createElement(InternalToggleButton, { variant: "icon", pressed: item.pressed, loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, pressedIconName: hasIcon ? item.pressedIconName : 'close', pressedIconUrl: item.pressedIconUrl, pressedIconSvg: item.pressedIconUrl, ariaLabel: item.text, onChange: event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed }), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
+        (canShowTooltip || canShowFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, feedbackContent)) || item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) }))));
+});
+export default IconToggleButtonItem;
+//# sourceMappingURL=icon-toggle-button-item.js.map

package/lib/internal/template/button-group/icon-toggle-button-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icon-toggle-button-item.js","sourceRoot":"","sources":["../../../src/button-group/icon-toggle-button-item.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, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';\nimport InternalLiveRegion from '../live-region/internal.js';\nimport { InternalToggleButton } from '../toggle-button/internal.js';\nimport { ButtonGroupProps } from './interfaces.js';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\nconst IconToggleButtonItem = forwardRef(\n (\n {\n item,\n showTooltip,\n showFeedback,\n onItemClick,\n }: {\n item: ButtonGroupProps.IconToggleButton;\n showTooltip: boolean;\n showFeedback: boolean;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n },\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const hasIcon = item.iconName || item.iconUrl || item.iconSvg;\n const hasPressedIcon = item.pressedIconName || item.pressedIconUrl || item.pressedIconSvg;\n\n if (!hasIcon) {\n warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);\n }\n if (!hasPressedIcon) {\n warnOnce('ButtonGroup', `Missing pressed icon for item with id: ${item.id}`);\n }\n\n const feedbackContent = item.pressed ? item.pressedPopoverFeedback ?? item.popoverFeedback : item.popoverFeedback;\n const canShowTooltip = showTooltip && !item.disabled && !item.loading;\n const canShowFeedback = showTooltip && showFeedback && feedbackContent;\n return (\n <div ref={containerRef}>\n <InternalToggleButton\n variant=\"icon\"\n pressed={item.pressed}\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n iconName={hasIcon ? item.iconName : 'close'}\n iconUrl={item.iconUrl}\n iconSvg={item.iconSvg}\n pressedIconName={hasIcon ? item.pressedIconName : 'close'}\n pressedIconUrl={item.pressedIconUrl}\n pressedIconSvg={item.pressedIconUrl}\n ariaLabel={item.text}\n onChange={event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed })}\n ref={ref}\n data-testid={item.id}\n data-itemid={item.id}\n className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}\n __title=\"\"\n >\n {item.text}\n </InternalToggleButton>\n {(canShowTooltip || canShowFeedback) && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={\n (showFeedback && <InternalLiveRegion tagName=\"span\">{feedbackContent}</InternalLiveRegion>) || item.text\n }\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n />\n )}\n </div>\n );\n }\n);\n\nexport default IconToggleButtonItem;\n"]}

package/lib/internal/template/button-group/interfaces.d.ts CHANGED Viewed

@@ -35,15 +35,32 @@ export interface ButtonGroupProps extends BaseComponentProps {
      * ### icon-button
      *
      * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.
-     * * `text` (string) - The name shown as a tooltip or menu text for this button.
-     * * `disabled` (optional, boolean) - The disabled state indication for the button.
-     * * `loading` (optional, boolean) - The loading state indication for the button.
+     * * `text` (string) - The name shown as a tooltip for this button.
+     * * `disabled` (optional, boolean) - The disabled state indication for this button.
+     * * `loading` (optional, boolean) - The loading state indication for this button.
      * * `loadingText` (optional, string) - The loading text announced to screen readers.
      * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).
      * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.
      * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.
      * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).
-     * * `popoverFeedback` (optional, string) - Text that appears when the user clicks the button. Use to provide feedback to the user.
+     * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.
+     *
+     * ### icon-toggle-button
+     *
+     * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.
+     * * `pressed` (boolean) - The toggle button pressed state.
+     * * `text` (string) - The name shown as a tooltip for this button.
+     * * `disabled` (optional, boolean) - The disabled state indication for this button.
+     * * `loading` (optional, boolean) - The loading state indication for this button.
+     * * `loadingText` (optional, string) - The loading text announced to screen readers.
+     * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).
+     * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.
+     * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).
+     * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).
+     * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.
+     * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).
+     * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.
+     * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.
      *
      * ### menu-dropdown
      *
@@ -54,7 +71,7 @@ export interface ButtonGroupProps extends BaseComponentProps {
      * * `loadingText` (optional, string) - The loading text announced to screen readers.
      * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.
      *
-     * group
+     * ### group
      *
      * * `text` (string) - The name of the group rendered as ARIA label for this group.
      * * `items` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.
@@ -70,7 +87,7 @@ export interface InternalButtonGroupProps extends ButtonGroupProps, InternalBase
 export declare namespace ButtonGroupProps {
     type Variant = 'icon';
     type ItemOrGroup = Item | Group;
-    type Item = IconButton | MenuDropdown;
+    type Item = IconButton | IconToggleButton | MenuDropdown;
     interface IconButton {
         type: 'icon-button';
         id: string;
@@ -84,6 +101,23 @@ export declare namespace ButtonGroupProps {
         iconSvg?: React.ReactNode;
         popoverFeedback?: React.ReactNode;
     }
+    interface IconToggleButton {
+        type: 'icon-toggle-button';
+        id: string;
+        text: string;
+        pressed: boolean;
+        disabled?: boolean;
+        loading?: boolean;
+        loadingText?: string;
+        iconName?: IconProps.Name;
+        iconUrl?: string;
+        iconSvg?: React.ReactNode;
+        pressedIconName?: IconProps.Name;
+        pressedIconUrl?: string;
+        pressedIconSvg?: React.ReactNode;
+        popoverFeedback?: React.ReactNode;
+        pressedPopoverFeedback?: React.ReactNode;
+    }
     interface MenuDropdown {
         type: 'menu-dropdown';
         id: string;
@@ -100,6 +134,8 @@ export declare namespace ButtonGroupProps {
     }
     interface ItemClickDetails {
         id: string;
+        pressed?: boolean;
+        checked?: boolean;
     }
     interface Ref {
         /**

package/lib/internal/template/button-group/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAClC;;;;;;;;;;;;OAYG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG~~;IACH,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB,EAAE,0BAA0B;CAAG;AAEjG,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,OAAO,GAAG,MAAM,CAAC;IAE7B,KAAY,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC;IACvC,KAAY,IAAI,GAAG,UAAU,GAAG,YAAY,CAAC;~~IAE7C~~,UAAiB,UAAU;QACzB,IAAI,EAAE,aAAa,CAAC;QACpB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACnC;IAED,UAAiB,YAAY;QAC3B,IAAI,EAAE,eAAe,CAAC;QACtB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;KACvD;IAED,UAAiB,KAAK;QACpB,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KAC7C;IAED,UAAiB,gBAAgB;QAC/B,EAAE,EAAE,MAAM,CAAC;~~KACZ~~;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;KAC7B;CACF"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/button-group/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/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\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n /*\n Adds `aria-label` to the button group toolbar element.\n * Use this to provide a unique accessible name for each button group on the page.\n /\n ariaLabel?: string;\n /\n Determines the general styling of the button dropdown.\n * * `icon` for icon buttons.\n /\n variant: ButtonGroupProps.Variant;\n /\n Use this property to determine dropdown placement strategy for all menu dropdown items.\n \n By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n * [React Portals](https://reactjs.org/docs/portals.html).\n \n Set this property if the dropdown would otherwise be constrained by a scrollable container,\n * for example inside table and split view layouts.\n \n We recommend you use discretion, and don't enable this property unless necessary\n * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n /\n dropdownExpandToViewport?: boolean;\n /\n Array of objects with a number of supported types.\n \n ### icon-button\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n * * `text` (string) - The name shown as a tooltip ~~or menu text~~ for this button.\n * * `disabled` (optional, boolean) - The disabled state indication for ~~the~~ button.\n * * `loading` (optional, boolean) - The loading state indication for ~~the~~ button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `popoverFeedback` (optional, string) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n \n ### menu-dropdown\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n * * `text` (string) - The name of the menu button shown as a tooltip.\n * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n * * `loading` (optional, boolean) - The loading state indication for the menu button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n \n group\n \n * `text` (string) - The name of the group rendered as ARIA label for this group.\n * * `items` ((ButtonGroupProps.IconButton \| ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n /\n items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\n /\n Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n /\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n}\n\nexport interface InternalButtonGroupProps extends ButtonGroupProps, InternalBaseComponentProps {}\n\nexport namespace ButtonGroupProps {\n export type Variant = 'icon';\n\n export type ItemOrGroup = Item \| Group;\n export type Item = IconButton \| MenuDropdown;\n\n export interface IconButton {\n type: 'icon-button';\n id: string;\n text: string;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n iconName?: IconProps.Name;\n iconAlt?: string;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n popoverFeedback?: React.ReactNode;\n }\n\n export interface MenuDropdown {\n type: 'menu-dropdown';\n id: string;\n text: string;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n }\n\n export interface Group {\n type: 'group';\n text: string;\n items: ReadonlyArray<ButtonGroupProps.Item>;\n }\n\n export interface ItemClickDetails {\n id: string;\n }\n\n export interface Ref {\n /\n Focuses button group item by id.\n */\n focus(itemId: string): void;\n }\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/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\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n /*\n Adds `aria-label` to the button group toolbar element.\n * Use this to provide a unique accessible name for each button group on the page.\n /\n ariaLabel?: string;\n /\n Determines the general styling of the button dropdown.\n * * `icon` for icon buttons.\n /\n variant: ButtonGroupProps.Variant;\n /\n Use this property to determine dropdown placement strategy for all menu dropdown items.\n \n By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n * [React Portals](https://reactjs.org/docs/portals.html).\n \n Set this property if the dropdown would otherwise be constrained by a scrollable container,\n * for example inside table and split view layouts.\n \n We recommend you use discretion, and don't enable this property unless necessary\n * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n /\n dropdownExpandToViewport?: boolean;\n /\n Array of objects with a number of supported types.\n \n ### icon-button\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n * * `text` (string) - The name shown as a tooltip for this button.\n * * `disabled` (optional, boolean) - The disabled state indication for this button.\n * * `loading` (optional, boolean) - The loading state indication for this button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n \n ### icon-toggle-button\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n * * `pressed` (boolean) - The toggle button pressed state.\n * * `text` (string) - The name shown as a tooltip for this button.\n * * `disabled` (optional, boolean) - The disabled state indication for this button.\n * * `loading` (optional, boolean) - The loading state indication for this button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n \n ### menu-dropdown\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n * * `text` (string) - The name of the menu button shown as a tooltip.\n * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n * * `loading` (optional, boolean) - The loading state indication for the menu button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n \n ### group\n \n * `text` (string) - The name of the group rendered as ARIA label for this group.\n * * `items` ((ButtonGroupProps.IconButton \| ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n /\n items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\n /\n Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n /\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n}\n\nexport interface InternalButtonGroupProps extends ButtonGroupProps, InternalBaseComponentProps {}\n\nexport namespace ButtonGroupProps {\n export type Variant = 'icon';\n\n export type ItemOrGroup = Item \| Group;\n export type Item = IconButton \| IconToggleButton \| MenuDropdown;\n\n export interface IconButton {\n type: 'icon-button';\n id: string;\n text: string;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n iconName?: IconProps.Name;\n iconAlt?: string;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n popoverFeedback?: React.ReactNode;\n }\n\n export interface IconToggleButton {\n type: 'icon-toggle-button';\n id: string;\n text: string;\n pressed: boolean;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n pressedIconName?: IconProps.Name;\n pressedIconUrl?: string;\n pressedIconSvg?: React.ReactNode;\n popoverFeedback?: React.ReactNode;\n pressedPopoverFeedback?: React.ReactNode;\n }\n\n export interface MenuDropdown {\n type: 'menu-dropdown';\n id: string;\n text: string;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n }\n\n export interface Group {\n type: 'group';\n text: string;\n items: ReadonlyArray<ButtonGroupProps.Item>;\n }\n\n export interface ItemClickDetails {\n id: string;\n pressed?: boolean;\n checked?: boolean;\n }\n\n export interface Ref {\n /\n Focuses button group item by id.\n */\n focus(itemId: string): void;\n }\n}\n"]}

package/lib/internal/template/button-group/item-element.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item-element.d.ts","sourceRoot":"","sources":["../../../src/button-group/item-element.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAuB,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;~~AAGpF~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,UAAU,gBAAgB;IACxB,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,OAAO,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACpD,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E,WAAW,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CACxF;AAED,QAAA,MAAM,WAAW,~~0FA4GhB~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"item-element.d.ts","sourceRoot":"","sources":["../../../src/button-group/item-element.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAuB,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAIpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,UAAU,gBAAgB;IACxB,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,OAAO,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACpD,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E,WAAW,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CACxF;AAED,QAAA,MAAM,WAAW,0FAqHhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/internal/template/button-group/item-element.js CHANGED Viewed

@@ -4,6 +4,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react
 import { fireCancelableEvent } from '../internal/events';
 import { nodeBelongs } from '../internal/utils/node-belongs';
 import IconButtonItem from './icon-button-item';
+import IconToggleButtonItem from './icon-toggle-button-item.js';
 import MenuDropdownItem from './menu-dropdown-item';
 import styles from './styles.css.js';
 const ItemElement = forwardRef(({ item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }, ref) => {
@@ -68,6 +69,7 @@ const ItemElement = forwardRef(({ item, dropdownExpandToViewport, tooltip, setTo
             onShowTooltipHard(true);
         }, onBlur: () => onShowTooltipHard(false) },
         item.type === 'icon-button' && (React.createElement(IconButtonItem, { ref: buttonRef, item: item, onItemClick: onClickHandler, showTooltip: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) === item.id, showFeedback: !!(tooltip === null || tooltip === void 0 ? void 0 : tooltip.feedback) })),
+        item.type === 'icon-toggle-button' && (React.createElement(IconToggleButtonItem, { ref: buttonRef, item: item, onItemClick: onClickHandler, showTooltip: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) === item.id, showFeedback: !!(tooltip === null || tooltip === void 0 ? void 0 : tooltip.feedback) })),
         item.type === 'menu-dropdown' && (React.createElement(MenuDropdownItem, { ref: buttonRef, item: item, showTooltip: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) === item.id, onItemClick: onClickHandler, expandToViewport: dropdownExpandToViewport }))));
 });
 export default ItemElement;

package/lib/internal/template/button-group/item-element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item-element.js","sourceRoot":"","sources":["../../../src/button-group/item-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAA6B,MAAM,oBAAoB,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,cAAc,MAAM,oBAAoB,CAAC;~~AAEhD~~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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { fireCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport IconButtonItem from './icon-button-item';\nimport { ButtonGroupProps } from './interfaces';\nimport MenuDropdownItem from './menu-dropdown-item';\n\nimport styles from './styles.css.js';\n\ninterface ItemElementProps {\n item: ButtonGroupProps.Item;\n dropdownExpandToViewport?: boolean;\n tooltip: null \| { item: string; feedback: boolean };\n setTooltip: (tooltip: null \| { item: string; feedback: boolean }) => void;\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> \| undefined;\n}\n\nconst ItemElement = forwardRef(\n (\n { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }: ItemElementProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n useImperativeHandle(ref, () => ({\n focus: () => {\n buttonRef.current?.focus();\n },\n }));\n\n useEffect(() => {\n if (tooltip?.item !== item.id) {\n return;\n }\n\n const close = () => {\n setTooltip(null);\n };\n\n const handlePointerDownEvent = (event: PointerEvent) => {\n if (event.target && containerRef.current?.contains(event.target as HTMLElement)) {\n return;\n }\n\n close();\n };\n\n const handleKeyDownEvent = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n close();\n }\n };\n\n window.addEventListener('pointerdown', handlePointerDownEvent);\n window.addEventListener('keydown', handleKeyDownEvent);\n\n return () => {\n window.removeEventListener('pointerdown', handlePointerDownEvent);\n window.removeEventListener('keydown', handleKeyDownEvent);\n };\n }, [item.id, tooltip, setTooltip]);\n\n const onShowTooltipSoft = (show: boolean) => {\n if (!tooltip?.feedback) {\n setTooltip(show ? { item: item.id, feedback: false } : null);\n }\n };\n\n const onShowTooltipHard = (show: boolean) => {\n if (!show && item.id !== tooltip?.item) {\n return;\n }\n\n setTooltip(show ? { item: item.id, feedback: false } : null);\n };\n\n const onClickHandler = (event: CustomEvent<ButtonGroupProps.ItemClickDetails>) => {\n const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n if (hasPopoverFeedback) {\n setTooltip({ item: item.id, feedback: true });\n }\n\n fireCancelableEvent(onItemClick, event.detail, event);\n };\n\n return (\n <div\n key={item.id}\n className={styles['item-wrapper']}\n ref={containerRef}\n onPointerEnter={() => onShowTooltipSoft(true)}\n onPointerLeave={() => onShowTooltipSoft(false)}\n onFocus={event => {\n // Showing no tooltip when the focus comes from inside the container.\n // This is needed to prevent the tooltip after a menu closes with item selection or Escape.\n if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {\n return;\n }\n onShowTooltipHard(true);\n }}\n onBlur={() => onShowTooltipHard(false)}\n >\n {item.type === 'icon-button' && (\n <IconButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n />\n )}\n {item.type === 'menu-dropdown' && (\n <MenuDropdownItem\n ref={buttonRef}\n item={item}\n showTooltip={tooltip?.item === item.id}\n onItemClick={onClickHandler}\n expandToViewport={dropdownExpandToViewport}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ItemElement;\n"]}
1	+ {"version":3,"file":"item-element.js","sourceRoot":"","sources":["../../../src/button-group/item-element.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { fireCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport IconButtonItem from './icon-button-item';\nimport IconToggleButtonItem from './icon-toggle-button-item.js';\nimport { ButtonGroupProps } from './interfaces';\nimport MenuDropdownItem from './menu-dropdown-item';\n\nimport styles from './styles.css.js';\n\ninterface ItemElementProps {\n item: ButtonGroupProps.Item;\n dropdownExpandToViewport?: boolean;\n tooltip: null \| { item: string; feedback: boolean };\n setTooltip: (tooltip: null \| { item: string; feedback: boolean }) => void;\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> \| undefined;\n}\n\nconst ItemElement = forwardRef(\n (\n { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }: ItemElementProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n useImperativeHandle(ref, () => ({\n focus: () => {\n buttonRef.current?.focus();\n },\n }));\n\n useEffect(() => {\n if (tooltip?.item !== item.id) {\n return;\n }\n\n const close = () => {\n setTooltip(null);\n };\n\n const handlePointerDownEvent = (event: PointerEvent) => {\n if (event.target && containerRef.current?.contains(event.target as HTMLElement)) {\n return;\n }\n\n close();\n };\n\n const handleKeyDownEvent = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n close();\n }\n };\n\n window.addEventListener('pointerdown', handlePointerDownEvent);\n window.addEventListener('keydown', handleKeyDownEvent);\n\n return () => {\n window.removeEventListener('pointerdown', handlePointerDownEvent);\n window.removeEventListener('keydown', handleKeyDownEvent);\n };\n }, [item.id, tooltip, setTooltip]);\n\n const onShowTooltipSoft = (show: boolean) => {\n if (!tooltip?.feedback) {\n setTooltip(show ? { item: item.id, feedback: false } : null);\n }\n };\n\n const onShowTooltipHard = (show: boolean) => {\n if (!show && item.id !== tooltip?.item) {\n return;\n }\n\n setTooltip(show ? { item: item.id, feedback: false } : null);\n };\n\n const onClickHandler = (event: CustomEvent<ButtonGroupProps.ItemClickDetails>) => {\n const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n if (hasPopoverFeedback) {\n setTooltip({ item: item.id, feedback: true });\n }\n\n fireCancelableEvent(onItemClick, event.detail, event);\n };\n\n return (\n <div\n key={item.id}\n className={styles['item-wrapper']}\n ref={containerRef}\n onPointerEnter={() => onShowTooltipSoft(true)}\n onPointerLeave={() => onShowTooltipSoft(false)}\n onFocus={event => {\n // Showing no tooltip when the focus comes from inside the container.\n // This is needed to prevent the tooltip after a menu closes with item selection or Escape.\n if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {\n return;\n }\n onShowTooltipHard(true);\n }}\n onBlur={() => onShowTooltipHard(false)}\n >\n {item.type === 'icon-button' && (\n <IconButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n />\n )}\n {item.type === 'icon-toggle-button' && (\n <IconToggleButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n />\n )}\n {item.type === 'menu-dropdown' && (\n <MenuDropdownItem\n ref={buttonRef}\n item={item}\n showTooltip={tooltip?.item === item.id}\n onItemClick={onClickHandler}\n expandToViewport={dropdownExpandToViewport}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ItemElement;\n"]}

package/lib/internal/template/button-group/menu-dropdown-item.js CHANGED Viewed

@@ -10,7 +10,7 @@ import testUtilStyles from './test-classes/styles.css.js';
 const MenuDropdownItem = React.forwardRef(({ item, showTooltip, onItemClick, expandToViewport }, ref) => {
     const containerRef = React.useRef(null);
     const onClickHandler = (event) => {
-        fireCancelableEvent(onItemClick, { id: event.detail.id }, event);
+        fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);
     };
     return (React.createElement(ButtonDropdown, { ref: ref, variant: "icon", items: item.items, onItemClick: onClickHandler, expandToViewport: expandToViewport, ariaLabel: item.text, className: testUtilStyles['button-group-item'], "data-testid": item.id, customTriggerBuilder: ({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement("div", { ref: containerRef },
             !isOpen && showTooltip && !item.disabled && !item.loading && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) })),

package/lib/internal/template/button-group/menu-dropdown-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAS1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAyB,EAC3E,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;~~IACnE~~,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,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 InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n item: ButtonGroupProps.MenuDropdown;\n showTooltip: boolean;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n (\n { item, showTooltip, onItemClick, expandToViewport }: MenuDropdownItemProps,\n ref: React.Ref<ButtonDropdownProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n fireCancelableEvent(onItemClick, { id: event.detail.id }, event);\n };\n\n return (\n <ButtonDropdown\n ref={ref}\n variant=\"icon\"\n items={item.items}\n onItemClick={onClickHandler}\n expandToViewport={expandToViewport}\n ariaLabel={item.text}\n className={testUtilStyles['button-group-item']}\n data-testid={item.id}\n customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <div ref={containerRef}>\n {!isOpen && showTooltip && !item.disabled && !item.loading && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={item.text}\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n />\n )}\n <InternalButton\n ref={triggerRef}\n variant=\"icon\"\n ariaLabel={ariaLabel}\n data-itemid={item.id}\n ariaExpanded={ariaExpanded}\n className={clsx(testUtilStyles.item, testUtilsClass)}\n iconName=\"ellipsis\"\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n onClick={onClick}\n __title=\"\"\n />\n </div>\n )}\n />\n );\n }\n);\n\nexport default MenuDropdownItem;\n"]}
1	+ {"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAS1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAyB,EAC3E,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAClG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,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 InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n item: ButtonGroupProps.MenuDropdown;\n showTooltip: boolean;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n (\n { item, showTooltip, onItemClick, expandToViewport }: MenuDropdownItemProps,\n ref: React.Ref<ButtonDropdownProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);\n };\n\n return (\n <ButtonDropdown\n ref={ref}\n variant=\"icon\"\n items={item.items}\n onItemClick={onClickHandler}\n expandToViewport={expandToViewport}\n ariaLabel={item.text}\n className={testUtilStyles['button-group-item']}\n data-testid={item.id}\n customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <div ref={containerRef}>\n {!isOpen && showTooltip && !item.disabled && !item.loading && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={item.text}\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n />\n )}\n <InternalButton\n ref={triggerRef}\n variant=\"icon\"\n ariaLabel={ariaLabel}\n data-itemid={item.id}\n ariaExpanded={ariaExpanded}\n className={clsx(testUtilStyles.item, testUtilsClass)}\n iconName=\"ellipsis\"\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n onClick={onClick}\n __title=\"\"\n />\n </div>\n )}\n />\n );\n }\n);\n\nexport default MenuDropdownItem;\n"]}