@fremtind/jokul 6.1.2 → 6.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/date-input/DateInput.cjs +1 -1
- package/build/cjs/components/date-input/DateInput.cjs.map +1 -1
- package/build/cjs/hooks/index.cjs +1 -1
- package/build/cjs/hooks/index.d.cts +1 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs +2 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs.map +1 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.d.cts +8 -0
- package/build/cjs/utilities/index.cjs +1 -1
- package/build/cjs/utilities/index.d.cts +1 -0
- package/build/cjs/utilities/mergeRefs.cjs +1 -1
- package/build/cjs/utilities/mergeRefs.cjs.map +1 -1
- package/build/cjs/utilities/mergeRefs.d.cts +0 -8
- package/build/es/components/date-input/DateInput.js +1 -1
- package/build/es/components/date-input/DateInput.js.map +1 -1
- package/build/es/hooks/index.d.ts +1 -0
- package/build/es/hooks/index.js +1 -1
- package/build/es/hooks/useMergeRefs/useMergeRefs.d.ts +8 -0
- package/build/es/hooks/useMergeRefs/useMergeRefs.js +2 -0
- package/build/es/hooks/useMergeRefs/useMergeRefs.js.map +1 -0
- package/build/es/utilities/index.d.ts +1 -0
- package/build/es/utilities/index.js +1 -1
- package/build/es/utilities/mergeRefs.d.ts +0 -8
- package/build/es/utilities/mergeRefs.js +1 -1
- package/build/es/utilities/mergeRefs.js.map +1 -1
- package/package.json +1 -1
- package/styles/base.css +4 -2
- package/styles/base.min.css +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/date-input/date-input.css +11 -3
- package/styles/components/date-input/date-input.min.css +1 -1
- package/styles/components/date-input/date-input.scss +14 -3
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/file-input.css +9 -9
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +13 -13
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.scss +2 -2
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components.css +46 -38
- package/styles/components.min.css +2 -2
- package/styles/tailwind.css +2 -2
- package/styles/theme/_tokens.scss +2 -2
- package/styles/theme/brands/dnb/_fonts.scss +2 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),o=require("../../hooks/useMergeRefs/useMergeRefs.cjs"),i=require("../button/Button.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs");const c=require("../icon/icons/CalendarIcon.cjs");require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../../hooks/useId/useId.cjs");const s=require("../input-group/InputGroup.cjs"),t=require("./calendar/Calendar.cjs"),a=require("./utils.cjs"),u=r.forwardRef((u,l)=>{const{max:d,min:p,defaultValue:j,value:q,name:I,onChange:m,onBlur:b,onClick:v,onFocus:g,id:h,"data-testautoid":C,className:k="",label:w,labelProps:f,helpLabel:y,errorLabel:x,supportLabelProps:A,tooltip:L,description:_,required:D,disabled:P,readOnly:R,autoComplete:M,inputMode:N,...B}=u,{inline:O,style:E,"data-size":S,...T}=B,V=r.useId(),z=h?`${h}-calendar`:`jkl-calendar-${V}`,G=void 0!==q,[H,U]=r.useState(j??""),F=G?q:H,$=a.toValidBoundary(p),Q=a.toValidBoundary(d),W=r.useRef(null),J=o.useMergeRefs(W,l),K=e=>{G||U(e.target.value),m?.(e)},X=()=>{!G&&W.current&&U(W.current.value)};return e.jsx(s.InputGroup,{id:h,className:n.clsx("jkl-date-input",k),inline:O,style:E,"data-size":S,label:w,labelProps:f,helpLabel:y,errorLabel:x,supportLabelProps:A,tooltip:L,description:_,render:n=>e.jsxs("div",{className:"jkl-date-input__wrapper","data-invalid":n["aria-invalid"],children:[e.jsx("input",{ref:J,"data-testid":"jkl-date-input__input","data-testautoid":C,"data-empty":F?void 0:"true",className:"jkl-date-input__input",name:I,type:"date",...G?{value:q}:{defaultValue:j},max:Q,min:$,required:D,disabled:P,readOnly:R,autoComplete:M,inputMode:N,onChange:K,onFocus:g,onBlur:b,onClick:e=>{e.preventDefault(),v?.(e)},...T,...n}),e.jsx(i.Button,{type:"button",variant:"ghost",icon:e.jsx(c.CalendarIcon,{}),"aria-label":"Åpne kalender","data-testid":"jkl-date-input__trigger",className:"jkl-date-input__calendar-trigger",disabled:P||R,onClick:X,popovertarget:z}),e.jsx(t.Calendar,{"data-testid":"jkl-calendar",id:z,value:F,min:$,max:Q,onChange:e=>(e=>{const n=W.current;if(!n)return;const r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set;r?r.call(n,e):n.value=e,n.dispatchEvent(new Event("input",{bubbles:!0}))})(e.target.value),label:w,description:_,popover:"auto"})]})})});u.displayName="DateInput",exports.DateInput=u;
|
|
2
2
|
//# sourceMappingURL=DateInput.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.cjs","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":"q9DAUaA,EAAYC,EAAAA,WACrB,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,EAAAA,QACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EAAAA,SACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAAA,gBAAgBrC,GAC3BsC,EAAWD,EAAAA,gBAAgBtC,GAI3BwC,EAAWC,EAAAA,OAAgC,MAC3CC,EAAcC,EAAAA,aAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,EAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAAAA,IAACC,EAAAA,WAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAAA,KAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAAA,KAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAAA,IAAC,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,EAAAA,IAACW,EAAAA,OAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,WAAOC,EAAAA,aAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,EAETiB,cAAejC,IAEnBkB,EAAAA,IAACgB,EAAAA,SAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFHQ,KACxB,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"}
|
|
1
|
+
{"version":3,"file":"DateInput.cjs","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../hooks/useMergeRefs/useMergeRefs.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":"i6DAUaA,EAAYC,EAAAA,WACrB,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,EAAAA,QACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EAAAA,SACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAAA,gBAAgBrC,GAC3BsC,EAAWD,EAAAA,gBAAgBtC,GAI3BwC,EAAWC,EAAAA,OAAgC,MAC3CC,EAAcC,EAAAA,aAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,EAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAAAA,IAACC,EAAAA,WAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAAA,KAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAAA,KAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAAA,IAAC,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,EAAAA,IAACW,EAAAA,OAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,WAAOC,EAAAA,aAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,EAETiB,cAAejC,IAEnBkB,EAAAA,IAACgB,EAAAA,SAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFHQ,KACxB,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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useAnimatedHeight/useAnimatedHeight.cjs"),s=require("./useAnimatedHeight/useAnimatedHeightBetween.cjs"),r=require("./useAnimatedHeight/useAutoAnimateHeight.cjs"),u=require("./useBrowserPreferences/useBrowserPreferences.cjs"),i=require("./useIntersectionObserver/useIntersectionObserver.cjs"),t=require("./useLocalStorage/useLocalStorage.cjs"),o=require("./useMutationObserver/useMutationObserver.cjs"),n=require("./usePreviousValue/usePreviousValue.cjs"),c=require("./useProgressiveImg/useProgressiveImg.cjs"),a=require("./useScreen/useScreen.cjs"),g=require("./useScrollIntoView/useScrollIntoView.cjs"),l=require("./useAriaLiveRegion/useAriaLiveRegion.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useAnimatedHeight/useAnimatedHeight.cjs"),s=require("./useAnimatedHeight/useAnimatedHeightBetween.cjs"),r=require("./useAnimatedHeight/useAutoAnimateHeight.cjs"),u=require("./useBrowserPreferences/useBrowserPreferences.cjs"),i=require("./useIntersectionObserver/useIntersectionObserver.cjs"),t=require("./useLocalStorage/useLocalStorage.cjs"),o=require("./useMutationObserver/useMutationObserver.cjs"),n=require("./usePreviousValue/usePreviousValue.cjs"),c=require("./useProgressiveImg/useProgressiveImg.cjs"),a=require("./useScreen/useScreen.cjs"),g=require("./useScrollIntoView/useScrollIntoView.cjs"),l=require("./useAriaLiveRegion/useAriaLiveRegion.cjs"),p=require("./useClickOutside/useClickOutside.cjs"),d=require("./useFocusOutside/useFocusOutside.cjs"),m=require("./useElementDimensions/useElementDimensions.cjs"),v=require("./useId/useId.cjs"),j=require("./useKeyListener/useKeyListener.cjs"),x=require("./useListNavigation/useListNavigation.cjs"),q=require("./useMergeRefs/useMergeRefs.cjs"),A=require("./useSwipeGesture/useSwipeGesture.cjs");exports.useAnimatedHeight=e.useAnimatedHeight,exports.useAnimatedHeightBetween=s.useAnimatedHeightBetween,exports.useAutoAnimatedHeight=r.useAutoAnimatedHeight,exports.useBrowserPreferences=u.useBrowserPreferences,exports.useIntersectionObserver=i.useIntersectionObserver,exports.useLocalStorage=t.useLocalStorage,exports.useMutationObserver=o.useMutationObserver,exports.usePreviousValue=n.usePreviousValue,exports.useProgressiveImg=c.useProgressiveImg,exports.useScreen=a.useScreen,exports.useScrollIntoView=g.useScrollIntoView,exports.useAriaLiveRegion=l.useAriaLiveRegion,exports.useClickOutside=p.useClickOutside,exports.useFocusOutside=d.useFocusOutside,exports.useElementDimensions=m.useElementDimensions,exports.useId=v.useId,exports.useKeyListener=j.useKeyListener,exports.useListNavigation=x.useListNavigation,exports.useMergeRefs=q.useMergeRefs,exports.useSwipeGesture=A.useSwipeGesture;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -14,4 +14,5 @@ export { useElementDimensions, type Dimensions, } from './useElementDimensions/u
|
|
|
14
14
|
export { useId } from './useId/useId.cjs';
|
|
15
15
|
export { useKeyListener } from './useKeyListener/useKeyListener.cjs';
|
|
16
16
|
export { useListNavigation } from './useListNavigation/useListNavigation.cjs';
|
|
17
|
+
export { useMergeRefs } from './useMergeRefs/useMergeRefs.cjs';
|
|
17
18
|
export { useSwipeGesture, type SwipeChangeHandler, } from './useSwipeGesture/useSwipeGesture.cjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMergeRefs.cjs","sources":["../../../../src/hooks/useMergeRefs/useMergeRefs.ts"],"sourcesContent":["import {\n type ForwardedRef,\n type MutableRefObject,\n type RefCallback,\n useMemo,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\n\n/**\n * Slår sammen flere refs til én callback som bare endres når en av refsene endres.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);\n */\nexport function useMergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n // biome-ignore lint/correctness/useExhaustiveDependencies: Sammenlign hver ref for seg; [refs] blir ny ved hver rendring.\n return useMemo(() => mergeRefs(...refs), refs);\n}\n"],"names":["refs","useMemo","mergeRefs"],"mappings":"yKAcO,YACAA,GAGH,OAAOC,EAAAA,QAAQ,IAAMC,EAAAA,aAAaF,GAAOA,EAC7C"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Slår sammen flere refs til én callback som bare endres når en av refsene endres.
|
|
4
|
+
* @param refs Liste over refs du vil slå sammen
|
|
5
|
+
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
6
|
+
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
7
|
+
*/
|
|
8
|
+
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../index-CaISwoxr.cjs"),r=require("./formatters/util/formatNumber.cjs"),s=require("./formatters/util/parseNumber.cjs"),t=require("./formatters/util/registerWithMask.cjs"),a=require("./formatters/avstand/formatAvstand.cjs"),i=require("./formatters/bytes/formatBytes.cjs"),o=require("./formatters/date/formatDate.cjs"),m=require("./formatters/fodselsnummer/formatFodselsnummer.cjs"),n=require("./formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),u=require("./formatters/kontonummer/formatKontonummer.cjs"),l=require("./formatters/kortnummer/formatKortnummer.cjs"),d=require("./formatters/telefonnummer/formatTelefonnummer.cjs"),f=require("./formatters/valuta/formatValuta.cjs"),p=require("./getThemeAndSize.cjs"),g=require("./mergeRefs.cjs"),c=require("./polymorphism/mergeProps.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../index-CaISwoxr.cjs"),r=require("./formatters/util/formatNumber.cjs"),s=require("./formatters/util/parseNumber.cjs"),t=require("./formatters/util/registerWithMask.cjs"),a=require("./formatters/avstand/formatAvstand.cjs"),i=require("./formatters/bytes/formatBytes.cjs"),o=require("./formatters/date/formatDate.cjs"),m=require("./formatters/fodselsnummer/formatFodselsnummer.cjs"),n=require("./formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),u=require("./formatters/kontonummer/formatKontonummer.cjs"),l=require("./formatters/kortnummer/formatKortnummer.cjs"),d=require("./formatters/telefonnummer/formatTelefonnummer.cjs"),f=require("./formatters/valuta/formatValuta.cjs"),p=require("./getThemeAndSize.cjs"),g=require("./mergeRefs.cjs"),c=require("../hooks/useMergeRefs/useMergeRefs.cjs"),E=require("./polymorphism/mergeProps.cjs"),x=require("./polymorphism/SlotComponent.cjs"),j=require("./tabListener.cjs"),R=require("./validators/isValidEpost/isValidEpost.cjs"),N=require("./validators/isValidTelefonnummer/isValidTelefonnummer.cjs"),V=require("./validators/isValidRegistreringsnummer/isValidRegistreringsnummer.cjs"),q=require("./validators/isValidChassisnummer/isValidChassisnummer.cjs"),M=require("./validators/isExactLength/isExactLength.cjs"),h=require("./validators/isInteger/isInteger.cjs"),O=require("./validators/isValidFodselsnummer/isValidFodselsnummer.cjs"),S=require("./validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.cjs"),T=require("./validators/isValidName/isValidName.cjs"),v=require("./validators/hasMinimumWords/hasMinimumWords.cjs"),b=require("./validators/hasNoIllegalCharacters/hasNoIllegalCharacters.cjs"),A=require("./valuePair.cjs"),G=require("./types.cjs");exports.unicode=e.unicode,exports.formatNumber=r.formatNumber,exports.parseNumber=s.parseNumber,exports.registerWithMasks=t.registerWithMasks,exports.formatAvstand=a.formatAvstand,exports.formatBytes=i.formatBytes,exports.formatDate=o.formatDate,exports.FODSELSNUMMER_REGEX=m.FODSELSNUMMER_REGEX,exports.formatFodselsnummer=m.formatFodselsnummer,exports.ORGANISASJONSNUMMER_REGEX=n.ORGANISASJONSNUMMER_REGEX,exports.formatOrganisasjonsnummer=n.formatOrganisasjonsnummer,exports.KONTONUMMER_REGEX=u.KONTONUMMER_REGEX,exports.formatKontonummer=u.formatKontonummer,exports.KORTNUMMER_REGEX=l.KORTNUMMER_REGEX,exports.formatKortnummer=l.formatKortnummer,exports.TELEFONNUMMER_REGEX=d.TELEFONNUMMER_REGEX,exports.formatTelefonnummer=d.formatTelefonnummer,exports.formatValuta=f.formatValuta,exports.getThemeAndSize=p.getThemeAndSize,exports.mergeRefs=g.mergeRefs,exports.useMergeRefs=c.useMergeRefs,exports.mergeProps=E.mergeProps,exports.SlotComponent=x.SlotComponent,exports.initTabListener=j.initTabListener,exports.isValidEpost=R.isValidEpost,exports.isValidTelefonnummer=N.isValidTelefonnummer,exports.isValidRegistreringsnummer=V.isValidRegistreringsnummer,exports.isValidChassisnummer=q.isValidChassisnummer,exports.isExactLength=M.isExactLength,exports.isInteger=h.isInteger,exports.isValidFodselsnummer=O.isValidFodselsnummer,exports.isValidOrganisasjonsnummer=S.isValidOrganisasjonsnummer,exports.isValidName=T.isValidName,exports.hasMinimumWords=v.hasMinimumWords,exports.hasNoIllegalCharacters=b.hasNoIllegalCharacters,exports.getValuePair=A.getValuePair,exports.BRANDS=G.BRANDS;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -2,6 +2,7 @@ export * from './constants/index.cjs';
|
|
|
2
2
|
export * from './formatters/index.cjs';
|
|
3
3
|
export * from './getThemeAndSize.cjs';
|
|
4
4
|
export * from './mergeRefs.cjs';
|
|
5
|
+
export { useMergeRefs } from '../hooks/useMergeRefs/useMergeRefs.cjs';
|
|
5
6
|
export * from './polymorphism/index.cjs';
|
|
6
7
|
export * from './tabListener.cjs';
|
|
7
8
|
export * from './validators/index.cjs';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.mergeRefs=function(...e){return function(t){for(const o of e)o&&("function"==typeof o?o(t):o&&(o.current=t))}};
|
|
2
2
|
//# sourceMappingURL=mergeRefs.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeRefs.cjs","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"mergeRefs.cjs","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import type { ForwardedRef, MutableRefObject, RefCallback } from \"react\";\n\n/**\n * Slår sammen flere refs til én, for eksempel hvis du har både en\n * egen ref i en komponent og også vil kunne ta inn en forwardRef\n * fra brukeren av komponenten.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example\n * const ref = useRef<HTMLElement>(null);\n * const combinedRef = mergeRefs(ref, forwardedRef, anotherRef);\n *\n * return <div ref={combinedRef} {...props} />;\n */\nexport function mergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n return function combinedRef(instance: T | null) {\n for (const ref of refs) {\n if (!ref) continue;\n\n if (typeof ref === \"function\") {\n ref(instance);\n } else if (ref) {\n ref.current = instance;\n }\n }\n };\n}\n"],"names":["refs","instance","ref","current"],"mappings":"kGAcO,YACAA,GAEH,OAAO,SAAqBC,GACxB,IAAA,MAAWC,KAAOF,EACTE,IAEc,mBAARA,EACPA,EAAID,GACGC,IACPA,EAAIC,QAAUF,GAG1B,CACJ"}
|
|
@@ -12,11 +12,3 @@ import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
|
12
12
|
* return <div ref={combinedRef} {...props} />;
|
|
13
13
|
*/
|
|
14
14
|
export declare function mergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
15
|
-
/**
|
|
16
|
-
* Gjør det samme som {@link mergeRefs}, men wrappet i en `useMemo`, hvis du
|
|
17
|
-
* vil unngå å lage en ny funksjon ved hver render. Som regel ikke nødvendig.
|
|
18
|
-
* @param refs Liste over refs du vil slå sammen
|
|
19
|
-
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
20
|
-
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
21
|
-
*/
|
|
22
|
-
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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"../../
|
|
1
|
+
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"../../hooks/useMergeRefs/useMergeRefs.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:f,onChange:h,onBlur:C,onClick:g,onFocus:k,id:w,"data-testautoid":y,className:A="",label:L,labelProps:_,helpLabel:D,errorLabel:R,supportLabelProps:x,tooltip:N,description:P,required:M,disabled:B,readOnly:E,autoComplete:O,inputMode:T,...V}=t,{inline:z,style:G,"data-size":H,...S}=V,U=e(),q=w?`${w}-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),h?.(o)},oo=()=>{!F&&X.current&&Q(X.current.value)};return o(l,{id:w,className:i("jkl-date-input",A),inline:z,style:G,"data-size":H,label:L,labelProps:_,helpLabel:D,errorLabel:R,supportLabelProps:x,tooltip:N,description:P,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:f,type:"date",...F?{value:v}:{defaultValue:b},max:K,min:J,required:M,disabled:B,readOnly:E,autoComplete:O,inputMode:T,onChange:Z,onFocus:k,onBlur:C,onClick:o=>{o.preventDefault(),g?.(o)},...S,...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:B||E,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:P,popover:"auto"})]})})});d.displayName="DateInput";export{d as DateInput};
|
|
2
2
|
//# sourceMappingURL=DateInput.js.map
|
|
@@ -1 +1 @@
|
|
|
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"}
|
|
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 \"../../hooks/useMergeRefs/useMergeRefs.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":"01DAUO,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"}
|
|
@@ -14,4 +14,5 @@ export { useElementDimensions, type Dimensions, } from './useElementDimensions/u
|
|
|
14
14
|
export { useId } from './useId/useId.js';
|
|
15
15
|
export { useKeyListener } from './useKeyListener/useKeyListener.js';
|
|
16
16
|
export { useListNavigation } from './useListNavigation/useListNavigation.js';
|
|
17
|
+
export { useMergeRefs } from './useMergeRefs/useMergeRefs.js';
|
|
17
18
|
export { useSwipeGesture, type SwipeChangeHandler, } from './useSwipeGesture/useSwipeGesture.js';
|
package/build/es/hooks/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useAnimatedHeight as e}from"./useAnimatedHeight/useAnimatedHeight.js";import{useAnimatedHeightBetween as s}from"./useAnimatedHeight/useAnimatedHeightBetween.js";import{useAutoAnimatedHeight as
|
|
1
|
+
import{useAnimatedHeight as e}from"./useAnimatedHeight/useAnimatedHeight.js";import{useAnimatedHeightBetween as s}from"./useAnimatedHeight/useAnimatedHeightBetween.js";import{useAutoAnimatedHeight as r}from"./useAnimatedHeight/useAutoAnimateHeight.js";import{useBrowserPreferences as i}from"./useBrowserPreferences/useBrowserPreferences.js";import{useIntersectionObserver as u}from"./useIntersectionObserver/useIntersectionObserver.js";import{useLocalStorage as t}from"./useLocalStorage/useLocalStorage.js";import{useMutationObserver as o}from"./useMutationObserver/useMutationObserver.js";import{usePreviousValue as a}from"./usePreviousValue/usePreviousValue.js";import{useProgressiveImg as m}from"./useProgressiveImg/useProgressiveImg.js";import{useScreen as n}from"./useScreen/useScreen.js";import{useScrollIntoView as g}from"./useScrollIntoView/useScrollIntoView.js";import{useAriaLiveRegion as c}from"./useAriaLiveRegion/useAriaLiveRegion.js";import{useClickOutside as f}from"./useClickOutside/useClickOutside.js";import{useFocusOutside as p}from"./useFocusOutside/useFocusOutside.js";import{useElementDimensions as l}from"./useElementDimensions/useElementDimensions.js";import{useId as v}from"./useId/useId.js";import{useKeyListener as d}from"./useKeyListener/useKeyListener.js";import{useListNavigation as j}from"./useListNavigation/useListNavigation.js";import{useMergeRefs as A}from"./useMergeRefs/useMergeRefs.js";import{useSwipeGesture as I}from"./useSwipeGesture/useSwipeGesture.js";export{e as useAnimatedHeight,s as useAnimatedHeightBetween,c as useAriaLiveRegion,r as useAutoAnimatedHeight,i as useBrowserPreferences,f as useClickOutside,l as useElementDimensions,p as useFocusOutside,v as useId,u as useIntersectionObserver,d as useKeyListener,j as useListNavigation,t as useLocalStorage,A as useMergeRefs,o as useMutationObserver,a as usePreviousValue,m as useProgressiveImg,n as useScreen,g as useScrollIntoView,I as useSwipeGesture};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Slår sammen flere refs til én callback som bare endres når en av refsene endres.
|
|
4
|
+
* @param refs Liste over refs du vil slå sammen
|
|
5
|
+
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
6
|
+
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
7
|
+
*/
|
|
8
|
+
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMergeRefs.js","sources":["../../../../src/hooks/useMergeRefs/useMergeRefs.ts"],"sourcesContent":["import {\n type ForwardedRef,\n type MutableRefObject,\n type RefCallback,\n useMemo,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\n\n/**\n * Slår sammen flere refs til én callback som bare endres når en av refsene endres.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);\n */\nexport function useMergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n // biome-ignore lint/correctness/useExhaustiveDependencies: Sammenlign hver ref for seg; [refs] blir ny ved hver rendring.\n return useMemo(() => mergeRefs(...refs), refs);\n}\n"],"names":["useMergeRefs","refs","useMemo","mergeRefs"],"mappings":"yFAcO,SAASA,KACTC,GAGH,OAAOC,EAAQ,IAAMC,KAAaF,GAAOA,EAC7C"}
|
|
@@ -2,6 +2,7 @@ export * from './constants/index.js';
|
|
|
2
2
|
export * from './formatters/index.js';
|
|
3
3
|
export * from './getThemeAndSize.js';
|
|
4
4
|
export * from './mergeRefs.js';
|
|
5
|
+
export { useMergeRefs } from '../hooks/useMergeRefs/useMergeRefs.js';
|
|
5
6
|
export * from './polymorphism/index.js';
|
|
6
7
|
export * from './tabListener.js';
|
|
7
8
|
export * from './validators/index.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{u as s}from"../../index-C1iqmqvT.js";import{formatNumber as a}from"./formatters/util/formatNumber.js";import{parseNumber as r}from"./formatters/util/parseNumber.js";import{registerWithMasks as m}from"./formatters/util/registerWithMask.js";import{formatAvstand as e}from"./formatters/avstand/formatAvstand.js";import{formatBytes as o}from"./formatters/bytes/formatBytes.js";import{formatDate as t}from"./formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as i,formatFodselsnummer as n}from"./formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as f,formatOrganisasjonsnummer as l}from"./formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as u,formatKontonummer as d}from"./formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as p,formatKortnummer as g}from"./formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as E,formatTelefonnummer as j}from"./formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as R}from"./formatters/valuta/formatValuta.js";import{getThemeAndSize as N}from"./getThemeAndSize.js";import{mergeRefs as V
|
|
1
|
+
import{u as s}from"../../index-C1iqmqvT.js";import{formatNumber as a}from"./formatters/util/formatNumber.js";import{parseNumber as r}from"./formatters/util/parseNumber.js";import{registerWithMasks as m}from"./formatters/util/registerWithMask.js";import{formatAvstand as e}from"./formatters/avstand/formatAvstand.js";import{formatBytes as o}from"./formatters/bytes/formatBytes.js";import{formatDate as t}from"./formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as i,formatFodselsnummer as n}from"./formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as f,formatOrganisasjonsnummer as l}from"./formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as u,formatKontonummer as d}from"./formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as p,formatKortnummer as g}from"./formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as E,formatTelefonnummer as j}from"./formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as R}from"./formatters/valuta/formatValuta.js";import{getThemeAndSize as N}from"./getThemeAndSize.js";import{mergeRefs as V}from"./mergeRefs.js";import{useMergeRefs as M}from"../hooks/useMergeRefs/useMergeRefs.js";import{mergeProps as h}from"./polymorphism/mergeProps.js";import{SlotComponent as O}from"./polymorphism/SlotComponent.js";import{initTabListener as S}from"./tabListener.js";import{isValidEpost as T}from"./validators/isValidEpost/isValidEpost.js";import{isValidTelefonnummer as v}from"./validators/isValidTelefonnummer/isValidTelefonnummer.js";import{isValidRegistreringsnummer as A}from"./validators/isValidRegistreringsnummer/isValidRegistreringsnummer.js";import{isValidChassisnummer as G}from"./validators/isValidChassisnummer/isValidChassisnummer.js";import{isExactLength as C}from"./validators/isExactLength/isExactLength.js";import{isInteger as F}from"./validators/isInteger/isInteger.js";import{isValidFodselsnummer as L}from"./validators/isValidFodselsnummer/isValidFodselsnummer.js";import{isValidOrganisasjonsnummer as b}from"./validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.js";import{isValidName as I}from"./validators/isValidName/isValidName.js";import{hasMinimumWords as K}from"./validators/hasMinimumWords/hasMinimumWords.js";import{hasNoIllegalCharacters as U}from"./validators/hasNoIllegalCharacters/hasNoIllegalCharacters.js";import{getValuePair as X}from"./valuePair.js";import{BRANDS as _}from"./types.js";export{_ as BRANDS,i as FODSELSNUMMER_REGEX,u as KONTONUMMER_REGEX,p as KORTNUMMER_REGEX,f as ORGANISASJONSNUMMER_REGEX,O as SlotComponent,E as TELEFONNUMMER_REGEX,e as formatAvstand,o as formatBytes,t as formatDate,n as formatFodselsnummer,d as formatKontonummer,g as formatKortnummer,a as formatNumber,l as formatOrganisasjonsnummer,j as formatTelefonnummer,R as formatValuta,N as getThemeAndSize,X as getValuePair,K as hasMinimumWords,U as hasNoIllegalCharacters,S as initTabListener,C as isExactLength,F as isInteger,G as isValidChassisnummer,T as isValidEpost,L as isValidFodselsnummer,I as isValidName,b as isValidOrganisasjonsnummer,A as isValidRegistreringsnummer,v as isValidTelefonnummer,h as mergeProps,V as mergeRefs,r as parseNumber,m as registerWithMasks,s as unicode,M as useMergeRefs};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -12,11 +12,3 @@ import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
|
12
12
|
* return <div ref={combinedRef} {...props} />;
|
|
13
13
|
*/
|
|
14
14
|
export declare function mergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
15
|
-
/**
|
|
16
|
-
* Gjør det samme som {@link mergeRefs}, men wrappet i en `useMemo`, hvis du
|
|
17
|
-
* vil unngå å lage en ny funksjon ved hver render. Som regel ikke nødvendig.
|
|
18
|
-
* @param refs Liste over refs du vil slå sammen
|
|
19
|
-
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
20
|
-
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
21
|
-
*/
|
|
22
|
-
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
function n(...n){return function(o){for(const t of n)t&&("function"==typeof t?t(o):t&&(t.current=o))}}export{n as mergeRefs};
|
|
2
2
|
//# sourceMappingURL=mergeRefs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeRefs.js","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"mergeRefs.js","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import type { ForwardedRef, MutableRefObject, RefCallback } from \"react\";\n\n/**\n * Slår sammen flere refs til én, for eksempel hvis du har både en\n * egen ref i en komponent og også vil kunne ta inn en forwardRef\n * fra brukeren av komponenten.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example\n * const ref = useRef<HTMLElement>(null);\n * const combinedRef = mergeRefs(ref, forwardedRef, anotherRef);\n *\n * return <div ref={combinedRef} {...props} />;\n */\nexport function mergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n return function combinedRef(instance: T | null) {\n for (const ref of refs) {\n if (!ref) continue;\n\n if (typeof ref === \"function\") {\n ref(instance);\n } else if (ref) {\n ref.current = instance;\n }\n }\n };\n}\n"],"names":["mergeRefs","refs","instance","ref","current"],"mappings":"AAcO,SAASA,KACTC,GAEH,OAAO,SAAqBC,GACxB,IAAA,MAAWC,KAAOF,EACTE,IAEc,mBAARA,EACPA,EAAID,GACGC,IACPA,EAAIC,QAAUF,GAG1B,CACJ"}
|
package/package.json
CHANGED
package/styles/base.css
CHANGED
|
@@ -617,8 +617,8 @@
|
|
|
617
617
|
--jkl-motion-easing-exit: ease-in;
|
|
618
618
|
--jkl-motion-easing-ease-in-bounce-out: cubic-bezier(0, 0, 0.375, 1.17);
|
|
619
619
|
--jkl-motion-easing-focus: cubic-bezier(0.6, 0.2, 0.35, 1);
|
|
620
|
-
--jkl-font-weight-normal:
|
|
621
|
-
--jkl-font-weight-bold:
|
|
620
|
+
--jkl-font-weight-normal: 400;
|
|
621
|
+
--jkl-font-weight-bold: 600;
|
|
622
622
|
--jkl-font-family-regular: 'Jokul', 'Adjusted Arial Fallback', arial, sans-serif;
|
|
623
623
|
--jkl-font-family-display: 'Jokul Display', 'Adjusted Arial Display Fallback', arial, sans-serif;
|
|
624
624
|
--jkl-font-family-mono: monospace;
|
|
@@ -817,6 +817,8 @@
|
|
|
817
817
|
--jkl-font-family-display: 'DNB Sans', sans-serif;
|
|
818
818
|
--jkl-font-family-mono: 'DNB Mono', 'Adjusted Courier New Fallback', -apple-system, blinkmacsystemfont, monospace;
|
|
819
819
|
--jkl-font-family-icons: 'Jokul Icons', 'Jokul Icons Fallback', monospace;
|
|
820
|
+
--jkl-font-weight-normal: 400;
|
|
821
|
+
--jkl-font-weight-bold: 500;
|
|
820
822
|
}
|
|
821
823
|
}
|
|
822
824
|
@layer jokul.global {
|