@cloudscape-design/components-themeable 3.0.724 → 3.0.726

package/lib/internal/template/button-dropdown/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { ExpandToViewport } from '../internal/components/dropdown/interfaces';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewport {\n  /**\n   * Array of objects with a number of suppoted types.\n   *\n   * The following properties are supported across all types:\n   *\n   * - `type` (string) - The type of the item. Can be `action`, `group`, `checkbox`. Defaults to `action` if `items` undefined and `group` otherwise.\n   * - `id` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.\n   * - `text` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.\n   * - `lang` (string) - (Optional) The language of the item, provided as a BCP 47 language tag.\n   * - `disabled` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible.\n   * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context.\n   * - `description` (string) - additional data that will be passed to a `data-description` attribute.\n   *\n   * ### action\n   *\n   * - `href` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.\n   * - `external` (boolean) - Marks a menu item as external by adding an icon after the menu item text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n   * - `externalIconAriaLabel` (string) - Adds an `aria-label` to the external icon.\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`.\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   *\n   * ### checkbox\n   *\n   * When `type` is set to \"checkbox\", the values set to `href`, `external` and `externalIconAriaLabel` will be ignored.\n   *\n   * - `checked` (boolean) - Controls the state of the checkbox item.\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`.\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   *\n   * ### group\n   *\n   * - `items` (ReadonlyArray<Item>) - an array of item objects. Items will be rendered as nested menu items but only for the first nesting level, multi-nesting is not supported.\n   * An item which belongs to nested group has the following properties: `id`, `text`, `disabled`, and `description`.\n   *\n   */\n  items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n  /**\n   * Determines whether the button dropdown is disabled. Users cannot interact with the control if it's disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the button dropdown is disabled (only when `disabled` is `true`).\n   * If provided, the disabled button becomes focusable.\n   */\n  disabledReason?: string;\n  /**\n   * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n   * It prevents clicks.\n   */\n  loading?: boolean;\n  /**\n   * Specifies the text that screen reader announces when the button dropdown is in a loading state.\n   */\n  loadingText?: string;\n  /** Determines the general styling of the button dropdown.\n   * * `primary` for primary buttons\n   * * `normal` for secondary buttons\n   * * `icon` for icon buttons\n   * * `inline-icon` for icon buttons with no outer padding\n   */\n  variant?: ButtonDropdownProps.Variant;\n  /**\n   * Controls expandability of the item groups.\n   */\n  expandableGroups?: boolean;\n  /**\n   * Adds `aria-label` to the button dropdown trigger.\n   * Use this to provide an accessible name for buttons that don't have visible text.\n   */\n  ariaLabel?: string;\n  /**\n   * Text displayed in the button dropdown trigger.\n   * @displayname text\n   */\n  children?: React.ReactNode;\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?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  /**\n   * Called when the user clicks on an item with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the item has an `href` set.\n   */\n  onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  /**\n   * A standalone action that is shown prior to the dropdown trigger.\n   * Use it with \"primary\" and \"normal\" variant only.\n   *\n   * Main action properties:\n   * * `text` (string) - Specifies the text shown in the main action.\n   * * `external` (boolean) - Marks the main action as external by adding an icon after the text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n   * * `externalIconAriaLabel` (string) - Adds an ARIA label to the external icon.\n   *\n   * The main action also supports the following properties of the [button](/components/button/?tabId=api) component:\n   * `ariaLabel`, `disabled`, `loading`, `loadingText`, `href`, `target`, `rel`, `download`, `iconAlt`, `iconName`, `iconUrl`, `iconSvg`, `onClick`, `onFollow`.\n   */\n  mainAction?: ButtonDropdownProps.MainAction;\n}\n\nexport namespace ButtonDropdownProps {\n  export type Variant = 'normal' | 'primary' | 'icon' | 'inline-icon';\n  export type ItemType = 'action' | 'group';\n\n  export interface MainAction {\n    text: string;\n    ariaLabel?: string;\n    onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n    onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    href?: string;\n    target?: string;\n    rel?: string;\n    download?: boolean | string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n  }\n\n  export interface Item {\n    itemType?: ItemType;\n    id: string;\n    text: string;\n    lang?: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    description?: string;\n    href?: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n  }\n\n  export interface CheckboxItem\n    extends Omit<ButtonDropdownProps.Item, 'href' | 'external' | 'externalIconAriaLabel' | 'itemType'> {\n    itemType: 'checkbox';\n    checked: boolean;\n  }\n\n  export interface ItemGroup extends Omit<Item, 'id' | 'text' | 'itemType'> {\n    itemType?: 'group';\n    id?: string;\n    text?: string;\n    items: Items;\n  }\n\n  export type ItemOrGroup = Item | CheckboxItem | ItemGroup;\n\n  export type Items = ReadonlyArray<ItemOrGroup>;\n\n  export interface ItemClickDetails extends BaseNavigationDetail {\n    id: string;\n    checked?: boolean;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the underlying native button.\n     */\n    focus(): void;\n  }\n}\n\nexport interface ButtonDropdownSettings {\n  // this means whether action is required to make group expand\n  hasExpandableGroups: boolean;\n  // on smaller screens expandable groups are integrated into parent dropdown\n  // this changes keyboard navigation, highlight and activation behavior for parent dropdown\n  isInRestrictedView?: boolean;\n}\n\nexport interface HighlightProps {\n  targetItem: ButtonDropdownProps.ItemOrGroup | null;\n  isHighlighted: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n  isKeyboardHighlight: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n  isExpanded: (group: ButtonDropdownProps.ItemGroup) => boolean;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n}\n\nexport type GroupToggle = (item: ButtonDropdownProps.ItemGroup, event: React.SyntheticEvent) => void;\nexport type ItemActivate = (\n  item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem,\n  event: React.MouseEvent | React.KeyboardEvent\n) => void;\n\nexport interface CategoryProps extends HighlightProps {\n  item: ButtonDropdownProps.ItemGroup;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  disabled: boolean;\n  lastInDropdown: boolean;\n  expandToViewport?: boolean;\n  variant?: ItemListProps['variant'];\n  position?: string;\n}\n\nexport interface ItemListProps extends HighlightProps {\n  items: ButtonDropdownProps.Items;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  categoryDisabled?: boolean;\n  hasExpandableGroups?: boolean;\n  hasCategoryHeader?: boolean;\n  lastInDropdown: boolean;\n  expandToViewport?: boolean;\n  variant?: InternalButtonDropdownProps['variant'];\n  position?: string;\n}\n\nexport interface LinkItem extends ButtonDropdownProps.Item {\n  href: string;\n}\n\nexport interface ItemProps {\n  item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem | LinkItem;\n  disabled: boolean;\n  highlighted: boolean;\n  onItemActivate: ItemActivate;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n  showDivider: boolean;\n  hasCategoryHeader: boolean;\n  isKeyboardHighlighted?: boolean;\n  variant?: ItemListProps['variant'];\n  position?: string;\n}\n\nexport interface InternalItem extends ButtonDropdownProps.Item {\n  badge?: boolean;\n}\n\nexport interface InternalItemGroup extends Omit<ButtonDropdownProps.ItemGroup, 'items'> {\n  items: InternalItems;\n}\n\nexport type InternalItems = ReadonlyArray<InternalItemOrGroup>;\n\nexport type InternalItemOrGroup = InternalItem | ButtonDropdownProps.CheckboxItem | InternalItemGroup;\n\nexport interface InternalButtonDropdownProps\n  extends Omit<ButtonDropdownProps, 'variant' | 'items'>,\n    InternalBaseComponentProps {\n  customTriggerBuilder?: (props: CustomTriggerProps) => React.ReactNode;\n  variant?: ButtonDropdownProps['variant'] | 'navigation';\n  items: ReadonlyArray<InternalItemOrGroup>;\n\n  /**\n   * Optional text that is displayed as the title at the top of the dropdown.\n   */\n  title?: string;\n\n  /**\n   * Optional text that is displayed underneath the title at the top of the dropdown.\n   */\n  description?: string;\n\n  /**\n   * Determines that the dropdown should preferably be aligned to the center of the trigger\n   * instead of dropping left or right.\n   */\n  preferCenter?: boolean;\n}\n\nexport interface CustomTriggerProps {\n  triggerRef: React.Ref<HTMLElement>;\n  testUtilsClass: string;\n  ariaLabel: string | undefined;\n  disabled: boolean;\n  disabledReason?: string;\n  isOpen: boolean;\n  onClick: () => void;\n  ariaExpanded: boolean;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { ExpandToViewport } from '../internal/components/dropdown/interfaces';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewport {\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * The following properties are supported across all types:\n   *\n   * - `type` (string) - The type of the item. Can be `action`, `group`, `checkbox`. Defaults to `action` if `items` undefined and `group` otherwise.\n   * - `id` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.\n   * - `text` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.\n   * - `lang` (string) - (Optional) The language of the item, provided as a BCP 47 language tag.\n   * - `disabled` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible.\n   * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context.\n   * - `description` (string) - additional data that will be passed to a `data-description` attribute.\n   *\n   * ### action\n   *\n   * - `href` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.\n   * - `external` (boolean) - Marks a menu item as external by adding an icon after the menu item text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n   * - `externalIconAriaLabel` (string) - Adds an `aria-label` to the external icon.\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`.\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   *\n   * ### checkbox\n   *\n   * When `type` is set to \"checkbox\", the values set to `href`, `external` and `externalIconAriaLabel` will be ignored.\n   *\n   * - `checked` (boolean) - Controls the state of the checkbox item.\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`.\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   *\n   * ### group\n   *\n   * - `items` (ReadonlyArray<Item>) - an array of item objects. Items will be rendered as nested menu items but only for the first nesting level, multi-nesting is not supported.\n   * An item which belongs to nested group has the following properties: `id`, `text`, `disabled`, and `description`.\n   *\n   */\n  items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n  /**\n   * Determines whether the button dropdown is disabled. Users cannot interact with the control if it's disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the button dropdown is disabled (only when `disabled` is `true`).\n   * If provided, the disabled button becomes focusable.\n   */\n  disabledReason?: string;\n  /**\n   * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n   * It prevents clicks.\n   */\n  loading?: boolean;\n  /**\n   * Specifies the text that screen reader announces when the button dropdown is in a loading state.\n   */\n  loadingText?: string;\n  /** Determines the general styling of the button dropdown.\n   * * `primary` for primary buttons\n   * * `normal` for secondary buttons\n   * * `icon` for icon buttons\n   * * `inline-icon` for icon buttons with no outer padding\n   */\n  variant?: ButtonDropdownProps.Variant;\n  /**\n   * Controls expandability of the item groups.\n   */\n  expandableGroups?: boolean;\n  /**\n   * Adds `aria-label` to the button dropdown trigger.\n   * Use this to provide an accessible name for buttons that don't have visible text.\n   */\n  ariaLabel?: string;\n  /**\n   * Text displayed in the button dropdown trigger.\n   * @displayname text\n   */\n  children?: React.ReactNode;\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?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  /**\n   * Called when the user clicks on an item with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the item has an `href` set.\n   */\n  onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  /**\n   * A standalone action that is shown prior to the dropdown trigger.\n   * Use it with \"primary\" and \"normal\" variant only.\n   *\n   * Main action properties:\n   * * `text` (string) - Specifies the text shown in the main action.\n   * * `external` (boolean) - Marks the main action as external by adding an icon after the text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n   * * `externalIconAriaLabel` (string) - Adds an ARIA label to the external icon.\n   *\n   * The main action also supports the following properties of the [button](/components/button/?tabId=api) component:\n   * `ariaLabel`, `disabled`, `loading`, `loadingText`, `href`, `target`, `rel`, `download`, `iconAlt`, `iconName`, `iconUrl`, `iconSvg`, `onClick`, `onFollow`.\n   */\n  mainAction?: ButtonDropdownProps.MainAction;\n}\n\nexport namespace ButtonDropdownProps {\n  export type Variant = 'normal' | 'primary' | 'icon' | 'inline-icon';\n  export type ItemType = 'action' | 'group';\n\n  export interface MainAction {\n    text: string;\n    ariaLabel?: string;\n    onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n    onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    href?: string;\n    target?: string;\n    rel?: string;\n    download?: boolean | string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n  }\n\n  export interface Item {\n    itemType?: ItemType;\n    id: string;\n    text: string;\n    lang?: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    description?: string;\n    href?: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n  }\n\n  export interface CheckboxItem\n    extends Omit<ButtonDropdownProps.Item, 'href' | 'external' | 'externalIconAriaLabel' | 'itemType'> {\n    itemType: 'checkbox';\n    checked: boolean;\n  }\n\n  export interface ItemGroup extends Omit<Item, 'id' | 'text' | 'itemType'> {\n    itemType?: 'group';\n    id?: string;\n    text?: string;\n    items: Items;\n  }\n\n  export type ItemOrGroup = Item | CheckboxItem | ItemGroup;\n\n  export type Items = ReadonlyArray<ItemOrGroup>;\n\n  export interface ItemClickDetails extends BaseNavigationDetail {\n    id: string;\n    checked?: boolean;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the underlying native button.\n     */\n    focus(): void;\n  }\n}\n\nexport interface ButtonDropdownSettings {\n  // this means whether action is required to make group expand\n  hasExpandableGroups: boolean;\n  // on smaller screens expandable groups are integrated into parent dropdown\n  // this changes keyboard navigation, highlight and activation behavior for parent dropdown\n  isInRestrictedView?: boolean;\n}\n\nexport interface HighlightProps {\n  targetItem: ButtonDropdownProps.ItemOrGroup | null;\n  isHighlighted: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n  isKeyboardHighlight: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n  isExpanded: (group: ButtonDropdownProps.ItemGroup) => boolean;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n}\n\nexport type GroupToggle = (item: ButtonDropdownProps.ItemGroup, event: React.SyntheticEvent) => void;\nexport type ItemActivate = (\n  item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem,\n  event: React.MouseEvent | React.KeyboardEvent\n) => void;\n\nexport interface CategoryProps extends HighlightProps {\n  item: ButtonDropdownProps.ItemGroup;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  disabled: boolean;\n  lastInDropdown: boolean;\n  expandToViewport?: boolean;\n  variant?: ItemListProps['variant'];\n  position?: string;\n}\n\nexport interface ItemListProps extends HighlightProps {\n  items: ButtonDropdownProps.Items;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  categoryDisabled?: boolean;\n  hasExpandableGroups?: boolean;\n  hasCategoryHeader?: boolean;\n  lastInDropdown: boolean;\n  expandToViewport?: boolean;\n  variant?: InternalButtonDropdownProps['variant'];\n  position?: string;\n}\n\nexport interface LinkItem extends ButtonDropdownProps.Item {\n  href: string;\n}\n\nexport interface ItemProps {\n  item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem | LinkItem;\n  disabled: boolean;\n  highlighted: boolean;\n  onItemActivate: ItemActivate;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n  showDivider: boolean;\n  hasCategoryHeader: boolean;\n  isKeyboardHighlighted?: boolean;\n  variant?: ItemListProps['variant'];\n  position?: string;\n}\n\nexport interface InternalItem extends ButtonDropdownProps.Item {\n  badge?: boolean;\n}\n\nexport interface InternalItemGroup extends Omit<ButtonDropdownProps.ItemGroup, 'items'> {\n  items: InternalItems;\n}\n\nexport type InternalItems = ReadonlyArray<InternalItemOrGroup>;\n\nexport type InternalItemOrGroup = InternalItem | ButtonDropdownProps.CheckboxItem | InternalItemGroup;\n\nexport interface InternalButtonDropdownProps\n  extends Omit<ButtonDropdownProps, 'variant' | 'items'>,\n    InternalBaseComponentProps {\n  customTriggerBuilder?: (props: CustomTriggerProps) => React.ReactNode;\n  variant?: ButtonDropdownProps['variant'] | 'navigation';\n  items: ReadonlyArray<InternalItemOrGroup>;\n\n  /**\n   * Optional text that is displayed as the title at the top of the dropdown.\n   */\n  title?: string;\n\n  /**\n   * Optional text that is displayed underneath the title at the top of the dropdown.\n   */\n  description?: string;\n\n  /**\n   * Determines that the dropdown should preferably be aligned to the center of the trigger\n   * instead of dropping left or right.\n   */\n  preferCenter?: boolean;\n}\n\nexport interface CustomTriggerProps {\n  triggerRef: React.Ref<HTMLElement>;\n  testUtilsClass: string;\n  ariaLabel: string | undefined;\n  disabled: boolean;\n  disabledReason?: string;\n  isOpen: boolean;\n  onClick: () => void;\n  ariaExpanded: boolean;\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,QAAA,MAAM,cAAc;UAQR,iBAAiB,UAAU;iBACpB,OAAO;kBACN,OAAO;;yCA2C1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,21 @@
+// 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 { InternalButton } from '../button/internal.js';
+import LiveRegion from '../internal/components/live-region/index.js';
+import Tooltip from '../internal/components/tooltip/index.js';
+import testUtilStyles from './test-classes/styles.css.js';
+const IconButtonItem = forwardRef(({ item, showTooltip, showFeedback, onItemClick, }, ref) => {
+    const containerRef = React.useRef(null);
+    const hasIcon = item.iconName || item.iconUrl || item.iconSvg;
+    if (!hasIcon) {
+        warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);
+    }
+    return (React.createElement("div", { ref: containerRef },
+        React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, iconName: hasIcon ? item.iconName : 'close', iconAlt: item.text, iconSvg: item.iconSvg, ariaLabel: item.text, onClick: onItemClick, ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
+        showTooltip && !item.disabled && !item.loading && (!showFeedback || item.popoverFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(LiveRegion, { visible: true }, item.popoverFeedback)) || item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) }))));
+});
+export default IconButtonItem;
+//# sourceMappingURL=icon-button-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-item.js","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAI9D,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAE1D,MAAM,cAAc,GAAG,UAAU,CAC/B,CACE,EACE,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,WAAW,GAMZ,EACD,GAA+B,EAC/B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;IAE9D,IAAI,CAAC,OAAO,EAAE;QACZ,QAAQ,CAAC,aAAa,EAAE,kCAAkC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;KACtE;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY;QACpB,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC3C,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,iBACK,IAAI,CAAC,EAAE,iBACP,IAAI,CAAC,EAAE,EACpB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC,EACzE,OAAO,EAAC,EAAE,IAET,IAAI,CAAC,IAAI,CACK;QAChB,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAC5F,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,CAAC,YAAY,IAAI,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,IAAI,CAAC,eAAe,CAAc,CAAC,IAAI,IAAI,CAAC,IAAI,EACpG,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","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 { InternalButton } from '../button/internal.js';\nimport LiveRegion from '../internal/components/live-region/index.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { CancelableEventHandler, ClickDetail } from '../internal/events/index.js';\nimport { ButtonGroupProps } from './interfaces.js';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\nconst IconButtonItem = forwardRef(\n  (\n    {\n      item,\n      showTooltip,\n      showFeedback,\n      onItemClick,\n    }: {\n      item: ButtonGroupProps.IconButton;\n      showTooltip: boolean;\n      showFeedback: boolean;\n      onItemClick?: CancelableEventHandler<ClickDetail>;\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\n    if (!hasIcon) {\n      warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);\n    }\n\n    return (\n      <div ref={containerRef}>\n        <InternalButton\n          variant=\"icon\"\n          loading={item.loading}\n          loadingText={item.loadingText}\n          disabled={item.disabled}\n          iconName={hasIcon ? item.iconName : 'close'}\n          iconAlt={item.text}\n          iconSvg={item.iconSvg}\n          ariaLabel={item.text}\n          onClick={onItemClick}\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        </InternalButton>\n        {showTooltip && !item.disabled && !item.loading && (!showFeedback || item.popoverFeedback) && (\n          <Tooltip\n            trackRef={containerRef}\n            trackKey={item.id}\n            value={(showFeedback && <LiveRegion visible={true}>{item.popoverFeedback}</LiveRegion>) || item.text}\n            className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default IconButtonItem;\n"]}

