@cloudscape-design/components 3.0.250 → 3.0.252

package/internal/components/dropdown-footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAM5C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAM5C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/internal/components/dropdown-footer/index.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import styles from './styles.css.js';
 import DropdownStatus from '../dropdown-status/index.js';
 import LiveRegion from '../live-region/index.js';
-const DropdownFooter = ({ content, hasItems = true }) => (React.createElement("div", { className: clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems }) },
-    React.createElement(LiveRegion, { visible: true, tagName: "div" }, content && React.createElement(DropdownStatus, null, content))));
+const DropdownFooter = ({ content, id, hasItems = true }) => (React.createElement("div", { className: clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems }) },
+    React.createElement(LiveRegion, { visible: true, tagName: "div", id: id }, content && React.createElement(DropdownStatus, null, content))));
 export default DropdownFooter;
 //# sourceMappingURL=index.js.map

package/internal/components/dropdown-footer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAOjD,MAAM,cAAc,GAA6B,CAAC,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAkB,EAAE,EAAE,CAAC,CACjG,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IACvG,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,KAAK,IACrC,OAAO,IAAI,oBAAC,cAAc,QAAE,OAAO,CAAkB,CAC3C,CACT,CACP,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport DropdownStatus from '../dropdown-status/index.js';\nimport LiveRegion from '../live-region/index.js';\n\ninterface DropdownFooter {\n  content?: React.ReactNode | null;\n  hasItems?: boolean;\n}\n\nconst DropdownFooter: React.FC<DropdownFooter> = ({ content, hasItems = true }: DropdownFooter) => (\n  <div className={clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems })}>\n    <LiveRegion visible={true} tagName=\"div\">\n      {content && <DropdownStatus>{content}</DropdownStatus>}\n    </LiveRegion>\n  </div>\n);\n\nexport default DropdownFooter;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAQjD,MAAM,cAAc,GAA6B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,GAAG,IAAI,EAAkB,EAAE,EAAE,CAAC,CACrG,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IACvG,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,KAAK,EAAC,EAAE,EAAE,EAAE,IAC5C,OAAO,IAAI,oBAAC,cAAc,QAAE,OAAO,CAAkB,CAC3C,CACT,CACP,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport DropdownStatus from '../dropdown-status/index.js';\nimport LiveRegion from '../live-region/index.js';\n\ninterface DropdownFooter {\n  content?: React.ReactNode | null;\n  hasItems?: boolean;\n  id?: string;\n}\n\nconst DropdownFooter: React.FC<DropdownFooter> = ({ content, id, hasItems = true }: DropdownFooter) => (\n  <div className={clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems })}>\n    <LiveRegion visible={true} tagName=\"div\" id={id}>\n      {content && <DropdownStatus>{content}</DropdownStatus>}\n    </LiveRegion>\n  </div>\n);\n\nexport default DropdownFooter;\n"]}

package/internal/components/live-region/index.d.ts

@@ -6,6 +6,7 @@ export interface LiveRegionProps extends ScreenreaderOnlyProps {
     visible?: boolean;
     tagName?: 'span' | 'div';
     children: React.ReactNode;
+    id?: string;
 }
 /**
  * The live region is hidden in the layout, but visible for screen readers.
@@ -42,5 +43,5 @@ export interface LiveRegionProps extends ScreenreaderOnlyProps {
  */
 declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
 export default _default;
