@cloudscape-design/components 3.0.247 → 3.0.249

package/internal/components/live-region/index.js

@@ -41,7 +41,7 @@ import styles from './styles.css.js';
  */
 export default memo(LiveRegion);
 function LiveRegion(_a) {
-    var { assertive = false, delay = 10, visible = false, tagName: TagName = 'span', children } = _a, restProps = __rest(_a, ["assertive", "delay", "visible", "tagName", "children"]);
+    var { assertive = false, delay = 10, visible = false, tagName: TagName = 'span', children, id } = _a, restProps = __rest(_a, ["assertive", "delay", "visible", "tagName", "children", "id"]);
     const sourceRef = useRef(null);
     const targetRef = useRef(null);
     /*
@@ -82,7 +82,7 @@ function LiveRegion(_a) {
         };
     });
     return (React.createElement(React.Fragment, null,
-        visible && React.createElement(TagName, { ref: sourceRef }, children),
+        visible && (React.createElement(TagName, { ref: sourceRef, id: id }, children)),
         React.createElement(ScreenreaderOnly, Object.assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
             !visible && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true" }, children)),
             React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));

package/internal/components/live-region/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAA2C,MAAM,sBAAsB,CAAC;AAC/E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAOF;QAPE,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,KAAK,EACf,OAAO,EAAE,OAAO,GAAG,MAAM,EACzB,QAAQ,OAEQ,EADb,SAAS,cANM,wDAOnB,CADa;IAEZ,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEjE;;;;;;;;;;MAUE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,IAAI,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,IAAG,QAAQ,CAAW;QAEzD,oBAAC,gBAAgB,oBAAK,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;YAC/E,CAAC,OAAO,IAAI,CACX,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,iBAAc,MAAM,IACxC,QAAQ,CACD,CACX;YAED,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC9E,CAClB,CACJ,CAAC;AACJ,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  tagName?: 'span' | 'div';\n  children: React.ReactNode;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n *\n * To fix, wrap \"title\" in an element:\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n *\n * Or create a single text node if possible:\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * <>\n *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n  assertive = false,\n  delay = 10,\n  visible = false,\n  tagName: TagName = 'span',\n  children,\n  ...restProps\n}: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function updateLiveRegion() {\n      if (targetRef.current && sourceRef.current) {\n        const sourceContent = extractInnerText(sourceRef.current);\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <>\n      {visible && <TagName ref={sourceRef}>{children}</TagName>}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && (\n          <TagName ref={sourceRef} aria-hidden=\"true\">\n            {children}\n          </TagName>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAA2C,MAAM,sBAAsB,CAAC;AAC/E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAQF;QARE,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,KAAK,EACf,OAAO,EAAE,OAAO,GAAG,MAAM,EACzB,QAAQ,EACR,EAAE,OAEc,EADb,SAAS,cAPM,8DAQnB,CADa;IAEZ,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEjE;;;;;;;;;;MAUE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,IAAI,CACV,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,IAC5B,QAAQ,CACD,CACX;QAED,oBAAC,gBAAgB,oBAAK,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;YAC/E,CAAC,OAAO,IAAI,CACX,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,iBAAc,MAAM,IACxC,QAAQ,CACD,CACX;YAED,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC9E,CAClB,CACJ,CAAC;AACJ,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  tagName?: 'span' | 'div';\n  children: React.ReactNode;\n  id?: string;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n *\n * To fix, wrap \"title\" in an element:\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n *\n * Or create a single text node if possible:\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * <>\n *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n  assertive = false,\n  delay = 10,\n  visible = false,\n  tagName: TagName = 'span',\n  children,\n  id,\n  ...restProps\n}: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function updateLiveRegion() {\n      if (targetRef.current && sourceRef.current) {\n        const sourceContent = extractInnerText(sourceRef.current);\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <>\n      {visible && (\n        <TagName ref={sourceRef} id={id}>\n          {children}\n        </TagName>\n      )}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && (\n          <TagName ref={sourceRef} aria-hidden=\"true\">\n            {children}\n          </TagName>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}

package/internal/components/options-list/index.d.ts

@@ -22,6 +22,7 @@ export interface OptionsListProps extends BaseComponentProps {
     position?: React.CSSProperties['position'];
     role?: 'listbox' | 'list' | 'menu';
     ariaLabelledby?: string;
+    ariaDescribedby?: string;
     decreaseTopMargin?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLUListElement>>;

package/internal/components/options-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAEL,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EAEd,MAAM,cAAc,CAAC;AAItB,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;;AAiFD,wBAA6C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAEL,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EAEd,MAAM,cAAc,CAAC;AAItB,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;;AAmFD,wBAA6C"}

package/internal/components/options-list/index.js

@@ -15,7 +15,7 @@ const getItemIndex = (containerRef, event) => {
     return mouseTarget ? parseInt(mouseTarget) : -1;
 };
 const OptionsList = (_a, ref) => {
-    var { open, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', decreaseTopMargin = false, ariaLabelledby } = _a, restProps = __rest(_a, ["open", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "decreaseTopMargin", "ariaLabelledby"]);
+    var { open, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', decreaseTopMargin = false, ariaLabelledby, ariaDescribedby } = _a, restProps = __rest(_a, ["open", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "decreaseTopMargin", "ariaLabelledby", "ariaDescribedby"]);
     const baseProps = getBaseProps(restProps);
     const menuRef = useRef(null);
     const handleScroll = () => {
@@ -38,7 +38,7 @@ const OptionsList = (_a, ref) => {
         [styles['decrease-top-margin']]: decreaseTopMargin,
     });
     const mergedRef = useMergeRefs(ref, menuRef);
-    return (React.createElement("ul", Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position }, role: role, onScroll: handleScroll, onKeyDown: event => onKeyDown && fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: -1, "aria-labelledby": ariaLabelledby }), open && children));
+    return (React.createElement("ul", Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position }, role: role, onScroll: handleScroll, onKeyDown: event => onKeyDown && fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: -1, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }), open && children));
 };
 export default React.forwardRef(OptionsList);
 //# sourceMappingURL=index.js.map

package/internal/components/options-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport React, { useEffect, useRef } from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n  fireNonCancelableEvent,\n  NonCancelableEventHandler,\n  CancelableEventHandler,\n  BaseKeyDetail,\n  fireKeyboardEvent,\n} from '../../events';\nimport { findUpUntil } from '../../utils/dom';\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n  open?: boolean;\n  /**\n   * Options list\n   */\n  children: React.ReactNode;\n  nativeAttributes?: Record<string, any>;\n  /**\n   * Called when more items need to be loaded.\n   */\n  onLoadMore?: NonCancelableEventHandler;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onBlur?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n  onFocus?: NonCancelableEventHandler;\n  onMouseUp?: (itemIndex: number) => void;\n  onMouseMove?: (itemIndex: number) => void;\n  position?: React.CSSProperties['position'];\n  role?: 'listbox' | 'list' | 'menu';\n  ariaLabelledby?: string;\n  decreaseTopMargin?: boolean;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n  const target = findUpUntil(\n    event.target as HTMLElement,\n    element => element === containerRef.current || !!element.dataset.mouseTarget\n  );\n  const mouseTarget = target?.dataset.mouseTarget;\n  return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n  {\n    open,\n    children,\n    nativeAttributes = {},\n    onKeyDown,\n    onBlur,\n    onFocus,\n    onLoadMore,\n    onMouseUp,\n    onMouseMove,\n    position = 'relative',\n    role = 'listbox',\n    decreaseTopMargin = false,\n    ariaLabelledby,\n    ...restProps\n  }: OptionsListProps,\n  ref: React.Ref<HTMLUListElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  const handleScroll = () => {\n    const scrollContainer = menuRef?.current;\n    if (scrollContainer) {\n      const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n      const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n      if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n        fireNonCancelableEvent(onLoadMore);\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n    handleScroll();\n  });\n\n  const className = clsx(styles['options-list'], {\n    [styles['decrease-top-margin']]: decreaseTopMargin,\n  });\n\n  const mergedRef = useMergeRefs(ref, menuRef);\n\n  return (\n    <ul\n      {...baseProps}\n      {...nativeAttributes}\n      className={className}\n      ref={mergedRef}\n      style={{ position }}\n      role={role}\n      onScroll={handleScroll}\n      onKeyDown={event => onKeyDown && fireKeyboardEvent(onKeyDown, event)}\n      onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n      onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n      onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n      onFocus={() => fireNonCancelableEvent(onFocus)}\n      tabIndex={-1}\n      aria-labelledby={ariaLabelledby}\n    >\n      {open && children}\n    </ul>\n  );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport React, { useEffect, useRef } from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n  fireNonCancelableEvent,\n  NonCancelableEventHandler,\n  CancelableEventHandler,\n  BaseKeyDetail,\n  fireKeyboardEvent,\n} from '../../events';\nimport { findUpUntil } from '../../utils/dom';\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n  open?: boolean;\n  /**\n   * Options list\n   */\n  children: React.ReactNode;\n  nativeAttributes?: Record<string, any>;\n  /**\n   * Called when more items need to be loaded.\n   */\n  onLoadMore?: NonCancelableEventHandler;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onBlur?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n  onFocus?: NonCancelableEventHandler;\n  onMouseUp?: (itemIndex: number) => void;\n  onMouseMove?: (itemIndex: number) => void;\n  position?: React.CSSProperties['position'];\n  role?: 'listbox' | 'list' | 'menu';\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  decreaseTopMargin?: boolean;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n  const target = findUpUntil(\n    event.target as HTMLElement,\n    element => element === containerRef.current || !!element.dataset.mouseTarget\n  );\n  const mouseTarget = target?.dataset.mouseTarget;\n  return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n  {\n    open,\n    children,\n    nativeAttributes = {},\n    onKeyDown,\n    onBlur,\n    onFocus,\n    onLoadMore,\n    onMouseUp,\n    onMouseMove,\n    position = 'relative',\n    role = 'listbox',\n    decreaseTopMargin = false,\n    ariaLabelledby,\n    ariaDescribedby,\n    ...restProps\n  }: OptionsListProps,\n  ref: React.Ref<HTMLUListElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  const handleScroll = () => {\n    const scrollContainer = menuRef?.current;\n    if (scrollContainer) {\n      const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n      const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n      if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n        fireNonCancelableEvent(onLoadMore);\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n    handleScroll();\n  });\n\n  const className = clsx(styles['options-list'], {\n    [styles['decrease-top-margin']]: decreaseTopMargin,\n  });\n\n  const mergedRef = useMergeRefs(ref, menuRef);\n\n  return (\n    <ul\n      {...baseProps}\n      {...nativeAttributes}\n      className={className}\n      ref={mergedRef}\n      style={{ position }}\n      role={role}\n      onScroll={handleScroll}\n      onKeyDown={event => onKeyDown && fireKeyboardEvent(onKeyDown, event)}\n      onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n      onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n      onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n      onFocus={() => fireNonCancelableEvent(onFocus)}\n      tabIndex={-1}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n    >\n      {open && children}\n    </ul>\n  );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}

