@cloudscape-design/components 3.0.359 → 3.0.361

package/code-editor/resizable-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["code-editor/resizable-box/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAkB;IACpF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAClE,MAAM,cAAc,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,WAAW,GAA4B,KAAK,CAAC,EAAE;QACnD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAC/C,OAAO;SACR;QACD,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC5E,aAAa,CAAC,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAChD,OAAO;SACR;QACD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAClD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;YAC7B,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC;QACF,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE;QAC1E,QAAQ;QACT,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI,CACzE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport styles from './styles.css.js';\n\nexport interface ResizeBoxProps {\n  children: React.ReactNode;\n  height: number;\n  minHeight: number;\n  onResize: (newHeight: number) => void;\n}\n\nexport function ResizableBox({ children, height, minHeight, onResize }: ResizeBoxProps) {\n  const [dragOffset, setDragOffset] = useState<null | number>(null);\n  const onResizeStable = useStableEventHandler(onResize);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const onMouseDown: React.MouseEventHandler = event => {\n    if (event.button !== 0 || !containerRef.current) {\n      return;\n    }\n    const containerBottom = containerRef.current.getBoundingClientRect().bottom;\n    setDragOffset(containerBottom - event.clientY);\n  };\n\n  useEffect(() => {\n    if (dragOffset === null || !containerRef.current) {\n      return;\n    }\n    const container = containerRef.current;\n\n    const onMouseMove = (event: MouseEvent) => {\n      const { top } = container.getBoundingClientRect();\n      const cursor = event.clientY;\n      onResizeStable(Math.max(cursor + dragOffset - top, minHeight));\n    };\n    const onMouseUp = () => {\n      setDragOffset(null);\n    };\n    document.body.classList.add(styles['resize-active']);\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n      document.body.classList.remove(styles['resize-active']);\n    };\n  }, [dragOffset, minHeight, onResizeStable]);\n\n  return (\n    <div ref={containerRef} className={styles['resizable-box']} style={{ height }}>\n      {children}\n      <span className={styles['resizable-box-handle']} onMouseDown={onMouseDown} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["code-editor/resizable-box/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AASlF,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAkB;IACpF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAClE,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,WAAW,GAA4B,KAAK,CAAC,EAAE;QACnD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAC/C,OAAO;SACR;QACD,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC5E,aAAa,CAAC,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAChD,OAAO;SACR;QACD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAClD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;YAC7B,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC;QACF,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE;QAC1E,QAAQ;QACT,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI,CACzE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport styles from './styles.css.js';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface ResizeBoxProps {\n  children: React.ReactNode;\n  height: number;\n  minHeight: number;\n  onResize: (newHeight: number) => void;\n}\n\nexport function ResizableBox({ children, height, minHeight, onResize }: ResizeBoxProps) {\n  const [dragOffset, setDragOffset] = useState<null | number>(null);\n  const onResizeStable = useStableCallback(onResize);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const onMouseDown: React.MouseEventHandler = event => {\n    if (event.button !== 0 || !containerRef.current) {\n      return;\n    }\n    const containerBottom = containerRef.current.getBoundingClientRect().bottom;\n    setDragOffset(containerBottom - event.clientY);\n  };\n\n  useEffect(() => {\n    if (dragOffset === null || !containerRef.current) {\n      return;\n    }\n    const container = containerRef.current;\n\n    const onMouseMove = (event: MouseEvent) => {\n      const { top } = container.getBoundingClientRect();\n      const cursor = event.clientY;\n      onResizeStable(Math.max(cursor + dragOffset - top, minHeight));\n    };\n    const onMouseUp = () => {\n      setDragOffset(null);\n    };\n    document.body.classList.add(styles['resize-active']);\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n      document.body.classList.remove(styles['resize-active']);\n    };\n  }, [dragOffset, minHeight, onResizeStable]);\n\n  return (\n    <div ref={containerRef} className={styles['resizable-box']} style={{ height }}>\n      {children}\n      <span className={styles['resizable-box-handle']} onMouseDown={onMouseDown} />\n    </div>\n  );\n}\n"]}

package/internal/breakpoints.d.ts

@@ -8,4 +8,5 @@ export declare function matchBreakpointMapping<T>(subset: Partial<Record<Breakpo
  * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.
  */
 export declare function getMatchingBreakpoint(width: number, breakpointFilter?: readonly Breakpoint[]): Breakpoint;
+export declare function getBreakpointValue(breakpoint: Breakpoint): number;
 //# sourceMappingURL=breakpoints.d.ts.map

package/internal/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"lib/default/","sources":["internal/breakpoints.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAY3E,eAAO,MAAM,gBAAgB,QAAsD,CAAC;AAIpF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,GAAG,IAAI,CAS9G;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,UAAU,CAOzG"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"lib/default/","sources":["internal/breakpoints.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAY3E,eAAO,MAAM,gBAAgB,QAAsD,CAAC;AAIpF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,GAAG,IAAI,CAS9G;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,UAAU,CAOzG;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEjE"}

package/internal/breakpoints.js

@@ -33,4 +33,7 @@ export function getMatchingBreakpoint(width, breakpointFilter) {
     }
     return 'default';
 }
+export function getBreakpointValue(breakpoint) {
+    return BREAKPOINT_MAPPING.find(bp => bp[0] === breakpoint)[1];
+}
 //# sourceMappingURL=breakpoints.js.map

package/internal/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","sourceRoot":"lib/default/","sources":["internal/breakpoints.ts"],"names":[],"mappings":"AAIA,MAAM,kBAAkB,GAA2B;IACjD,CAAC,IAAI,EAAE,IAAI,CAAC;IACZ,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,GAAG,CAAC;IACV,CAAC,IAAI,EAAE,GAAG,CAAC;IACX,CAAC,KAAK,EAAE,GAAG,CAAC;IACZ,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpF,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAI,MAAsC,EAAE,MAAkB;IAClG,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,KAAK,MAAM,CAAC,UAAU,CAAC,IAAI,qBAAqB,EAAE;QAChD,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,eAAe,KAAK,SAAS,EAAE;YACjC,OAAO,eAAe,CAAC;SACxB;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAa,EAAE,gBAAwC;IAC3F,KAAK,MAAM,CAAC,UAAU,EAAE,eAAe,CAAC,IAAI,kBAAkB,EAAE;QAC9D,IAAI,KAAK,GAAG,eAAe,IAAI,CAAC,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACjG,OAAO,UAAU,CAAC;SACnB;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport type Breakpoint = 'default' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst BREAKPOINT_MAPPING: [Breakpoint, number][] = [\n  ['xl', 1840],\n  ['l', 1320],\n  ['m', 1120],\n  ['s', 912],\n  ['xs', 688],\n  ['xxs', 465],\n  ['default', -1],\n];\n\nexport const mobileBreakpoint = BREAKPOINT_MAPPING.filter(b => b[0] === 'xs')[0][1];\n\nconst BREAKPOINTS_DESCENDING = BREAKPOINT_MAPPING.map(([bp]) => bp);\n\n/**\n * Take a breakpoint mapping and return the breakpoint value that most closely matches the actual breakpoint.\n */\nexport function matchBreakpointMapping<T>(subset: Partial<Record<Breakpoint, T>>, actual: Breakpoint): T | null {\n  const qualifyingBreakpoints = BREAKPOINT_MAPPING.slice(BREAKPOINTS_DESCENDING.indexOf(actual));\n  for (const [breakpoint] of qualifyingBreakpoints) {\n    const breakpointValue = subset[breakpoint];\n    if (breakpointValue !== undefined) {\n      return breakpointValue;\n    }\n  }\n  return null;\n}\n\n/**\n * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.\n */\nexport function getMatchingBreakpoint(width: number, breakpointFilter?: readonly Breakpoint[]): Breakpoint {\n  for (const [breakpoint, breakpointWidth] of BREAKPOINT_MAPPING) {\n    if (width > breakpointWidth && (!breakpointFilter || breakpointFilter.indexOf(breakpoint) !== -1)) {\n      return breakpoint;\n    }\n  }\n  return 'default';\n}\n"]}
+{"version":3,"file":"breakpoints.js","sourceRoot":"lib/default/","sources":["internal/breakpoints.ts"],"names":[],"mappings":"AAIA,MAAM,kBAAkB,GAA2B;IACjD,CAAC,IAAI,EAAE,IAAI,CAAC;IACZ,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,GAAG,CAAC;IACV,CAAC,IAAI,EAAE,GAAG,CAAC;IACX,CAAC,KAAK,EAAE,GAAG,CAAC;IACZ,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpF,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAI,MAAsC,EAAE,MAAkB;IAClG,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,KAAK,MAAM,CAAC,UAAU,CAAC,IAAI,qBAAqB,EAAE;QAChD,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,eAAe,KAAK,SAAS,EAAE;YACjC,OAAO,eAAe,CAAC;SACxB;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAa,EAAE,gBAAwC;IAC3F,KAAK,MAAM,CAAC,UAAU,EAAE,eAAe,CAAC,IAAI,kBAAkB,EAAE;QAC9D,IAAI,KAAK,GAAG,eAAe,IAAI,CAAC,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACjG,OAAO,UAAU,CAAC;SACnB;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAsB;IACvD,OAAO,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC;AACjE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport type Breakpoint = 'default' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst BREAKPOINT_MAPPING: [Breakpoint, number][] = [\n  ['xl', 1840],\n  ['l', 1320],\n  ['m', 1120],\n  ['s', 912],\n  ['xs', 688],\n  ['xxs', 465],\n  ['default', -1],\n];\n\nexport const mobileBreakpoint = BREAKPOINT_MAPPING.filter(b => b[0] === 'xs')[0][1];\n\nconst BREAKPOINTS_DESCENDING = BREAKPOINT_MAPPING.map(([bp]) => bp);\n\n/**\n * Take a breakpoint mapping and return the breakpoint value that most closely matches the actual breakpoint.\n */\nexport function matchBreakpointMapping<T>(subset: Partial<Record<Breakpoint, T>>, actual: Breakpoint): T | null {\n  const qualifyingBreakpoints = BREAKPOINT_MAPPING.slice(BREAKPOINTS_DESCENDING.indexOf(actual));\n  for (const [breakpoint] of qualifyingBreakpoints) {\n    const breakpointValue = subset[breakpoint];\n    if (breakpointValue !== undefined) {\n      return breakpointValue;\n    }\n  }\n  return null;\n}\n\n/**\n * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.\n */\nexport function getMatchingBreakpoint(width: number, breakpointFilter?: readonly Breakpoint[]): Breakpoint {\n  for (const [breakpoint, breakpointWidth] of BREAKPOINT_MAPPING) {\n    if (width > breakpointWidth && (!breakpointFilter || breakpointFilter.indexOf(breakpoint) !== -1)) {\n      return breakpoint;\n    }\n  }\n  return 'default';\n}\n\nexport function getBreakpointValue(breakpoint: Breakpoint): number {\n  return BREAKPOINT_MAPPING.find(bp => bp[0] === breakpoint)![1];\n}\n"]}