-declare function LiveRegion({ assertive, delay, visible, tagName: TagName, children, ...restProps }: LiveRegionProps): JSX.Element;
+declare function LiveRegion({ assertive, delay, visible, tagName: TagName, children, id, ...restProps }: LiveRegionProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/live-region/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;;AACH,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAClB,SAAiB,EACjB,KAAU,EACV,OAAe,EACf,OAAO,EAAE,OAAgB,EACzB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,eAAe,eA0DjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;;AACH,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAClB,SAAiB,EACjB,KAAU,EACV,OAAe,EACf,OAAO,EAAE,OAAgB,EACzB,QAAQ,EACR,EAAE,EACF,GAAG,SAAS,EACb,EAAE,eAAe,eA8DjB"}

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":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EACL,sBAAsB,EAItB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAyBrC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAEjC,MAAM,YAAY,GAAG,CAAC,YAA0C,EAAE,KAAuB,EAAE,EAAE;IAC3F,MAAM,MAAM,GAAG,WAAW,CACxB,KAAK,CAAC,MAAqB,EAC3B,OAAO,CAAC,EAAE,CAAC,OAAO,KAAK,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAC7E,CAAC;IACF,MAAM,WAAW,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,WAAW,CAAC;IAChD,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAClB,EAgBmB,EACnB,GAAgC,EAChC,EAAE;QAlBF,EACE,IAAI,EACJ,QAAQ,EACR,gBAAgB,GAAG,EAAE,EACrB,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,SAAS,EAChB,iBAAiB,GAAG,KAAK,EACzB,cAAc,EACd,eAAe,OAEE,EADd,SAAS,cAfd,kMAgBC,CADa;IAId,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,eAAe,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QACzC,IAAI,eAAe,EAAE;YACnB,MAAM,kBAAkB,GAAG,eAAe,CAAC,SAAS,GAAG,eAAe,CAAC,YAAY,CAAC;YACpF,MAAM,qBAAqB,GAAG,eAAe,CAAC,YAAY,GAAG,kBAAkB,CAAC;YAChF,IAAI,qBAAqB,GAAG,qBAAqB,EAAE;gBACjD,sBAAsB,CAAC,UAAU,CAAC,CAAC;aACpC;SACF;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE;QAC7C,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;KACnD,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE7C,OAAO,CACL,4CACM,SAAS,EACT,gBAAgB,IACpB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,QAAQ,EAAE,EACnB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,IAAI,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EACpE,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EACjE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAC7D,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAC9C,QAAQ,EAAE,CAAC,CAAC,qBACK,cAAc,sBACb,eAAe,KAEhC,IAAI,IAAI,QAAQ,CACd,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC","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/environment.js

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

package/internal/generated/theming/index.cjs

@@ -1060,8 +1060,8 @@ module.exports.preset = {
         "dark": "{colorBackgroundControlDisabled}"
       },
       "colorBorderDividerActive": {
-        "light": "{colorGrey500}",
-        "dark": "{colorGrey500}"
+        "light": "{colorGrey900}",
+        "dark": "{colorGrey100}"
       },
       "colorBorderDividerDefault": {
         "light": "{colorGrey200}",
@@ -1164,8 +1164,8 @@ module.exports.preset = {
         "dark": "{colorGrey450}"
       },
       "colorBorderDividerInteractiveDefault": {
-        "light": "{colorBorderDividerDefault}",
-        "dark": "{colorBorderDividerDefault}"
+        "light": "{colorTextInteractiveDefault}",
+        "dark": "{colorTextInteractiveDefault}"
       },
       "colorBorderTabsDivider": {
         "light": "{colorGrey200}",
@@ -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",
@@ -2270,6 +2287,14 @@ module.exports.preset = {
       "shadowStickyEmbedded": {
         "light": "0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10)",
         "dark": "0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1)"
+      },
+      "shadowStickyColumnFirst": {
+        "light": "4px 0px 20px 1px rgba(0, 7, 22, 0.1)",
+        "dark": "0px 4px 20px 1px rgba(0, 7, 22, 1)"
+      },
+      "shadowStickyColumnLast": {
+        "light": "-4px 0 20px 1px rgba(0, 28, 36, 0.1)",
+        "dark": "0px 4px 20px 1px rgba(0, 7, 22, 1)"
       }
     },
     "contexts": {
@@ -2996,8 +3021,8 @@ module.exports.preset = {
             "dark": "{colorBackgroundControlDisabled}"
           },
           "colorBorderDividerActive": {
-            "light": "{colorGrey500}",
-            "dark": "{colorGrey500}"
+            "light": "{colorGrey100}",
+            "dark": "{colorGrey100}"
           },
           "colorBorderDividerDefault": {
             "light": "{colorGrey600}",
@@ -3100,8 +3125,8 @@ module.exports.preset = {
             "dark": "{colorGrey450}"
           },
           "colorBorderDividerInteractiveDefault": {
-            "light": "{colorBorderDividerDefault}",
-            "dark": "{colorBorderDividerDefault}"
+            "light": "{colorTextInteractiveDefault}",
+            "dark": "{colorTextInteractiveDefault}"
           },
           "colorBorderTabsDivider": {
             "light": "{colorGrey600}",
@@ -3522,6 +3547,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}"
           }
         }
       },
@@ -3589,6 +3630,14 @@ module.exports.preset = {
             "light": "0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1)",
             "dark": "0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1)"
           },
+          "shadowStickyColumnFirst": {
+            "light": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
+            "dark": "0px 4px 20px 1px rgba(0, 7, 22, 1)"
+          },
+          "shadowStickyColumnLast": {
+            "light": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
+            "dark": "0px 4px 20px 1px rgba(0, 7, 22, 1)"
+          },
           "colorGreyOpaque25": {
             "light": "rgba(255, 255, 255, 0.25)",
             "dark": "rgba(255, 255, 255, 0.25)"
@@ -3950,8 +3999,8 @@ module.exports.preset = {
             "dark": "{colorBackgroundControlDisabled}"
           },
           "colorBorderDividerActive": {
-            "light": "{colorGrey500}",
-            "dark": "{colorGrey500}"
+            "light": "{colorGrey100}",
+            "dark": "{colorGrey100}"
           },
           "colorBorderDividerDefault": {
             "light": "{colorGrey600}",
@@ -4054,8 +4103,8 @@ module.exports.preset = {
             "dark": "{colorGrey450}"
           },
           "colorBorderDividerInteractiveDefault": {
-            "light": "{colorBorderDividerDefault}",
-            "dark": "{colorBorderDividerDefault}"
+            "light": "{colorTextInteractiveDefault}",
+            "dark": "{colorTextInteractiveDefault}"
           },
           "colorBorderTabsDivider": {
             "light": "{colorGrey600}",
@@ -4476,6 +4525,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}"
           }
         }
       },
@@ -4844,8 +4909,8 @@ module.exports.preset = {
             "dark": "{colorBackgroundControlDisabled}"
           },
           "colorBorderDividerActive": {
-            "light": "{colorGrey500}",
-            "dark": "{colorGrey500}"
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey100}"
           },
           "colorBorderDividerDefault": {
             "light": "{colorGrey200}",
@@ -4948,8 +5013,8 @@ module.exports.preset = {
             "dark": "{colorGrey450}"
           },
           "colorBorderDividerInteractiveDefault": {
-            "light": "{colorBorderDividerDefault}",
-            "dark": "{colorBorderDividerDefault}"
+            "light": "{colorTextInteractiveDefault}",
+            "dark": "{colorTextInteractiveDefault}"
           },
           "colorBorderTabsDivider": {
             "light": "{colorGrey200}",
@@ -5370,6 +5435,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}"
           }
         }
       },