package/internal/context/app-layout-context.d.ts

@@ -4,7 +4,6 @@ export interface AppLayoutContextProps {
     stickyOffsetTop: number;
     hasBreadcrumbs: boolean;
     setHasStickyBackground?: (hasBackground: boolean) => void;
-    setDynamicOverlapHeight?: (height: number) => void;
 }
 export declare const AppLayoutContext: import("react").Context<AppLayoutContextProps>;
 export declare function useAppLayoutContext(): AppLayoutContextProps;

package/internal/context/app-layout-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-layout-context.d.ts","sourceRoot":"lib/default/","sources":["internal/context/app-layout-context.ts"],"names":[],"mappings":";AAIA,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,sBAAsB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,gBAAgB,gDAI3B,CAAC;AAEH,wBAAgB,mBAAmB,0BAElC"}
+{"version":3,"file":"app-layout-context.d.ts","sourceRoot":"lib/default/","sources":["internal/context/app-layout-context.ts"],"names":[],"mappings":";AAIA,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,sBAAsB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,gBAAgB,gDAI3B,CAAC;AAEH,wBAAgB,mBAAmB,0BAElC"}

package/internal/context/app-layout-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-layout-context.js","sourceRoot":"lib/default/","sources":["internal/context/app-layout-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB;IACnE,eAAe,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAAC;IACrB,cAAc,EAAE,KAAK;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface AppLayoutContextProps {\n  stickyOffsetBottom: number;\n  stickyOffsetTop: number;\n  hasBreadcrumbs: boolean;\n  setHasStickyBackground?: (hasBackground: boolean) => void;\n  setDynamicOverlapHeight?: (height: number) => void;\n}\n\nexport const AppLayoutContext = createContext<AppLayoutContextProps>({\n  stickyOffsetTop: 0,\n  stickyOffsetBottom: 0,\n  hasBreadcrumbs: false,\n});\n\nexport function useAppLayoutContext() {\n  return useContext(AppLayoutContext);\n}\n"]}
+{"version":3,"file":"app-layout-context.js","sourceRoot":"lib/default/","sources":["internal/context/app-layout-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AASlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB;IACnE,eAAe,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAAC;IACrB,cAAc,EAAE,KAAK;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface AppLayoutContextProps {\n  stickyOffsetBottom: number;\n  stickyOffsetTop: number;\n  hasBreadcrumbs: boolean;\n  setHasStickyBackground?: (hasBackground: boolean) => void;\n}\n\nexport const AppLayoutContext = createContext<AppLayoutContextProps>({\n  stickyOffsetTop: 0,\n  stickyOffsetBottom: 0,\n  hasBreadcrumbs: false,\n});\n\nexport function useAppLayoutContext() {\n  return useContext(AppLayoutContext);\n}\n"]}

