@navikt/ds-react 5.7.6 → 5.9.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/_docs.json +1824 -1758
- package/cjs/accordion/AccordionHeader.js +2 -2
- package/cjs/date/context/useDateInputContext.js +1 -5
- package/cjs/date/datepicker/DatePicker.js +26 -25
- package/cjs/date/hooks/useDatepicker.js +9 -17
- package/cjs/date/hooks/useMonthPicker.js +9 -17
- package/cjs/date/hooks/useRangeDatepicker.js +9 -20
- package/cjs/date/monthpicker/MonthPicker.js +11 -6
- package/cjs/date/{DateInput.js → parts/DateInput.js} +14 -10
- package/cjs/date/parts/DateWrapper.js +55 -0
- package/cjs/date/utils/labels.js +77 -1
- package/cjs/form/combobox/Combobox.js +2 -2
- package/cjs/form/combobox/ComboboxProvider.js +1 -2
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js +15 -14
- package/cjs/form/combobox/FilteredOptions/filtered-options-util.js +24 -0
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +24 -108
- package/cjs/form/combobox/FilteredOptions/useVirtualFocus.js +55 -0
- package/cjs/form/combobox/Input/Input.js +33 -16
- package/cjs/form/combobox/customOptionsContext.js +2 -3
- package/cjs/layout/sidemal-test/Sidebar.js +1 -1
- package/cjs/loader/Loader.js +1 -1
- package/cjs/modal/Modal.js +39 -15
- package/cjs/popover/Popover.js +5 -7
- package/cjs/tooltip/Tooltip.js +14 -3
- package/cjs/util/useMedia.js +30 -0
- package/esm/accordion/AccordionHeader.js +2 -2
- package/esm/accordion/AccordionHeader.js.map +1 -1
- package/esm/date/context/useDateInputContext.d.ts +6 -2
- package/esm/date/context/useDateInputContext.js +1 -5
- package/esm/date/context/useDateInputContext.js.map +1 -1
- package/esm/date/datepicker/DatePicker.d.ts +1 -1
- package/esm/date/datepicker/DatePicker.js +28 -27
- package/esm/date/datepicker/DatePicker.js.map +1 -1
- package/esm/date/datepicker/types.d.ts +0 -5
- package/esm/date/hooks/useDatepicker.d.ts +8 -5
- package/esm/date/hooks/useDatepicker.js +10 -18
- package/esm/date/hooks/useDatepicker.js.map +1 -1
- package/esm/date/hooks/useMonthPicker.d.ts +7 -4
- package/esm/date/hooks/useMonthPicker.js +10 -18
- package/esm/date/hooks/useMonthPicker.js.map +1 -1
- package/esm/date/hooks/useRangeDatepicker.d.ts +9 -3
- package/esm/date/hooks/useRangeDatepicker.js +10 -21
- package/esm/date/hooks/useRangeDatepicker.js.map +1 -1
- package/esm/date/index.d.ts +1 -1
- package/esm/date/index.js.map +1 -1
- package/esm/date/monthpicker/MonthPicker.d.ts +1 -1
- package/esm/date/monthpicker/MonthPicker.js +13 -8
- package/esm/date/monthpicker/MonthPicker.js.map +1 -1
- package/esm/date/monthpicker/types.d.ts +0 -5
- package/esm/date/{DateInput.d.ts → parts/DateInput.d.ts} +5 -1
- package/esm/date/{DateInput.js → parts/DateInput.js} +15 -11
- package/esm/date/parts/DateInput.js.map +1 -0
- package/esm/date/parts/DateWrapper.d.ts +15 -0
- package/esm/date/parts/DateWrapper.js +26 -0
- package/esm/date/parts/DateWrapper.js.map +1 -0
- package/esm/date/utils/labels.d.ts +2 -0
- package/esm/date/utils/labels.js +74 -0
- package/esm/date/utils/labels.js.map +1 -1
- package/esm/form/combobox/Combobox.js +2 -2
- package/esm/form/combobox/Combobox.js.map +1 -1
- package/esm/form/combobox/ComboboxProvider.js +1 -2
- package/esm/form/combobox/ComboboxProvider.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js +15 -14
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filtered-options-util.d.ts +12 -0
- package/esm/form/combobox/FilteredOptions/filtered-options-util.js +23 -0
- package/esm/form/combobox/FilteredOptions/filtered-options-util.js.map +1 -0
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +10 -13
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +25 -109
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/useVirtualFocus.d.ts +15 -0
- package/esm/form/combobox/FilteredOptions/useVirtualFocus.js +54 -0
- package/esm/form/combobox/FilteredOptions/useVirtualFocus.js.map +1 -0
- package/esm/form/combobox/Input/Input.js +33 -16
- package/esm/form/combobox/Input/Input.js.map +1 -1
- package/esm/form/combobox/customOptionsContext.d.ts +4 -1
- package/esm/form/combobox/customOptionsContext.js +2 -3
- package/esm/form/combobox/customOptionsContext.js.map +1 -1
- package/esm/layout/bleed/Bleed.d.ts +1 -1
- package/esm/layout/bleed/Bleed.js +1 -1
- package/esm/layout/bleed/Bleed.js.map +1 -1
- package/esm/layout/box/Box.d.ts +1 -2
- package/esm/layout/box/Box.js +1 -1
- package/esm/layout/box/Box.js.map +1 -1
- package/esm/layout/grid/HGrid.d.ts +1 -1
- package/esm/layout/grid/HGrid.js +1 -1
- package/esm/layout/grid/HGrid.js.map +1 -1
- package/esm/layout/responsive/Responsive.d.ts +1 -1
- package/esm/layout/sidemal-test/Sidebar.js +1 -1
- package/esm/layout/sidemal-test/Sidebar.js.map +1 -1
- package/esm/layout/stack/Stack.d.ts +1 -1
- package/esm/layout/stack/Stack.js +1 -1
- package/esm/layout/stack/Stack.js.map +1 -1
- package/esm/layout/utilities/css.d.ts +1 -8
- package/esm/layout/utilities/css.js.map +1 -1
- package/esm/layout/utilities/types.d.ts +9 -0
- package/esm/loader/Loader.d.ts +1 -1
- package/esm/loader/Loader.js +1 -1
- package/esm/modal/Modal.js +39 -15
- package/esm/modal/Modal.js.map +1 -1
- package/esm/modal/ModalContext.d.ts +1 -0
- package/esm/modal/ModalContext.js.map +1 -1
- package/esm/modal/types.d.ts +7 -0
- package/esm/popover/Popover.d.ts +0 -5
- package/esm/popover/Popover.js +5 -7
- package/esm/popover/Popover.js.map +1 -1
- package/esm/tooltip/Tooltip.js +16 -5
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/esm/util/useMedia.d.ts +8 -0
- package/esm/util/useMedia.js +27 -0
- package/esm/util/useMedia.js.map +1 -0
- package/package.json +3 -3
- package/src/accordion/AccordionHeader.tsx +3 -3
- package/src/date/context/useDateInputContext.tsx +5 -5
- package/src/date/datepicker/DatePicker.tsx +58 -65
- package/src/date/datepicker/datepicker.stories.tsx +37 -46
- package/src/date/datepicker/types.ts +0 -5
- package/src/date/hooks/useDatepicker.tsx +20 -25
- package/src/date/hooks/useMonthPicker.tsx +18 -24
- package/src/date/hooks/useRangeDatepicker.tsx +27 -30
- package/src/date/index.ts +1 -1
- package/src/date/monthpicker/MonthPicker.tsx +39 -43
- package/src/date/monthpicker/types.ts +0 -5
- package/src/date/{DateInput.tsx → parts/DateInput.tsx} +23 -12
- package/src/date/parts/DateWrapper.tsx +80 -0
- package/src/date/utils/labels.ts +83 -0
- package/src/form/combobox/Combobox.tsx +2 -2
- package/src/form/combobox/ComboboxProvider.tsx +1 -2
- package/src/form/combobox/FilteredOptions/FilteredOptions.tsx +28 -16
- package/src/form/combobox/FilteredOptions/filtered-options-util.ts +38 -0
- package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +71 -142
- package/src/form/combobox/FilteredOptions/useVirtualFocus.ts +87 -0
- package/src/form/combobox/Input/Input.tsx +40 -21
- package/src/form/combobox/combobox.stories.tsx +44 -0
- package/src/form/combobox/customOptionsContext.tsx +10 -5
- package/src/guide-panel/guidepanel.stories.tsx +2 -2
- package/src/layout/bleed/Bleed.tsx +2 -5
- package/src/layout/box/Box.tsx +1 -3
- package/src/layout/grid/HGrid.tsx +2 -6
- package/src/layout/responsive/Responsive.tsx +1 -1
- package/src/layout/sidemal-test/Sidebar.tsx +1 -1
- package/src/layout/stack/Stack.tsx +2 -6
- package/src/layout/utilities/css.ts +1 -36
- package/src/layout/utilities/types.ts +16 -0
- package/src/loader/Loader.tsx +1 -1
- package/src/modal/Modal.tsx +54 -21
- package/src/modal/ModalContext.ts +1 -0
- package/src/modal/modal.stories.tsx +30 -2
- package/src/modal/types.ts +7 -0
- package/src/popover/Popover.tsx +4 -12
- package/src/tooltip/Tooltip.tsx +18 -6
- package/src/util/__tests__/useMedia.test.tsx +19 -0
- package/src/util/useMedia.ts +38 -0
- package/cjs/date/hooks/useEscape.js +0 -23
- package/cjs/date/hooks/useOutsideClickHandler.js +0 -26
- package/esm/date/DateInput.js.map +0 -1
- package/esm/date/hooks/useEscape.d.ts +0 -2
- package/esm/date/hooks/useEscape.js +0 -20
- package/esm/date/hooks/useEscape.js.map +0 -1
- package/esm/date/hooks/useOutsideClickHandler.d.ts +0 -1
- package/esm/date/hooks/useOutsideClickHandler.js +0 -23
- package/esm/date/hooks/useOutsideClickHandler.js.map +0 -1
- package/src/date/hooks/useEscape.tsx +0 -30
- package/src/date/hooks/useOutsideClickHandler.tsx +0 -34
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, RefObject } from "react";
|
|
2
|
-
|
|
3
|
-
export const useEscape = (
|
|
4
|
-
open: boolean,
|
|
5
|
-
setOpen: (openState: boolean) => void,
|
|
6
|
-
focusRef: RefObject<HTMLElement>
|
|
7
|
-
) => {
|
|
8
|
-
const handleClose = useCallback(() => {
|
|
9
|
-
setOpen(false);
|
|
10
|
-
focusRef?.current && focusRef.current.focus();
|
|
11
|
-
}, [focusRef, setOpen]);
|
|
12
|
-
|
|
13
|
-
const escape = useCallback(
|
|
14
|
-
(event: KeyboardEvent) => {
|
|
15
|
-
if (open && event.key === "Escape") {
|
|
16
|
-
event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
|
|
17
|
-
handleClose();
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
[handleClose, open]
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
window.addEventListener("keydown", escape, false);
|
|
25
|
-
|
|
26
|
-
return () => {
|
|
27
|
-
window.removeEventListener("keydown", escape, false);
|
|
28
|
-
};
|
|
29
|
-
}, [escape]);
|
|
30
|
-
};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect } from "react";
|
|
2
|
-
|
|
3
|
-
export const useOutsideClickHandler = (
|
|
4
|
-
open: boolean,
|
|
5
|
-
setOpen: (openState: boolean) => void,
|
|
6
|
-
refs: Array<any>
|
|
7
|
-
) => {
|
|
8
|
-
const handleFocusIn = useCallback(
|
|
9
|
-
(e) => {
|
|
10
|
-
const composed = e.composedPath?.()?.[0];
|
|
11
|
-
if (!e?.target || !e?.target?.nodeType || !composed) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
if (
|
|
15
|
-
!refs.some(
|
|
16
|
-
(element) =>
|
|
17
|
-
element?.contains(e.target) || element?.contains(composed)
|
|
18
|
-
)
|
|
19
|
-
) {
|
|
20
|
-
open && setOpen(false);
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
[open, refs, setOpen]
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
window.addEventListener("focusin", handleFocusIn);
|
|
28
|
-
window.addEventListener("pointerdown", handleFocusIn);
|
|
29
|
-
return () => {
|
|
30
|
-
window?.removeEventListener?.("focusin", handleFocusIn);
|
|
31
|
-
window?.removeEventListener?.("pointerdown", handleFocusIn);
|
|
32
|
-
};
|
|
33
|
-
}, [handleFocusIn]);
|
|
34
|
-
};
|