@cloudscape-design/components 3.0.680 → 3.0.682

package/key-value-pairs/styles.scoped.css

@@ -0,0 +1,210 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* 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 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_key-value-pairs_1y9fy_s6ox4_97:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  font-size: var(--font-size-body-m-x4okxb, 14px);
+  line-height: var(--line-height-body-m-30ar75, 20px);
+  color: var(--color-text-body-default-at06ol, #000716);
+  font-weight: 400;
+  font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.awsui_group-title_1y9fy_s6ox4_132:not(#\9) {
+  padding-block-end: var(--space-scaled-m-mo5yse, 16px);
+}
+
+.awsui_group-list_1y9fy_s6ox4_136:not(#\9) {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--space-scaled-m-mo5yse, 16px);
+}
+
+.awsui_group-list-item_1y9fy_s6ox4_146:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_term_1y9fy_s6ox4_150:not(#\9) {
+  font-size: var(--font-size-body-m-x4okxb, 14px);
+  line-height: var(--line-height-body-m-30ar75, 20px);
+  font-weight: var(--font-display-label-weight-815ja9, 700);
+  color: var(--color-text-label-rj4jdv, #000716);
+  margin-block-end: var(--space-key-value-gap-0517k5, 0px);
+}
+
+.awsui_key-label_1y9fy_s6ox4_158:not(#\9) {
+  margin-inline-end: var(--space-xs-zb16t3, 8px);
+}
+.awsui_key-label_1y9fy_s6ox4_158:not(#\9):only-child {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.awsui_detail_1y9fy_s6ox4_166:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  font-size: var(--font-size-body-m-x4okxb, 14px);
+  line-height: var(--line-height-body-m-30ar75, 20px);
+  color: var(--color-text-body-default-at06ol, #000716);
+  font-weight: 400;
+  font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  margin-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.awsui_info_1y9fy_s6ox4_204:not(#\9) {
+  display: inline-flex;
+  padding-inline-start: var(--space-xs-zb16t3, 8px);
+  border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
+}

package/key-value-pairs/styles.selectors.js

@@ -0,0 +1,14 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "key-value-pairs": "awsui_key-value-pairs_1y9fy_s6ox4_97",
+  "group-title": "awsui_group-title_1y9fy_s6ox4_132",
+  "group-list": "awsui_group-list_1y9fy_s6ox4_136",
+  "group-list-item": "awsui_group-list-item_1y9fy_s6ox4_146",
+  "term": "awsui_term_1y9fy_s6ox4_150",
+  "key-label": "awsui_key-label_1y9fy_s6ox4_158",
+  "detail": "awsui_detail_1y9fy_s6ox4_166",
+  "info": "awsui_info_1y9fy_s6ox4_204"
+};
+  

package/package.json

@@ -49,6 +49,7 @@
     "./hotspot": "./hotspot/index.js",
     "./icon": "./icon/index.js",
     "./input": "./input/index.js",
+    "./key-value-pairs": "./key-value-pairs/index.js",
     "./line-chart": "./line-chart/index.js",
     "./link": "./link/index.js",
     "./mixed-line-bar-chart": "./mixed-line-bar-chart/index.js",
@@ -120,7 +121,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.680",
+  "version": "3.0.682",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/segmented-control/interfaces.d.ts

@@ -12,6 +12,7 @@ export interface SegmentedControlProps extends BaseComponentProps {
      *
      * - `id` (string) - The ID of the segment.
      * - `disabled` [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.
+     * - `disabledReason` (string) - (Optional) Displays tooltip near the segment when disabled. Use to provide additional context.
      * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).
      * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`, or `iconName` without `text`.
      *            This is required when you use an icon without `text`.
@@ -39,6 +40,7 @@ export declare namespace SegmentedControlProps {
     interface Option {
         id: string;
         disabled?: boolean;
+        disabledReason?: string;
         iconName?: IconProps.Name;
         iconAlt?: string;
         iconUrl?: string;

package/segmented-control/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAEtD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;CAC1E;AAED,yBAAiB,qBAAqB,CAAC;IACrC,UAAiB,MAAM;QACrB,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,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,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAEtD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;CAC1E;AAED,yBAAiB,qBAAqB,CAAC;IACrC,UAAiB,MAAM;QACrB,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,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,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/segmented-control/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport React from 'react';\n\nexport interface SegmentedControlProps extends BaseComponentProps {\n  /**\n   * ID of the selected option. If you want to clear the selection, use `null`.\n   */\n  selectedId: string | null;\n\n  /**\n   * An array of objects representing options. Each segment has the following properties:\n   *\n   * - `id` (string) - The ID of the segment.\n   * - `disabled` [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.\n   * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`, or `iconName` without `text`.\n   *            This is required when you use an icon without `text`.\n   * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * - `text` (string) - (Optional) Specifies the text of the segment.\n   */\n  options?: ReadonlyArray<SegmentedControlProps.Option>;\n\n  /**\n   * Defines the label of the entire segmented control. In the standard view (that is, all individual segments are visible),\n   * this label is used as `aria-label` on the group of segments. In a narrow container, where this component is displayed as a select component,\n   * the label is visible and attached to the select component, unless `ariaLabelledBy` is defined. Don't use `label` and `ariaLabelledBy` at the same time.\n   */\n  label?: string;\n\n  /**\n   * Adds aria-labelledby to the component. Create a visually hidden element with an ID and set this property to that ID. If you don't want the label to be visible in narrow containers, use this property instead of `label`.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Called when the user selects a different segment.\n   */\n  onChange?: NonCancelableEventHandler<SegmentedControlProps.ChangeDetail>;\n}\n\nexport namespace SegmentedControlProps {\n  export interface Option {\n    id: string;\n    disabled?: boolean;\n    iconName?: IconProps.Name;\n    iconAlt?: string;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    text?: string;\n  }\n\n  export interface ChangeDetail {\n    selectedId: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport React from 'react';\n\nexport interface SegmentedControlProps extends BaseComponentProps {\n  /**\n   * ID of the selected option. If you want to clear the selection, use `null`.\n   */\n  selectedId: string | null;\n\n  /**\n   * An array of objects representing options. Each segment has the following properties:\n   *\n   * - `id` (string) - The ID of the segment.\n   * - `disabled` [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the segment when disabled. Use to provide additional context.\n   * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`, or `iconName` without `text`.\n   *            This is required when you use an icon without `text`.\n   * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * - `text` (string) - (Optional) Specifies the text of the segment.\n   */\n  options?: ReadonlyArray<SegmentedControlProps.Option>;\n\n  /**\n   * Defines the label of the entire segmented control. In the standard view (that is, all individual segments are visible),\n   * this label is used as `aria-label` on the group of segments. In a narrow container, where this component is displayed as a select component,\n   * the label is visible and attached to the select component, unless `ariaLabelledBy` is defined. Don't use `label` and `ariaLabelledBy` at the same time.\n   */\n  label?: string;\n\n  /**\n   * Adds aria-labelledby to the component. Create a visually hidden element with an ID and set this property to that ID. If you don't want the label to be visible in narrow containers, use this property instead of `label`.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Called when the user selects a different segment.\n   */\n  onChange?: NonCancelableEventHandler<SegmentedControlProps.ChangeDetail>;\n}\n\nexport namespace SegmentedControlProps {\n  export interface Option {\n    id: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    iconName?: IconProps.Name;\n    iconAlt?: string;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    text?: string;\n  }\n\n  export interface ChangeDetail {\n    selectedId: string;\n  }\n}\n"]}

package/segmented-control/internal-segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB,eAqEvB"}
+{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB,eA4EvB"}

package/segmented-control/internal-segmented-control.js

@@ -13,7 +13,7 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
         return option.id === selectedId;
     });
     const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;
-    const enabledSegments = (options || []).filter(option => !option.disabled);
+    const focusableSegments = (options || []).filter(option => !option.disabled || (option.disabled && !!option.disabledReason));
     const moveHighlight = (event, activeIndex) => {
         var _a;
         if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {
@@ -21,21 +21,21 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
         }
         let nextIndex = activeIndex;
         handleKey(event, {
-            onInlineStart: () => (nextIndex = activeIndex === 0 ? enabledSegments.length - 1 : activeIndex - 1),
-            onInlineEnd: () => (nextIndex = activeIndex + 1 === enabledSegments.length ? 0 : activeIndex + 1),
+            onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),
+            onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),
         });
-        const nextSegmentId = enabledSegments[nextIndex].id;
+        const nextSegmentId = focusableSegments[nextIndex].id;
         (_a = segmentByIdRef.current[nextSegmentId]) === null || _a === void 0 ? void 0 : _a.focus();
     };
     return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`]), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
         options.map((option, index) => {
             const isActive = selectedId === option.id;
-            const enabledSegmentIndex = enabledSegments.indexOf(option);
+            const focusableSegmentIndex = focusableSegments.indexOf(option);
             let tabIndex = isActive ? 0 : -1;
-            if (currentSelectedOption === null && enabledSegmentIndex === 0) {
+            if (currentSelectedOption === null && focusableSegmentIndex === 0) {
                 tabIndex = 0;
             }
-            return (React.createElement(Segment, { key: index, id: option.id, disabled: !!option.disabled, iconName: option.iconName, iconAlt: option.iconAlt, iconUrl: option.iconUrl, iconSvg: option.iconSvg, text: option.text, isActive: isActive, tabIndex: tabIndex, ref: node => {
+            return (React.createElement(Segment, { key: index, id: option.id, disabled: !!option.disabled, disabledReason: option.disabledReason, iconName: option.iconName, iconAlt: option.iconAlt, iconUrl: option.iconUrl, iconSvg: option.iconSvg, text: option.text, isActive: isActive, tabIndex: tabIndex, ref: node => {
                     if (node) {
                         segmentByIdRef.current[option.id] = node;
                     }
@@ -43,10 +43,13 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
                         delete segmentByIdRef.current[option.id];
                     }
                 }, onClick: () => {
+                    if (option.disabled) {
+                        return;
+                    }
                     if (selectedId !== option.id) {
                         fireNonCancelableEvent(onChange, { selectedId: option.id });
                     }
-                }, onKeyDown: event => moveHighlight(event, enabledSegmentIndex) }));
+                }, onKeyDown: event => moveHighlight(event, focusableSegmentIndex) }));
         })));
 }
 //# sourceMappingURL=internal-segmented-control.js.map

package/segmented-control/internal-segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport handleKey from '../internal/utils/handle-key';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n}: SegmentedControlProps) {\n  const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n  const selectedOptions = (options || []).filter(option => {\n    return option.id === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n  const enabledSegments = (options || []).filter(option => !option.disabled);\n\n  const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n    if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n      return;\n    }\n\n    let nextIndex = activeIndex;\n\n    handleKey(event, {\n      onInlineStart: () => (nextIndex = activeIndex === 0 ? enabledSegments.length - 1 : activeIndex - 1),\n      onInlineEnd: () => (nextIndex = activeIndex + 1 === enabledSegments.length ? 0 : activeIndex + 1),\n    });\n\n    const nextSegmentId = enabledSegments[nextIndex].id;\n    segmentByIdRef.current[nextSegmentId]?.focus();\n  };\n\n  return (\n    <div\n      className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`])}\n      aria-label={label}\n      aria-labelledby={ariaLabelledby}\n      role=\"toolbar\"\n    >\n      {options &&\n        options.map((option: SegmentedControlProps.Option, index) => {\n          const isActive = selectedId === option.id;\n          const enabledSegmentIndex = enabledSegments.indexOf(option);\n          let tabIndex = isActive ? 0 : -1;\n          if (currentSelectedOption === null && enabledSegmentIndex === 0) {\n            tabIndex = 0;\n          }\n          return (\n            <Segment\n              key={index}\n              id={option.id}\n              disabled={!!option.disabled}\n              iconName={option.iconName}\n              iconAlt={option.iconAlt}\n              iconUrl={option.iconUrl}\n              iconSvg={option.iconSvg}\n              text={option.text}\n              isActive={isActive}\n              tabIndex={tabIndex}\n              ref={node => {\n                if (node) {\n                  segmentByIdRef.current[option.id] = node;\n                } else {\n                  delete segmentByIdRef.current[option.id];\n                }\n              }}\n              onClick={() => {\n                if (selectedId !== option.id) {\n                  fireNonCancelableEvent(onChange, { selectedId: option.id });\n                }\n              }}\n              onKeyDown={event => moveHighlight(event, enabledSegmentIndex)}\n            />\n          );\n        })}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport handleKey from '../internal/utils/handle-key';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n}: SegmentedControlProps) {\n  const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n  const selectedOptions = (options || []).filter(option => {\n    return option.id === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n  const focusableSegments = (options || []).filter(\n    option => !option.disabled || (option.disabled && !!option.disabledReason)\n  );\n\n  const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n    if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n      return;\n    }\n\n    let nextIndex = activeIndex;\n\n    handleKey(event, {\n      onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n      onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n    });\n\n    const nextSegmentId = focusableSegments[nextIndex].id;\n    segmentByIdRef.current[nextSegmentId]?.focus();\n  };\n\n  return (\n    <div\n      className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`])}\n      aria-label={label}\n      aria-labelledby={ariaLabelledby}\n      role=\"toolbar\"\n    >\n      {options &&\n        options.map((option: SegmentedControlProps.Option, index) => {\n          const isActive = selectedId === option.id;\n          const focusableSegmentIndex = focusableSegments.indexOf(option);\n          let tabIndex = isActive ? 0 : -1;\n          if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n            tabIndex = 0;\n          }\n          return (\n            <Segment\n              key={index}\n              id={option.id}\n              disabled={!!option.disabled}\n              disabledReason={option.disabledReason}\n              iconName={option.iconName}\n              iconAlt={option.iconAlt}\n              iconUrl={option.iconUrl}\n              iconSvg={option.iconSvg}\n              text={option.text}\n              isActive={isActive}\n              tabIndex={tabIndex}\n              ref={node => {\n                if (node) {\n                  segmentByIdRef.current[option.id] = node;\n                } else {\n                  delete segmentByIdRef.current[option.id];\n                }\n              }}\n              onClick={() => {\n                if (option.disabled) {\n                  return;\n                }\n\n                if (selectedId !== option.id) {\n                  fireNonCancelableEvent(onChange, { selectedId: option.id });\n                }\n              }}\n              onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n            />\n          );\n        })}\n    </div>\n  );\n}\n"]}

