@gen-epix/ui-core-form 4.1.0 → 4.3.0

package/dist/components/fields/NumberField/index.js

@@ -1,25 +1,25 @@
 import { n as e } from "../../../_chunks/rolldown-runtime.js";
 import { t } from "../../../_chunks/FormUtil.js";
-import { i as n } from "../../../_chunks/index.esm.js";
-import { FormFieldHelperText as r } from "../../helpers/FormFieldHelperText/index.js";
-import { FormFieldLoadingIndicator as i } from "../../helpers/FormFieldLoadingIndicator/index.js";
-import { t as a } from "../../../_chunks/classnames.js";
-import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
-import { useTranslation as ee } from "react-i18next";
-import { Box as te, FormControl as ne, FormHelperText as re, IconButton as d, InputAdornment as f, Slider as p, TextField as ie } from "@mui/material";
-import m from "@mui/icons-material/Clear";
+import { FormFieldHelperText as n } from "../../helpers/FormFieldHelperText/index.js";
+import { FormFieldLoadingIndicator as r } from "../../helpers/FormFieldLoadingIndicator/index.js";
+import { t as i } from "../../../_chunks/classnames.js";
+import { useCallback as a, useEffect as ee, useMemo as o, useRef as s, useState as c } from "react";
+import { useFormContext as l } from "react-hook-form";
+import { useTranslation as u } from "react-i18next";
+import { Box as d, FormControl as te, FormHelperText as ne, IconButton as f, InputAdornment as p, Slider as m, TextField as re } from "@mui/material";
+import ie from "@mui/icons-material/Clear";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { TestIdUtil as _ } from "@gen-epix/ui-core/utils/TestIdUtil";
 import { NumberUtil as v } from "@gen-epix/ui-core/utils/NumberUtil";
 //#region src/components/fields/NumberField/NumberField.tsx
