@fremtind/jokul 5.2.3 → 6.0.0-next.1

package/build/es/components/date-input/DateInput.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<import('../input-group/types.js').InputGroupProps, "children" | "render"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "max" | "min" | "type" | "value"> & import('../../utilities/types.js').DataTestAutoId & {
+    value?: string;
+    defaultValue?: string;
+    min?: string | number;
+    max?: string | number;
+} & React.RefAttributes<HTMLInputElement>>;

package/build/es/components/date-input/DateInput.js

@@ -0,0 +1,2 @@
+import{jsx as o,jsxs as n}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useId as e,useState as r,useRef as s}from"react";import{useMergeRefs as a}from"../../utilities/mergeRefs.js";import"../../utilities/polymorphism/SlotComponent.js";import{Button as c}from"../button/Button.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import{CalendarIcon as p}from"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/OpenInNewIcon.js";import"../icon/icons/PenIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/WarningIcon.js";import"../../hooks/useId/useId.js";import{InputGroup as l}from"../input-group/InputGroup.js";import{Calendar as m}from"./calendar/Calendar.js";import{toValidBoundary as u}from"./utils.js";const d=t((t,d)=>{const{max:j,min:I,defaultValue:b,value:v,name:h,onChange:C,onBlur:f,onClick:g,onFocus:w,id:k,"data-testautoid":y,className:A="",label:L,labelProps:_,helpLabel:D,errorLabel:x,supportLabelProps:N,tooltip:P,description:R,required:B,disabled:E,readOnly:M,autoComplete:O,inputMode:S,...T}=t,{inline:V,style:z,"data-size":G,...H}=T,U=e(),q=k?`${k}-calendar`:`jkl-calendar-${U}`,F=void 0!==v,[$,Q]=r(b??""),W=F?v:$,J=u(I),K=u(j),X=s(null),Y=a(X,d),Z=o=>{F||Q(o.target.value),C?.(o)},oo=()=>{!F&&X.current&&Q(X.current.value)};return o(l,{id:k,className:i("jkl-date-input",A),inline:V,style:z,"data-size":G,label:L,labelProps:_,helpLabel:D,errorLabel:x,supportLabelProps:N,tooltip:P,description:R,render:i=>n("div",{className:"jkl-date-input__wrapper","data-invalid":i["aria-invalid"],children:[o("input",{ref:Y,"data-testid":"jkl-date-input__input","data-testautoid":y,"data-empty":W?void 0:"true",className:"jkl-date-input__input",name:h,type:"date",...F?{value:v}:{defaultValue:b},max:K,min:J,required:B,disabled:E,readOnly:M,autoComplete:O,inputMode:S,onChange:Z,onFocus:w,onBlur:f,onClick:o=>{o.preventDefault(),g?.(o)},...H,...i}),o(c,{type:"button",variant:"ghost",icon:o(p,{}),"aria-label":"Åpne kalender","data-testid":"jkl-date-input__trigger",className:"jkl-date-input__calendar-trigger",disabled:E||M,onClick:oo,popovertarget:q}),o(m,{"data-testid":"jkl-calendar",id:q,value:W,min:J,max:K,onChange:o=>(o=>{const n=X.current;if(!n)return;const i=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set;i?i.call(n,o):n.value=o,n.dispatchEvent(new Event("input",{bubbles:!0}))})(o.target.value),label:L,description:R,popover:"auto"})]})})});d.displayName="DateInput";export{d as DateInput};
+//# sourceMappingURL=DateInput.js.map

package/build/es/components/date-input/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n    (props, forwardedInputRef) => {\n        const {\n            max,\n            min,\n            defaultValue,\n            value,\n            name,\n            onChange,\n            onBlur,\n            onClick,\n            onFocus,\n            id,\n            \"data-testautoid\": testAutoId,\n            className = \"\",\n            label,\n            labelProps,\n            helpLabel,\n            errorLabel,\n            supportLabelProps,\n            tooltip,\n            description,\n            required,\n            disabled,\n            readOnly,\n            autoComplete,\n            inputMode,\n            ...rest\n        } = props;\n\n        // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n        // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n        const {\n            inline,\n            style,\n            \"data-size\": dataSize,\n            ...inputAttributes\n        } = rest;\n\n        const generatedCalendarId = useId();\n        const calendarId = id\n            ? `${id}-calendar`\n            : `jkl-calendar-${generatedCalendarId}`;\n\n        const isControlled = value !== undefined;\n\n        // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n        // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n        // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n        const [internalValue, setInternalValue] = useState<string>(\n            defaultValue ?? \"\",\n        );\n        const currentValue = isControlled ? value : internalValue;\n\n        // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n        // react-hook-forms register). Både det native feltet og kalenderen\n        // forholder seg til ISO-strenger.\n        const minValue = toValidBoundary(min);\n        const maxValue = toValidBoundary(max);\n\n        // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n        // slik at vi kan lese og skrive verdien fra kalenderen.\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n        const handleInputChange = (\n            event: React.ChangeEvent<HTMLInputElement>,\n        ) => {\n            if (!isControlled) {\n                setInternalValue(event.target.value);\n            }\n            onChange?.(event);\n        };\n\n        // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n        // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n        // slik at også react-hook-form fanger endringen.\n        const commitFromCalendar = (next: string) => {\n            const input = inputRef.current;\n            if (!input) {\n                return;\n            }\n            const setNativeValue = Object.getOwnPropertyDescriptor(\n                window.HTMLInputElement.prototype,\n                \"value\",\n            )?.set;\n            if (setNativeValue) {\n                setNativeValue.call(input, next);\n            } else {\n                input.value = next;\n            }\n            input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        };\n\n        // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n        // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n        // ukontrollert modus.\n        const syncCalendarFromInput = () => {\n            if (!isControlled && inputRef.current) {\n                setInternalValue(inputRef.current.value);\n            }\n        };\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-date-input\", className)}\n                inline={inline}\n                style={style}\n                data-size={dataSize}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <div\n                        className=\"jkl-date-input__wrapper\"\n                        data-invalid={inputProps[\"aria-invalid\"]}\n                    >\n                        <input\n                            ref={setInputRef}\n                            data-testid=\"jkl-date-input__input\"\n                            data-testautoid={testAutoId}\n                            data-empty={currentValue ? undefined : \"true\"}\n                            className=\"jkl-date-input__input\"\n                            name={name}\n                            type=\"date\"\n                            {...(isControlled ? { value } : { defaultValue })}\n                            max={maxValue}\n                            min={minValue}\n                            required={required}\n                            disabled={disabled}\n                            readOnly={readOnly}\n                            autoComplete={autoComplete}\n                            inputMode={inputMode}\n                            onChange={handleInputChange}\n                            onFocus={onFocus}\n                            onBlur={onBlur}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                onClick?.(e);\n                            }}\n                            {...inputAttributes}\n                            {...inputProps}\n                        />\n                        <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            icon={<CalendarIcon />}\n                            aria-label=\"Åpne kalender\"\n                            data-testid=\"jkl-date-input__trigger\"\n                            className=\"jkl-date-input__calendar-trigger\"\n                            disabled={disabled || readOnly}\n                            onClick={syncCalendarFromInput}\n                            // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n                            popovertarget={calendarId}\n                        />\n                        <Calendar\n                            data-testid=\"jkl-calendar\"\n                            id={calendarId}\n                            value={currentValue}\n                            min={minValue}\n                            max={maxValue}\n                            onChange={(e) => commitFromCalendar(e.target.value)}\n                            label={label}\n                            description={description}\n                            popover=\"auto\"\n                        />\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"o4DAUO,MAAMA,EAAYC,EACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,IACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAgBrC,GAC3BsC,EAAWD,EAAgBtC,GAI3BwC,EAAWC,EAAgC,MAC3CC,EAAcC,EAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,GAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAACC,EAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAACW,EAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,OAAOC,EAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,GAETiB,cAAejC,IAEnBkB,EAACgB,EAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFJ,CAACQ,IACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}

package/build/es/components/date-input/calendar/Calendar.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { CalendarProps } from './types.js';
+export declare const Calendar: {
+    (props: CalendarProps): React.JSX.Element;
+    displayName: string;
+};

package/build/es/components/date-input/calendar/Calendar.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useId as t,useRef as n,useState as a,useMemo as r,useEffect as i}from"react";import{Button as s}from"../../button/Button.js";import{Flex as c}from"../../flex/Flex.js";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import{ArrowLeftIcon as l}from"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import{ArrowRightIcon as p}from"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/OpenInNewIcon.js";import"../../icon/icons/PenIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/WarningIcon.js";import{Select as m}from"../../select/Select.js";import"../../table/DataTable.js";import{Table as d}from"../../table/Table.js";import"../../table/TableBody.js";import{TableCaption as j}from"../../table/TableCaption.js";import"../../table/TableCell.js";import"../../table/TableColumn.js";import"../../table/TableColumnGroup.js";import"../../table/tableContext.js";import"../../table/tableSectionContext.js";import"../../table/TableFooter.js";import"../../table/TableHead.js";import"../../table/TableHeader.js";import"../../table/TablePagination.js";import"../../table/TableRow.js";import"../../table/ExpandableTableRow.js";import"../../table/ExpandableTableRowController.js";import{Text as u}from"../../typography/Text.js";import"../../typography/Title.js";import{toValidInputValue as b}from"../utils.js";import{CalendarWeek as h}from"./CalendarWeek.js";import{clampDateToRange as I,isoToLocalDate as g,getYearOptions as w,getSelectableMonths as f,getCalendarTable as C,months as y,hasSelectableDateInMonth as v,getNextFocusableDate as k}from"./utils.js";const T=T=>{const{max:x,min:D,value:A,id:S,popover:N="auto",onChange:L,label:R,description:$}=T,M=S??`jkl-calendar-${t()}`,E=n(null),F=n(null),P=n(!1),[O,H]=a(()=>I(g(A)??new Date,D,x)),U=O.getMonth(),W=O.getFullYear(),Y=b(A??""),_=b(O),q=r(()=>w(W,D,x),[W,D,x]),B=r(()=>f(W,D,x),[W,D,x]),{headers:K,weeks:V}=r(()=>C(W,U),[W,U]);i(()=>{const e=E.current;if(!e)return;const o=e=>{const{newState:o}=e;"open"===o&&F.current?.querySelector(`input[type="radio"][value="${_}"]`)?.focus()};return e.addEventListener("toggle",o),()=>e.removeEventListener("toggle",o)},[_]),i(()=>{H(e=>I(g(A)??e,D,x))},[A,D,x]),i(()=>{P.current&&(P.current=!1,F.current?.querySelector(`input[type="radio"][value="${_}"]`)?.focus())},[_]);const z=(e,o)=>{const t=new Date(e.getFullYear(),e.getMonth()+o,1);return v(t.getFullYear(),t.getMonth(),D,x)},G=e=>{const o=I(new Date(W,U+e,1),D,x);z(o,e)||(P.current=!0),H(o)},Q=z(O,-1),J=z(O,1);return e("div",{ref:E,id:M,className:"jkl-calendar jkl-popover","data-testid":"jkl-calendar",popover:N,children:[e("div",{className:"jkl-calendar__labels",children:[o(u,{className:"jkl-label",short:!0,children:R}),o(u,{className:"jkl-input-group-description",children:$})]}),e(c,{justifyContent:"space-between",alignItems:"center",gap:"s",className:"jkl-calendar__navigation",children:[e(c,{gap:"xs",wrap:"wrap","data-size":"small",children:[o(m,{placeholder:"Måned",label:"Måned","data-testid":`${M}-month-select`,items:B.map(e=>y[e].toLowerCase()),labelProps:{srOnly:!0},width:"13ch",value:y[U].toLowerCase(),onChange:e=>H(I(new Date(W,y.findIndex(o=>o.toLowerCase()===e.target.value),1),D,x))}),o(m,{placeholder:"År",label:"År","data-testid":`${M}-year-select`,items:q.map(e=>e.toString()),labelProps:{srOnly:!0},width:"4ch",value:W,onChange:e=>H(I(new Date(Number(e.target.value),U,1),D,x))})]}),e(c,{gap:"xs",children:[o(s,{type:"button","data-testid":`${M}-back-button`,variant:"ghost","aria-label":"Forrige måned",icon:o(l,{}),disabled:!Q,onClick:()=>G(-1)}),o(s,{type:"button",variant:"ghost","data-testid":`${M}-forward-button`,icon:o(p,{}),"aria-label":"Neste måned",disabled:!J,onClick:()=>G(1)})]})]}),e(d,{caption:o(j,{srOnly:!0,children:"Kalender"}),"data-testid":"jkl-calendar-table",fullWidth:!0,children:[o("thead",{children:o("tr",{children:K.map(e=>o("th",{scope:"col","aria-label":e,children:o(u,{bold:!0,children:e.charAt(0).toUpperCase()})},e))})}),o("tbody",{ref:F,onKeyDown:e=>{if("Enter"===e.key||" "===e.key)return e.preventDefault(),void F.current?.querySelector(`input[type="radio"][value="${_}"]`)?.click();const o=k(e.key,e.shiftKey,O,D,x);o&&(e.preventDefault(),P.current=!0,H(o))},children:V.map((e,t)=>o(h,{week:e,weekIndex:t,year:W,month:U,name:`${M}-day`,selectedDate:b(Y),focusedDate:_,min:D,max:x,onChange:L},`week-${t}`))})]})]})};T.displayName="Calendar";export{T as Calendar};
+//# sourceMappingURL=Calendar.js.map

