@navikt/ds-react 6.6.1 → 6.7.1
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/cjs/chat/Chat.d.ts +2 -1
- package/cjs/chat/Chat.js +2 -1
- package/cjs/chat/Chat.js.map +1 -1
- package/cjs/date/datepicker/parts/DropdownCaption.js +1 -1
- package/cjs/date/datepicker/parts/DropdownCaption.js.map +1 -1
- package/cjs/date/monthpicker/MonthCaption.js +1 -1
- package/cjs/date/utils/labels.d.ts +2 -2
- package/cjs/form/ReadOnlyIcon.d.ts +2 -2
- package/cjs/form/combobox/Combobox.js +7 -22
- package/cjs/form/combobox/Combobox.js.map +1 -1
- package/cjs/form/combobox/ComboboxProvider.js +2 -2
- package/cjs/form/combobox/ComboboxProvider.js.map +1 -1
- package/cjs/form/combobox/ComboboxWrapper.d.ts +1 -2
- package/cjs/form/combobox/ComboboxWrapper.js +4 -2
- package/cjs/form/combobox/ComboboxWrapper.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js +4 -4
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +13 -15
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/cjs/form/combobox/Input/{inputContext.d.ts → Input.context.d.ts} +7 -5
- package/cjs/form/combobox/Input/{inputContext.js → Input.context.js} +22 -22
- package/cjs/form/combobox/Input/Input.context.js.map +1 -0
- package/cjs/form/combobox/Input/Input.js +2 -2
- package/cjs/form/combobox/Input/Input.js.map +1 -1
- package/cjs/form/combobox/Input/InputController.d.ts +3 -0
- package/cjs/form/combobox/Input/InputController.js +70 -0
- package/cjs/form/combobox/Input/InputController.js.map +1 -0
- package/cjs/form/combobox/{ToggleListButton.js → Input/ToggleListButton.js} +1 -1
- package/cjs/form/combobox/Input/ToggleListButton.js.map +1 -0
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js +2 -2
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js +7 -13
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/cjs/form/combobox/customOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/customOptionsContext.js +10 -13
- package/cjs/form/combobox/customOptionsContext.js.map +1 -1
- package/cjs/form/combobox/types.d.ts +1 -1
- package/cjs/help-text/HelpTextIcon.d.ts +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +4 -2
- package/cjs/index.js.map +1 -1
- package/cjs/overlay/dismiss/DismissableLayer.d.ts +70 -0
- package/cjs/overlay/dismiss/DismissableLayer.js +253 -0
- package/cjs/overlay/dismiss/DismissableLayer.js.map +1 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.d.ts +50 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.js +65 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.js.map +1 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.d.ts +1 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.js +19 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.js.map +1 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.d.ts +8 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.js +42 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.js.map +1 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.d.ts +10 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.js +84 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.js.map +1 -0
- package/cjs/overlays/floating/Floating.d.ts +53 -0
- package/cjs/overlays/floating/Floating.js +215 -0
- package/cjs/overlays/floating/Floating.js.map +1 -0
- package/cjs/overlays/floating/Floating.utils.d.ts +18 -0
- package/cjs/overlays/floating/Floating.utils.js +52 -0
- package/cjs/overlays/floating/Floating.utils.js.map +1 -0
- package/cjs/popover/Popover.js +13 -28
- package/cjs/popover/Popover.js.map +1 -1
- package/cjs/progress-bar/ProgressBar.d.ts +72 -0
- package/cjs/progress-bar/ProgressBar.js +86 -0
- package/cjs/progress-bar/ProgressBar.js.map +1 -0
- package/cjs/progress-bar/index.d.ts +1 -0
- package/cjs/progress-bar/index.js +10 -0
- package/cjs/progress-bar/index.js.map +1 -0
- package/cjs/tabs/Tabs.context.d.ts +7 -3
- package/cjs/tabs/Tabs.context.js +1 -0
- package/cjs/tabs/Tabs.context.js.map +1 -1
- package/cjs/timeline/AxisLabels.d.ts +1 -1
- package/cjs/toggle-group/ToggleGroup.context.d.ts +7 -3
- package/cjs/toggle-group/ToggleGroup.context.js +1 -0
- package/cjs/toggle-group/ToggleGroup.context.js.map +1 -1
- package/cjs/typography/BodyLong.d.ts +7 -7
- package/cjs/typography/BodyLong.js +5 -5
- package/cjs/typography/BodyShort.d.ts +5 -5
- package/cjs/typography/BodyShort.js +3 -3
- package/cjs/typography/Detail.d.ts +5 -5
- package/cjs/typography/Detail.js +3 -3
- package/cjs/typography/ErrorMessage.d.ts +5 -5
- package/cjs/typography/ErrorMessage.js +3 -3
- package/cjs/typography/Heading.d.ts +6 -6
- package/cjs/typography/Heading.js +3 -3
- package/cjs/typography/Label.d.ts +5 -5
- package/cjs/typography/Label.js +3 -3
- package/cjs/typography/types.d.ts +3 -3
- package/cjs/util/hooks/descendants/useDescendant.d.ts +2 -2
- package/cjs/util/hooks/descendants/useDescendant.js +49 -52
- package/cjs/util/hooks/descendants/useDescendant.js.map +1 -1
- package/cjs/util/types/AsChild.d.ts +14 -0
- package/cjs/util/types/AsChild.js +3 -0
- package/cjs/util/types/AsChild.js.map +1 -0
- package/esm/chat/Chat.d.ts +2 -1
- package/esm/chat/Chat.js +1 -0
- package/esm/chat/Chat.js.map +1 -1
- package/esm/date/datepicker/parts/DropdownCaption.js +1 -1
- package/esm/date/datepicker/parts/DropdownCaption.js.map +1 -1
- package/esm/date/monthpicker/MonthCaption.js +1 -1
- package/esm/date/utils/labels.d.ts +2 -2
- package/esm/form/ReadOnlyIcon.d.ts +2 -2
- package/esm/form/combobox/Combobox.js +8 -23
- package/esm/form/combobox/Combobox.js.map +1 -1
- package/esm/form/combobox/ComboboxProvider.js +1 -1
- package/esm/form/combobox/ComboboxProvider.js.map +1 -1
- package/esm/form/combobox/ComboboxWrapper.d.ts +1 -2
- package/esm/form/combobox/ComboboxWrapper.js +4 -2
- package/esm/form/combobox/ComboboxWrapper.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js +3 -3
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +4 -4
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +15 -16
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/esm/form/combobox/Input/{inputContext.d.ts → Input.context.d.ts} +7 -5
- package/esm/form/combobox/Input/{inputContext.js → Input.context.js} +22 -21
- package/esm/form/combobox/Input/Input.context.js.map +1 -0
- package/esm/form/combobox/Input/Input.js +1 -1
- package/esm/form/combobox/Input/Input.js.map +1 -1
- package/esm/form/combobox/Input/InputController.d.ts +3 -0
- package/esm/form/combobox/Input/InputController.js +41 -0
- package/esm/form/combobox/Input/InputController.js.map +1 -0
- package/esm/form/combobox/{ToggleListButton.js → Input/ToggleListButton.js} +1 -1
- package/esm/form/combobox/Input/ToggleListButton.js.map +1 -0
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js +1 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +4 -4
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js +9 -14
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/esm/form/combobox/customOptionsContext.d.ts +4 -4
- package/esm/form/combobox/customOptionsContext.js +10 -12
- package/esm/form/combobox/customOptionsContext.js.map +1 -1
- package/esm/form/combobox/types.d.ts +1 -1
- package/esm/help-text/HelpTextIcon.d.ts +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/overlay/dismiss/DismissableLayer.d.ts +70 -0
- package/esm/overlay/dismiss/DismissableLayer.js +226 -0
- package/esm/overlay/dismiss/DismissableLayer.js.map +1 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.d.ts +50 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.js +58 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.js.map +1 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.d.ts +1 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.js +15 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.js.map +1 -0
- package/esm/overlay/dismiss/util/useFocusOutside.d.ts +8 -0
- package/esm/overlay/dismiss/util/useFocusOutside.js +38 -0
- package/esm/overlay/dismiss/util/useFocusOutside.js.map +1 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.d.ts +10 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.js +80 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.js.map +1 -0
- package/esm/overlays/floating/Floating.d.ts +53 -0
- package/esm/overlays/floating/Floating.js +188 -0
- package/esm/overlays/floating/Floating.js.map +1 -0
- package/esm/overlays/floating/Floating.utils.d.ts +18 -0
- package/esm/overlays/floating/Floating.utils.js +48 -0
- package/esm/overlays/floating/Floating.utils.js.map +1 -0
- package/esm/popover/Popover.js +16 -31
- package/esm/popover/Popover.js.map +1 -1
- package/esm/progress-bar/ProgressBar.d.ts +72 -0
- package/esm/progress-bar/ProgressBar.js +57 -0
- package/esm/progress-bar/ProgressBar.js.map +1 -0
- package/esm/progress-bar/index.d.ts +1 -0
- package/esm/progress-bar/index.js +3 -0
- package/esm/progress-bar/index.js.map +1 -0
- package/esm/tabs/Tabs.context.d.ts +7 -3
- package/esm/tabs/Tabs.context.js +1 -0
- package/esm/tabs/Tabs.context.js.map +1 -1
- package/esm/timeline/AxisLabels.d.ts +1 -1
- package/esm/toggle-group/ToggleGroup.context.d.ts +7 -3
- package/esm/toggle-group/ToggleGroup.context.js +1 -0
- package/esm/toggle-group/ToggleGroup.context.js.map +1 -1
- package/esm/typography/BodyLong.d.ts +7 -7
- package/esm/typography/BodyLong.js +5 -5
- package/esm/typography/BodyShort.d.ts +5 -5
- package/esm/typography/BodyShort.js +3 -3
- package/esm/typography/Detail.d.ts +5 -5
- package/esm/typography/Detail.js +3 -3
- package/esm/typography/ErrorMessage.d.ts +5 -5
- package/esm/typography/ErrorMessage.js +3 -3
- package/esm/typography/Heading.d.ts +6 -6
- package/esm/typography/Heading.js +3 -3
- package/esm/typography/Label.d.ts +5 -5
- package/esm/typography/Label.js +3 -3
- package/esm/typography/types.d.ts +3 -3
- package/esm/util/hooks/descendants/useDescendant.d.ts +2 -2
- package/esm/util/hooks/descendants/useDescendant.js +49 -52
- package/esm/util/hooks/descendants/useDescendant.js.map +1 -1
- package/esm/util/types/AsChild.d.ts +14 -0
- package/esm/util/types/AsChild.js +2 -0
- package/esm/util/types/AsChild.js.map +1 -0
- package/package.json +16 -5
- package/src/chat/Chat.tsx +2 -1
- package/src/date/datepicker/parts/DropdownCaption.tsx +5 -1
- package/src/date/monthpicker/MonthCaption.tsx +1 -1
- package/src/form/combobox/Combobox.tsx +6 -76
- package/src/form/combobox/ComboboxProvider.tsx +1 -1
- package/src/form/combobox/ComboboxWrapper.tsx +4 -3
- package/src/form/combobox/FilteredOptions/FilteredOptions.tsx +3 -3
- package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +19 -29
- package/src/form/combobox/Input/{inputContext.tsx → Input.context.tsx} +30 -33
- package/src/form/combobox/Input/Input.tsx +1 -1
- package/src/form/combobox/Input/InputController.tsx +102 -0
- package/src/form/combobox/{ToggleListButton.tsx → Input/ToggleListButton.tsx} +1 -1
- package/src/form/combobox/SelectedOptions/SelectedOptions.tsx +1 -1
- package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx +12 -26
- package/src/form/combobox/{combobox-utils.test.ts → __tests__/combobox-utils.test.ts} +1 -1
- package/src/form/combobox/{combobox.test.tsx → __tests__/combobox.test.tsx} +2 -3
- package/src/form/combobox/customOptionsContext.tsx +14 -18
- package/src/form/combobox/types.ts +3 -1
- package/src/index.ts +1 -0
- package/src/overlay/README.md +5 -0
- package/src/overlay/dismiss/DismissableLayer.tsx +368 -0
- package/src/overlay/dismiss/util/dispatchCustomEvent.ts +77 -0
- package/src/overlay/dismiss/util/useEscapeKeydown.ts +21 -0
- package/src/overlay/dismiss/util/useFocusOutside.ts +52 -0
- package/src/overlay/dismiss/util/usePointerDownOutside.ts +95 -0
- package/src/overlays/floating/Floating.tsx +399 -0
- package/src/overlays/floating/Floating.utils.ts +63 -0
- package/src/popover/Popover.tsx +38 -70
- package/src/progress-bar/ProgressBar.tsx +149 -0
- package/src/progress-bar/index.ts +2 -0
- package/src/tabs/Tabs.context.ts +2 -0
- package/src/toggle-group/ToggleGroup.context.ts +1 -0
- package/src/typography/BodyLong.tsx +7 -7
- package/src/typography/BodyShort.tsx +5 -5
- package/src/typography/Detail.tsx +5 -5
- package/src/typography/ErrorMessage.tsx +5 -5
- package/src/typography/Heading.tsx +6 -6
- package/src/typography/Label.tsx +5 -5
- package/src/typography/types.ts +3 -3
- package/src/util/hooks/descendants/useDescendant.tsx +55 -68
- package/src/util/types/AsChild.ts +15 -0
- package/cjs/form/combobox/ClearButton.d.ts +0 -7
- package/cjs/form/combobox/ClearButton.js +0 -28
- package/cjs/form/combobox/ClearButton.js.map +0 -1
- package/cjs/form/combobox/FilteredOptions/CheckIcon.d.ts +0 -3
- package/cjs/form/combobox/FilteredOptions/CheckIcon.js +0 -12
- package/cjs/form/combobox/FilteredOptions/CheckIcon.js.map +0 -1
- package/cjs/form/combobox/Input/inputContext.js.map +0 -1
- package/cjs/form/combobox/ToggleListButton.js.map +0 -1
- package/esm/form/combobox/ClearButton.d.ts +0 -7
- package/esm/form/combobox/ClearButton.js +0 -21
- package/esm/form/combobox/ClearButton.js.map +0 -1
- package/esm/form/combobox/FilteredOptions/CheckIcon.d.ts +0 -3
- package/esm/form/combobox/FilteredOptions/CheckIcon.js +0 -7
- package/esm/form/combobox/FilteredOptions/CheckIcon.js.map +0 -1
- package/esm/form/combobox/Input/inputContext.js.map +0 -1
- package/esm/form/combobox/ToggleListButton.js.map +0 -1
- package/src/form/combobox/ClearButton.tsx +0 -29
- package/src/form/combobox/FilteredOptions/CheckIcon.tsx +0 -23
- /package/cjs/form/combobox/{ToggleListButton.d.ts → Input/ToggleListButton.d.ts} +0 -0
- /package/esm/form/combobox/{ToggleListButton.d.ts → Input/ToggleListButton.d.ts} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFocusOutside.js","sourceRoot":"","sources":["../../../../src/overlay/dismiss/util/useFocusOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,aAAa,EAEb,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,eAAe,CAC7B,QAA4C,EAC5C,gBAA0B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ;IAE9C,MAAM,kBAAkB,GAAG,cAAc,CAAC,QAAQ,CAAkB,CAAC;IACrE,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,EAAE,CAAC;gBACvD,MAAM,WAAW,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;gBAE7C;;;;;;;;mBAQG;gBACH,mBAAmB,CACjB,aAAa,CAAC,aAAa,EAC3B,kBAAkB,EAClB,WAAW,CACZ,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QACF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAExC;;;OAGG;IACH,OAAO;QACL,cAAc,EAAE,GAAG,EAAE,CAAC,CAAC,yBAAyB,CAAC,OAAO,GAAG,IAAI,CAAC;QAChE,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC,yBAAyB,CAAC,OAAO,GAAG,KAAK,CAAC;KACjE,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CustomPointerDownEvent } from "./dispatchCustomEvent.js";
|
|
2
|
+
/**
|
|
3
|
+
* Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
|
|
4
|
+
* to mimic layer dismissing behaviour present in OS.
|
|
5
|
+
* Returns props to pass to the node we want to check for outside events.
|
|
6
|
+
* By checking `isPointerInsideReactTreeRef` we can determine if the event happened outside the subtree of the node, saving some element-comparisons.
|
|
7
|
+
*/
|
|
8
|
+
export declare function usePointerDownOutside(callback?: (event: CustomPointerDownEvent) => void, ownerDocument?: Document): {
|
|
9
|
+
onPointerDownCapture: () => boolean;
|
|
10
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
2
|
+
import { useCallbackRef } from "../../../util/hooks/index.js";
|
|
3
|
+
import { CUSTOM_EVENTS, dispatchCustomEvent, } from "./dispatchCustomEvent.js";
|
|
4
|
+
/**
|
|
5
|
+
* Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
|
|
6
|
+
* to mimic layer dismissing behaviour present in OS.
|
|
7
|
+
* Returns props to pass to the node we want to check for outside events.
|
|
8
|
+
* By checking `isPointerInsideReactTreeRef` we can determine if the event happened outside the subtree of the node, saving some element-comparisons.
|
|
9
|
+
*/
|
|
10
|
+
export function usePointerDownOutside(callback, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
|
|
11
|
+
const handlePointerDownOutside = useCallbackRef(callback);
|
|
12
|
+
const isPointerInsideReactTreeRef = useRef(false);
|
|
13
|
+
const handleClickRef = useRef(() => { });
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
const handlePointerDown = (event) => {
|
|
16
|
+
/**
|
|
17
|
+
* The `DismisableLayer`-API is based on the ability to stop events from propagating and in the end calling `onDismiss`
|
|
18
|
+
* if `usePointerDownOutside` runs `event.preventDefault()`.
|
|
19
|
+
*
|
|
20
|
+
* Altrough `pointerdown` is already a cancelable event,
|
|
21
|
+
* to to make sure the batching of events works corretly with `focusIn` in `useFocusOutside`,
|
|
22
|
+
* we still use a custom event like in `useFocusOutside`.
|
|
23
|
+
*
|
|
24
|
+
* Since pointer-events are `discrete` events in React: https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L318
|
|
25
|
+
* we need to to use flushSync to ensure that the event is dispatched before the next event is raised.
|
|
26
|
+
*/
|
|
27
|
+
function dispatchPointerEvent() {
|
|
28
|
+
dispatchCustomEvent(CUSTOM_EVENTS.POINTER_DOWN_OUTSIDE, handlePointerDownOutside, { originalEvent: event }, { discrete: true });
|
|
29
|
+
}
|
|
30
|
+
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
31
|
+
/**
|
|
32
|
+
* On touch devices, we delay reactivating pointer-events to account for the browser's delay in executing events after touch ends.
|
|
33
|
+
* This also handles cancellations when no click event is raised due to scrolling or long-pressing.
|
|
34
|
+
* We continuously remove the previous listener as we can't be sure it was raised and cleaned up.
|
|
35
|
+
*/
|
|
36
|
+
if (event.pointerType === "touch") {
|
|
37
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
38
|
+
handleClickRef.current = dispatchPointerEvent;
|
|
39
|
+
ownerDocument.addEventListener("click", handleClickRef.current, {
|
|
40
|
+
once: true,
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
dispatchPointerEvent();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
// We need to remove the event listener in case the outside click has been canceled.
|
|
49
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
50
|
+
}
|
|
51
|
+
isPointerInsideReactTreeRef.current = false;
|
|
52
|
+
};
|
|
53
|
+
/**
|
|
54
|
+
* If this hook executes in a component that mounts via a `pointerdown` event, the event
|
|
55
|
+
* would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
|
|
56
|
+
* this by delaying the event listener registration on the document.
|
|
57
|
+
* This is not React specific, but rather how the DOM works, ie:
|
|
58
|
+
* ```
|
|
59
|
+
* button.addEventListener('pointerdown', () => {
|
|
60
|
+
* console.log('I will log');
|
|
61
|
+
* document.addEventListener('pointerdown', () => {
|
|
62
|
+
* console.log('I will also log');
|
|
63
|
+
* })
|
|
64
|
+
* });
|
|
65
|
+
*/
|
|
66
|
+
const timerId = window.setTimeout(() => {
|
|
67
|
+
ownerDocument.addEventListener("pointerdown", handlePointerDown);
|
|
68
|
+
}, 0);
|
|
69
|
+
return () => {
|
|
70
|
+
window.clearTimeout(timerId);
|
|
71
|
+
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
|
|
72
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
73
|
+
};
|
|
74
|
+
}, [ownerDocument, handlePointerDownOutside]);
|
|
75
|
+
return {
|
|
76
|
+
// ensures we check React component tree (not just DOM tree)
|
|
77
|
+
onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
//# sourceMappingURL=usePointerDownOutside.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePointerDownOutside.js","sourceRoot":"","sources":["../../../../src/overlay/dismiss/util/usePointerDownOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,aAAa,EAEb,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CACnC,QAAkD,EAClD,gBAA0B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ;IAE9C,MAAM,wBAAwB,GAAG,cAAc,CAAC,QAAQ,CAAkB,CAAC;IAC3E,MAAM,2BAA2B,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,MAAM,CAAkC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,CAAC,KAAmB,EAAE,EAAE;YAChD;;;;;;;;;;eAUG;YACH,SAAS,oBAAoB;gBAC3B,mBAAmB,CACjB,aAAa,CAAC,oBAAoB,EAClC,wBAAwB,EACxB,EAAE,aAAa,EAAE,KAAK,EAAE,EACxB,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB,CAAC;YACJ,CAAC;YAED,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,2BAA2B,CAAC,OAAO,EAAE,CAAC;gBACzD;;;;mBAIG;gBACH,IAAI,KAAK,CAAC,WAAW,KAAK,OAAO,EAAE,CAAC;oBAClC,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;oBACnE,cAAc,CAAC,OAAO,GAAG,oBAAoB,CAAC;oBAC9C,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE;wBAC9D,IAAI,EAAE,IAAI;qBACX,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,oBAAoB,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,oFAAoF;gBACpF,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;YACrE,CAAC;YACD,2BAA2B,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9C,CAAC,CAAC;QAEF;;;;;;;;;;;;WAYG;QACH,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrC,aAAa,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;QACnE,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7B,aAAa,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;YACpE,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACrE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAE9C,OAAO;QACL,4DAA4D;QAC5D,oBAAoB,EAAE,GAAG,EAAE,CAAC,CAAC,2BAA2B,CAAC,OAAO,GAAG,IAAI,CAAC;KACzE,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
import { AsChildProps } from "../../util/types/index.js";
|
|
3
|
+
import { type Align, type Measurable, type Side } from "./Floating.utils.js";
|
|
4
|
+
/**
|
|
5
|
+
* Floating Root
|
|
6
|
+
*/
|
|
7
|
+
type FloatingContextValue = {
|
|
8
|
+
anchor: Measurable | null;
|
|
9
|
+
onAnchorChange: (anchor: Measurable | null) => void;
|
|
10
|
+
};
|
|
11
|
+
export declare const FloatingProvider: React.ForwardRefExoticComponent<FloatingContextValue & {
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
} & React.RefAttributes<unknown>>, useFloatingContext: <S extends boolean = true>(strict?: S) => S extends true ? FloatingContextValue : FloatingContextValue | undefined;
|
|
14
|
+
interface FloatingProps {
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
interface FloatingComponent extends React.FC<FloatingProps> {
|
|
18
|
+
Anchor: typeof FloatingAnchor;
|
|
19
|
+
Content: typeof FloatingContent;
|
|
20
|
+
}
|
|
21
|
+
declare const Floating: FloatingComponent;
|
|
22
|
+
/**
|
|
23
|
+
* Floating Anchor
|
|
24
|
+
*/
|
|
25
|
+
type FloatingAnchorProps = HTMLAttributes<HTMLDivElement> & AsChildProps & {
|
|
26
|
+
virtualRef?: React.RefObject<Measurable>;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* `FloatingAnchor` provides an anchor for a Floating instance.
|
|
30
|
+
* Allows anchoring to non-DOM nodes like a cursor position when used with `virtualRef`.
|
|
31
|
+
*/
|
|
32
|
+
declare const FloatingAnchor: React.ForwardRefExoticComponent<FloatingAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
33
|
+
type Boundary = Element | null;
|
|
34
|
+
interface FloatingContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
35
|
+
side?: Side;
|
|
36
|
+
sideOffset?: number;
|
|
37
|
+
align?: Align;
|
|
38
|
+
alignOffset?: number;
|
|
39
|
+
avoidCollisions?: boolean;
|
|
40
|
+
collisionBoundary?: Boundary | Boundary[];
|
|
41
|
+
collisionPadding?: number | Partial<Record<Side, number>>;
|
|
42
|
+
hideWhenDetached?: boolean;
|
|
43
|
+
updatePositionStrategy?: "optimized" | "always";
|
|
44
|
+
onPlaced?: () => void;
|
|
45
|
+
arrow?: {
|
|
46
|
+
className?: string;
|
|
47
|
+
padding?: number;
|
|
48
|
+
width: number;
|
|
49
|
+
height: number;
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
declare const FloatingContent: React.ForwardRefExoticComponent<FloatingContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
53
|
+
export { Floating };
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { autoUpdate, flip, arrow as floatingArrow, hide, limitShift, offset, shift, size, useFloating, } from "@floating-ui/react-dom";
|
|
13
|
+
import React, { forwardRef, useEffect, useRef, useState, } from "react";
|
|
14
|
+
import { Slot } from "../../util/Slot.js";
|
|
15
|
+
import { createContext } from "../../util/create-context.js";
|
|
16
|
+
import { useCallbackRef, useClientLayoutEffect, useMergeRefs, } from "../../util/hooks/index.js";
|
|
17
|
+
import { getSideAndAlignFromPlacement, transformOrigin, } from "./Floating.utils.js";
|
|
18
|
+
export const [FloatingProvider, useFloatingContext] = createContext({
|
|
19
|
+
name: "FloatingContext",
|
|
20
|
+
hookName: "useFloating",
|
|
21
|
+
providerName: "FloatingProvider",
|
|
22
|
+
});
|
|
23
|
+
const Floating = ({ children }) => {
|
|
24
|
+
const [anchor, setAnchor] = useState(null);
|
|
25
|
+
return (React.createElement(FloatingProvider, { anchor: anchor, onAnchorChange: setAnchor }, children));
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* `FloatingAnchor` provides an anchor for a Floating instance.
|
|
29
|
+
* Allows anchoring to non-DOM nodes like a cursor position when used with `virtualRef`.
|
|
30
|
+
*/
|
|
31
|
+
const FloatingAnchor = forwardRef((_a, forwardedRef) => {
|
|
32
|
+
var { virtualRef, asChild } = _a, rest = __rest(_a, ["virtualRef", "asChild"]);
|
|
33
|
+
const context = useFloatingContext();
|
|
34
|
+
const ref = useRef(null);
|
|
35
|
+
const mergedRef = useMergeRefs(forwardedRef, ref);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
// Allows anchoring the floating to non-DOM nodes like a cursor position.
|
|
38
|
+
// We replace `anchorRef` with a virtual ref in such cases.
|
|
39
|
+
context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
|
|
40
|
+
});
|
|
41
|
+
const Comp = asChild ? Slot : "div";
|
|
42
|
+
return virtualRef ? null : React.createElement(Comp, Object.assign({ ref: mergedRef }, rest));
|
|
43
|
+
});
|
|
44
|
+
/**
|
|
45
|
+
* Floating Arrow
|
|
46
|
+
*/
|
|
47
|
+
const OPPOSITE_SIDE = {
|
|
48
|
+
top: "bottom",
|
|
49
|
+
right: "left",
|
|
50
|
+
bottom: "top",
|
|
51
|
+
left: "right",
|
|
52
|
+
};
|
|
53
|
+
const FloatingArrow = ({ width, height, className }) => {
|
|
54
|
+
const context = useFloatingContentContext();
|
|
55
|
+
const side = OPPOSITE_SIDE[context.placedSide];
|
|
56
|
+
return (React.createElement("span", { ref: context.onArrowChange, style: {
|
|
57
|
+
position: "absolute",
|
|
58
|
+
left: context.arrowX,
|
|
59
|
+
top: context.arrowY,
|
|
60
|
+
[side]: 0,
|
|
61
|
+
transformOrigin: {
|
|
62
|
+
top: "",
|
|
63
|
+
right: "0 0",
|
|
64
|
+
bottom: "center 0",
|
|
65
|
+
left: "100% 0",
|
|
66
|
+
}[context.placedSide],
|
|
67
|
+
transform: {
|
|
68
|
+
top: "translateY(100%)",
|
|
69
|
+
right: "translateY(50%) rotate(90deg) translateX(-50%)",
|
|
70
|
+
bottom: `rotate(180deg)`,
|
|
71
|
+
left: "translateY(50%) rotate(-90deg) translateX(50%)",
|
|
72
|
+
}[context.placedSide],
|
|
73
|
+
visibility: context.hideArrow ? "hidden" : undefined,
|
|
74
|
+
}, "aria-hidden": true },
|
|
75
|
+
React.createElement("svg", { className: className, width: width, height: height, viewBox: "0 0 30 10", preserveAspectRatio: "none", style: { display: "block" } },
|
|
76
|
+
React.createElement("polygon", { points: "0,0 30,0 15,10" }))));
|
|
77
|
+
};
|
|
78
|
+
const [FloatingContentProvider, useFloatingContentContext] = createContext({
|
|
79
|
+
name: "FloatingContentContext",
|
|
80
|
+
hookName: "useFloatingContentContext",
|
|
81
|
+
providerName: "FloatingContentProvider",
|
|
82
|
+
});
|
|
83
|
+
const FloatingContent = forwardRef((_a, forwardedRef) => {
|
|
84
|
+
var _b, _c, _d, _e, _f, _g;
|
|
85
|
+
var { children, side = "bottom", sideOffset = 0, align = "center", alignOffset = 0, avoidCollisions = true, collisionBoundary = [], collisionPadding: collisionPaddingProp = 0, hideWhenDetached = false, updatePositionStrategy = "optimized", onPlaced, arrow: _arrow } = _a, contentProps = __rest(_a, ["children", "side", "sideOffset", "align", "alignOffset", "avoidCollisions", "collisionBoundary", "collisionPadding", "hideWhenDetached", "updatePositionStrategy", "onPlaced", "arrow"]);
|
|
86
|
+
const context = useFloatingContext();
|
|
87
|
+
const [content, setContent] = useState(null);
|
|
88
|
+
const mergeRefs = useMergeRefs(forwardedRef, setContent);
|
|
89
|
+
const arrowDefaults = Object.assign({ padding: 5, width: 0, height: 0 }, _arrow);
|
|
90
|
+
const [arrow, setArrow] = useState(null);
|
|
91
|
+
const arrowWidth = arrowDefaults.width;
|
|
92
|
+
const arrowHeight = arrowDefaults.height;
|
|
93
|
+
const desiredPlacement = (side +
|
|
94
|
+
(align !== "center" ? "-" + align : ""));
|
|
95
|
+
const collisionPadding = typeof collisionPaddingProp === "number"
|
|
96
|
+
? collisionPaddingProp
|
|
97
|
+
: Object.assign({ top: 0, right: 0, bottom: 0, left: 0 }, collisionPaddingProp);
|
|
98
|
+
const boundary = Array.isArray(collisionBoundary)
|
|
99
|
+
? collisionBoundary
|
|
100
|
+
: [collisionBoundary];
|
|
101
|
+
const hasExplicitBoundaries = boundary.length > 0;
|
|
102
|
+
/**
|
|
103
|
+
* .filter(x => x !== null) does not narrow the type of the array enough.
|
|
104
|
+
*/
|
|
105
|
+
function isNotNull(value) {
|
|
106
|
+
return value !== null;
|
|
107
|
+
}
|
|
108
|
+
const detectOverflowOptions = {
|
|
109
|
+
padding: collisionPadding,
|
|
110
|
+
boundary: boundary.filter(isNotNull),
|
|
111
|
+
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
|
|
112
|
+
altBoundary: hasExplicitBoundaries,
|
|
113
|
+
};
|
|
114
|
+
const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
|
|
115
|
+
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
|
|
116
|
+
strategy: "fixed",
|
|
117
|
+
placement: desiredPlacement,
|
|
118
|
+
whileElementsMounted: (...args) => {
|
|
119
|
+
const cleanup = autoUpdate(...args, {
|
|
120
|
+
animationFrame: updatePositionStrategy === "always",
|
|
121
|
+
});
|
|
122
|
+
return cleanup;
|
|
123
|
+
},
|
|
124
|
+
elements: {
|
|
125
|
+
reference: context.anchor,
|
|
126
|
+
},
|
|
127
|
+
middleware: [
|
|
128
|
+
offset({
|
|
129
|
+
mainAxis: sideOffset + arrowHeight,
|
|
130
|
+
alignmentAxis: alignOffset,
|
|
131
|
+
}),
|
|
132
|
+
avoidCollisions &&
|
|
133
|
+
shift(Object.assign({ mainAxis: true, crossAxis: false, limiter: limitShift() }, detectOverflowOptions)),
|
|
134
|
+
avoidCollisions && flip(Object.assign({}, detectOverflowOptions)),
|
|
135
|
+
size(Object.assign(Object.assign({}, detectOverflowOptions), { apply: ({ elements, rects, availableWidth, availableHeight }) => {
|
|
136
|
+
const { width: anchorWidth, height: anchorHeight } = rects.reference;
|
|
137
|
+
const contentStyle = elements.floating.style;
|
|
138
|
+
/**
|
|
139
|
+
* Allows styling and animations based on the available space.
|
|
140
|
+
*/
|
|
141
|
+
contentStyle.setProperty("--ac-floating-available-width", `${availableWidth}px`);
|
|
142
|
+
contentStyle.setProperty("--ac-floating-available-height", `${availableHeight}px`);
|
|
143
|
+
contentStyle.setProperty("--ac-floating-anchor-width", `${anchorWidth}px`);
|
|
144
|
+
contentStyle.setProperty("--ac-floating-anchor-height", `${anchorHeight}px`);
|
|
145
|
+
} })),
|
|
146
|
+
arrow &&
|
|
147
|
+
floatingArrow({ element: arrow, padding: arrowDefaults.padding }),
|
|
148
|
+
transformOrigin({ arrowWidth, arrowHeight }),
|
|
149
|
+
hideWhenDetached &&
|
|
150
|
+
hide(Object.assign({ strategy: "referenceHidden" }, detectOverflowOptions)),
|
|
151
|
+
],
|
|
152
|
+
});
|
|
153
|
+
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
154
|
+
const handlePlaced = useCallbackRef(onPlaced);
|
|
155
|
+
useClientLayoutEffect(() => {
|
|
156
|
+
isPositioned && (handlePlaced === null || handlePlaced === void 0 ? void 0 : handlePlaced());
|
|
157
|
+
}, [isPositioned, handlePlaced]);
|
|
158
|
+
const arrowX = (_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
|
|
159
|
+
const arrowY = (_c = middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
|
|
160
|
+
const cannotCenterArrow = ((_d = middlewareData.arrow) === null || _d === void 0 ? void 0 : _d.centerOffset) !== 0;
|
|
161
|
+
const [contentZIndex, setContentZIndex] = useState();
|
|
162
|
+
useClientLayoutEffect(() => {
|
|
163
|
+
if (content)
|
|
164
|
+
setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
165
|
+
}, [content]);
|
|
166
|
+
return (React.createElement("div", { ref: refs.setFloating, "data-aksel-floating-content-wrapper": "", style: Object.assign(Object.assign({}, floatingStyles), { transform: isPositioned
|
|
167
|
+
? floatingStyles.transform
|
|
168
|
+
: "translate(0, -200%)", minWidth: "max-content", zIndex: contentZIndex, ["--ac-floating-transform-origin"]: [
|
|
169
|
+
(_e = middlewareData.transformOrigin) === null || _e === void 0 ? void 0 : _e.x,
|
|
170
|
+
(_f = middlewareData.transformOrigin) === null || _f === void 0 ? void 0 : _f.y,
|
|
171
|
+
].join(" ") }),
|
|
172
|
+
// Floating UI uses the `dir` attribute on the reference/floating node for logical alignment.
|
|
173
|
+
// This attribute is necessary for both portalled and inline calculations.
|
|
174
|
+
dir: "ltr" },
|
|
175
|
+
React.createElement(FloatingContentProvider, { placedSide: placedSide, onArrowChange: setArrow, arrowX: arrowX, arrowY: arrowY, hideArrow: cannotCenterArrow },
|
|
176
|
+
React.createElement("div", Object.assign({ ref: mergeRefs, "data-side": placedSide, "data-align": placedAlign }, contentProps, { style: Object.assign(Object.assign({}, contentProps.style), {
|
|
177
|
+
// if the FloatingContent hasn't been placed yet (not all measurements done)
|
|
178
|
+
// we prevent animations so that users's animation don't kick in too early referring wrong sides
|
|
179
|
+
animation: !isPositioned ? "none" : undefined,
|
|
180
|
+
// hide the content if using the hide middleware and should be hidden
|
|
181
|
+
opacity: ((_g = middlewareData.hide) === null || _g === void 0 ? void 0 : _g.referenceHidden) ? 0 : undefined }) }),
|
|
182
|
+
children,
|
|
183
|
+
(_arrow === null || _arrow === void 0 ? void 0 : _arrow.height) && (_arrow === null || _arrow === void 0 ? void 0 : _arrow.width) && (React.createElement(FloatingArrow, { width: _arrow.width, height: _arrow.height, className: _arrow.className }))))));
|
|
184
|
+
});
|
|
185
|
+
Floating.Anchor = FloatingAnchor;
|
|
186
|
+
Floating.Content = FloatingContent;
|
|
187
|
+
export { Floating };
|
|
188
|
+
//# sourceMappingURL=Floating.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Floating.js","sourceRoot":"","sources":["../../../src/overlays/floating/Floating.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Middleware, Placement } from "@floating-ui/react-dom";
|
|
2
|
+
declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
|
|
3
|
+
declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
|
|
4
|
+
type Side = (typeof SIDE_OPTIONS)[number];
|
|
5
|
+
type Align = (typeof ALIGN_OPTIONS)[number];
|
|
6
|
+
type Measurable = {
|
|
7
|
+
getBoundingClientRect(): DOMRect;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* `transformOrigin` is a custom middleware for floating-ui that calculates the transform origin of the floating-element.
|
|
11
|
+
*/
|
|
12
|
+
declare function transformOrigin(options: {
|
|
13
|
+
arrowWidth: number;
|
|
14
|
+
arrowHeight: number;
|
|
15
|
+
}): Middleware;
|
|
16
|
+
declare function getSideAndAlignFromPlacement(placement: Placement): readonly ["left" | "right" | "bottom" | "top", "center" | "start" | "end"];
|
|
17
|
+
export { getSideAndAlignFromPlacement, transformOrigin };
|
|
18
|
+
export type { Side, Align, Measurable };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
|
|
2
|
+
const ALIGN_OPTIONS = ["start", "center", "end"];
|
|
3
|
+
/**
|
|
4
|
+
* `transformOrigin` is a custom middleware for floating-ui that calculates the transform origin of the floating-element.
|
|
5
|
+
*/
|
|
6
|
+
function transformOrigin(options) {
|
|
7
|
+
return {
|
|
8
|
+
name: "transformOrigin",
|
|
9
|
+
options,
|
|
10
|
+
fn(data) {
|
|
11
|
+
var _a, _b, _c, _d, _e;
|
|
12
|
+
const { placement, rects, middlewareData } = data;
|
|
13
|
+
const cannotCenterArrow = ((_a = middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.centerOffset) !== 0;
|
|
14
|
+
const isArrowHidden = cannotCenterArrow;
|
|
15
|
+
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
|
|
16
|
+
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
|
|
17
|
+
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
18
|
+
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
|
|
19
|
+
const arrowXCenter = ((_c = (_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0) + arrowWidth / 2;
|
|
20
|
+
const arrowYCenter = ((_e = (_d = middlewareData.arrow) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0) + arrowHeight / 2;
|
|
21
|
+
let x = "";
|
|
22
|
+
let y = "";
|
|
23
|
+
if (placedSide === "bottom") {
|
|
24
|
+
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
25
|
+
y = `${-arrowHeight}px`;
|
|
26
|
+
}
|
|
27
|
+
else if (placedSide === "top") {
|
|
28
|
+
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
29
|
+
y = `${rects.floating.height + arrowHeight}px`;
|
|
30
|
+
}
|
|
31
|
+
else if (placedSide === "right") {
|
|
32
|
+
x = `${-arrowHeight}px`;
|
|
33
|
+
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
34
|
+
}
|
|
35
|
+
else if (placedSide === "left") {
|
|
36
|
+
x = `${rects.floating.width + arrowHeight}px`;
|
|
37
|
+
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
38
|
+
}
|
|
39
|
+
return { data: { x, y } };
|
|
40
|
+
},
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
function getSideAndAlignFromPlacement(placement) {
|
|
44
|
+
const [side, align = "center"] = placement.split("-");
|
|
45
|
+
return [side, align];
|
|
46
|
+
}
|
|
47
|
+
export { getSideAndAlignFromPlacement, transformOrigin };
|
|
48
|
+
//# sourceMappingURL=Floating.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Floating.utils.js","sourceRoot":"","sources":["../../../src/overlays/floating/Floating.utils.ts"],"names":[],"mappings":"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"}
|
package/esm/popover/Popover.js
CHANGED
|
@@ -9,12 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { autoUpdate, arrow as flArrow, offset as flOffset, flip, shift,
|
|
12
|
+
import { autoUpdate, arrow as flArrow, offset as flOffset, flip, shift, useFloating, } from "@floating-ui/react";
|
|
13
13
|
import cl from "clsx";
|
|
14
|
-
import React, { forwardRef,
|
|
14
|
+
import React, { forwardRef, useContext, useRef } from "react";
|
|
15
15
|
import { DateContext } from "../date/context/index.js";
|
|
16
16
|
import { useModalContext } from "../modal/Modal.context.js";
|
|
17
|
-
import {
|
|
17
|
+
import { DismissableLayer } from "../overlay/dismiss/DismissableLayer.js";
|
|
18
|
+
import { useClientLayoutEffect } from "../util/hooks/index.js";
|
|
18
19
|
import { useMergeRefs } from "../util/hooks/useMergeRefs.js";
|
|
19
20
|
import PopoverContent from "./PopoverContent.js";
|
|
20
21
|
/**
|
|
@@ -44,11 +45,10 @@ export const Popover = forwardRef((_a, ref) => {
|
|
|
44
45
|
const isInDatepicker = useContext(DateContext) !== null;
|
|
45
46
|
const chosenStrategy = userStrategy !== null && userStrategy !== void 0 ? userStrategy : (isInModal ? "fixed" : "absolute");
|
|
46
47
|
const chosenFlip = isInDatepicker ? false : _flip;
|
|
47
|
-
const {
|
|
48
|
+
const { update, refs, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, floatingStyles, } = useFloating({
|
|
48
49
|
strategy: chosenStrategy,
|
|
49
50
|
placement,
|
|
50
51
|
open,
|
|
51
|
-
onOpenChange: () => onClose(),
|
|
52
52
|
middleware: [
|
|
53
53
|
flOffset(offset !== null && offset !== void 0 ? offset : (arrow ? 16 : 4)),
|
|
54
54
|
chosenFlip &&
|
|
@@ -57,10 +57,6 @@ export const Popover = forwardRef((_a, ref) => {
|
|
|
57
57
|
flArrow({ element: arrowRef, padding: 8 }),
|
|
58
58
|
],
|
|
59
59
|
});
|
|
60
|
-
const { getFloatingProps } = useInteractions([
|
|
61
|
-
useClick(context),
|
|
62
|
-
useDismiss(context),
|
|
63
|
-
]);
|
|
64
60
|
useClientLayoutEffect(() => {
|
|
65
61
|
refs.setReference(anchorEl);
|
|
66
62
|
}, [anchorEl]);
|
|
@@ -71,34 +67,23 @@ export const Popover = forwardRef((_a, ref) => {
|
|
|
71
67
|
const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update);
|
|
72
68
|
return () => cleanup();
|
|
73
69
|
}, [refs.floating, refs.reference, update, open, anchorEl]);
|
|
74
|
-
useEventListener("focusin", useCallback((e) => {
|
|
75
|
-
if (e.target instanceof HTMLElement &&
|
|
76
|
-
![anchorEl, refs.floating.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target)) &&
|
|
77
|
-
!e.target.contains(refs.floating.current)) {
|
|
78
|
-
open && onClose();
|
|
79
|
-
}
|
|
80
|
-
}, [anchorEl, refs, open, onClose]));
|
|
81
70
|
const staticSide = {
|
|
82
71
|
top: "bottom",
|
|
83
72
|
right: "left",
|
|
84
73
|
bottom: "top",
|
|
85
74
|
left: "right",
|
|
86
75
|
}[flPlacement.split("-")[0]];
|
|
87
|
-
return (React.createElement(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
children,
|
|
99
|
-
arrow && (React.createElement("div", { ref: (node) => {
|
|
100
|
-
arrowRef.current = node;
|
|
101
|
-
}, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-popover__arrow" }))));
|
|
76
|
+
return (React.createElement(DismissableLayer, { asChild: true, safeZone: {
|
|
77
|
+
anchor: anchorEl,
|
|
78
|
+
dismissable: refs.floating.current,
|
|
79
|
+
}, onDismiss: () => open && (onClose === null || onClose === void 0 ? void 0 : onClose()), enabled: open },
|
|
80
|
+
React.createElement("div", Object.assign({ ref: floatingRef }, rest, { className: cl("navds-popover", className, {
|
|
81
|
+
"navds-popover--hidden": !open || !anchorEl,
|
|
82
|
+
}), style: Object.assign(Object.assign({}, rest.style), floatingStyles), "data-placement": flPlacement, "aria-hidden": !open || !anchorEl }),
|
|
83
|
+
children,
|
|
84
|
+
arrow && (React.createElement("div", { ref: (node) => {
|
|
85
|
+
arrowRef.current = node;
|
|
86
|
+
}, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-popover__arrow" })))));
|
|
102
87
|
});
|
|
103
88
|
Popover.Content = PopoverContent;
|
|
104
89
|
export default Popover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,UAAU,EACV,KAAK,IAAI,OAAO,EAChB,MAAM,IAAI,QAAQ,EAClB,IAAI,EACJ,KAAK,EACL,
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/popover/Popover.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
interface ProgressBarPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
|
|
3
|
+
/**
|
|
4
|
+
* Changes height.
|
|
5
|
+
* @default "medium"
|
|
6
|
+
*/
|
|
7
|
+
size?: "large" | "medium" | "small";
|
|
8
|
+
/**
|
|
9
|
+
* Current progress. If set, the `simulated` prop overrides `value`.
|
|
10
|
+
*/
|
|
11
|
+
value?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Maximum progress.
|
|
14
|
+
* @default 100
|
|
15
|
+
*/
|
|
16
|
+
valueMax?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Visually simulates loading.
|
|
19
|
+
* ProgressBar grows with a preset animation for set number of seconds,
|
|
20
|
+
* then shows an indeterminate animation on timeout.
|
|
21
|
+
*/
|
|
22
|
+
simulated?: {
|
|
23
|
+
/**
|
|
24
|
+
* Duration in seconds.
|
|
25
|
+
*/
|
|
26
|
+
seconds: number;
|
|
27
|
+
/**
|
|
28
|
+
* Callback function when progress is indeterminate.
|
|
29
|
+
*/
|
|
30
|
+
onTimeout: () => void;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* String ID of the element that labels the progress bar.
|
|
34
|
+
* Not needed if `aria-label` is used.
|
|
35
|
+
*/
|
|
36
|
+
"aria-labelledby"?: string;
|
|
37
|
+
/**
|
|
38
|
+
* String value that labels the progress bar.
|
|
39
|
+
* Not needed if `aria-labelledby` is used.
|
|
40
|
+
*/
|
|
41
|
+
"aria-label"?: string;
|
|
42
|
+
}
|
|
43
|
+
export type ProgressBarProps = ProgressBarPropsBase & ({
|
|
44
|
+
"aria-hidden": true;
|
|
45
|
+
} | {
|
|
46
|
+
"aria-labelledby": string;
|
|
47
|
+
"aria-label"?: never;
|
|
48
|
+
} | {
|
|
49
|
+
"aria-label": string;
|
|
50
|
+
"aria-labelledby"?: never;
|
|
51
|
+
});
|
|
52
|
+
/**
|
|
53
|
+
* ProgressBar
|
|
54
|
+
* A component for visualizing progression in a process.
|
|
55
|
+
*
|
|
56
|
+
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
|
|
57
|
+
* @see 🏷️ {@link ProgressBarProps}
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* // For loading content with an approximate duration in sec.
|
|
61
|
+
* <ProgressBar simulated={{
|
|
62
|
+
* seconds: 30,
|
|
63
|
+
* onTimeout: () => console.log("Oops, this is taking more time than expected!")
|
|
64
|
+
* }}
|
|
65
|
+
* />
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // As a step indicator for forms, questionnaires, etc.
|
|
69
|
+
* <ProgressBar value={2} valueMax={7} />
|
|
70
|
+
*/
|
|
71
|
+
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
export default ProgressBar;
|