@@ -5738,8 +5819,8 @@ module.exports.preset = {
             "dark": "{colorBackgroundControlDisabled}"
           },
           "colorBorderDividerActive": {
-            "light": "{colorGrey500}",
-            "dark": "{colorGrey500}"
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey100}"
           },
           "colorBorderDividerDefault": {
             "light": "{colorGrey200}",
@@ -5842,8 +5923,8 @@ module.exports.preset = {
             "dark": "{colorGrey450}"
           },
           "colorBorderDividerInteractiveDefault": {
-            "light": "{colorBorderDividerDefault}",
-            "dark": "{colorBorderDividerDefault}"
+            "light": "{colorTextInteractiveDefault}",
+            "dark": "{colorTextInteractiveDefault}"
           },
           "colorBorderTabsDivider": {
             "light": "{colorGrey200}",
@@ -6264,6 +6345,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 +6742,10 @@ module.exports.preset = {
       "colorBoardPlaceholderHover": "color",
       "colorDragPlaceholderActive": "color",
       "colorDragPlaceholderHover": "color",
+      "colorDropzoneBackgroundActive": "color",
+      "colorDropzoneBackgroundHover": "color",
+      "colorDropzoneTextActive": "color",
+      "colorDropzoneTextHover": "color",
       "motionDurationExtraFast": "motion",
       "motionDurationExtraSlow": "motion",
       "motionDurationFast": "motion",
@@ -6793,7 +6894,9 @@ module.exports.preset = {
       "shadowSplitBottom": "color",
       "shadowSplitSide": "color",
       "shadowSticky": "color",
-      "shadowStickyEmbedded": "color"
+      "shadowStickyEmbedded": "color",
+      "shadowStickyColumnFirst": "color",
+      "shadowStickyColumnLast": "color"
     }
   },
   "secondary": [],
@@ -7670,6 +7773,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 +7854,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",
@@ -7906,7 +8014,9 @@ module.exports.preset = {
     "shadowSplitBottom": "shadow-split-bottom",
     "shadowSplitSide": "shadow-split-side",
     "shadowSticky": "shadow-sticky",
-    "shadowStickyEmbedded": "shadow-sticky-embedded"
+    "shadowStickyEmbedded": "shadow-sticky-embedded",
+    "shadowStickyColumnFirst": "shadow-sticky-column-first",
+    "shadowStickyColumnLast": "shadow-sticky-column-last"
   },
   "propertiesMap": {
     "colorAmazonOrange": "--color-amazon-orange-ds51uu",
@@ -8198,7 +8308,7 @@ module.exports.preset = {
     "colorBorderControlChecked": "--color-border-control-checked-4xvndc",
     "colorBorderControlDefault": "--color-border-control-default-m3lmsh",
     "colorBorderControlDisabled": "--color-border-control-disabled-vx8bco",
-    "colorBorderDividerActive": "--color-border-divider-active-nnnfx9",
+    "colorBorderDividerActive": "--color-border-divider-active-t11l9l",
     "colorBorderDividerDefault": "--color-border-divider-default-7s2wjw",
     "colorBorderDividerPanelBottom": "--color-border-divider-panel-bottom-zrjpck",
     "colorBorderDividerPanelSide": "--color-border-divider-panel-side-yjkfcr",
@@ -8224,7 +8334,7 @@ module.exports.preset = {
     "colorBorderStatusInfo": "--color-border-status-info-546i7i",
     "colorBorderStatusSuccess": "--color-border-status-success-cqi45f",
     "colorBorderStatusWarning": "--color-border-status-warning-hg85ut",
-    "colorBorderDividerInteractiveDefault": "--color-border-divider-interactive-default-rcasvw",
+    "colorBorderDividerInteractiveDefault": "--color-border-divider-interactive-default-0hdcst",
     "colorBorderTabsDivider": "--color-border-tabs-divider-69fx5i",
     "colorBorderTabsShadow": "--color-border-tabs-shadow-4lmh2z",
     "colorBorderTabsUnderline": "--color-border-tabs-underline-9bcfzu",
@@ -8330,6 +8440,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 +8521,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",
@@ -8566,6 +8681,8 @@ module.exports.preset = {
     "shadowSplitBottom": "--shadow-split-bottom-otfetg",
     "shadowSplitSide": "--shadow-split-side-qv353u",
     "shadowSticky": "--shadow-sticky-aijlo6",
-    "shadowStickyEmbedded": "--shadow-sticky-embedded-qit8ba"
+    "shadowStickyEmbedded": "--shadow-sticky-embedded-qit8ba",
+    "shadowStickyColumnFirst": "--shadow-sticky-column-first-h2plme",
+    "shadowStickyColumnLast": "--shadow-sticky-column-last-s13kkz"
   }
 };