@fremtind/jokul 0.43.0 → 0.43.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -16
- package/build/build-stats.html +1 -1
- package/build/cjs/components/accordion/AccordionItem.cjs.map +1 -1
- package/build/cjs/components/autosuggest/Autosuggest.cjs +1 -1
- package/build/cjs/components/autosuggest/Autosuggest.cjs.map +1 -1
- package/build/cjs/components/autosuggest/BaseAutosuggest.cjs +2 -2
- package/build/cjs/components/autosuggest/BaseAutosuggest.cjs.map +1 -1
- package/build/cjs/components/autosuggest/ControllerButton.cjs.map +1 -1
- package/build/cjs/components/autosuggest/utils.cjs.map +1 -1
- package/build/cjs/components/breadcrumb/Breadcrumb.cjs.map +1 -1
- package/build/cjs/components/button/Button.cjs.map +1 -1
- package/build/cjs/components/card/Card.cjs.map +1 -1
- package/build/cjs/components/card/CardImage.cjs.map +1 -1
- package/build/cjs/components/card/NavCard.cjs.map +1 -1
- package/build/cjs/components/checkbox/Checkbox.cjs.map +1 -1
- package/build/cjs/components/combobox/Combobox.cjs.map +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
- package/build/cjs/components/cookie-consent/CookieConsentContext.cjs.map +1 -1
- package/build/cjs/components/cookie-consent/cookieConsentUtils.cjs.map +1 -1
- package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
- package/build/cjs/components/datepicker/internal/Calendar.cjs.map +1 -1
- package/build/cjs/components/datepicker/internal/calendarReducer.cjs.map +1 -1
- package/build/cjs/components/datepicker/internal/useCalendar.cjs.map +1 -1
- package/build/cjs/components/datepicker/internal/utils.cjs.map +1 -1
- package/build/cjs/components/expander/ExpandablePanel.cjs.map +1 -1
- package/build/cjs/components/expander/ExpandablePanelContent.cjs.map +1 -1
- package/build/cjs/components/expander/Expander.cjs.map +1 -1
- package/build/cjs/components/expander/deprecated/ExpandSection.cjs.map +1 -1
- package/build/cjs/components/expander/deprecated/Expander.cjs.map +1 -1
- package/build/cjs/components/feedback/Feedback.cjs.map +1 -1
- package/build/cjs/components/feedback/feedbackContext.cjs.map +1 -1
- package/build/cjs/components/feedback/followup/Followup.cjs.map +1 -1
- package/build/cjs/components/feedback/followup/useFollowup.cjs.map +1 -1
- package/build/cjs/components/feedback/main-question/MainQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/main-question/useMainQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/AddonQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/CheckboxQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/ContactQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/RadioQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/SmileyQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/TextQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/smileyUtils.cjs.map +1 -1
- package/build/cjs/components/feedback/utils.cjs.map +1 -1
- package/build/cjs/components/file-input/File.cjs.map +1 -1
- package/build/cjs/components/file-input/FileInput.cjs.map +1 -1
- package/build/cjs/components/file-input/internal/Dropzone.cjs.map +1 -1
- package/build/cjs/components/file-input/internal/Input.cjs.map +1 -1
- package/build/cjs/components/file-input/internal/fileInputContext.cjs.map +1 -1
- package/build/cjs/components/file-input/internal/validateFile.cjs.map +1 -1
- package/build/cjs/components/flex/Flex.cjs.map +1 -1
- package/build/cjs/components/icon/icons/GreenCheckIcon.cjs.map +1 -1
- package/build/cjs/components/icon/icons/RedCrossIcon.cjs.map +1 -1
- package/build/cjs/components/icon-button/IconButton.cjs.map +1 -1
- package/build/cjs/components/image/Image.cjs.map +1 -1
- package/build/cjs/components/image/useImageLoadingStatus.cjs.map +1 -1
- package/build/cjs/components/input-group/FieldGroup.cjs.map +1 -1
- package/build/cjs/components/input-group/InputGroup.cjs.map +1 -1
- package/build/cjs/components/input-group/Label.cjs.map +1 -1
- package/build/cjs/components/input-group/SupportLabel.cjs.map +1 -1
- package/build/cjs/components/input-panel/RadioPanel.cjs.map +1 -1
- package/build/cjs/components/input-panel/RadioPanelGroup.cjs.map +1 -1
- package/build/cjs/components/link-list/LinkList.cjs.map +1 -1
- package/build/cjs/components/list/List.cjs.map +1 -1
- package/build/cjs/components/loader/Loader.cjs.map +1 -1
- package/build/cjs/components/loader/skeletons/SkeletonAnimation.cjs.map +1 -1
- package/build/cjs/components/loader/skeletons/SkeletonLabel.cjs.map +1 -1
- package/build/cjs/components/loader/skeletons/SkeletonTextArea.cjs.map +1 -1
- package/build/cjs/components/logo/Logo.cjs.map +1 -1
- package/build/cjs/components/logo/LogoStamp.cjs.map +1 -1
- package/build/cjs/components/logo/useTextSpinner.cjs.map +1 -1
- package/build/cjs/components/menu/Menu.cjs.map +1 -1
- package/build/cjs/components/menu/MenuItem.cjs.map +1 -1
- package/build/cjs/components/menu/MenuItemCheckbox.cjs.map +1 -1
- package/build/cjs/components/menu/useMenuWideEvents.cjs.map +1 -1
- package/build/cjs/components/message/FormErrorMessage.cjs.map +1 -1
- package/build/cjs/components/message/Message.cjs.map +1 -1
- package/build/cjs/components/modal/Modal.cjs.map +1 -1
- package/build/cjs/components/modal/useModal.cjs.map +1 -1
- package/build/cjs/components/pagination/Pagination.cjs.map +1 -1
- package/build/cjs/components/popover/Popover.cjs.map +1 -1
- package/build/cjs/components/progress-bar/Countdown.cjs.map +1 -1
- package/build/cjs/components/progress-bar/ProgressBar.cjs.map +1 -1
- package/build/cjs/components/radio-button/BaseRadioButton.cjs.map +1 -1
- package/build/cjs/components/radio-button/RadioButton.cjs.map +1 -1
- package/build/cjs/components/radio-button/RadioButtonGroup.cjs.map +1 -1
- package/build/cjs/components/select/NativeSelect.cjs.map +1 -1
- package/build/cjs/components/select/Select.cjs.map +1 -1
- package/build/cjs/components/system-message/SystemMessage.cjs.map +1 -1
- package/build/cjs/components/system-message/common/MessageIcon.cjs.map +1 -1
- package/build/cjs/components/table/ExpandableTableRowController.cjs.map +1 -1
- package/build/cjs/components/table/Table.cjs.map +1 -1
- package/build/cjs/components/table/TableCell.cjs.map +1 -1
- package/build/cjs/components/table/TableHead.cjs.map +1 -1
- package/build/cjs/components/table/TableHeader.cjs.map +1 -1
- package/build/cjs/components/table/TablePagination.cjs.map +1 -1
- package/build/cjs/components/table/TableRow.cjs.map +1 -1
- package/build/cjs/components/table/utils.cjs.map +1 -1
- package/build/cjs/components/tabs/NavTab.cjs.map +1 -1
- package/build/cjs/components/tabs/NavTabs.cjs.map +1 -1
- package/build/cjs/components/tabs/Tab.cjs.map +1 -1
- package/build/cjs/components/tabs/TabList.cjs.map +1 -1
- package/build/cjs/components/tabs/TabPanel.cjs.map +1 -1
- package/build/cjs/components/tabs/Tabs.cjs.map +1 -1
- package/build/cjs/components/text-input/BaseTextArea.cjs.map +1 -1
- package/build/cjs/components/text-input/BaseTextInput.cjs.map +1 -1
- package/build/cjs/components/text-input/TextArea.cjs.map +1 -1
- package/build/cjs/components/text-input/TextInput.cjs.map +1 -1
- package/build/cjs/components/toast/Toast.cjs.map +1 -1
- package/build/cjs/components/toast/toastContext.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSlider.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSwitch.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/usePillStyles.cjs.map +1 -1
- package/build/cjs/components/tooltip/PopupTip.cjs.map +1 -1
- package/build/cjs/components/tooltip/Tooltip.cjs.map +1 -1
- package/build/cjs/components/tooltip/TooltipContent.cjs.map +1 -1
- package/build/cjs/components/tooltip/TooltipTrigger.cjs.map +1 -1
- package/build/cjs/core/index.cjs +1 -1
- package/build/cjs/core/tailwind/tailwindPreset.cjs +1 -1
- package/build/cjs/core/tailwind/tailwindPreset.cjs.map +1 -1
- package/build/cjs/hooks/useAnimatedDetails/useAnimatedDetails.cjs.map +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeight.cjs.map +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs.map +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.cjs.map +1 -1
- package/build/cjs/hooks/useAriaLiveRegion/useAriaLiveRegion.cjs.map +1 -1
- package/build/cjs/hooks/useBrowserPreferences/useBrowserPreferences.cjs.map +1 -1
- package/build/cjs/hooks/useClickOutside/useClickOutside.cjs.map +1 -1
- package/build/cjs/hooks/useElementDimensions/useElementDimensions.cjs.map +1 -1
- package/build/cjs/hooks/useFocusOutside/useFocusOutside.cjs.map +1 -1
- package/build/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs.map +1 -1
- package/build/cjs/hooks/useKeyListener/useKeyListener.cjs.map +1 -1
- package/build/cjs/hooks/useListNavigation/useListNavigation.cjs.map +1 -1
- package/build/cjs/hooks/useMutationObserver/useMutationObserver.cjs.map +1 -1
- package/build/cjs/hooks/useProgressiveImg/useProgressiveImg.cjs.map +1 -1
- package/build/cjs/hooks/useScreen/state.cjs.map +1 -1
- package/build/cjs/hooks/useScreen/useScreen.cjs +1 -1
- package/build/cjs/hooks/useScreen/useScreen.cjs.map +1 -1
- package/build/cjs/index.cjs +1 -1
- package/build/cjs/utilities/formatters/avstand/formatAvstand.cjs.map +1 -1
- package/build/cjs/utilities/formatters/bytes/formatBytes.cjs.map +1 -1
- package/build/cjs/utilities/formatters/fodselsnummer/formatFodselsnummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/kontonummer/formatKontonummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/kortnummer/formatKortnummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/telefonnummer/formatTelefonnummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/util/registerWithMask.cjs.map +1 -1
- package/build/cjs/utilities/getThemeAndDensity.cjs.map +1 -1
- package/build/cjs/utilities/polymorphism/SlotComponent.cjs.map +1 -1
- package/build/cjs/utilities/polymorphism/mergeProps.cjs.map +1 -1
- package/build/cjs/utilities/tabListener.cjs.map +1 -1
- package/build/cjs/utilities/validators/isValidKortnummer/isValidKortnummer.cjs.map +1 -1
- package/build/es/components/accordion/AccordionItem.js.map +1 -1
- package/build/es/components/autosuggest/Autosuggest.js +1 -1
- package/build/es/components/autosuggest/Autosuggest.js.map +1 -1
- package/build/es/components/autosuggest/BaseAutosuggest.js +2 -2
- package/build/es/components/autosuggest/BaseAutosuggest.js.map +1 -1
- package/build/es/components/autosuggest/utils.js.map +1 -1
- package/build/es/components/breadcrumb/Breadcrumb.js.map +1 -1
- package/build/es/components/button/Button.js.map +1 -1
- package/build/es/components/card/NavCard.js.map +1 -1
- package/build/es/components/checkbox/Checkbox.js.map +1 -1
- package/build/es/components/combobox/Combobox.js.map +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
- package/build/es/components/cookie-consent/CookieConsentContext.js.map +1 -1
- package/build/es/components/cookie-consent/cookieConsentUtils.js.map +1 -1
- package/build/es/components/datepicker/DatePicker.js.map +1 -1
- package/build/es/components/datepicker/internal/Calendar.js.map +1 -1
- package/build/es/components/datepicker/internal/calendarReducer.js.map +1 -1
- package/build/es/components/datepicker/internal/useCalendar.js.map +1 -1
- package/build/es/components/datepicker/internal/utils.js.map +1 -1
- package/build/es/components/expander/ExpandablePanelContent.js.map +1 -1
- package/build/es/components/expander/Expander.js.map +1 -1
- package/build/es/components/expander/deprecated/ExpandSection.js.map +1 -1
- package/build/es/components/expander/deprecated/Expander.js.map +1 -1
- package/build/es/components/feedback/Feedback.js.map +1 -1
- package/build/es/components/feedback/followup/useFollowup.js.map +1 -1
- package/build/es/components/feedback/main-question/useMainQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/CheckboxQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/ContactQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/RadioQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/SmileyQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/TextQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/smileyUtils.js.map +1 -1
- package/build/es/components/feedback/utils.js.map +1 -1
- package/build/es/components/file-input/File.js.map +1 -1
- package/build/es/components/file-input/FileInput.js.map +1 -1
- package/build/es/components/file-input/internal/Dropzone.js.map +1 -1
- package/build/es/components/file-input/internal/Input.js.map +1 -1
- package/build/es/components/flex/Flex.js.map +1 -1
- package/build/es/components/icon-button/IconButton.js.map +1 -1
- package/build/es/components/image/Image.js.map +1 -1
- package/build/es/components/image/useImageLoadingStatus.js.map +1 -1
- package/build/es/components/input-group/FieldGroup.js.map +1 -1
- package/build/es/components/input-group/InputGroup.js.map +1 -1
- package/build/es/components/input-group/Label.js.map +1 -1
- package/build/es/components/input-group/SupportLabel.js.map +1 -1
- package/build/es/components/input-panel/RadioPanel.js.map +1 -1
- package/build/es/components/loader/Loader.js.map +1 -1
- package/build/es/components/loader/skeletons/SkeletonAnimation.js.map +1 -1
- package/build/es/components/loader/skeletons/SkeletonLabel.js.map +1 -1
- package/build/es/components/loader/skeletons/SkeletonTextArea.js.map +1 -1
- package/build/es/components/logo/Logo.js.map +1 -1
- package/build/es/components/logo/LogoStamp.js.map +1 -1
- package/build/es/components/menu/Menu.js.map +1 -1
- package/build/es/components/menu/MenuItem.js.map +1 -1
- package/build/es/components/menu/MenuItemCheckbox.js.map +1 -1
- package/build/es/components/menu/useMenuWideEvents.js.map +1 -1
- package/build/es/components/message/FormErrorMessage.js.map +1 -1
- package/build/es/components/message/Message.js.map +1 -1
- package/build/es/components/pagination/Pagination.js.map +1 -1
- package/build/es/components/popover/Popover.js.map +1 -1
- package/build/es/components/progress-bar/Countdown.js.map +1 -1
- package/build/es/components/progress-bar/ProgressBar.js.map +1 -1
- package/build/es/components/radio-button/BaseRadioButton.js.map +1 -1
- package/build/es/components/radio-button/RadioButtonGroup.js.map +1 -1
- package/build/es/components/select/NativeSelect.js.map +1 -1
- package/build/es/components/select/Select.js.map +1 -1
- package/build/es/components/system-message/SystemMessage.js.map +1 -1
- package/build/es/components/system-message/common/MessageIcon.js.map +1 -1
- package/build/es/components/table/ExpandableTableRowController.js.map +1 -1
- package/build/es/components/table/Table.js.map +1 -1
- package/build/es/components/table/TableCell.js.map +1 -1
- package/build/es/components/table/TableHead.js.map +1 -1
- package/build/es/components/table/TableHeader.js.map +1 -1
- package/build/es/components/table/TablePagination.js.map +1 -1
- package/build/es/components/table/TableRow.js.map +1 -1
- package/build/es/components/table/utils.js.map +1 -1
- package/build/es/components/tabs/NavTab.js.map +1 -1
- package/build/es/components/tabs/NavTabs.js.map +1 -1
- package/build/es/components/tabs/Tab.js.map +1 -1
- package/build/es/components/tabs/TabList.js.map +1 -1
- package/build/es/components/tabs/Tabs.js.map +1 -1
- package/build/es/components/text-input/BaseTextArea.js.map +1 -1
- package/build/es/components/text-input/BaseTextInput.js.map +1 -1
- package/build/es/components/text-input/TextArea.js.map +1 -1
- package/build/es/components/text-input/TextInput.js.map +1 -1
- package/build/es/components/toast/Toast.js.map +1 -1
- package/build/es/components/toast/toastContext.js.map +1 -1
- package/build/es/components/toggle-switch/ToggleSlider.js.map +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.js.map +1 -1
- package/build/es/components/toggle-switch/usePillStyles.js.map +1 -1
- package/build/es/components/tooltip/Tooltip.js.map +1 -1
- package/build/es/components/tooltip/TooltipTrigger.js.map +1 -1
- package/build/es/core/index.js +1 -1
- package/build/es/core/tailwind/tailwindPreset.js +1 -1
- package/build/es/core/tailwind/tailwindPreset.js.map +1 -1
- package/build/es/hooks/useAnimatedDetails/useAnimatedDetails.js.map +1 -1
- package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js.map +1 -1
- package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js.map +1 -1
- package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js.map +1 -1
- package/build/es/hooks/useAriaLiveRegion/useAriaLiveRegion.js.map +1 -1
- package/build/es/hooks/useBrowserPreferences/useBrowserPreferences.js.map +1 -1
- package/build/es/hooks/useClickOutside/useClickOutside.js.map +1 -1
- package/build/es/hooks/useElementDimensions/useElementDimensions.js.map +1 -1
- package/build/es/hooks/useFocusOutside/useFocusOutside.js.map +1 -1
- package/build/es/hooks/useIntersectionObserver/useIntersectionObserver.js.map +1 -1
- package/build/es/hooks/useKeyListener/useKeyListener.js.map +1 -1
- package/build/es/hooks/useListNavigation/useListNavigation.js.map +1 -1
- package/build/es/hooks/useMutationObserver/useMutationObserver.js.map +1 -1
- package/build/es/hooks/useProgressiveImg/useProgressiveImg.js.map +1 -1
- package/build/es/hooks/useScreen/state.js.map +1 -1
- package/build/es/hooks/useScreen/useScreen.js +1 -1
- package/build/es/hooks/useScreen/useScreen.js.map +1 -1
- package/build/es/index.js +1 -1
- package/build/es/utilities/formatters/util/registerWithMask.js.map +1 -1
- package/build/es/utilities/getThemeAndDensity.js.map +1 -1
- package/build/es/utilities/polymorphism/SlotComponent.js.map +1 -1
- package/build/es/utilities/polymorphism/mergeProps.js.map +1 -1
- package/build/es/utilities/tabListener.js.map +1 -1
- package/build/es/utilities/validators/isValidKortnummer/isValidKortnummer.js.map +1 -1
- package/package.json +2 -2
- 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/checkbox-panel.css +2 -2
- package/styles/components/input-panel/checkbox-panel.min.css +1 -1
- package/styles/components/input-panel/radio-panel.css +2 -2
- package/styles/components/input-panel/radio-panel.min.css +1 -1
- 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/styles.css +37 -37
- package/styles/styles.min.css +1 -1
- package/build/cjs/core/tailwind/plugins/typographyPlugin.cjs +0 -2
- package/build/cjs/core/tailwind/plugins/typographyPlugin.cjs.map +0 -1
- package/build/cjs/core/tailwind/plugins/typographyPlugin.d.cts +0 -2
- package/build/es/core/tailwind/plugins/typographyPlugin.d.ts +0 -2
- package/build/es/core/tailwind/plugins/typographyPlugin.js +0 -2
- package/build/es/core/tailwind/plugins/typographyPlugin.js.map +0 -1
- package/build/tailwindPreset-CSQrgZ57.cjs +0 -2
- package/build/tailwindPreset-CSQrgZ57.cjs.map +0 -1
- package/build/tailwindPreset-D4TYL0kz.js +0 -2
- package/build/tailwindPreset-D4TYL0kz.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/**\n * Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n *\n * @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n isOpen: boolean,\n options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n const wasOpen = usePreviousValue(isOpen);\n const easing = options?.easing || defaultEasing;\n const timing = options?.timing || defaultTiming;\n const display = options?.display || defaultDisplay;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n function handleTransitionEnd(event: TransitionEvent) {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n if (isOpen) {\n element.removeAttribute(\"style\");\n } else {\n element.removeAttribute(\"style\");\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef);\n }\n }\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n // Ikke kjør animasjonen hvis elementet ikke er rendret,\n // eller hvis det er første render.\n if (!element || wasOpen === undefined) {\n return;\n }\n\n if (!isOpen) {\n element.style.display = \"none\";\n if (!wasOpen) {\n // Første render eller rerender med isOpen false\n return;\n }\n } else if (isOpen && wasOpen) {\n // Re-render etter å ha vært lukket, men forblitt åpen.\n return;\n }\n\n options?.onTransitionStart?.(isOpen, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n }\n options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n element.style.transition = transition;\n element.style.display = display;\n element.style.overflow = \"hidden\";\n\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n element.style.height = \"0\";\n element.style.height = `${element.scrollHeight}px`;\n } else {\n // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n // style: height: 0; display: block; overflow:hidden\n if (element.scrollHeight === 0) {\n element.removeAttribute(\"style\");\n return;\n }\n\n element.style.height = `${element.scrollHeight}px`;\n\n raf1.current = requestAnimationFrame(() => {\n raf2.current = requestAnimationFrame(() => {\n element.style.height = `${0}px`;\n });\n });\n }\n }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n useEffect(() => {\n runAnimation();\n }, [isOpen, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, [raf1, raf2]);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","_a","onTransitionEnd","call","runAnimation","useCallback","onTransitionStart","_b","onFirstVisible","_c","overflow","_d","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiBgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAUC,EAAiBH,GAC3BI,GAAS,MAAAH,OAAA,EAAAA,EAASG,SAfN,WAgBZC,GAAS,MAAAJ,OAAAA,EAAAA,EAASI,SAfN,aAgBZC,GAAU,MAAAL,SAAAA,EAASK,UAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,SACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAEnB,OAAAiB,EAAA,MAAAtB,OAAA,EAAAA,EAAAuB,kBAAAD,EAAAE,KAAAxB,EAAkBD,EAAQe,
|
|
1
|
+
{"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/**\n * Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n *\n * @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n isOpen: boolean,\n options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n const wasOpen = usePreviousValue(isOpen);\n const easing = options?.easing || defaultEasing;\n const timing = options?.timing || defaultTiming;\n const display = options?.display || defaultDisplay;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n function handleTransitionEnd(event: TransitionEvent) {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n if (isOpen) {\n element.removeAttribute(\"style\");\n } else {\n element.removeAttribute(\"style\");\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef);\n }\n }\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n // Ikke kjør animasjonen hvis elementet ikke er rendret,\n // eller hvis det er første render.\n if (!element || wasOpen === undefined) {\n return;\n }\n\n if (!isOpen) {\n element.style.display = \"none\";\n if (!wasOpen) {\n // Første render eller rerender med isOpen false\n return;\n }\n } else if (isOpen && wasOpen) {\n // Re-render etter å ha vært lukket, men forblitt åpen.\n return;\n }\n\n options?.onTransitionStart?.(isOpen, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n }\n options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n element.style.transition = transition;\n element.style.display = display;\n element.style.overflow = \"hidden\";\n\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n element.style.height = \"0\";\n element.style.height = `${element.scrollHeight}px`;\n } else {\n // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n // style: height: 0; display: block; overflow:hidden\n if (element.scrollHeight === 0) {\n element.removeAttribute(\"style\");\n return;\n }\n\n element.style.height = `${element.scrollHeight}px`;\n\n raf1.current = requestAnimationFrame(() => {\n raf2.current = requestAnimationFrame(() => {\n element.style.height = `${0}px`;\n });\n });\n }\n }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n useEffect(() => {\n runAnimation();\n }, [isOpen, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, [raf1, raf2]);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","_a","onTransitionEnd","call","runAnimation","useCallback","onTransitionStart","_b","onFirstVisible","_c","overflow","_d","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiBgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAUC,EAAiBH,GAC3BI,GAAS,MAAAH,OAAA,EAAAA,EAASG,SAfN,WAgBZC,GAAS,MAAAJ,OAAAA,EAAAA,EAASI,SAfN,aAgBZC,GAAU,MAAAL,SAAAA,EAASK,UAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,SACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAEnB,OAAAiB,EAAA,MAAAtB,OAAA,EAAAA,EAAAuB,kBAAAD,EAAAE,KAAAxB,EAAkBD,EAAQe,GAE3C,CAEMW,MAAAA,EAAeC,GAAY,iBAC7B,MAAMT,EAAUH,EAAWI,QAIvB,GAACD,QAAuB,IAAZhB,EAIhB,CAAKF,GAAAA,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OAOCqB,GAAA,OAAAA,EAAA,MAAAtB,OAAA,EAAAA,EAAA2B,oBAAAL,EAAAE,KAAAxB,EAAoBD,EAAQe,GAEjCL,EAMA,OALAQ,EAAQG,gBAAgB,SACpBrB,IACS,OAAA6B,EAAA,MAAA5B,OAAA,EAAAA,EAAA6B,iBAAAD,EAAAJ,KAAAxB,EAAiBD,EAAQe,SAE7B,OAAAgB,EAAA,MAAA9B,OAAA,EAAAA,EAAAuB,kBAAAO,EAAAN,KAAAxB,EAAkBD,EAAQe,IAIvCG,GAAAA,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMU,SAAW,SAErBhC,EACS,OAAAiC,EAAA,MAAAhC,OAAAA,EAAAA,EAAA6B,iBAAAG,EAAAR,KAAAxB,EAAiBD,EAAQe,GAClCG,EAAQI,MAAMY,OAAS,IACvBhB,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,qBAC/B,CAICjB,GAAyB,IAAzBA,EAAQiB,aAER,YADAjB,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,iBAE7BvB,EAAAO,QAAUiB,uBAAsB,KAC5BtB,EAAAK,QAAUiB,uBAAsB,KACzBlB,EAAAI,MAAMY,OAAS,KAAA,GAC1B,GAET,CAAA,IACD,CAAClC,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAEhE,OAAA+B,GAAU,KACOX,MACd,CAAC1B,EAAQ0B,IAEZW,GAAU,KACN,MAAMnB,EAAUH,EAAWI,QAC3B,OAAID,GACQA,EAAAoB,iBAAiB,gBAAiBtB,GAGvC,KACCE,GACQA,EAAAqB,oBACJ,gBACAvB,EAAA,CAER,GAGL,CAAChB,IAEJqC,GAAU,KACN,MAAMG,EAAK5B,EAAKO,QACVsB,EAAK3B,EAAKK,QAChB,MAAO,KACHqB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,CAAA,GAElC,CAAC7B,EAAME,IAEH,CAACC,EAAYW,EACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimatedHeightBetween.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeightBetween.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\nfunction collapseElement<T extends HTMLElement>(\n elementRef: RefObject<T>,\n transition: string,\n raf1: React.MutableRefObject<number | undefined>,\n raf2: React.MutableRefObject<number | undefined>,\n) {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const expandedHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Hent kollapset høyde\n element.style.removeProperty(\"transition\");\n element.dataset[\"expanded\"] = \"false\";\n const collapsedHeight = element.getBoundingClientRect().height;\n element.dataset[\"expanded\"] = \"true\";\n\n // Sett høyde tilbake til utvidet høyde\n element.style.setProperty(\"height\", `${expandedHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til kollapset høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${collapsedHeight}px`);\n element.dataset[\"expanded\"] = \"false\";\n });\n });\n}\n\nfunction expandElement<T extends HTMLElement>(\n elementRef: RefObject<T>,\n transition: string,\n raf1: React.MutableRefObject<number | undefined>,\n raf2: React.MutableRefObject<number | undefined>,\n) {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const expandedHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Hent utvidet høyde\n element.style.removeProperty(\"transition\");\n element.dataset[\"expanded\"] = \"false\";\n const collapsedHeight = element.getBoundingClientRect().height;\n\n // Sett høyde tilbake til kollapset høyde\n element.style.setProperty(\"height\", `${collapsedHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til utvidet høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${expandedHeight}px`);\n element.dataset[\"expanded\"] = \"true\";\n });\n });\n}\n\n/**\n * Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.\n * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.\n * @param isExpanded indikerer om elementet skal være utvidet eller ikke\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen\n */\nexport function useAnimatedHeightBetween<T extends HTMLElement>(\n isExpanded: boolean,\n options?: Omit<UseAnimatedHeightOptions<T>, \"display\" | \"onFirstVisible\">,\n): [RefObject<T>, () => void] {\n const wasExpanded = usePreviousValue(isExpanded);\n const easing = options?.easing || defaultEasing;\n const timing = options?.timing || defaultTiming;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n const handleTransitionEnd = useCallback(\n (event: TransitionEvent) => {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n element.removeAttribute(\"style\");\n options?.onTransitionEnd?.(isExpanded, elementRef);\n }\n },\n [options, isExpanded],\n );\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n if (wasExpanded === undefined) {\n // Første render\n element.dataset[\"expanded\"] = isExpanded ? \"true\" : \"false\";\n }\n\n if ((!isExpanded && !wasExpanded) || (isExpanded && wasExpanded)) {\n // Ingen endring\n return;\n }\n\n options?.onTransitionStart?.(isExpanded, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n element.dataset[\"expanded\"] = isExpanded ? \"true\" : \"false\";\n options?.onTransitionEnd?.(isExpanded, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n if (isExpanded) {\n expandElement(elementRef, transition, raf1, raf2);\n } else {\n collapseElement(elementRef, transition, raf1, raf2);\n }\n }, [wasExpanded, isExpanded, options, prefersReducedMotion, transition]);\n\n useEffect(() => {\n runAnimation();\n }, [isExpanded, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isExpanded]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, [raf1, raf2]);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeightBetween","isExpanded","options","wasExpanded","usePreviousValue","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","_a","onTransitionEnd","call","runAnimation","dataset","expanded","onTransitionStart","_b","expandedHeight","scrollHeight","requestAnimationFrame","style","removeProperty","collapsedHeight","getBoundingClientRect","height","setProperty","expandElement","collapseElement","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiFgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAcC,EAAiBH,GAC/BI,GAAS,MAAAH,OAAA,EAAAA,EAASG,SAhFN,WAiFZC,GAAS,MAAAJ,OAAA,EAAAA,EAASI,SAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,GACvBC,UACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACf,OAAAC,EAAA,MAAArB,SAAAA,EAAAsB,kBAAAD,EAAAE,KAAAvB,EAAkBD,EAAYc,GAAAA,GAG/C,CAACb,EAASD,IAGRyB,EAAeT,GAAY,aAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,SAEe,IAAhBhB,IAEAgB,EAAQQ,QAAQC,SAAc3B,EAAa,OAAS,YAGlDA,IAAeE,GAAiBF,GAAcE,IAOpD,CAFSoB,GAAA,OAAAA,EAAA,MAAArB,OAAA,EAAAA,EAAA2B,oBAAAN,EAAAE,KAAAvB,EAAoBD,EAAYc,GAErCL,EAIA,OAHAS,EAAQG,gBAAgB,SACxBH,EAAQQ,QAAQC,SAAc3B,EAAa,OAAS,aAC3C,OAAA6B,EAAA,MAAA5B,SAAAA,EAAAsB,kBAAAM,EAAAL,KAAAvB,EAAkBD,EAAYc,IAIvCd,EA3FZ,SACIc,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMS,EAAiBZ,EAAQa,aAE1BpB,EAAAQ,QAAUa,uBAAsB,KAEzBd,EAAAe,MAAMC,eAAe,cACrBhB,EAAAQ,QAAQC,SAAc,QACxBQ,MAAAA,EAAkBjB,EAAQkB,wBAAwBC,OAGxDnB,EAAQe,MAAMK,YAAY,SAAU,GAAGH,OAC/BjB,EAAAe,MAAMK,YAAY,aAAc,UAEnCzB,EAAAM,QAAUa,uBAAsB,KAEzBd,EAAAe,MAAMK,YAAY,aAAchC,GACxCY,EAAQe,MAAMK,YAAY,SAAU,GAAGR,OAC/BZ,EAAAQ,QAAQC,SAAc,MAAA,GACjC,GAET,CA8D0BY,CAAAzB,EAAYR,EAAYK,EAAME,GA7HxD,SACIC,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMS,EAAiBZ,EAAQa,aAE1BpB,EAAAQ,QAAUa,uBAAsB,KAEzBd,EAAAe,MAAMC,eAAe,cACrBhB,EAAAQ,QAAQC,SAAc,QACxBQ,MAAAA,EAAkBjB,EAAQkB,wBAAwBC,OAChDnB,EAAAQ,QAAQC,SAAc,OAG9BT,EAAQe,MAAMK,YAAY,SAAU,GAAGR,OAC/BZ,EAAAe,MAAMK,YAAY,aAAc,UAEnCzB,EAAAM,QAAUa,uBAAsB,KAEzBd,EAAAe,MAAMK,YAAY,aAAchC,GACxCY,EAAQe,MAAMK,YAAY,SAAU,GAAGH,OAC/BjB,EAAAQ,QAAQC,SAAc,OAAA,GACjC,GAET,CAgG4Ba,CAAA1B,EAAYR,EAAYK,EAAME,EAAI,IAEvD,CAACX,EAAaF,EAAYC,EAASQ,EAAsBH,IAE5D,OAAAmC,GAAU,KACOhB,
|
|
1
|
+
{"version":3,"file":"useAnimatedHeightBetween.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeightBetween.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\nfunction collapseElement<T extends HTMLElement>(\n elementRef: RefObject<T>,\n transition: string,\n raf1: React.MutableRefObject<number | undefined>,\n raf2: React.MutableRefObject<number | undefined>,\n) {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const expandedHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Hent kollapset høyde\n element.style.removeProperty(\"transition\");\n element.dataset[\"expanded\"] = \"false\";\n const collapsedHeight = element.getBoundingClientRect().height;\n element.dataset[\"expanded\"] = \"true\";\n\n // Sett høyde tilbake til utvidet høyde\n element.style.setProperty(\"height\", `${expandedHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til kollapset høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${collapsedHeight}px`);\n element.dataset[\"expanded\"] = \"false\";\n });\n });\n}\n\nfunction expandElement<T extends HTMLElement>(\n elementRef: RefObject<T>,\n transition: string,\n raf1: React.MutableRefObject<number | undefined>,\n raf2: React.MutableRefObject<number | undefined>,\n) {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const expandedHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Hent utvidet høyde\n element.style.removeProperty(\"transition\");\n element.dataset[\"expanded\"] = \"false\";\n const collapsedHeight = element.getBoundingClientRect().height;\n\n // Sett høyde tilbake til kollapset høyde\n element.style.setProperty(\"height\", `${collapsedHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til utvidet høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${expandedHeight}px`);\n element.dataset[\"expanded\"] = \"true\";\n });\n });\n}\n\n/**\n * Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.\n * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.\n * @param isExpanded indikerer om elementet skal være utvidet eller ikke\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen\n */\nexport function useAnimatedHeightBetween<T extends HTMLElement>(\n isExpanded: boolean,\n options?: Omit<UseAnimatedHeightOptions<T>, \"display\" | \"onFirstVisible\">,\n): [RefObject<T>, () => void] {\n const wasExpanded = usePreviousValue(isExpanded);\n const easing = options?.easing || defaultEasing;\n const timing = options?.timing || defaultTiming;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n const handleTransitionEnd = useCallback(\n (event: TransitionEvent) => {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n element.removeAttribute(\"style\");\n options?.onTransitionEnd?.(isExpanded, elementRef);\n }\n },\n [options, isExpanded],\n );\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n if (wasExpanded === undefined) {\n // Første render\n element.dataset[\"expanded\"] = isExpanded ? \"true\" : \"false\";\n }\n\n if ((!isExpanded && !wasExpanded) || (isExpanded && wasExpanded)) {\n // Ingen endring\n return;\n }\n\n options?.onTransitionStart?.(isExpanded, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n element.dataset[\"expanded\"] = isExpanded ? \"true\" : \"false\";\n options?.onTransitionEnd?.(isExpanded, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n if (isExpanded) {\n expandElement(elementRef, transition, raf1, raf2);\n } else {\n collapseElement(elementRef, transition, raf1, raf2);\n }\n }, [wasExpanded, isExpanded, options, prefersReducedMotion, transition]);\n\n useEffect(() => {\n runAnimation();\n }, [isExpanded, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isExpanded]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, [raf1, raf2]);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeightBetween","isExpanded","options","wasExpanded","usePreviousValue","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","_a","onTransitionEnd","call","runAnimation","dataset","expanded","onTransitionStart","_b","expandedHeight","scrollHeight","requestAnimationFrame","style","removeProperty","collapsedHeight","getBoundingClientRect","height","setProperty","expandElement","collapseElement","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiFgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAcC,EAAiBH,GAC/BI,GAAS,MAAAH,OAAA,EAAAA,EAASG,SAhFN,WAiFZC,GAAS,MAAAJ,OAAA,EAAAA,EAASI,SAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,GACvBC,UACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACf,OAAAC,EAAA,MAAArB,SAAAA,EAAAsB,kBAAAD,EAAAE,KAAAvB,EAAkBD,EAAYc,GAAAA,GAG/C,CAACb,EAASD,IAGRyB,EAAeT,GAAY,aAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,SAEe,IAAhBhB,IAEAgB,EAAQQ,QAAQC,SAAc3B,EAAa,OAAS,YAGlDA,IAAeE,GAAiBF,GAAcE,IAOpD,CAFSoB,GAAA,OAAAA,EAAA,MAAArB,OAAA,EAAAA,EAAA2B,oBAAAN,EAAAE,KAAAvB,EAAoBD,EAAYc,GAErCL,EAIA,OAHAS,EAAQG,gBAAgB,SACxBH,EAAQQ,QAAQC,SAAc3B,EAAa,OAAS,aAC3C,OAAA6B,EAAA,MAAA5B,SAAAA,EAAAsB,kBAAAM,EAAAL,KAAAvB,EAAkBD,EAAYc,IAIvCd,EA3FZ,SACIc,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMS,EAAiBZ,EAAQa,aAE1BpB,EAAAQ,QAAUa,uBAAsB,KAEzBd,EAAAe,MAAMC,eAAe,cACrBhB,EAAAQ,QAAQC,SAAc,QACxBQ,MAAAA,EAAkBjB,EAAQkB,wBAAwBC,OAGxDnB,EAAQe,MAAMK,YAAY,SAAU,GAAGH,OAC/BjB,EAAAe,MAAMK,YAAY,aAAc,UAEnCzB,EAAAM,QAAUa,uBAAsB,KAEzBd,EAAAe,MAAMK,YAAY,aAAchC,GACxCY,EAAQe,MAAMK,YAAY,SAAU,GAAGR,OAC/BZ,EAAAQ,QAAQC,SAAc,MAAA,GACjC,GAET,CA8D0BY,CAAAzB,EAAYR,EAAYK,EAAME,GA7HxD,SACIC,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMS,EAAiBZ,EAAQa,aAE1BpB,EAAAQ,QAAUa,uBAAsB,KAEzBd,EAAAe,MAAMC,eAAe,cACrBhB,EAAAQ,QAAQC,SAAc,QACxBQ,MAAAA,EAAkBjB,EAAQkB,wBAAwBC,OAChDnB,EAAAQ,QAAQC,SAAc,OAG9BT,EAAQe,MAAMK,YAAY,SAAU,GAAGR,OAC/BZ,EAAAe,MAAMK,YAAY,aAAc,UAEnCzB,EAAAM,QAAUa,uBAAsB,KAEzBd,EAAAe,MAAMK,YAAY,aAAchC,GACxCY,EAAQe,MAAMK,YAAY,SAAU,GAAGH,OAC/BjB,EAAAQ,QAAQC,SAAc,OAAA,GACjC,GAET,CAgG4Ba,CAAA1B,EAAYR,EAAYK,EAAME,EAAI,IAEvD,CAACX,EAAaF,EAAYC,EAASQ,EAAsBH,IAE5D,OAAAmC,GAAU,KACOhB,MACd,CAACzB,EAAYyB,IAEhBgB,GAAU,KACN,MAAMvB,EAAUJ,EAAWK,QAC3B,OAAID,GACQA,EAAAwB,iBAAiB,gBAAiB3B,GAGvC,KACCG,GACQA,EAAAyB,oBACJ,gBACA5B,EAAA,CAER,GAGL,CAACf,IAEJyC,GAAU,KACN,MAAMG,EAAKjC,EAAKQ,QACV0B,EAAKhC,EAAKM,QAChB,MAAO,KACHyB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,CAAA,GAElC,CAAClC,EAAME,IAEH,CAACC,EAAYW,EACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAutoAnimateHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAutoAnimateHeight.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { type Easing, type Timing } from \"../../core/types.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"expressive\";\n\nexport type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {\n easing?: Easing;\n /**\n * Overstyr standard timing\n * @default \"expressive\"\n */\n timing?: Timing;\n onTransitionStart?: (ref: RefObject<T>) => void;\n onTransitionEnd?: (ref: RefObject<T>) => void;\n};\n\n/**\n * Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.\n * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.\n * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns en referanse til elementet som skal animeres\n */\nexport function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(\n trigger: any,\n options?: UseAutoAnimatedHeightOptions<T>,\n) {\n const previousTriggerValue = usePreviousValue(trigger);\n const [previousHeight, setPreviousHeight] = useState(0);\n\n const easing = options?.easing || defaultEasing;\n const timing = options?.timing || defaultTiming;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n const handleTransitionEnd = useCallback(\n (event: TransitionEvent) => {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n element.removeAttribute(\"style\");\n options?.onTransitionEnd?.(elementRef);\n }\n },\n [options],\n );\n\n const animateElement = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const newHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Sett høyde tilbake til forrige høyde\n element.style.removeProperty(\"transition\");\n element.style.setProperty(\"height\", `${previousHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til kollapset høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${newHeight}px`);\n });\n });\n\n setPreviousHeight(newHeight);\n }, [transition, previousHeight]);\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n if (previousTriggerValue === undefined) {\n // Første render\n setPreviousHeight(element.scrollHeight);\n return;\n }\n\n if (trigger === previousTriggerValue) {\n // Ingen endring\n return;\n }\n\n options?.onTransitionStart?.(elementRef);\n\n if (prefersReducedMotion) {\n options?.onTransitionEnd?.(elementRef); // make sure to call callback when animation is off\n return;\n }\n\n animateElement();\n }, [\n animateElement,\n trigger,\n previousTriggerValue,\n options,\n prefersReducedMotion,\n ]);\n\n useEffect(() => {\n runAnimation();\n }, [trigger, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [handleTransitionEnd]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, [raf1, raf2]);\n\n return elementRef;\n}\n"],"names":["useAutoAnimatedHeight","trigger","options","previousTriggerValue","usePreviousValue","previousHeight","setPreviousHeight","useState","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","_a","onTransitionEnd","call","animateElement","newHeight","scrollHeight","requestAnimationFrame","style","removeProperty","setProperty","runAnimation","onTransitionStart","_b","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"sRA2BgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAuBC,EAAiBH,IACvCI,EAAgBC,GAAqBC,EAAS,GAE/CC,GAAS,MAAAN,OAAAA,EAAAA,EAASM,SA5BN,WA6BZC,GAAS,MAAAP,SAAAA,EAASO,SA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,GACvBC,UACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxB,OAAAC,EAAA,MAAAxB,SAAAA,EAASyB,kBAATD,EAAAE,KAAA1B,EAA2BgB,GAAAA,GAGnC,CAAChB,IAGC2B,EAAiBT,GAAY,KAC/B,MAAME,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMK,EAAYR,EAAQS,aAErBhB,EAAAQ,QAAUS,uBAAsB,KAEzBV,EAAAW,MAAMC,eAAe,cAC7BZ,EAAQW,MAAME,YAAY,SAAU,GAAG9B,OAC/BiB,EAAAW,MAAME,YAAY,aAAc,UAEnClB,EAAAM,QAAUS,uBAAsB,KAEzBV,EAAAW,MAAME,YAAY,aAAczB,GACxCY,EAAQW,MAAME,YAAY,SAAU,GAAGL,MAAa,GACvD,IAGLxB,EAAkBwB,EAAS,GAC5B,CAACpB,EAAYL,IAEV+B,EAAehB,GAAY,aAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQS,cAI9B,GAAI9B,IAAYE,EAOhB,CAFAuB,GAAA,OAAAA,EAAA,MAAAxB,OAAA,EAAAA,EAASmC,oBAATX,EAAAE,KAAA1B,EAA6BgB,GAEzBL,EAEA,YADA,OAAAyB,EAAA,MAAApC,OAAAA,EAAAA,EAASyB,kBAATW,EAAAV,KAAA1B,EAA2BgB,IAIhBW,
|
|
1
|
+
{"version":3,"file":"useAutoAnimateHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAutoAnimateHeight.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { type Easing, type Timing } from \"../../core/types.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"expressive\";\n\nexport type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {\n easing?: Easing;\n /**\n * Overstyr standard timing\n * @default \"expressive\"\n */\n timing?: Timing;\n onTransitionStart?: (ref: RefObject<T>) => void;\n onTransitionEnd?: (ref: RefObject<T>) => void;\n};\n\n/**\n * Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.\n * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.\n * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns en referanse til elementet som skal animeres\n */\nexport function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(\n trigger: any,\n options?: UseAutoAnimatedHeightOptions<T>,\n) {\n const previousTriggerValue = usePreviousValue(trigger);\n const [previousHeight, setPreviousHeight] = useState(0);\n\n const easing = options?.easing || defaultEasing;\n const timing = options?.timing || defaultTiming;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n const handleTransitionEnd = useCallback(\n (event: TransitionEvent) => {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n element.removeAttribute(\"style\");\n options?.onTransitionEnd?.(elementRef);\n }\n },\n [options],\n );\n\n const animateElement = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const newHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Sett høyde tilbake til forrige høyde\n element.style.removeProperty(\"transition\");\n element.style.setProperty(\"height\", `${previousHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til kollapset høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${newHeight}px`);\n });\n });\n\n setPreviousHeight(newHeight);\n }, [transition, previousHeight]);\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n if (previousTriggerValue === undefined) {\n // Første render\n setPreviousHeight(element.scrollHeight);\n return;\n }\n\n if (trigger === previousTriggerValue) {\n // Ingen endring\n return;\n }\n\n options?.onTransitionStart?.(elementRef);\n\n if (prefersReducedMotion) {\n options?.onTransitionEnd?.(elementRef); // make sure to call callback when animation is off\n return;\n }\n\n animateElement();\n }, [\n animateElement,\n trigger,\n previousTriggerValue,\n options,\n prefersReducedMotion,\n ]);\n\n useEffect(() => {\n runAnimation();\n }, [trigger, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [handleTransitionEnd]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, [raf1, raf2]);\n\n return elementRef;\n}\n"],"names":["useAutoAnimatedHeight","trigger","options","previousTriggerValue","usePreviousValue","previousHeight","setPreviousHeight","useState","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","_a","onTransitionEnd","call","animateElement","newHeight","scrollHeight","requestAnimationFrame","style","removeProperty","setProperty","runAnimation","onTransitionStart","_b","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"sRA2BgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAuBC,EAAiBH,IACvCI,EAAgBC,GAAqBC,EAAS,GAE/CC,GAAS,MAAAN,OAAAA,EAAAA,EAASM,SA5BN,WA6BZC,GAAS,MAAAP,SAAAA,EAASO,SA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,GACvBC,UACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxB,OAAAC,EAAA,MAAAxB,SAAAA,EAASyB,kBAATD,EAAAE,KAAA1B,EAA2BgB,GAAAA,GAGnC,CAAChB,IAGC2B,EAAiBT,GAAY,KAC/B,MAAME,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMK,EAAYR,EAAQS,aAErBhB,EAAAQ,QAAUS,uBAAsB,KAEzBV,EAAAW,MAAMC,eAAe,cAC7BZ,EAAQW,MAAME,YAAY,SAAU,GAAG9B,OAC/BiB,EAAAW,MAAME,YAAY,aAAc,UAEnClB,EAAAM,QAAUS,uBAAsB,KAEzBV,EAAAW,MAAME,YAAY,aAAczB,GACxCY,EAAQW,MAAME,YAAY,SAAU,GAAGL,MAAa,GACvD,IAGLxB,EAAkBwB,EAAS,GAC5B,CAACpB,EAAYL,IAEV+B,EAAehB,GAAY,aAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQS,cAI9B,GAAI9B,IAAYE,EAOhB,CAFAuB,GAAA,OAAAA,EAAA,MAAAxB,OAAA,EAAAA,EAASmC,oBAATX,EAAAE,KAAA1B,EAA6BgB,GAEzBL,EAEA,YADA,OAAAyB,EAAA,MAAApC,OAAAA,EAAAA,EAASyB,kBAATW,EAAAV,KAAA1B,EAA2BgB,IAIhBW,QAChB,CACCA,EACA5B,EACAE,EACAD,EACAW,IAGJ,OAAA0B,GAAU,KACOH,MACd,CAACnC,EAASmC,IAEbG,GAAU,KACN,MAAMjB,EAAUJ,EAAWK,QAC3B,OAAID,GACQA,EAAAkB,iBAAiB,gBAAiBrB,GAGvC,KACCG,GACQA,EAAAmB,oBACJ,gBACAtB,EAAA,CAER,GAEL,CAACA,IAEJoB,GAAU,KACN,MAAMG,EAAK3B,EAAKQ,QACVoB,EAAK1B,EAAKM,QAChB,MAAO,KACHmB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,CAAA,GAElC,CAAC5B,EAAME,IAEHC,CACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAriaLiveRegion.js","sources":["../../../../src/hooks/useAriaLiveRegion/useAriaLiveRegion.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nexport interface UseAriaLiveRegionOptions {\n /**\n * @default \"polite\"\n */\n politeness?: \"polite\" | \"assertive\" | \"off\";\n}\n\n/**\n * Hjelper for å bare sette aria-live dersom det har skjedd en endring. Unngår at innholdet annonseres ved sidelasting.\n * @param watch Verdi som indikerer at det har skjedd en endring. For eksempel en boolean som styrer en loader, eller selve teksten som skal bli lest opp.\n * @param options Bestem om aria-live skal være polite, assertive eller off.\n * @returns\n */\nexport function useAriaLiveRegion(\n watch: unknown | unknown[],\n options?: UseAriaLiveRegionOptions,\n) {\n const previousValue = usePreviousValue(watch);\n\n const [hasChanged, setHasChanged] = useState(false);\n useEffect(() => {\n if (Array.isArray(watch) && Array.isArray(previousValue)) {\n for (let i = 0; i < watch.length; i++) {\n if (watch[i] !== previousValue[i] && !hasChanged) {\n setHasChanged(true);\n break;\n }\n }\n } else if (previousValue && watch !== previousValue && !hasChanged) {\n setHasChanged(true);\n }\n }, [watch, previousValue, hasChanged]);\n\n return {\n \"aria-live\": hasChanged ? options?.politeness || \"polite\" : undefined,\n };\n}\n"],"names":["useAriaLiveRegion","watch","options","previousValue","usePreviousValue","hasChanged","setHasChanged","useState","useEffect","Array","isArray","i","length","politeness"],"mappings":"2HAgBgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAgBC,EAAiBH,IAEhCI,EAAYC,GAAiBC,GAAS,GAC7C,OAAAC,GAAU,KACN,GAAIC,MAAMC,QAAQT,IAAUQ,MAAMC,QAAQP,IACtC,IAAA,IAASQ,EAAI,EAAGA,EAAIV,EAAMW,OAAQD,IAC9B,GAAIV,EAAMU,KAAOR,EAAcQ,KAAON,EAAY,CAC9CC,GAAc,GACd,
|
|
1
|
+
{"version":3,"file":"useAriaLiveRegion.js","sources":["../../../../src/hooks/useAriaLiveRegion/useAriaLiveRegion.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nexport interface UseAriaLiveRegionOptions {\n /**\n * @default \"polite\"\n */\n politeness?: \"polite\" | \"assertive\" | \"off\";\n}\n\n/**\n * Hjelper for å bare sette aria-live dersom det har skjedd en endring. Unngår at innholdet annonseres ved sidelasting.\n * @param watch Verdi som indikerer at det har skjedd en endring. For eksempel en boolean som styrer en loader, eller selve teksten som skal bli lest opp.\n * @param options Bestem om aria-live skal være polite, assertive eller off.\n * @returns\n */\nexport function useAriaLiveRegion(\n watch: unknown | unknown[],\n options?: UseAriaLiveRegionOptions,\n) {\n const previousValue = usePreviousValue(watch);\n\n const [hasChanged, setHasChanged] = useState(false);\n useEffect(() => {\n if (Array.isArray(watch) && Array.isArray(previousValue)) {\n for (let i = 0; i < watch.length; i++) {\n if (watch[i] !== previousValue[i] && !hasChanged) {\n setHasChanged(true);\n break;\n }\n }\n } else if (previousValue && watch !== previousValue && !hasChanged) {\n setHasChanged(true);\n }\n }, [watch, previousValue, hasChanged]);\n\n return {\n \"aria-live\": hasChanged ? options?.politeness || \"polite\" : undefined,\n };\n}\n"],"names":["useAriaLiveRegion","watch","options","previousValue","usePreviousValue","hasChanged","setHasChanged","useState","useEffect","Array","isArray","i","length","politeness"],"mappings":"2HAgBgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAgBC,EAAiBH,IAEhCI,EAAYC,GAAiBC,GAAS,GAC7C,OAAAC,GAAU,KACN,GAAIC,MAAMC,QAAQT,IAAUQ,MAAMC,QAAQP,IACtC,IAAA,IAASQ,EAAI,EAAGA,EAAIV,EAAMW,OAAQD,IAC9B,GAAIV,EAAMU,KAAOR,EAAcQ,KAAON,EAAY,CAC9CC,GAAc,GACd,KACJ,OAEGH,GAAiBF,IAAUE,IAAkBE,GACpDC,GAAc,EAAI,GAEvB,CAACL,EAAOE,EAAeE,IAEnB,CACH,YAAaA,GAAa,MAAAH,OAAAA,EAAAA,EAASW,aAAc,cAAW,EAEpE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBrowserPreferences.js","sources":["../../../../src/hooks/useBrowserPreferences/useBrowserPreferences.tsx"],"sourcesContent":["import { Reducer, useEffect, useReducer, useState } from \"react\";\nimport { ColorScheme } from \"../../core/types.js\";\nimport {\n addMediaQueryListener,\n getInitialMediaQueryMatch,\n removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\n\ntype BrowserPreferences = {\n prefersReducedMotion: boolean;\n prefersColorScheme: ColorScheme;\n forcedColors: boolean;\n};\n\nenum ActionType {\n PrefersColorScheme = \"COLOR_SCHEME_CHANGED\",\n PrefersReducedMotion = \"REDUCED_MOTION_CHANGED\",\n ForcedColors = \"FORCED_COLORS_CHANGED\",\n}\n\ntype Action =\n | {\n type: ActionType.PrefersColorScheme;\n value: ColorScheme;\n }\n | {\n type: ActionType.PrefersReducedMotion;\n value: boolean;\n }\n | {\n type: ActionType.ForcedColors;\n value: boolean;\n };\n\nconst PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst PREFERS_LIGHT_COLOR_SCHEME = \"(prefers-color-scheme: light)\";\nconst FORCED_COLORS = \"(forced-colors: active)\";\n\nconst initialState: BrowserPreferences = {\n prefersReducedMotion: false,\n prefersColorScheme: \"light\",\n forcedColors: false,\n};\n\nconst reducer: Reducer<BrowserPreferences, Action> = (state, action) => {\n switch (action.type) {\n case ActionType.PrefersColorScheme:\n return {\n ...state,\n prefersColorScheme: action.value,\n };\n case ActionType.PrefersReducedMotion:\n return {\n ...state,\n prefersReducedMotion: action.value,\n };\n case ActionType.ForcedColors:\n return {\n ...state,\n forcedColors: action.value,\n };\n default:\n return state;\n }\n};\n\n/**\n * Hook som gir informasjon om brukerens foretrukne konfigurasjon.\n * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).\n */\nexport const useBrowserPreferences = (): BrowserPreferences => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n useEffect(() => {\n setHasMounted(true);\n const prefersReducedMotion = getInitialMediaQueryMatch(\n PREFERS_REDUCED_MOTION,\n );\n const prefersColorScheme = getInitialMediaQueryMatch(\n PREFERS_LIGHT_COLOR_SCHEME,\n )\n ? \"light\"\n : \"dark\";\n const forcedColors = getInitialMediaQueryMatch(FORCED_COLORS);\n dispatch({\n type: ActionType.PrefersReducedMotion,\n value: prefersReducedMotion,\n });\n dispatch({\n type: ActionType.PrefersColorScheme,\n value: prefersColorScheme,\n });\n dispatch({ type: ActionType.ForcedColors, value: forcedColors });\n }, []);\n\n useEffect(() => {\n if (!hasMounted || !window.matchMedia) {\n return;\n }\n const onPrefersReducedMotionChange = (e: MediaQueryListEvent) => {\n dispatch({\n type: ActionType.PrefersReducedMotion,\n value: e.matches,\n });\n };\n const onPrefersColorSchemeChange = (e: MediaQueryListEvent) => {\n dispatch({\n type: ActionType.PrefersColorScheme,\n value: e.matches ? \"light\" : \"dark\",\n });\n };\n const onForcedColorsChange = (e: MediaQueryListEvent) => {\n dispatch({ type: ActionType.ForcedColors, value: e.matches });\n };\n\n addMediaQueryListener(\n window.matchMedia(PREFERS_REDUCED_MOTION),\n onPrefersReducedMotionChange,\n );\n addMediaQueryListener(\n window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n onPrefersColorSchemeChange,\n );\n addMediaQueryListener(\n window.matchMedia(FORCED_COLORS),\n onForcedColorsChange,\n );\n\n return () => {\n removeMediaQueryListener(\n window.matchMedia(PREFERS_REDUCED_MOTION),\n onPrefersReducedMotionChange,\n );\n removeMediaQueryListener(\n window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n onPrefersColorSchemeChange,\n );\n removeMediaQueryListener(\n window.matchMedia(FORCED_COLORS),\n onForcedColorsChange,\n );\n };\n }, [hasMounted]);\n\n return { ...state };\n};\n"],"names":["PREFERS_REDUCED_MOTION","PREFERS_LIGHT_COLOR_SCHEME","FORCED_COLORS","initialState","prefersReducedMotion","prefersColorScheme","forcedColors","reducer","state","action","type","value","useBrowserPreferences","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"2LAkCA,MAAMA,EAAyB,mCACzBC,EAA6B,gCAC7BC,EAAgB,0BAEhBC,EAAmC,CACrCC,sBAAsB,EACtBC,mBAAoB,QACpBC,cAAc,GAGZC,EAA+C,CAACC,EAAOC,KACzD,OAAQA,EAAOC,MACX,IAAK,uBACM,MAAA,IACAF,EACHH,mBAAoBI,EAAOE,OAEnC,IAAK,yBACM,MAAA,IACAH,EACHJ,qBAAsBK,EAAOE,OAErC,IAAK,wBACM,MAAA,IACAH,EACHF,aAAcG,EAAOE,OAE7B,QACWH,OAAAA,
|
|
1
|
+
{"version":3,"file":"useBrowserPreferences.js","sources":["../../../../src/hooks/useBrowserPreferences/useBrowserPreferences.tsx"],"sourcesContent":["import { Reducer, useEffect, useReducer, useState } from \"react\";\nimport { ColorScheme } from \"../../core/types.js\";\nimport {\n addMediaQueryListener,\n getInitialMediaQueryMatch,\n removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\n\ntype BrowserPreferences = {\n prefersReducedMotion: boolean;\n prefersColorScheme: ColorScheme;\n forcedColors: boolean;\n};\n\nenum ActionType {\n PrefersColorScheme = \"COLOR_SCHEME_CHANGED\",\n PrefersReducedMotion = \"REDUCED_MOTION_CHANGED\",\n ForcedColors = \"FORCED_COLORS_CHANGED\",\n}\n\ntype Action =\n | {\n type: ActionType.PrefersColorScheme;\n value: ColorScheme;\n }\n | {\n type: ActionType.PrefersReducedMotion;\n value: boolean;\n }\n | {\n type: ActionType.ForcedColors;\n value: boolean;\n };\n\nconst PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst PREFERS_LIGHT_COLOR_SCHEME = \"(prefers-color-scheme: light)\";\nconst FORCED_COLORS = \"(forced-colors: active)\";\n\nconst initialState: BrowserPreferences = {\n prefersReducedMotion: false,\n prefersColorScheme: \"light\",\n forcedColors: false,\n};\n\nconst reducer: Reducer<BrowserPreferences, Action> = (state, action) => {\n switch (action.type) {\n case ActionType.PrefersColorScheme:\n return {\n ...state,\n prefersColorScheme: action.value,\n };\n case ActionType.PrefersReducedMotion:\n return {\n ...state,\n prefersReducedMotion: action.value,\n };\n case ActionType.ForcedColors:\n return {\n ...state,\n forcedColors: action.value,\n };\n default:\n return state;\n }\n};\n\n/**\n * Hook som gir informasjon om brukerens foretrukne konfigurasjon.\n * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).\n */\nexport const useBrowserPreferences = (): BrowserPreferences => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n useEffect(() => {\n setHasMounted(true);\n const prefersReducedMotion = getInitialMediaQueryMatch(\n PREFERS_REDUCED_MOTION,\n );\n const prefersColorScheme = getInitialMediaQueryMatch(\n PREFERS_LIGHT_COLOR_SCHEME,\n )\n ? \"light\"\n : \"dark\";\n const forcedColors = getInitialMediaQueryMatch(FORCED_COLORS);\n dispatch({\n type: ActionType.PrefersReducedMotion,\n value: prefersReducedMotion,\n });\n dispatch({\n type: ActionType.PrefersColorScheme,\n value: prefersColorScheme,\n });\n dispatch({ type: ActionType.ForcedColors, value: forcedColors });\n }, []);\n\n useEffect(() => {\n if (!hasMounted || !window.matchMedia) {\n return;\n }\n const onPrefersReducedMotionChange = (e: MediaQueryListEvent) => {\n dispatch({\n type: ActionType.PrefersReducedMotion,\n value: e.matches,\n });\n };\n const onPrefersColorSchemeChange = (e: MediaQueryListEvent) => {\n dispatch({\n type: ActionType.PrefersColorScheme,\n value: e.matches ? \"light\" : \"dark\",\n });\n };\n const onForcedColorsChange = (e: MediaQueryListEvent) => {\n dispatch({ type: ActionType.ForcedColors, value: e.matches });\n };\n\n addMediaQueryListener(\n window.matchMedia(PREFERS_REDUCED_MOTION),\n onPrefersReducedMotionChange,\n );\n addMediaQueryListener(\n window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n onPrefersColorSchemeChange,\n );\n addMediaQueryListener(\n window.matchMedia(FORCED_COLORS),\n onForcedColorsChange,\n );\n\n return () => {\n removeMediaQueryListener(\n window.matchMedia(PREFERS_REDUCED_MOTION),\n onPrefersReducedMotionChange,\n );\n removeMediaQueryListener(\n window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n onPrefersColorSchemeChange,\n );\n removeMediaQueryListener(\n window.matchMedia(FORCED_COLORS),\n onForcedColorsChange,\n );\n };\n }, [hasMounted]);\n\n return { ...state };\n};\n"],"names":["PREFERS_REDUCED_MOTION","PREFERS_LIGHT_COLOR_SCHEME","FORCED_COLORS","initialState","prefersReducedMotion","prefersColorScheme","forcedColors","reducer","state","action","type","value","useBrowserPreferences","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"2LAkCA,MAAMA,EAAyB,mCACzBC,EAA6B,gCAC7BC,EAAgB,0BAEhBC,EAAmC,CACrCC,sBAAsB,EACtBC,mBAAoB,QACpBC,cAAc,GAGZC,EAA+C,CAACC,EAAOC,KACzD,OAAQA,EAAOC,MACX,IAAK,uBACM,MAAA,IACAF,EACHH,mBAAoBI,EAAOE,OAEnC,IAAK,yBACM,MAAA,IACAH,EACHJ,qBAAsBK,EAAOE,OAErC,IAAK,wBACM,MAAA,IACAH,EACHF,aAAcG,EAAOE,OAE7B,QACWH,OAAAA,EACf,EAOSI,EAAwB,KACjC,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCP,EAAOQ,GAAYC,EAAWV,EAASJ,GAE9C,OAAAe,GAAU,KACNJ,GAAc,GACd,MAAMV,EAAuBe,EACzBnB,GAEEK,EAAqBc,EACvBlB,GAEE,QACA,OACAK,EAAea,EAA0BjB,GACtCc,EAAA,CACLN,KAAM,yBACNC,MAAOP,IAEFY,EAAA,CACLN,KAAM,uBACNC,MAAON,IAEXW,EAAS,CAAEN,KAAM,wBAAyBC,MAAOL,GAAc,GAChE,IAEHY,GAAU,KACF,IAACL,IAAeO,OAAOC,WACvB,OAEEC,MAAAA,EAAgCC,IACzBP,EAAA,CACLN,KAAM,yBACNC,MAAOY,EAAEC,SACZ,EAECC,EAA8BF,IACvBP,EAAA,CACLN,KAAM,uBACNC,MAAOY,EAAEC,QAAU,QAAU,QAChC,EAECE,EAAwBH,IAC1BP,EAAS,CAAEN,KAAM,wBAAyBC,MAAOY,EAAEC,SAAS,EAGhEG,OAAAA,EACIP,OAAOC,WAAWrB,GAClBsB,GAEJK,EACIP,OAAOC,WAAWpB,GAClBwB,GAEJE,EACIP,OAAOC,WAAWnB,GAClBwB,GAGG,KACHE,EACIR,OAAOC,WAAWrB,GAClBsB,GAEJM,EACIR,OAAOC,WAAWpB,GAClBwB,GAEJG,EACIR,OAAOC,WAAWnB,GAClBwB,EAAA,CACJ,GAEL,CAACb,IAEG,IAAKL"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useClickOutside.js","sources":["../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\n/**\n * Hook for å sette opp en lytter ved klikk utenfor et element.\n * @param ref Elementet du ønsker å sjekke om en klikk er utenfor.\n * @param fn Callback-funksjon som kalles når det klikkes utenfor elementet.\n */\nexport function useClickOutside(\n ref: RefObject<HTMLElement> | null,\n fn: () => void,\n): void {\n function handleClickOutside(event: MouseEvent) {\n if (ref?.current && !ref.current.contains(event.target as Node)) {\n fn();\n }\n }\n\n useEffect(() => {\n if (ref) {\n document && document.addEventListener(\"click\", handleClickOutside);\n }\n return () => {\n document &&\n document.removeEventListener(\"click\", handleClickOutside);\n };\n });\n}\n"],"names":["useClickOutside","ref","fn","handleClickOutside","event","current","contains","target","useEffect","document","addEventListener","removeEventListener"],"mappings":"kCAOgB,SAAAA,EACZC,EACAC,GAEA,SAASC,EAAmBC,GACpB,MAAAH,GAAAA,EAAKI,UAAYJ,EAAII,QAAQC,SAASF,EAAMG,SACzCL,
|
|
1
|
+
{"version":3,"file":"useClickOutside.js","sources":["../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\n/**\n * Hook for å sette opp en lytter ved klikk utenfor et element.\n * @param ref Elementet du ønsker å sjekke om en klikk er utenfor.\n * @param fn Callback-funksjon som kalles når det klikkes utenfor elementet.\n */\nexport function useClickOutside(\n ref: RefObject<HTMLElement> | null,\n fn: () => void,\n): void {\n function handleClickOutside(event: MouseEvent) {\n if (ref?.current && !ref.current.contains(event.target as Node)) {\n fn();\n }\n }\n\n useEffect(() => {\n if (ref) {\n document && document.addEventListener(\"click\", handleClickOutside);\n }\n return () => {\n document &&\n document.removeEventListener(\"click\", handleClickOutside);\n };\n });\n}\n"],"names":["useClickOutside","ref","fn","handleClickOutside","event","current","contains","target","useEffect","document","addEventListener","removeEventListener"],"mappings":"kCAOgB,SAAAA,EACZC,EACAC,GAEA,SAASC,EAAmBC,GACpB,MAAAH,GAAAA,EAAKI,UAAYJ,EAAII,QAAQC,SAASF,EAAMG,SACzCL,GAEX,CAEAM,GAAU,KACFP,GACYQ,UAAAA,SAASC,iBAAiB,QAASP,GAE5C,KAECM,UAAAA,SAASE,oBAAoB,QAASR,EAAkB,IAGxE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useElementDimensions.js","sources":["../../../../src/hooks/useElementDimensions/useElementDimensions.ts"],"sourcesContent":["import { RefObject, useEffect, useMemo, useRef, useState } from \"react\";\n\n// TODO: Denne er sikkert nyttig flere steder enn her!\n// eslint-disable-next-line\nfunction throttle<R, A extends any[]>(fn: (...args: A) => R, delay: number) {\n let wait = false;\n\n return (...args: A) => {\n if (wait) return undefined;\n\n const result = fn(...args);\n\n if (delay !== 0) {\n wait = true;\n window.setTimeout(() => {\n wait = false;\n }, delay);\n }\n\n return result;\n };\n}\n\nexport type Dimensions = {\n height: number;\n width: number;\n};\n\n/**\n * Lar deg måle størrelsen på et element, og oppdatere målene når vinduet endrer størrelse.\n * @param throttleDelay Antall milisekunder som skal gå mellom hver gang dimensjonene oppdateres.\n * @returns Ref til elementet som skal måles, og dimensjonene til elementet.\n */\nexport function useElementDimensions<T extends HTMLElement>(\n throttleDelay = 200,\n): [RefObject<T>, Dimensions] {\n const elementRef = useRef<T>(null);\n const [dimensions, setDimensions] = useState<Dimensions>({\n height: 0,\n width: 0,\n });\n\n const throttledSetDimensions = useMemo(\n () =>\n throttle(\n () =>\n setDimensions({\n height: elementRef.current?.scrollHeight || 0,\n width: elementRef.current?.scrollWidth || 0,\n }),\n throttleDelay,\n ),\n [throttleDelay],\n );\n\n useEffect(() => {\n setDimensions({\n height: elementRef.current?.scrollHeight || 0,\n width: elementRef.current?.scrollWidth || 0,\n });\n\n typeof window !== \"undefined\" &&\n window.addEventListener(\"resize\", throttledSetDimensions);\n\n return () => {\n typeof window !== \"undefined\" &&\n window.removeEventListener(\"resize\", throttledSetDimensions);\n };\n }, [throttledSetDimensions]);\n\n return [elementRef, dimensions];\n}\n"],"names":["useElementDimensions","throttleDelay","elementRef","useRef","dimensions","setDimensions","useState","height","width","throttledSetDimensions","useMemo","fn","delay","wait","args","result","window","setTimeout","throttle","_a","current","scrollHeight","_b","scrollWidth","useEffect","addEventListener","removeEventListener"],"mappings":"yEAiCgB,SAAAA,EACZC,EAAgB,KAEVC,MAAAA,EAAaC,EAAU,OACtBC,EAAYC,GAAiBC,EAAqB,CACrDC,OAAQ,EACRC,MAAO,IAGLC,EAAyBC,GAC3B,IAvCR,SAAsCC,EAAuBC,GACzD,IAAIC,GAAO,EAEX,MAAO,IAAIC,KACP,GAAID,EAAa,OAEXE,MAAAA,EAASJ,KAAMG,GAErB,OAAc,IAAVF,IACOC,GAAA,EACPG,OAAOC,YAAW,KACPJ,GAAA,CAAA,GACRD,IAGAG,CAAAA,CAEf,CAuBYG,EACI,aACI,OAAAb,EAAc,CACVE,QAAQ,OAAAY,EAAAjB,EAAWkB,cAAX,EAAAD,EAAoBE,eAAgB,EAC5Cb,OAAO,OAAAc,EAAApB,EAAWkB,cAAX,EAAAE,EAAoBC,cAAe,GAC7C,GACLtB,IAER,CAACA,IAGL,OAAAuB,GAAU,aACQ,OAAAnB,EAAA,CACVE,QAAQ,OAAAY,EAAAjB,EAAWkB,cAAX,EAAAD,EAAoBE,eAAgB,EAC5Cb,OAAO,OAAAc,EAAApB,EAAWkB,cAAX,EAAAE,EAAoBC,cAAe,WAGvCP,OAAW,KACdA,OAAOS,iBAAiB,SAAUhB,GAE/B,YACIO,OAAW,KACdA,OAAOU,oBAAoB,SAAUjB,EAAsB,
|
|
1
|
+
{"version":3,"file":"useElementDimensions.js","sources":["../../../../src/hooks/useElementDimensions/useElementDimensions.ts"],"sourcesContent":["import { RefObject, useEffect, useMemo, useRef, useState } from \"react\";\n\n// TODO: Denne er sikkert nyttig flere steder enn her!\n// eslint-disable-next-line\nfunction throttle<R, A extends any[]>(fn: (...args: A) => R, delay: number) {\n let wait = false;\n\n return (...args: A) => {\n if (wait) return undefined;\n\n const result = fn(...args);\n\n if (delay !== 0) {\n wait = true;\n window.setTimeout(() => {\n wait = false;\n }, delay);\n }\n\n return result;\n };\n}\n\nexport type Dimensions = {\n height: number;\n width: number;\n};\n\n/**\n * Lar deg måle størrelsen på et element, og oppdatere målene når vinduet endrer størrelse.\n * @param throttleDelay Antall milisekunder som skal gå mellom hver gang dimensjonene oppdateres.\n * @returns Ref til elementet som skal måles, og dimensjonene til elementet.\n */\nexport function useElementDimensions<T extends HTMLElement>(\n throttleDelay = 200,\n): [RefObject<T>, Dimensions] {\n const elementRef = useRef<T>(null);\n const [dimensions, setDimensions] = useState<Dimensions>({\n height: 0,\n width: 0,\n });\n\n const throttledSetDimensions = useMemo(\n () =>\n throttle(\n () =>\n setDimensions({\n height: elementRef.current?.scrollHeight || 0,\n width: elementRef.current?.scrollWidth || 0,\n }),\n throttleDelay,\n ),\n [throttleDelay],\n );\n\n useEffect(() => {\n setDimensions({\n height: elementRef.current?.scrollHeight || 0,\n width: elementRef.current?.scrollWidth || 0,\n });\n\n typeof window !== \"undefined\" &&\n window.addEventListener(\"resize\", throttledSetDimensions);\n\n return () => {\n typeof window !== \"undefined\" &&\n window.removeEventListener(\"resize\", throttledSetDimensions);\n };\n }, [throttledSetDimensions]);\n\n return [elementRef, dimensions];\n}\n"],"names":["useElementDimensions","throttleDelay","elementRef","useRef","dimensions","setDimensions","useState","height","width","throttledSetDimensions","useMemo","fn","delay","wait","args","result","window","setTimeout","throttle","_a","current","scrollHeight","_b","scrollWidth","useEffect","addEventListener","removeEventListener"],"mappings":"yEAiCgB,SAAAA,EACZC,EAAgB,KAEVC,MAAAA,EAAaC,EAAU,OACtBC,EAAYC,GAAiBC,EAAqB,CACrDC,OAAQ,EACRC,MAAO,IAGLC,EAAyBC,GAC3B,IAvCR,SAAsCC,EAAuBC,GACzD,IAAIC,GAAO,EAEX,MAAO,IAAIC,KACP,GAAID,EAAa,OAEXE,MAAAA,EAASJ,KAAMG,GAErB,OAAc,IAAVF,IACOC,GAAA,EACPG,OAAOC,YAAW,KACPJ,GAAA,CAAA,GACRD,IAGAG,CAAAA,CAEf,CAuBYG,EACI,aACI,OAAAb,EAAc,CACVE,QAAQ,OAAAY,EAAAjB,EAAWkB,cAAX,EAAAD,EAAoBE,eAAgB,EAC5Cb,OAAO,OAAAc,EAAApB,EAAWkB,cAAX,EAAAE,EAAoBC,cAAe,GAC7C,GACLtB,IAER,CAACA,IAGL,OAAAuB,GAAU,aACQ,OAAAnB,EAAA,CACVE,QAAQ,OAAAY,EAAAjB,EAAWkB,cAAX,EAAAD,EAAoBE,eAAgB,EAC5Cb,OAAO,OAAAc,EAAApB,EAAWkB,cAAX,EAAAE,EAAoBC,cAAe,WAGvCP,OAAW,KACdA,OAAOS,iBAAiB,SAAUhB,GAE/B,YACIO,OAAW,KACdA,OAAOU,oBAAoB,SAAUjB,EAAsB,CAAA,GAEpE,CAACA,IAEG,CAACP,EAAYE,EACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusOutside.js","sources":["../../../../src/hooks/useFocusOutside/useFocusOutside.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\n/**\n * Hook for å lytte etter fokus utenfor et element. Nyttig dersom flere fokuserbare elementer samspiller i en komponent.\n * @param ref Elementet som skal observeres\n * @param fn Funksjon som kalles når fokus flyttes utenfor elementet\n */\nexport function useFocusOutside(\n ref: RefObject<HTMLElement> | null,\n fn: () => void,\n): void {\n function handleFocusOutside(event: FocusEvent) {\n if (ref?.current && !ref.current.contains(event.target as Node)) {\n fn();\n }\n }\n\n useEffect(() => {\n if (ref) {\n document &&\n document.addEventListener(\"focusin\", handleFocusOutside);\n }\n return () => {\n document &&\n document.removeEventListener(\"focusin\", handleFocusOutside);\n };\n });\n}\n"],"names":["useFocusOutside","ref","fn","handleFocusOutside","event","current","contains","target","useEffect","document","addEventListener","removeEventListener"],"mappings":"kCAOgB,SAAAA,EACZC,EACAC,GAEA,SAASC,EAAmBC,GACpB,MAAAH,GAAAA,EAAKI,UAAYJ,EAAII,QAAQC,SAASF,EAAMG,SACzCL,
|
|
1
|
+
{"version":3,"file":"useFocusOutside.js","sources":["../../../../src/hooks/useFocusOutside/useFocusOutside.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\n/**\n * Hook for å lytte etter fokus utenfor et element. Nyttig dersom flere fokuserbare elementer samspiller i en komponent.\n * @param ref Elementet som skal observeres\n * @param fn Funksjon som kalles når fokus flyttes utenfor elementet\n */\nexport function useFocusOutside(\n ref: RefObject<HTMLElement> | null,\n fn: () => void,\n): void {\n function handleFocusOutside(event: FocusEvent) {\n if (ref?.current && !ref.current.contains(event.target as Node)) {\n fn();\n }\n }\n\n useEffect(() => {\n if (ref) {\n document &&\n document.addEventListener(\"focusin\", handleFocusOutside);\n }\n return () => {\n document &&\n document.removeEventListener(\"focusin\", handleFocusOutside);\n };\n });\n}\n"],"names":["useFocusOutside","ref","fn","handleFocusOutside","event","current","contains","target","useEffect","document","addEventListener","removeEventListener"],"mappings":"kCAOgB,SAAAA,EACZC,EACAC,GAEA,SAASC,EAAmBC,GACpB,MAAAH,GAAAA,EAAKI,UAAYJ,EAAII,QAAQC,SAASF,EAAMG,SACzCL,GAEX,CAEAM,GAAU,KACFP,GAEIQ,UAAAA,SAASC,iBAAiB,UAAWP,GAEtC,KAECM,UAAAA,SAASE,oBAAoB,UAAWR,EAAkB,IAG1E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIntersectionObserver.js","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, RefObject, MutableRefObject } from \"react\";\n\ntype ValidElement = HTMLElement | SVGElement;\ntype Target =\n | MutableRefObject<ValidElement>\n | RefObject<ValidElement>\n | MutableRefObject<NodeListOf<ValidElement>>\n | RefObject<NodeListOf<ValidElement>>\n | NodeListOf<ValidElement>;\n\nfunction isNodeList(\n target: Target | ValidElement,\n): target is NodeListOf<ValidElement> {\n return (target as NodeListOf<ValidElement>).forEach !== undefined;\n}\n\nconst hasWindowWithIntersectionObserver = () =>\n typeof window !== \"undefined\" &&\n typeof IntersectionObserver !== \"undefined\";\n\n/**\n * Hook som gjør det enkelt å observere om et element er synlig i viewporten.\n *\n * @param target Elementet eller elementene som skal observeres. Du kan sende in en React ref til et HTMLElement eller SVG Element, eller en NodeList av samme type elementer (returneres f.eks. av document.querySelectorAll), eller en React ref med en NodeList av samme type elementer.\n * @param onIntersect Callback-funksjon som utføres når et av elementene som observeres overlapper angitt mål. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.\n * @param fallback Funksjon som kalles dersom nettleseren ikke støtter IntersectionOpserver-APIet.\n * @param options Objekt med innstillinger for oberveren. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.\n */\nexport const useIntersectionObserver = (\n target: Target,\n onIntersect: IntersectionObserverCallback,\n fallback?: VoidFunction | null,\n options?: Partial<IntersectionObserverInit>,\n): void => {\n const observerRef = useRef<IntersectionObserver>(null);\n\n useEffect(() => {\n let observer = observerRef.current;\n\n if (hasWindowWithIntersectionObserver()) {\n if (observer) {\n observer.disconnect();\n }\n\n observer = new IntersectionObserver(onIntersect, options);\n\n if (isNodeList(target)) {\n target.forEach((element) => observer?.observe(element));\n } else if (target.current && isNodeList(target.current)) {\n target.current.forEach((element) => observer?.observe(element));\n } else if (target.current) {\n observer.observe(target.current);\n }\n } else if (fallback) {\n fallback();\n }\n\n return () => {\n if (hasWindowWithIntersectionObserver() && observer) {\n observer.disconnect();\n }\n };\n }, [target, onIntersect, fallback, options]);\n};\n"],"names":["isNodeList","target","forEach","hasWindowWithIntersectionObserver","window","IntersectionObserver","useIntersectionObserver","onIntersect","fallback","options","observerRef","useRef","useEffect","observer","current","disconnect","element","observe"],"mappings":"8CAUA,SAASA,EACLC,GAEA,YAAwD,IAAhDA,EAAoCC,OAChD,CAEA,MAAMC,EAAoC,WAC/BC,OAAW,YACXC,qBAAyB,IAUvBC,EAA0B,CACnCL,EACAM,EACAC,EACAC,KAEMC,MAAAA,EAAcC,EAA6B,MAEjDC,GAAU,KACN,IAAIC,EAAWH,EAAYI,QAEvBX,OAAAA,KACIU,GACAA,EAASE,aAGFF,EAAA,IAAIR,qBAAqBE,EAAaE,GAE7CT,EAAWC,GACXA,EAAOC,SAASc,GAAY,MAAAH,OAAAA,EAAAA,EAAUI,QAAQD,KACvCf,EAAOa,SAAWd,EAAWC,EAAOa,SAC3Cb,EAAOa,QAAQZ,SAASc,GAAY,MAAAH,OAAA,EAAAA,EAAUI,QAAQD,KAC/Cf,EAAOa,SACLD,EAAAI,QAAQhB,EAAOa,UAErBN,GACEA,IAGN,KACCL,KAAuCU,GACvCA,EAASE,YAAW,
|
|
1
|
+
{"version":3,"file":"useIntersectionObserver.js","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, RefObject, MutableRefObject } from \"react\";\n\ntype ValidElement = HTMLElement | SVGElement;\ntype Target =\n | MutableRefObject<ValidElement>\n | RefObject<ValidElement>\n | MutableRefObject<NodeListOf<ValidElement>>\n | RefObject<NodeListOf<ValidElement>>\n | NodeListOf<ValidElement>;\n\nfunction isNodeList(\n target: Target | ValidElement,\n): target is NodeListOf<ValidElement> {\n return (target as NodeListOf<ValidElement>).forEach !== undefined;\n}\n\nconst hasWindowWithIntersectionObserver = () =>\n typeof window !== \"undefined\" &&\n typeof IntersectionObserver !== \"undefined\";\n\n/**\n * Hook som gjør det enkelt å observere om et element er synlig i viewporten.\n *\n * @param target Elementet eller elementene som skal observeres. Du kan sende in en React ref til et HTMLElement eller SVG Element, eller en NodeList av samme type elementer (returneres f.eks. av document.querySelectorAll), eller en React ref med en NodeList av samme type elementer.\n * @param onIntersect Callback-funksjon som utføres når et av elementene som observeres overlapper angitt mål. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.\n * @param fallback Funksjon som kalles dersom nettleseren ikke støtter IntersectionOpserver-APIet.\n * @param options Objekt med innstillinger for oberveren. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.\n */\nexport const useIntersectionObserver = (\n target: Target,\n onIntersect: IntersectionObserverCallback,\n fallback?: VoidFunction | null,\n options?: Partial<IntersectionObserverInit>,\n): void => {\n const observerRef = useRef<IntersectionObserver>(null);\n\n useEffect(() => {\n let observer = observerRef.current;\n\n if (hasWindowWithIntersectionObserver()) {\n if (observer) {\n observer.disconnect();\n }\n\n observer = new IntersectionObserver(onIntersect, options);\n\n if (isNodeList(target)) {\n target.forEach((element) => observer?.observe(element));\n } else if (target.current && isNodeList(target.current)) {\n target.current.forEach((element) => observer?.observe(element));\n } else if (target.current) {\n observer.observe(target.current);\n }\n } else if (fallback) {\n fallback();\n }\n\n return () => {\n if (hasWindowWithIntersectionObserver() && observer) {\n observer.disconnect();\n }\n };\n }, [target, onIntersect, fallback, options]);\n};\n"],"names":["isNodeList","target","forEach","hasWindowWithIntersectionObserver","window","IntersectionObserver","useIntersectionObserver","onIntersect","fallback","options","observerRef","useRef","useEffect","observer","current","disconnect","element","observe"],"mappings":"8CAUA,SAASA,EACLC,GAEA,YAAwD,IAAhDA,EAAoCC,OAChD,CAEA,MAAMC,EAAoC,WAC/BC,OAAW,YACXC,qBAAyB,IAUvBC,EAA0B,CACnCL,EACAM,EACAC,EACAC,KAEMC,MAAAA,EAAcC,EAA6B,MAEjDC,GAAU,KACN,IAAIC,EAAWH,EAAYI,QAEvBX,OAAAA,KACIU,GACAA,EAASE,aAGFF,EAAA,IAAIR,qBAAqBE,EAAaE,GAE7CT,EAAWC,GACXA,EAAOC,SAASc,GAAY,MAAAH,OAAAA,EAAAA,EAAUI,QAAQD,KACvCf,EAAOa,SAAWd,EAAWC,EAAOa,SAC3Cb,EAAOa,QAAQZ,SAASc,GAAY,MAAAH,OAAA,EAAAA,EAAUI,QAAQD,KAC/Cf,EAAOa,SACLD,EAAAI,QAAQhB,EAAOa,UAErBN,GACEA,IAGN,KACCL,KAAuCU,GACvCA,EAASE,YAAW,CACxB,GAEL,CAACd,EAAQM,EAAaC,EAAUC,GAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyListener.js","sources":["../../../../src/hooks/useKeyListener/useKeyListener.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\n/**\n * Lar deg sette opp en tastaturlytter på et element.\n * @param ref Element som skal observeres\n * @param keys Taster som skal lyttes på\n * @param fn Funksjon som kalles når en tastetrykk observeres\n */\nexport function useKeyListener(\n ref: RefObject<HTMLElement> | null,\n keys: string[] | string | null,\n fn: (event: KeyboardEvent) => void,\n): void {\n if (typeof keys === \"string\") {\n keys = [keys];\n }\n function handleKeyDown(event: KeyboardEvent) {\n if (keys && !keys.includes(event.key)) {\n return;\n }\n fn(event);\n }\n\n useEffect(() => {\n const element = ref && ref.current;\n if (element) {\n element.addEventListener(\"keydown\", handleKeyDown);\n }\n return () => {\n if (element) {\n element.removeEventListener(\"keydown\", handleKeyDown);\n }\n };\n });\n}\n"],"names":["useKeyListener","ref","keys","fn","handleKeyDown","event","includes","key","useEffect","element","current","addEventListener","removeEventListener"],"mappings":"kCAQgB,SAAAA,EACZC,EACAC,EACAC,GAKA,SAASC,EAAcC,GACfH,IAASA,EAAKI,SAASD,EAAME,MAGjCJ,EAAGE,
|
|
1
|
+
{"version":3,"file":"useKeyListener.js","sources":["../../../../src/hooks/useKeyListener/useKeyListener.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\n/**\n * Lar deg sette opp en tastaturlytter på et element.\n * @param ref Element som skal observeres\n * @param keys Taster som skal lyttes på\n * @param fn Funksjon som kalles når en tastetrykk observeres\n */\nexport function useKeyListener(\n ref: RefObject<HTMLElement> | null,\n keys: string[] | string | null,\n fn: (event: KeyboardEvent) => void,\n): void {\n if (typeof keys === \"string\") {\n keys = [keys];\n }\n function handleKeyDown(event: KeyboardEvent) {\n if (keys && !keys.includes(event.key)) {\n return;\n }\n fn(event);\n }\n\n useEffect(() => {\n const element = ref && ref.current;\n if (element) {\n element.addEventListener(\"keydown\", handleKeyDown);\n }\n return () => {\n if (element) {\n element.removeEventListener(\"keydown\", handleKeyDown);\n }\n };\n });\n}\n"],"names":["useKeyListener","ref","keys","fn","handleKeyDown","event","includes","key","useEffect","element","current","addEventListener","removeEventListener"],"mappings":"kCAQgB,SAAAA,EACZC,EACAC,EACAC,GAKA,SAASC,EAAcC,GACfH,IAASA,EAAKI,SAASD,EAAME,MAGjCJ,EAAGE,EACP,CARoB,iBAATH,IACPA,EAAO,CAACA,IASZM,GAAU,KACAC,MAAAA,EAAUR,GAAOA,EAAIS,QAC3B,OAAID,GACQA,EAAAE,iBAAiB,UAAWP,GAEjC,KACCK,GACQA,EAAAG,oBAAoB,UAAWR,EAAa,CACxD,GAGZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListNavigation.js","sources":["../../../../src/hooks/useListNavigation/useListNavigation.ts"],"sourcesContent":["import { useEffect, RefObject } from \"react\";\n\ntype Timer = number | undefined;\ntype KeyBuffer = { keys: string } | undefined;\ntype Direction = \"prev\" | \"next\" | \"first\" | \"last\";\ninterface MoveDetails {\n event: KeyboardEvent;\n list: HTMLElement;\n currentFocus: HTMLButtonElement;\n}\ninterface ListDetails {\n list: HTMLElement;\n search: KeyBuffer;\n searchResetTimer: Timer;\n}\ninterface SearchDetails extends ListDetails {\n key: string;\n}\ninterface EventDetails extends ListDetails {\n event: KeyboardEvent;\n}\ntype UseListNavigationProps<T> = {\n /** Ref til et element med rollen `listbox` */\n ref: RefObject<T>;\n};\n\nexport function useListNavigation<T extends HTMLElement>({\n ref,\n}: UseListNavigationProps<T>): void {\n useEffect(() => {\n let searchResetTimer: Timer;\n const search: KeyBuffer = { keys: \"\" }; // keypress buffer is an object to preserve state\n const list = ref.current;\n const handler = (event: KeyboardEvent) => {\n if (list) {\n handleListKeyNav({ list, event, search, searchResetTimer });\n }\n };\n\n if (list) {\n list.addEventListener(\"keydown\", handler);\n }\n\n return () => {\n if (list) {\n list.removeEventListener(\"keydown\", handler);\n }\n };\n }, [ref]);\n}\n\nfunction handleMoveTo(\n direction: Direction,\n { event, list, currentFocus }: MoveDetails,\n) {\n event.preventDefault();\n moveFocusTo(direction, list, currentFocus);\n}\n\nfunction handleListKeyNav({\n list,\n event,\n search,\n searchResetTimer,\n}: EventDetails) {\n const { key, target } = event;\n const currentFocus = target as HTMLButtonElement;\n\n const moveDetails = {\n event,\n list,\n currentFocus,\n };\n\n switch (key) {\n case \"ArrowUp\":\n case \"PageUp\":\n handleMoveTo(\"prev\", moveDetails);\n break;\n case \"ArrowDown\":\n case \"PageDown\":\n handleMoveTo(\"next\", moveDetails);\n break;\n case \"Home\":\n handleMoveTo(\"first\", moveDetails);\n break;\n case \"End\":\n handleMoveTo(\"last\", moveDetails);\n break;\n case \"Tab\":\n // in a standard select, tab does nothing in-menu\n event.preventDefault();\n break;\n case \"Enter\":\n case \" \":\n break;\n\n default:\n if (search !== undefined) {\n const searchResult = findItem({\n list,\n key,\n search,\n searchResetTimer,\n });\n if (searchResult) {\n searchResult.focus();\n }\n }\n break;\n }\n}\n\nfunction moveFocusTo(\n direction: Direction,\n list: HTMLElement,\n current: HTMLButtonElement,\n) {\n const thisOption = current;\n switch (direction) {\n case \"prev\":\n const prevOption: HTMLButtonElement | null =\n thisOption &&\n (thisOption.previousElementSibling as HTMLButtonElement);\n if (prevOption) {\n prevOption.focus();\n }\n break;\n case \"next\":\n const nextOption: HTMLButtonElement | null =\n thisOption &&\n (thisOption.nextElementSibling as HTMLButtonElement);\n if (nextOption) {\n nextOption.focus();\n }\n break;\n case \"first\":\n const firstItem =\n list.querySelector<HTMLButtonElement>(`[role=\"option\"]`);\n if (firstItem) {\n firstItem.focus();\n }\n break;\n case \"last\":\n const listItems =\n list.querySelectorAll<HTMLButtonElement>(`[role=\"option\"]`);\n if (listItems.length) {\n listItems[listItems.length - 1].focus();\n }\n break;\n }\n}\n\nfunction findItem({\n list,\n key,\n search,\n searchResetTimer,\n}: SearchDetails): HTMLButtonElement | null {\n const listItems = list.querySelectorAll(`[role=\"option\"]`);\n if (!listItems.length) return null;\n\n if (search) {\n search.keys = search.keys.concat(key);\n resetWhenIdle(search, searchResetTimer);\n\n for (let n = 0; n < listItems.length; n++) {\n const label = (listItems[n] as HTMLButtonElement).innerText;\n if (label && label.toLowerCase().indexOf(search.keys) === 0) {\n return listItems[n] as HTMLButtonElement;\n }\n }\n }\n\n return null;\n}\n\nfunction resetWhenIdle(search: KeyBuffer, timer: Timer) {\n if (timer) {\n clearTimeout(timer);\n timer = undefined;\n }\n timer = setTimeout(\n () => {\n search ? (search.keys = \"\") : (search = { keys: \"\" });\n timer = undefined;\n },\n 500,\n search,\n timer,\n );\n}\n"],"names":["useListNavigation","ref","useEffect","search","keys","list","current","handler","event","searchResetTimer","key","target","moveDetails","currentFocus","handleMoveTo","preventDefault","searchResult","listItems","querySelectorAll","length","concat","timer","clearTimeout","setTimeout","resetWhenIdle","n","label","innerText","toLowerCase","indexOf","findItem","focus","handleListKeyNav","addEventListener","removeEventListener","direction","thisOption","prevOption","previousElementSibling","nextOption","nextElementSibling","firstItem","querySelector","moveFocusTo"],"mappings":"kCA0BO,SAASA,GACZC,IAAAA,IAEAC,GAAU,KAEAC,MAAAA,EAAoB,CAAEC,KAAM,IAC5BC,EAAOJ,EAAIK,QACXC,EAAWC,IACTH,GAyBhB,UACIA,KAAAA,EACAG,MAAAA,EACAL,OAAAA,EACAM,iBAAAA,IAEM,MAAEC,IAAAA,EAAKC,OAAAA,GAAWH,EAGlBI,EAAc,CAChBJ,MAAAA,EACAH,KAAAA,EACAQ,aALiBF,GAQrB,OAAQD,GACJ,IAAK,UACL,IAAK,SACDI,EAAa,OAAQF,GACrB,MACJ,IAAK,YACL,IAAK,WACDE,EAAa,OAAQF,GACrB,MACJ,IAAK,OACDE,EAAa,QAASF,GACtB,MACJ,IAAK,MACDE,EAAa,OAAQF,GACrB,MACJ,IAAK,MAEDJ,EAAMO,iBACN,MACJ,IAAK,QACL,IAAK,IACD,MAEJ,QACI,QAAe,IAAXZ,EAAsB,CACtB,MAAMa,EAsDtB,UACIX,KAAAA,EACAK,IAAAA,EACAP,OAAAA,EACAM,iBAAAA,IAEMQ,MAAAA,EAAYZ,EAAKa,iBAAiB,mBACpC,IAACD,EAAUE,OAAe,OAAA,KAE9B,GAAIhB,EAAQ,CACRA,EAAOC,KAAOD,EAAOC,KAAKgB,OAAOV,GAczC,SAAuBP,EAAmBkB,GAClCA,IACAC,aAAaD,GACLA,OAAA,GAEJA,EAAAE,YACJ,KACIpB,EAAUA,EAAOC,KAAO,GAAOD,EAAS,CAAEC,KAAM,IACxCiB,OAAA,CAAA,GAEZ,IACAlB,EACAkB,EAER,CA3BQG,CAAcrB,EAAQM,GAEtB,IAAA,IAASgB,EAAI,EAAGA,EAAIR,EAAUE,OAAQM,IAAK,CACjCC,MAAAA,EAAST,EAAUQ,GAAyBE,UAC9C,GAAAD,GAAsD,IAA7CA,EAAME,cAAcC,QAAQ1B,EAAOC,MAC5C,OAAOa,EAAUQ,
|
|
1
|
+
{"version":3,"file":"useListNavigation.js","sources":["../../../../src/hooks/useListNavigation/useListNavigation.ts"],"sourcesContent":["import { useEffect, RefObject } from \"react\";\n\ntype Timer = number | undefined;\ntype KeyBuffer = { keys: string } | undefined;\ntype Direction = \"prev\" | \"next\" | \"first\" | \"last\";\ninterface MoveDetails {\n event: KeyboardEvent;\n list: HTMLElement;\n currentFocus: HTMLButtonElement;\n}\ninterface ListDetails {\n list: HTMLElement;\n search: KeyBuffer;\n searchResetTimer: Timer;\n}\ninterface SearchDetails extends ListDetails {\n key: string;\n}\ninterface EventDetails extends ListDetails {\n event: KeyboardEvent;\n}\ntype UseListNavigationProps<T> = {\n /** Ref til et element med rollen `listbox` */\n ref: RefObject<T>;\n};\n\nexport function useListNavigation<T extends HTMLElement>({\n ref,\n}: UseListNavigationProps<T>): void {\n useEffect(() => {\n let searchResetTimer: Timer;\n const search: KeyBuffer = { keys: \"\" }; // keypress buffer is an object to preserve state\n const list = ref.current;\n const handler = (event: KeyboardEvent) => {\n if (list) {\n handleListKeyNav({ list, event, search, searchResetTimer });\n }\n };\n\n if (list) {\n list.addEventListener(\"keydown\", handler);\n }\n\n return () => {\n if (list) {\n list.removeEventListener(\"keydown\", handler);\n }\n };\n }, [ref]);\n}\n\nfunction handleMoveTo(\n direction: Direction,\n { event, list, currentFocus }: MoveDetails,\n) {\n event.preventDefault();\n moveFocusTo(direction, list, currentFocus);\n}\n\nfunction handleListKeyNav({\n list,\n event,\n search,\n searchResetTimer,\n}: EventDetails) {\n const { key, target } = event;\n const currentFocus = target as HTMLButtonElement;\n\n const moveDetails = {\n event,\n list,\n currentFocus,\n };\n\n switch (key) {\n case \"ArrowUp\":\n case \"PageUp\":\n handleMoveTo(\"prev\", moveDetails);\n break;\n case \"ArrowDown\":\n case \"PageDown\":\n handleMoveTo(\"next\", moveDetails);\n break;\n case \"Home\":\n handleMoveTo(\"first\", moveDetails);\n break;\n case \"End\":\n handleMoveTo(\"last\", moveDetails);\n break;\n case \"Tab\":\n // in a standard select, tab does nothing in-menu\n event.preventDefault();\n break;\n case \"Enter\":\n case \" \":\n break;\n\n default:\n if (search !== undefined) {\n const searchResult = findItem({\n list,\n key,\n search,\n searchResetTimer,\n });\n if (searchResult) {\n searchResult.focus();\n }\n }\n break;\n }\n}\n\nfunction moveFocusTo(\n direction: Direction,\n list: HTMLElement,\n current: HTMLButtonElement,\n) {\n const thisOption = current;\n switch (direction) {\n case \"prev\":\n const prevOption: HTMLButtonElement | null =\n thisOption &&\n (thisOption.previousElementSibling as HTMLButtonElement);\n if (prevOption) {\n prevOption.focus();\n }\n break;\n case \"next\":\n const nextOption: HTMLButtonElement | null =\n thisOption &&\n (thisOption.nextElementSibling as HTMLButtonElement);\n if (nextOption) {\n nextOption.focus();\n }\n break;\n case \"first\":\n const firstItem =\n list.querySelector<HTMLButtonElement>(`[role=\"option\"]`);\n if (firstItem) {\n firstItem.focus();\n }\n break;\n case \"last\":\n const listItems =\n list.querySelectorAll<HTMLButtonElement>(`[role=\"option\"]`);\n if (listItems.length) {\n listItems[listItems.length - 1].focus();\n }\n break;\n }\n}\n\nfunction findItem({\n list,\n key,\n search,\n searchResetTimer,\n}: SearchDetails): HTMLButtonElement | null {\n const listItems = list.querySelectorAll(`[role=\"option\"]`);\n if (!listItems.length) return null;\n\n if (search) {\n search.keys = search.keys.concat(key);\n resetWhenIdle(search, searchResetTimer);\n\n for (let n = 0; n < listItems.length; n++) {\n const label = (listItems[n] as HTMLButtonElement).innerText;\n if (label && label.toLowerCase().indexOf(search.keys) === 0) {\n return listItems[n] as HTMLButtonElement;\n }\n }\n }\n\n return null;\n}\n\nfunction resetWhenIdle(search: KeyBuffer, timer: Timer) {\n if (timer) {\n clearTimeout(timer);\n timer = undefined;\n }\n timer = setTimeout(\n () => {\n search ? (search.keys = \"\") : (search = { keys: \"\" });\n timer = undefined;\n },\n 500,\n search,\n timer,\n );\n}\n"],"names":["useListNavigation","ref","useEffect","search","keys","list","current","handler","event","searchResetTimer","key","target","moveDetails","currentFocus","handleMoveTo","preventDefault","searchResult","listItems","querySelectorAll","length","concat","timer","clearTimeout","setTimeout","resetWhenIdle","n","label","innerText","toLowerCase","indexOf","findItem","focus","handleListKeyNav","addEventListener","removeEventListener","direction","thisOption","prevOption","previousElementSibling","nextOption","nextElementSibling","firstItem","querySelector","moveFocusTo"],"mappings":"kCA0BO,SAASA,GACZC,IAAAA,IAEAC,GAAU,KAEAC,MAAAA,EAAoB,CAAEC,KAAM,IAC5BC,EAAOJ,EAAIK,QACXC,EAAWC,IACTH,GAyBhB,UACIA,KAAAA,EACAG,MAAAA,EACAL,OAAAA,EACAM,iBAAAA,IAEM,MAAEC,IAAAA,EAAKC,OAAAA,GAAWH,EAGlBI,EAAc,CAChBJ,MAAAA,EACAH,KAAAA,EACAQ,aALiBF,GAQrB,OAAQD,GACJ,IAAK,UACL,IAAK,SACDI,EAAa,OAAQF,GACrB,MACJ,IAAK,YACL,IAAK,WACDE,EAAa,OAAQF,GACrB,MACJ,IAAK,OACDE,EAAa,QAASF,GACtB,MACJ,IAAK,MACDE,EAAa,OAAQF,GACrB,MACJ,IAAK,MAEDJ,EAAMO,iBACN,MACJ,IAAK,QACL,IAAK,IACD,MAEJ,QACI,QAAe,IAAXZ,EAAsB,CACtB,MAAMa,EAsDtB,UACIX,KAAAA,EACAK,IAAAA,EACAP,OAAAA,EACAM,iBAAAA,IAEMQ,MAAAA,EAAYZ,EAAKa,iBAAiB,mBACpC,IAACD,EAAUE,OAAe,OAAA,KAE9B,GAAIhB,EAAQ,CACRA,EAAOC,KAAOD,EAAOC,KAAKgB,OAAOV,GAczC,SAAuBP,EAAmBkB,GAClCA,IACAC,aAAaD,GACLA,OAAA,GAEJA,EAAAE,YACJ,KACIpB,EAAUA,EAAOC,KAAO,GAAOD,EAAS,CAAEC,KAAM,IACxCiB,OAAA,CAAA,GAEZ,IACAlB,EACAkB,EAER,CA3BQG,CAAcrB,EAAQM,GAEtB,IAAA,IAASgB,EAAI,EAAGA,EAAIR,EAAUE,OAAQM,IAAK,CACjCC,MAAAA,EAAST,EAAUQ,GAAyBE,UAC9C,GAAAD,GAAsD,IAA7CA,EAAME,cAAcC,QAAQ1B,EAAOC,MAC5C,OAAOa,EAAUQ,EAEzB,CACJ,CAEO,OAAA,IACX,CA5EqCK,CAAS,CAC1BzB,KAAAA,EACAK,IAAAA,EACAP,OAAAA,EACAM,iBAAAA,IAEAO,GACAA,EAAae,OAErB,EAGZ,CA5EgBC,CAAiB,CAAE3B,KAAAA,EAAMG,MAAAA,EAAOL,OAAAA,EAAQM,iBAL5CA,WAK8D,EAIlE,OAAIJ,GACKA,EAAA4B,iBAAiB,UAAW1B,GAG9B,KACCF,GACKA,EAAA6B,oBAAoB,UAAW3B,EAAO,CAC/C,GAEL,CAACN,GACR,CAEA,SAASa,EACLqB,GACE3B,MAAAA,EAAOH,KAAAA,EAAMQ,aAAAA,IAEfL,EAAMO,iBA0DV,SACIoB,EACA9B,EACAC,GAEA,MAAM8B,EAAa9B,EACnB,OAAQ6B,GACJ,IAAK,OACKE,MAAAA,EACFD,GACCA,EAAWE,uBACZD,GACAA,EAAWN,QAEf,MACJ,IAAK,OACKQ,MAAAA,EACFH,GACCA,EAAWI,mBACZD,GACAA,EAAWR,QAEf,MACJ,IAAK,QACKU,MAAAA,EACFpC,EAAKqC,cAAiC,mBACtCD,GACAA,EAAUV,QAEd,MACJ,IAAK,OACKd,MAAAA,EACFZ,EAAKa,iBAAoC,mBACzCD,EAAUE,QACVF,EAAUA,EAAUE,OAAS,GAAGY,QAIhD,CA/FgBY,CAAAR,EAAW9B,EAAMQ,EACjC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMutationObserver.js","sources":["../../../../src/hooks/useMutationObserver/useMutationObserver.ts"],"sourcesContent":["import { useEffect, useRef, RefObject } from \"react\";\n\nconst hasWindowWithMutationObserver = () =>\n typeof window !== \"undefined\" && typeof MutationObserver !== \"undefined\";\n\n/**\n * Hook som gjør det enklere å sjekke en komponents children for endringer.\n *\n * @param targetRef Container som skal observeres. Containeren må ikke rerendres, da vil observereren bli opprettet på nytt.\n * @param onObservation Callback-funksjon som utføres når en mutasjon observeres.\n * @param config Parametere til observereren. Se https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit#properties for mer info.\n */\nexport const useMutationObserver = (\n targetRef: RefObject<HTMLElement>,\n onObservation: MutationCallback,\n config?: Partial<MutationObserverInit>,\n): void => {\n const observerRef = useRef<MutationObserver>(null);\n\n useEffect(() => {\n let observer = observerRef.current;\n\n if (hasWindowWithMutationObserver()) {\n const target = targetRef.current;\n\n if (observer) {\n observer.disconnect();\n }\n\n observer = new MutationObserver(onObservation);\n\n if (target) {\n observer.observe(target, config);\n }\n }\n return () => {\n if (hasWindowWithMutationObserver() && observer) {\n observer.disconnect();\n }\n };\n }, [targetRef, onObservation, config]);\n};\n"],"names":["hasWindowWithMutationObserver","window","MutationObserver","useMutationObserver","targetRef","onObservation","config","observerRef","useRef","useEffect","observer","current","target","disconnect","observe"],"mappings":"8CAEA,MAAMA,EAAgC,WAC3BC,OAAW,YAAsBC,iBAAqB,IASpDC,EAAsB,CAC/BC,EACAC,EACAC,KAEMC,MAAAA,EAAcC,EAAyB,MAE7CC,GAAU,KACN,IAAIC,EAAWH,EAAYI,QAE3B,GAAIX,IAAiC,CACjC,MAAMY,EAASR,EAAUO,QAErBD,GACAA,EAASG,aAGFH,EAAA,IAAIR,iBAAiBG,GAE5BO,GACSF,EAAAI,QAAQF,EAAQN,
|
|
1
|
+
{"version":3,"file":"useMutationObserver.js","sources":["../../../../src/hooks/useMutationObserver/useMutationObserver.ts"],"sourcesContent":["import { useEffect, useRef, RefObject } from \"react\";\n\nconst hasWindowWithMutationObserver = () =>\n typeof window !== \"undefined\" && typeof MutationObserver !== \"undefined\";\n\n/**\n * Hook som gjør det enklere å sjekke en komponents children for endringer.\n *\n * @param targetRef Container som skal observeres. Containeren må ikke rerendres, da vil observereren bli opprettet på nytt.\n * @param onObservation Callback-funksjon som utføres når en mutasjon observeres.\n * @param config Parametere til observereren. Se https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit#properties for mer info.\n */\nexport const useMutationObserver = (\n targetRef: RefObject<HTMLElement>,\n onObservation: MutationCallback,\n config?: Partial<MutationObserverInit>,\n): void => {\n const observerRef = useRef<MutationObserver>(null);\n\n useEffect(() => {\n let observer = observerRef.current;\n\n if (hasWindowWithMutationObserver()) {\n const target = targetRef.current;\n\n if (observer) {\n observer.disconnect();\n }\n\n observer = new MutationObserver(onObservation);\n\n if (target) {\n observer.observe(target, config);\n }\n }\n return () => {\n if (hasWindowWithMutationObserver() && observer) {\n observer.disconnect();\n }\n };\n }, [targetRef, onObservation, config]);\n};\n"],"names":["hasWindowWithMutationObserver","window","MutationObserver","useMutationObserver","targetRef","onObservation","config","observerRef","useRef","useEffect","observer","current","target","disconnect","observe"],"mappings":"8CAEA,MAAMA,EAAgC,WAC3BC,OAAW,YAAsBC,iBAAqB,IASpDC,EAAsB,CAC/BC,EACAC,EACAC,KAEMC,MAAAA,EAAcC,EAAyB,MAE7CC,GAAU,KACN,IAAIC,EAAWH,EAAYI,QAE3B,GAAIX,IAAiC,CACjC,MAAMY,EAASR,EAAUO,QAErBD,GACAA,EAASG,aAGFH,EAAA,IAAIR,iBAAiBG,GAE5BO,GACSF,EAAAI,QAAQF,EAAQN,EAEjC,CACA,MAAO,KACCN,KAAmCU,GACnCA,EAASG,YAAW,CACxB,GAEL,CAACT,EAAWC,EAAeC,GAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useProgressiveImg.js","sources":["../../../../src/hooks/useProgressiveImg/useProgressiveImg.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nexport interface ProgressiveImageProps {\n lowQualitySrc: string;\n highQualitySrc: string;\n}\n\ntype ProgressiveImage = { src: string; isBlurred: boolean };\n\nexport const useProgressiveImg = ({\n lowQualitySrc,\n highQualitySrc,\n}: ProgressiveImageProps): ProgressiveImage => {\n const [src, setSrc] = useState(lowQualitySrc);\n\n useEffect(() => {\n setSrc(lowQualitySrc);\n const img = new Image();\n img.src = highQualitySrc;\n\n img.onload = () => {\n setSrc(highQualitySrc);\n };\n }, [lowQualitySrc, highQualitySrc]);\n\n return { src, isBlurred: src === lowQualitySrc };\n};\n"],"names":["useProgressiveImg","lowQualitySrc","highQualitySrc","src","setSrc","useState","useEffect","img","Image","onload","isBlurred"],"mappings":"gDASO,MAAMA,EAAoB,EAC7BC,cAAAA,EACAC,eAAAA,MAEA,MAAOC,EAAKC,GAAUC,EAASJ,GAE/B,OAAAK,GAAU,KACNF,EAAOH,GACDM,MAAAA,EAAM,IAAIC,MAChBD,EAAIJ,IAAMD,EAEVK,EAAIE,OAAS,KACTL,EAAOF,EAAc,
|
|
1
|
+
{"version":3,"file":"useProgressiveImg.js","sources":["../../../../src/hooks/useProgressiveImg/useProgressiveImg.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nexport interface ProgressiveImageProps {\n lowQualitySrc: string;\n highQualitySrc: string;\n}\n\ntype ProgressiveImage = { src: string; isBlurred: boolean };\n\nexport const useProgressiveImg = ({\n lowQualitySrc,\n highQualitySrc,\n}: ProgressiveImageProps): ProgressiveImage => {\n const [src, setSrc] = useState(lowQualitySrc);\n\n useEffect(() => {\n setSrc(lowQualitySrc);\n const img = new Image();\n img.src = highQualitySrc;\n\n img.onload = () => {\n setSrc(highQualitySrc);\n };\n }, [lowQualitySrc, highQualitySrc]);\n\n return { src, isBlurred: src === lowQualitySrc };\n};\n"],"names":["useProgressiveImg","lowQualitySrc","highQualitySrc","src","setSrc","useState","useEffect","img","Image","onload","isBlurred"],"mappings":"gDASO,MAAMA,EAAoB,EAC7BC,cAAAA,EACAC,eAAAA,MAEA,MAAOC,EAAKC,GAAUC,EAASJ,GAE/B,OAAAK,GAAU,KACNF,EAAOH,GACDM,MAAAA,EAAM,IAAIC,MAChBD,EAAIJ,IAAMD,EAEVK,EAAIE,OAAS,KACTL,EAAOF,EAAc,CAAA,GAE1B,CAACD,EAAeC,IAEZ,CAAEC,IAAAA,EAAKO,UAAWP,IAAQF,EAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.js","sources":["../../../../src/hooks/useScreen/state.ts"],"sourcesContent":["export interface ScreenState {\n isSmallDevice: boolean;\n isMediumDevice: boolean;\n isLargeDevice: boolean;\n isXlDevice: boolean;\n isLandscape: boolean;\n isPortrait: boolean;\n}\n\nexport enum ActionType {\n orientation = \"ORIENTATION_CHANGED\",\n deviceSize = \"DEVICE_SIZE_CHANGED\",\n}\n\nexport interface ScreenAction {\n type: ActionType;\n property: keyof ScreenState;\n}\n\nfunction setDeviceSize(\n deviceSize: keyof ScreenState,\n): Omit<ScreenState, \"isLandscape\" | \"isPortrait\"> {\n return {\n isSmallDevice: deviceSize === \"isSmallDevice\",\n isMediumDevice: deviceSize === \"isMediumDevice\",\n isLargeDevice: deviceSize === \"isLargeDevice\",\n isXlDevice: deviceSize === \"isXlDevice\",\n };\n}\n\nfunction setOrientation(\n orientation: keyof ScreenState,\n): Pick<ScreenState, \"isLandscape\" | \"isPortrait\"> {\n return {\n isLandscape: orientation === \"isLandscape\",\n isPortrait: orientation === \"isPortrait\",\n };\n}\n\nexport const reducer = (\n state: ScreenState,\n action: ScreenAction,\n): ScreenState => {\n switch (action.type) {\n case ActionType.orientation:\n return {\n ...state,\n ...setOrientation(action.property),\n };\n case ActionType.deviceSize:\n return {\n ...state,\n ...setDeviceSize(action.property),\n };\n default:\n return state;\n }\n};\n"],"names":["ActionType","orientation","deviceSize","setDeviceSize","isSmallDevice","isMediumDevice","isLargeDevice","isXlDevice","setOrientation","isLandscape","isPortrait","reducer","state","action","type","property"],"mappings":"AASY,IAAAA,GAAAA,IACRA,EAAAC,YAAc,sBACdD,EAAAE,WAAa,sBAFLF,IAAAA,GAAA,CAAA,GAUZ,SAASG,EACLD,GAEO,MAAA,CACHE,cAA8B,kBAAfF,EACfG,eAA+B,mBAAfH,EAChBI,cAA8B,kBAAfJ,EACfK,WAA2B,eAAfL,EAEpB,CAEA,SAASM,EACLP,GAEO,MAAA,CACHQ,YAA6B,gBAAhBR,EACbS,WAA4B,eAAhBT,EAEpB,CAEa,MAAAU,EAAU,CACnBC,EACAC,KAEA,OAAQA,EAAOC,MACX,IAAK,sBACM,MAAA,IACAF,KACAJ,EAAeK,EAAOE,WAEjC,IAAK,sBACM,MAAA,IACAH,KACAT,EAAcU,EAAOE,WAEhC,QACWH,OAAAA,
|
|
1
|
+
{"version":3,"file":"state.js","sources":["../../../../src/hooks/useScreen/state.ts"],"sourcesContent":["export interface ScreenState {\n isSmallDevice: boolean;\n isMediumDevice: boolean;\n isLargeDevice: boolean;\n isXlDevice: boolean;\n isLandscape: boolean;\n isPortrait: boolean;\n}\n\nexport enum ActionType {\n orientation = \"ORIENTATION_CHANGED\",\n deviceSize = \"DEVICE_SIZE_CHANGED\",\n}\n\nexport interface ScreenAction {\n type: ActionType;\n property: keyof ScreenState;\n}\n\nfunction setDeviceSize(\n deviceSize: keyof ScreenState,\n): Omit<ScreenState, \"isLandscape\" | \"isPortrait\"> {\n return {\n isSmallDevice: deviceSize === \"isSmallDevice\",\n isMediumDevice: deviceSize === \"isMediumDevice\",\n isLargeDevice: deviceSize === \"isLargeDevice\",\n isXlDevice: deviceSize === \"isXlDevice\",\n };\n}\n\nfunction setOrientation(\n orientation: keyof ScreenState,\n): Pick<ScreenState, \"isLandscape\" | \"isPortrait\"> {\n return {\n isLandscape: orientation === \"isLandscape\",\n isPortrait: orientation === \"isPortrait\",\n };\n}\n\nexport const reducer = (\n state: ScreenState,\n action: ScreenAction,\n): ScreenState => {\n switch (action.type) {\n case ActionType.orientation:\n return {\n ...state,\n ...setOrientation(action.property),\n };\n case ActionType.deviceSize:\n return {\n ...state,\n ...setDeviceSize(action.property),\n };\n default:\n return state;\n }\n};\n"],"names":["ActionType","orientation","deviceSize","setDeviceSize","isSmallDevice","isMediumDevice","isLargeDevice","isXlDevice","setOrientation","isLandscape","isPortrait","reducer","state","action","type","property"],"mappings":"AASY,IAAAA,GAAAA,IACRA,EAAAC,YAAc,sBACdD,EAAAE,WAAa,sBAFLF,IAAAA,GAAA,CAAA,GAUZ,SAASG,EACLD,GAEO,MAAA,CACHE,cAA8B,kBAAfF,EACfG,eAA+B,mBAAfH,EAChBI,cAA8B,kBAAfJ,EACfK,WAA2B,eAAfL,EAEpB,CAEA,SAASM,EACLP,GAEO,MAAA,CACHQ,YAA6B,gBAAhBR,EACbS,WAA4B,eAAhBT,EAEpB,CAEa,MAAAU,EAAU,CACnBC,EACAC,KAEA,OAAQA,EAAOC,MACX,IAAK,sBACM,MAAA,IACAF,KACAJ,EAAeK,EAAOE,WAEjC,IAAK,sBACM,MAAA,IACAH,KACAT,EAAcU,EAAOE,WAEhC,QACWH,OAAAA,EACf"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState as e,useReducer as i,useEffect as a,useCallback as t}from"react";import r from"../../core/tokens.js";import"
|
|
1
|
+
import{useState as e,useReducer as i,useEffect as a,useCallback as t}from"react";import r from"../../core/tokens.js";import"../../core/tailwind/tailwindPreset.js";import{getInitialMediaQueryMatch as s,addMediaQueryListener as n,removeMediaQueryListener as o}from"../mediaQueryUtils.js";import{reducer as c,ActionType as d}from"./state.js";const{breakpoint:m}=r,p=e=>parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(m.medium)-1}px)`,isMediumDevice:`(min-width: ${m.medium}) and (max-width: ${p(m.large)-1}px)`,isLargeDevice:`(min-width: ${m.large}) and (max-width: ${p(m.xl)-1}px)`,isXlDevice:`(min-width: ${m.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?d.orientation:d.deviceSize,property:e}),h=()=>{const[r,d]=e(!1),[m,p]=i(c,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});a((()=>{d(!0),Object.entries(u).map((([e,i])=>[e,s(i)])).forEach((([e,i])=>{i&&p(l(e))}))}),[]);const h=t((e=>i=>{requestAnimationFrame((()=>{i.matches&&p(l(e))}))}),[]);return a((()=>{if(!r||!window.matchMedia)return;const e=[];return Object.entries(u).forEach((([i,a])=>{const t=window.matchMedia(a),r=h(i);e.push([t,r]),n(t,r)})),()=>{e.forEach((([e,i])=>o(e,i)))}}),[h,r]),{...m}};export{h as useScreen};
|
|
2
2
|
//# sourceMappingURL=useScreen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScreen.js","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport { tokens } from \"../../core/index.js\";\nimport {\n addMediaQueryListener,\n getInitialMediaQueryMatch,\n removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport { ScreenAction, ActionType, reducer, ScreenState } from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n isSmallDevice: `(max-width: ${\n breakpointsAsNumber(breakpoint.medium) - 1\n }px)`,\n isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n breakpointsAsNumber(breakpoint.large) - 1\n }px)`,\n isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: ${\n breakpointsAsNumber(breakpoint.xl) - 1\n }px)`,\n isXlDevice: `(min-width: ${breakpoint.xl})`,\n isPortrait: \"(orientation: portrait)\",\n isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n type:\n property === \"isLandscape\" || property === \"isPortrait\"\n ? ActionType.orientation\n : ActionType.deviceSize,\n property,\n});\n\n/**\n * Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const [device, deviceDispatch] = useReducer(reducer, {\n isSmallDevice: false,\n isMediumDevice: false,\n isLargeDevice: false,\n isXlDevice: false,\n isLandscape: false,\n isPortrait: false,\n });\n\n useEffect(() => {\n setHasMounted(true);\n Object.entries(MEDIA_RULES)\n .map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])\n .forEach(([key, value]) => {\n if (value) {\n deviceDispatch(createAction(key as keyof ScreenState));\n }\n });\n }, []);\n\n const createListener = useCallback(\n (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n requestAnimationFrame(() => {\n if (e.matches) {\n deviceDispatch(createAction(key));\n }\n });\n },\n [],\n );\n\n useEffect(() => {\n if (!hasMounted || !window.matchMedia) {\n return;\n }\n const eventListenerPairs: Array<\n [MediaQueryList, (e: MediaQueryListEvent) => void]\n > = [];\n\n Object.entries(MEDIA_RULES).forEach(([key, rule]) => {\n const queryList = window.matchMedia(rule);\n const listener = createListener(key as keyof ScreenState);\n eventListenerPairs.push([queryList, listener]);\n addMediaQueryListener(queryList, listener);\n });\n\n return () => {\n eventListenerPairs.forEach(([queryList, listener]) =>\n removeMediaQueryListener(queryList, listener),\n );\n };\n }, [createListener, hasMounted]);\n\n return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","xl","isXlDevice","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","useScreen","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","Object","entries","map","key","rule","getInitialMediaQueryMatch","forEach","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useScreen.js","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport { tokens } from \"../../core/index.js\";\nimport {\n addMediaQueryListener,\n getInitialMediaQueryMatch,\n removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport { ScreenAction, ActionType, reducer, ScreenState } from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n isSmallDevice: `(max-width: ${\n breakpointsAsNumber(breakpoint.medium) - 1\n }px)`,\n isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n breakpointsAsNumber(breakpoint.large) - 1\n }px)`,\n isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: ${\n breakpointsAsNumber(breakpoint.xl) - 1\n }px)`,\n isXlDevice: `(min-width: ${breakpoint.xl})`,\n isPortrait: \"(orientation: portrait)\",\n isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n type:\n property === \"isLandscape\" || property === \"isPortrait\"\n ? ActionType.orientation\n : ActionType.deviceSize,\n property,\n});\n\n/**\n * Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const [device, deviceDispatch] = useReducer(reducer, {\n isSmallDevice: false,\n isMediumDevice: false,\n isLargeDevice: false,\n isXlDevice: false,\n isLandscape: false,\n isPortrait: false,\n });\n\n useEffect(() => {\n setHasMounted(true);\n Object.entries(MEDIA_RULES)\n .map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])\n .forEach(([key, value]) => {\n if (value) {\n deviceDispatch(createAction(key as keyof ScreenState));\n }\n });\n }, []);\n\n const createListener = useCallback(\n (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n requestAnimationFrame(() => {\n if (e.matches) {\n deviceDispatch(createAction(key));\n }\n });\n },\n [],\n );\n\n useEffect(() => {\n if (!hasMounted || !window.matchMedia) {\n return;\n }\n const eventListenerPairs: Array<\n [MediaQueryList, (e: MediaQueryListEvent) => void]\n > = [];\n\n Object.entries(MEDIA_RULES).forEach(([key, rule]) => {\n const queryList = window.matchMedia(rule);\n const listener = createListener(key as keyof ScreenState);\n eventListenerPairs.push([queryList, listener]);\n addMediaQueryListener(queryList, listener);\n });\n\n return () => {\n eventListenerPairs.forEach(([queryList, listener]) =>\n removeMediaQueryListener(queryList, listener),\n );\n };\n }, [createListener, hasMounted]);\n\n return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","xl","isXlDevice","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","useScreen","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","Object","entries","map","key","rule","getInitialMediaQueryMatch","forEach","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"mVASA,MAAQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,SAASH,EAAWI,QAAQ,KAAM,KAEhCC,EAAiD,CACnDC,cAAe,eACXJ,EAAoBF,EAAWO,QAAU,OAE7CC,eAAgB,eAAeR,EAAWO,2BACtCL,EAAoBF,EAAWS,OAAS,OAE5CC,cAAe,eAAeV,EAAWS,0BACrCP,EAAoBF,EAAWW,IAAM,OAEzCC,WAAY,eAAeZ,EAAWW,MACtCE,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,IAA+C,CACjEC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,EAAWC,YACXD,EAAWE,WACrBJ,SAAAA,IAOSK,EAAY,KACrB,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCC,EAAQC,GAAkBC,EAAWC,EAAS,CACjDtB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBgB,GAAU,KACNN,GAAc,GACPO,OAAAC,QAAQ1B,GACV2B,KAAI,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BD,MACrDE,SAAQ,EAAEH,EAAKI,MACRA,GACeX,EAAAX,EAAakB,GAAyB,GAE5D,GACN,IAEH,MAAMK,EAAiBC,GAClBN,GAA4BO,IACzBC,uBAAsB,KACdD,EAAEE,SACahB,EAAAX,EAAakB,GAAI,GAEvC,GAEL,IAGJ,OAAAJ,GAAU,KACF,IAACP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEG,OAAAf,OAAAC,QAAQ1B,GAAa+B,SAAQ,EAAEH,EAAKC,MACjC,MAAAY,EAAYH,OAAOC,WAAWV,GAC9Ba,EAAWT,EAAeL,GAChCY,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAsBH,EAAWC,EAAQ,IAGtC,KACgBF,EAAAT,SAAQ,EAAEU,EAAWC,KACpCG,EAAyBJ,EAAWC,IAAQ,CAChD,GAEL,CAACT,EAAgBhB,IAEb,IAAKG"}
|
package/build/es/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Accordion as o}from"./components/accordion/Accordion.js";import{AccordionItem as s}from"./components/accordion/AccordionItem.js";import{Breadcrumb as e}from"./components/breadcrumb/Breadcrumb.js";import{BreadcrumbItem as a}from"./components/breadcrumb/BreadcrumbItem.js";import{Button as t,PrimaryButton as r,SecondaryButton as n,TertiaryButton as i}from"./components/button/Button.js";import{Card as m}from"./components/card/Card.js";import{CardImage as p}from"./components/card/CardImage.js";import{InfoBlock as c,NavCard as l}from"./components/card/NavCard.js";import{TaskCard as u}from"./components/card/TaskCard.js";import{InfoCard as d}from"./components/card/InfoCard.js";import{Checkbox as f}from"./components/checkbox/Checkbox.js";import{Combobox as g,getComboboxValuePair as j}from"./components/combobox/Combobox.js";import{CookieConsent as b}from"./components/cookie-consent/CookieConsent.js";import{CookieConsentProvider as I,useCookieConsent as T}from"./components/cookie-consent/CookieConsentContext.js";import{DatePicker as k}from"./components/datepicker/DatePicker.js";import{isCorrectFormat as C,isWithinLowerBound as h,isWithinUpperBound as S}from"./components/datepicker/validation.js";import{formatInput as v,isBlurTargetOutside as M,parseDateString as E}from"./components/datepicker/utils.js";import{Feedback as L}from"./components/feedback/Feedback.js";import{PRESETS as A}from"./components/feedback/presets.js";import{Flex as x}from"./components/flex/Flex.js";import{DescriptionDetail as R,DescriptionList as B,DescriptionTerm as P}from"./components/description-list/DescriptionList.js";import{ExpandablePanel as w}from"./components/expander/ExpandablePanel.js";import{Expander as F}from"./components/expander/Expander.js";import{ExpandSection as N}from"./components/expander/deprecated/ExpandSection.js";import{Icon as D}from"./components/icon/Icon.js";import{ArrowVerticalAnimated as V}from"./components/icon/icons/animated/ArrowVerticalAnimated.js";import{ArrowHorizontalAnimated as y}from"./components/icon/icons/animated/ArrowHorizontalAnimated.js";import{PlusRemoveAnimated as O}from"./components/icon/icons/animated/PlusRemoveAnimated.js";import{ArrowDownIcon as G}from"./components/icon/icons/ArrowDownIcon.js";import{ArrowLeftIcon as H}from"./components/icon/icons/ArrowLeftIcon.js";import{ArrowNorthEastIcon as W}from"./components/icon/icons/ArrowNorthEastIcon.js";import{ArrowRightIcon as U}from"./components/icon/icons/ArrowRightIcon.js";import{ArrowUpIcon as K}from"./components/icon/icons/ArrowUpIcon.js";import{CalendarIcon as X}from"./components/icon/icons/CalendarIcon.js";import{CheckIcon as _}from"./components/icon/icons/CheckIcon.js";import{ChevronDownIcon as z}from"./components/icon/icons/ChevronDownIcon.js";import{ChevronLeftIcon as Q}from"./components/icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as J}from"./components/icon/icons/ChevronRightIcon.js";import{ChevronUpIcon as q}from"./components/icon/icons/ChevronUpIcon.js";import{CloseIcon as Y}from"./components/icon/icons/CloseIcon.js";import{CopyIcon as Z}from"./components/icon/icons/CopyIcon.js";import{DotsIcon as $}from"./components/icon/icons/DotsIcon.js";import{DragIcon as oo}from"./components/icon/icons/DragIcon.js";import{ErrorIcon as so}from"./components/icon/icons/ErrorIcon.js";import{GreenCheckIcon as eo}from"./components/icon/icons/GreenCheckIcon.js";import{HamburgerIcon as ao}from"./components/icon/icons/HamburgerIcon.js";import{InfoIcon as to}from"./components/icon/icons/InfoIcon.js";import{LinkIcon as ro}from"./components/icon/icons/LinkIcon.js";import{MinusIcon as no}from"./components/icon/icons/MinusIcon.js";import{OpenInNewIcon as io}from"./components/icon/icons/OpenInNewIcon.js";import{PenIcon as mo}from"./components/icon/icons/PenIcon.js";import{PlusIcon as po}from"./components/icon/icons/PlusIcon.js";import{QuestionIcon as co}from"./components/icon/icons/QuestionIcon.js";import{RedCrossIcon as lo}from"./components/icon/icons/RedCrossIcon.js";import{SearchIcon as uo}from"./components/icon/icons/SearchIcon.js";import{SuccessIcon as fo}from"./components/icon/icons/SuccessIcon.js";import{ThumbDownIcon as go}from"./components/icon/icons/ThumbDownIcon.js";import{ThumbUpIcon as jo}from"./components/icon/icons/ThumbUpIcon.js";import{TrashCanIcon as bo}from"./components/icon/icons/TrashCanIcon.js";import{WarningIcon as Io}from"./components/icon/icons/WarningIcon.js";import{IconButton as To}from"./components/icon-button/IconButton.js";import{Image as ko}from"./components/image/Image.js";import{FieldGroup as Co}from"./components/input-group/FieldGroup.js";import{InputGroup as ho}from"./components/input-group/InputGroup.js";import{Label as So}from"./components/input-group/Label.js";import{SupportLabel as vo}from"./components/input-group/SupportLabel.js";import{CheckboxPanel as Mo}from"./components/input-panel/CheckboxPanel.js";import{RadioPanel as Eo}from"./components/input-panel/RadioPanel.js";import{RadioPanelGroup as Lo}from"./components/input-panel/RadioPanelGroup.js";import{Link as Ao}from"./components/link/Link.js";import{NavLink as xo}from"./components/link/NavLink.js";import{LinkList as Ro}from"./components/link-list/LinkList.js";import{List as Bo,OrderedList as Po,UnorderedList as wo}from"./components/list/List.js";import{CheckListItem as Fo,CrossListItem as No,ListItem as Do}from"./components/list/ListItem.js";import{Loader as Vo}from"./components/loader/Loader.js";import{SkeletonAnimation as yo}from"./components/loader/skeletons/SkeletonAnimation.js";import{SkeletonButton as Oo}from"./components/loader/skeletons/SkeletonButton.js";import{SkeletonCheckboxGroup as Go}from"./components/loader/skeletons/SkeletonCheckboxGroup.js";import{SkeletonElement as Ho}from"./components/loader/skeletons/SkeletonElement.js";import{SkeletonInput as Wo}from"./components/loader/skeletons/SkeletonInput.js";import{SkeletonRadioButtonGroup as Uo}from"./components/loader/skeletons/SkeletonRadioButtonGroup.js";import{SkeletonTable as Ko,SkeletonTableHeader as Xo,SkeletonTableRow as _o}from"./components/loader/skeletons/SkeletonTable.js";import{SkeletonTextArea as zo}from"./components/loader/skeletons/SkeletonTextArea.js";import{Logo as Qo}from"./components/logo/Logo.js";import{LogoStamp as Jo}from"./components/logo/LogoStamp.js";import{ForsikringLevertAvFremtind as qo}from"./components/logo/text-paths/ForsikringLevertAvFremtind.js";import{FraSB1ogDNB as Yo}from"./components/logo/text-paths/FraSB1ogDNB.js";import{InnovasjonFraFremtind as Zo}from"./components/logo/text-paths/InnovasjonFraFremtind.js";import{TeknologiFraFremtind as $o}from"./components/logo/text-paths/TeknologiFraFremtind.js";import{VartEgetForsikringsselskap as os}from"./components/logo/text-paths/VartEgetForsikringsselskap.js";import{VartForsikringsselskap as ss}from"./components/logo/text-paths/VartForsikringsselskap.js";import{Menu as es}from"./components/menu/Menu.js";import{MenuItem as as}from"./components/menu/MenuItem.js";import{MenuItemCheckbox as ts}from"./components/menu/MenuItemCheckbox.js";import{MenuDivider as rs}from"./components/menu/MenuDivider.js";import{ErrorMessage as ns,InfoMessage as is,SuccessMessage as ms,WarningMessage as ps}from"./components/message/Message.js";import{FormErrorMessage as cs}from"./components/message/FormErrorMessage.js";import{Modal as ls,ModalActions as us,ModalBody as ds,ModalCloseButton as fs,ModalContainer as gs,ModalHeader as js,ModalOverlay as bs,ModalTitle as Is}from"./components/modal/Modal.js";import{useModal as Ts}from"./components/modal/useModal.js";import{Pagination as ks}from"./components/pagination/Pagination.js";import{Popover as Cs}from"./components/popover/Popover.js";import{Countdown as hs}from"./components/progress-bar/Countdown.js";import{ProgressBar as Ss}from"./components/progress-bar/ProgressBar.js";import{RadioButton as vs}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as Ms}from"./components/radio-button/RadioButtonGroup.js";import{BaseRadioButton as Es}from"./components/radio-button/BaseRadioButton.js";import{Select as Ls}from"./components/select/Select.js";import{NativeSelect as As}from"./components/select/NativeSelect.js";import{SummaryTable as xs}from"./components/summary-table/SummaryTable.js";import{SummaryTableRow as Rs}from"./components/summary-table/SummaryTableRow.js";import{ErrorSystemMessage as Bs,InfoSystemMessage as Ps,SuccessSystemMessage as ws,WarningSystemMessage as Fs}from"./components/system-message/SystemMessage.js";import{DataTable as Ns}from"./components/table/DataTable.js";import{Table as Ds}from"./components/table/Table.js";import{TableBody as Vs}from"./components/table/TableBody.js";import{TableCaption as ys}from"./components/table/TableCaption.js";import{TableCell as Os}from"./components/table/TableCell.js";import{TableColumn as Gs}from"./components/table/TableColumn.js";import{TableColumnGroup as Hs}from"./components/table/TableColumnGroup.js";import{TableContextProvider as Ws,useTableContext as Us}from"./components/table/tableContext.js";import{TableSectionContextProvider as Ks,useTableSectionContext as Xs}from"./components/table/tableSectionContext.js";import{TableFooter as _s}from"./components/table/TableFooter.js";import{TableHead as zs}from"./components/table/TableHead.js";import{TableHeader as Qs}from"./components/table/TableHeader.js";import{TablePagination as Js}from"./components/table/TablePagination.js";import{TableRow as qs}from"./components/table/TableRow.js";import{ExpandableTableRow as Ys}from"./components/table/ExpandableTableRow.js";import{ExpandableTableRowController as Zs}from"./components/table/ExpandableTableRowController.js";import{useSortableTableHeader as $s}from"./components/table/utils.js";import{NavTab as oe}from"./components/tabs/NavTab.js";import{NavTabs as se}from"./components/tabs/NavTabs.js";import{Tabs as ee}from"./components/tabs/Tabs.js";import{TabList as ae}from"./components/tabs/TabList.js";import{Tab as te}from"./components/tabs/Tab.js";import{TabPanel as re}from"./components/tabs/TabPanel.js";import{ErrorTag as ne,InfoTag as ie,SuccessTag as me,Tag as pe,WarningTag as ce}from"./components/tag/Tag.js";import{BaseTextArea as le}from"./components/text-input/BaseTextArea.js";import{BaseTextInput as ue}from"./components/text-input/BaseTextInput.js";import{TextArea as de}from"./components/text-input/TextArea.js";import{TextInput as fe}from"./components/text-input/TextInput.js";import{ToastProvider as ge,useToast as je}from"./components/toast/toastContext.js";import{ToggleSwitch as be}from"./components/toggle-switch/ToggleSwitch.js";import{ToggleSlider as Ie}from"./components/toggle-switch/ToggleSlider.js";import{Tooltip as Te}from"./components/tooltip/Tooltip.js";import{TooltipContent as ke}from"./components/tooltip/TooltipContent.js";import{TooltipTrigger as Ce}from"./components/tooltip/TooltipTrigger.js";import{PopupTip as he}from"./components/tooltip/PopupTip.js";import{ScreenReaderOnly as Se}from"./components/ScreenReaderOnly.js";import{default as ve}from"./core/tokens.js";import{t as Me}from"../tailwindPreset-D4TYL0kz.js";import{useAnimatedDetails as Ee}from"./hooks/useAnimatedDetails/useAnimatedDetails.js";import{useAnimatedHeight as Le}from"./hooks/useAnimatedHeight/useAnimatedHeight.js";import{useAnimatedHeightBetween as Ae}from"./hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{useAutoAnimatedHeight as xe}from"./hooks/useAnimatedHeight/useAutoAnimateHeight.js";import{useBrowserPreferences as Re}from"./hooks/useBrowserPreferences/useBrowserPreferences.js";import{useIntersectionObserver as Be}from"./hooks/useIntersectionObserver/useIntersectionObserver.js";import{useLocalStorage as Pe}from"./hooks/useLocalStorage/useLocalStorage.js";import{useMutationObserver as we}from"./hooks/useMutationObserver/useMutationObserver.js";import{usePreviousValue as Fe}from"./hooks/usePreviousValue/usePreviousValue.js";import{useProgressiveImg as Ne}from"./hooks/useProgressiveImg/useProgressiveImg.js";import{useScreen as De}from"./hooks/useScreen/useScreen.js";import{useScrollIntoView as Ve}from"./hooks/useScrollIntoView/useScrollIntoView.js";import{useAriaLiveRegion as ye}from"./hooks/useAriaLiveRegion/useAriaLiveRegion.js";import{useClickOutside as Oe}from"./hooks/useClickOutside/useClickOutside.js";import{useFocusOutside as Ge}from"./hooks/useFocusOutside/useFocusOutside.js";import{useElementDimensions as He}from"./hooks/useElementDimensions/useElementDimensions.js";import{useId as We}from"./hooks/useId/useId.js";import{useKeyListener as Ue}from"./hooks/useKeyListener/useKeyListener.js";import{useListNavigation as Ke}from"./hooks/useListNavigation/useListNavigation.js";import{useSwipeGesture as Xe}from"./hooks/useSwipeGesture/useSwipeGesture.js";import{u as _e}from"../index-CWRMnfcx.js";import{formatNumber as ze}from"./utilities/formatters/util/formatNumber.js";import{parseNumber as Qe}from"./utilities/formatters/util/parseNumber.js";import{registerWithFodselsnummerMask as Je,registerWithKontonummerMask as qe,registerWithKortnummerMask as Ye,registerWithMasks as Ze,registerWithTelefonnummerMask as $e}from"./utilities/formatters/util/registerWithMask.js";import{formatAvstand as oa}from"./utilities/formatters/avstand/formatAvstand.js";import{formatBytes as sa}from"./utilities/formatters/bytes/formatBytes.js";import{formatDate as ea}from"./utilities/formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as aa,formatFodselsnummer as ta}from"./utilities/formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as ra,formatOrganisasjonsnummer as na}from"./utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as ia,formatKontonummer as ma}from"./utilities/formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as pa,formatKortnummer as ca}from"./utilities/formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as la,formatTelefonnummer as ua}from"./utilities/formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as da}from"./utilities/formatters/valuta/formatValuta.js";import{getThemeAndDensity as fa}from"./utilities/getThemeAndDensity.js";import{mergeProps as ga}from"./utilities/polymorphism/mergeProps.js";import{mergeRefs as ja}from"./utilities/polymorphism/mergeRefs.js";import{SlotComponent as ba}from"./utilities/polymorphism/SlotComponent.js";import{isValidEpost as Ia}from"./utilities/validators/isValidEpost/isValidEpost.js";import{isValidTelefonnummer as Ta}from"./utilities/validators/isValidTelefonnummer/isValidTelefonnummer.js";import{isValidRegistreringsnummer as ka}from"./utilities/validators/isValidRegistreringsnummer/isValidRegistreringsnummer.js";import{isValidChassisnummer as Ca}from"./utilities/validators/isValidChassisnummer/isValidChassisnummer.js";import{isValidDogId as ha}from"./utilities/validators/isValidDogId/isValidDogId.js";import{isExactLength as Sa}from"./utilities/validators/isExactLength/isExactLength.js";import{isInteger as va}from"./utilities/validators/isInteger/isInteger.js";import{isValidFodselsnummer as Ma}from"./utilities/validators/isValidFodselsnummer/isValidFodselsnummer.js";import{isValidOrganisasjonsnummer as Ea}from"./utilities/validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.js";import{isValidName as La}from"./utilities/validators/isValidName/isValidName.js";import{hasMinimumWords as Aa}from"./utilities/validators/hasMinimumWords/hasMinimumWords.js";import{hasNoIllegalCharacters as xa}from"./utilities/validators/hasNoIllegalCharacters/hasNoIllegalCharacters.js";import{initTabListener as Ra}from"./utilities/tabListener.js";import{getValuePair as Ba}from"./utilities/valuePair.js";export{o as Accordion,s as AccordionItem,G as ArrowDownIcon,y as ArrowHorizontalAnimated,H as ArrowLeftIcon,W as ArrowNorthEastIcon,U as ArrowRightIcon,K as ArrowUpIcon,V as ArrowVerticalAnimated,Es as BaseRadioButton,le as BaseTextArea,ue as BaseTextInput,e as Breadcrumb,a as BreadcrumbItem,t as Button,X as CalendarIcon,m as Card,p as CardImage,_ as CheckIcon,Fo as CheckListItem,f as Checkbox,Mo as CheckboxPanel,z as ChevronDownIcon,Q as ChevronLeftIcon,J as ChevronRightIcon,q as ChevronUpIcon,Y as CloseIcon,g as Combobox,b as CookieConsent,I as CookieConsentProvider,Z as CopyIcon,hs as Countdown,No as CrossListItem,Ns as DataTable,k as DatePicker,R as DescriptionDetail,B as DescriptionList,P as DescriptionTerm,$ as DotsIcon,oo as DragIcon,so as ErrorIcon,ns as ErrorMessage,Bs as ErrorSystemMessage,ne as ErrorTag,N as ExpandSection,w as ExpandablePanel,Ys as ExpandableTableRow,Zs as ExpandableTableRowController,F as Expander,aa as FODSELSNUMMER_REGEX,L as Feedback,Co as FieldGroup,x as Flex,cs as FormErrorMessage,qo as ForsikringLevertAvFremtind,Yo as FraSB1ogDNB,eo as GreenCheckIcon,ao as HamburgerIcon,D as Icon,To as IconButton,ko as Image,c as InfoBlock,d as InfoCard,to as InfoIcon,is as InfoMessage,Ps as InfoSystemMessage,ie as InfoTag,Zo as InnovasjonFraFremtind,ho as InputGroup,ia as KONTONUMMER_REGEX,pa as KORTNUMMER_REGEX,So as Label,Ao as Link,ro as LinkIcon,Ro as LinkList,Bo as List,Do as ListItem,Vo as Loader,Qo as Logo,Jo as LogoStamp,es as Menu,rs as MenuDivider,as as MenuItem,ts as MenuItemCheckbox,no as MinusIcon,ls as Modal,us as ModalActions,ds as ModalBody,fs as ModalCloseButton,gs as ModalContainer,js as ModalHeader,bs as ModalOverlay,Is as ModalTitle,As as NativeSelect,l as NavCard,xo as NavLink,oe as NavTab,se as NavTabs,ra as ORGANISASJONSNUMMER_REGEX,io as OpenInNewIcon,Po as OrderedList,A as PRESETS,ks as Pagination,mo as PenIcon,po as PlusIcon,O as PlusRemoveAnimated,Cs as Popover,he as PopupTip,r as PrimaryButton,Ss as ProgressBar,co as QuestionIcon,vs as RadioButton,Ms as RadioButtonGroup,Eo as RadioPanel,Lo as RadioPanelGroup,lo as RedCrossIcon,Se as ScreenReaderOnly,uo as SearchIcon,n as SecondaryButton,Ls as Select,yo as SkeletonAnimation,Oo as SkeletonButton,Go as SkeletonCheckboxGroup,Ho as SkeletonElement,Wo as SkeletonInput,Uo as SkeletonRadioButtonGroup,Ko as SkeletonTable,Xo as SkeletonTableHeader,_o as SkeletonTableRow,zo as SkeletonTextArea,ba as SlotComponent,fo as SuccessIcon,ms as SuccessMessage,ws as SuccessSystemMessage,me as SuccessTag,xs as SummaryTable,Rs as SummaryTableRow,vo as SupportLabel,la as TELEFONNUMMER_REGEX,te as Tab,ae as TabList,re as TabPanel,Ds as Table,Vs as TableBody,ys as TableCaption,Os as TableCell,Gs as TableColumn,Hs as TableColumnGroup,Ws as TableContextProvider,_s as TableFooter,zs as TableHead,Qs as TableHeader,Js as TablePagination,qs as TableRow,Ks as TableSectionContextProvider,ee as Tabs,pe as Tag,u as TaskCard,$o as TeknologiFraFremtind,i as TertiaryButton,de as TextArea,fe as TextInput,go as ThumbDownIcon,jo as ThumbUpIcon,ge as ToastProvider,Ie as ToggleSlider,be as ToggleSwitch,Te as Tooltip,ke as TooltipContent,Ce as TooltipTrigger,bo as TrashCanIcon,wo as UnorderedList,os as VartEgetForsikringsselskap,ss as VartForsikringsselskap,Io as WarningIcon,ps as WarningMessage,Fs as WarningSystemMessage,ce as WarningTag,oa as formatAvstand,sa as formatBytes,ea as formatDate,ta as formatFodselsnummer,v as formatInput,ma as formatKontonummer,ca as formatKortnummer,ze as formatNumber,na as formatOrganisasjonsnummer,ua as formatTelefonnummer,da as formatValuta,j as getComboboxValuePair,fa as getThemeAndDensity,Ba as getValuePair,Aa as hasMinimumWords,xa as hasNoIllegalCharacters,Ra as initTabListener,M as isBlurTargetOutside,C as isCorrectFormat,Sa as isExactLength,va as isInteger,Ca as isValidChassisnummer,ha as isValidDogId,Ia as isValidEpost,Ma as isValidFodselsnummer,La as isValidName,Ea as isValidOrganisasjonsnummer,ka as isValidRegistreringsnummer,Ta as isValidTelefonnummer,h as isWithinLowerBound,S as isWithinUpperBound,ga as mergeProps,ja as mergeRefs,E as parseDateString,Qe as parseNumber,Je as registerWithFodselsnummerMask,qe as registerWithKontonummerMask,Ye as registerWithKortnummerMask,Ze as registerWithMasks,$e as registerWithTelefonnummerMask,Me as tailwindPreset,ve as tokens,_e as unicode,Ee as useAnimatedDetails,Le as useAnimatedHeight,Ae as useAnimatedHeightBetween,ye as useAriaLiveRegion,xe as useAutoAnimatedHeight,Re as useBrowserPreferences,Oe as useClickOutside,T as useCookieConsent,He as useElementDimensions,Ge as useFocusOutside,We as useId,Be as useIntersectionObserver,Ue as useKeyListener,Ke as useListNavigation,Pe as useLocalStorage,Ts as useModal,we as useMutationObserver,Fe as usePreviousValue,Ne as useProgressiveImg,De as useScreen,Ve as useScrollIntoView,$s as useSortableTableHeader,Xe as useSwipeGesture,Us as useTableContext,Xs as useTableSectionContext,je as useToast};
|
|
1
|
+
import{Accordion as o}from"./components/accordion/Accordion.js";import{AccordionItem as s}from"./components/accordion/AccordionItem.js";import{Breadcrumb as e}from"./components/breadcrumb/Breadcrumb.js";import{BreadcrumbItem as a}from"./components/breadcrumb/BreadcrumbItem.js";import{Button as t,PrimaryButton as r,SecondaryButton as n,TertiaryButton as i}from"./components/button/Button.js";import{Card as m}from"./components/card/Card.js";import{CardImage as p}from"./components/card/CardImage.js";import{InfoBlock as c,NavCard as l}from"./components/card/NavCard.js";import{TaskCard as u}from"./components/card/TaskCard.js";import{InfoCard as d}from"./components/card/InfoCard.js";import{Checkbox as f}from"./components/checkbox/Checkbox.js";import{Combobox as g,getComboboxValuePair as j}from"./components/combobox/Combobox.js";import{CookieConsent as b}from"./components/cookie-consent/CookieConsent.js";import{CookieConsentProvider as I,useCookieConsent as T}from"./components/cookie-consent/CookieConsentContext.js";import{DatePicker as k}from"./components/datepicker/DatePicker.js";import{isCorrectFormat as C,isWithinLowerBound as h,isWithinUpperBound as S}from"./components/datepicker/validation.js";import{formatInput as v,isBlurTargetOutside as M,parseDateString as E}from"./components/datepicker/utils.js";import{Feedback as L}from"./components/feedback/Feedback.js";import{PRESETS as A}from"./components/feedback/presets.js";import{Flex as x}from"./components/flex/Flex.js";import{DescriptionDetail as R,DescriptionList as B,DescriptionTerm as P}from"./components/description-list/DescriptionList.js";import{ExpandablePanel as w}from"./components/expander/ExpandablePanel.js";import{Expander as F}from"./components/expander/Expander.js";import{ExpandSection as N}from"./components/expander/deprecated/ExpandSection.js";import{Icon as D}from"./components/icon/Icon.js";import{ArrowVerticalAnimated as V}from"./components/icon/icons/animated/ArrowVerticalAnimated.js";import{ArrowHorizontalAnimated as y}from"./components/icon/icons/animated/ArrowHorizontalAnimated.js";import{PlusRemoveAnimated as O}from"./components/icon/icons/animated/PlusRemoveAnimated.js";import{ArrowDownIcon as G}from"./components/icon/icons/ArrowDownIcon.js";import{ArrowLeftIcon as H}from"./components/icon/icons/ArrowLeftIcon.js";import{ArrowNorthEastIcon as W}from"./components/icon/icons/ArrowNorthEastIcon.js";import{ArrowRightIcon as U}from"./components/icon/icons/ArrowRightIcon.js";import{ArrowUpIcon as K}from"./components/icon/icons/ArrowUpIcon.js";import{CalendarIcon as X}from"./components/icon/icons/CalendarIcon.js";import{CheckIcon as _}from"./components/icon/icons/CheckIcon.js";import{ChevronDownIcon as z}from"./components/icon/icons/ChevronDownIcon.js";import{ChevronLeftIcon as Q}from"./components/icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as J}from"./components/icon/icons/ChevronRightIcon.js";import{ChevronUpIcon as q}from"./components/icon/icons/ChevronUpIcon.js";import{CloseIcon as Y}from"./components/icon/icons/CloseIcon.js";import{CopyIcon as Z}from"./components/icon/icons/CopyIcon.js";import{DotsIcon as $}from"./components/icon/icons/DotsIcon.js";import{DragIcon as oo}from"./components/icon/icons/DragIcon.js";import{ErrorIcon as so}from"./components/icon/icons/ErrorIcon.js";import{GreenCheckIcon as eo}from"./components/icon/icons/GreenCheckIcon.js";import{HamburgerIcon as ao}from"./components/icon/icons/HamburgerIcon.js";import{InfoIcon as to}from"./components/icon/icons/InfoIcon.js";import{LinkIcon as ro}from"./components/icon/icons/LinkIcon.js";import{MinusIcon as no}from"./components/icon/icons/MinusIcon.js";import{OpenInNewIcon as io}from"./components/icon/icons/OpenInNewIcon.js";import{PenIcon as mo}from"./components/icon/icons/PenIcon.js";import{PlusIcon as po}from"./components/icon/icons/PlusIcon.js";import{QuestionIcon as co}from"./components/icon/icons/QuestionIcon.js";import{RedCrossIcon as lo}from"./components/icon/icons/RedCrossIcon.js";import{SearchIcon as uo}from"./components/icon/icons/SearchIcon.js";import{SuccessIcon as fo}from"./components/icon/icons/SuccessIcon.js";import{ThumbDownIcon as go}from"./components/icon/icons/ThumbDownIcon.js";import{ThumbUpIcon as jo}from"./components/icon/icons/ThumbUpIcon.js";import{TrashCanIcon as bo}from"./components/icon/icons/TrashCanIcon.js";import{WarningIcon as Io}from"./components/icon/icons/WarningIcon.js";import{IconButton as To}from"./components/icon-button/IconButton.js";import{Image as ko}from"./components/image/Image.js";import{FieldGroup as Co}from"./components/input-group/FieldGroup.js";import{InputGroup as ho}from"./components/input-group/InputGroup.js";import{Label as So}from"./components/input-group/Label.js";import{SupportLabel as vo}from"./components/input-group/SupportLabel.js";import{CheckboxPanel as Mo}from"./components/input-panel/CheckboxPanel.js";import{RadioPanel as Eo}from"./components/input-panel/RadioPanel.js";import{RadioPanelGroup as Lo}from"./components/input-panel/RadioPanelGroup.js";import{Link as Ao}from"./components/link/Link.js";import{NavLink as xo}from"./components/link/NavLink.js";import{LinkList as Ro}from"./components/link-list/LinkList.js";import{List as Bo,OrderedList as Po,UnorderedList as wo}from"./components/list/List.js";import{CheckListItem as Fo,CrossListItem as No,ListItem as Do}from"./components/list/ListItem.js";import{Loader as Vo}from"./components/loader/Loader.js";import{SkeletonAnimation as yo}from"./components/loader/skeletons/SkeletonAnimation.js";import{SkeletonButton as Oo}from"./components/loader/skeletons/SkeletonButton.js";import{SkeletonCheckboxGroup as Go}from"./components/loader/skeletons/SkeletonCheckboxGroup.js";import{SkeletonElement as Ho}from"./components/loader/skeletons/SkeletonElement.js";import{SkeletonInput as Wo}from"./components/loader/skeletons/SkeletonInput.js";import{SkeletonRadioButtonGroup as Uo}from"./components/loader/skeletons/SkeletonRadioButtonGroup.js";import{SkeletonTable as Ko,SkeletonTableHeader as Xo,SkeletonTableRow as _o}from"./components/loader/skeletons/SkeletonTable.js";import{SkeletonTextArea as zo}from"./components/loader/skeletons/SkeletonTextArea.js";import{Logo as Qo}from"./components/logo/Logo.js";import{LogoStamp as Jo}from"./components/logo/LogoStamp.js";import{ForsikringLevertAvFremtind as qo}from"./components/logo/text-paths/ForsikringLevertAvFremtind.js";import{FraSB1ogDNB as Yo}from"./components/logo/text-paths/FraSB1ogDNB.js";import{InnovasjonFraFremtind as Zo}from"./components/logo/text-paths/InnovasjonFraFremtind.js";import{TeknologiFraFremtind as $o}from"./components/logo/text-paths/TeknologiFraFremtind.js";import{VartEgetForsikringsselskap as os}from"./components/logo/text-paths/VartEgetForsikringsselskap.js";import{VartForsikringsselskap as ss}from"./components/logo/text-paths/VartForsikringsselskap.js";import{Menu as es}from"./components/menu/Menu.js";import{MenuItem as as}from"./components/menu/MenuItem.js";import{MenuItemCheckbox as ts}from"./components/menu/MenuItemCheckbox.js";import{MenuDivider as rs}from"./components/menu/MenuDivider.js";import{ErrorMessage as ns,InfoMessage as is,SuccessMessage as ms,WarningMessage as ps}from"./components/message/Message.js";import{FormErrorMessage as cs}from"./components/message/FormErrorMessage.js";import{Modal as ls,ModalActions as us,ModalBody as ds,ModalCloseButton as fs,ModalContainer as gs,ModalHeader as js,ModalOverlay as bs,ModalTitle as Is}from"./components/modal/Modal.js";import{useModal as Ts}from"./components/modal/useModal.js";import{Pagination as ks}from"./components/pagination/Pagination.js";import{Popover as Cs}from"./components/popover/Popover.js";import{Countdown as hs}from"./components/progress-bar/Countdown.js";import{ProgressBar as Ss}from"./components/progress-bar/ProgressBar.js";import{RadioButton as vs}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as Ms}from"./components/radio-button/RadioButtonGroup.js";import{BaseRadioButton as Es}from"./components/radio-button/BaseRadioButton.js";import{Select as Ls}from"./components/select/Select.js";import{NativeSelect as As}from"./components/select/NativeSelect.js";import{SummaryTable as xs}from"./components/summary-table/SummaryTable.js";import{SummaryTableRow as Rs}from"./components/summary-table/SummaryTableRow.js";import{ErrorSystemMessage as Bs,InfoSystemMessage as Ps,SuccessSystemMessage as ws,WarningSystemMessage as Fs}from"./components/system-message/SystemMessage.js";import{DataTable as Ns}from"./components/table/DataTable.js";import{Table as Ds}from"./components/table/Table.js";import{TableBody as Vs}from"./components/table/TableBody.js";import{TableCaption as ys}from"./components/table/TableCaption.js";import{TableCell as Os}from"./components/table/TableCell.js";import{TableColumn as Gs}from"./components/table/TableColumn.js";import{TableColumnGroup as Hs}from"./components/table/TableColumnGroup.js";import{TableContextProvider as Ws,useTableContext as Us}from"./components/table/tableContext.js";import{TableSectionContextProvider as Ks,useTableSectionContext as Xs}from"./components/table/tableSectionContext.js";import{TableFooter as _s}from"./components/table/TableFooter.js";import{TableHead as zs}from"./components/table/TableHead.js";import{TableHeader as Qs}from"./components/table/TableHeader.js";import{TablePagination as Js}from"./components/table/TablePagination.js";import{TableRow as qs}from"./components/table/TableRow.js";import{ExpandableTableRow as Ys}from"./components/table/ExpandableTableRow.js";import{ExpandableTableRowController as Zs}from"./components/table/ExpandableTableRowController.js";import{useSortableTableHeader as $s}from"./components/table/utils.js";import{NavTab as oe}from"./components/tabs/NavTab.js";import{NavTabs as se}from"./components/tabs/NavTabs.js";import{Tabs as ee}from"./components/tabs/Tabs.js";import{TabList as ae}from"./components/tabs/TabList.js";import{Tab as te}from"./components/tabs/Tab.js";import{TabPanel as re}from"./components/tabs/TabPanel.js";import{ErrorTag as ne,InfoTag as ie,SuccessTag as me,Tag as pe,WarningTag as ce}from"./components/tag/Tag.js";import{BaseTextArea as le}from"./components/text-input/BaseTextArea.js";import{BaseTextInput as ue}from"./components/text-input/BaseTextInput.js";import{TextArea as de}from"./components/text-input/TextArea.js";import{TextInput as fe}from"./components/text-input/TextInput.js";import{ToastProvider as ge,useToast as je}from"./components/toast/toastContext.js";import{ToggleSwitch as be}from"./components/toggle-switch/ToggleSwitch.js";import{ToggleSlider as Ie}from"./components/toggle-switch/ToggleSlider.js";import{Tooltip as Te}from"./components/tooltip/Tooltip.js";import{TooltipContent as ke}from"./components/tooltip/TooltipContent.js";import{TooltipTrigger as Ce}from"./components/tooltip/TooltipTrigger.js";import{PopupTip as he}from"./components/tooltip/PopupTip.js";import{ScreenReaderOnly as Se}from"./components/ScreenReaderOnly.js";import{default as ve}from"./core/tokens.js";import{default as Me}from"./core/tailwind/tailwindPreset.js";import{useAnimatedDetails as Ee}from"./hooks/useAnimatedDetails/useAnimatedDetails.js";import{useAnimatedHeight as Le}from"./hooks/useAnimatedHeight/useAnimatedHeight.js";import{useAnimatedHeightBetween as Ae}from"./hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{useAutoAnimatedHeight as xe}from"./hooks/useAnimatedHeight/useAutoAnimateHeight.js";import{useBrowserPreferences as Re}from"./hooks/useBrowserPreferences/useBrowserPreferences.js";import{useIntersectionObserver as Be}from"./hooks/useIntersectionObserver/useIntersectionObserver.js";import{useLocalStorage as Pe}from"./hooks/useLocalStorage/useLocalStorage.js";import{useMutationObserver as we}from"./hooks/useMutationObserver/useMutationObserver.js";import{usePreviousValue as Fe}from"./hooks/usePreviousValue/usePreviousValue.js";import{useProgressiveImg as Ne}from"./hooks/useProgressiveImg/useProgressiveImg.js";import{useScreen as De}from"./hooks/useScreen/useScreen.js";import{useScrollIntoView as Ve}from"./hooks/useScrollIntoView/useScrollIntoView.js";import{useAriaLiveRegion as ye}from"./hooks/useAriaLiveRegion/useAriaLiveRegion.js";import{useClickOutside as Oe}from"./hooks/useClickOutside/useClickOutside.js";import{useFocusOutside as Ge}from"./hooks/useFocusOutside/useFocusOutside.js";import{useElementDimensions as He}from"./hooks/useElementDimensions/useElementDimensions.js";import{useId as We}from"./hooks/useId/useId.js";import{useKeyListener as Ue}from"./hooks/useKeyListener/useKeyListener.js";import{useListNavigation as Ke}from"./hooks/useListNavigation/useListNavigation.js";import{useSwipeGesture as Xe}from"./hooks/useSwipeGesture/useSwipeGesture.js";import{u as _e}from"../index-CWRMnfcx.js";import{formatNumber as ze}from"./utilities/formatters/util/formatNumber.js";import{parseNumber as Qe}from"./utilities/formatters/util/parseNumber.js";import{registerWithFodselsnummerMask as Je,registerWithKontonummerMask as qe,registerWithKortnummerMask as Ye,registerWithMasks as Ze,registerWithTelefonnummerMask as $e}from"./utilities/formatters/util/registerWithMask.js";import{formatAvstand as oa}from"./utilities/formatters/avstand/formatAvstand.js";import{formatBytes as sa}from"./utilities/formatters/bytes/formatBytes.js";import{formatDate as ea}from"./utilities/formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as aa,formatFodselsnummer as ta}from"./utilities/formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as ra,formatOrganisasjonsnummer as na}from"./utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as ia,formatKontonummer as ma}from"./utilities/formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as pa,formatKortnummer as ca}from"./utilities/formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as la,formatTelefonnummer as ua}from"./utilities/formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as da}from"./utilities/formatters/valuta/formatValuta.js";import{getThemeAndDensity as fa}from"./utilities/getThemeAndDensity.js";import{mergeProps as ga}from"./utilities/polymorphism/mergeProps.js";import{mergeRefs as ja}from"./utilities/polymorphism/mergeRefs.js";import{SlotComponent as ba}from"./utilities/polymorphism/SlotComponent.js";import{isValidEpost as Ia}from"./utilities/validators/isValidEpost/isValidEpost.js";import{isValidTelefonnummer as Ta}from"./utilities/validators/isValidTelefonnummer/isValidTelefonnummer.js";import{isValidRegistreringsnummer as ka}from"./utilities/validators/isValidRegistreringsnummer/isValidRegistreringsnummer.js";import{isValidChassisnummer as Ca}from"./utilities/validators/isValidChassisnummer/isValidChassisnummer.js";import{isValidDogId as ha}from"./utilities/validators/isValidDogId/isValidDogId.js";import{isExactLength as Sa}from"./utilities/validators/isExactLength/isExactLength.js";import{isInteger as va}from"./utilities/validators/isInteger/isInteger.js";import{isValidFodselsnummer as Ma}from"./utilities/validators/isValidFodselsnummer/isValidFodselsnummer.js";import{isValidOrganisasjonsnummer as Ea}from"./utilities/validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.js";import{isValidName as La}from"./utilities/validators/isValidName/isValidName.js";import{hasMinimumWords as Aa}from"./utilities/validators/hasMinimumWords/hasMinimumWords.js";import{hasNoIllegalCharacters as xa}from"./utilities/validators/hasNoIllegalCharacters/hasNoIllegalCharacters.js";import{initTabListener as Ra}from"./utilities/tabListener.js";import{getValuePair as Ba}from"./utilities/valuePair.js";export{o as Accordion,s as AccordionItem,G as ArrowDownIcon,y as ArrowHorizontalAnimated,H as ArrowLeftIcon,W as ArrowNorthEastIcon,U as ArrowRightIcon,K as ArrowUpIcon,V as ArrowVerticalAnimated,Es as BaseRadioButton,le as BaseTextArea,ue as BaseTextInput,e as Breadcrumb,a as BreadcrumbItem,t as Button,X as CalendarIcon,m as Card,p as CardImage,_ as CheckIcon,Fo as CheckListItem,f as Checkbox,Mo as CheckboxPanel,z as ChevronDownIcon,Q as ChevronLeftIcon,J as ChevronRightIcon,q as ChevronUpIcon,Y as CloseIcon,g as Combobox,b as CookieConsent,I as CookieConsentProvider,Z as CopyIcon,hs as Countdown,No as CrossListItem,Ns as DataTable,k as DatePicker,R as DescriptionDetail,B as DescriptionList,P as DescriptionTerm,$ as DotsIcon,oo as DragIcon,so as ErrorIcon,ns as ErrorMessage,Bs as ErrorSystemMessage,ne as ErrorTag,N as ExpandSection,w as ExpandablePanel,Ys as ExpandableTableRow,Zs as ExpandableTableRowController,F as Expander,aa as FODSELSNUMMER_REGEX,L as Feedback,Co as FieldGroup,x as Flex,cs as FormErrorMessage,qo as ForsikringLevertAvFremtind,Yo as FraSB1ogDNB,eo as GreenCheckIcon,ao as HamburgerIcon,D as Icon,To as IconButton,ko as Image,c as InfoBlock,d as InfoCard,to as InfoIcon,is as InfoMessage,Ps as InfoSystemMessage,ie as InfoTag,Zo as InnovasjonFraFremtind,ho as InputGroup,ia as KONTONUMMER_REGEX,pa as KORTNUMMER_REGEX,So as Label,Ao as Link,ro as LinkIcon,Ro as LinkList,Bo as List,Do as ListItem,Vo as Loader,Qo as Logo,Jo as LogoStamp,es as Menu,rs as MenuDivider,as as MenuItem,ts as MenuItemCheckbox,no as MinusIcon,ls as Modal,us as ModalActions,ds as ModalBody,fs as ModalCloseButton,gs as ModalContainer,js as ModalHeader,bs as ModalOverlay,Is as ModalTitle,As as NativeSelect,l as NavCard,xo as NavLink,oe as NavTab,se as NavTabs,ra as ORGANISASJONSNUMMER_REGEX,io as OpenInNewIcon,Po as OrderedList,A as PRESETS,ks as Pagination,mo as PenIcon,po as PlusIcon,O as PlusRemoveAnimated,Cs as Popover,he as PopupTip,r as PrimaryButton,Ss as ProgressBar,co as QuestionIcon,vs as RadioButton,Ms as RadioButtonGroup,Eo as RadioPanel,Lo as RadioPanelGroup,lo as RedCrossIcon,Se as ScreenReaderOnly,uo as SearchIcon,n as SecondaryButton,Ls as Select,yo as SkeletonAnimation,Oo as SkeletonButton,Go as SkeletonCheckboxGroup,Ho as SkeletonElement,Wo as SkeletonInput,Uo as SkeletonRadioButtonGroup,Ko as SkeletonTable,Xo as SkeletonTableHeader,_o as SkeletonTableRow,zo as SkeletonTextArea,ba as SlotComponent,fo as SuccessIcon,ms as SuccessMessage,ws as SuccessSystemMessage,me as SuccessTag,xs as SummaryTable,Rs as SummaryTableRow,vo as SupportLabel,la as TELEFONNUMMER_REGEX,te as Tab,ae as TabList,re as TabPanel,Ds as Table,Vs as TableBody,ys as TableCaption,Os as TableCell,Gs as TableColumn,Hs as TableColumnGroup,Ws as TableContextProvider,_s as TableFooter,zs as TableHead,Qs as TableHeader,Js as TablePagination,qs as TableRow,Ks as TableSectionContextProvider,ee as Tabs,pe as Tag,u as TaskCard,$o as TeknologiFraFremtind,i as TertiaryButton,de as TextArea,fe as TextInput,go as ThumbDownIcon,jo as ThumbUpIcon,ge as ToastProvider,Ie as ToggleSlider,be as ToggleSwitch,Te as Tooltip,ke as TooltipContent,Ce as TooltipTrigger,bo as TrashCanIcon,wo as UnorderedList,os as VartEgetForsikringsselskap,ss as VartForsikringsselskap,Io as WarningIcon,ps as WarningMessage,Fs as WarningSystemMessage,ce as WarningTag,oa as formatAvstand,sa as formatBytes,ea as formatDate,ta as formatFodselsnummer,v as formatInput,ma as formatKontonummer,ca as formatKortnummer,ze as formatNumber,na as formatOrganisasjonsnummer,ua as formatTelefonnummer,da as formatValuta,j as getComboboxValuePair,fa as getThemeAndDensity,Ba as getValuePair,Aa as hasMinimumWords,xa as hasNoIllegalCharacters,Ra as initTabListener,M as isBlurTargetOutside,C as isCorrectFormat,Sa as isExactLength,va as isInteger,Ca as isValidChassisnummer,ha as isValidDogId,Ia as isValidEpost,Ma as isValidFodselsnummer,La as isValidName,Ea as isValidOrganisasjonsnummer,ka as isValidRegistreringsnummer,Ta as isValidTelefonnummer,h as isWithinLowerBound,S as isWithinUpperBound,ga as mergeProps,ja as mergeRefs,E as parseDateString,Qe as parseNumber,Je as registerWithFodselsnummerMask,qe as registerWithKontonummerMask,Ye as registerWithKortnummerMask,Ze as registerWithMasks,$e as registerWithTelefonnummerMask,Me as tailwindPreset,ve as tokens,_e as unicode,Ee as useAnimatedDetails,Le as useAnimatedHeight,Ae as useAnimatedHeightBetween,ye as useAriaLiveRegion,xe as useAutoAnimatedHeight,Re as useBrowserPreferences,Oe as useClickOutside,T as useCookieConsent,He as useElementDimensions,Ge as useFocusOutside,We as useId,Be as useIntersectionObserver,Ue as useKeyListener,Ke as useListNavigation,Pe as useLocalStorage,Ts as useModal,we as useMutationObserver,Fe as usePreviousValue,Ne as useProgressiveImg,De as useScreen,Ve as useScrollIntoView,$s as useSortableTableHeader,Xe as useSwipeGesture,Us as useTableContext,Xs as useTableSectionContext,je as useToast};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerWithMask.js","sources":["../../../../../src/utilities/formatters/util/registerWithMask.ts"],"sourcesContent":["import type { ChangeEvent, KeyboardEventHandler } from \"react\";\nimport type {\n FieldValues,\n Path,\n PathValue,\n RegisterOptions,\n UseFormRegisterReturn,\n UseFormReturn,\n} from \"react-hook-form\";\nimport { formatDateString } from \"../date/formatDate.js\";\nimport { formatFodselsnummer } from \"../fodselsnummer/formatFodselsnummer.js\";\nimport { formatKontonummer } from \"../kontonummer/formatKontonummer.js\";\nimport { formatKortnummer } from \"../kortnummer/formatKortnummer.js\";\nimport { formatOrganisasjonsnummer } from \"../organisasjonsnummer/formatOrganisasjonsnummer.js\";\nimport { formatTelefonnummer } from \"../telefonnummer/formatTelefonnummer.js\";\nimport { formatNumber } from \"./formatNumber.js\";\n\nconst formatters = {\n date: formatDateString,\n fodselsnummer: formatFodselsnummer,\n kortnummer: formatKortnummer,\n kontonummer: formatKontonummer,\n telefonnummer: formatTelefonnummer,\n number: formatNumber,\n organisasjonsnummer: formatOrganisasjonsnummer,\n};\nexport type Formatter = keyof typeof formatters;\n\nexport type RegisterWithMaskOptions<T extends FieldValues> = Omit<\n RegisterOptions<T>,\n \"setValueAs\"\n>;\n\nconst registerWithMask =\n (formatter: Formatter) =>\n <T extends FieldValues>(\n form: UseFormReturn<T>,\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ) => {\n let onKeyDownCaretPosition = 0;\n let onKeyDownKeyPressed = \"\";\n\n const setValueAs = (value: string) => value.replace(/\\s/g, \"\");\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n options?.onChange?.(event);\n\n // save some values before event.target.value change\n let onChangeCaretPosition = 0;\n const inputLength = event.target.value.length;\n\n // type checking formalities\n if (event.target.selectionStart !== null) {\n onChangeCaretPosition = event.target.selectionStart;\n }\n\n form.setValue(\n name,\n formatters[formatter](event.target.value, {\n partial: true,\n }) as PathValue<T, Path<T>>,\n );\n\n let newPosition: number | null = null;\n\n if ([\"Delete\", \"Backspace\"].includes(onKeyDownKeyPressed)) {\n // handle removing content\n // calculate how much to move the caret, this also accounts for removing sections of text\n const delta = onKeyDownCaretPosition - onChangeCaretPosition;\n\n // calculate new caret position (- because we move backwards)\n newPosition = onKeyDownCaretPosition - delta;\n } else if (onChangeCaretPosition < event.target.value.length) {\n // handle adding content from inside the string\n // calculate how much to move the caret forwards\n const delta = event.target.value.length - inputLength;\n\n // calculate new caret position (+ because we move forwards)\n newPosition = onChangeCaretPosition + delta;\n }\n\n if (newPosition !== null) {\n event.target.setSelectionRange(\n newPosition,\n newPosition,\n undefined,\n );\n }\n };\n\n const registerOptions: RegisterOptions<T, Path<T>> = {\n setValueAs,\n onChange,\n };\n if (options) {\n Object.assign(registerOptions, options);\n }\n const register = form.register(name, registerOptions);\n\n // save the caret position before the change occured\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if ((event.target as HTMLInputElement).selectionStart !== null) {\n onKeyDownCaretPosition = (event.target as HTMLInputElement)\n .selectionStart as number;\n }\n onKeyDownKeyPressed = event.key;\n };\n\n // add onKeyDown event handler to the registered input\n const extra: Record<string, unknown> = {\n onKeyDown,\n };\n\n if (formatter === \"number\") {\n extra.align = \"right\"; // Se https://github.com/fremtind/jokul/pull/2898\n }\n\n return Object.assign(register, extra);\n };\n\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithFodselsnummerMask = registerWithMask(\"fodselsnummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithKortnummerMask = registerWithMask(\"kortnummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithKontonummerMask = registerWithMask(\"kontonummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithTelefonnummerMask = registerWithMask(\"telefonnummer\");\n\n/**\n * Hjelpefunksjon for React Hook Form som lar deg bruke formateringsfunksjonene i denne pakken som inputmasker.\n */\nexport const registerWithMasks = <T extends FieldValues>(\n form: UseFormReturn<T>,\n) => ({\n registerWithFodselsnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"fodselsnummer\")<T>(form, name, options),\n registerWithKortnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"kortnummer\")<T>(form, name, options),\n registerWithKontonummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"kontonummer\")<T>(form, name, options),\n registerWithTelefonnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"telefonnummer\")<T>(form, name, options),\n registerWithOrganisasjonsnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"organisasjonsnummer\")<T>(form, name, options),\n registerWithDateMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"date\")<T>(form, name, options),\n registerWithNumber: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn & { align: \"right\" } =>\n registerWithMask(\"number\")<T>(\n form,\n name,\n options,\n ) as unknown as UseFormRegisterReturn & {\n align: \"right\";\n },\n});\n"],"names":["formatters","date","formatDateString","fodselsnummer","formatFodselsnummer","kortnummer","formatKortnummer","kontonummer","formatKontonummer","telefonnummer","formatTelefonnummer","number","formatNumber","organisasjonsnummer","formatOrganisasjonsnummer","registerWithMask","formatter","form","name","options","onKeyDownCaretPosition","onKeyDownKeyPressed","registerOptions","setValueAs","value","replace","onChange","event","_a","call","onChangeCaretPosition","inputLength","target","length","selectionStart","setValue","partial","newPosition","includes","setSelectionRange","Object","assign","register","extra","onKeyDown","key","align","registerWithFodselsnummerMask","registerWithKortnummerMask","registerWithKontonummerMask","registerWithTelefonnummerMask","registerWithMasks","registerWithOrganisasjonsnummerMask","registerWithDateMask","registerWithNumber"],"mappings":"mfAiBA,MAAMA,EAAa,CACfC,KAAMC,EACNC,cAAeC,EACfC,WAAYC,EACZC,YAAaC,EACbC,cAAeC,EACfC,OAAQC,EACRC,oBAAqBC,GASnBC,EACDC,GACD,CACIC,EACAC,EACAC,KAEIC,IAAAA,EAAyB,EACzBC,EAAsB,GAiD1B,MAAMC,EAA+C,CACjDC,WAhDgBC,GAAkBA,EAAMC,QAAQ,MAAO,IAiDvDC,SAhDcC,UACd,OAAAC,EAAA,MAAAT,OAAAA,EAAAA,EAASO,WAATE,EAAAC,KAAAV,EAAoBQ,GAGpB,IAAIG,EAAwB,EACtBC,MAAAA,EAAcJ,EAAMK,OAAOR,MAAMS,OAGH,OAAhCN,EAAMK,OAAOE,iBACbJ,EAAwBH,EAAMK,OAAOE,gBAGpCjB,EAAAkB,SACDjB,EACAlB,EAAWgB,GAAWW,EAAMK,OAAOR,MAAO,CACtCY,SAAS,KAIjB,IAAIC,EAA6B,KAEjC,GAAI,CAAC,SAAU,aAAaC,SAASjB,GAAsB,CAMvDgB,EAAcjB,GAHAA,EAAyBU,EAIhC,MAAAA,GAAAA,EAAwBH,EAAMK,OAAOR,MAAMS,OAAQ,CAM1DI,EAAcP,GAHAH,EAAMK,OAAOR,MAAMS,OAASF,
|
|
1
|
+
{"version":3,"file":"registerWithMask.js","sources":["../../../../../src/utilities/formatters/util/registerWithMask.ts"],"sourcesContent":["import type { ChangeEvent, KeyboardEventHandler } from \"react\";\nimport type {\n FieldValues,\n Path,\n PathValue,\n RegisterOptions,\n UseFormRegisterReturn,\n UseFormReturn,\n} from \"react-hook-form\";\nimport { formatDateString } from \"../date/formatDate.js\";\nimport { formatFodselsnummer } from \"../fodselsnummer/formatFodselsnummer.js\";\nimport { formatKontonummer } from \"../kontonummer/formatKontonummer.js\";\nimport { formatKortnummer } from \"../kortnummer/formatKortnummer.js\";\nimport { formatOrganisasjonsnummer } from \"../organisasjonsnummer/formatOrganisasjonsnummer.js\";\nimport { formatTelefonnummer } from \"../telefonnummer/formatTelefonnummer.js\";\nimport { formatNumber } from \"./formatNumber.js\";\n\nconst formatters = {\n date: formatDateString,\n fodselsnummer: formatFodselsnummer,\n kortnummer: formatKortnummer,\n kontonummer: formatKontonummer,\n telefonnummer: formatTelefonnummer,\n number: formatNumber,\n organisasjonsnummer: formatOrganisasjonsnummer,\n};\nexport type Formatter = keyof typeof formatters;\n\nexport type RegisterWithMaskOptions<T extends FieldValues> = Omit<\n RegisterOptions<T>,\n \"setValueAs\"\n>;\n\nconst registerWithMask =\n (formatter: Formatter) =>\n <T extends FieldValues>(\n form: UseFormReturn<T>,\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ) => {\n let onKeyDownCaretPosition = 0;\n let onKeyDownKeyPressed = \"\";\n\n const setValueAs = (value: string) => value.replace(/\\s/g, \"\");\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n options?.onChange?.(event);\n\n // save some values before event.target.value change\n let onChangeCaretPosition = 0;\n const inputLength = event.target.value.length;\n\n // type checking formalities\n if (event.target.selectionStart !== null) {\n onChangeCaretPosition = event.target.selectionStart;\n }\n\n form.setValue(\n name,\n formatters[formatter](event.target.value, {\n partial: true,\n }) as PathValue<T, Path<T>>,\n );\n\n let newPosition: number | null = null;\n\n if ([\"Delete\", \"Backspace\"].includes(onKeyDownKeyPressed)) {\n // handle removing content\n // calculate how much to move the caret, this also accounts for removing sections of text\n const delta = onKeyDownCaretPosition - onChangeCaretPosition;\n\n // calculate new caret position (- because we move backwards)\n newPosition = onKeyDownCaretPosition - delta;\n } else if (onChangeCaretPosition < event.target.value.length) {\n // handle adding content from inside the string\n // calculate how much to move the caret forwards\n const delta = event.target.value.length - inputLength;\n\n // calculate new caret position (+ because we move forwards)\n newPosition = onChangeCaretPosition + delta;\n }\n\n if (newPosition !== null) {\n event.target.setSelectionRange(\n newPosition,\n newPosition,\n undefined,\n );\n }\n };\n\n const registerOptions: RegisterOptions<T, Path<T>> = {\n setValueAs,\n onChange,\n };\n if (options) {\n Object.assign(registerOptions, options);\n }\n const register = form.register(name, registerOptions);\n\n // save the caret position before the change occured\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if ((event.target as HTMLInputElement).selectionStart !== null) {\n onKeyDownCaretPosition = (event.target as HTMLInputElement)\n .selectionStart as number;\n }\n onKeyDownKeyPressed = event.key;\n };\n\n // add onKeyDown event handler to the registered input\n const extra: Record<string, unknown> = {\n onKeyDown,\n };\n\n if (formatter === \"number\") {\n extra.align = \"right\"; // Se https://github.com/fremtind/jokul/pull/2898\n }\n\n return Object.assign(register, extra);\n };\n\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithFodselsnummerMask = registerWithMask(\"fodselsnummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithKortnummerMask = registerWithMask(\"kortnummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithKontonummerMask = registerWithMask(\"kontonummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithTelefonnummerMask = registerWithMask(\"telefonnummer\");\n\n/**\n * Hjelpefunksjon for React Hook Form som lar deg bruke formateringsfunksjonene i denne pakken som inputmasker.\n */\nexport const registerWithMasks = <T extends FieldValues>(\n form: UseFormReturn<T>,\n) => ({\n registerWithFodselsnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"fodselsnummer\")<T>(form, name, options),\n registerWithKortnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"kortnummer\")<T>(form, name, options),\n registerWithKontonummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"kontonummer\")<T>(form, name, options),\n registerWithTelefonnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"telefonnummer\")<T>(form, name, options),\n registerWithOrganisasjonsnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"organisasjonsnummer\")<T>(form, name, options),\n registerWithDateMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"date\")<T>(form, name, options),\n registerWithNumber: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn & { align: \"right\" } =>\n registerWithMask(\"number\")<T>(\n form,\n name,\n options,\n ) as unknown as UseFormRegisterReturn & {\n align: \"right\";\n },\n});\n"],"names":["formatters","date","formatDateString","fodselsnummer","formatFodselsnummer","kortnummer","formatKortnummer","kontonummer","formatKontonummer","telefonnummer","formatTelefonnummer","number","formatNumber","organisasjonsnummer","formatOrganisasjonsnummer","registerWithMask","formatter","form","name","options","onKeyDownCaretPosition","onKeyDownKeyPressed","registerOptions","setValueAs","value","replace","onChange","event","_a","call","onChangeCaretPosition","inputLength","target","length","selectionStart","setValue","partial","newPosition","includes","setSelectionRange","Object","assign","register","extra","onKeyDown","key","align","registerWithFodselsnummerMask","registerWithKortnummerMask","registerWithKontonummerMask","registerWithTelefonnummerMask","registerWithMasks","registerWithOrganisasjonsnummerMask","registerWithDateMask","registerWithNumber"],"mappings":"mfAiBA,MAAMA,EAAa,CACfC,KAAMC,EACNC,cAAeC,EACfC,WAAYC,EACZC,YAAaC,EACbC,cAAeC,EACfC,OAAQC,EACRC,oBAAqBC,GASnBC,EACDC,GACD,CACIC,EACAC,EACAC,KAEIC,IAAAA,EAAyB,EACzBC,EAAsB,GAiD1B,MAAMC,EAA+C,CACjDC,WAhDgBC,GAAkBA,EAAMC,QAAQ,MAAO,IAiDvDC,SAhDcC,UACd,OAAAC,EAAA,MAAAT,OAAAA,EAAAA,EAASO,WAATE,EAAAC,KAAAV,EAAoBQ,GAGpB,IAAIG,EAAwB,EACtBC,MAAAA,EAAcJ,EAAMK,OAAOR,MAAMS,OAGH,OAAhCN,EAAMK,OAAOE,iBACbJ,EAAwBH,EAAMK,OAAOE,gBAGpCjB,EAAAkB,SACDjB,EACAlB,EAAWgB,GAAWW,EAAMK,OAAOR,MAAO,CACtCY,SAAS,KAIjB,IAAIC,EAA6B,KAEjC,GAAI,CAAC,SAAU,aAAaC,SAASjB,GAAsB,CAMvDgB,EAAcjB,GAHAA,EAAyBU,EAIhC,MAAAA,GAAAA,EAAwBH,EAAMK,OAAOR,MAAMS,OAAQ,CAM1DI,EAAcP,GAHAH,EAAMK,OAAOR,MAAMS,OAASF,EAI9C,CAEoB,OAAhBM,GACAV,EAAMK,OAAOO,kBACTF,EACAA,OACA,EAAA,GASRlB,GACOqB,OAAAC,OAAOnB,EAAiBH,GAEnC,MAAMuB,EAAWzB,EAAKyB,SAASxB,EAAMI,GAY/BqB,EAAiC,CACnCC,UAVuDjB,IACG,OAArDA,EAAMK,OAA4BE,iBACnCd,EAA0BO,EAAMK,OAC3BE,gBAETb,EAAsBM,EAAMkB,GAAA,GAQ5B7B,MAAc,WAAdA,IACA2B,EAAMG,MAAQ,SAGXN,OAAOC,OAAOC,EAAUC,EAAK,EAI/BI,EAAgChC,EAAiB,iBAEjDiC,EAA6BjC,EAAiB,cAE9CkC,EAA8BlC,EAAiB,eAE/CmC,EAAgCnC,EAAiB,iBAKjDoC,EACTlC,IACE,CACF8B,8BAA+B,CAC3B7B,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD6B,2BAA4B,CACxB9B,EACAC,IAEAJ,EAAiB,aAAjBA,CAAkCE,EAAMC,EAAMC,GAClD8B,4BAA6B,CACzB/B,EACAC,IAEAJ,EAAiB,cAAjBA,CAAmCE,EAAMC,EAAMC,GACnD+B,8BAA+B,CAC3BhC,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrDiC,oCAAqC,CACjClC,EACAC,IAEAJ,EAAiB,sBAAjBA,CAA2CE,EAAMC,EAAMC,GAC3DkC,qBAAsB,CAClBnC,EACAC,IAEAJ,EAAiB,OAAjBA,CAA4BE,EAAMC,EAAMC,GAC5CmC,mBAAoB,CAChBpC,EACAC,IAEAJ,EAAiB,SAAjBA,CACIE,EACAC,EACAC"}
|