package/internal/context/dynamic-overlap-context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DynamicOverlapContext: import("react").Context<(overlapHeight: number) => void>;
+//# sourceMappingURL=dynamic-overlap-context.d.ts.map

package/internal/context/dynamic-overlap-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-overlap-context.d.ts","sourceRoot":"lib/default/","sources":["internal/context/dynamic-overlap-context.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,qBAAqB,0CAAiC,MAAM,KAAK,IAAI,CAAW,CAAC"}

package/internal/context/dynamic-overlap-context.js

@@ -0,0 +1,5 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createContext } from 'react';
+export const DynamicOverlapContext = createContext(() => { });
+//# sourceMappingURL=dynamic-overlap-context.js.map

package/internal/context/dynamic-overlap-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-overlap-context.js","sourceRoot":"lib/default/","sources":["internal/context/dynamic-overlap-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAkC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext } from 'react';\n\nexport const DynamicOverlapContext = createContext<(overlapHeight: number) => void>(() => {});\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 
     export var PACKAGE_SOURCE = 'components';
-    export var PACKAGE_VERSION = '3.0.0 (471735b)';
+    export var PACKAGE_VERSION = '3.0.0 (192f9e6)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/internal/generated/theming/index.cjs

@@ -1587,6 +1587,22 @@ module.exports.preset = {
         "light": "{colorBlue200}",
         "dark": "{colorBlue600}"
       },
