@simplybusiness/mobius 6.1.2 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 6.2.0
+
+### Minor Changes
+
+- acc7a69: added MaskedField Atom
+
+### Patch Changes
+
+- Updated dependencies [db79891]
+  - @simplybusiness/icons@4.33.0
+
 ## 6.1.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -62,6 +62,7 @@ __export(index_exports, {
   Logo: () => Logo,
   LoqateAddressLookupService: () => LoqateAddressLookupService,
   MIN_MAX_ERROR: () => MIN_MAX_ERROR,
+  MaskedField: () => MaskedField,
   Modal: () => Modal2,
   NumberField: () => NumberField,
   Option: () => Option2,
@@ -4547,3 +4548,64 @@ var ExpandableText = (0, import_react82.forwardRef)((props, ref) => {
   );
 });
 ExpandableText.displayName = "ExpandableText";
+
+// src/components/MaskedField/MaskedField.tsx
+var import_react83 = require("react");
+var import_react_imask = require("react-imask");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var MaskedField = (0, import_react83.forwardRef)((props, ref) => {
+  const {
+    mask,
+    value,
+    defaultValue,
+    useMaskedValue = false,
+    onChange,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    ...textFieldProps
+  } = props;
+  const { ref: maskRef, value: maskedValue } = (0, import_react_imask.useIMask)(mask, {
+    defaultValue,
+    onAccept: (value2, maskRef2) => {
+      if (onChange) {
+        const valueToEmit = useMaskedValue ? value2 : maskRef2.unmaskedValue;
+        const syntheticEvent = {
+          target: {
+            value: valueToEmit,
+            name: textFieldProps.name
+          },
+          currentTarget: {
+            value: valueToEmit,
+            name: textFieldProps.name
+          }
+        };
+        onChange(syntheticEvent);
+      }
+    }
+  });
+  const inputRef = (node) => {
+    if (maskRef) {
+      maskRef.current = node;
+    }
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    TextField,
+    {
+      ...textFieldProps,
+      ref: inputRef,
+      value: maskedValue,
+      onChange: () => {
+      },
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel
+    }
+  );
+});
+MaskedField.displayName = "MaskedField";