package/build/es/components/date-input/calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sources":["../../../../../src/components/date-input/calendar/Calendar.tsx"],"sourcesContent":["import React, { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"../../button/index.js\";\nimport { Flex } from \"../../flex/index.js\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"../../icon/index.js\";\nimport { Select } from \"../../select/index.js\";\nimport { Table, TableCaption } from \"../../table/index.js\";\nimport { Text } from \"../../typography/index.js\";\nimport { toValidInputValue } from \"../utils.js\";\nimport { CalendarWeek } from \"./CalendarWeek.js\";\nimport type { CalendarProps } from \"./types.js\";\nimport {\n    clampDateToRange,\n    getCalendarTable,\n    getNextFocusableDate,\n    getSelectableMonths,\n    getYearOptions,\n    hasSelectableDateInMonth,\n    isoToLocalDate,\n    months,\n} from \"./utils.js\";\n\nexport const Calendar = (props: CalendarProps) => {\n    const {\n        max,\n        min,\n        value,\n        id,\n        popover = \"auto\",\n        onChange,\n        label,\n        description,\n    } = props;\n\n    const calendarId = id ?? `jkl-calendar-${useId()}`;\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const gridRef = useRef<HTMLTableSectionElement>(null);\n    const shouldMoveFocus = useRef(false);\n\n    const [focusedDate, setFocusedDate] = useState<Date>(() =>\n        clampDateToRange(isoToLocalDate(value) ?? new Date(), min, max),\n    );\n\n    const month = focusedDate.getMonth();\n    const year = focusedDate.getFullYear();\n    const day = toValidInputValue(value ?? \"\");\n    const focusedIso = toValidInputValue(focusedDate);\n\n    const yearOptions = useMemo(\n        () => getYearOptions(year, min, max),\n        [year, min, max],\n    );\n\n    const monthOptions = useMemo(\n        () => getSelectableMonths(year, min, max),\n        [year, min, max],\n    );\n\n    const { headers, weeks } = useMemo(\n        () => getCalendarTable(year, month),\n        [year, month],\n    );\n\n    useEffect(() => {\n        const element = rootRef.current;\n        if (!element) {\n            return;\n        }\n\n        const handleToggle = (event: Event) => {\n            const { newState } = event as Event & { newState?: string };\n            if (newState !== \"open\") {\n                return;\n            }\n            gridRef.current\n                ?.querySelector<HTMLInputElement>(\n                    `input[type=\"radio\"][value=\"${focusedIso}\"]`,\n                )\n                ?.focus();\n        };\n\n        element.addEventListener(\"toggle\", handleToggle);\n        return () => element.removeEventListener(\"toggle\", handleToggle);\n    }, [focusedIso]);\n\n    // Fokusdatoen må alltid være valgbar: ligger den utenfor min/max finnes det\n    // ingen aktiv radio å flytte fokus til når popoveren åpnes. Klampes derfor\n    // både når verdien og når grensene endrer seg.\n    useEffect(() => {\n        setFocusedDate((current) =>\n            clampDateToRange(isoToLocalDate(value) ?? current, min, max),\n        );\n    }, [value, min, max]);\n\n    useEffect(() => {\n        if (!shouldMoveFocus.current) {\n            return;\n        }\n        shouldMoveFocus.current = false;\n        gridRef.current\n            ?.querySelector<HTMLInputElement>(\n                `input[type=\"radio\"][value=\"${focusedIso}\"]`,\n            )\n            ?.focus();\n    }, [focusedIso]);\n\n    const selectFocusedDate = () => {\n        gridRef.current\n            ?.querySelector<HTMLInputElement>(\n                `input[type=\"radio\"][value=\"${focusedIso}\"]`,\n            )\n            ?.click();\n    };\n\n    const handleKeyDown = (\n        event: React.KeyboardEvent<HTMLTableSectionElement>,\n    ) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            selectFocusedDate();\n            return;\n        }\n\n        const next = getNextFocusableDate(\n            event.key,\n            event.shiftKey,\n            focusedDate,\n            min,\n            max,\n        );\n        if (!next) {\n            return;\n        }\n\n        event.preventDefault();\n        shouldMoveFocus.current = true;\n        setFocusedDate(next);\n    };\n\n    const monthNavigationAvailable = (\n        fromDate: Date,\n        offset: number,\n    ): boolean => {\n        const adjacent = new Date(\n            fromDate.getFullYear(),\n            fromDate.getMonth() + offset,\n            1,\n        );\n        return hasSelectableDateInMonth(\n            adjacent.getFullYear(),\n            adjacent.getMonth(),\n            min,\n            max,\n        );\n    };\n\n    const goToMonth = (offset: number) => {\n        const target = clampDateToRange(\n            new Date(year, month + offset, 1),\n            min,\n            max,\n        );\n\n        if (!monthNavigationAvailable(target, offset)) {\n            shouldMoveFocus.current = true;\n        }\n\n        setFocusedDate(target);\n    };\n\n    const canGoToPreviousMonth = monthNavigationAvailable(focusedDate, -1);\n    const canGoToNextMonth = monthNavigationAvailable(focusedDate, 1);\n\n    return (\n        <div\n            ref={rootRef}\n            id={calendarId}\n            className=\"jkl-calendar jkl-popover\"\n            data-testid=\"jkl-calendar\"\n            // @ts-expect-error popover er ikke tilgjengelig i typene til React-versjonen vår\n            popover={popover}\n        >\n            <div className=\"jkl-calendar__labels\">\n                <Text className=\"jkl-label\" short>\n                    {label}\n                </Text>\n                <Text className=\"jkl-input-group-description\">\n                    {description}\n                </Text>\n            </div>\n            <Flex\n                justifyContent=\"space-between\"\n                alignItems=\"center\"\n                gap=\"s\"\n                className=\"jkl-calendar__navigation\"\n            >\n                <Flex gap=\"xs\" wrap=\"wrap\" data-size=\"small\">\n                    <Select\n                        placeholder=\"Måned\"\n                        label=\"Måned\"\n                        data-testid={`${calendarId}-month-select`}\n                        items={monthOptions.map((index) =>\n                            months[index].toLowerCase(),\n                        )}\n                        labelProps={{ srOnly: true }}\n                        width=\"13ch\"\n                        value={months[month].toLowerCase()}\n                        onChange={(e) =>\n                            setFocusedDate(\n                                clampDateToRange(\n                                    new Date(\n                                        year,\n                                        months.findIndex(\n                                            (m) =>\n                                                m.toLowerCase() ===\n                                                e.target.value,\n                                        ),\n                                        1,\n                                    ),\n                                    min,\n                                    max,\n                                ),\n                            )\n                        }\n                    />\n                    <Select\n                        placeholder=\"År\"\n                        label=\"År\"\n                        data-testid={`${calendarId}-year-select`}\n                        items={yearOptions.map((y) => y.toString())}\n                        labelProps={{ srOnly: true }}\n                        width=\"4ch\"\n                        value={year}\n                        onChange={(e) =>\n                            setFocusedDate(\n                                clampDateToRange(\n                                    new Date(Number(e.target.value), month, 1),\n                                    min,\n                                    max,\n                                ),\n                            )\n                        }\n                    />\n                </Flex>\n                <Flex gap=\"xs\">\n                    <Button\n                        type=\"button\"\n                        data-testid={`${calendarId}-back-button`}\n                        variant=\"ghost\"\n                        aria-label=\"Forrige måned\"\n                        icon={<ArrowLeftIcon />}\n                        disabled={!canGoToPreviousMonth}\n                        onClick={() => goToMonth(-1)}\n                    />\n                    <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        data-testid={`${calendarId}-forward-button`}\n                        icon={<ArrowRightIcon />}\n                        aria-label=\"Neste måned\"\n                        disabled={!canGoToNextMonth}\n                        onClick={() => goToMonth(1)}\n                    />\n                </Flex>\n            </Flex>\n            <Table\n                caption={<TableCaption srOnly>Kalender</TableCaption>}\n                data-testid=\"jkl-calendar-table\"\n                fullWidth\n            >\n                <thead>\n                    <tr>\n                        {headers.map((weekday) => (\n                            <th key={weekday} scope=\"col\" aria-label={weekday}>\n                                <Text bold>\n                                    {weekday.charAt(0).toUpperCase()}\n                                </Text>\n                            </th>\n                        ))}\n                    </tr>\n                </thead>\n                <tbody ref={gridRef} onKeyDown={handleKeyDown}>\n                    {weeks.map((week, weekIndex) => (\n                        <CalendarWeek\n                            // biome-ignore lint/suspicious/noArrayIndexKey: Index er dessverre eneste som gir mening.\n                            key={`week-${weekIndex}`}\n                            week={week}\n                            weekIndex={weekIndex}\n                            year={year}\n                            month={month}\n                            name={`${calendarId}-day`}\n                            selectedDate={toValidInputValue(day)}\n                            focusedDate={focusedIso}\n                            min={min}\n                            max={max}\n                            onChange={onChange}\n                        />\n                    ))}\n                </tbody>\n            </Table>\n        </div>\n    );\n};\n\nCalendar.displayName = \"Calendar\";\n"],"names":["Calendar","props","max","min","value","id","popover","onChange","label","description","calendarId","useId","rootRef","useRef","gridRef","shouldMoveFocus","focusedDate","setFocusedDate","useState","clampDateToRange","isoToLocalDate","Date","month","getMonth","year","getFullYear","day","toValidInputValue","focusedIso","yearOptions","useMemo","getYearOptions","monthOptions","getSelectableMonths","headers","weeks","getCalendarTable","useEffect","element","current","handleToggle","event","newState","querySelector","focus","addEventListener","removeEventListener","monthNavigationAvailable","fromDate","offset","adjacent","hasSelectableDateInMonth","goToMonth","target","canGoToPreviousMonth","canGoToNextMonth","jsxs","ref","className","children","jsx","Text","short","Flex","justifyContent","alignItems","gap","wrap","Select","placeholder","items","map","index","months","toLowerCase","labelProps","srOnly","width","e","findIndex","m","y","toString","Number","Button","type","variant","icon","ArrowLeftIcon","disabled","onClick","ArrowRightIcon","Table","caption","TableCaption","fullWidth","weekday","scope","bold","charAt","toUpperCase","onKeyDown","key","preventDefault","click","next","getNextFocusableDate","shiftKey","week","weekIndex","CalendarWeek","name","selectedDate","displayName"],"mappings":"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"}

