npm - @fremtind/jokul - Versions diffs - 0.36.4 → 0.37.1 - Mend

@fremtind/jokul 0.36.4 → 0.37.1

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

Files changed (59) hide show

package/build/cjs/components/datepicker/DatePicker.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),a=require("date-fns"),r=require("react"),n=require("react-dom"),l=require("../icon/icons/CalendarIcon.cjs"),o=require("../icon-button/IconButton.cjs"),u=require("../input-group/InputGroup.cjs"),s=require("../popover/Popover.cjs"),i=require("../text-input/BaseTextInput.cjs"),c=require("./internal/Calendar.cjs"),d=require("./internal/utils.cjs"),p=require("./utils.cjs"),b=require("./validation.cjs"),f=r.forwardRef(((f,v)=>{const{"data-testautoid":k,id:h,className:j="",label:m="Velg dato",labelProps:g,defaultValue:D,defaultShow:y=!1,value:C,disableBeforeDate:x,disableAfterDate:q,yearsToShow:L,name:S,helpLabel:w,errorLabel:P,invalid:I,density:O,days:B,months:T,monthLabel:_,yearLabel:E,placeholder:N="dd.mm.åååå",width:R="11.25rem",onChange:U,onBlur:V,onFocus:F,onKeyDown:K,action:W,showCalendarLabel:A="Åpne kalender",hideCalendarLabel:G="Lukk kalender",supportLabelProps:M,tooltip:H,...z}=f;"production"!==process.env.NODE_ENV&&C&&D&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const J=p.parseDateString(x),Q=J?a.startOfDay(J):void 0,X=p.parseDateString(q),Y=X?a.startOfDay(X):void 0,[Z,$]=r.useState(d.getInitialDate(C,D,Q,Y)),[ee,te]=r.useState(null),[ae,re]=r.useState(y),ne=r.useRef(null),le=r.useRef(null),oe=r.useRef(null),ue=r.useRef(null),se=r.useCallback((e=>{ue.current=e,v&&("function"==typeof v?v(e):v.current=e)}),[ue,v]),ie=r.useCallback((e=>{F&&le.current&&(le.current.contains(e.relatedTarget)||F(e,Z,{error:ee,value:e.target.value}))}),[F,Z,ee]),ce=r.useCallback((e=>{V&&V(e,Z,{error:ee,value:e.target.value})}),[V,Z,ee]),de=r.useCallback((e=>{"Escape"===e.key&&(re(!1),e.preventDefault(),e.stopPropagation()),null!=W&&W.onKeyDown&&W.onKeyDown(e)}),[re,W]),pe=r.useCallback((e=>{let t=null,a=null;if(e.target.value){const r=p.parseDateString(e.target.value);r?Q&&!b.isWithinLowerBound(r,Q)?a="OUTSIDE_LOWER_BOUND":Y&&!b.isWithinUpperBound(r,Y)?a="OUTSIDE_UPPER_BOUND":re(!1):a="WRONG_FORMAT",t=r||null}te(a),$(t),U&&U(e,t,{error:a,value:e.target.value})}),[U,te,$,re,Q,Y]),be=r.useCallback((e=>{n.flushSync((()=>{re(!ae)}));const t=ne.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>a&&a.focus())),null!=W&&W.onClick&&W.onClick(e)}),[re,ae,W,ne]),fe=r.useCallback((({date:e})=>{if(re(!1),$(e),ue.current){const t=ue.current;t.value=p.formatInput(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),U&&U(a,e,{error:null,value:t.value})}}),[re,$,U]),ve=r.useCallback((e=>{e.preventDefault(),re(!1),oe.current&&oe.current.focus()}),[re]);return e.jsx(u.InputGroup,{id:h,className:t.clsx("jkl-datepicker",j,{"jkl-datepicker--open":ae}),...z,ref:le,label:m,labelProps:g,density:O,helpLabel:w,errorLabel:P,supportLabelProps:M,tooltip:H,render:t=>e.jsx(i.BaseTextInput,{ref:se,"data-testid":"jkl-datepicker__input","data-testautoid":k,className:"jkl-datepicker__input",name:S,defaultValue:D,density:O,value:C,type:"text",placeholder:N,width:R,onFocus:ie,onBlur:ce,onChange:pe,actionButton:e.jsxs(s.Popover,{positionReference:ue,open:ae,onOpenChange:()=>re(!ae),offset:8,children:[e.jsx(s.Popover.Trigger,{...W,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ae?G:A,tabIndex:0,onClick:be,onKeyDown:de,asChild:!0,children:e.jsx(o.IconButton,{children:e.jsx(l.CalendarIcon,{})})}),e.jsx(s.Popover.Content,{initialFocus:-1,padding:24,children:e.jsx(c.Calendar,{ref:ne,density:O,date:Z,minDate:Q,maxDate:Y,days:B,months:T,monthLabel:_,yearLabel:E,yearsToShow:L,onDateSelected:fe,onTabOutside:ve})})]}),...t})})}));f.displayName="DatePicker",exports.DatePicker=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),a=require("date-fns"),r=require("react"),n=require("react-dom"),l=require("../icon/icons/CalendarIcon.cjs"),o=require("../icon-button/IconButton.cjs"),u=require("../input-group/InputGroup.cjs"),s=require("../popover/Popover.cjs"),i=require("../text-input/BaseTextInput.cjs"),c=require("./internal/Calendar.cjs"),d=require("./internal/utils.cjs"),p=require("./utils.cjs"),b=require("./validation.cjs"),f=r.forwardRef(((f,v)=>{const{"data-testautoid":k,id:h,className:j="",label:m="Velg dato",labelProps:g,defaultValue:D,defaultShow:y=!1,value:C,disableBeforeDate:x,disableAfterDate:q,yearsToShow:L,name:P,helpLabel:S,errorLabel:w,invalid:I,density:O,days:B,months:T,monthLabel:_,yearLabel:E,placeholder:N="dd.mm.åååå",width:R="11.25rem",onChange:U,onBlur:V,onFocus:F,onKeyDown:K,action:W,showCalendarLabel:A="Åpne kalender",hideCalendarLabel:G="Lukk kalender",supportLabelProps:M,tooltip:H,textInputProps:z,...J}=f;"production"!==process.env.NODE_ENV&&C&&D&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const Q=p.parseDateString(x),X=Q?a.startOfDay(Q):void 0,Y=p.parseDateString(q),Z=Y?a.startOfDay(Y):void 0,[$,ee]=r.useState(d.getInitialDate(C,D,X,Z)),[te,ae]=r.useState(null),[re,ne]=r.useState(y),le=r.useRef(null),oe=r.useRef(null),ue=r.useRef(null),se=r.useRef(null),ie=r.useCallback((e=>{se.current=e,v&&("function"==typeof v?v(e):v.current=e)}),[se,v]),ce=r.useCallback((e=>{F&&oe.current&&(oe.current.contains(e.relatedTarget)||F(e,$,{error:te,value:e.target.value}))}),[F,$,te]),de=r.useCallback((e=>{V&&V(e,$,{error:te,value:e.target.value})}),[V,$,te]),pe=r.useCallback((e=>{"Escape"===e.key&&(ne(!1),e.preventDefault(),e.stopPropagation()),null!=W&&W.onKeyDown&&W.onKeyDown(e)}),[ne,W]),be=r.useCallback((e=>{let t=null,a=null;if(e.target.value){const r=p.parseDateString(e.target.value);r?X&&!b.isWithinLowerBound(r,X)?a="OUTSIDE_LOWER_BOUND":Z&&!b.isWithinUpperBound(r,Z)?a="OUTSIDE_UPPER_BOUND":ne(!1):a="WRONG_FORMAT",t=r||null}ae(a),ee(t),U&&U(e,t,{error:a,value:e.target.value})}),[U,ae,ee,ne,X,Z]),fe=r.useCallback((e=>{n.flushSync((()=>{ne(!re)}));const t=le.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>a&&a.focus())),null!=W&&W.onClick&&W.onClick(e)}),[ne,re,W,le]),ve=r.useCallback((({date:e})=>{if(ne(!1),ee(e),se.current){const t=se.current;t.value=p.formatInput(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),U&&U(a,e,{error:null,value:t.value})}}),[ne,ee,U]),ke=r.useCallback((e=>{e.preventDefault(),ne(!1),ue.current&&ue.current.focus()}),[ne]);return e.jsx(u.InputGroup,{id:h,className:t.clsx("jkl-datepicker",j,{"jkl-datepicker--open":re}),...J,ref:oe,label:m,labelProps:g,density:O,helpLabel:S,errorLabel:w,supportLabelProps:M,tooltip:H,render:t=>e.jsx(i.BaseTextInput,{ref:ie,"data-testid":"jkl-datepicker__input","data-testautoid":k,className:"jkl-datepicker__input",name:P,defaultValue:D,density:O,value:C,type:"text",placeholder:N,width:R,onFocus:ce,onBlur:de,onChange:be,actionButton:e.jsxs(s.Popover,{positionReference:se,open:re,onOpenChange:()=>ne(!re),offset:8,children:[e.jsx(s.Popover.Trigger,{...W,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:re?G:A,tabIndex:0,onClick:fe,onKeyDown:pe,asChild:!0,children:e.jsx(o.IconButton,{children:e.jsx(l.CalendarIcon,{})})}),e.jsx(s.Popover.Content,{initialFocus:-1,padding:24,children:e.jsx(c.Calendar,{ref:le,density:O,date:$,minDate:X,maxDate:Z,days:B,months:T,monthLabel:_,yearLabel:E,yearsToShow:L,onDateSelected:ve,onTabOutside:ke})})]}),...z,...t})})}));f.displayName="DatePicker",exports.DatePicker=f;
 //# sourceMappingURL=DatePicker.cjs.map

