@fremtind/jokul 0.58.1 → 0.58.2

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 (45) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
  3. package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
  4. package/build/es/components/datepicker/DatePicker.js +1 -1
  5. package/build/es/components/datepicker/DatePicker.js.map +1 -1
  6. package/build/style.css +1 -1
  7. package/package.json +2 -2
  8. package/styles/components/button/button.css +3 -3
  9. package/styles/components/button/button.min.css +1 -1
  10. package/styles/components/checkbox/checkbox.css +4 -4
  11. package/styles/components/checkbox/checkbox.min.css +1 -1
  12. package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
  13. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  14. package/styles/components/countdown/countdown.css +2 -2
  15. package/styles/components/countdown/countdown.min.css +1 -1
  16. package/styles/components/datepicker/datepicker.css +0 -4
  17. package/styles/components/datepicker/datepicker.min.css +1 -1
  18. package/styles/components/datepicker/datepicker.scss +0 -9
  19. package/styles/components/feedback/feedback.css +2 -2
  20. package/styles/components/feedback/feedback.min.css +1 -1
  21. package/styles/components/input-group/input-group.css +2 -2
  22. package/styles/components/input-group/input-group.min.css +1 -1
  23. package/styles/components/loader/loader.css +6 -6
  24. package/styles/components/loader/loader.min.css +1 -1
  25. package/styles/components/loader/skeleton-loader.css +5 -5
  26. package/styles/components/loader/skeleton-loader.min.css +1 -1
  27. package/styles/components/message/message.css +2 -2
  28. package/styles/components/message/message.min.css +1 -1
  29. package/styles/components/progress-bar/progress-bar.css +1 -1
  30. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  31. package/styles/components/radio-button/radio-button.css +2 -2
  32. package/styles/components/radio-button/radio-button.min.css +1 -1
  33. package/styles/components/radio-panel/radio-panel.css +2 -2
  34. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  35. package/styles/components/system-message/system-message.css +2 -2
  36. package/styles/components/system-message/system-message.min.css +1 -1
  37. package/styles/components/text-area/text-area.css +4 -4
  38. package/styles/components/text-area/text-area.min.css +1 -1
  39. package/styles/components/text-input/text-input.css +4 -4
  40. package/styles/components/text-input/text-input.min.css +1 -1
  41. package/styles/components/toast/toast.css +4 -4
  42. package/styles/components/toast/toast.min.css +1 -1
  43. package/styles/shared/input/shared-input-styles.scss +6 -3
  44. package/styles/styles.css +47 -51
  45. package/styles/styles.min.css +1 -1
