@simplybusiness/mobius 6.9.4 → 6.9.6

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 6.9.6
+
+### Patch Changes
+
+- 3f0ca52: Add lint:css and lint:css:fix scripts to enable CSS linting with stylelint
+- 67419b3: Remove `as any` type assertions and improve type safety
+  - Refactor type assertions to use safer alternatives (`as never`, `Reflect.set`, type guards)
+  - Use typed objects and proper mock patterns in tests
+  - Add `@ts-expect-error` comments where required due to TypeScript limitations (e.g., DatePicker onClick prop)
+  - Improve AddressLookup and Combobox type safety
+
+## 6.9.5
+
+### Patch Changes
+
+- 56c673f: Migrate CSS from SASS-style nesting to native CSS nesting syntax
+  - Update 62 CSS source files to use native CSS nesting with `&` prefix
+  - Switch PostCSS plugin from `postcss-nested` to `postcss-nesting`
+  - No functional changes to compiled CSS output (still Safari 14 compatible)
+
+- c54e331: Remove deprecated ForwardedRefComponent type and migrate to ref-as-prop pattern
+  - @simplybusiness/icons@4.37.0
+
 ## 6.9.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1477,8 +1477,10 @@ function useComboboxOptions({
           const result = await asyncOptions(debouncedInputValue, { signal });
           setFilteredOptions(result);
           onSearched?.(debouncedInputValue);
