@gen-epix/ui-core-form 4.0.0

package/dist/_chunks/DatePicker.js

@@ -0,0 +1,126 @@
+import { n as e } from "./rolldown-runtime.js";
+import { p as t, t as n } from "./FormUtil.js";
+import { i as r, t as i } from "./index.esm.js";
+import { FormFieldHelperText as a } from "../components/helpers/FormFieldHelperText/index.js";
+import { FormFieldLoadingIndicator as o } from "../components/helpers/FormFieldLoadingIndicator/index.js";
+import { t as s } from "./classnames.js";
+import { t as c } from "./sv.js";
+import { DATE_FORMAT as l } from "@gen-epix/ui-core/constants/date";
+import { useCallback as u, useMemo as d, useRef as f } from "react";
+import { useTranslation as p } from "react-i18next";
+import { FormControl as m, FormHelperText as h, IconButton as g, InputAdornment as _ } from "@mui/material";
+import v from "@mui/icons-material/Clear";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { TestIdUtil as x } from "@gen-epix/ui-core/utils/TestIdUtil";
+import { DatePicker as S, DateTimePicker as C, LocalizationProvider as w } from "@mui/x-date-pickers";
+import { AdapterDateFns as T } from "@mui/x-date-pickers/AdapterDateFns";
+//#region src/components/fields/DatePicker/DatePickerInputAdornment.tsx
+var E = /* @__PURE__ */ e(s(), 1), D = ({ children: e, disabled: t, loading: n, onResetButtonClickRef: r, ...i }) => {
+	let { t: a } = p();
+	return /* @__PURE__ */ b(_, {
+		...i,
+		children: [!t && !n && /* @__PURE__ */ y(g, {
+			...x.createAttributes("DatePicker-reset"),
+			"aria-label": a`Clear date field`,
+			className: "DatePicker-resetButton",
+			onClick: () => r.current(),
+			sx: { "& svg": { fontSize: "16px" } },
+			tabIndex: -1,
+			children: /* @__PURE__ */ y(v, {})
+		}), e]
+	});
+}, O = ({ dateFormat: e = l.DATE, disabled: s = !1, infoMessage: p, label: g, loading: _ = !1, name: v, onChange: O, required: k = !1, warningMessage: A }) => {
+	let { control: j, formState: { errors: M } } = r(), N = n.getFieldErrorMessage(M, v), P = !!N, F = !!A && !P, I = f(null), L = f(() => void 0), R = u((e) => (t) => {
+		O && O(t), e(t);
+	}, [O]), z = d(() => ({
+		...t,
+		formatLong: c.formatLong
+	}), []), B = d(() => {
+		switch (e) {
+			case l.DATE:
+			case l.DATE_TIME: return;
+			case l.YEAR: return ["year"];
+			case l.YEAR_MONTH: return ["year", "month"];
+			default: throw Error(`Unsupported date format: ${e}`);
+		}
+	}, [e]), V = e === l.DATE_TIME ? C : S;
+	return /* @__PURE__ */ y(i, {
+		control: j,
+		defaultValue: "",
+		name: v,
+		render: u(({ field: { onBlur: t, onChange: n, ref: r, value: i } }) => (r({ focus: () => {
+			I?.current?.focus();
+		} }), L.current = () => {
+			n(null);
+		}, /* @__PURE__ */ b(m, {
+			...x.createAttributes("DatePicker", {
+				label: g,
+				name: v
+			}),
+			fullWidth: !0,
+			sx: {
+				"&:hover .DatePicker-resetButton, &:focus-within .DatePicker-resetButton": { display: "initial" },
+				"& .DatePicker-resetButton": { display: "none" }
+			},
+			children: [
+				/* @__PURE__ */ y(w, {
+					adapterLocale: z,
+					dateAdapter: T,
+					children: /* @__PURE__ */ y(V, {
+						disabled: s || _,
+						inputRef: I,
+						label: g,
+						loading: _,
+						onChange: R(n),
+						openTo: e === l.DATE_TIME ? void 0 : "year",
+						slotProps: { textField: {
+							className: (0, E.default)({ "Mui-warning": F }),
+							error: P,
+							onBlur: t,
+							slotProps: { inputLabel: { required: k } },
+							variant: "outlined"
+						} },
+						slots: { inputAdornment: (e) => /* @__PURE__ */ y(D, {
+							...e,
+							disabled: s,
+							loading: _,
+							onResetButtonClickRef: L
+						}) },
+						value: i,
+						views: B
+					})
+				}),
+				!!_ && /* @__PURE__ */ y(o, {}),
+				/* @__PURE__ */ y(h, {
+					sx: { ml: 0 },
+					children: /* @__PURE__ */ y(a, {
+						errorMessage: N,
+						infoMessage: p,
+						noIndent: !0,
+						warningMessage: A
+					})
+				})
+			]
+		})), [
+			V,
+			z,
+			e,
+			s,
+			N,
+			P,
+			F,
+			p,
+			g,
+			_,
+			v,
+			R,
+			k,
+			B,
+			A
+		])
+	});
+};
+//#endregion
+export { O as t };
+
+//# sourceMappingURL=DatePicker.js.map

