@simplybusiness/mobius 6.1.1 → 6.2.0

package/dist/esm/index.js

@@ -2482,7 +2482,8 @@ import { createContext } from "react";
 var DrawerContext = createContext({
   onClose: () => {
   },
-  closeLabel: void 0
+  closeLabel: void 0,
+  headerId: void 0
 });
 
 // src/components/Drawer/Drawer.tsx
@@ -2511,7 +2512,8 @@ var Drawer = forwardRef19((props, ref) => {
       CSSVariable: TRANSITION_CSS_VARIABLE
     }
   });
-  const hiddenId = `screen-reader-announce-${useId7()}`;
+  const hiddenId = `dialog-screen-reader-announce-${useId7()}`;
+  const headerId = `dialog-header-${useId7()}`;
   const dialogClasses = classNames24(
     "mobius",
     "mobius-drawer",
@@ -2527,9 +2529,10 @@ var Drawer = forwardRef19((props, ref) => {
   const contextValue = useMemo(
     () => ({
       onClose: close,
-      closeLabel
+      closeLabel,
+      headerId
     }),
-    [close, closeLabel]
+    [close, closeLabel, headerId]
   );
   return /* @__PURE__ */ jsxs15(
     "dialog",
@@ -2539,6 +2542,7 @@ var Drawer = forwardRef19((props, ref) => {
       onCancel: close,
       className: dialogClasses,
       "aria-describedby": hiddenId,
+      "aria-labelledby": headerId,
       children: [
         /* @__PURE__ */ jsx28(VisuallyHidden, { children: /* @__PURE__ */ jsx28("div", { id: hiddenId, children: announce }) }),
         /* @__PURE__ */ jsx28(DrawerContext.Provider, { value: contextValue, children })
@@ -2551,8 +2555,8 @@ Drawer.displayName = "Drawer";
 // src/components/Drawer/useDrawer.ts
 import { useContext } from "react";
 var useDrawer = () => {
-  const { onClose, closeLabel } = useContext(DrawerContext);
-  return { onClose, closeLabel };
+  const { onClose, closeLabel, headerId } = useContext(DrawerContext);
+  return { onClose, closeLabel, headerId };
 };
 
 // src/components/Drawer/Header.tsx
@@ -2561,9 +2565,9 @@ import { cross } from "@simplybusiness/icons";
 import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var Header = forwardRef20(
   ({ children, ...otherProps }, ref) => {
-    const { onClose, closeLabel } = useDrawer();
+    const { onClose, closeLabel, headerId } = useDrawer();
     return /* @__PURE__ */ jsxs16("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
-      children,
+      /* @__PURE__ */ jsx29("h2", { id: headerId, children }),
       /* @__PURE__ */ jsxs16(
         Button,
         {
@@ -3191,6 +3195,7 @@ Modal2.displayName = "Modal";
 
 // src/components/NumberField/NumberField.tsx
 import classNames38 from "classnames/dedupe";
+import { useCallback as useCallback5, useEffect as useEffect21, useRef as useRef13 } from "react";
 import { forwardRef as forwardRef35 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var NumberField = forwardRef35((props, ref) => {
@@ -3203,6 +3208,14 @@ var NumberField = forwardRef35((props, ref) => {
     className,
     ...otherProps
   } = props;
+  const focusedInputRef = useRef13(null);
+  const wheelHandler = useCallback5((ev) => ev.preventDefault(), []);
+  useEffect21(() => {
+    return () => {
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = null;
+    };
+  }, [wheelHandler]);
   const containerClasses = classNames38("mobius-number-field", className, {
     "--hide-spin-buttons": hideSpinButtons
   });
@@ -3215,10 +3228,33 @@ var NumberField = forwardRef35((props, ref) => {
       event.preventDefault();
     }
   };
+  const {
+    onFocus: customOnFocus,
+    onBlur: customOnBlur,
+    ...rest
+  } = otherProps;
+  const forwardedProps = {
+    ...rest,
+    onFocus: (e) => {
+      const el = e.currentTarget;
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = el;
+      el.addEventListener("wheel", wheelHandler, { passive: false });
+      customOnFocus?.(e);
+    },
+    onBlur: (e) => {
+      const el = e.currentTarget;
+      el.removeEventListener("wheel", wheelHandler);
+      if (focusedInputRef.current === el) {
+        focusedInputRef.current = null;
+      }
+      customOnBlur?.(e);
+    }
+  };
   return /* @__PURE__ */ jsx45(
     TextField,
     {
-      ...otherProps,
+      ...forwardedProps,
       className: containerClasses,
       onBeforeInput: handleBeforeInput,
       type: "number",
@@ -3247,7 +3283,7 @@ Option2.displayName = "Option";
 
 // src/components/PasswordField/PasswordField.tsx
 import classNames39 from "classnames/dedupe";
-import { forwardRef as forwardRef37, useState as useState18, useRef as useRef13 } from "react";
+import { forwardRef as forwardRef37, useState as useState18, useRef as useRef14 } from "react";
 
 // src/components/PasswordField/ShowHideButton.tsx
 import { jsx as jsx47 } from "react/jsx-runtime";
@@ -3276,7 +3312,7 @@ var PasswordField = forwardRef37(
     const [show, setShow] = useState18(false);
     const type = show ? "text" : "password";
     const classes = classNames39("mobius-password-field", className);
-    const localRef = useRef13(null);
+    const localRef = useRef14(null);
     const handleShowHideButtonClick = () => {
       setShow((oldShow) => !oldShow);
       localRef.current?.focus();
@@ -3309,12 +3345,12 @@ import {
 } from "@floating-ui/react";
 import { cross as cross3 } from "@simplybusiness/icons";
 import classNames40 from "classnames";
-import { cloneElement as cloneElement9, useRef as useRef14, useState as useState19 } from "react";
+import { cloneElement as cloneElement9, useRef as useRef15, useState as useState19 } from "react";
 import { Fragment as Fragment3, jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
 var OFFSET_FROM_CONTENT_DEFAULT = 10;
 var Popover = (props) => {
   const { trigger, children, onOpen, onClose, className } = props;
-  const arrowRef = useRef14(null);
+  const arrowRef = useRef15(null);
   const [isOpen, setIsOpen] = useState19(false);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
@@ -3618,9 +3654,8 @@ import {
   cloneElement as cloneElement10,
   forwardRef as forwardRef40,
   isValidElement as isValidElement6,
-  useEffect as useEffect21,
+  useEffect as useEffect22,
   useId as useId10,
-  useRef as useRef15,
   useState as useState20
 } from "react";
 import { jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -3652,15 +3687,11 @@ var RadioGroup = forwardRef40((props, ref) => {
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
   const [selected, setSelected] = useState20(defaultSelected);
-  const selectedRef = useRef15(null);
-  useEffect21(() => {
+  useEffect22(() => {
     if (value !== void 0) {
       setSelected(value);
     }
   }, [value]);
-  useEffect21(() => {
-    selectedRef.current?.focus();
-  });
   const validationClasses = useValidationClasses({
     validationState,
     isInvalid
@@ -3711,7 +3742,6 @@ var RadioGroup = forwardRef40((props, ref) => {
         label && /* @__PURE__ */ jsx52(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
         /* @__PURE__ */ jsx52("div", { className: radioWrapperClasses, children: Children8.map(children, (child) => {
           if (isValidElement6(child)) {
-            const props2 = child.props;
             return cloneElement10(
               child,
               {
@@ -3723,8 +3753,7 @@ var RadioGroup = forwardRef40((props, ref) => {
                 setSelected,
                 isRequired,
                 "aria-describedby": describedBy,
-                onChange,
-                ref: props2.value === selected ? selectedRef : void 0
+                onChange
               }
             );
           }
@@ -3860,7 +3889,7 @@ import classNames47 from "classnames/dedupe";
 import { useRef as useRef16, useState as useState21 } from "react";
 
 // src/components/Slider/helpers.ts
-import { useCallback as useCallback5, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
 function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
   if (!formatOptions) {
     return value?.toString() || "";
@@ -3984,7 +4013,7 @@ SVG.displayName = "SVG";
 import {
   forwardRef as forwardRef43,
   useState as useState22,
-  useEffect as useEffect22
+  useEffect as useEffect23
 } from "react";
 import classNames49 from "classnames/dedupe";
 import { jsx as jsx58, jsxs as jsxs29 } from "react/jsx-runtime";
@@ -3997,7 +4026,7 @@ var Switch = forwardRef43((props, ref) => {
     ...otherProps
   } = props;
   const [enabled, setEnabled] = useState22(checked);
-  useEffect22(() => {
+  useEffect23(() => {
     setEnabled(checked);
   }, [checked]);
   const classes = classNames49(
@@ -4233,7 +4262,7 @@ Title.displayName = "Title";
 
 // src/components/Trust/Trust.tsx
 import classNames60 from "classnames/dedupe";
-import { forwardRef as forwardRef54, useEffect as useEffect23, useRef as useRef17, useState as useState23 } from "react";
+import { forwardRef as forwardRef54, useEffect as useEffect24, useRef as useRef17, useState as useState23 } from "react";
 
 // src/components/Trust/constants.ts
 var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
@@ -4330,13 +4359,13 @@ var Trust = forwardRef54((props, ref) => {
     },
     className
   );
-  useEffect23(() => {
+  useEffect24(() => {
     const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
     if (isMounted && hasTrustpilotLoaded) {
       window.Trustpilot.loadFromElement(trustRef.current, true);
     }
   }, [isMounted]);
-  useEffect23(() => {
+  useEffect24(() => {
     setIsMounted(true);
   }, []);
   if (!isMounted) return /* @__PURE__ */ jsx69("div", { style: styles });
@@ -4362,7 +4391,7 @@ var Trust = forwardRef54((props, ref) => {
 });
 
 // src/components/ExpandableText/ExpandableText.tsx
-import { useState as useState24, useEffect as useEffect24, useRef as useRef18, forwardRef as forwardRef55, useId as useId12 } from "react";
+import { useState as useState24, useEffect as useEffect25, useRef as useRef18, forwardRef as forwardRef55, useId as useId12 } from "react";
 import classNames61 from "classnames/dedupe";
 import { jsx as jsx70, jsxs as jsxs32 } from "react/jsx-runtime";
 var ExpandableText = forwardRef55((props, ref) => {
@@ -4385,7 +4414,7 @@ var ExpandableText = forwardRef55((props, ref) => {
   const baseId = useId12();
   const expandButtonId = `expandable-text-expand-${baseId}`;
   const shouldCollapse = breakpoint ? down(breakpoint) : true;
-  useEffect24(() => {
+  useEffect25(() => {
     if (!shouldCollapse || !textRef.current) {
       setIsCollapsed(false);
       return;
@@ -4446,6 +4475,67 @@ var ExpandableText = forwardRef55((props, ref) => {
   );
 });
 ExpandableText.displayName = "ExpandableText";
+
+// src/components/MaskedField/MaskedField.tsx
+import { forwardRef as forwardRef56 } from "react";
+import { useIMask } from "react-imask";
+import { jsx as jsx71 } from "react/jsx-runtime";
+var MaskedField = forwardRef56((props, ref) => {
+  const {
+    mask,
+    value,
+    defaultValue,
+    useMaskedValue = false,
+    onChange,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    ...textFieldProps
+  } = props;
+  const { ref: maskRef, value: maskedValue } = 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__ */ jsx71(
+    TextField,
+    {
+      ...textFieldProps,
+      ref: inputRef,
+      value: maskedValue,
+      onChange: () => {
+      },
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel
+    }
+  );
+});
+MaskedField.displayName = "MaskedField";
 export {
   Accordion,
   AddressLookup,
@@ -4479,6 +4569,7 @@ export {
   Logo,
   LoqateAddressLookupService,
   MIN_MAX_ERROR,
+  MaskedField,
   Modal2 as Modal,
   NumberField,
   Option2 as Option,

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

@@ -18,4 +18,5 @@ export interface DrawerProps {
 export type DrawerContextProps = {
     onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
     closeLabel: string | undefined;
+    headerId?: string;
 };

package/dist/types/src/components/Drawer/useDrawer.d.ts

@@ -1,4 +1,5 @@
 export declare const useDrawer: () => {
     onClose: (event?: import("react").SyntheticEvent<HTMLElement, Event>) => void;
     closeLabel: string | undefined;
+    headerId: string | undefined;
 };

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

@@ -0,0 +1,14 @@
+import type { Ref, RefAttributes } from "react";
+import type { ReactMaskOpts } from "react-imask";
+import type { DOMProps } from "../../types/dom";
+import type { ForwardedRefComponent } from "../../types/components";
+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) */
+    useMaskedValue?: boolean;
+}
+export type MaskedFieldRef = Ref<MaskedFieldElementType>;
+export declare const MaskedField: ForwardedRefComponent<MaskedFieldProps, MaskedFieldElementType>;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MaskedField } from ".";
+type StoryType = StoryObj<typeof MaskedField>;
+declare const meta: Meta<typeof MaskedField>;
+export declare const PhoneNumber: StoryType;
+export declare const CommaSeparatedNumber: StoryType;
+export default meta;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from "./MaskedField";

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

@@ -1,5 +1,5 @@
 import { type Ref, type RefAttributes } from "react";
-import type { ForwardedRefComponent } from "../../types/components";
+import type { ForwardedRefComponent } from "../../types";
 import { type TextFieldElementType, type TextFieldProps } from "../TextField";
 export type NumberFieldElementType = TextFieldElementType;
 export interface NumberFieldProps extends Omit<TextFieldProps, "type" | "defaultValue" | "inputElementType">, RefAttributes<NumberFieldElementType> {

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

@@ -45,3 +45,4 @@ export * from "./Title";
 export * from "./Trust";
 export * from "./ExpandableText";
 export * from "./VisuallyHidden";
+export * from "./MaskedField";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "6.1.1",
+  "version": "6.2.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -83,11 +83,12 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
-    "@simplybusiness/icons": "^4.32.0",
+    "@simplybusiness/icons": "^4.33.0",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",
-    "react-accessible-dropdown-menu-hook": "^4.0.0"
+    "react-accessible-dropdown-menu-hook": "^4.0.0",
+    "react-imask": "^7.6.1"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": "eslint --fix"

package/src/components/Drawer/Drawer.tsx

@@ -37,7 +37,8 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
       CSSVariable: TRANSITION_CSS_VARIABLE,
     },
   });
-  const hiddenId = `screen-reader-announce-${useId()}`;
+  const hiddenId = `dialog-screen-reader-announce-${useId()}`;
+  const headerId = `dialog-header-${useId()}`;
 
   const dialogClasses = classNames(
     "mobius",
@@ -57,8 +58,9 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
     () => ({
       onClose: close,
       closeLabel,
+      headerId,
     }),
-    [close, closeLabel],
+    [close, closeLabel, headerId],
   );
 
   return (
@@ -68,6 +70,7 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
       onCancel={close}
       className={dialogClasses}
       aria-describedby={hiddenId}
+      aria-labelledby={headerId}
     >
       <VisuallyHidden>
         <div id={hiddenId}>{announce}</div>

package/src/components/Drawer/DrawerContext.tsx

@@ -4,4 +4,5 @@ import type { DrawerContextProps } from "./types";
 export const DrawerContext = createContext<DrawerContextProps>({
   onClose: () => {},
   closeLabel: undefined,
+  headerId: undefined,
 });

package/src/components/Drawer/Header.tsx

@@ -17,11 +17,11 @@ export interface HeaderProps
 
 const Header = forwardRef(
   ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {
-    const { onClose, closeLabel } = useDrawer();
+    const { onClose, closeLabel, headerId } = useDrawer();
 
     return (
       <header ref={ref} {...otherProps} className="mobius-drawer__header">
-        {children}
+        <h2 id={headerId}>{children}</h2>
         <Button
           aria-label="Close"
           variant="basic"

package/src/components/Drawer/types.ts

@@ -20,4 +20,5 @@ export interface DrawerProps {
 export type DrawerContextProps = {
   onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
   closeLabel: string | undefined;
+  headerId?: string;
 };

package/src/components/Drawer/useDrawer.ts

@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { DrawerContext } from "./DrawerContext";
 
 export const useDrawer = () => {
-  const { onClose, closeLabel } = useContext(DrawerContext);
+  const { onClose, closeLabel, headerId } = useContext(DrawerContext);
 
-  return { onClose, closeLabel };
+  return { onClose, closeLabel, headerId };
 };