npm - @fremtind/jokul - Versions diffs - 0.59.0 → 0.61.0 - Mend

@fremtind/jokul 0.59.0 → 0.61.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/build/cjs/components/datepicker/internal/Calendar.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("react-dom"),n=require("../../../hooks/useId/useId.cjs"),r=require("../../icon/icons/ArrowLeftIcon.cjs"),l=require("../../icon/icons/ArrowRightIcon.cjs"),o=require("../../icon/icons/ChevronDownIcon.cjs"),s=require("./calendarReducer.cjs"),c=require("./useCalendar.cjs"),d=require("./utils.cjs"),i=["Januar","Februar","Mars","April","Mai","Juni","Juli","August","September","Oktober","November","Desember"],u=["man","tir","ons","tor","fre","lør","søn"],h=t.forwardRef(((h,g)=>{const{date:b,defaultSelected:j,density:f,minDate:m,maxDate:p,days:v=u,months:k=i,monthLabel:x="Velg måned",yearLabel:D="Velg år",yearsToShow:w=d.DEFAULT_YEARS_TO_SHOW,onTabOutside:y,...S}=h,_=n.useId("jkl-calendar"),[{offset:M,selectedDate:F,shownDate:A},C]=t.useReducer(s.calendarReducer,d.getInitialDateShown(b,j,m,p),s.calendarInitializer),N=A.getMonth(),E=A.getFullYear();t.useEffect((()=>{C({type:"SET_SELECTED_DATE",newDate:d.getInitialDateShown(b,j,m,p)})}),[b,j,m,p]);const O=t.useCallback((e=>{C({type:"SET_OFFSET",newOffset:e})}),[]),{calendars:Y,getBackProps:q,getDateProps:I,getForwardProps:T,handleOffsetChanged:$}=c.useCalendar({date:F,selected:F,minDate:m,maxDate:p,offset:M,onOffsetChanged:O,firstDayOfWeek:1,...S}),R=t.useRef(null),L=t.useCallback((e=>{if(!R.current)return;const t=document.activeElement,n=R.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]'),r=async e=>{null==t||t.setAttribute("tabindex","-1"),e.setAttribute("tabindex","0"),e.focus()};n.forEach(((l,o)=>{const s=o+e;if(l==t)if(s<=n.length-1&&s>=0)r(n[s]);else if(e<0){if(d.isBackDisabled({calendars:Y,minDate:m})||(a.flushSync((()=>{$(M-d.subtractMonth({calendars:Y,offset:1,minDate:m}))})),!R.current))return;const e=R.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]');e[e.length+s]&&(e[0].setAttribute("tabindex","-1"),r(e[e.length+s]))}else{if(d.isForwardDisabled({calendars:Y,maxDate:p})||(a.flushSync((()=>{$(M+d.addMonth({calendars:Y,offset:1,maxDate:p}))})),!R.current))return;const e=R.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]');e[s-n.length]&&(e[0].setAttribute("tabindex","-1"),r(e[s-n.length]))}}))}),[$,R,M,Y,p,m]),K=t.useCallback((e=>{switch(e.key){case"ArrowUp":L(-7),e.preventDefault();break;case"ArrowRight":L(1),e.preventDefault();break;case"ArrowDown":L(7),e.preventDefault();break;case"ArrowLeft":L(-1),e.preventDefault()}}),[L]),P=t.useCallback((e=>{var t;if("Tab"!==e.key)return;const a=null==(t=R.current)?void 0:t.querySelectorAll('button:not([disabled]):not([tabindex="-1"]), select');if(!a)return;const n=a[0],r=a[a.length-1];e.shiftKey||document.activeElement!==r?e.shiftKey&&document.activeElement===n&&(r.focus(),e.preventDefault()):(n.focus(),e.preventDefault())}),[]),J=t.useCallback((e=>{const{date:t,selected:a,selectable:n,prevMonth:r,nextMonth:l}=e;return!!n&&!(!a&&t.toString()!==(null==m?void 0:m.toString())&&(r||l||A.getFullYear()!==t.getFullYear()||F.getMonth()===t.getMonth()||1!==t.getDate()))}),[A,m,F]),B=t.useCallback((()=>{m&&A.getFullYear()-m.getFullYear()==0&&A.getMonth()-m.getMonth()==1?document.querySelectorAll(".jkl-calendar-navigation__arrow")[1].focus():p&&p.getFullYear()-A.getFullYear()==0&&p.getMonth()-A.getMonth()==1&&document.querySelectorAll(".jkl-calendar-navigation__arrow")[0].focus()}),[m,p,A]),U=t.useCallback((e=>{if(4!==e.target.value.length)return;const t=Number.parseInt(e.target.value);if(Number.isNaN(t))return;let a=12*(t-A.getFullYear());const n=new Date(A.getFullYear(),A.getMonth()+a,A.getDate());p&&p.getFullYear()===n.getFullYear()&&p.getMonth()<n.getMonth()?a-=n.getMonth()-p.getMonth():m&&m.getFullYear()===n.getFullYear()&&m.getMonth()>n.getMonth()&&(a+=m.getMonth()-n.getMonth()),C({type:"ADD_OFFSET",addedOffset:a})}),[A,m,p]),V=t.useCallback((e=>{if(!F&&!b)return;const t=A.getFullYear()-(F||new Date).getFullYear(),a=Number.parseInt(e.target.value)-(F||new Date).getMonth();C({type:"SET_OFFSET",newOffset:12*t+a})}),[F,b,A]),W=d.getYearSelectOptions(E,m,p,w),z=d.getMonthSelectOptions(E,k,m,p);return e.jsx("div",{ref:g,id:_,className:"jkl-calendar","data-testid":"jkl-calendar",children:e.jsxs("div",{className:"jkl-calendar__padding",ref:R,onKeyDown:P,children:[e.jsxs("fieldset",{className:"jkl-calendar-navigation",children:[e.jsxs("div",{children:[e.jsx("button",{...q({calendars:Y,onClick:B}),className:"jkl-calendar-navigation__arrow",type:"button",children:e.jsx(r.ArrowLeftIcon,{variant:"medium",bold:!0})}),e.jsx("button",{...T({calendars:Y,onClick:B}),className:"jkl-calendar-navigation__arrow",type:"button",children:e.jsx(l.ArrowRightIcon,{variant:"medium",bold:!0})})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"jkl-calendar-navigation-dropdown",children:[e.jsx("select",{onChange:V,className:"jkl-calendar-navigation-dropdown__select","aria-label":x,value:N.toString(),children:z.map((({label:t,value:a})=>e.jsx("option",{value:a,children:t},a)))}),e.jsx(o.ChevronDownIcon,{bold:!0,className:"jkl-calendar-navigation-dropdown__chevron"})]}),e.jsxs("div",{className:"jkl-calendar-navigation-dropdown",children:[e.jsx("select",{onChange:U,className:"jkl-calendar-navigation-dropdown__select","aria-label":D,value:E.toString(),children:W.map((t=>e.jsx("option",{value:t,children:t},t)))}),e.jsx(o.ChevronDownIcon,{bold:!0,className:"jkl-calendar-navigation-dropdown__chevron"})]})]})]}),Y.map((t=>e.jsxs("table",{className:"jkl-calendar-table","data-testid":"jkl-datepicker-calendar",children:[e.jsxs("caption",{className:"jkl-sr-only",children:[k[t.month],", ",t.year]}),e.jsx("thead",{children:e.jsx("tr",{children:v.map((a=>e.jsx("th",{children:a},`${t.month}${t.year}${a}`)))})}),e.jsx("tbody",{"data-testid":"jkl-datepicker-dates",children:t.weeks.map(((a,n)=>e.jsx("tr",{children:a.map(((a,r)=>{const l=`${t.month}${t.year}${n}${r}`;if("string"==typeof a)return e.jsx("td",{className:"jkl-calendar__date jkl-calendar__date--empty",children:a},l);const{date:o,selectable:s,today:c,prevMonth:d,nextMonth:i}=a;return e.jsx("td",{children:e.jsx("button",{...I({dateObj:a}),type:"button",className:"jkl-calendar-date-button",tabIndex:J(a)?0:-1,"aria-label":`${o.getDate()}. ${k[o.getMonth()].toLowerCase()}`,"aria-current":c?"date":void 0,"data-adjacent":d||i?"true":void 0,disabled:!s,onKeyDown:K,children:e.jsx("span",{"aria-hidden":"true",children:o.getDate()})})},l)}))},`${t.month}${t.year}${n}`)))})]},`${t.month}${t.year}`)))]})})}));h.displayName="Calendar",exports.Calendar=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("react-dom"),n=require("../../../hooks/useId/useId.cjs"),r=require("../../button/Button.cjs"),l=require("../../icon/icons/ArrowLeftIcon.cjs"),o=require("../../icon/icons/ArrowRightIcon.cjs"),s=require("../../icon/icons/ChevronDownIcon.cjs"),c=require("./calendarReducer.cjs"),d=require("./useCalendar.cjs"),i=require("./utils.cjs"),u=["Januar","Februar","Mars","April","Mai","Juni","Juli","August","September","Oktober","November","Desember"],h=["man","tir","ons","tor","fre","lør","søn"],g=t.forwardRef(((g,j)=>{const{date:b,defaultSelected:f,density:m,minDate:v,maxDate:p,days:k=h,months:x=u,monthLabel:D="Velg måned",yearLabel:w="Velg år",yearsToShow:y=i.DEFAULT_YEARS_TO_SHOW,onTabOutside:S,...M}=g,_=n.useId("jkl-calendar"),[{offset:F,selectedDate:A,shownDate:C},N]=t.useReducer(c.calendarReducer,i.getInitialDateShown(b,f,v,p),c.calendarInitializer),q=C.getMonth(),E=C.getFullYear();t.useEffect((()=>{N({type:"SET_SELECTED_DATE",newDate:i.getInitialDateShown(b,f,v,p)})}),[b,f,v,p]);const O=t.useCallback((e=>{N({type:"SET_OFFSET",newOffset:e})}),[]),{calendars:Y,getBackProps:I,getDateProps:T,getForwardProps:$,handleOffsetChanged:R}=d.useCalendar({date:A,selected:A,minDate:v,maxDate:p,offset:F,onOffsetChanged:O,firstDayOfWeek:1,...M}),L=t.useRef(null),B=t.useCallback((e=>{if(!L.current)return;const t=document.activeElement,n=L.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]'),r=async e=>{null==t||t.setAttribute("tabindex","-1"),e.setAttribute("tabindex","0"),e.focus()};n.forEach(((l,o)=>{const s=o+e;if(l==t)if(s<=n.length-1&&s>=0)r(n[s]);else if(e<0){if(i.isBackDisabled({calendars:Y,minDate:v})||(a.flushSync((()=>{R(F-i.subtractMonth({calendars:Y,offset:1,minDate:v}))})),!L.current))return;const e=L.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]');e[e.length+s]&&(e[0].setAttribute("tabindex","-1"),r(e[e.length+s]))}else{if(i.isForwardDisabled({calendars:Y,maxDate:p})||(a.flushSync((()=>{R(F+i.addMonth({calendars:Y,offset:1,maxDate:p}))})),!L.current))return;const e=L.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]');e[s-n.length]&&(e[0].setAttribute("tabindex","-1"),r(e[s-n.length]))}}))}),[R,L,F,Y,p,v]),K=t.useCallback((e=>{switch(e.key){case"ArrowUp":B(-7),e.preventDefault();break;case"ArrowRight":B(1),e.preventDefault();break;case"ArrowDown":B(7),e.preventDefault();break;case"ArrowLeft":B(-1),e.preventDefault()}}),[B]),P=t.useCallback((e=>{var t;if("Tab"!==e.key)return;const a=null==(t=L.current)?void 0:t.querySelectorAll('button:not([disabled]):not([tabindex="-1"]), select');if(!a)return;const n=a[0],r=a[a.length-1];e.shiftKey||document.activeElement!==r?e.shiftKey&&document.activeElement===n&&(r.focus(),e.preventDefault()):(n.focus(),e.preventDefault())}),[]),J=t.useCallback((e=>{const{date:t,selected:a,selectable:n,prevMonth:r,nextMonth:l}=e;return!!n&&!(!a&&t.toString()!==(null==v?void 0:v.toString())&&(r||l||C.getFullYear()!==t.getFullYear()||A.getMonth()===t.getMonth()||1!==t.getDate()))}),[C,v,A]),U=t.useCallback((()=>{v&&C.getFullYear()-v.getFullYear()==0&&C.getMonth()-v.getMonth()==1?document.querySelectorAll(".jkl-calendar-navigation__arrow")[1].focus():p&&p.getFullYear()-C.getFullYear()==0&&p.getMonth()-C.getMonth()==1&&document.querySelectorAll(".jkl-calendar-navigation__arrow")[0].focus()}),[v,p,C]),V=t.useCallback((e=>{if(4!==e.target.value.length)return;const t=Number.parseInt(e.target.value);if(Number.isNaN(t))return;let a=12*(t-C.getFullYear());const n=new Date(C.getFullYear(),C.getMonth()+a,C.getDate());p&&p.getFullYear()===n.getFullYear()&&p.getMonth()<n.getMonth()?a-=n.getMonth()-p.getMonth():v&&v.getFullYear()===n.getFullYear()&&v.getMonth()>n.getMonth()&&(a+=v.getMonth()-n.getMonth()),N({type:"ADD_OFFSET",addedOffset:a})}),[C,v,p]),W=t.useCallback((e=>{if(!A&&!b)return;const t=C.getFullYear()-(A||new Date).getFullYear(),a=Number.parseInt(e.target.value)-(A||new Date).getMonth();N({type:"SET_OFFSET",newOffset:12*t+a})}),[A,b,C]),z=i.getYearSelectOptions(E,v,p,y),H=i.getMonthSelectOptions(E,x,v,p);return e.jsx("div",{ref:j,id:_,className:"jkl-calendar","data-testid":"jkl-calendar",children:e.jsxs("div",{className:"jkl-calendar__padding",ref:L,onKeyDown:P,children:[e.jsxs("fieldset",{className:"jkl-calendar-navigation",children:[e.jsxs("div",{children:[e.jsx(r.Button,{...I({calendars:Y,onClick:U}),variant:"ghost",icon:e.jsx(l.ArrowLeftIcon,{variant:"medium",bold:!0})}),e.jsx(r.Button,{...$({calendars:Y,onClick:U}),variant:"ghost",icon:e.jsx(o.ArrowRightIcon,{variant:"medium",bold:!0})})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"jkl-calendar-navigation-dropdown",children:[e.jsx("select",{onChange:W,className:"jkl-calendar-navigation-dropdown__select","aria-label":D,value:q.toString(),children:H.map((({label:t,value:a})=>e.jsx("option",{value:a,children:t},a)))}),e.jsx(s.ChevronDownIcon,{bold:!0,className:"jkl-calendar-navigation-dropdown__chevron"})]}),e.jsxs("div",{className:"jkl-calendar-navigation-dropdown",children:[e.jsx("select",{onChange:V,className:"jkl-calendar-navigation-dropdown__select","aria-label":w,value:E.toString(),children:z.map((t=>e.jsx("option",{value:t,children:t},t)))}),e.jsx(s.ChevronDownIcon,{bold:!0,className:"jkl-calendar-navigation-dropdown__chevron"})]})]})]}),Y.map((t=>e.jsxs("table",{className:"jkl-calendar-table","data-testid":"jkl-datepicker-calendar",children:[e.jsxs("caption",{className:"jkl-sr-only",children:[x[t.month],", ",t.year]}),e.jsx("thead",{children:e.jsx("tr",{children:k.map((a=>e.jsx("th",{children:a},`${t.month}${t.year}${a}`)))})}),e.jsx("tbody",{"data-testid":"jkl-datepicker-dates",children:t.weeks.map(((a,n)=>e.jsx("tr",{children:a.map(((a,r)=>{const l=`${t.month}${t.year}${n}${r}`;if("string"==typeof a)return e.jsx("td",{className:"jkl-calendar__date jkl-calendar__date--empty",children:a},l);const{date:o,selectable:s,today:c,prevMonth:d,nextMonth:i}=a;return e.jsx("td",{children:e.jsx("button",{...T({dateObj:a}),type:"button",className:"jkl-calendar-date-button",tabIndex:J(a)?0:-1,"aria-label":`${o.getDate()}. ${x[o.getMonth()].toLowerCase()}`,"aria-current":c?"date":void 0,"data-adjacent":d||i?"true":void 0,disabled:!s,onKeyDown:K,children:e.jsx("span",{"aria-hidden":"true",children:o.getDate()})})},l)}))},`${t.month}${t.year}${n}`)))})]},`${t.month}${t.year}`)))]})})}));g.displayName="Calendar",exports.Calendar=g;
 //# sourceMappingURL=Calendar.cjs.map