package/lib/internal/template/button-group/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ButtonGroupProps } from './interfaces';
+export { ButtonGroupProps };
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<ButtonGroupProps.Ref>>;
+export default ButtonGroup;
+//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/button-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button-group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FAsBhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/lib/internal/template/button-group/index.js

@@ -0,0 +1,24 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalButtonGroup from './internal';
+const ButtonGroup = React.forwardRef((_a, ref) => {
+    var { variant, dropdownExpandToViewport } = _a, rest = __rest(_a, ["variant", "dropdownExpandToViewport"]);
+    const baseProps = getBaseProps(rest);
+    const baseComponentProps = useBaseComponent('ButtonGroup', {
+        props: {
+            variant,
+            dropdownExpandToViewport,
+        },
+    });
+    const externalProps = getExternalProps(rest);
+    return (React.createElement(InternalButtonGroup, Object.assign({}, baseProps, baseComponentProps, externalProps, { ref: ref, variant: variant, dropdownExpandToViewport: dropdownExpandToViewport })));
+});
+applyDisplayName(ButtonGroup, 'ButtonGroup');
+export default ButtonGroup;
+//# sourceMappingURL=index.js.map

package/lib/internal/template/button-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAI7C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAgE,EAAE,GAAoC,EAAE,EAAE;QAA1G,EAAE,OAAO,EAAE,wBAAwB,OAA6B,EAAxB,IAAI,cAA5C,uCAA8C,CAAF;IAC3C,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,OAAO;YACP,wBAAwB;SACzB;KACF,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,CACL,oBAAC,mBAAmB,oBACd,SAAS,EACT,kBAAkB,EAClB,aAAa,IACjB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,wBAAwB,EAAE,wBAAwB,IAClD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,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 { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { ButtonGroupProps } from './interfaces';\nimport InternalButtonGroup from './internal';\n\nexport { ButtonGroupProps };\n\nconst ButtonGroup = React.forwardRef(\n  ({ variant, dropdownExpandToViewport, ...rest }: ButtonGroupProps, ref: React.Ref<ButtonGroupProps.Ref>) => {\n    const baseProps = getBaseProps(rest);\n    const baseComponentProps = useBaseComponent('ButtonGroup', {\n      props: {\n        variant,\n        dropdownExpandToViewport,\n      },\n    });\n\n    const externalProps = getExternalProps(rest);\n    return (\n      <InternalButtonGroup\n        {...baseProps}\n        {...baseComponentProps}\n        {...externalProps}\n        ref={ref}\n        variant={variant}\n        dropdownExpandToViewport={dropdownExpandToViewport}\n      />\n    );\n  }\n);\n\napplyDisplayName(ButtonGroup, 'ButtonGroup');\nexport default ButtonGroup;\n"]}

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

@@ -0,0 +1,111 @@
+/// <reference types="react" />
+import { ButtonDropdownProps } from '../button-dropdown/interfaces';
+import { IconProps } from '../icon/interfaces';
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface ButtonGroupProps extends BaseComponentProps {
+    /**
+     * Adds `aria-label` to the button group toolbar element.
+     * Use this to provide a unique accessible name for each button group on the page.
+     */
+    ariaLabel?: string;
+    /**
+     * Determines the general styling of the button dropdown.
+     * * `icon` for icon buttons.
+     */
+    variant: ButtonGroupProps.Variant;
+    /**
+     * Use this property to determine dropdown placement strategy for all menu dropdown items.
+     *
+     * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
+     * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
+     * [React Portals](https://reactjs.org/docs/portals.html).
+     *
+     * Set this property if the dropdown would otherwise be constrained by a scrollable container,
+     * for example inside table and split view layouts.
+     *
+     * We recommend you use discretion, and don't enable this property unless necessary
+     * because fixed positioning results in a slight, visible lag when scrolling complex pages.
+     */
+    dropdownExpandToViewport?: boolean;
+    /**
+     * Array of objects with a number of supported types.
+     *
+     * ### 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.
+     * * `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.
+     *
+     * ### menu-dropdown
+     *
+     * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.
+     * * `text` (string) - The name of the menu button shown as a tooltip.
+     * * `disabled` (optional, boolean) - The disabled state indication for the menu button.
+     * * `loading` (optional, boolean) - The loading state indication for the menu button.
+     * * `loadingText` (optional, string) - The loading text announced to screen readers.
+     * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.
+     *
+     * 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.
+     */
+    items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;
+    /**
+     * 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.
+     */
+    onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
+}
+export interface InternalButtonGroupProps extends ButtonGroupProps, InternalBaseComponentProps {
+}
+export declare namespace ButtonGroupProps {
+    type Variant = 'icon';
+    type ItemOrGroup = Item | Group;
+    type Item = IconButton | MenuDropdown;
+    interface IconButton {
+        type: 'icon-button';
+        id: string;
+        text: string;
+        disabled?: boolean;
+        loading?: boolean;
+        loadingText?: string;
+        iconName?: IconProps.Name;
+        iconAlt?: string;
+        iconUrl?: string;
+        iconSvg?: React.ReactNode;
+        popoverFeedback?: React.ReactNode;
+    }
+    interface MenuDropdown {
+        type: 'menu-dropdown';
+        id: string;
+        text: string;
+        disabled?: boolean;
+        loading?: boolean;
+        loadingText?: string;
+        items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;
+    }
+    interface Group {
+        type: 'group';
+        text: string;
+        items: ReadonlyArray<ButtonGroupProps.Item>;
+    }
+    interface ItemClickDetails {
+        id: string;
+    }
+    interface Ref {
+        /**
+         * Focuses button group item by id.
+         */
+        focus(itemId: string): void;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +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"}

package/lib/internal/template/button-group/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

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

@@ -0,0 +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"]}

package/lib/internal/template/button-group/internal.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonGroupProps, InternalButtonGroupProps } from './interfaces';
+declare const InternalButtonGroup: React.ForwardRefExoticComponent<InternalButtonGroupProps & React.RefAttributes<ButtonGroupProps.Ref>>;
+export default InternalButtonGroup;
+//# sourceMappingURL=internal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAiB5F,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAM1E,QAAA,MAAM,mBAAmB,uGAoKxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/internal/template/button-group/internal.js

@@ -0,0 +1,123 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { getBaseProps } from '../internal/base-component';
+import { getAllFocusables } from '../internal/components/focus-lock/utils';
+import { SingleTabStopNavigationProvider, } from '../internal/context/single-tab-stop-navigation-context';
+import { hasModifierKeys } from '../internal/events';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { KeyCode } from '../internal/keycode';
+import { circleIndex } from '../internal/utils/circle-index';
+import handleKey from '../internal/utils/handle-key';
+import ItemElement from './item-element.js';
+import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
+const InternalButtonGroup = forwardRef((_a, ref) => {
+    var { items = [], onItemClick, ariaLabel, dropdownExpandToViewport, __internalRootRef = null } = _a, props = __rest(_a, ["items", "onItemClick", "ariaLabel", "dropdownExpandToViewport", "__internalRootRef"]);
+    const baseProps = getBaseProps(props);
+    const focusedIdRef = useRef(null);
+    const navigationAPI = useRef(null);
+    const containerObjectRef = useRef(null);
+    const containerRef = useMergeRefs(containerObjectRef, __internalRootRef);
+    const itemsRef = useRef({});
+    const [tooltip, setTooltip] = useState(null);
+    useImperativeHandle(ref, () => ({
+        focus: id => {
+            var _a;
+            (_a = itemsRef.current[id]) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+    }));
+    function getNextFocusTarget() {
+        var _a, _b;
+        if (containerObjectRef.current) {
+            const buttons = Array.from(containerObjectRef.current.querySelectorAll(`.${testUtilStyles.item}`));
+            const activeButtons = buttons.filter(button => !button.disabled);
+            return (_b = (_a = activeButtons.find(button => button.dataset.itemid === focusedIdRef.current)) !== null && _a !== void 0 ? _a : activeButtons[0]) !== null && _b !== void 0 ? _b : null;
+        }
+        return null;
+    }
+    function onUnregisterActive(focusableElement) {
+        var _a;
+        // Only refocus when the node is actually removed (no such ID anymore).
+        const target = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
+        if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {
+            target.focus();
+        }
+    }
+    useEffect(() => {
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
+    });
+    function onFocus(event) {
+        var _a;
+        if (event.target instanceof HTMLElement && event.target.dataset.itemid) {
+            focusedIdRef.current = event.target.dataset.itemid;
+        }
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
+    }
+    function onBlur() {
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
+    }
+    function onKeyDown(event) {
+        var _a;
+        const focusTarget = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
+        const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
+        if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {
+            return;
+        }
+        if (!containerObjectRef.current || !focusTarget) {
+            return;
+        }
+        // Ignore navigation when the focused element is not an item.
+        if (document.activeElement && !document.activeElement.matches(`.${testUtilStyles.item}`)) {
+            return;
+        }
+        event.preventDefault();
+        const focusables = getFocusablesFrom(containerObjectRef.current);
+        const activeIndex = focusables.indexOf(focusTarget);
+        handleKey(event, {
+            onHome: () => focusElement(focusables[0]),
+            onEnd: () => focusElement(focusables[focusables.length - 1]),
+            onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),
+            onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
+        });
+    }
+    function focusElement(element) {
+        element.focus();
+    }
+    // List all non-disabled and registered focusables: those are eligible for keyboard navigation.
+    function getFocusablesFrom(target) {
+        function isElementRegistered(element) {
+            var _a, _b;
+            return (_b = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.isRegistered(element)) !== null && _b !== void 0 ? _b : false;
+        }
+        function isElementDisabled(element) {
+            if (element instanceof HTMLButtonElement) {
+                return element.disabled;
+            }
+            return false;
+        }
+        return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));
+    }
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, testUtilStyles['button-group'], baseProps.className), ref: containerRef, role: "toolbar", "aria-label": ariaLabel, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown }),
+        React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget, onUnregisterActive: onUnregisterActive }, items.map((itemOrGroup, index) => {
+            var _a;
+            const itemContent = (item) => (React.createElement(ItemElement, { key: item.id, item: item, dropdownExpandToViewport: dropdownExpandToViewport, tooltip: tooltip, setTooltip: setTooltip, onItemClick: onItemClick, ref: element => (itemsRef.current[item.id] = element) }));
+            const isGroupBefore = ((_a = items[index - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'group';
+            const currentItem = items[index];
+            const isGroupNow = (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'group';
+            const shouldAddDivider = isGroupBefore || (!isGroupBefore && isGroupNow && index !== 0);
+            if (isGroupNow && currentItem.items.length === 0) {
+                warnOnce('ButtonGroup', 'Empty group detected. Empty groups are not allowed.');
+            }
+            return (React.createElement(React.Fragment, { key: itemOrGroup.type === 'group' ? index : itemOrGroup.id },
+                shouldAddDivider && React.createElement("div", { className: styles.divider }),
+                itemOrGroup.type === 'group' ? (React.createElement("div", { key: index, role: "group", "aria-label": itemOrGroup.text, className: styles.group }, itemOrGroup.items.map(item => itemContent(item)))) : (itemContent(itemOrGroup))));
+        }))));
+});
+export default InternalButtonGroup;
+//# sourceMappingURL=internal.js.map