package/internal/components/autosuggest-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/autosuggest-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAIrF,OAAO,EAAE,+BAA+B,EAAuB,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAA8D,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAErH,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAK5E,MAAM,WAAW,qBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,+BAA+B,EAC/B,gBAAgB,EAChB,0BAA0B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB,CAAC,GAAG;IAC/D,KAAK,CAAC,OAAO,CAAC,EAAE,4BAA4B,GAAG,IAAI,CAAC;IACpD,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,QAAA,MAAM,gBAAgB,mGAgPrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/autosuggest-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAIrF,OAAO,EAAE,+BAA+B,EAAuB,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAA8D,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAErH,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAK5E,MAAM,WAAW,qBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,+BAA+B,EAC/B,gBAAgB,EAChB,0BAA0B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB,CAAC,GAAG;IAC/D,KAAK,CAAC,OAAO,CAAC,EAAE,4BAA4B,GAAG,IAAI,CAAC;IACpD,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,QAAA,MAAM,gBAAgB,mGAiPrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/internal/components/autosuggest-input/index.js

@@ -150,7 +150,7 @@ const AutosuggestInput = React.forwardRef((_a, ref) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
-        React.createElement(Dropdown, { minWidth: dropdownWidth, stretchWidth: !dropdownWidth, contentKey: dropdownContentKey, onFocus: handleFocus, onBlur: handleBlur, trigger: React.createElement(InternalInput, Object.assign({ type: "visualSearch", value: value, onChange: event => handleChange(event.detail.value), __onDelayedInput: event => handleDelayedInput(event.detail.value), onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, clearAriaLabel: clearAriaLabel, ref: inputRef, autoComplete: false, __nativeAttributes: nativeAttributes }, formFieldContext)), onMouseDown: handleDropdownMouseDown, open: open && !!dropdownContent, footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] }, dropdownFooter)), expandToViewport: expandToViewport, loopFocus: loopFocus }, open && dropdownContent ? (React.createElement("div", { ref: dropdownContentRef, className: styles['dropdown-content'] }, dropdownContent)) : null)));
+        React.createElement(Dropdown, { minWidth: dropdownWidth, stretchWidth: !dropdownWidth, stretchBeyondTriggerWidth: true, contentKey: dropdownContentKey, onFocus: handleFocus, onBlur: handleBlur, trigger: React.createElement(InternalInput, Object.assign({ type: "visualSearch", value: value, onChange: event => handleChange(event.detail.value), __onDelayedInput: event => handleDelayedInput(event.detail.value), onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, clearAriaLabel: clearAriaLabel, ref: inputRef, autoComplete: false, __nativeAttributes: nativeAttributes }, formFieldContext)), onMouseDown: handleDropdownMouseDown, open: open && !!dropdownContent, footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] }, dropdownFooter)), expandToViewport: expandToViewport, loopFocus: loopFocus }, open && dropdownContent ? (React.createElement("div", { ref: dropdownContentRef, className: styles['dropdown-content'] }, dropdownContent)) : null)));
 });
 export default AutosuggestInput;
 //# sourceMappingURL=index.js.map