package/build/es/components/date-input/calendar/CalendarDay.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface CalendarDayContext {
+    year: number;
+    month: number;
+    name: string;
+    selectedDate: string;
+    focusedDate: string;
+    min?: string;
+    max?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface CalendarDayProps extends CalendarDayContext {
+    day: number;
+}
+export declare const CalendarDay: ({ day, year, month, name, selectedDate, focusedDate, min, max, onChange, }: CalendarDayProps) => React.JSX.Element;
+export {};

package/build/es/components/date-input/calendar/CalendarDay.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{formatDate as a}from"../../../utilities/formatters/date/formatDate.js";import"../../../utilities/polymorphism/SlotComponent.js";import{Text as o}from"../../typography/Text.js";import"../../typography/Title.js";import{toValidInputValue as r}from"../utils.js";import{isDateDisabled as s}from"./utils.js";const i=({day:i,year:n,month:m,name:l,selectedDate:p,focusedDate:d,min:c,max:u,onChange:h})=>{const f=r(`${n}-${m+1}-${i}`);return e("td",{children:t("label",{className:"jkl-button--calendar",children:[e("input",{className:"day",type:"radio",name:l,form:`${l}-standalone`,"aria-label":a(new Date(n,m,i)),tabIndex:f===d?0:-1,disabled:s(f,c,u),value:f,checked:p===f,onChange:e=>h?.(e),onClick:e=>{const t=e.currentTarget.closest("[popover]");setTimeout(()=>{"function"==typeof t?.hidePopover&&t.hidePopover()},140)}}),e(o,{as:"span",short:!0,"aria-hidden":"true",children:i})]})})};export{i as CalendarDay};
+//# sourceMappingURL=CalendarDay.js.map

package/build/es/components/date-input/calendar/CalendarDay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDay.js","sources":["../../../../../src/components/date-input/calendar/CalendarDay.tsx"],"sourcesContent":["import React from \"react\";\nimport { formatDate } from \"../../../utilities/index.js\";\nimport { Text } from \"../../typography/index.js\";\nimport { toValidInputValue } from \"../utils.js\";\nimport { isDateDisabled } from \"./utils.js\";\n\nexport interface CalendarDayContext {\n    year: number;\n    month: number;\n    name: string;\n    selectedDate: string;\n    focusedDate: string;\n    min?: string;\n    max?: string;\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\ninterface CalendarDayProps extends CalendarDayContext {\n    day: number;\n}\n\nexport const CalendarDay = ({\n    day,\n    year,\n    month,\n    name,\n    selectedDate,\n    focusedDate,\n    min,\n    max,\n    onChange,\n}: CalendarDayProps) => {\n    const date = toValidInputValue(`${year}-${month + 1}-${day}`);\n\n    return (\n        <td>\n            <label className=\"jkl-button--calendar\">\n                <input\n                    className=\"day\"\n                    type=\"radio\"\n                    name={name}\n                    // Radioene grupperes bare internt i kalenderen. `form` peker\n                    // bevisst på en id som ikke finnes, slik at de ikke får en\n                    // form owner og dermed ikke sendes med i en omkringliggende\n                    // <form>. Grupperingen består siden alle radioene er uten\n                    // form owner i samme tre.\n                    form={`${name}-standalone`}\n                    aria-label={formatDate(new Date(year, month, day))}\n                    tabIndex={date === focusedDate ? 0 : -1}\n                    disabled={isDateDisabled(date, min, max)}\n                    value={date}\n                    checked={selectedDate === date}\n                    onChange={(event) => onChange?.(event)}\n                    onClick={(event) => {\n                        const popover =\n                            event.currentTarget.closest<HTMLDivElement>(\n                                \"[popover]\",\n                            );\n                        setTimeout(() => {\n                            if (typeof popover?.hidePopover === \"function\") {\n                                popover.hidePopover();\n                            }\n                        }, 140); // Det ser litt rart ut når kalenderen skjules samtidig som verdien bytter, så vi venter litt\n                    }}\n                />\n                <Text as=\"span\" short aria-hidden=\"true\">\n                    {day}\n                </Text>\n            </label>\n        </td>\n    );\n};\n"],"names":["CalendarDay","day","year","month","name","selectedDate","focusedDate","min","max","onChange","date","toValidInputValue","jsx","children","jsxs","className","type","form","formatDate","Date","tabIndex","disabled","isDateDisabled","value","checked","event","onClick","popover","currentTarget","closest","setTimeout","hidePopover","Text","as","short"],"mappings":"qXAqBO,MAAMA,EAAc,EACvBC,IAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,YAAAA,EACAC,IAAAA,EACAC,IAAAA,EACAC,SAAAA,MAEA,MAAMC,EAAOC,EAAkB,GAAGT,KAAQC,EAAQ,KAAKF,KAEvD,OACIW,EAAC,KAAA,CACGC,SAAAC,EAAC,QAAA,CAAMC,UAAU,uBACbF,SAAA,CAAAD,EAAC,QAAA,CACGG,UAAU,MACVC,KAAK,QACLZ,KAAAA,EAMAa,KAAM,GAAGb,eACT,aAAYc,EAAW,IAAIC,KAAKjB,EAAMC,EAAOF,IAC7CmB,SAAUV,IAASJ,EAAc,GAAI,EACrCe,SAAUC,EAAeZ,EAAMH,EAAKC,GACpCe,MAAOb,EACPc,QAASnB,IAAiBK,EAC1BD,SAAWgB,GAAUhB,IAAWgB,GAChCC,QAAUD,IACN,MAAME,EACFF,EAAMG,cAAcC,QAChB,aAERC,WAAW,KAC6B,mBAAzBH,GAASI,aAChBJ,EAAQI,eAEb,QAGXnB,EAACoB,GAAKC,GAAG,OAAOC,OAAK,EAAC,cAAY,OAC7BrB,SAAAZ"}

package/build/es/components/date-input/calendar/CalendarWeek.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { CalendarDayContext } from './CalendarDay.js';
+interface CalendarWeekProps extends CalendarDayContext {
+    week: Array<number | null>;
+    weekIndex: number;
+}
+export declare const CalendarWeek: ({ week, weekIndex, ...dayContext }: CalendarWeekProps) => React.JSX.Element;
+export {};

package/build/es/components/date-input/calendar/CalendarWeek.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import{CalendarDay as a}from"./CalendarDay.js";const r=({week:r,weekIndex:t,...l})=>e("tr",{children:r.map((r,d)=>r?e(a,{day:r,...l},`cell-${t}-${d}`):e("td",{},`cell-${t}-${d}`))});export{r as CalendarWeek};
+//# sourceMappingURL=CalendarWeek.js.map

package/build/es/components/date-input/calendar/CalendarWeek.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeek.js","sources":["../../../../../src/components/date-input/calendar/CalendarWeek.tsx"],"sourcesContent":["import React from \"react\";\nimport { CalendarDay, type CalendarDayContext } from \"./CalendarDay.js\";\n\ninterface CalendarWeekProps extends CalendarDayContext {\n    week: Array<number | null>;\n    weekIndex: number;\n}\n\nexport const CalendarWeek = ({\n    week,\n    weekIndex,\n    ...dayContext\n}: CalendarWeekProps) => (\n    <tr>\n        {week.map((day, dayIndex) =>\n            day ? (\n                <CalendarDay\n                    key={`cell-${weekIndex}-${dayIndex}`}\n                    day={day}\n                    {...dayContext}\n                />\n            ) : (\n                <td key={`cell-${weekIndex}-${dayIndex}`} />\n            ),\n        )}\n    </tr>\n);\n"],"names":["CalendarWeek","week","weekIndex","dayContext","jsx","children","map","day","dayIndex","CalendarDay"],"mappings":"qGAQO,MAAMA,EAAe,EACxBC,KAAAA,EACAC,UAAAA,KACGC,KAEHC,EAAC,MACIC,SAAAJ,EAAKK,IAAI,CAACC,EAAKC,IACZD,EACIH,EAACK,EAAA,CAEGF,IAAAA,KACIJ,GAFC,QAAQD,KAAaM,KAK9BJ,EAAC,KAAA,GAAQ,QAAQF,KAAaM"}

package/build/es/components/date-input/calendar/types.d.ts

@@ -0,0 +1,6 @@
+import { DateInputProps } from '../types.js';
+export type CalendarProps = Pick<DateInputProps, "value" | "onChange" | "id" | "label" | "description"> & {
+    min?: string;
+    max?: string;
+    popover?: "auto" | "manual";
+};

package/build/es/components/date-input/calendar/utils.d.ts

@@ -0,0 +1,19 @@
+import { CalendarProps } from './types.js';
+export declare function getCalendarTable(year: number, month: number): {
+    headers: string[];
+    weeks: (number | null)[][];
+};
+export declare function getYearOptions(currentYear: number, min?: string, max?: string): number[];
+export declare function getMonthNames(locale: string): string[];
+export declare const months: string[];
+export declare const isDateDisabled: (value: CalendarProps["value"], min?: CalendarProps["min"], max?: CalendarProps["max"]) => boolean;
+export declare const addDays: (date: Date, amount: number) => Date;
+export declare const addMonths: (date: Date, amount: number) => Date;
+export declare const startOfWeek: (date: Date) => Date;
+export declare const endOfWeek: (date: Date) => Date;
+export declare const isoToLocalDate: (value: string | undefined) => Date | null;
+export declare const clampDateToRange: (date: Date, min?: string, max?: string) => Date;
+export declare const hasSelectableDateInMonth: (year: number, month: number, min?: string, max?: string) => boolean;
+export declare const getSelectableMonths: (year: number, min?: string, max?: string) => number[];
+export declare const getNextFocusableDate: (key: string, shiftKey: boolean, focusedDate: Date, min?: string, max?: string) => Date | null;
+export declare const getDateForCalendarKey: (key: string, shiftKey: boolean, focusedDate: Date) => Date | null;

package/build/es/components/date-input/calendar/utils.js

@@ -0,0 +1,2 @@
+import{toValidInputValue as e}from"../utils.js";const t="nb-NO";function a(e,a){const n=new Date,r=Number.isFinite(e)?e:n.getFullYear(),s=Number.isFinite(a)?a:n.getMonth(),o=new Date(r,s+1,0).getDate(),l=(new Date(r,s,1).getDay()-1+7)%7,u=[...Array(l).fill(null),...Array.from({length:o},(e,t)=>t+1)];for(;u.length%7!=0;)u.push(null);const D=[];for(let e=0;e<u.length;e+=7)D.push(u.slice(e,e+7));const i=new Intl.DateTimeFormat(t,{weekday:"long"});return{headers:Array.from({length:7},(e,t)=>{const a=new Date(2024,0,7+(1+t)%7);return i.format(a)}),weeks:D}}function n(t,a,n){const r=a?new Date(e(a)||"").getUTCFullYear():Number.NaN,s=n?new Date(e(n)||"").getUTCFullYear():Number.NaN,o=Number.isFinite(r)?r:t-5,l=Number.isFinite(s)?s:t+5,u=Math.min(o,t),D=Math.max(l,t),i=[];for(let e=u;e<=D;e++)i.push(e);return i}function r(e){const t=new Intl.DateTimeFormat(e,{month:"long"});return Array.from({length:12},(e,a)=>t.format(new Date(2e3,a,1)))}const s=r(t),o=(t,a,n)=>{if(t){const r=new Date(e(t)||""),s=a?new Date(e(a)||""):void 0,o=n?new Date(e(n)||""):void 0;if(s&&r<s||o&&r>o)return!0}return!1},l=(e,t)=>{const a=new Date(e);return a.setDate(a.getDate()+t),a},u=(e,t)=>{const a=new Date(e.getFullYear(),e.getMonth()+t,1),n=new Date(a.getFullYear(),a.getMonth()+1,0).getDate();return a.setDate(Math.min(e.getDate(),n)),a},D=e=>{const t=new Date(e),a=(t.getDay()-1+7)%7;return t.setDate(t.getDate()-a),t},i=e=>l(D(e),6),c=t=>{const a=e(t);if(!a)return null;const[n,r,s]=a.split("-").map(Number);return new Date(n,r-1,s)},g=(t,a,n)=>{const r=e(t),s=a?e(a):"",o=n?e(n):"";return s&&r<s?c(s)??t:o&&r>o?c(o)??t:t},w=(t,a,n,r)=>{const s=e(new Date(t,a,1)),o=e(new Date(t,a+1,0)),l=n?e(n):"",u=r?e(r):"";return!(l&&o<l||u&&s>u)},m=(e,t,a)=>s.map((e,t)=>t).filter(n=>w(e,n,t,a)),h=["PageUp","PageDown"],f=(e,t,a,n,r)=>{const s=d(e,t,a);return!s||h.includes(e)&&!w(s.getFullYear(),s.getMonth(),n,r)?null:g(s,n,r)},d=(e,t,a)=>{switch(e){case"ArrowLeft":return l(a,-1);case"ArrowRight":return l(a,1);case"ArrowUp":return l(a,-7);case"ArrowDown":return l(a,7);case"Home":return D(a);case"End":return i(a);case"PageUp":return u(a,t?-12:-1);case"PageDown":return u(a,t?12:1);default:return null}};export{l as addDays,u as addMonths,g as clampDateToRange,i as endOfWeek,a as getCalendarTable,d as getDateForCalendarKey,r as getMonthNames,f as getNextFocusableDate,m as getSelectableMonths,n as getYearOptions,w as hasSelectableDateInMonth,o as isDateDisabled,c as isoToLocalDate,s as months,D as startOfWeek};
+//# sourceMappingURL=utils.js.map

