@simplybusiness/mobius 3.3.2 → 3.4.0

package/dist/esm/components/Chopin/TradeSelector/useFetchTrades/useFetchTrades.js

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useState } from "react";
+import debounce from "lodash.debounce";
+export const useFetchTrades = (endpoint, debounceInMs) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [trades, setTrades] = useState(null);
+    const [fetchTrades, setFetchTrades] = useState(false);
+    const getTrades = useCallback(
+    // eslint-disable-next-line consistent-return
+    async (signal) => {
+        try {
+            const response = await fetch(endpoint, {
+                signal,
+            });
+            const json = await response.json();
+            setIsLoading(false);
+            if (!response.ok) {
+                throw new Error(json.message || json.statusText);
+            }
+            setError(null);
+            return setTrades(json.results);
+        }
+        catch (err) {
+            if (err instanceof Error && err.name !== "AbortError") {
+                // eslint-disable-next-line no-console
+                console.error(err);
+                setError(err);
+            }
+        }
+    }, [endpoint]);
+    useEffect(() => {
+        const controller = new AbortController();
+        if (fetchTrades) {
+            setIsLoading(true);
+            const fetchData = debounce(async () => {
+                const { signal } = controller;
+                await getTrades(signal);
+            }, debounceInMs);
+            fetchData();
+        }
+        return () => controller.abort();
+    }, [getTrades, debounceInMs, fetchTrades]);
+    useEffect(() => {
+        if (!isLoading) {
+            setFetchTrades(false);
+        }
+    }, [isLoading]);
+    return {
+        isLoading,
+        error,
+        trades,
+        fetchTrades: setFetchTrades,
+    };
+};
+//# sourceMappingURL=useFetchTrades.js.map

package/dist/esm/components/Chopin/TradeSelector/useFetchTrades/useFetchTrades.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchTrades.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/useFetchTrades/useFetchTrades.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAGvC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAa,EAAE,YAAoB,EAAE,EAAE;IACpE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,WAAW;IAC3B,6CAA6C;IAC7C,KAAK,EAAE,MAAmB,EAAE,EAAE;QAC5B,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE;gBACrC,MAAM;aACP,CAAC,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YACnC,YAAY,CAAC,KAAK,CAAC,CAAC;YAEpB,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;gBAChB,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;aAClD;YAED,QAAQ,CAAC,IAAI,CAAC,CAAC;YACf,OAAO,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAChC;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,GAAG,YAAY,KAAK,IAAI,GAAG,CAAC,IAAI,KAAK,YAAY,EAAE;gBACrD,sCAAsC;gBACtC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACnB,QAAQ,CAAC,GAAG,CAAC,CAAC;aACf;SACF;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,IAAI,WAAW,EAAE;YACf,YAAY,CAAC,IAAI,CAAC,CAAC;YAEnB,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,IAAI,EAAE;gBACpC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;gBAC9B,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC;YAC1B,CAAC,EAAE,YAAY,CAAC,CAAC;YAEjB,SAAS,EAAE,CAAC;SACb;QAED,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,EAAE;YACd,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO;QACL,SAAS;QACT,KAAK;QACL,MAAM;QACN,WAAW,EAAE,cAAc;KAC5B,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/Chopin/TradeSelector/useTradeSelectorUrl/index.js

@@ -0,0 +1,2 @@
+export * from "./useTradeSelectorUrl";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Chopin/TradeSelector/{useTradeSelector → useTradeSelectorUrl}/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/useTradeSelector/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/useTradeSelectorUrl/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/esm/components/Chopin/TradeSelector/useTradeSelectorUrl/useTradeSelectorUrl.js

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+function addQueryParam(url, key, value) {
+    if (value)
+        url.searchParams.set(key, value);
+}
+export function useTradeSelectorUrl(tradeApi, userInput, { vertical, searchScope, site } = {}) {
+    return useMemo(() => {
+        const url = new URL(tradeApi);
+        addQueryParam(url, "q", userInput);
+        addQueryParam(url, "vertical", vertical);
+        addQueryParam(url, "search_scope", searchScope);
+        addQueryParam(url, "site", site);
+        return url;
+    }, [tradeApi, userInput, vertical, searchScope, site]);
+}
+//# sourceMappingURL=useTradeSelectorUrl.js.map

