@cloudscape-design/components 3.0.681 → 3.0.683

package/internal/generated/theming/index.js

@@ -783,7 +783,7 @@ export var preset = {
       },
       "colorBackgroundButtonPrimaryDisabled": {
         "light": "{colorGrey200}",
-        "dark": "{colorGrey650}"
+        "dark": "{colorGrey700}"
       },
       "colorBackgroundButtonPrimaryHover": {
         "light": "{colorBorderButtonNormalHover}",
@@ -1073,6 +1073,10 @@ export var preset = {
         "light": "{colorGrey400}",
         "dark": "{colorGrey550}"
       },
+      "colorTextButtonNormalDisabled": {
+        "light": "{colorGrey500}",
+        "dark": "{colorGrey500}"
+      },
       "colorBorderButtonNormalHover": {
         "light": "{colorBlue800}",
         "dark": "{colorBlue400}"
@@ -1081,6 +1085,10 @@ export var preset = {
         "light": "{colorBackgroundButtonPrimaryDisabled}",
         "dark": "{colorBackgroundButtonPrimaryDisabled}"
       },
+      "colorTextButtonPrimaryDisabled": {
+        "light": "{colorGrey500}",
+        "dark": "{colorGrey500}"
+      },
       "colorBorderCalendarGrid": {
         "light": "transparent",
         "dark": "transparent"
@@ -2932,8 +2940,8 @@ export var preset = {
             "dark": "{colorBorderButtonNormalDefault}"
           },
           "colorBackgroundButtonPrimaryDisabled": {
-            "light": "{colorGrey650}",
-            "dark": "{colorGrey650}"
+            "light": "{colorGrey700}",
+            "dark": "{colorGrey700}"
           },
           "colorBackgroundButtonPrimaryHover": {
             "light": "{colorBorderButtonNormalHover}",
@@ -3223,6 +3231,10 @@ export var preset = {
             "light": "{colorGrey550}",
             "dark": "{colorGrey550}"
           },
+          "colorTextButtonNormalDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderButtonNormalHover": {
             "light": "{colorBlue400}",
             "dark": "{colorBlue400}"
@@ -3231,6 +3243,10 @@ export var preset = {
             "light": "{colorBackgroundButtonPrimaryDisabled}",
             "dark": "{colorBackgroundButtonPrimaryDisabled}"
           },
+          "colorTextButtonPrimaryDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -4002,8 +4018,8 @@ export var preset = {
             "dark": "{colorBorderButtonNormalDefault}"
           },
           "colorBackgroundButtonPrimaryDisabled": {
-            "light": "{colorGrey650}",
-            "dark": "{colorGrey650}"
+            "light": "{colorGrey700}",
+            "dark": "{colorGrey700}"
           },
           "colorBackgroundButtonPrimaryHover": {
             "light": "{colorBorderButtonNormalHover}",
@@ -4293,6 +4309,10 @@ export var preset = {
             "light": "{colorGrey550}",
             "dark": "{colorGrey550}"
           },
+          "colorTextButtonNormalDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderButtonNormalHover": {
             "light": "{colorBlue400}",
             "dark": "{colorBlue400}"
@@ -4301,6 +4321,10 @@ export var preset = {
             "light": "{colorBackgroundButtonPrimaryDisabled}",
             "dark": "{colorBackgroundButtonPrimaryDisabled}"
           },
+          "colorTextButtonPrimaryDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -5005,7 +5029,7 @@ export var preset = {
           },
           "colorBackgroundButtonPrimaryDisabled": {
             "light": "{colorGrey200}",
-            "dark": "{colorGrey650}"
+            "dark": "{colorGrey700}"
           },
           "colorBackgroundButtonPrimaryHover": {
             "light": "{colorBorderButtonNormalHover}",
@@ -5295,6 +5319,10 @@ export var preset = {
             "light": "{colorGrey400}",
             "dark": "{colorGrey550}"
           },
+          "colorTextButtonNormalDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderButtonNormalHover": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
@@ -5303,6 +5331,10 @@ export var preset = {
             "light": "{colorBackgroundButtonPrimaryDisabled}",
             "dark": "{colorBackgroundButtonPrimaryDisabled}"
           },
+          "colorTextButtonPrimaryDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -6007,7 +6039,7 @@ export var preset = {
           },
           "colorBackgroundButtonPrimaryDisabled": {
             "light": "{colorGrey200}",
-            "dark": "{colorGrey650}"
+            "dark": "{colorGrey700}"
           },
           "colorBackgroundButtonPrimaryHover": {
             "light": "{colorBorderButtonNormalHover}",
@@ -6297,6 +6329,10 @@ export var preset = {
             "light": "{colorGrey400}",
             "dark": "{colorGrey550}"
           },
+          "colorTextButtonNormalDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderButtonNormalHover": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -6305,6 +6341,10 @@ export var preset = {
             "light": "{colorBackgroundButtonPrimaryDisabled}",
             "dark": "{colorBackgroundButtonPrimaryDisabled}"
           },
+          "colorTextButtonPrimaryDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -7009,7 +7049,7 @@ export var preset = {
           },
           "colorBackgroundButtonPrimaryDisabled": {
             "light": "{colorGrey200}",
-            "dark": "{colorGrey650}"
+            "dark": "{colorGrey700}"
           },
           "colorBackgroundButtonPrimaryHover": {
             "light": "{colorBorderButtonNormalHover}",
@@ -7299,6 +7339,10 @@ export var preset = {
             "light": "{colorGrey400}",
             "dark": "{colorGrey550}"
           },
+          "colorTextButtonNormalDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderButtonNormalHover": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -7307,6 +7351,10 @@ export var preset = {
             "light": "{colorBackgroundButtonPrimaryDisabled}",
             "dark": "{colorBackgroundButtonPrimaryDisabled}"
           },
+          "colorTextButtonPrimaryDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -8012,8 +8060,8 @@ export var preset = {
             "dark": "{colorBorderButtonNormalDefault}"
           },
           "colorBackgroundButtonPrimaryDisabled": {
-            "light": "{colorGrey650}",
-            "dark": "{colorGrey650}"
+            "light": "{colorGrey700}",
+            "dark": "{colorGrey700}"
           },
           "colorBackgroundButtonPrimaryHover": {
             "light": "{colorBorderButtonNormalHover}",
@@ -8303,6 +8351,10 @@ export var preset = {
             "light": "{colorGrey550}",
             "dark": "{colorGrey550}"
           },
+          "colorTextButtonNormalDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderButtonNormalHover": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -8311,6 +8363,10 @@ export var preset = {
             "light": "{colorBackgroundButtonPrimaryDisabled}",
             "dark": "{colorBackgroundButtonPrimaryDisabled}"
           },
+          "colorTextButtonPrimaryDisabled": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -9184,8 +9240,10 @@ export var preset = {
       "colorBorderButtonNormalActive": "color",
       "colorBorderButtonNormalDefault": "color",
       "colorBorderButtonNormalDisabled": "color",
+      "colorTextButtonNormalDisabled": "color",
       "colorBorderButtonNormalHover": "color",
       "colorBorderButtonPrimaryDisabled": "color",
+      "colorTextButtonPrimaryDisabled": "color",
       "colorBorderCalendarGrid": "color",
       "colorBorderCalendarGridSelectedFocusRing": "color",
       "colorBorderCodeEditorAceActiveLineLightTheme": "color",
@@ -9618,8 +9676,10 @@ export var preset = {
     "colorBorderButtonNormalActive",
     "colorBorderButtonNormalDefault",
     "colorBorderButtonNormalDisabled",
+    "colorTextButtonNormalDisabled",
     "colorBorderButtonNormalHover",
     "colorBorderButtonPrimaryDisabled",
+    "colorTextButtonPrimaryDisabled",
     "colorBorderContainerTop",
     "colorBorderControlDefault",
     "colorBorderDividerDefault",
@@ -9938,8 +9998,10 @@ export var preset = {
     "colorBorderButtonNormalActive",
     "colorBorderButtonNormalDefault",
     "colorBorderButtonNormalDisabled",
+    "colorTextButtonNormalDisabled",
     "colorBorderButtonNormalHover",
     "colorBorderButtonPrimaryDisabled",
+    "colorTextButtonPrimaryDisabled",
     "colorBorderContainerTop",
     "colorBorderControlDefault",
     "colorBorderDividerDefault",
@@ -10389,8 +10451,10 @@ export var preset = {
     "colorBorderButtonNormalActive": "color-border-button-normal-active",
     "colorBorderButtonNormalDefault": "color-border-button-normal-default",
     "colorBorderButtonNormalDisabled": "color-border-button-normal-disabled",
+    "colorTextButtonNormalDisabled": "color-text-button-normal-disabled",
     "colorBorderButtonNormalHover": "color-border-button-normal-hover",
     "colorBorderButtonPrimaryDisabled": "color-border-button-primary-disabled",
+    "colorTextButtonPrimaryDisabled": "color-text-button-primary-disabled",
     "colorBorderCalendarGrid": "color-border-calendar-grid",
     "colorBorderCalendarGridSelectedFocusRing": "color-border-calendar-grid-selected-focus-ring",
     "colorBorderCodeEditorAceActiveLineLightTheme": "color-border-code-editor-ace-active-line-light-theme",
@@ -11026,7 +11090,7 @@ export var preset = {
     "colorBackgroundButtonNormalHover": "--color-background-button-normal-hover-imnrq7",
     "colorBackgroundButtonPrimaryActive": "--color-background-button-primary-active-1ucrg4",
     "colorBackgroundButtonPrimaryDefault": "--color-background-button-primary-default-jrg2xu",
-    "colorBackgroundButtonPrimaryDisabled": "--color-background-button-primary-disabled-31l9pn",
+    "colorBackgroundButtonPrimaryDisabled": "--color-background-button-primary-disabled-yblour",
     "colorBackgroundButtonPrimaryHover": "--color-background-button-primary-hover-l3mbyt",
     "colorBackgroundCalendarCurrentDate": "--color-background-calendar-current-date-kmb0ji",
     "colorBackgroundCellShaded": "--color-background-cell-shaded-7v0jy4",
@@ -11099,8 +11163,10 @@ export var preset = {
     "colorBorderButtonNormalActive": "--color-border-button-normal-active-tc4102",
     "colorBorderButtonNormalDefault": "--color-border-button-normal-default-x52rkp",
     "colorBorderButtonNormalDisabled": "--color-border-button-normal-disabled-40wkb4",
+    "colorTextButtonNormalDisabled": "--color-text-button-normal-disabled-h3ul0e",
     "colorBorderButtonNormalHover": "--color-border-button-normal-hover-qs1x3s",
-    "colorBorderButtonPrimaryDisabled": "--color-border-button-primary-disabled-q34ikb",
+    "colorBorderButtonPrimaryDisabled": "--color-border-button-primary-disabled-mewj5j",
+    "colorTextButtonPrimaryDisabled": "--color-text-button-primary-disabled-gxu2gk",
     "colorBorderCalendarGrid": "--color-border-calendar-grid-u86q1u",
     "colorBorderCalendarGridSelectedFocusRing": "--color-border-calendar-grid-selected-focus-ring-thqa8y",
     "colorBorderCodeEditorAceActiveLineLightTheme": "--color-border-code-editor-ace-active-line-light-theme-37hmmo",

package/{button-dropdown/utils/use-hidden-description.d.ts → internal/hooks/use-hidden-description/index.d.ts}

@@ -4,5 +4,6 @@ export default function useHiddenDescription(description?: string): {
         'aria-describedby': string | undefined;
     };
     descriptionEl: JSX.Element | null;
+    descriptionId: string;
 };
-//# sourceMappingURL=use-hidden-description.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/use-hidden-description/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-hidden-description/index.tsx"],"names":[],"mappings":";AAMA,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,WAAW,CAAC,EAAE,MAAM;;;;;;EAahE"}

package/{button-dropdown/utils/use-hidden-description.js → internal/hooks/use-hidden-description/index.js}

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { useUniqueId } from '../../internal/hooks/use-unique-id';
+import { useUniqueId } from '../use-unique-id';
 export default function useHiddenDescription(description) {
     const id = useUniqueId();
     return {
@@ -9,6 +9,7 @@ export default function useHiddenDescription(description) {
             'aria-describedby': description ? id : undefined,
         },
         descriptionEl: description ? (React.createElement("span", { id: id, hidden: true }, description)) : null,
+        descriptionId: id,
     };
 }
-//# sourceMappingURL=use-hidden-description.js.map
+//# sourceMappingURL=index.js.map

package/internal/hooks/use-hidden-description/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-hidden-description/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,WAAoB;IAC/D,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,OAAO;QACL,WAAW,EAAE;YACX,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;SACjD;QACD,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,CAC3B,8BAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,IACvB,WAAW,CACP,CACR,CAAC,CAAC,CAAC,IAAI;QACR,aAAa,EAAE,EAAE;KAClB,CAAC;AACJ,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 { useUniqueId } from '../use-unique-id';\n\nexport default function useHiddenDescription(description?: string) {\n  const id = useUniqueId();\n  return {\n    targetProps: {\n      'aria-describedby': description ? id : undefined,\n    },\n    descriptionEl: description ? (\n      <span id={id} hidden={true}>\n        {description}\n      </span>\n    ) : null,\n    descriptionId: id,\n  };\n}\n"]}

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "e59783d007b5ad48ab685be61e500234a7d1929f"
+  "commit": "1dcf65791464d1c3ed0e0058de49c0f5953e7f23"
 }

package/package.json

@@ -121,7 +121,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.681",
+  "version": "3.0.683",
   "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":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\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"
 };