package/build/cjs/components/datepicker/DatePicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n (props, forwardedInputRef) => {\n const {\n \"data-testautoid\": testAutoId,\n id,\n className = \"\",\n label = \"Velg dato\",\n labelProps,\n defaultValue,\n defaultShow = false,\n value,\n disableBeforeDate: disableBefore,\n disableAfterDate: disableAfter,\n yearsToShow,\n name,\n helpLabel,\n errorLabel,\n invalid,\n density,\n days,\n months,\n monthLabel,\n yearLabel,\n placeholder = \"dd.mm.åååå\",\n width = \"11.25rem\",\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n action,\n showCalendarLabel = \"Åpne kalender\",\n hideCalendarLabel = \"Lukk kalender\",\n supportLabelProps,\n tooltip,\n ...rest\n } = props;\n\n if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n console.warn(\n \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n );\n }\n /// Input state\n\n const disableBeforeDate = parseDateString(disableBefore);\n const minDate = disableBeforeDate\n ? startOfDay(disableBeforeDate)\n : undefined;\n const disableAfterDate = parseDateString(disableAfter);\n const maxDate = disableAfterDate\n ? startOfDay(disableAfterDate)\n : undefined;\n\n const [date, setDate] = useState(\n getInitialDate(value, defaultValue, minDate, maxDate),\n );\n const [error, setError] = useState<DateValidationError \| null>(null);\n\n /// Calendar state\n\n const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const datepickerRef = useRef<HTMLDivElement>(null);\n\n /// Input events\n\n const iconButtonRef = useRef<HTMLButtonElement \| null>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n const unifiedInputRef = useCallback(\n (instance: HTMLInputElement \| null) => {\n inputRef.current = instance;\n if (forwardedInputRef) {\n if (typeof forwardedInputRef === \"function\") {\n forwardedInputRef(instance);\n } else {\n forwardedInputRef.current = instance;\n }\n }\n },\n [inputRef, forwardedInputRef],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (!onFocus \|\| !datepickerRef.current) {\n return;\n }\n\n const nextFocusIsInside = datepickerRef.current.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInside) {\n onFocus(e, date, { error, value: e.target.value });\n }\n },\n [onFocus, date, error],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e, date, { error, value: e.target.value });\n }\n },\n [onBlur, date, error],\n );\n\n const handleKeyDownAction = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Escape\") {\n setShowCalendar(false);\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (action?.onKeyDown) {\n action.onKeyDown(e);\n }\n },\n [setShowCalendar, action],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n let nextDate: Date \| null = null;\n let nextError: DateValidationError \| null = null;\n\n if (e.target.value) {\n const val = parseDateString(e.target.value);\n if (!val) {\n nextError = \"WRONG_FORMAT\";\n } else if (minDate && !isWithinLowerBound(val, minDate)) {\n nextError = \"OUTSIDE_LOWER_BOUND\";\n } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n nextError = \"OUTSIDE_UPPER_BOUND\";\n } else {\n setShowCalendar(false);\n }\n nextDate = val \|\| null;\n }\n\n setError(nextError);\n setDate(nextDate);\n\n if (onChange) {\n onChange(e, nextDate, {\n error: nextError,\n value: e.target.value,\n });\n }\n },\n [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n );\n\n /// Calendar events\n\n const clickCalendar = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n flushSync(() => {\n setShowCalendar(!showCalendar);\n });\n\n const calendarEl = calendarRef.current;\n const button =\n calendarEl &&\n (calendarEl.querySelector(\n '[aria-pressed=\"true\"]',\n ) as HTMLButtonElement);\n // Make sure the popover-modal is correctly positioned before focusing a button\n // so we avoid accidentally scrolling to the top of the page\n window.requestAnimationFrame(() => button && button.focus());\n\n if (action?.onClick) {\n action.onClick(e);\n }\n },\n [setShowCalendar, showCalendar, action, calendarRef],\n );\n\n const handleClickCalendarDay = useCallback(\n ({ date }: DateInfo) => {\n setShowCalendar(false);\n setDate(date);\n\n if (inputRef.current) {\n const node = inputRef.current;\n\n node.value = formatInput(date);\n\n // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n const event = document.createEvent(\"HTMLEvents\");\n event.initEvent(\"input\", true, false);\n node.dispatchEvent(event);\n\n node.focus();\n\n if (onChange) {\n // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n // så kan det hende du må utvide denne for å dekke behovet ditt.\n onChange(\n event as unknown as ChangeEvent<HTMLInputElement>,\n date,\n {\n error: null,\n value: node.value,\n },\n );\n }\n }\n },\n [setShowCalendar, setDate, onChange],\n );\n\n const handleTabOutsideCalendar = useCallback(\n (e: KeyboardEvent) => {\n e.preventDefault();\n setShowCalendar(false);\n iconButtonRef.current && iconButtonRef.current.focus();\n },\n [setShowCalendar],\n );\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-datepicker\", className, {\n \"jkl-datepicker--open\": showCalendar,\n })}\n {...rest}\n ref={datepickerRef}\n label={label}\n labelProps={labelProps}\n density={density}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n render={(inputProps) => (\n <BaseTextInput\n ref={unifiedInputRef}\n data-testid=\"jkl-datepicker__input\"\n data-testautoid={testAutoId}\n className=\"jkl-datepicker__input\"\n name={name}\n defaultValue={defaultValue}\n density={density}\n value={value}\n type=\"text\"\n placeholder={placeholder}\n width={width}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n actionButton={\n <Popover\n positionReference={inputRef}\n open={showCalendar}\n onOpenChange={() =>\n setShowCalendar(!showCalendar)\n }\n offset={8}\n >\n <Popover.Trigger\n {...action}\n data-testid=\"jkl-datepicker__trigger\"\n className=\"jkl-text-input-action-button\"\n title={\n showCalendar\n ? hideCalendarLabel\n : showCalendarLabel\n }\n tabIndex={0}\n onClick={clickCalendar}\n onKeyDown={handleKeyDownAction}\n asChild\n >\n <IconButton>\n <CalendarIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Content initialFocus={-1} padding={24}>\n <Calendar\n ref={calendarRef}\n density={density}\n date={date}\n minDate={minDate}\n maxDate={maxDate}\n days={days}\n months={months}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n yearsToShow={yearsToShow}\n onDateSelected={handleClickCalendarDay}\n onTabOutside={handleTabOutsideCalendar}\n />\n </Popover.Content>\n </Popover>\n }\n {...inputProps}\n />\n )}\n />\n );\n },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n (props, forwardedInputRef) => {\n const {\n \"data-testautoid\": testAutoId,\n id,\n className = \"\",\n label = \"Velg dato\",\n labelProps,\n defaultValue,\n defaultShow = false,\n value,\n disableBeforeDate: disableBefore,\n disableAfterDate: disableAfter,\n yearsToShow,\n name,\n helpLabel,\n errorLabel,\n invalid,\n density,\n days,\n months,\n monthLabel,\n yearLabel,\n placeholder = \"dd.mm.åååå\",\n width = \"11.25rem\",\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n action,\n showCalendarLabel = \"Åpne kalender\",\n hideCalendarLabel = \"Lukk kalender\",\n supportLabelProps,\n tooltip,\n textInputProps,\n ...rest\n } = props;\n\n if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n console.warn(\n \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n );\n }\n /// Input state\n\n const disableBeforeDate = parseDateString(disableBefore);\n const minDate = disableBeforeDate\n ? startOfDay(disableBeforeDate)\n : undefined;\n const disableAfterDate = parseDateString(disableAfter);\n const maxDate = disableAfterDate\n ? startOfDay(disableAfterDate)\n : undefined;\n\n const [date, setDate] = useState(\n getInitialDate(value, defaultValue, minDate, maxDate),\n );\n const [error, setError] = useState<DateValidationError \| null>(null);\n\n /// Calendar state\n\n const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const datepickerRef = useRef<HTMLDivElement>(null);\n\n /// Input events\n\n const iconButtonRef = useRef<HTMLButtonElement \| null>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n const unifiedInputRef = useCallback(\n (instance: HTMLInputElement \| null) => {\n inputRef.current = instance;\n if (forwardedInputRef) {\n if (typeof forwardedInputRef === \"function\") {\n forwardedInputRef(instance);\n } else {\n forwardedInputRef.current = instance;\n }\n }\n },\n [inputRef, forwardedInputRef],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (!onFocus \|\| !datepickerRef.current) {\n return;\n }\n\n const nextFocusIsInside = datepickerRef.current.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInside) {\n onFocus(e, date, { error, value: e.target.value });\n }\n },\n [onFocus, date, error],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e, date, { error, value: e.target.value });\n }\n },\n [onBlur, date, error],\n );\n\n const handleKeyDownAction = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Escape\") {\n setShowCalendar(false);\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (action?.onKeyDown) {\n action.onKeyDown(e);\n }\n },\n [setShowCalendar, action],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n let nextDate: Date \| null = null;\n let nextError: DateValidationError \| null = null;\n\n if (e.target.value) {\n const val = parseDateString(e.target.value);\n if (!val) {\n nextError = \"WRONG_FORMAT\";\n } else if (minDate && !isWithinLowerBound(val, minDate)) {\n nextError = \"OUTSIDE_LOWER_BOUND\";\n } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n nextError = \"OUTSIDE_UPPER_BOUND\";\n } else {\n setShowCalendar(false);\n }\n nextDate = val \|\| null;\n }\n\n setError(nextError);\n setDate(nextDate);\n\n if (onChange) {\n onChange(e, nextDate, {\n error: nextError,\n value: e.target.value,\n });\n }\n },\n [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n );\n\n /// Calendar events\n\n const clickCalendar = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n flushSync(() => {\n setShowCalendar(!showCalendar);\n });\n\n const calendarEl = calendarRef.current;\n const button =\n calendarEl &&\n (calendarEl.querySelector(\n '[aria-pressed=\"true\"]',\n ) as HTMLButtonElement);\n // Make sure the popover-modal is correctly positioned before focusing a button\n // so we avoid accidentally scrolling to the top of the page\n window.requestAnimationFrame(() => button && button.focus());\n\n if (action?.onClick) {\n action.onClick(e);\n }\n },\n [setShowCalendar, showCalendar, action, calendarRef],\n );\n\n const handleClickCalendarDay = useCallback(\n ({ date }: DateInfo) => {\n setShowCalendar(false);\n setDate(date);\n\n if (inputRef.current) {\n const node = inputRef.current;\n\n node.value = formatInput(date);\n\n // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n const event = document.createEvent(\"HTMLEvents\");\n event.initEvent(\"input\", true, false);\n node.dispatchEvent(event);\n\n node.focus();\n\n if (onChange) {\n // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n // så kan det hende du må utvide denne for å dekke behovet ditt.\n onChange(\n event as unknown as ChangeEvent<HTMLInputElement>,\n date,\n {\n error: null,\n value: node.value,\n },\n );\n }\n }\n },\n [setShowCalendar, setDate, onChange],\n );\n\n const handleTabOutsideCalendar = useCallback(\n (e: KeyboardEvent) => {\n e.preventDefault();\n setShowCalendar(false);\n iconButtonRef.current && iconButtonRef.current.focus();\n },\n [setShowCalendar],\n );\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-datepicker\", className, {\n \"jkl-datepicker--open\": showCalendar,\n })}\n {...rest}\n ref={datepickerRef}\n label={label}\n labelProps={labelProps}\n density={density}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n render={(inputProps) => (\n <BaseTextInput\n ref={unifiedInputRef}\n data-testid=\"jkl-datepicker__input\"\n data-testautoid={testAutoId}\n className=\"jkl-datepicker__input\"\n name={name}\n defaultValue={defaultValue}\n density={density}\n value={value}\n type=\"text\"\n placeholder={placeholder}\n width={width}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n actionButton={\n <Popover\n positionReference={inputRef}\n open={showCalendar}\n onOpenChange={() =>\n setShowCalendar(!showCalendar)\n }\n offset={8}\n >\n <Popover.Trigger\n {...action}\n data-testid=\"jkl-datepicker__trigger\"\n className=\"jkl-text-input-action-button\"\n title={\n showCalendar\n ? hideCalendarLabel\n : showCalendarLabel\n }\n tabIndex={0}\n onClick={clickCalendar}\n onKeyDown={handleKeyDownAction}\n asChild\n >\n <IconButton>\n <CalendarIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Content initialFocus={-1} padding={24}>\n <Calendar\n ref={calendarRef}\n density={density}\n date={date}\n minDate={minDate}\n maxDate={maxDate}\n days={days}\n months={months}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n yearsToShow={yearsToShow}\n onDateSelected={handleClickCalendarDay}\n onTabOutside={handleTabOutsideCalendar}\n />\n </Popover.Content>\n </Popover>\n }\n {...textInputProps}\n {...inputProps}\n />\n )}\n />\n );\n },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
+import { ButtonHTMLAttributes, ChangeEvent, ComponentProps, FocusEvent, KeyboardEvent } from 'react';
 import { DataTestAutoId, Density } from '../../core/types.cjs';
 import { InputGroupProps } from '../input-group/InputGroup.cjs';
 import { LabelProps } from '../input-group/Label.cjs';
@@ -265,6 +265,10 @@ export interface DatePickerProps extends Omit<InputGroupProps, "label" | "childr
     action?: DatePickerAction;
     showCalendarLabel?: string;
     hideCalendarLabel?: string;
+    /**
+     * Props som sendes direkte til komponentens TextInput
+     */
+    textInputProps?: Omit<ComponentProps<"input">, "type" | "children" | "className" | "name" | "defaultValue" | "value" | "placeholder" | "width" | "onFocus" | "onBlur" | "onChange">;
 }
 export interface DatePickerAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
 }