package/build/es/components/date-input/calendar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/date-input/calendar/utils.ts"],"sourcesContent":["import { toValidInputValue } from \"../utils.js\";\nimport type { CalendarProps } from \"./types.js\";\n\nconst NORWEGIAN_LOCALE = \"nb-NO\";\nconst WEEK_STARTS_ON = 1;\nexport function getCalendarTable(year: number, month: number) {\n    const now = new Date();\n    const y = Number.isFinite(year) ? year : now.getFullYear();\n    const m = Number.isFinite(month) ? month : now.getMonth();\n\n    const daysInMonth = new Date(y, m + 1, 0).getDate();\n    const firstDay = new Date(y, m, 1).getDay(); // 0 = Sunday\n\n    const leadingBlanks = (firstDay - WEEK_STARTS_ON + 7) % 7;\n\n    const cells: Array<number | null> = [\n        ...Array(leadingBlanks).fill(null),\n        ...Array.from({ length: daysInMonth }, (_, i) => i + 1),\n    ];\n\n    while (cells.length % 7 !== 0) cells.push(null);\n\n    const weeks: Array<Array<number | null>> = [];\n    for (let i = 0; i < cells.length; i += 7) {\n        weeks.push(cells.slice(i, i + 7));\n    }\n\n    const formatter = new Intl.DateTimeFormat(NORWEGIAN_LOCALE, {\n        weekday: \"long\",\n    });\n    const headers = Array.from({ length: 7 }, (_, i) => {\n        const d = new Date(2024, 0, 7 + ((WEEK_STARTS_ON + i) % 7));\n        return formatter.format(d);\n    });\n\n    return { headers, weeks };\n}\n\nconst DEFAULT_YEARS_RANGE = 5;\nexport function getYearOptions(\n    currentYear: number,\n    min?: string,\n    max?: string,\n): number[] {\n    const parsedMinYear = min\n        ? new Date(toValidInputValue(min) || \"\").getUTCFullYear()\n        : Number.NaN;\n    const parsedMaxYear = max\n        ? new Date(toValidInputValue(max) || \"\").getUTCFullYear()\n        : Number.NaN;\n\n    const minYear = Number.isFinite(parsedMinYear)\n        ? parsedMinYear\n        : currentYear - DEFAULT_YEARS_RANGE;\n    const maxYear = Number.isFinite(parsedMaxYear)\n        ? parsedMaxYear\n        : currentYear + DEFAULT_YEARS_RANGE;\n\n    const startYear = Math.min(minYear, currentYear);\n    const endYear = Math.max(maxYear, currentYear);\n\n    const years: number[] = [];\n    for (let year = startYear; year <= endYear; year++) {\n        years.push(year);\n    }\n    return years;\n}\n\nexport function getMonthNames(locale: string): string[] {\n    const formatter = new Intl.DateTimeFormat(locale, { month: \"long\" });\n    return Array.from({ length: 12 }, (_, i) =>\n        formatter.format(new Date(2000, i, 1)),\n    );\n}\nexport const months = getMonthNames(NORWEGIAN_LOCALE);\n\nexport const isDateDisabled = (\n    value: CalendarProps[\"value\"],\n    min?: CalendarProps[\"min\"],\n    max?: CalendarProps[\"max\"],\n): boolean => {\n    if (value) {\n        const date = new Date(toValidInputValue(value) || \"\");\n        const minDate = min\n            ? new Date(toValidInputValue(min) || \"\")\n            : undefined;\n        const maxDate = max\n            ? new Date(toValidInputValue(max) || \"\")\n            : undefined;\n        if (minDate && date < minDate) return true;\n        if (maxDate && date > maxDate) return true;\n    }\n    return false;\n};\n\nexport const addDays = (date: Date, amount: number): Date => {\n    const next = new Date(date);\n    next.setDate(next.getDate() + amount);\n    return next;\n};\n\nexport const addMonths = (date: Date, amount: number): Date => {\n    const first = new Date(date.getFullYear(), date.getMonth() + amount, 1);\n    const lastDayOfMonth = new Date(\n        first.getFullYear(),\n        first.getMonth() + 1,\n        0,\n    ).getDate();\n    first.setDate(Math.min(date.getDate(), lastDayOfMonth));\n    return first;\n};\n\nexport const startOfWeek = (date: Date): Date => {\n    const next = new Date(date);\n    const diff = (next.getDay() - WEEK_STARTS_ON + 7) % 7;\n    next.setDate(next.getDate() - diff);\n    return next;\n};\n\nexport const endOfWeek = (date: Date): Date => addDays(startOfWeek(date), 6);\n\nexport const isoToLocalDate = (value: string | undefined): Date | null => {\n    const iso = toValidInputValue(value);\n    if (!iso) return null;\n    const [year, month, day] = iso.split(\"-\").map(Number);\n    return new Date(year, month - 1, day);\n};\n\nexport const clampDateToRange = (\n    date: Date,\n    min?: string,\n    max?: string,\n): Date => {\n    const iso = toValidInputValue(date);\n    const minIso = min ? toValidInputValue(min) : \"\";\n    const maxIso = max ? toValidInputValue(max) : \"\";\n    if (minIso && iso < minIso) return isoToLocalDate(minIso) ?? date;\n    if (maxIso && iso > maxIso) return isoToLocalDate(maxIso) ?? date;\n    return date;\n};\n\nexport const hasSelectableDateInMonth = (\n    year: number,\n    month: number,\n    min?: string,\n    max?: string,\n): boolean => {\n    const firstIso = toValidInputValue(new Date(year, month, 1));\n    const lastIso = toValidInputValue(new Date(year, month + 1, 0));\n    const minIso = min ? toValidInputValue(min) : \"\";\n    const maxIso = max ? toValidInputValue(max) : \"\";\n    if (minIso && lastIso < minIso) return false;\n    if (maxIso && firstIso > maxIso) return false;\n    return true;\n};\n\nexport const getSelectableMonths = (\n    year: number,\n    min?: string,\n    max?: string,\n): number[] =>\n    months\n        .map((_, index) => index)\n        .filter((index) => hasSelectableDateInMonth(year, index, min, max));\n\nconst MONTH_CHANGE_KEYS = [\"PageUp\", \"PageDown\"];\nexport const getNextFocusableDate = (\n    key: string,\n    shiftKey: boolean,\n    focusedDate: Date,\n    min?: string,\n    max?: string,\n): Date | null => {\n    const naive = getDateForCalendarKey(key, shiftKey, focusedDate);\n    if (!naive) {\n        return null;\n    }\n\n    // Måneds-/årshopp inn i en helt disabla måned skal være en no-op,\n    // på linje med de disabla ‹ ›-knappene.\n    if (\n        MONTH_CHANGE_KEYS.includes(key) &&\n        !hasSelectableDateInMonth(\n            naive.getFullYear(),\n            naive.getMonth(),\n            min,\n            max,\n        )\n    ) {\n        return null;\n    }\n\n    // Klamper til nærmeste valgbare dato (håndterer bl.a. at selve\n    // måldagen kan være før min / etter max selv om måneden har gyldige dager).\n    return clampDateToRange(naive, min, max);\n};\n\n// Mapper et tastetrykk til datoen navigasjonen skal flytte til.\n// Returnerer null for taster som ikke er navigasjon (håndteres i komponenten).\nexport const getDateForCalendarKey = (\n    key: string,\n    shiftKey: boolean,\n    focusedDate: Date,\n): Date | null => {\n    switch (key) {\n        case \"ArrowLeft\":\n            return addDays(focusedDate, -1);\n        case \"ArrowRight\":\n            return addDays(focusedDate, 1);\n        case \"ArrowUp\":\n            return addDays(focusedDate, -7);\n        case \"ArrowDown\":\n            return addDays(focusedDate, 7);\n        case \"Home\":\n            return startOfWeek(focusedDate);\n        case \"End\":\n            return endOfWeek(focusedDate);\n        case \"PageUp\":\n            return addMonths(focusedDate, shiftKey ? -12 : -1);\n        case \"PageDown\":\n            return addMonths(focusedDate, shiftKey ? 12 : 1);\n        default:\n            return null;\n    }\n};\n"],"names":["NORWEGIAN_LOCALE","getCalendarTable","year","month","now","Date","y","Number","isFinite","getFullYear","m","getMonth","daysInMonth","getDate","leadingBlanks","getDay","cells","Array","fill","from","length","_","i","push","weeks","slice","formatter","Intl","DateTimeFormat","weekday","headers","d","format","getYearOptions","currentYear","min","max","parsedMinYear","toValidInputValue","getUTCFullYear","NaN","parsedMaxYear","minYear","maxYear","startYear","Math","endYear","years","getMonthNames","locale","months","isDateDisabled","value","date","minDate","maxDate","addDays","amount","next","setDate","addMonths","first","lastDayOfMonth","startOfWeek","diff","endOfWeek","isoToLocalDate","iso","day","split","map","clampDateToRange","minIso","maxIso","hasSelectableDateInMonth","firstIso","lastIso","getSelectableMonths","index","filter","MONTH_CHANGE_KEYS","getNextFocusableDate","key","shiftKey","focusedDate","naive","getDateForCalendarKey","includes"],"mappings":"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"}

package/build/es/components/date-input/index.d.ts

@@ -0,0 +1,3 @@
+export { DateInput } from './DateInput.js';
+export type { DateInputProps } from './types.js';
+export { toValidInputValue, toNorwegianDateFormat } from './utils.js';

package/build/es/components/date-input/index.js

@@ -0,0 +1,2 @@
+import{DateInput as t}from"./DateInput.js";import{toNorwegianDateFormat as a,toValidInputValue as o}from"./utils.js";export{t as DateInput,a as toNorwegianDateFormat,o as toValidInputValue};
+//# sourceMappingURL=index.js.map

package/build/es/components/date-input/types.d.ts

@@ -0,0 +1,35 @@
+import { InputHTMLAttributes } from 'react';
+import { DataTestAutoId } from '../../utilities/types.js';
+import { InputGroupProps } from '../input-group/types.js';
+/**
+ * Props for `DateInput`. Komponenten bygger på et native `<input type="date">`,
+ * så verdier inn og ut er alltid ISO-formaterte datostrenger (`YYYY-MM-DD`).
+ * Hva brukeren ser i feltet styres av nettleseren og brukerens språk-/regioninnstillinger.
+ *
+ * Kan brukes både kontrollert (`value` + `onChange`) og ukontrollert (`defaultValue`,
+ * eller via react-hook-forms `register`).
+ */
+export type DateInputProps = Omit<InputGroupProps, "children" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "min" | "max" | "children"> & DataTestAutoId & {
+    /**
+     * Kontrollert verdi som ISO-datostreng (`YYYY-MM-DD`), f.eks. `"2026-08-13"`.
+     * Oppgis sammen med `onChange`. La stå udefinert for ukontrollert bruk.
+     */
+    value?: string;
+    /**
+     * Startverdi for ukontrollert bruk, som ISO-datostreng (`YYYY-MM-DD`).
+     * Brukes når feltet ikke er kontrollert, f.eks. sammen med `register`.
+     */
+    defaultValue?: string;
+    /**
+     * Tidligste valgbare dato som ISO-datostreng (`YYYY-MM-DD`). Datoer før
+     * denne gråes ut i kalenderen. `number` godtas for kompatibilitet med
+     * react-hook-forms `register`, men ISO-streng anbefales.
+     */
+    min?: string | number;
+    /**
+     * Seneste valgbare dato som ISO-datostreng (`YYYY-MM-DD`). Datoer etter
+     * denne gråes ut i kalenderen. `number` godtas for kompatibilitet med
+     * react-hook-forms `register`, men ISO-streng anbefales.
+     */
+    max?: string | number;
+};

