@simplybusiness/mobius 6.4.3 → 6.4.4

package/dist/esm/index.js

@@ -3825,9 +3825,9 @@ var Segment = (props) => {
 Segment.displayName = "Segment";
 
 // src/components/Select/Select.tsx
+import { chevronDown as chevronDown2 } from "@simplybusiness/icons";
 import classNames46 from "classnames/dedupe";
 import { forwardRef as forwardRef41, useId as useId11 } from "react";
-import { chevronDown as chevronDown2 } from "@simplybusiness/icons";
 import { jsx as jsx55, jsxs as jsxs27 } from "react/jsx-runtime";
 var Select = forwardRef41((props, ref) => {
   const {
@@ -3896,6 +3896,7 @@ var Select = forwardRef41((props, ref) => {
           "aria-invalid": !!errorMessage,
           "aria-describedby": describedBy,
           "aria-required": isRequired,
+          required: isRequired,
           onChange: handleChange
         }
       ),
@@ -4499,102 +4500,136 @@ var ExpandableText = forwardRef55((props, ref) => {
 ExpandableText.displayName = "ExpandableText";
 
 // src/components/MaskedField/MaskedField.tsx
-import { forwardRef as forwardRef56, useEffect as useEffect26 } from "react";
+import { forwardRef as forwardRef56, useCallback as useCallback7, useEffect as useEffect26 } from "react";
 import { useIMask } from "react-imask";
 import { jsx as jsx71 } from "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
+var useAcceptHandler = (onChange, useMaskedValue, name) => {
+  return useCallback7(
+    (maskedValue, maskInstance) => {
+      if (!onChange) {
+        return;
+      }
+      const formattedValue = maskedValue;
+      const rawValue = maskInstance.unmaskedValue;
+      const valueToEmit = useMaskedValue ? formattedValue : rawValue;
+      onChange({
+        target: { name, value: valueToEmit }
+      });
     },
-    currentTarget: {
-      ...event.currentTarget,
-      value: valueToEmit,
-      name
-    }
-  };
+    [onChange, useMaskedValue, name]
+  );
 };
-var MaskedField = forwardRef56((props, ref) => {
-  const {
-    mask,
-    value,
-    defaultValue,
-    useMaskedValue = false,
-    onChange,
-    onBlur,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    ...textFieldProps
-  } = props;
-  const {
-    ref: maskRef,
-    value: maskedValue,
-    unmaskedValue,
-    setValue
-  } = useIMask(mask, {
-    defaultValue: value || defaultValue
-  });
+var useCombinedRef = (imaskRef, forwardedRef) => {
+  return useCallback7(
+    (element) => {
+      imaskRef.current = element;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [imaskRef, forwardedRef]
+  );
+};
+var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
+  return useCallback7(
+    (event) => {
+      if (!onBlur || !maskRef.current) {
+        return;
+      }
+      const formattedValue = maskRef.current.value;
+      const rawValue = maskRef.current.unmaskedValue;
+      const valueToEmit = useMaskedValue ? formattedValue : rawValue;
+      onBlur({
+        ...event,
+        target: { ...event.target, name, value: valueToEmit }
+      });
+    },
+    [onBlur, maskRef, useMaskedValue, name]
+  );
+};
+var ControlledMaskedField = ({
+  mask,
+  useMaskedValue = false,
+  value,
+  onChange,
+  onBlur,
+  name,
+  forwardedRef,
+  ...textFieldProps
+}) => {
+  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
+  const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });
+  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
+  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
   useEffect26(() => {
-    const valueToCompare = useMaskedValue ? maskedValue : unmaskedValue;
-    if (value !== void 0 && value !== valueToCompare) {
-      setValue(value);
-    }
-  }, [value, setValue]);
-  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
-        })
-      );
+    if (!maskRef.current) {
+      return;
     }
-  };
-  const inputRef = (node) => {
-    if (maskRef) {
-      maskRef.current = node;
+    const stringValue = value.toString();
+    const currentMasked = maskRef.current.value;
+    const currentUnmasked = maskRef.current.unmaskedValue;
+    if (currentMasked !== stringValue && currentUnmasked !== stringValue) {
+      setValue(stringValue);
     }
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
+  }, [value, maskRef, setValue, imaskRef]);
+  return /* @__PURE__ */ jsx71(
+    TextField,
+    {
+      ...textFieldProps,
+      ref: combinedRef,
+      name,
+      onBlur: handleBlur
     }
-  };
+  );
+};
+var UncontrolledMaskedField = ({
+  mask,
+  useMaskedValue = false,
+  defaultValue,
+  onChange,
+  onBlur,
+  name,
+  forwardedRef,
+  ...textFieldProps
+}) => {
+  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
+  const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });
+  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
+  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
   return /* @__PURE__ */ jsx71(
     TextField,
     {
       ...textFieldProps,
-      ref: inputRef,
-      value: maskedValue,
-      onChange: handleChange,
+      ref: combinedRef,
+      name,
       onBlur: handleBlur,
-      "aria-describedby": ariaDescribedBy,
-      "aria-label": ariaLabel
+      defaultValue: defaultValue?.toString()
     }
   );