+      "colorDropzoneBackgroundActive": {
+        "light": "{colorGrey200}",
+        "dark": "{colorGrey500}"
+      },
+      "colorDropzoneBackgroundHover": {
+        "light": "{colorBlue200}",
+        "dark": "{colorBlue600}"
+      },
+      "colorDropzoneTextActive": {
+        "light": "{colorGrey550}",
+        "dark": "{colorGrey800}"
+      },
+      "colorDropzoneTextHover": {
+        "light": "{colorBlue800}",
+        "dark": "{colorWhite}"
+      },
       "fontBodyMLineHeight": "22px",
       "fontBodyMSize": "14px",
       "fontBodySLetterSpacing": "0.005em",
@@ -1664,6 +1680,7 @@ module.exports.preset = {
       "borderRadiusControlCircularFocusRing": "4px",
       "borderRadiusControlDefaultFocusRing": "4px",
       "borderRadiusDropdown": "{borderRadiusItem}",
+      "borderRadiusDropzone": "12px",
       "borderRadiusFlashbar": "12px",
       "borderRadiusItem": "8px",
       "borderRadiusInput": "8px",
@@ -3522,6 +3539,22 @@ module.exports.preset = {
           "colorDragPlaceholderHover": {
             "light": "{colorBlue600}",
             "dark": "{colorBlue600}"
+          },
+          "colorDropzoneBackgroundActive": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
+          "colorDropzoneBackgroundHover": {
+            "light": "{colorBlue600}",
+            "dark": "{colorBlue600}"
+          },
+          "colorDropzoneTextActive": {
+            "light": "{colorGrey800}",
+            "dark": "{colorGrey800}"
+          },
+          "colorDropzoneTextHover": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
           }
         }
       },
@@ -4476,6 +4509,22 @@ module.exports.preset = {
           "colorDragPlaceholderHover": {
             "light": "{colorBlue600}",
             "dark": "{colorBlue600}"
+          },
+          "colorDropzoneBackgroundActive": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
+          "colorDropzoneBackgroundHover": {
+            "light": "{colorBlue600}",
+            "dark": "{colorBlue600}"
+          },
+          "colorDropzoneTextActive": {
+            "light": "{colorGrey800}",
+            "dark": "{colorGrey800}"
+          },
+          "colorDropzoneTextHover": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
           }
         }
       },
@@ -5370,6 +5419,22 @@ module.exports.preset = {
           "colorDragPlaceholderHover": {
             "light": "{colorBlue200}",
             "dark": "{colorBlue600}"
+          },
+          "colorDropzoneBackgroundActive": {
+            "light": "{colorGrey200}",
+            "dark": "{colorGrey500}"
+          },
+          "colorDropzoneBackgroundHover": {
+            "light": "{colorBlue200}",
+            "dark": "{colorBlue600}"
+          },
+          "colorDropzoneTextActive": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey800}"
+          },
+          "colorDropzoneTextHover": {
+            "light": "{colorBlue800}",
+            "dark": "{colorWhite}"
           }
         }
       },
@@ -6264,6 +6329,22 @@ module.exports.preset = {
           "colorDragPlaceholderHover": {
             "light": "{colorBlue200}",
             "dark": "{colorBlue600}"
+          },
+          "colorDropzoneBackgroundActive": {
+            "light": "{colorGrey200}",
+            "dark": "{colorGrey500}"
+          },
+          "colorDropzoneBackgroundHover": {
+            "light": "{colorBlue200}",
+            "dark": "{colorBlue600}"
+          },
+          "colorDropzoneTextActive": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey800}"
+          },
+          "colorDropzoneTextHover": {
+            "light": "{colorBlue800}",
+            "dark": "{colorWhite}"
           }
         }
       }