package/build/es/components/date-input/utils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Normaliserer en dato til ISO-formatet `DateInput` forventer (`YYYY-MM-DD`).
+ *
+ * Godtar `Date`-objekter, ISO-strenger (`YYYY-MM-DD`) og norsk punktumformat
+ * (`DD.MM.YYYY`). Ugyldige verdier gir tom streng (`""`).
+ *
+ * @example
+ * toValidInputValue(new Date(2026, 7, 13)); // "2026-08-13"
+ * toValidInputValue("13.08.2026");          // "2026-08-13"
+ * toValidInputValue("ikke en dato");        // ""
+ */
+export declare const toValidInputValue: (date: Date | string | undefined) => string;
+/**
+ * Gjør ISO-dato (`YYYY-MM-DD`) om til lesbar norsk dato. Overstyr med `options`. Ugyldig → `""`.
+ *
+ * @example
+ * toNorwegianDateFormat("2026-08-13");                    // "13.08.2026"
+ * toNorwegianDateFormat("2026-08-13", "nb-NO", { month: "long" }); // "august"
+ */
+export declare const toNorwegianDateFormat: (date: string, locale?: string, options?: Intl.DateTimeFormatOptions) => string;
+/**
+ * Normaliserer `min`/`max` til ISO-format (`YYYY-MM-DD`).
+ *
+ * `number` godtas fordi react-hook-forms `register()` typer `min`/`max` som
+ * `string | number`. Tall tolkes som millisekunder siden epoch (`Date.now()`).
+ * Verdier som ikke gir en gyldig dato blir `undefined`, slik at både det native
+ * feltet og kalenderen ser bort fra grensen i stedet for å få en søppelverdi.
+ *
+ * @example
+ * toValidBoundary("13.08.2026");            // "2026-08-13"
+ * toValidBoundary(Date.now());              // dagens dato som ISO
+ * toValidBoundary("ikke en dato");          // undefined
+ */
+export declare const toValidBoundary: (boundary: string | number | undefined) => string | undefined;

package/build/es/components/date-input/utils.js

@@ -0,0 +1,2 @@
+const e=e=>{const t=Number(e);return Number.isFinite(t)?t<10?`0${t}`:`${t}`:""},t=e=>{const t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e);if(!t)return!1;const[,r,n,i]=t,u=Number(r),a=Number(n),o=Number(i),s=new Date(Date.UTC(u,a-1,o));return Number.isFinite(s.getTime())&&s.getUTCFullYear()===u&&s.getUTCMonth()===a-1&&s.getUTCDate()===o},r=r=>{let n="";if(r instanceof Date){return n=`${r.getFullYear()}-${e(r.getMonth()+1)}-${e(r.getDate())}`,t(n)?n:""}if(!r)return"";const i=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/.exec(r);if(i){const[,r,u,a]=i;return n=`${a}-${e(u)}-${e(r)}`,t(n)?n:""}const u=/^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(r);if(u){const[,r,i,a]=u;return n=`${r}-${e(i)}-${e(a)}`,t(n)?n:""}return""},n=(e,r="nb-NO",n={day:"2-digit",month:"2-digit",year:"numeric"})=>{if(!t(e))return"";const[i,u,a]=e.split("-").map(Number),o=new Date(i,u-1,a);return Number.isFinite(o.getTime())&&o.getFullYear()===i&&o.getMonth()===u-1&&o.getDate()===a?o.toLocaleDateString(r,n):""},i=e=>{if(null==e||""===e)return;let t="";return t="number"==typeof e?Number.isFinite(e)?r(new Date(e)):"":r(e),""===t?void 0:t};export{n as toNorwegianDateFormat,i as toValidBoundary,r as toValidInputValue};
+//# sourceMappingURL=utils.js.map

package/build/es/components/date-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/date-input/utils.ts"],"sourcesContent":["const paddedNumber = (number: string | number): string => {\n    const num = Number(number);\n    if (!Number.isFinite(num)) return \"\";\n    return num < 10 ? `0${num}` : `${num}`;\n};\n\nconst isValidIsoDate = (iso: string): boolean => {\n    const match = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n    if (!match) return false;\n\n    const [, y, m, d] = match;\n    const year = Number(y);\n    const month = Number(m);\n    const day = Number(d);\n\n    const parsed = new Date(Date.UTC(year, month - 1, day));\n    return (\n        Number.isFinite(parsed.getTime()) &&\n        parsed.getUTCFullYear() === year &&\n        parsed.getUTCMonth() === month - 1 &&\n        parsed.getUTCDate() === day\n    );\n};\n\n/**\n * Normaliserer en dato til ISO-formatet `DateInput` forventer (`YYYY-MM-DD`).\n *\n * Godtar `Date`-objekter, ISO-strenger (`YYYY-MM-DD`) og norsk punktumformat\n * (`DD.MM.YYYY`). Ugyldige verdier gir tom streng (`\"\"`).\n *\n * @example\n * toValidInputValue(new Date(2026, 7, 13)); // \"2026-08-13\"\n * toValidInputValue(\"13.08.2026\");          // \"2026-08-13\"\n * toValidInputValue(\"ikke en dato\");        // \"\"\n */\nexport const toValidInputValue = (date: Date | string | undefined): string => {\n    let iso = \"\";\n\n    if (date instanceof Date) {\n        const year = date.getFullYear();\n        const month = paddedNumber(date.getMonth() + 1);\n        const day = paddedNumber(date.getDate());\n        iso = `${year}-${month}-${day}`;\n        return isValidIsoDate(iso) ? iso : \"\";\n    }\n\n    if (!date) return \"\";\n\n    const norwegianMatch = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/.exec(date);\n    if (norwegianMatch) {\n        const [, day, month, year] = norwegianMatch;\n        iso = `${year}-${paddedNumber(month)}-${paddedNumber(day)}`;\n        return isValidIsoDate(iso) ? iso : \"\";\n    }\n\n    const isoMatch = /^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/.exec(date);\n    if (isoMatch) {\n        const [, year, month, day] = isoMatch;\n        iso = `${year}-${paddedNumber(month)}-${paddedNumber(day)}`;\n        return isValidIsoDate(iso) ? iso : \"\";\n    }\n\n    return \"\";\n};\n\n/**\n * Gjør ISO-dato (`YYYY-MM-DD`) om til lesbar norsk dato. Overstyr med `options`. Ugyldig → `\"\"`.\n *\n * @example\n * toNorwegianDateFormat(\"2026-08-13\");                    // \"13.08.2026\"\n * toNorwegianDateFormat(\"2026-08-13\", \"nb-NO\", { month: \"long\" }); // \"august\"\n */\nexport const toNorwegianDateFormat = (\n    date: string,\n    locale = \"nb-NO\",\n    options: Intl.DateTimeFormatOptions = {\n        day: \"2-digit\",\n        month: \"2-digit\",\n        year: \"numeric\",\n    },\n): string => {\n    if (!isValidIsoDate(date)) {\n        return \"\";\n    }\n\n    const [year, month, day] = date.split(\"-\").map(Number);\n    const parsed = new Date(year, month - 1, day);\n    if (\n        !Number.isFinite(parsed.getTime()) ||\n        parsed.getFullYear() !== year ||\n        parsed.getMonth() !== month - 1 ||\n        parsed.getDate() !== day\n    ) {\n        return \"\";\n    }\n    return parsed.toLocaleDateString(locale, options);\n};\n\n/**\n * Normaliserer `min`/`max` til ISO-format (`YYYY-MM-DD`).\n *\n * `number` godtas fordi react-hook-forms `register()` typer `min`/`max` som\n * `string | number`. Tall tolkes som millisekunder siden epoch (`Date.now()`).\n * Verdier som ikke gir en gyldig dato blir `undefined`, slik at både det native\n * feltet og kalenderen ser bort fra grensen i stedet for å få en søppelverdi.\n *\n * @example\n * toValidBoundary(\"13.08.2026\");            // \"2026-08-13\"\n * toValidBoundary(Date.now());              // dagens dato som ISO\n * toValidBoundary(\"ikke en dato\");          // undefined\n */\nexport const toValidBoundary = (\n    boundary: string | number | undefined,\n): string | undefined => {\n    if (boundary === undefined || boundary === null || boundary === \"\") {\n        return undefined;\n    }\n\n    let iso = \"\";\n    if (typeof boundary === \"number\") {\n        iso = Number.isFinite(boundary)\n            ? toValidInputValue(new Date(boundary))\n            : \"\";\n    } else {\n        iso = toValidInputValue(boundary);\n    }\n\n    return iso === \"\" ? undefined : iso;\n};\n"],"names":["paddedNumber","number","num","Number","isFinite","isValidIsoDate","iso","match","exec","y","m","d","year","month","day","parsed","Date","UTC","getTime","getUTCFullYear","getUTCMonth","getUTCDate","toValidInputValue","date","getFullYear","getMonth","getDate","norwegianMatch","isoMatch","toNorwegianDateFormat","locale","options","split","map","toLocaleDateString","toValidBoundary","boundary"],"mappings":"AAAA,MAAMA,EAAgBC,IAClB,MAAMC,EAAMC,OAAOF,GACnB,OAAKE,OAAOC,SAASF,GACdA,EAAM,GAAK,IAAIA,IAAQ,GAAGA,IADC,IAIhCG,EAAkBC,IACpB,MAAMC,EAAQ,4BAA4BC,KAAKF,GAC/C,IAAKC,EAAO,OAAO,EAEnB,OAASE,EAAGC,EAAGC,GAAKJ,EACdK,EAAOT,OAAOM,GACdI,EAAQV,OAAOO,GACfI,EAAMX,OAAOQ,GAEbI,EAAS,IAAIC,KAAKA,KAAKC,IAAIL,EAAMC,EAAQ,EAAGC,IAClD,OACIX,OAAOC,SAASW,EAAOG,YACvBH,EAAOI,mBAAqBP,GAC5BG,EAAOK,gBAAkBP,EAAQ,GACjCE,EAAOM,eAAiBP,GAenBQ,EAAqBC,IAC9B,IAAIjB,EAAM,GAEV,GAAIiB,aAAgBP,KAAM,CAItB,OAAAV,EAAM,GAHOiB,EAAKC,iBACJxB,EAAauB,EAAKE,WAAa,MACjCzB,EAAauB,EAAKG,aAEvBrB,EAAeC,GAAOA,EAAM,EACvC,CAEA,IAAKiB,EAAM,MAAO,GAElB,MAAMI,EAAiB,kCAAkCnB,KAAKe,GAC9D,GAAII,EAAgB,CAChB,OAASb,EAAKD,EAAOD,GAAQe,EAC7B,OAAArB,EAAM,GAAGM,KAAQZ,EAAaa,MAAUb,EAAac,KAC9CT,EAAeC,GAAOA,EAAM,EACvC,CAEA,MAAMsB,EAAW,gCAAgCpB,KAAKe,GACtD,GAAIK,EAAU,CACV,OAAShB,EAAMC,EAAOC,GAAOc,EAC7B,OAAAtB,EAAM,GAAGM,KAAQZ,EAAaa,MAAUb,EAAac,KAC9CT,EAAeC,GAAOA,EAAM,EACvC,CAEA,MAAO,IAUEuB,EAAwB,CACjCN,EACAO,EAAS,QACTC,EAAsC,CAClCjB,IAAK,UACLD,MAAO,UACPD,KAAM,cAGV,IAAKP,EAAekB,GAChB,MAAO,GAGX,MAAOX,EAAMC,EAAOC,GAAOS,EAAKS,MAAM,KAAKC,IAAI9B,QACzCY,EAAS,IAAIC,KAAKJ,EAAMC,EAAQ,EAAGC,GACzC,OACKX,OAAOC,SAASW,EAAOG,YACxBH,EAAOS,gBAAkBZ,GACzBG,EAAOU,aAAeZ,EAAQ,GAC9BE,EAAOW,YAAcZ,EAIlBC,EAAOmB,mBAAmBJ,EAAQC,GAF9B,IAkBFI,EACTC,IAEA,GAA2C,MAAbA,GAAkC,KAAbA,EAC/C,OAGJ,IAAI9B,EAAM,GACV,OACIA,EADoB,iBAAb8B,EACDjC,OAAOC,SAASgC,GAChBd,EAAkB,IAAIN,KAAKoB,IAC3B,GAEAd,EAAkBc,GAGb,KAAR9B,OAAa,EAAYA"}

