@owp/core 2.3.1 → 2.4.1

package/dist/components/OwpTable/OwpFieldTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OwpFieldTable.js","sources":["../../../src/components/OwpTable/OwpFieldTable.tsx"],"sourcesContent":["import { Checkbox, TableBody, TableCell, type TableCellProps } from '@mui/material';\nimport clsx from 'clsx';\nimport dayjs from 'dayjs';\nimport { isNaN, toNumber } from 'es-toolkit/compat';\nimport { Fragment, type CSSProperties, type ReactNode } from 'react';\nimport { StyledTable, StyledTableRow } from './OwpTable';\n\ntype OwpFieldTableCell = {\n  title: string;\n  key: string;\n  required?: boolean;\n  disableLocaleString?: boolean;\n  useDate?: boolean;\n  withTime?: boolean;\n  withTimeAndSec?: boolean;\n  useCheckbox?: boolean;\n  colSpan?: number;\n  rowSpan?: number;\n  style?: CSSProperties;\n  render?: () => ReactNode;\n  validate?: (v?: number | string) => boolean;\n};\n\ntype OwpFieldTableValue = string | number | '';\ntype OwpFieldTableDataRecord = Record<string, OwpFieldTableValue | undefined>;\n\ninterface OwpFieldTableProps {\n  layout: OwpFieldTableCell[][];\n  data?: OwpFieldTableDataRecord;\n  titleSx?: TableCellProps['sx'];\n  treeGridTitleCellSx?: TableCellProps['sx'] & CSSProperties;\n  cellSx?: TableCellProps['sx'] & CSSProperties;\n  titleWidth?: number | string;\n  colGroupSlot?: ReactNode;\n  className?: string;\n  tableLayout?: 'auto' | 'fixed';\n  canUseTreeGridStyle?: boolean;\n}\n\nconst DEFAULT_CHECKBOX_FONT_SIZE = 28;\n\nconst defaultTreeGridTitleCellSx = {\n  '&&': {\n    fontFamily: 'inherit',\n    fontSize: '1.7rem',\n    fontWeight: 600,\n    lineHeight: 'normal',\n    minHeight: 'unset',\n    padding: '7px 10px',\n  },\n} as const;\n\nconst treeGridContainerSx = {\n  borderRadius: 0,\n  overflow: 'visible',\n} as const;\n\nconst treeGridFirstRowCellSx = {\n  borderTop: '1px solid #CDD8E4',\n} as const;\n\n/** 필수 헤더 타이틀 */\nconst getRequiredTitle = (title: string) => (\n  <>\n    {title}\n    <span className=\"ml-4 text-red-600\">*</span>\n  </>\n);\n\nconst getFieldTableValue = (data: OwpFieldTableProps['data'], key: string) => {\n  return data?.[key];\n};\n\nconst getCheckboxChecked = (\n  value: OwpFieldTableValue | undefined,\n  validate?: OwpFieldTableCell['validate'],\n) => {\n  if (typeof validate === 'function') {\n    return validate(value);\n  }\n\n  if (isNaN(toNumber(value))) {\n    return value === 'Y';\n  }\n\n  return Boolean(Number(value));\n};\n\nconst getDateFormat = (cell: OwpFieldTableCell) => {\n  if (cell.withTime) {\n    return 'YYYY-MM-DD HH:mm';\n  }\n\n  if (cell.withTimeAndSec) {\n    return 'YYYY-MM-DD HH:mm:ss';\n  }\n\n  return 'YYYY-MM-DD';\n};\n\nconst renderFieldTableCellValue = (\n  cell: OwpFieldTableCell,\n  data: OwpFieldTableProps['data'],\n  cellSx?: OwpFieldTableProps['cellSx'],\n): ReactNode => {\n  const value = getFieldTableValue(data, cell.key);\n\n  if (typeof cell.render === 'function') {\n    return cell.render();\n  }\n\n  if (cell.useCheckbox) {\n    return (\n      <Checkbox\n        checked={getCheckboxChecked(value, cell.validate)}\n        sx={{ '& .MuiSvgIcon-root': { fontSize: cellSx?.fontSize ?? DEFAULT_CHECKBOX_FONT_SIZE } }}\n      />\n    );\n  }\n\n  if (cell.useDate) {\n    return value ? dayjs(value).format(getDateFormat(cell)) : value;\n  }\n\n  if (cell.disableLocaleString) {\n    return value;\n  }\n\n  return value?.toLocaleString();\n};\n\n/**\n * OwpFieldTable 컴포넌트\n * @param layout layout 값\n * @param titleWidth titleWidth 값\n * @param titleSx titleSx 값\n * @param treeGridTitleCellSx TreeGrid title cell sx 값\n * @param cellSx cellSx 값\n * @param data 데이터\n * @param colGroupSlot colGroupSlot 값\n * @param className className 값\n * @param tableLayout tableLayout 값\n * @param canUseTreeGridStyle TreeGrid 스타일 사용 여부\n */\nexport function OwpFieldTable({\n  layout,\n  titleWidth,\n  titleSx,\n  treeGridTitleCellSx,\n  cellSx,\n  data,\n  colGroupSlot,\n  className,\n  tableLayout = 'fixed',\n  canUseTreeGridStyle = false,\n}: OwpFieldTableProps) {\n  return (\n    <StyledTable\n      canUseTreeGridStyle={canUseTreeGridStyle}\n      className={clsx('w-full', className)}\n      containerProps={{ sx: canUseTreeGridStyle ? treeGridContainerSx : undefined }}\n      tableLayout={tableLayout}\n    >\n      {colGroupSlot}\n      <TableBody>\n        {layout.map((cols, rowIndex) => (\n          <StyledTableRow key={`owp-field-col-${rowIndex}`}>\n            {cols.map((col, colIndex) => (\n              <Fragment key={`owp-field-cell-${rowIndex}-${colIndex}`}>\n                <TableCell\n                  component=\"th\"\n                  className=\"whitespace-pre-wrap\"\n                  width={titleWidth ?? 200}\n                  sx={{\n                    ...(canUseTreeGridStyle ? defaultTreeGridTitleCellSx : {}),\n                    ...(canUseTreeGridStyle ? (treeGridTitleCellSx ?? {}) : {}),\n                    ...(canUseTreeGridStyle && rowIndex === 0 ? treeGridFirstRowCellSx : {}),\n                    ...(titleSx ?? {}),\n                  }}\n                  rowSpan={col?.rowSpan}\n                >\n                  {col.required ? getRequiredTitle(col.title) : col.title}\n                </TableCell>\n                <TableCell\n                  className=\"whitespace-pre-wrap\"\n                  sx={{\n                    ...(canUseTreeGridStyle && rowIndex === 0 ? treeGridFirstRowCellSx : {}),\n                    ...(cellSx ?? {}),\n                  }}\n                  style={col?.style ?? {}}\n                  colSpan={col?.colSpan}\n                  rowSpan={col?.rowSpan}\n                >\n                  {renderFieldTableCellValue(col, data, cellSx)}\n                </TableCell>\n              </Fragment>\n            ))}\n          </StyledTableRow>\n        ))}\n      </TableBody>\n    </StyledTable>\n  );\n}\n"],"names":["DEFAULT_CHECKBOX_FONT_SIZE","defaultTreeGridTitleCellSx","treeGridContainerSx","treeGridFirstRowCellSx","getRequiredTitle","__name","title","jsxs","Fragment","jsx","getFieldTableValue","data","key","getCheckboxChecked","value","validate","isNaN","toNumber","getDateFormat","cell","renderFieldTableCellValue","cellSx","Checkbox","dayjs","OwpFieldTable","layout","titleWidth","titleSx","treeGridTitleCellSx","colGroupSlot","className","tableLayout","canUseTreeGridStyle","StyledTable","clsx","TableBody","cols","rowIndex","StyledTableRow","col","colIndex","TableCell"],"mappings":"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"}

