@cloudscape-design/components 3.0.0

package/button/styles.selectors.js

@@ -0,0 +1,24 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "content": "awsui_content_vjswe_1hr3t_97",
+  "button": "awsui_button_vjswe_1hr3t_101",
+  "variant-normal": "awsui_variant-normal_vjswe_1hr3t_122",
+  "is-activated": "awsui_is-activated_vjswe_1hr3t_135",
+  "variant-icon": "awsui_variant-icon_vjswe_1hr3t_162",
+  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_1hr3t_162",
+  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_1hr3t_162",
+  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_1hr3t_180",
+  "disabled": "awsui_disabled_vjswe_1hr3t_198",
+  "variant-primary": "awsui_variant-primary_vjswe_1hr3t_206",
+  "variant-link": "awsui_variant-link_vjswe_1hr3t_290",
+  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_1hr3t_710",
+  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_1hr3t_797",
+  "button-no-text": "awsui_button-no-text_vjswe_1hr3t_881",
+  "button-no-wrap": "awsui_button-no-wrap_vjswe_1hr3t_885",
+  "icon-left": "awsui_icon-left_vjswe_1hr3t_901",
+  "icon-right": "awsui_icon-right_vjswe_1hr3t_906",
+  "icon": "awsui_icon_vjswe_1hr3t_901"
+};
+  

package/button-dropdown/category-elements/category-element.d.ts

@@ -0,0 +1,4 @@
+import { CategoryProps } from '../interfaces';
+declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
+export default CategoryElement;
+//# sourceMappingURL=category-element.d.ts.map

package/button-dropdown/category-elements/category-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,sHAUlB,aAAa,gBAgCf,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/button-dropdown/category-elements/category-element.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import ItemsList from '../items-list';
+var CategoryElement = function (_a) {
+    var _b;
+    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, variant = _a.variant;
+    // Hide the category title element from screen readers because it will be
+    // provided as an ARIA label.
+    return (React.createElement("li", { className: clsx(styles.category, styles["variant-".concat(variant)], disabled && styles.disabled), role: "presentation", "aria-disabled": disabled ? 'true' : undefined },
+        item.text && (React.createElement("p", { className: clsx(styles.header, (_b = {}, _b[styles.disabled] = disabled, _b)), "aria-hidden": "true" }, item.text)),
+        React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant })))));
+};
+export default CategoryElement;
+//# sourceMappingURL=category-element.js.map

package/button-dropdown/category-elements/category-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,IAAM,eAAe,GAAG,UAAC,EAUT;;QATd,IAAI,UAAA,EACJ,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA;IAEP,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,MAAG,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IACpF,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CategoryProps } from '../interfaces';\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport ItemsList from '../items-list';\n\nconst CategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isExpanded,\n  highlightItem,\n  disabled,\n  variant,\n}: CategoryProps) => {\n  // Hide the category title element from screen readers because it will be\n  // provided as an ARIA label.\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n      role=\"presentation\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      {item.text && (\n        <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n          {item.text}\n        </p>\n      )}\n      <ul className={clsx(styles['items-list-container'])} role=\"group\" aria-label={item.text}>\n        {item.items && (\n          <ItemsList\n            items={item.items}\n            onItemActivate={onItemActivate}\n            onGroupToggle={onGroupToggle}\n            targetItem={targetItem}\n            isHighlighted={isHighlighted}\n            isExpanded={isExpanded}\n            highlightItem={highlightItem}\n            categoryDisabled={disabled}\n            hasCategoryHeader={!!item.text}\n            variant={variant}\n          />\n        )}\n      </ul>\n    </li>\n  );\n};\n\nexport default CategoryElement;\n"]}

package/button-dropdown/category-elements/expandable-category-element.d.ts

@@ -0,0 +1,4 @@
+import { CategoryProps } from '../interfaces';
+declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, expandToViewport, variant, }: CategoryProps) => JSX.Element;
+export default ExpandableCategoryElement;
+//# sourceMappingURL=expandable-category-element.d.ts.map

package/button-dropdown/category-elements/expandable-category-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,wIAW5B,aAAa,gBAwGf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/button-dropdown/category-elements/expandable-category-element.js