package/build/es/components/file/File.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useId as s}from"react";import{formatBytes as c}from"../../utilities/formatters/bytes/formatBytes.js";import"../../utilities/polymorphism/SlotComponent.js";import{Button as t}from"../button/Button.js";import{useFileInputContext as r}from"../file-input/internal/fileInputContext.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/OpenInNewIcon.js";import"../icon/icons/PenIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import{TrashCanIcon as e}from"../icon/icons/TrashCanIcon.js";import"../icon/icons/WarningIcon.js";import"../../hooks/useId/useId.js";import{SupportLabel as m}from"../input-group/SupportLabel.js";import"../input-group/InputGroup.js";import{Link as a}from"../link/Link.js";const p=p=>{const{children:l,className:j,fileName:I,fileType:f,fileSize:u,path:_,file:h,state:d,errorLabel:k="Feil",onRemove:C,variant:b="list",...v}=p,N=`jkl-file-preview-${s()}`,w=`${N}-support`,g=r(),A=f.startsWith("image/")&&(h?URL.createObjectURL(h):_),L=o("div",{id:N,className:n(j,"jkl-file",`jkl-file--${b}`),"data-state":d,...v,children:[o("div",{className:"jkl-file__content",children:[i("div",{className:"jkl-file__content__thumbnail","data-filetype":f,children:i("img",{src:A||void 0,alt:""})}),_?i("p",{className:"jkl-file__content__name",children:o(a,{href:_,children:[I," ",o("span",{className:"jkl-file__content__name__size",children:["(",c(u),")"]})]})}):o("p",{className:"jkl-file__content__name",children:[I," ",o("span",{className:"jkl-file__content__name__size",children:["(",c(u),")"]})]}),C&&i(t,{variant:"ghost",className:"jkl-file__content__button",onClick:C,title:`Fjern ${I}`,icon:i(e,{})})]}),"error"===d&&k&&i(m,{className:"jkl-file__support-label",id:w,label:k,labelType:"error"})]});return g?i("li",{children:L}):L};export{p as File};
+import{jsxs as o,jsx as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useId as s}from"react";import{formatBytes as c}from"../../utilities/formatters/bytes/formatBytes.js";import"../../utilities/polymorphism/SlotComponent.js";import{Button as r}from"../button/Button.js";import{useFileInputContext as t}from"../file-input/internal/fileInputContext.js";import{Flex as e}from"../flex/Flex.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/OpenInNewIcon.js";import"../icon/icons/PenIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import{TrashCanIcon as a}from"../icon/icons/TrashCanIcon.js";import"../icon/icons/WarningIcon.js";import"../../hooks/useId/useId.js";import{SupportLabel as m}from"../input-group/SupportLabel.js";import"../input-group/InputGroup.js";import{Link as l}from"../link/Link.js";import{Text as p}from"../typography/Text.js";import"../typography/Title.js";const j=j=>{const{children:I,hideThumbnail:f,className:u,fileName:h,fileType:d,fileSize:k,path:_,file:C,state:b,errorLabel:g="Feil",onRemove:w,variant:N="list",...y}=j,x=`jkl-file-preview-${s()}`,v=`${x}-support`,A=t(),L=d.startsWith("image/")&&(C?URL.createObjectURL(C):_),T=o("div",{id:x,className:n(u,"jkl-file",`jkl-file--${N}`),"data-state":b,...y,children:[o(e,{gap:"8",direction:"card"===N?"column":"row",alignItems:"card"===N?"start":"center",className:"jkl-file__content",children:[!f&&i("div",{className:"jkl-file__thumbnail","data-filetype":d,children:L&&i("img",{src:L,alt:""})}),o(e,{gap:"8",alignItems:"center",justifyContent:"space-between",className:"jkl-file__info",children:[_?i(p,{size:"s",className:"jkl-file__name",children:o(l,{href:_,children:[h," ",o("span",{className:"jkl-file__size",children:["(",c(k),")"]})]})}):o(p,{size:"s",className:"jkl-file__name",children:[h," ",o("span",{className:"jkl-file__size",children:["(",c(k),")"]})]}),w&&i(r,{variant:"ghost",className:"jkl-file__button",onClick:w,title:`Fjern ${h}`,icon:i(a,{})})]})]}),"error"===b&&g&&i(m,{className:"jkl-file__support-label",id:v,label:g,labelType:"error"})]});return A?i("li",{children:T}):T};export{j as File};
 //# sourceMappingURL=File.js.map

package/build/es/components/file/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["../../../../src/components/file/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ComponentProps, type FC, useId } from \"react\";\nimport { formatBytes } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { useFileInputContext } from \"../file-input/internal/fileInputContext.js\";\nimport { TrashCanIcon } from \"../icon/index.js\";\nimport { SupportLabel } from \"../input-group/index.js\";\nimport { Link } from \"../link/index.js\";\nimport type { FileProps } from \"./types.js\";\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n    const {\n        children,\n        className,\n        fileName,\n        fileType,\n        fileSize,\n        path,\n        file,\n        state,\n        errorLabel = \"Feil\",\n        onRemove,\n        variant = \"list\",\n        ...rest\n    } = props;\n\n    const id = `jkl-file-preview-${useId()}`;\n    const supportId = `${id}-support`;\n\n    const context = useFileInputContext();\n\n    const imageSrc =\n        fileType.startsWith(\"image/\") &&\n        (file ? URL.createObjectURL(file) : path);\n\n    const fileComponent = (\n        <div\n            id={id}\n            className={clsx(className, \"jkl-file\", `jkl-file--${variant}`)}\n            data-state={state}\n            {...rest}\n        >\n            <div className={\"jkl-file__content\"}>\n                <div\n                    className=\"jkl-file__content__thumbnail\"\n                    data-filetype={fileType}\n                >\n                    <img src={imageSrc || undefined} alt=\"\" />\n                </div>\n                {path ? (\n                    <p className=\"jkl-file__content__name\">\n                        <Link href={path}>\n                            {fileName}{\" \"}\n                            <span className=\"jkl-file__content__name__size\">\n                                ({formatBytes(fileSize)})\n                            </span>\n                        </Link>\n                    </p>\n                ) : (\n                    <p className=\"jkl-file__content__name\">\n                        {fileName}{\" \"}\n                        <span className=\"jkl-file__content__name__size\">\n                            ({formatBytes(fileSize)})\n                        </span>\n                    </p>\n                )}\n                {onRemove && (\n                    <Button\n                        variant={\"ghost\"}\n                        className=\"jkl-file__content__button\"\n                        onClick={onRemove}\n                        title={`Fjern ${fileName}`}\n                        icon={<TrashCanIcon />}\n                    />\n                )}\n            </div>\n\n            {state === \"error\" && errorLabel && (\n                <SupportLabel\n                    className=\"jkl-file__support-label\"\n                    id={supportId}\n                    label={errorLabel}\n                    labelType={\"error\"}\n                />\n            )}\n        </div>\n    );\n\n    return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","className","fileName","fileType","fileSize","path","file","state","errorLabel","onRemove","variant","rest","id","useId","supportId","context","useFileInputContext","imageSrc","startsWith","URL","createObjectURL","fileComponent","jsxs","clsx","jsx","src","alt","Link","href","formatBytes","Button","onClick","title","icon","TrashCanIcon","SupportLabel","label","labelType"],"mappings":"86DAUO,MAAMA,EAA+CC,IACxD,MACIC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,WAAAA,EAAa,OACbC,SAAAA,EACAC,QAAAA,EAAU,UACPC,GACHZ,EAEEa,EAAK,oBAAoBC,MACzBC,EAAY,GAAGF,YAEfG,EAAUC,IAEVC,EACFd,EAASe,WAAW,YACnBZ,EAAOa,IAAIC,gBAAgBd,GAAQD,GAElCgB,EACFC,EAAC,MAAA,CACGV,GAAAA,EACAX,UAAWsB,EAAKtB,EAAW,WAAY,aAAaS,KACpD,aAAYH,KACRI,EAEJX,SAAA,CAAAsB,EAAC,MAAA,CAAIrB,UAAW,oBACZD,SAAA,CAAAwB,EAAC,MAAA,CACGvB,UAAU,+BACV,gBAAeE,EAEfH,WAAC,MAAA,CAAIyB,IAAKR,QAAY,EAAWS,IAAI,OAExCrB,IACI,IAAA,CAAEJ,UAAU,0BACTD,SAAAsB,EAACK,EAAA,CAAKC,KAAMvB,EACPL,SAAA,CAAAE,EAAU,IACXoB,EAAC,OAAA,CAAKrB,UAAU,gCAAgCD,SAAA,CAAA,IAC1C6B,EAAYzB,GAAU,YAKpCkB,EAAC,IAAA,CAAErB,UAAU,0BACRD,SAAA,CAAAE,EAAU,IACXoB,EAAC,OAAA,CAAKrB,UAAU,gCAAgCD,SAAA,CAAA,IAC1C6B,EAAYzB,GAAU,UAInCK,GACGe,EAACM,EAAA,CACGpB,QAAS,QACTT,UAAU,4BACV8B,QAAStB,EACTuB,MAAO,SAAS9B,IAChB+B,OAAOC,EAAA,CAAA,QAKR,UAAV3B,GAAqBC,GAClBgB,EAACW,EAAA,CACGlC,UAAU,0BACVW,GAAIE,EACJsB,MAAO5B,EACP6B,UAAW,aAM3B,OAAOtB,EAAUS,EAAC,KAAA,CAAIxB,SAAAqB,IAAsBA"}
+{"version":3,"file":"File.js","sources":["../../../../src/components/file/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentProps, type FC, useId } from \"react\";\nimport { formatBytes } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { useFileInputContext } from \"../file-input/internal/fileInputContext.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { TrashCanIcon } from \"../icon/index.js\";\nimport { SupportLabel } from \"../input-group/index.js\";\nimport { Link } from \"../link/index.js\";\nimport { Text } from \"../typography/index.js\";\nimport type { FileProps } from \"./types.js\";\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n    const {\n        children: _,\n        hideThumbnail,\n        className,\n        fileName,\n        fileType,\n        fileSize,\n        path,\n        file,\n        state,\n        errorLabel = \"Feil\",\n        onRemove,\n        variant = \"list\",\n        ...rest\n    } = props;\n\n    const id = `jkl-file-preview-${useId()}`;\n    const supportId = `${id}-support`;\n\n    const context = useFileInputContext();\n\n    const imageSrc =\n        fileType.startsWith(\"image/\") &&\n        (file ? URL.createObjectURL(file) : path);\n\n    const fileComponent = (\n        <div\n            id={id}\n            className={clsx(className, \"jkl-file\", `jkl-file--${variant}`)}\n            data-state={state}\n            {...rest}\n        >\n            <Flex\n                gap=\"8\"\n                direction={variant === \"card\" ? \"column\" : \"row\"}\n                alignItems={variant === \"card\" ? \"start\" : \"center\"}\n                className={\"jkl-file__content\"}\n            >\n                {!hideThumbnail && (\n                    <div\n                        className=\"jkl-file__thumbnail\"\n                        data-filetype={fileType}\n                    >\n                        {imageSrc && <img src={imageSrc} alt=\"\" />}\n                    </div>\n                )}\n                <Flex\n                    gap=\"8\"\n                    alignItems=\"center\"\n                    justifyContent=\"space-between\"\n                    className=\"jkl-file__info\"\n                >\n                    {path ? (\n                        <Text size=\"s\" className=\"jkl-file__name\">\n                            <Link href={path}>\n                                {fileName}{\" \"}\n                                <span className=\"jkl-file__size\">\n                                    ({formatBytes(fileSize)})\n                                </span>\n                            </Link>\n                        </Text>\n                    ) : (\n                        <Text size=\"s\" className=\"jkl-file__name\">\n                            {fileName}{\" \"}\n                            <span className=\"jkl-file__size\">\n                                ({formatBytes(fileSize)})\n                            </span>\n                        </Text>\n                    )}\n                    {onRemove && (\n                        <Button\n                            variant={\"ghost\"}\n                            className=\"jkl-file__button\"\n                            onClick={onRemove}\n                            title={`Fjern ${fileName}`}\n                            icon={<TrashCanIcon />}\n                        />\n                    )}\n                </Flex>\n            </Flex>\n\n            {state === \"error\" && errorLabel && (\n                <SupportLabel\n                    className=\"jkl-file__support-label\"\n                    id={supportId}\n                    label={errorLabel}\n                    labelType={\"error\"}\n                />\n            )}\n        </div>\n    );\n\n    return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","_","hideThumbnail","className","fileName","fileType","fileSize","path","file","state","errorLabel","onRemove","variant","rest","id","useId","supportId","context","useFileInputContext","imageSrc","startsWith","URL","createObjectURL","fileComponent","jsxs","clsx","Flex","gap","direction","alignItems","jsx","src","alt","justifyContent","Text","size","Link","href","formatBytes","Button","onClick","title","icon","TrashCanIcon","SupportLabel","label","labelType"],"mappings":"iiEAYO,MAAMA,EAA+CC,IACxD,MACIC,SAAUC,EACVC,cAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,WAAAA,EAAa,OACbC,SAAAA,EACAC,QAAAA,EAAU,UACPC,GACHd,EAEEe,EAAK,oBAAoBC,MACzBC,EAAY,GAAGF,YAEfG,EAAUC,IAEVC,EACFd,EAASe,WAAW,YACnBZ,EAAOa,IAAIC,gBAAgBd,GAAQD,GAElCgB,EACFC,EAAC,MAAA,CACGV,GAAAA,EACAX,UAAWsB,EAAKtB,EAAW,WAAY,aAAaS,KACpD,aAAYH,KACRI,EAEJb,SAAA,CAAAwB,EAACE,EAAA,CACGC,IAAI,IACJC,UAAuB,SAAZhB,EAAqB,SAAW,MAC3CiB,WAAwB,SAAZjB,EAAqB,QAAU,SAC3CT,UAAW,oBAEVH,SAAA,EAACE,GACE4B,EAAC,MAAA,CACG3B,UAAU,sBACV,gBAAeE,EAEdL,YAAY8B,EAAC,MAAA,CAAIC,IAAKZ,EAAUa,IAAI,OAG7CR,EAACE,EAAA,CACGC,IAAI,IACJE,WAAW,SACXI,eAAe,gBACf9B,UAAU,iBAETH,SAAA,CAAAO,EACGuB,EAACI,GAAKC,KAAK,IAAIhC,UAAU,iBACrBH,SAAAwB,EAACY,EAAA,CAAKC,KAAM9B,EACPP,SAAA,CAAAI,EAAU,IACXoB,EAAC,OAAA,CAAKrB,UAAU,iBAAiBH,SAAA,CAAA,IAC3BsC,EAAYhC,GAAU,YAKpCkB,EAACU,GAAKC,KAAK,IAAIhC,UAAU,iBACpBH,SAAA,CAAAI,EAAU,IACXoB,EAAC,OAAA,CAAKrB,UAAU,iBAAiBH,SAAA,CAAA,IAC3BsC,EAAYhC,GAAU,UAInCK,GACGmB,EAACS,EAAA,CACG3B,QAAS,QACTT,UAAU,mBACVqC,QAAS7B,EACT8B,MAAO,SAASrC,IAChBsC,OAAOC,EAAA,CAAA,WAMZ,UAAVlC,GAAqBC,GAClBoB,EAACc,EAAA,CACGzC,UAAU,0BACVW,GAAIE,EACJ6B,MAAOnC,EACPoC,UAAW,aAM3B,OAAO7B,EAAUa,EAAC,KAAA,CAAI9B,SAAAuB,IAAsBA"}