package/internal/components/autosuggest-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/autosuggest-input/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\n\nimport React, { Ref, useRef, useState, useImperativeHandle, useEffect } from 'react';\n\nimport Dropdown from '../dropdown';\n\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport InternalInput from '../../../input/internal';\nimport {\n  BaseChangeDetail,\n  BaseInputProps,\n  InputAutoCorrect,\n  InputClearLabel,\n  InputKeyEvents,\n} from '../../../input/interfaces';\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport { ExpandToViewport } from '../dropdown/interfaces';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\nexport interface AutosuggestInputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputAutoCorrect,\n    InputKeyEvents,\n    InputClearLabel,\n    FormFieldValidationControlProps,\n    ExpandToViewport,\n    InternalBaseComponentProps {\n  ariaControls?: string;\n  ariaActivedescendant?: string;\n  dropdownExpanded?: boolean;\n  dropdownContentKey?: string;\n  dropdownContentFocusable?: boolean;\n  dropdownContent?: React.ReactNode;\n  dropdownFooter?: React.ReactNode;\n  dropdownWidth?: number;\n  loopFocus?: boolean;\n  onCloseDropdown?: NonCancelableEventHandler<null>;\n  onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n  onPressArrowDown?: () => void;\n  onPressArrowUp?: () => void;\n  onPressEnter?: () => boolean;\n}\n\nexport interface AutosuggestInputFocusOptions {\n  preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n  focus(options?: AutosuggestInputFocusOptions): void;\n  open(): void;\n  close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n  (\n    {\n      value,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyUp,\n      onKeyDown,\n      name,\n      placeholder,\n      disabled,\n      readOnly,\n      autoFocus,\n      ariaLabel,\n      ariaRequired,\n      disableBrowserAutocorrect = false,\n      expandToViewport,\n      ariaControls,\n      ariaActivedescendant,\n      clearAriaLabel,\n      dropdownExpanded = true,\n      dropdownContentKey,\n      dropdownContentFocusable = false,\n      dropdownContent = null,\n      dropdownFooter = null,\n      dropdownWidth,\n      loopFocus,\n      onCloseDropdown,\n      onDelayedInput,\n      onPressArrowDown,\n      onPressArrowUp,\n      onPressEnter,\n      __internalRootRef,\n      ...restProps\n    }: AutosuggestInputProps,\n    ref: Ref<AutosuggestInputRef>\n  ) => {\n    const baseProps = getBaseProps(restProps);\n    const formFieldContext = useFormFieldContext(restProps);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const dropdownContentRef = useRef<HTMLDivElement>(null);\n    const dropdownFooterRef = useRef<HTMLDivElement>(null);\n    const preventOpenOnFocusRef = useRef(false);\n    const preventCloseOnBlurRef = useRef(false);\n\n    const [open, setOpen] = useState(false);\n\n    const openDropdown = () => !readOnly && setOpen(true);\n\n    const closeDropdown = () => {\n      setOpen(false);\n      fireNonCancelableEvent(onCloseDropdown, null);\n    };\n\n    useImperativeHandle(ref, () => ({\n      focus(options?: AutosuggestInputFocusOptions) {\n        if (options?.preventDropdown) {\n          preventOpenOnFocusRef.current = true;\n        }\n        inputRef.current?.focus();\n      },\n      select() {\n        inputRef.current?.select();\n      },\n      open: openDropdown,\n      close: closeDropdown,\n    }));\n\n    const handleBlur = () => {\n      if (!preventCloseOnBlurRef.current) {\n        closeDropdown();\n        fireNonCancelableEvent(onBlur, null);\n      }\n    };\n\n    const handleFocus = () => {\n      if (!preventOpenOnFocusRef.current) {\n        openDropdown();\n        fireNonCancelableEvent(onFocus, null);\n      }\n      preventOpenOnFocusRef.current = false;\n    };\n\n    const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n    const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n      switch (event.detail.keyCode) {\n        case KeyCode.down: {\n          onPressArrowDown?.();\n          openDropdown();\n          event.preventDefault();\n          break;\n        }\n        case KeyCode.up: {\n          onPressArrowUp?.();\n          openDropdown();\n          event.preventDefault();\n          break;\n        }\n        case KeyCode.enter: {\n          if (open) {\n            if (!onPressEnter?.()) {\n              closeDropdown();\n            }\n            event.preventDefault();\n          }\n          fireKeydown(event);\n          break;\n        }\n        case KeyCode.escape: {\n          if (open) {\n            closeDropdown();\n          } else if (value) {\n            fireNonCancelableEvent(onChange, { value: '' });\n          }\n          event.preventDefault();\n          fireKeydown(event);\n          break;\n        }\n        default: {\n          fireKeydown(event);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      openDropdown();\n      fireNonCancelableEvent(onChange, { value });\n    };\n\n    const handleDelayedInput = (value: string) => {\n      fireNonCancelableEvent(onDelayedInput, { value });\n    };\n\n    const handleDropdownMouseDown: React.MouseEventHandler = event => {\n      // Prevent currently focused element from losing focus.\n      if (!dropdownContentFocusable) {\n        event.preventDefault();\n      }\n      // Prevent closing dropdown on click inside.\n      else {\n        preventCloseOnBlurRef.current = true;\n        requestAnimationFrame(() => {\n          preventCloseOnBlurRef.current = false;\n        });\n      }\n    };\n\n    const expanded = open && dropdownExpanded;\n    const nativeAttributes = {\n      name,\n      placeholder,\n      autoFocus,\n      onClick: openDropdown,\n      role: 'combobox',\n      'aria-autocomplete': 'list',\n      'aria-expanded': expanded,\n      'aria-controls': open ? ariaControls : undefined,\n      // 'aria-owns' needed for safari+vo to announce activedescendant content\n      'aria-owns': open ? ariaControls : undefined,\n      'aria-label': ariaLabel,\n      'aria-activedescendant': ariaActivedescendant,\n    };\n\n    // Closes dropdown when outside click is detected.\n    // Similar to the internal dropdown implementation but includes the target as well.\n    useEffect(() => {\n      if (!open) {\n        return;\n      }\n\n      const clickListener = (event: MouseEvent) => {\n        if (\n          !inputRef.current?.contains(event.target as Node) &&\n          !dropdownContentRef.current?.contains(event.target as Node) &&\n          !dropdownFooterRef.current?.contains(event.target as Node)\n        ) {\n          closeDropdown();\n        }\n      };\n\n      window.addEventListener('mousedown', clickListener);\n\n      return () => {\n        window.removeEventListener('mousedown', clickListener);\n      };\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    return (\n      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n        <Dropdown\n          minWidth={dropdownWidth}\n          stretchWidth={!dropdownWidth}\n          contentKey={dropdownContentKey}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          trigger={\n            <InternalInput\n              type=\"visualSearch\"\n              value={value}\n              onChange={event => handleChange(event.detail.value)}\n              __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n              onKeyDown={handleKeyDown}\n              onKeyUp={onKeyUp}\n              disabled={disabled}\n              disableBrowserAutocorrect={disableBrowserAutocorrect}\n              readOnly={readOnly}\n              ariaRequired={ariaRequired}\n              clearAriaLabel={clearAriaLabel}\n              ref={inputRef}\n              autoComplete={false}\n              __nativeAttributes={nativeAttributes}\n              {...formFieldContext}\n            />\n          }\n          onMouseDown={handleDropdownMouseDown}\n          open={open && !!dropdownContent}\n          footer={\n            dropdownFooterRef && (\n              <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n                {dropdownFooter}\n              </div>\n            )\n          }\n          expandToViewport={expandToViewport}\n          loopFocus={loopFocus}\n        >\n          {open && dropdownContent ? (\n            <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n              {dropdownContent}\n            </div>\n          ) : null}\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\nexport default AutosuggestInput;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/autosuggest-input/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\n\nimport React, { Ref, useRef, useState, useImperativeHandle, useEffect } from 'react';\n\nimport Dropdown from '../dropdown';\n\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport InternalInput from '../../../input/internal';\nimport {\n  BaseChangeDetail,\n  BaseInputProps,\n  InputAutoCorrect,\n  InputClearLabel,\n  InputKeyEvents,\n} from '../../../input/interfaces';\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport { ExpandToViewport } from '../dropdown/interfaces';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\nexport interface AutosuggestInputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputAutoCorrect,\n    InputKeyEvents,\n    InputClearLabel,\n    FormFieldValidationControlProps,\n    ExpandToViewport,\n    InternalBaseComponentProps {\n  ariaControls?: string;\n  ariaActivedescendant?: string;\n  dropdownExpanded?: boolean;\n  dropdownContentKey?: string;\n  dropdownContentFocusable?: boolean;\n  dropdownContent?: React.ReactNode;\n  dropdownFooter?: React.ReactNode;\n  dropdownWidth?: number;\n  loopFocus?: boolean;\n  onCloseDropdown?: NonCancelableEventHandler<null>;\n  onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n  onPressArrowDown?: () => void;\n  onPressArrowUp?: () => void;\n  onPressEnter?: () => boolean;\n}\n\nexport interface AutosuggestInputFocusOptions {\n  preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n  focus(options?: AutosuggestInputFocusOptions): void;\n  open(): void;\n  close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n  (\n    {\n      value,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyUp,\n      onKeyDown,\n      name,\n      placeholder,\n      disabled,\n      readOnly,\n      autoFocus,\n      ariaLabel,\n      ariaRequired,\n      disableBrowserAutocorrect = false,\n      expandToViewport,\n      ariaControls,\n      ariaActivedescendant,\n      clearAriaLabel,\n      dropdownExpanded = true,\n      dropdownContentKey,\n      dropdownContentFocusable = false,\n      dropdownContent = null,\n      dropdownFooter = null,\n      dropdownWidth,\n      loopFocus,\n      onCloseDropdown,\n      onDelayedInput,\n      onPressArrowDown,\n      onPressArrowUp,\n      onPressEnter,\n      __internalRootRef,\n      ...restProps\n    }: AutosuggestInputProps,\n    ref: Ref<AutosuggestInputRef>\n  ) => {\n    const baseProps = getBaseProps(restProps);\n    const formFieldContext = useFormFieldContext(restProps);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const dropdownContentRef = useRef<HTMLDivElement>(null);\n    const dropdownFooterRef = useRef<HTMLDivElement>(null);\n    const preventOpenOnFocusRef = useRef(false);\n    const preventCloseOnBlurRef = useRef(false);\n\n    const [open, setOpen] = useState(false);\n\n    const openDropdown = () => !readOnly && setOpen(true);\n\n    const closeDropdown = () => {\n      setOpen(false);\n      fireNonCancelableEvent(onCloseDropdown, null);\n    };\n\n    useImperativeHandle(ref, () => ({\n      focus(options?: AutosuggestInputFocusOptions) {\n        if (options?.preventDropdown) {\n          preventOpenOnFocusRef.current = true;\n        }\n        inputRef.current?.focus();\n      },\n      select() {\n        inputRef.current?.select();\n      },\n      open: openDropdown,\n      close: closeDropdown,\n    }));\n\n    const handleBlur = () => {\n      if (!preventCloseOnBlurRef.current) {\n        closeDropdown();\n        fireNonCancelableEvent(onBlur, null);\n      }\n    };\n\n    const handleFocus = () => {\n      if (!preventOpenOnFocusRef.current) {\n        openDropdown();\n        fireNonCancelableEvent(onFocus, null);\n      }\n      preventOpenOnFocusRef.current = false;\n    };\n\n    const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n    const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n      switch (event.detail.keyCode) {\n        case KeyCode.down: {\n          onPressArrowDown?.();\n          openDropdown();\n          event.preventDefault();\n          break;\n        }\n        case KeyCode.up: {\n          onPressArrowUp?.();\n          openDropdown();\n          event.preventDefault();\n          break;\n        }\n        case KeyCode.enter: {\n          if (open) {\n            if (!onPressEnter?.()) {\n              closeDropdown();\n            }\n            event.preventDefault();\n          }\n          fireKeydown(event);\n          break;\n        }\n        case KeyCode.escape: {\n          if (open) {\n            closeDropdown();\n          } else if (value) {\n            fireNonCancelableEvent(onChange, { value: '' });\n          }\n          event.preventDefault();\n          fireKeydown(event);\n          break;\n        }\n        default: {\n          fireKeydown(event);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      openDropdown();\n      fireNonCancelableEvent(onChange, { value });\n    };\n\n    const handleDelayedInput = (value: string) => {\n      fireNonCancelableEvent(onDelayedInput, { value });\n    };\n\n    const handleDropdownMouseDown: React.MouseEventHandler = event => {\n      // Prevent currently focused element from losing focus.\n      if (!dropdownContentFocusable) {\n        event.preventDefault();\n      }\n      // Prevent closing dropdown on click inside.\n      else {\n        preventCloseOnBlurRef.current = true;\n        requestAnimationFrame(() => {\n          preventCloseOnBlurRef.current = false;\n        });\n      }\n    };\n\n    const expanded = open && dropdownExpanded;\n    const nativeAttributes = {\n      name,\n      placeholder,\n      autoFocus,\n      onClick: openDropdown,\n      role: 'combobox',\n      'aria-autocomplete': 'list',\n      'aria-expanded': expanded,\n      'aria-controls': open ? ariaControls : undefined,\n      // 'aria-owns' needed for safari+vo to announce activedescendant content\n      'aria-owns': open ? ariaControls : undefined,\n      'aria-label': ariaLabel,\n      'aria-activedescendant': ariaActivedescendant,\n    };\n\n    // Closes dropdown when outside click is detected.\n    // Similar to the internal dropdown implementation but includes the target as well.\n    useEffect(() => {\n      if (!open) {\n        return;\n      }\n\n      const clickListener = (event: MouseEvent) => {\n        if (\n          !inputRef.current?.contains(event.target as Node) &&\n          !dropdownContentRef.current?.contains(event.target as Node) &&\n          !dropdownFooterRef.current?.contains(event.target as Node)\n        ) {\n          closeDropdown();\n        }\n      };\n\n      window.addEventListener('mousedown', clickListener);\n\n      return () => {\n        window.removeEventListener('mousedown', clickListener);\n      };\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    return (\n      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n        <Dropdown\n          minWidth={dropdownWidth}\n          stretchWidth={!dropdownWidth}\n          stretchBeyondTriggerWidth={true}\n          contentKey={dropdownContentKey}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          trigger={\n            <InternalInput\n              type=\"visualSearch\"\n              value={value}\n              onChange={event => handleChange(event.detail.value)}\n              __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n              onKeyDown={handleKeyDown}\n              onKeyUp={onKeyUp}\n              disabled={disabled}\n              disableBrowserAutocorrect={disableBrowserAutocorrect}\n              readOnly={readOnly}\n              ariaRequired={ariaRequired}\n              clearAriaLabel={clearAriaLabel}\n              ref={inputRef}\n              autoComplete={false}\n              __nativeAttributes={nativeAttributes}\n              {...formFieldContext}\n            />\n          }\n          onMouseDown={handleDropdownMouseDown}\n          open={open && !!dropdownContent}\n          footer={\n            dropdownFooterRef && (\n              <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n                {dropdownFooter}\n              </div>\n            )\n          }\n          expandToViewport={expandToViewport}\n          loopFocus={loopFocus}\n        >\n          {open && dropdownContent ? (\n            <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n              {dropdownContent}\n            </div>\n          ) : null}\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\nexport default AutosuggestInput;\n"]}

package/internal/components/dark-ribbon/index.js

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
 import { useMutationObserver } from '../../hooks/use-mutation-observer';
-import { useStableEventHandler } from '../../hooks/use-stable-event-handler';
 import styles from './styles.css.js';
+import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 function setIfChanged(oldValue, newValue, setter) {
     if (oldValue !== newValue) {
         setter(newValue);
@@ -12,7 +12,7 @@ function setIfChanged(oldValue, newValue, setter) {
 export default function DarkRibbon({ children, isRefresh, hasPlainStyling }) {
     const containerRef = useRef(null);
     const fillRef = useRef(null);
-    const syncSizes = useStableEventHandler((from, to) => {
+    const syncSizes = useStableCallback((from, to) => {
         // JSDOM calls mutation observer callback even if attribute did not change
         // https://github.com/jsdom/jsdom/issues/3305
         // To prevent infinite loops, we need to check the values before setting

package/internal/components/dark-ribbon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/dark-ribbon/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 React, { useEffect, useRef } from 'react';\nimport { useMutationObserver } from '../../hooks/use-mutation-observer';\nimport { useStableEventHandler } from '../../hooks/use-stable-event-handler';\nimport styles from './styles.css.js';\n\ninterface DarkRibbonProps {\n  children: React.ReactNode;\n  isRefresh: boolean;\n  hasPlainStyling?: boolean;\n}\n\nfunction setIfChanged(oldValue: string, newValue: string, setter: (newValue: string) => void) {\n  if (oldValue !== newValue) {\n    setter(newValue);\n  }\n}\n\nexport default function DarkRibbon({ children, isRefresh, hasPlainStyling }: DarkRibbonProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fillRef = useRef<HTMLDivElement>(null);\n  const syncSizes = useStableEventHandler((from: HTMLElement, to: HTMLElement) => {\n    // JSDOM calls mutation observer callback even if attribute did not change\n    // https://github.com/jsdom/jsdom/issues/3305\n    // To prevent infinite loops, we need to check the values before setting\n    const size = from.getBoundingClientRect();\n    const { height: oldHeight, left: oldLeft, right: oldRight } = to.style;\n    setIfChanged(oldHeight, `${size.height}px`, newHeight => (to.style.height = newHeight));\n    setIfChanged(oldLeft, `${-1 * size.left}px`, newLeft => (to.style.left = newLeft));\n    setIfChanged(\n      oldRight,\n      `${-1 * (document.body.clientWidth - size.right)}px`,\n      newRight => (to.style.right = newRight)\n    );\n  });\n  useMutationObserver(containerRef, node => {\n    if (fillRef.current) {\n      syncSizes(node, fillRef.current);\n    }\n  });\n  useEffect(() => {\n    const handler = () => {\n      if (containerRef.current && fillRef.current) {\n        syncSizes(containerRef.current, fillRef.current);\n      }\n    };\n    window.addEventListener('resize', handler);\n    return () => window.removeEventListener('resize', handler);\n  }, [syncSizes]);\n\n  if (hasPlainStyling === true || !isRefresh) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div ref={containerRef} className=\"awsui-context-content-header\">\n      <div ref={fillRef} className={styles['background-fill']} />\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/dark-ribbon/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 React, { useEffect, useRef } from 'react';\nimport { useMutationObserver } from '../../hooks/use-mutation-observer';\nimport styles from './styles.css.js';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\ninterface DarkRibbonProps {\n  children: React.ReactNode;\n  isRefresh: boolean;\n  hasPlainStyling?: boolean;\n}\n\nfunction setIfChanged(oldValue: string, newValue: string, setter: (newValue: string) => void) {\n  if (oldValue !== newValue) {\n    setter(newValue);\n  }\n}\n\nexport default function DarkRibbon({ children, isRefresh, hasPlainStyling }: DarkRibbonProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fillRef = useRef<HTMLDivElement>(null);\n  const syncSizes = useStableCallback((from: HTMLElement, to: HTMLElement) => {\n    // JSDOM calls mutation observer callback even if attribute did not change\n    // https://github.com/jsdom/jsdom/issues/3305\n    // To prevent infinite loops, we need to check the values before setting\n    const size = from.getBoundingClientRect();\n    const { height: oldHeight, left: oldLeft, right: oldRight } = to.style;\n    setIfChanged(oldHeight, `${size.height}px`, newHeight => (to.style.height = newHeight));\n    setIfChanged(oldLeft, `${-1 * size.left}px`, newLeft => (to.style.left = newLeft));\n    setIfChanged(\n      oldRight,\n      `${-1 * (document.body.clientWidth - size.right)}px`,\n      newRight => (to.style.right = newRight)\n    );\n  });\n  useMutationObserver(containerRef, node => {\n    if (fillRef.current) {\n      syncSizes(node, fillRef.current);\n    }\n  });\n  useEffect(() => {\n    const handler = () => {\n      if (containerRef.current && fillRef.current) {\n        syncSizes(containerRef.current, fillRef.current);\n      }\n    };\n    window.addEventListener('resize', handler);\n    return () => window.removeEventListener('resize', handler);\n  }, [syncSizes]);\n\n  if (hasPlainStyling === true || !isRefresh) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div ref={containerRef} className=\"awsui-context-content-header\">\n      <div ref={fillRef} className={styles['background-fill']} />\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"]}

package/internal/components/dropdown/dropdown-fit-handler.d.ts

@@ -16,10 +16,21 @@ export interface InteriorDropdownPosition extends DropdownPosition {
     bottom: string;
     top: string;
 }
+export declare const defaultMaxDropdownWidth: number;
 export declare const getAvailableSpace: (trigger: HTMLElement, dropdown: HTMLElement, overflowParents: ReadonlyArray<Dimensions>, stretchWidth?: boolean, stretchHeight?: boolean, isMobile?: boolean) => AvailableSpace;
 export declare const getInteriorAvailableSpace: (trigger: HTMLElement, dropdown: HTMLElement, overflowParents: ReadonlyArray<Dimensions>, isMobile?: boolean) => AvailableSpace;
-export declare const getDropdownPosition: (trigger: HTMLElement, dropdown: HTMLElement, overflowParents: ReadonlyArray<Dimensions>, minWidth?: number, preferCenter?: boolean, stretchWidth?: boolean, stretchHeight?: boolean, isMobile?: boolean) => DropdownPosition;
+export declare const getDropdownPosition: ({ triggerElement, dropdownElement, overflowParents, minWidth: desiredMinWidth, preferCenter, stretchWidth, stretchHeight, isMobile, stretchBeyondTriggerWidth, }: {
+    triggerElement: HTMLElement;
+    dropdownElement: HTMLElement;
+    overflowParents: ReadonlyArray<Dimensions>;
+    minWidth?: number | undefined;
+    preferCenter?: boolean | undefined;
+    stretchWidth?: boolean | undefined;
+    stretchHeight?: boolean | undefined;
+    isMobile?: boolean | undefined;
+    stretchBeyondTriggerWidth?: boolean | undefined;
+}) => DropdownPosition;
 export declare const getInteriorDropdownPosition: (trigger: HTMLElement, dropdown: HTMLElement, overflowParents: ReadonlyArray<Dimensions>, isMobile?: boolean) => InteriorDropdownPosition;
-export declare const calculatePosition: (dropdownElement: HTMLDivElement, triggerElement: HTMLDivElement, verticalContainerElement: HTMLDivElement, interior: boolean, expandToViewport: boolean, preferCenter: boolean, stretchWidth: boolean, stretchHeight: boolean, isMobile: boolean, minWidth?: number) => [DropdownPosition, DOMRect];
+export declare const calculatePosition: (dropdownElement: HTMLDivElement, triggerElement: HTMLDivElement, verticalContainerElement: HTMLDivElement, interior: boolean, expandToViewport: boolean, preferCenter: boolean, stretchWidth: boolean, stretchHeight: boolean, isMobile: boolean, minWidth?: number, stretchBeyondTriggerWidth?: boolean) => [DropdownPosition, DOMRect];
 export {};
 //# sourceMappingURL=dropdown-fit-handler.d.ts.map

package/internal/components/dropdown/dropdown-fit-handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-fit-handler.d.ts","sourceRoot":"lib/default/","sources":["internal/components/dropdown/dropdown-fit-handler.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmD,MAAM,mCAAmC,CAAC;AAOhH,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAgBD,eAAO,MAAM,iBAAiB,YACnB,WAAW,YACV,WAAW,mBACJ,cAAc,UAAU,CAAC,8DAG/B,OAAO,KACjB,cA8BF,CAAC;AAEF,eAAO,MAAM,yBAAyB,YAC3B,WAAW,YACV,WAAW,mBACJ,cAAc,UAAU,CAAC,aAC/B,OAAO,KACjB,cA+BF,CAAC;AAEF,eAAO,MAAM,mBAAmB,YACrB,WAAW,YACV,WAAW,mBACJ,cAAc,UAAU,CAAC,aAC/B,MAAM,sFAIN,OAAO,KACjB,gBAiDF,CAAC;AAEF,eAAO,MAAM,2BAA2B,YAC7B,WAAW,YACV,WAAW,mBACJ,cAAc,UAAU,CAAC,aAC/B,OAAO,KACjB,wBAmCF,CAAC;AAEF,eAAO,MAAM,iBAAiB,oBACX,cAAc,kBACf,cAAc,4BACJ,cAAc,YAC9B,OAAO,oBACC,OAAO,gBACX,OAAO,gBACP,OAAO,iBACN,OAAO,YACZ,OAAO,aACN,MAAM,KAChB,CAAC,gBAAgB,EAAE,OAAO,CA4B5B,CAAC"}
+{"version":3,"file":"dropdown-fit-handler.d.ts","sourceRoot":"lib/default/","sources":["internal/components/dropdown/dropdown-fit-handler.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmD,MAAM,mCAAmC,CAAC;AAOhH,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAkBD,eAAO,MAAM,uBAAuB,QAA4B,CAAC;AAEjE,eAAO,MAAM,iBAAiB,YACnB,WAAW,YACV,WAAW,mBACJ,cAAc,UAAU,CAAC,8DAG/B,OAAO,KACjB,cA8BF,CAAC;AAEF,eAAO,MAAM,yBAAyB,YAC3B,WAAW,YACV,WAAW,mBACJ,cAAc,UAAU,CAAC,aAC/B,OAAO,KACjB,cA+BF,CAAC;AAEF,eAAO,MAAM,mBAAmB;oBAWd,WAAW;qBACV,WAAW;qBACX,cAAc,UAAU,CAAC;;;;;;;MAOxC,gBA8DH,CAAC;AAEF,eAAO,MAAM,2BAA2B,YAC7B,WAAW,YACV,WAAW,mBACJ,cAAc,UAAU,CAAC,aAC/B,OAAO,KACjB,wBAmCF,CAAC;AAEF,eAAO,MAAM,iBAAiB,oBACX,cAAc,kBACf,cAAc,4BACJ,cAAc,YAC9B,OAAO,oBACC,OAAO,gBACX,OAAO,gBACP,OAAO,iBACN,OAAO,YACZ,OAAO,aACN,MAAM,8BACW,OAAO,KAClC,CAAC,gBAAgB,EAAE,OAAO,CA6B5B,CAAC"}

package/internal/components/dropdown/dropdown-fit-handler.js

@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { getBreakpointValue } from '../../breakpoints';
 import { getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';
 import styles from './styles.css.js';
 const AVAILABLE_SPACE_RESERVE_DEFAULT = 50;
@@ -17,6 +18,9 @@ const getClosestParentDimensions = (element) => {
     });
     return parents.shift();
 };
+// By default, most dropdowns should expand their content as necessary, but to a maximum of 465px (the XXS breakpoint).
+// This value was determined by UX but may be subject to change in the future, depending on the feedback.
+export const defaultMaxDropdownWidth = getBreakpointValue('xxs');
 export const getAvailableSpace = (trigger, dropdown, overflowParents, stretchWidth = false, stretchHeight = false, isMobile) => {
     const availableSpaceReserveVertical = stretchHeight
         ? 0
@@ -64,13 +68,19 @@ export const getInteriorAvailableSpace = (trigger, dropdown, overflowParents, is
         };
     }, { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE });
 };
-export const getDropdownPosition = (trigger, dropdown, overflowParents, minWidth, preferCenter = false, stretchWidth = false, stretchHeight = false, isMobile) => {
-    const availableSpace = getAvailableSpace(trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile);
-    const triggerWidth = trigger.getBoundingClientRect().width;
-    minWidth = minWidth ? Math.min(triggerWidth, minWidth) : triggerWidth;
-    const requiredWidth = dropdown.getBoundingClientRect().width;
-    // dropdown should not be smaller than the trigger
-    const idealWidth = Math.max(requiredWidth, minWidth);
+export const getDropdownPosition = ({ triggerElement, dropdownElement, overflowParents, minWidth: desiredMinWidth, preferCenter = false, stretchWidth = false, stretchHeight = false, isMobile = false, stretchBeyondTriggerWidth = false, }) => {
+    // Determine the space available around the dropdown that it can grow in
+    const availableSpace = getAvailableSpace(triggerElement, dropdownElement, overflowParents, stretchWidth, stretchHeight, isMobile);
+    // Determine the width of the trigger
+    const triggerWidth = triggerElement.getBoundingClientRect().width;
+    // Minimum width is determined by either an explicit number (desiredMinWidth) or the trigger width
+    const minWidth = desiredMinWidth ? Math.min(triggerWidth, desiredMinWidth) : triggerWidth;
+    // If stretchBeyondTriggerWidth is true, the maximum width is the XS breakpoint (465px) or the trigger width (if bigger).
+    const maxWidth = stretchBeyondTriggerWidth ? Math.max(defaultMaxDropdownWidth, triggerWidth) : Number.MAX_VALUE;
+    // Determine the actual dropdown width, the size that it "wants" to be
+    const requiredWidth = dropdownElement.getBoundingClientRect().width;
+    // Try to achieve the required/desired width within the given parameters
+    const idealWidth = Math.min(Math.max(requiredWidth, minWidth), maxWidth);
     let dropLeft;
     let left = null;
     let width = idealWidth;
@@ -97,7 +107,7 @@ export const getDropdownPosition = (trigger, dropdown, overflowParents, minWidth
             left = -spillOver;
         }
     }
-    const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;
+    const dropUp = availableSpace.below < dropdownElement.offsetHeight && availableSpace.above > availableSpace.below;
     const availableHeight = dropUp ? availableSpace.above : availableSpace.below;
     // Try and crop the bottom item when all options can't be displayed, affordance for "there's more"
     const croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;
@@ -142,7 +152,7 @@ export const getInteriorDropdownPosition = (trigger, dropdown, overflowParents,
         left: `${left}px`,
     };
 };
-export const calculatePosition = (dropdownElement, triggerElement, verticalContainerElement, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth) => {
+export const calculatePosition = (dropdownElement, triggerElement, verticalContainerElement, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth, stretchBeyondTriggerWidth) => {
     // cleaning previously assigned values,
     // so that they are not reused in case of screen resize and similar events
     verticalContainerElement.style.maxHeight = '';
@@ -156,7 +166,17 @@ export const calculatePosition = (dropdownElement, triggerElement, verticalConta
     const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);
     const position = interior
         ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)
-        : getDropdownPosition(triggerElement, dropdownElement, overflowParents, minWidth, preferCenter, stretchWidth, stretchHeight, isMobile);
+        : getDropdownPosition({
+            triggerElement,
+            dropdownElement,
+            overflowParents,
+            minWidth,
+            preferCenter,
+            stretchWidth,
+            stretchHeight,
+            isMobile,
+            stretchBeyondTriggerWidth,
+        });
     const triggerBox = triggerElement.getBoundingClientRect();
     return [position, triggerBox];
 };

package/internal/components/dropdown/dropdown-fit-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-fit-handler.js","sourceRoot":"lib/default/","sources":["internal/components/dropdown/dropdown-fit-handler.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { Dimensions, getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';\nimport styles from './styles.css.js';\n\nconst AVAILABLE_SPACE_RESERVE_DEFAULT = 50;\nconst AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL = 19; // 50 - 31\nconst AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL = 20;\n\ninterface AvailableSpace {\n  above: number;\n  below: number;\n  left: number;\n  right: number;\n}\nexport interface DropdownPosition {\n  height: string;\n  width: string;\n  dropUp: boolean;\n  dropLeft: boolean;\n  left: string;\n}\nexport interface InteriorDropdownPosition extends DropdownPosition {\n  bottom: string;\n  top: string;\n}\n\nconst getClosestParentDimensions = (element: HTMLElement): any => {\n  const parents = getOverflowParents(element).map(el => {\n    const { height, width, top, left } = el.getBoundingClientRect();\n    return {\n      height,\n      width,\n      top,\n      left,\n    };\n  });\n\n  return parents.shift();\n};\n\nexport const getAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): AvailableSpace => {\n  const availableSpaceReserveVertical = stretchHeight\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const availableSpaceReserveHorizontal = stretchWidth\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const offsetTop = triggerBottom - overflowParent.top;\n      const currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;\n      const currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;\n      const currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;\n      const currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getInteriorAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): AvailableSpace => {\n  const AVAILABLE_SPACE_RESERVE_VERTICAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const AVAILABLE_SPACE_RESERVE_HORIZONTAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const {\n    bottom: triggerBottom,\n    top: triggerTop,\n    left: triggerLeft,\n    right: triggerRight,\n  } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const currentAbove = triggerBottom - overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentBelow = overflowParent.height - triggerTop + overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentLeft = triggerLeft - overflowParent.left - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n      const currentRight =\n        overflowParent.left + overflowParent.width - triggerRight - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  minWidth?: number,\n  preferCenter = false,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): DropdownPosition => {\n  const availableSpace = getAvailableSpace(trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile);\n  const triggerWidth = trigger.getBoundingClientRect().width;\n  minWidth = minWidth ? Math.min(triggerWidth, minWidth) : triggerWidth;\n  const requiredWidth = dropdown.getBoundingClientRect().width;\n  // dropdown should not be smaller than the trigger\n  const idealWidth = Math.max(requiredWidth, minWidth);\n\n  let dropLeft: boolean;\n  let left: number | null = null;\n  let width = idealWidth;\n\n  //1. Can it be positioned with ideal width to the right?\n  if (idealWidth <= availableSpace.right) {\n    dropLeft = false;\n    //2. Can it be positioned with ideal width to the left?\n  } else if (idealWidth <= availableSpace.left) {\n    dropLeft = true;\n    //3. Fit into biggest available space either on left or right\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right, minWidth);\n  }\n\n  if (preferCenter) {\n    const spillOver = (idealWidth - triggerWidth) / 2;\n\n    // availableSpace always includes the trigger width, but we want to exclude that\n    const availableOutsideLeft = availableSpace.left - triggerWidth;\n    const availableOutsideRight = availableSpace.right - triggerWidth;\n\n    const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;\n    if (fitsInCenter) {\n      left = -spillOver;\n    }\n  }\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    left: left === null ? 'auto' : `${left}px`,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n  };\n};\n\nexport const getInteriorDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): InteriorDropdownPosition => {\n  const availableSpace = getInteriorAvailableSpace(trigger, dropdown, overflowParents, isMobile);\n  const { bottom: triggerBottom, top: triggerTop, width: triggerWidth } = trigger.getBoundingClientRect();\n  const { top: parentDropdownTop, height: parentDropdownHeight } = getClosestParentDimensions(trigger);\n\n  let dropLeft;\n\n  let width = dropdown.getBoundingClientRect().width;\n  const top = triggerTop - parentDropdownTop;\n  if (width <= availableSpace.right) {\n    dropLeft = false;\n  } else if (width <= availableSpace.left) {\n    dropLeft = true;\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right);\n  }\n\n  const left = dropLeft ? 0 - width : triggerWidth;\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const bottom = dropUp ? parentDropdownTop + parentDropdownHeight - triggerBottom : 0;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n    top: `${top}px`,\n    bottom: `${bottom}px`,\n    left: `${left}px`,\n  };\n};\n\nexport const calculatePosition = (\n  dropdownElement: HTMLDivElement,\n  triggerElement: HTMLDivElement,\n  verticalContainerElement: HTMLDivElement,\n  interior: boolean,\n  expandToViewport: boolean,\n  preferCenter: boolean,\n  stretchWidth: boolean,\n  stretchHeight: boolean,\n  isMobile: boolean,\n  minWidth?: number\n): [DropdownPosition, DOMRect] => {\n  // cleaning previously assigned values,\n  // so that they are not reused in case of screen resize and similar events\n  verticalContainerElement.style.maxHeight = '';\n  dropdownElement.style.width = '';\n  dropdownElement.style.top = '';\n  dropdownElement.style.bottom = '';\n  dropdownElement.style.left = '';\n\n  dropdownElement.classList.remove(styles['dropdown-drop-left']);\n  dropdownElement.classList.remove(styles['dropdown-drop-right']);\n  dropdownElement.classList.remove(styles['dropdown-drop-up']);\n\n  const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);\n  const position = interior\n    ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)\n    : getDropdownPosition(\n        triggerElement,\n        dropdownElement,\n        overflowParents,\n        minWidth,\n        preferCenter,\n        stretchWidth,\n        stretchHeight,\n        isMobile\n      );\n  const triggerBox = triggerElement.getBoundingClientRect();\n  return [position, triggerBox];\n};\n"]}
+{"version":3,"file":"dropdown-fit-handler.js","sourceRoot":"lib/default/","sources":["internal/components/dropdown/dropdown-fit-handler.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { getBreakpointValue } from '../../breakpoints';\nimport { Dimensions, getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';\nimport styles from './styles.css.js';\n\nconst AVAILABLE_SPACE_RESERVE_DEFAULT = 50;\nconst AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL = 19; // 50 - 31\nconst AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL = 20;\n\ninterface AvailableSpace {\n  above: number;\n  below: number;\n  left: number;\n  right: number;\n}\nexport interface DropdownPosition {\n  height: string;\n  width: string;\n  dropUp: boolean;\n  dropLeft: boolean;\n  left: string;\n}\nexport interface InteriorDropdownPosition extends DropdownPosition {\n  bottom: string;\n  top: string;\n}\n\nconst getClosestParentDimensions = (element: HTMLElement): any => {\n  const parents = getOverflowParents(element).map(el => {\n    const { height, width, top, left } = el.getBoundingClientRect();\n    return {\n      height,\n      width,\n      top,\n      left,\n    };\n  });\n\n  return parents.shift();\n};\n\n// By default, most dropdowns should expand their content as necessary, but to a maximum of 465px (the XXS breakpoint).\n// This value was determined by UX but may be subject to change in the future, depending on the feedback.\nexport const defaultMaxDropdownWidth = getBreakpointValue('xxs');\n\nexport const getAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): AvailableSpace => {\n  const availableSpaceReserveVertical = stretchHeight\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const availableSpaceReserveHorizontal = stretchWidth\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const offsetTop = triggerBottom - overflowParent.top;\n      const currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;\n      const currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;\n      const currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;\n      const currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getInteriorAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): AvailableSpace => {\n  const AVAILABLE_SPACE_RESERVE_VERTICAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const AVAILABLE_SPACE_RESERVE_HORIZONTAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const {\n    bottom: triggerBottom,\n    top: triggerTop,\n    left: triggerLeft,\n    right: triggerRight,\n  } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const currentAbove = triggerBottom - overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentBelow = overflowParent.height - triggerTop + overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentLeft = triggerLeft - overflowParent.left - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n      const currentRight =\n        overflowParent.left + overflowParent.width - triggerRight - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getDropdownPosition = ({\n  triggerElement,\n  dropdownElement,\n  overflowParents,\n  minWidth: desiredMinWidth,\n  preferCenter = false,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile = false,\n  stretchBeyondTriggerWidth = false,\n}: {\n  triggerElement: HTMLElement;\n  dropdownElement: HTMLElement;\n  overflowParents: ReadonlyArray<Dimensions>;\n  minWidth?: number;\n  preferCenter?: boolean;\n  stretchWidth?: boolean;\n  stretchHeight?: boolean;\n  isMobile?: boolean;\n  stretchBeyondTriggerWidth?: boolean;\n}): DropdownPosition => {\n  // Determine the space available around the dropdown that it can grow in\n  const availableSpace = getAvailableSpace(\n    triggerElement,\n    dropdownElement,\n    overflowParents,\n    stretchWidth,\n    stretchHeight,\n    isMobile\n  );\n  // Determine the width of the trigger\n  const triggerWidth = triggerElement.getBoundingClientRect().width;\n  // Minimum width is determined by either an explicit number (desiredMinWidth) or the trigger width\n  const minWidth = desiredMinWidth ? Math.min(triggerWidth, desiredMinWidth) : triggerWidth;\n  // If stretchBeyondTriggerWidth is true, the maximum width is the XS breakpoint (465px) or the trigger width (if bigger).\n  const maxWidth = stretchBeyondTriggerWidth ? Math.max(defaultMaxDropdownWidth, triggerWidth) : Number.MAX_VALUE;\n  // Determine the actual dropdown width, the size that it \"wants\" to be\n  const requiredWidth = dropdownElement.getBoundingClientRect().width;\n  // Try to achieve the required/desired width within the given parameters\n  const idealWidth = Math.min(Math.max(requiredWidth, minWidth), maxWidth);\n\n  let dropLeft: boolean;\n  let left: number | null = null;\n  let width = idealWidth;\n\n  //1. Can it be positioned with ideal width to the right?\n  if (idealWidth <= availableSpace.right) {\n    dropLeft = false;\n    //2. Can it be positioned with ideal width to the left?\n  } else if (idealWidth <= availableSpace.left) {\n    dropLeft = true;\n    //3. Fit into biggest available space either on left or right\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right, minWidth);\n  }\n\n  if (preferCenter) {\n    const spillOver = (idealWidth - triggerWidth) / 2;\n\n    // availableSpace always includes the trigger width, but we want to exclude that\n    const availableOutsideLeft = availableSpace.left - triggerWidth;\n    const availableOutsideRight = availableSpace.right - triggerWidth;\n\n    const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;\n    if (fitsInCenter) {\n      left = -spillOver;\n    }\n  }\n\n  const dropUp = availableSpace.below < dropdownElement.offsetHeight && availableSpace.above > availableSpace.below;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    left: left === null ? 'auto' : `${left}px`,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n  };\n};\n\nexport const getInteriorDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): InteriorDropdownPosition => {\n  const availableSpace = getInteriorAvailableSpace(trigger, dropdown, overflowParents, isMobile);\n  const { bottom: triggerBottom, top: triggerTop, width: triggerWidth } = trigger.getBoundingClientRect();\n  const { top: parentDropdownTop, height: parentDropdownHeight } = getClosestParentDimensions(trigger);\n\n  let dropLeft;\n\n  let width = dropdown.getBoundingClientRect().width;\n  const top = triggerTop - parentDropdownTop;\n  if (width <= availableSpace.right) {\n    dropLeft = false;\n  } else if (width <= availableSpace.left) {\n    dropLeft = true;\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right);\n  }\n\n  const left = dropLeft ? 0 - width : triggerWidth;\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const bottom = dropUp ? parentDropdownTop + parentDropdownHeight - triggerBottom : 0;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n    top: `${top}px`,\n    bottom: `${bottom}px`,\n    left: `${left}px`,\n  };\n};\n\nexport const calculatePosition = (\n  dropdownElement: HTMLDivElement,\n  triggerElement: HTMLDivElement,\n  verticalContainerElement: HTMLDivElement,\n  interior: boolean,\n  expandToViewport: boolean,\n  preferCenter: boolean,\n  stretchWidth: boolean,\n  stretchHeight: boolean,\n  isMobile: boolean,\n  minWidth?: number,\n  stretchBeyondTriggerWidth?: boolean\n): [DropdownPosition, DOMRect] => {\n  // cleaning previously assigned values,\n  // so that they are not reused in case of screen resize and similar events\n  verticalContainerElement.style.maxHeight = '';\n  dropdownElement.style.width = '';\n  dropdownElement.style.top = '';\n  dropdownElement.style.bottom = '';\n  dropdownElement.style.left = '';\n\n  dropdownElement.classList.remove(styles['dropdown-drop-left']);\n  dropdownElement.classList.remove(styles['dropdown-drop-right']);\n  dropdownElement.classList.remove(styles['dropdown-drop-up']);\n\n  const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);\n  const position = interior\n    ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)\n    : getDropdownPosition({\n        triggerElement,\n        dropdownElement,\n        overflowParents,\n        minWidth,\n        preferCenter,\n        stretchWidth,\n        stretchHeight,\n        isMobile,\n        stretchBeyondTriggerWidth,\n      });\n  const triggerBox = triggerElement.getBoundingClientRect();\n  return [position, triggerBox];\n};\n"]}

package/internal/components/dropdown/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { DropdownProps } from './interfaces';
-declare const Dropdown: ({ children, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight, stretchWidth, stretchHeight, stretchToTriggerWidth, expandToViewport, preferCenter, interior, minWidth, scrollable, loopFocus, onFocus, onBlur, contentKey, dropdownContentId, dropdownContentRole, ariaLabelledby, ariaDescribedby, }: DropdownProps) => JSX.Element;
+declare const Dropdown: ({ children, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight, stretchWidth, stretchHeight, stretchToTriggerWidth, stretchBeyondTriggerWidth, expandToViewport, preferCenter, interior, minWidth, scrollable, loopFocus, onFocus, onBlur, contentKey, dropdownContentId, dropdownContentRole, ariaLabelledby, ariaDescribedby, }: DropdownProps) => JSX.Element;
 export default Dropdown;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/dropdown/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAoH7C,QAAA,MAAM,QAAQ,sVA0BX,aAAa,gBAwRf,CAAC;AAMF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/dropdown/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AA6H7C,QAAA,MAAM,QAAQ,iXA2BX,aAAa,gBA0Rf,CAAC;AAMF,eAAe,QAAQ,CAAC"}

package/internal/components/dropdown/index.js

@@ -6,7 +6,7 @@ import { useMergeRefs } from '../../hooks/use-merge-refs';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { fireNonCancelableEvent } from '../../events';
-import { calculatePosition } from './dropdown-fit-handler';
+import { calculatePosition, defaultMaxDropdownWidth, } from './dropdown-fit-handler';
 import { Transition } from '../transition';
 import { useVisualRefresh } from '../../hooks/use-visual-mode';
 import { usePortalModeClasses } from '../../hooks/use-portal-mode-classes';
@@ -28,7 +28,7 @@ const DropdownContainer = ({ children, renderWithPortal = false, id, referrerId,
         return React.createElement(React.Fragment, null, children);
     }
 };
-const TransitionContent = ({ state, transitionRef, dropdownClasses, stretchWidth, interior, isRefresh, dropdownRef, verticalContainerRef, expandToViewport, header, children, footer, position, open, onMouseDown, id, role, ariaLabelledby, ariaDescribedby, }) => {
+const TransitionContent = ({ state, transitionRef, dropdownClasses, stretchWidth, interior, isRefresh, dropdownRef, verticalContainerRef, expandToViewport, stretchBeyondTriggerWidth, header, children, footer, position, open, onMouseDown, id, role, ariaLabelledby, ariaDescribedby, }) => {
     const contentRef = useMergeRefs(dropdownRef, transitionRef);
     return (React.createElement("div", { className: clsx(styles.dropdown, dropdownClasses, {
             [styles.open]: open,
@@ -38,7 +38,8 @@ const TransitionContent = ({ state, transitionRef, dropdownClasses, stretchWidth
             [styles['is-empty']]: !header && !children,
             [styles.refresh]: isRefresh,
             [styles['use-portal']]: expandToViewport && !interior,
-        }), ref: contentRef, id: id, role: role, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-open": open, "data-animating": state !== 'exited', "aria-hidden": !open, onMouseDown: onMouseDown },
+            [styles['stretch-beyond-trigger-width']]: stretchBeyondTriggerWidth,
+        }), ref: contentRef, id: id, role: role, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-open": open, "data-animating": state !== 'exited', "aria-hidden": !open, style: stretchBeyondTriggerWidth ? { maxWidth: defaultMaxDropdownWidth } : {}, onMouseDown: onMouseDown },
         React.createElement("div", { className: clsx(styles['dropdown-content-wrapper'], isRefresh && styles.refresh) },
             React.createElement("div", { className: styles['ie11-wrapper'] },
                 React.createElement("div", { ref: verticalContainerRef, className: styles['dropdown-content'] },
@@ -47,7 +48,7 @@ const TransitionContent = ({ state, transitionRef, dropdownClasses, stretchWidth
                         children,
                         footer))))));
 };
-const Dropdown = ({ children, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false, stretchWidth = true, stretchHeight = false, stretchToTriggerWidth = true, expandToViewport = false, preferCenter = false, interior = false, minWidth, scrollable = true, loopFocus = expandToViewport, onFocus, onBlur, contentKey, dropdownContentId, dropdownContentRole, ariaLabelledby, ariaDescribedby, }) => {
+const Dropdown = ({ children, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false, stretchWidth = true, stretchHeight = false, stretchToTriggerWidth = true, stretchBeyondTriggerWidth = false, expandToViewport = false, preferCenter = false, interior = false, minWidth, scrollable = true, loopFocus = expandToViewport, onFocus, onBlur, contentKey, dropdownContentId, dropdownContentRole, ariaLabelledby, ariaDescribedby, }) => {
     const wrapperRef = useRef(null);
     const triggerRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -156,7 +157,7 @@ const Dropdown = ({ children, trigger, open, onDropdownClose, onMouseDown, heade
                 if (scrollable) {
                     dropdownRef.current.classList.add(styles.nowrap);
                 }
-                setDropdownPosition(...calculatePosition(dropdownRef.current, triggerRef.current, verticalContainerRef.current, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth), dropdownRef.current, verticalContainerRef.current);
+                setDropdownPosition(...calculatePosition(dropdownRef.current, triggerRef.current, verticalContainerRef.current, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth, stretchBeyondTriggerWidth), dropdownRef.current, verticalContainerRef.current);
                 if (scrollable) {
                     dropdownRef.current.classList.remove(styles.nowrap);
                 }
@@ -235,7 +236,7 @@ const Dropdown = ({ children, trigger, open, onDropdownClose, onMouseDown, heade
         React.createElement(DropdownContainer, { renderWithPortal: expandToViewport && !interior, id: dropdownId, referrerId: referrerId, open: open },
             React.createElement(Transition, { in: open !== null && open !== void 0 ? open : false, exit: false }, (state, ref) => (React.createElement("div", { ref: dropdownContainerRef },
                 React.createElement(TabTrap, { focusNextCallback: () => { var _a; return triggerRef.current && ((_a = getLastFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
-                React.createElement(TransitionContent, { state: state, transitionRef: ref, dropdownClasses: dropdownClasses, open: open, stretchWidth: stretchWidth, interior: interior, header: header, expandToViewport: expandToViewport, footer: footer, onMouseDown: onMouseDown, isRefresh: isRefresh, dropdownRef: dropdownRef, verticalContainerRef: verticalContainerRef, position: position, id: dropdownContentId, role: dropdownContentRole, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby }, children),
+                React.createElement(TransitionContent, { state: state, transitionRef: ref, dropdownClasses: dropdownClasses, open: open, stretchWidth: stretchWidth, interior: interior, header: header, expandToViewport: expandToViewport, stretchBeyondTriggerWidth: stretchBeyondTriggerWidth, footer: footer, onMouseDown: onMouseDown, isRefresh: isRefresh, dropdownRef: dropdownRef, verticalContainerRef: verticalContainerRef, position: position, id: dropdownContentId, role: dropdownContentRole, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby }, children),
                 React.createElement(TabTrap, { focusNextCallback: () => { var _a; return triggerRef.current && ((_a = getFirstFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus })))))));
 };
 const isInteriorPosition = (position) => position.bottom !== undefined;