package/build/es/components/datepicker/DatePicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{startOfDay as r}from"date-fns";import{forwardRef as n,useState as o,useRef as l,useCallback as s}from"react";import{flushSync as i}from"react-dom";import{CalendarIcon as u}from"../icon/icons/CalendarIcon.js";import{IconButton as d}from"../icon-button/IconButton.js";import{InputGroup as c}from"../input-group/InputGroup.js";import{Popover as p}from"../popover/Popover.js";import{BaseTextInput as m}from"../text-input/BaseTextInput.js";import{Calendar as f}from"./internal/Calendar.js";import{getInitialDate as v}from"./internal/utils.js";import{parseDateString as h,formatInput as b}from"./utils.js";import{isWithinLowerBound as k,isWithinUpperBound as D}from"./validation.js";const g=n(((n,g)=>{const{"data-testautoid":y,id:j,className:L="",label:w="Velg dato",labelProps:C,defaultValue:I,defaultShow:x=!1,value:B,disableBeforeDate:P,disableAfterDate:_,yearsToShow:E,name:O,helpLabel:T,errorLabel:N,invalid:S,density:R,days:U,months:V,monthLabel:F,yearLabel:K,placeholder:W="dd.mm.åååå",width:A="11.25rem",onChange:G,onBlur:q,onFocus:H,onKeyDown:M,action:z,showCalendarLabel:J="Åpne kalender",hideCalendarLabel:Q="Lukk kalender",supportLabelProps:X,tooltip:Y,...Z}=n;"production"!==process.env.NODE_ENV&&B&&I&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const $=h(P),ee=$?r($):void 0,te=h(_),ae=te?r(te):void 0,[re,ne]=o(v(B,I,ee,ae)),[oe,le]=o(null),[se,ie]=o(x),ue=l(null),de=l(null),ce=l(null),pe=l(null),me=s((e=>{pe.current=e,g&&("function"==typeof g?g(e):g.current=e)}),[pe,g]),fe=s((e=>{H&&de.current&&(de.current.contains(e.relatedTarget)||H(e,re,{error:oe,value:e.target.value}))}),[H,re,oe]),ve=s((e=>{q&&q(e,re,{error:oe,value:e.target.value})}),[q,re,oe]),he=s((e=>{"Escape"===e.key&&(ie(!1),e.preventDefault(),e.stopPropagation()),null!=z&&z.onKeyDown&&z.onKeyDown(e)}),[ie,z]),be=s((e=>{let t=null,a=null;if(e.target.value){const r=h(e.target.value);r?ee&&!k(r,ee)?a="OUTSIDE_LOWER_BOUND":ae&&!D(r,ae)?a="OUTSIDE_UPPER_BOUND":ie(!1):a="WRONG_FORMAT",t=r||null}le(a),ne(t),G&&G(e,t,{error:a,value:e.target.value})}),[G,le,ne,ie,ee,ae]),ke=s((e=>{i((()=>{ie(!se)}));const t=ue.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>a&&a.focus())),null!=z&&z.onClick&&z.onClick(e)}),[ie,se,z,ue]),De=s((({date:e})=>{if(ie(!1),ne(e),pe.current){const t=pe.current;t.value=b(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),G&&G(a,e,{error:null,value:t.value})}}),[ie,ne,G]),ge=s((e=>{e.preventDefault(),ie(!1),ce.current&&ce.current.focus()}),[ie]);return e(c,{id:j,className:a("jkl-datepicker",L,{"jkl-datepicker--open":se}),...Z,ref:de,label:w,labelProps:C,density:R,helpLabel:T,errorLabel:N,supportLabelProps:X,tooltip:Y,render:a=>e(m,{ref:me,"data-testid":"jkl-datepicker__input","data-testautoid":y,className:"jkl-datepicker__input",name:O,defaultValue:I,density:R,value:B,type:"text",placeholder:W,width:A,onFocus:fe,onBlur:ve,onChange:be,actionButton:t(p,{positionReference:pe,open:se,onOpenChange:()=>ie(!se),offset:8,children:[e(p.Trigger,{...z,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:se?Q:J,tabIndex:0,onClick:ke,onKeyDown:he,asChild:!0,children:e(d,{children:e(u,{})})}),e(p.Content,{initialFocus:-1,padding:24,children:e(f,{ref:ue,density:R,date:re,minDate:ee,maxDate:ae,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:De,onTabOutside:ge})})]}),...a})})}));g.displayName="DatePicker";export{g as DatePicker};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{startOfDay as r}from"date-fns";import{forwardRef as n,useState as o,useRef as l,useCallback as s}from"react";import{flushSync as i}from"react-dom";import{CalendarIcon as u}from"../icon/icons/CalendarIcon.js";import{IconButton as d}from"../icon-button/IconButton.js";import{InputGroup as p}from"../input-group/InputGroup.js";import{Popover as c}from"../popover/Popover.js";import{BaseTextInput as m}from"../text-input/BaseTextInput.js";import{Calendar as f}from"./internal/Calendar.js";import{getInitialDate as v}from"./internal/utils.js";import{parseDateString as h,formatInput as b}from"./utils.js";import{isWithinLowerBound as k,isWithinUpperBound as D}from"./validation.js";const g=n(((n,g)=>{const{"data-testautoid":y,id:j,className:L="",label:w="Velg dato",labelProps:C,defaultValue:I,defaultShow:x=!1,value:P,disableBeforeDate:B,disableAfterDate:_,yearsToShow:E,name:O,helpLabel:T,errorLabel:N,invalid:S,density:R,days:U,months:V,monthLabel:F,yearLabel:K,placeholder:W="dd.mm.åååå",width:A="11.25rem",onChange:G,onBlur:q,onFocus:H,onKeyDown:M,action:z,showCalendarLabel:J="Åpne kalender",hideCalendarLabel:Q="Lukk kalender",supportLabelProps:X,tooltip:Y,textInputProps:Z,...$}=n;"production"!==process.env.NODE_ENV&&P&&I&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const ee=h(B),te=ee?r(ee):void 0,ae=h(_),re=ae?r(ae):void 0,[ne,oe]=o(v(P,I,te,re)),[le,se]=o(null),[ie,ue]=o(x),de=l(null),pe=l(null),ce=l(null),me=l(null),fe=s((e=>{me.current=e,g&&("function"==typeof g?g(e):g.current=e)}),[me,g]),ve=s((e=>{H&&pe.current&&(pe.current.contains(e.relatedTarget)||H(e,ne,{error:le,value:e.target.value}))}),[H,ne,le]),he=s((e=>{q&&q(e,ne,{error:le,value:e.target.value})}),[q,ne,le]),be=s((e=>{"Escape"===e.key&&(ue(!1),e.preventDefault(),e.stopPropagation()),null!=z&&z.onKeyDown&&z.onKeyDown(e)}),[ue,z]),ke=s((e=>{let t=null,a=null;if(e.target.value){const r=h(e.target.value);r?te&&!k(r,te)?a="OUTSIDE_LOWER_BOUND":re&&!D(r,re)?a="OUTSIDE_UPPER_BOUND":ue(!1):a="WRONG_FORMAT",t=r||null}se(a),oe(t),G&&G(e,t,{error:a,value:e.target.value})}),[G,se,oe,ue,te,re]),De=s((e=>{i((()=>{ue(!ie)}));const t=de.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>a&&a.focus())),null!=z&&z.onClick&&z.onClick(e)}),[ue,ie,z,de]),ge=s((({date:e})=>{if(ue(!1),oe(e),me.current){const t=me.current;t.value=b(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),G&&G(a,e,{error:null,value:t.value})}}),[ue,oe,G]),ye=s((e=>{e.preventDefault(),ue(!1),ce.current&&ce.current.focus()}),[ue]);return e(p,{id:j,className:a("jkl-datepicker",L,{"jkl-datepicker--open":ie}),...$,ref:pe,label:w,labelProps:C,density:R,helpLabel:T,errorLabel:N,supportLabelProps:X,tooltip:Y,render:a=>e(m,{ref:fe,"data-testid":"jkl-datepicker__input","data-testautoid":y,className:"jkl-datepicker__input",name:O,defaultValue:I,density:R,value:P,type:"text",placeholder:W,width:A,onFocus:ve,onBlur:he,onChange:ke,actionButton:t(c,{positionReference:me,open:ie,onOpenChange:()=>ue(!ie),offset:8,children:[e(c.Trigger,{...z,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ie?Q:J,tabIndex:0,onClick:De,onKeyDown:be,asChild:!0,children:e(d,{children:e(u,{})})}),e(c.Content,{initialFocus:-1,padding:24,children:e(f,{ref:de,density:R,date:ne,minDate:te,maxDate:re,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:ge,onTabOutside:ye})})]}),...Z,...a})})}));g.displayName="DatePicker";export{g as DatePicker};
 //# sourceMappingURL=DatePicker.js.map