package/build/es/components/file/types.d.ts

@@ -1,10 +1,15 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 export type FileProps = {
     fileName: string;
     fileType: string;
     fileSize: number;
     path?: string;
     errorLabel?: string;
+    /**
+     * Du kan skjule forhåndsvisning av bilde/filendelse for å spare plass
+     * @default false
+     */
+    hideThumbnail?: boolean;
     state?: "error" | "loading";
     /**
      * Velg hvordan filene skal vises for brukeren
@@ -17,4 +22,8 @@ export type FileProps = {
      * Gjør det mulig å vise en knapp for fjerning av filene ved filopplasting
      */
     onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * @deprecated Blir ikke brukt, vil fjernes i neste major-release
+     */
+    children?: ReactNode;
 };

package/build/es/components/search/Search.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useRef as o}from"react";import{mergeRefs as l}from"../../utilities/mergeRefs.js";import"../../hooks/useId/useId.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import{InputGroup as a}from"../input-group/InputGroup.js";import{SearchButton as n}from"./SearchButton.js";const c=t(function(t,n){const{label:c="Søk",className:i,errorLabel:p,helpLabel:u,labelProps:m={srOnly:!0},supportLabelProps:h,tooltip:d,description:b,name:f="q",placeholder:j="Søk",spellCheck:k=!1,icon:I="search",children:L,value:g,...v}=t,w={label:c,errorLabel:p,helpLabel:u,labelProps:m,supportLabelProps:h,tooltip:d,description:b},y=o(null),S=l(y,n),x=()=>{if(y.current){Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set?.call(y.current,"");const e=new Event("change",{bubbles:!0});y.current.dispatchEvent(e),y.current.focus()}};return e("div",{className:s("jkl-search",i),children:[r(a,{...w,label:c,"data-testid":"jkl-search",render:s=>e("div",{className:"input-wrapper","data-icon":I,children:[r("input",{ref:S,type:"search",name:f,placeholder:j,spellCheck:k,...s,...v}),r("button",{className:"clear-button",type:"button",onClick:x,children:r("span",{className:"jkl-sr-only",children:"Tilbakestill søkefeltet"})})]})}),L]})});c.Button=n;export{c as Search};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useRef as o,useCallback as a}from"react";import{mergeRefs as l}from"../../utilities/mergeRefs.js";import"../../hooks/useId/useId.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import{InputGroup as n}from"../input-group/InputGroup.js";import{SearchButton as c}from"./SearchButton.js";const i=t(function(t,c){const{label:i="Søk",className:p,errorLabel:u,helpLabel:m,labelProps:h={srOnly:!0},supportLabelProps:b,tooltip:d,description:f,name:j="q",placeholder:k="Søk",spellCheck:I=!1,icon:L="search",children:g,...w}=t,y={label:i,errorLabel:u,helpLabel:m,labelProps:h,supportLabelProps:b,tooltip:d,description:f},S=o(null),v=l(S,c),x=a(()=>{if(S.current){Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set?.call(S.current,"");const e=new Event("change",{bubbles:!0});S.current.dispatchEvent(e),S.current.focus()}},[]);return e("div",{className:s("jkl-search",p),children:[r(n,{...y,label:i,"data-testid":"jkl-search",render:s=>e("div",{className:"input-wrapper","data-icon":L,children:[r("input",{ref:v,type:"search",name:j,placeholder:k,spellCheck:I,...s,...w}),r("button",{className:"clear-button",type:"button",onClick:x,children:r("span",{className:"jkl-sr-only",children:"Tilbakestill søkefeltet"})})]})}),g]})});i.Button=c;export{i as Search};
 //# sourceMappingURL=Search.js.map

package/build/es/components/search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../../src/components/search/Search.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useRef } from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { SearchButton } from \"./SearchButton.js\";\nimport type { SearchInputProps } from \"./types.js\";\n\nexport const Search = forwardRef<HTMLInputElement, SearchInputProps>(\n    function Search(props, forwardedRef): React.JSX.Element {\n        const {\n            label = \"Søk\",\n            className,\n            errorLabel,\n            helpLabel,\n            labelProps = { srOnly: true },\n            supportLabelProps,\n            tooltip,\n            description,\n            name = \"q\",\n            placeholder = \"Søk\",\n            spellCheck = false,\n            icon = \"search\",\n            children,\n            value,\n            ...rest\n        } = props;\n\n        const inputGroupProps = {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const internalRef = useRef<HTMLInputElement>(null);\n        const ref = mergeRefs(internalRef, forwardedRef);\n\n        const handleClick = () => {\n            if (internalRef.current) {\n                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n                    window.HTMLInputElement.prototype,\n                    \"value\",\n                )?.set;\n                nativeInputValueSetter?.call(internalRef.current, \"\");\n                const event = new Event(\"change\", { bubbles: true });\n                internalRef.current.dispatchEvent(event);\n                internalRef.current.focus();\n            }\n        };\n\n        return (\n            <div className={clsx(\"jkl-search\", className)}>\n                <InputGroup\n                    {...inputGroupProps}\n                    label={label}\n                    data-testid=\"jkl-search\"\n                    render={(inputProps) => (\n                        <div className=\"input-wrapper\" data-icon={icon}>\n                            <input\n                                ref={ref}\n                                type=\"search\"\n                                name={name}\n                                placeholder={placeholder}\n                                spellCheck={spellCheck}\n                                {...inputProps}\n                                {...rest}\n                            />\n                            <button\n                                className=\"clear-button\"\n                                type=\"button\"\n                                onClick={handleClick}\n                            >\n                                <span className=\"jkl-sr-only\">\n                                    Tilbakestill søkefeltet\n                                </span>\n                            </button>\n                        </div>\n                    )}\n                />\n                {children}\n            </div>\n        );\n    },\n) as ReturnType<typeof forwardRef<HTMLInputElement, SearchInputProps>> & {\n    Button: typeof SearchButton;\n};\n\nSearch.Button = SearchButton;\n"],"names":["Search","forwardRef","props","forwardedRef","label","className","errorLabel","helpLabel","labelProps","srOnly","supportLabelProps","tooltip","description","name","placeholder","spellCheck","icon","children","value","rest","inputGroupProps","internalRef","useRef","ref","mergeRefs","handleClick","current","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","event","Event","bubbles","dispatchEvent","focus","clsx","jsx","InputGroup","render","inputProps","jsxs","type","onClick","Button","SearchButton"],"mappings":"mcAOO,MAAMA,EAASC,EAClB,SAAgBC,EAAOC,GACnB,MACIC,MAAAA,EAAQ,MACRC,UAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAQ,GACvBC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,IACPC,YAAAA,EAAc,MACdC,WAAAA,GAAa,EACbC,KAAAA,EAAO,SACPC,SAAAA,EACAC,MAAAA,KACGC,GACHjB,EAEEkB,EAAkB,CACpBhB,MAAAA,EACAE,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAE,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAGES,EAAcC,EAAyB,MACvCC,EAAMC,EAAUH,EAAalB,GAE7BsB,EAAc,KAChB,GAAIJ,EAAYK,QAAS,CACUC,OAAOC,yBAClCC,OAAOC,iBAAiBC,UACxB,UACDC,KACqBC,KAAKZ,EAAYK,QAAS,IAClD,MAAMQ,EAAQ,IAAIC,MAAM,SAAU,CAAEC,SAAS,IAC7Cf,EAAYK,QAAQW,cAAcH,GAClCb,EAAYK,QAAQY,OACxB,GAGJ,SACK,MAAA,CAAIjC,UAAWkC,EAAK,aAAclC,GAC/BY,SAAA,CAAAuB,EAACC,EAAA,IACOrB,EACJhB,MAAAA,EACA,cAAY,aACZsC,OAASC,GACLC,EAAC,OAAIvC,UAAU,gBAAgB,YAAWW,EACtCC,SAAA,CAAAuB,EAAC,QAAA,CACGjB,IAAAA,EACAsB,KAAK,SACLhC,KAAAA,EACAC,YAAAA,EACAC,WAAAA,KACI4B,KACAxB,IAERqB,EAAC,SAAA,CACGnC,UAAU,eACVwC,KAAK,SACLC,QAASrB,EAETR,SAAAuB,EAAC,OAAA,CAAKnC,UAAU,cAAcY,SAAA,mCAO7CA,IAGb,GAKJjB,EAAO+C,OAASC"}
+{"version":3,"file":"Search.js","sources":["../../../../src/components/search/Search.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { SearchButton } from \"./SearchButton.js\";\nimport type { SearchInputProps } from \"./types.js\";\n\nexport const Search = forwardRef<HTMLInputElement, SearchInputProps>(\n    function Search(props, forwardedRef): React.JSX.Element {\n        const {\n            label = \"Søk\",\n            className,\n            errorLabel,\n            helpLabel,\n            labelProps = { srOnly: true },\n            supportLabelProps,\n            tooltip,\n            description,\n            name = \"q\",\n            placeholder = \"Søk\",\n            spellCheck = false,\n            icon = \"search\",\n            children,\n            ...rest\n        } = props;\n\n        const inputGroupProps = {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const internalRef = useRef<HTMLInputElement>(null);\n        const ref = mergeRefs(internalRef, forwardedRef);\n\n        const clearInput = useCallback(() => {\n            if (internalRef.current) {\n                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n                    window.HTMLInputElement.prototype,\n                    \"value\",\n                )?.set;\n                nativeInputValueSetter?.call(internalRef.current, \"\");\n                const event = new Event(\"change\", { bubbles: true });\n                internalRef.current.dispatchEvent(event);\n                internalRef.current.focus();\n            }\n        }, []);\n\n        return (\n            <div className={clsx(\"jkl-search\", className)}>\n                <InputGroup\n                    {...inputGroupProps}\n                    label={label}\n                    data-testid=\"jkl-search\"\n                    render={(inputProps) => (\n                        <div className=\"input-wrapper\" data-icon={icon}>\n                            <input\n                                ref={ref}\n                                type=\"search\"\n                                name={name}\n                                placeholder={placeholder}\n                                spellCheck={spellCheck}\n                                {...inputProps}\n                                {...rest}\n                            />\n                            <button\n                                className=\"clear-button\"\n                                type=\"button\"\n                                onClick={clearInput}\n                            >\n                                <span className=\"jkl-sr-only\">\n                                    Tilbakestill søkefeltet\n                                </span>\n                            </button>\n                        </div>\n                    )}\n                />\n                {children}\n            </div>\n        );\n    },\n) as ReturnType<typeof forwardRef<HTMLInputElement, SearchInputProps>> & {\n    Button: typeof SearchButton;\n};\n\nSearch.Button = SearchButton;\n"],"names":["Search","forwardRef","props","forwardedRef","label","className","errorLabel","helpLabel","labelProps","srOnly","supportLabelProps","tooltip","description","name","placeholder","spellCheck","icon","children","rest","inputGroupProps","internalRef","useRef","ref","mergeRefs","clearInput","useCallback","current","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","event","Event","bubbles","dispatchEvent","focus","clsx","jsx","InputGroup","render","inputProps","jsxs","type","onClick","Button","SearchButton"],"mappings":"odAOO,MAAMA,EAASC,EAClB,SAAgBC,EAAOC,GACnB,MACIC,MAAAA,EAAQ,MACRC,UAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAQ,GACvBC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,IACPC,YAAAA,EAAc,MACdC,WAAAA,GAAa,EACbC,KAAAA,EAAO,SACPC,SAAAA,KACGC,GACHhB,EAEEiB,EAAkB,CACpBf,MAAAA,EACAE,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAE,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAGEQ,EAAcC,EAAyB,MACvCC,EAAMC,EAAUH,EAAajB,GAE7BqB,EAAaC,EAAY,KAC3B,GAAIL,EAAYM,QAAS,CACUC,OAAOC,yBAClCC,OAAOC,iBAAiBC,UACxB,UACDC,KACqBC,KAAKb,EAAYM,QAAS,IAClD,MAAMQ,EAAQ,IAAIC,MAAM,SAAU,CAAEC,SAAS,IAC7ChB,EAAYM,QAAQW,cAAcH,GAClCd,EAAYM,QAAQY,OACxB,GACD,IAEH,SACK,MAAA,CAAIjC,UAAWkC,EAAK,aAAclC,GAC/BY,SAAA,CAAAuB,EAACC,EAAA,IACOtB,EACJf,MAAAA,EACA,cAAY,aACZsC,OAASC,GACLC,EAAC,OAAIvC,UAAU,gBAAgB,YAAWW,EACtCC,SAAA,CAAAuB,EAAC,QAAA,CACGlB,IAAAA,EACAuB,KAAK,SACLhC,KAAAA,EACAC,YAAAA,EACAC,WAAAA,KACI4B,KACAzB,IAERsB,EAAC,SAAA,CACGnC,UAAU,eACVwC,KAAK,SACLC,QAAStB,EAETP,SAAAuB,EAAC,OAAA,CAAKnC,UAAU,cAAcY,SAAA,mCAO7CA,IAGb,GAKJjB,EAAO+C,OAASC"}