-        } else {
+        } else if (options) {
           setFilteredOptions(filterOptions(options, debouncedInputValue));
+        } else {
+          setError(new Error("No options provided"));
         }
       } catch (e) {
         if (e instanceof DOMException && e.name === "AbortError") {
@@ -1626,7 +1628,11 @@ var ComboboxInner = ({
     const val = getOptionValue(option);
     if (!val) return;
     if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
-      setTimeout(() => inputRef.current.focus(), 0);
+      setTimeout(() => {
+        if (inputRef && typeof inputRef !== "function" && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
       updateFilteredOptions(option.callback());
       return;
     }
@@ -1862,6 +1868,10 @@ var AddressLookup = ({
   );
   const handleSelected = (selected) => {
     setError(null);
+    if (typeof selected === "string" || !selected.id) {
+      setError(new Error("Selected option missing id"));
+      return Promise.resolve();
+    }
     return addressLookupService.get(selected.id).then(onAddressSelected).catch(setError);
   };
   const realErrorMessage = error3 && "An error occurred" || errorMessage;
@@ -2148,10 +2158,7 @@ var Success = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_ru
 ] });
 
 // src/components/Button/Button.tsx
-var import_jsx_runtime20 = (
-  // @ts-expect-error - ref type is not correct
-  require("react/jsx-runtime")
-);
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Button = ({ ref, ...props }) => {
   const {
     children,
@@ -2180,7 +2187,7 @@ var Button = ({ ref, ...props }) => {
     return variant;
   };
   const buttonVariant = getVariant(variant);
-  const classes = (0, import_dedupe15.default)(
+  otherProps.className = (0, import_dedupe15.default)(
     "mobius",
     "mobius-button",
     `--variant-${buttonVariant}`,
@@ -2192,7 +2199,6 @@ var Button = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  otherProps.className = classes;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Component, { ref, ...buttonProps, ...otherProps, children: [
     isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loading, { children }) : children,
     isSuccess && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Success, {})
@@ -2898,11 +2904,14 @@ Grid.displayName = "Grid";
 var import_react33 = require("react");
 var import_dedupe26 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var getBreakpointMap = (config) => Object.entries(config).reduce((prev, [key, value]) => {
-  const previous = Object.values(prev);
-  const lastDefined = previous[previous.length - 1];
-  return { ...prev, [key]: value || lastDefined };
-}, {});
+var getBreakpointMap = (config) => Object.entries(config).reduce(
+  (prev, [key, value]) => {
+    const previous = Object.values(prev);
+    const lastDefined = previous[previous.length - 1];
+    return { ...prev, [key]: value || lastDefined };
+  },
+  {}
+);
 var DEFAULT_SPAN = 12;
 var GridItem = ({ ref: _ref, ...props }) => {
   const {
@@ -3004,10 +3013,7 @@ Link.displayName = "Link";
 
 // src/components/LinkButton/LinkButton.tsx
 var import_dedupe29 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime36 = (
-  // @ts-expect-error Button only allows elementType of string, not React component
-  require("react/jsx-runtime")
-);
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function LinkButton({
   href,
   children,
@@ -3568,8 +3574,10 @@ function warnAboutInvalidValues(value, minValue, maxValue) {
   }
 }
 var sanitizedValue = (value, defaultValue) => {
-  const numberValue = parseFloat(value);
-  return Number.isNaN(numberValue) ? defaultValue : numberValue;
+  if (value === void 0 || Number.isNaN(value)) {
+    return defaultValue;
+  }
+  return value;
 };
 var getLabelComponent = (label, progressLabelId, showLabel) => {
   if (showLabel) {
@@ -3672,6 +3680,7 @@ var Radio = ({ ref, ...props }) => {
     setSelected,
     isRequired,
     onOverflow,
+    orientation,
     ...otherProps
   } = props;
   const realDisabled = groupDisabled || isDisabled;
@@ -3683,7 +3692,6 @@ var Radio = ({ ref, ...props }) => {
     vertical: false,
     horizontal: false
   });
-  const currentOrientation = otherProps.orientation;
   const hasIconFirst = (0, import_react43.useMemo)(() => {
     if (!children || import_react43.Children.count(children) === 0) return false;
     const firstChild = import_react43.Children.toArray(children)[0];
@@ -3693,7 +3701,7 @@ var Radio = ({ ref, ...props }) => {
   }, [children]);
   (0, import_react43.useLayoutEffect)(() => {
     if (!contentRef.current || !onOverflow) return;
-    if (currentOrientation === "vertical") {
+    if (orientation === "vertical") {
       return;
     }
     const element = contentRef.current;
@@ -3713,7 +3721,7 @@ var Radio = ({ ref, ...props }) => {
       prevOverflowRef.current = newOverflowState;
       onOverflow(newOverflowState);
     }
-  }, [label, children, onOverflow, currentOrientation]);
+  }, [label, children, onOverflow, orientation]);
   const radioClasses = {
     "--is-disabled": realDisabled,
     "--is-selected": selected === value,
@@ -3727,12 +3735,7 @@ var Radio = ({ ref, ...props }) => {
     { "--has-icon-first": hasIconFirst }
   );
   const inputClasses = (0, import_dedupe38.default)("mobius-radio__input", radioClasses);
-  const {
-    // @ts-expect-error - TS doesn't like the orientation prop
-    orientation,
-    "aria-describedby": _ariaDescribedBy,
-    ...rest
-  } = otherProps;
+  const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
   const handleChange = (event) => {
     if (setSelected) {
       setSelected(event.target.value);

package/dist/esm/index.js

@@ -1366,8 +1366,10 @@ function useComboboxOptions({
           const result = await asyncOptions(debouncedInputValue, { signal });
           setFilteredOptions(result);
           onSearched?.(debouncedInputValue);
-        } else {
+        } else if (options) {
           setFilteredOptions(filterOptions(options, debouncedInputValue));
+        } else {
+          setError(new Error("No options provided"));
         }
       } catch (e) {
         if (e instanceof DOMException && e.name === "AbortError") {
@@ -1515,7 +1517,11 @@ var ComboboxInner = ({
     const val = getOptionValue(option);
     if (!val) return;
     if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
-      setTimeout(() => inputRef.current.focus(), 0);
+      setTimeout(() => {
+        if (inputRef && typeof inputRef !== "function" && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
       updateFilteredOptions(option.callback());
       return;
     }
@@ -1751,6 +1757,10 @@ var AddressLookup = ({
   );
   const handleSelected = (selected) => {
     setError(null);
+    if (typeof selected === "string" || !selected.id) {
+      setError(new Error("Selected option missing id"));
+      return Promise.resolve();
+    }
     return addressLookupService.get(selected.id).then(onAddressSelected).catch(setError);
   };
   const realErrorMessage = error3 && "An error occurred" || errorMessage;
@@ -2066,7 +2076,7 @@ var Button = ({ ref, ...props }) => {
     return variant;
   };
   const buttonVariant = getVariant(variant);
-  const classes = classNames17(
+  otherProps.className = classNames17(
     "mobius",
     "mobius-button",
     `--variant-${buttonVariant}`,
@@ -2078,14 +2088,10 @@ var Button = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  otherProps.className = classes;
-  return (
-    // @ts-expect-error - ref type is not correct
-    /* @__PURE__ */ jsxs12(Component, { ref, ...buttonProps, ...otherProps, children: [
-      isLoading ? /* @__PURE__ */ jsx20(Loading, { children }) : children,
-      isSuccess && !isLoading && /* @__PURE__ */ jsx20(Success, {})
-    ] })
-  );
+  return /* @__PURE__ */ jsxs12(Component, { ref, ...buttonProps, ...otherProps, children: [
+    isLoading ? /* @__PURE__ */ jsx20(Loading, { children }) : children,
+    isSuccess && !isLoading && /* @__PURE__ */ jsx20(Success, {})
+  ] });
 };
 Button.displayName = "Button";
 
@@ -2795,11 +2801,14 @@ Grid.displayName = "Grid";
 import { useEffect as useEffect19, useState as useState16 } from "react";
 import classNames28 from "classnames/dedupe";
 import { jsx as jsx33 } from "react/jsx-runtime";
-var getBreakpointMap = (config) => Object.entries(config).reduce((prev, [key, value]) => {
-  const previous = Object.values(prev);
-  const lastDefined = previous[previous.length - 1];
-  return { ...prev, [key]: value || lastDefined };
-}, {});
+var getBreakpointMap = (config) => Object.entries(config).reduce(
+  (prev, [key, value]) => {
+    const previous = Object.values(prev);
+    const lastDefined = previous[previous.length - 1];
+    return { ...prev, [key]: value || lastDefined };
+  },
+  {}
+);
 var DEFAULT_SPAN = 12;
 var GridItem = ({ ref: _ref, ...props }) => {
   const {
@@ -2913,10 +2922,7 @@ function LinkButton({
     throw new Error("LinkButton requires a href prop");
   }
   const classes = classNames31("mobius", "mobius-link-button", className);
-  return (
-    // @ts-expect-error Button only allows elementType of string, not React component
-    /* @__PURE__ */ jsx36(Button, { elementType, href, className: classes, ...rest, children })
-  );
+  return /* @__PURE__ */ jsx36(Button, { elementType, href, className: classes, ...rest, children });
 }
 
 // src/components/List/List.tsx
@@ -3475,8 +3481,10 @@ function warnAboutInvalidValues(value, minValue, maxValue) {
   }
 }
 var sanitizedValue = (value, defaultValue) => {
-  const numberValue = parseFloat(value);
-  return Number.isNaN(numberValue) ? defaultValue : numberValue;
+  if (value === void 0 || Number.isNaN(value)) {
+    return defaultValue;
+  }
+  return value;
 };
 var getLabelComponent = (label, progressLabelId, showLabel) => {
   if (showLabel) {
@@ -3585,6 +3593,7 @@ var Radio = ({ ref, ...props }) => {
     setSelected,
     isRequired,
     onOverflow,
+    orientation,
     ...otherProps
   } = props;
   const realDisabled = groupDisabled || isDisabled;
@@ -3596,7 +3605,6 @@ var Radio = ({ ref, ...props }) => {
     vertical: false,
     horizontal: false
   });
-  const currentOrientation = otherProps.orientation;
   const hasIconFirst = useMemo3(() => {
     if (!children || Children7.count(children) === 0) return false;
     const firstChild = Children7.toArray(children)[0];
@@ -3606,7 +3614,7 @@ var Radio = ({ ref, ...props }) => {
   }, [children]);
   useLayoutEffect(() => {
     if (!contentRef.current || !onOverflow) return;
-    if (currentOrientation === "vertical") {
+    if (orientation === "vertical") {
       return;
     }
     const element = contentRef.current;
@@ -3626,7 +3634,7 @@ var Radio = ({ ref, ...props }) => {
       prevOverflowRef.current = newOverflowState;
       onOverflow(newOverflowState);
     }
-  }, [label, children, onOverflow, currentOrientation]);
+  }, [label, children, onOverflow, orientation]);
   const radioClasses = {
     "--is-disabled": realDisabled,
     "--is-selected": selected === value,
@@ -3640,12 +3648,7 @@ var Radio = ({ ref, ...props }) => {
     { "--has-icon-first": hasIconFirst }
   );
   const inputClasses = classNames41("mobius-radio__input", radioClasses);
-  const {
-    // @ts-expect-error - TS doesn't like the orientation prop
-    orientation,
-    "aria-describedby": _ariaDescribedBy,
-    ...rest
-  } = otherProps;
+  const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
   const handleChange = (event) => {
     if (setSelected) {
       setSelected(event.target.value);