package/build/cjs/components/datepicker/internal/Calendar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.cjs","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","setAttribute","nextButton","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":"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"}
1	+ {"version":3,"file":"Calendar.cjs","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 { Button } from \"../../button/Button.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 variant=\"ghost\"\n icon={<ArrowLeftIcon variant=\"medium\" bold />}\n />\n <Button\n {...getForwardProps({\n calendars,\n onClick: handleGotoEdgeMonth,\n })}\n variant=\"ghost\"\n icon={<ArrowRightIcon variant=\"medium\" bold />}\n />\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","setAttribute","nextButton","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","Button","onClick","variant","icon","ArrowLeftIcon","bold","ArrowRightIcon","onChange","map","label","ChevronDownIcon","calendar","month","weekday","weeks","week","weekIndex","index","today","dateObj","tabIndex","toLowerCase","disabled","displayName"],"mappings":"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"}

package/build/cjs/components/tabs/NavTab.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=t.forwardRef(((a,n)=>{const{component:o="a","aria-selected":l,className:i,componentProps:s={},onBeforeKeyboardNavigation:c,...u}=a,d=o,b=t.useCallback(((e,r)=>{c&&!1===c(e,r)||(r.focus(),r.click())}),[c]),g=t.useCallback((e=>{var r,t,a;if("ArrowLeft"===e.key){const a=e.currentTarget,n=e.currentTarget.previousSibling;b(a,n||(null==(t=null==(r=a.parentElement)?void 0:r.lastChild)?void 0:t.previousSibling))}if("ArrowRight"===e.key){const r=e.currentTarget,t=e.currentTarget.nextSibling;t&&"A"===t.nodeName?b(r,t):b(r,null==(a=r.parentElement)?void 0:a.firstChild)}}),[b]);return e.jsx(d,{ref:n,...u,...s,role:"tab","aria-selected":l,className:r.clsx("jkl-tab",i),onKeyDown:g,tabIndex:l?0:-1})}));a.displayName="NavTab",exports.NavTab=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=t.forwardRef((function(a,n){const{as:i="a","aria-selected":l,className:o,onBeforeKeyboardNavigation:s,...c}=a,u=i,d=t.useCallback(((e,r)=>{s&&!1===s(e,r)||(r.focus(),r.click())}),[s]),b=t.useCallback((e=>{var r,t,a;if("ArrowLeft"===e.key){const a=e.currentTarget,n=e.currentTarget.previousSibling;d(a,n||(null==(t=null==(r=a.parentElement)?void 0:r.lastChild)?void 0:t.previousSibling))}if("ArrowRight"===e.key){const r=e.currentTarget,t=e.currentTarget.nextSibling;t&&"A"===t.nodeName?d(r,t):d(r,null==(a=r.parentElement)?void 0:a.firstChild)}}),[d]);return e.jsx(u,{ref:n,...c,role:"tab","aria-selected":l,className:r.clsx("jkl-tab",o),onKeyDown:b,tabIndex:l?0:-1})}));exports.NavTab=a;
 //# sourceMappingURL=NavTab.cjs.map