package/segmented-control/segment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IAChE,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,wFA+BnB,CAAC"}
+{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAOrD,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IAChE,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,wFAkEnB,CAAC"}

package/segmented-control/segment.js

@@ -1,12 +1,22 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import clsx from 'clsx';
 import InternalIcon from '../icon/internal';
 import styles from './styles.css.js';
-export const Segment = React.forwardRef(({ disabled, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex }, ref) => {
-    return (React.createElement("button", { className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }), ref: ref, onClick: onClick, onKeyDown: onKeyDown, disabled: disabled, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined },
+import useHiddenDescription from '../internal/hooks/use-hidden-description';
+import Tooltip from '../internal/components/tooltip';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, }, ref) => {
+    const buttonRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const isDisabledWithReason = disabled && !!disabledReason;
+    const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
+    return (React.createElement("button", Object.assign({ className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined }, (isDisabledWithReason ? targetProps : {}), { "data-testid": id }),
         (iconName || iconUrl || iconSvg) && (React.createElement(InternalIcon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, svg: iconSvg, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
-        React.createElement("span", null, text)));
+        React.createElement("span", null, text),
+        isDisabledWithReason && (React.createElement(React.Fragment, null,
+            descriptionEl,
+            showTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: buttonRef, value: disabledReason }))))));
 });
 //# sourceMappingURL=segment.js.map