+};
+var MaskedField = forwardRef56((props, forwardedRef) => {
+  const { value, defaultValue, ...rest } = props;
+  if ("value" in props) {
+    return /* @__PURE__ */ jsx71(
+      ControlledMaskedField,
+      {
+        ...rest,
+        value: value ?? "",
+        forwardedRef
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx71(
+      UncontrolledMaskedField,
+      {
+        ...rest,
+        defaultValue,
+        forwardedRef
+      }
+    );
+  }
 });
 MaskedField.displayName = "MaskedField";
 export {

package/dist/types/src/components/MaskedField/MaskedField.d.ts

@@ -1,14 +1,27 @@
 import type { Ref, RefAttributes } from "react";
-import type { ReactMaskOpts } from "react-imask";
-import type { ForwardedRefComponent } from "../../types/components";
-import type { DOMProps } from "../../types/dom";
-import { type TextFieldProps } from "../TextField";
+import type { FactoryOpts } from "imask";
+import type { ForwardedRefComponent } from "../../types";
+import type { TextFieldProps } from "../TextField";
 export type MaskedFieldElementType = HTMLInputElement;
-export interface MaskedFieldProps extends Omit<TextFieldProps, "type">, DOMProps, RefAttributes<MaskedFieldElementType> {
-    /** The mask configuration to apply */
-    mask: ReactMaskOpts;
-    /** Whether to return the masked (formatted) value in onChange. Defaults to false (unmasked value) */
+export interface MaskedFieldProps extends Omit<TextFieldProps, "type" | "ref">, RefAttributes<MaskedFieldElementType> {
+    mask: FactoryOpts;
+    /**
+     * If true, onChange and onBlur events will emit the masked (formatted) value.
+     * If false (default), events will emit the unmasked (raw) value.
+     *
+     * @example
+     * // TelephoneQuestion uses useMaskedValue={true}
+     * // User types: 5551234567
+     * // onChange receives: "(555) 123-4567" (formatted for display/storage)
+     *
+     * @example
+     * // CurrencyQuestion uses useMaskedValue={false}
+     * // User types: 1234
+     * // User sees: "1,234" (with thousands separator)
+     * // onChange receives: "1234" (raw number for calculations)
+     */
     useMaskedValue?: boolean;
 }
 export type MaskedFieldRef = Ref<MaskedFieldElementType>;
-export declare const MaskedField: ForwardedRefComponent<MaskedFieldProps, MaskedFieldElementType>;
+declare const MaskedField: ForwardedRefComponent<MaskedFieldProps, MaskedFieldElementType>;
+export { MaskedField };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "6.4.3",
+  "version": "6.4.4",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",