@@ -1,2 +1,2 @@
1
- "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"),v=require("./validation.cjs"),b=r.forwardRef(((b,f)=>{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}=b;"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,f&&("function"==typeof f?f(e):f.current=e)}),[se,f]),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]),ve=r.useCallback((e=>{let t=null,a=null;if(e.target.value){const r=p.parseDateString(e.target.value);r?X&&!v.isWithinLowerBound(r,X)?a="OUTSIDE_LOWER_BOUND":Z&&!v.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]),be=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]),fe=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:ve,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:be,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:fe,onTabOutside:ke})})]}),...z,...t,"aria-invalid":I||!!w})})}));b.displayName="DatePicker",exports.DatePicker=b;
1
+ "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"),v=require("./validation.cjs"),f=r.forwardRef(((f,b)=>{const{"data-testautoid":k,id:h,className:m="",label:g="Velg dato",labelProps:j,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,b&&("function"==typeof b?b(e):b.current=e)}),[se,b]),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]),ve=r.useCallback((e=>{let t=null,a=null;if(e.target.value){const r=p.parseDateString(e.target.value);r?X&&!v.isWithinLowerBound(r,X)?a="OUTSIDE_LOWER_BOUND":Z&&!v.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]),be=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",m),...J,ref:oe,label:g,labelProps:j,density:O,helpLabel:S,errorLabel:w,supportLabelProps:M,tooltip:H,render:t=>e.jsx(i.BaseTextInput,{"data-focused":re?"true":void 0,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:ve,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:be,onTabOutside:ke})})]}),...z,...t,"aria-invalid":I||!!w})})}));f.displayName="DatePicker",exports.DatePicker=f;
2
2
  //# sourceMappingURL=DatePicker.cjs.map
@@ -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 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 aria-invalid={invalid || !!errorLabel}\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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"}
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 {...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 data-focused={showCalendar ? \"true\" : undefined}\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 aria-invalid={invalid || !!errorLabel}\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":"8iBAwBaA,EAAaC,EAAAA,YACtB,CAACC,EAAOC,KACE,MACF,kBAAmBC,EACnBC,GAAAA,EACAC,UAAAA,EAAY,GACZC,MAAAA,EAAQ,YACRC,WAAAA,EACAC,aAAAA,EACAC,YAAAA,GAAc,EACdC,MAAAA,EACAC,kBAAmBC,EACnBC,iBAAkBC,EAClBC,YAAAA,EACAC,KAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,YAAAA,EAAc,aACdC,MAAAA,EAAQ,WACRC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,kBAAAA,EAAoB,gBACpBC,kBAAAA,EAAoB,gBACpBC,kBAAAA,EACAC,QAAAA,EACAC,eAAAA,KACGC,GACHpC,EAEyB,eAAzBqC,QAAQC,IAAIC,UAA6B9B,GAASF,GAC1CiC,QAAAC,KACJ,sIAKF,MAAA/B,EAAoBgC,kBAAgB/B,GACpCgC,EAAUjC,EACVkC,EAAAA,WAAWlC,QACX,EACAE,EAAmB8B,kBAAgB7B,GACnCgC,EAAUjC,EACVgC,EAAAA,WAAWhC,QACX,GAECkC,EAAMC,IAAWC,EAAAA,SACpBC,EAAAA,eAAexC,EAAOF,EAAcoC,EAASE,KAE1CK,GAAOC,IAAYH,WAAqC,OAIxDI,GAAcC,IAAmBL,WAASxC,GAE3C8C,GAAcC,SAAuB,MACrCC,GAAgBD,SAAuB,MAIvCE,GAAgBF,SAAiC,MACjDG,GAAWH,SAAgC,MAG3CI,GAAkBC,EAAAA,aACnBC,IACGH,GAASI,QAAUD,EACf5D,IACiC,mBAAtBA,EACPA,EAAkB4D,GAElB5D,EAAkB6D,QAAUD,EAGxC,GACA,CAACH,GAAUzD,IAGT8D,GAAcH,EAAAA,aACfI,IACQpC,GAAY4B,GAAcM,UAILN,GAAcM,QAAQG,SAC5CD,EAAEE,gBAGMtC,EAAAoC,EAAGlB,EAAM,CAAEI,MAAAA,GAAOzC,MAAOuD,EAAEG,OAAO1D,QAAO,GAGzD,CAACmB,EAASkB,EAAMI,KAGdkB,GAAaR,EAAAA,aACdI,IACOrC,GACOA,EAAAqC,EAAGlB,EAAM,CAAEI,MAAAA,GAAOzC,MAAOuD,EAAEG,OAAO1D,OAAO,GAGxD,CAACkB,EAAQmB,EAAMI,KAGbmB,GAAsBT,EAAAA,aACvBI,IACiB,WAAVA,EAAEM,MACFjB,IAAgB,GAChBW,EAAEO,iBACFP,EAAEQ,mBAGF,MAAA1C,GAAAA,EAAQD,WACRC,EAAOD,UAAUmC,EAAC,GAG1B,CAACX,GAAiBvB,IAGhB2C,GAAeb,EAAAA,aAChBI,IACG,IAAIU,EAAwB,KACxBC,EAAwC,KAExC,GAAAX,EAAEG,OAAO1D,MAAO,CAChB,MAAMmE,EAAMlC,EAAAA,gBAAgBsB,EAAEG,OAAO1D,OAChCmE,EAEMjC,IAAYkC,EAAmBA,mBAAAD,EAAKjC,GAC/BgC,EAAA,sBACL9B,IAAYiC,EAAmBA,mBAAAF,EAAK/B,GAC/B8B,EAAA,sBAEZtB,IAAgB,GANJsB,EAAA,eAQhBD,EAAWE,GAAO,IACtB,CAEAzB,GAASwB,GACT5B,GAAQ2B,GAEJhD,GACAA,EAASsC,EAAGU,EAAU,CAClBxB,MAAOyB,EACPlE,MAAOuD,EAAEG,OAAO1D,OACnB,GAGT,CAACiB,EAAUyB,GAAUJ,GAASM,GAAiBV,EAASE,IAKtDkC,GAAgBnB,EAAAA,aACjBI,IACGgB,EAAAA,WAAU,KACN3B,IAAiBD,GAAY,IAGjC,MAAM6B,EAAa3B,GAAYQ,QACzBoB,EACFD,GACCA,EAAWE,cACR,yBAIRC,OAAOC,uBAAsB,IAAMH,GAAUA,EAAOI,UAEhD,MAAAxD,GAAAA,EAAQyD,SACRzD,EAAOyD,QAAQvB,EAAC,GAGxB,CAACX,GAAiBD,GAActB,EAAQwB,KAGtCkC,GAAyB5B,EAAAA,aAC3B,EAAGd,KAAAA,MAIC,GAHAO,IAAgB,GAChBN,GAAQD,GAEJY,GAASI,QAAS,CAClB,MAAM2B,EAAO/B,GAASI,QAEjB2B,EAAAhF,MAAQiF,cAAY5C,GAGnB,MAAA6C,EAAQC,SAASC,YAAY,cAC7BF,EAAAG,UAAU,SAAS,GAAM,GAC/BL,EAAKM,cAAcJ,GAEnBF,EAAKH,QAED5D,GAIAA,EACIiE,EACA7C,EACA,CACII,MAAO,KACPzC,MAAOgF,EAAKhF,OAI5B,IAEJ,CAAC4C,GAAiBN,GAASrB,IAGzBsE,GAA2BpC,EAAAA,aAC5BI,IACGA,EAAEO,iBACFlB,IAAgB,GACFI,GAAAK,SAAWL,GAAcK,QAAQwB,OAAM,GAEzD,CAACjC,KAID,OAAA4C,EAAAA,IAACC,EAAAA,WAAA,CACG/F,GAAAA,EACAC,UAAW+F,EAAAA,KAAK,iBAAkB/F,MAC9BgC,EACJgE,IAAK5C,GACLnD,MAAAA,EACAC,WAAAA,EACAa,QAAAA,EACAH,UAAAA,EACAC,WAAAA,EACAgB,kBAAAA,EACAC,QAAAA,EACAmE,OAASC,GACLL,EAAAA,IAACM,EAAAA,cAAA,CACG,eAAcnD,GAAe,YAAS,EACtCgD,IAAKzC,GACL,cAAY,wBACZ,kBAAiBzD,EACjBE,UAAU,wBACVW,KAAAA,EACAR,aAAAA,EACAY,QAAAA,EACAV,MAAAA,EACA+F,KAAK,OACLhF,YAAAA,EACAC,MAAAA,EACAG,QAASmC,GACTpC,OAAQyC,GACR1C,SAAU+C,GACVgC,aACIC,EAAAA,KAACC,EAAAA,QAAA,CACGC,kBAAmBlD,GACnBmD,KAAMzD,GACN0D,aAAc,IACVzD,IAAiBD,IAErB2D,OAAQ,EAERC,SAAA,CAAAf,EAAAA,IAACU,EAAAA,QAAQM,QAAR,IACOnF,EACJ,cAAY,0BACZ1B,UAAU,+BACV8G,MACI9D,GACMpB,EACAD,EAEVoF,SAAU,EACV5B,QAASR,GACTlD,UAAWwC,GACX+C,SAAO,EAEPJ,SAACf,EAAAA,IAAAoB,EAAAA,WAAA,CACGL,SAACf,EAAAA,IAAAqB,EAAAA,aAAA,CAAa,aAGrBX,EAAAA,QAAQY,QAAR,CAAgBC,gBAAkBC,QAAS,GACxCT,SAAAf,EAAAA,IAACyB,EAAAA,SAAA,CACGtB,IAAK9C,GACLnC,QAAAA,EACA2B,KAAAA,EACAH,QAAAA,EACAE,QAAAA,EACAzB,KAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAT,YAAAA,EACA6G,eAAgBnC,GAChBoC,aAAc5B,aAK1B7D,KACAmE,EACJ,eAAcpF,KAAaD,KAC/B,IAOpBnB,EAAW+H,YAAc"}
@@ -1,2 +1,2 @@
1
- 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,"aria-invalid":S||!!N})})}));g.displayName="DatePicker";export{g as DatePicker};
1
+ 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 o,useState as n,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=o(((o,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,...$}=o;"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,[oe,ne]=n(v(P,I,te,re)),[le,se]=n(null),[ie,ue]=n(x),de=l(null),ce=l(null),pe=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&&ce.current&&(ce.current.contains(e.relatedTarget)||H(e,oe,{error:le,value:e.target.value}))}),[H,oe,le]),he=s((e=>{q&&q(e,oe,{error:le,value:e.target.value})}),[q,oe,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),ne(t),G&&G(e,t,{error:a,value:e.target.value})}),[G,se,ne,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),ne(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,ne,G]),ye=s((e=>{e.preventDefault(),ue(!1),pe.current&&pe.current.focus()}),[ue]);return e(c,{id:j,className:a("jkl-datepicker",L),...$,ref:ce,label:w,labelProps:C,density:R,helpLabel:T,errorLabel:N,supportLabelProps:X,tooltip:Y,render:a=>e(m,{"data-focused":ie?"true":void 0,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(p,{positionReference:me,open:ie,onOpenChange:()=>ue(!ie),offset:8,children:[e(p.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(p.Content,{initialFocus:-1,padding:24,children:e(f,{ref:de,density:R,date:oe,minDate:te,maxDate:re,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:ge,onTabOutside:ye})})]}),...Z,...a,"aria-invalid":S||!!N})})}));g.displayName="DatePicker";export{g as DatePicker};
2
2
  //# sourceMappingURL=DatePicker.js.map
@@ -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 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 aria-invalid={invalid || !!errorLabel}\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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"}
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 {...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 data-focused={showCalendar ? \"true\" : undefined}\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 aria-invalid={invalid || !!errorLabel}\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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"}