package/dist/esm/components/Chopin/TradeSelector/useTradeSelectorUrl/useTradeSelectorUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTradeSelectorUrl.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/useTradeSelectorUrl/useTradeSelectorUrl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQhC,SAAS,aAAa,CAAC,GAAQ,EAAE,GAAW,EAAE,KAAc;IAC1D,IAAI,KAAK;QAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAC9C,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,QAAgB,EAChB,SAAiB,EACjB,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,KAA8B,EAAE;IAE7D,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC9B,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;QACnC,aAAa,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;QACzC,aAAa,CAAC,GAAG,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;QAChD,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;QACjC,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;AACzD,CAAC"}

package/dist/esm/components/Chopin/TradeSelector/useTradeSelectorUrl/useTradeSelectorUrl.test.js

@@ -0,0 +1,27 @@
+import { renderHook } from "@testing-library/react";
+import { useTradeSelectorUrl } from "./useTradeSelectorUrl";
+describe("useTradeSelectorUrl", () => {
+    it("should return a url", () => {
+        const { result } = renderHook(() => useTradeSelectorUrl("https://trade-api.example.com/search", "foo"));
+        expect(result.current).toBeInstanceOf(URL);
+    });
+    it("should return a url with the correct query params", () => {
+        const { result } = renderHook(() => useTradeSelectorUrl("https://trade-api.example.com/search", "foo", {
+            vertical: "bar",
+            searchScope: "baz",
+        }));
+        expect(result.current.searchParams.get("q")).toEqual("foo");
+        expect(result.current.searchParams.get("vertical")).toEqual("bar");
+        expect(result.current.searchParams.get("search_scope")).toEqual("baz");
+    });
+    it("should return a new url when the input changes", () => {
+        const { result, rerender } = renderHook(({ userInput }) => useTradeSelectorUrl("https://trade-api.example.com/search", userInput), {
+            initialProps: { userInput: "foo" },
+        });
+        const firstUrl = result.current;
+        rerender({ userInput: "bar" });
+        const secondUrl = result.current;
+        expect(firstUrl).not.toEqual(secondUrl);
+    });
+});
+//# sourceMappingURL=useTradeSelectorUrl.test.js.map

package/dist/esm/components/Chopin/TradeSelector/useTradeSelectorUrl/useTradeSelectorUrl.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTradeSelectorUrl.test.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/useTradeSelectorUrl/useTradeSelectorUrl.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,qBAAqB,EAAE,GAAG,EAAE;QAC7B,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CACjC,mBAAmB,CAAC,sCAAsC,EAAE,KAAK,CAAC,CACnE,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;QAC3D,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CACjC,mBAAmB,CAAC,sCAAsC,EAAE,KAAK,EAAE;YACjE,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;SACnB,CAAC,CACH,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5D,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACnE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACzE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACxD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CACrC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAChB,mBAAmB,CAAC,sCAAsC,EAAE,SAAS,CAAC,EACxE;YACE,YAAY,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACnC,CACF,CAAC;QACF,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC;QAChC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/B,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;QACjC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/esm/components/Chopin/index.js

@@ -1,11 +1,11 @@
+export * from "./Actions";
+export * from "./Footer";
+export * from "./Header";
 export * from "./PercentageTotalsQuestion";
 export * from "./Question";
 export * from "./QuestionGroup";
-export * from "./Steps";
 export * from "./Section";
-export * from "./TradeSelector";
-export * from "./Footer";
-export * from "./Header";
-export * from "./Actions";
+export * from "./Steps";
 export * from "./Testimonial";
+export * from "./TradeSelector";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Chopin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Chopin/index.tsx"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Chopin/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/dist/esm/hooks/useOnClickOutside/index.js