package/dist/_chunks/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../src/components/fields/DatePicker/DatePickerInputAdornment.tsx","../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { InputAdornmentProps } from '@mui/material';\nimport {\n  IconButton,\n  InputAdornment,\n} from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport { useTranslation } from 'react-i18next';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\n\nexport type DatePickerInputAdornmentProps = {\n  readonly disabled: boolean;\n  readonly loading: boolean;\n  readonly onResetButtonClickRef: RefObject<() => void>;\n} & InputAdornmentProps;\n\nexport const DatePickerInputAdornment = ({\n  children,\n  disabled,\n  loading,\n  onResetButtonClickRef,\n  ...props\n}: DatePickerInputAdornmentProps) => {\n  const { t } = useTranslation();\n  return (\n    <InputAdornment {...props}>\n      {!disabled && !loading && (\n        <IconButton\n          {...TestIdUtil.createAttributes('DatePicker-reset')}\n          aria-label={t`Clear date field`}\n          className={'DatePicker-resetButton'}\n          // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n          onClick={() => onResetButtonClickRef.current()}\n          sx={{\n            '& svg': {\n              fontSize: '16px',\n            },\n          }}\n          tabIndex={-1}\n        >\n          <ClearIcon />\n        </IconButton>\n      )}\n      {children}\n    </InputAdornment>\n  );\n};\n","import type { ReactElement } from 'react';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  FormControl,\n  FormHelperText,\n} from '@mui/material';\nimport type {\n  ControllerRenderProps,\n  FieldValues,\n  Path,\n  PathValue,\n  UseControllerReturn,\n} from 'react-hook-form';\nimport {\n  Controller,\n  useFormContext,\n} from 'react-hook-form';\nimport type {\n  DatePickerProps as MuiDatePickerProps,\n  DateTimePickerProps as MuiDateTimePickerProps,\n} from '@mui/x-date-pickers';\nimport {\n  LocalizationProvider,\n  DatePicker as MuiDatePicker,\n  DateTimePicker as MuiDateTimePicker,\n} from '@mui/x-date-pickers';\nimport classNames from 'classnames';\nimport type { Locale } from 'date-fns';\nimport {\n  enUS,\n  sv,\n} from 'date-fns/locale';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\nimport { DATE_FORMAT } from '@gen-epix/ui-core/constants/date';\n\nimport { FormUtil } from '../../../utils/FormUtil';\nimport { FormFieldHelperText } from '../../helpers/FormFieldHelperText';\nimport { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';\n\nimport { DatePickerInputAdornment } from './DatePickerInputAdornment';\n\n\nexport type DatePickerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {\n  readonly dateFormat?: typeof DATE_FORMAT[keyof typeof DATE_FORMAT];\n  readonly disabled?: boolean;\n  readonly infoMessage?: string;\n  readonly label: string;\n  readonly loading?: boolean;\n  readonly name: TName;\n  readonly onChange?: (value: Date) => void;\n  readonly required?: boolean;\n  readonly warningMessage?: string;\n};\n\nexport const DatePicker = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({\n  dateFormat = DATE_FORMAT.DATE,\n  disabled = false,\n  infoMessage,\n  label,\n  loading = false,\n  name,\n  onChange: onChangeProp,\n  required = false,\n  warningMessage,\n}: DatePickerProps<TFieldValues, TName>): ReactElement => {\n  const { control, formState: { errors } } = useFormContext<TFieldValues>();\n  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);\n  const hasError = !!errorMessage;\n  const hasWarning = !!warningMessage && !hasError;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const onResetButtonClickRef = useRef<() => void>(() => undefined);\n\n  const onMuiDatePickerChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>\n    (newValue: Date) => {\n      if (onChangeProp) {\n        onChangeProp(newValue);\n      }\n      onChange(newValue);\n    }\n  , [onChangeProp]);\n\n  const customLocale = useMemo<Locale>(() => {\n    /**\n     * Use everything from enUS, but format dates the Swedish way (ISO 8601)\n     */\n    return {\n      ...enUS,\n      formatLong: sv.formatLong,\n    };\n  }, []);\n\n  const views = useMemo<MuiDateTimePickerProps['views']>(() => {\n    switch (dateFormat) {\n      case DATE_FORMAT.DATE:\n      case DATE_FORMAT.DATE_TIME:\n        return undefined;\n      case DATE_FORMAT.YEAR:\n        return ['year'];\n      case DATE_FORMAT.YEAR_MONTH:\n        return ['year', 'month'];\n      default:\n        throw new Error(`Unsupported date format: ${dateFormat}`);\n    }\n  }, [dateFormat]);\n\n  const MuiComponent = dateFormat === DATE_FORMAT.DATE_TIME ? MuiDateTimePicker : MuiDatePicker;\n\n  const renderController = useCallback(({ field: { onBlur, onChange, ref, value } }: UseControllerReturn<TFieldValues, TName>) => {\n    ref({\n      focus: () => {\n        inputRef?.current?.focus();\n      },\n    });\n\n    onResetButtonClickRef.current = () => {\n      onChange(null);\n    };\n\n    return (\n      <FormControl\n        {...TestIdUtil.createAttributes('DatePicker', { label, name })}\n        fullWidth\n        sx={{\n          '&:hover .DatePicker-resetButton, &:focus-within .DatePicker-resetButton': {\n            display: 'initial',\n          },\n          '& .DatePicker-resetButton': {\n            display: 'none',\n          },\n        }}\n      >\n        <LocalizationProvider\n          adapterLocale={customLocale}\n          dateAdapter={AdapterDateFns}\n        >\n          <MuiComponent\n            disabled={disabled || loading}\n            inputRef={inputRef}\n            label={label}\n            loading={loading}\n            onChange={onMuiDatePickerChange(onChange)}\n            openTo={dateFormat === DATE_FORMAT.DATE_TIME ? undefined : 'year'}\n            slotProps={{\n              textField: {\n                className: classNames({ 'Mui-warning': hasWarning }),\n                error: hasError,\n                onBlur,\n                slotProps: {\n                  inputLabel: {\n                    required,\n                  },\n                },\n                variant: 'outlined',\n              },\n            }}\n            slots={{\n              inputAdornment: (props) => (\n                <DatePickerInputAdornment\n                  {...props}\n                  disabled={disabled}\n                  loading={loading}\n                  onResetButtonClickRef={onResetButtonClickRef}\n                />\n              ),\n            }}\n            value={value}\n            views={views as MuiDatePickerProps['views']}\n          />\n        </LocalizationProvider>\n        {!!loading && <FormFieldLoadingIndicator />}\n        <FormHelperText sx={{ ml: 0 }}>\n          <FormFieldHelperText\n            errorMessage={errorMessage}\n            infoMessage={infoMessage}\n            noIndent\n            warningMessage={warningMessage}\n          />\n        </FormHelperText>\n      </FormControl>\n    );\n  }, [MuiComponent, customLocale, dateFormat, disabled, errorMessage, hasError, hasWarning, infoMessage, label, loading, name, onMuiDatePickerChange, required, views, warningMessage]);\n\n  return (\n    <Controller\n      control={control}\n      defaultValue={'' as PathValue<TFieldValues, TName>}\n      name={name}\n      render={renderController}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;mCAgBA,KAAA,EAAA,aAAA,aAAA,YAAA,0BAAA,GAAA,QAAA;;;;;;;;;;;;;;AA8BA,GCaa,KAAuG,EAClH,gBAAa,EAAY,MACzB,cAAW,IACX,gBACA,UACA,aAAU,IACV,SACA,UAAU,GACV,cAAW,IACX,wBACwD;CACxD,IAAM,EAAE,YAAS,WAAW,EAAE,gBAAa,EAA6B,GAClE,IAAe,EAAS,qBAAqB,GAAQ,CAAI,GACzD,IAAW,CAAC,CAAC,GACb,IAAa,CAAC,CAAC,KAAkB,CAAC,GAClC,IAAW,EAAyB,IAAI,GACxC,IAAwB,QAAyB,KAAA,CAAS,GAE1D,IAAwB,GAAa,OACxC,MAAmB;EAIlB,AAHI,KACF,EAAa,CAAQ,GAEvB,EAAS,CAAQ;CACnB,GACA,CAAC,CAAY,CAAC,GAEV,IAAe,SAIZ;EACL,GAAG;EACH,YAAY,EAAG;CACjB,IACC,CAAC,CAAC,GAEC,IAAQ,QAA+C;EAC3D,QAAQ,GAAR;GACE,KAAK,EAAY;GACjB,KAAK,EAAY,WACf;GACF,KAAK,EAAY,MACf,OAAO,CAAC,MAAM;GAChB,KAAK,EAAY,YACf,OAAO,CAAC,QAAQ,OAAO;GACzB,SACE,MAAU,MAAM,4BAA4B,GAAY;EAC5D;CACF,GAAG,CAAC,CAAU,CAAC,GAET,IAAe,MAAe,EAAY,YAAY,IAAoB;CA6EhF,OACE,kBAAC,GAAD;EACW;EACT,cAAc;EACR;EACN,QAhFqB,GAAa,EAAE,OAAO,EAAE,WAAQ,aAAU,QAAK,kBACtE,EAAI,EACF,aAAa;GACX,GAAU,SAAS,MAAM;EAC3B,EACF,CAAC,GAED,EAAsB,gBAAgB;GACpC,EAAS,IAAI;EACf,GAGE,kBAAC,GAAD;GACE,GAAI,EAAW,iBAAiB,cAAc;IAAE;IAAO;GAAK,CAAC;GAC7D,WAAA;GACA,IAAI;IACF,2EAA2E,EACzE,SAAS,UACX;IACA,6BAA6B,EAC3B,SAAS,OACX;GACF;aAVF;IAYE,kBAAC,GAAD;KACE,eAAe;KACf,aAAa;eAEb,kBAAC,GAAD;MACE,UAAU,KAAY;MACZ;MACH;MACE;MACT,UAAU,EAAsB,CAAQ;MACxC,QAAQ,MAAe,EAAY,YAAY,KAAA,IAAY;MAC3D,WAAW,EACT,WAAW;OACT,YAAA,GAAA,EAAA,QAAA,CAAsB,EAAE,eAAe,EAAW,CAAC;OACnD,OAAO;OACP;OACA,WAAW,EACT,YAAY,EACV,YACF,EACF;OACA,SAAS;MACX,EACF;MACA,OAAO,EACL,iBAAiB,MACf,kBAAC,GAAD;OACE,GAAI;OACM;OACD;OACc;MACxB,CAAA,EAEL;MACO;MACA;KACR,CAAA;IACmB,CAAA;IACrB,CAAC,CAAC,KAAW,kBAAC,GAAD,CAA4B,CAAA;IAC1C,kBAAC,GAAD;KAAgB,IAAI,EAAE,IAAI,EAAE;eAC1B,kBAAC,GAAD;MACgB;MACD;MACb,UAAA;MACgB;KACjB,CAAA;IACa,CAAA;GACL;OAEd;GAAC;GAAc;GAAc;GAAY;GAAU;GAAc;GAAU;GAAY;GAAa;GAAO;GAAS;GAAM;GAAuB;GAAU;GAAO;EAAc,CAOvK;CACT,CAAA;AAEL"}