@@ -0,0 +1,72 @@
+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 styles from './styles.css.js';
+import InternalIcon from '../../icon/internal';
+import ItemsList from '../items-list';
+import Dropdown from '../../internal/components/dropdown';
+import useHiddenDescription from '../utils/use-hidden-description';
+import Tooltip from '../tooltip.js';
+import { getMenuItemProps } from '../utils/menu-item';
+var ExpandableCategoryElement = function (_a) {
+    var _b, _c;
+    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, expandToViewport = _a.expandToViewport, variant = _a.variant;
+    var highlighted = isHighlighted(item);
+    var expanded = isExpanded(item);
+    var triggerRef = React.useRef(null);
+    var ref = useRef(null);
+    useEffect(function () {
+        if (triggerRef.current && highlighted && !expanded) {
+            triggerRef.current.focus();
+        }
+    }, [expanded, highlighted]);
+    var onClick = function (event) {
+        var _a;
+        if (!disabled) {
+            event.preventDefault();
+            onGroupToggle(item, event);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    var onHover = function (event) {
+        event.preventDefault();
+        highlightItem(item);
+    };
+    var isDisabledWithReason = !!item.disabledReason && item.disabled;
+    var _d = useHiddenDescription(item.disabledReason), targetProps = _d.targetProps, descriptionEl = _d.descriptionEl;
+    var trigger = item.text && (React.createElement("span", __assign({ className: clsx(styles.header, styles['expandable-header'], styles["variant-".concat(variant)], (_b = {},
+            _b[styles.disabled] = disabled,
+            _b[styles.highlighted] = highlighted,
+            _b)), 
+        // 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, ref: triggerRef }, getMenuItemProps({ parent: true, expanded: expanded, disabled: disabled }), (isDisabledWithReason ? targetProps : {})),
+        item.text,
+        React.createElement("span", { className: clsx(styles['expand-icon'], styles['expand-icon-right']) },
+            React.createElement(InternalIcon, { name: "caret-down-filled" }))));
+    var content;
+    // If the category element is disabled, we do not render a dropdown.
+    // Screenreaders are confused by additional sections
+    if (isDisabledWithReason) {
+        content = (React.createElement(Tooltip, { content: item.disabledReason },
+            trigger,
+            descriptionEl));
+    }
+    else if (disabled) {
+        content = trigger;
+    }
+    else {
+        content = (React.createElement(Dropdown, { open: expanded, stretchWidth: false, interior: true, expandToViewport: expandToViewport, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
+            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant })))));
+    }
+    return (React.createElement("li", { className: clsx(styles.category, styles["variant-".concat(variant)], styles.expandable, (_c = {},
+            _c[styles.expanded] = expanded,
+            _c[styles.disabled] = disabled,
+            _c[styles.highlighted] = highlighted,
+            _c)), role: "presentation", "data-testid": item.id, ref: ref, onClick: onClick, onMouseEnter: onHover, onTouchStart: onHover }, content));
+};
+export default ExpandableCategoryElement;
+//# sourceMappingURL=expandable-category-element.js.map

package/button-dropdown/category-elements/expandable-category-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport Dropdown from '../../internal/components/dropdown';\nimport { CategoryProps } from '../interfaces';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isExpanded,\n  highlightItem,\n  disabled,\n  expandToViewport,\n  variant,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n  const ref = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick: React.MouseEventHandler = event => {\n    if (!disabled) {\n      event.preventDefault();\n      onGroupToggle(item, event);\n      triggerRef.current?.focus();\n    }\n  };\n\n  const onHover = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    highlightItem(item);\n  };\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\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      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, expanded, disabled })}\n      {...(isDisabledWithReason ? targetProps : {})}\n    >\n      {item.text}\n      <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n  // If the category element is disabled, we do not render a dropdown.\n  // Screenreaders are confused by additional sections\n  if (isDisabledWithReason) {\n    content = (\n      <Tooltip content={item.disabledReason}>\n        {trigger}\n        {descriptionEl}\n      </Tooltip>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <Dropdown\n        open={expanded}\n        stretchWidth={false}\n        interior={true}\n        expandToViewport={expandToViewport}\n        trigger={trigger}\n      >\n        {item.items && expanded && (\n          <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isExpanded={isExpanded}\n              highlightItem={highlightItem}\n              variant={variant}\n            />\n          </ul>\n        )}\n      </Dropdown>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default ExpandableCategoryElement;\n"]}

