@simplybusiness/mobius 9.1.2 → 9.2.0

package/dist/cjs/meta.json

@@ -836,22 +836,22 @@
       "format": "esm"
     },
     "src/components/Combobox/useComboboxOptions.ts": {
-      "bytes": 2726,
+      "bytes": 3075,
       "imports": [
         {
-          "path": "react",
+          "path": "@simplybusiness/mobius-hooks",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "src/components/Combobox/utils.tsx",
+          "path": "react",
           "kind": "import-statement",
-          "original": "./utils"
+          "external": true
         },
         {
-          "path": "@simplybusiness/mobius-hooks",
+          "path": "src/components/Combobox/utils.tsx",
           "kind": "import-statement",
-          "external": true
+          "original": "./utils"
         }
       ],
       "format": "esm"
@@ -2832,7 +2832,7 @@
       "format": "esm"
     },
     "src/components/Text/Text.tsx": {
-      "bytes": 1697,
+      "bytes": 1709,
       "imports": [
         {
           "path": "classnames/dedupe",
@@ -3559,7 +3559,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 352291
+      "bytes": 352764
     },
     "dist/cjs/index.js": {
       "imports": [
@@ -3779,12 +3779,12 @@
           "external": true
         },
         {
-          "path": "react",
+          "path": "@simplybusiness/mobius-hooks",
           "kind": "require-call",
           "external": true
         },
         {
-          "path": "@simplybusiness/mobius-hooks",
+          "path": "react",
           "kind": "require-call",
           "external": true
         },
@@ -4793,7 +4793,7 @@
           "bytesInOutput": 2569
         },
         "src/components/Combobox/useComboboxOptions.ts": {
-          "bytesInOutput": 2380
+          "bytesInOutput": 2613
         },
         "src/components/Combobox/Combobox.tsx": {
           "bytesInOutput": 11892
@@ -5171,7 +5171,7 @@
           "bytesInOutput": 2413
         }
       },
-      "bytes": 213830
+      "bytes": 214063
     }
   }
 }

package/dist/esm/{MaskedField-FRCJBGMX.js → MaskedField-U2CL5FHC.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   TextField
-} from "./chunk-YUDNS4SZ.js";
+} from "./chunk-XGQ4SX2S.js";
 
 // src/components/MaskedField/MaskedField.tsx
 import { useCallback, useEffect } from "react";
@@ -139,4 +139,4 @@ MaskedField.displayName = "MaskedField";
 export {
   MaskedField
 };
-//# sourceMappingURL=MaskedField-FRCJBGMX.js.map
+//# sourceMappingURL=MaskedField-U2CL5FHC.js.map

package/dist/esm/{chunk-YUDNS4SZ.js → chunk-XGQ4SX2S.js}

@@ -488,7 +488,7 @@ import { useCallback as useCallback4, useState as useState9 } from "react";
 // src/components/Combobox/Combobox.tsx
 import { useOnUnmount } from "@simplybusiness/mobius-hooks";
 import classNames14 from "classnames/dedupe";
