@channel.io/bezier-react 1.6.1 → 1.7.0
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/dist/cjs/components/Forms/Slider/Slider.js +73 -51
- package/dist/cjs/components/Forms/Slider/Slider.js.map +1 -1
- package/dist/cjs/components/Forms/Slider/Slider.styled.js +24 -83
- package/dist/cjs/components/Forms/Slider/Slider.styled.js.map +1 -1
- package/dist/cjs/components/Help/Help.js +10 -7
- package/dist/cjs/components/Help/Help.js.map +1 -1
- package/dist/cjs/components/Help/Help.styled.js +4 -5
- package/dist/cjs/components/Help/Help.styled.js.map +1 -1
- package/dist/cjs/components/KeyValueListItem/common/ItemActions/ItemAction.js +2 -9
- package/dist/cjs/components/KeyValueListItem/common/ItemActions/ItemAction.js.map +1 -1
- package/dist/cjs/components/KeyValueListItem/common/ItemActions/ItemAction.styled.js +3 -20
- package/dist/cjs/components/KeyValueListItem/common/ItemActions/ItemAction.styled.js.map +1 -1
- package/dist/cjs/components/LegacyTooltip/LegacyTooltip.js +101 -0
- package/dist/cjs/components/LegacyTooltip/LegacyTooltip.js.map +1 -0
- package/dist/cjs/components/LegacyTooltip/LegacyTooltip.styled.js +41 -0
- package/dist/cjs/components/LegacyTooltip/LegacyTooltip.styled.js.map +1 -0
- package/dist/cjs/components/LegacyTooltip/LegacyTooltip.types.js +20 -0
- package/dist/cjs/components/LegacyTooltip/LegacyTooltip.types.js.map +1 -0
- package/dist/cjs/components/{Tooltip/TooltipContent.js → LegacyTooltip/LegacyTooltipContent.js} +9 -12
- package/dist/cjs/components/LegacyTooltip/LegacyTooltipContent.js.map +1 -0
- package/dist/cjs/components/{Tooltip → LegacyTooltip}/utils.js +33 -33
- package/dist/cjs/components/LegacyTooltip/utils.js.map +1 -0
- package/dist/cjs/components/ListItem/ListItem.styled.js +1 -1
- package/dist/cjs/components/ListMenuTitle/ListMenuTitle.js +11 -10
- package/dist/cjs/components/ListMenuTitle/ListMenuTitle.js.map +1 -1
- package/dist/cjs/components/Modals/Modal/Modal.types.js.map +1 -1
- package/dist/cjs/components/Navigator/NavGroup/NavGroup.js +10 -11
- package/dist/cjs/components/Navigator/NavGroup/NavGroup.js.map +1 -1
- package/dist/cjs/components/Navigator/NavItem/NavItem.js +10 -10
- package/dist/cjs/components/Navigator/NavItem/NavItem.js.map +1 -1
- package/dist/cjs/components/SectionLabel/SectionLabel.js +10 -17
- package/dist/cjs/components/SectionLabel/SectionLabel.js.map +1 -1
- package/dist/cjs/components/SectionLabel/SectionLabel.styled.js +4 -4
- package/dist/cjs/components/SectionLabel/SectionLabel.styled.js.map +1 -1
- package/dist/cjs/components/Spinner/Spinner.js +10 -7
- package/dist/cjs/components/Spinner/Spinner.js.map +1 -1
- package/dist/cjs/components/Spinner/Spinner.styled.js +1 -1
- package/dist/cjs/components/Spinner/Spinner.types.js.map +1 -1
- package/dist/cjs/components/Stack/Stack/Stack.styled.js +1 -1
- package/dist/cjs/components/Status/Status.styled.js +1 -1
- package/dist/cjs/components/TagBadge/Badge/Badge.js +9 -8
- package/dist/cjs/components/TagBadge/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/TagBadge/Tag/Tag.js +4 -3
- package/dist/cjs/components/TagBadge/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/Text/Text.styled.js +1 -1
- package/dist/cjs/components/Toast/Toast.types.js +2 -1
- package/dist/cjs/components/Toast/Toast.types.js.map +1 -1
- package/dist/cjs/components/Toast/ToastElement.js +5 -6
- package/dist/cjs/components/Toast/ToastElement.js.map +1 -1
- package/dist/cjs/components/Toast/ToastProvider.js +2 -2
- package/dist/cjs/components/Toast/ToastProvider.js.map +1 -1
- package/dist/cjs/components/Toast/utils.js +6 -5
- package/dist/cjs/components/Toast/utils.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +211 -83
- package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.styled.js +96 -25
- package/dist/cjs/components/Tooltip/Tooltip.styled.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.types.js +3 -0
- package/dist/cjs/components/Tooltip/Tooltip.types.js.map +1 -1
- package/dist/cjs/foundation/FoundationStyledComponent.js +16 -1
- package/dist/cjs/foundation/FoundationStyledComponent.js.map +1 -1
- package/dist/cjs/index.js +15 -10
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/node_modules/@floating-ui/core/dist/floating-ui.core.js +886 -0
- package/dist/cjs/node_modules/@floating-ui/core/dist/floating-ui.core.js.map +1 -0
- package/dist/cjs/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +691 -0
- package/dist/cjs/node_modules/@floating-ui/dom/dist/floating-ui.dom.js.map +1 -0
- package/dist/cjs/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.js +296 -0
- package/dist/cjs/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.js.map +1 -0
- package/dist/cjs/node_modules/@radix-ui/react-popper/dist/index.js +265 -0
- package/dist/cjs/node_modules/@radix-ui/react-popper/dist/index.js.map +1 -0
- package/dist/cjs/node_modules/@radix-ui/react-slider/dist/index.js +21 -21
- package/dist/cjs/node_modules/@radix-ui/react-tooltip/dist/index.js +521 -0
- package/dist/cjs/node_modules/@radix-ui/react-tooltip/dist/index.js.map +1 -0
- package/dist/cjs/providers/BezierProvider.js +3 -2
- package/dist/cjs/providers/BezierProvider.js.map +1 -1
- package/dist/esm/components/Forms/Slider/Slider.mjs +76 -53
- package/dist/esm/components/Forms/Slider/Slider.mjs.map +1 -1
- package/dist/esm/components/Forms/Slider/Slider.styled.mjs +22 -82
- package/dist/esm/components/Forms/Slider/Slider.styled.mjs.map +1 -1
- package/dist/esm/components/Help/Help.mjs +11 -8
- package/dist/esm/components/Help/Help.mjs.map +1 -1
- package/dist/esm/components/Help/Help.styled.mjs +4 -5
- package/dist/esm/components/Help/Help.styled.mjs.map +1 -1
- package/dist/esm/components/KeyValueListItem/common/ItemActions/ItemAction.mjs +3 -10
- package/dist/esm/components/KeyValueListItem/common/ItemActions/ItemAction.mjs.map +1 -1
- package/dist/esm/components/KeyValueListItem/common/ItemActions/ItemAction.styled.mjs +4 -19
- package/dist/esm/components/KeyValueListItem/common/ItemActions/ItemAction.styled.mjs.map +1 -1
- package/dist/esm/components/LegacyTooltip/LegacyTooltip.mjs +97 -0
- package/dist/esm/components/LegacyTooltip/LegacyTooltip.mjs.map +1 -0
- package/dist/esm/components/LegacyTooltip/LegacyTooltip.styled.mjs +36 -0
- package/dist/esm/components/LegacyTooltip/LegacyTooltip.styled.mjs.map +1 -0
- package/dist/esm/components/LegacyTooltip/LegacyTooltip.types.mjs +18 -0
- package/dist/esm/components/LegacyTooltip/LegacyTooltip.types.mjs.map +1 -0
- package/dist/esm/components/{Tooltip/TooltipContent.mjs → LegacyTooltip/LegacyTooltipContent.mjs} +8 -9
- package/dist/esm/components/LegacyTooltip/LegacyTooltipContent.mjs.map +1 -0
- package/dist/esm/components/{Tooltip → LegacyTooltip}/utils.mjs +33 -33
- package/dist/esm/components/LegacyTooltip/utils.mjs.map +1 -0
- package/dist/esm/components/ListItem/ListItem.styled.mjs +1 -1
- package/dist/esm/components/ListMenuTitle/ListMenuTitle.mjs +12 -11
- package/dist/esm/components/ListMenuTitle/ListMenuTitle.mjs.map +1 -1
- package/dist/esm/components/Modals/Modal/Modal.types.mjs.map +1 -1
- package/dist/esm/components/Navigator/NavGroup/NavGroup.mjs +11 -12
- package/dist/esm/components/Navigator/NavGroup/NavGroup.mjs.map +1 -1
- package/dist/esm/components/Navigator/NavItem/NavItem.mjs +11 -11
- package/dist/esm/components/Navigator/NavItem/NavItem.mjs.map +1 -1
- package/dist/esm/components/Overlay/Overlay.mjs +2 -2
- package/dist/esm/components/Overlay/Overlay.mjs.map +1 -1
- package/dist/esm/components/SectionLabel/SectionLabel.mjs +11 -17
- package/dist/esm/components/SectionLabel/SectionLabel.mjs.map +1 -1
- package/dist/esm/components/SectionLabel/SectionLabel.styled.mjs +4 -4
- package/dist/esm/components/SectionLabel/SectionLabel.styled.mjs.map +1 -1
- package/dist/esm/components/Spinner/Spinner.mjs +11 -8
- package/dist/esm/components/Spinner/Spinner.mjs.map +1 -1
- package/dist/esm/components/Spinner/Spinner.styled.mjs +1 -1
- package/dist/esm/components/Spinner/Spinner.types.mjs.map +1 -1
- package/dist/esm/components/Stack/Stack/Stack.styled.mjs +1 -1
- package/dist/esm/components/Status/Status.styled.mjs +1 -1
- package/dist/esm/components/TagBadge/Badge/Badge.mjs +10 -9
- package/dist/esm/components/TagBadge/Badge/Badge.mjs.map +1 -1
- package/dist/esm/components/TagBadge/Tag/Tag.mjs +5 -4
- package/dist/esm/components/TagBadge/Tag/Tag.mjs.map +1 -1
- package/dist/esm/components/Text/Text.styled.mjs +1 -1
- package/dist/esm/components/Toast/Toast.types.mjs +2 -1
- package/dist/esm/components/Toast/Toast.types.mjs.map +1 -1
- package/dist/esm/components/Toast/ToastElement.mjs +5 -6
- package/dist/esm/components/Toast/ToastElement.mjs.map +1 -1
- package/dist/esm/components/Toast/ToastProvider.mjs +2 -2
- package/dist/esm/components/Toast/ToastProvider.mjs.map +1 -1
- package/dist/esm/components/Toast/utils.mjs +6 -5
- package/dist/esm/components/Toast/utils.mjs.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.mjs +213 -82
- package/dist/esm/components/Tooltip/Tooltip.mjs.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.styled.mjs +93 -23
- package/dist/esm/components/Tooltip/Tooltip.styled.mjs.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.types.mjs +3 -0
- package/dist/esm/components/Tooltip/Tooltip.types.mjs.map +1 -1
- package/dist/esm/foundation/FoundationStyledComponent.mjs +16 -1
- package/dist/esm/foundation/FoundationStyledComponent.mjs.map +1 -1
- package/dist/esm/index.mjs +7 -5
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/node_modules/@floating-ui/core/dist/floating-ui.core.mjs +875 -0
- package/dist/esm/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.map +1 -0
- package/dist/esm/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs +679 -0
- package/dist/esm/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.map +1 -0
- package/dist/esm/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.mjs +265 -0
- package/dist/esm/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.mjs.map +1 -0
- package/dist/esm/node_modules/@radix-ui/react-popper/dist/index.mjs +257 -0
- package/dist/esm/node_modules/@radix-ui/react-popper/dist/index.mjs.map +1 -0
- package/dist/esm/node_modules/@radix-ui/react-portal/dist/index.mjs +2 -2
- package/dist/esm/node_modules/@radix-ui/react-slider/dist/index.mjs +1 -1
- package/dist/esm/node_modules/@radix-ui/react-tooltip/dist/index.mjs +509 -0
- package/dist/esm/node_modules/@radix-ui/react-tooltip/dist/index.mjs.map +1 -0
- package/dist/esm/providers/BezierProvider.mjs +3 -2
- package/dist/esm/providers/BezierProvider.mjs.map +1 -1
- package/dist/types/components/Forms/Slider/Slider.d.ts +18 -2
- package/dist/types/components/Forms/Slider/Slider.d.ts.map +1 -1
- package/dist/types/components/Forms/Slider/Slider.styled.d.ts +14 -24
- package/dist/types/components/Forms/Slider/Slider.styled.d.ts.map +1 -1
- package/dist/types/components/Forms/Slider/Slider.types.d.ts +52 -13
- package/dist/types/components/Forms/Slider/Slider.types.d.ts.map +1 -1
- package/dist/types/components/Help/Help.d.ts +1 -4
- package/dist/types/components/Help/Help.d.ts.map +1 -1
- package/dist/types/components/Help/Help.styled.d.ts +1 -1
- package/dist/types/components/Help/Help.styled.d.ts.map +1 -1
- package/dist/types/components/Help/Help.types.d.ts +1 -1
- package/dist/types/components/Help/Help.types.d.ts.map +1 -1
- package/dist/types/components/KeyValueListItem/common/ItemActions/ItemAction.d.ts.map +1 -1
- package/dist/types/components/KeyValueListItem/common/ItemActions/ItemAction.styled.d.ts +1 -7
- package/dist/types/components/KeyValueListItem/common/ItemActions/ItemAction.styled.d.ts.map +1 -1
- package/dist/types/components/KeyValueListItem/common/ItemActions/ItemAction.types.d.ts +3 -3
- package/dist/types/components/KeyValueListItem/common/ItemActions/ItemAction.types.d.ts.map +1 -1
- package/dist/types/components/KeyValueListItem/common/KeyItem/KeyItem.types.d.ts +2 -2
- package/dist/types/components/KeyValueListItem/common/KeyItem/KeyItem.types.d.ts.map +1 -1
- package/dist/types/components/LegacyTooltip/LegacyTooltip.d.ts +6 -0
- package/dist/types/components/LegacyTooltip/LegacyTooltip.d.ts.map +1 -0
- package/dist/types/components/LegacyTooltip/LegacyTooltip.styled.d.ts +18 -0
- package/dist/types/components/LegacyTooltip/LegacyTooltip.styled.d.ts.map +1 -0
- package/dist/types/components/LegacyTooltip/LegacyTooltip.types.d.ts +40 -0
- package/dist/types/components/LegacyTooltip/LegacyTooltip.types.d.ts.map +1 -0
- package/dist/types/components/LegacyTooltip/LegacyTooltipContent.d.ts +4 -0
- package/dist/types/components/LegacyTooltip/LegacyTooltipContent.d.ts.map +1 -0
- package/dist/types/components/LegacyTooltip/index.d.ts +4 -0
- package/dist/types/components/LegacyTooltip/index.d.ts.map +1 -0
- package/dist/types/components/{Tooltip → LegacyTooltip}/utils.d.ts +2 -2
- package/dist/types/components/LegacyTooltip/utils.d.ts.map +1 -0
- package/dist/types/components/ListMenuTitle/ListMenuTitle.d.ts +1 -1
- package/dist/types/components/ListMenuTitle/ListMenuTitle.d.ts.map +1 -1
- package/dist/types/components/ListMenuTitle/ListMenuTitle.types.d.ts +1 -2
- package/dist/types/components/ListMenuTitle/ListMenuTitle.types.d.ts.map +1 -1
- package/dist/types/components/Modals/Modal/Modal.types.d.ts +2 -2
- package/dist/types/components/Modals/Modal/Modal.types.d.ts.map +1 -1
- package/dist/types/components/Navigator/NavGroup/NavGroup.d.ts +1 -2
- package/dist/types/components/Navigator/NavGroup/NavGroup.d.ts.map +1 -1
- package/dist/types/components/Navigator/NavGroup/NavGroup.types.d.ts +3 -3
- package/dist/types/components/Navigator/NavGroup/NavGroup.types.d.ts.map +1 -1
- package/dist/types/components/Navigator/NavItem/NavItem.d.ts +1 -2
- package/dist/types/components/Navigator/NavItem/NavItem.d.ts.map +1 -1
- package/dist/types/components/Navigator/NavItem/NavItem.types.d.ts +3 -3
- package/dist/types/components/Navigator/NavItem/NavItem.types.d.ts.map +1 -1
- package/dist/types/components/SectionLabel/SectionLabel.d.ts +1 -2
- package/dist/types/components/SectionLabel/SectionLabel.d.ts.map +1 -1
- package/dist/types/components/SectionLabel/SectionLabel.styled.d.ts +1 -1
- package/dist/types/components/SectionLabel/SectionLabel.styled.d.ts.map +1 -1
- package/dist/types/components/SectionLabel/SectionLabel.types.d.ts +2 -7
- package/dist/types/components/SectionLabel/SectionLabel.types.d.ts.map +1 -1
- package/dist/types/components/Spinner/Spinner.d.ts +1 -1
- package/dist/types/components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/types/components/Spinner/Spinner.types.d.ts +2 -1
- package/dist/types/components/Spinner/Spinner.types.d.ts.map +1 -1
- package/dist/types/components/TagBadge/Badge/Badge.d.ts +1 -1
- package/dist/types/components/TagBadge/Badge/Badge.d.ts.map +1 -1
- package/dist/types/components/TagBadge/Badge/Badge.types.d.ts +2 -2
- package/dist/types/components/TagBadge/Badge/Badge.types.d.ts.map +1 -1
- package/dist/types/components/TagBadge/Tag/Tag.d.ts +1 -1
- package/dist/types/components/TagBadge/Tag/Tag.d.ts.map +1 -1
- package/dist/types/components/Toast/Toast.types.d.ts +4 -4
- package/dist/types/components/Toast/Toast.types.d.ts.map +1 -1
- package/dist/types/components/Toast/ToastElement.d.ts.map +1 -1
- package/dist/types/components/Toast/utils.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts +31 -5
- package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.styled.d.ts +22 -12
- package/dist/types/components/Tooltip/Tooltip.styled.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.types.d.ts +105 -24
- package/dist/types/components/Tooltip/Tooltip.types.d.ts.map +1 -1
- package/dist/types/components/Tooltip/index.d.ts +3 -5
- package/dist/types/components/Tooltip/index.d.ts.map +1 -1
- package/dist/types/components/VisuallyHidden/VisuallyHidden.types.d.ts +2 -1
- package/dist/types/components/VisuallyHidden/VisuallyHidden.types.d.ts.map +1 -1
- package/dist/types/foundation/FoundationStyledComponent.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/providers/BezierProvider.d.ts.map +1 -1
- package/package.json +3 -2
- package/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +17 -17
- package/src/components/Button/__snapshots__/Button.test.tsx.snap +15 -15
- package/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap +119 -119
- package/src/components/Forms/Slider/Slider.stories.tsx +10 -63
- package/src/components/Forms/Slider/Slider.styled.ts +46 -95
- package/src/components/Forms/Slider/Slider.test.tsx +130 -97
- package/src/components/Forms/Slider/Slider.tsx +117 -96
- package/src/components/Forms/Slider/Slider.types.ts +55 -17
- package/src/components/Forms/Slider/__snapshots__/Slider.test.tsx.snap +156 -0
- package/src/components/Help/Help.styled.ts +4 -7
- package/src/components/Help/Help.tsx +19 -12
- package/src/components/Help/Help.types.ts +1 -1
- package/src/components/KeyValueListItem/KeyValueListItem.test.tsx +10 -6
- package/src/components/KeyValueListItem/__snapshots__/KeyValueListItem.test.tsx.snap +13 -13
- package/src/components/KeyValueListItem/common/ItemActions/ItemAction.styled.ts +5 -15
- package/src/components/KeyValueListItem/common/ItemActions/ItemAction.tsx +6 -13
- package/src/components/KeyValueListItem/common/ItemActions/ItemAction.types.ts +3 -6
- package/src/components/KeyValueListItem/common/KeyItem/KeyItem.types.ts +2 -5
- package/src/components/LegacyTooltip/LegacyTooltip.stories.tsx +105 -0
- package/src/components/LegacyTooltip/LegacyTooltip.styled.ts +46 -0
- package/src/components/LegacyTooltip/LegacyTooltip.test.tsx +100 -0
- package/src/components/LegacyTooltip/LegacyTooltip.tsx +152 -0
- package/src/components/LegacyTooltip/LegacyTooltip.types.ts +69 -0
- package/src/components/{Tooltip/TooltipContent.test.tsx → LegacyTooltip/LegacyTooltipContent.test.tsx} +9 -8
- package/src/components/{Tooltip/TooltipContent.tsx → LegacyTooltip/LegacyTooltipContent.tsx} +6 -7
- package/src/components/LegacyTooltip/index.ts +5 -0
- package/src/components/{Tooltip → LegacyTooltip}/utils.ts +35 -35
- package/src/components/ListMenuTitle/ListMenuTitle.tsx +10 -6
- package/src/components/ListMenuTitle/ListMenuTitle.types.ts +1 -1
- package/src/components/Modals/Modal/Modal.types.ts +2 -2
- package/src/components/Navigator/NavGroup/NavGroup.stories.tsx +5 -2
- package/src/components/Navigator/NavGroup/NavGroup.test.tsx +1 -1
- package/src/components/Navigator/NavGroup/NavGroup.tsx +13 -16
- package/src/components/Navigator/NavGroup/NavGroup.types.ts +3 -2
- package/src/components/Navigator/NavItem/NavItem.test.tsx +3 -1
- package/src/components/Navigator/NavItem/NavItem.tsx +13 -12
- package/src/components/Navigator/NavItem/NavItem.types.ts +3 -2
- package/src/components/SectionLabel/SectionLabel.stories.tsx +1 -1
- package/src/components/SectionLabel/SectionLabel.styled.ts +2 -4
- package/src/components/SectionLabel/SectionLabel.test.tsx +5 -25
- package/src/components/SectionLabel/SectionLabel.tsx +11 -17
- package/src/components/SectionLabel/SectionLabel.types.ts +2 -8
- package/src/components/Spinner/Spinner.tsx +7 -4
- package/src/components/Spinner/Spinner.types.ts +2 -1
- package/src/components/TagBadge/Badge/Badge.stories.tsx +2 -1
- package/src/components/TagBadge/Badge/Badge.tsx +15 -10
- package/src/components/TagBadge/Badge/Badge.types.ts +2 -2
- package/src/components/TagBadge/Tag/Tag.tsx +9 -4
- package/src/components/TagBadge/TagBadge.mdx +1 -1
- package/src/components/TagBadge/TagBadge.stories.tsx +48 -33
- package/src/components/Toast/Toast.stories.tsx +9 -8
- package/src/components/Toast/Toast.types.ts +8 -5
- package/src/components/Toast/ToastElement.tsx +4 -5
- package/src/components/Toast/ToastProvider.tsx +2 -2
- package/src/components/Toast/ToastService.test.ts +3 -1
- package/src/components/Toast/useToastContextValues.test.tsx +5 -4
- package/src/components/Toast/utils.ts +13 -5
- package/src/components/Tooltip/Tooltip.stories.tsx +28 -67
- package/src/components/Tooltip/Tooltip.styled.ts +109 -19
- package/src/components/Tooltip/Tooltip.test.tsx +136 -63
- package/src/components/Tooltip/Tooltip.tsx +262 -120
- package/src/components/Tooltip/Tooltip.types.ts +111 -47
- package/src/components/Tooltip/index.ts +8 -8
- package/src/components/VisuallyHidden/VisuallyHidden.types.ts +1 -1
- package/src/foundation/FoundationStyledComponent.tsx +17 -1
- package/src/index.ts +1 -0
- package/src/providers/BezierProvider.tsx +10 -6
- package/dist/cjs/components/Tooltip/TooltipContent.js.map +0 -1
- package/dist/cjs/components/Tooltip/utils.js.map +0 -1
- package/dist/esm/components/Tooltip/TooltipContent.mjs.map +0 -1
- package/dist/esm/components/Tooltip/utils.mjs.map +0 -1
- package/dist/types/components/Tooltip/TooltipContent.d.ts +0 -5
- package/dist/types/components/Tooltip/TooltipContent.d.ts.map +0 -1
- package/dist/types/components/Tooltip/utils.d.ts.map +0 -1
- /package/src/components/{Tooltip/__snapshots__/Tooltip.test.tsx.snap → LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap} +0 -0
|
@@ -0,0 +1,886 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function getAlignment(placement) {
|
|
4
|
+
return placement.split('-')[1];
|
|
5
|
+
}
|
|
6
|
+
function getLengthFromAxis(axis) {
|
|
7
|
+
return axis === 'y' ? 'height' : 'width';
|
|
8
|
+
}
|
|
9
|
+
function getSide(placement) {
|
|
10
|
+
return placement.split('-')[0];
|
|
11
|
+
}
|
|
12
|
+
function getMainAxisFromPlacement(placement) {
|
|
13
|
+
return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
|
|
14
|
+
}
|
|
15
|
+
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
16
|
+
let {
|
|
17
|
+
reference,
|
|
18
|
+
floating
|
|
19
|
+
} = _ref;
|
|
20
|
+
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
21
|
+
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
22
|
+
const mainAxis = getMainAxisFromPlacement(placement);
|
|
23
|
+
const length = getLengthFromAxis(mainAxis);
|
|
24
|
+
const commonAlign = reference[length] / 2 - floating[length] / 2;
|
|
25
|
+
const side = getSide(placement);
|
|
26
|
+
const isVertical = mainAxis === 'x';
|
|
27
|
+
let coords;
|
|
28
|
+
switch (side) {
|
|
29
|
+
case 'top':
|
|
30
|
+
coords = {
|
|
31
|
+
x: commonX,
|
|
32
|
+
y: reference.y - floating.height
|
|
33
|
+
};
|
|
34
|
+
break;
|
|
35
|
+
case 'bottom':
|
|
36
|
+
coords = {
|
|
37
|
+
x: commonX,
|
|
38
|
+
y: reference.y + reference.height
|
|
39
|
+
};
|
|
40
|
+
break;
|
|
41
|
+
case 'right':
|
|
42
|
+
coords = {
|
|
43
|
+
x: reference.x + reference.width,
|
|
44
|
+
y: commonY
|
|
45
|
+
};
|
|
46
|
+
break;
|
|
47
|
+
case 'left':
|
|
48
|
+
coords = {
|
|
49
|
+
x: reference.x - floating.width,
|
|
50
|
+
y: commonY
|
|
51
|
+
};
|
|
52
|
+
break;
|
|
53
|
+
default:
|
|
54
|
+
coords = {
|
|
55
|
+
x: reference.x,
|
|
56
|
+
y: reference.y
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
switch (getAlignment(placement)) {
|
|
60
|
+
case 'start':
|
|
61
|
+
coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
62
|
+
break;
|
|
63
|
+
case 'end':
|
|
64
|
+
coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
return coords;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
72
|
+
* next to a reference element when it is given a certain positioning strategy.
|
|
73
|
+
*
|
|
74
|
+
* This export does not have any `platform` interface logic. You will need to
|
|
75
|
+
* write one for the platform you are using Floating UI with.
|
|
76
|
+
*/
|
|
77
|
+
const computePosition = async (reference, floating, config) => {
|
|
78
|
+
const {
|
|
79
|
+
placement = 'bottom',
|
|
80
|
+
strategy = 'absolute',
|
|
81
|
+
middleware = [],
|
|
82
|
+
platform
|
|
83
|
+
} = config;
|
|
84
|
+
const validMiddleware = middleware.filter(Boolean);
|
|
85
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
86
|
+
let rects = await platform.getElementRects({
|
|
87
|
+
reference,
|
|
88
|
+
floating,
|
|
89
|
+
strategy
|
|
90
|
+
});
|
|
91
|
+
let {
|
|
92
|
+
x,
|
|
93
|
+
y
|
|
94
|
+
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
95
|
+
let statefulPlacement = placement;
|
|
96
|
+
let middlewareData = {};
|
|
97
|
+
let resetCount = 0;
|
|
98
|
+
for (let i = 0; i < validMiddleware.length; i++) {
|
|
99
|
+
const {
|
|
100
|
+
name,
|
|
101
|
+
fn
|
|
102
|
+
} = validMiddleware[i];
|
|
103
|
+
const {
|
|
104
|
+
x: nextX,
|
|
105
|
+
y: nextY,
|
|
106
|
+
data,
|
|
107
|
+
reset
|
|
108
|
+
} = await fn({
|
|
109
|
+
x,
|
|
110
|
+
y,
|
|
111
|
+
initialPlacement: placement,
|
|
112
|
+
placement: statefulPlacement,
|
|
113
|
+
strategy,
|
|
114
|
+
middlewareData,
|
|
115
|
+
rects,
|
|
116
|
+
platform,
|
|
117
|
+
elements: {
|
|
118
|
+
reference,
|
|
119
|
+
floating
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
x = nextX != null ? nextX : x;
|
|
123
|
+
y = nextY != null ? nextY : y;
|
|
124
|
+
middlewareData = {
|
|
125
|
+
...middlewareData,
|
|
126
|
+
[name]: {
|
|
127
|
+
...middlewareData[name],
|
|
128
|
+
...data
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
if (reset && resetCount <= 50) {
|
|
132
|
+
resetCount++;
|
|
133
|
+
if (typeof reset === 'object') {
|
|
134
|
+
if (reset.placement) {
|
|
135
|
+
statefulPlacement = reset.placement;
|
|
136
|
+
}
|
|
137
|
+
if (reset.rects) {
|
|
138
|
+
rects = reset.rects === true ? await platform.getElementRects({
|
|
139
|
+
reference,
|
|
140
|
+
floating,
|
|
141
|
+
strategy
|
|
142
|
+
}) : reset.rects;
|
|
143
|
+
}
|
|
144
|
+
({
|
|
145
|
+
x,
|
|
146
|
+
y
|
|
147
|
+
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
148
|
+
}
|
|
149
|
+
i = -1;
|
|
150
|
+
continue;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
return {
|
|
154
|
+
x,
|
|
155
|
+
y,
|
|
156
|
+
placement: statefulPlacement,
|
|
157
|
+
strategy,
|
|
158
|
+
middlewareData
|
|
159
|
+
};
|
|
160
|
+
};
|
|
161
|
+
function evaluate(value, param) {
|
|
162
|
+
return typeof value === 'function' ? value(param) : value;
|
|
163
|
+
}
|
|
164
|
+
function expandPaddingObject(padding) {
|
|
165
|
+
return {
|
|
166
|
+
top: 0,
|
|
167
|
+
right: 0,
|
|
168
|
+
bottom: 0,
|
|
169
|
+
left: 0,
|
|
170
|
+
...padding
|
|
171
|
+
};
|
|
172
|
+
}
|
|
173
|
+
function getSideObjectFromPadding(padding) {
|
|
174
|
+
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
175
|
+
top: padding,
|
|
176
|
+
right: padding,
|
|
177
|
+
bottom: padding,
|
|
178
|
+
left: padding
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
function rectToClientRect(rect) {
|
|
182
|
+
return {
|
|
183
|
+
...rect,
|
|
184
|
+
top: rect.y,
|
|
185
|
+
left: rect.x,
|
|
186
|
+
right: rect.x + rect.width,
|
|
187
|
+
bottom: rect.y + rect.height
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
193
|
+
* element is overflowing a given clipping boundary on each side.
|
|
194
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
195
|
+
* - negative = how many pixels left before it will overflow
|
|
196
|
+
* - 0 = lies flush with the boundary
|
|
197
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
198
|
+
*/
|
|
199
|
+
async function detectOverflow(state, options) {
|
|
200
|
+
var _await$platform$isEle;
|
|
201
|
+
if (options === void 0) {
|
|
202
|
+
options = {};
|
|
203
|
+
}
|
|
204
|
+
const {
|
|
205
|
+
x,
|
|
206
|
+
y,
|
|
207
|
+
platform,
|
|
208
|
+
rects,
|
|
209
|
+
elements,
|
|
210
|
+
strategy
|
|
211
|
+
} = state;
|
|
212
|
+
const {
|
|
213
|
+
boundary = 'clippingAncestors',
|
|
214
|
+
rootBoundary = 'viewport',
|
|
215
|
+
elementContext = 'floating',
|
|
216
|
+
altBoundary = false,
|
|
217
|
+
padding = 0
|
|
218
|
+
} = evaluate(options, state);
|
|
219
|
+
const paddingObject = getSideObjectFromPadding(padding);
|
|
220
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
221
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
222
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
223
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
224
|
+
boundary,
|
|
225
|
+
rootBoundary,
|
|
226
|
+
strategy
|
|
227
|
+
}));
|
|
228
|
+
const rect = elementContext === 'floating' ? {
|
|
229
|
+
...rects.floating,
|
|
230
|
+
x,
|
|
231
|
+
y
|
|
232
|
+
} : rects.reference;
|
|
233
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
234
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
235
|
+
x: 1,
|
|
236
|
+
y: 1
|
|
237
|
+
} : {
|
|
238
|
+
x: 1,
|
|
239
|
+
y: 1
|
|
240
|
+
};
|
|
241
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
242
|
+
rect,
|
|
243
|
+
offsetParent,
|
|
244
|
+
strategy
|
|
245
|
+
}) : rect);
|
|
246
|
+
return {
|
|
247
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
248
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
249
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
250
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
251
|
+
};
|
|
252
|
+
}
|
|
253
|
+
const min = Math.min;
|
|
254
|
+
const max = Math.max;
|
|
255
|
+
function within(min$1, value, max$1) {
|
|
256
|
+
return max(min$1, min(value, max$1));
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/**
|
|
260
|
+
* Provides data to position an inner element of the floating element so that it
|
|
261
|
+
* appears centered to the reference element.
|
|
262
|
+
* @see https://floating-ui.com/docs/arrow
|
|
263
|
+
*/
|
|
264
|
+
const arrow = options => ({
|
|
265
|
+
name: 'arrow',
|
|
266
|
+
options,
|
|
267
|
+
async fn(state) {
|
|
268
|
+
const {
|
|
269
|
+
x,
|
|
270
|
+
y,
|
|
271
|
+
placement,
|
|
272
|
+
rects,
|
|
273
|
+
platform,
|
|
274
|
+
elements
|
|
275
|
+
} = state;
|
|
276
|
+
// Since `element` is required, we don't Partial<> the type.
|
|
277
|
+
const {
|
|
278
|
+
element,
|
|
279
|
+
padding = 0
|
|
280
|
+
} = evaluate(options, state) || {};
|
|
281
|
+
if (element == null) {
|
|
282
|
+
return {};
|
|
283
|
+
}
|
|
284
|
+
const paddingObject = getSideObjectFromPadding(padding);
|
|
285
|
+
const coords = {
|
|
286
|
+
x,
|
|
287
|
+
y
|
|
288
|
+
};
|
|
289
|
+
const axis = getMainAxisFromPlacement(placement);
|
|
290
|
+
const length = getLengthFromAxis(axis);
|
|
291
|
+
const arrowDimensions = await platform.getDimensions(element);
|
|
292
|
+
const isYAxis = axis === 'y';
|
|
293
|
+
const minProp = isYAxis ? 'top' : 'left';
|
|
294
|
+
const maxProp = isYAxis ? 'bottom' : 'right';
|
|
295
|
+
const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
|
|
296
|
+
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
297
|
+
const startDiff = coords[axis] - rects.reference[axis];
|
|
298
|
+
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
|
|
299
|
+
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
|
|
300
|
+
|
|
301
|
+
// DOM platform can return `window` as the `offsetParent`.
|
|
302
|
+
if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
|
|
303
|
+
clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
304
|
+
}
|
|
305
|
+
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
306
|
+
|
|
307
|
+
// If the padding is large enough that it causes the arrow to no longer be
|
|
308
|
+
// centered, modify the padding so that it is centered.
|
|
309
|
+
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
|
|
310
|
+
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
|
|
311
|
+
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
|
|
312
|
+
|
|
313
|
+
// Make sure the arrow doesn't overflow the floating element if the center
|
|
314
|
+
// point is outside the floating element's bounds.
|
|
315
|
+
const min$1 = minPadding;
|
|
316
|
+
const max = clientSize - arrowDimensions[length] - maxPadding;
|
|
317
|
+
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
318
|
+
const offset = within(min$1, center, max);
|
|
319
|
+
|
|
320
|
+
// If the reference is small enough that the arrow's padding causes it to
|
|
321
|
+
// to point to nothing for an aligned placement, adjust the offset of the
|
|
322
|
+
// floating element itself. This stops `shift()` from taking action, but can
|
|
323
|
+
// be worked around by calling it again after the `arrow()` if desired.
|
|
324
|
+
const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
325
|
+
const alignmentOffset = shouldAddOffset ? center < min$1 ? min$1 - center : max - center : 0;
|
|
326
|
+
return {
|
|
327
|
+
[axis]: coords[axis] - alignmentOffset,
|
|
328
|
+
data: {
|
|
329
|
+
[axis]: offset,
|
|
330
|
+
centerOffset: center - offset + alignmentOffset
|
|
331
|
+
}
|
|
332
|
+
};
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
const sides = ['top', 'right', 'bottom', 'left'];
|
|
336
|
+
const oppositeSideMap = {
|
|
337
|
+
left: 'right',
|
|
338
|
+
right: 'left',
|
|
339
|
+
bottom: 'top',
|
|
340
|
+
top: 'bottom'
|
|
341
|
+
};
|
|
342
|
+
function getOppositePlacement(placement) {
|
|
343
|
+
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
344
|
+
}
|
|
345
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
346
|
+
if (rtl === void 0) {
|
|
347
|
+
rtl = false;
|
|
348
|
+
}
|
|
349
|
+
const alignment = getAlignment(placement);
|
|
350
|
+
const mainAxis = getMainAxisFromPlacement(placement);
|
|
351
|
+
const length = getLengthFromAxis(mainAxis);
|
|
352
|
+
let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
353
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
354
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
355
|
+
}
|
|
356
|
+
return {
|
|
357
|
+
main: mainAlignmentSide,
|
|
358
|
+
cross: getOppositePlacement(mainAlignmentSide)
|
|
359
|
+
};
|
|
360
|
+
}
|
|
361
|
+
const oppositeAlignmentMap = {
|
|
362
|
+
start: 'end',
|
|
363
|
+
end: 'start'
|
|
364
|
+
};
|
|
365
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
366
|
+
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
367
|
+
}
|
|
368
|
+
function getExpandedPlacements(placement) {
|
|
369
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
370
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
371
|
+
}
|
|
372
|
+
function getSideList(side, isStart, rtl) {
|
|
373
|
+
const lr = ['left', 'right'];
|
|
374
|
+
const rl = ['right', 'left'];
|
|
375
|
+
const tb = ['top', 'bottom'];
|
|
376
|
+
const bt = ['bottom', 'top'];
|
|
377
|
+
switch (side) {
|
|
378
|
+
case 'top':
|
|
379
|
+
case 'bottom':
|
|
380
|
+
if (rtl) return isStart ? rl : lr;
|
|
381
|
+
return isStart ? lr : rl;
|
|
382
|
+
case 'left':
|
|
383
|
+
case 'right':
|
|
384
|
+
return isStart ? tb : bt;
|
|
385
|
+
default:
|
|
386
|
+
return [];
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
390
|
+
const alignment = getAlignment(placement);
|
|
391
|
+
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
392
|
+
if (alignment) {
|
|
393
|
+
list = list.map(side => side + "-" + alignment);
|
|
394
|
+
if (flipAlignment) {
|
|
395
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
return list;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
/**
|
|
402
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
403
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
404
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
405
|
+
* @see https://floating-ui.com/docs/flip
|
|
406
|
+
*/
|
|
407
|
+
const flip = function (options) {
|
|
408
|
+
if (options === void 0) {
|
|
409
|
+
options = {};
|
|
410
|
+
}
|
|
411
|
+
return {
|
|
412
|
+
name: 'flip',
|
|
413
|
+
options,
|
|
414
|
+
async fn(state) {
|
|
415
|
+
var _middlewareData$flip;
|
|
416
|
+
const {
|
|
417
|
+
placement,
|
|
418
|
+
middlewareData,
|
|
419
|
+
rects,
|
|
420
|
+
initialPlacement,
|
|
421
|
+
platform,
|
|
422
|
+
elements
|
|
423
|
+
} = state;
|
|
424
|
+
const {
|
|
425
|
+
mainAxis: checkMainAxis = true,
|
|
426
|
+
crossAxis: checkCrossAxis = true,
|
|
427
|
+
fallbackPlacements: specifiedFallbackPlacements,
|
|
428
|
+
fallbackStrategy = 'bestFit',
|
|
429
|
+
fallbackAxisSideDirection = 'none',
|
|
430
|
+
flipAlignment = true,
|
|
431
|
+
...detectOverflowOptions
|
|
432
|
+
} = evaluate(options, state);
|
|
433
|
+
const side = getSide(placement);
|
|
434
|
+
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
435
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
436
|
+
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
437
|
+
if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
|
|
438
|
+
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
439
|
+
}
|
|
440
|
+
const placements = [initialPlacement, ...fallbackPlacements];
|
|
441
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
442
|
+
const overflows = [];
|
|
443
|
+
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
444
|
+
if (checkMainAxis) {
|
|
445
|
+
overflows.push(overflow[side]);
|
|
446
|
+
}
|
|
447
|
+
if (checkCrossAxis) {
|
|
448
|
+
const {
|
|
449
|
+
main,
|
|
450
|
+
cross
|
|
451
|
+
} = getAlignmentSides(placement, rects, rtl);
|
|
452
|
+
overflows.push(overflow[main], overflow[cross]);
|
|
453
|
+
}
|
|
454
|
+
overflowsData = [...overflowsData, {
|
|
455
|
+
placement,
|
|
456
|
+
overflows
|
|
457
|
+
}];
|
|
458
|
+
|
|
459
|
+
// One or more sides is overflowing.
|
|
460
|
+
if (!overflows.every(side => side <= 0)) {
|
|
461
|
+
var _middlewareData$flip2, _overflowsData$filter;
|
|
462
|
+
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
463
|
+
const nextPlacement = placements[nextIndex];
|
|
464
|
+
if (nextPlacement) {
|
|
465
|
+
// Try next placement and re-run the lifecycle.
|
|
466
|
+
return {
|
|
467
|
+
data: {
|
|
468
|
+
index: nextIndex,
|
|
469
|
+
overflows: overflowsData
|
|
470
|
+
},
|
|
471
|
+
reset: {
|
|
472
|
+
placement: nextPlacement
|
|
473
|
+
}
|
|
474
|
+
};
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
478
|
+
// then find the placement that fits the best on the main crossAxis side.
|
|
479
|
+
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
480
|
+
|
|
481
|
+
// Otherwise fallback.
|
|
482
|
+
if (!resetPlacement) {
|
|
483
|
+
switch (fallbackStrategy) {
|
|
484
|
+
case 'bestFit':
|
|
485
|
+
{
|
|
486
|
+
var _overflowsData$map$so;
|
|
487
|
+
const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
|
|
488
|
+
if (placement) {
|
|
489
|
+
resetPlacement = placement;
|
|
490
|
+
}
|
|
491
|
+
break;
|
|
492
|
+
}
|
|
493
|
+
case 'initialPlacement':
|
|
494
|
+
resetPlacement = initialPlacement;
|
|
495
|
+
break;
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
if (placement !== resetPlacement) {
|
|
499
|
+
return {
|
|
500
|
+
reset: {
|
|
501
|
+
placement: resetPlacement
|
|
502
|
+
}
|
|
503
|
+
};
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
return {};
|
|
507
|
+
}
|
|
508
|
+
};
|
|
509
|
+
};
|
|
510
|
+
function getSideOffsets(overflow, rect) {
|
|
511
|
+
return {
|
|
512
|
+
top: overflow.top - rect.height,
|
|
513
|
+
right: overflow.right - rect.width,
|
|
514
|
+
bottom: overflow.bottom - rect.height,
|
|
515
|
+
left: overflow.left - rect.width
|
|
516
|
+
};
|
|
517
|
+
}
|
|
518
|
+
function isAnySideFullyClipped(overflow) {
|
|
519
|
+
return sides.some(side => overflow[side] >= 0);
|
|
520
|
+
}
|
|
521
|
+
/**
|
|
522
|
+
* Provides data to hide the floating element in applicable situations, such as
|
|
523
|
+
* when it is not in the same clipping context as the reference element.
|
|
524
|
+
* @see https://floating-ui.com/docs/hide
|
|
525
|
+
*/
|
|
526
|
+
const hide = function (options) {
|
|
527
|
+
if (options === void 0) {
|
|
528
|
+
options = {};
|
|
529
|
+
}
|
|
530
|
+
return {
|
|
531
|
+
name: 'hide',
|
|
532
|
+
options,
|
|
533
|
+
async fn(state) {
|
|
534
|
+
const {
|
|
535
|
+
rects
|
|
536
|
+
} = state;
|
|
537
|
+
const {
|
|
538
|
+
strategy = 'referenceHidden',
|
|
539
|
+
...detectOverflowOptions
|
|
540
|
+
} = evaluate(options, state);
|
|
541
|
+
switch (strategy) {
|
|
542
|
+
case 'referenceHidden':
|
|
543
|
+
{
|
|
544
|
+
const overflow = await detectOverflow(state, {
|
|
545
|
+
...detectOverflowOptions,
|
|
546
|
+
elementContext: 'reference'
|
|
547
|
+
});
|
|
548
|
+
const offsets = getSideOffsets(overflow, rects.reference);
|
|
549
|
+
return {
|
|
550
|
+
data: {
|
|
551
|
+
referenceHiddenOffsets: offsets,
|
|
552
|
+
referenceHidden: isAnySideFullyClipped(offsets)
|
|
553
|
+
}
|
|
554
|
+
};
|
|
555
|
+
}
|
|
556
|
+
case 'escaped':
|
|
557
|
+
{
|
|
558
|
+
const overflow = await detectOverflow(state, {
|
|
559
|
+
...detectOverflowOptions,
|
|
560
|
+
altBoundary: true
|
|
561
|
+
});
|
|
562
|
+
const offsets = getSideOffsets(overflow, rects.floating);
|
|
563
|
+
return {
|
|
564
|
+
data: {
|
|
565
|
+
escapedOffsets: offsets,
|
|
566
|
+
escaped: isAnySideFullyClipped(offsets)
|
|
567
|
+
}
|
|
568
|
+
};
|
|
569
|
+
}
|
|
570
|
+
default:
|
|
571
|
+
{
|
|
572
|
+
return {};
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
};
|
|
577
|
+
};
|
|
578
|
+
async function convertValueToCoords(state, options) {
|
|
579
|
+
const {
|
|
580
|
+
placement,
|
|
581
|
+
platform,
|
|
582
|
+
elements
|
|
583
|
+
} = state;
|
|
584
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
585
|
+
const side = getSide(placement);
|
|
586
|
+
const alignment = getAlignment(placement);
|
|
587
|
+
const isVertical = getMainAxisFromPlacement(placement) === 'x';
|
|
588
|
+
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
589
|
+
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
590
|
+
const rawValue = evaluate(options, state);
|
|
591
|
+
|
|
592
|
+
// eslint-disable-next-line prefer-const
|
|
593
|
+
let {
|
|
594
|
+
mainAxis,
|
|
595
|
+
crossAxis,
|
|
596
|
+
alignmentAxis
|
|
597
|
+
} = typeof rawValue === 'number' ? {
|
|
598
|
+
mainAxis: rawValue,
|
|
599
|
+
crossAxis: 0,
|
|
600
|
+
alignmentAxis: null
|
|
601
|
+
} : {
|
|
602
|
+
mainAxis: 0,
|
|
603
|
+
crossAxis: 0,
|
|
604
|
+
alignmentAxis: null,
|
|
605
|
+
...rawValue
|
|
606
|
+
};
|
|
607
|
+
if (alignment && typeof alignmentAxis === 'number') {
|
|
608
|
+
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
609
|
+
}
|
|
610
|
+
return isVertical ? {
|
|
611
|
+
x: crossAxis * crossAxisMulti,
|
|
612
|
+
y: mainAxis * mainAxisMulti
|
|
613
|
+
} : {
|
|
614
|
+
x: mainAxis * mainAxisMulti,
|
|
615
|
+
y: crossAxis * crossAxisMulti
|
|
616
|
+
};
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
/**
|
|
620
|
+
* Modifies the placement by translating the floating element along the
|
|
621
|
+
* specified axes.
|
|
622
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
623
|
+
* object may be passed.
|
|
624
|
+
* @see https://floating-ui.com/docs/offset
|
|
625
|
+
*/
|
|
626
|
+
const offset = function (options) {
|
|
627
|
+
if (options === void 0) {
|
|
628
|
+
options = 0;
|
|
629
|
+
}
|
|
630
|
+
return {
|
|
631
|
+
name: 'offset',
|
|
632
|
+
options,
|
|
633
|
+
async fn(state) {
|
|
634
|
+
const {
|
|
635
|
+
x,
|
|
636
|
+
y
|
|
637
|
+
} = state;
|
|
638
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
639
|
+
return {
|
|
640
|
+
x: x + diffCoords.x,
|
|
641
|
+
y: y + diffCoords.y,
|
|
642
|
+
data: diffCoords
|
|
643
|
+
};
|
|
644
|
+
}
|
|
645
|
+
};
|
|
646
|
+
};
|
|
647
|
+
function getCrossAxis(axis) {
|
|
648
|
+
return axis === 'x' ? 'y' : 'x';
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
/**
|
|
652
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
653
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
654
|
+
* @see https://floating-ui.com/docs/shift
|
|
655
|
+
*/
|
|
656
|
+
const shift = function (options) {
|
|
657
|
+
if (options === void 0) {
|
|
658
|
+
options = {};
|
|
659
|
+
}
|
|
660
|
+
return {
|
|
661
|
+
name: 'shift',
|
|
662
|
+
options,
|
|
663
|
+
async fn(state) {
|
|
664
|
+
const {
|
|
665
|
+
x,
|
|
666
|
+
y,
|
|
667
|
+
placement
|
|
668
|
+
} = state;
|
|
669
|
+
const {
|
|
670
|
+
mainAxis: checkMainAxis = true,
|
|
671
|
+
crossAxis: checkCrossAxis = false,
|
|
672
|
+
limiter = {
|
|
673
|
+
fn: _ref => {
|
|
674
|
+
let {
|
|
675
|
+
x,
|
|
676
|
+
y
|
|
677
|
+
} = _ref;
|
|
678
|
+
return {
|
|
679
|
+
x,
|
|
680
|
+
y
|
|
681
|
+
};
|
|
682
|
+
}
|
|
683
|
+
},
|
|
684
|
+
...detectOverflowOptions
|
|
685
|
+
} = evaluate(options, state);
|
|
686
|
+
const coords = {
|
|
687
|
+
x,
|
|
688
|
+
y
|
|
689
|
+
};
|
|
690
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
691
|
+
const mainAxis = getMainAxisFromPlacement(getSide(placement));
|
|
692
|
+
const crossAxis = getCrossAxis(mainAxis);
|
|
693
|
+
let mainAxisCoord = coords[mainAxis];
|
|
694
|
+
let crossAxisCoord = coords[crossAxis];
|
|
695
|
+
if (checkMainAxis) {
|
|
696
|
+
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
697
|
+
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
698
|
+
const min = mainAxisCoord + overflow[minSide];
|
|
699
|
+
const max = mainAxisCoord - overflow[maxSide];
|
|
700
|
+
mainAxisCoord = within(min, mainAxisCoord, max);
|
|
701
|
+
}
|
|
702
|
+
if (checkCrossAxis) {
|
|
703
|
+
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
704
|
+
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
705
|
+
const min = crossAxisCoord + overflow[minSide];
|
|
706
|
+
const max = crossAxisCoord - overflow[maxSide];
|
|
707
|
+
crossAxisCoord = within(min, crossAxisCoord, max);
|
|
708
|
+
}
|
|
709
|
+
const limitedCoords = limiter.fn({
|
|
710
|
+
...state,
|
|
711
|
+
[mainAxis]: mainAxisCoord,
|
|
712
|
+
[crossAxis]: crossAxisCoord
|
|
713
|
+
});
|
|
714
|
+
return {
|
|
715
|
+
...limitedCoords,
|
|
716
|
+
data: {
|
|
717
|
+
x: limitedCoords.x - x,
|
|
718
|
+
y: limitedCoords.y - y
|
|
719
|
+
}
|
|
720
|
+
};
|
|
721
|
+
}
|
|
722
|
+
};
|
|
723
|
+
};
|
|
724
|
+
/**
|
|
725
|
+
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
726
|
+
*/
|
|
727
|
+
const limitShift = function (options) {
|
|
728
|
+
if (options === void 0) {
|
|
729
|
+
options = {};
|
|
730
|
+
}
|
|
731
|
+
return {
|
|
732
|
+
options,
|
|
733
|
+
fn(state) {
|
|
734
|
+
const {
|
|
735
|
+
x,
|
|
736
|
+
y,
|
|
737
|
+
placement,
|
|
738
|
+
rects,
|
|
739
|
+
middlewareData
|
|
740
|
+
} = state;
|
|
741
|
+
const {
|
|
742
|
+
offset = 0,
|
|
743
|
+
mainAxis: checkMainAxis = true,
|
|
744
|
+
crossAxis: checkCrossAxis = true
|
|
745
|
+
} = evaluate(options, state);
|
|
746
|
+
const coords = {
|
|
747
|
+
x,
|
|
748
|
+
y
|
|
749
|
+
};
|
|
750
|
+
const mainAxis = getMainAxisFromPlacement(placement);
|
|
751
|
+
const crossAxis = getCrossAxis(mainAxis);
|
|
752
|
+
let mainAxisCoord = coords[mainAxis];
|
|
753
|
+
let crossAxisCoord = coords[crossAxis];
|
|
754
|
+
const rawOffset = evaluate(offset, state);
|
|
755
|
+
const computedOffset = typeof rawOffset === 'number' ? {
|
|
756
|
+
mainAxis: rawOffset,
|
|
757
|
+
crossAxis: 0
|
|
758
|
+
} : {
|
|
759
|
+
mainAxis: 0,
|
|
760
|
+
crossAxis: 0,
|
|
761
|
+
...rawOffset
|
|
762
|
+
};
|
|
763
|
+
if (checkMainAxis) {
|
|
764
|
+
const len = mainAxis === 'y' ? 'height' : 'width';
|
|
765
|
+
const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
|
|
766
|
+
const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
|
|
767
|
+
if (mainAxisCoord < limitMin) {
|
|
768
|
+
mainAxisCoord = limitMin;
|
|
769
|
+
} else if (mainAxisCoord > limitMax) {
|
|
770
|
+
mainAxisCoord = limitMax;
|
|
771
|
+
}
|
|
772
|
+
}
|
|
773
|
+
if (checkCrossAxis) {
|
|
774
|
+
var _middlewareData$offse, _middlewareData$offse2;
|
|
775
|
+
const len = mainAxis === 'y' ? 'width' : 'height';
|
|
776
|
+
const isOriginSide = ['top', 'left'].includes(getSide(placement));
|
|
777
|
+
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
|
|
778
|
+
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
|
|
779
|
+
if (crossAxisCoord < limitMin) {
|
|
780
|
+
crossAxisCoord = limitMin;
|
|
781
|
+
} else if (crossAxisCoord > limitMax) {
|
|
782
|
+
crossAxisCoord = limitMax;
|
|
783
|
+
}
|
|
784
|
+
}
|
|
785
|
+
return {
|
|
786
|
+
[mainAxis]: mainAxisCoord,
|
|
787
|
+
[crossAxis]: crossAxisCoord
|
|
788
|
+
};
|
|
789
|
+
}
|
|
790
|
+
};
|
|
791
|
+
};
|
|
792
|
+
|
|
793
|
+
/**
|
|
794
|
+
* Provides data that allows you to change the size of the floating element —
|
|
795
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
796
|
+
* width of the reference element.
|
|
797
|
+
* @see https://floating-ui.com/docs/size
|
|
798
|
+
*/
|
|
799
|
+
const size = function (options) {
|
|
800
|
+
if (options === void 0) {
|
|
801
|
+
options = {};
|
|
802
|
+
}
|
|
803
|
+
return {
|
|
804
|
+
name: 'size',
|
|
805
|
+
options,
|
|
806
|
+
async fn(state) {
|
|
807
|
+
const {
|
|
808
|
+
placement,
|
|
809
|
+
rects,
|
|
810
|
+
platform,
|
|
811
|
+
elements
|
|
812
|
+
} = state;
|
|
813
|
+
const {
|
|
814
|
+
apply = () => {},
|
|
815
|
+
...detectOverflowOptions
|
|
816
|
+
} = evaluate(options, state);
|
|
817
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
818
|
+
const side = getSide(placement);
|
|
819
|
+
const alignment = getAlignment(placement);
|
|
820
|
+
const axis = getMainAxisFromPlacement(placement);
|
|
821
|
+
const isXAxis = axis === 'x';
|
|
822
|
+
const {
|
|
823
|
+
width,
|
|
824
|
+
height
|
|
825
|
+
} = rects.floating;
|
|
826
|
+
let heightSide;
|
|
827
|
+
let widthSide;
|
|
828
|
+
if (side === 'top' || side === 'bottom') {
|
|
829
|
+
heightSide = side;
|
|
830
|
+
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
831
|
+
} else {
|
|
832
|
+
widthSide = side;
|
|
833
|
+
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
834
|
+
}
|
|
835
|
+
const overflowAvailableHeight = height - overflow[heightSide];
|
|
836
|
+
const overflowAvailableWidth = width - overflow[widthSide];
|
|
837
|
+
const noShift = !state.middlewareData.shift;
|
|
838
|
+
let availableHeight = overflowAvailableHeight;
|
|
839
|
+
let availableWidth = overflowAvailableWidth;
|
|
840
|
+
if (isXAxis) {
|
|
841
|
+
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
842
|
+
availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
|
|
843
|
+
} else {
|
|
844
|
+
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
845
|
+
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
|
|
846
|
+
}
|
|
847
|
+
if (noShift && !alignment) {
|
|
848
|
+
const xMin = max(overflow.left, 0);
|
|
849
|
+
const xMax = max(overflow.right, 0);
|
|
850
|
+
const yMin = max(overflow.top, 0);
|
|
851
|
+
const yMax = max(overflow.bottom, 0);
|
|
852
|
+
if (isXAxis) {
|
|
853
|
+
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
854
|
+
} else {
|
|
855
|
+
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
856
|
+
}
|
|
857
|
+
}
|
|
858
|
+
await apply({
|
|
859
|
+
...state,
|
|
860
|
+
availableWidth,
|
|
861
|
+
availableHeight
|
|
862
|
+
});
|
|
863
|
+
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
864
|
+
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
865
|
+
return {
|
|
866
|
+
reset: {
|
|
867
|
+
rects: true
|
|
868
|
+
}
|
|
869
|
+
};
|
|
870
|
+
}
|
|
871
|
+
return {};
|
|
872
|
+
}
|
|
873
|
+
};
|
|
874
|
+
};
|
|
875
|
+
|
|
876
|
+
exports.arrow = arrow;
|
|
877
|
+
exports.computePosition = computePosition;
|
|
878
|
+
exports.detectOverflow = detectOverflow;
|
|
879
|
+
exports.flip = flip;
|
|
880
|
+
exports.hide = hide;
|
|
881
|
+
exports.limitShift = limitShift;
|
|
882
|
+
exports.offset = offset;
|
|
883
|
+
exports.rectToClientRect = rectToClientRect;
|
|
884
|
+
exports.shift = shift;
|
|
885
|
+
exports.size = size;
|
|
886
|
+
//# sourceMappingURL=floating-ui.core.js.map
|