package/dist/components/OwpTextField/OwpTextMaskField.js

@@ -1,106 +1,157 @@
-var j = Object.defineProperty;
-var r = (o, t) => j(o, "name", { value: t, configurable: !0 });
-import { jsxs as v, jsx as n } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
-import { FormHelperText as O } from "@mui/material";
-import P from "@mui/material/FormControl";
-import R from "@mui/material/Input";
-import V from "@mui/material/InputLabel";
-import { useId as b, forwardRef as A } from "react";
-import "../../node_modules/.pnpm/imask@7.6.1/node_modules/imask/esm/index.js";
-import "../../node_modules/.pnpm/imask@7.6.1/node_modules/imask/esm/controls/input.js";
-import "../../node_modules/.pnpm/imask@7.6.1/node_modules/imask/esm/masked/factory.js";
-import "../../node_modules/.pnpm/imask@7.6.1/node_modules/imask/esm/controls/mask-element.js";
-import "../../node_modules/.pnpm/imask@7.6.1/node_modules/imask/esm/controls/html-input-mask-element.js";
-import "../../node_modules/.pnpm/imask@7.6.1/node_modules/imask/esm/controls/html-mask-element.js";
-import "../../node_modules/.pnpm/imask@7.6.1/node_modules/imask/esm/controls/html-contenteditable-mask-element.js";
-import "../../node_modules/.pnpm/imask@7.6.1/node_modules/imask/esm/controls/input-history.js";
-import H from "../../node_modules/.pnpm/react-imask@7.6.1_react@19.2.4/node_modules/react-imask/esm/input.js";
-import "../../node_modules/.pnpm/react-imask@7.6.1_react@19.2.4/node_modules/react-imask/esm/mixin.js";
-const L = A(/* @__PURE__ */ r(function(t, e) {
-  const { onMaskChange: m, mask: i, definitions: p, name: s, ...a } = t, { onChange: c, ...u } = a;
-  return /* @__PURE__ */ n(
-    H,
+var z = Object.defineProperty;
+var i = (e, r) => z(e, "name", { value: r, configurable: !0 });
+import { jsxs as E, jsx as M } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { FormHelperText as j } from "@mui/material";
+import y from "@mui/material/FormControl";
+import b from "@mui/material/Input";
+import A from "@mui/material/InputLabel";
+import { useId as H, forwardRef as L, useRef as s, useEffect as p } from "react";
+import { InputMask as P } from "imask";
+function $(e, r) {
+  if (typeof e == "function") {
+    e(r);
+    return;
+  }
+  e && (e.current = r);
+}
+i($, "assignInputRef");
+function T({
+  mask: e,
+  definitions: r
+}) {
+  return {
+    mask: e,
+    definitions: r,
+    overwrite: !0
+  };
+}
+i(T, "buildTextMaskOptions");
+const q = L(/* @__PURE__ */ i(function(r, h) {
+  const {
+    onMaskChange: c,
+    mask: a,
+    definitions: l,
+    name: f,
+    value: o,
+    defaultValue: d,
+    ownerState: O,
+    as: C,
+    onChange: R,
+    ...V
+  } = r, k = s(null), u = s(null), g = s(c), v = s(f), x = s(T({ mask: a, definitions: l })), m = s(o !== void 0 ? o : d);
+  p(() => {
+    g.current = c;
+  }, [c]), p(() => {
+    v.current = f;
+  }, [f]), p(() => {
+    const n = k.current;
+    if (!n)
+      return;
+    const t = new P(
+      n,
+      x.current
+    ), S = /* @__PURE__ */ i(() => {
+      g.current({
+        target: {
+          name: v.current ?? n.name ?? "",
+          value: t.value
+        },
+        unmaskedValue: t.unmaskedValue
+      });
+    }, "emitMaskChange");
+    if (t.on("accept", S), u.current = t, m.current !== void 0) {
+      const F = m.current == null ? "" : String(m.current);
+      t.value !== F && (t.value = F);
+    }
+    return () => {
+      t.off("accept", S), t.destroy(), u.current === t && (u.current = null);
+    };
+  }, []), p(() => {
+    const n = u.current;
+    n && n.updateOptions(T({ mask: a, definitions: l }));
+  }, [a, l]), p(() => {
+    const n = u.current;
+    if (!n || o === void 0)
+      return;
+    const t = o == null ? "" : String(o);
+    n.value !== t && (n.value = t);
+  }, [o]);
+  const I = o !== void 0 ? o : d, w = I == null ? "" : String(I);
+  return /* @__PURE__ */ M(
+    "input",
     {
-      ...u,
-      mask: i,
-      definitions: p,
-      inputRef: e,
-      onAccept: /* @__PURE__ */ r((d, f) => {
-        m({
-          target: {
-            name: s ?? "",
-            value: String(d ?? "")
-          },
-          unmaskedValue: f.unmaskedValue
-        });
-      }, "onAccept"),
-      overwrite: !0
+      ...V,
+      defaultValue: w,
+      onChange: R,
+      ref: /* @__PURE__ */ i((n) => {
+        k.current = n, $(h, n);
+      }, "ref")
     }
   );
 }, "TextMaskCustom2"));
-function Z({
-  className: o,
-  sx: t,
-  id: e,
-  name: m,
-  label: i,
-  value: p,
-  defaultValue: s,
-  color: a,
-  onChange: c,
-  error: u,
-  helperText: d,
-  mask: f,
-  definitions: l,
-  variant: h,
-  fullWidth: g,
-  disabled: x,
-  required: C,
-  placeholder: I,
-  autoFocus: M,
-  inputProps: F,
-  inputRef: T
+function W({
+  className: e,
+  sx: r,
+  id: h,
+  name: c,
+  label: a,
+  value: l,
+  defaultValue: f,
+  color: o,
+  onChange: d,
+  error: O,
+  helperText: C,
+  mask: R,
+  definitions: V,
+  variant: k,
+  fullWidth: u,
+  disabled: g,
+  required: v,
+  placeholder: x,
+  autoFocus: m,
+  inputProps: I,
+  inputRef: w
 }) {
-  const w = b(), k = e ?? `text-mask-input-${w}`;
-  return /* @__PURE__ */ v(
-    P,
+  const n = H(), t = h ?? `text-mask-input-${n}`;
+  return /* @__PURE__ */ E(
+    y,
     {
-      color: a,
-      variant: h,
-      fullWidth: g,
-      error: u,
-      disabled: x,
-      required: C,
+      color: o,
+      variant: k,
+      fullWidth: u,
+      error: O,
+      disabled: g,
+      required: v,
       children: [
-        /* @__PURE__ */ n(V, { htmlFor: k, children: i }),
-        /* @__PURE__ */ n(
-          R,
+        a ? /* @__PURE__ */ M(A, { htmlFor: t, children: a }) : null,
+        /* @__PURE__ */ M(
+          b,
           {
-            className: o,
-            sx: t,
-            value: p,
-            defaultValue: s,
-            name: m,
-            id: k,
-            placeholder: I,
-            autoFocus: M,
-            inputRef: T,
-            inputComponent: L,
+            className: e,
+            sx: r,
+            value: l,
+            defaultValue: f,
+            name: c,
+            id: t,
+            placeholder: x,
+            autoFocus: m,
+            inputRef: w,
+            inputComponent: q,
             inputProps: {
-              ...F,
-              onMaskChange: c,
-              mask: f,
-              definitions: l
+              ...I,
+              onMaskChange: d,
+              mask: R,
+              definitions: V
             }
           }
         ),
-        /* @__PURE__ */ n(O, { children: d })
+        C ? /* @__PURE__ */ M(j, { children: C }) : null
       ]
     }
   );
 }
-r(Z, "OwpTextMaskField");
+i(W, "OwpTextMaskField");
 export {
-  Z as OwpTextMaskField
+  W as OwpTextMaskField
 };
 //# sourceMappingURL=OwpTextMaskField.js.map

package/dist/components/OwpTextField/OwpTextMaskField.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwpTextMaskField.js","sources":["../../../src/components/OwpTextField/OwpTextMaskField.tsx"],"sourcesContent":["import { FormHelperText } from '@mui/material';\nimport FormControl from '@mui/material/FormControl';\nimport type { FormControlProps } from '@mui/material/FormControl';\nimport Input from '@mui/material/Input';\nimport type { InputProps as MuiInputProps } from '@mui/material/Input';\nimport type { InputBaseComponentProps } from '@mui/material/InputBase';\nimport InputLabel from '@mui/material/InputLabel';\nimport { forwardRef, type ReactNode, useId } from 'react';\nimport { IMaskInput } from 'react-imask';\n\ntype TextMaskFieldChangeEvent = {\n  target: { name: string; value: string };\n  unmaskedValue: string;\n};\n\ninterface CustomProps {\n  onMaskChange: (event: TextMaskFieldChangeEvent) => void;\n  name?: string;\n  mask: string;\n  definitions?: Record<string, unknown>;\n}\n\ntype OwpTextMaskFieldProps = Omit<MuiInputProps, 'onChange' | 'inputComponent'> &\n  Omit<CustomProps, 'onMaskChange'> & {\n    label?: ReactNode;\n    helperText?: ReactNode;\n    variant?: FormControlProps['variant'];\n    onChange: CustomProps['onMaskChange'];\n  };\n\n/** 마스크 입력 어댑터 */\ntype TextMaskCustomProps = InputBaseComponentProps & CustomProps;\n\nconst TextMaskCustom = forwardRef<HTMLInputElement, TextMaskCustomProps>(function TextMaskCustom(\n  props,\n  ref,\n) {\n  const { onMaskChange, mask, definitions, name, ...other } = props;\n  const { onChange: ignoredOnChange, ...imaskInputProps } = other;\n\n  void ignoredOnChange;\n\n  return (\n    <IMaskInput\n      {...imaskInputProps}\n      mask={mask}\n      definitions={definitions}\n      inputRef={ref}\n      onAccept={(value, maskRef) => {\n        onMaskChange({\n          target: {\n            name: name ?? '',\n            value: String(value ?? ''),\n          },\n          unmaskedValue: maskRef.unmaskedValue,\n        });\n      }}\n      overwrite\n    />\n  );\n});\n\n/**\n * 마스크 텍스트 입력 필드\n * @param mask 입력 마스크 문자열\n * @param definitions 사용자 정의 마스크 정의\n * @param onChange 마스크 변경 이벤트 핸들러\n */\nexport function OwpTextMaskField({\n  className,\n  sx,\n  id: idProp,\n  name,\n  label,\n  value,\n  defaultValue,\n  color,\n  onChange,\n  error,\n  helperText,\n  mask,\n  definitions,\n  variant,\n  fullWidth,\n  disabled,\n  required,\n  placeholder,\n  autoFocus,\n  inputProps,\n  inputRef,\n}: OwpTextMaskFieldProps) {\n  const generatedId = useId();\n  const id = idProp ?? `text-mask-input-${generatedId}`;\n\n  return (\n    <FormControl\n      color={color}\n      variant={variant}\n      fullWidth={fullWidth}\n      error={error}\n      disabled={disabled}\n      required={required}\n    >\n      <InputLabel htmlFor={id}>{label}</InputLabel>\n      <Input\n        className={className}\n        sx={sx}\n        value={value}\n        defaultValue={defaultValue}\n        name={name}\n        id={id}\n        placeholder={placeholder}\n        autoFocus={autoFocus}\n        inputRef={inputRef}\n        inputComponent={TextMaskCustom}\n        inputProps={{\n          ...inputProps,\n          onMaskChange: onChange,\n          mask,\n          definitions,\n        }}\n      />\n      <FormHelperText>{helperText}</FormHelperText>\n    </FormControl>\n  );\n}\n"],"names":["TextMaskCustom","forwardRef","__name","props","ref","onMaskChange","mask","definitions","name","other","ignoredOnChange","imaskInputProps","jsx","IMaskInput","value","maskRef","OwpTextMaskField","className","sx","idProp","label","defaultValue","color","onChange","error","helperText","variant","fullWidth","disabled","required","placeholder","autoFocus","inputProps","inputRef","generatedId","useId","id","jsxs","FormControl","InputLabel","Input","FormHelperText"],"mappings":";;;;;;;;;;;;;;;;;;AAiCA,MAAMA,IAAiBC,EAAkD,gBAAAC,EAAA,SACvEC,GACAC,GACA;AACA,QAAM,EAAE,cAAAC,GAAc,MAAAC,GAAM,aAAAC,GAAa,MAAAC,GAAM,GAAGC,MAAUN,GACtD,EAAE,UAAUO,GAAiB,GAAGC,MAAoBF;AAI1D,SACE,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAAL;AAAA,MACA,aAAAC;AAAA,MACA,UAAUH;AAAA,MACV,UAAU,gBAAAF,EAAA,CAACY,GAAOC,MAAY;AAC5B,QAAAV,EAAa;AAAA,UACX,QAAQ;AAAA,YACN,MAAMG,KAAQ;AAAA,YACd,OAAO,OAAOM,KAAS,EAAE;AAAA,UAAA;AAAA,UAE3B,eAAeC,EAAQ;AAAA,QAAA,CACxB;AAAA,MACH,GARU;AAAA,MASV,WAAS;AAAA,IAAA;AAAA,EAAA;AAGf,GA3ByE,kBA2BxE;AAQM,SAASC,EAAiB;AAAA,EAC/B,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,MAAAX;AAAA,EACA,OAAAY;AAAA,EACA,OAAAN;AAAA,EACA,cAAAO;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAnB;AAAA,EACA,aAAAC;AAAA,EACA,SAAAmB;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAcC,EAAA,GACdC,IAAKjB,KAAU,mBAAmBe,CAAW;AAEnD,SACE,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAhB;AAAA,MACA,SAAAI;AAAA,MACA,WAAAC;AAAA,MACA,OAAAH;AAAA,MACA,UAAAI;AAAA,MACA,UAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAjB,EAAC2B,GAAA,EAAW,SAASH,GAAK,UAAAhB,GAAM;AAAA,QAChC,gBAAAR;AAAA,UAAC4B;AAAA,UAAA;AAAA,YACC,WAAAvB;AAAA,YACA,IAAAC;AAAA,YACA,OAAAJ;AAAA,YACA,cAAAO;AAAA,YACA,MAAAb;AAAA,YACA,IAAA4B;AAAA,YACA,aAAAN;AAAA,YACA,WAAAC;AAAA,YACA,UAAAE;AAAA,YACA,gBAAgBjC;AAAA,YAChB,YAAY;AAAA,cACV,GAAGgC;AAAA,cACH,cAAcT;AAAA,cACd,MAAAjB;AAAA,cACA,aAAAC;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEF,gBAAAK,EAAC6B,KAAgB,UAAAhB,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC;AAzDgBvB,EAAAc,GAAA;"}
+{"version":3,"file":"OwpTextMaskField.js","sources":["../../../src/components/OwpTextField/OwpTextMaskField.tsx"],"sourcesContent":["import { FormHelperText } from '@mui/material';\nimport FormControl from '@mui/material/FormControl';\nimport type { FormControlProps } from '@mui/material/FormControl';\nimport Input from '@mui/material/Input';\nimport type { InputProps as MuiInputProps } from '@mui/material/Input';\nimport type { InputBaseComponentProps } from '@mui/material/InputBase';\nimport InputLabel from '@mui/material/InputLabel';\nimport {\n  forwardRef,\n  type ForwardedRef,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\nimport { InputMask as IMaskInput, type Definitions, type FactoryOpts } from 'imask';\n\ntype TextMaskFieldChangeEvent = {\n  target: { name: string; value: string };\n  unmaskedValue: string;\n};\n\ntype TextMaskValue = FactoryOpts['mask'];\n\ninterface CustomProps {\n  onMaskChange: (event: TextMaskFieldChangeEvent) => void;\n  name?: string;\n  mask: TextMaskValue;\n  definitions?: Definitions;\n}\n\ntype OwpTextMaskFieldProps = Omit<MuiInputProps, 'onChange' | 'inputComponent'> &\n  Omit<CustomProps, 'onMaskChange'> & {\n    label?: ReactNode;\n    helperText?: ReactNode;\n    variant?: FormControlProps['variant'];\n    onChange: CustomProps['onMaskChange'];\n  };\n\n/** 마스크 입력 어댑터 */\ntype TextMaskCustomProps = InputBaseComponentProps & CustomProps;\n\ntype TextMaskOptions = FactoryOpts & {\n  definitions?: Definitions;\n  overwrite: true;\n};\n\n/** ref 전달 정규화 */\nfunction assignInputRef<T>(ref: ForwardedRef<T>, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n    return;\n  }\n\n  if (ref) {\n    ref.current = value;\n  }\n}\n\n/** 마스크 옵션 생성 */\nfunction buildTextMaskOptions({\n  mask,\n  definitions,\n}: Pick<CustomProps, 'mask' | 'definitions'>): TextMaskOptions {\n  return {\n    mask,\n    definitions,\n    overwrite: true,\n  } as TextMaskOptions;\n}\n\nconst TextMaskCustom = forwardRef<HTMLInputElement, TextMaskCustomProps>(function TextMaskCustom(\n  props,\n  ref,\n) {\n  const {\n    onMaskChange,\n    mask,\n    definitions,\n    name,\n    value,\n    defaultValue,\n    ownerState: ignoredOwnerState,\n    as: ignoredAs,\n    onChange,\n    ...other\n  } = props;\n  const inputElementRef = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef<IMaskInput<FactoryOpts> | null>(null);\n  const onMaskChangeRef = useRef(onMaskChange);\n  const nameRef = useRef(name);\n  const initialMaskOptionsRef = useRef(buildTextMaskOptions({ mask, definitions }));\n  const initialValueRef = useRef(value !== undefined ? value : defaultValue);\n\n  void ignoredOwnerState;\n  void ignoredAs;\n\n  useEffect(() => {\n    onMaskChangeRef.current = onMaskChange;\n  }, [onMaskChange]);\n\n  useEffect(() => {\n    nameRef.current = name;\n  }, [name]);\n\n  useEffect(() => {\n    const inputElement = inputElementRef.current;\n\n    if (!inputElement) {\n      return;\n    }\n\n    const maskInstance = new IMaskInput(\n      inputElement,\n      initialMaskOptionsRef.current as FactoryOpts,\n    );\n    const emitMaskChange = () => {\n      onMaskChangeRef.current({\n        target: {\n          name: nameRef.current ?? inputElement.name ?? '',\n          value: maskInstance.value,\n        },\n        unmaskedValue: maskInstance.unmaskedValue,\n      });\n    };\n\n    maskInstance.on('accept', emitMaskChange);\n    maskRef.current = maskInstance;\n\n    if (initialValueRef.current !== undefined) {\n      const normalizedInitialValue =\n        initialValueRef.current == null ? '' : String(initialValueRef.current);\n\n      if (maskInstance.value !== normalizedInitialValue) {\n        maskInstance.value = normalizedInitialValue;\n      }\n    }\n\n    return () => {\n      maskInstance.off('accept', emitMaskChange);\n      maskInstance.destroy();\n\n      if (maskRef.current === maskInstance) {\n        maskRef.current = null;\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const maskInstance = maskRef.current;\n\n    if (!maskInstance) {\n      return;\n    }\n\n    maskInstance.updateOptions(buildTextMaskOptions({ mask, definitions }) as FactoryOpts);\n  }, [mask, definitions]);\n\n  useEffect(() => {\n    const maskInstance = maskRef.current;\n\n    if (!maskInstance || value === undefined) {\n      return;\n    }\n\n    const normalizedValue = value == null ? '' : String(value);\n\n    if (maskInstance.value !== normalizedValue) {\n      maskInstance.value = normalizedValue;\n    }\n  }, [value]);\n\n  const initialValue = value !== undefined ? value : defaultValue;\n  const normalizedInitialValue = initialValue == null ? '' : String(initialValue);\n\n  return (\n    <input\n      {...other}\n      defaultValue={normalizedInitialValue}\n      onChange={onChange}\n      ref={(element) => {\n        inputElementRef.current = element;\n        assignInputRef(ref, element);\n      }}\n    />\n  );\n});\n\n/**\n * 마스크 텍스트 입력 필드\n * @param mask 입력 마스크 정의\n * @param definitions 사용자 정의 마스크 정의\n * @param onChange 마스크 변경 이벤트 핸들러\n */\nexport function OwpTextMaskField({\n  className,\n  sx,\n  id: idProp,\n  name,\n  label,\n  value,\n  defaultValue,\n  color,\n  onChange,\n  error,\n  helperText,\n  mask,\n  definitions,\n  variant,\n  fullWidth,\n  disabled,\n  required,\n  placeholder,\n  autoFocus,\n  inputProps,\n  inputRef,\n}: OwpTextMaskFieldProps) {\n  const generatedId = useId();\n  const id = idProp ?? `text-mask-input-${generatedId}`;\n\n  return (\n    <FormControl\n      color={color}\n      variant={variant}\n      fullWidth={fullWidth}\n      error={error}\n      disabled={disabled}\n      required={required}\n    >\n      {label ? <InputLabel htmlFor={id}>{label}</InputLabel> : null}\n      <Input\n        className={className}\n        sx={sx}\n        value={value}\n        defaultValue={defaultValue}\n        name={name}\n        id={id}\n        placeholder={placeholder}\n        autoFocus={autoFocus}\n        inputRef={inputRef}\n        inputComponent={TextMaskCustom}\n        inputProps={{\n          ...inputProps,\n          onMaskChange: onChange,\n          mask,\n          definitions,\n        }}\n      />\n      {helperText ? <FormHelperText>{helperText}</FormHelperText> : null}\n    </FormControl>\n  );\n}\n"],"names":["assignInputRef","ref","value","__name","buildTextMaskOptions","mask","definitions","TextMaskCustom","forwardRef","props","onMaskChange","name","defaultValue","ignoredOwnerState","ignoredAs","onChange","other","inputElementRef","useRef","maskRef","onMaskChangeRef","nameRef","initialMaskOptionsRef","initialValueRef","useEffect","inputElement","maskInstance","IMaskInput","emitMaskChange","normalizedInitialValue","normalizedValue","initialValue","jsx","element","OwpTextMaskField","className","sx","idProp","label","color","error","helperText","variant","fullWidth","disabled","required","placeholder","autoFocus","inputProps","inputRef","generatedId","useId","id","jsxs","FormControl","InputLabel","Input","FormHelperText"],"mappings":"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"}