@@ -0,0 +1,2 @@
+export * from "./useOnClickOutside";
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/useOnClickOutside/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/hooks/useOnClickOutside/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/esm/hooks/useOnClickOutside/useOnClickOutside.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+export const useOnClickOutside = (ref, handler) => {
+    useEffect(() => {
+        const listener = (event) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [ref, handler]);
+};
+//# sourceMappingURL=useOnClickOutside.js.map

package/dist/esm/hooks/useOnClickOutside/useOnClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside.js","sourceRoot":"","sources":["../../../../src/hooks/useOnClickOutside/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,GAA2B,EAC3B,OAAiD,EACjD,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,KAA8B,EAAE,EAAE;YAClD,8DAA8D;YAC9D,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE;gBACrE,OAAO;aACR;YACD,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACjD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;YACpD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;AACrB,CAAC,CAAC"}

package/dist/mobius.d.ts

@@ -218,6 +218,18 @@ export declare type CheckboxRef = Ref<CheckboxElementType>;
 
 declare namespace Chopin {
     export {
+        ActionsElementType,
+        ActionsProps,
+        ActionsRef,
+        Actions,
+        FooterProps,
+        Footer,
+        LinkType,
+        HeaderProps,
+        LOGO_LINK,
+        Header,
+        OpeningHoursType,
+        OPENING_HOURS,
         PercentageTotalsQuestionProps,
         PercentageTotalsQuestion,
         Question,
@@ -226,6 +238,10 @@ declare namespace Chopin {
         QuestionGroupProps,
         QuestionGroupRef,
         QuestionGroup,
+        SectionElementType,
+        SectionProps,
+        SectionRef,
+        Section,
         StepsElementType,
         StepsProps,
         StepsRef,
@@ -234,36 +250,23 @@ declare namespace Chopin {
         StepItemProps,
         StepItemRef,
         StepItem,
-        SectionElementType,
-        SectionProps,
-        SectionRef,
-        Section,
-        ERROR_MESSAGE_SERVICE_UNAVAIALBLE,
+        TestimonialElementType,
+        TestimonialProps,
+        TestimonialRef,
+        Testimonial,
+        ERROR_MESSAGE_SERVICE_UNAVAILABLE,
         TradeSelector,
+        DialogRef,
+        InputRef,
+        TradeSelectorSearchScope,
+        TradeSelectorVertical,
         TradeProps,
-        GroupedTradeProps,
         LabelProps_2 as LabelProps,
         UrlProps,
         TradeSelectorCommonProps,
         TradeSelectorElementType,
         TradeSelectorProps,
-        TradeSelectorRef,
-        FooterProps,
-        Footer,
-        LinkType,
-        HeaderProps,
-        LOGO_LINK,
-        Header,
-        OpeningHoursType,
-        OPENING_HOURS,
-        ActionsElementType,
-        ActionsProps,
-        ActionsRef,
-        Actions,
-        TestimonialElementType,
-        TestimonialProps,
-        TestimonialRef,
-        Testimonial
+        TradeSelectorRef
     }
 }
 export { Chopin }
@@ -323,6 +326,8 @@ export declare interface DatePickerProps extends AriaDatePickerProps<DateValue>,
 
 export declare const DEFAULT_BREAKPOINT: Breakpoint;
 
+declare type DialogRef = HTMLDialogElement;
+
 export declare const Divider: {
     (props: DividerProps): JSX_2.Element;
     displayName: string;
@@ -366,7 +371,7 @@ export declare type DropdownMenuRef = Ref<DropdownMenuElementType>;
 
 export declare type ElementType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
 
-declare const ERROR_MESSAGE_SERVICE_UNAVAIALBLE = "The service is currently unavailable. Please try again later";
+declare const ERROR_MESSAGE_SERVICE_UNAVAILABLE = "The service is currently unavailable. Please try again later";
 
 export declare const ErrorMessage: {
     ({ id, errorMessage, className, }: ErrorMessageProps): JSX_2.Element | null;
@@ -490,12 +495,6 @@ export declare interface GridProps extends RefAttributes<GridElementType>, DOMPr
     justifyItems?: "start" | "end" | "center" | "stretch";
 }
 
-declare type GroupedTradeProps = {
-    name: string;
-    title: string;
-    children: TradeProps[];
-};
-
 declare const Header: FC<HeaderProps>;
 
 declare interface HeaderProps extends DOMProps {
@@ -553,6 +552,8 @@ export declare interface ImageProps extends DOMProps, IntrinsicImage {
 
 export declare type ImageRef = Ref<HTMLImageElement>;
 
+declare type InputRef = HTMLInputElement;
+
 export declare interface InteractionStateProps {
     isFocusVisible?: boolean;
     isSelected?: boolean;
@@ -1181,6 +1182,8 @@ declare type TradeSelectorCommonProps = {
     urls: UrlProps;
     onTradeSelected?: (trade: TradeProps | string) => void;
     initialTrade?: string;
+    vertical?: TradeSelectorVertical;
+    searchScope?: TradeSelectorSearchScope;
 };
 
 declare type TradeSelectorElementType = HTMLDivElement;
@@ -1189,12 +1192,17 @@ declare interface TradeSelectorProps extends Partial<TradeSelectorCommonProps>,
     /** Custom class name for setting specific CSS */
     className?: string;
     elementType?: string | React.ElementType;
+    onTradeSelected?: (trade: TradeProps | string) => void;
     labels?: LabelProps_2;
     hideLabel?: boolean;
 }
 
 declare type TradeSelectorRef = Ref<TradeSelectorElementType>;
 
+declare type TradeSelectorSearchScope = "all_verticals" | "current_and_supported_verticals" | "current_vertical" | "except_current_vertical" | "usa_contractors" | "commercial_landlord_business_types" | "contractors_combined" | "supported_for_current_vertical" | "commercial_combined_manufacturer" | "commercial_combined_wholesaler" | "commercial_combined_all";
+
+declare type TradeSelectorVertical = string;
+
 declare type UrlProps = {
     quoteRedirect: string;
     tradeApi: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -45,6 +45,7 @@
     "@react-types/breadcrumbs": "^3.4.4",
     "@react-types/button": "^3.6.2",
     "@react-types/checkbox": "^3.4.0",
+    "@react-types/dialog": "^3.4.5",
     "@react-types/link": "^3.3.4",
     "@react-types/progress": "^3.2.4",
     "@react-types/radio": "^3.3.0",
@@ -59,6 +60,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.1.2",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/node": "^18.13.0",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-modal": "^3.13.1",
@@ -66,6 +68,7 @@
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
     "color": "^4.2.3",
+    "csstype": "^3.1.1",
     "eslint": "^8.25.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -83,7 +86,7 @@
     "react-router-dom": "^6.4.2",
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.0",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.1 || ^18.0.0",
@@ -97,7 +100,6 @@
     "@react-aria/button": "^3.6.2",
     "@react-aria/calendar": "^3.0.3",
     "@react-aria/checkbox": "^3.6.0",
-    "@react-aria/combobox": "^3.4.2",
     "@react-aria/datepicker": "^3.1.2",
     "@react-aria/dialog": "^3.4.0",
     "@react-aria/focus": "^3.9.0",
@@ -105,7 +107,6 @@
     "@react-aria/interactions": "^3.12.0",
     "@react-aria/label": "^3.4.2",
     "@react-aria/link": "^3.3.4",
-    "@react-aria/listbox": "^3.7.0",
     "@react-aria/numberfield": "^3.3.0",
     "@react-aria/overlays": "^3.11.0",
     "@react-aria/progress": "^3.3.2",
@@ -119,9 +120,6 @@
     "@react-aria/visually-hidden": "^3.5.0",
     "@react-stately/calendar": "^3.0.3",
     "@react-stately/checkbox": "^3.3.0",
-    "@react-stately/collections": "^3.4.4",
-    "@react-stately/combobox": "^3.2.2",
-    "@react-stately/data": "^3.7.0",
     "@react-stately/datepicker": "^3.1.0",
     "@react-stately/numberfield": "^3.2.2",
     "@react-stately/radio": "^3.6.0",

package/src/components/Chopin/QuestionHelp/QuestionHelp.tsx

@@ -1,6 +1,7 @@
 import { useFocusRing } from "@react-aria/focus";
 import clsx from "clsx";
-import { ReactNode, useEffect, useState, useRef, useCallback } from "react";
+import { ReactNode, useEffect, useState, useRef } from "react";
+import { useOnClickOutside } from "../../../hooks/useOnClickOutside";
 import { useWindowEvent } from "../../../hooks/useWindowEvent";
 
 export interface QuestionHelpProps {
@@ -30,28 +31,15 @@ export function QuestionHelp({
     }
   });
 
-  const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
-      if (
-        ref.current &&
-        !ref.current.contains(event.target as HTMLDivElement) &&
-        closeHelpOnOutsideClick
-      ) {
-        setIsOpen(false);
-      }
-    },
-    [setIsOpen, closeHelpOnOutsideClick],
-  );
+  useOnClickOutside(ref, () => {
+    if (closeHelpOnOutsideClick) {
+      setIsOpen(false);
+    }
+  });
 
   useEffect(() => {
     onChange(isOpen);
-
-    window.addEventListener("click", handleClickOutside, {
-      passive: true,
-    });
-
-    return () => window.removeEventListener("click", handleClickOutside);
-  }, [onChange, isOpen, handleClickOutside]);
+  }, [onChange, isOpen]);
 
   const className = clsx(
     "chopin/QuestionHelp",

package/src/components/Chopin/TradeSelector/Header/Header.tsx

@@ -0,0 +1,33 @@
+import { FocusableElement } from "@react-types/shared";
+import { DOMAttributes } from "react";
+
+import { Label } from "../../../Label";
+import { Text } from "../../../Text";
+import type { LabelProps } from "../types";
+
+export type HeaderProps = {
+  isOpen: boolean;
+  labelProps:
+    | DOMAttributes<FocusableElement>
+    | React.LabelHTMLAttributes<HTMLLabelElement>;
+  labels: LabelProps;
+};
+
+export const Header = (props: HeaderProps) => {
+  const { isOpen, labelProps, labels } = props;
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <Label {...labelProps} className="chopin/TradeSelectorLabel" aria-hidden>
+        {labels.input}
+      </Label>
+      {labels.description && (
+        <Text className="chopin/TradeSelectorDescription" variant="caption">
+          {labels.description}
+        </Text>
+      )}
+    </>
+  );
+};

package/src/components/Chopin/TradeSelector/Header/index.tsx

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

package/src/components/Chopin/TradeSelector/Listing/Listing.test.tsx

@@ -0,0 +1,42 @@
+import React, { useRef } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { mockTrade } from "../mockApiResults";
+import { Listing } from "./Listing";
+
+jest.mock("react", () => ({
+  ...jest.requireActual<typeof React>("react"),
+  useRef: jest.fn(),
+}));
+
+describe("Listing", () => {
+  it("renders a list of trades", () => {
+    jest.spyOn(React, "useRef").mockReturnValue({
+      current: {},
+    });
+
+    const title = "Exact matches for your search";
+    const trades = [mockTrade];
+    const resultRefs = useRef([]);
+    const onClick = jest.fn();
+    const selectedId = 0;
+
+    render(
+      <Listing
+        title={title}
+        trades={trades}
+        resultRefs={resultRefs}
+        onClick={onClick}
+        selectedId={selectedId}
+      />,
+    );
+
+    const header = screen.getByText(title);
+    const trade = screen.getByText("Landlord");
+
+    expect(header).toBeInTheDocument();
+    expect(trade).toBeInTheDocument();
+
+    fireEvent.click(trade!);
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/components/Chopin/TradeSelector/Listing/Listing.tsx

@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import { MutableRefObject } from "react";
+import { TradeProps } from "../types";
+import { ListingItem } from "./ListingItem";
+
+export type ListingProps = {
+  title: string;
+  trades: TradeProps[];
+  resultRefs?: MutableRefObject<HTMLButtonElement[]>;
+  refCountStart?: number;
+  className?: string;
+  onClick: (trade: TradeProps) => void;
+  selectedId: number;
+};
+
+export const Listing = (props: ListingProps) => {
+  const {
+    title,
+    trades,
+    resultRefs,
+    refCountStart = 0,
+    selectedId,
+    className,
+    onClick,
+  } = props;
+  const listClasses = clsx("chopin/TradeSelectorList", className);
+
+  return (
+    <nav aria-label={title}>
+      <header className="chopin/TradeSelectorListTitle">{title}</header>
+      <ul className={listClasses}>
+        {trades.map((trade, i) => {
+          const id = refCountStart + i;
+          const selected = selectedId === id;
+          return (
+            <ListingItem
+              key={trade.value}
+              trade={trade}
+              ref={el => {
+                if (!el || !resultRefs) return;
+                resultRefs.current[id] = el;
+              }}
+              onClick={onClick}
+              selected={selected}
+            />
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};

package/src/components/Chopin/TradeSelector/Listing/ListingItem.test.tsx

@@ -0,0 +1,54 @@
+import { fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mockTrade } from "../mockApiResults";
+import { ListingItem } from "./ListingItem";
+
+describe("ListingItem", () => {
+  it("renders trade", () => {
+    const onClick = jest.fn();
+    const { container } = render(
+      <ListingItem trade={mockTrade} onClick={onClick} selected={false} />,
+    );
+
+    const button = container.querySelector("button");
+
+    expect(button).toHaveAttribute("data-key", "Landlord");
+    expect(button).toHaveTextContent("Landlord");
+  });
+
+  it("sets classes for interaction states", async () => {
+    const onClick = jest.fn();
+    const { container } = render(
+      <ListingItem trade={mockTrade} onClick={onClick} selected={false} />,
+    );
+
+    const button = container.querySelector("button");
+
+    fireEvent.mouseEnter(button!);
+    expect(button).toHaveClass("--is-hovered");
+
+    await userEvent.tab();
+    expect(button).toHaveClass("--is-focused");
+  });
+
+  it("sets interaction class when selected prop is true", () => {
+    const onClick = jest.fn();
+    const { container } = render(
+      <ListingItem trade={mockTrade} onClick={onClick} selected />,
+    );
+
+    const button = container.querySelector("button");
+    expect(button).toHaveClass("--is-focused");
+  });
+
+  it("calls onClick", () => {
+    const onClick = jest.fn();
+    const { container } = render(
+      <ListingItem trade={mockTrade} onClick={onClick} selected={false} />,
+    );
+
+    const button = container.querySelector("button");
+    fireEvent.click(button!);
+    expect(onClick).toHaveBeenCalled();
+  });
+});