npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1360 → 3.0.1362 - Mend

@cloudscape-design/components-themeable 3.0.1360 → 3.0.1362

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/lib/internal/template/button-dropdown/item-element/styles.scoped.css CHANGED Viewed

@@ -6,7 +6,7 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* 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 */
-.awsui_item-element_93a1u_nfu0d_9:not(#\9) {
+.awsui_item-element_93a1u_1rolk_9:not(#\9) {
   position: relative;
   z-index: 1;
   border-block: var(--border-item-width-pyfg4s, 1px) solid transparent;
@@ -18,22 +18,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(-1 * var(--border-width-dropdown-4gpjx5, 1px));
   cursor: pointer;
 }
-.awsui_item-element_93a1u_nfu0d_9.awsui_no-content-styling_93a1u_nfu0d_21:not(#\9) {
+.awsui_item-element_93a1u_1rolk_9.awsui_no-content-styling_93a1u_1rolk_21:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   color: var(--color-text-dropdown-item-default-u2mfqy, #16191f);
 }
-.awsui_item-element_93a1u_nfu0d_9.awsui_disabled_93a1u_nfu0d_26:not(#\9) {
+.awsui_item-element_93a1u_1rolk_9.awsui_disabled_93a1u_1rolk_26:not(#\9) {
   cursor: default;
   color: var(--color-text-dropdown-item-disabled-2udtn0, #aab7b8);
 }
-.awsui_item-element_93a1u_nfu0d_9:not(#\9):first-child {
+.awsui_item-element_93a1u_1rolk_9:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_item-element_93a1u_nfu0d_9.awsui_show-divider_93a1u_nfu0d_33:not(#\9) {
+.awsui_item-element_93a1u_1rolk_9.awsui_show-divider_93a1u_1rolk_33:not(#\9) {
   border-block-end: var(--border-item-width-pyfg4s, 1px) solid var(--color-border-dropdown-group-y5droz, #eaeded);
 }
-.awsui_item-element_93a1u_nfu0d_9.awsui_highlighted_93a1u_nfu0d_36:not(#\9) {
+.awsui_item-element_93a1u_1rolk_9.awsui_highlighted_93a1u_1rolk_36:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-dikwgu, #16191f);
   z-index: 2;
   background-color: var(--color-background-dropdown-item-hover-pvfsrg, #f2f3f3);
@@ -43,19 +43,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: var(--border-radius-item-mitz8h, 0px);
   border-end-end-radius: var(--border-radius-item-mitz8h, 0px);
 }
-.awsui_item-element_93a1u_nfu0d_9.awsui_highlighted_93a1u_nfu0d_36.awsui_disabled_93a1u_nfu0d_26:not(#\9) {
+.awsui_item-element_93a1u_1rolk_9.awsui_highlighted_93a1u_1rolk_36.awsui_disabled_93a1u_1rolk_26:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-asp9ue, #aab7b8);
   border-color: var(--color-border-dropdown-item-dimmed-hover-54pdcr, #879596);
   background-color: var(--color-background-dropdown-item-dimmed-vz24i5, transparent);
 }
-.awsui_item-element_93a1u_nfu0d_9.awsui_highlighted_93a1u_nfu0d_36.awsui_is-focused_93a1u_nfu0d_51:not(#\9) {
+.awsui_item-element_93a1u_1rolk_9.awsui_highlighted_93a1u_1rolk_36.awsui_is-focused_93a1u_1rolk_51:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-y1x3ts, #0073bb);
 }
-.awsui_item-element_93a1u_nfu0d_9.awsui_highlighted_93a1u_nfu0d_36.awsui_is-focused_93a1u_nfu0d_51:not(#\9):not(.awsui_visual-refresh_93a1u_nfu0d_54) {
+.awsui_item-element_93a1u_1rolk_9.awsui_highlighted_93a1u_1rolk_36.awsui_is-focused_93a1u_1rolk_51:not(#\9):not(.awsui_visual-refresh_93a1u_1rolk_54) {
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-iijyo6, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_menu-item_93a1u_nfu0d_58:not(#\9) {
+.awsui_menu-item_93a1u_1rolk_58:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
@@ -67,17 +67,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_menu-item_93a1u_nfu0d_58.awsui_no-content-styling_93a1u_nfu0d_21:not(#\9) {
+.awsui_menu-item_93a1u_1rolk_58.awsui_no-content-styling_93a1u_1rolk_21:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   color: var(--color-text-dropdown-item-default-u2mfqy, #16191f);
 }
-.awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9) {
+.awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9) {
   padding-block-end: calc(var(--space-option-padding-vertical-hggcse, 4px) + var(--space-xxxs-3ulqs3, 2px));
   text-underline-offset: 0.25em;
   text-decoration-thickness: var(--font-decoration-thickness-link-n3u7wl, 1px);
   text-decoration-style: var(--font-decoration-style-link-lw1s9g, solid);
-  color: var(--awsui-style-color-default-esndbs, var(--color-text-link-default-qabnuk, #0073bb));
+  color: var(--awsui-style-color-default-66120l, var(--color-text-link-default-qabnuk, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -88,30 +88,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-s8g1xv, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9) {
+  .awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9) {
+.awsui-motion-disabled .awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9):hover {
+.awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-esndbs, var(--color-text-link-hover-n1r6g0, #0a4a74));
+  color: var(--awsui-style-color-hover-66120l, var(--color-text-link-hover-n1r6g0, #0a4a74));
 }
-.awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9):focus {
+.awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9):focus {
   outline: none;
 }
-.awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9):active {
-  color: var(--awsui-style-color-active-esndbs, var(--color-text-link-hover-n1r6g0, #0a4a74));
+.awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9):active {
+  color: var(--awsui-style-color-active-66120l, var(--color-text-link-hover-n1r6g0, #0a4a74));
 }
-.awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9):active, .awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9):focus, .awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75:not(#\9):hover {
+.awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9):active, .awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9):focus, .awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: var(--color-text-link-decoration-hover-opkmr8, currentColor);
 }
-.awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75.awsui_current-breadcrumb_93a1u_nfu0d_112:not(#\9) {
+.awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75.awsui_current-breadcrumb_93a1u_1rolk_112:not(#\9) {
   font-weight: var(--font-weight-button-2p3grf, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-dpz0hr, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-kjlydy, auto);
@@ -119,63 +119,63 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: var(--font-weight-bold-xpar9m, 700);
   text-decoration: none;
 }
-.awsui_menu-item_93a1u_nfu0d_58.awsui_link-style_93a1u_nfu0d_75.awsui_link-style-highlighted_93a1u_nfu0d_120:not(#\9) {
+.awsui_menu-item_93a1u_1rolk_58.awsui_link-style_93a1u_1rolk_75.awsui_link-style-highlighted_93a1u_1rolk_120:not(#\9) {
   color: var(--color-text-link-hover-n1r6g0, #0a4a74);
 }
-.awsui_menu-item_93a1u_nfu0d_58:not(#\9):focus {
+.awsui_menu-item_93a1u_1rolk_58:not(#\9):focus {
   outline: none;
 }
-.awsui_has-category-header_93a1u_nfu0d_126 > .awsui_menu-item_93a1u_nfu0d_58:not(#\9), .awsui_has-category-header_93a1u_nfu0d_126 > .awsui_item-tooltip-wrapper_93a1u_nfu0d_126 > .awsui_menu-item_93a1u_nfu0d_58:not(#\9), .awsui_has-category-header_93a1u_nfu0d_126:not(#\9):not(.awsui_has-checkmark_93a1u_nfu0d_126) > span > .awsui_menu-item_93a1u_nfu0d_58 {
+.awsui_has-category-header_93a1u_1rolk_126 > .awsui_menu-item_93a1u_1rolk_58:not(#\9), .awsui_has-category-header_93a1u_1rolk_126 > .awsui_item-tooltip-wrapper_93a1u_1rolk_126 > .awsui_menu-item_93a1u_1rolk_58:not(#\9), .awsui_has-category-header_93a1u_1rolk_126:not(#\9):not(.awsui_has-checkmark_93a1u_1rolk_126) > span > .awsui_menu-item_93a1u_1rolk_58 {
   padding-inline-start: calc(var(--space-xs-m9b7jf, 8px) + var(--space-option-padding-horizontal-5om7we, 20px));
 }
-.awsui_has-category-header_93a1u_nfu0d_126 > .awsui_menu-item_93a1u_nfu0d_58.awsui_no-content-styling_93a1u_nfu0d_21:not(#\9), .awsui_has-category-header_93a1u_nfu0d_126 > .awsui_item-tooltip-wrapper_93a1u_nfu0d_126 > .awsui_menu-item_93a1u_nfu0d_58.awsui_no-content-styling_93a1u_nfu0d_21:not(#\9), .awsui_has-category-header_93a1u_nfu0d_126:not(#\9):not(.awsui_has-checkmark_93a1u_nfu0d_126) > span > .awsui_menu-item_93a1u_nfu0d_58.awsui_no-content-styling_93a1u_nfu0d_21 {
+.awsui_has-category-header_93a1u_1rolk_126 > .awsui_menu-item_93a1u_1rolk_58.awsui_no-content-styling_93a1u_1rolk_21:not(#\9), .awsui_has-category-header_93a1u_1rolk_126 > .awsui_item-tooltip-wrapper_93a1u_1rolk_126 > .awsui_menu-item_93a1u_1rolk_58.awsui_no-content-styling_93a1u_1rolk_21:not(#\9), .awsui_has-category-header_93a1u_1rolk_126:not(#\9):not(.awsui_has-checkmark_93a1u_1rolk_126) > span > .awsui_menu-item_93a1u_1rolk_58.awsui_no-content-styling_93a1u_1rolk_21 {
   padding-inline-start: 0;
 }
-.awsui_icon_93a1u_nfu0d_133:not(#\9) {
+.awsui_icon_93a1u_1rolk_133:not(#\9) {
   padding-inline-end: var(--space-xxs-3o1yoq, 4px);
   flex-shrink: 0;
 }
-.awsui_icon_93a1u_nfu0d_133.awsui_checkmark_93a1u_nfu0d_137:not(#\9) {
+.awsui_icon_93a1u_1rolk_133.awsui_checkmark_93a1u_1rolk_137:not(#\9) {
   color: var(--color-item-selected-2irl78, #0073bb);
 }
-.awsui_icon_93a1u_nfu0d_133.awsui_disabled_93a1u_nfu0d_26:not(#\9) {
+.awsui_icon_93a1u_1rolk_133.awsui_disabled_93a1u_1rolk_26:not(#\9) {
   color: var(--color-text-interactive-disabled-tuxgxq, #aab7b8);
 }
-.awsui_external-icon_93a1u_nfu0d_144:not(#\9) {
+.awsui_external-icon_93a1u_1rolk_144:not(#\9) {
   margin-inline-start: var(--space-xxs-3o1yoq, 4px);
 }
-.awsui_content-wrapper_93a1u_nfu0d_148:not(#\9) {
+.awsui_content-wrapper_93a1u_1rolk_148:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.awsui_main-row_93a1u_nfu0d_154:not(#\9) {
+.awsui_main-row_93a1u_1rolk_154:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--space-s-kll7oj, 12px);
 }
-.awsui_label-tag_93a1u_nfu0d_161:not(#\9) {
+.awsui_label-tag_93a1u_1rolk_161:not(#\9) {
   color: var(--color-text-body-default-b2us04, #16191f);
 }
-.awsui_label-tag_93a1u_nfu0d_161.awsui_disabled_93a1u_nfu0d_26:not(#\9) {
+.awsui_label-tag_93a1u_1rolk_161.awsui_disabled_93a1u_1rolk_26:not(#\9) {
   color: var(--color-text-interactive-disabled-tuxgxq, #aab7b8);
 }
-.awsui_secondary-text_93a1u_nfu0d_168:not(#\9) {
+.awsui_secondary-text_93a1u_1rolk_168:not(#\9) {
   font-size: var(--font-size-body-s-89y7qg, 12px);
   line-height: var(--line-height-body-s-gako33, 16px);
   letter-spacing: var(--letter-spacing-body-s-dzcybc, normal);
   color: var(--color-text-dropdown-item-secondary-1qkuo5, #687078);
 }
-.awsui_secondary-text_93a1u_nfu0d_168.awsui_highlighted_93a1u_nfu0d_36:not(#\9) {
+.awsui_secondary-text_93a1u_1rolk_168.awsui_highlighted_93a1u_1rolk_36:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-dikwgu, #16191f);
 }
-.awsui_secondary-text_93a1u_nfu0d_168.awsui_disabled_93a1u_nfu0d_26:not(#\9) {
+.awsui_secondary-text_93a1u_1rolk_168.awsui_disabled_93a1u_1rolk_26:not(#\9) {
   color: var(--color-text-interactive-disabled-tuxgxq, #aab7b8);
 }

package/lib/internal/template/button-dropdown/item-element/styles.selectors.js CHANGED Viewed

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "item-element": "awsui_item-element_93a1u_nfu0d_9",
-  "no-content-styling": "awsui_no-content-styling_93a1u_nfu0d_21",
-  "disabled": "awsui_disabled_93a1u_nfu0d_26",
-  "show-divider": "awsui_show-divider_93a1u_nfu0d_33",
-  "highlighted": "awsui_highlighted_93a1u_nfu0d_36",
-  "is-focused": "awsui_is-focused_93a1u_nfu0d_51",
-  "visual-refresh": "awsui_visual-refresh_93a1u_nfu0d_54",
-  "menu-item": "awsui_menu-item_93a1u_nfu0d_58",
-  "link-style": "awsui_link-style_93a1u_nfu0d_75",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_nfu0d_112",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_nfu0d_120",
-  "has-category-header": "awsui_has-category-header_93a1u_nfu0d_126",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_nfu0d_126",
-  "has-checkmark": "awsui_has-checkmark_93a1u_nfu0d_126",
-  "icon": "awsui_icon_93a1u_nfu0d_133",
-  "checkmark": "awsui_checkmark_93a1u_nfu0d_137",
-  "external-icon": "awsui_external-icon_93a1u_nfu0d_144",
-  "content-wrapper": "awsui_content-wrapper_93a1u_nfu0d_148",
-  "main-row": "awsui_main-row_93a1u_nfu0d_154",
-  "label-tag": "awsui_label-tag_93a1u_nfu0d_161",
-  "secondary-text": "awsui_secondary-text_93a1u_nfu0d_168"
+  "item-element": "awsui_item-element_93a1u_1rolk_9",
+  "no-content-styling": "awsui_no-content-styling_93a1u_1rolk_21",
+  "disabled": "awsui_disabled_93a1u_1rolk_26",
+  "show-divider": "awsui_show-divider_93a1u_1rolk_33",
+  "highlighted": "awsui_highlighted_93a1u_1rolk_36",
+  "is-focused": "awsui_is-focused_93a1u_1rolk_51",
+  "visual-refresh": "awsui_visual-refresh_93a1u_1rolk_54",
+  "menu-item": "awsui_menu-item_93a1u_1rolk_58",
+  "link-style": "awsui_link-style_93a1u_1rolk_75",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_1rolk_112",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_1rolk_120",
+  "has-category-header": "awsui_has-category-header_93a1u_1rolk_126",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1rolk_126",
+  "has-checkmark": "awsui_has-checkmark_93a1u_1rolk_126",
+  "icon": "awsui_icon_93a1u_1rolk_133",
+  "checkmark": "awsui_checkmark_93a1u_1rolk_137",
+  "external-icon": "awsui_external-icon_93a1u_1rolk_144",
+  "content-wrapper": "awsui_content-wrapper_93a1u_1rolk_148",
+  "main-row": "awsui_main-row_93a1u_1rolk_154",
+  "label-tag": "awsui_label-tag_93a1u_1rolk_161",
+  "secondary-text": "awsui_secondary-text_93a1u_1rolk_168"
 };

package/lib/internal/template/button-dropdown/utils/use-button-dropdown.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
 import React from 'react';
-import { CancelableEventHandler } from '../../types/events';
+import { CancelableEventHandler, NonCancelableCustomEvent } from '../../types/events';
 import { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';
+type DropdownFocusLeaveEvent = NonCancelableCustomEvent<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
 interface UseButtonDropdownOptions extends ButtonDropdownSettings {
     items: ButtonDropdownProps.Items;
     onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
     onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
     onReturnFocus: () => void;
+    isTriggerElement: (element: Element) => boolean;
     expandToViewport?: boolean;
     hasFiltering: boolean;
 }
@@ -15,7 +17,7 @@ interface UseButtonDropdownApi extends HighlightProps {
     onKeyUp: (event: React.KeyboardEvent) => void;
     onItemActivate: ItemActivate;
     onGroupToggle: GroupToggle;
-    onDropdownFocusLeave: () => void;
+    onDropdownFocusLeave: (event: DropdownFocusLeaveEvent) => void;
     onDropdownBlur: () => void;
     toggleDropdown: (options?: {
         moveHighlightOnOpen?: boolean;
@@ -27,6 +29,6 @@ interface UseButtonDropdownApi extends HighlightProps {
     filteredItems: ButtonDropdownProps.Items;
     showExpandableGroups: boolean;
 }
-export declare function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFocus, hasExpandableGroups, isInRestrictedView, expandToViewport, hasFiltering, }: UseButtonDropdownOptions): UseButtonDropdownApi;
+export declare function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFocus, isTriggerElement, hasExpandableGroups, isInRestrictedView, expandToViewport, hasFiltering, }: UseButtonDropdownOptions): UseButtonDropdownApi;
 export {};
 //# sourceMappingURL=use-button-dropdown.d.ts.map

package/lib/internal/template/button-dropdown/utils/use-button-dropdown.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-button-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAA+C,MAAM,OAAO,CAAC;~~AAKpE~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;~~AAC5D~~,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAKvH,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;~~IAC1B~~,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,YAAY,CAAC;IAC7B,aAAa,EAAE,WAAW,CAAC;IAC3B,oBAAoB,EAAE,~~MAAM~~,IAAI,CAAC;~~IACjC~~,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACzC,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,kBAA0B,EAC1B,gBAAwB,EACxB,YAAY,GACb,EAAE,wBAAwB,GAAG,oBAAoB,~~CA4PjD~~"}
1	+ {"version":3,"file":"use-button-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAOpE,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAKvH,KAAK,uBAAuB,GAAG,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;AAE5G,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,YAAY,CAAC;IAC7B,aAAa,EAAE,WAAW,CAAC;IAC3B,oBAAoB,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC/D,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACzC,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,kBAA0B,EAC1B,gBAAwB,EACxB,YAAY,GACb,EAAE,wBAAwB,GAAG,oBAAoB,CAuQjD"}

package/lib/internal/template/button-dropdown/utils/use-button-dropdown.js CHANGED Viewed

@@ -4,10 +4,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useOpenState } from '../../internal/components/options-list/utils/use-open-state';
 import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
 import { KeyCode } from '../../internal/keycode';
+import { isElement } from '../../internal/utils/dom';
+import { isKeyboardInteraction } from '../../internal/utils/focus-visible';
 import { filterItems } from './filter-items';
 import useHighlightedMenu from './use-highlighted-menu';
 import { getItemTarget, isCheckboxItem, isItemGroup, isLinkItem } from './utils';
-export function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFocus, hasExpandableGroups, isInRestrictedView = false, expandToViewport = false, hasFiltering, }) {
+export function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFocus, isTriggerElement, hasExpandableGroups, isInRestrictedView = false, expandToViewport = false, hasFiltering, }) {
     const [filteringValue, setFilteringValue] = useState('');
     const filteredItems = useMemo(() => (hasFiltering && filteringValue ? filterItems(items, filteringValue) : items), [hasFiltering, filteringValue, items]);
     const showExpandableGroups = hasExpandableGroups && !filteringValue;
@@ -41,8 +43,18 @@ export function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFo
         }
         openStateProps.toggleDropdown();
     };
-    const onDropdownFocusLeave = () => {
+    const onDropdownFocusLeave = (event) => {
         if (hasFiltering && isOpen) {
+            const { relatedTarget } = event.detail;
+            // When focus moves from the filter input to the trigger via a mouse click, the trigger's
+            // own click handler already closes the dropdown.
+            const clickedTrigger = !!relatedTarget &&
+                isElement(relatedTarget) &&
+                isTriggerElement(relatedTarget) &&
+                !isKeyboardInteraction(relatedTarget);
+            if (clickedTrigger) {
+                return;
+            }
             if (expandToViewport) {
                 // When expanded to viewport the focus can't move naturally to the next element.
                 // Returning the focus to the trigger instead.

package/lib/internal/template/button-dropdown/utils/use-button-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-button-dropdown.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-button-dropdown.ts"],"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, useMemo, useRef, useState } from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { CancelableEventHandler } from '../../types/events';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport { filterItems } from './filter-items';\nimport useHighlightedMenu from './use-highlighted-menu';\nimport { getItemTarget, isCheckboxItem, isItemGroup, isLinkItem } from './utils';\n\ninterface UseButtonDropdownOptions extends ButtonDropdownSettings {\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onReturnFocus: () => void;\n expandToViewport?: boolean;\n hasFiltering: boolean;\n}\n\ninterface UseButtonDropdownApi extends HighlightProps {\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onKeyUp: (event: React.KeyboardEvent) => void;\n onItemActivate: ItemActivate;\n onGroupToggle: GroupToggle;\n onDropdownFocusLeave: () => void;\n onDropdownBlur: () => void;\n toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n closeDropdown: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n filteringValue: string;\n setFilteringValue: (value: string) => void;\n filteredItems: ButtonDropdownProps.Items;\n showExpandableGroups: boolean;\n}\n\nexport function useButtonDropdown({\n items,\n onItemClick,\n onItemFollow,\n onReturnFocus,\n hasExpandableGroups,\n isInRestrictedView = false,\n expandToViewport = false,\n hasFiltering,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\n const [filteringValue, setFilteringValue] = useState('');\n\n const filteredItems = useMemo(\n () => (hasFiltering && filteringValue ? filterItems(items, filteringValue) : items),\n [hasFiltering, filteringValue, items]\n );\n\n const showExpandableGroups = hasExpandableGroups && !filteringValue;\n\n const {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n moveHighlight,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n } = useHighlightedMenu({\n items: filteredItems,\n hasExpandableGroups: showExpandableGroups,\n isInRestrictedView,\n });\n\n // If the filtering input changes, the options list also changes,\n // so the highlight isn't valid anymore.\n const prevFilteringValue = useRef(filteringValue);\n useEffect(() => {\n if (prevFilteringValue.current !== filteringValue) {\n prevFilteringValue.current = filteringValue;\n reset();\n }\n }, [filteringValue, reset]);\n\n const { isOpen, closeDropdown: closeDropdownState, ...openStateProps } = useOpenState({ onClose: reset });\n\n const closeDropdown = () => {\n setFilteringValue('');\n closeDropdownState();\n };\n\n const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n if (!isOpen && moveHighlightOnOpen && !hasFiltering) {\n moveHighlight(1);\n }\n if (isOpen) {\n setFilteringValue('');\n }\n openStateProps.toggleDropdown();\n };\n\n const onDropdownFocusLeave = () => {\n if (hasFiltering && isOpen) {\n if (expandToViewport) {\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n onReturnFocus();\n }\n closeDropdown();\n }\n };\n\n // Close when focus leaves the entire widget (trigger and menu), for example when focus\n // moves to an app layout drawer or an element in a different frame. The filtering variant\n // keeps focus inside the dropdown content and closes via onDropdownFocusLeave instead.\n const onDropdownBlur = () => {\n if (isOpen && !hasFiltering) {\n closeDropdown();\n }\n };\n\n const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n const onItemActivate: ItemActivate = (item, event) => {\n const isCheckbox = isCheckboxItem(item);\n const isLink = isLinkItem(item);\n const details = {\n id: item.id \|\| 'undefined',\n href: isLink ? item.href : undefined,\n external: isLink ? item.external : undefined,\n target: isLink ? getItemTarget(item) : undefined,\n checked: isCheckbox ? !item.checked : undefined,\n };\n onReturnFocus();\n if (onItemFollow && isLink && isPlainLeftClick(event)) {\n fireCancelableEvent(onItemFollow, details, event);\n }\n if (onItemClick) {\n fireCancelableEvent(onItemClick, details, event);\n }\n closeDropdown();\n };\n\n const openAndSelectFirst = (event: React.KeyboardEvent) => {\n toggleDropdown();\n event.preventDefault();\n };\n\n const actOnParentDropdown = (event: React.KeyboardEvent) => {\n // if there is no highlighted item we act on the trigger by opening or closing dropdown\n if (!targetItem) {\n if (isOpen && !isInRestrictedView) {\n toggleDropdown();\n } else {\n openAndSelectFirst(event);\n }\n } else {\n if (isItemGroup(targetItem)) {\n onGroupToggle(targetItem, event);\n } else {\n onItemActivate(targetItem, event);\n }\n }\n };\n\n const activate = (event: React.KeyboardEvent, isEnter?: boolean) => {\n setIsUsingMouse(false);\n\n // if item is a link we rely on default behavior of an anchor, no need to prevent\n if (targetItem && isLinkItem(targetItem) && isEnter) {\n return;\n }\n\n event.preventDefault();\n actOnParentDropdown(event);\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n setIsUsingMouse(false);\n switch (event.keyCode) {\n case KeyCode.down: {\n if (!isOpen) {\n toggleDropdown();\n if (!hasFiltering) {\n moveHighlight(1, true);\n }\n } else {\n moveHighlight(1);\n }\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n if (!isOpen) {\n toggleDropdown();\n if (!hasFiltering) {\n moveHighlight(-1, true);\n }\n } else {\n moveHighlight(-1);\n }\n event.preventDefault();\n break;\n }\n case KeyCode.space: {\n // Prevent scrolling the list of items and highlighting the trigger when filtering\n // isn't active. Hitting space when filtering is active should just type a space\n // character into the input, or activate the clear button.\n if (!hasFiltering && !isOpen) {\n event.preventDefault();\n }\n break;\n }\n case KeyCode.enter: {\n // While filtering, pressing Enter without a highlighted item should not select\n // any item or close the dropdown.\n if (isOpen && hasFiltering && !targetItem) {\n break;\n }\n if (!targetItem?.disabled) {\n activate(event, true);\n }\n break;\n }\n case KeyCode.left:\n case KeyCode.right: {\n // When filtering is enabled and there's text in the filter input, left/right\n // arrow keys should move the caret between the characters.\n if (hasFiltering && filteringValue) {\n break;\n }\n if (targetItem && !targetItem.disabled && isItemGroup(targetItem) && !isExpanded(targetItem)) {\n expandGroup();\n } else if (hasExpandableGroups) {\n collapseGroup();\n }\n\n event.preventDefault();\n break;\n }\n case KeyCode.escape: {\n onReturnFocus();\n closeDropdown();\n event.preventDefault();\n if (isOpen) {\n event.stopPropagation();\n }\n break;\n }\n case KeyCode.tab: {\n // In filtering mode the dropdown contains multiple focusable elements (the filter\n // input and its clear button). Tabbing between them must not close the dropdown, so\n // closing on Tab is handled by onDropdownFocusLeave instead, which only fires once\n // focus actually leaves the dropdown.\n if (hasFiltering) {\n break;\n }\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n if (expandToViewport) {\n onReturnFocus();\n }\n closeDropdown();\n break;\n }\n }\n };\n const onKeyUp = (event: React.KeyboardEvent) => {\n // When using a roving tabindex (filtering disabled), we need to handle activating items\n // with Space separately because there is a bug in Firefox where changing the focus during\n // a Space keydown event it will trigger unexpected click events on the new element.\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n if (event.keyCode === KeyCode.space && !targetItem?.disabled && !hasFiltering) {\n activate(event);\n }\n };\n\n return {\n isOpen,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n onKeyDown,\n onKeyUp,\n onItemActivate,\n onGroupToggle,\n onDropdownFocusLeave,\n onDropdownBlur,\n toggleDropdown,\n closeDropdown,\n setIsUsingMouse,\n filteringValue,\n setFilteringValue,\n filteredItems,\n showExpandableGroups,\n };\n}\n"]}
1	+ {"version":3,"file":"use-button-dropdown.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-button-dropdown.ts"],"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, useMemo, useRef, useState } from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { isElement } from '../../internal/utils/dom';\nimport { isKeyboardInteraction } from '../../internal/utils/focus-visible';\nimport { CancelableEventHandler, NonCancelableCustomEvent } from '../../types/events';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport { filterItems } from './filter-items';\nimport useHighlightedMenu from './use-highlighted-menu';\nimport { getItemTarget, isCheckboxItem, isItemGroup, isLinkItem } from './utils';\n\ntype DropdownFocusLeaveEvent = NonCancelableCustomEvent<Pick<React.FocusEvent, 'target' \| 'relatedTarget'>>;\n\ninterface UseButtonDropdownOptions extends ButtonDropdownSettings {\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onReturnFocus: () => void;\n // Returns whether the given element is (or is inside) the dropdown trigger.\n isTriggerElement: (element: Element) => boolean;\n expandToViewport?: boolean;\n hasFiltering: boolean;\n}\n\ninterface UseButtonDropdownApi extends HighlightProps {\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onKeyUp: (event: React.KeyboardEvent) => void;\n onItemActivate: ItemActivate;\n onGroupToggle: GroupToggle;\n onDropdownFocusLeave: (event: DropdownFocusLeaveEvent) => void;\n onDropdownBlur: () => void;\n toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n closeDropdown: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n filteringValue: string;\n setFilteringValue: (value: string) => void;\n filteredItems: ButtonDropdownProps.Items;\n showExpandableGroups: boolean;\n}\n\nexport function useButtonDropdown({\n items,\n onItemClick,\n onItemFollow,\n onReturnFocus,\n isTriggerElement,\n hasExpandableGroups,\n isInRestrictedView = false,\n expandToViewport = false,\n hasFiltering,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\n const [filteringValue, setFilteringValue] = useState('');\n\n const filteredItems = useMemo(\n () => (hasFiltering && filteringValue ? filterItems(items, filteringValue) : items),\n [hasFiltering, filteringValue, items]\n );\n\n const showExpandableGroups = hasExpandableGroups && !filteringValue;\n\n const {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n moveHighlight,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n } = useHighlightedMenu({\n items: filteredItems,\n hasExpandableGroups: showExpandableGroups,\n isInRestrictedView,\n });\n\n // If the filtering input changes, the options list also changes,\n // so the highlight isn't valid anymore.\n const prevFilteringValue = useRef(filteringValue);\n useEffect(() => {\n if (prevFilteringValue.current !== filteringValue) {\n prevFilteringValue.current = filteringValue;\n reset();\n }\n }, [filteringValue, reset]);\n\n const { isOpen, closeDropdown: closeDropdownState, ...openStateProps } = useOpenState({ onClose: reset });\n\n const closeDropdown = () => {\n setFilteringValue('');\n closeDropdownState();\n };\n\n const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n if (!isOpen && moveHighlightOnOpen && !hasFiltering) {\n moveHighlight(1);\n }\n if (isOpen) {\n setFilteringValue('');\n }\n openStateProps.toggleDropdown();\n };\n\n const onDropdownFocusLeave = (event: DropdownFocusLeaveEvent) => {\n if (hasFiltering && isOpen) {\n const { relatedTarget } = event.detail;\n // When focus moves from the filter input to the trigger via a mouse click, the trigger's\n // own click handler already closes the dropdown.\n const clickedTrigger =\n !!relatedTarget &&\n isElement(relatedTarget) &&\n isTriggerElement(relatedTarget) &&\n !isKeyboardInteraction(relatedTarget);\n if (clickedTrigger) {\n return;\n }\n if (expandToViewport) {\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n onReturnFocus();\n }\n closeDropdown();\n }\n };\n\n // Close when focus leaves the entire widget (trigger and menu), for example when focus\n // moves to an app layout drawer or an element in a different frame. The filtering variant\n // keeps focus inside the dropdown content and closes via onDropdownFocusLeave instead.\n const onDropdownBlur = () => {\n if (isOpen && !hasFiltering) {\n closeDropdown();\n }\n };\n\n const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n const onItemActivate: ItemActivate = (item, event) => {\n const isCheckbox = isCheckboxItem(item);\n const isLink = isLinkItem(item);\n const details = {\n id: item.id \|\| 'undefined',\n href: isLink ? item.href : undefined,\n external: isLink ? item.external : undefined,\n target: isLink ? getItemTarget(item) : undefined,\n checked: isCheckbox ? !item.checked : undefined,\n };\n onReturnFocus();\n if (onItemFollow && isLink && isPlainLeftClick(event)) {\n fireCancelableEvent(onItemFollow, details, event);\n }\n if (onItemClick) {\n fireCancelableEvent(onItemClick, details, event);\n }\n closeDropdown();\n };\n\n const openAndSelectFirst = (event: React.KeyboardEvent) => {\n toggleDropdown();\n event.preventDefault();\n };\n\n const actOnParentDropdown = (event: React.KeyboardEvent) => {\n // if there is no highlighted item we act on the trigger by opening or closing dropdown\n if (!targetItem) {\n if (isOpen && !isInRestrictedView) {\n toggleDropdown();\n } else {\n openAndSelectFirst(event);\n }\n } else {\n if (isItemGroup(targetItem)) {\n onGroupToggle(targetItem, event);\n } else {\n onItemActivate(targetItem, event);\n }\n }\n };\n\n const activate = (event: React.KeyboardEvent, isEnter?: boolean) => {\n setIsUsingMouse(false);\n\n // if item is a link we rely on default behavior of an anchor, no need to prevent\n if (targetItem && isLinkItem(targetItem) && isEnter) {\n return;\n }\n\n event.preventDefault();\n actOnParentDropdown(event);\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n setIsUsingMouse(false);\n switch (event.keyCode) {\n case KeyCode.down: {\n if (!isOpen) {\n toggleDropdown();\n if (!hasFiltering) {\n moveHighlight(1, true);\n }\n } else {\n moveHighlight(1);\n }\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n if (!isOpen) {\n toggleDropdown();\n if (!hasFiltering) {\n moveHighlight(-1, true);\n }\n } else {\n moveHighlight(-1);\n }\n event.preventDefault();\n break;\n }\n case KeyCode.space: {\n // Prevent scrolling the list of items and highlighting the trigger when filtering\n // isn't active. Hitting space when filtering is active should just type a space\n // character into the input, or activate the clear button.\n if (!hasFiltering && !isOpen) {\n event.preventDefault();\n }\n break;\n }\n case KeyCode.enter: {\n // While filtering, pressing Enter without a highlighted item should not select\n // any item or close the dropdown.\n if (isOpen && hasFiltering && !targetItem) {\n break;\n }\n if (!targetItem?.disabled) {\n activate(event, true);\n }\n break;\n }\n case KeyCode.left:\n case KeyCode.right: {\n // When filtering is enabled and there's text in the filter input, left/right\n // arrow keys should move the caret between the characters.\n if (hasFiltering && filteringValue) {\n break;\n }\n if (targetItem && !targetItem.disabled && isItemGroup(targetItem) && !isExpanded(targetItem)) {\n expandGroup();\n } else if (hasExpandableGroups) {\n collapseGroup();\n }\n\n event.preventDefault();\n break;\n }\n case KeyCode.escape: {\n onReturnFocus();\n closeDropdown();\n event.preventDefault();\n if (isOpen) {\n event.stopPropagation();\n }\n break;\n }\n case KeyCode.tab: {\n // In filtering mode the dropdown contains multiple focusable elements (the filter\n // input and its clear button). Tabbing between them must not close the dropdown, so\n // closing on Tab is handled by onDropdownFocusLeave instead, which only fires once\n // focus actually leaves the dropdown.\n if (hasFiltering) {\n break;\n }\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n if (expandToViewport) {\n onReturnFocus();\n }\n closeDropdown();\n break;\n }\n }\n };\n const onKeyUp = (event: React.KeyboardEvent) => {\n // When using a roving tabindex (filtering disabled), we need to handle activating items\n // with Space separately because there is a bug in Firefox where changing the focus during\n // a Space keydown event it will trigger unexpected click events on the new element.\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n if (event.keyCode === KeyCode.space && !targetItem?.disabled && !hasFiltering) {\n activate(event);\n }\n };\n\n return {\n isOpen,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n onKeyDown,\n onKeyUp,\n onItemActivate,\n onGroupToggle,\n onDropdownFocusLeave,\n onDropdownBlur,\n toggleDropdown,\n closeDropdown,\n setIsUsingMouse,\n filteringValue,\n setFilteringValue,\n filteredItems,\n showExpandableGroups,\n };\n}\n"]}

package/lib/internal/template/cards/styles.css.js CHANGED Viewed

@@ -1,43 +1,44 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_p8a6i_k1rsq_9",
-  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_k1rsq_41",
-  "header-refresh": "awsui_header-refresh_p8a6i_k1rsq_41",
-  "list": "awsui_list_p8a6i_k1rsq_48",
-  "list-grid-1": "awsui_list-grid-1_p8a6i_k1rsq_59",
-  "card": "awsui_card_p8a6i_k1rsq_59",
-  "list-grid-2": "awsui_list-grid-2_p8a6i_k1rsq_62",
-  "list-grid-3": "awsui_list-grid-3_p8a6i_k1rsq_65",
-  "list-grid-4": "awsui_list-grid-4_p8a6i_k1rsq_68",
-  "list-grid-5": "awsui_list-grid-5_p8a6i_k1rsq_71",
-  "list-grid-6": "awsui_list-grid-6_p8a6i_k1rsq_74",
-  "list-grid-7": "awsui_list-grid-7_p8a6i_k1rsq_77",
-  "list-grid-8": "awsui_list-grid-8_p8a6i_k1rsq_80",
-  "list-grid-9": "awsui_list-grid-9_p8a6i_k1rsq_83",
-  "list-grid-10": "awsui_list-grid-10_p8a6i_k1rsq_86",
-  "list-grid-11": "awsui_list-grid-11_p8a6i_k1rsq_89",
-  "list-grid-12": "awsui_list-grid-12_p8a6i_k1rsq_92",
-  "list-grid-13": "awsui_list-grid-13_p8a6i_k1rsq_95",
-  "list-grid-14": "awsui_list-grid-14_p8a6i_k1rsq_98",
-  "list-grid-15": "awsui_list-grid-15_p8a6i_k1rsq_101",
-  "list-grid-16": "awsui_list-grid-16_p8a6i_k1rsq_104",
-  "list-grid-17": "awsui_list-grid-17_p8a6i_k1rsq_107",
-  "list-grid-18": "awsui_list-grid-18_p8a6i_k1rsq_110",
-  "list-grid-19": "awsui_list-grid-19_p8a6i_k1rsq_113",
-  "list-grid-20": "awsui_list-grid-20_p8a6i_k1rsq_116",
-  "selection-control": "awsui_selection-control_p8a6i_k1rsq_120",
-  "loading": "awsui_loading_p8a6i_k1rsq_130",
-  "empty": "awsui_empty_p8a6i_k1rsq_131",
-  "has-header": "awsui_has-header_p8a6i_k1rsq_138",
-  "refresh": "awsui_refresh_p8a6i_k1rsq_141",
-  "card-header": "awsui_card-header_p8a6i_k1rsq_157",
-  "card-header-inner": "awsui_card-header-inner_p8a6i_k1rsq_166",
-  "card-header-inner-selectable": "awsui_card-header-inner-selectable_p8a6i_k1rsq_169",
-  "card-selected": "awsui_card-selected_p8a6i_k1rsq_172",
-  "section": "awsui_section_p8a6i_k1rsq_176",
-  "section-header": "awsui_section-header_p8a6i_k1rsq_183",
-  "section-content": "awsui_section-content_p8a6i_k1rsq_189",
-  "footer-pagination": "awsui_footer-pagination_p8a6i_k1rsq_201"
+  "root": "awsui_root_p8a6i_1ktd8_9",
+  "header": "awsui_header_p8a6i_1ktd8_41",
+  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_1ktd8_41",
+  "header-refresh": "awsui_header-refresh_p8a6i_1ktd8_44",
+  "list": "awsui_list_p8a6i_1ktd8_51",
+  "list-grid-1": "awsui_list-grid-1_p8a6i_1ktd8_62",
+  "card": "awsui_card_p8a6i_1ktd8_62",
+  "list-grid-2": "awsui_list-grid-2_p8a6i_1ktd8_65",
+  "list-grid-3": "awsui_list-grid-3_p8a6i_1ktd8_68",
+  "list-grid-4": "awsui_list-grid-4_p8a6i_1ktd8_71",
+  "list-grid-5": "awsui_list-grid-5_p8a6i_1ktd8_74",
+  "list-grid-6": "awsui_list-grid-6_p8a6i_1ktd8_77",
+  "list-grid-7": "awsui_list-grid-7_p8a6i_1ktd8_80",
+  "list-grid-8": "awsui_list-grid-8_p8a6i_1ktd8_83",
+  "list-grid-9": "awsui_list-grid-9_p8a6i_1ktd8_86",
+  "list-grid-10": "awsui_list-grid-10_p8a6i_1ktd8_89",
+  "list-grid-11": "awsui_list-grid-11_p8a6i_1ktd8_92",
+  "list-grid-12": "awsui_list-grid-12_p8a6i_1ktd8_95",
+  "list-grid-13": "awsui_list-grid-13_p8a6i_1ktd8_98",
+  "list-grid-14": "awsui_list-grid-14_p8a6i_1ktd8_101",
+  "list-grid-15": "awsui_list-grid-15_p8a6i_1ktd8_104",
+  "list-grid-16": "awsui_list-grid-16_p8a6i_1ktd8_107",
+  "list-grid-17": "awsui_list-grid-17_p8a6i_1ktd8_110",
+  "list-grid-18": "awsui_list-grid-18_p8a6i_1ktd8_113",
+  "list-grid-19": "awsui_list-grid-19_p8a6i_1ktd8_116",
+  "list-grid-20": "awsui_list-grid-20_p8a6i_1ktd8_119",
+  "selection-control": "awsui_selection-control_p8a6i_1ktd8_123",
+  "loading": "awsui_loading_p8a6i_1ktd8_133",
+  "empty": "awsui_empty_p8a6i_1ktd8_134",
+  "has-header": "awsui_has-header_p8a6i_1ktd8_141",
+  "refresh": "awsui_refresh_p8a6i_1ktd8_144",
+  "card-header": "awsui_card-header_p8a6i_1ktd8_160",
+  "card-header-inner": "awsui_card-header-inner_p8a6i_1ktd8_169",
+  "card-header-inner-selectable": "awsui_card-header-inner-selectable_p8a6i_1ktd8_172",
+  "card-selected": "awsui_card-selected_p8a6i_1ktd8_175",
+  "section": "awsui_section_p8a6i_1ktd8_179",
+  "section-header": "awsui_section-header_p8a6i_1ktd8_186",
+  "section-content": "awsui_section-content_p8a6i_1ktd8_192",
+  "footer-pagination": "awsui_footer-pagination_p8a6i_1ktd8_204"
 };