@@ -6645,6 +6726,10 @@ module.exports.preset = {
       "colorBoardPlaceholderHover": "color",
       "colorDragPlaceholderActive": "color",
       "colorDragPlaceholderHover": "color",
+      "colorDropzoneBackgroundActive": "color",
+      "colorDropzoneBackgroundHover": "color",
+      "colorDropzoneTextActive": "color",
+      "colorDropzoneTextHover": "color",
       "motionDurationExtraFast": "motion",
       "motionDurationExtraSlow": "motion",
       "motionDurationFast": "motion",
@@ -7670,6 +7755,10 @@ module.exports.preset = {
     "colorBoardPlaceholderHover": "color-board-placeholder-hover",
     "colorDragPlaceholderActive": "color-drag-placeholder-active",
     "colorDragPlaceholderHover": "color-drag-placeholder-hover",
+    "colorDropzoneBackgroundActive": "color-dropzone-background-active",
+    "colorDropzoneBackgroundHover": "color-dropzone-background-hover",
+    "colorDropzoneTextActive": "color-dropzone-text-active",
+    "colorDropzoneTextHover": "color-dropzone-text-hover",
     "fontBodyMLineHeight": "font-body-m-line-height",
     "fontBodyMSize": "font-body-m-size",
     "fontBodySLetterSpacing": "font-body-s-letter-spacing",
@@ -7747,6 +7836,7 @@ module.exports.preset = {
     "borderRadiusControlCircularFocusRing": "border-radius-control-circular-focus-ring",
     "borderRadiusControlDefaultFocusRing": "border-radius-control-default-focus-ring",
     "borderRadiusDropdown": "border-radius-dropdown",
+    "borderRadiusDropzone": "border-radius-dropzone",
     "borderRadiusFlashbar": "border-radius-flashbar",
     "borderRadiusItem": "border-radius-item",
     "borderRadiusInput": "border-radius-input",
@@ -8330,6 +8420,10 @@ module.exports.preset = {
     "colorBoardPlaceholderHover": "--color-board-placeholder-hover-v1s7kq",
     "colorDragPlaceholderActive": "--color-drag-placeholder-active-fkpj7i",
     "colorDragPlaceholderHover": "--color-drag-placeholder-hover-3ohnz1",
+    "colorDropzoneBackgroundActive": "--color-dropzone-background-active-g4zi07",
+    "colorDropzoneBackgroundHover": "--color-dropzone-background-hover-j98f7z",
+    "colorDropzoneTextActive": "--color-dropzone-text-active-aobpir",
+    "colorDropzoneTextHover": "--color-dropzone-text-hover-ud2lnq",
     "fontBodyMLineHeight": "--font-body-m-line-height-i7xxvv",
     "fontBodyMSize": "--font-body-m-size-sregvd",
     "fontBodySLetterSpacing": "--font-body-s-letter-spacing-cy0oxj",
@@ -8407,6 +8501,7 @@ module.exports.preset = {
     "borderRadiusControlCircularFocusRing": "--border-radius-control-circular-focus-ring-qawzn7",
     "borderRadiusControlDefaultFocusRing": "--border-radius-control-default-focus-ring-7661kz",
     "borderRadiusDropdown": "--border-radius-dropdown-ujknaf",
+    "borderRadiusDropzone": "--border-radius-dropzone-poqo08",
     "borderRadiusFlashbar": "--border-radius-flashbar-i7jm55",
     "borderRadiusItem": "--border-radius-item-u2ibpi",
     "borderRadiusInput": "--border-radius-input-txq8zy",

package/internal/generated/theming/index.js

@@ -1587,6 +1587,22 @@ export var preset = {
         "light": "{colorBlue200}",
         "dark": "{colorBlue600}"
       },
+      "colorDropzoneBackgroundActive": {
+        "light": "{colorGrey200}",
+        "dark": "{colorGrey500}"
+      },
+      "colorDropzoneBackgroundHover": {
+        "light": "{colorBlue200}",
+        "dark": "{colorBlue600}"
+      },
+      "colorDropzoneTextActive": {
+        "light": "{colorGrey550}",
+        "dark": "{colorGrey800}"
+      },
+      "colorDropzoneTextHover": {
+        "light": "{colorBlue800}",
+        "dark": "{colorWhite}"
+      },
       "fontBodyMLineHeight": "22px",
       "fontBodyMSize": "14px",
       "fontBodySLetterSpacing": "0.005em",
@@ -1664,6 +1680,7 @@ export var preset = {
       "borderRadiusControlCircularFocusRing": "4px",
       "borderRadiusControlDefaultFocusRing": "4px",
       "borderRadiusDropdown": "{borderRadiusItem}",
+      "borderRadiusDropzone": "12px",
       "borderRadiusFlashbar": "12px",
       "borderRadiusItem": "8px",
       "borderRadiusInput": "8px",
@@ -3522,6 +3539,22 @@ export var preset = {
           "colorDragPlaceholderHover": {
             "light": "{colorBlue600}",
             "dark": "{colorBlue600}"
+          },
+          "colorDropzoneBackgroundActive": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
+          "colorDropzoneBackgroundHover": {
+            "light": "{colorBlue600}",
+            "dark": "{colorBlue600}"
+          },
+          "colorDropzoneTextActive": {
+            "light": "{colorGrey800}",
+            "dark": "{colorGrey800}"
+          },
+          "colorDropzoneTextHover": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
           }
         }
       },
@@ -4476,6 +4509,22 @@ export var preset = {
           "colorDragPlaceholderHover": {
             "light": "{colorBlue600}",
             "dark": "{colorBlue600}"
+          },
+          "colorDropzoneBackgroundActive": {
+            "light": "{colorGrey500}",
+            "dark": "{colorGrey500}"
+          },
+          "colorDropzoneBackgroundHover": {
+            "light": "{colorBlue600}",
+            "dark": "{colorBlue600}"
+          },
+          "colorDropzoneTextActive": {
+            "light": "{colorGrey800}",
+            "dark": "{colorGrey800}"
+          },
+          "colorDropzoneTextHover": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
           }
         }
       },
@@ -5370,6 +5419,22 @@ export var preset = {
           "colorDragPlaceholderHover": {
             "light": "{colorBlue200}",
             "dark": "{colorBlue600}"
+          },
+          "colorDropzoneBackgroundActive": {
+            "light": "{colorGrey200}",
+            "dark": "{colorGrey500}"
+          },
+          "colorDropzoneBackgroundHover": {
+            "light": "{colorBlue200}",
+            "dark": "{colorBlue600}"
+          },
+          "colorDropzoneTextActive": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey800}"
+          },
+          "colorDropzoneTextHover": {
+            "light": "{colorBlue800}",
+            "dark": "{colorWhite}"
           }
         }
       },
