@cloudscape-design/components 3.0.0

package/button-dropdown/interfaces.d.ts

@@ -0,0 +1,186 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';
+import { IconProps } from '../icon/interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface ButtonDropdownProps extends BaseComponentProps {
+    /**
+     * Array of objects, each having the following properties:
+  
+     * - `id` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.
+  
+     * - `text` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.
+  
+     * - `disabled` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible.
+  
+     * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context.
+  
+     * - `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.
+     * An item which belongs to nested group has the following properties: `id`, `text`, `disabled` and `description`.
+  
+     * - `description` (string) - additional data that will be passed to a `data-description` attribute.
+  
+     * - `href` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.
+  
+     * - `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.
+  
+     * - `externalIconAriaLabel` (string) - Adds an `aria-label` to the external icon.
+  
+     * - `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`.
+  
+     * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.
+  
+     * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).
+  
+     */
+    items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;
+    /**
+     * Determines whether the button dropdown is disabled. Users cannot interact with the control if it's disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.
+     * It prevents clicks.
+     */
+    loading?: boolean;
+    /** Determines the general styling of the button dropdown.
+     * * `primary` for primary buttons
+     * * `normal` for secondary buttons
+     * * `icon` for icon buttons
+     */
+    variant?: ButtonDropdownProps.Variant;
+    /**
+     * Controls expandability of the item groups.
+     */
+    expandableGroups?: boolean;
+    /**
+     * By default, the dropdown height is constrained to fit inside the height of its parent element.
+     * Enabling this property will allow the dropdown to extend beyond its parent by using fixed positioning and
+     * [React Portals](https://reactjs.org/docs/portals.html).
+     * If you want the dropdown to ignore the `overflow` CSS property of its parents,
+     * such as in a split view layout, enable this property.
+     * However, use discretion.
+     * If you don't need to, we recommend you don't enable this property because there is a known issue with
+     * the '[aria-owns](https://a11ysupport.io/tech/aria/aria-owns_attribute)' attribute in Safari with VoiceOver that
+     * prevents VO specific controls (CTRL+OPT+Left/Right) from entering a dropdown on Safari due to its position in the DOM.
+     * If you don't need to, we also recommend you don't enable this property because fixed positioning results
+     * in a slight, visible lag when scrolling complex pages.
+     */
+    expandToViewport?: boolean;
+    /**
+     * Adds `aria-label` to the button dropdown trigger.
+     * It should be used in buttons that don't have text in order to make them accessible.
+     */
+    ariaLabel?: string;
+    /**
+     * Text displayed in the button dropdown trigger.
+     * @displayname text
+     */
+    children?: React.ReactNode;
+    /**
+     * 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?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
+    /**
+     * Called when the user clicks on an item with the left mouse button without pressing
+     * modifier keys (that is, CTRL, ALT, SHIFT, META), and the item has an `href` set.
+     */
+    onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
+}
+export declare namespace ButtonDropdownProps {
+    type Variant = 'normal' | 'primary' | 'icon';
+    interface Item {
+        id: string;
+        text: string;
+        disabled?: boolean;
+        disabledReason?: string;
+        description?: string;
+        href?: string;
+        external?: boolean;
+        externalIconAriaLabel?: string;
+        iconAlt?: string;
+        iconName?: IconProps.Name;
+        iconUrl?: string;
+        iconSvg?: React.ReactNode;
+    }
+    interface ItemGroup extends Omit<Item, 'id' | 'text'> {
+        id?: string;
+        text?: string;
+        items: Items;
+    }
+    type ItemOrGroup = Item | ItemGroup;
+    type Items = ReadonlyArray<ItemOrGroup>;
+    interface ItemClickDetails extends BaseNavigationDetail {
+        id: string;
+    }
+    interface Ref {
+        /**
+         * Focuses the underlying native button.
+         */
+        focus(): void;
+    }
+}
+export interface ButtonDropdownSettings {
+    hasExpandableGroups: boolean;
+    isInRestrictedView?: boolean;
+}
+export interface HighlightProps {
+    targetItem: ButtonDropdownProps.ItemOrGroup | null;
+    isHighlighted: (item: ButtonDropdownProps.ItemOrGroup) => boolean;
+    isExpanded: (group: ButtonDropdownProps.ItemGroup) => boolean;
+    highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;
+}
+export declare type GroupToggle = (item: ButtonDropdownProps.ItemGroup, event: React.SyntheticEvent) => void;
+export declare type ItemActivate = (item: ButtonDropdownProps.Item, event: React.MouseEvent | React.KeyboardEvent) => void;
+export interface CategoryProps extends HighlightProps {
+    item: ButtonDropdownProps.ItemGroup;
+    onGroupToggle: GroupToggle;
+    onItemActivate: ItemActivate;
+    disabled: boolean;
+    expandToViewport?: boolean;
+    variant?: ItemListProps['variant'];
+}
+export interface ItemListProps extends HighlightProps {
+    items: ButtonDropdownProps.Items;
+    onGroupToggle: GroupToggle;
+    onItemActivate: ItemActivate;
+    categoryDisabled?: boolean;
+    hasExpandableGroups?: boolean;
+    hasCategoryHeader?: boolean;
+    expandToViewport?: boolean;
+    variant?: InternalButtonDropdownProps['variant'];
+}
+export interface LinkItem extends ButtonDropdownProps.Item {
+    href: string;
+}
+export interface ItemProps {
+    item: ButtonDropdownProps.Item | LinkItem;
+    disabled: boolean;
+    highlighted: boolean;
+    onItemActivate: ItemActivate;
+    highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;
+    first?: boolean;
+    last: boolean;
+    hasCategoryHeader: boolean;
+    variant?: ItemListProps['variant'];
+}
+export interface InternalButtonDropdownProps extends Omit<ButtonDropdownProps, 'variant'>, InternalBaseComponentProps {
+    customTriggerBuilder?: (clickHandler: () => void, ref: React.Ref<any>, isDisabled: boolean, isExpanded: boolean) => React.ReactNode;
+    variant?: ButtonDropdownProps['variant'] | 'navigation';
+    /**
+     * Optional text that is displayed as the title at the top of the dropdown.
+     */
+    title?: string;
+    /**
+     * Optional text that is displayed underneath the title at the top of the dropdown.
+     */
+    description?: string;
+    /**
+     * Determines that the dropdown should preferably be aligned to the center of the trigger
+     * instead of dropping left or right.
+     */
+    preferCenter?: boolean;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/button-dropdown/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/interfaces.ts"],"names":[],"mappings":"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"}

package/button-dropdown/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/button-dropdown/interfaces.js.map

@@ -0,0 +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';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { IconProps } from '../icon/interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface ButtonDropdownProps extends BaseComponentProps {\n  /**\n   * Array of objects, each having the following properties:\n\n   * - `id` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.\n\n   * - `text` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.\n\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\n   * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context.\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   * - `description` (string) - additional data that will be passed to a `data-description` attribute.\n\n   * - `href` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.\n\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\n   * - `externalIconAriaLabel` (string) - Adds an `aria-label` to the external icon.\n\n   * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n\n   * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\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   * 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  /** Determines the general styling of the button dropdown.\n   * * `primary` for primary buttons\n   * * `normal` for secondary buttons\n   * * `icon` for icon buttons\n   */\n  variant?: ButtonDropdownProps.Variant;\n  /**\n   * Controls expandability of the item groups.\n   */\n  expandableGroups?: boolean;\n  /**\n   * By default, the dropdown height is constrained to fit inside the height of its parent element.\n   * Enabling this property will allow the dropdown to extend beyond its parent by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   * If you want the dropdown to ignore the `overflow` CSS property of its parents,\n   * such as in a split view layout, enable this property.\n   * However, use discretion.\n   * If you don't need to, we recommend you don't enable this property because there is a known issue with\n   * the '[aria-owns](https://a11ysupport.io/tech/aria/aria-owns_attribute)' attribute in Safari with VoiceOver that\n   * prevents VO specific controls (CTRL+OPT+Left/Right) from entering a dropdown on Safari due to its position in the DOM.\n   * If you don't need to, we also recommend you don't enable this property because fixed positioning results\n   * in a slight, visible lag when scrolling complex pages.\n   */\n  expandToViewport?: boolean;\n  /**\n   * Adds `aria-label` to the button dropdown trigger.\n   * It should be used in buttons that don't have text in order to make them accessible.\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\nexport namespace ButtonDropdownProps {\n  export type Variant = 'normal' | 'primary' | 'icon';\n\n  export interface Item {\n    id: string;\n    text: 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 ItemGroup extends Omit<Item, 'id' | 'text'> {\n    id?: string;\n    text?: string;\n    items: Items;\n  }\n\n  export type ItemOrGroup = Item | ItemGroup;\n\n  export type Items = ReadonlyArray<ItemOrGroup>;\n\n  export interface ItemClickDetails extends BaseNavigationDetail {\n    id: string;\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  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 = (item: ButtonDropdownProps.Item, event: React.MouseEvent | React.KeyboardEvent) => void;\n\nexport interface CategoryProps extends HighlightProps {\n  item: ButtonDropdownProps.ItemGroup;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  disabled: boolean;\n  expandToViewport?: boolean;\n  variant?: ItemListProps['variant'];\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  expandToViewport?: boolean;\n  variant?: InternalButtonDropdownProps['variant'];\n}\n\nexport interface LinkItem extends ButtonDropdownProps.Item {\n  href: string;\n}\n\nexport interface ItemProps {\n  item: ButtonDropdownProps.Item | LinkItem;\n  disabled: boolean;\n  highlighted: boolean;\n  onItemActivate: ItemActivate;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n  first?: boolean;\n  last: boolean;\n  hasCategoryHeader: boolean;\n  variant?: ItemListProps['variant'];\n}\n\nexport interface InternalButtonDropdownProps extends Omit<ButtonDropdownProps, 'variant'>, InternalBaseComponentProps {\n  customTriggerBuilder?: (\n    clickHandler: () => void,\n    ref: React.Ref<any>,\n    isDisabled: boolean,\n    isExpanded: boolean\n  ) => React.ReactNode;\n  variant?: ButtonDropdownProps['variant'] | 'navigation';\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"]}

package/button-dropdown/internal.d.ts

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

package/button-dropdown/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAehF,QAAA,MAAM,sBAAsB,6GAgL3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/button-dropdown/internal.js

@@ -0,0 +1,89 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { getBaseProps } from '../internal/base-component';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import Dropdown from '../internal/components/dropdown';
+import ItemsList from './items-list';
+import { useButtonDropdown } from './utils/use-button-dropdown';
+import OptionsList from '../internal/components/options-list';
+import { InternalButton } from '../button/internal';
+import { useMobile } from '../internal/hooks/use-mobile';
+import useForwardFocus from '../internal/hooks/forward-focus';
+import { usePrevious } from '../internal/hooks/use-previous';
+import InternalBox from '../box/internal';
+import { checkSafeUrl } from '../internal/utils/check-safe-url';
+var InternalButtonDropdown = React.forwardRef(function (_a, ref) {
+    var items = _a.items, _b = _a.variant, variant = _b === void 0 ? 'normal' : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.expandableGroups, expandableGroups = _e === void 0 ? false : _e, children = _a.children, onItemClick = _a.onItemClick, onItemFollow = _a.onItemFollow, customTriggerBuilder = _a.customTriggerBuilder, expandToViewport = _a.expandToViewport, ariaLabel = _a.ariaLabel, title = _a.title, description = _a.description, preferCenter = _a.preferCenter, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["items", "variant", "loading", "disabled", "expandableGroups", "children", "onItemClick", "onItemFollow", "customTriggerBuilder", "expandToViewport", "ariaLabel", "title", "description", "preferCenter", "__internalRootRef"]);
+    var isInRestrictedView = useMobile();
+    var usingMouse = useRef(true);
+    var dropdownId = useUniqueId('dropdown');
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+        var item = items_1[_i];
+        checkSafeUrl('ButtonDropdown', item.href);
+    }
+    var _f = useButtonDropdown({
+        items: items,
+        onItemClick: onItemClick,
+        onItemFollow: onItemFollow,
+        hasExpandableGroups: expandableGroups,
+        isInRestrictedView: isInRestrictedView,
+        usingMouse: usingMouse
+    }), isOpen = _f.isOpen, targetItem = _f.targetItem, isHighlighted = _f.isHighlighted, isExpanded = _f.isExpanded, highlightItem = _f.highlightItem, onKeyDown = _f.onKeyDown, onKeyUp = _f.onKeyUp, onItemActivate = _f.onItemActivate, onGroupToggle = _f.onGroupToggle, toggleDropdown = _f.toggleDropdown;
+    var handleMouseEvent = function () {
+        usingMouse.current = true;
+    };
+    var baseProps = getBaseProps(props);
+    var dropdownRef = useRef(null);
+    useForwardFocus(ref, dropdownRef);
+    var clickHandler = function () {
+        if (!usingMouse.current) {
+            return;
+        }
+        if (!loading && !disabled) {
+            toggleDropdown();
+            if (dropdownRef.current) {
+                dropdownRef.current.focus();
+            }
+        }
+    };
+    var canBeOpened = !loading && !disabled;
+    var wasOpen = usePrevious(isOpen);
+    useEffect(function () {
+        if (!isOpen && dropdownRef.current && wasOpen) {
+            dropdownRef.current.focus();
+        }
+    }, [isOpen, wasOpen]);
+    var triggerVariant = variant === 'navigation' ? undefined : variant;
+    var iconProps = variant === 'icon'
+        ? {
+            iconName: 'ellipsis'
+        }
+        : {
+            iconName: 'caret-down-filled',
+            iconAlign: 'right',
+            __iconClass: canBeOpened && isOpen ? styles['rotate-up'] : styles['rotate-down']
+        };
+    var trigger = customTriggerBuilder ? (customTriggerBuilder(clickHandler, dropdownRef, disabled, isOpen)) : (React.createElement(InternalButton, __assign({ ref: dropdownRef }, iconProps, { variant: triggerVariant, loading: loading, disabled: disabled, onClick: function (event) {
+            event.preventDefault();
+            clickHandler();
+        }, ariaLabel: ariaLabel, "aria-haspopup": true, ariaExpanded: canBeOpened && isOpen, formAction: "none" }), children));
+    var hasHeader = title || description;
+    var headerId = useUniqueId('awsui-button-dropdown__header');
+    return (React.createElement("div", __assign({}, baseProps, { onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseDown: handleMouseEvent, className: clsx(styles['button-dropdown'], styles["variant-".concat(variant)], baseProps.className), "aria-owns": expandToViewport && isOpen ? dropdownId : undefined, ref: __internalRootRef }),
+        React.createElement(Dropdown, { open: canBeOpened && isOpen, stretchWidth: false, stretchTriggerHeight: variant === 'navigation', expandToViewport: expandToViewport, preferCenter: preferCenter, onDropdownClose: function () {
+                toggleDropdown();
+            }, trigger: trigger, dropdownId: dropdownId },
+            hasHeader && (React.createElement("div", { className: styles.header, id: headerId },
+                title && (React.createElement(InternalBox, { fontSize: "heading-s", fontWeight: "bold" },
+                    React.createElement("span", { className: styles.title }, title))),
+                description && (React.createElement(InternalBox, { fontSize: "body-s" },
+                    React.createElement("span", { className: styles.description }, description))))),
+            React.createElement(OptionsList, { open: canBeOpened && isOpen, position: "static", role: "menu", decreaseTopMargin: true, ariaLabelledby: hasHeader ? headerId : undefined },
+                React.createElement(ItemsList, { items: items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, hasExpandableGroups: expandableGroups, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, expandToViewport: expandToViewport, variant: variant })))));
+});
+export default InternalButtonDropdown;
+//# sourceMappingURL=internal.js.map

package/button-dropdown/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/button-dropdown/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { ButtonDropdownProps, InternalButtonDropdownProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport Dropdown from '../internal/components/dropdown';\nimport ItemsList from './items-list';\nimport { useButtonDropdown } from './utils/use-button-dropdown';\nimport OptionsList from '../internal/components/options-list';\nimport { InternalButton } from '../button/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { usePrevious } from '../internal/hooks/use-previous';\nimport InternalBox from '../box/internal';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\nconst InternalButtonDropdown = React.forwardRef(\n  (\n    {\n      items,\n      variant = 'normal',\n      loading = false,\n      disabled = false,\n      expandableGroups = false,\n      children,\n      onItemClick,\n      onItemFollow,\n      customTriggerBuilder,\n      expandToViewport,\n      ariaLabel,\n      title,\n      description,\n      preferCenter,\n      __internalRootRef,\n      ...props\n    }: InternalButtonDropdownProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const isInRestrictedView = useMobile();\n    const usingMouse = useRef(true);\n    const dropdownId = useUniqueId('dropdown');\n    for (const item of items) {\n      checkSafeUrl('ButtonDropdown', item.href);\n    }\n\n    const {\n      isOpen,\n      targetItem,\n      isHighlighted,\n      isExpanded,\n      highlightItem,\n      onKeyDown,\n      onKeyUp,\n      onItemActivate,\n      onGroupToggle,\n      toggleDropdown,\n    } = useButtonDropdown({\n      items,\n      onItemClick,\n      onItemFollow,\n      hasExpandableGroups: expandableGroups,\n      isInRestrictedView,\n      usingMouse,\n    });\n\n    const handleMouseEvent = () => {\n      usingMouse.current = true;\n    };\n\n    const baseProps = getBaseProps(props);\n\n    const dropdownRef = useRef<HTMLElement>(null);\n    useForwardFocus(ref, dropdownRef);\n\n    const clickHandler = () => {\n      if (!usingMouse.current) {\n        return;\n      }\n      if (!loading && !disabled) {\n        toggleDropdown();\n        if (dropdownRef.current) {\n          dropdownRef.current.focus();\n        }\n      }\n    };\n\n    const canBeOpened = !loading && !disabled;\n    const wasOpen = usePrevious(isOpen);\n\n    useEffect(() => {\n      if (!isOpen && dropdownRef.current && wasOpen) {\n        dropdownRef.current.focus();\n      }\n    }, [isOpen, wasOpen]);\n\n    const triggerVariant = variant === 'navigation' ? undefined : variant;\n    const iconProps: Partial<ButtonProps & { __iconClass?: string }> =\n      variant === 'icon'\n        ? {\n            iconName: 'ellipsis',\n          }\n        : {\n            iconName: 'caret-down-filled',\n            iconAlign: 'right',\n            __iconClass: canBeOpened && isOpen ? styles['rotate-up'] : styles['rotate-down'],\n          };\n\n    const trigger = customTriggerBuilder ? (\n      customTriggerBuilder(clickHandler, dropdownRef, disabled, isOpen)\n    ) : (\n      <InternalButton\n        ref={dropdownRef}\n        {...iconProps}\n        variant={triggerVariant}\n        loading={loading}\n        disabled={disabled}\n        onClick={(event: Event) => {\n          event.preventDefault();\n          clickHandler();\n        }}\n        ariaLabel={ariaLabel}\n        aria-haspopup={true}\n        ariaExpanded={canBeOpened && isOpen}\n        formAction=\"none\"\n      >\n        {children}\n      </InternalButton>\n    );\n\n    const hasHeader = title || description;\n    const headerId = useUniqueId('awsui-button-dropdown__header');\n\n    return (\n      <div\n        {...baseProps}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        onMouseDown={handleMouseEvent}\n        className={clsx(styles['button-dropdown'], styles[`variant-${variant}`], baseProps.className)}\n        aria-owns={expandToViewport && isOpen ? dropdownId : undefined}\n        ref={__internalRootRef}\n      >\n        <Dropdown\n          open={canBeOpened && isOpen}\n          stretchWidth={false}\n          stretchTriggerHeight={variant === 'navigation'}\n          expandToViewport={expandToViewport}\n          preferCenter={preferCenter}\n          onDropdownClose={() => {\n            toggleDropdown();\n          }}\n          trigger={trigger}\n          dropdownId={dropdownId}\n        >\n          {hasHeader && (\n            <div className={styles.header} id={headerId}>\n              {title && (\n                <InternalBox fontSize=\"heading-s\" fontWeight=\"bold\">\n                  <span className={styles.title}>{title}</span>\n                </InternalBox>\n              )}\n              {description && (\n                <InternalBox fontSize=\"body-s\">\n                  <span className={styles.description}>{description}</span>\n                </InternalBox>\n              )}\n            </div>\n          )}\n          <OptionsList\n            open={canBeOpened && isOpen}\n            position=\"static\"\n            role=\"menu\"\n            decreaseTopMargin={true}\n            ariaLabelledby={hasHeader ? headerId : undefined}\n          >\n            <ItemsList\n              items={items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              hasExpandableGroups={expandableGroups}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isExpanded={isExpanded}\n              highlightItem={highlightItem}\n              expandToViewport={expandToViewport}\n              variant={variant}\n            />\n          </OptionsList>\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\nexport default InternalButtonDropdown;\n"]}

package/button-dropdown/item-element/index.d.ts

@@ -0,0 +1,4 @@
+import { ItemProps } from '../interfaces';
+declare const ItemElement: ({ item, disabled, onItemActivate, highlighted, highlightItem, first, last, hasCategoryHeader, variant, }: ItemProps) => JSX.Element;
+export default ItemElement;
+//# sourceMappingURL=index.d.ts.map

package/button-dropdown/item-element/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAY1C,QAAA,MAAM,WAAW,6GAUd,SAAS,gBAsCX,CAAC;AAkFF,eAAe,WAAW,CAAC"}

package/button-dropdown/item-element/index.js

@@ -0,0 +1,85 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { isLinkItem } from '../utils/utils';
+import styles from './styles.css.js';
+import Tooltip from '../tooltip';
+import { getItemTarget } from '../utils/utils';
+import useHiddenDescription from '../utils/use-hidden-description';
+import InternalIcon from '../../icon/internal';
+import { useDropdownContext } from '../../internal/components/dropdown/context';
+import { getMenuItemProps } from '../utils/menu-item';
+var ItemElement = function (_a) {
+    var _b;
+    var item = _a.item, disabled = _a.disabled, onItemActivate = _a.onItemActivate, highlighted = _a.highlighted, highlightItem = _a.highlightItem, _c = _a.first, first = _c === void 0 ? false : _c, last = _a.last, hasCategoryHeader = _a.hasCategoryHeader, _d = _a.variant, variant = _d === void 0 ? 'normal' : _d;
+    var isLink = isLinkItem(item);
+    var onClick = function (event) {
+        // Stop propagation to parent node and handle event exclusively in here. This ensures
+        // that no group will interfere with the default behavior of links
+        event.stopPropagation();
+        if (!isLink) {
+            event.preventDefault();
+        }
+        if (!disabled) {
+            onItemActivate(item, event);
+        }
+    };
+    var onHover = function (event) {
+        event.preventDefault();
+        highlightItem(item);
+    };
+    return (React.createElement("li", { className: clsx(styles['item-element'], styles["variant-".concat(variant)], (_b = {},
+            _b[styles.highlighted] = highlighted,
+            _b[styles.disabled] = disabled,
+            _b[styles.first] = first,
+            _b[styles.last] = last,
+            _b[styles['has-category-header']] = hasCategoryHeader,
+            _b)), role: "presentation", "data-testid": item.id, "data-description": item.description, onClick: onClick, onMouseEnter: onHover, onTouchStart: onHover },
+        React.createElement(MenuItem, { item: item, disabled: disabled, highlighted: highlighted })));
+};
+function MenuItem(_a) {
+    var item = _a.item, disabled = _a.disabled, highlighted = _a.highlighted;
+    var menuItemRef = useRef(null);
+    useEffect(function () {
+        if (highlighted && menuItemRef.current) {
+            menuItemRef.current.focus();
+        }
+    }, [highlighted]);
+    var isDisabledWithReason = disabled && item.disabledReason;
+    var _b = useHiddenDescription(item.disabledReason), targetProps = _b.targetProps, descriptionEl = _b.descriptionEl;
+    var menuItemProps = __assign(__assign({ className: styles['menu-item'], ref: menuItemRef, 
+        // We are using the roving tabindex technique to manage the focus state of the dropdown.
+        // The current element will always have tabindex=0 which means that it can be tabbed to,
+        // while all other items have tabindex=-1 so we can focus them when necessary.
+        tabIndex: highlighted ? 0 : -1 }, getMenuItemProps({ disabled: disabled })), (isDisabledWithReason ? targetProps : {}));
+    var menuItem = isLinkItem(item) ? (React.createElement("a", __assign({}, menuItemProps, { href: !disabled ? item.href : undefined, target: getItemTarget(item), rel: item.external ? 'noopener noreferrer' : undefined }),
+        React.createElement(MenuItemContent, { item: item, disabled: disabled }))) : (React.createElement("span", __assign({}, menuItemProps),
+        React.createElement(MenuItemContent, { item: item, disabled: disabled })));
+    var position = useDropdownContext().position;
+    var tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';
+    return isDisabledWithReason ? (React.createElement(Tooltip, { content: item.disabledReason, position: tooltipPosition },
+        menuItem,
+        descriptionEl)) : (menuItem);
+}
+var MenuItemContent = function (_a) {
+    var item = _a.item, disabled = _a.disabled;
+    var hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);
+    var hasExternal = isLinkItem(item) && item.external;
+    return (React.createElement(React.Fragment, null,
+        hasIcon && React.createElement(MenuItemIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }),
+        ' ',
+        item.text,
+        " ",
+        hasExternal && React.createElement(ExternalIcon, { disabled: disabled, ariaLabel: item.externalIconAriaLabel })));
+};
+var MenuItemIcon = function (props) { return (React.createElement("span", { className: styles.icon },
+    React.createElement(InternalIcon, __assign({}, props)))); };
+var ExternalIcon = function (_a) {
+    var disabled = _a.disabled, ariaLabel = _a.ariaLabel;
+    var icon = React.createElement(InternalIcon, { variant: disabled ? 'disabled' : 'normal', name: "external" });
+    return (React.createElement("span", { className: styles['external-icon'], role: ariaLabel ? 'img' : undefined, "aria-label": ariaLabel }, icon));
+};
+export default ItemElement;
+//# sourceMappingURL=index.js.map

package/button-dropdown/item-element/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { ItemProps } from '../interfaces';\nimport { isLinkItem } from '../utils/utils';\nimport styles from './styles.css.js';\nimport Tooltip from '../tooltip';\n\nimport { ButtonDropdownProps } from '../interfaces';\nimport { getItemTarget } from '../utils/utils';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ItemElement = ({\n  item,\n  disabled,\n  onItemActivate,\n  highlighted,\n  highlightItem,\n  first = false,\n  last,\n  hasCategoryHeader,\n  variant = 'normal',\n}: ItemProps) => {\n  const isLink = isLinkItem(item);\n  const onClick = (event: React.MouseEvent) => {\n    // Stop propagation to parent node and handle event exclusively in here. This ensures\n    // that no group will interfere with the default behavior of links\n    event.stopPropagation();\n    if (!isLink) {\n      event.preventDefault();\n    }\n    if (!disabled) {\n      onItemActivate(item, event);\n    }\n  };\n\n  const onHover = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    highlightItem(item);\n  };\n\n  return (\n    <li\n      className={clsx(styles['item-element'], styles[`variant-${variant}`], {\n        [styles.highlighted]: highlighted,\n        [styles.disabled]: disabled,\n        [styles.first]: first,\n        [styles.last]: last,\n        [styles['has-category-header']]: hasCategoryHeader,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      data-description={item.description}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      <MenuItem item={item} disabled={disabled} highlighted={highlighted} />\n    </li>\n  );\n};\n\ninterface MenuItemProps {\n  item: ButtonDropdownProps.Item;\n  disabled: boolean;\n  highlighted: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted }: MenuItemProps) {\n  const menuItemRef = useRef<HTMLSpanElement | HTMLAnchorElement>(null);\n\n  useEffect(() => {\n    if (highlighted && menuItemRef.current) {\n      menuItemRef.current.focus();\n    }\n  }, [highlighted]);\n\n  const isDisabledWithReason = disabled && item.disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const menuItemProps: React.HTMLProps<HTMLSpanElement | HTMLAnchorElement> = {\n    className: styles['menu-item'],\n    ref: menuItemRef,\n    // We are using the roving tabindex technique to manage the focus state of the dropdown.\n    // The current element will always have tabindex=0 which means that it can be tabbed to,\n    // while all other items have tabindex=-1 so we can focus them when necessary.\n    tabIndex: highlighted ? 0 : -1,\n    ...getMenuItemProps({ disabled }),\n    ...(isDisabledWithReason ? targetProps : {}),\n  };\n  const menuItem = isLinkItem(item) ? (\n    <a\n      {...(menuItemProps as React.HTMLProps<HTMLAnchorElement>)}\n      href={!disabled ? item.href : undefined}\n      target={getItemTarget(item)}\n      rel={item.external ? 'noopener noreferrer' : undefined}\n    >\n      <MenuItemContent item={item} disabled={disabled} />\n    </a>\n  ) : (\n    <span {...menuItemProps}>\n      <MenuItemContent item={item} disabled={disabled} />\n    </span>\n  );\n\n  const { position } = useDropdownContext();\n  const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';\n  return isDisabledWithReason ? (\n    <Tooltip content={item.disabledReason} position={tooltipPosition}>\n      {menuItem}\n      {descriptionEl}\n    </Tooltip>\n  ) : (\n    menuItem\n  );\n}\n\nconst MenuItemContent = ({ item, disabled }: { item: ButtonDropdownProps.Item; disabled: boolean }) => {\n  const hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);\n  const hasExternal = isLinkItem(item) && item.external;\n  return (\n    <>\n      {hasIcon && <MenuItemIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />}{' '}\n      {item.text} {hasExternal && <ExternalIcon disabled={disabled} ariaLabel={item.externalIconAriaLabel} />}\n    </>\n  );\n};\n\nconst MenuItemIcon = (props: InternalIconProps) => (\n  <span className={styles.icon}>\n    <InternalIcon {...props} />\n  </span>\n);\n\nconst ExternalIcon = ({ disabled, ariaLabel }: { disabled: boolean; ariaLabel?: string }) => {\n  const icon = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"external\" />;\n  return (\n    <span className={styles['external-icon']} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel}>\n      {icon}\n    </span>\n  );\n};\n\nexport default ItemElement;\n"]}

package/button-dropdown/item-element/styles.css.js

@@ -0,0 +1,18 @@
+
+    import './styles.scoped.css';
+    export default {
+  "item-element": "awsui_item-element_93a1u_1a6fw_93",
+  "disabled": "awsui_disabled_93a1u_1a6fw_103",
+  "last": "awsui_last_93a1u_1a6fw_110",
+  "highlighted": "awsui_highlighted_93a1u_1a6fw_113",
+  "variant-icon": "awsui_variant-icon_93a1u_1a6fw_117",
+  "variant-normal": "awsui_variant-normal_93a1u_1a6fw_117",
+  "variant-primary": "awsui_variant-primary_93a1u_1a6fw_117",
+  "variant-navigation": "awsui_variant-navigation_93a1u_1a6fw_127",
+  "first": "awsui_first_93a1u_1a6fw_130",
+  "has-category-header": "awsui_has-category-header_93a1u_1a6fw_130",
+  "menu-item": "awsui_menu-item_93a1u_1a6fw_144",
+  "icon": "awsui_icon_93a1u_1a6fw_162",
+  "external-icon": "awsui_external-icon_93a1u_1a6fw_167"
+};
+