package/build/es/components/datepicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n (props, forwardedInputRef) => {\n const {\n \"data-testautoid\": testAutoId,\n id,\n className = \"\",\n label = \"Velg dato\",\n labelProps,\n defaultValue,\n defaultShow = false,\n value,\n disableBeforeDate: disableBefore,\n disableAfterDate: disableAfter,\n yearsToShow,\n name,\n helpLabel,\n errorLabel,\n invalid,\n density,\n days,\n months,\n monthLabel,\n yearLabel,\n placeholder = \"dd.mm.åååå\",\n width = \"11.25rem\",\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n action,\n showCalendarLabel = \"Åpne kalender\",\n hideCalendarLabel = \"Lukk kalender\",\n supportLabelProps,\n tooltip,\n ...rest\n } = props;\n\n if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n console.warn(\n \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n );\n }\n /// Input state\n\n const disableBeforeDate = parseDateString(disableBefore);\n const minDate = disableBeforeDate\n ? startOfDay(disableBeforeDate)\n : undefined;\n const disableAfterDate = parseDateString(disableAfter);\n const maxDate = disableAfterDate\n ? startOfDay(disableAfterDate)\n : undefined;\n\n const [date, setDate] = useState(\n getInitialDate(value, defaultValue, minDate, maxDate),\n );\n const [error, setError] = useState<DateValidationError \| null>(null);\n\n /// Calendar state\n\n const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const datepickerRef = useRef<HTMLDivElement>(null);\n\n /// Input events\n\n const iconButtonRef = useRef<HTMLButtonElement \| null>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n const unifiedInputRef = useCallback(\n (instance: HTMLInputElement \| null) => {\n inputRef.current = instance;\n if (forwardedInputRef) {\n if (typeof forwardedInputRef === \"function\") {\n forwardedInputRef(instance);\n } else {\n forwardedInputRef.current = instance;\n }\n }\n },\n [inputRef, forwardedInputRef],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (!onFocus \|\| !datepickerRef.current) {\n return;\n }\n\n const nextFocusIsInside = datepickerRef.current.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInside) {\n onFocus(e, date, { error, value: e.target.value });\n }\n },\n [onFocus, date, error],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e, date, { error, value: e.target.value });\n }\n },\n [onBlur, date, error],\n );\n\n const handleKeyDownAction = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Escape\") {\n setShowCalendar(false);\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (action?.onKeyDown) {\n action.onKeyDown(e);\n }\n },\n [setShowCalendar, action],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n let nextDate: Date \| null = null;\n let nextError: DateValidationError \| null = null;\n\n if (e.target.value) {\n const val = parseDateString(e.target.value);\n if (!val) {\n nextError = \"WRONG_FORMAT\";\n } else if (minDate && !isWithinLowerBound(val, minDate)) {\n nextError = \"OUTSIDE_LOWER_BOUND\";\n } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n nextError = \"OUTSIDE_UPPER_BOUND\";\n } else {\n setShowCalendar(false);\n }\n nextDate = val \|\| null;\n }\n\n setError(nextError);\n setDate(nextDate);\n\n if (onChange) {\n onChange(e, nextDate, {\n error: nextError,\n value: e.target.value,\n });\n }\n },\n [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n );\n\n /// Calendar events\n\n const clickCalendar = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n flushSync(() => {\n setShowCalendar(!showCalendar);\n });\n\n const calendarEl = calendarRef.current;\n const button =\n calendarEl &&\n (calendarEl.querySelector(\n '[aria-pressed=\"true\"]',\n ) as HTMLButtonElement);\n // Make sure the popover-modal is correctly positioned before focusing a button\n // so we avoid accidentally scrolling to the top of the page\n window.requestAnimationFrame(() => button && button.focus());\n\n if (action?.onClick) {\n action.onClick(e);\n }\n },\n [setShowCalendar, showCalendar, action, calendarRef],\n );\n\n const handleClickCalendarDay = useCallback(\n ({ date }: DateInfo) => {\n setShowCalendar(false);\n setDate(date);\n\n if (inputRef.current) {\n const node = inputRef.current;\n\n node.value = formatInput(date);\n\n // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n const event = document.createEvent(\"HTMLEvents\");\n event.initEvent(\"input\", true, false);\n node.dispatchEvent(event);\n\n node.focus();\n\n if (onChange) {\n // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n // så kan det hende du må utvide denne for å dekke behovet ditt.\n onChange(\n event as unknown as ChangeEvent<HTMLInputElement>,\n date,\n {\n error: null,\n value: node.value,\n },\n );\n }\n }\n },\n [setShowCalendar, setDate, onChange],\n );\n\n const handleTabOutsideCalendar = useCallback(\n (e: KeyboardEvent) => {\n e.preventDefault();\n setShowCalendar(false);\n iconButtonRef.current && iconButtonRef.current.focus();\n },\n [setShowCalendar],\n );\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-datepicker\", className, {\n \"jkl-datepicker--open\": showCalendar,\n })}\n {...rest}\n ref={datepickerRef}\n label={label}\n labelProps={labelProps}\n density={density}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n render={(inputProps) => (\n <BaseTextInput\n ref={unifiedInputRef}\n data-testid=\"jkl-datepicker__input\"\n data-testautoid={testAutoId}\n className=\"jkl-datepicker__input\"\n name={name}\n defaultValue={defaultValue}\n density={density}\n value={value}\n type=\"text\"\n placeholder={placeholder}\n width={width}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n actionButton={\n <Popover\n positionReference={inputRef}\n open={showCalendar}\n onOpenChange={() =>\n setShowCalendar(!showCalendar)\n }\n offset={8}\n >\n <Popover.Trigger\n {...action}\n data-testid=\"jkl-datepicker__trigger\"\n className=\"jkl-text-input-action-button\"\n title={\n showCalendar\n ? hideCalendarLabel\n : showCalendarLabel\n }\n tabIndex={0}\n onClick={clickCalendar}\n onKeyDown={handleKeyDownAction}\n asChild\n >\n <IconButton>\n <CalendarIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Content initialFocus={-1} padding={24}>\n <Calendar\n ref={calendarRef}\n density={density}\n date={date}\n minDate={minDate}\n maxDate={maxDate}\n days={days}\n months={months}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n yearsToShow={yearsToShow}\n onDateSelected={handleClickCalendarDay}\n onTabOutside={handleTabOutsideCalendar}\n />\n </Popover.Content>\n </Popover>\n }\n {...inputProps}\n />\n )}\n />\n );\n },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n (props, forwardedInputRef) => {\n const {\n \"data-testautoid\": testAutoId,\n id,\n className = \"\",\n label = \"Velg dato\",\n labelProps,\n defaultValue,\n defaultShow = false,\n value,\n disableBeforeDate: disableBefore,\n disableAfterDate: disableAfter,\n yearsToShow,\n name,\n helpLabel,\n errorLabel,\n invalid,\n density,\n days,\n months,\n monthLabel,\n yearLabel,\n placeholder = \"dd.mm.åååå\",\n width = \"11.25rem\",\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n action,\n showCalendarLabel = \"Åpne kalender\",\n hideCalendarLabel = \"Lukk kalender\",\n supportLabelProps,\n tooltip,\n textInputProps,\n ...rest\n } = props;\n\n if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n console.warn(\n \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n );\n }\n /// Input state\n\n const disableBeforeDate = parseDateString(disableBefore);\n const minDate = disableBeforeDate\n ? startOfDay(disableBeforeDate)\n : undefined;\n const disableAfterDate = parseDateString(disableAfter);\n const maxDate = disableAfterDate\n ? startOfDay(disableAfterDate)\n : undefined;\n\n const [date, setDate] = useState(\n getInitialDate(value, defaultValue, minDate, maxDate),\n );\n const [error, setError] = useState<DateValidationError \| null>(null);\n\n /// Calendar state\n\n const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const datepickerRef = useRef<HTMLDivElement>(null);\n\n /// Input events\n\n const iconButtonRef = useRef<HTMLButtonElement \| null>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n const unifiedInputRef = useCallback(\n (instance: HTMLInputElement \| null) => {\n inputRef.current = instance;\n if (forwardedInputRef) {\n if (typeof forwardedInputRef === \"function\") {\n forwardedInputRef(instance);\n } else {\n forwardedInputRef.current = instance;\n }\n }\n },\n [inputRef, forwardedInputRef],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (!onFocus \|\| !datepickerRef.current) {\n return;\n }\n\n const nextFocusIsInside = datepickerRef.current.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInside) {\n onFocus(e, date, { error, value: e.target.value });\n }\n },\n [onFocus, date, error],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e, date, { error, value: e.target.value });\n }\n },\n [onBlur, date, error],\n );\n\n const handleKeyDownAction = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Escape\") {\n setShowCalendar(false);\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (action?.onKeyDown) {\n action.onKeyDown(e);\n }\n },\n [setShowCalendar, action],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n let nextDate: Date \| null = null;\n let nextError: DateValidationError \| null = null;\n\n if (e.target.value) {\n const val = parseDateString(e.target.value);\n if (!val) {\n nextError = \"WRONG_FORMAT\";\n } else if (minDate && !isWithinLowerBound(val, minDate)) {\n nextError = \"OUTSIDE_LOWER_BOUND\";\n } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n nextError = \"OUTSIDE_UPPER_BOUND\";\n } else {\n setShowCalendar(false);\n }\n nextDate = val \|\| null;\n }\n\n setError(nextError);\n setDate(nextDate);\n\n if (onChange) {\n onChange(e, nextDate, {\n error: nextError,\n value: e.target.value,\n });\n }\n },\n [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n );\n\n /// Calendar events\n\n const clickCalendar = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n flushSync(() => {\n setShowCalendar(!showCalendar);\n });\n\n const calendarEl = calendarRef.current;\n const button =\n calendarEl &&\n (calendarEl.querySelector(\n '[aria-pressed=\"true\"]',\n ) as HTMLButtonElement);\n // Make sure the popover-modal is correctly positioned before focusing a button\n // so we avoid accidentally scrolling to the top of the page\n window.requestAnimationFrame(() => button && button.focus());\n\n if (action?.onClick) {\n action.onClick(e);\n }\n },\n [setShowCalendar, showCalendar, action, calendarRef],\n );\n\n const handleClickCalendarDay = useCallback(\n ({ date }: DateInfo) => {\n setShowCalendar(false);\n setDate(date);\n\n if (inputRef.current) {\n const node = inputRef.current;\n\n node.value = formatInput(date);\n\n // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n const event = document.createEvent(\"HTMLEvents\");\n event.initEvent(\"input\", true, false);\n node.dispatchEvent(event);\n\n node.focus();\n\n if (onChange) {\n // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n // så kan det hende du må utvide denne for å dekke behovet ditt.\n onChange(\n event as unknown as ChangeEvent<HTMLInputElement>,\n date,\n {\n error: null,\n value: node.value,\n },\n );\n }\n }\n },\n [setShowCalendar, setDate, onChange],\n );\n\n const handleTabOutsideCalendar = useCallback(\n (e: KeyboardEvent) => {\n e.preventDefault();\n setShowCalendar(false);\n iconButtonRef.current && iconButtonRef.current.focus();\n },\n [setShowCalendar],\n );\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-datepicker\", className, {\n \"jkl-datepicker--open\": showCalendar,\n })}\n {...rest}\n ref={datepickerRef}\n label={label}\n labelProps={labelProps}\n density={density}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n render={(inputProps) => (\n <BaseTextInput\n ref={unifiedInputRef}\n data-testid=\"jkl-datepicker__input\"\n data-testautoid={testAutoId}\n className=\"jkl-datepicker__input\"\n name={name}\n defaultValue={defaultValue}\n density={density}\n value={value}\n type=\"text\"\n placeholder={placeholder}\n width={width}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n actionButton={\n <Popover\n positionReference={inputRef}\n open={showCalendar}\n onOpenChange={() =>\n setShowCalendar(!showCalendar)\n }\n offset={8}\n >\n <Popover.Trigger\n {...action}\n data-testid=\"jkl-datepicker__trigger\"\n className=\"jkl-text-input-action-button\"\n title={\n showCalendar\n ? hideCalendarLabel\n : showCalendarLabel\n }\n tabIndex={0}\n onClick={clickCalendar}\n onKeyDown={handleKeyDownAction}\n asChild\n >\n <IconButton>\n <CalendarIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Content initialFocus={-1} padding={24}>\n <Calendar\n ref={calendarRef}\n density={density}\n date={date}\n minDate={minDate}\n maxDate={maxDate}\n days={days}\n months={months}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n yearsToShow={yearsToShow}\n onDateSelected={handleClickCalendarDay}\n onTabOutside={handleTabOutsideCalendar}\n />\n </Popover.Content>\n </Popover>\n }\n {...textInputProps}\n {...inputProps}\n />\n )}\n />\n );\n },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}

package/build/es/components/datepicker/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
+import { ButtonHTMLAttributes, ChangeEvent, ComponentProps, FocusEvent, KeyboardEvent } from 'react';
 import { DataTestAutoId, Density } from '../../core/types.js';
 import { InputGroupProps } from '../input-group/InputGroup.js';
 import { LabelProps } from '../input-group/Label.js';
@@ -265,6 +265,10 @@ export interface DatePickerProps extends Omit<InputGroupProps, "label" | "childr
     action?: DatePickerAction;
     showCalendarLabel?: string;
     hideCalendarLabel?: string;
+    /**
+     * Props som sendes direkte til komponentens TextInput
+     */
+    textInputProps?: Omit<ComponentProps<"input">, "type" | "children" | "className" | "name" | "defaultValue" | "value" | "placeholder" | "width" | "onFocus" | "onBlur" | "onChange">;
 }
 export interface DatePickerAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.36.4",
+    "version": "0.37.1",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -556,5 +556,5 @@
             "@babel/preset-react"
         ]
     },