-import { useEffect as useEffect6, useId as useId4, useRef as useRef4, useState as useState8 } from "react";
+import { useEffect as useEffect6, useId as useId4, useRef as useRef5, useState as useState8 } from "react";
 
 // src/hooks/useBreakpoint/useBreakpoint.tsx
 import {
@@ -1253,8 +1253,8 @@ function useComboboxHighlight(options) {
 }
 
 // src/components/Combobox/useComboboxOptions.ts
-import { useEffect as useEffect5, useState as useState7 } from "react";
 import { useDebouncedValue as useDebouncedValue2 } from "@simplybusiness/mobius-hooks";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState7 } from "react";
 function useComboboxOptions({
   options,
   asyncOptions,
@@ -1272,6 +1272,10 @@ function useComboboxOptions({
   );
   const [isLoading, setIsLoading] = useState7(false);
   const [error3, setError] = useState7(null);
+  const asyncOptionsRef = useRef4(asyncOptions);
+  asyncOptionsRef.current = asyncOptions;
+  const onSearchedRef = useRef4(onSearched);
+  onSearchedRef.current = onSearched;
   useEffect5(() => {
     const controller = new AbortController();
     const { signal } = controller;
@@ -1279,14 +1283,16 @@ function useComboboxOptions({
       setIsLoading(true);
       setError(null);
       try {
-        if (asyncOptions) {
+        if (asyncOptionsRef.current) {
           if (debouncedInputValue.length < minSearchLength) {
             setFilteredOptions(void 0);
             return;
           }
-          const result = await asyncOptions(debouncedInputValue, { signal });
+          const result = await asyncOptionsRef.current(debouncedInputValue, {
+            signal
+          });
           setFilteredOptions(result);
-          onSearched?.(debouncedInputValue);
+          onSearchedRef.current?.(debouncedInputValue);
         } else if (options) {
           setFilteredOptions(filterOptions(options, debouncedInputValue));
         } else {
@@ -1312,11 +1318,9 @@ function useComboboxOptions({
   }, [
     debouncedInputValue,
     options,
-    asyncOptions,
     delay,
     minSearchLength,
-    skipNextDebounceRef,
-    onSearched
+    skipNextDebounceRef
   ]);
   function updateFilteredOptions(newOptions) {
     setIsLoading(true);
@@ -1358,8 +1362,8 @@ var ComboboxInner = ({
     errorMessage,
     ...otherProps
   } = props;
-  const skipNextDebounceRef = useRef4(false);
-  const fallbackRef = useRef4(null);
+  const skipNextDebounceRef = useRef5(false);
+  const fallbackRef = useRef5(null);
   const [inputValue, setInputValue] = useState8(defaultValue || "");
   const [isOpen, setIsOpen] = useState8(false);
   const [isChanging, setIsChanging] = useState8(false);
@@ -1386,9 +1390,9 @@ var ComboboxInner = ({
   const inputRef = ref || fallbackRef;
   const listboxId = useId4();
   const statusId = useId4();
-  const blurTimeoutRef = useRef4(null);
-  const userInteractedRef = useRef4(false);
-  const justSelectedRef = useRef4(false);
+  const blurTimeoutRef = useRef5(null);
+  const userInteractedRef = useRef5(false);
+  const justSelectedRef = useRef5(false);
   const { down } = useBreakpoint();
   const isMobile = down("md");
   useEffect6(() => {
@@ -2045,7 +2049,7 @@ var Button = ({ ref, ...props }) => {
 Button.displayName = "Button";
 
 // src/components/Checkbox/Checkbox.tsx
-import { useRef as useRef5, useId as useId5, useState as useState10, useEffect as useEffect7 } from "react";
+import { useRef as useRef6, useId as useId5, useState as useState10, useEffect as useEffect7 } from "react";
 import classNames20 from "classnames/dedupe";
 import { squareTick, square } from "@simplybusiness/icons";
 import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -2069,7 +2073,7 @@ var Checkbox = ({ ref, ...props }) => {
     ...rest
   } = props;
   const [checked, setChecked] = useState10(defaultSelected);
-  const fallbackRef = useRef5(null);
+  const fallbackRef = useRef6(null);
   const refObj = ref || fallbackRef;
   const inputId = useId5();
   const isControlled = typeof selected === "boolean";
@@ -2156,7 +2160,7 @@ import {
   isValidElement,
   useEffect as useEffect8,
   useId as useId6,
-  useRef as useRef6,
+  useRef as useRef7,
   useState as useState11
 } from "react";
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -2178,8 +2182,8 @@ var CheckboxGroup = ({ ref, ...props }) => {
     ...rest
   } = props;
   const [selected, setSelected] = useState11(defaultValue);
-  const isInitializedRef = useRef6(false);
-  const prevDefaultValueRef = useRef6(defaultValue);
+  const isInitializedRef = useRef7(false);
+  const prevDefaultValueRef = useRef7(defaultValue);
   useEffect8(() => {
     const hasChanged = defaultValue.length !== prevDefaultValueRef.current.length || defaultValue.some(
       (val, index) => val !== prevDefaultValueRef.current[index]
@@ -2295,7 +2299,7 @@ Container.displayName = "Container";
 
 // src/components/DateField/DateField.tsx
 import classNames23 from "classnames/dedupe";
-import { useEffect as useEffect9, useRef as useRef7, useState as useState12 } from "react";
+import { useEffect as useEffect9, useRef as useRef8, useState as useState12 } from "react";
 
 // src/components/DateField/validation.ts
 var convertToDateFormat = (date, format) => {
@@ -2345,7 +2349,7 @@ var DateField = ({ ref, ...props }) => {
   } = props;
   const [error3, setError] = useState12(errorMessage);
   const [isInvalid, setIsInvalid] = useState12(void 0);
-  const localRef = useRef7(null);
+  const localRef = useRef8(null);
   const classes = classNames23("mobius-date-field", className);
   const formattedMin = min ? convertToDateFormat(min, format) : void 0;
   const formattedMax = max ? convertToDateFormat(max, format) : void 0;
@@ -2418,7 +2422,7 @@ Content.displayName = "Content";
 
 // src/components/Drawer/Drawer.tsx
 import classNames24 from "classnames/dedupe";
-import { useEffect as useEffect10, useId as useId7, useMemo as useMemo2, useRef as useRef8, useState as useState13 } from "react";
+import { useEffect as useEffect10, useId as useId7, useMemo as useMemo2, useRef as useRef9, useState as useState13 } from "react";
 
 // src/components/Drawer/DrawerContext.tsx
 import { createContext } from "react";
@@ -2443,7 +2447,7 @@ var Drawer = ({ ref, ...props }) => {
     onClose,
     children
   } = props;
-  const dialogRef = useRef8(null);
+  const dialogRef = useRef9(null);
   const [shouldTransition, setShouldTransition] = useState13(false);
   const { close } = useDialog({
     ref: dialogRef,
@@ -3027,7 +3031,7 @@ Header2.displayName = "Header";
 
 // src/components/Modal/Modal.tsx
 import classNames37 from "classnames/dedupe";
-import { useEffect as useEffect12, useMemo as useMemo3, useRef as useRef9, useState as useState16 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo3, useRef as useRef10, useState as useState16 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
 var Modal = ({ ref, ...props }) => {
@@ -3046,7 +3050,7 @@ var Modal = ({ ref, ...props }) => {
   useEffect12(() => {
     setShouldTransition(supportsDialog());
   }, []);
-  const dialogRef = useRef9(null);
+  const dialogRef = useRef10(null);
   const { close } = useDialog({
     ref: dialogRef,
     isOpen,
@@ -3099,7 +3103,7 @@ Modal2.displayName = "Modal";
 
 // src/components/NumberField/NumberField.tsx
 import classNames38 from "classnames/dedupe";
-import { useCallback as useCallback5, useEffect as useEffect13, useRef as useRef10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect13, useRef as useRef11 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var NumberField = ({ ref, ...props }) => {
   const {
@@ -3116,7 +3120,7 @@ var NumberField = ({ ref, ...props }) => {
     onBlur: customOnBlur,
     ...rest
   } = otherProps;
-  const focusedInputRef = useRef10(null);
+  const focusedInputRef = useRef11(null);
   const wheelHandler = useCallback5((ev) => ev.preventDefault(), []);
   useEffect13(() => {
     return () => {
@@ -3199,7 +3203,7 @@ Option2.displayName = "Option";
 
 // src/components/PasswordField/PasswordField.tsx
 import classNames39 from "classnames/dedupe";
-import { useRef as useRef11, useState as useState17 } from "react";
+import { useRef as useRef12, useState as useState17 } from "react";
 
 // src/components/PasswordField/ShowHideButton.tsx
 import { eye, eyeSlash } from "@simplybusiness/icons";
@@ -3232,7 +3236,7 @@ var PasswordField = ({
   const [show, setShow] = useState17(false);
   const type = show ? "text" : "password";
   const classes = classNames39("mobius-password-field", className);
-  const localRef = useRef11(null);
+  const localRef = useRef12(null);
   const handleShowHideButtonClick = () => {
     const selectionStart = localRef.current?.selectionStart;
     const selectionEnd = localRef.current?.selectionEnd;
@@ -3271,13 +3275,13 @@ import {
 } from "@floating-ui/react";
 import { cross as cross3 } from "@simplybusiness/icons";
 import classNames40 from "classnames/dedupe";
-import { cloneElement as cloneElement9, useRef as useRef12, useState as useState18 } from "react";
+import { cloneElement as cloneElement9, useRef as useRef13, useState as useState18 } from "react";
 import { useWindowEvent as useWindowEvent2 } from "@simplybusiness/mobius-hooks";
 import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
 var OFFSET_FROM_CONTENT_DEFAULT = 10;
 var Popover = (props) => {
   const { trigger, children, onOpen, onClose, className } = props;
-  const arrowRef = useRef12(null);
+  const arrowRef = useRef13(null);
   const [isOpen, setIsOpen] = useState18(false);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
@@ -3489,7 +3493,7 @@ import {
   isValidElement as isValidElement5,
   useLayoutEffect,
   useMemo as useMemo4,
-  useRef as useRef13
+  useRef as useRef14
 } from "react";
 import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 var Radio = ({ ref, ...props }) => {
@@ -3515,8 +3519,8 @@ var Radio = ({ ref, ...props }) => {
   const isMultiline = label && children;
   const isControlled = selected !== void 0;
   const isChecked = isControlled ? selected === value : defaultChecked;
-  const contentRef = useRef13(null);
-  const prevOverflowRef = useRef13({
+  const contentRef = useRef14(null);
+  const prevOverflowRef = useRef14({
     vertical: false,
     horizontal: false
   });
@@ -3614,7 +3618,7 @@ import {
   useCallback as useCallback6,
   useEffect as useEffect14,
   useId as useId10,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState19
 } from "react";
 import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -3646,7 +3650,7 @@ var RadioGroup = ({ ref, ...props }) => {
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
   const [selected, setSelected] = useState19(defaultSelected);
-  const overflowsRef = useRef14({});
+  const overflowsRef = useRef15({});
   const [hasOverflow, setHasOverflow] = useState19(false);
   useEffect14(() => {
     if (value !== void 0) {
@@ -3859,7 +3863,7 @@ Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
 import classNames47 from "classnames/dedupe";
-import { useRef as useRef15, useState as useState20 } from "react";
+import { useRef as useRef16, useState as useState20 } from "react";
 
 // src/components/Slider/helpers.ts
 import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
@@ -3892,7 +3896,7 @@ var Slider = (props) => {
     formatOptions,
     isDisabled = false
   } = props;
-  const trackRef = useRef15(null);
+  const trackRef = useRef16(null);
   const [currentValue, setCurrentValue] = useState20(
     value || defaultValue || 0
   );
@@ -4404,7 +4408,7 @@ Toaster.displayName = "Toaster";
 
 // src/components/Trust/Trust.tsx
 import classNames62 from "classnames/dedupe";
-import { useEffect as useEffect17, useRef as useRef16, useState as useState22 } from "react";
+import { useEffect as useEffect17, useRef as useRef17, useState as useState22 } from "react";
 
 // src/components/Trust/constants.ts
 var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
@@ -4481,7 +4485,7 @@ var Trust = ({ ref, ...props }) => {
     className
   } = props;
   const [isMounted, setIsMounted] = useState22(false);
-  const trustRef = useRef16(null);
+  const trustRef = useRef17(null);
   const {
     templateId,
     className: variantClassName,
@@ -4541,7 +4545,7 @@ var Trust = ({ ref, ...props }) => {
 
 // src/components/ExpandableText/ExpandableText.tsx
 import classNames63 from "classnames/dedupe";
-import { useEffect as useEffect18, useId as useId12, useRef as useRef17, useState as useState23 } from "react";
+import { useEffect as useEffect18, useId as useId12, useRef as useRef18, useState as useState23 } from "react";
 import { jsx as jsx74, jsxs as jsxs34 } from "react/jsx-runtime";
 var ExpandableText = ({ ref, ...props }) => {
   const {
@@ -4558,7 +4562,7 @@ var ExpandableText = ({ ref, ...props }) => {
   } = props;
   const [isExpanded, setIsExpanded] = useState23(false);
   const [isCollapsed, setIsCollapsed] = useState23(false);
-  const textRef = useRef17(null);
+  const textRef = useRef18(null);
   const { down } = useBreakpoint();
   const baseId = useId12();
   const expandButtonId = `expandable-text-expand-${baseId}`;
@@ -4628,7 +4632,7 @@ ExpandableText.displayName = "ExpandableText";
 // src/components/MaskedField/index.tsx
 import loadable from "@loadable/component";
 import { jsx as jsx75 } from "react/jsx-runtime";
-var LoadableMaskedField = loadable(() => import("./MaskedField-FRCJBGMX.js"), {
+var LoadableMaskedField = loadable(() => import("./MaskedField-U2CL5FHC.js"), {
   resolveComponent: (mod) => mod.MaskedField
 });
 function MaskedField(props) {
@@ -4732,4 +4736,4 @@ export {
   ExpandableText,
   MaskedField
 };
-//# sourceMappingURL=chunk-YUDNS4SZ.js.map
+//# sourceMappingURL=chunk-XGQ4SX2S.js.map