-var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a = !1, label: b, loading: x = !1, max: S, min: C, name: w, onChange: T, placeholder: E, required: D = !1, showSlider: O = !1, step: k, warningMessage: A }) => {
-	let { t: j } = ee(), { formState: { errors: M }, register: N, subscribe: P } = n(), F = t.getFieldErrorMessage(M, w), I = !!F, L = !!A && !I, R = l(null), [z, B] = u(null), [V, H] = u(null), U = l(null), [W, G] = u(!1), K = o((e) => {
+var y = /* @__PURE__ */ e(i(), 1), ae = 250, b = ({ autocomplete: e, disabled: i = !1, label: b, loading: x = !1, max: S, min: C, name: w, onChange: T, placeholder: E, required: D = !1, showSlider: O = !1, step: k, warningMessage: A }) => {
+	let { t: j } = u(), { formState: { errors: M }, register: N, subscribe: P } = l(), F = t.getFieldErrorMessage(M, w), I = !!F, L = !!A && !I, R = s(null), [z, B] = c(null), [V, H] = c(null), U = s(null), [W, G] = c(!1), K = a((e) => {
 		if (R.current) {
 			let t = (e ?? "").toString().replace(".", ",");
 			R.current.value = t, G(!!t);
 		}
 	}, []);
-	s(() => {
+	ee(() => {
 		let e = P({
 			callback: ({ name: e, values: t }) => {
 				e === w && (B(t[w]), H(t[w]), K(t[w]));
@@ -35,12 +35,12 @@ var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a
 		P,
 		K
 	]);
-	let q = c(() => N(w), [w, N]), J = c(() => !(!O || !isFinite(C) || !isFinite(S) || !isFinite(k) || C >= S || (S - C) / k > ae), [
+	let q = o(() => N(w), [w, N]), J = o(() => !(!O || !isFinite(C) || !isFinite(S) || !isFinite(k) || C >= S || (S - C) / k > ae), [
 		O,
 		C,
 		S,
 		k
-	]), Y = o(async (e) => {
+	]), Y = a(async (e) => {
 		let t;
 		t = isNaN(e) ? null : e, K(t), t !== V && (await q.onChange({ target: {
 			name: w,
@@ -52,9 +52,9 @@ var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a
 		T,
 		q,
 		K
-	]), X = o(async () => {
+	]), X = a(async () => {
 		await Y(null);
-	}, [Y]), Z = o(async () => {
+	}, [Y]), Z = a(async () => {
 		let e = v.parse(R.current.value);
 		await Y(e), await q.onBlur({
 			target: {
@@ -67,7 +67,7 @@ var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a
 		Y,
 		w,
 		q
-	]), oe = o(async () => {
+	]), oe = a(async () => {
 		let e = v.parse(R.current.value);
 		await Y(e), await q.onBlur({
 			target: {
@@ -80,14 +80,14 @@ var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a
 		Y,
 		w,
 		q
-	]), se = o((e, t) => {
+	]), se = a((e, t) => {
 		let n = Array.isArray(t) ? t[0] : t;
 		K(n), B(n);
 	}, [K]), Q = v.parse(z);
 	isNaN(Q) ? Q = null : Q < C ? Q = C : Q > S && (Q = S);
-	let $ = c(() => /* @__PURE__ */ h(ie, {
+	let $ = o(() => /* @__PURE__ */ h(re, {
 		defaultValue: z ?? "",
-		disabled: a || x,
+		disabled: i || x,
 		error: I,
 		inputRef: R,
 		label: b,
@@ -97,29 +97,29 @@ var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a
 			formHelperText: { className: (0, y.default)({ "Mui-warning": L }) },
 			input: {
 				className: (0, y.default)({ "Mui-warning": L }),
-				endAdornment: a ? void 0 : /* @__PURE__ */ h(f, {
+				endAdornment: i ? void 0 : /* @__PURE__ */ h(p, {
 					position: "end",
-					children: /* @__PURE__ */ h(d, {
+					children: /* @__PURE__ */ h(f, {
 						..._.createAttributes("TextField-reset"),
 						"aria-label": j`Clear text field`,
 						onClick: X,
 						sx: { "& svg": { fontSize: "16px" } },
 						tabIndex: -1,
-						children: /* @__PURE__ */ h(m, {})
+						children: /* @__PURE__ */ h(ie, {})
 					})
 				}),
 				inputProps: { autoComplete: e ?? w }
 			},
 			inputLabel: {
 				className: (0, y.default)({ "Mui-warning": L }),
-				required: D && !a,
+				required: D && !i,
 				shrink: W
 			}
 		},
 		variant: "outlined"
 	}), [
 		e,
-		a,
+		i,
 		I,
 		W,
 		L,
@@ -133,7 +133,7 @@ var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a
 		D,
 		j
 	]);
-	return /* @__PURE__ */ g(ne, {
+	return /* @__PURE__ */ g(te, {
 		..._.createAttributes("NumberField", {
 			label: b,
 			name: w
@@ -146,14 +146,14 @@ var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a
 		},
 		children: [
 			!J && $,
-			J && /* @__PURE__ */ g(te, {
+			J && /* @__PURE__ */ g(d, {
 				sx: {
 					alignItems: "center",
 					display: "grid",
 					gap: 2,
 					gridTemplateColumns: (e) => `${e.spacing(24)} auto`
 				},
-				children: [$, /* @__PURE__ */ h(p, {
+				children: [$, /* @__PURE__ */ h(m, {
 					color: "primary",
 					marks: !0,
 					max: S,
@@ -166,8 +166,8 @@ var y = /* @__PURE__ */ e(a(), 1), ae = 250, b = ({ autocomplete: e, disabled: a
 					valueLabelDisplay: "auto"
 				})]
 			}),
-			!!x && /* @__PURE__ */ h(i, {}),
-			/* @__PURE__ */ h(re, { children: /* @__PURE__ */ h(r, {
+			!!x && /* @__PURE__ */ h(r, {}),
+			/* @__PURE__ */ h(ne, { children: /* @__PURE__ */ h(n, {
 				errorMessage: F,
 				warningMessage: A
 			}) })

package/dist/components/fields/NumberField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/fields/NumberField/NumberField.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputAdornment,\n  TextField as MuiTextField,\n  Slider,\n} from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport type {\n  FieldValues,\n  Path,\n} from 'react-hook-form';\nimport { useFormContext } from 'react-hook-form';\nimport classnames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\nimport { NumberUtil } from '@gen-epix/ui-core/utils/NumberUtil';\n\nimport { FormUtil } from '../../../utils/FormUtil';\nimport { FormFieldHelperText } from '../../helpers/FormFieldHelperText';\nimport { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';\n\nexport type NumberFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {\n  readonly autocomplete?: string;\n  readonly disabled?: boolean;\n  readonly infoMessage?: string;\n  readonly label: string;\n  readonly loading?: boolean;\n  readonly max?: number;\n  readonly min?: number;\n  readonly name: TName;\n  readonly onChange?: (value: number) => void;\n  readonly placeholder?: string;\n  readonly required?: boolean;\n  readonly showSlider?: boolean;\n  readonly step?: number;\n  readonly warningMessage?: string;\n};\n\nconst MAX_NUMBER_OF_SLIDER_STEPS = 250;\n\nexport const NumberField = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({\n  autocomplete,\n  disabled = false,\n  label,\n  loading = false,\n  max,\n  min,\n  name,\n  onChange: onChangeProp,\n  placeholder,\n  required = false,\n  showSlider = false,\n  step,\n  warningMessage,\n}: NumberFieldProps<TFieldValues, TName>): ReactElement => {\n  const { t } = useTranslation();\n  const { formState: { errors }, register, subscribe } = 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 [internalValue, setInternalValue] = useState<number>(null);\n  const [externalValue, setExternalValue] = useState<number>(null);\n  const formControlRef = useRef<HTMLDivElement>(null);\n  const [hasInputValue, setHasInputValue] = useState(false);\n\n  const updateInputValue = useCallback((value: number) => {\n    if (inputRef.current) {\n      const inputValue = (value ?? '').toString().replace('.', ',');\n      inputRef.current.value = inputValue;\n      setHasInputValue(!!inputValue);\n    }\n  }, []);\n\n  useEffect(() => {\n    const unsubscribe = subscribe({\n      callback: ({ name: changedName, values }) => {\n        if (changedName !== name) {\n          return;\n        }\n        setInternalValue(values[name]);\n        setExternalValue(values[name]);\n        updateInputValue(values[name]);\n      },\n      formState: {\n        values: true,\n      },\n      name,\n    });\n    return () => {\n      unsubscribe();\n    };\n  }, [name, subscribe, updateInputValue]);\n\n  const registration = useMemo(() => register(name), [name, register]);\n\n  const shouldShowSlider = useMemo(() => {\n    if (!showSlider) {\n      return false;\n    }\n    if (!isFinite(min) || !isFinite(max) || !isFinite(step) || min >= max) {\n      return false;\n    }\n    if ((max - min) / step > MAX_NUMBER_OF_SLIDER_STEPS) {\n      return false;\n    }\n    return true;\n  }, [showSlider, min, max, step]);\n\n  const emitValue = useCallback(async (parsedValue: number) => {\n    let newValue: number;\n\n    if (isNaN(parsedValue)) {\n      newValue = null;\n    } else {\n      newValue = parsedValue;\n    }\n\n    updateInputValue(newValue);\n\n    if (newValue !== externalValue) {\n      await registration.onChange({\n        target: {\n          name,\n          value: newValue,\n        },\n      });\n      if (onChangeProp) {\n        onChangeProp(newValue);\n      }\n    }\n  }, [externalValue, name, onChangeProp, registration, updateInputValue]);\n\n  const onResetButtonClick = useCallback(async () => {\n    await emitValue(null);\n  }, [emitValue]);\n\n\n  const onMuiTextFieldBlur = useCallback(async () => {\n    const parsedValue = NumberUtil.parse(inputRef.current.value);\n\n    await emitValue(parsedValue);\n    await registration.onBlur({\n      target: {\n        name,\n        value: parsedValue,\n      },\n      type: 'blur',\n    });\n  }, [emitValue, name, registration]);\n\n  const onMuiSliderBlur = useCallback(async () => {\n    const parsedValue = NumberUtil.parse(inputRef.current.value);\n\n    await emitValue(parsedValue);\n    await registration.onBlur({\n      target: {\n        name,\n        value: parsedValue,\n      },\n      type: 'blur',\n    });\n  }, [emitValue, name, registration]);\n\n  const onMuiRangeSliderChange = useCallback((_event: unknown, sliderValue: number | number[]) => {\n    const value = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    updateInputValue(value);\n    setInternalValue(value);\n  }, [updateInputValue]);\n\n  let sliderValue = NumberUtil.parse(internalValue);\n  if (isNaN(sliderValue)) {\n    sliderValue = null;\n  } else if (sliderValue < min) {\n    sliderValue = min;\n  } else if (sliderValue > max) {\n    sliderValue = max;\n  }\n\n  const textField = useMemo(() => (\n    <MuiTextField\n      defaultValue={internalValue ?? ''}\n      disabled={disabled || loading}\n      error={hasError}\n      inputRef={inputRef}\n      label={label}\n      onBlur={onMuiTextFieldBlur}\n      placeholder={placeholder}\n      slotProps={{\n        formHelperText: {\n          className: classnames({ 'Mui-warning': hasWarning }),\n        },\n        input: {\n          className: classnames({ 'Mui-warning': hasWarning }),\n          endAdornment: disabled ? undefined : (\n            <InputAdornment position={'end'}>\n              <IconButton\n                {...TestIdUtil.createAttributes('TextField-reset')}\n                aria-label={t`Clear text field`}\n                onClick={onResetButtonClick}\n                sx={{\n                  '& svg': {\n                    fontSize: '16px',\n                  },\n                }}\n                tabIndex={-1}\n              >\n                <ClearIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          inputProps: {\n            autoComplete: autocomplete ?? name,\n          },\n        },\n        inputLabel: {\n          className: classnames({ 'Mui-warning': hasWarning }),\n          required: required && !disabled,\n          shrink: hasInputValue,\n        },\n      }}\n      variant={'outlined'}\n    />\n  ), [autocomplete, disabled, hasError, hasInputValue, hasWarning, internalValue, label, loading, name, onMuiTextFieldBlur, onResetButtonClick, placeholder, required, t]);\n\n  return (\n    <FormControl\n      {...TestIdUtil.createAttributes('NumberField', { label, name })}\n      fullWidth\n      ref={formControlRef}\n      sx={{\n        '&:hover button, &:focus-within button': {\n          display: 'initial',\n        },\n        button: {\n          display: 'none',\n        },\n      }}\n    >\n      {!shouldShowSlider && textField}\n      {shouldShowSlider && (\n        <Box\n          sx={{\n            alignItems: 'center',\n            display: 'grid',\n            gap: 2,\n            gridTemplateColumns: theme => `${theme.spacing(24)} auto`,\n          }}\n        >\n          {textField}\n          <Slider\n            color={'primary'}\n            marks\n            max={max}\n            min={min}\n            onBlur={onMuiSliderBlur}\n            onChange={onMuiRangeSliderChange}\n            slotProps={{\n              input: {\n                'aria-label': t`Value`,\n              },\n            }}\n            step={step}\n            value={sliderValue}\n            valueLabelDisplay={'auto'}\n          />\n        </Box>\n      )}\n      { !!loading && <FormFieldLoadingIndicator />}\n      <FormHelperText>\n        <FormFieldHelperText\n          errorMessage={errorMessage}\n          warningMessage={warningMessage}\n        />\n      </FormHelperText>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;mCAiDM,KAA6B,KAEtB,KAAwG,EACnH,iBACA,cAAW,IACX,UACA,aAAU,IACV,QACA,QACA,SACA,UAAU,GACV,gBACA,cAAW,IACX,gBAAa,IACb,SACA,wBACyD;CACzD,IAAM,EAAE,SAAM,GAAe,GACvB,EAAE,WAAW,EAAE,aAAU,aAAU,iBAAc,EAA6B,GAC9E,IAAe,EAAS,qBAAqB,GAAQ,CAAI,GACzD,IAAW,CAAC,CAAC,GACb,IAAa,CAAC,CAAC,KAAkB,CAAC,GAClC,IAAW,EAAyB,IAAI,GACxC,CAAC,GAAe,KAAoB,EAAiB,IAAI,GACzD,CAAC,GAAe,KAAoB,EAAiB,IAAI,GACzD,IAAiB,EAAuB,IAAI,GAC5C,CAAC,GAAe,KAAoB,EAAS,EAAK,GAElD,IAAmB,GAAa,MAAkB;EACtD,IAAI,EAAS,SAAS;GACpB,IAAM,KAAc,KAAS,GAAA,CAAI,SAAS,CAAC,CAAC,QAAQ,KAAK,GAAG;GAE5D,AADA,EAAS,QAAQ,QAAQ,GACzB,EAAiB,CAAC,CAAC,CAAU;EAC/B;CACF,GAAG,CAAC,CAAC;CAEL,QAAgB;EACd,IAAM,IAAc,EAAU;GAC5B,WAAW,EAAE,MAAM,GAAa,gBAAa;IACvC,MAAgB,MAGpB,EAAiB,EAAO,EAAK,GAC7B,EAAiB,EAAO,EAAK,GAC7B,EAAiB,EAAO,EAAK;GAC/B;GACA,WAAW,EACT,QAAQ,GACV;GACA;EACF,CAAC;EACD,aAAa;GACX,EAAY;EACd;CACF,GAAG;EAAC;EAAM;EAAW;CAAgB,CAAC;CAEtC,IAAM,IAAe,QAAc,EAAS,CAAI,GAAG,CAAC,GAAM,CAAQ,CAAC,GAE7D,IAAmB,QAOvB,EANI,CAAC,KAGD,CAAC,SAAS,CAAG,KAAK,CAAC,SAAS,CAAG,KAAK,CAAC,SAAS,CAAI,KAAK,KAAO,MAG7D,IAAM,KAAO,IAAO,KAIxB;EAAC;EAAY;EAAK;EAAK;CAAI,CAAC,GAEzB,IAAY,EAAY,OAAO,MAAwB;EAC3D,IAAI;EAUJ,AARA,AAGE,IAHE,MAAM,CAAW,IACR,OAEA,GAGb,EAAiB,CAAQ,GAErB,MAAa,MACf,MAAM,EAAa,SAAS,EAC1B,QAAQ;GACN;GACA,OAAO;EACT,EACF,CAAC,GACG,KACF,EAAa,CAAQ;CAG3B,GAAG;EAAC;EAAe;EAAM;EAAc;EAAc;CAAgB,CAAC,GAEhE,IAAqB,EAAY,YAAY;EACjD,MAAM,EAAU,IAAI;CACtB,GAAG,CAAC,CAAS,CAAC,GAGR,IAAqB,EAAY,YAAY;EACjD,IAAM,IAAc,EAAW,MAAM,EAAS,QAAQ,KAAK;EAG3D,AADA,MAAM,EAAU,CAAW,GAC3B,MAAM,EAAa,OAAO;GACxB,QAAQ;IACN;IACA,OAAO;GACT;GACA,MAAM;EACR,CAAC;CACH,GAAG;EAAC;EAAW;EAAM;CAAY,CAAC,GAE5B,KAAkB,EAAY,YAAY;EAC9C,IAAM,IAAc,EAAW,MAAM,EAAS,QAAQ,KAAK;EAG3D,AADA,MAAM,EAAU,CAAW,GAC3B,MAAM,EAAa,OAAO;GACxB,QAAQ;IACN;IACA,OAAO;GACT;GACA,MAAM;EACR,CAAC;CACH,GAAG;EAAC;EAAW;EAAM;CAAY,CAAC,GAE5B,KAAyB,GAAa,GAAiB,MAAmC;EAC9F,IAAM,IAAQ,MAAM,QAAQ,CAAW,IAAI,EAAY,KAAK;EAE5D,AADA,EAAiB,CAAK,GACtB,EAAiB,CAAK;CACxB,GAAG,CAAC,CAAgB,CAAC,GAEjB,IAAc,EAAW,MAAM,CAAa;CAChD,AAAI,MAAM,CAAW,IACnB,IAAc,OACL,IAAc,IACvB,IAAc,IACL,IAAc,MACvB,IAAc;CAGhB,IAAM,IAAY,QAChB,kBAAC,IAAD;EACE,cAAc,KAAiB;EAC/B,UAAU,KAAY;EACtB,OAAO;EACG;EACH;EACP,QAAQ;EACK;EACb,WAAW;GACT,gBAAgB,EACd,YAAA,GAAW,EAAA,QAAA,CAAW,EAAE,eAAe,EAAW,CAAC,EACrD;GACA,OAAO;IACL,YAAA,GAAW,EAAA,QAAA,CAAW,EAAE,eAAe,EAAW,CAAC;IACnD,cAAc,IAAW,KAAA,IACvB,kBAAC,GAAD;KAAgB,UAAU;KACxB,UAAA,kBAAC,GAAD;MACE,GAAI,EAAW,iBAAiB,iBAAiB;MACjD,cAAY,CAAC;MACb,SAAS;MACT,IAAI,EACF,SAAS,EACP,UAAU,OACZ,EACF;MACA,UAAU;MAEV,UAAA,kBAAC,GAAD,CAAY,CAAA;KACF,CAAA;IACE,CAAA;IAElB,YAAY,EACV,cAAc,KAAgB,EAChC;GACF;GACA,YAAY;IACV,YAAA,GAAW,EAAA,QAAA,CAAW,EAAE,eAAe,EAAW,CAAC;IACnD,UAAU,KAAY,CAAC;IACvB,QAAQ;GACV;EACF;EACA,SAAS;CACV,CAAA,GACA;EAAC;EAAc;EAAU;EAAU;EAAe;EAAY;EAAe;EAAO;EAAS;EAAM;EAAoB;EAAoB;EAAa;EAAU;CAAC,CAAC;CAEvK,OACE,kBAAC,IAAD;EACE,GAAI,EAAW,iBAAiB,eAAe;GAAE;GAAO;EAAK,CAAC;EAC9D,WAAA;EACA,KAAK;EACL,IAAI;GACF,yCAAyC,EACvC,SAAS,UACX;GACA,QAAQ,EACN,SAAS,OACX;EACF;EAXF,UAAA;GAaG,CAAC,KAAoB;GACrB,KACC,kBAAC,IAAD;IACE,IAAI;KACF,YAAY;KACZ,SAAS;KACT,KAAK;KACL,sBAAqB,MAAS,GAAG,EAAM,QAAQ,EAAE,EAAE;IACrD;IANF,UAAA,CAQG,GACD,kBAAC,GAAD;KACE,OAAO;KACP,OAAA;KACK;KACA;KACL,QAAQ;KACR,UAAU;KACV,WAAW,EACT,OAAO,EACL,cAAc,CAAC,QACjB,EACF;KACM;KACN,OAAO;KACP,mBAAmB;IACpB,CAAA,CACE;;GAEL,CAAC,CAAC,KAAW,kBAAC,GAAD,CAA4B,CAAA;GAC3C,kBAAC,IAAD,EAAA,UACE,kBAAC,GAAD;IACgB;IACE;GACjB,CAAA,EACa,CAAA;EACL;;AAEjB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/fields/NumberField/NumberField.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputAdornment,\n  TextField as MuiTextField,\n  Slider,\n} from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport type {\n  FieldValues,\n  Path,\n} from 'react-hook-form';\nimport { useFormContext } from 'react-hook-form';\nimport classnames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\nimport { NumberUtil } from '@gen-epix/ui-core/utils/NumberUtil';\n\nimport { FormUtil } from '../../../utils/FormUtil';\nimport { FormFieldHelperText } from '../../helpers/FormFieldHelperText';\nimport { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';\n\nexport type NumberFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {\n  readonly autocomplete?: string;\n  readonly disabled?: boolean;\n  readonly infoMessage?: string;\n  readonly label: string;\n  readonly loading?: boolean;\n  readonly max?: number;\n  readonly min?: number;\n  readonly name: TName;\n  readonly onChange?: (value: number) => void;\n  readonly placeholder?: string;\n  readonly required?: boolean;\n  readonly showSlider?: boolean;\n  readonly step?: number;\n  readonly warningMessage?: string;\n};\n\nconst MAX_NUMBER_OF_SLIDER_STEPS = 250;\n\nexport const NumberField = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({\n  autocomplete,\n  disabled = false,\n  label,\n  loading = false,\n  max,\n  min,\n  name,\n  onChange: onChangeProp,\n  placeholder,\n  required = false,\n  showSlider = false,\n  step,\n  warningMessage,\n}: NumberFieldProps<TFieldValues, TName>): ReactElement => {\n  const { t } = useTranslation();\n  const { formState: { errors }, register, subscribe } = 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 [internalValue, setInternalValue] = useState<number>(null);\n  const [externalValue, setExternalValue] = useState<number>(null);\n  const formControlRef = useRef<HTMLDivElement>(null);\n  const [hasInputValue, setHasInputValue] = useState(false);\n\n  const updateInputValue = useCallback((value: number) => {\n    if (inputRef.current) {\n      const inputValue = (value ?? '').toString().replace('.', ',');\n      inputRef.current.value = inputValue;\n      setHasInputValue(!!inputValue);\n    }\n  }, []);\n\n  useEffect(() => {\n    const unsubscribe = subscribe({\n      callback: ({ name: changedName, values }) => {\n        if (changedName !== name) {\n          return;\n        }\n        setInternalValue(values[name]);\n        setExternalValue(values[name]);\n        updateInputValue(values[name]);\n      },\n      formState: {\n        values: true,\n      },\n      name,\n    });\n    return () => {\n      unsubscribe();\n    };\n  }, [name, subscribe, updateInputValue]);\n\n  const registration = useMemo(() => register(name), [name, register]);\n\n  const shouldShowSlider = useMemo(() => {\n    if (!showSlider) {\n      return false;\n    }\n    if (!isFinite(min) || !isFinite(max) || !isFinite(step) || min >= max) {\n      return false;\n    }\n    if ((max - min) / step > MAX_NUMBER_OF_SLIDER_STEPS) {\n      return false;\n    }\n    return true;\n  }, [showSlider, min, max, step]);\n\n  const emitValue = useCallback(async (parsedValue: number) => {\n    let newValue: number;\n\n    if (isNaN(parsedValue)) {\n      newValue = null;\n    } else {\n      newValue = parsedValue;\n    }\n\n    updateInputValue(newValue);\n\n    if (newValue !== externalValue) {\n      await registration.onChange({\n        target: {\n          name,\n          value: newValue,\n        },\n      });\n      if (onChangeProp) {\n        onChangeProp(newValue);\n      }\n    }\n  }, [externalValue, name, onChangeProp, registration, updateInputValue]);\n\n  const onResetButtonClick = useCallback(async () => {\n    await emitValue(null);\n  }, [emitValue]);\n\n\n  const onMuiTextFieldBlur = useCallback(async () => {\n    const parsedValue = NumberUtil.parse(inputRef.current.value);\n\n    await emitValue(parsedValue);\n    await registration.onBlur({\n      target: {\n        name,\n        value: parsedValue,\n      },\n      type: 'blur',\n    });\n  }, [emitValue, name, registration]);\n\n  const onMuiSliderBlur = useCallback(async () => {\n    const parsedValue = NumberUtil.parse(inputRef.current.value);\n\n    await emitValue(parsedValue);\n    await registration.onBlur({\n      target: {\n        name,\n        value: parsedValue,\n      },\n      type: 'blur',\n    });\n  }, [emitValue, name, registration]);\n\n  const onMuiRangeSliderChange = useCallback((_event: unknown, sliderValue: number | number[]) => {\n    const value = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    updateInputValue(value);\n    setInternalValue(value);\n  }, [updateInputValue]);\n\n  let sliderValue = NumberUtil.parse(internalValue);\n  if (isNaN(sliderValue)) {\n    sliderValue = null;\n  } else if (sliderValue < min) {\n    sliderValue = min;\n  } else if (sliderValue > max) {\n    sliderValue = max;\n  }\n\n  const textField = useMemo(() => (\n    <MuiTextField\n      defaultValue={internalValue ?? ''}\n      disabled={disabled || loading}\n      error={hasError}\n      inputRef={inputRef}\n      label={label}\n      onBlur={onMuiTextFieldBlur}\n      placeholder={placeholder}\n      slotProps={{\n        formHelperText: {\n          className: classnames({ 'Mui-warning': hasWarning }),\n        },\n        input: {\n          className: classnames({ 'Mui-warning': hasWarning }),\n          endAdornment: disabled ? undefined : (\n            <InputAdornment position={'end'}>\n              <IconButton\n                {...TestIdUtil.createAttributes('TextField-reset')}\n                aria-label={t`Clear text field`}\n                onClick={onResetButtonClick}\n                sx={{\n                  '& svg': {\n                    fontSize: '16px',\n                  },\n                }}\n                tabIndex={-1}\n              >\n                <ClearIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          inputProps: {\n            autoComplete: autocomplete ?? name,\n          },\n        },\n        inputLabel: {\n          className: classnames({ 'Mui-warning': hasWarning }),\n          required: required && !disabled,\n          shrink: hasInputValue,\n        },\n      }}\n      variant={'outlined'}\n    />\n  ), [autocomplete, disabled, hasError, hasInputValue, hasWarning, internalValue, label, loading, name, onMuiTextFieldBlur, onResetButtonClick, placeholder, required, t]);\n\n  return (\n    <FormControl\n      {...TestIdUtil.createAttributes('NumberField', { label, name })}\n      fullWidth\n      ref={formControlRef}\n      sx={{\n        '&:hover button, &:focus-within button': {\n          display: 'initial',\n        },\n        button: {\n          display: 'none',\n        },\n      }}\n    >\n      {!shouldShowSlider && textField}\n      {shouldShowSlider && (\n        <Box\n          sx={{\n            alignItems: 'center',\n            display: 'grid',\n            gap: 2,\n            gridTemplateColumns: theme => `${theme.spacing(24)} auto`,\n          }}\n        >\n          {textField}\n          <Slider\n            color={'primary'}\n            marks\n            max={max}\n            min={min}\n            onBlur={onMuiSliderBlur}\n            onChange={onMuiRangeSliderChange}\n            slotProps={{\n              input: {\n                'aria-label': t`Value`,\n              },\n            }}\n            step={step}\n            value={sliderValue}\n            valueLabelDisplay={'auto'}\n          />\n        </Box>\n      )}\n      { !!loading && <FormFieldLoadingIndicator />}\n      <FormHelperText>\n        <FormFieldHelperText\n          errorMessage={errorMessage}\n          warningMessage={warningMessage}\n        />\n      </FormHelperText>\n    </FormControl>\n  );\n};\n"],"mappings":"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"}

package/dist/components/fields/NumberRangeInput/index.js

@@ -1,11 +1,11 @@
 import { n as e, t } from "../../../_chunks/rolldown-runtime.js";
 import { t as n } from "../../../_chunks/FormUtil.js";
-import { a as r, i, t as a } from "../../../_chunks/index.esm.js";
-import { FormFieldHelperText as o } from "../../helpers/FormFieldHelperText/index.js";
-import { FormFieldLoadingIndicator as s } from "../../helpers/FormFieldLoadingIndicator/index.js";
-import { h as c, p as l, t as u } from "../../../_chunks/isObjectLike.js";
-import { t as d } from "../../../_chunks/isEqual.js";
-import { useCallback as f, useId as p, useRef as m } from "react";
+import { FormFieldHelperText as r } from "../../helpers/FormFieldHelperText/index.js";
+import { FormFieldLoadingIndicator as i } from "../../helpers/FormFieldLoadingIndicator/index.js";
+import { h as a, p as o, t as s } from "../../../_chunks/isObjectLike.js";
+import { t as c } from "../../../_chunks/isEqual.js";
+import { useCallback as l, useId as u, useRef as d } from "react";
+import { Controller as f, useFormContext as p, useWatch as m } from "react-hook-form";
 import { useTranslation as h } from "react-i18next";
 import { Box as g, FormControl as _, FormHelperText as v, FormLabel as y, IconButton as b, Input as x, Slider as S, useTheme as C } from "@mui/material";
 import w from "@mui/icons-material/Clear";
@@ -13,43 +13,43 @@ import { jsx as T, jsxs as E } from "react/jsx-runtime";
 import { TestIdUtil as D } from "@gen-epix/ui-core/utils/TestIdUtil";
 //#region ../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/isNumber.js
 var O = /* @__PURE__ */ t(((e, t) => {
-	var n = l(), r = u(), i = "[object Number]";
+	var n = o(), r = s(), i = "[object Number]";
 	function a(e) {
 		return typeof e == "number" || r(e) && n(e) == i;
 	}
 	t.exports = a;
 })), k = /* @__PURE__ */ t(((e, t) => {
-	var n = c().isFinite;
+	var n = a().isFinite;
 	function r(e) {
 		return typeof e == "number" && n(e);
 	}
 	t.exports = r;
-})), A = /* @__PURE__ */ e(d(), 1), j = /* @__PURE__ */ e(O(), 1), M = /* @__PURE__ */ e(k(), 1), N = ({ disabled: e = !1, infoMessage: t, label: c, loading: l = !1, max: u, min: d, name: O, onChange: k, required: N = !1, warningMessage: P }) => {
-	let F = (0, M.default)(d) && (0, M.default)(u), I = C(), { t: L } = h(), { control: R, formState: { errors: z } } = i(), B = n.getFieldErrorMessage(z, O), V = !!B, H = m(null), U = p(), W = r({
+})), A = /* @__PURE__ */ e(c(), 1), j = /* @__PURE__ */ e(O(), 1), M = /* @__PURE__ */ e(k(), 1), N = ({ disabled: e = !1, infoMessage: t, label: a, loading: o = !1, max: s, min: c, name: O, onChange: k, required: N = !1, warningMessage: P }) => {
+	let F = (0, M.default)(c) && (0, M.default)(s), I = C(), { t: L } = h(), { control: R, formState: { errors: z } } = p(), B = n.getFieldErrorMessage(z, O), V = !!B, H = d(null), U = u(), W = m({
 		control: R,
 		name: O
-	}), G = f((e, t) => {
+	}), G = l((e, t) => {
 		(0, A.default)(W, e) || (k && k(e), t(e));
-	}, [k, W]), K = f((e) => (t, n) => {
+	}, [k, W]), K = l((e) => (t, n) => {
 		G(n, e);
-	}, [G]), q = f(({ field: { onBlur: n, onChange: r, ref: i, value: a } }) => {
-		i({ focus: () => {
+	}, [G]), q = l(({ field: { onBlur: n, onChange: l, ref: u, value: d } }) => {
+		u({ focus: () => {
 			H?.current?.focus();
 		} });
-		let f = a?.[0], p = a?.[1], m = (e) => {
-			e.target.value === "" ? G([null, p], r) : (0, M.default)(+e.target.value) && G([+e.target.value, p], r);
+		let f = d?.[0], p = d?.[1], m = (e) => {
+			e.target.value === "" ? G([null, p], l) : (0, M.default)(+e.target.value) && G([+e.target.value, p], l);
 		}, h = (e) => {
-			e.target.value === "" ? G([f, null], r) : (0, M.default)(+e.target.value) && G([f, +e.target.value], r);
+			e.target.value === "" ? G([f, null], l) : (0, M.default)(+e.target.value) && G([f, +e.target.value], l);
 		}, C = () => {
-			f === null || !(0, M.default)(f) ? G([null, p], r) : f < d ? G([d, p], r) : f > u ? G([u, u], r) : (0, j.default)(p) && f > p && G([p, f], r), n();
+			f === null || !(0, M.default)(f) ? G([null, p], l) : f < c ? G([c, p], l) : f > s ? G([s, s], l) : (0, j.default)(p) && f > p && G([p, f], l), n();
 		}, k = () => {
-			p === null || !(0, M.default)(p) ? G([f, null], r) : p > u ? G([f, u], r) : p < d ? G([d, d], r) : (0, j.default)(f) && p < f && G([p, f], r), n();
+			p === null || !(0, M.default)(p) ? G([f, null], l) : p > s ? G([f, s], l) : p < c ? G([c, c], l) : (0, j.default)(f) && p < f && G([p, f], l), n();
 		}, A = () => {
-			G([null, null], r);
+			G([null, null], l);
 		};
 		return /* @__PURE__ */ E(g, {
 			...D.createAttributes("RangeSlider", {
-				label: c,
+				label: a,
 				name: O
 			}),
 			sx: {
@@ -57,7 +57,7 @@ var O = /* @__PURE__ */ t(((e, t) => {
 				"legend button": { display: "none" }
 			},
 			children: [
-				!l && /* @__PURE__ */ E(g, {
+				!o && /* @__PURE__ */ E(g, {
 					sx: {
 						display: "grid",
 						gridTemplateColumns: "max-content auto max-content",
@@ -90,14 +90,14 @@ var O = /* @__PURE__ */ t(((e, t) => {
 							sx: { position: "initial" },
 							children: [/* @__PURE__ */ E(y, {
 								component: "legend",
-								disabled: e || l,
+								disabled: e || o,
 								id: U,
 								required: N,
 								sx: {
 									left: 0,
 									position: "absolute"
 								},
-								children: [c, !e && /* @__PURE__ */ T(b, {
+								children: [a, !e && /* @__PURE__ */ T(b, {
 									...D.createAttributes("RangeSlider-reset"),
 									"aria-label": L`Clear number range`,
 									onClick: A,
@@ -116,12 +116,12 @@ var O = /* @__PURE__ */ t(((e, t) => {
 								},
 								children: F && /* @__PURE__ */ T(S, {
 									color: "primary",
-									max: u,
-									min: d,
+									max: s,
+									min: c,
 									onBlur: n,
-									onChange: K(r),
+									onChange: K(l),
 									slotProps: { input: { "aria-label": L`Value` } },
-									value: a,
+									value: d,
 									valueLabelDisplay: "off"
 								})
 							})]
@@ -148,10 +148,10 @@ var O = /* @__PURE__ */ t(((e, t) => {
 						})
 					]
 				}),
-				!!l && /* @__PURE__ */ T(s, { inline: !0 }),
+				!!o && /* @__PURE__ */ T(i, { inline: !0 }),
 				/* @__PURE__ */ T(v, {
 					sx: { ml: 0 },
-					children: /* @__PURE__ */ T(o, {
+					children: /* @__PURE__ */ T(r, {
 						errorMessage: B,
 						infoMessage: t,
 						noIndent: !0,
@@ -167,10 +167,10 @@ var O = /* @__PURE__ */ t(((e, t) => {
 		V,
 		U,
 		t,
+		a,
+		o,
+		s,
 		c,
-		l,
-		u,
-		d,
 		O,
 		K,
 		N,
@@ -179,7 +179,7 @@ var O = /* @__PURE__ */ t(((e, t) => {
 		P,
 		I
 	]);
-	return /* @__PURE__ */ T(a, {
+	return /* @__PURE__ */ T(f, {
 		control: R,
 		defaultValue: null,
 		name: O,

package/dist/components/fields/RadioGroup/index.js

@@ -1,15 +1,15 @@
 import { t as e } from "../../../_chunks/FormUtil.js";
-import { i as t, t as n } from "../../../_chunks/index.esm.js";
-import { FormFieldHelperText as r } from "../../helpers/FormFieldHelperText/index.js";
-import { useCallback as i, useId as a, useRef as o } from "react";
+import { FormFieldHelperText as t } from "../../helpers/FormFieldHelperText/index.js";
+import { useCallback as n, useId as r, useRef as i } from "react";
+import { Controller as a, useFormContext as o } from "react-hook-form";
 import { FormControl as s, FormControlLabel as c, FormHelperText as l, FormLabel as u, Radio as d, RadioGroup as f } from "@mui/material";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { TestIdUtil as h } from "@gen-epix/ui-core/utils/TestIdUtil";
 //#region src/components/fields/RadioGroup/RadioGroup.tsx
 var g = ({ disabled: g, infoMessage: _, label: v, name: y, onChange: b, options: x, required: S, row: C, warningMessage: w }) => {
-	let T = a(), { control: E, formState: { errors: D } } = t(), O = e.getFieldErrorMessage(D, y), k = o(null), A = !!O, j = i((e) => (t, n) => {
+	let T = r(), { control: E, formState: { errors: D } } = o(), O = e.getFieldErrorMessage(D, y), k = i(null), A = !!O, j = n((e) => (t, n) => {
 		b && b(n), e(n);
-	}, [b]), M = i(({ field: { onBlur: e, onChange: t, ref: n, value: r } }) => (n({ focus: () => {
+	}, [b]), M = n(({ field: { onBlur: e, onChange: t, ref: n, value: r } }) => (n({ focus: () => {
 		k?.current?.focus();
 	} }), /* @__PURE__ */ p(f, {
 		"aria-labelledby": T,
@@ -48,7 +48,7 @@ var g = ({ disabled: g, infoMessage: _, label: v, name: y, onChange: b, options:
 				required: S,
 				children: v
 			}),
-			/* @__PURE__ */ p(n, {
+			/* @__PURE__ */ p(a, {
 				control: E,
 				defaultValue: null,
 				name: y,
@@ -56,7 +56,7 @@ var g = ({ disabled: g, infoMessage: _, label: v, name: y, onChange: b, options:
 			}),
 			/* @__PURE__ */ p(l, {
 				sx: { ml: 0 },
-				children: /* @__PURE__ */ p(r, {
+				children: /* @__PURE__ */ p(t, {
 					errorMessage: O,
 					infoMessage: _,
 					noIndent: !0,

package/dist/components/fields/Select/index.js

@@ -1,34 +1,35 @@
 import { n as e } from "../../../_chunks/rolldown-runtime.js";
 import { t } from "../../../_chunks/FormUtil.js";
-import { i as n, t as r } from "../../../_chunks/index.esm.js";
-import { FormFieldHelperText as i } from "../../helpers/FormFieldHelperText/index.js";
-import { FormFieldLoadingIndicator as a } from "../../helpers/FormFieldLoadingIndicator/index.js";
-import { t as o } from "../../../_chunks/classnames.js";
-import { useCallback as s, useId as c, useMemo as l, useRef as u } from "react";
+import { FormFieldHelperText as n } from "../../helpers/FormFieldHelperText/index.js";
+import { FormFieldLoadingIndicator as r } from "../../helpers/FormFieldLoadingIndicator/index.js";
+import { t as i } from "../../../_chunks/classnames.js";
+import { useCallback as a, useId as o, useMemo as s, useRef as c } from "react";
+import { Controller as l, useFormContext as u } from "react-hook-form";
 import { useTranslation as d } from "react-i18next";
 import { Checkbox as f, FormControl as p, FormHelperText as m, IconButton as h, InputAdornment as g, InputLabel as _, ListItemText as v, MenuItem as y, OutlinedInput as b, Select as x } from "@mui/material";
 import S from "@mui/icons-material/Clear";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 import { TestIdUtil as E } from "@gen-epix/ui-core/utils/TestIdUtil";
 //#region src/components/fields/Select/Select.tsx
-var D = /* @__PURE__ */ e(o(), 1), O = ({ disabled: e = !1, infoMessage: o, label: O, loading: k = !1, multiple: A, name: j, onChange: M, options: N, required: P = !1, warningMessage: F }) => {
-	let { t: I } = d(), { control: L, formState: { errors: R } } = n(), z = t.getFieldErrorMessage(R, j), B = u(null), V = c(), H = c(), U = c(), W = !!z, G = !!F && !W, K = l(() => {
+var D = /* @__PURE__ */ e(i(), 1), O = ({ disabled: e = !1, infoMessage: i, label: O, loading: k = !1, multiple: A, name: j, onChange: M, options: N, required: P = !1, warningMessage: F }) => {
+	let { t: I } = d(), { control: L, formState: { errors: R } } = u(), z = t.getFieldErrorMessage(R, j), B = c(null), V = o(), H = o(), U = o(), W = !!z, G = !!F && !W, K = s(() => {
 		let e = /* @__PURE__ */ new Map();
 		return N.forEach((t) => {
 			e.set(t.value, t);
 		}), e;
-	}, [N]), q = s((e) => K.get(e)?.disabled, [K]), J = s((e) => (Array.isArray(e) ? e : [e]).map((e) => K.get(e)?.label).join(", "), [K]), Y = s((e) => (t) => {
+	}, [N]), q = a((e) => K.get(e)?.disabled, [K]), J = a((e) => (Array.isArray(e) ? e : [e]).map((e) => K.get(e)?.label).join(", "), [K]), Y = a((e) => (t) => {
 		M && M(t.target.value), e(t.target.value);
-	}, [M]), X = s(({ field: { onBlur: t, onChange: n, ref: r, value: a } }) => {
-		r({ focus: () => {
+	}, [M]), X = a(({ field: { onBlur: t, onChange: r, ref: a, value: o } }) => {
+		a({ focus: () => {
 			B?.current?.focus();
 		} });
 		let s = () => {
-			Y(n)({ target: { value: A ? [] : "" } });
+			Y(r)({ target: { value: A ? [] : "" } });
 		};
 		return /* @__PURE__ */ T(C, { children: [
 			/* @__PURE__ */ w(_, {
 				className: (0, D.default)({ "Mui-warning": G }),
+				disabled: e,
 				error: W,
 				htmlFor: V,
 				id: H,
@@ -62,28 +63,39 @@ var D = /* @__PURE__ */ e(o(), 1), O = ({ disabled: e = !1, infoMessage: o, labe
 					"aria-labelledby": H,
 					className: (0, D.default)({ "Mui-warning": G }),
 					id: V,
-					ref: B,
-					required: P && !e
+					ref: B
 				},
 				multiple: A,
 				onBlur: t,
-				onChange: Y(n),
+				onChange: Y(r),
 				renderValue: J,
-				required: P,
-				value: a ?? (A ? [] : ""),
+				value: o ?? (A ? [] : ""),
 				children: N.map((e) => /* @__PURE__ */ T(y, {
 					disabled: q(e.value),
 					value: e.value,
-					children: [A && /* @__PURE__ */ w(f, { checked: a.includes(e.value) }), /* @__PURE__ */ w(v, { primary: e.label })]
+					children: [A && /* @__PURE__ */ w(f, { checked: o.includes(e.value) }), /* @__PURE__ */ w(v, {
+						primary: e.label,
+						secondary: e.secondaryLabel,
+						slotProps: { secondary: { sx: {
+							fontSize: "0.875rem",
+							fontStyle: "italic"
+						} } },
+						sx: {
+							alignItems: "baseline",
+							display: "flex",
+							gap: 2,
+							justifyContent: "space-between"
+						}
+					})]
 				}, e.value.toString()))
 			}),
 			/* @__PURE__ */ w(m, {
 				className: (0, D.default)({ "Mui-warning": G }),
 				id: U,
 				sx: { ml: 0 },
-				children: /* @__PURE__ */ w(i, {
+				children: /* @__PURE__ */ w(n, {
 					errorMessage: z,
-					infoMessage: o,
+					infoMessage: i,
 					noIndent: !0,
 					warningMessage: F
 				})
@@ -91,7 +103,7 @@ var D = /* @__PURE__ */ e(o(), 1), O = ({ disabled: e = !1, infoMessage: o, labe
 		] });
 	}, [
 		e,
-		o,
+		i,
 		z,
 		q,
 		I,
@@ -115,12 +127,12 @@ var D = /* @__PURE__ */ e(o(), 1), O = ({ disabled: e = !1, infoMessage: o, labe
 			name: j
 		}),
 		fullWidth: !0,
-		children: [/* @__PURE__ */ w(r, {
+		children: [/* @__PURE__ */ w(l, {
 			control: L,
 			defaultValue: null,
 			name: j,
 			render: X
-		}), !!k && /* @__PURE__ */ w(a, {})]
+		}), !!k && /* @__PURE__ */ w(r, {})]
 	});
 };
 //#endregion

package/dist/components/fields/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/fields/Select/Select.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport {\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  Checkbox,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputAdornment,\n  InputLabel,\n  ListItemText,\n  MenuItem,\n  Select as MuiSelect,\n  OutlinedInput,\n} from '@mui/material';\nimport type { SelectChangeEvent } from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport type {\n  ControllerRenderProps,\n  FieldValues,\n  Path,\n  UseControllerReturn,\n} from 'react-hook-form';\nimport {\n  Controller,\n  useFormContext,\n} from 'react-hook-form';\nimport classnames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\n\nimport type { SelectOption } from '../../../models/form';\nimport { FormUtil } from '../../../utils/FormUtil';\nimport { FormFieldHelperText } from '../../helpers/FormFieldHelperText';\nimport { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';\n\nexport type SelectProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>, TMultiple extends boolean> = {\n  readonly disabled?: boolean;\n  readonly infoMessage?: string;\n  readonly label: string;\n  readonly loading?: boolean;\n  readonly multiple?: TMultiple;\n  readonly name: TName;\n  readonly onChange?: (value: string) => void;\n  readonly options: SelectOption[];\n  readonly required?: boolean;\n  readonly warningMessage?: string;\n};\n\ntype Value = boolean | number | string;\n\nexport const Select = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>, TMultiple extends boolean = false>({\n  disabled = false,\n  infoMessage,\n  label,\n  loading = false,\n  multiple,\n  name,\n  onChange: onChangeProp,\n  options,\n  required = false,\n  warningMessage,\n}: SelectProps<TFieldValues, TName, TMultiple>): ReactElement => {\n  const { t } = useTranslation();\n  const { control, formState: { errors } } = useFormContext<TFieldValues>();\n  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const id = useId();\n  const labelId = useId();\n  const helperTextId = useId();\n\n  const hasError = !!errorMessage;\n  const hasWarning = !!warningMessage && !hasError;\n\n  const mappedOptions = useMemo<Map<Value, SelectOption>>(() => {\n    const mapped = new Map<Value, SelectOption>();\n    options.forEach(option => {\n      mapped.set(option.value, option);\n    });\n    return mapped;\n  }, [options]);\n\n  const getIsOptionDisabled = useCallback((value: SelectOption['value']): boolean => mappedOptions.get(value)?.disabled, [mappedOptions]);\n\n  const renderValue = useCallback((value: string | string []) => {\n    const values = Array.isArray(value) ? value : [value];\n    return values.map(v => mappedOptions.get(v)?.label).join(', ');\n  }, [mappedOptions]);\n\n  const onMuiSelectChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>\n    (event: SelectChangeEvent<string>) => {\n      if (onChangeProp) {\n        onChangeProp(event.target.value);\n      }\n      onChange(event.target.value);\n    }\n  , [onChangeProp]);\n\n  const renderController = useCallback(({ field: { onBlur, onChange, ref, value } }: UseControllerReturn<TFieldValues, TName>) => {\n    ref({\n      focus: () => {\n        inputRef?.current?.focus();\n      },\n    });\n    const onResetButtonClick = () => {\n      onMuiSelectChange(onChange)({ target: { value: multiple ? [] : '' } } as SelectChangeEvent<string>);\n    };\n\n    return (\n      <>\n        <InputLabel\n          className={classnames({ 'Mui-warning': hasWarning })}\n          error={hasError}\n          htmlFor={id}\n          id={labelId}\n          required={required && !disabled}\n        >\n          {label}\n        </InputLabel>\n        <MuiSelect<TFieldValues[TName]>\n          disabled={disabled || loading}\n          error={hasError}\n          input={(\n            <OutlinedInput\n              endAdornment={disabled ? undefined : (\n                <InputAdornment\n                  position={'start'}\n                  sx={{\n                    position: 'absolute',\n                    right: theme => theme.spacing(2),\n                  }}\n                >\n                  <IconButton\n                    {...TestIdUtil.createAttributes('TextField-reset')}\n                    aria-label={t`Clear selection`}\n                    // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n                    onClick={onResetButtonClick}\n                    sx={{\n                      '& svg': {\n                        fontSize: '16px',\n                      },\n                    }}\n                    tabIndex={-1}\n                  >\n                    <ClearIcon />\n                  </IconButton>\n                </InputAdornment>\n              )}\n              label={label}\n            />\n          )}\n          inputProps={{\n            'aria-describedby': helperTextId,\n            'aria-label': label,\n            'aria-labelledby': labelId,\n            className: classnames({\n              'Mui-warning': hasWarning,\n            }),\n            id,\n            ref: inputRef,\n            required: required && !disabled,\n          }}\n          multiple={multiple}\n          onBlur={onBlur}\n          onChange={onMuiSelectChange(onChange)}\n          renderValue={renderValue}\n          required={required}\n          value={value ?? (multiple ? [] : '') as TFieldValues[TName]}\n        >\n          { options.map((option) => {\n            return (\n              <MenuItem\n                disabled={getIsOptionDisabled(option.value)}\n                key={option.value.toString()}\n                value={option.value as string}\n              >\n\n                {multiple && (\n                  <Checkbox\n                    checked={(value as string[]).includes(option.value as string)}\n                  />\n                )}\n                <ListItemText primary={option.label} />\n              </MenuItem>\n            );\n          })}\n        </MuiSelect>\n        <FormHelperText\n          className={classnames({ 'Mui-warning': hasWarning })}\n          id={helperTextId}\n          sx={{ ml: 0 }}\n        >\n          <FormFieldHelperText\n            errorMessage={errorMessage}\n            infoMessage={infoMessage}\n            noIndent\n            warningMessage={warningMessage}\n          />\n        </FormHelperText>\n      </>\n    );\n  }, [disabled, infoMessage, errorMessage, getIsOptionDisabled, t, hasError, hasWarning, helperTextId, id, label, labelId, loading, multiple, onMuiSelectChange, options, renderValue, required, warningMessage]);\n\n  return (\n    <FormControl\n      {...TestIdUtil.createAttributes('Select', { label, name })}\n      fullWidth\n    >\n      <Controller\n        control={control}\n        defaultValue={null}\n        name={name}\n        render={renderController}\n      />\n      { !!loading && <FormFieldLoadingIndicator />}\n    </FormControl>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/fields/Select/Select.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport {\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  Checkbox,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputAdornment,\n  InputLabel,\n  ListItemText,\n  MenuItem,\n  Select as MuiSelect,\n  OutlinedInput,\n} from '@mui/material';\nimport type { SelectChangeEvent } from '@mui/material';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport type {\n  ControllerRenderProps,\n  FieldValues,\n  Path,\n  UseControllerReturn,\n} from 'react-hook-form';\nimport {\n  Controller,\n  useFormContext,\n} from 'react-hook-form';\nimport classnames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\n\nimport type { SelectOption } from '../../../models/form';\nimport { FormUtil } from '../../../utils/FormUtil';\nimport { FormFieldHelperText } from '../../helpers/FormFieldHelperText';\nimport { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';\n\nexport type SelectProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>, TMultiple extends boolean> = {\n  readonly disabled?: boolean;\n  readonly infoMessage?: string;\n  readonly label: string;\n  readonly loading?: boolean;\n  readonly multiple?: TMultiple;\n  readonly name: TName;\n  readonly onChange?: (value: string) => void;\n  readonly options: SelectOption[];\n  readonly required?: boolean;\n  readonly warningMessage?: string;\n};\n\ntype Value = boolean | number | string;\n\nexport const Select = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>, TMultiple extends boolean = false>({\n  disabled = false,\n  infoMessage,\n  label,\n  loading = false,\n  multiple,\n  name,\n  onChange: onChangeProp,\n  options,\n  required = false,\n  warningMessage,\n}: SelectProps<TFieldValues, TName, TMultiple>): ReactElement => {\n  const { t } = useTranslation();\n  const { control, formState: { errors } } = useFormContext<TFieldValues>();\n  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const id = useId();\n  const labelId = useId();\n  const helperTextId = useId();\n\n  const hasError = !!errorMessage;\n  const hasWarning = !!warningMessage && !hasError;\n\n  const mappedOptions = useMemo<Map<Value, SelectOption>>(() => {\n    const mapped = new Map<Value, SelectOption>();\n    options.forEach(option => {\n      mapped.set(option.value, option);\n    });\n    return mapped;\n  }, [options]);\n\n  const getIsOptionDisabled = useCallback((value: SelectOption['value']): boolean => mappedOptions.get(value)?.disabled, [mappedOptions]);\n\n  const renderValue = useCallback((value: string | string []) => {\n    const values = Array.isArray(value) ? value : [value];\n    return values.map(v => mappedOptions.get(v)?.label).join(', ');\n  }, [mappedOptions]);\n\n  const onMuiSelectChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>\n    (event: SelectChangeEvent<string>) => {\n      if (onChangeProp) {\n        onChangeProp(event.target.value);\n      }\n      onChange(event.target.value);\n    }\n  , [onChangeProp]);\n\n  const renderController = useCallback(({ field: { onBlur, onChange, ref, value } }: UseControllerReturn<TFieldValues, TName>) => {\n    ref({\n      focus: () => {\n        inputRef?.current?.focus();\n      },\n    });\n    const onResetButtonClick = () => {\n      onMuiSelectChange(onChange)({ target: { value: multiple ? [] : '' } } as SelectChangeEvent<string>);\n    };\n\n    return (\n      <>\n        <InputLabel\n          className={classnames({ 'Mui-warning': hasWarning })}\n          disabled={disabled}\n          error={hasError}\n          htmlFor={id}\n          id={labelId}\n          required={required && !disabled}\n        >\n          {label}\n        </InputLabel>\n        <MuiSelect<TFieldValues[TName]>\n          disabled={disabled || loading}\n          error={hasError}\n          input={(\n            <OutlinedInput\n              endAdornment={disabled ? undefined : (\n                <InputAdornment\n                  position={'start'}\n                  sx={{\n                    position: 'absolute',\n                    right: theme => theme.spacing(2),\n                  }}\n                >\n                  <IconButton\n                    {...TestIdUtil.createAttributes('TextField-reset')}\n                    aria-label={t`Clear selection`}\n                    // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n                    onClick={onResetButtonClick}\n                    sx={{\n                      '& svg': {\n                        fontSize: '16px',\n                      },\n                    }}\n                    tabIndex={-1}\n                  >\n                    <ClearIcon />\n                  </IconButton>\n                </InputAdornment>\n              )}\n              label={label}\n            />\n          )}\n          inputProps={{\n            'aria-describedby': helperTextId,\n            'aria-label': label,\n            'aria-labelledby': labelId,\n            className: classnames({\n              'Mui-warning': hasWarning,\n            }),\n            id,\n            ref: inputRef,\n          }}\n          multiple={multiple}\n          onBlur={onBlur}\n          onChange={onMuiSelectChange(onChange)}\n          renderValue={renderValue}\n          value={value ?? (multiple ? [] : '') as TFieldValues[TName]}\n        >\n          { options.map((option) => {\n            return (\n              <MenuItem\n                disabled={getIsOptionDisabled(option.value)}\n                key={option.value.toString()}\n                value={option.value as string}\n              >\n\n                {multiple && (\n                  <Checkbox\n                    checked={(value as string[]).includes(option.value as string)}\n                  />\n                )}\n                <ListItemText\n                  primary={option.label}\n                  secondary={option.secondaryLabel}\n                  slotProps={{\n                    secondary: { sx: { fontSize: '0.875rem', fontStyle: 'italic' } },\n                  }}\n                  sx={{\n                    alignItems: 'baseline',\n                    display: 'flex',\n                    gap: 2,\n                    justifyContent: 'space-between',\n                  }}\n                />\n              </MenuItem>\n            );\n          })}\n        </MuiSelect>\n        <FormHelperText\n          className={classnames({ 'Mui-warning': hasWarning })}\n          id={helperTextId}\n          sx={{ ml: 0 }}\n        >\n          <FormFieldHelperText\n            errorMessage={errorMessage}\n            infoMessage={infoMessage}\n            noIndent\n            warningMessage={warningMessage}\n          />\n        </FormHelperText>\n      </>\n    );\n  }, [disabled, infoMessage, errorMessage, getIsOptionDisabled, t, hasError, hasWarning, helperTextId, id, label, labelId, loading, multiple, onMuiSelectChange, options, renderValue, required, warningMessage]);\n\n  return (\n    <FormControl\n      {...TestIdUtil.createAttributes('Select', { label, name })}\n      fullWidth\n    >\n      <Controller\n        control={control}\n        defaultValue={null}\n        name={name}\n        render={renderController}\n      />\n      { !!loading && <FormFieldLoadingIndicator />}\n    </FormControl>\n  );\n};\n"],"mappings":"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"}

package/dist/components/fields/Switch/Switch.d.ts

@@ -1,7 +1,8 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 export type SwitchProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = {
     readonly disabled?: boolean;
+    readonly icon?: ReactNode;
     readonly infoMessage?: string;
     readonly label: string;
     readonly loading?: boolean;
@@ -10,4 +11,4 @@ export type SwitchProps<TFieldValues extends FieldValues, TName extends Path<TFi
     readonly required?: boolean;
     readonly warningMessage?: string;
 };
-export declare const Switch: <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({ disabled, infoMessage, label, loading, name, onChange: onChangeProp, warningMessage, }: SwitchProps<TFieldValues, TName>) => ReactElement;
+export declare const Switch: <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({ disabled, icon, infoMessage, label, loading, name, onChange: onChangeProp, warningMessage, }: SwitchProps<TFieldValues, TName>) => ReactElement;