package/segmented-control/segment.js.map

@@ -1 +1 @@
-{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAgB,EAC7G,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EACnG,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC7B,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QAEtC,CAAC,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CACnC,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EACjF,IAAI,EAAE,QAAQ,EACd,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,GACzC,CACH;QACD,kCAAO,IAAI,CAAQ,CACZ,CACV,CAAC;AACJ,CAAC,CACF,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';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\n\nexport interface SegmentProps extends SegmentedControlProps.Option {\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isActive: boolean;\n  tabIndex: number;\n}\n\nexport const Segment = React.forwardRef(\n  (\n    { disabled, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex }: SegmentProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <button\n        className={clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive })}\n        ref={ref}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        disabled={disabled}\n        type=\"button\"\n        tabIndex={tabIndex}\n        aria-pressed={isActive ? 'true' : 'false'}\n        aria-label={!text ? iconAlt : undefined}\n      >\n        {(iconName || iconUrl || iconSvg) && (\n          <InternalIcon\n            className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n            name={iconName}\n            url={iconUrl}\n            svg={iconSvg}\n            alt={iconAlt}\n            variant={disabled ? 'disabled' : 'normal'}\n          />\n        )}\n        <span>{text}</span>\n      </button>\n    );\n  }\n);\n"]}
+{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAShE,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EACE,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAQ,EACR,EAAE,GACW,EACf,GAAiC,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,QAAQ,IAAI,CAAC,CAAC,cAAc,CAAC;IAE1D,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAE5E,OAAO,CACL,8CACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EACnG,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAAI,CAAC,cAAc,mBACtB,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACxD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC7B,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACvC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACtE,MAAM,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EACtE,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3E,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,IACxE,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,mBAChC,EAAE;QAEd,CAAC,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CACnC,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EACjF,IAAI,EAAE,QAAQ,EACd,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,GACzC,CACH;QACD,kCAAO,IAAI,CAAQ;QAElB,oBAAoB,IAAI,CACvB;YACG,aAAa;YACb,WAAW,IAAI,CACd,oBAAC,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,cAAe,GAAI,CACvG,CACA,CACJ,CACM,CACV,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport Tooltip from '../internal/components/tooltip';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nexport interface SegmentProps extends SegmentedControlProps.Option {\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isActive: boolean;\n  tabIndex: number;\n}\n\nexport const Segment = React.forwardRef(\n  (\n    {\n      disabled,\n      disabledReason,\n      text,\n      iconName,\n      iconAlt,\n      iconUrl,\n      iconSvg,\n      isActive,\n      onClick,\n      onKeyDown,\n      tabIndex,\n      id,\n    }: SegmentProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const buttonRef = useRef<HTMLElement>(null);\n    const [showTooltip, setShowTooltip] = useState(false);\n    const isDisabledWithReason = disabled && !!disabledReason;\n\n    const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n\n    return (\n      <button\n        className={clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive })}\n        ref={useMergeRefs(ref, buttonRef)}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        disabled={disabled && !disabledReason}\n        aria-disabled={isDisabledWithReason ? 'true' : undefined}\n        type=\"button\"\n        tabIndex={tabIndex}\n        aria-pressed={isActive ? 'true' : 'false'}\n        aria-label={!text ? iconAlt : undefined}\n        onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        {...(isDisabledWithReason ? targetProps : {})}\n        data-testid={id}\n      >\n        {(iconName || iconUrl || iconSvg) && (\n          <InternalIcon\n            className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n            name={iconName}\n            url={iconUrl}\n            svg={iconSvg}\n            alt={iconAlt}\n            variant={disabled ? 'disabled' : 'normal'}\n          />\n        )}\n        <span>{text}</span>\n\n        {isDisabledWithReason && (\n          <>\n            {descriptionEl}\n            {showTooltip && (\n              <Tooltip className={styles['disabled-reason-tooltip']} trackRef={buttonRef} value={disabledReason!} />\n            )}\n          </>\n        )}\n      </button>\n    );\n  }\n);\n"]}

package/segmented-control/styles.css.js

@@ -1,19 +1,20 @@
 
     import './styles.scoped.css';
     export default {
-  "segment": "awsui_segment_8cbea_gkapv_101",
-  "disabled": "awsui_disabled_8cbea_gkapv_181",
-  "selected": "awsui_selected_8cbea_gkapv_189",
-  "icon": "awsui_icon_8cbea_gkapv_210",
-  "with-text": "awsui_with-text_8cbea_gkapv_214",
-  "with-no-text": "awsui_with-no-text_8cbea_gkapv_220",
-  "root": "awsui_root_8cbea_gkapv_229",
-  "segment-part": "awsui_segment-part_8cbea_gkapv_264",
-  "select": "awsui_select_8cbea_gkapv_189",
-  "segment-count-2": "awsui_segment-count-2_8cbea_gkapv_283",
-  "segment-count-3": "awsui_segment-count-3_8cbea_gkapv_287",
-  "segment-count-4": "awsui_segment-count-4_8cbea_gkapv_291",
-  "segment-count-5": "awsui_segment-count-5_8cbea_gkapv_295",
-  "segment-count-6": "awsui_segment-count-6_8cbea_gkapv_299"
+  "segment": "awsui_segment_8cbea_8e18d_101",
+  "disabled": "awsui_disabled_8cbea_8e18d_181",
+  "selected": "awsui_selected_8cbea_8e18d_189",
+  "icon": "awsui_icon_8cbea_8e18d_210",
+  "with-text": "awsui_with-text_8cbea_8e18d_214",
+  "with-no-text": "awsui_with-no-text_8cbea_8e18d_220",
+  "root": "awsui_root_8cbea_8e18d_229",
+  "segment-part": "awsui_segment-part_8cbea_8e18d_264",
+  "select": "awsui_select_8cbea_8e18d_189",
+  "segment-count-2": "awsui_segment-count-2_8cbea_8e18d_283",
+  "segment-count-3": "awsui_segment-count-3_8cbea_8e18d_287",
+  "segment-count-4": "awsui_segment-count-4_8cbea_8e18d_291",
+  "segment-count-5": "awsui_segment-count-5_8cbea_8e18d_295",
+  "segment-count-6": "awsui_segment-count-6_8cbea_8e18d_299",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_8e18d_303"
 };