package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts

@@ -0,0 +1,4 @@
+import { CategoryProps } from '../interfaces';
+declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
+export default MobileExpandableCategoryElement;
+//# sourceMappingURL=mobile-expandable-category-element.d.ts.map

package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,sHAUlC,aAAa,gBAqGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}

package/button-dropdown/category-elements/mobile-expandable-category-element.js

@@ -0,0 +1,71 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import InternalIcon from '../../icon/internal';
+import ItemsList from '../items-list';
+import MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';
+import Tooltip from '../tooltip.js';
+import useHiddenDescription from '../utils/use-hidden-description.js';
+import { getMenuItemProps } from '../utils/menu-item.js';
+var MobileExpandableCategoryElement = function (_a) {
+    var _b, _c, _d;
+    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, variant = _a.variant;
+    var highlighted = isHighlighted(item);
+    var expanded = isExpanded(item);
+    var triggerRef = React.useRef(null);
+    useEffect(function () {
+        if (triggerRef.current && highlighted && !expanded) {
+            triggerRef.current.focus();
+        }
+    }, [expanded, highlighted]);
+    var onClick = function (e) {
+        if (!disabled) {
+            e.preventDefault();
+            onGroupToggle(item, e);
+        }
+    };
+    var onHover = function (event) {
+        event.preventDefault();
+        highlightItem(item);
+    };
+    var isDisabledWithReason = !!item.disabledReason && item.disabled;
+    var _e = useHiddenDescription(item.disabledReason), targetProps = _e.targetProps, descriptionEl = _e.descriptionEl;
+    var trigger = item.text && (React.createElement("span", __assign({ className: clsx(styles.header, styles['expandable-header'], styles["variant-".concat(variant)], (_b = {},
+            _b[styles.highlighted] = highlighted,
+            _b[styles['rolled-down']] = expanded,
+            _b[styles.disabled] = disabled,
+            _b)), 
+        // 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, ref: triggerRef }, getMenuItemProps({ parent: true, disabled: disabled, expanded: expanded }), (isDisabledWithReason ? targetProps : {})),
+        item.text,
+        React.createElement("span", { className: clsx(styles['expand-icon'], (_c = {},
+                _c[styles['expand-icon-up']] = expanded,
+                _c)) },
+            React.createElement(InternalIcon, { name: "caret-down-filled" }))));
+    var content;
+    if (isDisabledWithReason) {
+        content = (React.createElement(React.Fragment, null,
+            descriptionEl,
+            React.createElement(Tooltip, { content: item.disabledReason }, trigger)));
+    }
+    else if (disabled) {
+        content = trigger;
+    }
+    else {
+        content = (React.createElement(MobileExpandableGroup, { open: expanded, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
+            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant })))));
+    }
+    return (React.createElement("li", { className: clsx(styles.category, styles["variant-".concat(variant)], styles.expandable, (_d = {},
+            _d[styles.expanded] = expanded,
+            _d[styles.disabled] = disabled,
+            _d[styles.highlighted] = highlighted || expanded,
+            _d[styles.expandable] = true,
+            _d)), role: "presentation", onClick: onClick, onMouseEnter: onHover, onTouchStart: onHover, "data-testid": item.id }, content));
+};
+export default MobileExpandableCategoryElement;
+//# sourceMappingURL=mobile-expandable-category-element.js.map

