@fremtind/jokul 0.28.1 → 0.30.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/build/build-stats.html +1 -1
- package/build/cjs/components/breadcrumb/index.d.cts +2 -4
- package/build/cjs/components/button/index.d.cts +1 -1
- package/build/cjs/components/button/types.cjs.map +1 -1
- package/build/cjs/components/button/types.d.cts +1 -2
- package/build/cjs/components/card/NavCard.cjs.map +1 -1
- package/build/cjs/components/card/NavCard.d.cts +1 -10
- package/build/cjs/components/card/index.d.cts +2 -2
- package/build/cjs/components/card/types.cjs.map +1 -1
- package/build/cjs/components/card/types.d.cts +8 -0
- package/build/cjs/components/combobox/Combobox.cjs.map +1 -1
- package/build/cjs/components/combobox/Combobox.d.cts +6 -7
- package/build/cjs/components/combobox/index.d.cts +1 -1
- package/build/cjs/components/cookie-consent/index.d.cts +2 -4
- package/build/cjs/components/datepicker/index.cjs +1 -1
- package/build/cjs/components/datepicker/index.d.cts +3 -3
- package/build/cjs/components/datepicker/types.d.cts +7 -0
- package/build/cjs/components/datepicker/utils.cjs +1 -1
- package/build/cjs/components/datepicker/utils.cjs.map +1 -1
- package/build/cjs/components/datepicker/utils.d.cts +0 -1
- package/build/cjs/components/datepicker/validation.cjs.map +1 -1
- package/build/cjs/components/datepicker/validation.d.cts +1 -8
- package/build/cjs/components/description-list/index.d.cts +1 -1
- package/build/cjs/components/expander/Expander.cjs.map +1 -1
- package/build/cjs/components/expander/Expander.d.cts +1 -2
- package/build/cjs/components/expander/index.d.cts +2 -4
- package/build/cjs/components/feedback/Feedback.cjs.map +1 -1
- package/build/cjs/components/feedback/Feedback.d.cts +4 -9
- package/build/cjs/components/feedback/followup/Followup.cjs.map +1 -1
- package/build/cjs/components/feedback/followup/Followup.d.cts +3 -14
- package/build/cjs/components/feedback/index.d.cts +3 -3
- package/build/cjs/components/feedback/presets.cjs.map +1 -1
- package/build/cjs/components/feedback/presets.d.cts +2 -5
- package/build/cjs/components/feedback/questions/ContactQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/ContactQuestion.d.cts +3 -28
- package/build/cjs/components/feedback/types.d.cts +42 -7
- package/build/cjs/components/icon-button/index.d.cts +1 -2
- package/build/cjs/components/image/index.d.cts +1 -3
- package/build/cjs/components/index.cjs +1 -1
- package/build/cjs/components/index.d.cts +1 -1
- package/build/cjs/components/input-panel/BasePanel.cjs +2 -0
- package/build/cjs/components/input-panel/BasePanel.cjs.map +1 -0
- package/build/cjs/components/input-panel/BasePanel.d.cts +10 -0
- package/build/cjs/components/input-panel/CheckboxPanel.cjs +2 -0
- package/build/cjs/components/input-panel/CheckboxPanel.cjs.map +1 -0
- package/build/cjs/components/input-panel/CheckboxPanel.d.cts +7 -0
- package/build/cjs/components/input-panel/RadioPanel.cjs +2 -0
- package/build/cjs/components/input-panel/RadioPanel.cjs.map +1 -0
- package/build/cjs/components/{radio-panel → input-panel}/RadioPanel.d.cts +2 -4
- package/build/cjs/components/input-panel/RadioPanelGroup.cjs +2 -0
- package/build/cjs/components/input-panel/RadioPanelGroup.cjs.map +1 -0
- package/build/cjs/components/input-panel/RadioPanelGroup.d.cts +4 -0
- package/build/cjs/components/input-panel/documentation/checkbox-panel/ControlledExample.d.cts +4 -0
- package/build/cjs/components/input-panel/documentation/checkbox-panel/UncontrolledExample.d.cts +4 -0
- package/build/cjs/components/input-panel/documentation/radio-panel/ControlledExample.d.cts +4 -0
- package/build/cjs/components/input-panel/documentation/radio-panel/UncontrolledExample.d.cts +4 -0
- package/build/cjs/components/input-panel/index.cjs +2 -0
- package/build/cjs/components/input-panel/index.d.cts +3 -0
- package/build/cjs/components/input-panel/radioPanelContext.cjs +2 -0
- package/build/cjs/components/input-panel/radioPanelContext.cjs.map +1 -0
- package/build/cjs/components/input-panel/radioPanelContext.d.cts +7 -0
- package/build/cjs/components/link-list/LinkList.cjs.map +1 -1
- package/build/cjs/components/link-list/LinkList.d.cts +2 -11
- package/build/cjs/components/link-list/index.d.cts +1 -0
- package/build/cjs/components/link-list/types.cjs +2 -0
- package/build/cjs/components/link-list/types.cjs.map +1 -0
- package/build/cjs/components/link-list/types.d.cts +11 -0
- package/build/cjs/components/list/index.d.cts +2 -3
- package/build/cjs/components/loader/index.d.cts +9 -18
- package/build/cjs/components/logo/index.d.cts +2 -4
- package/build/cjs/components/menu/Menu.cjs +1 -1
- package/build/cjs/components/menu/Menu.cjs.map +1 -1
- package/build/cjs/components/modal/Modal.cjs.map +1 -1
- package/build/cjs/components/modal/Modal.d.cts +8 -2
- package/build/cjs/components/modal/index.d.cts +2 -4
- package/build/cjs/components/pagination/Pagination.cjs.map +1 -1
- package/build/cjs/components/pagination/Pagination.d.cts +2 -1
- package/build/cjs/components/pagination/index.d.cts +1 -1
- package/build/cjs/components/popover/Popover.cjs.map +1 -1
- package/build/cjs/components/popover/Popover.d.cts +6 -6
- package/build/cjs/components/popover/index.d.cts +1 -1
- package/build/cjs/components/progress-bar/index.d.cts +2 -4
- package/build/cjs/components/radio-button/index.d.cts +3 -6
- package/build/cjs/components/select/Select.cjs.map +1 -1
- package/build/cjs/components/select/Select.d.cts +5 -6
- package/build/cjs/components/select/index.d.cts +2 -4
- package/build/cjs/components/summary-table/SummaryTable.cjs.map +1 -1
- package/build/cjs/components/summary-table/SummaryTable.d.cts +2 -2
- package/build/cjs/components/summary-table/index.d.cts +2 -2
- package/build/cjs/components/system-message/SystemMessage.cjs.map +1 -1
- package/build/cjs/components/system-message/SystemMessage.d.cts +5 -6
- package/build/cjs/components/system-message/index.d.cts +1 -1
- package/build/cjs/components/tabs/index.d.cts +6 -6
- package/build/cjs/components/tag/index.d.cts +1 -3
- package/build/cjs/components/text-input/BaseTextArea.cjs.map +1 -1
- package/build/cjs/components/text-input/BaseTextArea.d.cts +1 -2
- package/build/cjs/components/text-input/index.d.cts +2 -2
- package/build/cjs/components/toast/index.d.cts +1 -1
- package/build/cjs/components/toast/toastContext.cjs.map +1 -1
- package/build/cjs/components/toast/toastContext.d.cts +1 -13
- package/build/cjs/components/toast/types.d.cts +11 -0
- package/build/cjs/components/toggle-switch/ToggleSlider.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSlider.d.cts +2 -3
- package/build/cjs/components/toggle-switch/ToggleSwitch.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSwitch.d.cts +1 -1
- package/build/cjs/components/toggle-switch/index.d.cts +2 -2
- package/build/cjs/components/tooltip/Tooltip.cjs +1 -1
- package/build/cjs/components/tooltip/Tooltip.cjs.map +1 -1
- package/build/cjs/components/tooltip/Tooltip.d.cts +2 -2
- package/build/cjs/components/tooltip/TooltipContent.cjs +1 -1
- package/build/cjs/components/tooltip/TooltipContent.cjs.map +1 -1
- package/build/cjs/components/tooltip/TooltipTrigger.cjs +1 -1
- package/build/cjs/components/tooltip/TooltipTrigger.cjs.map +1 -1
- package/build/cjs/index.cjs +1 -1
- package/build/es/components/breadcrumb/index.d.ts +2 -4
- package/build/es/components/button/index.d.ts +1 -1
- package/build/es/components/button/types.d.ts +1 -2
- package/build/es/components/button/types.js.map +1 -1
- package/build/es/components/card/NavCard.d.ts +1 -10
- package/build/es/components/card/NavCard.js.map +1 -1
- package/build/es/components/card/index.d.ts +2 -2
- package/build/es/components/card/types.d.ts +8 -0
- package/build/es/components/card/types.js.map +1 -1
- package/build/es/components/combobox/Combobox.d.ts +6 -7
- package/build/es/components/combobox/Combobox.js.map +1 -1
- package/build/es/components/combobox/index.d.ts +1 -1
- package/build/es/components/cookie-consent/index.d.ts +2 -4
- package/build/es/components/datepicker/index.d.ts +3 -3
- package/build/es/components/datepicker/index.js +1 -1
- package/build/es/components/datepicker/types.d.ts +7 -0
- package/build/es/components/datepicker/utils.d.ts +0 -1
- package/build/es/components/datepicker/utils.js +1 -1
- package/build/es/components/datepicker/utils.js.map +1 -1
- package/build/es/components/datepicker/validation.d.ts +1 -8
- package/build/es/components/datepicker/validation.js.map +1 -1
- package/build/es/components/description-list/index.d.ts +1 -1
- package/build/es/components/expander/Expander.d.ts +1 -2
- package/build/es/components/expander/Expander.js.map +1 -1
- package/build/es/components/expander/index.d.ts +2 -4
- package/build/es/components/feedback/Feedback.d.ts +4 -9
- package/build/es/components/feedback/Feedback.js.map +1 -1
- package/build/es/components/feedback/followup/Followup.d.ts +3 -14
- package/build/es/components/feedback/followup/Followup.js.map +1 -1
- package/build/es/components/feedback/index.d.ts +3 -3
- package/build/es/components/feedback/presets.d.ts +2 -5
- package/build/es/components/feedback/presets.js.map +1 -1
- package/build/es/components/feedback/questions/ContactQuestion.d.ts +3 -28
- package/build/es/components/feedback/questions/ContactQuestion.js.map +1 -1
- package/build/es/components/feedback/types.d.ts +42 -7
- package/build/es/components/icon-button/index.d.ts +1 -2
- package/build/es/components/image/index.d.ts +1 -3
- package/build/es/components/index.d.ts +1 -1
- package/build/es/components/index.js +1 -1
- package/build/es/components/input-panel/BasePanel.d.ts +10 -0
- package/build/es/components/input-panel/BasePanel.js +2 -0
- package/build/es/components/input-panel/BasePanel.js.map +1 -0
- package/build/es/components/input-panel/CheckboxPanel.d.ts +7 -0
- package/build/es/components/input-panel/CheckboxPanel.js +2 -0
- package/build/es/components/input-panel/CheckboxPanel.js.map +1 -0
- package/build/es/components/{radio-panel → input-panel}/RadioPanel.d.ts +2 -4
- package/build/es/components/input-panel/RadioPanel.js +2 -0
- package/build/es/components/input-panel/RadioPanel.js.map +1 -0
- package/build/es/components/input-panel/RadioPanelGroup.d.ts +4 -0
- package/build/es/components/input-panel/RadioPanelGroup.js +2 -0
- package/build/es/components/input-panel/RadioPanelGroup.js.map +1 -0
- package/build/es/components/input-panel/documentation/checkbox-panel/ControlledExample.d.ts +4 -0
- package/build/es/components/input-panel/documentation/checkbox-panel/UncontrolledExample.d.ts +4 -0
- package/build/es/components/input-panel/documentation/radio-panel/ControlledExample.d.ts +4 -0
- package/build/es/components/input-panel/documentation/radio-panel/UncontrolledExample.d.ts +4 -0
- package/build/es/components/input-panel/index.d.ts +3 -0
- package/build/es/components/input-panel/index.js +2 -0
- package/build/es/components/input-panel/radioPanelContext.d.ts +7 -0
- package/build/es/components/input-panel/radioPanelContext.js +2 -0
- package/build/es/components/input-panel/radioPanelContext.js.map +1 -0
- package/build/es/components/link-list/LinkList.d.ts +2 -11
- package/build/es/components/link-list/LinkList.js.map +1 -1
- package/build/es/components/link-list/index.d.ts +1 -0
- package/build/es/components/link-list/types.d.ts +11 -0
- package/build/es/components/link-list/types.js +2 -0
- package/build/es/components/link-list/types.js.map +1 -0
- package/build/es/components/list/index.d.ts +2 -3
- package/build/es/components/loader/index.d.ts +9 -18
- package/build/es/components/logo/index.d.ts +2 -4
- package/build/es/components/menu/Menu.js +1 -1
- package/build/es/components/menu/Menu.js.map +1 -1
- package/build/es/components/modal/Modal.d.ts +8 -2
- package/build/es/components/modal/Modal.js.map +1 -1
- package/build/es/components/modal/index.d.ts +2 -4
- package/build/es/components/pagination/Pagination.d.ts +2 -1
- package/build/es/components/pagination/Pagination.js.map +1 -1
- package/build/es/components/pagination/index.d.ts +1 -1
- package/build/es/components/popover/Popover.d.ts +6 -6
- package/build/es/components/popover/Popover.js.map +1 -1
- package/build/es/components/popover/index.d.ts +1 -1
- package/build/es/components/progress-bar/index.d.ts +2 -4
- package/build/es/components/radio-button/index.d.ts +3 -6
- package/build/es/components/select/Select.d.ts +5 -6
- package/build/es/components/select/Select.js.map +1 -1
- package/build/es/components/select/index.d.ts +2 -4
- package/build/es/components/summary-table/SummaryTable.d.ts +2 -2
- package/build/es/components/summary-table/SummaryTable.js.map +1 -1
- package/build/es/components/summary-table/index.d.ts +2 -2
- package/build/es/components/system-message/SystemMessage.d.ts +5 -6
- package/build/es/components/system-message/SystemMessage.js.map +1 -1
- package/build/es/components/system-message/index.d.ts +1 -1
- package/build/es/components/tabs/index.d.ts +6 -6
- package/build/es/components/tag/index.d.ts +1 -3
- package/build/es/components/text-input/BaseTextArea.d.ts +1 -2
- package/build/es/components/text-input/BaseTextArea.js.map +1 -1
- package/build/es/components/text-input/index.d.ts +2 -2
- package/build/es/components/toast/index.d.ts +1 -1
- package/build/es/components/toast/toastContext.d.ts +1 -13
- package/build/es/components/toast/toastContext.js.map +1 -1
- package/build/es/components/toast/types.d.ts +11 -0
- package/build/es/components/toggle-switch/ToggleSlider.d.ts +2 -3
- package/build/es/components/toggle-switch/ToggleSlider.js.map +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.d.ts +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.js.map +1 -1
- package/build/es/components/toggle-switch/index.d.ts +2 -2
- package/build/es/components/tooltip/Tooltip.d.ts +2 -2
- package/build/es/components/tooltip/Tooltip.js +1 -1
- package/build/es/components/tooltip/Tooltip.js.map +1 -1
- package/build/es/components/tooltip/TooltipContent.js +1 -1
- package/build/es/components/tooltip/TooltipContent.js.map +1 -1
- package/build/es/components/tooltip/TooltipTrigger.js +1 -1
- package/build/es/components/tooltip/TooltipTrigger.js.map +1 -1
- package/build/es/index.js +1 -1
- package/package.json +12 -3
- package/styles/components/button/button.css +2 -2
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/input-panel/_index.scss +2 -0
- package/styles/components/input-panel/checkbox-panel.css +132 -0
- package/styles/components/input-panel/checkbox-panel.min.css +1 -0
- package/styles/components/input-panel/checkbox-panel.scss +88 -0
- package/styles/components/{radio-panel → input-panel}/radio-panel.css +67 -56
- package/styles/components/input-panel/radio-panel.min.css +1 -0
- package/styles/components/input-panel/radio-panel.scss +79 -0
- package/styles/components/input-panel/shared.css +61 -0
- package/styles/components/input-panel/shared.min.css +1 -0
- package/styles/components/input-panel/shared.scss +75 -0
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +5 -5
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +2 -2
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +2 -2
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/tooltip/tooltip.css +2 -26
- package/styles/components/tooltip/tooltip.min.css +1 -1
- package/styles/components/tooltip/tooltip.scss +3 -31
- package/styles/styles.css +224 -166
- package/styles/styles.min.css +1 -1
- package/styles/styles.scss +1 -1
- package/build/cjs/components/radio-panel/RadioPanel.cjs +0 -2
- package/build/cjs/components/radio-panel/RadioPanel.cjs.map +0 -1
- package/build/cjs/components/radio-panel/index.cjs +0 -2
- package/build/cjs/components/radio-panel/index.d.cts +0 -1
- package/build/es/components/radio-panel/RadioPanel.js +0 -2
- package/build/es/components/radio-panel/RadioPanel.js.map +0 -1
- package/build/es/components/radio-panel/index.d.ts +0 -1
- package/build/es/components/radio-panel/index.js +0 -2
- package/styles/components/radio-panel/_index.scss +0 -1
- package/styles/components/radio-panel/radio-panel.min.css +0 -1
- package/styles/components/radio-panel/radio-panel.scss +0 -140
- /package/build/cjs/components/{radio-panel → input-panel}/index.cjs.map +0 -0
- /package/build/es/components/{radio-panel → input-panel}/index.js.map +0 -0
|
@@ -1,18 +1,9 @@
|
|
|
1
|
-
export { Loader } from './Loader.cjs';
|
|
2
|
-
export
|
|
3
|
-
export type
|
|
4
|
-
export {
|
|
5
|
-
export type
|
|
6
|
-
export {
|
|
7
|
-
export type
|
|
8
|
-
export {
|
|
9
|
-
export type
|
|
10
|
-
export { SkeletonElement } from './skeletons/SkeletonElement.cjs';
|
|
11
|
-
export type { SkeletonInputProps } from './skeletons/SkeletonInput.cjs';
|
|
12
|
-
export { SkeletonInput } from './skeletons/SkeletonInput.cjs';
|
|
13
|
-
export type { SkeletonRadioButtonGroupProps } from './skeletons/SkeletonRadioButtonGroup.cjs';
|
|
14
|
-
export { SkeletonRadioButtonGroup } from './skeletons/SkeletonRadioButtonGroup.cjs';
|
|
15
|
-
export type { SkeletonTableProps, SkeletonTableHeaderProps, SkeletonTableRowProps, } from './skeletons/SkeletonTable.cjs';
|
|
16
|
-
export { SkeletonTable, SkeletonTableHeader, SkeletonTableRow, } from './skeletons/SkeletonTable.cjs';
|
|
17
|
-
export type { SkeletonTextAreaProps } from './skeletons/SkeletonTextArea.cjs';
|
|
18
|
-
export { SkeletonTextArea } from './skeletons/SkeletonTextArea.cjs';
|
|
1
|
+
export { Loader, type LoaderVariant, type LoaderProps } from './Loader.cjs';
|
|
2
|
+
export { SkeletonAnimation, type SkeletonAnimationProps, } from './skeletons/SkeletonAnimation.cjs';
|
|
3
|
+
export { SkeletonButton, type SkeletonButtonProps, } from './skeletons/SkeletonButton.cjs';
|
|
4
|
+
export { SkeletonCheckboxGroup, type SkeletonCheckboxGroupProps, } from './skeletons/SkeletonCheckboxGroup.cjs';
|
|
5
|
+
export { SkeletonElement, type SkeletonElementProps, } from './skeletons/SkeletonElement.cjs';
|
|
6
|
+
export { SkeletonInput, type SkeletonInputProps, } from './skeletons/SkeletonInput.cjs';
|
|
7
|
+
export { SkeletonRadioButtonGroup, type SkeletonRadioButtonGroupProps, } from './skeletons/SkeletonRadioButtonGroup.cjs';
|
|
8
|
+
export { SkeletonTable, SkeletonTableHeader, SkeletonTableRow, type SkeletonTableProps, type SkeletonTableHeaderProps, type SkeletonTableRowProps, } from './skeletons/SkeletonTable.cjs';
|
|
9
|
+
export { SkeletonTextArea, type SkeletonTextAreaProps, } from './skeletons/SkeletonTextArea.cjs';
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
export type
|
|
2
|
-
export {
|
|
3
|
-
export type { LogoStampProps } from './LogoStamp.cjs';
|
|
4
|
-
export { LogoStamp } from './LogoStamp.cjs';
|
|
1
|
+
export { Logo, type LogoProps } from './Logo.cjs';
|
|
2
|
+
export { LogoStamp, type LogoStampProps } from './LogoStamp.cjs';
|
|
5
3
|
export { ForsikringLevertAvFremtind, FraSB1ogDNB, InnovasjonFraFremtind, TeknologiFraFremtind, VartEgetForsikringsselskap, VartForsikringsselskap, } from './text-paths/index.cjs';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),s=require("react-is"),o=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs");const i=require("../../hooks/useId/useId.cjs"),l=require("../../utilities/getThemeAndDensity.cjs"),a=require("./useMenuWideEvents.cjs");const u=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(s);function c(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const d=r.forwardRef(((s,d)=>{const{children:p,className:f,initialPlacement:m,openOnHover:g=!1,keepOpenOnClickOutside:y=!1,triggerElement:v,isOpen:h,onToggle:x,...j}=s,P=i.useId("jkl-menu"),{prefersReducedMotion:k}=o.useBrowserPreferences(),b=t.useFloatingTree(),w=t.useFloatingNodeId(),F=t.useFloatingParentNodeId(),O=null!=F,I=r.useRef([]),[M,E]=r.useState(null),{allowHover:q,isOpen:R,setIsOpen:N}=a.useMenuWideEvents(b,w,F),S=void 0!==h?h:R;r.useEffect((()=>null==x?void 0:x(S)),[S,x]);const{refs:C,placement:T,context:D,floatingStyles:A}=t.useFloating({nodeId:w,open:S,onOpenChange:N,placement:m||(O?"right-start":"bottom-start"),middleware:[t.offset(2),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:B,getFloatingProps:H,getItemProps:$}=t.useInteractions([t.useHover(D,{enabled:g&&q,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(D,{event:"mousedown"}),t.useDismiss(D,{outsidePress:!y}),t.useRole(D,{role:"menu"}),t.useListNavigation(D,{listRef:I,activeIndex:M,nested:O,onNavigate:E})]),K=t.useMergeRefs([C.setReference,d]),{theme:V,density:W}=l.getThemeAndDensity(C.reference.current),{isMounted:z,styles:L}=t.useTransitionStyles(D,{duration:{open:k?0:250,close:k?0:150},initial:({side:e})=>({opacity:0,translate:c(e,5)}),open:({side:e})=>({opacity:1,translate:c(e,0)}),close:({side:e})=>({opacity:0,translate:c(e,5)})});return e.jsxs(t.FloatingNode,{id:w,children:[r.isValidElement(v)&&("button"===v.type||u.isForwardRef(v))?r.cloneElement(v,{...B({...j,ref:K,role:O?"menuitem":void 0,"aria-controls":P,onClick(e){e.stopPropagation()}})}):v,z&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:D,modal:!1,initialFocus:O?-1:0,returnFocus:!O,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",f),"data-theme":V,"data-layout-density":W,role:"menu","data-placement":T,"aria-live":"assertive","aria-hidden":!S,ref:C.setFloating,...H({id:P,style:{...A,...L}}),children:r.Children.map(p,((e,t)=>r.isValidElement(e)&&u.isForwardRef(e)?r.cloneElement(e,$({...e.props,tabIndex:M===t?0:-1,role:"menuitem",ref(e){I.current[t]=e},onClick(t){var n,r;null==(r=(n=e.props).onClick)||r.call(n,t),!t.defaultPrevented&&(null==b||b.events.emit("click"))},onKeyDown(t){var n,r;null==(r=(n=e.props).onKeyDown)||r.call(n,t),!t.defaultPrevented&&(null==b||b.events.emit("keydown"),"menuitemcheckbox"===t.currentTarget.role&&"Enter"===t.key&&N(!1))},onMouseEnter(){q&&S&&E(t)}})):e))})})})]})}));d.displayName="MenuComponent";const p=r.forwardRef(((n,r)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(d,{ref:r,...n})}):e.jsx(d,{ref:r,...n})));p.displayName="Menu",exports.Menu=p;
|
|
2
2
|
//# sourceMappingURL=Menu.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n offset,\n type Placement,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React, {\n type ButtonHTMLAttributes,\n forwardRef,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport * as ReactIs from \"react-is\";\nimport { DataTestAutoId, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nexport interface MenuProps\n extends DataTestAutoId,\n WithChildren,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n className?: string;\n /**\n * Initiell plassering av menyen. Dersom det ikke er plass på skjermen der du\n * angir at den skal åpnes vil den slyttes automatisk.\n * @default \"bottom-start\" på toppnivå, \"right-start\" for undermenyer\n * */\n initialPlacement?: Placement;\n /**\n * Angir om menyen skal åpnes ved hover (uten å måtte klikke)\n * @default false\n */\n openOnHover?: boolean;\n /**\n * Angir om menyen skal holdes åpen når man klikker utenfor menyen\n * @default false\n */\n keepOpenOnClickOutside?: boolean;\n /**\n * Elementet som fungerer som trigger for menyen. Dersom elementet ikke er en `<button>`\n * eller en `forwardRef<HTMLButtonElement>` vil det bli lagt inne i en knapp\n * med forhåndsdefinert stil. For å komme raskt i gang kan du bruke komponenten\n * `MenuTriggerButton` fra denne pakken.\n */\n triggerElement: ReactNode;\n /**\n * Kan brukes til å styre utenfra om menyen skal være åpen eller ikke.\n * @default false\n */\n isOpen?: boolean;\n /**\n * Callback som kalles når menyen åpnes eller lukkes.\n */\n onToggle?: (isOpen: boolean) => void;\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = useId(\"jkl-menu\");\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement | null>>([]);\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { x, y, refs, placement, strategy, context } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement || (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { theme, density } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) &&\n (triggerElement.type === \"button\" ||\n ReactIs.isForwardRef(triggerElement))\n ? // Dersom trigger-elementet er en knapp, sett riktige egenskaper på det\n React.cloneElement(triggerElement, {\n ...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n }),\n })\n : // Ellers, rendre elementet as-is, uten interaktivitet. Krev en ferdig brukbar button for å åpne menyen.\n triggerElement}\n <AnimatePresence>\n {isOpen && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <motion.div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-layout-density={density}\n role=\"menu\"\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{\n ease: \"easeIn\",\n duration: 0.1,\n }}\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n position: strategy,\n top: y ?? \"\",\n left: x ?? \"\",\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (\n React.isValidElement(child) &&\n ReactIs.isForwardRef(child)\n ) {\n return React.cloneElement(\n child,\n getItemProps({\n ...child.props,\n tabIndex:\n activeIndex ===\n index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n child.props.onClick?.(\n event as React.MouseEvent<HTMLButtonElement>,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event\n .currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(\n false,\n );\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n }),\n );\n }\n\n return child;\n },\n )}\n </motion.div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </AnimatePresence>\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\nMenu.displayName = \"Menu\";\n"],"names":["MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","x","y","refs","placement","strategy","context","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","jsxs","FloatingNode","id","React","isValidElement","type","ReactIs","isForwardRef","cloneElement","ref","onClick","stopPropagation","jsx","AnimatePresence","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","motion","div","clsx","initial","opacity","animate","exit","transition","ease","duration","setFloating","style","position","top","left","Children","map","child","index","tabIndex","node","_b","_a","call","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n offset,\n type Placement,\n safePolygon,\n shift,\n Side,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, {\n type ButtonHTMLAttributes,\n forwardRef,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport * as ReactIs from \"react-is\";\nimport { DataTestAutoId, WithChildren } from \"../../core/types.js\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nexport interface MenuProps\n extends DataTestAutoId,\n WithChildren,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n className?: string;\n /**\n * Initiell plassering av menyen. Dersom det ikke er plass på skjermen der du\n * angir at den skal åpnes vil den slyttes automatisk.\n * @default \"bottom-start\" på toppnivå, \"right-start\" for undermenyer\n * */\n initialPlacement?: Placement;\n /**\n * Angir om menyen skal åpnes ved hover (uten å måtte klikke)\n * @default false\n */\n openOnHover?: boolean;\n /**\n * Angir om menyen skal holdes åpen når man klikker utenfor menyen\n * @default false\n */\n keepOpenOnClickOutside?: boolean;\n /**\n * Elementet som fungerer som trigger for menyen. Dersom elementet ikke er en `<button>`\n * eller en `forwardRef<HTMLButtonElement>` vil det bli lagt inne i en knapp\n * med forhåndsdefinert stil. For å komme raskt i gang kan du bruke komponenten\n * `MenuTriggerButton` fra denne pakken.\n */\n triggerElement: ReactNode;\n /**\n * Kan brukes til å styre utenfra om menyen skal være åpen eller ikke.\n * @default false\n */\n isOpen?: boolean;\n /**\n * Callback som kalles når menyen åpnes eller lukkes.\n */\n onToggle?: (isOpen: boolean) => void;\n}\n\nfunction getTranslation(side: Side, value: number = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = useId(\"jkl-menu\");\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement | null>>([]);\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement || (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { theme, density } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n },\n );\n\n return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) &&\n (triggerElement.type === \"button\" ||\n ReactIs.isForwardRef(triggerElement))\n ? // Dersom trigger-elementet er en knapp, sett riktige egenskaper på det\n React.cloneElement(triggerElement, {\n ...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n }),\n })\n : // Ellers, rendre elementet as-is, uten interaktivitet. Krev en ferdig brukbar button for å åpne menyen.\n triggerElement}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-layout-density={density}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (\n React.isValidElement(child) &&\n ReactIs.isForwardRef(child)\n ) {\n return React.cloneElement(\n child,\n getItemProps({\n ...child.props,\n tabIndex:\n activeIndex === index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n child.props.onClick?.(\n event as React.MouseEvent<HTMLButtonElement>,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event.currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(false);\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n }),\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","type","ReactIs","isForwardRef","cloneElement","ref","onClick","stopPropagation","FloatingPortal","jsx","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","_b","_a","call","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"2vBAgFA,SAASA,EAAeC,EAAYC,EAAgB,GAChD,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEA,MAAMC,EAAgBC,EAAAA,YAClB,CAACC,EAAOC,KACE,MACFC,SAAAA,EACAC,UAAAA,EACAC,iBAAAA,EACAC,YAAAA,GAAc,EACdC,uBAAAA,GAAyB,EACzBC,eAAAA,EACAC,OAAQC,EACRC,SAAAA,KACGC,GACHX,EAEEY,EAASC,QAAM,aAEbC,qBAAAA,GAAyBC,EAAAA,wBAE3BC,EAAOC,EAAAA,kBACPC,EAASC,EAAAA,oBACTC,EAAWC,EAAAA,0BACXC,EAAuB,MAAZF,EAEXG,EAAeC,SAAwC,KACtDC,EAAaC,GAAkBC,WAAwB,OAE1DC,WAAAA,EACApB,OAAQqB,EACRC,UAAAA,GACAC,oBAAkBf,EAAME,EAAQE,GAE9BZ,OACiB,IAAnBC,EAA+BA,EAAiBoB,EAEpDG,EAAAA,WAAU,IAAM,MAAAtB,OAAAA,EAAAA,EAAWF,IAAS,CAACA,EAAQE,IAE7C,MAAQuB,KAAAA,EAAMC,UAAAA,EAAWC,QAAAA,EAASC,eAAAA,GAAmBC,EAAAA,YAAY,CAC7DnB,OAAAA,EACAoB,KAAM9B,EACN+B,aAAcT,EACdI,UACI9B,IAAqBkB,EAAW,cAAgB,gBACpDkB,WAAY,CACRC,EAAAA,OAAO,GACPC,OAAK,CACDC,0BAA2B,MAC3BC,WAAW,IAEfC,QAAM,CAAEC,QAAS,KAErBC,qBAAsBC,EAAAA,cAGlBC,kBAAAA,EAAmBC,iBAAAA,EAAkBC,aAAAA,GACzCC,EAAAA,gBAAgB,CACZC,EAAAA,SAASlB,EAAS,CACdmB,QAASjD,GAAeuB,EACxB2B,MAAO,CAAEjB,KAAM,IACfkB,YAAaC,EAAAA,YAAY,CACrBC,eAAe,EACfC,oBAAoB,MAG5BC,EAAAA,SAASzB,EAAS,CACd0B,MAAO,cAEXC,EAAAA,WAAW3B,EAAS,CAAE4B,cAAezD,IACrC0D,EAAAA,QAAQ7B,EAAS,CAAE8B,KAAM,SACzBC,EAAAA,kBAAkB/B,EAAS,CACvBgC,QAAS5C,EACTE,YAAAA,EACA2C,OAAQ9C,EACR+C,WAAY3C,MAIlB4C,EAAeC,EAAAA,aAAa,CAACtC,EAAKuC,aAAcvE,KAI9CwE,MAAAA,EAAOC,QAAAA,GAAYC,EAAAA,mBACvB1C,EAAK2C,UAAUC,UAGXC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3C9C,EACA,CACI+C,SAAU,CACN5C,KAAMxB,EAAuB,EAAI,IACjCqE,MAAOrE,EAAuB,EAAI,KAEtCsE,QAAS,EAAGxF,KAAAA,MAAY,CACpByF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,KAEpC0C,KAAM,EAAG1C,KAAAA,MAAY,CACjByF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,KAEpCuF,MAAO,EAAGvF,KAAAA,MAAY,CAClByF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,OAMxC,OAAA2F,EAAAA,KAACC,EAAaA,aAAA,CAAAC,GAAIvE,EACbhB,SAAA,CAAMwF,EAAAC,eAAepF,KACG,WAAxBA,EAAeqF,MACZC,EAAQC,aAAavF,IAEnBmF,EAAMK,aAAaxF,EAAgB,IAC5B0C,EAAkB,IACdtC,EACHqF,IAAK1B,EACLL,KAAM3C,EAAW,gBAAa,EAC9B,gBAAiBV,EACjBqF,QAAQpC,GACJA,EAAMqC,iBACV,MAIR3F,EACLuE,SACIqB,iBACG,CAAAjG,SAAAkG,EAAAA,IAACC,EAAAA,qBAAA,CACGlE,QAAAA,EAEAmE,OAAO,EAEPC,aAAcjF,KAAgB,EAE9BkF,aAAclF,EAEdpB,SAAAkG,EAAAA,IAAC,MAAA,CACGjG,UAAWsG,EAAAA,KAAK,eAAgBtG,GAChC,aAAYsE,EACZ,sBAAqBC,EACrBT,KAAK,OACL,iBAAgB/B,EAChB,YAAU,YACV,eAAc1B,EACdwF,IAAK/D,EAAKyE,eACNxD,EAAiB,CACjBuC,GAAI7E,EACJ+F,MAAO,IACAvE,KACA4C,KAIV9E,WAAM0G,SAASC,IACZ3G,GACA,CAAC4G,EAAOC,IAEArB,EAAMC,eAAemB,IACrBjB,EAAQC,aAAagB,GAEdpB,EAAMK,aACTe,EACA3D,EAAa,IACN2D,EAAM9G,MACTgH,SACIvF,IAAgBsF,EACV,GAEV,EAAA9C,KAAM,WACN+B,IACIiB,GAEa1F,EAAAsD,QACTkC,GACAE,CACR,EACAhB,QAAQpC,WACJ,OAAAqD,GAAAC,EAAAL,EAAM9G,OAAMiG,UAAZiB,EAAAE,KAAAD,EACItD,IAGAA,EAAMwD,mBAIV,MAAArG,GAAAA,EAAMsG,OAAOC,KACT,SAER,EACAC,UAAU3D,WACN,OAAAqD,GAAAC,EAAAL,EAAM9G,OAAMwH,YAAZN,EAAAE,KAAAD,EACItD,IAGAA,EAAMwD,mBAIV,MAAArG,GAAAA,EAAMsG,OAAOC,KACT,WAKI,qBAFJ1D,EAAM4D,cACDxD,MAGD,UADJJ,EAAM6D,KAIN5F,GAAU,GAElB,EACA6F,eAEQ/F,GACApB,GAEAkB,EACIqF,EAGZ,KAKLD,YAOnC,IAIZhH,EAAc8H,YAAc,gBAErB,MAAMC,EAAO9H,EAAAA,YAAyC,CAACC,EAAOgG,IAGhD,OAFA3E,EAAAA,gCAIRyG,EAAAA,aACG,CAAA5H,SAAAkG,EAAAA,IAACtG,GAAckG,IAAAA,KAAchG,MAKjCoG,EAAAA,IAAAtG,EAAA,CAAckG,IAAAA,KAAchG,MAExC6H,EAAKD,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n id?: string;\n className?: string;\n component?: React.ElementType;\n style?: React.CSSProperties;\n /**\n * Overstyrer padding på modalen via en CSS-variabel.\n */\n padding?: 16 | 24 | 40;\n}\n\
|
|
1
|
+
{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n id?: string;\n className?: string;\n component?: React.ElementType;\n style?: React.CSSProperties;\n /**\n * Overstyrer padding på modalen via en CSS-variabel.\n */\n padding?: 16 | 24 | 40;\n}\n\nexport type BaseModalProps = Omit<ModalProps, \"padding\" | \"component\">;\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n HTMLDivElement,\n ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten\n return (\n <div\n className={clsx(\"jkl-modal-container\", className)}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n});\nModalContainer.displayName = \"ModalContainer\";\n\nexport type ModalOverlayProps = ModalConfig[\"overlay\"] &\n BaseModalProps & {\n /**\n * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.\n */\n transparent?: boolean;\n };\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component || \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--jkl-modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","C","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"oQAuBaA,EAAiBC,cAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,EAAAA,YACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,EAAAA,YACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,KAChD,MAAMU,EAAIH,GAAa,MAEnB,OAAAN,EAAAA,IAACS,EAAA,CACGZ,UAAWI,EAAAA,KAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,GAAA,IAKhBM,EAAMH,YAAc,QAKb,MAAMQ,EAAcd,EAAAA,YACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZW,EAAYR,YAAc,cAKnB,MAAMS,EAAaf,EAGxBA,YAAA,EAAGC,UAAAA,KAAcC,GAAQC,UACtB,IAAE,CAAAF,UAAWI,OAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEY,EAAWT,YAAc,aAKZ,MAAAU,EAAmBhB,cAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAAAA,IAACa,EAAAA,WAAA,CACGhB,UAAWI,EAAAA,KAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAe,SAAAd,EAAAA,IAACe,EAAAA,UAAU,CAAAC,QAAQ,eAG3BJ,EAAiBV,YAAc,mBAKxB,MAAMe,EAAYrB,EAAAA,YACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZkB,EAAUf,YAAc,YAKjB,MAAMgB,EAAetB,EAAAA,YACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZmB,EAAahB,YAAc"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { WithOptionalChildren } from '../../core/types.cjs';
|
|
3
3
|
import { IconButtonProps } from '../icon-button/IconButton.cjs';
|
|
4
|
+
import { ModalConfig } from './useModal.cjs';
|
|
4
5
|
export interface ModalProps extends WithOptionalChildren {
|
|
5
6
|
id?: string;
|
|
6
7
|
className?: string;
|
|
@@ -11,7 +12,7 @@ export interface ModalProps extends WithOptionalChildren {
|
|
|
11
12
|
*/
|
|
12
13
|
padding?: 16 | 24 | 40;
|
|
13
14
|
}
|
|
14
|
-
type BaseModalProps = Omit<ModalProps, "padding" | "component">;
|
|
15
|
+
export type BaseModalProps = Omit<ModalProps, "padding" | "component">;
|
|
15
16
|
/**
|
|
16
17
|
* Ment å brukes med `useModal`.
|
|
17
18
|
*/
|
|
@@ -23,6 +24,12 @@ export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
|
|
|
23
24
|
'aria-hidden': boolean;
|
|
24
25
|
'aria-labelledby': string;
|
|
25
26
|
} & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
27
|
+
export type ModalOverlayProps = ModalConfig["overlay"] & BaseModalProps & {
|
|
28
|
+
/**
|
|
29
|
+
* Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
|
|
30
|
+
*/
|
|
31
|
+
transparent?: boolean;
|
|
32
|
+
};
|
|
26
33
|
/**
|
|
27
34
|
* Ment å brukes med `useModal`.
|
|
28
35
|
*/
|
|
@@ -69,4 +76,3 @@ export declare const ModalBody: React.ForwardRefExoticComponent<BaseModalProps &
|
|
|
69
76
|
* Ment å brukes med `useModal`.
|
|
70
77
|
*/
|
|
71
78
|
export declare const ModalActions: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
-
export {};
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
export type
|
|
2
|
-
export {
|
|
3
|
-
export type { UseModalOptions, ModalInstance, ModalConfig, } from './useModal.cjs';
|
|
4
|
-
export { useModal } from './useModal.cjs';
|
|
1
|
+
export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, type ModalProps, type BaseModalProps, type ModalOverlayProps, } from './Modal.cjs';
|
|
2
|
+
export { useModal, type UseModalOptions, type ModalInstance, type ModalConfig, } from './useModal.cjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { PageButton } from \"./PageButton.js\";\n\nexport type PaginationProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<\n ElementType,\n {\n currentPage: number;\n numberOfPages: number;\n onPageChange: (toPage: number, fromPage: number) => void;\n /**\n * Dersom du ønsker å ha custom labels kan du sende inn disse. \"next\" og \"previous\"\n * brukes som hint til skjermlesere for ikon-knappene til Neste/Forrige side\n * @default { previous: \"Forrige side\", next: \"Neste side\" }\n */\n labels?: {\n previous: string;\n next: string;\n };\n }\n >;\n\nexport type PaginationComponent = <\n ElementType extends React.ElementType = \"nav\",\n>(\n props: PaginationProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Pagination = React.forwardRef(function Pagination<\n ElementType extends React.ElementType = \"nav\",\n>(\n {\n onPageChange,\n currentPage,\n numberOfPages,\n labels = {\n previous: \"Forrige side\",\n next: \"Neste side\",\n },\n as,\n ...rest\n }: PaginationProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n) {\n useEffect(() => {\n if (currentPage < 1) {\n console.error(\n \"[Pagination]: currentPage prop should be set to a value larger than 0\",\n );\n }\n if (currentPage > numberOfPages) {\n console.error(\n \"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\",\n );\n }\n }, [currentPage, numberOfPages]);\n\n const Component = as || \"nav\";\n\n if (numberOfPages <= 7) {\n return (\n <Component ref={ref} {...rest} className=\"jkl-pagination\">\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.previous}\n onClick={() => onPageChange(currentPage - 1, currentPage)}\n aria-disabled={currentPage === 1}\n tabIndex={currentPage === 1 ? -1 : 0}\n >\n <ChevronLeftIcon />\n </IconButton>\n <ol className=\"jkl-pagination__pages\">\n {Array.from({ length: numberOfPages }).map((_, index) => {\n const page = index + 1;\n return (\n <PageButton\n key={index}\n isActive={currentPage === page}\n number={page}\n total={numberOfPages}\n onClick={() => onPageChange(page, currentPage)}\n />\n );\n })}\n </ol>\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.next}\n onClick={() => onPageChange(currentPage + 1, currentPage)}\n aria-disabled={currentPage === numberOfPages}\n tabIndex={currentPage === numberOfPages ? -1 : 0}\n >\n <ChevronRightIcon />\n </IconButton>\n </Component>\n );\n }\n\n const showStartEllipsis = currentPage > 4;\n const showEndEllipsis = currentPage < numberOfPages - 3;\n\n const startEllipsis = Math.min(\n Math.max(currentPage - 2, 2),\n numberOfPages - 5,\n );\n const centerPageNumberStart = Math.min(\n startEllipsis + 1,\n numberOfPages - 4,\n );\n const centerPageNumber = Math.min(\n centerPageNumberStart + 1,\n numberOfPages - 3,\n );\n const centerPageNumberEnd = Math.min(\n centerPageNumberStart + 2,\n numberOfPages - 2,\n );\n const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 1);\n\n return (\n <Component ref={ref} {...rest} className=\"jkl-pagination\">\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.previous}\n onClick={() => onPageChange(currentPage - 1, currentPage)}\n aria-disabled={currentPage === 1}\n tabIndex={currentPage === 1 ? -1 : 0}\n >\n <ChevronLeftIcon />\n </IconButton>\n <ol className=\"jkl-pagination__pages\">\n <PageButton\n isActive={currentPage === 1}\n number={1}\n total={numberOfPages}\n onClick={() => onPageChange(1, currentPage)}\n />\n {showStartEllipsis ? (\n <span\n aria-hidden\n className=\"jkl-pagination-button--elipsis\"\n >\n {\"...\"}\n </span>\n ) : (\n <PageButton\n isActive={currentPage === startEllipsis}\n number={startEllipsis}\n total={numberOfPages}\n onClick={() => onPageChange(startEllipsis, currentPage)}\n />\n )}\n <PageButton\n isActive={currentPage === centerPageNumberStart}\n number={centerPageNumberStart}\n total={numberOfPages}\n onClick={() =>\n onPageChange(centerPageNumberStart, currentPage)\n }\n />\n <PageButton\n isActive={currentPage === centerPageNumber}\n number={centerPageNumber}\n total={numberOfPages}\n onClick={() => onPageChange(centerPageNumber, currentPage)}\n />\n <PageButton\n isActive={currentPage === centerPageNumberEnd}\n number={centerPageNumberEnd}\n total={numberOfPages}\n onClick={() =>\n onPageChange(centerPageNumberEnd, currentPage)\n }\n />\n {showEndEllipsis ? (\n <span\n aria-hidden\n className=\"jkl-pagination-button--elipsis\"\n >\n {\"...\"}\n </span>\n ) : (\n <PageButton\n isActive={currentPage === endEllipsis}\n number={endEllipsis}\n total={numberOfPages}\n onClick={() => onPageChange(endEllipsis, currentPage)}\n />\n )}\n <PageButton\n isActive={currentPage === numberOfPages}\n number={numberOfPages}\n total={numberOfPages}\n onClick={() => onPageChange(numberOfPages, currentPage)}\n />\n </ol>\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.next}\n onClick={() => onPageChange(currentPage + 1, currentPage)}\n aria-disabled={currentPage === numberOfPages}\n tabIndex={currentPage === numberOfPages ? -1 : 0}\n >\n <ChevronRightIcon />\n </IconButton>\n </Component>\n );\n}) as PaginationComponent;\n"],"names":["Pagination","React","forwardRef","onPageChange","currentPage","numberOfPages","labels","previous","next","as","rest","ref","useEffect","console","error","Component","className","children","jsx","IconButton","title","onClick","tabIndex","ChevronLeftIcon","from","length","map","_","index","page","PageButton","isActive","number","total","ChevronRightIcon","showStartEllipsis","showEndEllipsis","startEllipsis","Math","min","max","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { PageButton } from \"./PageButton.js\";\n\nexport type PaginationProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<\n ElementType,\n {\n currentPage: number;\n numberOfPages: number;\n onPageChange: (toPage: number, fromPage: number) => void;\n /**\n * Dersom du ønsker å ha custom labels kan du sende inn disse. \"next\" og \"previous\"\n * brukes som hint til skjermlesere for ikon-knappene til Neste/Forrige side\n * @default { previous: \"Forrige side\", next: \"Neste side\" }\n */\n labels?: {\n previous: string;\n next: string;\n };\n }\n >;\n\ntype PaginationComponent = <ElementType extends React.ElementType = \"nav\">(\n props: PaginationProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Pagination = React.forwardRef(function Pagination<\n ElementType extends React.ElementType = \"nav\",\n>(\n {\n onPageChange,\n currentPage,\n numberOfPages,\n labels = {\n previous: \"Forrige side\",\n next: \"Neste side\",\n },\n as,\n ...rest\n }: PaginationProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n) {\n useEffect(() => {\n if (currentPage < 1) {\n console.error(\n \"[Pagination]: currentPage prop should be set to a value larger than 0\",\n );\n }\n if (currentPage > numberOfPages) {\n console.error(\n \"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\",\n );\n }\n }, [currentPage, numberOfPages]);\n\n const Component = as || \"nav\";\n\n if (numberOfPages <= 7) {\n return (\n <Component ref={ref} {...rest} className=\"jkl-pagination\">\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.previous}\n onClick={() => onPageChange(currentPage - 1, currentPage)}\n aria-disabled={currentPage === 1}\n tabIndex={currentPage === 1 ? -1 : 0}\n >\n <ChevronLeftIcon />\n </IconButton>\n <ol className=\"jkl-pagination__pages\">\n {Array.from({ length: numberOfPages }).map((_, index) => {\n const page = index + 1;\n return (\n <PageButton\n key={index}\n isActive={currentPage === page}\n number={page}\n total={numberOfPages}\n onClick={() => onPageChange(page, currentPage)}\n />\n );\n })}\n </ol>\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.next}\n onClick={() => onPageChange(currentPage + 1, currentPage)}\n aria-disabled={currentPage === numberOfPages}\n tabIndex={currentPage === numberOfPages ? -1 : 0}\n >\n <ChevronRightIcon />\n </IconButton>\n </Component>\n );\n }\n\n const showStartEllipsis = currentPage > 4;\n const showEndEllipsis = currentPage < numberOfPages - 3;\n\n const startEllipsis = Math.min(\n Math.max(currentPage - 2, 2),\n numberOfPages - 5,\n );\n const centerPageNumberStart = Math.min(\n startEllipsis + 1,\n numberOfPages - 4,\n );\n const centerPageNumber = Math.min(\n centerPageNumberStart + 1,\n numberOfPages - 3,\n );\n const centerPageNumberEnd = Math.min(\n centerPageNumberStart + 2,\n numberOfPages - 2,\n );\n const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 1);\n\n return (\n <Component ref={ref} {...rest} className=\"jkl-pagination\">\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.previous}\n onClick={() => onPageChange(currentPage - 1, currentPage)}\n aria-disabled={currentPage === 1}\n tabIndex={currentPage === 1 ? -1 : 0}\n >\n <ChevronLeftIcon />\n </IconButton>\n <ol className=\"jkl-pagination__pages\">\n <PageButton\n isActive={currentPage === 1}\n number={1}\n total={numberOfPages}\n onClick={() => onPageChange(1, currentPage)}\n />\n {showStartEllipsis ? (\n <span\n aria-hidden\n className=\"jkl-pagination-button--elipsis\"\n >\n {\"...\"}\n </span>\n ) : (\n <PageButton\n isActive={currentPage === startEllipsis}\n number={startEllipsis}\n total={numberOfPages}\n onClick={() => onPageChange(startEllipsis, currentPage)}\n />\n )}\n <PageButton\n isActive={currentPage === centerPageNumberStart}\n number={centerPageNumberStart}\n total={numberOfPages}\n onClick={() =>\n onPageChange(centerPageNumberStart, currentPage)\n }\n />\n <PageButton\n isActive={currentPage === centerPageNumber}\n number={centerPageNumber}\n total={numberOfPages}\n onClick={() => onPageChange(centerPageNumber, currentPage)}\n />\n <PageButton\n isActive={currentPage === centerPageNumberEnd}\n number={centerPageNumberEnd}\n total={numberOfPages}\n onClick={() =>\n onPageChange(centerPageNumberEnd, currentPage)\n }\n />\n {showEndEllipsis ? (\n <span\n aria-hidden\n className=\"jkl-pagination-button--elipsis\"\n >\n {\"...\"}\n </span>\n ) : (\n <PageButton\n isActive={currentPage === endEllipsis}\n number={endEllipsis}\n total={numberOfPages}\n onClick={() => onPageChange(endEllipsis, currentPage)}\n />\n )}\n <PageButton\n isActive={currentPage === numberOfPages}\n number={numberOfPages}\n total={numberOfPages}\n onClick={() => onPageChange(numberOfPages, currentPage)}\n />\n </ol>\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.next}\n onClick={() => onPageChange(currentPage + 1, currentPage)}\n aria-disabled={currentPage === numberOfPages}\n tabIndex={currentPage === numberOfPages ? -1 : 0}\n >\n <ChevronRightIcon />\n </IconButton>\n </Component>\n );\n}) as PaginationComponent;\n"],"names":["Pagination","React","forwardRef","onPageChange","currentPage","numberOfPages","labels","previous","next","as","rest","ref","useEffect","console","error","Component","className","children","jsx","IconButton","title","onClick","tabIndex","ChevronLeftIcon","from","length","map","_","index","page","PageButton","isActive","number","total","ChevronRightIcon","showStartEllipsis","showEndEllipsis","startEllipsis","Math","min","max","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","jsxs"],"mappings":"gTAiCaA,EAAaC,EAAMC,YAAW,UAInCC,aAAAA,EACAC,YAAAA,EACAC,cAAAA,EACAC,OAAAA,EAAS,CACLC,SAAU,eACVC,KAAM,cAEVC,GAAAA,KACGC,GAEPC,GAEAC,EAAAA,WAAU,KACFR,EAAc,GACNS,QAAAC,MACJ,yEAGJV,EAAcC,GACNQ,QAAAC,MACJ,wFAAA,GAGT,CAACV,EAAaC,IAEjB,MAAMU,EAAYN,GAAM,MAExB,GAAIJ,GAAiB,EACjB,cACKU,EAAU,CAAAJ,IAAAA,KAAcD,EAAMM,UAAU,iBACrCC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,WAAA,CACGH,UAAU,wBACVI,MAAOd,EAAOC,SACdc,QAAS,IAAMlB,EAAaC,EAAc,EAAGA,GAC7C,gBAA+B,IAAhBA,EACfkB,SAA0B,IAAhBlB,GAAyB,EAAA,EAEnCa,eAACM,EAAgBA,gBAAA,MAEpBL,EAAAA,IAAA,KAAA,CAAGF,UAAU,wBACTC,eAAMO,KAAK,CAAEC,OAAQpB,IAAiBqB,KAAI,CAACC,EAAGC,KAC3C,MAAMC,EAAOD,EAAQ,EAEjB,OAAAV,EAAAA,IAACY,EAAAA,WAAA,CAEGC,SAAU3B,IAAgByB,EAC1BG,OAAQH,EACRI,MAAO5B,EACPgB,QAAS,IAAMlB,EAAa0B,EAAMzB,IAJ7BwB,EAAA,MASrBV,EAAAA,IAACC,EAAAA,WAAA,CACGH,UAAU,wBACVI,MAAOd,EAAOE,KACda,QAAS,IAAMlB,EAAaC,EAAc,EAAGA,GAC7C,gBAAeA,IAAgBC,EAC/BiB,SAAUlB,IAAgBC,GAAgB,EAAK,EAE/CY,eAACiB,EAAiBA,iBAAA,SAMlC,MAAMC,EAAoB/B,EAAc,EAClCgC,EAAkBhC,EAAcC,EAAgB,EAEhDgC,EAAgBC,KAAKC,IACvBD,KAAKE,IAAIpC,EAAc,EAAG,GAC1BC,EAAgB,GAEdoC,EAAwBH,KAAKC,IAC/BF,EAAgB,EAChBhC,EAAgB,GAEdqC,EAAmBJ,KAAKC,IAC1BE,EAAwB,EACxBpC,EAAgB,GAEdsC,EAAsBL,KAAKC,IAC7BE,EAAwB,EACxBpC,EAAgB,GAEduC,EAAcN,KAAKC,IAAIE,EAAwB,EAAGpC,EAAgB,GAExE,cACKU,EAAU,CAAAJ,IAAAA,KAAcD,EAAMM,UAAU,iBACrCC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,WAAA,CACGH,UAAU,wBACVI,MAAOd,EAAOC,SACdc,QAAS,IAAMlB,EAAaC,EAAc,EAAGA,GAC7C,gBAA+B,IAAhBA,EACfkB,SAA0B,IAAhBlB,GAAoB,EAAK,EAEnCa,eAACM,EAAgBA,gBAAA,MAErBsB,EAAAA,KAAC,KAAG,CAAA7B,UAAU,wBACVC,SAAA,CAAAC,EAAAA,IAACY,EAAAA,WAAA,CACGC,SAA0B,IAAhB3B,EACV4B,OAAQ,EACRC,MAAO5B,EACPgB,QAAS,IAAMlB,EAAa,EAAGC,KAElC+B,EACGjB,EAAAA,IAAC,OAAA,CACG,eAAW,EACXF,UAAU,iCAETC,SAAA,QAGLC,EAAAA,IAACY,EAAAA,WAAA,CACGC,SAAU3B,IAAgBiC,EAC1BL,OAAQK,EACRJ,MAAO5B,EACPgB,QAAS,IAAMlB,EAAakC,EAAejC,KAGnDc,EAAAA,IAACY,EAAAA,WAAA,CACGC,SAAU3B,IAAgBqC,EAC1BT,OAAQS,EACRR,MAAO5B,EACPgB,QAAS,IACLlB,EAAasC,EAAuBrC,KAG5Cc,EAAAA,IAACY,EAAAA,WAAA,CACGC,SAAU3B,IAAgBsC,EAC1BV,OAAQU,EACRT,MAAO5B,EACPgB,QAAS,IAAMlB,EAAauC,EAAkBtC,KAElDc,EAAAA,IAACY,EAAAA,WAAA,CACGC,SAAU3B,IAAgBuC,EAC1BX,OAAQW,EACRV,MAAO5B,EACPgB,QAAS,IACLlB,EAAawC,EAAqBvC,KAGzCgC,EACGlB,EAAAA,IAAC,OAAA,CACG,eAAW,EACXF,UAAU,iCAETC,SAAA,QAGLC,EAAAA,IAACY,EAAAA,WAAA,CACGC,SAAU3B,IAAgBwC,EAC1BZ,OAAQY,EACRX,MAAO5B,EACPgB,QAAS,IAAMlB,EAAayC,EAAaxC,KAGjDc,EAAAA,IAACY,EAAAA,WAAA,CACGC,SAAU3B,IAAgBC,EAC1B2B,OAAQ3B,EACR4B,MAAO5B,EACPgB,QAAS,IAAMlB,EAAaE,EAAeD,QAGnDc,EAAAA,IAACC,EAAAA,WAAA,CACGH,UAAU,wBACVI,MAAOd,EAAOE,KACda,QAAS,IAAMlB,EAAaC,EAAc,EAAGA,GAC7C,gBAAeA,IAAgBC,EAC/BiB,SAAUlB,IAAgBC,GAAqB,EAAA,EAE/CY,eAACiB,EAAiBA,iBAAA,QAIlC"}
|
|
@@ -14,5 +14,6 @@ export type PaginationProps<ElementType extends React.ElementType> = Polymorphic
|
|
|
14
14
|
next: string;
|
|
15
15
|
};
|
|
16
16
|
}>;
|
|
17
|
-
|
|
17
|
+
type PaginationComponent = <ElementType extends React.ElementType = "nav">(props: PaginationProps<ElementType>) => React.ReactElement | null;
|
|
18
18
|
export declare const Pagination: PaginationComponent;
|
|
19
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { Pagination, type PaginationProps } from './Pagination.cjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n useFloating,\n useFocus,\n useHover,\n useClick,\n useDismiss,\n autoUpdate,\n useRole,\n useMergeRefs,\n offset,\n flip,\n shift,\n useInteractions,\n FloatingPortal,\n FloatingFocusManager,\n UseFloatingOptions,\n VirtualElement,\n ReferenceElement,\n ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\n\ntype ClickOptions = Parameters<typeof useClick>[1];\ntype DismissOptions = Parameters<typeof useDismiss>[1];\ntype FocusOptions = Parameters<typeof useFocus>[1];\ntype HoverOptions = Parameters<typeof useHover>[1];\ntype RoleOptions = Parameters<typeof useRole>[1];\n\ninterface PopoverOptions {\n /**\n * Angir om popoveren er åpen eller lukket.\n *\n * @see https://floating-ui.com/docs/usefloating#open\n */\n open?: boolean;\n /**\n * Callback som trigges når popoveren åpnes eller lukkes.\n *\n * @see https://floating-ui.com/docs/usefloating#onopenchange\n */\n onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n /**\n * Bestemmer plasseringen av popoveren.\n *\n * @see https://floating-ui.com/docs/usefloating#placement\n *\n * @default \"bottom-start\"\n */\n placement?: UseFloatingOptions[\"placement\"];\n /**\n * Definerer strategien for posisjonering av popoveren.\n *\n * @see https://floating-ui.com/docs/usefloating#strategy\n *\n * @default \"absolute\"\n */\n strategy?: UseFloatingOptions[\"strategy\"];\n /**\n * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n * og innhold utenfor ikke kan interageres med.\n *\n * @see https://floating-ui.com/docs/usefloating#modal\n *\n * @default true\n */\n modal?: boolean;\n /**\n * Justerer avstanden mellom referanse-elementet og popoveren.\n *\n * @see https://floating-ui.com/docs/offset\n *\n * @default 4\n */\n offset?: number;\n /**\n * Referanse til elementet som popoveren skal posisjoneres i forhold til.\n *\n * @see https://floating-ui.com/docs/usefloating#setpositionreference\n *\n * @default Popover.Trigger\n */\n positionReference?: React.RefObject<ReferenceType>;\n /**\n * Options for hover-interaksjoner.\n *\n * @see https://floating-ui.com/docs/usehover\n *\n * @default { enabled: false }\n */\n hoverOptions?: HoverOptions;\n /**\n * Options for fokus-interaksjoner.\n *\n * @see https://floating-ui.com/docs/usefocus\n *\n * @default { enabled: false }\n */\n focusOptions?: FocusOptions;\n /**\n * Options for klikk-interaksjoner.\n *\n * @see https://floating-ui.com/docs/useclick\n *\n * @default { enabled: false }\n */\n clickOptions?: ClickOptions;\n /**\n * Konfigurerer rollen for popoveren.\n *\n * @see https://floating-ui.com/docs/userole\n *\n * @default { enabled: true, role: \"dialog\" }\n */\n roleOptions?: RoleOptions;\n /**\n * Options for å lukke popoveren når en dismissal skjer,\n * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n *\n * @see https://floating-ui.com/docs/usedismiss\n *\n * @default { enabled: true }\n */\n dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n open: _open,\n onOpenChange: _onOpenChange,\n placement = \"bottom-start\",\n strategy = \"absolute\",\n modal = true,\n offset: _offset = 4,\n positionReference,\n hoverOptions,\n focusOptions,\n clickOptions,\n roleOptions,\n dismissOptions,\n}: PopoverOptions) => {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n const open = _open ?? uncontrolledOpen;\n const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n const data = useFloating({\n open,\n onOpenChange,\n placement,\n strategy,\n middleware: [\n offset(_offset),\n flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n shift({ padding: 12 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const context = data.context;\n\n const click = useClick(context, {\n enabled: false,\n ...clickOptions,\n });\n const hover = useHover(context, { enabled: false, ...hoverOptions });\n const focus = useFocus(context, { enabled: false, ...focusOptions });\n const dismiss = useDismiss(context, dismissOptions);\n const role = useRole(context, roleOptions);\n\n const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n React.useLayoutEffect(() => {\n if (positionReference) {\n data.refs.setPositionReference(positionReference?.current);\n }\n }, [positionReference, data.refs]);\n\n return React.useMemo(\n () => ({\n open,\n onOpenChange,\n modal,\n ...interactions,\n ...data,\n }),\n [open, onOpenChange, modal, interactions, data],\n );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context == null) {\n throw new Error(\n \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n );\n }\n\n return context;\n};\n\nexport const Popover = ({\n children,\n ...restOptions\n}: {\n children: React.ReactNode;\n} & PopoverOptions) => {\n const popover = usePopover({ ...restOptions });\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ninterface PopoverTriggerProps {\n children: React.ReactNode;\n /**\n * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n *\n * Default er `false`.\n *\n * @example\n * ```tsx\n * <Component asChild foo=\"bar\">\n * <Child baz=\"qux\" />\n * </Component>\n *\n * // Rendrer følgende:\n * <Child foo=\"bar\" baz=\"qux\" />\n * ```\n */\n asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n HTMLElement,\n React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n const childrenRef = (children as any).ref;\n const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n getReferenceProps({\n ref,\n ...props,\n ...children.props,\n }),\n );\n }\n\n return (\n <button\n ref={ref}\n onClick={() => onOpenChange?.(!open)}\n aria-expanded={open}\n {...getReferenceProps(props)}\n >\n {children}\n </button>\n );\n});\n\ninterface PopoverContentProps {\n /**\n * Padding rundt innholdet i popoveren.\n *\n * Default er `0`.\n */\n padding?: 0 | 8 | 16 | 24;\n /**\n *\n * Angir hvilket element som skal motta fokus ved åpning.\n * Kan være en tabbar index eller en referanse til et element.\"\n *\n * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n */\n initialFocus?: number | React.RefObject<HTMLElement>;\n /**\n * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n *\n * Default er `true`.\n * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n */\n returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n if (!referenceElement) return false;\n\n return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n {\n style,\n className,\n padding = 0,\n initialFocus = 0,\n returnFocus = true,\n ...props\n },\n propRef,\n) {\n const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n usePopoverContext();\n const ref = useMergeRefs([refs.setFloating, propRef]);\n\n const referenceElement = refs.reference.current as ReferenceElement;\n\n const { theme, density } = isCustomPositioned(referenceElement)\n ? getThemeAndDensity(referenceElement.contextElement)\n : getThemeAndDensity(referenceElement);\n\n const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt.\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) || null;\n }, [context.elements.domReference]);\n\n if (!open) return null;\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\n <FloatingFocusManager\n context={context}\n modal={modal}\n initialFocus={initialFocus}\n returnFocus={returnFocus}\n >\n <div\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\"jkl jkl-popover\", className)}\n ref={ref}\n style={\n {\n ...style,\n ...floatingStyles,\n \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n } as React.CSSProperties\n }\n {...getFloatingProps(props)}\n >\n {props.children}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n useFloating,\n useFocus,\n useHover,\n useClick,\n useDismiss,\n autoUpdate,\n useRole,\n useMergeRefs,\n offset,\n flip,\n shift,\n useInteractions,\n FloatingPortal,\n FloatingFocusManager,\n UseFloatingOptions,\n VirtualElement,\n ReferenceElement,\n ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\n\nexport type ClickOptions = Parameters<typeof useClick>[1];\nexport type DismissOptions = Parameters<typeof useDismiss>[1];\nexport type FocusOptions = Parameters<typeof useFocus>[1];\nexport type HoverOptions = Parameters<typeof useHover>[1];\nexport type RoleOptions = Parameters<typeof useRole>[1];\n\nexport interface PopoverOptions {\n /**\n * Angir om popoveren er åpen eller lukket.\n *\n * @see https://floating-ui.com/docs/usefloating#open\n */\n open?: boolean;\n /**\n * Callback som trigges når popoveren åpnes eller lukkes.\n *\n * @see https://floating-ui.com/docs/usefloating#onopenchange\n */\n onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n /**\n * Bestemmer plasseringen av popoveren.\n *\n * @see https://floating-ui.com/docs/usefloating#placement\n *\n * @default \"bottom-start\"\n */\n placement?: UseFloatingOptions[\"placement\"];\n /**\n * Definerer strategien for posisjonering av popoveren.\n *\n * @see https://floating-ui.com/docs/usefloating#strategy\n *\n * @default \"absolute\"\n */\n strategy?: UseFloatingOptions[\"strategy\"];\n /**\n * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n * og innhold utenfor ikke kan interageres med.\n *\n * @see https://floating-ui.com/docs/usefloating#modal\n *\n * @default true\n */\n modal?: boolean;\n /**\n * Justerer avstanden mellom referanse-elementet og popoveren.\n *\n * @see https://floating-ui.com/docs/offset\n *\n * @default 4\n */\n offset?: number;\n /**\n * Referanse til elementet som popoveren skal posisjoneres i forhold til.\n *\n * @see https://floating-ui.com/docs/usefloating#setpositionreference\n *\n * @default Popover.Trigger\n */\n positionReference?: React.RefObject<ReferenceType>;\n /**\n * Options for hover-interaksjoner.\n *\n * @see https://floating-ui.com/docs/usehover\n *\n * @default { enabled: false }\n */\n hoverOptions?: HoverOptions;\n /**\n * Options for fokus-interaksjoner.\n *\n * @see https://floating-ui.com/docs/usefocus\n *\n * @default { enabled: false }\n */\n focusOptions?: FocusOptions;\n /**\n * Options for klikk-interaksjoner.\n *\n * @see https://floating-ui.com/docs/useclick\n *\n * @default { enabled: false }\n */\n clickOptions?: ClickOptions;\n /**\n * Konfigurerer rollen for popoveren.\n *\n * @see https://floating-ui.com/docs/userole\n *\n * @default { enabled: true, role: \"dialog\" }\n */\n roleOptions?: RoleOptions;\n /**\n * Options for å lukke popoveren når en dismissal skjer,\n * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n *\n * @see https://floating-ui.com/docs/usedismiss\n *\n * @default { enabled: true }\n */\n dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n open: _open,\n onOpenChange: _onOpenChange,\n placement = \"bottom-start\",\n strategy = \"absolute\",\n modal = true,\n offset: _offset = 4,\n positionReference,\n hoverOptions,\n focusOptions,\n clickOptions,\n roleOptions,\n dismissOptions,\n}: PopoverOptions) => {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n const open = _open ?? uncontrolledOpen;\n const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n const data = useFloating({\n open,\n onOpenChange,\n placement,\n strategy,\n middleware: [\n offset(_offset),\n flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n shift({ padding: 12 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const context = data.context;\n\n const click = useClick(context, {\n enabled: false,\n ...clickOptions,\n });\n const hover = useHover(context, { enabled: false, ...hoverOptions });\n const focus = useFocus(context, { enabled: false, ...focusOptions });\n const dismiss = useDismiss(context, dismissOptions);\n const role = useRole(context, roleOptions);\n\n const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n React.useLayoutEffect(() => {\n if (positionReference) {\n data.refs.setPositionReference(positionReference?.current);\n }\n }, [positionReference, data.refs]);\n\n return React.useMemo(\n () => ({\n open,\n onOpenChange,\n modal,\n ...interactions,\n ...data,\n }),\n [open, onOpenChange, modal, interactions, data],\n );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context == null) {\n throw new Error(\n \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n );\n }\n\n return context;\n};\n\nexport const Popover = ({\n children,\n ...restOptions\n}: {\n children: React.ReactNode;\n} & PopoverOptions) => {\n const popover = usePopover({ ...restOptions });\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ninterface PopoverTriggerProps {\n children: React.ReactNode;\n /**\n * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n *\n * Default er `false`.\n *\n * @example\n * ```tsx\n * <Component asChild foo=\"bar\">\n * <Child baz=\"qux\" />\n * </Component>\n *\n * // Rendrer følgende:\n * <Child foo=\"bar\" baz=\"qux\" />\n * ```\n */\n asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n HTMLElement,\n React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n const childrenRef = (children as any).ref;\n const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n getReferenceProps({\n ref,\n ...props,\n ...children.props,\n }),\n );\n }\n\n return (\n <button\n ref={ref}\n onClick={() => onOpenChange?.(!open)}\n aria-expanded={open}\n {...getReferenceProps(props)}\n >\n {children}\n </button>\n );\n});\n\ninterface PopoverContentProps {\n /**\n * Padding rundt innholdet i popoveren.\n *\n * Default er `0`.\n */\n padding?: 0 | 8 | 16 | 24;\n /**\n *\n * Angir hvilket element som skal motta fokus ved åpning.\n * Kan være en tabbar index eller en referanse til et element.\"\n *\n * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n */\n initialFocus?: number | React.RefObject<HTMLElement>;\n /**\n * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n *\n * Default er `true`.\n * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n */\n returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n if (!referenceElement) return false;\n\n return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n {\n style,\n className,\n padding = 0,\n initialFocus = 0,\n returnFocus = true,\n ...props\n },\n propRef,\n) {\n const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n usePopoverContext();\n const ref = useMergeRefs([refs.setFloating, propRef]);\n\n const referenceElement = refs.reference.current as ReferenceElement;\n\n const { theme, density } = isCustomPositioned(referenceElement)\n ? getThemeAndDensity(referenceElement.contextElement)\n : getThemeAndDensity(referenceElement);\n\n const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt.\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) || null;\n }, [context.elements.domReference]);\n\n if (!open) return null;\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\n <FloatingFocusManager\n context={context}\n modal={modal}\n initialFocus={initialFocus}\n returnFocus={returnFocus}\n >\n <div\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\"jkl jkl-popover\", className)}\n ref={ref}\n style={\n {\n ...style,\n ...floatingStyles,\n \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n } as React.CSSProperties\n }\n {...getFloatingProps(props)}\n >\n {props.children}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { useFocus, useHover, useClick, useDismiss, useRole, UseFloatingOptions, ReferenceType } from '@floating-ui/react';
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
type ClickOptions = Parameters<typeof useClick>[1];
|
|
4
|
-
type DismissOptions = Parameters<typeof useDismiss>[1];
|
|
5
|
-
type FocusOptions = Parameters<typeof useFocus>[1];
|
|
6
|
-
type HoverOptions = Parameters<typeof useHover>[1];
|
|
7
|
-
type RoleOptions = Parameters<typeof useRole>[1];
|
|
8
|
-
interface PopoverOptions {
|
|
3
|
+
export type ClickOptions = Parameters<typeof useClick>[1];
|
|
4
|
+
export type DismissOptions = Parameters<typeof useDismiss>[1];
|
|
5
|
+
export type FocusOptions = Parameters<typeof useFocus>[1];
|
|
6
|
+
export type HoverOptions = Parameters<typeof useHover>[1];
|
|
7
|
+
export type RoleOptions = Parameters<typeof useRole>[1];
|
|
8
|
+
export interface PopoverOptions {
|
|
9
9
|
/**
|
|
10
10
|
* Angir om popoveren er åpen eller lukket.
|
|
11
11
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as Popover } from './Popover.cjs';
|
|
1
|
+
export { default as Popover, type PopoverOptions, type ClickOptions, type DismissOptions, type FocusOptions, type HoverOptions, type RoleOptions, } from './Popover.cjs';
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
export type
|
|
2
|
-
export {
|
|
3
|
-
export type { ProgressBarProps } from './ProgressBar.cjs';
|
|
4
|
-
export { ProgressBar } from './ProgressBar.cjs';
|
|
1
|
+
export { Countdown, type CountdownProps } from './Countdown.cjs';
|
|
2
|
+
export { ProgressBar, type ProgressBarProps } from './ProgressBar.cjs';
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
export type
|
|
2
|
-
export {
|
|
3
|
-
export type
|
|
4
|
-
export { RadioButtonGroup } from './RadioButtonGroup.cjs';
|
|
5
|
-
export type { BaseRadioButtonProps } from './BaseRadioButton.cjs';
|
|
6
|
-
export { BaseRadioButton } from './BaseRadioButton.cjs';
|
|
1
|
+
export { RadioButton, type RadioButtonProps } from './RadioButton.cjs';
|
|
2
|
+
export { RadioButtonGroup, type RadioButtonGroupProps, } from './RadioButtonGroup.cjs';
|
|
3
|
+
export { BaseRadioButton, type BaseRadioButtonProps, } from './BaseRadioButton.cjs';
|