@fremtind/jokul 0.71.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -37
- package/build/build-stats.html +1 -1
- package/build/cjs/components/autosuggest/BaseAutosuggest.cjs +1 -1
- package/build/cjs/components/autosuggest/BaseAutosuggest.cjs.map +1 -1
- package/build/cjs/components/autosuggest/Menu.cjs +1 -1
- package/build/cjs/components/autosuggest/Menu.cjs.map +1 -1
- package/build/cjs/components/button/Button.cjs +1 -1
- package/build/cjs/components/button/Button.cjs.map +1 -1
- package/build/cjs/components/card/index.cjs +1 -1
- package/build/cjs/components/card/index.d.cts +1 -4
- package/build/cjs/components/card/types.cjs +1 -1
- package/build/cjs/components/card/types.cjs.map +1 -1
- package/build/cjs/components/card/types.d.cts +0 -51
- package/build/cjs/components/checkbox-panel/CheckboxPanel.cjs +1 -1
- package/build/cjs/components/checkbox-panel/CheckboxPanel.cjs.map +1 -1
- package/build/cjs/components/combobox/Combobox.cjs +1 -1
- package/build/cjs/components/combobox/Combobox.cjs.map +1 -1
- package/build/cjs/components/combobox/stories/Combobox.stories.cjs +1 -1
- package/build/cjs/components/combobox/stories/Combobox.stories.cjs.map +1 -1
- package/build/cjs/components/combobox/stories/Combobox.stories.d.cts +1 -0
- package/build/cjs/components/cookie-consent/CookieConsent.cjs +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
- package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
- package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
- package/build/cjs/components/datepicker/internal/Calendar.cjs +1 -1
- package/build/cjs/components/datepicker/internal/Calendar.cjs.map +1 -1
- package/build/cjs/components/datepicker/internal/utils.cjs +1 -1
- package/build/cjs/components/datepicker/internal/utils.cjs.map +1 -1
- package/build/cjs/components/datepicker/stories/Datepicker.stories.cjs +1 -1
- package/build/cjs/components/datepicker/stories/Datepicker.stories.cjs.map +1 -1
- package/build/cjs/components/datepicker/stories/Datepicker.stories.d.cts +13 -0
- package/build/cjs/components/description-list/stories/DescriptionList.stories.cjs +1 -1
- package/build/cjs/components/description-list/stories/DescriptionList.stories.cjs.map +1 -1
- package/build/cjs/components/expander/ExpandablePanel.cjs +1 -1
- package/build/cjs/components/expander/ExpandablePanel.cjs.map +1 -1
- package/build/cjs/components/expander/ExpandablePanelContent.cjs +1 -1
- package/build/cjs/components/expander/ExpandablePanelContent.cjs.map +1 -1
- package/build/cjs/components/expander/Expander.cjs +1 -1
- package/build/cjs/components/expander/Expander.cjs.map +1 -1
- package/build/cjs/components/expander/index.cjs +1 -1
- package/build/cjs/components/expander/index.d.cts +0 -1
- package/build/cjs/components/expander/stories/{ExpanderPanel.stories.cjs → ExpandablePanel.stories.cjs} +1 -1
- package/build/cjs/components/expander/stories/ExpandablePanel.stories.cjs.map +1 -0
- package/build/cjs/components/feedback/followup/Followup.cjs +1 -1
- package/build/cjs/components/feedback/followup/Followup.cjs.map +1 -1
- package/build/cjs/components/feedback/followup/useFollowup.cjs +1 -1
- package/build/cjs/components/feedback/followup/useFollowup.cjs.map +1 -1
- package/build/cjs/components/feedback/main-question/MainQuestion.cjs +1 -1
- package/build/cjs/components/feedback/main-question/MainQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/main-question/useMainQuestion.cjs +1 -1
- package/build/cjs/components/feedback/main-question/useMainQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/AddonQuestion.cjs +1 -1
- package/build/cjs/components/feedback/questions/AddonQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/CheckboxQuestion.cjs +1 -1
- package/build/cjs/components/feedback/questions/CheckboxQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/ContactQuestion.cjs +1 -1
- package/build/cjs/components/feedback/questions/ContactQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/RadioQuestion.cjs +1 -1
- package/build/cjs/components/feedback/questions/RadioQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/SmileyQuestion.cjs +1 -1
- package/build/cjs/components/feedback/questions/SmileyQuestion.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/TextQuestion.cjs +1 -1
- package/build/cjs/components/feedback/questions/TextQuestion.cjs.map +1 -1
- package/build/cjs/components/file/File.cjs.map +1 -1
- package/build/cjs/components/file/stories/File.stories.cjs.map +1 -1
- package/build/cjs/components/file/stories/File.stories.d.cts +1 -1
- package/build/cjs/components/file-input/FileInput.cjs.map +1 -1
- package/build/cjs/components/file-input/index.d.cts +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/validateFileInputFiles.cjs +1 -1
- package/build/cjs/components/file-input/internal/validateFileInputFiles.cjs.map +1 -1
- package/build/cjs/components/file-input/stories/FileInput.stories.cjs.map +1 -1
- package/build/cjs/components/icon/stories/Icons.stories.cjs +1 -1
- package/build/cjs/components/image/useImageLoadingStatus.cjs +1 -1
- package/build/cjs/components/image/useImageLoadingStatus.cjs.map +1 -1
- package/build/cjs/components/input-group/InputGroup.cjs +1 -1
- package/build/cjs/components/input-group/InputGroup.cjs.map +1 -1
- package/build/cjs/components/input-group/stories/FieldGroup.stories.cjs +1 -1
- package/build/cjs/components/link/stories/Link.stories.cjs +1 -1
- package/build/cjs/components/link/stories/Link.stories.cjs.map +1 -1
- package/build/cjs/components/menu/Menu.cjs +1 -1
- package/build/cjs/components/menu/Menu.cjs.map +1 -1
- package/build/cjs/components/menu/MenuItemCheckbox.cjs +1 -1
- package/build/cjs/components/menu/MenuItemCheckbox.cjs.map +1 -1
- package/build/cjs/components/message/Message.cjs +1 -1
- package/build/cjs/components/message/Message.cjs.map +1 -1
- package/build/cjs/components/modal/stories/ModalCloseButton.stories.d.cts +1 -1
- package/build/cjs/components/modal/stories/ModalOverlay.stories.cjs +1 -1
- package/build/cjs/components/modal/stories/ModalOverlay.stories.cjs.map +1 -1
- package/build/cjs/components/popover/Popover.cjs +1 -1
- package/build/cjs/components/popover/Popover.cjs.map +1 -1
- package/build/cjs/components/radio-panel/RadioPanel.cjs +1 -1
- package/build/cjs/components/radio-panel/RadioPanel.cjs.map +1 -1
- package/build/cjs/components/screen-reader-only/ScreenReaderOnly.cjs.map +1 -0
- package/build/cjs/components/screen-reader-only/ScreenReaderOnly.d.cts +3 -0
- package/build/cjs/components/screen-reader-only/index.cjs +2 -0
- package/build/cjs/components/screen-reader-only/index.d.cts +2 -0
- package/build/cjs/components/screen-reader-only/types.d.cts +4 -0
- package/build/cjs/components/select/Select.cjs +1 -1
- package/build/cjs/components/select/Select.cjs.map +1 -1
- package/build/cjs/components/select/select-utils.cjs +1 -1
- package/build/cjs/components/select/select-utils.cjs.map +1 -1
- package/build/cjs/components/system-message/SystemMessage.cjs +1 -1
- package/build/cjs/components/system-message/SystemMessage.cjs.map +1 -1
- package/build/cjs/components/table/TableHeader.cjs +1 -1
- package/build/cjs/components/table/TableHeader.cjs.map +1 -1
- package/build/cjs/components/table/TableRow.cjs +1 -1
- package/build/cjs/components/table/TableRow.cjs.map +1 -1
- package/build/cjs/components/table/stories/data.cjs +2 -0
- package/build/cjs/components/table/stories/data.cjs.map +1 -0
- package/build/cjs/components/table/stories/data.d.cts +8 -0
- package/build/cjs/components/table/stories/table.stories.cjs +1 -1
- package/build/cjs/components/table/stories/table.stories.cjs.map +1 -1
- package/build/cjs/components/table/stories/table.stories.d.cts +10 -1
- package/build/cjs/components/table/stories/tableCollapsing.stories.cjs +2 -0
- package/build/cjs/components/table/stories/tableCollapsing.stories.cjs.map +1 -0
- package/build/cjs/components/table/stories/tableCollapsing.stories.d.cts +16 -0
- package/build/cjs/components/table/stories/tableComplex.stories.cjs +2 -0
- package/build/cjs/components/table/stories/tableComplex.stories.cjs.map +1 -0
- package/build/cjs/components/table/stories/tableComplex.stories.d.cts +21 -0
- package/build/cjs/components/table/stories/tableFiltering.stories.cjs +2 -0
- package/build/cjs/components/table/stories/tableFiltering.stories.cjs.map +1 -0
- package/build/cjs/components/table/stories/tableFiltering.stories.d.cts +21 -0
- package/build/cjs/components/table/stories/tablePagination.stories.cjs +2 -0
- package/build/cjs/components/table/stories/tablePagination.stories.cjs.map +1 -0
- package/build/cjs/components/{accordion/stories/Accordion.stories.d.cts → table/stories/tablePagination.stories.d.cts} +2 -2
- package/build/cjs/components/tabs/NavTab.cjs +1 -1
- package/build/cjs/components/tabs/NavTab.cjs.map +1 -1
- package/build/cjs/components/tabs/NavTabs.cjs +1 -1
- package/build/cjs/components/tabs/NavTabs.cjs.map +1 -1
- package/build/cjs/components/tabs/TabList.cjs +1 -1
- package/build/cjs/components/tabs/TabList.cjs.map +1 -1
- package/build/cjs/components/text-area/BaseTextArea.cjs +1 -1
- package/build/cjs/components/text-area/BaseTextArea.cjs.map +1 -1
- package/build/cjs/components/toast/Toast.cjs +1 -1
- package/build/cjs/components/toast/Toast.cjs.map +1 -1
- package/build/cjs/components/toast/toastContext.cjs +1 -1
- package/build/cjs/components/toast/toastContext.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSwitch.cjs +1 -1
- package/build/cjs/components/toggle-switch/ToggleSwitch.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/usePillStyles.cjs +1 -1
- package/build/cjs/components/toggle-switch/usePillStyles.cjs.map +1 -1
- package/build/cjs/components/tooltip/PopupTip.cjs +1 -1
- package/build/cjs/components/tooltip/PopupTip.cjs.map +1 -1
- package/build/cjs/components/tooltip/Tooltip.cjs +1 -1
- package/build/cjs/components/tooltip/Tooltip.cjs.map +1 -1
- package/build/cjs/components/tooltip/TooltipTrigger.cjs +1 -1
- package/build/cjs/components/tooltip/TooltipTrigger.cjs.map +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeight.cjs +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeight.cjs.map +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs.map +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.cjs +1 -1
- package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.cjs.map +1 -1
- package/build/cjs/hooks/useAriaLiveRegion/useAriaLiveRegion.cjs +1 -1
- package/build/cjs/hooks/useAriaLiveRegion/useAriaLiveRegion.cjs.map +1 -1
- package/build/cjs/hooks/useAriaLiveRegion/useAriaLiveRegion.d.cts +1 -1
- package/build/cjs/hooks/useClickOutside/useClickOutside.cjs +1 -1
- package/build/cjs/hooks/useClickOutside/useClickOutside.cjs.map +1 -1
- package/build/cjs/hooks/useElementDimensions/useElementDimensions.cjs +1 -1
- package/build/cjs/hooks/useElementDimensions/useElementDimensions.cjs.map +1 -1
- package/build/cjs/hooks/useFocusOutside/useFocusOutside.cjs +1 -1
- package/build/cjs/hooks/useFocusOutside/useFocusOutside.cjs.map +1 -1
- package/build/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs +1 -1
- package/build/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs.map +1 -1
- package/build/cjs/hooks/useKeyListener/useKeyListener.cjs +1 -1
- package/build/cjs/hooks/useKeyListener/useKeyListener.cjs.map +1 -1
- package/build/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs +1 -1
- package/build/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs.map +1 -1
- package/build/cjs/hooks/useSwipeGesture/useSwipeGesture.cjs +1 -1
- package/build/cjs/hooks/useSwipeGesture/useSwipeGesture.cjs.map +1 -1
- package/build/cjs/index.cjs +1 -1
- package/build/cjs/index.d.cts +0 -1
- package/build/cjs/utilities/formatters/date/formatDate.cjs +1 -1
- package/build/cjs/utilities/formatters/date/formatDate.cjs.map +1 -1
- package/build/cjs/utilities/formatters/fodselsnummer/formatFodselsnummer.cjs +1 -1
- package/build/cjs/utilities/formatters/fodselsnummer/formatFodselsnummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/kontonummer/formatKontonummer.cjs +1 -1
- package/build/cjs/utilities/formatters/kontonummer/formatKontonummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/kortnummer/formatKortnummer.cjs +1 -1
- package/build/cjs/utilities/formatters/kortnummer/formatKortnummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs +1 -1
- package/build/cjs/utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/telefonnummer/formatTelefonnummer.cjs +1 -1
- package/build/cjs/utilities/formatters/telefonnummer/formatTelefonnummer.cjs.map +1 -1
- package/build/cjs/utilities/formatters/util/registerWithMask.cjs +1 -1
- package/build/cjs/utilities/formatters/util/registerWithMask.cjs.map +1 -1
- package/build/cjs/utilities/formatters/valuta/formatValuta.cjs +1 -1
- package/build/cjs/utilities/formatters/valuta/formatValuta.cjs.map +1 -1
- package/build/cjs/utilities/tabListener.cjs +1 -1
- package/build/cjs/utilities/tabListener.cjs.map +1 -1
- package/build/cjs/utilities/validators/hasMinimumWords/hasMinimumWords.cjs +1 -1
- package/build/cjs/utilities/validators/hasMinimumWords/hasMinimumWords.cjs.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/Menu.js +1 -1
- package/build/es/components/autosuggest/Menu.js.map +1 -1
- package/build/es/components/button/Button.js +1 -1
- package/build/es/components/button/Button.js.map +1 -1
- package/build/es/components/card/index.d.ts +1 -4
- package/build/es/components/card/index.js +1 -1
- package/build/es/components/card/types.d.ts +0 -51
- package/build/es/components/card/types.js +1 -1
- package/build/es/components/card/types.js.map +1 -1
- package/build/es/components/checkbox-panel/CheckboxPanel.js +1 -1
- package/build/es/components/checkbox-panel/CheckboxPanel.js.map +1 -1
- package/build/es/components/combobox/Combobox.js +1 -1
- package/build/es/components/combobox/Combobox.js.map +1 -1
- package/build/es/components/combobox/stories/Combobox.stories.d.ts +1 -0
- package/build/es/components/combobox/stories/Combobox.stories.js +1 -1
- package/build/es/components/combobox/stories/Combobox.stories.js.map +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
- package/build/es/components/datepicker/DatePicker.js +1 -1
- package/build/es/components/datepicker/DatePicker.js.map +1 -1
- package/build/es/components/datepicker/internal/Calendar.js +1 -1
- package/build/es/components/datepicker/internal/Calendar.js.map +1 -1
- package/build/es/components/datepicker/internal/utils.js +1 -1
- package/build/es/components/datepicker/internal/utils.js.map +1 -1
- package/build/es/components/datepicker/stories/Datepicker.stories.d.ts +13 -0
- package/build/es/components/datepicker/stories/Datepicker.stories.js +1 -1
- package/build/es/components/datepicker/stories/Datepicker.stories.js.map +1 -1
- package/build/es/components/description-list/stories/DescriptionList.stories.js +1 -1
- package/build/es/components/description-list/stories/DescriptionList.stories.js.map +1 -1
- package/build/es/components/expander/ExpandablePanel.js +1 -1
- package/build/es/components/expander/ExpandablePanel.js.map +1 -1
- package/build/es/components/expander/ExpandablePanelContent.js +1 -1
- package/build/es/components/expander/ExpandablePanelContent.js.map +1 -1
- package/build/es/components/expander/Expander.js +1 -1
- package/build/es/components/expander/Expander.js.map +1 -1
- package/build/es/components/expander/index.d.ts +0 -1
- package/build/es/components/expander/index.js +1 -1
- package/build/es/components/expander/stories/{ExpanderPanel.stories.js → ExpandablePanel.stories.js} +1 -1
- package/build/es/components/expander/stories/ExpandablePanel.stories.js.map +1 -0
- package/build/es/components/feedback/followup/Followup.js +1 -1
- package/build/es/components/feedback/followup/Followup.js.map +1 -1
- package/build/es/components/feedback/followup/useFollowup.js +1 -1
- package/build/es/components/feedback/followup/useFollowup.js.map +1 -1
- package/build/es/components/feedback/main-question/MainQuestion.js +1 -1
- package/build/es/components/feedback/main-question/MainQuestion.js.map +1 -1
- package/build/es/components/feedback/main-question/useMainQuestion.js +1 -1
- package/build/es/components/feedback/main-question/useMainQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/AddonQuestion.js +1 -1
- package/build/es/components/feedback/questions/AddonQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/CheckboxQuestion.js +1 -1
- package/build/es/components/feedback/questions/CheckboxQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/ContactQuestion.js +1 -1
- package/build/es/components/feedback/questions/ContactQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/RadioQuestion.js +1 -1
- package/build/es/components/feedback/questions/RadioQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/SmileyQuestion.js +1 -1
- package/build/es/components/feedback/questions/SmileyQuestion.js.map +1 -1
- package/build/es/components/feedback/questions/TextQuestion.js +1 -1
- package/build/es/components/feedback/questions/TextQuestion.js.map +1 -1
- package/build/es/components/file/File.js.map +1 -1
- package/build/es/components/file/stories/File.stories.d.ts +1 -1
- package/build/es/components/file/stories/File.stories.js.map +1 -1
- package/build/es/components/file-input/FileInput.js.map +1 -1
- package/build/es/components/file-input/index.d.ts +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/file-input/internal/fileInputContext.js.map +1 -1
- package/build/es/components/file-input/internal/validateFileInputFiles.js +1 -1
- package/build/es/components/file-input/internal/validateFileInputFiles.js.map +1 -1
- package/build/es/components/file-input/stories/FileInput.stories.js.map +1 -1
- package/build/es/components/icon/stories/Icons.stories.js +1 -1
- package/build/es/components/image/useImageLoadingStatus.js +1 -1
- package/build/es/components/image/useImageLoadingStatus.js.map +1 -1
- package/build/es/components/input-group/InputGroup.js +1 -1
- package/build/es/components/input-group/InputGroup.js.map +1 -1
- package/build/es/components/link/stories/Link.stories.js +1 -1
- package/build/es/components/link/stories/Link.stories.js.map +1 -1
- package/build/es/components/loader/stories/Skeleton.stories.js +1 -1
- package/build/es/components/menu/Menu.js +1 -1
- package/build/es/components/menu/Menu.js.map +1 -1
- package/build/es/components/menu/MenuItemCheckbox.js +1 -1
- package/build/es/components/menu/MenuItemCheckbox.js.map +1 -1
- package/build/es/components/message/Message.js +1 -1
- package/build/es/components/message/Message.js.map +1 -1
- package/build/es/components/modal/stories/ModalCloseButton.stories.d.ts +1 -1
- package/build/es/components/modal/stories/ModalOverlay.stories.js +1 -1
- package/build/es/components/modal/stories/ModalOverlay.stories.js.map +1 -1
- package/build/es/components/popover/Popover.js +1 -1
- package/build/es/components/popover/Popover.js.map +1 -1
- package/build/es/components/radio-panel/RadioPanel.js +1 -1
- package/build/es/components/radio-panel/RadioPanel.js.map +1 -1
- package/build/es/components/screen-reader-only/ScreenReaderOnly.d.ts +3 -0
- package/build/es/components/screen-reader-only/ScreenReaderOnly.js.map +1 -0
- package/build/es/components/screen-reader-only/index.d.ts +2 -0
- package/build/es/components/screen-reader-only/index.js +2 -0
- package/build/es/components/screen-reader-only/types.d.ts +4 -0
- package/build/es/components/select/Select.js +1 -1
- package/build/es/components/select/Select.js.map +1 -1
- package/build/es/components/select/select-utils.js +1 -1
- package/build/es/components/select/select-utils.js.map +1 -1
- package/build/es/components/system-message/SystemMessage.js +1 -1
- package/build/es/components/system-message/SystemMessage.js.map +1 -1
- package/build/es/components/table/TableHeader.js +1 -1
- package/build/es/components/table/TableHeader.js.map +1 -1
- package/build/es/components/table/TableRow.js +1 -1
- package/build/es/components/table/TableRow.js.map +1 -1
- package/build/es/components/table/stories/data.d.ts +8 -0
- package/build/es/components/table/stories/data.js +2 -0
- package/build/es/components/table/stories/data.js.map +1 -0
- package/build/es/components/table/stories/table.stories.d.ts +10 -1
- package/build/es/components/table/stories/table.stories.js +1 -1
- package/build/es/components/table/stories/table.stories.js.map +1 -1
- package/build/es/components/table/stories/tableCollapsing.stories.d.ts +16 -0
- package/build/es/components/table/stories/tableCollapsing.stories.js +2 -0
- package/build/es/components/table/stories/tableCollapsing.stories.js.map +1 -0
- package/build/es/components/table/stories/tableComplex.stories.d.ts +21 -0
- package/build/es/components/table/stories/tableComplex.stories.js +2 -0
- package/build/es/components/table/stories/tableComplex.stories.js.map +1 -0
- package/build/es/components/table/stories/tableFiltering.stories.d.ts +21 -0
- package/build/es/components/table/stories/tableFiltering.stories.js +2 -0
- package/build/es/components/table/stories/tableFiltering.stories.js.map +1 -0
- package/build/{cjs/components/accordion/stories/AccordionItem.stories.d.cts → es/components/table/stories/tablePagination.stories.d.ts} +2 -2
- package/build/es/components/table/stories/tablePagination.stories.js +2 -0
- package/build/es/components/table/stories/tablePagination.stories.js.map +1 -0
- package/build/es/components/tabs/NavTab.js +1 -1
- package/build/es/components/tabs/NavTab.js.map +1 -1
- package/build/es/components/tabs/NavTabs.js +1 -1
- package/build/es/components/tabs/NavTabs.js.map +1 -1
- package/build/es/components/tabs/TabList.js +1 -1
- package/build/es/components/tabs/TabList.js.map +1 -1
- package/build/es/components/text-area/BaseTextArea.js +1 -1
- package/build/es/components/text-area/BaseTextArea.js.map +1 -1
- package/build/es/components/toast/Toast.js +1 -1
- package/build/es/components/toast/Toast.js.map +1 -1
- package/build/es/components/toast/toastContext.js +1 -1
- package/build/es/components/toast/toastContext.js.map +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.js +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.js.map +1 -1
- package/build/es/components/toggle-switch/usePillStyles.js +1 -1
- package/build/es/components/toggle-switch/usePillStyles.js.map +1 -1
- package/build/es/components/tooltip/PopupTip.js +1 -1
- package/build/es/components/tooltip/PopupTip.js.map +1 -1
- package/build/es/components/tooltip/Tooltip.js +1 -1
- package/build/es/components/tooltip/Tooltip.js.map +1 -1
- package/build/es/components/tooltip/TooltipTrigger.js +1 -1
- package/build/es/components/tooltip/TooltipTrigger.js.map +1 -1
- package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js +1 -1
- package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js.map +1 -1
- package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js +1 -1
- package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js.map +1 -1
- package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js +1 -1
- package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js.map +1 -1
- package/build/es/hooks/useAriaLiveRegion/useAriaLiveRegion.d.ts +1 -1
- package/build/es/hooks/useAriaLiveRegion/useAriaLiveRegion.js +1 -1
- package/build/es/hooks/useAriaLiveRegion/useAriaLiveRegion.js.map +1 -1
- package/build/es/hooks/useClickOutside/useClickOutside.js +1 -1
- package/build/es/hooks/useClickOutside/useClickOutside.js.map +1 -1
- package/build/es/hooks/useElementDimensions/useElementDimensions.js +1 -1
- package/build/es/hooks/useElementDimensions/useElementDimensions.js.map +1 -1
- package/build/es/hooks/useFocusOutside/useFocusOutside.js +1 -1
- package/build/es/hooks/useFocusOutside/useFocusOutside.js.map +1 -1
- package/build/es/hooks/useIntersectionObserver/useIntersectionObserver.js +1 -1
- package/build/es/hooks/useIntersectionObserver/useIntersectionObserver.js.map +1 -1
- package/build/es/hooks/useKeyListener/useKeyListener.js +1 -1
- package/build/es/hooks/useKeyListener/useKeyListener.js.map +1 -1
- package/build/es/hooks/useScrollIntoView/useScrollIntoView.js +1 -1
- package/build/es/hooks/useScrollIntoView/useScrollIntoView.js.map +1 -1
- package/build/es/hooks/useSwipeGesture/useSwipeGesture.js +1 -1
- package/build/es/hooks/useSwipeGesture/useSwipeGesture.js.map +1 -1
- package/build/es/index.d.ts +0 -1
- package/build/es/index.js +1 -1
- package/build/es/utilities/formatters/date/formatDate.js +1 -1
- package/build/es/utilities/formatters/date/formatDate.js.map +1 -1
- package/build/es/utilities/formatters/fodselsnummer/formatFodselsnummer.js +1 -1
- package/build/es/utilities/formatters/fodselsnummer/formatFodselsnummer.js.map +1 -1
- package/build/es/utilities/formatters/kontonummer/formatKontonummer.js +1 -1
- package/build/es/utilities/formatters/kontonummer/formatKontonummer.js.map +1 -1
- package/build/es/utilities/formatters/kortnummer/formatKortnummer.js +1 -1
- package/build/es/utilities/formatters/kortnummer/formatKortnummer.js.map +1 -1
- package/build/es/utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.js +1 -1
- package/build/es/utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.js.map +1 -1
- package/build/es/utilities/formatters/telefonnummer/formatTelefonnummer.js +1 -1
- package/build/es/utilities/formatters/telefonnummer/formatTelefonnummer.js.map +1 -1
- package/build/es/utilities/formatters/util/registerWithMask.js +1 -1
- package/build/es/utilities/formatters/util/registerWithMask.js.map +1 -1
- package/build/es/utilities/formatters/valuta/formatValuta.js +1 -1
- package/build/es/utilities/formatters/valuta/formatValuta.js.map +1 -1
- package/build/es/utilities/tabListener.js +1 -1
- package/build/es/utilities/tabListener.js.map +1 -1
- package/build/es/utilities/validators/hasMinimumWords/hasMinimumWords.js +1 -1
- package/build/es/utilities/validators/hasMinimumWords/hasMinimumWords.js.map +1 -1
- package/build/jokul.css +1 -1
- package/build/paginated-table-data-VQZB3_Aj.cjs +2 -0
- package/build/paginated-table-data-VQZB3_Aj.cjs.map +1 -0
- package/build/paginated-table-data-ZMeh4d0Y.js +2 -0
- package/build/paginated-table-data-ZMeh4d0Y.js.map +1 -0
- package/package.json +61 -81
- package/styles/components/autosuggest/autosuggest.scss +4 -4
- package/styles/components/card/card.css +0 -248
- package/styles/components/card/card.min.css +1 -1
- package/styles/components/card/card.scss +0 -3
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/chip/chip.css +9 -1
- package/styles/components/chip/chip.min.css +1 -1
- package/styles/components/chip/chip.scss +8 -1
- package/styles/components/combobox/combobox.css +17 -19
- package/styles/components/combobox/combobox.min.css +1 -1
- package/styles/components/combobox/combobox.scss +18 -18
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/datepicker/_index.scss +1 -0
- package/styles/components/description-list/description-list.scss +7 -7
- package/styles/components/expander/_index.scss +0 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/feedback/feedback.scss +4 -3
- package/styles/components/file-input/file-input.css +13 -14
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/_labels.scss +21 -21
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/link/link.css +2 -3
- package/styles/components/link/link.min.css +1 -1
- package/styles/components/link/link.scss +3 -2
- 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/loader/skeleton-loader.scss +10 -10
- package/styles/components/menu/menu.css +5 -5
- package/styles/components/menu/menu.min.css +1 -1
- package/styles/components/menu/menu.scss +3 -3
- 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 +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +4 -3
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-button/radio-button.scss +18 -19
- package/styles/components/radio-panel/radio-panel.css +2 -2
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/summary-table/summary-table.scss +3 -3
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/system-message/system-message.scss +8 -8
- package/styles/components/table/_table-cell.scss +4 -4
- package/styles/components/table/_table-header.scss +4 -2
- package/styles/components/table/_table-row.scss +13 -12
- package/styles/components/table/table.css +13 -11
- package/styles/components/text-area/text-area.css +6 -4
- package/styles/components/text-area/text-area.min.css +5 -1
- package/styles/components/text-input/text-input.css +6 -4
- package/styles/components/text-input/text-input.min.css +5 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/toggle-switch/_toggle-slider.scss +2 -2
- package/styles/core/core.css +0 -160
- package/styles/core/core.min.css +1 -1
- package/styles/core/jkl/_spacing.scss +1 -62
- package/styles/core/jkl/_typography.scss +21 -91
- package/styles/shared/input/shared-input-styles.css +6 -4
- package/styles/shared/input/shared-input-styles.min.css +5 -1
- package/styles/shared/input/shared-input-styles.scss +15 -11
- package/styles/styles.css +265 -766
- package/styles/styles.min.css +5 -7
- package/styles/styles.scss +0 -1
- package/build/cjs/components/ScreenReaderOnly.cjs.map +0 -1
- package/build/cjs/components/ScreenReaderOnly.d.cts +0 -6
- package/build/cjs/components/accordion/Accordion.cjs +0 -2
- package/build/cjs/components/accordion/Accordion.cjs.map +0 -1
- package/build/cjs/components/accordion/Accordion.d.cts +0 -7
- package/build/cjs/components/accordion/AccordionItem.cjs +0 -2
- package/build/cjs/components/accordion/AccordionItem.cjs.map +0 -1
- package/build/cjs/components/accordion/AccordionItem.d.cts +0 -7
- package/build/cjs/components/accordion/documentation/AccordionDocs.cjs +0 -2
- package/build/cjs/components/accordion/documentation/AccordionDocs.cjs.map +0 -1
- package/build/cjs/components/accordion/documentation/AccordionDocs.d.cts +0 -2
- package/build/cjs/components/accordion/index.cjs +0 -2
- package/build/cjs/components/accordion/index.d.cts +0 -3
- package/build/cjs/components/accordion/stories/Accordion.stories.cjs +0 -2
- package/build/cjs/components/accordion/stories/Accordion.stories.cjs.map +0 -1
- package/build/cjs/components/accordion/stories/AccordionItem.stories.cjs +0 -2
- package/build/cjs/components/accordion/stories/AccordionItem.stories.cjs.map +0 -1
- package/build/cjs/components/accordion/types.d.cts +0 -13
- package/build/cjs/components/accordion/vite-env.d.cjs +0 -2
- package/build/cjs/components/accordion/vite-env.d.cjs.map +0 -1
- package/build/cjs/components/card/InfoCard.cjs +0 -2
- package/build/cjs/components/card/InfoCard.cjs.map +0 -1
- package/build/cjs/components/card/InfoCard.d.cts +0 -13
- package/build/cjs/components/card/NavCard.cjs +0 -2
- package/build/cjs/components/card/NavCard.cjs.map +0 -1
- package/build/cjs/components/card/NavCard.d.cts +0 -26
- package/build/cjs/components/card/TaskCard.cjs +0 -2
- package/build/cjs/components/card/TaskCard.cjs.map +0 -1
- package/build/cjs/components/card/TaskCard.d.cts +0 -23
- package/build/cjs/components/card/development/examples/InfoCardExample.d.cts +0 -3
- package/build/cjs/components/card/development/examples/NavCardExample.d.cts +0 -3
- package/build/cjs/components/card/development/examples/TaskCardExample.d.cts +0 -3
- package/build/cjs/components/card/development/examples/TopExample.d.cts +0 -3
- package/build/cjs/components/card/development/examples/cardExampleProps.d.cts +0 -13
- package/build/cjs/components/card/utils.cjs +0 -2
- package/build/cjs/components/card/utils.cjs.map +0 -1
- package/build/cjs/components/card/utils.d.cts +0 -3
- package/build/cjs/components/expander/deprecated/ExpandSection.cjs +0 -2
- package/build/cjs/components/expander/deprecated/ExpandSection.cjs.map +0 -1
- package/build/cjs/components/expander/deprecated/ExpandSection.d.cts +0 -26
- package/build/cjs/components/expander/deprecated/Expander.cjs +0 -2
- package/build/cjs/components/expander/deprecated/Expander.cjs.map +0 -1
- package/build/cjs/components/expander/deprecated/Expander.d.cts +0 -27
- package/build/cjs/components/expander/stories/ExpanderPanel.stories.cjs.map +0 -1
- package/build/cjs/components/index.cjs +0 -2
- package/build/cjs/components/index.cjs.map +0 -1
- package/build/cjs/components/index.d.cts +0 -47
- package/build/es/components/ScreenReaderOnly.d.ts +0 -6
- package/build/es/components/ScreenReaderOnly.js.map +0 -1
- package/build/es/components/accordion/Accordion.d.ts +0 -7
- package/build/es/components/accordion/Accordion.js +0 -2
- package/build/es/components/accordion/Accordion.js.map +0 -1
- package/build/es/components/accordion/AccordionItem.d.ts +0 -7
- package/build/es/components/accordion/AccordionItem.js +0 -2
- package/build/es/components/accordion/AccordionItem.js.map +0 -1
- package/build/es/components/accordion/documentation/AccordionDocs.d.ts +0 -2
- package/build/es/components/accordion/documentation/AccordionDocs.js +0 -2
- package/build/es/components/accordion/documentation/AccordionDocs.js.map +0 -1
- package/build/es/components/accordion/index.d.ts +0 -3
- package/build/es/components/accordion/index.js +0 -2
- package/build/es/components/accordion/stories/Accordion.stories.d.ts +0 -13
- package/build/es/components/accordion/stories/Accordion.stories.js +0 -2
- package/build/es/components/accordion/stories/Accordion.stories.js.map +0 -1
- package/build/es/components/accordion/stories/AccordionItem.stories.d.ts +0 -13
- package/build/es/components/accordion/stories/AccordionItem.stories.js +0 -2
- package/build/es/components/accordion/stories/AccordionItem.stories.js.map +0 -1
- package/build/es/components/accordion/types.d.ts +0 -13
- package/build/es/components/accordion/vite-env.d.js +0 -2
- package/build/es/components/accordion/vite-env.d.js.map +0 -1
- package/build/es/components/card/InfoCard.d.ts +0 -13
- package/build/es/components/card/InfoCard.js +0 -2
- package/build/es/components/card/InfoCard.js.map +0 -1
- package/build/es/components/card/NavCard.d.ts +0 -26
- package/build/es/components/card/NavCard.js +0 -2
- package/build/es/components/card/NavCard.js.map +0 -1
- package/build/es/components/card/TaskCard.d.ts +0 -23
- package/build/es/components/card/TaskCard.js +0 -2
- package/build/es/components/card/TaskCard.js.map +0 -1
- package/build/es/components/card/development/examples/InfoCardExample.d.ts +0 -3
- package/build/es/components/card/development/examples/NavCardExample.d.ts +0 -3
- package/build/es/components/card/development/examples/TaskCardExample.d.ts +0 -3
- package/build/es/components/card/development/examples/TopExample.d.ts +0 -3
- package/build/es/components/card/development/examples/cardExampleProps.d.ts +0 -13
- package/build/es/components/card/utils.d.ts +0 -3
- package/build/es/components/card/utils.js +0 -2
- package/build/es/components/card/utils.js.map +0 -1
- package/build/es/components/expander/deprecated/ExpandSection.d.ts +0 -26
- package/build/es/components/expander/deprecated/ExpandSection.js +0 -2
- package/build/es/components/expander/deprecated/ExpandSection.js.map +0 -1
- package/build/es/components/expander/deprecated/Expander.d.ts +0 -27
- package/build/es/components/expander/deprecated/Expander.js +0 -2
- package/build/es/components/expander/deprecated/Expander.js.map +0 -1
- package/build/es/components/expander/stories/ExpanderPanel.stories.js.map +0 -1
- package/build/es/components/index.d.ts +0 -47
- package/build/es/components/index.js +0 -2
- package/build/es/components/index.js.map +0 -1
- package/styles/components/accordion/_index.scss +0 -2
- package/styles/components/accordion/accordion.css +0 -189
- package/styles/components/accordion/accordion.min.css +0 -7
- package/styles/components/accordion/accordion.scss +0 -168
- package/styles/components/card/_info-card.scss +0 -42
- package/styles/components/card/_nav-card.scss +0 -119
- package/styles/components/card/_task-card.scss +0 -55
- package/styles/components/card/development/info-card-example.css +0 -26
- package/styles/components/card/development/info-card-example.min.css +0 -1
- package/styles/components/card/development/info-card-example.scss +0 -14
- package/styles/components/card/development/task-card-example.css +0 -9
- package/styles/components/card/development/task-card-example.min.css +0 -1
- package/styles/components/card/development/task-card-example.scss +0 -8
- package/styles/components/expander/deprecated/expander.css +0 -82
- package/styles/components/expander/deprecated/expander.min.css +0 -1
- package/styles/components/expander/deprecated/expander.scss +0 -87
- /package/build/cjs/components/expander/stories/{ExpanderPanel.stories.d.cts → ExpandablePanel.stories.d.cts} +0 -0
- /package/build/cjs/components/{ScreenReaderOnly.cjs → screen-reader-only/ScreenReaderOnly.cjs} +0 -0
- /package/build/cjs/components/{accordion → screen-reader-only}/index.cjs.map +0 -0
- /package/build/cjs/components/{accordion → screen-reader-only}/types.cjs +0 -0
- /package/build/cjs/components/{accordion → screen-reader-only}/types.cjs.map +0 -0
- /package/build/es/components/expander/stories/{ExpanderPanel.stories.d.ts → ExpandablePanel.stories.d.ts} +0 -0
- /package/build/es/components/{ScreenReaderOnly.js → screen-reader-only/ScreenReaderOnly.js} +0 -0
- /package/build/es/components/{accordion → screen-reader-only}/index.js.map +0 -0
- /package/build/es/components/{accordion → screen-reader-only}/types.js +0 -0
- /package/build/es/components/{accordion → screen-reader-only}/types.js.map +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalOverlay.stories.cjs","sources":["../../../../../src/components/modal/stories/ModalOverlay.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport \"../styles/_index.scss\";\nimport { ModalOverlay as ModalOverlayComponent } from \"../Modal.js\";\nimport type { ModalInstance } from \"../useModal.js\";\n\ninterface ExtendedModalComponentProps {\n dialogRef: React.RefCallback<ModalInstance>;\n onClick?: () => void;\n onCancel?: () => void;\n}\n\nconst meta = {\n title: \"Komponenter/Modal/ModalOverlay\",\n component: ModalOverlayComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<ExtendedModalComponentProps>;\n\nexport default meta;\n\ntype Story = StoryObj<ExtendedModalComponentProps>;\n\nlet modalRef: ModalInstance | null = null;\n\nexport const ModalOverlay: Story = {\n args: {\n dialogRef: (instance: ModalInstance | null) => {\n modalRef = instance;\n },\n onCancel: () => {\n console.log(\"❌ Cancel\");\n modalRef?.hide();\n },\n onClick: () => {\n ModalOverlay.args?.onCancel?.();\n },\n },\n};\n"],"names":["meta","title","component","ModalOverlay","parameters","layout","tags","modalRef","args","dialogRef","instance","onCancel","console","log","hide","onClick"
|
|
1
|
+
{"version":3,"file":"ModalOverlay.stories.cjs","sources":["../../../../../src/components/modal/stories/ModalOverlay.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport \"../styles/_index.scss\";\nimport { ModalOverlay as ModalOverlayComponent } from \"../Modal.js\";\nimport type { ModalInstance } from \"../useModal.js\";\n\ninterface ExtendedModalComponentProps {\n dialogRef: React.RefCallback<ModalInstance>;\n onClick?: () => void;\n onCancel?: () => void;\n}\n\nconst meta = {\n title: \"Komponenter/Modal/ModalOverlay\",\n component: ModalOverlayComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<ExtendedModalComponentProps>;\n\nexport default meta;\n\ntype Story = StoryObj<ExtendedModalComponentProps>;\n\nlet modalRef: ModalInstance | null = null;\n\nexport const ModalOverlay: Story = {\n args: {\n dialogRef: (instance: ModalInstance | null) => {\n modalRef = instance;\n },\n onCancel: () => {\n console.log(\"❌ Cancel\");\n modalRef?.hide();\n },\n onClick: () => {\n ModalOverlay.args?.onCancel?.();\n },\n },\n};\n"],"names":["meta","title","component","ModalOverlay","parameters","layout","tags","modalRef","args","dialogRef","instance","onCancel","console","log","hide","onClick"],"mappings":"6JAWMA,EAAO,CACTC,MAAO,iCACPC,kCAAWC,aACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOX,IAAIC,EAAiC,KAE9B,MAAMJ,EAAsB,CAC/BK,KAAM,CACFC,UAAYC,IACGH,EAAAG,GAEfC,SAAU,KACNC,QAAQC,IAAI,YACZN,GAAUO,MAAK,EAEnBC,QAAS,KACLZ,EAAaK,MAAMG,YAAW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndDensity.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),l=s.createContext(null),i=()=>{const e=s.useContext(l);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:l=!0,offset:i=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:f,dismissOptions:p})=>{const[m,g]=s.useState(e),h=e??m,
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndDensity.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),l=s.createContext(null),i=()=>{const e=s.useContext(l);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:l=!0,offset:i=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:f,dismissOptions:p})=>{const[m,g]=s.useState(e),h=e??m,x=n??g,b=t.useFloating({open:h,onOpenChange:x,placement:o,strategy:r,middleware:[t.offset(i),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),y=b.context,j=t.useClick(y,{enabled:!1,...d}),v=t.useHover(y,{enabled:!1,...c}),O=t.useFocus(y,{enabled:!1,...u}),P=t.useDismiss(y,p),R=t.useRole(y,f),F=t.useInteractions([j,P,O,v,R]);return s.useLayoutEffect((()=>{a&&b.refs.setPositionReference(a?.current)}),[a,b.refs]),s.useMemo((()=>({open:h,onOpenChange:x,modal:l,...F,...b})),[h,x,l,F,b])})({...o});return e.jsx(l.Provider,{value:r,children:n})},c=s.forwardRef((function({children:n,asChild:o=!1,...r},l){const{refs:a,getReferenceProps:c,open:u,onOpenChange:d}=i(),f=n.ref,p=t.useMergeRefs([a.setReference,l,f]);return o&&s.isValidElement(n)?s.cloneElement(n,c({ref:p,...r,...n.props})):e.jsx("button",{ref:p,onClick:()=>d?.(!u),"aria-expanded":u,...c(r),children:n})})),u=s.forwardRef((function({style:o,className:l,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:x,getFloatingProps:b}=i(),y=t.useMergeRefs([g.setFloating,f]),j=g.reference.current,{theme:v,density:O}=(R=j)&&"contextElement"in R?r.getThemeAndDensity(j.contextElement):r.getThemeAndDensity(j),P=s.useRef(null);var R;return s.useEffect((()=>{P.current=p.elements.domReference?.closest("[data-portal]")||document.body}),[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:P.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":v,"data-layout-density":O,className:n.clsx("jkl jkl-popover",l),ref:y,style:{...o,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...b(d),children:d.children})})}):null}));a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
|
|
2
2
|
//# sourceMappingURL=Popover.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n type ReferenceElement,\n type VirtualElement,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useMergeRefs,\n useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n open: _open,\n onOpenChange: _onOpenChange,\n placement = \"bottom-start\",\n strategy = \"absolute\",\n modal = true,\n offset: _offset = 4,\n positionReference,\n hoverOptions,\n focusOptions,\n clickOptions,\n roleOptions,\n dismissOptions,\n}: PopoverOptions) => {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n const open = _open ?? uncontrolledOpen;\n const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n const data = useFloating({\n open,\n onOpenChange,\n placement,\n strategy,\n middleware: [\n offset(_offset),\n flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n shift({ padding: 12 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const context = data.context;\n\n const click = useClick(context, {\n enabled: false,\n ...clickOptions,\n });\n const hover = useHover(context, { enabled: false, ...hoverOptions });\n const focus = useFocus(context, { enabled: false, ...focusOptions });\n const dismiss = useDismiss(context, dismissOptions);\n const role = useRole(context, roleOptions);\n\n const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n React.useLayoutEffect(() => {\n if (positionReference) {\n data.refs.setPositionReference(positionReference?.current);\n }\n }, [positionReference, data.refs]);\n\n return React.useMemo(\n () => ({\n open,\n onOpenChange,\n modal,\n ...interactions,\n ...data,\n }),\n [open, onOpenChange, modal, interactions, data],\n );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context == null) {\n throw new Error(\n \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n );\n }\n\n return context;\n};\n\nexport const Popover = ({\n children,\n ...restOptions\n}: {\n children: React.ReactNode;\n} & PopoverOptions) => {\n const popover = usePopover({ ...restOptions });\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ninterface PopoverTriggerProps {\n children: React.ReactNode;\n /**\n * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n *\n * Default er `false`.\n *\n * @example\n * ```tsx\n * <Component asChild foo=\"bar\">\n * <Child baz=\"qux\" />\n * </Component>\n *\n * // Rendrer følgende:\n * <Child foo=\"bar\" baz=\"qux\" />\n * ```\n */\n asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n HTMLElement,\n React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n const childrenRef = (children as any).ref;\n const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n getReferenceProps({\n ref,\n ...props,\n ...children.props,\n }),\n );\n }\n\n return (\n <button\n ref={ref}\n onClick={() => onOpenChange?.(!open)}\n aria-expanded={open}\n {...getReferenceProps(props)}\n >\n {children}\n </button>\n );\n});\n\ninterface PopoverContentProps {\n /**\n * Padding rundt innholdet i popoveren.\n *\n * Default er `0`.\n */\n padding?: 0 | 8 | 16 | 24;\n /**\n *\n * Angir hvilket element som skal motta fokus ved åpning.\n * Kan være en tabbar index eller en referanse til et element.\"\n *\n * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n */\n initialFocus?: number | React.RefObject<HTMLElement>;\n /**\n * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n *\n * Default er `true`.\n * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n */\n returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n if (!referenceElement) return false;\n\n return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n {\n style,\n className,\n padding = 0,\n initialFocus = 0,\n returnFocus = true,\n ...props\n },\n propRef,\n) {\n const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n usePopoverContext();\n const ref = useMergeRefs([refs.setFloating, propRef]);\n\n const referenceElement = refs.reference.current as ReferenceElement;\n\n const { theme, density } = isCustomPositioned(referenceElement)\n ? getThemeAndDensity(referenceElement.contextElement)\n : getThemeAndDensity(referenceElement);\n\n const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) || document.body;\n }, [context.elements.domReference]);\n\n if (!open) return null;\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\n <FloatingFocusManager\n context={context}\n modal={modal}\n initialFocus={initialFocus}\n returnFocus={returnFocus}\n >\n <div\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\"jkl jkl-popover\", className)}\n ref={ref}\n style={\n {\n ...style,\n ...floatingStyles,\n \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n } as React.CSSProperties\n }\n {...getFloatingProps(props)}\n >\n {props.children}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n type ReferenceElement,\n type VirtualElement,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useMergeRefs,\n useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n open: _open,\n onOpenChange: _onOpenChange,\n placement = \"bottom-start\",\n strategy = \"absolute\",\n modal = true,\n offset: _offset = 4,\n positionReference,\n hoverOptions,\n focusOptions,\n clickOptions,\n roleOptions,\n dismissOptions,\n}: PopoverOptions) => {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n const open = _open ?? uncontrolledOpen;\n const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n const data = useFloating({\n open,\n onOpenChange,\n placement,\n strategy,\n middleware: [\n offset(_offset),\n flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n shift({ padding: 12 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const context = data.context;\n\n const click = useClick(context, {\n enabled: false,\n ...clickOptions,\n });\n const hover = useHover(context, { enabled: false, ...hoverOptions });\n const focus = useFocus(context, { enabled: false, ...focusOptions });\n const dismiss = useDismiss(context, dismissOptions);\n const role = useRole(context, roleOptions);\n\n const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n React.useLayoutEffect(() => {\n if (positionReference) {\n data.refs.setPositionReference(positionReference?.current);\n }\n }, [positionReference, data.refs]);\n\n return React.useMemo(\n () => ({\n open,\n onOpenChange,\n modal,\n ...interactions,\n ...data,\n }),\n [open, onOpenChange, modal, interactions, data],\n );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context == null) {\n throw new Error(\n \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n );\n }\n\n return context;\n};\n\nexport const Popover = ({\n children,\n ...restOptions\n}: {\n children: React.ReactNode;\n} & PopoverOptions) => {\n const popover = usePopover({ ...restOptions });\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ninterface PopoverTriggerProps {\n children: React.ReactNode;\n /**\n * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n *\n * Default er `false`.\n *\n * @example\n * ```tsx\n * <Component asChild foo=\"bar\">\n * <Child baz=\"qux\" />\n * </Component>\n *\n * // Rendrer følgende:\n * <Child foo=\"bar\" baz=\"qux\" />\n * ```\n */\n asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n HTMLElement,\n React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n const childrenRef = (children as any).ref;\n const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n getReferenceProps({\n ref,\n ...props,\n ...children.props,\n }),\n );\n }\n\n return (\n <button\n ref={ref}\n onClick={() => onOpenChange?.(!open)}\n aria-expanded={open}\n {...getReferenceProps(props)}\n >\n {children}\n </button>\n );\n});\n\ninterface PopoverContentProps {\n /**\n * Padding rundt innholdet i popoveren.\n *\n * Default er `0`.\n */\n padding?: 0 | 8 | 16 | 24;\n /**\n *\n * Angir hvilket element som skal motta fokus ved åpning.\n * Kan være en tabbar index eller en referanse til et element.\"\n *\n * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n */\n initialFocus?: number | React.RefObject<HTMLElement>;\n /**\n * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n *\n * Default er `true`.\n * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n */\n returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n if (!referenceElement) return false;\n\n return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n {\n style,\n className,\n padding = 0,\n initialFocus = 0,\n returnFocus = true,\n ...props\n },\n propRef,\n) {\n const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n usePopoverContext();\n const ref = useMergeRefs([refs.setFloating, propRef]);\n\n const referenceElement = refs.reference.current as ReferenceElement;\n\n const { theme, density } = isCustomPositioned(referenceElement)\n ? getThemeAndDensity(referenceElement.contextElement)\n : getThemeAndDensity(referenceElement);\n\n const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) || document.body;\n }, [context.elements.domReference]);\n\n if (!open) return null;\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\n <FloatingFocusManager\n context={context}\n modal={modal}\n initialFocus={initialFocus}\n returnFocus={returnFocus}\n >\n <div\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\"jkl jkl-popover\", className)}\n ref={ref}\n style={\n {\n ...style,\n ...floatingStyles,\n \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n } as React.CSSProperties\n }\n {...getFloatingProps(props)}\n >\n {props.children}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),r=require("../../shared/input-panel/BasePanel.cjs"),o=require("./radioPanelContext.cjs"),n=a.forwardRef((function({alwaysOpen:n=!1,label:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),r=require("../../shared/input-panel/BasePanel.cjs"),o=require("./radioPanelContext.cjs"),n=a.forwardRef((function({alwaysOpen:n=!1,label:t,extraLabel:l,checked:u,onChange:i,value:d,defaultChecked:s,...c},p){const{onValueChange:h,checkedValue:f}=a.useContext(o.context),w=a.useCallback((e=>{if(i?.(e),!h)throw new Error("RadioPanel will not work properly when used outside a RadioPanelGroup");h(d)}),[i,h,d]);a.useEffect((()=>{if(s){if(!h)throw new Error("RadioPanel will not work properly when used outside a RadioPanelGroup");h(d)}}),[]);const k=typeof u<"u",x=k?u:f===d;return e.jsx(r.BasePanel,{ref:p,type:"radio",value:d,isChecked:x,defaultChecked:s,checked:k?u:void 0,onChange:w,alwaysOpen:n,label:t,extraLabel:l,...c})}));exports.RadioPanel=n;
|
|
2
2
|
//# sourceMappingURL=RadioPanel.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioPanel.cjs","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n type ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n} from \"react\";\nimport { BasePanel } from \"../../shared/input-panel/BasePanel.js\";\nimport { context } from \"./radioPanelContext.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n {\n alwaysOpen = false,\n label,\n extraLabel,\n checked,\n onChange,\n value,\n defaultChecked,\n ...rest\n }: RadioPanelProps,\n ref: ForwardedRef<HTMLInputElement>,\n) {\n const { onValueChange, checkedValue } = useContext(context);\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n if (!onValueChange) {\n throw new Error(\n \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n );\n }\n onValueChange(value);\n },\n [onChange, onValueChange, value],\n );\n\n // We never want to rerun this effect. Changing the default value after the\n // input control is first mounted should not cause any updates\n // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n useEffect(() => {\n if (defaultChecked) {\n if (!onValueChange) {\n throw new Error(\n \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n );\n }\n onValueChange(value);\n }\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, []);\n\n const isControlled = typeof checked !== \"undefined\";\n const isChecked = isControlled ? checked : checkedValue === value;\n\n return (\n <BasePanel\n ref={ref}\n type=\"radio\"\n value={value}\n isChecked={isChecked}\n defaultChecked={defaultChecked}\n checked={isControlled ? checked : undefined}\n onChange={handleChange}\n alwaysOpen={alwaysOpen}\n label={label}\n extraLabel={extraLabel}\n {...rest}\n />\n );\n});\n"],"names":["RadioPanel","forwardRef","alwaysOpen","label","extraLabel","checked","onChange","value","defaultChecked","rest","ref","onValueChange","checkedValue","useContext","context","handleChange","useCallback","e","Error","useEffect","isControlled","isChecked","jsx","BasePanel","type"],"mappings":"iOAYaA,EAAaC,EAAAA,YAAW,UAE7BC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,eAAAA,KACGC,GAEPC,GAEA,MAAQC,cAAAA,EAAeC,aAAAA,GAAiBC,EAAAA,WAAWC,EAAAA,SAE7CC,EAAeC,EAAAA,aAChBC,IAEG,
|
|
1
|
+
{"version":3,"file":"RadioPanel.cjs","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n type ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n} from \"react\";\nimport { BasePanel } from \"../../shared/input-panel/BasePanel.js\";\nimport { context } from \"./radioPanelContext.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n {\n alwaysOpen = false,\n label,\n extraLabel,\n checked,\n onChange,\n value,\n defaultChecked,\n ...rest\n }: RadioPanelProps,\n ref: ForwardedRef<HTMLInputElement>,\n) {\n const { onValueChange, checkedValue } = useContext(context);\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n if (!onValueChange) {\n throw new Error(\n \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n );\n }\n onValueChange(value);\n },\n [onChange, onValueChange, value],\n );\n\n // We never want to rerun this effect. Changing the default value after the\n // input control is first mounted should not cause any updates\n // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n useEffect(() => {\n if (defaultChecked) {\n if (!onValueChange) {\n throw new Error(\n \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n );\n }\n onValueChange(value);\n }\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, []);\n\n const isControlled = typeof checked !== \"undefined\";\n const isChecked = isControlled ? checked : checkedValue === value;\n\n return (\n <BasePanel\n ref={ref}\n type=\"radio\"\n value={value}\n isChecked={isChecked}\n defaultChecked={defaultChecked}\n checked={isControlled ? checked : undefined}\n onChange={handleChange}\n alwaysOpen={alwaysOpen}\n label={label}\n extraLabel={extraLabel}\n {...rest}\n />\n );\n});\n"],"names":["RadioPanel","forwardRef","alwaysOpen","label","extraLabel","checked","onChange","value","defaultChecked","rest","ref","onValueChange","checkedValue","useContext","context","handleChange","useCallback","e","Error","useEffect","isControlled","isChecked","jsx","BasePanel","type"],"mappings":"iOAYaA,EAAaC,EAAAA,YAAW,UAE7BC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,eAAAA,KACGC,GAEPC,GAEA,MAAQC,cAAAA,EAAeC,aAAAA,GAAiBC,EAAAA,WAAWC,EAAAA,SAE7CC,EAAeC,EAAAA,aAChBC,IAEG,GADAX,IAAWW,IACNN,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAAK,GAEvB,CAACD,EAAUK,EAAeJ,IAM9BY,EAAAA,WAAU,KACN,GAAIX,EAAgB,CAChB,IAAKG,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAAK,IAGxB,IAEG,MAAAa,SAAsBf,EAAY,IAClCgB,EAAYD,EAAef,EAAUO,IAAiBL,EAGxD,OAAAe,EAAAA,IAACC,EAAAA,UAAA,CACGb,IAAAA,EACAc,KAAK,QACLjB,MAAAA,EACAc,UAAAA,EACAb,eAAAA,EACAH,QAASe,EAAef,OAAU,EAClCC,SAAUS,EACVb,WAAAA,EACAC,MAAAA,EACAC,WAAAA,KACIK,GAGhB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScreenReaderOnly.cjs","sources":["../../../../src/components/screen-reader-only/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport type { ScreenReaderOnlyProps } from \"./types.js\";\n\nexport const ScreenReaderOnly: FC<ScreenReaderOnlyProps> = ({\n children,\n showOnFocus,\n ...rest\n}) => (\n <span\n {...rest}\n className={`jkl-sr-only${showOnFocus ? \" jkl-sr-only--focusable\" : \"\"}`}\n >\n {children}\n </span>\n);\n"],"names":["children","showOnFocus","rest","jsx","className"],"mappings":"+JAG2D,EACvDA,SAAAA,EACAC,YAAAA,KACGC,KAEHC,EAAAA,IAAC,OAAA,IACOD,EACJE,UAAW,eAAcH,EAAc,0BAA4B,IAElED,SAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),n=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),a=require("../../hooks/useId/useId.cjs"),s=require("../../hooks/useListNavigation/useListNavigation.cjs"),l=require("../../hooks/usePreviousValue/usePreviousValue.cjs"),o=require("../../utilities/valuePair.cjs"),u=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),i=require("../input-group/InputGroup.cjs"),c=require("./select-utils.cjs"),d=()=>{},p=r.forwardRef(((p,v)=>{const{id:f,name:b,items:k,value:m,label:g,labelProps:j,onChange:h,onBlur:y,onFocus:w,className:_,helpLabel:x,errorLabel:E,invalid:P,searchable:C=!1,inline:D=!1,defaultPrompt:L="Velg",density:S,width:$,maxShownOptions:N=5,style:q,tooltip:V,...A}=p,F=a.useId(f||"jkl-select",{generateSuffix:!f}),T=`${F}_label`,I=`${F}_button`,M=`${F}_search-input`,[R,K]=r.useState(!1),B=r.useCallback((()=>{K((e=>!e))}),[]),O=!!C,H=O&&R,[G,U]=r.useState(""),z=r.useCallback((e=>!!e.label.toLowerCase().includes(G.toLowerCase())||"function"==typeof C&&C(G,e)),[C,G]),J=r.useMemo((()=>k.map(o.getValuePair).map((e=>{const t=!O||""===G||z(e);return{...e,visible:t}}))),[k,O,G,z]),Q=r.useMemo((()=>!(typeof m>"u")&&k.some((e=>"string"==typeof e?e===m:e.value===m))),[m,k]),[W,X]=r.useState(Q&&void 0!==m?m:""),Y=""!==W,Z=r.useMemo((()=>J.find((e=>e.value===W))?.label||L),[J,W,L]),ee=r.useRef(null),te=r.useCallback((e=>{ee.current=e,v&&("function"==typeof v?v(e):v.current=e),e&&X(e.value)}),[v]),re=l.usePreviousValue(m);r.useEffect((()=>{m!==re&&X(typeof m>"u"||!Q?"":m)}),[m,re,Q]);const ne=r.useCallback((e=>{const t=e.value;U(""),X(t),B(),ue.current?.focus()}),[B]),ae=l.usePreviousValue(W);r.useEffect((()=>{typeof ae>"u"||ae===W||W===m||(h&&h({type:"change",target:{name:b,value:W}}),ee.current&&ee.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[h,b,m,W,ae]);const se=r.useRef(null),le=r.useRef(!1),oe=r.useRef(null),ue=r.useRef(null),ie=r.useCallback(((e,t)=>{if(e&&!O){const e=t.current;e&&c.focusSelected(e,W)}else e?oe.current&&oe.current.focus():le.current&&ue.current&&ue.current.focus()}),[O,W]),[ce]=n.useAnimatedHeight(R,{onFirstVisible:ie,onTransitionEnd:ie});s.useListNavigation({ref:ce});const de=r.useCallback((()=>{O&&U(""),y&&(y({type:"blur",target:{name:b,value:W}}),ee.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),le.current=!1,K(!1)}),[y,O,b,W]),pe=r.useCallback((e=>{se.current?.contains(e.relatedTarget)||de()}),[de]),ve=r.useCallback((()=>{le.current||(w&&w({type:"change",target:{name:b,value:W}}),le.current=!0)}),[w,W,b]),fe=r.useCallback((e=>{e.target.focus({preventScroll:!0})}),[]);r.useEffect((()=>{const e=ee.current,t=oe.current,r=ue.current,n=se.current;return e?.addEventListener("focus",(()=>{H?t?.focus():r?.focus()})),e?.addEventListener("blur",(function(e){n?.contains(e.relatedTarget)&&e.preventDefault()})),()=>{e?.removeEventListener("focus",(()=>{H?t?.focus():r?.focus()})),e?.removeEventListener("blur",(function(e){n?.contains(e.relatedTarget)&&e.preventDefault()}))}}),[H]);const be=r.useCallback((e=>{"ArrowDown"!==e.key&&" "!==e.key||R?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),K(!1)):(e.preventDefault(),e.stopPropagation(),K(!0))}),[R]),ke=r.useCallback((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=ce.current;t&&(O?c.focusSelected(t,void 0):c.focusSelected(t,W))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),K(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&R&&(e.preventDefault(),e.stopPropagation());else{const t=ce.current;t&&(e.preventDefault(),e.stopPropagation(),c.focusSelected(t,W))}}),[ce,W,O,R]),me=r.useCallback((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&oe.current?oe.current.focus():ue.current&&(X(e.currentTarget.value),K(!1),ue.current.focus());else if("ArrowUp"===e.key&&ce.current&&oe.current){const t=ce.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===t?.id&&oe.current&&oe.current.focus()}}),[ce]);return r.useEffect((()=>{const e=e=>{"Escape"===e.key&&R&&K(!1)};return typeof window<"u"&&R&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[R]),e.jsxs(e.Fragment,{children:[e.jsxs("select",{name:b,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:te,value:W,onChange:d,children:[e.jsx("option",{value:""})," ",J.map((t=>e.jsx("option",{hidden:!t.visible,value:t.value,children:t.label},`${F}-opt-${t.value}`)))]}),e.jsx(i.InputGroup,{ref:se,"data-testid":"jkl-select",className:t.clsx("jkl-select",_,{"jkl-select--inline":D,"jkl-select--open":R&&J.some((e=>e.visible)),"jkl-select--no-value":!Y,"jkl-select--invalid":!!E||P}),tooltip:V&&r.isValidElement(V)?r.cloneElement(V,{triggerProps:{...V.props.triggerProps,onFocus:e=>{V.props.triggerProps?.onFocus?.(e),de()}}}):null,...A,id:O?M:I,style:{"--jkl-select-max-shown-options":N,...q},density:S,label:g,labelProps:{id:T,srOnly:D,...j,htmlFor:O?M:I},helpLabel:x,errorLabel:E,render:({"aria-invalid":r,...n})=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:$},children:[O&&e.jsx("input",{...n,"aria-invalid":r,id:M,hidden:!H,ref:oe,placeholder:"Søk",value:G,onChange:e=>U(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":Y?`${F}__${c.toLower(W)}`:void 0,"aria-controls":F,"aria-expanded":R,role:"combobox",onKeyDown:ke,onBlur:pe,onFocus:ve,onClick:e=>{e.stopPropagation()}}),e.jsx("button",{"aria-invalid":r,...n,id:I,ref:ue,hidden:H,type:"button",name:`${b}-btn`,className:t.clsx("jkl-select__button",{"jkl-select__button--active-value":!!W}),"data-testid":"jkl-select__button","aria-label":`${Z||"Velg"},${g}`,"aria-expanded":R,"aria-controls":F,onBlur:pe,onFocus:ve,onKeyDown:be,onClick:B,onMouseDown:e=>{e.preventDefault(),ue.current?.focus()},children:Z}),e.jsx("div",{id:F,ref:ce,role:"listbox",className:"jkl-select__options-menu",hidden:!R||J.every((e=>!e.visible)),"aria-labelledby":T,tabIndex:-1,"data-focus":"controlled",children:J.map(((t,r)=>t.visible?e.jsxs("button",{hidden:!t.visible,type:"button",id:`${F}__${c.toLower(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===W,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${r}`,onBlur:pe,onFocus:ve,onKeyDown:me,onClick:e=>{e.preventDefault(),ne(t)},onMouseOver:fe,children:[t.label,t.description?e.jsx("span",{className:"jkl-select__option-description",children:t.description}):null]},`${F}-${t.value}`):null))}),e.jsx(u.ArrowVerticalAnimated,{variant:"medium",pointingDown:!R,className:"jkl-select__arrow"})]})})]})}));p.displayName="Select",exports.Select=p;
|
|
2
2
|
//# sourceMappingURL=Select.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n type FocusEvent,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport type { SelectProps } from \"./types.js\";\n\nconst noop = () => {\n return;\n};\n\ninterface Option extends ValuePair {\n visible: boolean;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedSelectRef) => {\n const {\n id,\n name,\n items,\n value,\n label,\n labelProps,\n onChange,\n onBlur,\n onFocus,\n className,\n helpLabel,\n errorLabel,\n invalid,\n searchable = false,\n inline = false,\n defaultPrompt = \"Velg\",\n density,\n width,\n maxShownOptions = 5,\n style,\n tooltip,\n ...rest\n } = props;\n\n const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const searchInputId = `${listId}_search-input`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n /// Søk\n\n const isSearchable = Boolean(searchable);\n const showSearchInputField = isSearchable && dropdownIsShown;\n const [searchValue, setSearchValue] = useState(\"\");\n const searchFn = useCallback(\n (item: ValuePair) => {\n if (\n item.label.toLowerCase().includes(searchValue.toLowerCase())\n ) {\n return true;\n }\n\n if (typeof searchable === \"function\") {\n return searchable(searchValue, item);\n }\n\n return false;\n },\n [searchable, searchValue],\n );\n const visibleItems: Option[] = useMemo(\n () =>\n items.map(getValuePair).map((item) => {\n const visible =\n !isSearchable || searchValue === \"\" || searchFn(item);\n return { ...item, visible };\n }),\n [items, isSearchable, searchValue, searchFn],\n );\n const valueIsInItems: boolean = useMemo(() => {\n if (typeof value === \"undefined\") {\n return false;\n }\n return items.some((item) =>\n typeof item === \"string\"\n ? item === value\n : item.value === value,\n );\n }, [value, items]);\n\n /// Valg av <option>\n\n const [selectedValue, setSelectedValue] = useState<string>(\n valueIsInItems && value !== undefined ? value : \"\",\n );\n const hasSelectedValue = selectedValue !== \"\";\n const selectedValueLabel = useMemo(\n () =>\n visibleItems.find((item) => item.value === selectedValue)\n ?.label || defaultPrompt,\n [visibleItems, selectedValue, defaultPrompt],\n );\n\n const selectRef = useRef<HTMLSelectElement | null>(null);\n // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n const unifiedSelectRef = useCallback(\n (instance: HTMLSelectElement | null) => {\n selectRef.current = instance;\n if (forwardedSelectRef) {\n if (typeof forwardedSelectRef === \"function\") {\n forwardedSelectRef(instance);\n } else {\n forwardedSelectRef.current = instance;\n }\n }\n if (instance) {\n setSelectedValue(instance.value);\n }\n },\n [forwardedSelectRef],\n );\n\n const previousValue = usePreviousValue(value);\n useEffect(() => {\n if (value === previousValue) {\n return;\n }\n if (typeof value === \"undefined\" || !valueIsInItems) {\n setSelectedValue(\"\");\n } else {\n setSelectedValue(value);\n }\n }, [value, previousValue, valueIsInItems]);\n\n const selectOption = useCallback(\n (item: Option) => {\n const nextValue = item.value;\n setSearchValue(\"\");\n setSelectedValue(nextValue);\n toggleListVisibility();\n buttonRef.current?.focus();\n },\n [toggleListVisibility],\n );\n\n // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n const previousSelectedValue = usePreviousValue(selectedValue);\n useEffect(() => {\n // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n if (\n typeof previousSelectedValue === \"undefined\" ||\n previousSelectedValue === selectedValue ||\n selectedValue === value\n ) {\n return;\n }\n if (onChange) {\n onChange({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n if (selectRef.current) {\n selectRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n /// Fokushåndtering\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n const searchFieldRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleFocusPlacement = useCallback(\n (isOpen: boolean, ref: RefObject<HTMLElement | null>) => {\n if (isOpen && !isSearchable) {\n const listElement = ref.current;\n if (listElement) {\n focusSelected(listElement, selectedValue);\n }\n } else if (isOpen) {\n if (searchFieldRef.current) {\n searchFieldRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && buttonRef.current) {\n buttonRef.current.focus();\n }\n }\n },\n [isSearchable, selectedValue],\n );\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n dropdownIsShown,\n {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n },\n );\n\n useListNavigation({ ref: dropdownRef });\n\n const close = useCallback(() => {\n if (isSearchable) {\n setSearchValue(\"\");\n }\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: { name, value: selectedValue },\n });\n selectRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShown(false);\n }, [onBlur, isSearchable, name, selectedValue]);\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n const componentRootElement = componentRootElementRef.current;\n // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n // https://github.com/facebook/react/issues/2011\n // This might be fixed in react 17. Se issue above.\n const nextFocusIsInsideComponent =\n componentRootElement?.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n close();\n }\n },\n [close],\n );\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n focusInsideRef.current = true;\n }\n }, [onFocus, selectedValue, name]);\n\n const handleMouseOver = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n },\n [],\n );\n\n // Handle focus and blur of hidden select element\n useEffect(() => {\n const select = selectRef.current;\n const searchField = searchFieldRef.current;\n const button = buttonRef.current;\n const componentRootElement = componentRootElementRef.current;\n\n select?.addEventListener(\"focus\", () => {\n showSearchInputField ? searchField?.focus() : button?.focus();\n });\n select?.addEventListener(\"blur\", function (this, ev) {\n componentRootElement?.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n\n return () => {\n select?.removeEventListener(\"focus\", () => {\n showSearchInputField\n ? searchField?.focus()\n : button?.focus();\n });\n select?.removeEventListener(\"blur\", function (this, ev) {\n componentRootElement?.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n };\n }, [showSearchInputField]);\n\n /// Tastaturnavigasjon\n\n // Add support for opening dropdown with arrowkey down as expected from native select\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (\n (e.key === \"ArrowDown\" || e.key === \" \") &&\n !dropdownIsShown\n ) {\n e.preventDefault();\n e.stopPropagation();\n setShown(true);\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n }\n },\n [dropdownIsShown],\n );\n\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n\n const listElement = dropdownRef.current;\n if (listElement) {\n if (isSearchable) {\n // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n // den valgte verdien.\n focusSelected(listElement, undefined);\n } else {\n focusSelected(listElement, selectedValue);\n }\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n } else if (e.key === \"Tab\" && !e.shiftKey) {\n const listElement = dropdownRef.current;\n if (listElement) {\n e.preventDefault();\n e.stopPropagation();\n focusSelected(listElement, selectedValue);\n }\n } else if (e.key === \"Enter\" && dropdownIsShown) {\n // Should not propagate Enter keyevent because form might submit\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [dropdownRef, selectedValue, isSearchable, dropdownIsShown],\n );\n\n // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey && searchFieldRef.current) {\n searchFieldRef.current.focus();\n } else if (buttonRef.current) {\n // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n setSelectedValue(e.currentTarget.value);\n setShown(false);\n buttonRef.current.focus();\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchFieldRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchFieldRef.current\n ) {\n searchFieldRef.current.focus();\n }\n }\n }\n },\n [dropdownRef],\n );\n\n // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && dropdownIsShown) {\n setShown(false);\n }\n };\n if (typeof window !== \"undefined\" && dropdownIsShown) {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [dropdownIsShown]);\n\n return (\n <>\n <select\n name={name}\n tabIndex={-1}\n data-testid=\"jkl-native-select\"\n className=\"jkl-sr-only\"\n aria-hidden\n ref={unifiedSelectRef}\n value={selectedValue}\n onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n >\n <option value=\"\" />{\" \"}\n {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n {visibleItems.map((item) => (\n <option\n key={`${listId}-opt-${item.value}`}\n hidden={!item.visible}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <InputGroup\n ref={componentRootElementRef}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--open\":\n dropdownIsShown &&\n visibleItems.some((item) => item.visible),\n \"jkl-select--no-value\": !hasSelectedValue,\n \"jkl-select--invalid\": !!errorLabel || invalid,\n })}\n tooltip={\n tooltip && React.isValidElement<PopupTipProps>(tooltip)\n ? React.cloneElement(tooltip, {\n triggerProps: {\n ...tooltip.props.triggerProps,\n onFocus: (\n e: FocusEvent<HTMLButtonElement>,\n ) => {\n tooltip.props.triggerProps?.onFocus?.(\n e,\n );\n close();\n },\n },\n })\n : null\n }\n {...rest}\n id={isSearchable ? searchInputId : buttonId}\n style={\n {\n \"--jkl-select-max-shown-options\": maxShownOptions,\n ...style,\n } as CSSProperties\n }\n density={density}\n label={label}\n labelProps={{\n id: labelId,\n srOnly: inline,\n ...labelProps,\n htmlFor: isSearchable ? searchInputId : buttonId,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n render={({\n \"aria-invalid\": ariaInvalid,\n ...inputProps\n }) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n {isSearchable && (\n <input\n {...inputProps}\n aria-invalid={ariaInvalid}\n id={searchInputId}\n hidden={!showSearchInputField}\n ref={searchFieldRef}\n placeholder=\"Søk\"\n value={searchValue}\n onChange={(e) =>\n setSearchValue(e.target.value)\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={listId}\n aria-expanded={dropdownIsShown}\n role=\"combobox\"\n onKeyDown={handleSearchOnKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onClick={(e) => {\n e.stopPropagation();\n }}\n />\n )}\n {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n <button\n // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n aria-invalid={ariaInvalid}\n {...inputProps}\n id={buttonId}\n ref={buttonRef}\n hidden={showSearchInputField}\n type=\"button\"\n name={`${name}-btn`}\n className={clsx(\"jkl-select__button\", {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n })}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel || \"Velg\"\n },${label}`}\n aria-expanded={dropdownIsShown}\n aria-controls={listId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOnKeyDown}\n onClick={toggleListVisibility}\n onMouseDown={(e) => {\n // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n // https://twitter.com/MilesSorce/status/1278762360669265925\n e.preventDefault();\n buttonRef.current?.focus();\n }}\n >\n {selectedValueLabel}\n </button>\n <div\n id={listId}\n ref={dropdownRef}\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n hidden={\n !dropdownIsShown ||\n visibleItems.every((item) => !item.visible)\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n >\n {visibleItems.map((item, i) =>\n // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n item.visible ? (\n <button\n key={`${listId}-${item.value}`}\n hidden={!item.visible}\n type=\"button\"\n id={`${listId}__${toLower(\n item.value,\n )}`}\n className=\"jkl-select__option\"\n data-testid=\"jkl-select__option\"\n aria-selected={\n item.value === selectedValue\n }\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"option\"\n value={item.value}\n data-testautoid={`jkl-select__option-${i}`}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={handleMouseOver}\n >\n {item.label}\n {item.description ? (\n <span className=\"jkl-select__option-description\">\n {item.description}\n </span>\n ) : null}\n </button>\n ) : null,\n )}\n </div>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!dropdownIsShown}\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n </>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n type FocusEvent,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport type { SelectProps } from \"./types.js\";\n\nconst noop = () => {\n return;\n};\n\ninterface Option extends ValuePair {\n visible: boolean;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedSelectRef) => {\n const {\n id,\n name,\n items,\n value,\n label,\n labelProps,\n onChange,\n onBlur,\n onFocus,\n className,\n helpLabel,\n errorLabel,\n invalid,\n searchable = false,\n inline = false,\n defaultPrompt = \"Velg\",\n density,\n width,\n maxShownOptions = 5,\n style,\n tooltip,\n ...rest\n } = props;\n\n const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const searchInputId = `${listId}_search-input`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n /// Søk\n\n const isSearchable = Boolean(searchable);\n const showSearchInputField = isSearchable && dropdownIsShown;\n const [searchValue, setSearchValue] = useState(\"\");\n const searchFn = useCallback(\n (item: ValuePair) => {\n if (\n item.label.toLowerCase().includes(searchValue.toLowerCase())\n ) {\n return true;\n }\n\n if (typeof searchable === \"function\") {\n return searchable(searchValue, item);\n }\n\n return false;\n },\n [searchable, searchValue],\n );\n const visibleItems: Option[] = useMemo(\n () =>\n items.map(getValuePair).map((item) => {\n const visible =\n !isSearchable || searchValue === \"\" || searchFn(item);\n return { ...item, visible };\n }),\n [items, isSearchable, searchValue, searchFn],\n );\n const valueIsInItems: boolean = useMemo(() => {\n if (typeof value === \"undefined\") {\n return false;\n }\n return items.some((item) =>\n typeof item === \"string\"\n ? item === value\n : item.value === value,\n );\n }, [value, items]);\n\n /// Valg av <option>\n\n const [selectedValue, setSelectedValue] = useState<string>(\n valueIsInItems && value !== undefined ? value : \"\",\n );\n const hasSelectedValue = selectedValue !== \"\";\n const selectedValueLabel = useMemo(\n () =>\n visibleItems.find((item) => item.value === selectedValue)\n ?.label || defaultPrompt,\n [visibleItems, selectedValue, defaultPrompt],\n );\n\n const selectRef = useRef<HTMLSelectElement | null>(null);\n // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n const unifiedSelectRef = useCallback(\n (instance: HTMLSelectElement | null) => {\n selectRef.current = instance;\n if (forwardedSelectRef) {\n if (typeof forwardedSelectRef === \"function\") {\n forwardedSelectRef(instance);\n } else {\n forwardedSelectRef.current = instance;\n }\n }\n if (instance) {\n setSelectedValue(instance.value);\n }\n },\n [forwardedSelectRef],\n );\n\n const previousValue = usePreviousValue(value);\n useEffect(() => {\n if (value === previousValue) {\n return;\n }\n if (typeof value === \"undefined\" || !valueIsInItems) {\n setSelectedValue(\"\");\n } else {\n setSelectedValue(value);\n }\n }, [value, previousValue, valueIsInItems]);\n\n const selectOption = useCallback(\n (item: Option) => {\n const nextValue = item.value;\n setSearchValue(\"\");\n setSelectedValue(nextValue);\n toggleListVisibility();\n buttonRef.current?.focus();\n },\n [toggleListVisibility],\n );\n\n // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n const previousSelectedValue = usePreviousValue(selectedValue);\n useEffect(() => {\n // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n if (\n typeof previousSelectedValue === \"undefined\" ||\n previousSelectedValue === selectedValue ||\n selectedValue === value\n ) {\n return;\n }\n if (onChange) {\n onChange({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n if (selectRef.current) {\n selectRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n /// Fokushåndtering\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n const searchFieldRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleFocusPlacement = useCallback(\n (isOpen: boolean, ref: RefObject<HTMLElement | null>) => {\n if (isOpen && !isSearchable) {\n const listElement = ref.current;\n if (listElement) {\n focusSelected(listElement, selectedValue);\n }\n } else if (isOpen) {\n if (searchFieldRef.current) {\n searchFieldRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && buttonRef.current) {\n buttonRef.current.focus();\n }\n }\n },\n [isSearchable, selectedValue],\n );\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n dropdownIsShown,\n {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n },\n );\n\n useListNavigation({ ref: dropdownRef });\n\n const close = useCallback(() => {\n if (isSearchable) {\n setSearchValue(\"\");\n }\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: { name, value: selectedValue },\n });\n selectRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShown(false);\n }, [onBlur, isSearchable, name, selectedValue]);\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n const componentRootElement = componentRootElementRef.current;\n // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n // https://github.com/facebook/react/issues/2011\n // This might be fixed in react 17. Se issue above.\n const nextFocusIsInsideComponent =\n componentRootElement?.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n close();\n }\n },\n [close],\n );\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n focusInsideRef.current = true;\n }\n }, [onFocus, selectedValue, name]);\n\n const handleMouseOver = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n },\n [],\n );\n\n // Handle focus and blur of hidden select element\n useEffect(() => {\n const select = selectRef.current;\n const searchField = searchFieldRef.current;\n const button = buttonRef.current;\n const componentRootElement = componentRootElementRef.current;\n\n select?.addEventListener(\"focus\", () => {\n showSearchInputField ? searchField?.focus() : button?.focus();\n });\n select?.addEventListener(\"blur\", function (this, ev) {\n componentRootElement?.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n\n return () => {\n select?.removeEventListener(\"focus\", () => {\n showSearchInputField\n ? searchField?.focus()\n : button?.focus();\n });\n select?.removeEventListener(\"blur\", function (this, ev) {\n componentRootElement?.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n };\n }, [showSearchInputField]);\n\n /// Tastaturnavigasjon\n\n // Add support for opening dropdown with arrowkey down as expected from native select\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (\n (e.key === \"ArrowDown\" || e.key === \" \") &&\n !dropdownIsShown\n ) {\n e.preventDefault();\n e.stopPropagation();\n setShown(true);\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n }\n },\n [dropdownIsShown],\n );\n\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n\n const listElement = dropdownRef.current;\n if (listElement) {\n if (isSearchable) {\n // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n // den valgte verdien.\n focusSelected(listElement, undefined);\n } else {\n focusSelected(listElement, selectedValue);\n }\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n } else if (e.key === \"Tab\" && !e.shiftKey) {\n const listElement = dropdownRef.current;\n if (listElement) {\n e.preventDefault();\n e.stopPropagation();\n focusSelected(listElement, selectedValue);\n }\n } else if (e.key === \"Enter\" && dropdownIsShown) {\n // Should not propagate Enter keyevent because form might submit\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [dropdownRef, selectedValue, isSearchable, dropdownIsShown],\n );\n\n // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey && searchFieldRef.current) {\n searchFieldRef.current.focus();\n } else if (buttonRef.current) {\n // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n setSelectedValue(e.currentTarget.value);\n setShown(false);\n buttonRef.current.focus();\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchFieldRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchFieldRef.current\n ) {\n searchFieldRef.current.focus();\n }\n }\n }\n },\n [dropdownRef],\n );\n\n // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && dropdownIsShown) {\n setShown(false);\n }\n };\n if (typeof window !== \"undefined\" && dropdownIsShown) {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [dropdownIsShown]);\n\n return (\n <>\n <select\n name={name}\n tabIndex={-1}\n data-testid=\"jkl-native-select\"\n className=\"jkl-sr-only\"\n aria-hidden\n ref={unifiedSelectRef}\n value={selectedValue}\n onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n >\n <option value=\"\" />{\" \"}\n {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n {visibleItems.map((item) => (\n <option\n key={`${listId}-opt-${item.value}`}\n hidden={!item.visible}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <InputGroup\n ref={componentRootElementRef}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--open\":\n dropdownIsShown &&\n visibleItems.some((item) => item.visible),\n \"jkl-select--no-value\": !hasSelectedValue,\n \"jkl-select--invalid\": !!errorLabel || invalid,\n })}\n tooltip={\n tooltip && React.isValidElement<PopupTipProps>(tooltip)\n ? React.cloneElement(tooltip, {\n triggerProps: {\n ...tooltip.props.triggerProps,\n onFocus: (\n e: FocusEvent<HTMLButtonElement>,\n ) => {\n tooltip.props.triggerProps?.onFocus?.(\n e,\n );\n close();\n },\n },\n })\n : null\n }\n {...rest}\n id={isSearchable ? searchInputId : buttonId}\n style={\n {\n \"--jkl-select-max-shown-options\": maxShownOptions,\n ...style,\n } as CSSProperties\n }\n density={density}\n label={label}\n labelProps={{\n id: labelId,\n srOnly: inline,\n ...labelProps,\n htmlFor: isSearchable ? searchInputId : buttonId,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n render={({\n \"aria-invalid\": ariaInvalid,\n ...inputProps\n }) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n {isSearchable && (\n <input\n {...inputProps}\n aria-invalid={ariaInvalid}\n id={searchInputId}\n hidden={!showSearchInputField}\n ref={searchFieldRef}\n placeholder=\"Søk\"\n value={searchValue}\n onChange={(e) =>\n setSearchValue(e.target.value)\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={listId}\n aria-expanded={dropdownIsShown}\n role=\"combobox\"\n onKeyDown={handleSearchOnKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onClick={(e) => {\n e.stopPropagation();\n }}\n />\n )}\n {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n <button\n // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n aria-invalid={ariaInvalid}\n {...inputProps}\n id={buttonId}\n ref={buttonRef}\n hidden={showSearchInputField}\n type=\"button\"\n name={`${name}-btn`}\n className={clsx(\"jkl-select__button\", {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n })}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel || \"Velg\"\n },${label}`}\n aria-expanded={dropdownIsShown}\n aria-controls={listId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOnKeyDown}\n onClick={toggleListVisibility}\n onMouseDown={(e) => {\n // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n // https://twitter.com/MilesSorce/status/1278762360669265925\n e.preventDefault();\n buttonRef.current?.focus();\n }}\n >\n {selectedValueLabel}\n </button>\n <div\n id={listId}\n ref={dropdownRef}\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n hidden={\n !dropdownIsShown ||\n visibleItems.every((item) => !item.visible)\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n >\n {visibleItems.map((item, i) =>\n // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n item.visible ? (\n <button\n key={`${listId}-${item.value}`}\n hidden={!item.visible}\n type=\"button\"\n id={`${listId}__${toLower(\n item.value,\n )}`}\n className=\"jkl-select__option\"\n data-testid=\"jkl-select__option\"\n aria-selected={\n item.value === selectedValue\n }\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"option\"\n value={item.value}\n data-testautoid={`jkl-select__option-${i}`}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={handleMouseOver}\n >\n {item.label}\n {item.description ? (\n <span className=\"jkl-select__option-description\">\n {item.description}\n </span>\n ) : null}\n </button>\n ) : null,\n )}\n </div>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!dropdownIsShown}\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n </>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","componentRootElement","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.focusSelected=function(e,o){let t=null;o&&(t=e.querySelector('[aria-selected="true"]:not([hidden])')),(!o||!t)&&(t=e.querySelector('[role="option"]')),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.focusSelected=function(e,o){let t=null;o&&(t=e.querySelector('[aria-selected="true"]:not([hidden])')),(!o||!t)&&(t=e.querySelector('[role="option"]')),t?.focus(),e.scrollTop=t?.offsetTop||0},exports.toLower=function(e=""){return e.toLowerCase().replace(/[\W_]+/g,"")};
|
|
2
2
|
//# sourceMappingURL=select-utils.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-utils.cjs","sources":["../../../../src/components/select/select-utils.ts"],"sourcesContent":["export function toLower(str = \"\") {\n return str.toLowerCase().replace(/[\\W_]+/g, \"\"); // strip all non-alphanumeric chars\n}\n\nexport function focusSelected(\n listEl: HTMLElement,\n selected: string | undefined,\n) {\n let focusedItem: HTMLElement | null = null;\n if (selected) {\n // Move focus to selected option\n focusedItem = listEl.querySelector(\n `[aria-selected=\"true\"]:not([hidden])`,\n );\n }\n if (!selected || !focusedItem) {\n // Move focus to first option if either no selected value or the value could not be found.\n // This may happen with searchable selects if the currently selected value is filtered out.\n focusedItem = listEl.querySelector('[role=\"option\"]');\n }\n focusedItem?.focus();\n // Make sure the selected/focused item is visible in the list if it scrolls\n listEl.scrollTop = focusedItem?.offsetTop || 0;\n}\n"],"names":["listEl","selected","focusedItem","querySelector","focus","scrollTop","offsetTop","str","toLowerCase","replace"],"mappings":"sGAIgB,SACZA,EACAC,GAEA,IAAIC,EAAkC,KAClCD,IAEAC,EAAcF,EAAOG,cACjB,2CAGHF,IAAaC,KAGAA,EAAAF,EAAOG,cAAc,
|
|
1
|
+
{"version":3,"file":"select-utils.cjs","sources":["../../../../src/components/select/select-utils.ts"],"sourcesContent":["export function toLower(str = \"\") {\n return str.toLowerCase().replace(/[\\W_]+/g, \"\"); // strip all non-alphanumeric chars\n}\n\nexport function focusSelected(\n listEl: HTMLElement,\n selected: string | undefined,\n) {\n let focusedItem: HTMLElement | null = null;\n if (selected) {\n // Move focus to selected option\n focusedItem = listEl.querySelector(\n `[aria-selected=\"true\"]:not([hidden])`,\n );\n }\n if (!selected || !focusedItem) {\n // Move focus to first option if either no selected value or the value could not be found.\n // This may happen with searchable selects if the currently selected value is filtered out.\n focusedItem = listEl.querySelector('[role=\"option\"]');\n }\n focusedItem?.focus();\n // Make sure the selected/focused item is visible in the list if it scrolls\n listEl.scrollTop = focusedItem?.offsetTop || 0;\n}\n"],"names":["listEl","selected","focusedItem","querySelector","focus","scrollTop","offsetTop","str","toLowerCase","replace"],"mappings":"sGAIgB,SACZA,EACAC,GAEA,IAAIC,EAAkC,KAClCD,IAEAC,EAAcF,EAAOG,cACjB,2CAGHF,IAAaC,KAGAA,EAAAF,EAAOG,cAAc,oBAEvCD,GAAaE,QAENJ,EAAAK,UAAYH,GAAaI,WAAa,CACjD,kBAvBgB,SAAQC,EAAM,IAC1B,OAAOA,EAAIC,cAAcC,QAAQ,UAAW,GAChD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs");require("react");const t=require("../../hooks/useId/useId.cjs"),a=require("../message/DismissButton.cjs"),i=require("./common/MessageIcon.cjs");function m(m){return({id:n,className:r,density:o,maxContentWidth:c,paddingLeft:d,role:l="status",dismissed:g,dismissAction:u,children:y,...j})=>{const x=t.useId(n||"jkl-system-message",{generateSuffix:!n});return s.jsx("div",{role:l,...j,id:x,className:e.clsx("jkl-system-message",`jkl-system-message--${m}`,r,{"jkl-system-message--dismissed":g}),"data-density":o,children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:c,paddingLeft:d},children:[s.jsx(i.MessageIcon,{messageType:m}),s.jsx("span",{className:"jkl-system-message__message",children:y}),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs");require("react");const t=require("../../hooks/useId/useId.cjs"),a=require("../message/DismissButton.cjs"),i=require("./common/MessageIcon.cjs");function m(m){return({id:n,className:r,density:o,maxContentWidth:c,paddingLeft:d,role:l="status",dismissed:g,dismissAction:u,children:y,...j})=>{const x=t.useId(n||"jkl-system-message",{generateSuffix:!n});return s.jsx("div",{role:l,...j,id:x,className:e.clsx("jkl-system-message",`jkl-system-message--${m}`,r,{"jkl-system-message--dismissed":g}),"data-density":o,children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:c,paddingLeft:d},children:[s.jsx(i.MessageIcon,{messageType:m}),s.jsx("span",{className:"jkl-system-message__message",children:y}),u?.handleDismiss&&s.jsx(a.DismissButton,{"data-theme":"light","aria-controls":x,className:"jkl-system-message__dismiss-button",label:u.buttonTitle||"Lukk",onClick:u.handleDismiss})]})})}}const n=m("info");n.displayName="InfoSystemMessage";const r=m("error");r.displayName="ErrorSystemMessage";const o=m("warning");o.displayName="WarningSystemMessage";const c=m("success");c.displayName="SuccessSystemMessage",exports.ErrorSystemMessage=r,exports.InfoSystemMessage=n,exports.SuccessSystemMessage=c,exports.WarningSystemMessage=o;
|
|
2
2
|
//# sourceMappingURL=SystemMessage.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nfunction systemFactory(\n messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n density,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id || \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n `jkl-system-message--${messageType}`,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n data-density={density}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n data-theme=\"light\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon messageType={messageType} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n data-theme=\"light\"\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"6SASA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEG,MAAAC,EAAWC,EAAAA,MAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAAA,KACP,qBACA,uBAAuBf,IACvBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAAA,KAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYnB,YAAAA,IACZc,EAAAA,IAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,
|
|
1
|
+
{"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nfunction systemFactory(\n messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n density,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id || \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n `jkl-system-message--${messageType}`,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n data-density={density}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n data-theme=\"light\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon messageType={messageType} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n data-theme=\"light\"\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"6SASA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEG,MAAAC,EAAWC,EAAAA,MAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAAA,KACP,qBACA,uBAAuBf,IACvBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAAA,KAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYnB,YAAAA,IACZc,EAAAA,IAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,IAEJD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,aAAW,QACX,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAIvC,CAIZ,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),a=require("react"),l=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),t=require("./tableContext.cjs"),i=a.forwardRef(((a,i)=>{const{bold:s=!0,density:c,sortable:n,className:o,scope:d="col",srOnly:b,align:j="left",children:h,onClick:u,...k}=a,{density:x}=t.useTableContext();return e.jsxs("th",{className:r.clsx("jkl-table-header",o,{"jkl-table-header--bold":s,"jkl-table-header--align-right":"right"===j,"jkl-table-header--align-center":"center"===j,"jkl-table-header--sr-only":b,"jkl-table-header--sortable":typeof n<"u"}),scope:d,onClick:e=>{u?.(e),n?.onClick()},...k,"data-density":c||x,ref:i,children:[h,n&&e.jsx("div",{className:r.clsx("jkl-table-header__arrows",{"jkl-table-header__arrows--active":!!n.direction}),children:n.direction&&e.jsx(l.ArrowVerticalAnimated,{pointingDown:"desc"===n.direction,bold:!0})})]})}));i.displayName="TableHeader",exports.TableHeader=i;
|
|
2
2
|
//# sourceMappingURL=TableHeader.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.cjs","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, type MouseEventHandler } from \"react\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TableHeaderProps } from \"./types.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n (props, ref) => {\n const {\n bold = true,\n density,\n sortable,\n className,\n scope = \"col\",\n srOnly,\n align = \"left\",\n children,\n onClick,\n ...rest\n } = props;\n const { density: contextDensity } = useTableContext();\n\n const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n onClick?.(e);\n sortable?.onClick();\n };\n\n return (\n <th\n className={clsx(\"jkl-table-header\", className, {\n [\"jkl-table-header--bold\"]: bold,\n [\"jkl-table-header--align-right\"]: align === \"right\",\n [\"jkl-table-header--align-center\"]: align === \"center\",\n [\"jkl-table-header--sr-only\"]: srOnly,\n [\"jkl-table-header--sortable\"]:\n typeof sortable !== \"undefined\",\n })}\n scope={scope}\n onClick={handleClick}\n {...rest}\n data-density={density || contextDensity}\n ref={ref}\n >\n {children}\n {sortable && (\n <div\n className={clsx(\"jkl-table-header__arrows\", {\n \"jkl-table-header__arrows--active\": Boolean(\n sortable.direction,\n ),\n })}\n >\n {sortable.direction && (\n <ArrowVerticalAnimated\n pointingDown={sortable.direction === \"desc\"}\n bold\n />\n )}\n </div>\n )}\n </th>\n );\n },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"8QAQMA,EAAcC,EAAAA,YAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,oBAQhC,OAAAC,EAAAA,KAAC,KAAA,CACGT,UAAWU,EAAAA,KAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,
|
|
1
|
+
{"version":3,"file":"TableHeader.cjs","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, type MouseEventHandler } from \"react\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TableHeaderProps } from \"./types.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n (props, ref) => {\n const {\n bold = true,\n density,\n sortable,\n className,\n scope = \"col\",\n srOnly,\n align = \"left\",\n children,\n onClick,\n ...rest\n } = props;\n const { density: contextDensity } = useTableContext();\n\n const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n onClick?.(e);\n sortable?.onClick();\n };\n\n return (\n <th\n className={clsx(\"jkl-table-header\", className, {\n [\"jkl-table-header--bold\"]: bold,\n [\"jkl-table-header--align-right\"]: align === \"right\",\n [\"jkl-table-header--align-center\"]: align === \"center\",\n [\"jkl-table-header--sr-only\"]: srOnly,\n [\"jkl-table-header--sortable\"]:\n typeof sortable !== \"undefined\",\n })}\n scope={scope}\n onClick={handleClick}\n {...rest}\n data-density={density || contextDensity}\n ref={ref}\n >\n {children}\n {sortable && (\n <div\n className={clsx(\"jkl-table-header__arrows\", {\n \"jkl-table-header__arrows--active\": Boolean(\n sortable.direction,\n ),\n })}\n >\n {sortable.direction && (\n <ArrowVerticalAnimated\n pointingDown={sortable.direction === \"desc\"}\n bold\n />\n )}\n </div>\n )}\n </th>\n );\n },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"8QAQMA,EAAcC,EAAAA,YAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,oBAQhC,OAAAC,EAAAA,KAAC,KAAA,CACGT,UAAWU,EAAAA,KAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1DN,IAAUM,GACVZ,GAAUM,SAAQ,KAeVC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAAA,IAAC,MAAA,CACGZ,UAAWU,OAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAAAA,IAACE,EAAAA,sBAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAKxB,IAKZJ,EAAYuB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("./tableContext.cjs"),r=require("./tableSectionContext.cjs"),i=t.forwardRef((({className:i,clickable:s,children:c,...o},n)=>{const{density:d}=a.useTableContext(),{isTableBody:k}=r.useTableSectionContext(),[b,u]=t.useState(s?.isClicked||!1);return t.useEffect((()=>{u((e=>void 0!==s?.isClicked?s.isClicked:e))}),[s?.isClicked]),k&&s?e.jsx("tr",{onClick:function(e){u(!b),s.onClick(e)},onKeyPress:function(e){(" "===e.key||"Enter"===e.key)&&(e.preventDefault(),u(!b),s.onClick(e))},"data-testid":"jkl-clickable-table-row",className:l.clsx("jkl-table-row","jkl-table-row--clickable",i,{"jkl-table-row--clicked":s?.markClickedRows&&b}),"aria-label":"Klikkbar rad","aria-pressed":s?.markClickedRows?b?"true":"false":void 0,tabIndex:0,...o,"data-density":d,ref:n,children:c}):e.jsx("tr",{className:l.clsx("jkl-table-row",i),...o,ref:n,"data-density":d,children:c})}));i.displayName="TableRow",exports.TableRow=i;
|
|
2
2
|
//# sourceMappingURL=TableRow.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.cjs","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\nimport type { TableRowProps } from \"./types.js\";\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, clickable, children, ...rest }, ref) => {\n const { density } = useTableContext();\n const { isTableBody } = useTableSectionContext();\n\n const [clicked, setClicked] = useState(clickable?.isClicked || false);\n\n useEffect(() => {\n setClicked((prev) =>\n clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n );\n }, [clickable?.isClicked]);\n\n if (isTableBody && clickable) {\n return (\n <tr\n onClick={function handleOnClick(e) {\n setClicked(!clicked);\n clickable.onClick(e);\n }}\n onKeyPress={function handleKeyPress(e) {\n if (e.key === \" \" || e.key === \"Enter\") {\n e.preventDefault();\n setClicked(!clicked);\n clickable.onClick(e);\n }\n }}\n data-testid=\"jkl-clickable-table-row\"\n className={clsx(\n \"jkl-table-row\",\n \"jkl-table-row--clickable\",\n className,\n {\n [\"jkl-table-row--clicked\"]:\n clickable?.markClickedRows && clicked,\n },\n )}\n aria-label=\"Klikkbar rad\"\n aria-pressed={\n clickable?.markClickedRows\n ? clicked\n ? \"true\"\n : \"false\"\n : undefined\n }\n tabIndex={0}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children}\n </tr>\n );\n }\n\n return (\n <tr\n className={clsx(\"jkl-table-row\", className)}\n {...rest}\n ref={ref}\n data-density={density}\n >\n {children}\n </tr>\n );\n },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"uPAMMA,EAAWC,EAAAA,YACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpC,MAAEC,QAAAA,GAAYC,qBACZC,YAAAA,GAAgBC,4BAEjBC,EAASC,GAAcC,EAASA,
|
|
1
|
+
{"version":3,"file":"TableRow.cjs","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\nimport type { TableRowProps } from \"./types.js\";\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, clickable, children, ...rest }, ref) => {\n const { density } = useTableContext();\n const { isTableBody } = useTableSectionContext();\n\n const [clicked, setClicked] = useState(clickable?.isClicked || false);\n\n useEffect(() => {\n setClicked((prev) =>\n clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n );\n }, [clickable?.isClicked]);\n\n if (isTableBody && clickable) {\n return (\n <tr\n onClick={function handleOnClick(e) {\n setClicked(!clicked);\n clickable.onClick(e);\n }}\n onKeyPress={function handleKeyPress(e) {\n if (e.key === \" \" || e.key === \"Enter\") {\n e.preventDefault();\n setClicked(!clicked);\n clickable.onClick(e);\n }\n }}\n data-testid=\"jkl-clickable-table-row\"\n className={clsx(\n \"jkl-table-row\",\n \"jkl-table-row--clickable\",\n className,\n {\n [\"jkl-table-row--clicked\"]:\n clickable?.markClickedRows && clicked,\n },\n )}\n aria-label=\"Klikkbar rad\"\n aria-pressed={\n clickable?.markClickedRows\n ? clicked\n ? \"true\"\n : \"false\"\n : undefined\n }\n tabIndex={0}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children}\n </tr>\n );\n }\n\n return (\n <tr\n className={clsx(\"jkl-table-row\", className)}\n {...rest}\n ref={ref}\n data-density={density}\n >\n {children}\n </tr>\n );\n },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"uPAMMA,EAAWC,EAAAA,YACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpC,MAAEC,QAAAA,GAAYC,qBACZC,YAAAA,GAAgBC,4BAEjBC,EAASC,GAAcC,EAASA,SAAAV,GAAWW,YAAa,GAQ/D,OANAC,EAAAA,WAAU,KACNH,GAAYI,QACiB,IAAzBb,GAAWW,UAA0BX,EAAUW,UAAYE,GAC/D,GACD,CAACb,GAAWW,YAEXL,GAAeN,EAEXc,EAAAA,IAAC,KAAA,CACGC,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EAAAA,KACP,gBACA,2BACArB,EACA,CACK,yBACGC,GAAWqB,iBAAmBb,IAG1C,aAAW,eACX,eACIR,GAAWqB,gBACLb,EACI,OACA,aACJ,EAEVc,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,IAMTa,EAAAA,IAAC,KAAA,CACGf,UAAWqB,EAAAA,KAAK,gBAAiBrB,MAC7BG,EACJC,IAAAA,EACA,eAAcC,EAEbH,SAAAA,GACL,IAKZJ,EAAS0B,YAAc"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={columns:["Forfallsdato","Type","Beløp","Status","Produkt","Kontonummer","KID","Betalingstype"],rows:[[new Date(2025,10,15),"Skade",612.32,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,9,15),"Person",402.67,"Påminnelse",["Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,8,15),"Person",2412.67,"Inkassovarsel",["Bilforsikring","Katteforsikring","Båtforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,7,15),"Person",719.17,"Faktura",["Båtforsikring","Hundeforsikring","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,6,15),"Skade",992.01,"Faktura",["Bilforsikring","Hundeforsikring","Elsparkesykkel"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,5,15),"Person",772.79,"Faktura",["Bilforsikring","Hus","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,4,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,3,15),"Person",772.79,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,2,15),"Person",772.79,"Faktura",["Bil","Hus","Innbo"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,1,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring","Katteforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,0,15),"Person",772.79,"Faktura",["Hundeforsikring","Barneforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,11,15),"Person",772.79,"Faktura",["Elsparkesykkel"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,10,15),"Person",772.79,"Faktura",["Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,9,15),"Person",772.79,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,8,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"]]};exports.faktura=r,exports.skadesaker={columns:["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],rows:[["24.02.2025","20-1234567","010203 99887","Ola Nordmann","Opprettet","Siri Saksbehandler"],["13.04.2019","20-8382811","010203 99887","Kari Nordkvinne","Opprettet","Siri Saksbehandler"],["31.07.2017","20-1111","010203 99887","Kari Nordkvinne","Opprettet","Per Persen"]]};
|
|
2
|
+
//# sourceMappingURL=data.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data.cjs","sources":["../../../../../src/components/table/stories/data.ts"],"sourcesContent":["export const skadesaker = {\n columns: [\n \"Dato\",\n \"Saksnummer\",\n \"Kundenummer\",\n \"Kundenavn\",\n \"Milepæl\",\n \"Følger saken\",\n ],\n rows: [\n [\n \"24.02.2025\",\n \"20-1234567\",\n \"010203 99887\",\n \"Ola Nordmann\",\n \"Opprettet\",\n \"Siri Saksbehandler\",\n ],\n [\n \"13.04.2019\",\n \"20-8382811\",\n \"010203 99887\",\n \"Kari Nordkvinne\",\n \"Opprettet\",\n \"Siri Saksbehandler\",\n ],\n [\n \"31.07.2017\",\n \"20-1111\",\n \"010203 99887\",\n \"Kari Nordkvinne\",\n \"Opprettet\",\n \"Per Persen\",\n ],\n ],\n};\n\nexport const faktura = {\n columns: [\n \"Forfallsdato\",\n \"Type\",\n \"Beløp\",\n \"Status\",\n \"Produkt\",\n \"Kontonummer\",\n \"KID\",\n \"Betalingstype\",\n ],\n rows: [\n [\n new Date(2025, 10, 15),\n \"Skade\",\n 612.32,\n \"Faktura\",\n [\"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 9, 15),\n \"Person\",\n 402.67,\n \"Påminnelse\",\n [\"Hundeforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 8, 15),\n \"Person\",\n 2412.67,\n \"Inkassovarsel\",\n [\"Bilforsikring\", \"Katteforsikring\", \"Båtforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 7, 15),\n \"Person\",\n 719.17,\n \"Faktura\",\n [\"Båtforsikring\", \"Hundeforsikring\", \"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 6, 15),\n \"Skade\",\n 992.01,\n \"Faktura\",\n [\"Bilforsikring\", \"Hundeforsikring\", \"Elsparkesykkel\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 5, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\", \"Hus\", \"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 4, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\", \"Hundeforsikring\", \"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 3, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 2, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bil\", \"Hus\", \"Innbo\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 1, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\", \"Hundeforsikring\", \"Katteforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 0, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Hundeforsikring\", \"Barneforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2024, 11, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Elsparkesykkel\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2024, 10, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Hundeforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2024, 9, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2024, 8, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\", \"Hundeforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n ],\n};"],"names":["faktura","columns","rows","Date"],"mappings":"gFAAO,MAqCMA,EAAU,CACnBC,QAAS,CACL,eACA,OACA,QACA,SACA,UACA,cACA,MACA,iBAEJC,KAAM,CACF,CACI,IAAIC,KAAK,KAAM,GAAI,IACnB,QACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,aACA,CAAC,mBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,QACA,gBACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,QACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,kBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,MAAO,iBACzB,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,MAAO,MAAO,SACf,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,mBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,kBAAmB,mBACpB,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,GAAI,IACnB,SACA,OACA,UACA,CAAC,kBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,GAAI,IACnB,SACA,OACA,UACA,CAAC,mBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,mBAClB,gBACA,iBACA,mDArMc,CACtBF,QAAS,CACL,OACA,aACA,cACA,YACA,UACA,gBAEJC,KAAM,CACF,CACI,aACA,aACA,eACA,eACA,YACA,sBAEJ,CACI,aACA,aACA,eACA,kBACA,YACA,sBAEJ,CACI,aACA,UACA,eACA,kBACA,YACA"}
|