package/button-dropdown/category-elements/mobile-expandable-category-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-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, { useEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';\nimport { CategoryProps } from '../interfaces';\nimport Tooltip from '../tooltip.js';\nimport useHiddenDescription from '../utils/use-hidden-description.js';\nimport { getMenuItemProps } from '../utils/menu-item.js';\n\nconst MobileExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isExpanded,\n  highlightItem,\n  disabled,\n  variant,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick = (e: React.MouseEvent) => {\n    if (!disabled) {\n      e.preventDefault();\n      onGroupToggle(item, e);\n    }\n  };\n\n  const onHover = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    highlightItem(item);\n  };\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.highlighted]: highlighted,\n        [styles['rolled-down']]: expanded,\n        [styles.disabled]: disabled,\n      })}\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      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, disabled, expanded })}\n      {...(isDisabledWithReason ? targetProps : {})}\n    >\n      {item.text}\n      <span\n        className={clsx(styles['expand-icon'], {\n          [styles['expand-icon-up']]: expanded,\n        })}\n      >\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n\n  if (isDisabledWithReason) {\n    content = (\n      <>\n        {descriptionEl}\n        <Tooltip content={item.disabledReason}>{trigger}</Tooltip>\n      </>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <MobileExpandableGroup open={expanded} trigger={trigger}>\n        {item.items && expanded && (\n          <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isExpanded={isExpanded}\n              highlightItem={highlightItem}\n              hasCategoryHeader={true}\n              variant={variant}\n            />\n          </ul>\n        )}\n      </MobileExpandableGroup>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted || expanded,\n        [styles.expandable]: true,\n      })}\n      role=\"presentation\"\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n      data-testid={item.id}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default MobileExpandableCategoryElement;\n"]}

package/button-dropdown/category-elements/styles.css.js

@@ -0,0 +1,17 @@
+
+    import './styles.scoped.css';
+    export default {
+  "header": "awsui_header_16mm3_15t0o_93",
+  "disabled": "awsui_disabled_16mm3_15t0o_108",
+  "expandable-header": "awsui_expandable-header_16mm3_15t0o_112",
+  "rolled-down": "awsui_rolled-down_16mm3_15t0o_123",
+  "highlighted": "awsui_highlighted_16mm3_15t0o_126",
+  "variant-navigation": "awsui_variant-navigation_16mm3_15t0o_139",
+  "category": "awsui_category_16mm3_15t0o_151",
+  "expandable": "awsui_expandable_16mm3_15t0o_112",
+  "expand-icon": "awsui_expand-icon_16mm3_15t0o_172",
+  "expand-icon-up": "awsui_expand-icon-up_16mm3_15t0o_179",
+  "expand-icon-right": "awsui_expand-icon-right_16mm3_15t0o_182",
+  "items-list-container": "awsui_items-list-container_16mm3_15t0o_196"
+};
+  

package/button-dropdown/category-elements/styles.scoped.css

@@ -0,0 +1,226 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_header_16mm3_15t0o_93:not(#\9) {
+  position: relative;
+  margin: 0;
+  color: #414d5c;
+  color: var(--color-text-dropdown-group-label-eaqlcl, #414d5c);
+  border: 1px solid transparent;
+  border: var(--border-divider-list-width-hacikr, 1px) solid transparent;
+  border-left: 0;
+  border-right: 0;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  padding: calc(
+  4px + (2px - 1px)
+) calc(20px + 2px);
+  padding: calc(
+  var(--space-xxs-ynfts5, 4px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
+) calc(var(--space-l-4vl6xu, 20px) + var(--border-item-width-qbbbsa, 2px));
+  z-index: 1;
+}
+.awsui_header_16mm3_15t0o_93.awsui_disabled_16mm3_15t0o_108:not(#\9) {
+  color: #9ba7b6;
+  color: var(--color-text-dropdown-item-disabled-varol7, #9ba7b6);
+  cursor: default;
+}
+.awsui_header_16mm3_15t0o_93.awsui_expandable-header_16mm3_15t0o_112:not(#\9) {
+  border-top-color: #e9ebed;
+  border-top-color: var(--color-border-dropdown-group-0utpsr, #e9ebed);
+  border-bottom-color: #e9ebed;
+  border-bottom-color: var(--color-border-dropdown-group-0utpsr, #e9ebed);
+  cursor: pointer;
+}
+.awsui_header_16mm3_15t0o_93.awsui_expandable-header_16mm3_15t0o_112.awsui_disabled_16mm3_15t0o_108:not(#\9) {
+  cursor: default;
+}
+.awsui_header_16mm3_15t0o_93.awsui_expandable-header_16mm3_15t0o_112:not(#\9):focus {
+  outline: none;
+}
+.awsui_header_16mm3_15t0o_93.awsui_expandable-header_16mm3_15t0o_112.awsui_rolled-down_16mm3_15t0o_123:not(#\9) {
+  border-bottom-color: transparent;
+}
+.awsui_header_16mm3_15t0o_93.awsui_expandable-header_16mm3_15t0o_112.awsui_highlighted_16mm3_15t0o_126:not(#\9) {
+  background-color: #f4f4f4;
+  background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
+  color: #000716;
+  color: var(--color-text-dropdown-item-highlighted-oaabyk, #000716);
+  padding: 4px 20px;
+  padding: var(--space-xxs-ynfts5, 4px) var(--space-l-4vl6xu, 20px);
+  border: 2px solid #7d8998;
+  border: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-dropdown-item-hover-tyzq9m, #7d8998);
+  border-radius: 8px;
+  border-radius: var(--border-item-radius-43830w, 8px);
+  z-index: 2;
+}
+.awsui_header_16mm3_15t0o_93.awsui_expandable-header_16mm3_15t0o_112.awsui_highlighted_16mm3_15t0o_126.awsui_disabled_16mm3_15t0o_108:not(#\9) {
+  background-color: transparent;
+  background-color: var(--color-background-dropdown-item-dimmed-qw48ma, transparent);
+  border-color: #7d8998;
+  border-color: var(--color-border-dropdown-item-dimmed-hover-6dhy15, #7d8998);
+  color: #9ba7b6;
+  color: var(--color-text-dropdown-item-dimmed-jyqdrs, #9ba7b6);
+}
+.awsui_header_16mm3_15t0o_93.awsui_expandable-header_16mm3_15t0o_112.awsui_variant-navigation_16mm3_15t0o_139:not(#\9) {
+  padding-top: 8px;
+  padding-top: var(--space-xs-rsr2qu, 8px);
+  padding-bottom: 8px;
+  padding-bottom: var(--space-xs-rsr2qu, 8px);
+}
+.awsui_header_16mm3_15t0o_93.awsui_expandable-header_16mm3_15t0o_112.awsui_variant-navigation_16mm3_15t0o_139.awsui_highlighted_16mm3_15t0o_126:not(#\9) {
+  border-color: transparent;
+  border-top-color: #e9ebed;
+  border-top-color: var(--color-border-dropdown-group-0utpsr, #e9ebed);
+  border-bottom-color: #e9ebed;
+  border-bottom-color: var(--color-border-dropdown-group-0utpsr, #e9ebed);
+  background-color: transparent;
+  color: #0972d3;
+  color: var(--color-text-accent-s1eqko, #0972d3);
+}
+
+.awsui_category_16mm3_15t0o_151:not(#\9) {
+  list-style: none;
+  margin-top: calc(-1 * 1px);
+  margin-top: calc(-1 * var(--border-divider-list-width-hacikr, 1px));
+  padding: 0;
+}
+.awsui_category_16mm3_15t0o_151:not(#\9):first-child {
+  margin-top: 0;
+}
+.awsui_category_16mm3_15t0o_151.awsui_expandable_16mm3_15t0o_112:not(#\9) {
+  border-top: 0;
+}
+.awsui_category_16mm3_15t0o_151:not(#\9):last-child {
+  border-bottom: none;
+}
+.awsui_category_16mm3_15t0o_151.awsui_variant-navigation_16mm3_15t0o_139:not(#\9) {
+  padding-top: 4px;
+  padding-top: var(--space-xxs-ynfts5, 4px);
+}
+.awsui_category_16mm3_15t0o_151.awsui_variant-navigation_16mm3_15t0o_139.awsui_expandable_16mm3_15t0o_112:not(#\9) {
+  padding-top: 0;
+}
+
+.awsui_expand-icon_16mm3_15t0o_172:not(#\9) {
+  position: relative;
+  left: 12px;
+  left: var(--space-s-hv8c1d, 12px);
+  width: 16px;
+  width: var(--space-m-17eucw, 16px);
+  display: inline-block;
+  transition: transform 135ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: transform var(--motion-duration-rotate-180-ofa1ir, 135ms) var(--motion-easing-rotate-180-3rbbga, cubic-bezier(0.165, 0.84, 0.44, 1));
+}
+.awsui_expand-icon-up_16mm3_15t0o_179:not(#\9) {
+  transform: rotate(-180deg);
+}
+.awsui_expand-icon-right_16mm3_15t0o_182:not(#\9) {
+  transform: rotate(-90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_expand-icon_16mm3_15t0o_172:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_expand-icon_16mm3_15t0o_172:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_15t0o_172:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_items-list-container_16mm3_15t0o_196:not(#\9) {
+  padding: 0;
+  margin: -1px 0 0 0;
+  overflow-y: auto;
+}

package/button-dropdown/category-elements/styles.selectors.js

@@ -0,0 +1,18 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "header": "awsui_header_16mm3_15t0o_93",
+  "disabled": "awsui_disabled_16mm3_15t0o_108",
+  "expandable-header": "awsui_expandable-header_16mm3_15t0o_112",
+  "rolled-down": "awsui_rolled-down_16mm3_15t0o_123",
+  "highlighted": "awsui_highlighted_16mm3_15t0o_126",
+  "variant-navigation": "awsui_variant-navigation_16mm3_15t0o_139",
+  "category": "awsui_category_16mm3_15t0o_151",
+  "expandable": "awsui_expandable_16mm3_15t0o_112",
+  "expand-icon": "awsui_expand-icon_16mm3_15t0o_172",
+  "expand-icon-up": "awsui_expand-icon-up_16mm3_15t0o_179",
+  "expand-icon-right": "awsui_expand-icon-right_16mm3_15t0o_182",
+  "items-list-container": "awsui_items-list-container_16mm3_15t0o_196"
+};
+  

package/button-dropdown/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,QAAA,MAAM,cAAc,qGAsCnB,CAAC;AAGF,eAAe,cAAc,CAAC"}

package/button-dropdown/index.js

@@ -0,0 +1,17 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalButtonDropdown from './internal';
+import { getBaseProps } from '../internal/base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+var ButtonDropdown = 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, _f = _a.expandToViewport, expandToViewport = _f === void 0 ? false : _f, ariaLabel = _a.ariaLabel, children = _a.children, onItemClick = _a.onItemClick, onItemFollow = _a.onItemFollow, props = __rest(_a, ["items", "variant", "loading", "disabled", "expandableGroups", "expandToViewport", "ariaLabel", "children", "onItemClick", "onItemFollow"]);
+    var baseComponentProps = useBaseComponent('ButtonDropdown');
+    var baseProps = getBaseProps(props);
+    return (React.createElement(InternalButtonDropdown, __assign({}, baseProps, baseComponentProps, { ref: ref, items: items, variant: variant, loading: loading, disabled: disabled, expandableGroups: expandableGroups, expandToViewport: expandToViewport, ariaLabel: ariaLabel, onItemClick: onItemClick, onItemFollow: onItemFollow }), children));
+});
+applyDisplayName(ButtonDropdown, 'ButtonDropdown');
+export default ButtonDropdown;
+//# sourceMappingURL=index.js.map

package/button-dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button-dropdown/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,sBAAsB,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,UACE,EAYsB,EACtB,GAAuC;IAZrC,IAAA,KAAK,WAAA,EACL,eAAkB,EAAlB,OAAO,mBAAG,QAAQ,KAAA,EAClB,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,YAAY,kBAAA,EACT,KAAK,cAXV,2IAYC,CADS;IAIV,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC9D,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,oBAAC,sBAAsB,eACjB,SAAS,EACT,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,KAEzB,QAAQ,CACc,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AACnD,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonDropdownProps } from './interfaces';\nimport InternalButtonDropdown from './internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { ButtonDropdownProps };\n\nconst ButtonDropdown = React.forwardRef(\n  (\n    {\n      items,\n      variant = 'normal',\n      loading = false,\n      disabled = false,\n      expandableGroups = false,\n      expandToViewport = false,\n      ariaLabel,\n      children,\n      onItemClick,\n      onItemFollow,\n      ...props\n    }: ButtonDropdownProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('ButtonDropdown');\n    const baseProps = getBaseProps(props);\n    return (\n      <InternalButtonDropdown\n        {...baseProps}\n        {...baseComponentProps}\n        ref={ref}\n        items={items}\n        variant={variant}\n        loading={loading}\n        disabled={disabled}\n        expandableGroups={expandableGroups}\n        expandToViewport={expandToViewport}\n        ariaLabel={ariaLabel}\n        onItemClick={onItemClick}\n        onItemFollow={onItemFollow}\n      >\n        {children}\n      </InternalButtonDropdown>\n    );\n  }\n);\n\napplyDisplayName(ButtonDropdown, 'ButtonDropdown');\nexport default ButtonDropdown;\n"]}