@cloudscape-design/components-themeable 3.0.344 → 3.0.346

package/lib/internal/template/button-dropdown/styles.scoped.css

@@ -90,58 +90,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_button-dropdown_sne0l_1sjcx_93:not(#\9) {
+.awsui_button-dropdown_sne0l_1nm05_93:not(#\9) {
   display: inline-block;
 }
 
-.awsui_items-list-container_sne0l_1sjcx_97:not(#\9) {
+.awsui_items-list-container_sne0l_1nm05_97:not(#\9) {
   padding: 0;
   margin: 0;
-  animation: awsui_awsui-motion-fade-in-0_sne0l_1sjcx_1 500ms var(--motion-easing-show-quick-iz5tz5, ease-out);
+  animation: awsui_awsui-motion-fade-in-0_sne0l_1nm05_1 500ms var(--motion-easing-show-quick-iz5tz5, ease-out);
   animation-fill-mode: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_items-list-container_sne0l_1sjcx_97:not(#\9) {
+  .awsui_items-list-container_sne0l_1nm05_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_items-list-container_sne0l_1sjcx_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_1sjcx_97:not(#\9) {
+.awsui-motion-disabled .awsui_items-list-container_sne0l_1nm05_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_1nm05_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_rotate-up_sne0l_1sjcx_114:not(#\9) {
+.awsui_rotate-up_sne0l_1nm05_114:not(#\9) {
   transform: rotate(-180deg);
   transition: transform var(--motion-duration-rotate-180-ur235g, 135ms) var(--motion-easing-rotate-180-eilno1, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-up_sne0l_1sjcx_114:not(#\9) {
+  .awsui_rotate-up_sne0l_1nm05_114:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-up_sne0l_1sjcx_114:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_1sjcx_114:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-up_sne0l_1nm05_114:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_1nm05_114:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_rotate-down_sne0l_1sjcx_129:not(#\9) {
+.awsui_rotate-down_sne0l_1nm05_129:not(#\9) {
   transform: rotate(0deg);
   transition: transform var(--motion-duration-rotate-180-ur235g, 135ms) var(--motion-easing-rotate-180-eilno1, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-down_sne0l_1sjcx_129:not(#\9) {
+  .awsui_rotate-down_sne0l_1nm05_129:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-down_sne0l_1sjcx_129:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_1sjcx_129:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-down_sne0l_1nm05_129:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_1nm05_129:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_header_sne0l_1sjcx_144:not(#\9) {
+.awsui_header_sne0l_1nm05_144:not(#\9) {
   display: flex;
   flex-direction: column;
   list-style: none;
@@ -150,7 +150,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-bottom: var(--border-field-width-gmdyxy, 1px) solid var(--color-border-dropdown-group-5ahp44, #eaeded);
 }
 
-.awsui_title_sne0l_1sjcx_153:not(#\9),
-.awsui_description_sne0l_1sjcx_154:not(#\9) {
+.awsui_title_sne0l_1nm05_153:not(#\9),
+.awsui_description_sne0l_1nm05_154:not(#\9) {
   color: var(--color-text-dropdown-header-o1u4cu, #16191f);
+}
+
+.awsui_split-trigger-wrapper_sne0l_1nm05_158:not(#\9) {
+  display: flex;
+}
+.awsui_split-trigger-wrapper_sne0l_1nm05_158 > .awsui_trigger-item_sne0l_1nm05_161 > button:not(#\9):focus {
+  z-index: 1;
+}
+.awsui_split-trigger-wrapper_sne0l_1nm05_158 > .awsui_trigger-item_sne0l_1nm05_161:not(#\9):not(:last-child) > .awsui_trigger-button_sne0l_1nm05_164 {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  padding-right: var(--space-xs-7veqkr, 8px);
+  margin-right: var(--space-xxxs-du4mq0, 2px);
+}
+.awsui_split-trigger-wrapper_sne0l_1nm05_158 > .awsui_trigger-item_sne0l_1nm05_161:not(#\9):not(:first-child) > .awsui_trigger-button_sne0l_1nm05_164 {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: calc(var(--space-xs-7veqkr, 8px) - 2px);
+  padding-right: calc(var(--space-xs-7veqkr, 8px) - 2px);
+}
+.awsui_split-trigger-wrapper_sne0l_1nm05_158 > .awsui_trigger-item_sne0l_1nm05_161:not(#\9):not(:first-child).awsui_visual-refresh_sne0l_1nm05_176 > .awsui_trigger-button_sne0l_1nm05_164 {
+  padding-right: calc(var(--space-s-o95p2n, 12px) - 2px);
+}
+
+.awsui_split-trigger_sne0l_1nm05_158:not(#\9) {
+  display: contents;
+}
+
+.awsui_dropdown-trigger_sne0l_1nm05_184:not(#\9) {
+  display: contents;
 }

package/lib/internal/template/button-dropdown/styles.selectors.js

@@ -2,13 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-dropdown": "awsui_button-dropdown_sne0l_1sjcx_93",
-  "items-list-container": "awsui_items-list-container_sne0l_1sjcx_97",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_1sjcx_1",
-  "rotate-up": "awsui_rotate-up_sne0l_1sjcx_114",
-  "rotate-down": "awsui_rotate-down_sne0l_1sjcx_129",
-  "header": "awsui_header_sne0l_1sjcx_144",
-  "title": "awsui_title_sne0l_1sjcx_153",
-  "description": "awsui_description_sne0l_1sjcx_154"
+  "button-dropdown": "awsui_button-dropdown_sne0l_1nm05_93",
+  "items-list-container": "awsui_items-list-container_sne0l_1nm05_97",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_1nm05_1",
+  "rotate-up": "awsui_rotate-up_sne0l_1nm05_114",
+  "rotate-down": "awsui_rotate-down_sne0l_1nm05_129",
+  "header": "awsui_header_sne0l_1nm05_144",
+  "title": "awsui_title_sne0l_1nm05_153",
+  "description": "awsui_description_sne0l_1nm05_154",
+  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_1nm05_158",
+  "trigger-item": "awsui_trigger-item_sne0l_1nm05_161",
+  "trigger-button": "awsui_trigger-button_sne0l_1nm05_164",
+  "visual-refresh": "awsui_visual-refresh_sne0l_1nm05_176",
+  "split-trigger": "awsui_split-trigger_sne0l_1nm05_158",
+  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_1nm05_184"
 };
   

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

@@ -17,6 +17,7 @@ interface UseButtonDropdownApi extends HighlightProps {
     toggleDropdown: (options?: {
         moveHighlightOnOpen?: boolean;
     }) => void;
+    closeDropdown: () => void;
     setIsUsingMouse: (isUsingMouse: boolean) => void;
 }
 export declare function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFocus, hasExpandableGroups, isInRestrictedView, expandToViewport, }: UseButtonDropdownOptions): UseButtonDropdownApi;

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

@@ -1 +1 @@
-{"version":3,"file":"use-button-dropdown.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAuB,sBAAsB,EAAoB,MAAM,uBAAuB,CAAC;AAKtG,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;CAC5B;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,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,kBAA0B,EAC1B,gBAAwB,GACzB,EAAE,wBAAwB,GAAG,oBAAoB,CAiKjD"}
+{"version":3,"file":"use-button-dropdown.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAuB,sBAAsB,EAAoB,MAAM,uBAAuB,CAAC;AAKtG,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;CAC5B;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,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;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,kBAA0B,EAC1B,gBAAwB,GACzB,EAAE,wBAAwB,GAAG,oBAAoB,CAkKjD"}

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

@@ -145,6 +145,7 @@ export function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFo
         onItemActivate,
         onGroupToggle,
         toggleDropdown,
+        closeDropdown,
         setIsUsingMouse,
     };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"use-button-dropdown.js","sourceRoot":"lib/default/","sources":["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 from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport { fireCancelableEvent, CancelableEventHandler, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { getItemTarget, isItemGroup, isLinkItem } from './utils';\nimport useHighlightedMenu from './use-highlighted-menu';\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}\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  toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n  setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport function useButtonDropdown({\n  items,\n  onItemClick,\n  onItemFollow,\n  onReturnFocus,\n  hasExpandableGroups,\n  isInRestrictedView = false,\n  expandToViewport = false,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\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,\n    hasExpandableGroups,\n    isInRestrictedView,\n  });\n\n  const { isOpen, closeDropdown, ...openStateProps } = useOpenState({ onClose: reset });\n  const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n    const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n    if (!isOpen && moveHighlightOnOpen) {\n      moveHighlight(1);\n    }\n    openStateProps.toggleDropdown();\n  };\n\n  const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n  const onItemActivate: ItemActivate = (item, event) => {\n    const details = {\n      id: item.id || 'undefined',\n      href: item.href,\n      external: item.external,\n      target: getItemTarget(item),\n    };\n    if (onItemFollow && item.href && isPlainLeftClick(event)) {\n      fireCancelableEvent(onItemFollow, details, event);\n    }\n    if (onItemClick) {\n      fireCancelableEvent(onItemClick, details, event);\n    }\n    onReturnFocus();\n    closeDropdown();\n  };\n\n  const doVerticalNavigation = (direction: -1 | 1) => {\n    if (isOpen) {\n      moveHighlight(direction);\n    }\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        doVerticalNavigation(1);\n        event.preventDefault();\n        break;\n      }\n      case KeyCode.up: {\n        doVerticalNavigation(-1);\n        event.preventDefault();\n        break;\n      }\n      case KeyCode.space: {\n        // Prevent scrolling the list of items and highlighting the trigger\n        event.preventDefault();\n        break;\n      }\n      case KeyCode.enter: {\n        if (!targetItem?.disabled) {\n          activate(event, true);\n        }\n        break;\n      }\n      case KeyCode.left:\n      case KeyCode.right: {\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        break;\n      }\n      case KeyCode.tab: {\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    // We need to handle activating items with Space separately because there is a bug\n    // in Firefox where changing the focus during a Space keydown event it will trigger\n    // unexpected click events on the new element: https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n    if (event.keyCode === KeyCode.space && !targetItem?.disabled) {\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    toggleDropdown,\n    setIsUsingMouse,\n  };\n}\n"]}
+{"version":3,"file":"use-button-dropdown.js","sourceRoot":"lib/default/","sources":["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 from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport { fireCancelableEvent, CancelableEventHandler, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { getItemTarget, isItemGroup, isLinkItem } from './utils';\nimport useHighlightedMenu from './use-highlighted-menu';\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}\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  toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n  closeDropdown: () => void;\n  setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport function useButtonDropdown({\n  items,\n  onItemClick,\n  onItemFollow,\n  onReturnFocus,\n  hasExpandableGroups,\n  isInRestrictedView = false,\n  expandToViewport = false,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\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,\n    hasExpandableGroups,\n    isInRestrictedView,\n  });\n\n  const { isOpen, closeDropdown, ...openStateProps } = useOpenState({ onClose: reset });\n  const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n    const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n    if (!isOpen && moveHighlightOnOpen) {\n      moveHighlight(1);\n    }\n    openStateProps.toggleDropdown();\n  };\n\n  const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n  const onItemActivate: ItemActivate = (item, event) => {\n    const details = {\n      id: item.id || 'undefined',\n      href: item.href,\n      external: item.external,\n      target: getItemTarget(item),\n    };\n    if (onItemFollow && item.href && isPlainLeftClick(event)) {\n      fireCancelableEvent(onItemFollow, details, event);\n    }\n    if (onItemClick) {\n      fireCancelableEvent(onItemClick, details, event);\n    }\n    onReturnFocus();\n    closeDropdown();\n  };\n\n  const doVerticalNavigation = (direction: -1 | 1) => {\n    if (isOpen) {\n      moveHighlight(direction);\n    }\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        doVerticalNavigation(1);\n        event.preventDefault();\n        break;\n      }\n      case KeyCode.up: {\n        doVerticalNavigation(-1);\n        event.preventDefault();\n        break;\n      }\n      case KeyCode.space: {\n        // Prevent scrolling the list of items and highlighting the trigger\n        event.preventDefault();\n        break;\n      }\n      case KeyCode.enter: {\n        if (!targetItem?.disabled) {\n          activate(event, true);\n        }\n        break;\n      }\n      case KeyCode.left:\n      case KeyCode.right: {\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        break;\n      }\n      case KeyCode.tab: {\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    // We need to handle activating items with Space separately because there is a bug\n    // in Firefox where changing the focus during a Space keydown event it will trigger\n    // unexpected click events on the new element: https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n    if (event.keyCode === KeyCode.space && !targetItem?.disabled) {\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    toggleDropdown,\n    closeDropdown,\n    setIsUsingMouse,\n  };\n}\n"]}

package/lib/internal/template/calendar/styles.css.js

@@ -1,23 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "calendar": "awsui_calendar_1ykar_112l4_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_112l4_1",
-  "root": "awsui_root_1ykar_112l4_124",
-  "calendar-inner": "awsui_calendar-inner_1ykar_112l4_143",
-  "calendar-header": "awsui_calendar-header_1ykar_112l4_146",
-  "calendar-header-month": "awsui_calendar-header-month_1ykar_112l4_151",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_112l4_158",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_112l4_161",
-  "calendar-grid": "awsui_calendar-grid_1ykar_112l4_164",
-  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_112l4_168",
-  "calendar-day-header": "awsui_calendar-day-header_1ykar_112l4_174",
-  "calendar-day": "awsui_calendar-day_1ykar_112l4_174",
-  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_112l4_191",
-  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_112l4_198",
-  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_112l4_205",
-  "calendar-day-today": "awsui_calendar-day-today_1ykar_112l4_208",
-  "day-inner": "awsui_day-inner_1ykar_112l4_223",
-  "calendar-week": "awsui_calendar-week_1ykar_112l4_288"
+  "calendar": "awsui_calendar_1ykar_chstj_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_chstj_1",
+  "root": "awsui_root_1ykar_chstj_124",
+  "calendar-inner": "awsui_calendar-inner_1ykar_chstj_143",
+  "calendar-header": "awsui_calendar-header_1ykar_chstj_146",
+  "calendar-header-month": "awsui_calendar-header-month_1ykar_chstj_151",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_chstj_158",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_chstj_161",
+  "calendar-grid": "awsui_calendar-grid_1ykar_chstj_164",
+  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_chstj_168",
+  "calendar-day-header": "awsui_calendar-day-header_1ykar_chstj_174",
+  "calendar-day": "awsui_calendar-day_1ykar_chstj_174",
+  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_chstj_191",
+  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_chstj_198",
+  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_chstj_205",
+  "calendar-day-today": "awsui_calendar-day-today_1ykar_chstj_208",
+  "day-inner": "awsui_day-inner_1ykar_chstj_223",
+  "calendar-week": "awsui_calendar-week_1ykar_chstj_288"
 };
   

package/lib/internal/template/calendar/styles.scoped.css

@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_calendar_1ykar_112l4_93:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_1ykar_112l4_1 var(--motion-duration-show-quick-cfya8h, 135ms) var(--motion-easing-show-quick-iz5tz5, ease-out);
+.awsui_calendar_1ykar_chstj_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_1ykar_chstj_1 var(--motion-duration-show-quick-cfya8h, 135ms) var(--motion-easing-show-quick-iz5tz5, ease-out);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1ykar_112l4_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1ykar_chstj_1 {
   from {
     opacity: 0;
   }
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_calendar_1ykar_112l4_93:not(#\9) {
+  .awsui_calendar_1ykar_chstj_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_calendar_1ykar_112l4_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_112l4_93:not(#\9) {
+.awsui-motion-disabled .awsui_calendar_1ykar_chstj_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_chstj_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -121,11 +121,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1ykar_112l4_124:not(#\9) {
+.awsui_root_1ykar_chstj_124:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_calendar_1ykar_112l4_93:not(#\9) {
+.awsui_calendar_1ykar_chstj_93:not(#\9) {
   display: block;
   width: var(--size-calendar-grid-width-92llmb, 234px);
   overflow: auto;
@@ -159,84 +159,84 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-spacing: normal;
   box-sizing: border-box;
   font-size: var(--font-body-m-size-0qqejn, 14px);
-  line-height: var(--font-body-m-line-height-9vkzhc, 22px);
+  line-height: var(--font-body-m-line-height-43ichb, 22px);
   color: var(--color-text-body-default-4colr5, #16191f);
   font-weight: 400;
   font-family: var(--font-family-base-nzcxu9, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_calendar-inner_1ykar_112l4_143:not(#\9) {
+.awsui_calendar-inner_1ykar_chstj_143:not(#\9) {
   margin: var(--space-xs-7veqkr, 8px);
 }
-.awsui_calendar-header_1ykar_112l4_146:not(#\9) {
+.awsui_calendar-header_1ykar_chstj_146:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.awsui_calendar-header-month_1ykar_112l4_151:not(#\9) {
+.awsui_calendar-header-month_1ykar_chstj_151:not(#\9) {
   font-size: var(--font-body-m-size-0qqejn, 14px);
-  line-height: var(--font-body-m-line-height-9vkzhc, 22px);
+  line-height: var(--font-body-m-line-height-43ichb, 22px);
   font-weight: 700;
   color: var(--color-text-dropdown-item-default-x23sfz, #16191f);
   margin: 0;
 }
-.awsui_calendar-next-month-btn_1ykar_112l4_158:not(#\9) {
+.awsui_calendar-next-month-btn_1ykar_chstj_158:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-prev-month-btn_1ykar_112l4_161:not(#\9) {
+.awsui_calendar-prev-month-btn_1ykar_chstj_161:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-grid_1ykar_112l4_164:not(#\9) {
+.awsui_calendar-grid_1ykar_chstj_164:not(#\9) {
   width: 100%;
   border-spacing: 0;
 }
-.awsui_calendar-grid-cell_1ykar_112l4_168:not(#\9) {
+.awsui_calendar-grid-cell_1ykar_chstj_168:not(#\9) {
   width: 14.2857142857%;
   word-break: break-word;
   text-align: center;
   font-weight: unset;
 }
-.awsui_calendar-day-header_1ykar_112l4_174:not(#\9) {
+.awsui_calendar-day-header_1ykar_chstj_174:not(#\9) {
   padding: var(--space-s-o95p2n, 12px) 0 var(--space-xxs-xx079q, 4px);
   color: var(--color-text-calendar-month-s5xkxe, #545b64);
   font-size: var(--font-body-s-size-v1w8ey, 12px);
   line-height: var(--font-body-s-line-height-jfgg5d, 16px);
   letter-spacing: var(--font-body-s-letter-spacing-bzrysr, normal);
 }
-.awsui_calendar-day_1ykar_112l4_174:not(#\9) {
+.awsui_calendar-day_1ykar_chstj_174:not(#\9) {
   border-bottom: 1px solid var(--color-border-calendar-grid-ufay6s, #eaeded);
   border-right: 1px solid var(--color-border-calendar-grid-ufay6s, #eaeded);
   padding: var(--space-xxs-xx079q, 4px) 0;
   color: var(--color-text-dropdown-item-disabled-98o9ly, #aab7b8);
   position: relative;
 }
-.awsui_calendar-day_1ykar_112l4_174:not(#\9):first-child {
+.awsui_calendar-day_1ykar_chstj_174:not(#\9):first-child {
   border-left: 1px solid var(--color-border-calendar-grid-ufay6s, #eaeded);
 }
-.awsui_calendar-day-enabled_1ykar_112l4_191:not(#\9) {
+.awsui_calendar-day-enabled_1ykar_chstj_191:not(#\9) {
   cursor: pointer;
   color: var(--color-text-dropdown-item-secondary-77yrz2, #687078);
 }
-.awsui_calendar-day-enabled_1ykar_112l4_191:not(#\9)::after {
+.awsui_calendar-day-enabled_1ykar_chstj_191:not(#\9)::after {
   border-radius: var(--border-radius-item-gy51bh, 0px);
 }
-.awsui_calendar-day-enabled_1ykar_112l4_191.awsui_calendar-day-current-month_1ykar_112l4_198:not(#\9) {
+.awsui_calendar-day-enabled_1ykar_chstj_191.awsui_calendar-day-current-month_1ykar_chstj_198:not(#\9) {
   color: var(--color-text-dropdown-item-default-x23sfz, #16191f);
 }
-.awsui_calendar-day-enabled_1ykar_112l4_191.awsui_calendar-day-current-month_1ykar_112l4_198:not(#\9):hover {
+.awsui_calendar-day-enabled_1ykar_chstj_191.awsui_calendar-day-current-month_1ykar_chstj_198:not(#\9):hover {
   color: var(--color-text-calendar-day-hover-gfp9kc, #16191f);
   background-color: var(--color-background-dropdown-item-hover-ooa2c9, #f2f3f3);
 }
-.awsui_calendar-day-enabled_1ykar_112l4_191.awsui_calendar-day-current-month_1ykar_112l4_198:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_112l4_205)::after {
+.awsui_calendar-day-enabled_1ykar_chstj_191.awsui_calendar-day-current-month_1ykar_chstj_198:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_chstj_205)::after {
   border: var(--border-item-width-x3q2fl, 1px) solid var(--color-border-dropdown-item-hover-jn30h1, #879596);
 }
-.awsui_calendar-day-today_1ykar_112l4_208:not(#\9) {
+.awsui_calendar-day-today_1ykar_chstj_208:not(#\9) {
   background-color: var(--color-background-calendar-today-0692qx, #f2f3f3);
   border-radius: var(--border-radius-item-gy51bh, 0px);
   font-weight: 700;
 }
-.awsui_calendar-day_1ykar_112l4_174:not(#\9)::after {
+.awsui_calendar-day_1ykar_chstj_174:not(#\9)::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -246,21 +246,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   right: calc(-1 * var(--border-item-width-x3q2fl, 1px));
   background-color: transparent;
 }
-.awsui_calendar-day_1ykar_112l4_174 > .awsui_day-inner_1ykar_112l4_223:not(#\9) {
+.awsui_calendar-day_1ykar_chstj_174 > .awsui_day-inner_1ykar_chstj_223:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_calendar-day_1ykar_112l4_174:not(#\9):focus {
+.awsui_calendar-day_1ykar_chstj_174:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_112l4_174:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_chstj_174:not(#\9):focus:focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_112l4_174:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_chstj_174:not(#\9):focus:focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-z4nann, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_112l4_174:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_chstj_174:not(#\9):focus:focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -271,23 +271,23 @@ body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_112l4_174:not(#\9)
   border-radius: var(--border-radius-calendar-day-focus-ring-sdlzls, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4clyb1, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_112l4_174:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_chstj_174:not(#\9):focus:focus::before {
   z-index: 2;
 }
-.awsui_calendar-day-selected_1ykar_112l4_205:not(#\9) {
+.awsui_calendar-day-selected_1ykar_chstj_205:not(#\9) {
   border-color: transparent;
   position: relative;
   z-index: 2;
   font-weight: 700;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_112l4_205:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_chstj_205:not(#\9):focus:focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_112l4_205:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_chstj_205:not(#\9):focus:focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-z4nann, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_112l4_205:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_chstj_205:not(#\9):focus:focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -298,19 +298,19 @@ body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_112l4_205
   border-radius: var(--border-radius-calendar-day-focus-ring-sdlzls, 2px);
   box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-8fhzc9, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_112l4_205:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_chstj_205:not(#\9):focus:focus::before {
   z-index: 2;
 }
-.awsui_calendar-day-selected_1ykar_112l4_205:not(#\9)::after {
+.awsui_calendar-day-selected_1ykar_chstj_205:not(#\9)::after {
   background-color: var(--color-background-control-checked-uprbe0, #0073bb);
   border: var(--border-item-width-x3q2fl, 1px) solid var(--color-background-control-checked-uprbe0, #0073bb);
   border-radius: var(--border-radius-item-gy51bh, 0px);
 }
-.awsui_calendar-day-selected_1ykar_112l4_205 > .awsui_day-inner_1ykar_112l4_223:not(#\9) {
+.awsui_calendar-day-selected_1ykar_chstj_205 > .awsui_day-inner_1ykar_chstj_223:not(#\9) {
   z-index: 2;
   color: var(--color-background-control-default-3975zi, #ffffff);
   position: relative;
 }
-.awsui_calendar-week_1ykar_112l4_288:not(#\9):first-child > .awsui_calendar-day_1ykar_112l4_174 {
+.awsui_calendar-week_1ykar_chstj_288:not(#\9):first-child > .awsui_calendar-day_1ykar_chstj_174 {
   border-top: 1px solid var(--color-border-calendar-grid-ufay6s, #eaeded);
 }

package/lib/internal/template/calendar/styles.selectors.js

@@ -2,23 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "calendar": "awsui_calendar_1ykar_112l4_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_112l4_1",
-  "root": "awsui_root_1ykar_112l4_124",
-  "calendar-inner": "awsui_calendar-inner_1ykar_112l4_143",
-  "calendar-header": "awsui_calendar-header_1ykar_112l4_146",
-  "calendar-header-month": "awsui_calendar-header-month_1ykar_112l4_151",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_112l4_158",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_112l4_161",
-  "calendar-grid": "awsui_calendar-grid_1ykar_112l4_164",
-  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_112l4_168",
-  "calendar-day-header": "awsui_calendar-day-header_1ykar_112l4_174",
-  "calendar-day": "awsui_calendar-day_1ykar_112l4_174",
-  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_112l4_191",
-  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_112l4_198",
-  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_112l4_205",
-  "calendar-day-today": "awsui_calendar-day-today_1ykar_112l4_208",
-  "day-inner": "awsui_day-inner_1ykar_112l4_223",
-  "calendar-week": "awsui_calendar-week_1ykar_112l4_288"
+  "calendar": "awsui_calendar_1ykar_chstj_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_chstj_1",
+  "root": "awsui_root_1ykar_chstj_124",
+  "calendar-inner": "awsui_calendar-inner_1ykar_chstj_143",
+  "calendar-header": "awsui_calendar-header_1ykar_chstj_146",
+  "calendar-header-month": "awsui_calendar-header-month_1ykar_chstj_151",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_chstj_158",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_chstj_161",
+  "calendar-grid": "awsui_calendar-grid_1ykar_chstj_164",
+  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_chstj_168",
+  "calendar-day-header": "awsui_calendar-day-header_1ykar_chstj_174",
+  "calendar-day": "awsui_calendar-day_1ykar_chstj_174",
+  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_chstj_191",
+  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_chstj_198",
+  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_chstj_205",
+  "calendar-day-today": "awsui_calendar-day-today_1ykar_chstj_208",
+  "day-inner": "awsui_day-inner_1ykar_chstj_223",
+  "calendar-week": "awsui_calendar-week_1ykar_chstj_288"
 };
   

package/lib/internal/template/cards/index.js

@@ -6,7 +6,6 @@ import React, { useImperativeHandle, useRef } from 'react';
 import styles from './styles.css.js';
 import { getCardsPerRow } from './cards-layout-helper';
 import { getBaseProps } from '../internal/base-component';
-import { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';
 import ToolsHeader from '../table/tools-header';
 import { getItemKey } from '../table/utils';
 import { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';
@@ -24,16 +23,18 @@ import useMouseDownTarget from '../internal/hooks/use-mouse-down-target';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { supportsStickyPosition } from '../internal/utils/dom';
 import { useInternalI18n } from '../internal/i18n/context';
+import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 const Cards = React.forwardRef(function (_a, ref) {
     var { items = [], cardDefinition, cardsPerRow = [], header, filter, pagination, preferences, empty, loading, loadingText, trackBy, selectedItems, selectionType, isItemDisabled, onSelectionChange, ariaLabels, visibleSections, stickyHeader, stickyHeaderVerticalOffset, variant = 'container', renderAriaLive, firstIndex, totalItemsCount } = _a, rest = __rest(_a, ["items", "cardDefinition", "cardsPerRow", "header", "filter", "pagination", "preferences", "empty", "loading", "loadingText", "trackBy", "selectedItems", "selectionType", "isItemDisabled", "onSelectionChange", "ariaLabels", "visibleSections", "stickyHeader", "stickyHeaderVerticalOffset", "variant", "renderAriaLive", "firstIndex", "totalItemsCount"]);
     const { __internalRootRef } = useBaseComponent('Cards');
     const baseProps = getBaseProps(rest);
     const isRefresh = useVisualRefresh();
+    const isMobile = useMobile();
     const computedVariant = isRefresh ? variant : 'container';
     const instanceUniqueId = useUniqueId('cards');
     const cardsId = (baseProps === null || baseProps === void 0 ? void 0 : baseProps.id) || instanceUniqueId;
     const cardsHeaderId = header ? `${cardsId}-header` : undefined;
-    const [columns, measureRef] = useContainerQuery(({ width }) => getCardsPerRow(width, cardsPerRow), [cardsPerRow]);
+    const [columns, measureRef] = useContainerQuery(({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow), [cardsPerRow]);
     const refObject = useRef(null);
     const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);
     const getMouseDownTarget = useMouseDownTarget();
@@ -51,8 +52,8 @@ const Cards = React.forwardRef(function (_a, ref) {
         },
     });
     const hasToolsHeader = header || filter || pagination || preferences;
+    const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;
     const headerRef = useRef(null);
-    const isMobile = useMobile();
     const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);
     stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;
     const onCardFocus = event => {
@@ -81,7 +82,7 @@ const Cards = React.forwardRef(function (_a, ref) {
     }
     return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
         React.createElement(InternalContainer, { header: hasToolsHeader && (React.createElement("div", { className: clsx(styles.header, isRefresh && styles['header-refresh'], styles[`header-variant-${computedVariant}`]) },
-                React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences }))), footer: variant === 'full-page' && !!pagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef, __headerId: cardsHeaderId, __darkHeader: computedVariant === 'full-page', __disableFooterDivider: true },
+                React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences }))), footer: hasFooterPagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef, __headerId: cardsHeaderId, __darkHeader: computedVariant === 'full-page', __disableFooterDivider: true },
             React.createElement("div", { className: clsx(hasToolsHeader && styles['has-header']) },
                 !!renderAriaLive && !!firstIndex && (React.createElement(LiveRegion, null,
                     React.createElement("span", null, renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })))), status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, updateShiftToggle: updateShiftToggle, onFocus: onCardFocus, ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cardsLabel, ariaLabelledby: (ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cardsLabel) ? undefined : cardsHeaderId }))))));