package/build/cjs/components/tabs/NavTab.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavTab.cjs","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { NavTabProps } from \"./types.js\";\n\nexport const NavTab = forwardRef~~<HTMLAnchorElement,~~ ~~NavTabProps>(~~\n (props, ref) => {\n const {\n ~~component~~ = \"a\",\n \"aria-selected\": selected,\n className,\n ~~componentProps = {},\n~~ onBeforeKeyboardNavigation: onBeforeNavigate,\n ...rest\n } = props;\n\n const Component = ~~component~~;\n\n const navigate = useCallback(\n (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n if (onBeforeNavigate) {\n // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n const doNavigate = onBeforeNavigate(from, to);\n if (doNavigate === false) {\n return;\n }\n }\n\n to.focus();\n // Click brukes for å være router-agnostisk\n to.click();\n },\n [onBeforeNavigate],\n );\n\n const handleOnKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === \"ArrowLeft\") {\n const current = event.currentTarget;\n const prev = event.currentTarget.previousSibling;\n\n if (prev) {\n navigate(current, prev as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement?.lastChild\n ?.previousSibling as HTMLAnchorElement,\n );\n }\n }\n\n if (event.key === \"ArrowRight\") {\n const current = event.currentTarget;\n const next = event.currentTarget.nextSibling;\n\n // skip the focus indicator element\n if (next && next.nodeName === \"A\") {\n navigate(current, next as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement\n ?.firstChild as HTMLAnchorElement,\n );\n }\n }\n },\n [navigate],\n );\n\n return (\n <Component\n ref={ref}\n {...rest}\n ~~{...componentProps}\n~~ role=\"tab\"\n aria-selected={selected}\n className={clsx(\"jkl-tab\", className)}\n onKeyDown={handleOnKeyDown}\n // En faneliste skal være én fokuserbar gruppe.\n // Piltaster brukes for å veksle mellom faner.\n // Bare den aktive fanen skal være fokuserbar med tastatur.\n tabIndex={selected ? 0 : -1}\n />\n );\n }~~,\n~~)~~;\n\nNavTab.displayName~~ = ~~\"NavTab\"~~;\n"],"names":["NavTab","forwardRef","props","ref","~~component~~","selected","className","~~componentProps","~~onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex"~~,"displayName"~~],"mappings":"~~gLAIaA~~,EAASC,EAAAA,~~YAClB~~,~~CAACC~~,~~EAAOC~~,~~KACE~~,MACFC,~~UAAAA~~,~~EAAY~~,~~IACZ~~,gBAAiBC,EACjBC,UAAAA,EACAC,~~eAAAA,EAAiB,CAAC,EAClBC,~~2BAA4BC,KACzBC,~~GACHR~~,~~EAEES~~,~~EAAYP~~,~~EAEZQ~~,EAAWC,EAAAA,aACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,EAAAA,aACnBM,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,IAKI,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,~~sBAARD~~,EAAuBE,~~kBAAvBH~~,EACMD,iBAGlB,CAEI,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,GAElBjB,EACIS,EACA,OAAAW,EAAAX,EAAQM,~~oBAARK~~,~~EAAAA~~,~~EACMC~~,~~WAGlB~~,IAEJ,CAACrB,IAID,OAAAsB,EAAAA,IAACvB,EAAA,~~CACGR~~,IAAAA,~~KACIO~~,~~KACAH~~,~~EACJ4B,~~KAAK,MACL,~~gBAAe9B~~,EACfC,~~UAAW8B~~,EAAAA,KAAK,~~UAAW9B~~,~~GAC3B+B~~,UAAWnB,EAIXoB,~~SAAUjC~~,EAAW,GAAI,~~GAAA,IAMzCL,EAAOuC,YAAc~~"}
1	+ {"version":3,"file":"NavTab.cjs","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/index.js\";\nimport { NavTabProps } from \"./types.js\";\n\ntype NavTabComponent = <ElementType extends React.ElementType = \"a\">(\n props: NavTabProps<ElementType>,\n) => React.ReactElement \| null;\n\nexport const NavTab = forwardRef(function NavTab<\n ElementType extends React.ElementType = \"a\",\n>(props: NavTabProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n as = \"a\",\n \"aria-selected\": selected,\n className,\n onBeforeKeyboardNavigation: onBeforeNavigate,\n ...rest\n } = props;\n\n const Component = as;\n\n const navigate = useCallback(\n (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n if (onBeforeNavigate) {\n // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n const doNavigate = onBeforeNavigate(from, to);\n if (doNavigate === false) {\n return;\n }\n }\n\n to.focus();\n // Click brukes for å være router-agnostisk\n to.click();\n },\n [onBeforeNavigate],\n );\n\n const handleOnKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === \"ArrowLeft\") {\n const current = event.currentTarget;\n const prev = event.currentTarget.previousSibling;\n\n if (prev) {\n navigate(current, prev as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement?.lastChild\n ?.previousSibling as HTMLAnchorElement,\n );\n }\n }\n\n if (event.key === \"ArrowRight\") {\n const current = event.currentTarget;\n const next = event.currentTarget.nextSibling;\n\n // skip the focus indicator element\n if (next && next.nodeName === \"A\") {\n navigate(current, next as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement?.firstChild as HTMLAnchorElement,\n );\n }\n }\n },\n [navigate],\n );\n\n return (\n <Component\n ref={ref}\n {...rest}\n role=\"tab\"\n aria-selected={selected}\n className={clsx(\"jkl-tab\", className)}\n onKeyDown={handleOnKeyDown}\n // En faneliste skal være én fokuserbar gruppe.\n // Piltaster brukes for å veksle mellom faner.\n // Bare den aktive fanen skal være fokuserbar med tastatur.\n tabIndex={selected ? 0 : -1}\n />\n );\n}) as NavTabComponent;\n"],"names":["NavTab","forwardRef","props","ref","as","selected","className","onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex"],"mappings":"gLASaA,EAASC,EAAAA,YAAW,SAE/BC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,IACL,gBAAiBC,EACjBC,UAAAA,EACAC,2BAA4BC,KACzBC,GACHP,EAEEQ,EAAYN,EAEZO,EAAWC,EAAAA,aACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,EAAAA,aACnBM,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,IAKI,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,oBAAR,EAAAD,EAAuBE,gBAAvB,EAAAH,EACMD,iBAGlB,CAEI,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,GAElBjB,EACIS,EACA,OAAAW,EAAAX,EAAQM,oBAAR,EAAAK,EAAuBC,WAGnC,IAEJ,CAACrB,IAID,OAAAsB,EAAAA,IAACvB,EAAA,CACGP,IAAAA,KACIM,EACJyB,KAAK,MACL,gBAAe7B,EACfC,UAAW6B,EAAAA,KAAK,UAAW7B,GAC3B8B,UAAWnB,EAIXoB,SAAUhC,EAAW,GAAI,GAGrC"}