@@ -6264,6 +6329,22 @@ export var preset = {
           "colorDragPlaceholderHover": {
             "light": "{colorBlue200}",
             "dark": "{colorBlue600}"
+          },
+          "colorDropzoneBackgroundActive": {
+            "light": "{colorGrey200}",
+            "dark": "{colorGrey500}"
+          },
+          "colorDropzoneBackgroundHover": {
+            "light": "{colorBlue200}",
+            "dark": "{colorBlue600}"
+          },
+          "colorDropzoneTextActive": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey800}"
+          },
+          "colorDropzoneTextHover": {
+            "light": "{colorBlue800}",
+            "dark": "{colorWhite}"
           }
         }
       }
@@ -6645,6 +6726,10 @@ export var preset = {
       "colorBoardPlaceholderHover": "color",
       "colorDragPlaceholderActive": "color",
       "colorDragPlaceholderHover": "color",
+      "colorDropzoneBackgroundActive": "color",
+      "colorDropzoneBackgroundHover": "color",
+      "colorDropzoneTextActive": "color",
+      "colorDropzoneTextHover": "color",
       "motionDurationExtraFast": "motion",
       "motionDurationExtraSlow": "motion",
       "motionDurationFast": "motion",
@@ -7670,6 +7755,10 @@ export var preset = {
     "colorBoardPlaceholderHover": "color-board-placeholder-hover",
     "colorDragPlaceholderActive": "color-drag-placeholder-active",
     "colorDragPlaceholderHover": "color-drag-placeholder-hover",
+    "colorDropzoneBackgroundActive": "color-dropzone-background-active",
+    "colorDropzoneBackgroundHover": "color-dropzone-background-hover",
+    "colorDropzoneTextActive": "color-dropzone-text-active",
+    "colorDropzoneTextHover": "color-dropzone-text-hover",
     "fontBodyMLineHeight": "font-body-m-line-height",
     "fontBodyMSize": "font-body-m-size",
     "fontBodySLetterSpacing": "font-body-s-letter-spacing",
@@ -7747,6 +7836,7 @@ export var preset = {
     "borderRadiusControlCircularFocusRing": "border-radius-control-circular-focus-ring",
     "borderRadiusControlDefaultFocusRing": "border-radius-control-default-focus-ring",
     "borderRadiusDropdown": "border-radius-dropdown",
+    "borderRadiusDropzone": "border-radius-dropzone",
     "borderRadiusFlashbar": "border-radius-flashbar",
     "borderRadiusItem": "border-radius-item",
     "borderRadiusInput": "border-radius-input",
@@ -8330,6 +8420,10 @@ export var preset = {
     "colorBoardPlaceholderHover": "--color-board-placeholder-hover-v1s7kq",
     "colorDragPlaceholderActive": "--color-drag-placeholder-active-fkpj7i",
     "colorDragPlaceholderHover": "--color-drag-placeholder-hover-3ohnz1",
+    "colorDropzoneBackgroundActive": "--color-dropzone-background-active-g4zi07",
+    "colorDropzoneBackgroundHover": "--color-dropzone-background-hover-j98f7z",
+    "colorDropzoneTextActive": "--color-dropzone-text-active-aobpir",
+    "colorDropzoneTextHover": "--color-dropzone-text-hover-ud2lnq",
     "fontBodyMLineHeight": "--font-body-m-line-height-i7xxvv",
     "fontBodyMSize": "--font-body-m-size-sregvd",
     "fontBodySLetterSpacing": "--font-body-s-letter-spacing-cy0oxj",
@@ -8407,6 +8501,7 @@ export var preset = {
     "borderRadiusControlCircularFocusRing": "--border-radius-control-circular-focus-ring-qawzn7",
     "borderRadiusControlDefaultFocusRing": "--border-radius-control-default-focus-ring-7661kz",
     "borderRadiusDropdown": "--border-radius-dropdown-ujknaf",
+    "borderRadiusDropzone": "--border-radius-dropzone-poqo08",
     "borderRadiusFlashbar": "--border-radius-flashbar-i7jm55",
     "borderRadiusItem": "--border-radius-item-u2ibpi",
     "borderRadiusInput": "--border-radius-input-txq8zy",

package/internal/hooks/use-dynamic-overlap/index.js

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useLayoutEffect } from 'react';
-import { useAppLayoutContext } from '../../context/app-layout-context';
+import { useContext, useLayoutEffect } from 'react';
+import { DynamicOverlapContext } from '../../context/dynamic-overlap-context';
 import { useContainerQuery } from '../container-queries';
 /**
  * Observes the height of an element referenced by the returning ref and sets the value as overlapping
@@ -12,18 +12,18 @@ import { useContainerQuery } from '../container-queries';
 export function useDynamicOverlap(props) {
     var _a;
     const disabled = (_a = props === null || props === void 0 ? void 0 : props.disabled) !== null && _a !== void 0 ? _a : false;
-    const { setDynamicOverlapHeight } = useAppLayoutContext();
-    const [overlapContainerQuery, overlapElementRef] = useContainerQuery(rect => rect.height);
+    const setDynamicOverlapHeight = useContext(DynamicOverlapContext);
+    const [overlapHeight, overlapElementRef] = useContainerQuery(rect => rect.height);
     useLayoutEffect(function handleDynamicOverlapHeight() {
         if (!disabled) {
-            setDynamicOverlapHeight === null || setDynamicOverlapHeight === void 0 ? void 0 : setDynamicOverlapHeight(overlapContainerQuery !== null && overlapContainerQuery !== void 0 ? overlapContainerQuery : 0);
+            setDynamicOverlapHeight(overlapHeight !== null && overlapHeight !== void 0 ? overlapHeight : 0);
         }
         return () => {
             if (!disabled) {
-                setDynamicOverlapHeight === null || setDynamicOverlapHeight === void 0 ? void 0 : setDynamicOverlapHeight(0);
+                setDynamicOverlapHeight(0);
             }
         };
-    }, [disabled, overlapContainerQuery, setDynamicOverlapHeight]);
+    }, [disabled, overlapHeight, setDynamicOverlapHeight]);
     return overlapElementRef;
 }
 //# sourceMappingURL=index.js.map

package/internal/hooks/use-dynamic-overlap/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-dynamic-overlap/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA8B;;IAC9D,MAAM,QAAQ,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,mCAAI,KAAK,CAAC;IAC1C,MAAM,EAAE,uBAAuB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC1D,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAE1F,eAAe,CACb,SAAS,0BAA0B;QACjC,IAAI,CAAC,QAAQ,EAAE;YACb,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,CAAC,CAAC,CAAC;SACvD;QAED,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,QAAQ,EAAE;gBACb,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,CAAC,CAAC,CAAC;aAC9B;QACH,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,qBAAqB,EAAE,uBAAuB,CAAC,CAC3D,CAAC;IAEF,OAAO,iBAAiB,CAAC;AAC3B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useLayoutEffect } from 'react';\n\nimport { useAppLayoutContext } from '../../context/app-layout-context';\nimport { useContainerQuery } from '../container-queries';\n\nexport interface UseDynamicOverlapProps {\n  /**\n   * Disables hook if not needed. By default, `false`.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Observes the height of an element referenced by the returning ref and sets the value as overlapping\n * height for the surrounding AppLayout component.\n * @param props.disabled disables hook if not applicable\n * @returns ref to be measured as overlapping height\n */\nexport function useDynamicOverlap(props?: UseDynamicOverlapProps) {\n  const disabled = props?.disabled ?? false;\n  const { setDynamicOverlapHeight } = useAppLayoutContext();\n  const [overlapContainerQuery, overlapElementRef] = useContainerQuery(rect => rect.height);\n\n  useLayoutEffect(\n    function handleDynamicOverlapHeight() {\n      if (!disabled) {\n        setDynamicOverlapHeight?.(overlapContainerQuery ?? 0);\n      }\n\n      return () => {\n        if (!disabled) {\n          setDynamicOverlapHeight?.(0);\n        }\n      };\n    },\n    [disabled, overlapContainerQuery, setDynamicOverlapHeight]\n  );\n\n  return overlapElementRef;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-dynamic-overlap/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA8B;;IAC9D,MAAM,QAAQ,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,mCAAI,KAAK,CAAC;IAC1C,MAAM,uBAAuB,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAClE,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAElF,eAAe,CACb,SAAS,0BAA0B;QACjC,IAAI,CAAC,QAAQ,EAAE;YACb,uBAAuB,CAAC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,CAAC,CAAC,CAAC;SAC7C;QAED,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,QAAQ,EAAE;gBACb,uBAAuB,CAAC,CAAC,CAAC,CAAC;aAC5B;QACH,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,aAAa,EAAE,uBAAuB,CAAC,CACnD,CAAC;IAEF,OAAO,iBAAiB,CAAC;AAC3B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, useLayoutEffect } from 'react';\n\nimport { DynamicOverlapContext } from '../../context/dynamic-overlap-context';\nimport { useContainerQuery } from '../container-queries';\n\nexport interface UseDynamicOverlapProps {\n  /**\n   * Disables hook if not needed. By default, `false`.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Observes the height of an element referenced by the returning ref and sets the value as overlapping\n * height for the surrounding AppLayout component.\n * @param props.disabled disables hook if not applicable\n * @returns ref to be measured as overlapping height\n */\nexport function useDynamicOverlap(props?: UseDynamicOverlapProps) {\n  const disabled = props?.disabled ?? false;\n  const setDynamicOverlapHeight = useContext(DynamicOverlapContext);\n  const [overlapHeight, overlapElementRef] = useContainerQuery(rect => rect.height);\n\n  useLayoutEffect(\n    function handleDynamicOverlapHeight() {\n      if (!disabled) {\n        setDynamicOverlapHeight(overlapHeight ?? 0);\n      }\n\n      return () => {\n        if (!disabled) {\n          setDynamicOverlapHeight(0);\n        }\n      };\n    },\n    [disabled, overlapHeight, setDynamicOverlapHeight]\n  );\n\n  return overlapElementRef;\n}\n"]}

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "471735b67df75c4cb69b1b7b201ef05ca6ddf2df"
+  "commit": "192f9e6a12828f9266fd2b80a86d911900b012bb"
 }

package/multiselect/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA2B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,QAAA,MAAM,mBAAmB,4HAsRxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA2B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,QAAA,MAAM,mBAAmB,4HA+RxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/multiselect/internal.js

@@ -74,6 +74,7 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
     const selfControlId = useUniqueId('trigger');
     const controlId = (_b = formFieldContext.controlId) !== null && _b !== void 0 ? _b : selfControlId;
     const multiSelectAriaLabelId = useUniqueId('multiselect-arialabel-');
+    const footerId = useUniqueId('footer');
     const scrollToIndex = useRef(null);
     const { isOpen, highlightType, highlightedOption, highlightedIndex, getTriggerProps, getDropdownProps, getFilterProps, getMenuProps, getOptionProps, highlightOption, announceSelected, } = useSelect({
         selectedOptions,
@@ -112,7 +113,7 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
     });
     const filter = (React.createElement(Filter, Object.assign({ clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue }, getFilterProps())));
     const trigger = (React.createElement(Trigger, Object.assign({ placeholder: placeholder, disabled: disabled, triggerProps: getTriggerProps(disabled, autoFocus), selectedOption: null, isOpen: isOpen }, formFieldContext, { controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, multiSelectAriaLabelId) })));
-    const menuProps = Object.assign(Object.assign({}, getMenuProps()), { onLoadMore: handleLoadMore, ariaLabelledby: joinStrings(multiSelectAriaLabelId, controlId) });
+    const menuProps = Object.assign(Object.assign({}, getMenuProps()), { onLoadMore: handleLoadMore, ariaLabelledby: joinStrings(multiSelectAriaLabelId, controlId), ariaDescribedby: dropdownStatus.content ? footerId : undefined });
     const announcement = useAnnouncement({
         announceSelected,
         highlightedOption,
@@ -159,8 +160,8 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
     };
     const mergedRef = useMergeRefs(rootRef, __internalRootRef);
     return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(styles.root, baseProps.className), onKeyPress: handleNativeSearch }),
-        React.createElement(Dropdown, Object.assign({}, getDropdownProps(), { open: isOpen, trigger: trigger, header: filter, onMouseDown: handleMouseDown, footer: dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null }) : null, expandToViewport: expandToViewport }),
-            React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null }) : null, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: useInteractiveGroups, screenReaderContent: announcement, highlightType: highlightType })),
+        React.createElement(Dropdown, Object.assign({}, getDropdownProps(), { open: isOpen, trigger: trigger, header: filter, onMouseDown: handleMouseDown, footer: dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, expandToViewport: expandToViewport }),
+            React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: useInteractiveGroups, screenReaderContent: announcement, highlightType: highlightType })),
         showTokens && (React.createElement(InternalTokenGroup, { alignment: "horizontal", limit: tokenLimit, items: tokens, onDismiss: handleTokenDismiss, i18nStrings: tokenGroupI18nStrings })),
         React.createElement(ScreenreaderOnly, { id: multiSelectAriaLabelId }, ariaLabel)));
 });