@simplybusiness/mobius 6.4.2 → 6.4.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 6.4.4
+
+### Patch Changes
+
+- 3da43d9: Show "placeholder" option in paler colour for required select inputs
+
+## 6.4.3
+
+### Patch Changes
+
+- 2a09422: Change colour of input text to be darker then placeholder
+
 ## 6.4.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -3902,9 +3902,9 @@ var Segment = (props) => {
 Segment.displayName = "Segment";
 
 // src/components/Select/Select.tsx
+var import_icons12 = require("@simplybusiness/icons");
 var import_dedupe43 = __toESM(require("classnames/dedupe"));
 var import_react66 = require("react");
-var import_icons12 = require("@simplybusiness/icons");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var Select = (0, import_react66.forwardRef)((props, ref) => {
   const {
@@ -3973,6 +3973,7 @@ var Select = (0, import_react66.forwardRef)((props, ref) => {
           "aria-invalid": !!errorMessage,
           "aria-describedby": describedBy,
           "aria-required": isRequired,
+          required: isRequired,
           onChange: handleChange
         }
       ),
@@ -4575,98 +4576,132 @@ ExpandableText.displayName = "ExpandableText";
 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
+var useAcceptHandler = (onChange, useMaskedValue, name) => {
+  return (0, import_react83.useCallback)(
+    (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 = (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,
-    setValue
-  } = (0, import_react_imask.useIMask)(mask, {
-    defaultValue: value || defaultValue
-  });
+var useCombinedRef = (imaskRef, forwardedRef) => {
+  return (0, import_react83.useCallback)(
+    (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 (0, import_react83.useCallback)(
+    (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 } = (0, import_react_imask.useIMask)(mask, { onAccept });
+  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
+  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
   (0, import_react83.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime71.jsx)(
+    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 } = (0, import_react_imask.useIMask)(mask, { onAccept });
+  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
+  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     TextField,
     {
       ...textFieldProps,
-      ref: inputRef,
-      value: maskedValue,
-      onChange: handleChange,
+      ref: combinedRef,
+      name,
       onBlur: handleBlur,
-      "aria-describedby": ariaDescribedBy,
-      "aria-label": ariaLabel
+      defaultValue: defaultValue?.toString()
     }
   );
+};
+var MaskedField = (0, import_react83.forwardRef)((props, forwardedRef) => {
+  const { value, defaultValue, ...rest } = props;
+  if ("value" in props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      ControlledMaskedField,
+      {
+        ...rest,
+        value: value ?? "",
+        forwardedRef
+      }
+    );
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      UncontrolledMaskedField,
+      {
+        ...rest,
+        defaultValue,
+        forwardedRef
+      }
+    );
+  }
 });
 MaskedField.displayName = "MaskedField";