-    "gitHead": "413a8b0b25e8c21eeda11d4fbe9bfe2a93edf900"
+    "gitHead": "d5c09e40c98ff1079995f552f14cc42c48bfb2e9"
 }

package/styles/components/accordion/accordion.css CHANGED Viewed

@@ -2,16 +2,15 @@
  * Do not edit directly
  * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
-.jkl-accordion {
-  width: 100%;
-}
-.jkl .jkl-accordion, .jkl .jkl-accordion[data-layout-density=comfortable], .jkl .jkl-accordion[data-density=comfortable], .jkl [data-layout-density=comfortable] .jkl-accordion, .jkl [data-density=comfortable] .jkl-accordion, .jkl[data-layout-density=comfortable] .jkl-accordion, .jkl[data-density=comfortable] .jkl-accordion {
-  --title-padding: var(--jkl-spacing-16) 3rem var(
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-accordion-title-padding: var(--jkl-spacing-16) 3rem var(
           --jkl-spacing-16
       ) var(--jkl-spacing-16);
-  --arrow-top: 1.25rem;
-  --arrow-right: var(--jkl-spacing-12);
-  --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
+  --jkl-accordion-arrow-top: 1.25rem;
+  --jkl-accordion-arrow-right: var(--jkl-spacing-12);
+  --jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
       var(--jkl-spacing-16);
   --title-font-size: var(--jkl-body-font-size);
   --title-line-height: var(--jkl-body-line-height);
@@ -21,22 +20,26 @@
   --content-font-weight: var(--jkl-body-font-weight);
 }
 @media (width >= 0) and (max-width: 679px) {
-  .jkl .jkl-accordion, .jkl .jkl-accordion[data-layout-density=comfortable], .jkl .jkl-accordion[data-density=comfortable], .jkl [data-layout-density=comfortable] .jkl-accordion, .jkl [data-density=comfortable] .jkl-accordion, .jkl[data-layout-density=comfortable] .jkl-accordion, .jkl[data-density=comfortable] .jkl-accordion {
-    --title-padding: var(--jkl-spacing-12) 2.75rem var(
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-accordion-title-padding: var(--jkl-spacing-12) 2.75rem var(
             --jkl-spacing-12
         ) var(--jkl-spacing-12);
-    --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12)
-        var(--jkl-spacing-16) var(--jkl-spacing-12);
-    --arrow-top: 1.4375rem;
+    --jkl-accordion-content-padding: var(--jkl-spacing-8)
+        var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
+    --jkl-accordion-arrow-top: 1.4375rem;
   }
 }
-.jkl .jkl-accordion[data-layout-density=compact], .jkl .jkl-accordion[data-density=compact], .jkl [data-layout-density=compact] .jkl-accordion, .jkl [data-density=compact] .jkl-accordion, .jkl[data-layout-density=compact] .jkl-accordion, .jkl[data-density=compact] .jkl-accordion {
-  --title-padding: var(--jkl-spacing-8) 2rem var(
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-accordion-title-padding: var(--jkl-spacing-8) 2rem var(
           --jkl-spacing-8
       ) var(--jkl-spacing-8);
-  --arrow-top: var(--jkl-spacing-8);
-  --arrow-right: var(--jkl-spacing-4);
-  --content-padding: var(--jkl-spacing-8);
+  --jkl-accordion-arrow-top: var(--jkl-spacing-8);
+  --jkl-accordion-arrow-right: var(--jkl-spacing-4);
+  --jkl-accordion-content-padding: var(--jkl-spacing-8);
   --title-font-size: var(--jkl-small-font-size);
   --title-line-height: var(--jkl-small-line-height);
   --title-font-weight: var(--jkl-small-font-weight);
@@ -45,6 +48,10 @@
   --content-font-weight: var(--jkl-small-font-weight);
 }
+.jkl-accordion {
+  width: 100%;
+}
 .jkl-accordion-item {
   --background: transparent;
   --text-color: var(--jkl-color-text-default);
@@ -84,7 +91,7 @@
   list-style: none;
   background-color: transparent;
   position: relative;
-  padding: var(--title-padding);
+  padding: var(--jkl-accordion-title-padding);
   text-align: left;
   width: 100%;
   box-sizing: border-box;
@@ -125,8 +132,8 @@
 .jkl-accordion-item__arrow {
   pointer-events: none;
   position: absolute;
-  right: var(--arrow-right);
-  top: var(--arrow-top);
+  right: var(--jkl-accordion-arrow-right);
+  top: var(--jkl-accordion-arrow-top);
   transition-timing-function: ease;
   transition-duration: 100ms;
   transition-property: translate;
@@ -151,7 +158,7 @@
   line-height: var(--content-line-height);
   font-weight: var(--content-font-weight);
   height: auto;
-  padding: var(--content-padding);
+  padding: var(--jkl-accordion-content-padding);
 }
 @media screen and (forced-colors: active) {
   .jkl-accordion-item:nth-child(n) {

package/styles/components/accordion/accordion.min.css CHANGED Viewed

@@ -1,7 +1,7 @@
-.jkl-accordion{width:100%}.jkl .jkl-accordion,.jkl .jkl-accordion[data-density=comfortable],.jkl .jkl-accordion[data-layout-density=comfortable],.jkl [data-density=comfortable] .jkl-accordion,.jkl [data-layout-density=comfortable] .jkl-accordion,.jkl[data-density=comfortable] .jkl-accordion,.jkl[data-layout-density=comfortable] .jkl-accordion{--title-padding:var(--jkl-spacing-16) 3rem var(
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-16) 3rem var(
           --jkl-spacing-16
-      ) var(--jkl-spacing-16);--arrow-top:1.25rem;--arrow-right:var(--jkl-spacing-12);--content-padding:var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);--title-font-size:var(--jkl-body-font-size);--title-line-height:var(--jkl-body-line-height);--title-font-weight:var(--jkl-body-font-weight);--content-font-size:var(--jkl-body-font-size);--content-line-height:var(--jkl-body-line-height);--content-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){.jkl .jkl-accordion,.jkl .jkl-accordion[data-density=comfortable],.jkl .jkl-accordion[data-layout-density=comfortable],.jkl [data-density=comfortable] .jkl-accordion,.jkl [data-layout-density=comfortable] .jkl-accordion,.jkl[data-density=comfortable] .jkl-accordion,.jkl[data-layout-density=comfortable] .jkl-accordion{--title-padding:var(--jkl-spacing-12) 2.75rem var(
+      ) var(--jkl-spacing-16);--jkl-accordion-arrow-top:1.25rem;--jkl-accordion-arrow-right:var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);--title-font-size:var(--jkl-body-font-size);--title-line-height:var(--jkl-body-line-height);--title-font-weight:var(--jkl-body-font-weight);--content-font-size:var(--jkl-body-font-size);--content-line-height:var(--jkl-body-line-height);--content-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-12) 2.75rem var(
             --jkl-spacing-12
-        ) var(--jkl-spacing-12);--content-padding:var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);--arrow-top:1.4375rem}}.jkl .jkl-accordion[data-density=compact],.jkl .jkl-accordion[data-layout-density=compact],.jkl [data-density=compact] .jkl-accordion,.jkl [data-layout-density=compact] .jkl-accordion,.jkl[data-density=compact] .jkl-accordion,.jkl[data-layout-density=compact] .jkl-accordion{--title-padding:var(--jkl-spacing-8) 2rem var(
+        ) var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);--jkl-accordion-arrow-top:1.4375rem}}[data-density=compact],[data-layout-density=compact]{--jkl-accordion-title-padding:var(--jkl-spacing-8) 2rem var(
           --jkl-spacing-8
-      ) var(--jkl-spacing-8);--arrow-top:var(--jkl-spacing-8);--arrow-right:var(--jkl-spacing-4);--content-padding:var(--jkl-spacing-8);--title-font-size:var(--jkl-small-font-size);--title-line-height:var(--jkl-small-line-height);--title-font-weight:var(--jkl-small-font-weight);--content-font-size:var(--jkl-small-font-size);--content-line-height:var(--jkl-small-line-height);--content-font-weight:var(--jkl-small-font-weight)}.jkl-accordion-item{--background:transparent;--text-color:var(--jkl-color-text-default);--title-text-color:var(--jkl-color-text-interactive);--border-color:var(--jkl-color-border-separator);background-color:var(--background);border-bottom:.0625rem solid var(--border-color);color:var(--text-color);transition-duration:.1s;transition-property:border-color;transition-timing-function:ease}.jkl-accordion-item:hover{--border-color:var(--jkl-color-border-separator-hover)}.jkl-accordion-item:hover:not(:first-child){border-top:.0625rem solid var(--border-color)}.jkl-accordion-item:has(+:hover),.jkl-accordion-item:has(+[open]){border-bottom:none}.jkl-accordion-item[open]{--background:var(--jkl-color-background-container-high);border-top:.0625rem solid var(--border-color)}.jkl-accordion-item[open] .jkl-accordion-item__title{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-accordion-item__title{background-color:transparent;border-style:none;box-sizing:border-box;color:var(--title-text-color);cursor:pointer;font-size:var(--title-font-size);font-weight:var(--title-font-weight);line-height:var(--title-line-height);list-style:none;outline:0;outline-style:none;padding:var(--title-padding);position:relative;text-align:left;width:100%}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-accordion-item__title{border-style:revert;outline:revert;outline-style:revert}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:revert;outline-style:revert}}.jkl-accordion-item__title::-webkit-details-marker{display:none}.jkl-accordion-item__title:hover{--title-text-color:var(--jkl-color-text-interactive-hover)}.jkl-accordion-item__title:hover .jkl-accordion-item__arrow{translate:0 .25rem}.jkl-accordion-item__title:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-accordion-item__arrow{pointer-events:none;position:absolute;right:var(--arrow-right);top:var(--arrow-top);transition-duration:.1s;transition-property:translate;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-accordion-item__arrow,.jkl-accordion-item__arrow path,.jkl-accordion-item__arrow svg{stroke:ButtonText;fill:ButtonText}}.jkl-accordion-item__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-accordion-item__content{font-size:var(--content-font-size);font-weight:var(--content-font-weight);height:auto;line-height:var(--content-line-height);padding:var(--content-padding)}@media screen and (forced-colors:active){.jkl-accordion-item:nth-child(n){border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover{border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover+.jkl-accordion-item{border-top:.125rem solid ButtonText}.jkl-accordion-item:last-child{border-bottom:.125rem solid ButtonText}.jkl-accordion-item:last-child:hover{border-bottom:.125rem solid ButtonText}.jkl-accordion-item__title{background-color:ButtonFace;outline:revert}}
+      ) var(--jkl-spacing-8);--jkl-accordion-arrow-top:var(--jkl-spacing-8);--jkl-accordion-arrow-right:var(--jkl-spacing-4);--jkl-accordion-content-padding:var(--jkl-spacing-8);--title-font-size:var(--jkl-small-font-size);--title-line-height:var(--jkl-small-line-height);--title-font-weight:var(--jkl-small-font-weight);--content-font-size:var(--jkl-small-font-size);--content-line-height:var(--jkl-small-line-height);--content-font-weight:var(--jkl-small-font-weight)}.jkl-accordion{width:100%}.jkl-accordion-item{--background:transparent;--text-color:var(--jkl-color-text-default);--title-text-color:var(--jkl-color-text-interactive);--border-color:var(--jkl-color-border-separator);background-color:var(--background);border-bottom:.0625rem solid var(--border-color);color:var(--text-color);transition-duration:.1s;transition-property:border-color;transition-timing-function:ease}.jkl-accordion-item:hover{--border-color:var(--jkl-color-border-separator-hover)}.jkl-accordion-item:hover:not(:first-child){border-top:.0625rem solid var(--border-color)}.jkl-accordion-item:has(+:hover),.jkl-accordion-item:has(+[open]){border-bottom:none}.jkl-accordion-item[open]{--background:var(--jkl-color-background-container-high);border-top:.0625rem solid var(--border-color)}.jkl-accordion-item[open] .jkl-accordion-item__title{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-accordion-item__title{background-color:transparent;border-style:none;box-sizing:border-box;color:var(--title-text-color);cursor:pointer;font-size:var(--title-font-size);font-weight:var(--title-font-weight);line-height:var(--title-line-height);list-style:none;outline:0;outline-style:none;padding:var(--jkl-accordion-title-padding);position:relative;text-align:left;width:100%}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-accordion-item__title{border-style:revert;outline:revert;outline-style:revert}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:revert;outline-style:revert}}.jkl-accordion-item__title::-webkit-details-marker{display:none}.jkl-accordion-item__title:hover{--title-text-color:var(--jkl-color-text-interactive-hover)}.jkl-accordion-item__title:hover .jkl-accordion-item__arrow{translate:0 .25rem}.jkl-accordion-item__title:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-accordion-item__arrow{pointer-events:none;position:absolute;right:var(--jkl-accordion-arrow-right);top:var(--jkl-accordion-arrow-top);transition-duration:.1s;transition-property:translate;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-accordion-item__arrow,.jkl-accordion-item__arrow path,.jkl-accordion-item__arrow svg{stroke:ButtonText;fill:ButtonText}}.jkl-accordion-item__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-accordion-item__content{font-size:var(--content-font-size);font-weight:var(--content-font-weight);height:auto;line-height:var(--content-line-height);padding:var(--jkl-accordion-content-padding)}@media screen and (forced-colors:active){.jkl-accordion-item:nth-child(n){border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover{border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover+.jkl-accordion-item{border-top:.125rem solid ButtonText}.jkl-accordion-item:last-child{border-bottom:.125rem solid ButtonText}.jkl-accordion-item:last-child:hover{border-bottom:.125rem solid ButtonText}.jkl-accordion-item__title{background-color:ButtonFace;outline:revert}}

package/styles/components/accordion/accordion.scss CHANGED Viewed

@@ -1,42 +1,42 @@
 @charset "UTF-8";
 @use "../../core/jkl";
+@include jkl.comfortable-density-variables {
+    --jkl-accordion-title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(
+            --jkl-spacing-16
+        ) var(--jkl-spacing-16);
+    --jkl-accordion-arrow-top: #{jkl.rem(20px)};
+    --jkl-accordion-arrow-right: var(--jkl-spacing-12);
+    --jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
+        var(--jkl-spacing-16);
+    @include jkl.declare-font-variables("title", "body");
+    @include jkl.declare-font-variables("content", "body");
+    @include jkl.small-device {
+        --jkl-accordion-title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(
+                --jkl-spacing-12
+            ) var(--jkl-spacing-12);
+        --jkl-accordion-content-padding: var(--jkl-spacing-8)
+            var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
+        --jkl-accordion-arrow-top: #{jkl.rem(23px)};
+    }
+}
+@include jkl.compact-density-variables {
+    --jkl-accordion-title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(
+            --jkl-spacing-8
+        ) var(--jkl-spacing-8);
+    --jkl-accordion-arrow-top: var(--jkl-spacing-8);
+    --jkl-accordion-arrow-right: var(--jkl-spacing-4);
+    --jkl-accordion-content-padding: var(--jkl-spacing-8);
+    @include jkl.declare-font-variables("title", "small");
+    @include jkl.declare-font-variables("content", "small");
+}
 /// @deprecated Denne komponenten bør ikke brukes lenger, og vil ikke bli oppdatert.
 /// Bruk heller komponenten `Expandable`
 .jkl-accordion {
     width: 100%;
-    @include jkl.comfortable-density {
-        --title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(
-                --jkl-spacing-16
-            ) var(--jkl-spacing-16);
-        --arrow-top: #{jkl.rem(20px)};
-        --arrow-right: var(--jkl-spacing-12);
-        --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
-            var(--jkl-spacing-16);
-        @include jkl.declare-font-variables("title", "body");
-        @include jkl.declare-font-variables("content", "body");
-        @include jkl.small-device {
-            --title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(
-                    --jkl-spacing-12
-                ) var(--jkl-spacing-12);
-            --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12)
-                var(--jkl-spacing-16) var(--jkl-spacing-12);
-            --arrow-top: #{jkl.rem(23px)};
-        }
-    }
-    @include jkl.compact-density {
-        --title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(
-                --jkl-spacing-8
-            ) var(--jkl-spacing-8);
-        --arrow-top: var(--jkl-spacing-8);
-        --arrow-right: var(--jkl-spacing-4);
-        --content-padding: var(--jkl-spacing-8);
-        @include jkl.declare-font-variables("title", "small");
-        @include jkl.declare-font-variables("content", "small");
-    }
 }
 .jkl-accordion-item {
@@ -81,7 +81,7 @@
         list-style: none;
         background-color: transparent;
         position: relative;
-        padding: var(--title-padding);
+        padding: var(--jkl-accordion-title-padding);
         text-align: left;
         width: 100%;
         box-sizing: border-box;
@@ -108,8 +108,8 @@
     &__arrow {
         pointer-events: none;
         position: absolute;
-        right: var(--arrow-right);
-        top: var(--arrow-top);
+        right: var(--jkl-accordion-arrow-right);
+        top: var(--jkl-accordion-arrow-top);
         @include jkl.motion("standard", "snappy");
         transition-property: translate;
@@ -128,7 +128,7 @@
     &__content {
         @include jkl.use-font-variables("content");
         height: auto;
-        padding: var(--content-padding);
+        padding: var(--jkl-accordion-content-padding);
     }
     @include jkl.forced-colors-mode {