package/lib/internal/template/button-group/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/button-group/internal.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, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { getAllFocusables } from '../internal/components/focus-lock/utils';\nimport {\n  SingleTabStopNavigationAPI,\n  SingleTabStopNavigationProvider,\n} from '../internal/context/single-tab-stop-navigation-context';\nimport { hasModifierKeys } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { KeyCode } from '../internal/keycode';\nimport { circleIndex } from '../internal/utils/circle-index';\nimport handleKey from '../internal/utils/handle-key';\nimport { ButtonGroupProps, InternalButtonGroupProps } from './interfaces';\nimport ItemElement from './item-element.js';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nconst InternalButtonGroup = forwardRef(\n  (\n    {\n      items = [],\n      onItemClick,\n      ariaLabel,\n      dropdownExpandToViewport,\n      __internalRootRef = null,\n      ...props\n    }: InternalButtonGroupProps,\n    ref: React.Ref<ButtonGroupProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(props);\n    const focusedIdRef = useRef<null | string>(null);\n    const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n    const containerObjectRef = useRef<HTMLDivElement>(null);\n    const containerRef = useMergeRefs(containerObjectRef, __internalRootRef);\n    const itemsRef = useRef<Record<string, ButtonProps.Ref | null>>({});\n    const [tooltip, setTooltip] = useState<null | { item: string; feedback: boolean }>(null);\n\n    useImperativeHandle(ref, () => ({\n      focus: id => {\n        itemsRef.current[id]?.focus();\n      },\n    }));\n\n    function getNextFocusTarget(): null | HTMLElement {\n      if (containerObjectRef.current) {\n        const buttons: HTMLButtonElement[] = Array.from(\n          containerObjectRef.current.querySelectorAll(`.${testUtilStyles.item}`)\n        );\n        const activeButtons = buttons.filter(button => !button.disabled);\n        return activeButtons.find(button => button.dataset.itemid === focusedIdRef.current) ?? activeButtons[0] ?? null;\n      }\n      return null;\n    }\n\n    function onUnregisterActive(focusableElement: HTMLElement) {\n      // Only refocus when the node is actually removed (no such ID anymore).\n      const target = navigationAPI.current?.getFocusTarget();\n\n      if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {\n        target.focus();\n      }\n    }\n\n    useEffect(() => {\n      navigationAPI.current?.updateFocusTarget();\n    });\n\n    function onFocus(event: React.FocusEvent) {\n      if (event.target instanceof HTMLElement && event.target.dataset.itemid) {\n        focusedIdRef.current = event.target.dataset.itemid;\n      }\n\n      navigationAPI.current?.updateFocusTarget();\n    }\n\n    function onBlur() {\n      navigationAPI.current?.updateFocusTarget();\n    }\n\n    function onKeyDown(event: React.KeyboardEvent) {\n      const focusTarget = navigationAPI.current?.getFocusTarget();\n      const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n      if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {\n        return;\n      }\n      if (!containerObjectRef.current || !focusTarget) {\n        return;\n      }\n      // Ignore navigation when the focused element is not an item.\n      if (document.activeElement && !document.activeElement.matches(`.${testUtilStyles.item}`)) {\n        return;\n      }\n      event.preventDefault();\n\n      const focusables = getFocusablesFrom(containerObjectRef.current);\n      const activeIndex = focusables.indexOf(focusTarget);\n      handleKey(event as any, {\n        onHome: () => focusElement(focusables[0]),\n        onEnd: () => focusElement(focusables[focusables.length - 1]),\n        onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n        onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n      });\n    }\n\n    function focusElement(element: HTMLElement) {\n      element.focus();\n    }\n\n    // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n    function getFocusablesFrom(target: HTMLElement) {\n      function isElementRegistered(element: HTMLElement) {\n        return navigationAPI.current?.isRegistered(element) ?? false;\n      }\n\n      function isElementDisabled(element: HTMLElement) {\n        if (element instanceof HTMLButtonElement) {\n          return element.disabled;\n        }\n\n        return false;\n      }\n\n      return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));\n    }\n\n    return (\n      <div\n        {...baseProps}\n        className={clsx(styles.root, testUtilStyles['button-group'], baseProps.className)}\n        ref={containerRef}\n        role=\"toolbar\"\n        aria-label={ariaLabel}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n      >\n        <SingleTabStopNavigationProvider\n          ref={navigationAPI}\n          navigationActive={true}\n          getNextFocusTarget={getNextFocusTarget}\n          onUnregisterActive={onUnregisterActive}\n        >\n          {items.map((itemOrGroup, index) => {\n            const itemContent = (item: ButtonGroupProps.Item) => (\n              <ItemElement\n                key={item.id}\n                item={item}\n                dropdownExpandToViewport={dropdownExpandToViewport}\n                tooltip={tooltip}\n                setTooltip={setTooltip}\n                onItemClick={onItemClick}\n                ref={element => (itemsRef.current[item.id] = element)}\n              />\n            );\n\n            const isGroupBefore = items[index - 1]?.type === 'group';\n            const currentItem = items[index];\n            const isGroupNow = currentItem?.type === 'group';\n            const shouldAddDivider = isGroupBefore || (!isGroupBefore && isGroupNow && index !== 0);\n\n            if (isGroupNow && currentItem.items.length === 0) {\n              warnOnce('ButtonGroup', 'Empty group detected. Empty groups are not allowed.');\n            }\n\n            return (\n              <React.Fragment key={itemOrGroup.type === 'group' ? index : itemOrGroup.id}>\n                {shouldAddDivider && <div className={styles.divider} />}\n                {itemOrGroup.type === 'group' ? (\n                  <div key={index} role=\"group\" aria-label={itemOrGroup.text} className={styles.group}>\n                    {itemOrGroup.items.map(item => itemContent(item))}\n                  </div>\n                ) : (\n                  itemContent(itemOrGroup)\n                )}\n              </React.Fragment>\n            );\n          })}\n        </SingleTabStopNavigationProvider>\n      </div>\n    );\n  }\n);\n\nexport default InternalButtonGroup;\n"]}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ButtonProps } from '../button/interfaces.js';
+import { NonCancelableEventHandler } from '../internal/events';
+import { ButtonGroupProps } from './interfaces';
+interface ItemElementProps {
+    item: ButtonGroupProps.Item;
+    dropdownExpandToViewport?: boolean;
+    tooltip: null | {
+        item: string;
+        feedback: boolean;
+    };
+    setTooltip: (tooltip: null | {
+        item: string;
+        feedback: boolean;
+    }) => void;
+    onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;
+}
+declare const ItemElement: React.ForwardRefExoticComponent<ItemElementProps & React.RefAttributes<ButtonProps.Ref>>;
+export default ItemElement;
+//# sourceMappingURL=item-element.d.ts.map

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

@@ -0,0 +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,EAAoC,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAGjG,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"}

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

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+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 MenuDropdownItem from './menu-dropdown-item';
+import styles from './styles.css.js';
+const ItemElement = forwardRef(({ item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }, ref) => {
+    const containerRef = useRef(null);
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            var _a;
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+    }));
+    useEffect(() => {
+        if ((tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) !== item.id) {
+            return;
+        }
+        const close = () => {
+            setTooltip(null);
+        };
+        const handlePointerDownEvent = (event) => {
+            var _a;
+            if (event.target && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                return;
+            }
+            close();
+        };
+        const handleKeyDownEvent = (event) => {
+            if (event.key === 'Escape') {
+                close();
+            }
+        };
+        window.addEventListener('pointerdown', handlePointerDownEvent);
+        window.addEventListener('keydown', handleKeyDownEvent);
+        return () => {
+            window.removeEventListener('pointerdown', handlePointerDownEvent);
+            window.removeEventListener('keydown', handleKeyDownEvent);
+        };
+    }, [item.id, tooltip, setTooltip]);
+    const onShowTooltipSoft = (show) => {
+        if (!(tooltip === null || tooltip === void 0 ? void 0 : tooltip.feedback)) {
+            setTooltip(show ? { item: item.id, feedback: false } : null);
+        }
+    };
+    const onShowTooltipHard = (show) => {
+        if (!show && item.id !== (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item)) {
+            return;
+        }
+        setTooltip(show ? { item: item.id, feedback: false } : null);
+    };
+    const onClickHandler = (event) => {
+        const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;
+        if (hasPopoverFeedback) {
+            setTooltip({ item: item.id, feedback: true });
+        }
+        fireCancelableEvent(onItemClick, { id: 'id' in event.detail ? event.detail.id : item.id }, event);
+    };
+    return (React.createElement("div", { key: item.id, className: styles['item-wrapper'], ref: containerRef, onPointerEnter: () => onShowTooltipSoft(true), onPointerLeave: () => onShowTooltipSoft(false), onFocus: event => {
+            // Showing no tooltip when the focus comes from inside the container.
+            // This is needed to prevent the tooltip after a menu closes with item selection or Escape.
+            if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {
+                return;
+            }
+            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 === '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;
+//# sourceMappingURL=item-element.js.map

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

@@ -0,0 +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 { ClickDetail, 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 | ClickDetail>) => {\n      const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n      if (hasPopoverFeedback) {\n        setTooltip({ item: item.id, feedback: true });\n      }\n\n      fireCancelableEvent(onItemClick, { id: 'id' in event.detail ? event.detail.id : item.id }, 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"]}

package/lib/internal/template/button-group/menu-dropdown-item.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ButtonDropdownProps } from '../button-dropdown/interfaces';
+import { CancelableEventHandler } from '../internal/events';
+import { ButtonGroupProps } from './interfaces';
+interface MenuDropdownItemProps {
+    item: ButtonGroupProps.MenuDropdown;
+    showTooltip: boolean;
+    onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
+    expandToViewport?: boolean;
+}
+declare const MenuDropdownItem: React.ForwardRefExoticComponent<MenuDropdownItemProps & React.RefAttributes<ButtonDropdownProps.Ref>>;
+export default MenuDropdownItem;
+//# sourceMappingURL=menu-dropdown-item.d.ts.map

package/lib/internal/template/button-group/menu-dropdown-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAuB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,UAAU,qBAAqB;IAC7B,IAAI,EAAE,gBAAgB,CAAC,YAAY,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,uGAiDrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}