package/build/cjs/components/tabs/NavTab.d.cts CHANGED Viewed

@@ -1,3 +1,5 @@
 import { default as React } from 'react';
 import { NavTabProps } from './types.cjs';
-export declare const NavTab: React.ForwardRefExoticComponent<NavTabProps<Record<string, unknown>> & React.RefAttributes<HTMLAnchorElement>>;
+type NavTabComponent = <ElementType extends React.ElementType = "a">(props: NavTabProps<ElementType>) => React.ReactElement | null;
+export declare const NavTab: NavTabComponent;
+export {};

package/build/cjs/components/tabs/stories/NavTabs.stories.d.cts CHANGED Viewed

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: ({ "aria-label": ariaLabel, children, className, density, ...rest }: import('../types.js').NavTabsProps) => React.JSX.Element;
     subcomponents: {
-        NavTab: React.ForwardRefExoticComponent<import('../types.js').NavTabProps<Record<string, unknown>> & React.RefAttributes<HTMLAnchorElement>>;
+        NavTab: <ElementType extends React.ElementType = "a">(props: import('../types.js').NavTabProps<ElementType>) => React.ReactElement | null;
     };
     tags: string[];
 };

package/build/cjs/components/tabs/types.d.cts CHANGED Viewed

@@ -1,20 +1,6 @@
-import { AnchorHTMLAttributes, ElementType } from 'react';
 import { Density, WithChildren } from '../../core/types.cjs';
