@fremtind/jokul 0.27.4 → 0.27.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/card/Card.cjs.map +1 -1
- package/build/cjs/components/card/CardImage.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/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/expander/Expander.cjs +1 -1
- package/build/cjs/components/expander/Expander.cjs.map +1 -1
- package/build/cjs/components/feedback/questions/ContactQuestion.cjs.map +1 -1
- package/build/cjs/components/flex/Flex.cjs.map +1 -1
- package/build/cjs/components/input-group/SupportLabel.cjs +1 -1
- package/build/cjs/components/input-group/SupportLabel.cjs.map +1 -1
- package/build/cjs/components/link-list/LinkList.cjs +1 -1
- package/build/cjs/components/link-list/LinkList.cjs.map +1 -1
- package/build/cjs/components/menu/MenuItem.cjs +1 -1
- package/build/cjs/components/menu/MenuItem.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/DismissButton.cjs +1 -1
- package/build/cjs/components/message/DismissButton.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/Modal.cjs +1 -1
- package/build/cjs/components/modal/Modal.cjs.map +1 -1
- package/build/cjs/components/pagination/Pagination.cjs +1 -1
- package/build/cjs/components/pagination/Pagination.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/select/NativeSelect.cjs +1 -1
- package/build/cjs/components/select/NativeSelect.cjs.map +1 -1
- package/build/cjs/components/select/Select.cjs +1 -1
- package/build/cjs/components/select/Select.cjs.map +1 -1
- package/build/cjs/components/system-message/common/DismissButton.cjs +1 -1
- package/build/cjs/components/system-message/common/DismissButton.cjs.map +1 -1
- package/build/cjs/components/system-message/common/MessageIcon.cjs +1 -1
- package/build/cjs/components/system-message/common/MessageIcon.cjs.map +1 -1
- package/build/cjs/components/table/ExpandableTableRow.cjs +1 -1
- package/build/cjs/components/table/ExpandableTableRow.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/TablePagination.cjs +1 -1
- package/build/cjs/components/table/TablePagination.cjs.map +1 -1
- package/build/cjs/components/tag/Tag.cjs +1 -1
- package/build/cjs/components/tag/Tag.cjs.map +1 -1
- package/build/cjs/components/text-input/BaseTextInput.cjs.map +1 -1
- package/build/cjs/components/text-input/BaseTextInput.d.cts +2 -2
- package/build/cjs/components/toast/Toast.cjs +1 -1
- package/build/cjs/components/toast/Toast.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/ToggleSwitch.d.cts +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/PopupTip.d.cts +1 -1
- package/build/es/components/card/Card.js.map +1 -1
- package/build/es/components/card/CardImage.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/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/expander/Expander.js +1 -1
- package/build/es/components/expander/Expander.js.map +1 -1
- package/build/es/components/feedback/questions/ContactQuestion.js.map +1 -1
- package/build/es/components/flex/Flex.js.map +1 -1
- package/build/es/components/input-group/SupportLabel.js +1 -1
- package/build/es/components/input-group/SupportLabel.js.map +1 -1
- package/build/es/components/link-list/LinkList.js +1 -1
- package/build/es/components/link-list/LinkList.js.map +1 -1
- package/build/es/components/menu/MenuItem.js +1 -1
- package/build/es/components/menu/MenuItem.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/DismissButton.js +1 -1
- package/build/es/components/message/DismissButton.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/Modal.js +1 -1
- package/build/es/components/modal/Modal.js.map +1 -1
- package/build/es/components/pagination/Pagination.js +1 -1
- package/build/es/components/pagination/Pagination.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/select/NativeSelect.js +1 -1
- package/build/es/components/select/NativeSelect.js.map +1 -1
- package/build/es/components/select/Select.js +1 -1
- package/build/es/components/select/Select.js.map +1 -1
- package/build/es/components/system-message/common/DismissButton.js +1 -1
- package/build/es/components/system-message/common/DismissButton.js.map +1 -1
- package/build/es/components/system-message/common/MessageIcon.js +1 -1
- package/build/es/components/system-message/common/MessageIcon.js.map +1 -1
- package/build/es/components/table/ExpandableTableRow.js +1 -1
- package/build/es/components/table/ExpandableTableRow.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/TablePagination.js +1 -1
- package/build/es/components/table/TablePagination.js.map +1 -1
- package/build/es/components/tag/Tag.js +1 -1
- package/build/es/components/tag/Tag.js.map +1 -1
- package/build/es/components/text-input/BaseTextInput.d.ts +2 -2
- package/build/es/components/text-input/BaseTextInput.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/toggle-switch/ToggleSwitch.d.ts +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/tooltip/PopupTip.d.ts +1 -1
- package/build/es/components/tooltip/PopupTip.js +1 -1
- package/build/es/components/tooltip/PopupTip.js.map +1 -1
- package/package.json +2 -2
- package/styles/components/button/button.css +2 -2
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +5 -5
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +2 -2
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +2 -2
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-panel/radio-panel.css +2 -2
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/styles.css +35 -35
- package/styles/styles.min.css +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../../../../../src/components/datepicker/internal/Calendar.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useReducer,\n useRef,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { Density } from \"../../../core/types.js\";\nimport { useId } from \"../../../hooks/useId/useId.js\";\nimport {\n ArrowLeftIcon,\n ArrowRightIcon,\n ChevronDownIcon,\n} from \"../../icon/index.js\";\nimport { YearsToShow } from \"../types.js\";\nimport { calendarInitializer, calendarReducer } from \"./calendarReducer.js\";\nimport { useCalendar, UseCalendarProps } from \"./useCalendar.js\";\nimport {\n addMonth,\n DateInfo,\n DEFAULT_YEARS_TO_SHOW,\n getInitialDateShown,\n getMonthSelectOptions,\n getYearSelectOptions,\n isBackDisabled,\n isForwardDisabled,\n subtractMonth,\n} from \"./utils.js\";\n\ninterface CalendarProps\n extends Omit<\n UseCalendarProps,\n \"date\" | \"onOffsetChanged\" | \"offset\" | \"firstDayOfWeek\" | \"selected\"\n > {\n date: Date | null;\n density?: Density;\n defaultSelected?: Date;\n days?: string[];\n months?: string[];\n monthLabel?: string;\n yearLabel?: string;\n yearsToShow?: YearsToShow;\n onTabOutside: React.KeyboardEventHandler;\n}\n\nconst defaultMonths = [\n \"Januar\",\n \"Februar\",\n \"Mars\",\n \"April\",\n \"Mai\",\n \"Juni\",\n \"Juli\",\n \"August\",\n \"September\",\n \"Oktober\",\n \"November\",\n \"Desember\",\n];\n\nconst defaultDays = [\"man\", \"tir\", \"ons\", \"tor\", \"fre\", \"lør\", \"søn\"];\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n (props, ref) => {\n const {\n date,\n defaultSelected,\n density,\n minDate,\n maxDate,\n days = defaultDays,\n months = defaultMonths,\n monthLabel = \"Velg måned\",\n yearLabel = \"Velg år\",\n yearsToShow = DEFAULT_YEARS_TO_SHOW,\n onTabOutside,\n ...rest\n } = props;\n\n const id = useId(\"jkl-calendar\");\n\n const [{ offset, selectedDate, shownDate }, dispatch] = useReducer(\n calendarReducer,\n getInitialDateShown(date, defaultSelected, minDate, maxDate),\n calendarInitializer,\n );\n\n const shownMonth = shownDate.getMonth();\n const shownYear = shownDate.getFullYear();\n\n useEffect(() => {\n dispatch({\n type: \"SET_SELECTED_DATE\",\n newDate: getInitialDateShown(\n date,\n defaultSelected,\n minDate,\n maxDate,\n ),\n });\n }, [date, defaultSelected, minDate, maxDate]);\n\n const onOffsetChanged = useCallback((newOffset: number) => {\n dispatch({\n type: \"SET_OFFSET\",\n newOffset,\n });\n }, []);\n\n const {\n calendars,\n getBackProps,\n getDateProps,\n getForwardProps,\n handleOffsetChanged,\n } = useCalendar({\n date: selectedDate,\n selected: selectedDate,\n minDate,\n maxDate,\n offset,\n onOffsetChanged,\n firstDayOfWeek: 1,\n ...rest,\n });\n\n /// Calendar keyboard navigation\n\n const calendarPaddingRef = useRef<HTMLDivElement>(null);\n const doFocusChange = useCallback(\n (offsetDiff: number) => {\n if (!calendarPaddingRef.current) {\n return;\n }\n\n const e = document.activeElement;\n const buttons =\n calendarPaddingRef.current.querySelectorAll<HTMLButtonElement>(\n 'button.jkl-calendar-date-button:not([data-adjacent=\"true\"]',\n );\n\n const changeFocusTo = async (nextButton: HTMLButtonElement) => {\n e?.setAttribute(\"tabindex\", \"-1\");\n nextButton.setAttribute(\"tabindex\", \"0\");\n nextButton.focus();\n };\n\n buttons.forEach((el, i) => {\n const newNodeKey = i + offsetDiff;\n\n if (el == e) {\n if (\n newNodeKey <= buttons.length - 1 &&\n newNodeKey >= 0\n ) {\n changeFocusTo(buttons[newNodeKey]);\n } else if (offsetDiff < 0) {\n if (isBackDisabled({ calendars, minDate })) {\n return;\n }\n\n // Hvis newNodeKey er utenfor samlingen med knapper så har vi prøvd å gå til\n // en dag utenfor måneden. Er offsetDiff negativ så har vi gått tilbake en\n // måned.\n flushSync(() => {\n handleOffsetChanged(\n offset -\n subtractMonth({\n calendars,\n offset: 1,\n minDate,\n }),\n );\n });\n if (!calendarPaddingRef.current) {\n return;\n }\n const newButtons =\n calendarPaddingRef.current.querySelectorAll<HTMLButtonElement>(\n 'button.jkl-calendar-date-button:not([data-adjacent=\"true\"]',\n );\n // + - = -\n if (newButtons[newButtons.length + newNodeKey]) {\n // Sørg for at ikke både 1. i måneden og valgt dag er fokuserbare\n newButtons[0].setAttribute(\"tabindex\", \"-1\");\n changeFocusTo(\n newButtons[newButtons.length + newNodeKey],\n );\n }\n } else {\n if (isForwardDisabled({ calendars, maxDate })) {\n return;\n }\n\n // Hvis newNodeKey er utenfor samlingen med knapper så har vi prøvd å gå til\n // en dag utenfor måneden. Er offsetDiff positiv så har vi gått frem en\n // måned.\n flushSync(() => {\n handleOffsetChanged(\n offset +\n addMonth({\n calendars,\n offset: 1,\n maxDate,\n }),\n );\n });\n if (!calendarPaddingRef.current) {\n return;\n }\n const newButtons =\n calendarPaddingRef.current.querySelectorAll<HTMLButtonElement>(\n 'button.jkl-calendar-date-button:not([data-adjacent=\"true\"]',\n );\n // NewNodeKey er basert på forrige måneds liste med knapper. For at verdien skal bli\n // riktig i vår nye måned må vi trekke fra anntal dager fra forrige måned.\n if (newButtons[newNodeKey - buttons.length]) {\n // Sørg for at ikke både 1. i måneden og valgt dag er fokuserbare\n newButtons[0].setAttribute(\"tabindex\", \"-1\");\n changeFocusTo(\n newButtons[newNodeKey - buttons.length],\n );\n }\n }\n }\n });\n },\n [\n handleOffsetChanged,\n calendarPaddingRef,\n offset,\n calendars,\n maxDate,\n minDate,\n ],\n );\n\n const handleArrowNavigation = useCallback(\n (event: React.KeyboardEvent) => {\n switch (event.key) {\n case \"ArrowUp\":\n doFocusChange(-7);\n event.preventDefault();\n break;\n case \"ArrowRight\":\n doFocusChange(1);\n event.preventDefault();\n break;\n case \"ArrowDown\":\n doFocusChange(7);\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n doFocusChange(-1);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [doFocusChange],\n );\n\n const handleTabInside: React.KeyboardEventHandler = useCallback(\n (event) => {\n if (event.key !== \"Tab\") return;\n\n const focusableElements =\n calendarPaddingRef.current?.querySelectorAll<HTMLElement>(\n 'button:not([disabled]):not([tabindex=\"-1\"]), select',\n );\n\n if (!focusableElements) return;\n\n const firstElement = focusableElements[0];\n const lastElement =\n focusableElements[focusableElements.length - 1];\n\n if (!event.shiftKey && document.activeElement === lastElement) {\n firstElement.focus();\n event.preventDefault();\n } else if (\n event.shiftKey &&\n document.activeElement === firstElement\n ) {\n lastElement.focus();\n event.preventDefault();\n }\n },\n [],\n );\n\n const isFocusableDate = useCallback(\n (dateInfo: DateInfo) => {\n const { date, selected, selectable, prevMonth, nextMonth } =\n dateInfo;\n\n // Datoen kan ikke velges\n if (!selectable) {\n return false;\n }\n // Datoen er valgt dato\n if (selected) {\n return true;\n }\n // Datoen er første valgbare dato\n if (date.toString() === minDate?.toString()) {\n return true;\n }\n\n // Datoen er første i måneden som vises\n if (\n !prevMonth &&\n !nextMonth &&\n shownDate.getFullYear() === date.getFullYear() &&\n selectedDate.getMonth() !== date.getMonth() &&\n date.getDate() === 1\n ) {\n return true;\n }\n\n return false;\n },\n [shownDate, minDate, selectedDate],\n );\n\n const handleGotoEdgeMonth = useCallback(() => {\n if (\n // Vi er i ferd med å gå til første måned\n minDate &&\n shownDate.getFullYear() - minDate.getFullYear() === 0 &&\n shownDate.getMonth() - minDate.getMonth() === 1\n ) {\n // Fokuser på \"neste månded\"-knappen\n document\n .querySelectorAll<HTMLButtonElement>(\n \".jkl-calendar-navigation__arrow\",\n )[1]\n .focus();\n } else if (\n // Vi er i ferd med å gå til siste måned\n maxDate &&\n maxDate.getFullYear() - shownDate.getFullYear() === 0 &&\n maxDate.getMonth() - shownDate.getMonth() === 1\n ) {\n // Fokuser på \"forrige månded\"-knappen\n document\n .querySelectorAll<HTMLButtonElement>(\n \".jkl-calendar-navigation__arrow\",\n )[0]\n .focus();\n }\n }, [minDate, maxDate, shownDate]);\n\n /// Extended variant events\n\n const handleYearChange = useCallback<\n React.ChangeEventHandler<HTMLSelectElement>\n >(\n (event) => {\n if (event.target.value.length !== 4) {\n return;\n }\n\n const year: number = Number.parseInt(event.target.value);\n if (Number.isNaN(year)) {\n return;\n }\n\n let offset = (year - shownDate.getFullYear()) * 12;\n const expectedDate = new Date(\n shownDate.getFullYear(),\n shownDate.getMonth() + offset,\n shownDate.getDate(),\n );\n\n // Pass på at vi ikke hopper forbi maks. eller min. dato\n if (\n maxDate &&\n maxDate.getFullYear() === expectedDate.getFullYear() &&\n maxDate.getMonth() < expectedDate.getMonth()\n ) {\n offset -= expectedDate.getMonth() - maxDate.getMonth();\n } else if (\n minDate &&\n minDate.getFullYear() === expectedDate.getFullYear() &&\n minDate.getMonth() > expectedDate.getMonth()\n ) {\n offset += minDate.getMonth() - expectedDate.getMonth();\n }\n\n dispatch({\n type: \"ADD_OFFSET\",\n addedOffset: offset,\n });\n\n return;\n },\n [shownDate, minDate, maxDate],\n );\n\n const handleMonthChange = useCallback<\n React.ChangeEventHandler<HTMLSelectElement>\n >(\n (event) => {\n if (!selectedDate && !date) {\n return;\n }\n\n const yearDiff =\n shownDate.getFullYear() -\n (selectedDate || new Date()).getFullYear();\n const monthDiff =\n Number.parseInt(event.target.value) -\n (selectedDate || new Date()).getMonth();\n\n dispatch({\n type: \"SET_OFFSET\",\n newOffset: yearDiff * 12 + monthDiff,\n });\n\n return;\n },\n [selectedDate, date, shownDate],\n );\n\n const yearSelectOptions = getYearSelectOptions(\n shownYear,\n minDate,\n maxDate,\n yearsToShow,\n );\n const monthSelectOptions = getMonthSelectOptions(\n shownYear,\n months,\n minDate,\n maxDate,\n );\n\n return (\n <div\n ref={ref}\n id={id}\n className=\"jkl-calendar\"\n data-testid=\"jkl-calendar\"\n >\n {/* Vi lytter på på trykk på Tab inne i kalenderen for å håndtere fokus */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n className=\"jkl-calendar__padding\"\n ref={calendarPaddingRef}\n onKeyDown={handleTabInside}\n >\n <fieldset className=\"jkl-calendar-navigation\">\n <div>\n <button\n {...getBackProps({\n calendars,\n onClick: handleGotoEdgeMonth,\n })}\n className=\"jkl-calendar-navigation__arrow\"\n type=\"button\"\n >\n <ArrowLeftIcon variant=\"medium\" bold />\n </button>\n <button\n {...getForwardProps({\n calendars,\n onClick: handleGotoEdgeMonth,\n })}\n className=\"jkl-calendar-navigation__arrow\"\n type=\"button\"\n >\n <ArrowRightIcon variant=\"medium\" bold />\n </button>\n </div>\n <div>\n <div className=\"jkl-calendar-navigation-dropdown\">\n <select\n onChange={handleMonthChange}\n className=\"jkl-calendar-navigation-dropdown__select\"\n aria-label={monthLabel}\n value={shownMonth.toString()}\n >\n {monthSelectOptions.map(\n ({ label, value }) => (\n <option key={value} value={value}>\n {label}\n </option>\n ),\n )}\n </select>\n <ChevronDownIcon\n bold\n className=\"jkl-calendar-navigation-dropdown__chevron\"\n />\n </div>\n <div className=\"jkl-calendar-navigation-dropdown\">\n <select\n onChange={handleYearChange}\n className=\"jkl-calendar-navigation-dropdown__select\"\n aria-label={yearLabel}\n value={shownYear.toString()}\n >\n {yearSelectOptions.map((year) => (\n <option key={year} value={year}>\n {year}\n </option>\n ))}\n </select>\n <ChevronDownIcon\n bold\n className=\"jkl-calendar-navigation-dropdown__chevron\"\n />\n </div>\n </div>\n </fieldset>\n {calendars.map((calendar) => (\n <table\n className=\"jkl-calendar-table\"\n key={`${calendar.month}${calendar.year}`}\n data-testid=\"jkl-datepicker-calendar\"\n >\n <caption className=\"jkl-sr-only\">\n {months[calendar.month]}, {calendar.year}\n </caption>\n <thead>\n <tr>\n {days.map((weekday) => (\n <th\n key={`${calendar.month}${calendar.year}${weekday}`}\n >\n {weekday}\n </th>\n ))}\n </tr>\n </thead>\n <tbody data-testid=\"jkl-datepicker-dates\">\n {calendar.weeks.map((week, weekIndex) => (\n <tr\n key={`${calendar.month}${calendar.year}${weekIndex}`}\n >\n {week.map((dateInfo, index) => {\n const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;\n if (typeof dateInfo === \"string\") {\n return (\n <td\n className=\"jkl-calendar__date jkl-calendar__date--empty\"\n key={key}\n >\n {dateInfo}\n </td>\n );\n }\n const {\n date,\n selectable,\n today,\n prevMonth,\n nextMonth,\n } = dateInfo;\n\n return (\n <td key={key}>\n <button\n {...getDateProps({\n dateObj: dateInfo,\n })}\n type=\"button\"\n className=\"jkl-calendar-date-button\"\n tabIndex={\n isFocusableDate(\n dateInfo,\n )\n ? 0\n : -1\n }\n aria-label={`${date.getDate()}. ${months[\n date.getMonth()\n ].toLowerCase()}`}\n aria-current={\n today\n ? \"date\"\n : undefined\n }\n data-adjacent={\n prevMonth ||\n nextMonth\n ? \"true\"\n : undefined\n }\n disabled={!selectable}\n onKeyDown={\n handleArrowNavigation\n }\n >\n <span aria-hidden=\"true\">\n {date.getDate()}\n </span>\n </button>\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n ))}\n </div>\n </div>\n );\n },\n);\n\nCalendar.displayName = \"Calendar\";\n"],"names":["defaultMonths","defaultDays","Calendar","forwardRef","props","ref","date","defaultSelected","density","minDate","maxDate","days","months","monthLabel","yearLabel","yearsToShow","DEFAULT_YEARS_TO_SHOW","onTabOutside","rest","id","useId","offset","selectedDate","shownDate","dispatch","useReducer","calendarReducer","getInitialDateShown","calendarInitializer","shownMonth","getMonth","shownYear","getFullYear","useEffect","type","newDate","onOffsetChanged","useCallback","newOffset","calendars","getBackProps","getDateProps","getForwardProps","handleOffsetChanged","useCalendar","selected","firstDayOfWeek","calendarPaddingRef","useRef","doFocusChange","offsetDiff","current","e","document","activeElement","buttons","querySelectorAll","changeFocusTo","async","nextButton","setAttribute","focus","forEach","el","i","newNodeKey","length","isBackDisabled","flushSync","subtractMonth","newButtons","isForwardDisabled","addMonth","handleArrowNavigation","event","key","preventDefault","handleTabInside","focusableElements","_a","firstElement","lastElement","shiftKey","isFocusableDate","dateInfo","selectable","prevMonth","nextMonth","toString","getDate","handleGotoEdgeMonth","handleYearChange","target","value","year","Number","parseInt","isNaN","expectedDate","Date","addedOffset","handleMonthChange","yearDiff","monthDiff","yearSelectOptions","getYearSelectOptions","monthSelectOptions","getMonthSelectOptions","jsx","className","children","jsxs","onKeyDown","onClick","ArrowLeftIcon","variant","bold","ArrowRightIcon","onChange","map","label","ChevronDownIcon","calendar","month","weekday","weeks","week","weekIndex","index","today","dateObj","tabIndex","toLowerCase","disabled","displayName"],"mappings":"gjEA8CA,MAAMA,EAAgB,CAClB,SACA,UACA,OACA,QACA,MACA,OACA,OACA,SACA,YACA,UACA,WACA,YAGEC,EAAc,CAAC,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAElDC,EAAWC,GACpB,CAACC,EAAOC,KACE,MACFC,KAAAA,EACAC,gBAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAOV,EACPW,OAAAA,EAASZ,EACTa,WAAAA,EAAa,aACbC,UAAAA,EAAY,UACZC,YAAAA,EAAcC,EACdC,aAAAA,KACGC,GACHd,EAEEe,EAAKC,EAAM,kBAERC,OAAAA,EAAQC,aAAAA,EAAcC,UAAAA,GAAaC,GAAYC,EACpDC,EACAC,EAAoBrB,EAAMC,EAAiBE,EAASC,GACpDkB,GAGEC,EAAaN,EAAUO,WACvBC,EAAYR,EAAUS,cAE5BC,GAAU,KACGT,EAAA,CACLU,KAAM,oBACNC,QAASR,EACLrB,EACAC,EACAE,EACAC,IAEP,GACF,CAACJ,EAAMC,EAAiBE,EAASC,IAE9B0B,MAAAA,EAAkBC,GAAaC,IACxBd,EAAA,CACLU,KAAM,aACNI,UAAAA,GACH,GACF,KAGCC,UAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,gBAAAA,EACAC,oBAAAA,GACAC,EAAY,CACZtC,KAAMgB,EACNuB,SAAUvB,EACVb,QAAAA,EACAC,QAAAA,EACAW,OAAAA,EACAe,gBAAAA,EACAU,eAAgB,KACb5B,IAKD6B,EAAqBC,EAAuB,MAC5CC,EAAgBZ,GACjBa,IACO,IAACH,EAAmBI,QACpB,OAGJ,MAAMC,EAAIC,SAASC,cACbC,EACFR,EAAmBI,QAAQK,iBACvB,8DAGFC,EAAgBC,MAAOC,IACtB,MAAAP,GAAAA,EAAAQ,aAAa,WAAY,MACjBD,EAAAC,aAAa,WAAY,KACpCD,EAAWE,OAAM,EAGbN,EAAAO,SAAQ,CAACC,EAAIC,KACjB,MAAMC,EAAaD,EAAId,EAEvB,GAAIa,GAAMX,EACN,GACIa,GAAcV,EAAQW,OAAS,GAC/BD,GAAc,EAEAR,EAAAF,EAAQU,SAAW,GAC1Bf,EAAa,EAAG,CACnBiB,GAAAA,EAAe,CAAE5B,UAAAA,EAAW9B,QAAAA,MAOhC2D,GAAU,KACNzB,EACItB,EACIgD,EAAc,CACV9B,UAAAA,EACAlB,OAAQ,EACRZ,QAAAA,IACH,KAGRsC,EAAmBI,SACpB,OAEEmB,MAAAA,EACFvB,EAAmBI,QAAQK,iBACvB,8DAGJc,EAAWA,EAAWJ,OAASD,KAE/BK,EAAW,GAAGV,aAAa,WAAY,MACvCH,EACIa,EAAWA,EAAWJ,OAASD,IAEvC,KACG,CACCM,GAAAA,EAAkB,CAAEhC,UAAAA,EAAW7B,QAAAA,MAOnC0D,GAAU,KACNzB,EACItB,EACImD,EAAS,CACLjC,UAAAA,EACAlB,OAAQ,EACRX,QAAAA,IACH,KAGRqC,EAAmBI,SACpB,OAEEmB,MAAAA,EACFvB,EAAmBI,QAAQK,iBACvB,8DAIJc,EAAWL,EAAaV,EAAQW,UAEhCI,EAAW,GAAGV,aAAa,WAAY,MACvCH,EACIa,EAAWL,EAAaV,EAAQW,SAG5C,IAEP,GAEL,CACIvB,EACAI,EACA1B,EACAkB,EACA7B,EACAD,IAIFgE,EAAwBpC,GACzBqC,IACG,OAAQA,EAAMC,KACV,IAAK,UACD1B,GAAc,GACdyB,EAAME,iBACN,MACJ,IAAK,aACD3B,EAAc,GACdyB,EAAME,iBACN,MACJ,IAAK,YACD3B,EAAc,GACdyB,EAAME,iBACN,MACJ,IAAK,YACD3B,GAAc,GACdyB,EAAME,iBAId,GAEJ,CAAC3B,IAGC4B,GAA8CxC,GAC/CqC,UACOA,GAAc,QAAdA,EAAMC,IAAe,OAEnB,MAAAG,EACF,OAAAC,EAAAhC,EAAmBI,gBAAnB4B,EAA4BvB,iBACxB,uDAGR,IAAKsB,EAAmB,OAElBE,MAAAA,EAAeF,EAAkB,GACjCG,EACFH,EAAkBA,EAAkBZ,OAAS,GAE5CQ,EAAMQ,UAAY7B,SAASC,gBAAkB2B,EAI9CP,EAAMQ,UACN7B,SAASC,gBAAkB0B,IAE3BC,EAAYpB,QACZa,EAAME,mBAPNI,EAAanB,QACba,EAAME,iBAMe,GAG7B,IAGEO,GAAkB9C,GACnB+C,IACS,MAAE9E,KAAAA,EAAMuC,SAAAA,EAAUwC,WAAAA,EAAYC,UAAAA,EAAWC,UAAAA,GAC3CH,EAGJ,QAAKC,MAIDxC,GAIAvC,EAAKkF,cAAe,MAAA/E,OAAA,EAAAA,EAAS+E,cAM5BF,GACAC,GACDhE,EAAUS,gBAAkB1B,EAAK0B,eACjCV,EAAaQ,aAAexB,EAAKwB,YACd,IAAnBxB,EAAKmF,WAjBE,GAwBf,CAAClE,EAAWd,EAASa,IAGnBoE,GAAsBrD,GAAY,KAGhC5B,GACAc,EAAUS,cAAgBvB,EAAQuB,eAAkB,GACpDT,EAAUO,WAAarB,EAAQqB,YAAe,EAIzCuB,SAAAG,iBACG,mCACF,GACDK,QAGLnD,GACAA,EAAQsB,cAAgBT,EAAUS,eAAkB,GACpDtB,EAAQoB,WAAaP,EAAUO,YAAe,GAIzCuB,SAAAG,iBACG,mCACF,GACDK,UAEV,CAACpD,EAASC,EAASa,IAIhBoE,GAAmBtD,GAGpBqC,IACOA,GAA8B,IAA9BA,EAAMkB,OAAOC,MAAM3B,OACnB,OAGJ,MAAM4B,EAAeC,OAAOC,SAAStB,EAAMkB,OAAOC,OAC9C,GAAAE,OAAOE,MAAMH,GACb,OAGJ,IAAIzE,EAA4C,IAAlCyE,EAAOvE,EAAUS,eAC/B,MAAMkE,EAAe,IAAIC,KACrB5E,EAAUS,cACVT,EAAUO,WAAaT,EACvBE,EAAUkE,WAKV/E,GACAA,EAAQsB,gBAAkBkE,EAAalE,eACvCtB,EAAQoB,WAAaoE,EAAapE,WAElCT,GAAU6E,EAAapE,WAAapB,EAAQoB,WAE5CrB,GACAA,EAAQuB,gBAAkBkE,EAAalE,eACvCvB,EAAQqB,WAAaoE,EAAapE,aAElCT,GAAUZ,EAAQqB,WAAaoE,EAAapE,YAGvCN,EAAA,CACLU,KAAM,aACNkE,YAAa/E,GAChB,GAIL,CAACE,EAAWd,EAASC,IAGnB2F,GAAoBhE,GAGrBqC,IACO,IAACpD,IAAiBhB,EAClB,OAGEgG,MAAAA,EACF/E,EAAUS,eACTV,GAAoB,IAAA6E,MAAQnE,cAC3BuE,EACFR,OAAOC,SAAStB,EAAMkB,OAAOC,QAC5BvE,GAAgB,IAAI6E,MAAQrE,WAExBN,EAAA,CACLU,KAAM,aACNI,UAAsB,GAAXgE,EAAgBC,GAC9B,GAIL,CAACjF,EAAchB,EAAMiB,IAGnBiF,GAAoBC,EACtB1E,EACAtB,EACAC,EACAK,GAEE2F,GAAqBC,EACvB5E,EACAnB,EACAH,EACAC,GAIA,OAAAkG,EAAC,MAAA,CACGvG,IAAAA,EACAc,GAAAA,EACA0F,UAAU,eACV,cAAY,eAIZC,SAAAC,EAAC,MAAA,CACGF,UAAU,wBACVxG,IAAK0C,EACLiE,UAAWnC,GAEXiC,SAAA,CAACC,EAAA,WAAA,CAASF,UAAU,0BAChBC,SAAA,CAAAC,EAAC,MACG,CAAAD,SAAA,CAAAF,EAAC,SAAA,IACOpE,EAAa,CACbD,UAAAA,EACA0E,QAASvB,KAEbmB,UAAU,iCACV3E,KAAK,SAEL4E,SAACF,EAAAM,EAAA,CAAcC,QAAQ,SAASC,MAAI,MAExCR,EAAC,SAAA,IACOlE,EAAgB,CAChBH,UAAAA,EACA0E,QAASvB,KAEbmB,UAAU,iCACV3E,KAAK,SAEL4E,SAACF,EAAAS,EAAA,CAAeF,QAAQ,SAASC,MAAI,WAG5C,MACG,CAAAN,SAAA,CAACC,EAAA,MAAA,CAAIF,UAAU,mCACXC,SAAA,CAAAF,EAAC,SAAA,CACGU,SAAUjB,GACVQ,UAAU,2CACV,aAAYhG,EACZgF,MAAOhE,EAAW2D,WAEjBsB,SAAmBJ,GAAAa,KAChB,EAAGC,MAAAA,EAAO3B,MAAAA,KACLe,EAAA,SAAA,CAAmBf,MAAAA,EACfiB,SAAAU,GADQ3B,OAMzBe,EAACa,EAAA,CACGL,MAAI,EACJP,UAAU,iDAGlBE,EAAC,MAAI,CAAAF,UAAU,mCACXC,SAAA,CAAAF,EAAC,SAAA,CACGU,SAAU3B,GACVkB,UAAU,2CACV,aAAY/F,EACZ+E,MAAO9D,EAAUyD,WAEhBsB,SAAAN,GAAkBe,KAAKzB,GACpBc,EAAC,UAAkBf,MAAOC,EACrBgB,SADQhB,GAAAA,OAKrBc,EAACa,EAAA,CACGL,MAAI,EACJP,UAAU,uDAKzBtE,EAAUgF,KAAKG,GACZX,EAAC,QAAA,CACGF,UAAU,qBAEV,cAAY,0BAEZC,SAAA,CAACC,EAAA,UAAA,CAAQF,UAAU,cACdC,SAAA,CAAAlG,EAAO8G,EAASC,OAAO,KAAGD,EAAS5B,UAEvC,QACG,CAAAgB,SAAAF,EAAC,MACIE,SAAKnG,EAAA4G,KAAKK,GACPhB,EAAC,KAAA,CAGIE,SAAAc,GAFI,GAAGF,EAASC,QAAQD,EAAS5B,OAAO8B,WAOzDhB,EAAC,SAAM,cAAY,uBACdE,WAASe,MAAMN,KAAI,CAACO,EAAMC,IACvBnB,EAAC,KAAA,CAGIE,SAAKgB,EAAAP,KAAI,CAACnC,EAAU4C,KACXrD,MAAAA,EAAM,GAAG+C,EAASC,QAAQD,EAAS5B,OAAOiC,IAAYC,IACxD,GAAoB,iBAAb5C,EAEH,OAAAwB,EAAC,KAAA,CACGC,UAAU,+CAGTC,SAAA1B,GAFIT,GAMX,MACFrE,KAAAA,EACA+E,WAAAA,EACA4C,MAAAA,EACA3C,UAAAA,EACAC,UAAAA,GACAH,EAEJ,SACK,KACG,CAAA0B,SAAAF,EAAC,SAAA,IACOnE,EAAa,CACbyF,QAAS9C,IAEblD,KAAK,SACL2E,UAAU,2BACVsB,SACIhD,GACIC,GAEE,GACA,EAEV,aAAY,GAAG9E,EAAKmF,cAAc7E,EAC9BN,EAAKwB,YACPsG,gBACF,eACIH,EACM,YACA,EAEV,gBACI3C,GACAC,EACM,YACA,EAEV8C,UAAWhD,EACX2B,UACIvC,EAGJqC,WAAC,OAAK,CAAA,cAAY,OACbA,SAAAxG,EAAKmF,eAlCTd,EAqCT,KA5DH,GAAG+C,EAASC,QAAQD,EAAS5B,OAAOiC,WApBhD,GAAGL,EAASC,QAAQD,EAAS5B,cAwF9C,IAMhB5F,EAASoI,YAAc"}
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../../../../src/components/datepicker/internal/Calendar.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useReducer,\n useRef,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { Density } from \"../../../core/types.js\";\nimport { useId } from \"../../../hooks/useId/useId.js\";\nimport { ArrowLeftIcon } from \"../../icon/icons/ArrowLeftIcon.js\";\nimport { ArrowRightIcon } from \"../../icon/icons/ArrowRightIcon.js\";\nimport { ChevronDownIcon } from \"../../icon/icons/ChevronDownIcon.js\";\nimport { YearsToShow } from \"../types.js\";\nimport { calendarInitializer, calendarReducer } from \"./calendarReducer.js\";\nimport { useCalendar, UseCalendarProps } from \"./useCalendar.js\";\nimport {\n addMonth,\n DateInfo,\n DEFAULT_YEARS_TO_SHOW,\n getInitialDateShown,\n getMonthSelectOptions,\n getYearSelectOptions,\n isBackDisabled,\n isForwardDisabled,\n subtractMonth,\n} from \"./utils.js\";\n\ninterface CalendarProps\n extends Omit<\n UseCalendarProps,\n \"date\" | \"onOffsetChanged\" | \"offset\" | \"firstDayOfWeek\" | \"selected\"\n > {\n date: Date | null;\n density?: Density;\n defaultSelected?: Date;\n days?: string[];\n months?: string[];\n monthLabel?: string;\n yearLabel?: string;\n yearsToShow?: YearsToShow;\n onTabOutside: React.KeyboardEventHandler;\n}\n\nconst defaultMonths = [\n \"Januar\",\n \"Februar\",\n \"Mars\",\n \"April\",\n \"Mai\",\n \"Juni\",\n \"Juli\",\n \"August\",\n \"September\",\n \"Oktober\",\n \"November\",\n \"Desember\",\n];\n\nconst defaultDays = [\"man\", \"tir\", \"ons\", \"tor\", \"fre\", \"lør\", \"søn\"];\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n (props, ref) => {\n const {\n date,\n defaultSelected,\n density,\n minDate,\n maxDate,\n days = defaultDays,\n months = defaultMonths,\n monthLabel = \"Velg måned\",\n yearLabel = \"Velg år\",\n yearsToShow = DEFAULT_YEARS_TO_SHOW,\n onTabOutside,\n ...rest\n } = props;\n\n const id = useId(\"jkl-calendar\");\n\n const [{ offset, selectedDate, shownDate }, dispatch] = useReducer(\n calendarReducer,\n getInitialDateShown(date, defaultSelected, minDate, maxDate),\n calendarInitializer,\n );\n\n const shownMonth = shownDate.getMonth();\n const shownYear = shownDate.getFullYear();\n\n useEffect(() => {\n dispatch({\n type: \"SET_SELECTED_DATE\",\n newDate: getInitialDateShown(\n date,\n defaultSelected,\n minDate,\n maxDate,\n ),\n });\n }, [date, defaultSelected, minDate, maxDate]);\n\n const onOffsetChanged = useCallback((newOffset: number) => {\n dispatch({\n type: \"SET_OFFSET\",\n newOffset,\n });\n }, []);\n\n const {\n calendars,\n getBackProps,\n getDateProps,\n getForwardProps,\n handleOffsetChanged,\n } = useCalendar({\n date: selectedDate,\n selected: selectedDate,\n minDate,\n maxDate,\n offset,\n onOffsetChanged,\n firstDayOfWeek: 1,\n ...rest,\n });\n\n /// Calendar keyboard navigation\n\n const calendarPaddingRef = useRef<HTMLDivElement>(null);\n const doFocusChange = useCallback(\n (offsetDiff: number) => {\n if (!calendarPaddingRef.current) {\n return;\n }\n\n const e = document.activeElement;\n const buttons =\n calendarPaddingRef.current.querySelectorAll<HTMLButtonElement>(\n 'button.jkl-calendar-date-button:not([data-adjacent=\"true\"]',\n );\n\n const changeFocusTo = async (nextButton: HTMLButtonElement) => {\n e?.setAttribute(\"tabindex\", \"-1\");\n nextButton.setAttribute(\"tabindex\", \"0\");\n nextButton.focus();\n };\n\n buttons.forEach((el, i) => {\n const newNodeKey = i + offsetDiff;\n\n if (el == e) {\n if (\n newNodeKey <= buttons.length - 1 &&\n newNodeKey >= 0\n ) {\n changeFocusTo(buttons[newNodeKey]);\n } else if (offsetDiff < 0) {\n if (isBackDisabled({ calendars, minDate })) {\n return;\n }\n\n // Hvis newNodeKey er utenfor samlingen med knapper så har vi prøvd å gå til\n // en dag utenfor måneden. Er offsetDiff negativ så har vi gått tilbake en\n // måned.\n flushSync(() => {\n handleOffsetChanged(\n offset -\n subtractMonth({\n calendars,\n offset: 1,\n minDate,\n }),\n );\n });\n if (!calendarPaddingRef.current) {\n return;\n }\n const newButtons =\n calendarPaddingRef.current.querySelectorAll<HTMLButtonElement>(\n 'button.jkl-calendar-date-button:not([data-adjacent=\"true\"]',\n );\n // + - = -\n if (newButtons[newButtons.length + newNodeKey]) {\n // Sørg for at ikke både 1. i måneden og valgt dag er fokuserbare\n newButtons[0].setAttribute(\"tabindex\", \"-1\");\n changeFocusTo(\n newButtons[newButtons.length + newNodeKey],\n );\n }\n } else {\n if (isForwardDisabled({ calendars, maxDate })) {\n return;\n }\n\n // Hvis newNodeKey er utenfor samlingen med knapper så har vi prøvd å gå til\n // en dag utenfor måneden. Er offsetDiff positiv så har vi gått frem en\n // måned.\n flushSync(() => {\n handleOffsetChanged(\n offset +\n addMonth({\n calendars,\n offset: 1,\n maxDate,\n }),\n );\n });\n if (!calendarPaddingRef.current) {\n return;\n }\n const newButtons =\n calendarPaddingRef.current.querySelectorAll<HTMLButtonElement>(\n 'button.jkl-calendar-date-button:not([data-adjacent=\"true\"]',\n );\n // NewNodeKey er basert på forrige måneds liste med knapper. For at verdien skal bli\n // riktig i vår nye måned må vi trekke fra anntal dager fra forrige måned.\n if (newButtons[newNodeKey - buttons.length]) {\n // Sørg for at ikke både 1. i måneden og valgt dag er fokuserbare\n newButtons[0].setAttribute(\"tabindex\", \"-1\");\n changeFocusTo(\n newButtons[newNodeKey - buttons.length],\n );\n }\n }\n }\n });\n },\n [\n handleOffsetChanged,\n calendarPaddingRef,\n offset,\n calendars,\n maxDate,\n minDate,\n ],\n );\n\n const handleArrowNavigation = useCallback(\n (event: React.KeyboardEvent) => {\n switch (event.key) {\n case \"ArrowUp\":\n doFocusChange(-7);\n event.preventDefault();\n break;\n case \"ArrowRight\":\n doFocusChange(1);\n event.preventDefault();\n break;\n case \"ArrowDown\":\n doFocusChange(7);\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n doFocusChange(-1);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [doFocusChange],\n );\n\n const handleTabInside: React.KeyboardEventHandler = useCallback(\n (event) => {\n if (event.key !== \"Tab\") return;\n\n const focusableElements =\n calendarPaddingRef.current?.querySelectorAll<HTMLElement>(\n 'button:not([disabled]):not([tabindex=\"-1\"]), select',\n );\n\n if (!focusableElements) return;\n\n const firstElement = focusableElements[0];\n const lastElement =\n focusableElements[focusableElements.length - 1];\n\n if (!event.shiftKey && document.activeElement === lastElement) {\n firstElement.focus();\n event.preventDefault();\n } else if (\n event.shiftKey &&\n document.activeElement === firstElement\n ) {\n lastElement.focus();\n event.preventDefault();\n }\n },\n [],\n );\n\n const isFocusableDate = useCallback(\n (dateInfo: DateInfo) => {\n const { date, selected, selectable, prevMonth, nextMonth } =\n dateInfo;\n\n // Datoen kan ikke velges\n if (!selectable) {\n return false;\n }\n // Datoen er valgt dato\n if (selected) {\n return true;\n }\n // Datoen er første valgbare dato\n if (date.toString() === minDate?.toString()) {\n return true;\n }\n\n // Datoen er første i måneden som vises\n if (\n !prevMonth &&\n !nextMonth &&\n shownDate.getFullYear() === date.getFullYear() &&\n selectedDate.getMonth() !== date.getMonth() &&\n date.getDate() === 1\n ) {\n return true;\n }\n\n return false;\n },\n [shownDate, minDate, selectedDate],\n );\n\n const handleGotoEdgeMonth = useCallback(() => {\n if (\n // Vi er i ferd med å gå til første måned\n minDate &&\n shownDate.getFullYear() - minDate.getFullYear() === 0 &&\n shownDate.getMonth() - minDate.getMonth() === 1\n ) {\n // Fokuser på \"neste månded\"-knappen\n document\n .querySelectorAll<HTMLButtonElement>(\n \".jkl-calendar-navigation__arrow\",\n )[1]\n .focus();\n } else if (\n // Vi er i ferd med å gå til siste måned\n maxDate &&\n maxDate.getFullYear() - shownDate.getFullYear() === 0 &&\n maxDate.getMonth() - shownDate.getMonth() === 1\n ) {\n // Fokuser på \"forrige månded\"-knappen\n document\n .querySelectorAll<HTMLButtonElement>(\n \".jkl-calendar-navigation__arrow\",\n )[0]\n .focus();\n }\n }, [minDate, maxDate, shownDate]);\n\n /// Extended variant events\n\n const handleYearChange = useCallback<\n React.ChangeEventHandler<HTMLSelectElement>\n >(\n (event) => {\n if (event.target.value.length !== 4) {\n return;\n }\n\n const year: number = Number.parseInt(event.target.value);\n if (Number.isNaN(year)) {\n return;\n }\n\n let offset = (year - shownDate.getFullYear()) * 12;\n const expectedDate = new Date(\n shownDate.getFullYear(),\n shownDate.getMonth() + offset,\n shownDate.getDate(),\n );\n\n // Pass på at vi ikke hopper forbi maks. eller min. dato\n if (\n maxDate &&\n maxDate.getFullYear() === expectedDate.getFullYear() &&\n maxDate.getMonth() < expectedDate.getMonth()\n ) {\n offset -= expectedDate.getMonth() - maxDate.getMonth();\n } else if (\n minDate &&\n minDate.getFullYear() === expectedDate.getFullYear() &&\n minDate.getMonth() > expectedDate.getMonth()\n ) {\n offset += minDate.getMonth() - expectedDate.getMonth();\n }\n\n dispatch({\n type: \"ADD_OFFSET\",\n addedOffset: offset,\n });\n\n return;\n },\n [shownDate, minDate, maxDate],\n );\n\n const handleMonthChange = useCallback<\n React.ChangeEventHandler<HTMLSelectElement>\n >(\n (event) => {\n if (!selectedDate && !date) {\n return;\n }\n\n const yearDiff =\n shownDate.getFullYear() -\n (selectedDate || new Date()).getFullYear();\n const monthDiff =\n Number.parseInt(event.target.value) -\n (selectedDate || new Date()).getMonth();\n\n dispatch({\n type: \"SET_OFFSET\",\n newOffset: yearDiff * 12 + monthDiff,\n });\n\n return;\n },\n [selectedDate, date, shownDate],\n );\n\n const yearSelectOptions = getYearSelectOptions(\n shownYear,\n minDate,\n maxDate,\n yearsToShow,\n );\n const monthSelectOptions = getMonthSelectOptions(\n shownYear,\n months,\n minDate,\n maxDate,\n );\n\n return (\n <div\n ref={ref}\n id={id}\n className=\"jkl-calendar\"\n data-testid=\"jkl-calendar\"\n >\n {/* Vi lytter på på trykk på Tab inne i kalenderen for å håndtere fokus */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n className=\"jkl-calendar__padding\"\n ref={calendarPaddingRef}\n onKeyDown={handleTabInside}\n >\n <fieldset className=\"jkl-calendar-navigation\">\n <div>\n <button\n {...getBackProps({\n calendars,\n onClick: handleGotoEdgeMonth,\n })}\n className=\"jkl-calendar-navigation__arrow\"\n type=\"button\"\n >\n <ArrowLeftIcon variant=\"medium\" bold />\n </button>\n <button\n {...getForwardProps({\n calendars,\n onClick: handleGotoEdgeMonth,\n })}\n className=\"jkl-calendar-navigation__arrow\"\n type=\"button\"\n >\n <ArrowRightIcon variant=\"medium\" bold />\n </button>\n </div>\n <div>\n <div className=\"jkl-calendar-navigation-dropdown\">\n <select\n onChange={handleMonthChange}\n className=\"jkl-calendar-navigation-dropdown__select\"\n aria-label={monthLabel}\n value={shownMonth.toString()}\n >\n {monthSelectOptions.map(\n ({ label, value }) => (\n <option key={value} value={value}>\n {label}\n </option>\n ),\n )}\n </select>\n <ChevronDownIcon\n bold\n className=\"jkl-calendar-navigation-dropdown__chevron\"\n />\n </div>\n <div className=\"jkl-calendar-navigation-dropdown\">\n <select\n onChange={handleYearChange}\n className=\"jkl-calendar-navigation-dropdown__select\"\n aria-label={yearLabel}\n value={shownYear.toString()}\n >\n {yearSelectOptions.map((year) => (\n <option key={year} value={year}>\n {year}\n </option>\n ))}\n </select>\n <ChevronDownIcon\n bold\n className=\"jkl-calendar-navigation-dropdown__chevron\"\n />\n </div>\n </div>\n </fieldset>\n {calendars.map((calendar) => (\n <table\n className=\"jkl-calendar-table\"\n key={`${calendar.month}${calendar.year}`}\n data-testid=\"jkl-datepicker-calendar\"\n >\n <caption className=\"jkl-sr-only\">\n {months[calendar.month]}, {calendar.year}\n </caption>\n <thead>\n <tr>\n {days.map((weekday) => (\n <th\n key={`${calendar.month}${calendar.year}${weekday}`}\n >\n {weekday}\n </th>\n ))}\n </tr>\n </thead>\n <tbody data-testid=\"jkl-datepicker-dates\">\n {calendar.weeks.map((week, weekIndex) => (\n <tr\n key={`${calendar.month}${calendar.year}${weekIndex}`}\n >\n {week.map((dateInfo, index) => {\n const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;\n if (typeof dateInfo === \"string\") {\n return (\n <td\n className=\"jkl-calendar__date jkl-calendar__date--empty\"\n key={key}\n >\n {dateInfo}\n </td>\n );\n }\n const {\n date,\n selectable,\n today,\n prevMonth,\n nextMonth,\n } = dateInfo;\n\n return (\n <td key={key}>\n <button\n {...getDateProps({\n dateObj: dateInfo,\n })}\n type=\"button\"\n className=\"jkl-calendar-date-button\"\n tabIndex={\n isFocusableDate(\n dateInfo,\n )\n ? 0\n : -1\n }\n aria-label={`${date.getDate()}. ${months[\n date.getMonth()\n ].toLowerCase()}`}\n aria-current={\n today\n ? \"date\"\n : undefined\n }\n data-adjacent={\n prevMonth ||\n nextMonth\n ? \"true\"\n : undefined\n }\n disabled={!selectable}\n onKeyDown={\n handleArrowNavigation\n }\n >\n <span aria-hidden=\"true\">\n {date.getDate()}\n </span>\n </button>\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n ))}\n </div>\n </div>\n );\n },\n);\n\nCalendar.displayName = \"Calendar\";\n"],"names":["defaultMonths","defaultDays","Calendar","forwardRef","props","ref","date","defaultSelected","density","minDate","maxDate","days","months","monthLabel","yearLabel","yearsToShow","DEFAULT_YEARS_TO_SHOW","onTabOutside","rest","id","useId","offset","selectedDate","shownDate","dispatch","useReducer","calendarReducer","getInitialDateShown","calendarInitializer","shownMonth","getMonth","shownYear","getFullYear","useEffect","type","newDate","onOffsetChanged","useCallback","newOffset","calendars","getBackProps","getDateProps","getForwardProps","handleOffsetChanged","useCalendar","selected","firstDayOfWeek","calendarPaddingRef","useRef","doFocusChange","offsetDiff","current","e","document","activeElement","buttons","querySelectorAll","changeFocusTo","async","nextButton","setAttribute","focus","forEach","el","i","newNodeKey","length","isBackDisabled","flushSync","subtractMonth","newButtons","isForwardDisabled","addMonth","handleArrowNavigation","event","key","preventDefault","handleTabInside","focusableElements","_a","firstElement","lastElement","shiftKey","isFocusableDate","dateInfo","selectable","prevMonth","nextMonth","toString","getDate","handleGotoEdgeMonth","handleYearChange","target","value","year","Number","parseInt","isNaN","expectedDate","Date","addedOffset","handleMonthChange","yearDiff","monthDiff","yearSelectOptions","getYearSelectOptions","monthSelectOptions","getMonthSelectOptions","jsx","className","children","jsxs","onKeyDown","onClick","ArrowLeftIcon","variant","bold","ArrowRightIcon","onChange","map","label","ChevronDownIcon","calendar","month","weekday","weeks","week","weekIndex","index","today","dateObj","tabIndex","toLowerCase","disabled","displayName"],"mappings":"qwBA4CA,MAAMA,EAAgB,CAClB,SACA,UACA,OACA,QACA,MACA,OACA,OACA,SACA,YACA,UACA,WACA,YAGEC,EAAc,CAAC,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAElDC,EAAWC,GACpB,CAACC,EAAOC,KACE,MACFC,KAAAA,EACAC,gBAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAOV,EACPW,OAAAA,EAASZ,EACTa,WAAAA,EAAa,aACbC,UAAAA,EAAY,UACZC,YAAAA,EAAcC,EACdC,aAAAA,KACGC,GACHd,EAEEe,EAAKC,EAAM,kBAERC,OAAAA,EAAQC,aAAAA,EAAcC,UAAAA,GAAaC,GAAYC,EACpDC,EACAC,EAAoBrB,EAAMC,EAAiBE,EAASC,GACpDkB,GAGEC,EAAaN,EAAUO,WACvBC,EAAYR,EAAUS,cAE5BC,GAAU,KACGT,EAAA,CACLU,KAAM,oBACNC,QAASR,EACLrB,EACAC,EACAE,EACAC,IAEP,GACF,CAACJ,EAAMC,EAAiBE,EAASC,IAE9B0B,MAAAA,EAAkBC,GAAaC,IACxBd,EAAA,CACLU,KAAM,aACNI,UAAAA,GACH,GACF,KAGCC,UAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,gBAAAA,EACAC,oBAAAA,GACAC,EAAY,CACZtC,KAAMgB,EACNuB,SAAUvB,EACVb,QAAAA,EACAC,QAAAA,EACAW,OAAAA,EACAe,gBAAAA,EACAU,eAAgB,KACb5B,IAKD6B,EAAqBC,EAAuB,MAC5CC,EAAgBZ,GACjBa,IACO,IAACH,EAAmBI,QACpB,OAGJ,MAAMC,EAAIC,SAASC,cACbC,EACFR,EAAmBI,QAAQK,iBACvB,8DAGFC,EAAgBC,MAAOC,IACtB,MAAAP,GAAAA,EAAAQ,aAAa,WAAY,MACjBD,EAAAC,aAAa,WAAY,KACpCD,EAAWE,OAAM,EAGbN,EAAAO,SAAQ,CAACC,EAAIC,KACjB,MAAMC,EAAaD,EAAId,EAEvB,GAAIa,GAAMX,EACN,GACIa,GAAcV,EAAQW,OAAS,GAC/BD,GAAc,EAEAR,EAAAF,EAAQU,SAAW,GAC1Bf,EAAa,EAAG,CACnBiB,GAAAA,EAAe,CAAE5B,UAAAA,EAAW9B,QAAAA,MAOhC2D,GAAU,KACNzB,EACItB,EACIgD,EAAc,CACV9B,UAAAA,EACAlB,OAAQ,EACRZ,QAAAA,IACH,KAGRsC,EAAmBI,SACpB,OAEEmB,MAAAA,EACFvB,EAAmBI,QAAQK,iBACvB,8DAGJc,EAAWA,EAAWJ,OAASD,KAE/BK,EAAW,GAAGV,aAAa,WAAY,MACvCH,EACIa,EAAWA,EAAWJ,OAASD,IAEvC,KACG,CACCM,GAAAA,EAAkB,CAAEhC,UAAAA,EAAW7B,QAAAA,MAOnC0D,GAAU,KACNzB,EACItB,EACImD,EAAS,CACLjC,UAAAA,EACAlB,OAAQ,EACRX,QAAAA,IACH,KAGRqC,EAAmBI,SACpB,OAEEmB,MAAAA,EACFvB,EAAmBI,QAAQK,iBACvB,8DAIJc,EAAWL,EAAaV,EAAQW,UAEhCI,EAAW,GAAGV,aAAa,WAAY,MACvCH,EACIa,EAAWL,EAAaV,EAAQW,SAG5C,IAEP,GAEL,CACIvB,EACAI,EACA1B,EACAkB,EACA7B,EACAD,IAIFgE,EAAwBpC,GACzBqC,IACG,OAAQA,EAAMC,KACV,IAAK,UACD1B,GAAc,GACdyB,EAAME,iBACN,MACJ,IAAK,aACD3B,EAAc,GACdyB,EAAME,iBACN,MACJ,IAAK,YACD3B,EAAc,GACdyB,EAAME,iBACN,MACJ,IAAK,YACD3B,GAAc,GACdyB,EAAME,iBAId,GAEJ,CAAC3B,IAGC4B,GAA8CxC,GAC/CqC,UACOA,GAAc,QAAdA,EAAMC,IAAe,OAEnB,MAAAG,EACF,OAAAC,EAAAhC,EAAmBI,gBAAnB4B,EAA4BvB,iBACxB,uDAGR,IAAKsB,EAAmB,OAElBE,MAAAA,EAAeF,EAAkB,GACjCG,EACFH,EAAkBA,EAAkBZ,OAAS,GAE5CQ,EAAMQ,UAAY7B,SAASC,gBAAkB2B,EAI9CP,EAAMQ,UACN7B,SAASC,gBAAkB0B,IAE3BC,EAAYpB,QACZa,EAAME,mBAPNI,EAAanB,QACba,EAAME,iBAMe,GAG7B,IAGEO,GAAkB9C,GACnB+C,IACS,MAAE9E,KAAAA,EAAMuC,SAAAA,EAAUwC,WAAAA,EAAYC,UAAAA,EAAWC,UAAAA,GAC3CH,EAGJ,QAAKC,MAIDxC,GAIAvC,EAAKkF,cAAe,MAAA/E,OAAA,EAAAA,EAAS+E,cAM5BF,GACAC,GACDhE,EAAUS,gBAAkB1B,EAAK0B,eACjCV,EAAaQ,aAAexB,EAAKwB,YACd,IAAnBxB,EAAKmF,WAjBE,GAwBf,CAAClE,EAAWd,EAASa,IAGnBoE,GAAsBrD,GAAY,KAGhC5B,GACAc,EAAUS,cAAgBvB,EAAQuB,eAAkB,GACpDT,EAAUO,WAAarB,EAAQqB,YAAe,EAIzCuB,SAAAG,iBACG,mCACF,GACDK,QAGLnD,GACAA,EAAQsB,cAAgBT,EAAUS,eAAkB,GACpDtB,EAAQoB,WAAaP,EAAUO,YAAe,GAIzCuB,SAAAG,iBACG,mCACF,GACDK,UAEV,CAACpD,EAASC,EAASa,IAIhBoE,GAAmBtD,GAGpBqC,IACOA,GAA8B,IAA9BA,EAAMkB,OAAOC,MAAM3B,OACnB,OAGJ,MAAM4B,EAAeC,OAAOC,SAAStB,EAAMkB,OAAOC,OAC9C,GAAAE,OAAOE,MAAMH,GACb,OAGJ,IAAIzE,EAA4C,IAAlCyE,EAAOvE,EAAUS,eAC/B,MAAMkE,EAAe,IAAIC,KACrB5E,EAAUS,cACVT,EAAUO,WAAaT,EACvBE,EAAUkE,WAKV/E,GACAA,EAAQsB,gBAAkBkE,EAAalE,eACvCtB,EAAQoB,WAAaoE,EAAapE,WAElCT,GAAU6E,EAAapE,WAAapB,EAAQoB,WAE5CrB,GACAA,EAAQuB,gBAAkBkE,EAAalE,eACvCvB,EAAQqB,WAAaoE,EAAapE,aAElCT,GAAUZ,EAAQqB,WAAaoE,EAAapE,YAGvCN,EAAA,CACLU,KAAM,aACNkE,YAAa/E,GAChB,GAIL,CAACE,EAAWd,EAASC,IAGnB2F,GAAoBhE,GAGrBqC,IACO,IAACpD,IAAiBhB,EAClB,OAGEgG,MAAAA,EACF/E,EAAUS,eACTV,GAAoB,IAAA6E,MAAQnE,cAC3BuE,EACFR,OAAOC,SAAStB,EAAMkB,OAAOC,QAC5BvE,GAAgB,IAAI6E,MAAQrE,WAExBN,EAAA,CACLU,KAAM,aACNI,UAAsB,GAAXgE,EAAgBC,GAC9B,GAIL,CAACjF,EAAchB,EAAMiB,IAGnBiF,GAAoBC,EACtB1E,EACAtB,EACAC,EACAK,GAEE2F,GAAqBC,EACvB5E,EACAnB,EACAH,EACAC,GAIA,OAAAkG,EAAC,MAAA,CACGvG,IAAAA,EACAc,GAAAA,EACA0F,UAAU,eACV,cAAY,eAIZC,SAAAC,EAAC,MAAA,CACGF,UAAU,wBACVxG,IAAK0C,EACLiE,UAAWnC,GAEXiC,SAAA,CAACC,EAAA,WAAA,CAASF,UAAU,0BAChBC,SAAA,CAAAC,EAAC,MACG,CAAAD,SAAA,CAAAF,EAAC,SAAA,IACOpE,EAAa,CACbD,UAAAA,EACA0E,QAASvB,KAEbmB,UAAU,iCACV3E,KAAK,SAEL4E,SAACF,EAAAM,EAAA,CAAcC,QAAQ,SAASC,MAAI,MAExCR,EAAC,SAAA,IACOlE,EAAgB,CAChBH,UAAAA,EACA0E,QAASvB,KAEbmB,UAAU,iCACV3E,KAAK,SAEL4E,SAACF,EAAAS,EAAA,CAAeF,QAAQ,SAASC,MAAI,WAG5C,MACG,CAAAN,SAAA,CAACC,EAAA,MAAA,CAAIF,UAAU,mCACXC,SAAA,CAAAF,EAAC,SAAA,CACGU,SAAUjB,GACVQ,UAAU,2CACV,aAAYhG,EACZgF,MAAOhE,EAAW2D,WAEjBsB,SAAmBJ,GAAAa,KAChB,EAAGC,MAAAA,EAAO3B,MAAAA,KACLe,EAAA,SAAA,CAAmBf,MAAAA,EACfiB,SAAAU,GADQ3B,OAMzBe,EAACa,EAAA,CACGL,MAAI,EACJP,UAAU,iDAGlBE,EAAC,MAAI,CAAAF,UAAU,mCACXC,SAAA,CAAAF,EAAC,SAAA,CACGU,SAAU3B,GACVkB,UAAU,2CACV,aAAY/F,EACZ+E,MAAO9D,EAAUyD,WAEhBsB,SAAAN,GAAkBe,KAAKzB,GACpBc,EAAC,UAAkBf,MAAOC,EACrBgB,SADQhB,GAAAA,OAKrBc,EAACa,EAAA,CACGL,MAAI,EACJP,UAAU,uDAKzBtE,EAAUgF,KAAKG,GACZX,EAAC,QAAA,CACGF,UAAU,qBAEV,cAAY,0BAEZC,SAAA,CAACC,EAAA,UAAA,CAAQF,UAAU,cACdC,SAAA,CAAAlG,EAAO8G,EAASC,OAAO,KAAGD,EAAS5B,UAEvC,QACG,CAAAgB,SAAAF,EAAC,MACIE,SAAKnG,EAAA4G,KAAKK,GACPhB,EAAC,KAAA,CAGIE,SAAAc,GAFI,GAAGF,EAASC,QAAQD,EAAS5B,OAAO8B,WAOzDhB,EAAC,SAAM,cAAY,uBACdE,WAASe,MAAMN,KAAI,CAACO,EAAMC,IACvBnB,EAAC,KAAA,CAGIE,SAAKgB,EAAAP,KAAI,CAACnC,EAAU4C,KACXrD,MAAAA,EAAM,GAAG+C,EAASC,QAAQD,EAAS5B,OAAOiC,IAAYC,IACxD,GAAoB,iBAAb5C,EAEH,OAAAwB,EAAC,KAAA,CACGC,UAAU,+CAGTC,SAAA1B,GAFIT,GAMX,MACFrE,KAAAA,EACA+E,WAAAA,EACA4C,MAAAA,EACA3C,UAAAA,EACAC,UAAAA,GACAH,EAEJ,SACK,KACG,CAAA0B,SAAAF,EAAC,SAAA,IACOnE,EAAa,CACbyF,QAAS9C,IAEblD,KAAK,SACL2E,UAAU,2BACVsB,SACIhD,GACIC,GAEE,GACA,EAEV,aAAY,GAAG9E,EAAKmF,cAAc7E,EAC9BN,EAAKwB,YACPsG,gBACF,eACIH,EACM,YACA,EAEV,gBACI3C,GACAC,EACM,YACA,EAEV8C,UAAWhD,EACX2B,UACIvC,EAGJqC,WAAC,OAAK,CAAA,cAAY,OACbA,SAAAxG,EAAKmF,eAlCTd,EAqCT,KA5DH,GAAG+C,EAASC,QAAQD,EAAS5B,OAAOiC,WApBhD,GAAGL,EAASC,QAAQD,EAAS5B,cAwF9C,IAMhB5F,EAASoI,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import n from"react";import{ArrowVerticalAnimated as d}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{ScreenReaderOnly as t}from"../ScreenReaderOnly.js";const s=n.forwardRef((({as:s="button",className:o,children:i,density:l,expandDirection:c="down",isExpanded:p=!1,hideLabel:m=!1,...x},j)=>{const f=m?t:n.Fragment,w="down"===c?!p:p;return e(s,{"aria-expanded":p,"data-testid":"jkl-expander",type:"button"===s?"button":void 0,className:r("jkl-expander",o,{"jkl-expander--expanded":p,"jkl-expander--icon-only":!i}),...x,"data-density":l,ref:j,children:[i&&a(f,{children:a("span",{className:"jkl-expander__text",children:i})}),a(d,{className:"jkl-expander__arrow",pointingDown:w,bold:p})]})}));s.displayName="Expander";export{s as Expander};
|
|
2
2
|
//# sourceMappingURL=Expander.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Expander.js","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ForwardedRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/
|
|
1
|
+
{"version":3,"file":"Expander.js","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ForwardedRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { ScreenReaderOnly } from \"../ScreenReaderOnly.js\";\n\nexport type ExpandDirection = \"up\" | \"down\";\n\nexport interface ExpanderProps extends WithChildren {\n as?: \"summary\" | \"button\";\n /** Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. */\n \"aria-controls\"?: string;\n /** Må settes dersom du ikke bruker CoreToggle. IDen her skal brukes som verdien til aria-labelledby på innholdet du ekspanderer. */\n id?: string;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n /**\n * Styrer retningen til pila, som animeres ved endring. Styrer også aria-expanded.\n * @default false\n */\n isExpanded?: boolean;\n /** @default \"down\" */\n expandDirection?: ExpandDirection;\n density?: Density;\n /**\n * Skjul knappeteksten visuelt.\n *\n * @default false\n */\n hideLabel?: boolean;\n}\n\nexport const Expander = React.forwardRef(\n (\n {\n as = \"button\",\n className,\n children,\n density,\n expandDirection = \"down\",\n isExpanded = false,\n hideLabel = false,\n ...rest\n }: ExpanderProps,\n ref: ForwardedRef<HTMLButtonElement>,\n ): JSX.Element => {\n const ContentWrapper = hideLabel ? ScreenReaderOnly : React.Fragment;\n const pointingDown =\n expandDirection === \"down\" ? !isExpanded : isExpanded;\n\n const El = as;\n const type = El === \"button\" ? \"button\" : undefined;\n\n return (\n <El\n aria-expanded={isExpanded}\n data-testid=\"jkl-expander\"\n type={type}\n className={clsx(\"jkl-expander\", className, {\n \"jkl-expander--expanded\": isExpanded,\n \"jkl-expander--icon-only\": !children,\n })}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children && (\n <ContentWrapper>\n <span className=\"jkl-expander__text\">{children}</span>\n </ContentWrapper>\n )}\n <ArrowVerticalAnimated\n className=\"jkl-expander__arrow\"\n pointingDown={pointingDown}\n bold={isExpanded}\n />\n </El>\n );\n },\n);\n\nExpander.displayName = \"Expander\";\n"],"names":["Expander","React","forwardRef","as","className","children","density","expandDirection","isExpanded","hideLabel","rest","ref","ContentWrapper","ScreenReaderOnly","Fragment","pointingDown","jsxs","type","clsx","jsx","ArrowVerticalAnimated","bold","displayName"],"mappings":"uQAiCO,MAAMA,EAAWC,EAAMC,YAC1B,EAEQC,GAAAA,EAAK,SACLC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EAAkB,OAClBC,WAAAA,GAAa,EACbC,UAAAA,GAAY,KACTC,GAEPC,KAEMC,MAAAA,EAAiBH,EAAYI,EAAmBZ,EAAMa,SACtDC,EACkB,SAApBR,GAA8BC,EAAaA,EAM3C,OAAAQ,EAJOb,EAIN,CACG,gBAAeK,EACf,cAAY,eACZS,KANY,WADTd,EACoB,cAAW,EAOlCC,UAAWc,EAAK,eAAgBd,EAAW,CACvC,yBAA0BI,EAC1B,2BAA4BH,OAE5BK,EACJ,eAAcJ,EACdK,IAAAA,EAECN,SAAA,CAAAA,KACIO,EACG,CAAAP,SAAAc,EAAC,QAAKf,UAAU,qBAAsBC,SAAAA,MAG9Cc,EAACC,EAAA,CACGhB,UAAU,sBACVW,aAAAA,EACAM,KAAMb,MACV,IAMhBR,EAASsB,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactQuestion.js","sources":["../../../../../src/components/feedback/questions/ContactQuestion.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n FC,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\
|
|
1
|
+
{"version":3,"file":"ContactQuestion.js","sources":["../../../../../src/components/feedback/questions/ContactQuestion.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n FC,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { isValidEpost } from \"../../../utilities/validators/isValidEpost/isValidEpost.js\";\nimport { isValidTelefonnummer } from \"../../../utilities/validators/isValidTelefonnummer/isValidTelefonnummer.js\";\nimport { PrimaryButton, TertiaryButton } from \"../../button/Button.js\";\nimport { TextInput } from \"../../text-input/TextInput.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { FeedbackSuccess } from \"../FeedbackSuccess.js\";\n\nconst validateEmail = (email?: string) => {\n if (!email || email === \"\") {\n return \"Du må oppgi e-postadresse for at vi kan kontakte deg\";\n }\n if (!isValidEpost(email)) {\n return \"Skriv inn en gyldig e-postadresse\";\n }\n return;\n};\n\nconst validatePhone = (phone?: string) => {\n if (!phone || phone === \"\") {\n return \"Du må oppgi telefonnummer for at vi kan kontakte deg\";\n }\n if (!isValidTelefonnummer(phone)) {\n return \"Skriv inn et gyldig telefonnummer\";\n }\n return;\n};\n\nconst defaultSuccessMessage = {\n title: \"Takk for tiden din!\",\n children:\n \"Neste gang vi gjennomfører intervjuer og tester kan det hende vi tar kontakt med deg. Dine innspill hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem.\",\n};\n\ninterface Props {\n /**\n * Lar deg tilpasse spørsmålsteksten.\n * @default \"Kan vi kontakte deg for flere innspill?\"\n * */\n label?: string;\n /**\n * Lar deg tilpasse teksten på knappen for innsending.\n * @default \"Sett meg på lista!\"\n * */\n sendButtonLabel?: string;\n /** Sett til true om du også vil spørre om brukjerens telefonnummer i tillegg til epost */\n withPhone?: boolean;\n /** Her kan du legge inn eventuelt annet innhold du vil ha med. Kommer mellom overskriften og feltene for utfylling */\n children?: ReactNode;\n onSubmit: (values: { email: string; phone?: string }) => void;\n /** Lar deg tilpasse meldingen som kommer når brukeren sender inn skjemaet. */\n successMessage?: {\n title: string;\n children: ReactNode;\n };\n}\n\nexport const ContactQuestion: FC<Props> = ({\n label = \"Kan vi kontakte deg for flere innspill?\",\n sendButtonLabel = \"Sett meg på lista!\",\n withPhone = false,\n onSubmit,\n successMessage = defaultSuccessMessage,\n children,\n}) => {\n const [email, setEmail] = useState(\"\");\n const [phone, setPhone] = useState(\"\");\n const [errors, setErrors] = useState<{ email?: string; phone?: string }>(\n {},\n );\n const emailRef = useRef<HTMLInputElement>(null);\n const phoneRef = useRef<HTMLInputElement>(null);\n const [shouldValidate, setShouldValidate] = useState(false);\n\n const [noThanks, setNoThanks] = useState(false);\n const { contactSubmitted, setContactSubmitted, landmarkLabel } =\n useFeedbackContext();\n\n const ChildrenWrapper = typeof children === \"string\" ? \"p\" : \"div\";\n\n const validate = (email: string, phone: string) => {\n const emailError = validateEmail(email);\n const phoneError = validatePhone(phone);\n setErrors({ email: emailError, phone: phoneError });\n return { emailError, phoneError };\n };\n\n useEffect(() => {\n if (shouldValidate) {\n const { emailError, phoneError } = validate(email, phone);\n\n if (!emailError && (!withPhone || !phoneError)) {\n setShouldValidate(false);\n }\n }\n }, [email, phone, shouldValidate, withPhone]);\n\n const handleChange =\n (consumer: (value: string) => void) =>\n (e: ChangeEvent<HTMLInputElement>) =>\n consumer(e.target.value);\n\n const handleSubmit: React.FormEventHandler = (e) => {\n e.preventDefault();\n\n const { emailError, phoneError } = validate(email, phone);\n if (emailError) {\n setShouldValidate(true);\n emailRef.current?.focus();\n return;\n }\n if (withPhone && phoneError) {\n setShouldValidate(true);\n phoneRef.current?.focus();\n return;\n }\n\n onSubmit({ email, phone: withPhone ? phone : undefined });\n setContactSubmitted(true);\n };\n\n if (noThanks) {\n return null;\n }\n\n if (contactSubmitted) {\n return <FeedbackSuccess {...successMessage} />;\n }\n\n return (\n <form\n className=\"jkl-spacing-xl--top\"\n onSubmit={handleSubmit}\n aria-label={landmarkLabel}\n >\n <p className=\"jkl-heading-4 jkl-spacing-xs--bottom\">{label}</p>\n {children && (\n <ChildrenWrapper className=\"jkl-body\">\n {children}\n </ChildrenWrapper>\n )}\n\n <TextInput\n ref={emailRef}\n className=\"jkl-spacing-l--top\"\n label=\"E-post\"\n labelProps={{ variant: \"small\" }}\n autoComplete=\"email\"\n name=\"email\"\n value={email}\n onChange={handleChange(setEmail)}\n errorLabel={errors.email}\n />\n {withPhone && (\n <TextInput\n ref={phoneRef}\n className=\"jkl-spacing-l--top\"\n label=\"Telefonnummer\"\n labelProps={{ variant: \"small\" }}\n autoComplete=\"tel\"\n name=\"phone\"\n value={phone}\n onChange={handleChange(setPhone)}\n errorLabel={errors.phone}\n />\n )}\n\n <div className=\"jkl-spacing-xl--top\">\n <PrimaryButton type=\"submit\" className=\"jkl-spacing-xl--right\">\n {sendButtonLabel}\n </PrimaryButton>\n <TertiaryButton onClick={() => setNoThanks(true)}>\n Nei takk\n </TertiaryButton>\n </div>\n </form>\n );\n};\n"],"names":["defaultSuccessMessage","title","children","ContactQuestion","label","sendButtonLabel","withPhone","onSubmit","successMessage","email","setEmail","useState","phone","setPhone","errors","setErrors","emailRef","useRef","phoneRef","shouldValidate","setShouldValidate","noThanks","setNoThanks","contactSubmitted","setContactSubmitted","landmarkLabel","useFeedbackContext","ChildrenWrapper","validate","emailError","isValidEpost","validateEmail","phoneError","isValidTelefonnummer","validatePhone","useEffect","handleChange","consumer","e","target","value","jsx","FeedbackSuccess","jsxs","className","preventDefault","_a","current","focus","_b","TextInput","ref","labelProps","variant","autoComplete","name","onChange","errorLabel","PrimaryButton","type","TertiaryButton","onClick"],"mappings":"kjBAeA,MAoBMA,EAAwB,CAC1BC,MAAO,sBACPC,SACI,sLA0BKC,EAA6B,EACtCC,MAAAA,EAAQ,0CACRC,gBAAAA,EAAkB,qBAClBC,UAAAA,GAAY,EACZC,SAAAA,EACAC,eAAAA,EAAiBR,EACjBE,SAAAA,MAEA,MAAOO,EAAOC,GAAYC,EAAS,KAC5BC,EAAOC,GAAYF,EAAS,KAC5BG,EAAQC,GAAaJ,EACxB,CAAC,GAECK,EAAWC,EAAyB,MACpCC,EAAWD,EAAyB,OACnCE,EAAgBC,GAAqBT,GAAS,IAE9CU,EAAUC,GAAeX,GAAS,IACjCY,iBAAAA,EAAkBC,oBAAAA,EAAqBC,cAAAA,GAC3CC,IAEEC,EAAsC,iBAAbzB,EAAwB,IAAM,MAEvD0B,EAAW,CAACnB,EAAeG,KACvB,MAAAiB,EAzEQ,CAACpB,GACdA,GAAmB,KAAVA,EAGTqB,EAAarB,QAAd,EACO,oCAHA,uDAuEYsB,CAActB,GAC3BuB,EAhEQ,CAACpB,GACdA,GAAmB,KAAVA,EAGTqB,EAAqBrB,QAAtB,EACO,oCAHA,uDA8DYsB,CAActB,GACjC,OAAAG,EAAU,CAAEN,MAAOoB,EAAYjB,MAAOoB,IAC/B,CAAEH,WAAAA,EAAYG,WAAAA,IAGzBG,GAAU,KACN,GAAIhB,EAAgB,CACV,MAAEU,WAAAA,EAAYG,WAAAA,GAAeJ,EAASnB,EAAOG,IAE9CiB,KAAgBvB,IAAc0B,IAC/BZ,GAAkB,EAE1B,IACD,CAACX,EAAOG,EAAOO,EAAgBb,IAE5B,MAAA8B,EACDC,GACAC,GACGD,EAASC,EAAEC,OAAOC,OAqBtBnB,OAAAA,EACO,KAGPE,EACOkB,EAACC,EAAiB,IAAGlC,IAI5BmC,EAAC,OAAA,CACGC,UAAU,sBACVrC,SA9BsC+B,YAC1CA,EAAEO,iBAEI,MAAEhB,WAAAA,EAAYG,WAAAA,GAAeJ,EAASnB,EAAOG,GACnD,OAAIiB,GACAT,GAAkB,QAClB,OAAA0B,EAAA9B,EAAS+B,UAATD,EAAkBE,UAGlB1C,GAAa0B,GACbZ,GAAkB,QAClB,OAAA6B,EAAA/B,EAAS6B,UAATE,EAAkBD,WAItBzC,EAAS,CAAEE,MAAAA,EAAOG,MAAON,EAAYM,OAAQ,SAC7CY,GAAoB,GAAI,EAepB,aAAYC,EAEZvB,SAAA,CAACuC,EAAA,IAAA,CAAEG,UAAU,uCAAwC1C,SAAME,IAC1DF,GACGuC,EAACd,EAAgB,CAAAiB,UAAU,WACtB1C,SAAAA,IAITuC,EAACS,EAAA,CACGC,IAAKnC,EACL4B,UAAU,qBACVxC,MAAM,SACNgD,WAAY,CAAEC,QAAS,SACvBC,aAAa,QACbC,KAAK,QACLf,MAAO/B,EACP+C,SAAUpB,EAAa1B,GACvB+C,WAAY3C,EAAOL,QAEtBH,GACGmC,EAACS,EAAA,CACGC,IAAKjC,EACL0B,UAAU,qBACVxC,MAAM,gBACNgD,WAAY,CAAEC,QAAS,SACvBC,aAAa,MACbC,KAAK,QACLf,MAAO5B,EACP4C,SAAUpB,EAAavB,GACvB4C,WAAY3C,EAAOF,QAI3B+B,EAAC,MAAI,CAAAC,UAAU,sBACX1C,SAAA,CAAAuC,EAACiB,EAAc,CAAAC,KAAK,SAASf,UAAU,wBAClC1C,SACLG,MACCuD,EAAe,CAAAC,QAAS,IAAMvC,GAAY,GAAOpB,SAElD,kBACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.js","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { type CSSProperties } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport {
|
|
1
|
+
{"version":3,"file":"Flex.js","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { type CSSProperties } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { SlotComponent } from \"../../utilities/polymorphism/SlotComponent.js\";\n\nexport type FlexDirection = \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\nexport type GapValue = Exclude<keyof (typeof tokens)[\"spacing\"], 0>;\n\nexport type FlexProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<\n ElementType,\n {\n direction?: FlexDirection;\n wrap?: boolean;\n gap?: GapValue;\n colGap?: GapValue;\n rowGap?: GapValue;\n } & Pick<\n CSSProperties,\n \"alignContent\" | \"alignItems\" | \"justifyContent\" | \"justifyItems\"\n >\n >;\n\nexport type FlexComponent = <ElementType extends React.ElementType = \"div\">(\n props: FlexProps<ElementType> & AsChildProps,\n) => React.ReactElement | null;\n\nexport const Flex = React.forwardRef(function Flex<\n ElementType extends React.ElementType = \"div\",\n>(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n asChild,\n as = \"div\",\n alignContent,\n alignItems,\n children,\n colGap,\n direction,\n gap,\n justifyContent,\n justifyItems,\n rowGap,\n wrap = false,\n ...rest\n } = props;\n const Component = asChild ? SlotComponent : as;\n\n const flexStyle: CSSProperties = {\n display: \"flex\",\n flexDirection: direction,\n alignContent,\n alignItems,\n justifyContent,\n justifyItems,\n ...(wrap ? { flexWrap: \"wrap\" } : {}),\n ...(gap ? { gap: tokens.spacing[gap] } : {}),\n ...(colGap ? { columnGap: tokens.spacing[colGap] } : {}),\n ...(rowGap ? { rowGap: tokens.spacing[rowGap] } : {}),\n };\n\n return (\n <Component ref={ref} {...rest} style={{ ...flexStyle, ...rest.style }}>\n {children}\n </Component>\n );\n}) as FlexComponent;\n"],"names":["Flex","React","forwardRef","props","ref","asChild","as","alignContent","alignItems","children","colGap","direction","gap","justifyContent","justifyItems","rowGap","wrap","rest","Component","SlotComponent","flexStyle","display","flexDirection","flexWrap","tokens","spacing","columnGap","jsx","style"],"mappings":"+KA+BO,MAAMA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,QAAAA,EACAC,GAAAA,EAAK,MACLC,aAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,IAAAA,EACAC,eAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,GAAO,KACJC,GACHd,EACEe,EAAYb,EAAUc,EAAgBb,EAEtCc,EAA2B,CAC7BC,QAAS,OACTC,cAAeX,EACfJ,aAAAA,EACAC,WAAAA,EACAK,eAAAA,EACAC,aAAAA,KACIE,EAAO,CAAEO,SAAU,QAAW,CAAC,KAC/BX,EAAM,CAAEA,IAAKY,EAAOC,QAAQb,IAAS,CAAC,KACtCF,EAAS,CAAEgB,UAAWF,EAAOC,QAAQf,IAAY,CAAC,KAClDK,EAAS,CAAEA,OAAQS,EAAOC,QAAQV,IAAY,CAAC,GAGvD,OACKY,EAAAT,EAAA,CAAUd,IAAAA,KAAca,EAAMW,MAAO,IAAKR,KAAcH,EAAKW,OACzDnB,SAAAA,GAGb"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as r,jsx as s}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import{ErrorIcon as l}from"../icon/icons/ErrorIcon.js";import{SuccessIcon as a}from"../icon/icons/SuccessIcon.js";import{WarningIcon as e}from"../icon/icons/WarningIcon.js";const n=({id:n,helpLabel:c,errorLabel:p,label:t,labelType:i="help",density:m,className:j,srOnly:u,...b})=>{const f=p||c||t,d="error"===i,k="success"===i,h=f?o("jkl-form-support-label",j,{"jkl-form-support-label--sr-only":u,"jkl-form-support-label--help":"help"===i||c&&!p,"jkl-form-support-label--error":d,"jkl-form-support-label--warning":"warning"===i||p,"jkl-form-support-label--success":k}):"jkl-dormant-form-support-label";return r("span",{id:n,className:h,...f?b:{},"data-density":m,children:[s(d?l:k?a:e,{variant:"small",className:"jkl-form-support-label__icon"}),s("span",{children:p||c||t})]})};export{n as SupportLabel};
|
|
2
2
|
//# sourceMappingURL=SupportLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SupportLabel.js","sources":["../../../../src/components/input-group/SupportLabel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC, type ReactNode } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { ErrorIcon
|
|
1
|
+
{"version":3,"file":"SupportLabel.js","sources":["../../../../src/components/input-group/SupportLabel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC, type ReactNode } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\n\nexport type SupportLabelType = \"help\" | \"error\" | \"warning\" | \"success\";\n\nexport interface SupportLabelProps {\n /**\n * En ID er påkrevd for å kunne referere til SupportLabel med aria-describedby.\n *\n * @example\n * ```tsx\n * const uid = useId();\n * const supportId = useId();\n * const hasSupportText = helpLabel || errorLabel;\n * const describedBy = hasSupportText ? supportId : undefined;\n *\n * return (\n * <div>\n * <Label standAlone htmlFor={uid}>\n * Velg en tekst\n * </Label>\n * <select\n * id={uid}\n * aria-describedby={describedBy}\n * >\n * <option value=\"e\">Example</option>\n * </select>\n * <SupportLabel\n * id={supportId}\n * label={errorLabel}\n * labelType=\"error\"\n * density={density}\n * />\n * </div>\n * );\n * ```\n */\n id: string;\n /**\n * @deprecated Bruk `label` for å få samme resultat.\n */\n helpLabel?: ReactNode;\n /**\n * @deprecated Bruk `label` og `labelType=\"warning\"` for å få samme resultat.\n */\n errorLabel?: ReactNode;\n label?: ReactNode;\n /**\n * Bestemmer hvilket ikon som skal vises:\n *\n * - \"help\" viser ikke noe ikon\n * - \"warning\" viser WarningIcon, det som tidligere ble vist med `errorLabel`\n * - \"error\" viser ErrorIcon\n * - \"success\" viser SuccessIcon\n *\n * @default \"help\"\n */\n labelType?: SupportLabelType;\n density?: Density;\n className?: string;\n srOnly?: boolean;\n}\n\nexport const SupportLabel: FC<SupportLabelProps> = ({\n id,\n helpLabel,\n errorLabel,\n label,\n labelType = \"help\",\n density,\n className,\n srOnly,\n ...rest\n}) => {\n const hasLabel = errorLabel || helpLabel || label;\n\n const isHelp = labelType === \"help\" || (helpLabel && !errorLabel);\n const isWarning = labelType === \"warning\" || errorLabel;\n const isError = labelType === \"error\";\n const isSuccess = labelType === \"success\";\n\n const componentClassName = hasLabel\n ? clsx(\"jkl-form-support-label\", className, {\n \"jkl-form-support-label--sr-only\": srOnly,\n \"jkl-form-support-label--help\": isHelp,\n \"jkl-form-support-label--error\": isError,\n \"jkl-form-support-label--warning\": isWarning,\n \"jkl-form-support-label--success\": isSuccess,\n })\n : \"jkl-dormant-form-support-label\";\n\n const restProps = hasLabel ? rest : {};\n\n const Icon = isError ? ErrorIcon : isSuccess ? SuccessIcon : WarningIcon;\n\n return (\n <span\n id={id}\n className={componentClassName}\n {...restProps}\n data-density={density}\n >\n <Icon variant=\"small\" className=\"jkl-form-support-label__icon\" />\n <span>{errorLabel || helpLabel || label}</span>\n </span>\n );\n};\n"],"names":["SupportLabel","id","helpLabel","errorLabel","label","labelType","density","className","srOnly","rest","hasLabel","isError","isSuccess","componentClassName","clsx","jsxs","children","jsx","ErrorIcon","SuccessIcon","WarningIcon","variant"],"mappings":"6QAmEO,MAAMA,EAAsC,EAC/CC,GAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,MAAAA,EACAC,UAAAA,EAAY,OACZC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,KACGC,MAEGC,MAAAA,EAAWP,GAAcD,GAAaE,EAItCO,EAAwB,UAAdN,EACVO,EAA0B,YAAdP,EAEZQ,EAAqBH,EACrBI,EAAK,yBAA0BP,EAAW,CACtC,kCAAmCC,EACnC,+BARmB,SAAdH,GAAyBH,IAAcC,EAS5C,gCAAiCQ,EACjC,kCATsB,YAAdN,GAA2BF,EAUnC,kCAAmCS,IAEvC,iCAOF,OAAAG,EAAC,OAAA,CACGd,GAAAA,EACAM,UAAWM,KAPDH,EAAWD,EAAO,GAS5B,eAAcH,EAEdU,SAAA,CAAAC,EATKN,EAAUO,EAAYN,EAAYO,EAAcC,EAS/C,CAAAC,QAAQ,QAAQd,UAAU,iCAC/BU,EAAA,OAAA,CAAMD,SAAcb,GAAAD,GAAaE,MAAM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as s,jsx as r}from"react/jsx-runtime";import{c as l}from"../../../clsx-BeLtu-UY.js";import i from"react";import{ArrowRightIcon as e}from"../icon/icons/ArrowRightIcon.js";const a=i.forwardRef((function(i,a){const{as:o="a",children:n,className:t,...c}=i;return s(o,{className:l("jkl-link-list-link",t),ref:a,...c,children:[n,r(e,{className:"jkl-link-list-link__arrow"})]})})),o=({variant:s,className:i,...e})=>r("ordered"===s?"ol":"ul",{className:l("jkl-link-list",i,{"jkl-link-list--ordered":"ordered"===s,"jkl-link-list--unordered":"unordered"===s}),...e});o.Link=a,o.Item=({className:s,...i})=>r("li",{className:l("jkl-link-list-item",s),...i});export{o as LinkList};
|
|
2
2
|
//# sourceMappingURL=LinkList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkList.js","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ComponentProps, FC } from \"react\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ArrowRightIcon } from \"../icon/
|
|
1
|
+
{"version":3,"file":"LinkList.js","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ComponentProps, FC } from \"react\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ArrowRightIcon } from \"../icon/icons/ArrowRightIcon.js\";\n\nconst Item: FC<ComponentProps<\"li\">> = ({ className, ...rest }) => {\n return (\n <li className={clsx(\"jkl-link-list-item\", className)} {...rest}></li>\n );\n};\n\ntype LinkComponent = <ElementType extends React.ElementType = \"a\">(\n props: PolymorphicPropsWithRef<ElementType>,\n) => React.ReactElement | null;\n\nconst Link = React.forwardRef(function LinkListLink<\n ElementType extends React.ElementType = \"a\",\n>(\n props: PolymorphicPropsWithRef<ElementType>,\n ref: PolymorphicRef<ElementType>,\n) {\n const { as: Component = \"a\", children, className, ...rest } = props;\n\n return (\n <Component\n className={clsx(\"jkl-link-list-link\", className)}\n ref={ref}\n {...rest}\n >\n {children}\n <ArrowRightIcon className=\"jkl-link-list-link__arrow\" />\n </Component>\n );\n}) as LinkComponent;\n\ntype UnorderedLinkListProps = React.HTMLAttributes<HTMLUListElement> & {\n variant: \"unordered\";\n};\n\ntype OrderedLinkListProps = React.HTMLAttributes<HTMLOListElement> & {\n variant: \"ordered\";\n};\n\ntype LinkListProps = UnorderedLinkListProps | OrderedLinkListProps;\n\nexport const LinkList = ({\n variant,\n className,\n ...rest\n}: LinkListProps): React.JSX.Element => {\n const Component = variant === \"ordered\" ? \"ol\" : \"ul\";\n\n return (\n <Component\n className={clsx(\"jkl-link-list\", className, {\n \"jkl-link-list--ordered\": variant === \"ordered\",\n \"jkl-link-list--unordered\": variant === \"unordered\",\n })}\n {...rest}\n />\n );\n};\n\nLinkList.Link = Link;\nLinkList.Item = Item;\n"],"names":["Link","React","forwardRef","props","ref","as","Component","children","className","rest","jsxs","clsx","jsx","ArrowRightIcon","LinkList","variant","Item"],"mappings":"sLAQA,MAUMA,EAAOC,EAAMC,YAAW,SAG1BC,EACAC,GAEM,MAAEC,GAAIC,EAAY,IAAKC,SAAAA,EAAUC,UAAAA,KAAcC,GAASN,EAG1D,OAAAO,EAACJ,EAAA,CACGE,UAAWG,EAAK,qBAAsBH,GACtCJ,IAAAA,KACIK,EAEHF,SAAA,CAAAA,EACDK,EAACC,EAAe,CAAAL,UAAU,gCAGtC,IAYaM,EAAW,EACpBC,QAAAA,EACAP,UAAAA,KACGC,KAKCG,EAH0B,YAAZG,EAAwB,KAAO,KAG5C,CACGP,UAAWG,EAAK,gBAAiBH,EAAW,CACxC,yBAAsC,YAAZO,EAC1B,2BAAwC,cAAZA,OAE5BN,IAKhBK,EAASd,KAAOA,EAChBc,EAASE,KA3D8B,EAAGR,UAAAA,KAAcC,KAEhDG,EAAC,MAAGJ,UAAWG,EAAK,qBAAsBH,MAAgBC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r}from"react";import{ArrowNorthEastIcon as t}from"../icon/icons/ArrowNorthEastIcon.js";import{ChevronRightIcon as s}from"../icon/icons/ChevronRightIcon.js";const a=r((function(r,a){const{as:c="button",className:m,children:i,icon:l,expandable:u=!1,external:h=!1,...d}=r;return e(c,{ref:a,type:"button"===c?"button":void 0,role:"menuitem",className:n("jkl-menu-item",m),...d,children:[l&&o("span",{className:"jkl-menu-item__icon",children:l}),e("div",{className:"jkl-menu-item__content",children:[i,h&&o("div",{className:"jkl-menu-item__arrow",children:o(t,{})})]}),u&&o(s,{className:"jkl-menu-item__chevron",bold:!0})]})}));export{a as MenuItem};
|
|
2
2
|
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../src/components/menu/MenuItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, ReactNode } from \"react\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ArrowNorthEastIcon
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../src/components/menu/MenuItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, ReactNode } from \"react\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ArrowNorthEastIcon } from \"../icon/icons/ArrowNorthEastIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\n\nexport type MenuItemProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<\n ElementType,\n {\n /**\n * Et ikon som vises før innholdet i menypunktet\n */\n icon?: ReactNode;\n } & (\n | {\n expandable?: never;\n /**\n * Indikerer at menypunktet åpner noe i et nytt vindu eller tab\n * @default false\n */\n external?: boolean;\n }\n | {\n external?: never;\n /**\n * Indikerer at menypunktet er utvidbart ved å vise en chevron\n * @default false\n */\n expandable?: boolean;\n }\n )\n >;\n\ntype MenuItemComponent = <ElementType extends React.ElementType = \"button\">(\n props: MenuItemProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const MenuItem = forwardRef(function MenuItem<\n ElementType extends React.ElementType = \"button\",\n>(props: MenuItemProps<ElementType>, ref: PolymorphicRef<ElementType>) {\n const {\n as = \"button\",\n className,\n children,\n icon,\n expandable = false,\n external = false,\n ...rest\n } = props;\n const Component = as;\n const type = Component === \"button\" ? \"button\" : undefined;\n\n return (\n <Component\n ref={ref}\n type={type}\n role=\"menuitem\"\n className={clsx(\"jkl-menu-item\", className)}\n {...rest}\n >\n {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n <div className=\"jkl-menu-item__content\">\n {children}\n {external && (\n <div className={\"jkl-menu-item__arrow\"}>\n <ArrowNorthEastIcon />\n </div>\n )}\n </div>\n {expandable && (\n <ChevronRightIcon className=\"jkl-menu-item__chevron\" bold />\n )}\n </Component>\n );\n}) as MenuItemComponent;\n"],"names":["MenuItem","forwardRef","props","ref","as","className","children","icon","expandable","external","rest","jsxs","type","role","clsx","jsx","ArrowNorthEastIcon","ChevronRightIcon","bold"],"mappings":"iRAyCO,MAAMA,EAAWC,GAAW,SAEjCC,EAAmCC,GAC3B,MACFC,GAAAA,EAAK,SACLC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,WAAAA,GAAa,EACbC,SAAAA,GAAW,KACRC,GACHR,EAKA,OAAAS,EAJcP,EAIb,CACGD,IAAAA,EACAS,KALmB,WADTR,EACoB,cAAW,EAMzCS,KAAK,WACLR,UAAWS,EAAK,gBAAiBT,MAC7BK,EAEHJ,SAAA,CAAAC,GAASQ,EAAA,OAAA,CAAKV,UAAU,sBAAuBC,SAAKC,IACrDI,EAAC,MAAI,CAAAN,UAAU,yBACVC,SAAA,CAAAA,EACAG,GACIM,EAAA,MAAA,CAAIV,UAAW,uBACZC,SAAAS,EAACC,GAAmB,QAI/BR,GACIO,EAAAE,EAAA,CAAiBZ,UAAU,yBAAyBa,MAAI,MAIzE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as e,jsx as n}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import{forwardRef as i}from"react";import{useSwipeGesture as l}from"../../hooks/useSwipeGesture/useSwipeGesture.js";import{CheckIcon as t}from"../icon/icons/CheckIcon.js";const s=i(((i,s)=>{const{"aria-checked":c,className:r,children:a,icon:m,onChange:d,onClick:u,onPointerCancel:h,onPointerDown:k,onPointerMove:g,onPointerUp:w,onKeyDown:j,...p}=i,{gestureHandlers:v}=l({onClick:e=>{e.preventDefault(),null==d||d(e,!c),null==u||u(e)},onChange:(e,n)=>{n!==c&&(null==d||d(e,n))},onPointerCancel:h,onPointerDown:k,onPointerMove:g,onPointerUp:w});return e("div",{ref:s,tabIndex:-1,...p,role:"menuitemcheckbox","aria-checked":c,className:o("jkl-menu-item","jkl-menu-item--checkbox",r),...v,onKeyDown:e=>{"Enter"===e.key?null==d||d(e,!c):" "===e.key&&(e.preventDefault(),null==d||d(e,!c)),null==j||j(e)},children:[m&&n("span",{className:"jkl-menu-item__icon",children:m}),n("div",{className:"jkl-menu-item__content",children:a}),n("div",{className:"jkl-toggle-switch",children:n("div",{className:"jkl-toggle-switch-widget",children:e("div",{className:"jkl-toggle-switch-widget__slider",children:[n("div",{className:"jkl-toggle-switch-widget__knob"}),n(t,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})})]})}));s.displayName="MenuItemCheckbox";export{s as MenuItemCheckbox};
|
|
2
2
|
//# sourceMappingURL=MenuItemCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemCheckbox.js","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n forwardRef,\n type HTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n} from \"react\";\nimport {\n SwipeChangeHandler,\n useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/
|
|
1
|
+
{"version":3,"file":"MenuItemCheckbox.js","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n forwardRef,\n type HTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n} from \"react\";\nimport {\n SwipeChangeHandler,\n useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\n\nexport interface MenuItemCheckboxProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"aria-checked\" | \"onChange\"> {\n \"aria-checked\": boolean;\n /**\n * Et ikon som vises før innholdet i menypunktet\n */\n icon?: ReactNode;\n onChange?: SwipeChangeHandler<HTMLDivElement> &\n ((\n event:\n | React.KeyboardEvent<HTMLDivElement>\n | React.PointerEvent<HTMLDivElement>,\n pressed: boolean,\n ) => void);\n}\n\nexport const MenuItemCheckbox = forwardRef<\n HTMLDivElement,\n MenuItemCheckboxProps\n>((props, ref) => {\n const {\n \"aria-checked\": checked,\n className,\n children,\n icon,\n onChange,\n onClick,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n onKeyDown,\n ...rest\n } = props;\n\n const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n event.preventDefault(); // Prevents the menu from closing on toggle\n onChange?.(event, !checked);\n onClick?.(event);\n };\n\n const handleChange: SwipeChangeHandler<HTMLDivElement> = (\n event,\n toggleTo,\n ) => {\n if (toggleTo !== checked) {\n onChange?.(event, toggleTo);\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n if (event.key === \"Enter\") {\n onChange?.(event, !checked);\n } else if (event.key === \" \") {\n event.preventDefault(); // Prevents the menu from closing on toggle, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n onChange?.(event, !checked);\n }\n onKeyDown?.(event);\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <div\n ref={ref}\n tabIndex={-1}\n {...rest}\n role=\"menuitemcheckbox\"\n aria-checked={checked}\n className={clsx(\n \"jkl-menu-item\",\n \"jkl-menu-item--checkbox\",\n className,\n )}\n {...gestureHandlers}\n onKeyDown={handleKeyDown}\n >\n {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n <div className=\"jkl-menu-item__content\">{children}</div>\n <div className=\"jkl-toggle-switch\">\n <div className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon\n variant=\"small\"\n bold\n className=\"jkl-toggle-switch-widget__indicator\"\n />\n </div>\n </div>\n </div>\n </div>\n );\n});\n\nMenuItemCheckbox.displayName = \"MenuItemCheckbox\";\n"],"names":["MenuItemCheckbox","forwardRef","props","ref","checked","className","children","icon","onChange","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","onKeyDown","rest","gestureHandlers","useSwipeGesture","event","preventDefault","toggleTo","jsxs","tabIndex","role","clsx","key","jsx","CheckIcon","variant","bold","displayName"],"mappings":"2QA8BO,MAAMA,EAAmBC,GAG9B,CAACC,EAAOC,KACA,MACF,eAAgBC,EAChBC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,UAAAA,KACGC,GACHb,GA2BIc,gBAAAA,GAAoBC,EAAgB,CACxCR,QA1BoDS,IACpDA,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,GACnB,MAAAK,GAAAA,EAAUS,EAAAA,EAwBVV,SArBqD,CACrDU,EACAE,KAEIA,IAAahB,IACb,MAAAI,GAAAA,EAAWU,EAAOE,GAAAA,EAiBtBV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EACP,gBACA,0BACAnB,MAEAW,EACJF,UAhCqDI,IACvC,UAAdA,EAAMO,IACK,MAAAjB,GAAAA,EAAAU,GAAQd,GACE,MAAdc,EAAMO,MACbP,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,IAEvB,MAAAU,GAAAA,EAAYI,EAAAA,EA2BPZ,SAAA,CAAAC,GAASmB,EAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,EAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAA,MAAA,CAAIrB,UAAU,mCACfqB,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJxB,UAAU,iDAI1B,IAKZL,EAAiB8B,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as s,jsx as o}from"react/jsx-runtime";import{forwardRef as t}from"react";import{CloseIcon as a}from"../icon/icons/CloseIcon.js";const r=t((({label:t="Lukk",...r},e)=>s("button",{ref:e,type:"button",title:t,...r,children:[o(a,{variant:"small",bold:!0}),o("span",{className:"jkl-sr-only",children:t})]})));r.displayName="DismissButton";export{r as DismissButton};
|
|
2
2
|
//# sourceMappingURL=DismissButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DismissButton.js","sources":["../../../../src/components/message/DismissButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../icon/
|
|
1
|
+
{"version":3,"file":"DismissButton.js","sources":["../../../../src/components/message/DismissButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\n\nexport interface DismissButtonProps\n extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n label?: string;\n}\n\nexport const DismissButton = forwardRef<HTMLButtonElement, DismissButtonProps>(\n ({ label = \"Lukk\", ...rest }, ref) => {\n return (\n <button ref={ref} type=\"button\" title={label} {...rest}>\n <CloseIcon variant=\"small\" bold />\n <span className=\"jkl-sr-only\">{label}</span>\n </button>\n );\n },\n);\n\nDismissButton.displayName = \"DismissButton\";\n"],"names":["DismissButton","forwardRef","label","rest","ref","jsxs","type","title","children","jsx","CloseIcon","variant","bold","className","displayName"],"mappings":"4IAQO,MAAMA,EAAgBC,GACzB,EAAGC,MAAAA,EAAQ,UAAWC,GAAQC,IAEtBC,EAAC,UAAOD,IAAAA,EAAUE,KAAK,SAASC,MAAOL,KAAWC,EAC9CK,SAAA,CAAAC,EAACC,EAAU,CAAAC,QAAQ,QAAQC,MAAI,IAC9BH,EAAA,OAAA,CAAKI,UAAU,cAAeL,SAAMN,SAMrDF,EAAcc,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as s,jsxs as
|
|
1
|
+
import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import n,{forwardRef as i}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{ErrorIcon as o}from"../icon/icons/ErrorIcon.js";import{InfoIcon as c}from"../icon/icons/InfoIcon.js";import{SuccessIcon as l}from"../icon/icons/SuccessIcon.js";import{WarningIcon as m}from"../icon/icons/WarningIcon.js";import{DismissButton as t}from"./DismissButton.js";const d=e=>{switch(e){case"error":return s(o,{className:"jkl-message__icon"});case"info":return s(c,{className:"jkl-message__icon"});case"success":return s(l,{className:"jkl-message__icon"});case"warning":return s(m,{className:"jkl-message__icon"});default:return null}};function g(o){const c=i(((i,c)=>{const{id:l,title:m,fullWidth:g,density:u,className:f="",dismissed:j,dismissAction:p,children:k,role:_,...I}=i,N=r(l||"jkl-message",{generateSuffix:!l}),h=n.Children.map(k,(s=>"string"==typeof s)),M=null!=h&&h[0]?s("p",{children:k}):k;return e("div",{...I,id:l,ref:c,className:a("jkl-message","jkl-message--"+o,f,{"jkl-message--full":g,"jkl-message--dismissed":j}),role:_,"data-density":u,children:[d(o),e("div",{className:"jkl-message__content","data-theme":"light",children:[m&&s("p",{className:"jkl-message__title",children:m}),s("div",{className:"jkl-message__message",children:M})]}),(null==p?void 0:p.handleDismiss)&&s(t,{"aria-controls":N,className:"jkl-message__dismiss-button",label:p.buttonTitle||"Lukk",onClick:p.handleDismiss})]})}));return c.displayName="Message",c}const u=g("info");u.displayName="InfoMessage";const f=g("error");f.displayName="ErrorMessage";const j=g("warning");j.displayName="WarningMessage";const p=g("success");p.displayName="SuccessMessage";export{f as ErrorMessage,u as InfoMessage,p as SuccessMessage,j as WarningMessage};
|
|
2
2
|
//# sourceMappingURL=Message.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { AriaRole, forwardRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\
|
|
1
|
+
{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { AriaRole, forwardRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\n\nexport interface MessageProps extends WithChildren {\n id?: string;\n title?: string;\n fullWidth?: boolean;\n density?: Density;\n className?: string;\n dismissed?: boolean;\n dismissAction?: {\n handleDismiss: () => void;\n buttonTitle?: string;\n };\n role?: AriaRole;\n}\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nconst getIcon = (messageType: messageTypes) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-message__icon\" />;\n default:\n return null;\n }\n};\n\nfunction messageFactory(messageType: messageTypes) {\n const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n const {\n id,\n title,\n fullWidth,\n density,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n role,\n ...rest\n } = props;\n\n const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n \"jkl-message--\" + messageType,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n data-density={density}\n >\n {getIcon(messageType)}\n <div className=\"jkl-message__content\" data-theme=\"light\">\n {title && <p className=\"jkl-message__title\">{title}</p>}\n <div className=\"jkl-message__message\">{newChildren}</div>\n </div>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={boxId}\n className=\"jkl-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n );\n });\n\n Message.displayName = \"Message\";\n\n return Message;\n}\n\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","density","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","hasStringChild","React","Children","map","child","newChildren","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cA0BA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,sBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,sBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,sBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,sBAClC,QACW,OAAA,KACf,EAGJ,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,GAAyC,CAACC,EAAOC,KACvD,MACFC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAZ,UAAAA,EAAY,GACZa,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHV,EAEEW,EAAQC,EAAMV,GAAM,cAAe,CAAEW,gBAAiBX,IAEtDY,EAAiBC,EAAMC,SAASC,IAClCT,GACCU,GAA2B,iBAAVA,IAEhBC,EAAc,MAAAL,GAAAA,EAAiB,GAAMvB,EAAA,IAAA,CAAGiB,SAAAA,IAAgBA,EAG1D,OAAAY,EAAC,MAAA,IACOV,EACJR,GAAAA,EACAD,IAAAA,EACAR,UAAW4B,EACP,cACA,gBAAkB/B,EAClBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BE,IAGlCG,KAAAA,EACA,eAAcJ,EAEbG,SAAA,CAAAnB,EAAQC,GACR8B,EAAA,MAAA,CAAI3B,UAAU,uBAAuB,aAAW,QAC5Ce,SAAA,CAAAL,GAAUZ,EAAA,IAAA,CAAEE,UAAU,qBAAsBe,SAAML,IAClDZ,EAAA,MAAA,CAAIE,UAAU,uBAAwBe,SAAYW,QAEtD,MAAAZ,OAAA,EAAAA,EAAee,gBACZ/B,EAACgC,EAAA,CACG,gBAAeZ,EACflB,UAAU,8BACV+B,MAAOjB,EAAckB,aAAe,OACpCC,QAASnB,EAAce,kBAC3B,IAMhBxB,OAAAA,EAAQ6B,YAAc,UAEf7B,CACX,CAEa,MAAA8B,EAAc/B,EAAe,QAC1C+B,EAAYD,YAAc,cACb,MAAAE,EAAehC,EAAe,SAC3CgC,EAAaF,YAAc,eACd,MAAAG,EAAiBjC,EAAe,WAC7CiC,EAAeH,YAAc,iBAChB,MAAAI,EAAiBlC,EAAe,WAC7CkC,EAAeJ,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as a}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l}from"react";import{CloseIcon as o}from"../icon/icons/CloseIcon.js";import{IconButton as e}from"../icon-button/IconButton.js";const d=l((({className:l,...o},e)=>a("div",{className:s("jkl-modal-container",l),...o,ref:e,"data-portal":!0})));d.displayName="ModalContainer";const t=l((({className:l,transparent:o,...e},d)=>a("div",{className:s("jkl-modal-overlay",l,{"jkl-modal-overlay--transparent":o}),...e,ref:d})));t.displayName="ModalOverlay";const m=l((({className:l,component:o,padding:e,style:d,...t},m)=>a(o||"div",{className:s("jkl jkl-modal",l),style:{"--jkl-modal-padding":e?`var(--jkl-spacing-${e})`:void 0,...d},...t,ref:m})));m.displayName="Modal";const c=l((({className:l,...o},e)=>a("div",{className:s("jkl-modal-header",l),...o,ref:e})));c.displayName="ModalHeader";const r=l((({className:l,...o},e)=>a("p",{className:s("jkl-modal-title",l),...o,ref:e})));r.displayName="ModalTitle";const n=l((({className:l,...d},t)=>a(e,{className:s("jkl-modal-close",l),"data-testautoid":"jkl-modal-close",...d,ref:t,children:a(o,{variant:"medium"})})));n.displayName="ModalCloseButton";const i=l((({className:l,...o},e)=>a("div",{className:s("jkl-modal-body",l),...o,ref:e})));i.displayName="ModalBody";const N=l((({className:l,...o},e)=>a("div",{className:s("jkl-modal-actions",l),...o,ref:e})));N.displayName="ModalActions";export{m as Modal,N as ModalActions,i as ModalBody,n as ModalCloseButton,d as ModalContainer,c as ModalHeader,t as ModalOverlay,r as ModalTitle};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|