package/build/es/components/select/Option.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, RefObject } from 'react';
+import { ValuePair } from '../../utilities/valuePair.js';
+export type OptionProps = Omit<ComponentPropsWithoutRef<"button">, "aria-selected" | "children" | "role" | "type" | "value"> & ValuePair & {
+    multiple?: boolean;
+    selected?: boolean;
+    selectRef: RefObject<HTMLSelectElement>;
+};
+export declare const Option: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children" | "role" | "aria-selected" | "type" | "value"> & ValuePair & {
+    multiple?: boolean;
+    selected?: boolean;
+    selectRef: RefObject<HTMLSelectElement>;
+} & import('react').RefAttributes<HTMLButtonElement>>;

package/build/es/components/select/Option.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r,useRef as n,useCallback as a,useEffect as o}from"react";import{Flex as l}from"../flex/Flex.js";import{Text as c}from"../typography/Text.js";const i=r(function(r,i){const{className:u="",multiple:p=!1,selected:d=!1,selectRef:f,label:m,description:b,media:x,value:h,...j}=r,v=n(null),k=n(null),y=a(e=>{const t=e.target.closest("button");if(!t||!f.current||f.current.disabled)return;const s=Array.from(f.current.options).find(e=>e.value===t.value);s&&(s.selected=!p||!s.selected,f.current.dispatchEvent(new Event("change",{bubbles:!0})))},[f,p]);return o(()=>{if(!x||!k.current||!v.current)return;const e=k.current,t=v.current,s=new ResizeObserver(()=>{t.style.setProperty("--media-size",`${e.offsetHeight}px`)});return s.observe(e),()=>s.disconnect()},[x]),e("button",{ref:i,role:"option",type:"button",className:s("jkl-option",u),value:h,"data-multiple":p||void 0,"aria-selected":d,...j,onClick:e=>{j.onClick?.(e),y(e)},children:[e(l,{as:"span",direction:"column",gap:"4",className:"jkl-option__label",ref:k,children:[t(c,{short:!0,as:"span",children:m}),b&&t(c,{short:!0,subdued:!0,as:"span",size:"xs",children:b})]}),x&&t("span",{className:"jkl-option__media",ref:v,children:x})]})});export{i as Option};
+//# sourceMappingURL=Option.js.map

package/build/es/components/select/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sources":["../../../../src/components/select/Option.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    type ComponentPropsWithoutRef,\n    type RefObject,\n    type MouseEvent,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n} from \"react\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { Text } from \"../typography/Text.js\";\n\nexport type OptionProps = Omit<\n    ComponentPropsWithoutRef<\"button\">,\n    \"aria-selected\" | \"children\" | \"role\" | \"type\" | \"value\"\n> &\n    ValuePair & {\n        multiple?: boolean;\n        selected?: boolean;\n        selectRef: RefObject<HTMLSelectElement>;\n    };\n\nexport const Option = forwardRef<HTMLButtonElement, OptionProps>(\n    function Option(props, ref) {\n        const {\n            className = \"\",\n            multiple = false,\n            selected = false,\n            selectRef,\n            label,\n            description,\n            media,\n            value,\n            ...rest\n        } = props;\n\n        const mediaRef = useRef<HTMLSpanElement>(null);\n        const labelRef = useRef<HTMLSpanElement>(null);\n\n        const syncValueToSelect = useCallback(\n            (event: KeyboardEvent | MouseEvent) => {\n                const button = (\n                    event.target as HTMLElement\n                ).closest<HTMLButtonElement>(\"button\");\n                if (!button || !selectRef.current || selectRef.current.disabled)\n                    return;\n\n                const option = Array.from(selectRef.current.options).find(\n                    (option) => option.value === button.value,\n                );\n                if (!option) return;\n\n                option.selected = multiple ? !option.selected : true;\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            },\n            [selectRef, multiple],\n        );\n\n        useEffect(() => {\n            if (!media || !labelRef.current || !mediaRef.current) return;\n            const labelElement = labelRef.current;\n            const mediaElement = mediaRef.current;\n            const observer = new ResizeObserver(() => {\n                mediaElement.style.setProperty(\n                    \"--media-size\",\n                    `${labelElement.offsetHeight}px`,\n                );\n            });\n            observer.observe(labelElement);\n            return () => observer.disconnect();\n        }, [media]);\n\n        return (\n            <button\n                ref={ref}\n                // biome-ignore lint/a11y/useSemanticElements: vi kan ikke style option-elementet\n                role=\"option\"\n                type=\"button\"\n                className={clsx(\"jkl-option\", className)}\n                value={value}\n                data-multiple={multiple || undefined}\n                aria-selected={selected}\n                {...rest}\n                onClick={(event) => {\n                    rest.onClick?.(event);\n                    syncValueToSelect(event);\n                }}\n            >\n                <Flex\n                    as=\"span\"\n                    direction=\"column\"\n                    gap=\"4\"\n                    className=\"jkl-option__label\"\n                    ref={labelRef}\n                >\n                    <Text short as=\"span\">\n                        {label}\n                    </Text>\n                    {description && (\n                        <Text short subdued as=\"span\" size=\"xs\">\n                            {description}\n                        </Text>\n                    )}\n                </Flex>\n                {media && (\n                    <span className=\"jkl-option__media\" ref={mediaRef}>\n                        {media}\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\n"],"names":["Option","forwardRef","props","ref","className","multiple","selected","selectRef","label","description","media","value","rest","mediaRef","useRef","labelRef","syncValueToSelect","useCallback","event","button","target","closest","current","disabled","option","Array","from","options","find","dispatchEvent","Event","bubbles","useEffect","labelElement","mediaElement","observer","ResizeObserver","style","setProperty","offsetHeight","observe","disconnect","jsxs","role","type","clsx","onClick","children","Flex","as","direction","gap","jsx","Text","short","subdued","size"],"mappings":"mQAwBO,MAAMA,EAASC,EAClB,SAAgBC,EAAOC,GACnB,MACIC,UAAAA,EAAY,GACZC,SAAAA,GAAW,EACXC,SAAAA,GAAW,EACXC,UAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAwB,MACnCC,EAAWD,EAAwB,MAEnCE,EAAoBC,EACrBC,IACG,MAAMC,EACFD,EAAME,OACRC,QAA2B,UAC7B,IAAKF,IAAWZ,EAAUe,SAAWf,EAAUe,QAAQC,SACnD,OAEJ,MAAMC,EAASC,MAAMC,KAAKnB,EAAUe,QAAQK,SAASC,KAChDJ,GAAWA,EAAOb,QAAUQ,EAAOR,OAEnCa,IAELA,EAAOlB,UAAWD,IAAYmB,EAAOlB,SACrCC,EAAUe,QAAQO,cACd,IAAIC,MAAM,SAAU,CAAEC,SAAS,OAGvC,CAACxB,EAAWF,IAGhB,OAAA2B,EAAU,KACN,IAAKtB,IAAUK,EAASO,UAAYT,EAASS,QAAS,OACtD,MAAMW,EAAelB,EAASO,QACxBY,EAAerB,EAASS,QACxBa,EAAW,IAAIC,eAAe,KAChCF,EAAaG,MAAMC,YACf,eACA,GAAGL,EAAaM,oBAGxB,OAAAJ,EAASK,QAAQP,GACV,IAAME,EAASM,cACvB,CAAC/B,IAGAgC,EAAC,SAAA,CACGvC,IAAAA,EAEAwC,KAAK,SACLC,KAAK,SACLxC,UAAWyC,EAAK,aAAczC,GAC9BO,MAAAA,EACA,gBAAeN,QAAY,EAC3B,gBAAeC,KACXM,EACJkC,QAAU5B,IACNN,EAAKkC,UAAU5B,GACfF,EAAkBE,IAGtB6B,SAAA,CAAAL,EAACM,EAAA,CACGC,GAAG,OACHC,UAAU,SACVC,IAAI,IACJ/C,UAAU,oBACVD,IAAKY,EAELgC,SAAA,CAAAK,EAACC,EAAA,CAAKC,OAAK,EAACL,GAAG,OACVF,SAAAvC,IAEJC,GACG2C,EAACC,EAAA,CAAKC,OAAK,EAACC,SAAO,EAACN,GAAG,OAAOO,KAAK,KAC9BT,SAAAtC,OAIZC,GACG0C,EAAC,OAAA,CAAKhD,UAAU,oBAAoBD,IAAKU,EACpCkC,SAAArC,MAKrB"}

package/build/es/components/select/Select.d.ts

@@ -1,3 +1,18 @@
-import { default as React } from 'react';
-import { SelectProps } from './types.js';
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+import { ComponentPropsWithoutRef } from 'react';
+import { ValuePair } from '../../utilities/valuePair.js';
+import { InputGroupProps } from '../input-group/types.js';
+import { DataTestAutoId } from '../../utilities/types.js';
+export type SelectProps = Omit<InputGroupProps, "children" | "inline"> & DataTestAutoId & Omit<ComponentPropsWithoutRef<"select">, "size" | "children"> & {
+    width?: string;
+    items: (string | ValuePair)[];
+    placeholder?: string;
+} & ({
+    searchable: true;
+    onSearch?: (searchTerm: string) => void;
+    filterFunction?: (item: ValuePair, searchTerm: string) => boolean;
+} | {
+    searchable?: false;
+    onSearch?: never;
+    filterFunction?: never;
+});
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLSelectElement>>;