@simplybusiness/mobius 9.1.2 → 9.2.0

package/dist/types/components/Text/Text.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode, RefAttributes } from "react";
 import type { DOMProps } from "../../types/dom";
 export type TextElementType = HTMLHeadingElement | HTMLParagraphElement;
-export type TextVariantType = "h1" | "h2" | "h3" | "h4" | "body" | "small" | "legal";
+export type TextVariantType = "h1" | "h2" | "h3" | "h4" | "body" | "small" | "legal" | "title";
 export type ElementType = "h1" | "h2" | "h3" | "h4" | "p" | "span";
 export interface TextProps extends DOMProps, RefAttributes<TextElementType> {
     /** HTML element for the text */

package/package.json

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

package/src/components/Combobox/useComboboxOptions.test.ts

@@ -95,6 +95,38 @@ describe("useComboboxOptions", () => {
     });
   });
 
+  describe("async options stability", () => {
+    it("should not re-fetch when asyncOptions reference changes but inputValue stays the same", async () => {
+      const asyncOptionsV1 = vi
+        .fn()
+        .mockResolvedValue([{ label: "Result", value: "1" }]);
+      const asyncOptionsV2 = vi
+        .fn()
+        .mockResolvedValue([{ label: "Result", value: "1" }]);
+
+      const { rerender } = renderHook(
+        ({ asyncOptions }) =>
+          useComboboxOptions({
+            asyncOptions,
+            inputValue: "hello",
+          }),
+        { initialProps: { asyncOptions: asyncOptionsV1 } },
+      );
+
+      await act(() => Promise.resolve());
+
+      expect(asyncOptionsV1).toHaveBeenCalledTimes(1);
+
+      // Simulate parent re-render providing a new asyncOptions reference
+      rerender({ asyncOptions: asyncOptionsV2 });
+
+      await act(() => Promise.resolve());
+
+      // Should NOT have triggered a new fetch since inputValue didn't change
+      expect(asyncOptionsV2).not.toHaveBeenCalled();
+    });
+  });
+
   describe("async options handling", () => {
     it("should handle async options", async () => {
       const asyncOptions = vi.fn().mockResolvedValue([

package/src/components/Combobox/useComboboxOptions.ts

@@ -1,7 +1,7 @@
-import { useEffect, useState } from "react";
+import { useDebouncedValue } from "@simplybusiness/mobius-hooks";
+import { useEffect, useRef, useState } from "react";
 import type { ComboboxOption, ComboboxOptions, ComboboxProps } from "./types";
 import { filterOptions } from "./utils";
-import { useDebouncedValue } from "@simplybusiness/mobius-hooks";
 
 export type UseComboboxOptionsProps<T extends ComboboxOption> = Pick<
   ComboboxProps<T>,
@@ -32,6 +32,13 @@ export function useComboboxOptions<T extends ComboboxOption>({
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
+  // Keep refs to latest callbacks so the fetch effect doesn't re-run when
+  // their references change (e.g. due to un-memoised props in parent)
+  const asyncOptionsRef = useRef(asyncOptions);
+  asyncOptionsRef.current = asyncOptions;
+  const onSearchedRef = useRef(onSearched);
+  onSearchedRef.current = onSearched;
+
   useEffect(() => {
     const controller = new AbortController();
     const { signal } = controller;
@@ -40,14 +47,16 @@ export function useComboboxOptions<T extends ComboboxOption>({
       setIsLoading(true);
       setError(null);
       try {
-        if (asyncOptions) {
+        if (asyncOptionsRef.current) {
           if (debouncedInputValue.length < minSearchLength) {
             setFilteredOptions(undefined);
             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 {
@@ -76,11 +85,9 @@ export function useComboboxOptions<T extends ComboboxOption>({
   }, [
     debouncedInputValue,
     options,
-    asyncOptions,
     delay,
     minSearchLength,
     skipNextDebounceRef,
-    onSearched,
   ]);
 
   function updateFilteredOptions(newOptions: Promise<ComboboxOptions<T>>) {

package/src/components/Text/Text.css

@@ -88,6 +88,15 @@
     color: var(--color-text-medium);
   }
 
+  /* Title variant */
+  &:where(.--is-title) {
+    color: var(--color-text);
+    font-size: var(--font-size-small-title);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+    margin: var(--size-md) 0;
+  }
+
   /* Compact text */
   &:where(.--has-line-height-tight) {
     line-height: var(--line-height-tight);

package/src/components/Text/Text.stories.tsx

@@ -111,6 +111,13 @@ export const VariantLegal: StoryType = {
   },
 };
 
+export const VariantTitle: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Variant title</Text>,
+  args: {
+    variant: "title",
+  },
+};
+
 export const Themed: StoryType = {
   render: (args: TextProps) => <Text {...args}>Sample Text</Text>,
   args: {

package/src/components/Text/Text.tsx

@@ -10,7 +10,8 @@ export type TextVariantType =
   | "h4"
   | "body"
   | "small"
-  | "legal";
+  | "legal"
+  | "title";
 export type ElementType = "h1" | "h2" | "h3" | "h4" | "p" | "span";
 export interface TextProps extends DOMProps, RefAttributes<TextElementType> {
   /** HTML element for the text */