-export interface NavTabProps<T extends object = Record<string, unknown>> extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** Sett til true for den nåværende fanen. False på resten. */
-    "aria-selected": boolean;
-    className?: string;
-    id?: string;
-    /**
-     * Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.
-     * @default "a"
-     */
-    component?: ElementType;
-    /** Send inn custom props til `component`. Nyttig om routeren din har noe fancy custom greier. */
-    componentProps?: T;
-    /** Vanlig alternativ til `href` i routere. */
-    to?: string;
-    href?: string;
+import { PolymorphicPropsWithRef } from '../../utilities/index.cjs';
+export type NavTabProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     /**
      * Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.
      *
@@ -22,7 +8,7 @@ export interface NavTabProps<T extends object = Record<string, unknown>> extends
      * navigasjon kan du returnere `false` her og sørge for korrekt oppførsel selv.
      */
     onBeforeKeyboardNavigation?: (from: HTMLAnchorElement, to: HTMLAnchorElement) => boolean | void;
-}
+}>;
 export interface NavTabsProps extends WithChildren {
     "aria-label"?: string;
     className?: string;

package/build/es/components/datepicker/internal/Calendar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as a,useReducer as n,useEffect as r,useCallback as l,useRef as o}from"react";import{flushSync as s}from"react-dom";import{useId as d}from"../../../hooks/useId/useId.js";import{ArrowLeftIcon as c}from"../../icon/icons/ArrowLeftIcon.js";import{ArrowRightIcon as i}from"../../icon/icons/ArrowRightIcon.js";import{ChevronDownIcon as u}from"../../icon/icons/ChevronDownIcon.js";import{calendarReducer as h,calendarInitializer as g}from"./calendarReducer.js";import{useCalendar as m}from"./useCalendar.js";import{getInitialDateShown as f,isBackDisabled as b,subtractMonth as p,isForwardDisabled as v,addMonth as k,getYearSelectOptions as j,getMonthSelectOptions as D,DEFAULT_YEARS_TO_SHOW as w}from"./utils.js";const y=["Januar","Februar","Mars","April","Mai","Juni","Juli","August","September","Oktober","November","Desember"],_=["man","tir","ons","tor","fre","lør","søn"],M=a(((a,M)=>{const{date:S,defaultSelected:F,density:A,minDate:N,maxDate:E,days:Y=_,months:x=y,monthLabel:O="Velg måned",yearLabel:C="Velg år",yearsToShow:I=w,onTabOutside:$,...T}=a,R=d("jkl-calendar"),[{offset:L,selectedDate:q,shownDate:K},J]=n(h,f(S,F,N,E),g),P=K.getMonth(),B=K.getFullYear();r((()=>{J({type:"SET_SELECTED_DATE",newDate:f(S,F,N,E)})}),[S,F,N,E]);const U=l((e=>{J({type:"SET_OFFSET",newOffset:e})}),[]),{calendars:V,getBackProps:W,getDateProps:z,getForwardProps:H,handleOffsetChanged:G}=m({date:q,selected:q,minDate:N,maxDate:E,offset:L,onOffsetChanged:U,firstDayOfWeek:1,...T}),Q=o(null),X=l((e=>{if(!Q.current)return;const t=document.activeElement,a=Q.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]'),n=async e=>{null==t||t.setAttribute("tabindex","-1"),e.setAttribute("tabindex","0"),e.focus()};a.forEach(((r,l)=>{const o=l+e;if(r==t)if(o<=a.length-1&&o>=0)n(a[o]);else if(e<0){if(b({calendars:V,minDate:N})||(s((()=>{G(L-p({calendars:V,offset:1,minDate:N}))})),!Q.current))return;const e=Q.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]');e[e.length+o]&&(e[0].setAttribute("tabindex","-1"),n(e[e.length+o]))}else{if(v({calendars:V,maxDate:E})||(s((()=>{G(L+k({calendars:V,offset:1,maxDate:E}))})),!Q.current))return;const e=Q.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]');e[o-a.length]&&(e[0].setAttribute("tabindex","-1"),n(e[o-a.length]))}}))}),[G,Q,L,V,E,N]),Z=l((e=>{switch(e.key){case"ArrowUp":X(-7),e.preventDefault();break;case"ArrowRight":X(1),e.preventDefault();break;case"ArrowDown":X(7),e.preventDefault();break;case"ArrowLeft":X(-1),e.preventDefault()}}),[X]),ee=l((e=>{var t;if("Tab"!==e.key)return;const a=null==(t=Q.current)?void 0:t.querySelectorAll('button:not([disabled]):not([tabindex="-1"]), select');if(!a)return;const n=a[0],r=a[a.length-1];e.shiftKey||document.activeElement!==r?e.shiftKey&&document.activeElement===n&&(r.focus(),e.preventDefault()):(n.focus(),e.preventDefault())}),[]),te=l((e=>{const{date:t,selected:a,selectable:n,prevMonth:r,nextMonth:l}=e;return!!n&&!(!a&&t.toString()!==(null==N?void 0:N.toString())&&(r||l||K.getFullYear()!==t.getFullYear()||q.getMonth()===t.getMonth()||1!==t.getDate()))}),[K,N,q]),ae=l((()=>{N&&K.getFullYear()-N.getFullYear()==0&&K.getMonth()-N.getMonth()==1?document.querySelectorAll(".jkl-calendar-navigation__arrow")[1].focus():E&&E.getFullYear()-K.getFullYear()==0&&E.getMonth()-K.getMonth()==1&&document.querySelectorAll(".jkl-calendar-navigation__arrow")[0].focus()}),[N,E,K]),ne=l((e=>{if(4!==e.target.value.length)return;const t=Number.parseInt(e.target.value);if(Number.isNaN(t))return;let a=12*(t-K.getFullYear());const n=new Date(K.getFullYear(),K.getMonth()+a,K.getDate());E&&E.getFullYear()===n.getFullYear()&&E.getMonth()<n.getMonth()?a-=n.getMonth()-E.getMonth():N&&N.getFullYear()===n.getFullYear()&&N.getMonth()>n.getMonth()&&(a+=N.getMonth()-n.getMonth()),J({type:"ADD_OFFSET",addedOffset:a})}),[K,N,E]),re=l((e=>{if(!q&&!S)return;const t=K.getFullYear()-(q||new Date).getFullYear(),a=Number.parseInt(e.target.value)-(q||new Date).getMonth();J({type:"SET_OFFSET",newOffset:12*t+a})}),[q,S,K]),le=j(B,N,E,I),oe=D(B,x,N,E);return e("div",{ref:M,id:R,className:"jkl-calendar","data-testid":"jkl-calendar",children:t("div",{className:"jkl-calendar__padding",ref:Q,onKeyDown:ee,children:[t("fieldset",{className:"jkl-calendar-navigation",children:[t("div",{children:[e("button",{...W({calendars:V,onClick:ae}),className:"jkl-calendar-navigation__arrow",type:"button",children:e(c,{variant:"medium",bold:!0})}),e("button",{...H({calendars:V,onClick:ae}),className:"jkl-calendar-navigation__arrow",type:"button",children:e(i,{variant:"medium",bold:!0})})]}),t("div",{children:[t("div",{className:"jkl-calendar-navigation-dropdown",children:[e("select",{onChange:re,className:"jkl-calendar-navigation-dropdown__select","aria-label":O,value:P.toString(),children:oe.map((({label:t,value:a})=>e("option",{value:a,children:t},a)))}),e(u,{bold:!0,className:"jkl-calendar-navigation-dropdown__chevron"})]}),t("div",{className:"jkl-calendar-navigation-dropdown",children:[e("select",{onChange:ne,className:"jkl-calendar-navigation-dropdown__select","aria-label":C,value:B.toString(),children:le.map((t=>e("option",{value:t,children:t},t)))}),e(u,{bold:!0,className:"jkl-calendar-navigation-dropdown__chevron"})]})]})]}),V.map((a=>t("table",{className:"jkl-calendar-table","data-testid":"jkl-datepicker-calendar",children:[t("caption",{className:"jkl-sr-only",children:[x[a.month],", ",a.year]}),e("thead",{children:e("tr",{children:Y.map((t=>e("th",{children:t},`${a.month}${a.year}${t}`)))})}),e("tbody",{"data-testid":"jkl-datepicker-dates",children:a.weeks.map(((t,n)=>e("tr",{children:t.map(((t,r)=>{const l=`${a.month}${a.year}${n}${r}`;if("string"==typeof t)return e("td",{className:"jkl-calendar__date jkl-calendar__date--empty",children:t},l);const{date:o,selectable:s,today:d,prevMonth:c,nextMonth:i}=t;return e("td",{children:e("button",{...z({dateObj:t}),type:"button",className:"jkl-calendar-date-button",tabIndex:te(t)?0:-1,"aria-label":`${o.getDate()}. ${x[o.getMonth()].toLowerCase()}`,"aria-current":d?"date":void 0,"data-adjacent":c||i?"true":void 0,disabled:!s,onKeyDown:Z,children:e("span",{"aria-hidden":"true",children:o.getDate()})})},l)}))},`${a.month}${a.year}${n}`)))})]},`${a.month}${a.year}`)))]})})}));M.displayName="Calendar";export{M as Calendar};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as a,useReducer as n,useEffect as r,useCallback as l,useRef as o}from"react";import{flushSync as s}from"react-dom";import{useId as d}from"../../../hooks/useId/useId.js";import{Button as c}from"../../button/Button.js";import{ArrowLeftIcon as i}from"../../icon/icons/ArrowLeftIcon.js";import{ArrowRightIcon as u}from"../../icon/icons/ArrowRightIcon.js";import{ChevronDownIcon as h}from"../../icon/icons/ChevronDownIcon.js";import{calendarReducer as g,calendarInitializer as m}from"./calendarReducer.js";import{useCalendar as f}from"./useCalendar.js";import{getInitialDateShown as p,isBackDisabled as b,subtractMonth as v,isForwardDisabled as D,addMonth as j,getYearSelectOptions as k,getMonthSelectOptions as w,DEFAULT_YEARS_TO_SHOW as y}from"./utils.js";const M=["Januar","Februar","Mars","April","Mai","Juni","Juli","August","September","Oktober","November","Desember"],S=["man","tir","ons","tor","fre","lør","søn"],_=a(((a,_)=>{const{date:F,defaultSelected:A,density:N,minDate:E,maxDate:Y,days:x=S,months:O=M,monthLabel:C="Velg måned",yearLabel:I="Velg år",yearsToShow:$=y,onTabOutside:T,...R}=a,L=d("jkl-calendar"),[{offset:q,selectedDate:B,shownDate:K},J]=n(g,p(F,A,E,Y),m),P=K.getMonth(),U=K.getFullYear();r((()=>{J({type:"SET_SELECTED_DATE",newDate:p(F,A,E,Y)})}),[F,A,E,Y]);const V=l((e=>{J({type:"SET_OFFSET",newOffset:e})}),[]),{calendars:W,getBackProps:z,getDateProps:H,getForwardProps:G,handleOffsetChanged:Q}=f({date:B,selected:B,minDate:E,maxDate:Y,offset:q,onOffsetChanged:V,firstDayOfWeek:1,...R}),X=o(null),Z=l((e=>{if(!X.current)return;const t=document.activeElement,a=X.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]'),n=async e=>{null==t||t.setAttribute("tabindex","-1"),e.setAttribute("tabindex","0"),e.focus()};a.forEach(((r,l)=>{const o=l+e;if(r==t)if(o<=a.length-1&&o>=0)n(a[o]);else if(e<0){if(b({calendars:W,minDate:E})||(s((()=>{Q(q-v({calendars:W,offset:1,minDate:E}))})),!X.current))return;const e=X.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]');e[e.length+o]&&(e[0].setAttribute("tabindex","-1"),n(e[e.length+o]))}else{if(D({calendars:W,maxDate:Y})||(s((()=>{Q(q+j({calendars:W,offset:1,maxDate:Y}))})),!X.current))return;const e=X.current.querySelectorAll('button.jkl-calendar-date-button:not([data-adjacent="true"]');e[o-a.length]&&(e[0].setAttribute("tabindex","-1"),n(e[o-a.length]))}}))}),[Q,X,q,W,Y,E]),ee=l((e=>{switch(e.key){case"ArrowUp":Z(-7),e.preventDefault();break;case"ArrowRight":Z(1),e.preventDefault();break;case"ArrowDown":Z(7),e.preventDefault();break;case"ArrowLeft":Z(-1),e.preventDefault()}}),[Z]),te=l((e=>{var t;if("Tab"!==e.key)return;const a=null==(t=X.current)?void 0:t.querySelectorAll('button:not([disabled]):not([tabindex="-1"]), select');if(!a)return;const n=a[0],r=a[a.length-1];e.shiftKey||document.activeElement!==r?e.shiftKey&&document.activeElement===n&&(r.focus(),e.preventDefault()):(n.focus(),e.preventDefault())}),[]),ae=l((e=>{const{date:t,selected:a,selectable:n,prevMonth:r,nextMonth:l}=e;return!!n&&!(!a&&t.toString()!==(null==E?void 0:E.toString())&&(r||l||K.getFullYear()!==t.getFullYear()||B.getMonth()===t.getMonth()||1!==t.getDate()))}),[K,E,B]),ne=l((()=>{E&&K.getFullYear()-E.getFullYear()==0&&K.getMonth()-E.getMonth()==1?document.querySelectorAll(".jkl-calendar-navigation__arrow")[1].focus():Y&&Y.getFullYear()-K.getFullYear()==0&&Y.getMonth()-K.getMonth()==1&&document.querySelectorAll(".jkl-calendar-navigation__arrow")[0].focus()}),[E,Y,K]),re=l((e=>{if(4!==e.target.value.length)return;const t=Number.parseInt(e.target.value);if(Number.isNaN(t))return;let a=12*(t-K.getFullYear());const n=new Date(K.getFullYear(),K.getMonth()+a,K.getDate());Y&&Y.getFullYear()===n.getFullYear()&&Y.getMonth()<n.getMonth()?a-=n.getMonth()-Y.getMonth():E&&E.getFullYear()===n.getFullYear()&&E.getMonth()>n.getMonth()&&(a+=E.getMonth()-n.getMonth()),J({type:"ADD_OFFSET",addedOffset:a})}),[K,E,Y]),le=l((e=>{if(!B&&!F)return;const t=K.getFullYear()-(B||new Date).getFullYear(),a=Number.parseInt(e.target.value)-(B||new Date).getMonth();J({type:"SET_OFFSET",newOffset:12*t+a})}),[B,F,K]),oe=k(U,E,Y,$),se=w(U,O,E,Y);return e("div",{ref:_,id:L,className:"jkl-calendar","data-testid":"jkl-calendar",children:t("div",{className:"jkl-calendar__padding",ref:X,onKeyDown:te,children:[t("fieldset",{className:"jkl-calendar-navigation",children:[t("div",{children:[e(c,{...z({calendars:W,onClick:ne}),variant:"ghost",icon:e(i,{variant:"medium",bold:!0})}),e(c,{...G({calendars:W,onClick:ne}),variant:"ghost",icon:e(u,{variant:"medium",bold:!0})})]}),t("div",{children:[t("div",{className:"jkl-calendar-navigation-dropdown",children:[e("select",{onChange:le,className:"jkl-calendar-navigation-dropdown__select","aria-label":C,value:P.toString(),children:se.map((({label:t,value:a})=>e("option",{value:a,children:t},a)))}),e(h,{bold:!0,className:"jkl-calendar-navigation-dropdown__chevron"})]}),t("div",{className:"jkl-calendar-navigation-dropdown",children:[e("select",{onChange:re,className:"jkl-calendar-navigation-dropdown__select","aria-label":I,value:U.toString(),children:oe.map((t=>e("option",{value:t,children:t},t)))}),e(h,{bold:!0,className:"jkl-calendar-navigation-dropdown__chevron"})]})]})]}),W.map((a=>t("table",{className:"jkl-calendar-table","data-testid":"jkl-datepicker-calendar",children:[t("caption",{className:"jkl-sr-only",children:[O[a.month],", ",a.year]}),e("thead",{children:e("tr",{children:x.map((t=>e("th",{children:t},`${a.month}${a.year}${t}`)))})}),e("tbody",{"data-testid":"jkl-datepicker-dates",children:a.weeks.map(((t,n)=>e("tr",{children:t.map(((t,r)=>{const l=`${a.month}${a.year}${n}${r}`;if("string"==typeof t)return e("td",{className:"jkl-calendar__date jkl-calendar__date--empty",children:t},l);const{date:o,selectable:s,today:d,prevMonth:c,nextMonth:i}=t;return e("td",{children:e("button",{...H({dateObj:t}),type:"button",className:"jkl-calendar-date-button",tabIndex:ae(t)?0:-1,"aria-label":`${o.getDate()}. ${O[o.getMonth()].toLowerCase()}`,"aria-current":d?"date":void 0,"data-adjacent":c||i?"true":void 0,disabled:!s,onKeyDown:ee,children:e("span",{"aria-hidden":"true",children:o.getDate()})})},l)}))},`${a.month}${a.year}${n}`)))})]},`${a.month}${a.year}`)))]})})}));_.displayName="Calendar";export{_ as Calendar};
 //# sourceMappingURL=Calendar.js.map

package/build/es/components/datepicker/internal/Calendar.js.map CHANGED Viewed

	@@ -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 { 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":"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"}
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 { Button } from \"../../button/Button.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 variant=\"ghost\"\n icon={<ArrowLeftIcon variant=\"medium\" bold />}\n />\n <Button\n {...getForwardProps({\n calendars,\n onClick: handleGotoEdgeMonth,\n })}\n variant=\"ghost\"\n icon={<ArrowRightIcon variant=\"medium\" bold />}\n />\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","Button","onClick","variant","icon","ArrowLeftIcon","bold","ArrowRightIcon","onChange","map","label","ChevronDownIcon","calendar","month","weekday","weeks","week","weekIndex","index","today","dateObj","tabIndex","toLowerCase","disabled","displayName"],"mappings":"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"}

package/build/es/components/tabs/NavTab.d.ts CHANGED Viewed

@@ -1,3 +1,5 @@
 import { default as React } from 'react';
 import { NavTabProps } from './types.js';
-export declare const NavTab: React.ForwardRefExoticComponent<NavTabProps<Record<string, unknown>> & React.RefAttributes<HTMLAnchorElement>>;
+type NavTabComponent = <ElementType extends React.ElementType = "a">(props: NavTabProps<ElementType>) => React.ReactElement | null;
+export declare const NavTab: NavTabComponent;
+export {};

package/build/es/components/tabs/NavTab.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a,useCallback as t}from"react";const o=a(((a,o)=>{const{component:n="a","aria-selected":i,className:s,componentProps:l={},onBeforeKeyboardNavigation:c,...m}=a,u=n,d=t(((e,r)=>{c&&!1===c(e,r)||(r.focus(),r.click())}),[c]),f=t((e=>{var r,a,t;if("ArrowLeft"===e.key){const t=e.currentTarget,o=e.currentTarget.previousSibling;d(t,o||(null==(a=null==(r=t.parentElement)?void 0:r.lastChild)?void 0:a.previousSibling))}if("ArrowRight"===e.key){const r=e.currentTarget,a=e.currentTarget.nextSibling;a&&"A"===a.nodeName?d(r,a):d(r,null==(t=r.parentElement)?void 0:t.firstChild)}}),[d]);return e(u,{ref:o,...m,...l,role:"tab","aria-selected":i,className:r("jkl-tab",s),onKeyDown:f,tabIndex:i?0:-1})}));o.displayName="NavTab";export{o as NavTab};
+import{jsx as e}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a,useCallback as t}from"react";const n=a((function(a,n){const{as:o="a","aria-selected":i,className:s,onBeforeKeyboardNavigation:l,...c}=a,u=o,f=t(((e,r)=>{l&&!1===l(e,r)||(r.focus(),r.click())}),[l]),m=t((e=>{var r,a,t;if("ArrowLeft"===e.key){const t=e.currentTarget,n=e.currentTarget.previousSibling;f(t,n||(null==(a=null==(r=t.parentElement)?void 0:r.lastChild)?void 0:a.previousSibling))}if("ArrowRight"===e.key){const r=e.currentTarget,a=e.currentTarget.nextSibling;a&&"A"===a.nodeName?f(r,a):f(r,null==(t=r.parentElement)?void 0:t.firstChild)}}),[f]);return e(u,{ref:n,...c,role:"tab","aria-selected":i,className:r("jkl-tab",s),onKeyDown:m,tabIndex:i?0:-1})}));export{n as NavTab};
 //# sourceMappingURL=NavTab.js.map

package/build/es/components/tabs/NavTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavTab.js","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { NavTabProps } from \"./types.js\";\n\nexport const NavTab = forwardRef~~<HTMLAnchorElement,~~ ~~NavTabProps>(~~\n (props, ref) => {\n const {\n ~~component~~ = \"a\",\n \"aria-selected\": selected,\n className,\n ~~componentProps = {},\n~~ onBeforeKeyboardNavigation: onBeforeNavigate,\n ...rest\n } = props;\n\n const Component = ~~component~~;\n\n const navigate = useCallback(\n (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n if (onBeforeNavigate) {\n // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n const doNavigate = onBeforeNavigate(from, to);\n if (doNavigate === false) {\n return;\n }\n }\n\n to.focus();\n // Click brukes for å være router-agnostisk\n to.click();\n },\n [onBeforeNavigate],\n );\n\n const handleOnKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === \"ArrowLeft\") {\n const current = event.currentTarget;\n const prev = event.currentTarget.previousSibling;\n\n if (prev) {\n navigate(current, prev as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement?.lastChild\n ?.previousSibling as HTMLAnchorElement,\n );\n }\n }\n\n if (event.key === \"ArrowRight\") {\n const current = event.currentTarget;\n const next = event.currentTarget.nextSibling;\n\n // skip the focus indicator element\n if (next && next.nodeName === \"A\") {\n navigate(current, next as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement\n ?.firstChild as HTMLAnchorElement,\n );\n }\n }\n },\n [navigate],\n );\n\n return (\n <Component\n ref={ref}\n {...rest}\n ~~{...componentProps}\n~~ role=\"tab\"\n aria-selected={selected}\n className={clsx(\"jkl-tab\", className)}\n onKeyDown={handleOnKeyDown}\n // En faneliste skal være én fokuserbar gruppe.\n // Piltaster brukes for å veksle mellom faner.\n // Bare den aktive fanen skal være fokuserbar med tastatur.\n tabIndex={selected ? 0 : -1}\n />\n );\n }~~,\n~~)~~;\n\nNavTab.displayName~~ = ~~\"NavTab\"~~;\n"],"names":["NavTab","forwardRef","props","ref","~~component~~","selected","className","~~componentProps","~~onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex"~~,"displayName"~~],"mappings":"~~0IAIO~~,MAAMA,EAASC,~~GAClB~~,~~CAACC~~,~~EAAOC~~,~~KACE~~,MACFC,~~UAAAA~~,~~EAAY~~,~~IACZ~~,gBAAiBC,EACjBC,UAAAA,EACAC,~~eAAAA,EAAiB,CAAC,EAClBC,~~2BAA4BC,KACzBC,~~GACHR~~,~~EAEES~~,~~EAAYP~~,~~EAEZQ~~,EAAWC,GACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,GACnBM,cACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,IAKI,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,sBAARD,EAAuBE,kBAAvBH,EACMD,iBAGlB,CAEIL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,GAElBjB,EACIS,EACA,OAAAW,EAAAX,EAAQM,oBAAR,EAAAK,~~EACMC~~,~~WAGlB~~,IAEJ,CAACrB,IAID,OAAAsB,EAACvB,EAAA,~~CACGR~~,IAAAA,~~KACIO~~,~~KACAH~~,~~EACJ4B,~~KAAK,MACL,~~gBAAe9B~~,EACfC,~~UAAW8B~~,EAAK,~~UAAW9B~~,~~GAC3B+B~~,UAAWnB,EAIXoB,~~SAAUjC~~,EAAW,GAAI,~~GAAA,IAMzCL,EAAOuC,YAAc~~"}
1	+ {"version":3,"file":"NavTab.js","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/index.js\";\nimport { NavTabProps } from \"./types.js\";\n\ntype NavTabComponent = <ElementType extends React.ElementType = \"a\">(\n props: NavTabProps<ElementType>,\n) => React.ReactElement \| null;\n\nexport const NavTab = forwardRef(function NavTab<\n ElementType extends React.ElementType = \"a\",\n>(props: NavTabProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n as = \"a\",\n \"aria-selected\": selected,\n className,\n onBeforeKeyboardNavigation: onBeforeNavigate,\n ...rest\n } = props;\n\n const Component = as;\n\n const navigate = useCallback(\n (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n if (onBeforeNavigate) {\n // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n const doNavigate = onBeforeNavigate(from, to);\n if (doNavigate === false) {\n return;\n }\n }\n\n to.focus();\n // Click brukes for å være router-agnostisk\n to.click();\n },\n [onBeforeNavigate],\n );\n\n const handleOnKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === \"ArrowLeft\") {\n const current = event.currentTarget;\n const prev = event.currentTarget.previousSibling;\n\n if (prev) {\n navigate(current, prev as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement?.lastChild\n ?.previousSibling as HTMLAnchorElement,\n );\n }\n }\n\n if (event.key === \"ArrowRight\") {\n const current = event.currentTarget;\n const next = event.currentTarget.nextSibling;\n\n // skip the focus indicator element\n if (next && next.nodeName === \"A\") {\n navigate(current, next as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement?.firstChild as HTMLAnchorElement,\n );\n }\n }\n },\n [navigate],\n );\n\n return (\n <Component\n ref={ref}\n {...rest}\n role=\"tab\"\n aria-selected={selected}\n className={clsx(\"jkl-tab\", className)}\n onKeyDown={handleOnKeyDown}\n // En faneliste skal være én fokuserbar gruppe.\n // Piltaster brukes for å veksle mellom faner.\n // Bare den aktive fanen skal være fokuserbar med tastatur.\n tabIndex={selected ? 0 : -1}\n />\n );\n}) as NavTabComponent;\n"],"names":["NavTab","forwardRef","props","ref","as","selected","className","onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex"],"mappings":"0IASO,MAAMA,EAASC,GAAW,SAE/BC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,IACL,gBAAiBC,EACjBC,UAAAA,EACAC,2BAA4BC,KACzBC,GACHP,EAEEQ,EAAYN,EAEZO,EAAWC,GACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,GACnBM,cACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,IAKI,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,sBAARD,EAAuBE,kBAAvBH,EACMD,iBAGlB,CAEIL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,GAElBjB,EACIS,EACA,OAAAW,EAAAX,EAAQM,oBAAR,EAAAK,EAAuBC,WAGnC,IAEJ,CAACrB,IAID,OAAAsB,EAACvB,EAAA,CACGP,IAAAA,KACIM,EACJyB,KAAK,MACL,gBAAe7B,EACfC,UAAW6B,EAAK,UAAW7B,GAC3B8B,UAAWnB,EAIXoB,SAAUhC,EAAW,GAAI,GAGrC"}