@simplybusiness/mobius 6.1.2 → 6.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 6.2.1
+
+### Patch Changes
+
+- Updated dependencies [99ed68f]
+  - @simplybusiness/icons@4.33.1
+
+## 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,96 @@ 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 createSyntheticEvent = (options) => {
+  const { event, useMaskedValue, maskedValue, unmaskedValue, name } = options;
+  const valueToEmit = useMaskedValue ? maskedValue : unmaskedValue;
+  return {
+    ...event,
+    target: {
+      ...event.target,
+      value: valueToEmit,
+      name
+    },
+    currentTarget: {
+      ...event.currentTarget,
+      value: valueToEmit,
+      name
+    }
+  };
+};
+var MaskedField = (0, import_react83.forwardRef)((props, ref) => {
+  const {
+    mask,
+    value,
+    defaultValue,
+    useMaskedValue = false,
+    onChange,
+    onBlur,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    ...textFieldProps
+  } = props;
+  const {
+    ref: maskRef,
+    value: maskedValue,
+    unmaskedValue
+  } = (0, import_react_imask.useIMask)(mask, {
+    defaultValue
+  });
+  const handleChange = (event) => {
+    if (onChange) {
+      onChange(
+        createSyntheticEvent({
+          event,
+          useMaskedValue,
+          maskedValue,
+          unmaskedValue,
+          name: textFieldProps.name
+        })
+      );
+    }
+  };
+  const handleBlur = (event) => {
+    if (onBlur) {
+      onBlur(
+        createSyntheticEvent({
+          event,
+          useMaskedValue,
+          maskedValue,
+          unmaskedValue,
+          name: textFieldProps.name
+        })
+      );
+    }
+  };
+  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: handleChange,
+      onBlur: handleBlur,
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel
+    }
+  );
+});
+MaskedField.displayName = "MaskedField";