@cloudscape-design/components-themeable 3.0.1210 → 3.0.1211
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/components/dropdown/styles.scss +3 -2
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +140 -139
- package/lib/internal/template/alert/interfaces.d.ts +2 -0
- package/lib/internal/template/alert/interfaces.d.ts.map +1 -1
- package/lib/internal/template/alert/interfaces.js.map +1 -1
- package/lib/internal/template/alert/styles.css.js +27 -27
- package/lib/internal/template/alert/styles.scoped.css +50 -50
- package/lib/internal/template/alert/styles.selectors.js +27 -27
- package/lib/internal/template/annotation-context/annotation/styles.css.js +13 -13
- package/lib/internal/template/annotation-context/annotation/styles.scoped.css +21 -21
- package/lib/internal/template/annotation-context/annotation/styles.selectors.js +13 -13
- package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
- package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
- package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
- package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +30 -30
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +87 -87
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +30 -30
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +27 -27
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +54 -54
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +27 -27
- package/lib/internal/template/attribute-editor/styles.css.js +15 -15
- package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
- package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
- package/lib/internal/template/autosuggest/interfaces.d.ts +2 -0
- package/lib/internal/template/autosuggest/interfaces.d.ts.map +1 -1
- package/lib/internal/template/autosuggest/interfaces.js.map +1 -1
- package/lib/internal/template/badge/interfaces.d.ts +2 -0
- package/lib/internal/template/badge/interfaces.d.ts.map +1 -1
- package/lib/internal/template/badge/interfaces.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
- package/lib/internal/template/button/interfaces.d.ts +2 -0
- package/lib/internal/template/button/interfaces.d.ts.map +1 -1
- package/lib/internal/template/button/interfaces.js.map +1 -1
- package/lib/internal/template/button/styles.css.js +22 -22
- package/lib/internal/template/button/styles.scoped.css +256 -256
- package/lib/internal/template/button/styles.selectors.js +22 -22
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js +1 -1
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/internal.js +1 -1
- package/lib/internal/template/button-dropdown/internal.js.map +1 -1
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +21 -21
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +37 -37
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +21 -21
- package/lib/internal/template/button-group/interfaces.d.ts +2 -0
- package/lib/internal/template/button-group/interfaces.d.ts.map +1 -1
- package/lib/internal/template/button-group/interfaces.js.map +1 -1
- package/lib/internal/template/checkbox/interfaces.d.ts +2 -0
- package/lib/internal/template/checkbox/interfaces.d.ts.map +1 -1
- package/lib/internal/template/checkbox/interfaces.js.map +1 -1
- package/lib/internal/template/checkbox/styles.css.js +3 -3
- package/lib/internal/template/checkbox/styles.scoped.css +11 -11
- package/lib/internal/template/checkbox/styles.selectors.js +3 -3
- package/lib/internal/template/container/interfaces.d.ts +2 -0
- package/lib/internal/template/container/interfaces.d.ts.map +1 -1
- package/lib/internal/template/container/interfaces.js.map +1 -1
- package/lib/internal/template/content-layout/styles.css.js +14 -14
- package/lib/internal/template/content-layout/styles.scoped.css +27 -27
- package/lib/internal/template/content-layout/styles.selectors.js +14 -14
- package/lib/internal/template/date-picker/index.d.ts.map +1 -1
- package/lib/internal/template/date-picker/index.js +1 -1
- package/lib/internal/template/date-picker/index.js.map +1 -1
- package/lib/internal/template/date-range-picker/index.d.ts.map +1 -1
- package/lib/internal/template/date-range-picker/index.js +1 -1
- package/lib/internal/template/date-range-picker/index.js.map +1 -1
- package/lib/internal/template/flashbar/interfaces.d.ts +2 -0
- package/lib/internal/template/flashbar/interfaces.d.ts.map +1 -1
- package/lib/internal/template/flashbar/interfaces.js.map +1 -1
- package/lib/internal/template/flashbar/styles.css.js +50 -50
- package/lib/internal/template/flashbar/styles.scoped.css +187 -187
- package/lib/internal/template/flashbar/styles.selectors.js +50 -50
- package/lib/internal/template/help-panel/styles.css.js +6 -6
- package/lib/internal/template/help-panel/styles.scoped.css +73 -73
- package/lib/internal/template/help-panel/styles.selectors.js +6 -6
- package/lib/internal/template/input/interfaces.d.ts +2 -0
- package/lib/internal/template/input/interfaces.d.ts.map +1 -1
- package/lib/internal/template/input/interfaces.js.map +1 -1
- package/lib/internal/template/input/styles.css.js +13 -13
- package/lib/internal/template/input/styles.scoped.css +74 -74
- package/lib/internal/template/input/styles.selectors.js +13 -13
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/autosuggest-input/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/autosuggest-input/index.js +2 -1
- package/lib/internal/template/internal/components/autosuggest-input/index.js.map +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +30 -30
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +58 -58
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +30 -30
- package/lib/internal/template/internal/components/dropdown/dropdown-fit-handler.d.ts +9 -9
- package/lib/internal/template/internal/components/dropdown/dropdown-fit-handler.d.ts.map +1 -1
- package/lib/internal/template/internal/components/dropdown/dropdown-fit-handler.js +22 -23
- package/lib/internal/template/internal/components/dropdown/dropdown-fit-handler.js.map +1 -1
- package/lib/internal/template/internal/components/dropdown/dropdown-position.d.ts.map +1 -1
- package/lib/internal/template/internal/components/dropdown/dropdown-position.js +4 -1
- package/lib/internal/template/internal/components/dropdown/dropdown-position.js.map +1 -1
- package/lib/internal/template/internal/components/dropdown/index.d.ts +1 -1
- package/lib/internal/template/internal/components/dropdown/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/dropdown/index.js +52 -30
- package/lib/internal/template/internal/components/dropdown/index.js.map +1 -1
- package/lib/internal/template/internal/components/dropdown/interfaces.d.ts +20 -14
- package/lib/internal/template/internal/components/dropdown/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/components/dropdown/interfaces.js.map +1 -1
- package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
- package/lib/internal/template/internal/components/dropdown/styles.scoped.css +39 -38
- package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
- package/lib/internal/template/internal/components/radio-button/interfaces.d.ts +2 -0
- package/lib/internal/template/internal/components/radio-button/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/components/radio-button/interfaces.js.map +1 -1
- package/lib/internal/template/internal/components/radio-button/styles.css.js +7 -7
- package/lib/internal/template/internal/components/radio-button/styles.scoped.css +18 -18
- package/lib/internal/template/internal/components/radio-button/styles.selectors.js +7 -7
- package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
- package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
- package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +1 -0
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/lib/internal/template/internal/generated/custom-css-properties/index.js +139 -138
- package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
- package/lib/internal/template/link/interfaces.d.ts +2 -0
- package/lib/internal/template/link/interfaces.d.ts.map +1 -1
- package/lib/internal/template/link/interfaces.js.map +1 -1
- package/lib/internal/template/link/styles.css.js +20 -20
- package/lib/internal/template/link/styles.scoped.css +103 -103
- package/lib/internal/template/link/styles.selectors.js +20 -20
- package/lib/internal/template/multiselect/internal.d.ts.map +1 -1
- package/lib/internal/template/multiselect/internal.js +2 -1
- package/lib/internal/template/multiselect/internal.js.map +1 -1
- package/lib/internal/template/progress-bar/interfaces.d.ts +2 -0
- package/lib/internal/template/progress-bar/interfaces.d.ts.map +1 -1
- package/lib/internal/template/progress-bar/interfaces.js.map +1 -1
- package/lib/internal/template/progress-bar/styles.css.js +18 -18
- package/lib/internal/template/progress-bar/styles.scoped.css +48 -48
- package/lib/internal/template/progress-bar/styles.selectors.js +18 -18
- package/lib/internal/template/prompt-input/interfaces.d.ts +2 -0
- package/lib/internal/template/prompt-input/interfaces.d.ts.map +1 -1
- package/lib/internal/template/prompt-input/interfaces.js.map +1 -1
- package/lib/internal/template/prompt-input/styles.css.js +17 -17
- package/lib/internal/template/prompt-input/styles.scoped.css +79 -79
- package/lib/internal/template/prompt-input/styles.selectors.js +17 -17
- package/lib/internal/template/radio-group/interfaces.d.ts +2 -0
- package/lib/internal/template/radio-group/interfaces.d.ts.map +1 -1
- package/lib/internal/template/radio-group/interfaces.js.map +1 -1
- package/lib/internal/template/segmented-control/interfaces.d.ts +2 -0
- package/lib/internal/template/segmented-control/interfaces.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/interfaces.js.map +1 -1
- package/lib/internal/template/segmented-control/styles.css.js +16 -16
- package/lib/internal/template/segmented-control/styles.scoped.css +46 -46
- package/lib/internal/template/segmented-control/styles.selectors.js +16 -16
- package/lib/internal/template/select/internal.d.ts.map +1 -1
- package/lib/internal/template/select/internal.js +2 -1
- package/lib/internal/template/select/internal.js.map +1 -1
- package/lib/internal/template/slider/interfaces.d.ts +2 -0
- package/lib/internal/template/slider/interfaces.d.ts.map +1 -1
- package/lib/internal/template/slider/interfaces.js.map +1 -1
- package/lib/internal/template/slider/styles.css.js +26 -26
- package/lib/internal/template/slider/styles.scoped.css +165 -165
- package/lib/internal/template/slider/styles.selectors.js +26 -26
- package/lib/internal/template/spinner/styles.css.js +13 -13
- package/lib/internal/template/spinner/styles.scoped.css +39 -39
- package/lib/internal/template/spinner/styles.selectors.js +13 -13
- package/lib/internal/template/tabs/interfaces.d.ts +2 -0
- package/lib/internal/template/tabs/interfaces.d.ts.map +1 -1
- package/lib/internal/template/tabs/interfaces.js.map +1 -1
- package/lib/internal/template/tabs/styles.css.js +30 -30
- package/lib/internal/template/tabs/styles.scoped.css +76 -76
- package/lib/internal/template/tabs/styles.selectors.js +30 -30
- package/lib/internal/template/tag-editor/styles.css.js +3 -3
- package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
- package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
- package/lib/internal/template/text-content/styles.css.js +1 -1
- package/lib/internal/template/text-content/styles.scoped.css +66 -66
- package/lib/internal/template/text-content/styles.selectors.js +1 -1
- package/lib/internal/template/text-filter/interfaces.d.ts +2 -0
- package/lib/internal/template/text-filter/interfaces.d.ts.map +1 -1
- package/lib/internal/template/text-filter/interfaces.js.map +1 -1
- package/lib/internal/template/textarea/interfaces.d.ts +2 -0
- package/lib/internal/template/textarea/interfaces.d.ts.map +1 -1
- package/lib/internal/template/textarea/interfaces.js.map +1 -1
- package/lib/internal/template/textarea/styles.css.js +5 -5
- package/lib/internal/template/textarea/styles.scoped.css +45 -45
- package/lib/internal/template/textarea/styles.selectors.js +5 -5
- package/lib/internal/template/toggle/interfaces.d.ts +2 -0
- package/lib/internal/template/toggle/interfaces.d.ts.map +1 -1
- package/lib/internal/template/toggle/interfaces.js.map +1 -1
- package/lib/internal/template/toggle/styles.css.js +10 -10
- package/lib/internal/template/toggle/styles.scoped.css +23 -23
- package/lib/internal/template/toggle/styles.selectors.js +10 -10
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-fit-handler.js","sourceRoot":"","sources":["../../../../../src/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 { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBreakpointValue } from '../../breakpoints';\nimport { BoundingBox, getOverflowParentDimensions, getOverflowParents } from '../../utils/scrollable-containers';\nimport { LogicalDOMRect } from './dropdown-position';\n\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 blockStart: number;\n blockEnd: number;\n inlineStart: number;\n inlineEnd: number;\n}\nexport interface DropdownPosition {\n blockSize: string;\n inlineSize: string;\n dropBlockStart: boolean;\n dropInlineStart: boolean;\n insetInlineStart: string;\n}\nexport interface InteriorDropdownPosition extends DropdownPosition {\n insetBlockEnd: string;\n insetBlockStart: string;\n}\n\nconst getClosestParentDimensions = (element: HTMLElement): any => {\n const parents = getOverflowParents(element).map(element => {\n const { blockSize, inlineSize, insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(element);\n return {\n blockSize,\n inlineSize,\n insetBlockStart,\n insetInlineStart,\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\nconst getAvailableSpace = ({\n trigger,\n overflowParents,\n stretchWidth = false,\n stretchHeight = false,\n isMobile,\n}: {\n trigger: HTMLElement;\n overflowParents: ReadonlyArray<BoundingBox>;\n stretchWidth?: boolean;\n stretchHeight?: boolean;\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 {\n insetBlockEnd: triggerBlockEnd,\n insetInlineStart: triggerInlineStart,\n insetInlineEnd: triggerInlineEnd,\n } = getLogicalBoundingClientRect(trigger);\n\n return overflowParents.reduce(\n ({ blockStart, blockEnd, inlineStart, inlineEnd }, overflowParent) => {\n const offsetTop = triggerBlockEnd - overflowParent.insetBlockStart;\n const currentBlockStart = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;\n const currentBlockEnd = overflowParent.blockSize - offsetTop - availableSpaceReserveVertical;\n const currentInlineStart = triggerInlineEnd - overflowParent.insetInlineStart - availableSpaceReserveHorizontal;\n const currentInlineEnd =\n overflowParent.insetInlineStart +\n overflowParent.inlineSize -\n triggerInlineStart -\n availableSpaceReserveHorizontal;\n\n return {\n blockStart: Math.min(blockStart, currentBlockStart),\n blockEnd: Math.min(blockEnd, currentBlockEnd),\n inlineStart: Math.min(inlineStart, currentInlineStart),\n inlineEnd: Math.min(inlineEnd, currentInlineEnd),\n };\n },\n {\n blockStart: Number.MAX_VALUE,\n blockEnd: Number.MAX_VALUE,\n inlineStart: Number.MAX_VALUE,\n inlineEnd: Number.MAX_VALUE,\n }\n );\n};\n\nconst getInteriorAvailableSpace = ({\n trigger,\n overflowParents,\n isMobile,\n}: {\n trigger: HTMLElement;\n overflowParents: ReadonlyArray<BoundingBox>;\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 insetBlockEnd: triggerBlockEnd,\n insetBlockStart: triggerBlockStart,\n insetInlineStart: triggerInlineStart,\n insetInlineEnd: triggerInlineEnd,\n } = getLogicalBoundingClientRect(trigger);\n\n return overflowParents.reduce(\n ({ blockStart, blockEnd, inlineStart, inlineEnd }, overflowParent) => {\n const currentBlockStart = triggerBlockEnd - overflowParent.insetBlockStart - AVAILABLE_SPACE_RESERVE_VERTICAL;\n const currentBlockEnd =\n overflowParent.blockSize -\n triggerBlockStart +\n overflowParent.insetBlockStart -\n AVAILABLE_SPACE_RESERVE_VERTICAL;\n const currentInlineStart =\n triggerInlineStart - overflowParent.insetInlineStart - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n const currentInlineEnd =\n overflowParent.insetInlineStart +\n overflowParent.inlineSize -\n triggerInlineEnd -\n AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n\n return {\n blockStart: Math.min(blockStart, currentBlockStart),\n blockEnd: Math.min(blockEnd, currentBlockEnd),\n inlineStart: Math.min(inlineStart, currentInlineStart),\n inlineEnd: Math.min(inlineEnd, currentInlineEnd),\n };\n },\n {\n blockStart: Number.MAX_VALUE,\n blockEnd: Number.MAX_VALUE,\n inlineStart: Number.MAX_VALUE,\n inlineEnd: Number.MAX_VALUE,\n }\n );\n};\n\nconst getWidths = ({\n triggerElement,\n dropdownElement,\n desiredMinWidth,\n stretchBeyondTriggerWidth = false,\n}: {\n triggerElement: HTMLElement;\n dropdownElement: HTMLElement;\n desiredMinWidth?: number;\n stretchBeyondTriggerWidth?: boolean;\n}) => {\n // Determine the width of the trigger\n const { inlineSize: triggerInlineSize } = getLogicalBoundingClientRect(triggerElement);\n // Minimum width is determined by either an explicit number (desiredMinWidth) or the trigger width\n const minWidth = desiredMinWidth ? Math.min(triggerInlineSize, desiredMinWidth) : triggerInlineSize;\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, triggerInlineSize) : Number.MAX_VALUE;\n // Determine the actual dropdown width, the size that it \"wants\" to be\n const { inlineSize: requiredWidth } = getLogicalBoundingClientRect(dropdownElement);\n // Try to achieve the required/desired width within the given parameters\n const idealWidth = Math.min(Math.max(requiredWidth, minWidth), maxWidth);\n return { idealWidth, minWidth, triggerInlineSize };\n};\n\nexport const hasEnoughSpaceToStretchBeyondTriggerWidth = ({\n triggerElement,\n dropdownElement,\n desiredMinWidth,\n expandToViewport,\n stretchWidth,\n stretchHeight,\n isMobile,\n}: {\n triggerElement: HTMLElement;\n dropdownElement: HTMLElement;\n desiredMinWidth?: number;\n expandToViewport: boolean;\n stretchWidth: boolean;\n stretchHeight: boolean;\n isMobile: boolean;\n}) => {\n const overflowParents = getOverflowParentDimensions({\n element: dropdownElement,\n excludeClosestParent: false,\n expandToViewport,\n canExpandOutsideViewport: stretchHeight,\n });\n const { idealWidth } = getWidths({\n triggerElement: triggerElement,\n dropdownElement,\n desiredMinWidth,\n stretchBeyondTriggerWidth: true,\n });\n const availableSpace = getAvailableSpace({\n trigger: triggerElement,\n overflowParents,\n stretchWidth,\n stretchHeight,\n isMobile,\n });\n return idealWidth <= availableSpace.inlineStart || idealWidth <= availableSpace.inlineEnd;\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<BoundingBox>;\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 trigger: triggerElement,\n overflowParents,\n stretchWidth,\n stretchHeight,\n isMobile,\n });\n const { idealWidth, minWidth, triggerInlineSize } = getWidths({\n triggerElement,\n dropdownElement,\n desiredMinWidth,\n stretchBeyondTriggerWidth,\n });\n\n let dropInlineStart: boolean;\n let insetInlineStart: number | null = null;\n let inlineSize = idealWidth;\n\n //1. Can it be positioned with ideal width to the right?\n if (idealWidth <= availableSpace.inlineEnd) {\n dropInlineStart = false;\n //2. Can it be positioned with ideal width to the left?\n } else if (idealWidth <= availableSpace.inlineStart) {\n dropInlineStart = true;\n //3. Fit into biggest available space either on left or right\n } else {\n dropInlineStart = availableSpace.inlineStart > availableSpace.inlineEnd;\n inlineSize = Math.max(availableSpace.inlineStart, availableSpace.inlineEnd, minWidth);\n }\n\n if (preferCenter) {\n const spillOver = (idealWidth - triggerInlineSize) / 2;\n\n // availableSpace always includes the trigger width, but we want to exclude that\n const availableOutsideLeft = availableSpace.inlineStart - triggerInlineSize;\n const availableOutsideRight = availableSpace.inlineEnd - triggerInlineSize;\n\n const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;\n if (fitsInCenter) {\n insetInlineStart = -spillOver;\n }\n }\n\n const dropBlockStart =\n availableSpace.blockEnd < dropdownElement.offsetHeight && availableSpace.blockStart > availableSpace.blockEnd;\n const availableHeight = dropBlockStart ? availableSpace.blockStart : availableSpace.blockEnd;\n // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n const croppedHeight = Math.max(stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16, 15);\n\n return {\n dropBlockStart,\n dropInlineStart,\n insetInlineStart: insetInlineStart === null ? 'auto' : `${insetInlineStart}px`,\n blockSize: `${croppedHeight}px`,\n inlineSize: `${inlineSize}px`,\n };\n};\n\nconst getInteriorDropdownPosition = (\n trigger: HTMLElement,\n dropdown: HTMLElement,\n overflowParents: ReadonlyArray<BoundingBox>,\n isMobile?: boolean\n): InteriorDropdownPosition => {\n const availableSpace = getInteriorAvailableSpace({ trigger, overflowParents, isMobile });\n const {\n insetBlockEnd: triggerBlockEnd,\n insetBlockStart: triggerBlockStart,\n inlineSize: triggerInlineSize,\n } = getLogicalBoundingClientRect(trigger);\n const { insetBlockStart: parentDropdownBlockStart, blockSize: parentDropdownHeight } =\n getClosestParentDimensions(trigger);\n\n let dropInlineStart;\n\n let { inlineSize } = getLogicalBoundingClientRect(dropdown);\n const insetBlockStart = triggerBlockStart - parentDropdownBlockStart;\n if (inlineSize <= availableSpace.inlineEnd) {\n dropInlineStart = false;\n } else if (inlineSize <= availableSpace.inlineStart) {\n dropInlineStart = true;\n } else {\n dropInlineStart = availableSpace.inlineStart > availableSpace.inlineEnd;\n inlineSize = Math.max(availableSpace.inlineStart, availableSpace.inlineEnd);\n }\n\n const insetInlineStart = dropInlineStart ? 0 - inlineSize : triggerInlineSize;\n\n const dropBlockStart =\n availableSpace.blockEnd < dropdown.offsetHeight && availableSpace.blockStart > availableSpace.blockEnd;\n const insetBlockEnd = dropBlockStart ? parentDropdownBlockStart + parentDropdownHeight - triggerBlockEnd : 0;\n const availableHeight = dropBlockStart ? availableSpace.blockStart : availableSpace.blockEnd;\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 dropBlockStart,\n dropInlineStart,\n blockSize: `${croppedHeight}px`,\n inlineSize: `${inlineSize}px`,\n insetBlockStart: `${insetBlockStart}px`,\n insetBlockEnd: `${insetBlockEnd}px`,\n insetInlineStart: `${insetInlineStart}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, LogicalDOMRect] => {\n // cleaning previously assigned values,\n // so that they are not reused in case of screen resize and similar events\n verticalContainerElement.style.maxBlockSize = '';\n dropdownElement.style.inlineSize = '';\n dropdownElement.style.insetBlockStart = '';\n dropdownElement.style.insetBlockEnd = '';\n dropdownElement.style.insetInlineStart = '';\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({\n element: dropdownElement,\n excludeClosestParent: interior,\n expandToViewport,\n canExpandOutsideViewport: stretchHeight,\n });\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 = getLogicalBoundingClientRect(triggerElement);\n return [position, triggerBox];\n};\n"]}
|
|
1
|
+
{"version":3,"file":"dropdown-fit-handler.js","sourceRoot":"","sources":["../../../../../src/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 { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BoundingBox, getOverflowParentDimensions, getOverflowParents } from '../../utils/scrollable-containers';\nimport { LogicalDOMRect } from './dropdown-position';\nimport { DropdownWidthConstraint } from './interfaces';\n\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 blockStart: number;\n blockEnd: number;\n inlineStart: number;\n inlineEnd: number;\n}\nexport interface DropdownPosition {\n blockSize: string;\n inlineSize: string;\n dropBlockStart: boolean;\n dropInlineStart: boolean;\n insetInlineStart: string;\n}\nexport interface InteriorDropdownPosition extends DropdownPosition {\n insetBlockEnd: string;\n insetBlockStart: string;\n}\n\nconst getClosestParentDimensions = (element: HTMLElement): any => {\n const parents = getOverflowParents(element).map(element => {\n const { blockSize, inlineSize, insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(element);\n return {\n blockSize,\n inlineSize,\n insetBlockStart,\n insetInlineStart,\n };\n });\n\n return parents.shift();\n};\n\nconst getAvailableSpace = ({\n trigger,\n overflowParents,\n stretchWidth = false,\n stretchHeight = false,\n isMobile,\n}: {\n trigger: HTMLElement;\n overflowParents: ReadonlyArray<BoundingBox>;\n stretchWidth?: boolean;\n stretchHeight?: boolean;\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 {\n insetBlockEnd: triggerBlockEnd,\n insetInlineStart: triggerInlineStart,\n insetInlineEnd: triggerInlineEnd,\n } = getLogicalBoundingClientRect(trigger);\n\n return overflowParents.reduce(\n ({ blockStart, blockEnd, inlineStart, inlineEnd }, overflowParent) => {\n const offsetTop = triggerBlockEnd - overflowParent.insetBlockStart;\n const currentBlockStart = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;\n const currentBlockEnd = overflowParent.blockSize - offsetTop - availableSpaceReserveVertical;\n const currentInlineStart = triggerInlineEnd - overflowParent.insetInlineStart - availableSpaceReserveHorizontal;\n const currentInlineEnd =\n overflowParent.insetInlineStart +\n overflowParent.inlineSize -\n triggerInlineStart -\n availableSpaceReserveHorizontal;\n\n return {\n blockStart: Math.min(blockStart, currentBlockStart),\n blockEnd: Math.min(blockEnd, currentBlockEnd),\n inlineStart: Math.min(inlineStart, currentInlineStart),\n inlineEnd: Math.min(inlineEnd, currentInlineEnd),\n };\n },\n {\n blockStart: Number.MAX_VALUE,\n blockEnd: Number.MAX_VALUE,\n inlineStart: Number.MAX_VALUE,\n inlineEnd: Number.MAX_VALUE,\n }\n );\n};\n\nconst getInteriorAvailableSpace = ({\n trigger,\n overflowParents,\n isMobile,\n}: {\n trigger: HTMLElement;\n overflowParents: ReadonlyArray<BoundingBox>;\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 insetBlockEnd: triggerBlockEnd,\n insetBlockStart: triggerBlockStart,\n insetInlineStart: triggerInlineStart,\n insetInlineEnd: triggerInlineEnd,\n } = getLogicalBoundingClientRect(trigger);\n\n return overflowParents.reduce(\n ({ blockStart, blockEnd, inlineStart, inlineEnd }, overflowParent) => {\n const currentBlockStart = triggerBlockEnd - overflowParent.insetBlockStart - AVAILABLE_SPACE_RESERVE_VERTICAL;\n const currentBlockEnd =\n overflowParent.blockSize -\n triggerBlockStart +\n overflowParent.insetBlockStart -\n AVAILABLE_SPACE_RESERVE_VERTICAL;\n const currentInlineStart =\n triggerInlineStart - overflowParent.insetInlineStart - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n const currentInlineEnd =\n overflowParent.insetInlineStart +\n overflowParent.inlineSize -\n triggerInlineEnd -\n AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n\n return {\n blockStart: Math.min(blockStart, currentBlockStart),\n blockEnd: Math.min(blockEnd, currentBlockEnd),\n inlineStart: Math.min(inlineStart, currentInlineStart),\n inlineEnd: Math.min(inlineEnd, currentInlineEnd),\n };\n },\n {\n blockStart: Number.MAX_VALUE,\n blockEnd: Number.MAX_VALUE,\n inlineStart: Number.MAX_VALUE,\n inlineEnd: Number.MAX_VALUE,\n }\n );\n};\n\nconst resolveWidthConstraint = (\n constraint: DropdownWidthConstraint | undefined,\n triggerWidth: number,\n fallback: number\n): number => {\n if (constraint === 'trigger') {\n return triggerWidth;\n }\n if (typeof constraint === 'number') {\n return constraint;\n }\n return fallback;\n};\n\nconst getWidths = ({\n triggerElement,\n dropdownElement,\n minWidthConstraint,\n maxWidthConstraint,\n}: {\n triggerElement: HTMLElement;\n dropdownElement: HTMLElement;\n minWidthConstraint?: DropdownWidthConstraint;\n maxWidthConstraint?: DropdownWidthConstraint;\n}) => {\n const { inlineSize: triggerInlineSize } = getLogicalBoundingClientRect(triggerElement);\n const { inlineSize: requiredWidth } = getLogicalBoundingClientRect(dropdownElement);\n\n const minWidth = resolveWidthConstraint(minWidthConstraint, triggerInlineSize, 0);\n const maxWidth = resolveWidthConstraint(maxWidthConstraint, triggerInlineSize, Number.MAX_VALUE);\n\n const idealWidth = Math.min(Math.max(requiredWidth, minWidth), maxWidth);\n return { idealWidth, minWidth, triggerInlineSize };\n};\n\nexport const hasEnoughSpaceForFlexibleWidth = ({\n triggerElement,\n dropdownElement,\n minWidthConstraint,\n maxWidthConstraint,\n expandToViewport,\n stretchHeight,\n isMobile,\n}: {\n triggerElement: HTMLElement;\n dropdownElement: HTMLElement;\n minWidthConstraint?: DropdownWidthConstraint;\n maxWidthConstraint?: DropdownWidthConstraint;\n expandToViewport: boolean;\n stretchHeight: boolean;\n isMobile: boolean;\n}) => {\n const overflowParents = getOverflowParentDimensions({\n element: dropdownElement,\n excludeClosestParent: false,\n expandToViewport,\n canExpandOutsideViewport: stretchHeight,\n });\n const { idealWidth } = getWidths({\n triggerElement: triggerElement,\n dropdownElement,\n minWidthConstraint,\n maxWidthConstraint,\n });\n const availableSpace = getAvailableSpace({\n trigger: triggerElement,\n overflowParents,\n stretchHeight,\n isMobile,\n });\n return idealWidth <= availableSpace.inlineStart || idealWidth <= availableSpace.inlineEnd;\n};\n\nexport const getDropdownPosition = ({\n triggerElement,\n dropdownElement,\n overflowParents,\n minWidth: minWidthConstraint,\n maxWidth: maxWidthConstraint,\n preferCenter = false,\n matchTriggerWidth = false,\n stretchHeight = false,\n isMobile = false,\n}: {\n triggerElement: HTMLElement;\n dropdownElement: HTMLElement;\n overflowParents: ReadonlyArray<BoundingBox>;\n minWidth?: DropdownWidthConstraint;\n maxWidth?: DropdownWidthConstraint;\n preferCenter?: boolean;\n matchTriggerWidth?: boolean;\n stretchHeight?: boolean;\n isMobile?: boolean;\n}): DropdownPosition => {\n // Determine the space available around the dropdown that it can grow in\n const availableSpace = getAvailableSpace({\n trigger: triggerElement,\n overflowParents,\n stretchWidth: matchTriggerWidth,\n stretchHeight,\n isMobile,\n });\n const { idealWidth, minWidth, triggerInlineSize } = getWidths({\n triggerElement,\n dropdownElement,\n minWidthConstraint,\n maxWidthConstraint,\n });\n\n let dropInlineStart: boolean;\n let insetInlineStart: number | null = null;\n let inlineSize = idealWidth;\n\n //1. Can it be positioned with ideal width to the right?\n if (idealWidth <= availableSpace.inlineEnd) {\n dropInlineStart = false;\n //2. Can it be positioned with ideal width to the left?\n } else if (idealWidth <= availableSpace.inlineStart) {\n dropInlineStart = true;\n //3. Fit into biggest available space either on left or right\n } else {\n dropInlineStart = availableSpace.inlineStart > availableSpace.inlineEnd;\n inlineSize = Math.max(availableSpace.inlineStart, availableSpace.inlineEnd, minWidth);\n }\n\n if (preferCenter) {\n const spillOver = (idealWidth - triggerInlineSize) / 2;\n\n // availableSpace always includes the trigger width, but we want to exclude that\n const availableOutsideLeft = availableSpace.inlineStart - triggerInlineSize;\n const availableOutsideRight = availableSpace.inlineEnd - triggerInlineSize;\n\n const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;\n if (fitsInCenter) {\n insetInlineStart = -spillOver;\n }\n }\n\n const dropBlockStart =\n availableSpace.blockEnd < dropdownElement.offsetHeight && availableSpace.blockStart > availableSpace.blockEnd;\n const availableHeight = dropBlockStart ? availableSpace.blockStart : availableSpace.blockEnd;\n // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n const croppedHeight = Math.max(stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16, 15);\n\n return {\n dropBlockStart,\n dropInlineStart,\n insetInlineStart: insetInlineStart === null ? 'auto' : `${insetInlineStart}px`,\n blockSize: `${croppedHeight}px`,\n inlineSize: `${inlineSize}px`,\n };\n};\n\nconst getInteriorDropdownPosition = (\n trigger: HTMLElement,\n dropdown: HTMLElement,\n overflowParents: ReadonlyArray<BoundingBox>,\n isMobile?: boolean\n): InteriorDropdownPosition => {\n const availableSpace = getInteriorAvailableSpace({ trigger, overflowParents, isMobile });\n const {\n insetBlockEnd: triggerBlockEnd,\n insetBlockStart: triggerBlockStart,\n inlineSize: triggerInlineSize,\n } = getLogicalBoundingClientRect(trigger);\n const { insetBlockStart: parentDropdownBlockStart, blockSize: parentDropdownHeight } =\n getClosestParentDimensions(trigger);\n\n let dropInlineStart;\n\n let { inlineSize } = getLogicalBoundingClientRect(dropdown);\n const insetBlockStart = triggerBlockStart - parentDropdownBlockStart;\n if (inlineSize <= availableSpace.inlineEnd) {\n dropInlineStart = false;\n } else if (inlineSize <= availableSpace.inlineStart) {\n dropInlineStart = true;\n } else {\n dropInlineStart = availableSpace.inlineStart > availableSpace.inlineEnd;\n inlineSize = Math.max(availableSpace.inlineStart, availableSpace.inlineEnd);\n }\n\n const insetInlineStart = dropInlineStart ? 0 - inlineSize : triggerInlineSize;\n\n const dropBlockStart =\n availableSpace.blockEnd < dropdown.offsetHeight && availableSpace.blockStart > availableSpace.blockEnd;\n const insetBlockEnd = dropBlockStart ? parentDropdownBlockStart + parentDropdownHeight - triggerBlockEnd : 0;\n const availableHeight = dropBlockStart ? availableSpace.blockStart : availableSpace.blockEnd;\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 dropBlockStart,\n dropInlineStart,\n blockSize: `${croppedHeight}px`,\n inlineSize: `${inlineSize}px`,\n insetBlockStart: `${insetBlockStart}px`,\n insetBlockEnd: `${insetBlockEnd}px`,\n insetInlineStart: `${insetInlineStart}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 matchTriggerWidth: boolean,\n stretchHeight: boolean,\n isMobile: boolean,\n minWidth?: DropdownWidthConstraint,\n maxWidth?: DropdownWidthConstraint\n): [DropdownPosition, LogicalDOMRect] => {\n // cleaning previously assigned values,\n // so that they are not reused in case of screen resize and similar events\n verticalContainerElement.style.maxBlockSize = '';\n dropdownElement.style.inlineSize = '';\n dropdownElement.style.insetBlockStart = '';\n dropdownElement.style.insetBlockEnd = '';\n dropdownElement.style.insetInlineStart = '';\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({\n element: dropdownElement,\n excludeClosestParent: interior,\n expandToViewport,\n canExpandOutsideViewport: stretchHeight,\n });\n const position = interior\n ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)\n : getDropdownPosition({\n triggerElement,\n dropdownElement,\n overflowParents,\n minWidth,\n maxWidth,\n preferCenter,\n matchTriggerWidth,\n stretchHeight,\n isMobile,\n });\n const triggerBox = getLogicalBoundingClientRect(triggerElement);\n return [position, triggerBox];\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-position.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-position.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB;AAGD,wBAAgB,uCAAuC,CAAC,EACtD,QAAQ,EACR,eAAe,EACf,WAAW,EACX,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,eAAe,EAAE,WAAW,CAAC;IAC7B,WAAW,EAAE,cAAc,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB,
|
|
1
|
+
{"version":3,"file":"dropdown-position.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-position.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB;AAGD,wBAAgB,uCAAuC,CAAC,EACtD,QAAQ,EACR,eAAe,EACf,WAAW,EACX,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,eAAe,EAAE,WAAW,CAAC;IAC7B,WAAW,EAAE,cAAc,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB,QA0BA"}
|
|
@@ -18,7 +18,10 @@ export function applyDropdownPositionRelativeToViewport({ position, dropdownElem
|
|
|
18
18
|
dropdownElement.style.insetBlockStart = `${verticalScrollOffset + triggerRect.insetBlockEnd}px`;
|
|
19
19
|
}
|
|
20
20
|
if (position.dropInlineStart) {
|
|
21
|
-
|
|
21
|
+
// For right-aligned dropdowns, use the actual rendered width when flexible width is enabled
|
|
22
|
+
// to ensure proper alignment even when CSS constraints differ from calculated inlineSize
|
|
23
|
+
const actualWidth = dropdownElement.getBoundingClientRect().width;
|
|
24
|
+
dropdownElement.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerRect.insetInlineEnd}px - ${actualWidth}px)`;
|
|
22
25
|
}
|
|
23
26
|
else {
|
|
24
27
|
dropdownElement.style.insetInlineStart = `${horizontalScrollOffset + triggerRect.insetInlineStart}px`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-position.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-position.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAatC,qFAAqF;AACrF,MAAM,UAAU,uCAAuC,CAAC,EACtD,QAAQ,EACR,eAAe,EACf,WAAW,EACX,QAAQ,GAMT;IACC,yFAAyF;IACzF,yDAAyD;IACzD,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAExC,2FAA2F;IAC3F,mEAAmE;IACnE,2GAA2G;IAC3G,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7F,MAAM,sBAAsB,GAAG,sBAAsB,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhG,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,sBAAsB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;IAE/E,IAAI,QAAQ,CAAC,cAAc,EAAE,CAAC;QAC5B,eAAe,CAAC,KAAK,CAAC,aAAa,GAAG,eAAe,oBAAoB,GAAG,WAAW,CAAC,eAAe,KAAK,CAAC;IAC/G,CAAC;SAAM,CAAC;QACN,eAAe,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,oBAAoB,GAAG,WAAW,CAAC,aAAa,IAAI,CAAC;IAClG,CAAC;IACD,IAAI,QAAQ,CAAC,eAAe,EAAE,CAAC;QAC7B,eAAe,CAAC,KAAK,CAAC,gBAAgB,GAAG,QAAQ,sBAAsB,GAAG,WAAW,CAAC,cAAc,QAAQ,
|
|
1
|
+
{"version":3,"file":"dropdown-position.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-position.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAatC,qFAAqF;AACrF,MAAM,UAAU,uCAAuC,CAAC,EACtD,QAAQ,EACR,eAAe,EACf,WAAW,EACX,QAAQ,GAMT;IACC,yFAAyF;IACzF,yDAAyD;IACzD,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAExC,2FAA2F;IAC3F,mEAAmE;IACnE,2GAA2G;IAC3G,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7F,MAAM,sBAAsB,GAAG,sBAAsB,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhG,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,sBAAsB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;IAE/E,IAAI,QAAQ,CAAC,cAAc,EAAE,CAAC;QAC5B,eAAe,CAAC,KAAK,CAAC,aAAa,GAAG,eAAe,oBAAoB,GAAG,WAAW,CAAC,eAAe,KAAK,CAAC;IAC/G,CAAC;SAAM,CAAC;QACN,eAAe,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,oBAAoB,GAAG,WAAW,CAAC,aAAa,IAAI,CAAC;IAClG,CAAC;IACD,IAAI,QAAQ,CAAC,eAAe,EAAE,CAAC;QAC7B,4FAA4F;QAC5F,yFAAyF;QACzF,MAAM,WAAW,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAClE,eAAe,CAAC,KAAK,CAAC,gBAAgB,GAAG,QAAQ,sBAAsB,GAAG,WAAW,CAAC,cAAc,QAAQ,WAAW,KAAK,CAAC;IAC/H,CAAC;SAAM,CAAC;QACN,eAAe,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,sBAAsB,GAAG,WAAW,CAAC,gBAAgB,IAAI,CAAC;IACxG,CAAC;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { DropdownPosition } from './dropdown-fit-handler';\n\nexport interface LogicalDOMRect {\n blockSize: number;\n inlineSize: number;\n insetBlockStart: number;\n insetBlockEnd: number;\n insetInlineStart: number;\n insetInlineEnd: number;\n}\n\n// Applies its position to the dropdown element when expandToViewport is set to true.\nexport function applyDropdownPositionRelativeToViewport({\n position,\n dropdownElement,\n triggerRect,\n isMobile,\n}: {\n position: DropdownPosition;\n dropdownElement: HTMLElement;\n triggerRect: LogicalDOMRect;\n isMobile: boolean;\n}) {\n // Fixed positions are not respected in iOS when the virtual keyboard is being displayed.\n // For this reason we use absolute positioning in mobile.\n const useAbsolutePositioning = isMobile;\n\n // Since when using expandToViewport=true the dropdown is attached to the root of the body,\n // the same coordinates can be used for fixed or absolute position,\n // except when using absolute position we need to take into account the scroll position of the body itself.\n const verticalScrollOffset = useAbsolutePositioning ? document.documentElement.scrollTop : 0;\n const horizontalScrollOffset = useAbsolutePositioning ? document.documentElement.scrollLeft : 0;\n\n dropdownElement.style.position = useAbsolutePositioning ? 'absolute' : 'fixed';\n\n if (position.dropBlockStart) {\n dropdownElement.style.insetBlockEnd = `calc(100% - ${verticalScrollOffset + triggerRect.insetBlockStart}px)`;\n } else {\n dropdownElement.style.insetBlockStart = `${verticalScrollOffset + triggerRect.insetBlockEnd}px`;\n }\n if (position.dropInlineStart) {\n // For right-aligned dropdowns, use the actual rendered width when flexible width is enabled\n // to ensure proper alignment even when CSS constraints differ from calculated inlineSize\n const actualWidth = dropdownElement.getBoundingClientRect().width;\n dropdownElement.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerRect.insetInlineEnd}px - ${actualWidth}px)`;\n } else {\n dropdownElement.style.insetInlineStart = `${horizontalScrollOffset + triggerRect.insetInlineStart}px`;\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { DropdownProps } from './interfaces';
|
|
2
|
-
declare const Dropdown: ({ content, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight,
|
|
2
|
+
declare const Dropdown: ({ content, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight, stretchHeight, minWidth, maxWidth, hideBlockBorder, expandToViewport, preferCenter, interior, scrollable, loopFocus, onFocus, onBlur, contentKey, dropdownContentId, dropdownContentRole, ariaLabelledby, ariaDescribedby, }: DropdownProps) => JSX.Element;
|
|
3
3
|
export default Dropdown;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAsI7C,QAAA,MAAM,QAAQ,GAAI,wUA0Bf,aAAa,gBAgUf,CAAC;AAMF,eAAe,QAAQ,CAAC"}
|
|
@@ -15,7 +15,7 @@ import { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';
|
|
|
15
15
|
import TabTrap from '../tab-trap/index.js';
|
|
16
16
|
import { Transition } from '../transition';
|
|
17
17
|
import { DropdownContextProvider } from './context';
|
|
18
|
-
import { calculatePosition,
|
|
18
|
+
import { calculatePosition, hasEnoughSpaceForFlexibleWidth, } from './dropdown-fit-handler';
|
|
19
19
|
import { applyDropdownPositionRelativeToViewport } from './dropdown-position';
|
|
20
20
|
import styles from './styles.css.js';
|
|
21
21
|
const DropdownContainer = ({ triggerRef, children, renderWithPortal, id, referrerId, open, }) => {
|
|
@@ -29,17 +29,24 @@ const DropdownContainer = ({ triggerRef, children, renderWithPortal, id, referre
|
|
|
29
29
|
const currentDocument = (_b = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
|
|
30
30
|
return createPortal(React.createElement("div", { id: id, "data-awsui-referrer-id": referrerId }, children), currentDocument.body);
|
|
31
31
|
};
|
|
32
|
-
const TransitionContent = ({ state, transitionRef, dropdownClasses,
|
|
32
|
+
const TransitionContent = ({ state, transitionRef, dropdownClasses, matchTriggerWidth, hideBlockBorder, interior, isRefresh, dropdownRef, verticalContainerRef, expandToViewport, minWidth, maxWidth, header, content, footer, position, open, onMouseDown, id, role, ariaLabelledby, ariaDescribedby, }) => {
|
|
33
33
|
const contentRef = useMergeRefs(dropdownRef, transitionRef);
|
|
34
|
+
const dropdownStyles = {};
|
|
35
|
+
if (minWidth) {
|
|
36
|
+
dropdownStyles[customCssProps.dropdownDefaultMinWidth] = minWidth;
|
|
37
|
+
}
|
|
38
|
+
if (maxWidth) {
|
|
39
|
+
dropdownStyles[customCssProps.dropdownDefaultMaxWidth] = maxWidth;
|
|
40
|
+
}
|
|
34
41
|
return (React.createElement("div", { className: clsx(styles.dropdown, dropdownClasses, {
|
|
35
42
|
[styles.open]: open,
|
|
36
|
-
[styles['with-limited-width']]: !
|
|
37
|
-
[styles['hide-block-border']]:
|
|
43
|
+
[styles['with-limited-width']]: !matchTriggerWidth,
|
|
44
|
+
[styles['hide-block-border']]: hideBlockBorder,
|
|
38
45
|
[styles.interior]: interior,
|
|
39
46
|
[styles.refresh]: isRefresh,
|
|
40
47
|
[styles['use-portal']]: expandToViewport && !interior,
|
|
41
|
-
[styles['
|
|
42
|
-
}), ref: contentRef, id: id, role: role, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-open": open, "data-animating": state !== 'exited', "aria-hidden": !open, style:
|
|
48
|
+
[styles['use-flexible-width']]: !matchTriggerWidth && !interior,
|
|
49
|
+
}), ref: contentRef, id: id, role: role, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-open": open, "data-animating": state !== 'exited', "aria-hidden": !open, style: dropdownStyles, onMouseDown: onMouseDown },
|
|
43
50
|
React.createElement("div", { className: clsx(styles['dropdown-content-wrapper'], !header && !content && styles['is-empty'], isRefresh && styles.refresh) },
|
|
44
51
|
React.createElement("div", { ref: verticalContainerRef, className: styles['dropdown-content'] },
|
|
45
52
|
React.createElement(DropdownContextProvider, { position: position },
|
|
@@ -47,7 +54,7 @@ const TransitionContent = ({ state, transitionRef, dropdownClasses, stretchWidth
|
|
|
47
54
|
content,
|
|
48
55
|
footer)))));
|
|
49
56
|
};
|
|
50
|
-
const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false,
|
|
57
|
+
const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false, stretchHeight = false, minWidth, maxWidth, hideBlockBorder = true, expandToViewport = false, preferCenter = false, interior = false, scrollable = true, loopFocus = expandToViewport, onFocus, onBlur, contentKey, dropdownContentId, dropdownContentRole, ariaLabelledby, ariaDescribedby, }) => {
|
|
51
58
|
const wrapperRef = useRef(null);
|
|
52
59
|
const triggerRef = useRef(null);
|
|
53
60
|
const dropdownRef = useRef(null);
|
|
@@ -59,19 +66,14 @@ const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header
|
|
|
59
66
|
const dropdownClasses = usePortalModeClasses(triggerRef);
|
|
60
67
|
const [position, setPosition] = useState('bottom-right');
|
|
61
68
|
const isMobile = useMobile();
|
|
69
|
+
// Derive if dropdown should match trigger width exactly
|
|
70
|
+
// This happens when both minWidth and maxWidth are explicitly set to 'trigger'
|
|
71
|
+
const matchTriggerWidth = minWidth === 'trigger' && maxWidth === 'trigger';
|
|
62
72
|
const setDropdownPosition = (position, triggerBox, target, verticalContainer) => {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
else {
|
|
69
|
-
verticalContainer.style.maxBlockSize = position.blockSize;
|
|
70
|
-
}
|
|
71
|
-
if (entireWidth && !expandToViewport) {
|
|
72
|
-
if (stretchToTriggerWidth) {
|
|
73
|
-
target.classList.add(styles['occupy-entire-width']);
|
|
74
|
-
}
|
|
73
|
+
verticalContainer.style.maxBlockSize = position.blockSize;
|
|
74
|
+
// Only apply occupy-entire-width when matching trigger width exactly and not in portal mode
|
|
75
|
+
if (!interior && matchTriggerWidth && !expandToViewport) {
|
|
76
|
+
target.classList.add(styles['occupy-entire-width']);
|
|
75
77
|
}
|
|
76
78
|
else {
|
|
77
79
|
target.style.inlineSize = position.inlineSize;
|
|
@@ -140,21 +142,20 @@ const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header
|
|
|
140
142
|
fireNonCancelableEvent(onBlur, event);
|
|
141
143
|
}
|
|
142
144
|
};
|
|
143
|
-
//
|
|
144
|
-
//
|
|
145
|
+
// Check if the dropdown has enough space to fit with its desired width constraints
|
|
146
|
+
// If not, remove the class that allows flexible width sizing
|
|
145
147
|
const fixStretching = () => {
|
|
146
|
-
const classNameToRemove = styles['
|
|
148
|
+
const classNameToRemove = styles['use-flexible-width'];
|
|
147
149
|
if (open &&
|
|
148
|
-
stretchBeyondTriggerWidth &&
|
|
149
150
|
dropdownRef.current &&
|
|
150
151
|
triggerRef.current &&
|
|
151
152
|
dropdownRef.current.classList.contains(classNameToRemove) &&
|
|
152
|
-
!
|
|
153
|
+
!hasEnoughSpaceForFlexibleWidth({
|
|
153
154
|
triggerElement: triggerRef.current,
|
|
154
155
|
dropdownElement: dropdownRef.current,
|
|
155
|
-
|
|
156
|
+
minWidthConstraint: minWidth,
|
|
157
|
+
maxWidthConstraint: maxWidth,
|
|
156
158
|
expandToViewport,
|
|
157
|
-
stretchWidth,
|
|
158
159
|
stretchHeight,
|
|
159
160
|
isMobile,
|
|
160
161
|
})) {
|
|
@@ -165,11 +166,10 @@ const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header
|
|
|
165
166
|
useLayoutEffect(() => {
|
|
166
167
|
const onDropdownOpen = () => {
|
|
167
168
|
if (open && dropdownRef.current && triggerRef.current && verticalContainerRef.current) {
|
|
168
|
-
// calculate scroll width only for dropdowns that has a scrollbar and ignore it for date picker components
|
|
169
169
|
if (scrollable) {
|
|
170
170
|
dropdownRef.current.classList.add(styles.nowrap);
|
|
171
171
|
}
|
|
172
|
-
setDropdownPosition(...calculatePosition(dropdownRef.current, triggerRef.current, verticalContainerRef.current, interior, expandToViewport, preferCenter,
|
|
172
|
+
setDropdownPosition(...calculatePosition(dropdownRef.current, triggerRef.current, verticalContainerRef.current, interior, expandToViewport, preferCenter, matchTriggerWidth, stretchHeight, isMobile, minWidth, maxWidth), dropdownRef.current, verticalContainerRef.current);
|
|
173
173
|
if (scrollable) {
|
|
174
174
|
dropdownRef.current.classList.remove(styles.nowrap);
|
|
175
175
|
}
|
|
@@ -191,7 +191,7 @@ const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header
|
|
|
191
191
|
}
|
|
192
192
|
// See AWSUI-13040
|
|
193
193
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
194
|
-
}, [open, dropdownRef, triggerRef, verticalContainerRef, interior,
|
|
194
|
+
}, [open, dropdownRef, triggerRef, verticalContainerRef, interior, matchTriggerWidth, isMobile, contentKey]);
|
|
195
195
|
// subscribe to outside click
|
|
196
196
|
useEffect(() => {
|
|
197
197
|
if (!open) {
|
|
@@ -234,13 +234,35 @@ const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header
|
|
|
234
234
|
};
|
|
235
235
|
}, [open, expandToViewport, isMobile]);
|
|
236
236
|
const referrerId = useUniqueId();
|
|
237
|
+
// Compute CSS variable values for min/max width
|
|
238
|
+
// These will be used by the use-flexible-width CSS class
|
|
239
|
+
const getMinWidthCssValue = () => {
|
|
240
|
+
if (minWidth === undefined) {
|
|
241
|
+
return undefined;
|
|
242
|
+
}
|
|
243
|
+
if (typeof minWidth === 'number') {
|
|
244
|
+
return `${minWidth}px`;
|
|
245
|
+
}
|
|
246
|
+
// 'trigger' maps to 100% (relative to parent)
|
|
247
|
+
return '100%';
|
|
248
|
+
};
|
|
249
|
+
const getMaxWidthCssValue = () => {
|
|
250
|
+
if (maxWidth === undefined) {
|
|
251
|
+
return 'none';
|
|
252
|
+
}
|
|
253
|
+
if (typeof maxWidth === 'number') {
|
|
254
|
+
return `${maxWidth}px`;
|
|
255
|
+
}
|
|
256
|
+
// 'trigger' maps to 100% (relative to parent)
|
|
257
|
+
return '100%';
|
|
258
|
+
};
|
|
237
259
|
return (React.createElement("div", { className: clsx(styles.root, interior && styles.interior, stretchTriggerHeight && styles['stretch-trigger-height']), ref: wrapperRef, onFocus: focusHandler, onBlur: blurHandler },
|
|
238
260
|
React.createElement("div", { id: referrerId, className: clsx(stretchTriggerHeight && styles['stretch-trigger-height']), ref: triggerRef }, trigger),
|
|
239
261
|
React.createElement(TabTrap, { focusNextCallback: () => { var _a; return dropdownRef.current && ((_a = getFirstFocusable(dropdownRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
|
|
240
262
|
React.createElement(DropdownContainer, { triggerRef: triggerRef, renderWithPortal: expandToViewport && !interior, id: dropdownId, referrerId: referrerId, open: open },
|
|
241
263
|
React.createElement(Transition, { in: open !== null && open !== void 0 ? open : false, exit: false }, (state, ref) => (React.createElement("div", { ref: dropdownContainerRef },
|
|
242
264
|
React.createElement(TabTrap, { focusNextCallback: () => { var _a; return triggerRef.current && ((_a = getLastFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
|
|
243
|
-
React.createElement(TransitionContent, { state: state, transitionRef: ref, dropdownClasses: dropdownClasses, open: open,
|
|
265
|
+
React.createElement(TransitionContent, { state: state, transitionRef: ref, dropdownClasses: dropdownClasses, open: open, matchTriggerWidth: matchTriggerWidth, hideBlockBorder: hideBlockBorder, interior: interior, header: header, content: content, expandToViewport: expandToViewport, minWidth: getMinWidthCssValue(), maxWidth: getMaxWidthCssValue(), footer: footer, onMouseDown: onMouseDown, isRefresh: isRefresh, dropdownRef: dropdownRef, verticalContainerRef: verticalContainerRef, position: position, id: dropdownContentId, role: dropdownContentRole, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby }),
|
|
244
266
|
React.createElement(TabTrap, { focusNextCallback: () => { var _a; return triggerRef.current && ((_a = getFirstFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus })))))));
|
|
245
267
|
};
|
|
246
268
|
const isInteriorPosition = (position) => position.insetBlockEnd !== undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/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, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport customCssProps from '../../generated/custom-css-properties';\nimport { useMobile } from '../../hooks/use-mobile';\nimport { usePortalModeClasses } from '../../hooks/use-portal-mode-classes';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';\nimport TabTrap from '../tab-trap/index.js';\nimport { Transition, TransitionStatus } from '../transition';\nimport { DropdownContextProvider, DropdownContextProviderProps } from './context';\nimport {\n calculatePosition,\n defaultMaxDropdownWidth,\n DropdownPosition,\n hasEnoughSpaceToStretchBeyondTriggerWidth,\n InteriorDropdownPosition,\n} from './dropdown-fit-handler';\nimport { applyDropdownPositionRelativeToViewport, LogicalDOMRect } from './dropdown-position';\nimport { DropdownProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface DropdownContainerProps {\n triggerRef: React.RefObject<HTMLElement>;\n children?: React.ReactNode;\n renderWithPortal: boolean;\n id?: string;\n referrerId?: string;\n open?: boolean;\n}\n\nconst DropdownContainer = ({\n triggerRef,\n children,\n renderWithPortal,\n id,\n referrerId,\n open,\n}: DropdownContainerProps) => {\n if (!renderWithPortal) {\n return <>{children}</>;\n }\n if (!open) {\n return null;\n }\n const currentDocument = triggerRef.current?.ownerDocument ?? document;\n return createPortal(\n <div id={id} data-awsui-referrer-id={referrerId}>\n {children}\n </div>,\n currentDocument.body\n );\n};\n\ninterface TransitionContentProps {\n state: TransitionStatus;\n transitionRef: React.MutableRefObject<any>;\n dropdownClasses: string;\n stretchWidth: boolean;\n interior: boolean;\n isRefresh: boolean;\n dropdownRef: React.RefObject<HTMLDivElement>;\n verticalContainerRef: React.RefObject<HTMLDivElement>;\n expandToViewport?: boolean;\n stretchBeyondTriggerWidth?: boolean;\n header?: React.ReactNode;\n content?: React.ReactNode;\n footer?: React.ReactNode;\n position?: DropdownContextProviderProps['position'];\n open?: boolean;\n onMouseDown?: React.MouseEventHandler<Element>;\n id?: string;\n role?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\n\nconst TransitionContent = ({\n state,\n transitionRef,\n dropdownClasses,\n stretchWidth,\n interior,\n isRefresh,\n dropdownRef,\n verticalContainerRef,\n expandToViewport,\n stretchBeyondTriggerWidth,\n header,\n content,\n footer,\n position,\n open,\n onMouseDown,\n id,\n role,\n ariaLabelledby,\n ariaDescribedby,\n}: TransitionContentProps) => {\n const contentRef = useMergeRefs(dropdownRef, transitionRef);\n return (\n <div\n className={clsx(styles.dropdown, dropdownClasses, {\n [styles.open]: open,\n [styles['with-limited-width']]: !stretchWidth,\n [styles['hide-block-border']]: stretchWidth,\n [styles.interior]: interior,\n [styles.refresh]: isRefresh,\n [styles['use-portal']]: expandToViewport && !interior,\n [styles['stretch-beyond-trigger-width']]: stretchBeyondTriggerWidth,\n })}\n ref={contentRef}\n id={id}\n role={role}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n data-open={open}\n data-animating={state !== 'exited'}\n aria-hidden={!open}\n style={\n stretchBeyondTriggerWidth ? { [customCssProps.dropdownDefaultMaxWidth]: `${defaultMaxDropdownWidth}px` } : {}\n }\n onMouseDown={onMouseDown}\n >\n <div\n className={clsx(\n styles['dropdown-content-wrapper'],\n !header && !content && styles['is-empty'],\n isRefresh && styles.refresh\n )}\n >\n <div ref={verticalContainerRef} className={styles['dropdown-content']}>\n <DropdownContextProvider position={position}>\n {header}\n {content}\n {footer}\n </DropdownContextProvider>\n </div>\n </div>\n </div>\n );\n};\n\nconst Dropdown = ({\n content,\n trigger,\n open,\n onDropdownClose,\n onMouseDown,\n header,\n footer,\n dropdownId,\n stretchTriggerHeight = false,\n stretchWidth = true,\n stretchHeight = false,\n stretchToTriggerWidth = true,\n stretchBeyondTriggerWidth = false,\n expandToViewport = false,\n preferCenter = false,\n interior = false,\n minWidth,\n scrollable = true,\n loopFocus = expandToViewport,\n onFocus,\n onBlur,\n contentKey,\n dropdownContentId,\n dropdownContentRole,\n ariaLabelledby,\n ariaDescribedby,\n}: DropdownProps) => {\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLDivElement | null>(null);\n const dropdownRef = useRef<HTMLDivElement | null>(null);\n const dropdownContainerRef = useRef<HTMLDivElement | null>(null);\n const verticalContainerRef = useRef<HTMLDivElement>(null);\n // To keep track of the initial position (drop up/down) which is kept the same during fixed repositioning\n const fixedPosition = useRef<DropdownPosition | null>(null);\n\n const isRefresh = useVisualRefresh();\n\n const dropdownClasses = usePortalModeClasses(triggerRef);\n const [position, setPosition] = useState<DropdownContextProviderProps['position']>('bottom-right');\n\n const isMobile = useMobile();\n\n const setDropdownPosition = (\n position: DropdownPosition | InteriorDropdownPosition,\n triggerBox: LogicalDOMRect,\n target: HTMLDivElement,\n verticalContainer: HTMLDivElement\n ) => {\n const entireWidth = !interior && stretchWidth;\n if (!stretchWidth) {\n // 1px offset for dropdowns where the dropdown itself needs a border, rather than on the items\n verticalContainer.style.maxBlockSize = `${parseInt(position.blockSize) + 1}px`;\n } else {\n verticalContainer.style.maxBlockSize = position.blockSize;\n }\n\n if (entireWidth && !expandToViewport) {\n if (stretchToTriggerWidth) {\n target.classList.add(styles['occupy-entire-width']);\n }\n } else {\n target.style.inlineSize = position.inlineSize;\n }\n\n // Using styles for main dropdown to adjust its position as preferred alternative\n if (position.dropBlockStart && !interior) {\n target.classList.add(styles['dropdown-drop-up']);\n if (!expandToViewport) {\n target.style.insetBlockEnd = '100%';\n }\n } else {\n target.classList.remove(styles['dropdown-drop-up']);\n }\n target.classList.add(position.dropInlineStart ? styles['dropdown-drop-left'] : styles['dropdown-drop-right']);\n\n if (position.insetInlineStart && position.insetInlineStart !== 'auto') {\n target.style.insetInlineStart = position.insetInlineStart;\n }\n\n // Position normal overflow dropdowns with fixed positioning relative to viewport\n if (expandToViewport && !interior) {\n applyDropdownPositionRelativeToViewport({\n position,\n dropdownElement: target,\n triggerRect: triggerBox,\n isMobile,\n });\n // Keep track of the initial dropdown position and direction.\n // Dropdown direction doesn't need to change as the user scrolls, just needs to stay attached to the trigger.\n fixedPosition.current = position;\n return;\n }\n\n // For an interior dropdown (the fly out) we need exact values for positioning\n // and classes are not enough\n // usage of relative position is impossible due to overwrite of overflow-x\n if (interior && isInteriorPosition(position)) {\n if (position.dropBlockStart) {\n target.style.insetBlockEnd = position.insetBlockEnd;\n } else {\n target.style.insetBlockStart = position.insetBlockStart;\n }\n target.style.insetInlineStart = position.insetInlineStart;\n }\n\n if (position.dropBlockStart && position.dropInlineStart) {\n setPosition('top-left');\n } else if (position.dropBlockStart) {\n setPosition('top-right');\n } else if (position.dropInlineStart) {\n setPosition('bottom-left');\n } else {\n setPosition('bottom-right');\n }\n };\n\n const isOutsideDropdown = (element: Element) =>\n (!wrapperRef.current || !nodeBelongs(wrapperRef.current, element)) &&\n (!dropdownContainerRef.current || !nodeBelongs(dropdownContainerRef.current, element));\n\n const focusHandler = (event: React.FocusEvent) => {\n if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n fireNonCancelableEvent(onFocus, event);\n }\n };\n\n const blurHandler = (event: React.FocusEvent) => {\n if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n fireNonCancelableEvent(onBlur, event);\n }\n };\n\n // Prevent the dropdown width from stretching beyond the trigger width\n // if that is going to cause the dropdown to be cropped because of overflow\n const fixStretching = () => {\n const classNameToRemove = styles['stretch-beyond-trigger-width'];\n if (\n open &&\n stretchBeyondTriggerWidth &&\n dropdownRef.current &&\n triggerRef.current &&\n dropdownRef.current.classList.contains(classNameToRemove) &&\n !hasEnoughSpaceToStretchBeyondTriggerWidth({\n triggerElement: triggerRef.current,\n dropdownElement: dropdownRef.current,\n desiredMinWidth: minWidth,\n expandToViewport,\n stretchWidth,\n stretchHeight,\n isMobile,\n })\n ) {\n dropdownRef.current.classList.remove(classNameToRemove);\n }\n };\n\n useResizeObserver(() => dropdownRef.current, fixStretching);\n\n useLayoutEffect(() => {\n const onDropdownOpen = () => {\n if (open && dropdownRef.current && triggerRef.current && verticalContainerRef.current) {\n // calculate scroll width only for dropdowns that has a scrollbar and ignore it for date picker components\n if (scrollable) {\n dropdownRef.current.classList.add(styles.nowrap);\n }\n setDropdownPosition(\n ...calculatePosition(\n dropdownRef.current,\n triggerRef.current,\n verticalContainerRef.current,\n interior,\n expandToViewport,\n preferCenter,\n stretchWidth,\n stretchHeight,\n isMobile,\n minWidth,\n stretchBeyondTriggerWidth\n ),\n dropdownRef.current,\n verticalContainerRef.current\n );\n if (scrollable) {\n dropdownRef.current.classList.remove(styles.nowrap);\n }\n }\n };\n onDropdownOpen();\n\n if (open) {\n // window may scroll when dropdown opens, for example when soft keyboard shows up\n window.addEventListener('scroll', onDropdownOpen);\n // only listen to window scroll within very short time after the dropdown opens\n // do not want to interfere dropdown position on scroll afterwards\n const timeoutId = setTimeout(() => {\n window.removeEventListener('scroll', onDropdownOpen);\n }, 500);\n\n return () => {\n clearTimeout(timeoutId);\n window.removeEventListener('scroll', onDropdownOpen);\n };\n }\n // See AWSUI-13040\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, dropdownRef, triggerRef, verticalContainerRef, interior, stretchWidth, isMobile, contentKey]);\n\n // subscribe to outside click\n useEffect(() => {\n if (!open) {\n return;\n }\n const clickListener = (event: MouseEvent) => {\n // Since the listener is registered on the window, `event.target` will incorrectly point at the\n // shadow root if the component is rendered inside shadow DOM.\n const target = event.composedPath ? event.composedPath()[0] : event.target;\n if (!nodeBelongs(dropdownRef.current, target) && !nodeBelongs(triggerRef.current, target)) {\n fireNonCancelableEvent(onDropdownClose);\n }\n };\n window.addEventListener('click', clickListener, true);\n\n return () => {\n window.removeEventListener('click', clickListener, true);\n };\n }, [open, onDropdownClose]);\n\n // sync dropdown position on scroll and resize\n useLayoutEffect(() => {\n if (!expandToViewport || !open) {\n return;\n }\n const updateDropdownPosition = () => {\n if (triggerRef.current && dropdownRef.current && verticalContainerRef.current && fixedPosition.current) {\n applyDropdownPositionRelativeToViewport({\n position: fixedPosition.current,\n dropdownElement: dropdownRef.current,\n triggerRect: getLogicalBoundingClientRect(triggerRef.current),\n isMobile,\n });\n }\n };\n\n updateDropdownPosition();\n\n const controller = new AbortController();\n window.addEventListener('scroll', updateDropdownPosition, { capture: true, signal: controller.signal });\n window.addEventListener('resize', updateDropdownPosition, { capture: true, signal: controller.signal });\n return () => {\n controller.abort();\n };\n }, [open, expandToViewport, isMobile]);\n\n const referrerId = useUniqueId();\n\n return (\n <div\n className={clsx(\n styles.root,\n interior && styles.interior,\n stretchTriggerHeight && styles['stretch-trigger-height']\n )}\n ref={wrapperRef}\n onFocus={focusHandler}\n onBlur={blurHandler}\n >\n <div id={referrerId} className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'])} ref={triggerRef}>\n {trigger}\n </div>\n\n <TabTrap\n focusNextCallback={() => dropdownRef.current && getFirstFocusable(dropdownRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n\n <DropdownContainer\n triggerRef={triggerRef}\n renderWithPortal={expandToViewport && !interior}\n id={dropdownId}\n referrerId={referrerId}\n open={open}\n >\n <Transition in={open ?? false} exit={false}>\n {(state, ref) => (\n <div ref={dropdownContainerRef}>\n <TabTrap\n focusNextCallback={() => triggerRef.current && getLastFocusable(triggerRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n\n <TransitionContent\n state={state}\n transitionRef={ref}\n dropdownClasses={dropdownClasses}\n open={open}\n stretchWidth={stretchWidth}\n interior={interior}\n header={header}\n content={content}\n expandToViewport={expandToViewport}\n stretchBeyondTriggerWidth={stretchBeyondTriggerWidth}\n footer={footer}\n onMouseDown={onMouseDown}\n isRefresh={isRefresh}\n dropdownRef={dropdownRef}\n verticalContainerRef={verticalContainerRef}\n position={position}\n id={dropdownContentId}\n role={dropdownContentRole}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n />\n\n <TabTrap\n focusNextCallback={() => triggerRef.current && getFirstFocusable(triggerRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n </div>\n )}\n </Transition>\n </DropdownContainer>\n </div>\n );\n};\n\nconst isInteriorPosition = (\n position: DropdownPosition | InteriorDropdownPosition\n): position is InteriorDropdownPosition => (position as InteriorDropdownPosition).insetBlockEnd !== undefined;\n\nexport default Dropdown;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/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, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport customCssProps from '../../generated/custom-css-properties';\nimport { useMobile } from '../../hooks/use-mobile';\nimport { usePortalModeClasses } from '../../hooks/use-portal-mode-classes';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';\nimport TabTrap from '../tab-trap/index.js';\nimport { Transition, TransitionStatus } from '../transition';\nimport { DropdownContextProvider, DropdownContextProviderProps } from './context';\nimport {\n calculatePosition,\n DropdownPosition,\n hasEnoughSpaceForFlexibleWidth,\n InteriorDropdownPosition,\n} from './dropdown-fit-handler';\nimport { applyDropdownPositionRelativeToViewport, LogicalDOMRect } from './dropdown-position';\nimport { DropdownProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface DropdownContainerProps {\n triggerRef: React.RefObject<HTMLElement>;\n children?: React.ReactNode;\n renderWithPortal: boolean;\n id?: string;\n referrerId?: string;\n open?: boolean;\n}\n\nconst DropdownContainer = ({\n triggerRef,\n children,\n renderWithPortal,\n id,\n referrerId,\n open,\n}: DropdownContainerProps) => {\n if (!renderWithPortal) {\n return <>{children}</>;\n }\n if (!open) {\n return null;\n }\n const currentDocument = triggerRef.current?.ownerDocument ?? document;\n return createPortal(\n <div id={id} data-awsui-referrer-id={referrerId}>\n {children}\n </div>,\n currentDocument.body\n );\n};\n\ninterface TransitionContentProps {\n state: TransitionStatus;\n transitionRef: React.MutableRefObject<any>;\n dropdownClasses: string;\n matchTriggerWidth: boolean;\n hideBlockBorder: boolean;\n interior: boolean;\n isRefresh: boolean;\n dropdownRef: React.RefObject<HTMLDivElement>;\n verticalContainerRef: React.RefObject<HTMLDivElement>;\n expandToViewport?: boolean;\n minWidth?: string;\n maxWidth?: string;\n header?: React.ReactNode;\n content?: React.ReactNode;\n footer?: React.ReactNode;\n position?: DropdownContextProviderProps['position'];\n open?: boolean;\n onMouseDown?: React.MouseEventHandler<Element>;\n id?: string;\n role?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\n\nconst TransitionContent = ({\n state,\n transitionRef,\n dropdownClasses,\n matchTriggerWidth,\n hideBlockBorder,\n interior,\n isRefresh,\n dropdownRef,\n verticalContainerRef,\n expandToViewport,\n minWidth,\n maxWidth,\n header,\n content,\n footer,\n position,\n open,\n onMouseDown,\n id,\n role,\n ariaLabelledby,\n ariaDescribedby,\n}: TransitionContentProps) => {\n const contentRef = useMergeRefs(dropdownRef, transitionRef);\n const dropdownStyles: Record<string, string> = {};\n if (minWidth) {\n dropdownStyles[customCssProps.dropdownDefaultMinWidth] = minWidth;\n }\n if (maxWidth) {\n dropdownStyles[customCssProps.dropdownDefaultMaxWidth] = maxWidth;\n }\n return (\n <div\n className={clsx(styles.dropdown, dropdownClasses, {\n [styles.open]: open,\n [styles['with-limited-width']]: !matchTriggerWidth,\n [styles['hide-block-border']]: hideBlockBorder,\n [styles.interior]: interior,\n [styles.refresh]: isRefresh,\n [styles['use-portal']]: expandToViewport && !interior,\n [styles['use-flexible-width']]: !matchTriggerWidth && !interior,\n })}\n ref={contentRef}\n id={id}\n role={role}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n data-open={open}\n data-animating={state !== 'exited'}\n aria-hidden={!open}\n style={dropdownStyles}\n onMouseDown={onMouseDown}\n >\n <div\n className={clsx(\n styles['dropdown-content-wrapper'],\n !header && !content && styles['is-empty'],\n isRefresh && styles.refresh\n )}\n >\n <div ref={verticalContainerRef} className={styles['dropdown-content']}>\n <DropdownContextProvider position={position}>\n {header}\n {content}\n {footer}\n </DropdownContextProvider>\n </div>\n </div>\n </div>\n );\n};\n\nconst Dropdown = ({\n content,\n trigger,\n open,\n onDropdownClose,\n onMouseDown,\n header,\n footer,\n dropdownId,\n stretchTriggerHeight = false,\n stretchHeight = false,\n minWidth,\n maxWidth,\n hideBlockBorder = true,\n expandToViewport = false,\n preferCenter = false,\n interior = false,\n scrollable = true,\n loopFocus = expandToViewport,\n onFocus,\n onBlur,\n contentKey,\n dropdownContentId,\n dropdownContentRole,\n ariaLabelledby,\n ariaDescribedby,\n}: DropdownProps) => {\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLDivElement | null>(null);\n const dropdownRef = useRef<HTMLDivElement | null>(null);\n const dropdownContainerRef = useRef<HTMLDivElement | null>(null);\n const verticalContainerRef = useRef<HTMLDivElement>(null);\n // To keep track of the initial position (drop up/down) which is kept the same during fixed repositioning\n const fixedPosition = useRef<DropdownPosition | null>(null);\n\n const isRefresh = useVisualRefresh();\n\n const dropdownClasses = usePortalModeClasses(triggerRef);\n const [position, setPosition] = useState<DropdownContextProviderProps['position']>('bottom-right');\n\n const isMobile = useMobile();\n\n // Derive if dropdown should match trigger width exactly\n // This happens when both minWidth and maxWidth are explicitly set to 'trigger'\n const matchTriggerWidth = minWidth === 'trigger' && maxWidth === 'trigger';\n\n const setDropdownPosition = (\n position: DropdownPosition | InteriorDropdownPosition,\n triggerBox: LogicalDOMRect,\n target: HTMLDivElement,\n verticalContainer: HTMLDivElement\n ) => {\n verticalContainer.style.maxBlockSize = position.blockSize;\n\n // Only apply occupy-entire-width when matching trigger width exactly and not in portal mode\n if (!interior && matchTriggerWidth && !expandToViewport) {\n target.classList.add(styles['occupy-entire-width']);\n } else {\n target.style.inlineSize = position.inlineSize;\n }\n\n // Using styles for main dropdown to adjust its position as preferred alternative\n if (position.dropBlockStart && !interior) {\n target.classList.add(styles['dropdown-drop-up']);\n if (!expandToViewport) {\n target.style.insetBlockEnd = '100%';\n }\n } else {\n target.classList.remove(styles['dropdown-drop-up']);\n }\n target.classList.add(position.dropInlineStart ? styles['dropdown-drop-left'] : styles['dropdown-drop-right']);\n\n if (position.insetInlineStart && position.insetInlineStart !== 'auto') {\n target.style.insetInlineStart = position.insetInlineStart;\n }\n\n // Position normal overflow dropdowns with fixed positioning relative to viewport\n if (expandToViewport && !interior) {\n applyDropdownPositionRelativeToViewport({\n position,\n dropdownElement: target,\n triggerRect: triggerBox,\n isMobile,\n });\n // Keep track of the initial dropdown position and direction.\n // Dropdown direction doesn't need to change as the user scrolls, just needs to stay attached to the trigger.\n fixedPosition.current = position;\n return;\n }\n\n // For an interior dropdown (the fly out) we need exact values for positioning\n // and classes are not enough\n // usage of relative position is impossible due to overwrite of overflow-x\n if (interior && isInteriorPosition(position)) {\n if (position.dropBlockStart) {\n target.style.insetBlockEnd = position.insetBlockEnd;\n } else {\n target.style.insetBlockStart = position.insetBlockStart;\n }\n target.style.insetInlineStart = position.insetInlineStart;\n }\n\n if (position.dropBlockStart && position.dropInlineStart) {\n setPosition('top-left');\n } else if (position.dropBlockStart) {\n setPosition('top-right');\n } else if (position.dropInlineStart) {\n setPosition('bottom-left');\n } else {\n setPosition('bottom-right');\n }\n };\n\n const isOutsideDropdown = (element: Element) =>\n (!wrapperRef.current || !nodeBelongs(wrapperRef.current, element)) &&\n (!dropdownContainerRef.current || !nodeBelongs(dropdownContainerRef.current, element));\n\n const focusHandler = (event: React.FocusEvent) => {\n if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n fireNonCancelableEvent(onFocus, event);\n }\n };\n\n const blurHandler = (event: React.FocusEvent) => {\n if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n fireNonCancelableEvent(onBlur, event);\n }\n };\n\n // Check if the dropdown has enough space to fit with its desired width constraints\n // If not, remove the class that allows flexible width sizing\n const fixStretching = () => {\n const classNameToRemove = styles['use-flexible-width'];\n if (\n open &&\n dropdownRef.current &&\n triggerRef.current &&\n dropdownRef.current.classList.contains(classNameToRemove) &&\n !hasEnoughSpaceForFlexibleWidth({\n triggerElement: triggerRef.current,\n dropdownElement: dropdownRef.current,\n minWidthConstraint: minWidth,\n maxWidthConstraint: maxWidth,\n expandToViewport,\n stretchHeight,\n isMobile,\n })\n ) {\n dropdownRef.current.classList.remove(classNameToRemove);\n }\n };\n\n useResizeObserver(() => dropdownRef.current, fixStretching);\n\n useLayoutEffect(() => {\n const onDropdownOpen = () => {\n if (open && dropdownRef.current && triggerRef.current && verticalContainerRef.current) {\n if (scrollable) {\n dropdownRef.current.classList.add(styles.nowrap);\n }\n\n setDropdownPosition(\n ...calculatePosition(\n dropdownRef.current,\n triggerRef.current,\n verticalContainerRef.current,\n interior,\n expandToViewport,\n preferCenter,\n matchTriggerWidth,\n stretchHeight,\n isMobile,\n minWidth,\n maxWidth\n ),\n dropdownRef.current,\n verticalContainerRef.current\n );\n\n if (scrollable) {\n dropdownRef.current.classList.remove(styles.nowrap);\n }\n }\n };\n onDropdownOpen();\n\n if (open) {\n // window may scroll when dropdown opens, for example when soft keyboard shows up\n window.addEventListener('scroll', onDropdownOpen);\n // only listen to window scroll within very short time after the dropdown opens\n // do not want to interfere dropdown position on scroll afterwards\n const timeoutId = setTimeout(() => {\n window.removeEventListener('scroll', onDropdownOpen);\n }, 500);\n\n return () => {\n clearTimeout(timeoutId);\n window.removeEventListener('scroll', onDropdownOpen);\n };\n }\n // See AWSUI-13040\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, dropdownRef, triggerRef, verticalContainerRef, interior, matchTriggerWidth, isMobile, contentKey]);\n\n // subscribe to outside click\n useEffect(() => {\n if (!open) {\n return;\n }\n const clickListener = (event: MouseEvent) => {\n // Since the listener is registered on the window, `event.target` will incorrectly point at the\n // shadow root if the component is rendered inside shadow DOM.\n const target = event.composedPath ? event.composedPath()[0] : event.target;\n if (!nodeBelongs(dropdownRef.current, target) && !nodeBelongs(triggerRef.current, target)) {\n fireNonCancelableEvent(onDropdownClose);\n }\n };\n window.addEventListener('click', clickListener, true);\n\n return () => {\n window.removeEventListener('click', clickListener, true);\n };\n }, [open, onDropdownClose]);\n\n // sync dropdown position on scroll and resize\n useLayoutEffect(() => {\n if (!expandToViewport || !open) {\n return;\n }\n const updateDropdownPosition = () => {\n if (triggerRef.current && dropdownRef.current && verticalContainerRef.current && fixedPosition.current) {\n applyDropdownPositionRelativeToViewport({\n position: fixedPosition.current,\n dropdownElement: dropdownRef.current,\n triggerRect: getLogicalBoundingClientRect(triggerRef.current),\n isMobile,\n });\n }\n };\n\n updateDropdownPosition();\n\n const controller = new AbortController();\n window.addEventListener('scroll', updateDropdownPosition, { capture: true, signal: controller.signal });\n window.addEventListener('resize', updateDropdownPosition, { capture: true, signal: controller.signal });\n return () => {\n controller.abort();\n };\n }, [open, expandToViewport, isMobile]);\n\n const referrerId = useUniqueId();\n\n // Compute CSS variable values for min/max width\n // These will be used by the use-flexible-width CSS class\n const getMinWidthCssValue = (): string | undefined => {\n if (minWidth === undefined) {\n return undefined;\n }\n if (typeof minWidth === 'number') {\n return `${minWidth}px`;\n }\n // 'trigger' maps to 100% (relative to parent)\n return '100%';\n };\n\n const getMaxWidthCssValue = (): string | undefined => {\n if (maxWidth === undefined) {\n return 'none';\n }\n if (typeof maxWidth === 'number') {\n return `${maxWidth}px`;\n }\n // 'trigger' maps to 100% (relative to parent)\n return '100%';\n };\n\n return (\n <div\n className={clsx(\n styles.root,\n interior && styles.interior,\n stretchTriggerHeight && styles['stretch-trigger-height']\n )}\n ref={wrapperRef}\n onFocus={focusHandler}\n onBlur={blurHandler}\n >\n <div id={referrerId} className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'])} ref={triggerRef}>\n {trigger}\n </div>\n\n <TabTrap\n focusNextCallback={() => dropdownRef.current && getFirstFocusable(dropdownRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n\n <DropdownContainer\n triggerRef={triggerRef}\n renderWithPortal={expandToViewport && !interior}\n id={dropdownId}\n referrerId={referrerId}\n open={open}\n >\n <Transition in={open ?? false} exit={false}>\n {(state, ref) => (\n <div ref={dropdownContainerRef}>\n <TabTrap\n focusNextCallback={() => triggerRef.current && getLastFocusable(triggerRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n\n <TransitionContent\n state={state}\n transitionRef={ref}\n dropdownClasses={dropdownClasses}\n open={open}\n matchTriggerWidth={matchTriggerWidth}\n hideBlockBorder={hideBlockBorder}\n interior={interior}\n header={header}\n content={content}\n expandToViewport={expandToViewport}\n minWidth={getMinWidthCssValue()}\n maxWidth={getMaxWidthCssValue()}\n footer={footer}\n onMouseDown={onMouseDown}\n isRefresh={isRefresh}\n dropdownRef={dropdownRef}\n verticalContainerRef={verticalContainerRef}\n position={position}\n id={dropdownContentId}\n role={dropdownContentRole}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n />\n\n <TabTrap\n focusNextCallback={() => triggerRef.current && getFirstFocusable(triggerRef.current)?.focus()}\n disabled={!open || !loopFocus}\n />\n </div>\n )}\n </Transition>\n </DropdownContainer>\n </div>\n );\n};\n\nconst isInteriorPosition = (\n position: DropdownPosition | InteriorDropdownPosition\n): position is InteriorDropdownPosition => (position as InteriorDropdownPosition).insetBlockEnd !== undefined;\n\nexport default Dropdown;\n"]}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { NonCancelableEventHandler } from '../../events';
|
|
3
3
|
export type OptionsFilteringType = 'none' | 'auto' | 'manual';
|
|
4
|
+
/**
|
|
5
|
+
* Width constraint for the dropdown.
|
|
6
|
+
* - 'trigger': references the trigger element's width
|
|
7
|
+
* - number: width in pixels
|
|
8
|
+
*/
|
|
9
|
+
export type DropdownWidthConstraint = 'trigger' | number;
|
|
4
10
|
export interface OptionsLoadItemsDetail {
|
|
5
11
|
filteringText: string;
|
|
6
12
|
firstPage: boolean;
|
|
@@ -72,10 +78,6 @@ export interface DropdownProps extends ExpandToViewport {
|
|
|
72
78
|
* Dropdown id
|
|
73
79
|
*/
|
|
74
80
|
dropdownId?: string;
|
|
75
|
-
/**
|
|
76
|
-
* Stretches dropdown to occupy entire width.
|
|
77
|
-
*/
|
|
78
|
-
stretchWidth?: boolean;
|
|
79
81
|
/**
|
|
80
82
|
* Stretches dropdown to occupy entire height.
|
|
81
83
|
*/
|
|
@@ -85,28 +87,32 @@ export interface DropdownProps extends ExpandToViewport {
|
|
|
85
87
|
*/
|
|
86
88
|
stretchTriggerHeight?: boolean;
|
|
87
89
|
/**
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
90
|
+
* Minimum width constraint for the dropdown.
|
|
91
|
+
* - Number: minimum width in pixels
|
|
92
|
+
* - 'trigger': dropdown will be at least as wide as the trigger
|
|
93
|
+
* - undefined: no minimum constraint (fits content)
|
|
91
94
|
*/
|
|
92
|
-
|
|
95
|
+
minWidth?: DropdownWidthConstraint;
|
|
93
96
|
/**
|
|
94
|
-
*
|
|
97
|
+
* Maximum width constraint for the dropdown.
|
|
98
|
+
* - Number: maximum width in pixels
|
|
99
|
+
* - 'trigger': dropdown cannot exceed the trigger width
|
|
100
|
+
* - undefined: fit to content width (no max constraint)
|
|
95
101
|
*/
|
|
96
|
-
|
|
102
|
+
maxWidth?: DropdownWidthConstraint;
|
|
97
103
|
/**
|
|
98
104
|
* Determines that the dropdown should preferably be aligned to the center of the trigger
|
|
99
105
|
* instead of dropping left or right.
|
|
100
106
|
*/
|
|
101
107
|
preferCenter?: boolean;
|
|
102
108
|
/**
|
|
103
|
-
*
|
|
109
|
+
* Hides the block (top/bottom) borders of the dropdown content wrapper.
|
|
104
110
|
*/
|
|
105
|
-
|
|
111
|
+
hideBlockBorder?: boolean;
|
|
106
112
|
/**
|
|
107
|
-
*
|
|
113
|
+
* Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out).
|
|
108
114
|
*/
|
|
109
|
-
|
|
115
|
+
interior?: boolean;
|
|
110
116
|
/**
|
|
111
117
|
* Whether the dropdown will have a scrollbar or not
|
|
112
118
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9D;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,sBAAsB;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;;;;;;QAaI;IACJ,WAAW,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;CACjE;AAED,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAElD;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAEtC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IAEnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IAEnC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAExF;;OAEG;IACH,MAAM,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAEvF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { NonCancelableEventHandler } from '../../events';\n\nexport type OptionsFilteringType = 'none' | 'auto' | 'manual';\nexport interface OptionsLoadItemsDetail {\n filteringText: string;\n firstPage: boolean;\n samePage: boolean;\n}\n\nexport interface BaseDropdownHostProps extends ExpandToViewport {\n /**\n * If you have more than 500 options, enable this flag to apply a performance optimization\n * that makes the filtering experience smoother. We don't recommend enabling the feature if you\n * have less than 500 options, because the improvements to performance are offset by a\n * visible scrolling lag.\n *\n * When you set this flag to `true`, it removes options that are not currently in view from the DOM.\n * If your test accesses such options, you need to first scroll the options container\n * to the correct offset, before performing any operations on them. Use the element returned\n * by the `findOptionsContainer` test utility for this.\n */\n virtualScroll?: boolean;\n\n /**\n * Use this event to implement the asynchronous behavior for the component.\n *\n * The event is called in the following situations:\n * * The user scrolls to the end of the list of options, if `statusType` is set to `pending`.\n * * The user clicks on the recovery button in the error state.\n * * The user types inside the input field.\n * * The user focuses the input field.\n *\n * The detail object contains the following properties:\n * * `filteringText` - The value that you need to use to fetch options.\n * * `firstPage` - Indicates that you should fetch the first page of options that match the `filteringText`.\n * * `samePage` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).\n **/\n onLoadItems?: NonCancelableEventHandler<OptionsLoadItemsDetail>;\n}\n\nexport interface DropdownProps extends ExpandToViewport {\n /**\n * Trigger element.\n */\n trigger: React.ReactNode;\n /**\n * \"Sticky\" header of the dropdown content\n */\n header?: React.ReactNode;\n /**\n * Footer slot fixed at the bottom of the dropdown\n */\n footer?: React.ReactNode;\n /**\n * Dropdown content elements.\n */\n content?: React.ReactNode;\n /**\n * Updating content key triggers dropdown position re-evaluation.\n */\n contentKey?: string;\n /**\n * Open state of the dropdown.\n */\n open?: boolean;\n /**\n * Called when a user clicks outside of the dropdown content, when it is open.\n */\n onDropdownClose?: NonCancelableEventHandler<null>;\n /**\n * Called when a mouse button is pressed inside the dropdown content.\n */\n onMouseDown?: React.MouseEventHandler;\n /**\n * Dropdown id\n */\n dropdownId?: string;\n
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { NonCancelableEventHandler } from '../../events';\n\nexport type OptionsFilteringType = 'none' | 'auto' | 'manual';\n\n/**\n * Width constraint for the dropdown.\n * - 'trigger': references the trigger element's width\n * - number: width in pixels\n */\nexport type DropdownWidthConstraint = 'trigger' | number;\n\nexport interface OptionsLoadItemsDetail {\n filteringText: string;\n firstPage: boolean;\n samePage: boolean;\n}\n\nexport interface BaseDropdownHostProps extends ExpandToViewport {\n /**\n * If you have more than 500 options, enable this flag to apply a performance optimization\n * that makes the filtering experience smoother. We don't recommend enabling the feature if you\n * have less than 500 options, because the improvements to performance are offset by a\n * visible scrolling lag.\n *\n * When you set this flag to `true`, it removes options that are not currently in view from the DOM.\n * If your test accesses such options, you need to first scroll the options container\n * to the correct offset, before performing any operations on them. Use the element returned\n * by the `findOptionsContainer` test utility for this.\n */\n virtualScroll?: boolean;\n\n /**\n * Use this event to implement the asynchronous behavior for the component.\n *\n * The event is called in the following situations:\n * * The user scrolls to the end of the list of options, if `statusType` is set to `pending`.\n * * The user clicks on the recovery button in the error state.\n * * The user types inside the input field.\n * * The user focuses the input field.\n *\n * The detail object contains the following properties:\n * * `filteringText` - The value that you need to use to fetch options.\n * * `firstPage` - Indicates that you should fetch the first page of options that match the `filteringText`.\n * * `samePage` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).\n **/\n onLoadItems?: NonCancelableEventHandler<OptionsLoadItemsDetail>;\n}\n\nexport interface DropdownProps extends ExpandToViewport {\n /**\n * Trigger element.\n */\n trigger: React.ReactNode;\n\n /**\n * \"Sticky\" header of the dropdown content\n */\n header?: React.ReactNode;\n\n /**\n * Footer slot fixed at the bottom of the dropdown\n */\n footer?: React.ReactNode;\n\n /**\n * Dropdown content elements.\n */\n content?: React.ReactNode;\n\n /**\n * Updating content key triggers dropdown position re-evaluation.\n */\n contentKey?: string;\n\n /**\n * Open state of the dropdown.\n */\n open?: boolean;\n\n /**\n * Called when a user clicks outside of the dropdown content, when it is open.\n */\n onDropdownClose?: NonCancelableEventHandler<null>;\n\n /**\n * Called when a mouse button is pressed inside the dropdown content.\n */\n onMouseDown?: React.MouseEventHandler;\n\n /**\n * Dropdown id\n */\n dropdownId?: string;\n\n /**\n * Stretches dropdown to occupy entire height.\n */\n stretchHeight?: boolean;\n\n /**\n * Stretches the trigger to the height of the dropdown container.\n */\n stretchTriggerHeight?: boolean;\n\n /**\n * Minimum width constraint for the dropdown.\n * - Number: minimum width in pixels\n * - 'trigger': dropdown will be at least as wide as the trigger\n * - undefined: no minimum constraint (fits content)\n */\n minWidth?: DropdownWidthConstraint;\n\n /**\n * Maximum width constraint for the dropdown.\n * - Number: maximum width in pixels\n * - 'trigger': dropdown cannot exceed the trigger width\n * - undefined: fit to content width (no max constraint)\n */\n maxWidth?: DropdownWidthConstraint;\n\n /**\n * Determines that the dropdown should preferably be aligned to the center of the trigger\n * instead of dropping left or right.\n */\n preferCenter?: boolean;\n\n /**\n * Hides the block (top/bottom) borders of the dropdown content wrapper.\n */\n hideBlockBorder?: boolean;\n\n /**\n * Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out).\n */\n interior?: boolean;\n\n /**\n * Whether the dropdown will have a scrollbar or not\n */\n scrollable?: boolean;\n\n /**\n * Whether the dropdown will have a focus loop including trigger, header, content and footer.\n */\n loopFocus?: boolean;\n\n /**\n * Called when focus enters the trigger or dropdown content.\n */\n onFocus?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n\n /**\n * Called when focus leaves the trigger or dropdown content.\n */\n onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n\n /**\n * ID for the dropdown content wrapper\n */\n dropdownContentId?: string;\n\n /**\n * HTML role for the dropdown content wrapper\n */\n dropdownContentRole?: string;\n\n /**\n * Labelledby for the dropdown (required when role=\"dialog\")\n */\n ariaLabelledby?: string;\n\n /**\n * Describedby for the dropdown (recommended when role=\"dialog\")\n */\n ariaDescribedby?: string;\n}\n\nexport interface ExpandToViewport {\n /**\n * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n * [React Portals](https://reactjs.org/docs/portals.html).\n *\n * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n * for example inside table and split view layouts.\n *\n * We recommend you use discretion, and don't enable this property unless necessary\n * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n */\n expandToViewport?: boolean;\n}\n"]}
|