@simplybusiness/mobius 3.3.2 → 3.4.0

package/dist/cjs/components/Chopin/TradeSelector/SearchResults/SearchResults.test.js

@@ -1,118 +1,110 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("@testing-library/react");
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const _1 = require(".");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@testing-library/react");
+const jestHTMLDialogPolyfill_1 = require("../jestHTMLDialogPolyfill");
+const SearchResults_1 = require("./SearchResults");
 const mockApiResults_1 = require("../mockApiResults");
-const defaultLabels = {
-    input: "",
-    exact: "Exact matches",
-    suggested: "Suggested matches",
-    loading: "",
-    noResults: "View all trades",
-    description: "",
-    placeholder: "",
+const config_1 = require("../config");
+(0, jestHTMLDialogPolyfill_1.jestHTMLDialogPolyfill)();
+jest.mock("react", () => (Object.assign(Object.assign({}, jest.requireActual("react")), { useRef: jest.fn() })));
+jest.mock("@react-aria/focus", () => ({
+    useFocusRing: () => ({
+        isFocusVisible: () => { },
+        focusProps: () => { },
+    }),
+}));
+jest.mock("@react-aria/interactions", () => ({
+    useHover: () => ({
+        hoverProps: () => { },
+        isHovered: () => { },
+    }),
+}));
+const SearchResultsComponent = (props) => {
+    const { defaultLabels } = (0, config_1.getConfig)();
+    const defaultProps = {
+        isOpen: true,
+        inputRef: (0, react_1.useRef)(null),
+        results: [mockApiResults_1.mockTrade],
+        fallbackUrl: "https://www.example.com",
+        labels: Object.assign({}, defaultLabels),
+        isLoading: false,
+        onClick: jest.fn(),
+        onClose: jest.fn(),
+    };
+    return (0, jsx_runtime_1.jsx)(SearchResults_1.SearchResults, Object.assign({}, defaultProps, props));
 };
-const mockedTrades = [
-    {
-        name: "exact",
-        title: defaultLabels.exact,
-        children: [...mockApiResults_1.exactResults],
-    },
-    {
-        name: "suggested",
-        title: defaultLabels.suggested,
-        children: [...mockApiResults_1.suggestedResults],
-    },
-];
-const fallbackUrl = "https://www.example.com/";
 describe("SearchResults", () => {
-    beforeAll(() => {
-        // Suppress the following warning
-        // If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility
-        jest.spyOn(console, "warn").mockImplementation(jest.fn());
-    });
-    describe("given items list contain no results item", () => {
-        it("displays no results label with fallback url", async () => {
-            const props = {
-                inputValue: "",
-                items: [
-                    {
-                        name: defaultLabels.noResults,
-                        title: defaultLabels.noResults,
-                        children: [],
-                    },
-                ],
-                labels: Object.assign(Object.assign({}, defaultLabels), { noResults: defaultLabels.noResults }),
-                fallbackUrl,
-                onInputChange: () => { },
-                onSelectionChange: () => { },
-            };
-            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SearchResults, Object.assign({}, props)));
-            await user_event_1.default.tab();
-            await user_event_1.default.keyboard("[Alt][ArrowDown]");
-            expect(react_1.screen.getByText(defaultLabels.noResults)).toHaveAttribute("href", fallbackUrl);
+    beforeEach(() => {
+        jest.spyOn(react_1.default, "useRef").mockReturnValue({
+            current: [],
         });
     });
-    describe("given a list of trades", () => {
-        it("displays the trades grouped by exact and suggested matches", async () => {
-            const props = {
-                inputValue: "",
-                items: mockedTrades,
-                labels: defaultLabels,
-                fallbackUrl: "https://www.example.com/",
-                onInputChange: () => { },
-                onSelectionChange: () => { },
-            };
-            const exactResultTrade = "Swimming pool installers";
-            const suggestedResultTrade = "Fitness instructor";
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SearchResults, Object.assign({}, props)));
-            await user_event_1.default.tab();
-            await user_event_1.default.keyboard("[Alt][ArrowDown]");
-            expect(react_1.screen.getByText(defaultLabels.exact)).toBeInTheDocument();
-            expect(container.querySelector(`[data-key='${exactResultTrade}']`)).toBeInTheDocument();
-            expect(react_1.screen.getByText(defaultLabels.suggested)).toBeInTheDocument();
-            expect(container.querySelector(`[data-key='${suggestedResultTrade}']`)).toBeInTheDocument();
-        });
+    const loadingText = "Loading...";
+    const tradeText = "Landlord";
+    const noResultsText = "View all trades";
+    it("renders loading state", () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(SearchResultsComponent, { isLoading: true }));
+        const loading = react_2.screen.queryByText(loadingText);
+        const trade = react_2.screen.queryByText(tradeText);
+        const noResultsLink = react_2.screen.queryByText(noResultsText);
+        expect(loading).toBeInTheDocument();
+        expect(noResultsLink).not.toBeInTheDocument();
+        expect(trade).not.toBeInTheDocument();
     });
-    describe("given input value changes", () => {
-        it("onInputChange prop is invoked", () => {
-            const onInputChangeHandler = jest.fn();
-            const props = {
-                inputValue: "",
-                items: mockedTrades,
-                labels: defaultLabels,
-                fallbackUrl: "https://www.example.com/",
-                onInputChange: onInputChangeHandler,
-                onSelectionChange: () => { },
-            };
-            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SearchResults, Object.assign({}, props)));
-            const input = react_1.screen.getByRole("combobox");
-            react_1.fireEvent.change(input, { target: { value: "New text" } });
-            expect(onInputChangeHandler).toHaveBeenCalled();
-        });
+    it("renders no results state", () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(SearchResultsComponent, { results: [] }));
+        const loading = react_2.screen.queryByText(loadingText);
+        const trade = react_2.screen.queryByText(tradeText);
+        const noResultsLink = react_2.screen.queryByText(noResultsText);
+        expect(loading).not.toBeInTheDocument();
+        expect(noResultsLink).toBeInTheDocument();
+        expect(trade).not.toBeInTheDocument();
+    });
+    it("renders trades list", () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(SearchResultsComponent, {}));
+        const loading = react_2.screen.queryByText(loadingText);
+        const trade = react_2.screen.queryByText(tradeText);
+        const noResultsLink = react_2.screen.queryByText(noResultsText);
+        expect(loading).not.toBeInTheDocument();
+        expect(noResultsLink).not.toBeInTheDocument();
+        expect(trade).toBeInTheDocument();
     });
-    describe("given user selection value changes", () => {
-        it("onSelectionChange prop is invoked", async () => {
-            const onSelectionChangeHandler = jest.fn();
-            const props = {
-                inputValue: "",
-                items: mockedTrades,
-                labels: defaultLabels,
-                fallbackUrl: "https://www.example.com/",
-                onInputChange: () => { },
-                onSelectionChange: onSelectionChangeHandler,
-            };
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SearchResults, Object.assign({}, props)));
-            await user_event_1.default.tab();
-            await user_event_1.default.keyboard("[Alt][ArrowDown]");
-            const option = container.querySelector(`[data-key='Swimming pool installers']`);
-            react_1.fireEvent.click(option);
-            expect(onSelectionChangeHandler).toHaveBeenCalled();
+    describe("pressing Enter key", () => {
+        it("selects the first trade from the list", () => {
+            const onClick = jest.fn();
+            const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(SearchResultsComponent, { onClick: onClick }));
+            const button = container.querySelector("button");
+            expect(button).toHaveClass("--is-focused");
+            react_2.fireEvent.keyDown(container, {
+                key: "Enter",
+                code: "Enter",
+            });
+            expect(onClick).toHaveBeenCalled();
         });
     });
 });

package/dist/cjs/components/Chopin/TradeSelector/SearchResults/SearchResults.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.test.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/SearchResults/SearchResults.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchResults.test.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/SearchResults/SearchResults.test.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Chopin/TradeSelector/TradeInput/TradeInput.d.ts

@@ -0,0 +1,15 @@
+import { RefObject, ChangeEvent, MouseEvent } from "react";
+import { AriaLabelingProps, DOMProps } from "@react-types/shared";
+export type TradeInputProps = {
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    inputRef: RefObject<HTMLInputElement>;
+    inputProps?: AriaLabelingProps & DOMProps;
+    value: string;
+    className?: string;
+    label?: string;
+    placeholder: string;
+    initialTrade?: string;
+    onEdit: (event: MouseEvent<HTMLButtonElement>) => void;
+    isEditable: boolean;
+};
+export declare const TradeInput: (props: TradeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Chopin/TradeSelector/TradeInput/TradeInput.js

@@ -0,0 +1,37 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TradeInput = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const focus_1 = require("@react-aria/focus");
+const interactions_1 = require("@react-aria/interactions");
+const Text_1 = require("../../../Text");
+const TradeInput = (props) => {
+    const { onChange, onEdit, inputRef, inputProps, value, className, label, placeholder, initialTrade, isEditable } = props, otherProps = __rest(props, ["onChange", "onEdit", "inputRef", "inputProps", "value", "className", "label", "placeholder", "initialTrade", "isEditable"]);
+    const selectedTrade = initialTrade && !isEditable;
+    const { isFocusVisible, focusProps } = (0, focus_1.useFocusRing)({
+        within: true,
+    });
+    const { hoverProps, isHovered } = (0, interactions_1.useHover)(Object.assign({}, otherProps));
+    const classes = (0, clsx_1.default)("chopin", "chopin/TradeSelectorInput", {
+        "--is-focused": isFocusVisible,
+        "--is-hovered": isHovered,
+    }, className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, focusProps, { children: selectedTrade ? ((0, jsx_runtime_1.jsxs)(Text_1.Text, { children: ["You have selected \u2018", (0, jsx_runtime_1.jsx)("strong", { children: initialTrade }), "\u2019 as your trade/profession.", " ", (0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", className: "mobius/Link chopin/TradeSelectorButton", "aria-label": "Change your selected profession", onClick: onEdit }, { children: "Change" }))] })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "chopin/TradeSelectorInputContainer" }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, hoverProps, inputProps, { type: "text", placeholder: placeholder, "aria-label": label, className: classes, onChange: onChange, ref: inputRef, value: value })), isEditable && ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", className: "mobius/Link chopin/TradeSelectorButton", "aria-label": "Cancel changes", onClick: onEdit }, { children: "Cancel" })))] }))) })));
+};
+exports.TradeInput = TradeInput;
+//# sourceMappingURL=TradeInput.js.map

package/dist/cjs/components/Chopin/TradeSelector/TradeInput/TradeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradeInput.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/TradeInput/TradeInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAEA,gDAAwB;AACxB,6CAAiD;AACjD,2DAAoD;AACpD,wCAAqC;AAe9B,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACnD,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,KAER,KAAK,EADJ,UAAU,UACX,KAAK,EAZH,4HAYL,CAAQ,CAAC;IACV,MAAM,aAAa,GAAG,YAAY,IAAI,CAAC,UAAU,CAAC;IAClD,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAA,oBAAY,EAAC;QAClD,MAAM,EAAE,IAAI;KACb,CAAC,CAAC;IACH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAA,uBAAQ,oBACrC,UAAU,EACb,CAAC;IACH,MAAM,OAAO,GAAG,IAAA,cAAI,EAClB,QAAQ,EACR,2BAA2B,EAC3B;QACE,cAAc,EAAE,cAAc;QAC9B,cAAc,EAAE,SAAS;KAC1B,EACD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gDAAS,UAAU,cAChB,aAAa,CAAC,CAAC,CAAC,CACf,wBAAC,WAAI,2CACgB,6CAAS,YAAY,GAAU,sCAChC,GAAG,EACrB,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wCAAwC,gBACvC,iCAAiC,EAC5C,OAAO,EAAE,MAAM,4BAGR,IACJ,CACR,CAAC,CAAC,CAAC,CACF,+CAAK,SAAS,EAAC,oCAAoC,iBACjD,kDACM,UAAU,EACV,UAAU,IACd,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,WAAW,gBACZ,KAAK,EACjB,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,IACZ,EACD,UAAU,IAAI,CACb,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wCAAwC,gBACvC,gBAAgB,EAC3B,OAAO,EAAE,MAAM,4BAGR,CACV,KACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAzEW,QAAA,UAAU,cAyErB"}

package/dist/cjs/components/Chopin/TradeSelector/TradeInput/TradeInput.test.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const react_2 = require("react");
+const TradeInput_1 = require("./TradeInput");
+const TradeInputComponent = (props) => {
+    const defaultProps = {
+        onChange: jest.fn(),
+        inputRef: (0, react_2.useRef)(null),
+        value: "",
+        placeholder: "e.g. Cleaner, builder, consultant",
+        onEdit: jest.fn(),
+        isEditable: false,
+    };
+    return (0, jsx_runtime_1.jsx)(TradeInput_1.TradeInput, Object.assign({}, defaultProps, props));
+};
+describe("TradeInput", () => {
+    it("renders selected trade", () => {
+        var _a;
+        const initialTrade = "Landlord";
+        const onEdit = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TradeInputComponent, { initialTrade: initialTrade, onEdit: onEdit }));
+        const initialTradeText = react_1.screen.queryByText(initialTrade);
+        const changeButton = react_1.screen.queryByRole("button");
+        expect((_a = initialTradeText === null || initialTradeText === void 0 ? void 0 : initialTradeText.parentNode) === null || _a === void 0 ? void 0 : _a.textContent).toEqual(`You have selected ‘${initialTrade}’ as your trade/profession. Change`);
+        react_1.fireEvent.click(changeButton);
+        expect(onEdit).toHaveBeenCalled();
+    });
+    it("renders input field", async () => {
+        const onChange = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TradeInputComponent, { onChange: onChange }));
+        const inputField = react_1.screen.queryByRole("textbox");
+        expect(inputField).toBeInTheDocument();
+        await user_event_1.default.tab();
+        await user_event_1.default.keyboard("[Space]");
+        expect(onChange).toHaveBeenCalled();
+    });
+    it("sets classes for interaction states", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TradeInputComponent, {}));
+        const inputField = react_1.screen.queryByRole("textbox");
+        await user_event_1.default.tab();
+        expect(inputField).toHaveClass("--is-focused");
+        react_1.fireEvent.mouseEnter(inputField);
+        expect(inputField).toHaveClass("--is-hovered");
+    });
+    it("allows user to edit trade", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TradeInputComponent, { isEditable: true }));
+        const cancelText = react_1.screen.queryByText("Cancel");
+        expect(cancelText).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=TradeInput.test.js.map

package/dist/cjs/components/Chopin/TradeSelector/TradeInput/TradeInput.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradeInput.test.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/TradeInput/TradeInput.test.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAmE;AACnE,6EAAoD;AACpD,iCAA+B;AAC/B,6CAA2D;AAE3D,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IAC9D,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;QACnB,QAAQ,EAAE,IAAA,cAAM,EAAC,IAAI,CAAC;QACtB,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,mCAAmC;QAChD,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE;QACjB,UAAU,EAAE,KAAK;KAClB,CAAC;IAEF,OAAO,uBAAC,uBAAU,oBAAK,YAAY,EAAM,KAAK,EAAI,CAAC;AACrD,CAAC,CAAC;AAEF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;;QAChC,MAAM,YAAY,GAAG,UAAU,CAAC;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAEzB,IAAA,cAAM,EAAC,uBAAC,mBAAmB,IAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC;QAE5E,MAAM,gBAAgB,GAAG,cAAM,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC1D,MAAM,YAAY,GAAG,cAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAElD,MAAM,CAAC,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,UAAU,0CAAE,WAAW,CAAC,CAAC,OAAO,CACvD,sBAAsB,YAAY,oCAAoC,CACvE,CAAC;QAEF,iBAAS,CAAC,KAAK,CAAC,YAAa,CAAC,CAAC;QAE/B,MAAM,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAE3B,IAAA,cAAM,EAAC,uBAAC,mBAAmB,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC,CAAC;QAEpD,MAAM,UAAU,GAAG,cAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAEjD,MAAM,CAAC,UAAU,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAEvC,MAAM,oBAAS,CAAC,GAAG,EAAE,CAAC;QACtB,MAAM,oBAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QAEpC,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,IAAA,cAAM,EAAC,uBAAC,mBAAmB,KAAG,CAAC,CAAC;QAEhC,MAAM,UAAU,GAAG,cAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAEjD,MAAM,oBAAS,CAAC,GAAG,EAAE,CAAC;QAEtB,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAE/C,iBAAS,CAAC,UAAU,CAAC,UAAW,CAAC,CAAC;QAElC,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,IAAA,cAAM,EAAC,uBAAC,mBAAmB,IAAC,UAAU,SAAG,CAAC,CAAC;QAE3C,MAAM,UAAU,GAAG,cAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAEhD,MAAM,CAAC,UAAU,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/components/Chopin/TradeSelector/TradeInput/index.d.ts

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

package/dist/cjs/components/Chopin/TradeSelector/{ComboBox → TradeInput}/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ComboBox"), exports);
+__exportStar(require("./TradeInput"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/Chopin/TradeSelector/TradeInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/TradeInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B"}

package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.d.ts

@@ -1,5 +1,5 @@
-import type { TradeSelectorProps, TradeSelectorElementType } from ".";
+import { TradeSelectorElementType, TradeSelectorProps } from "./types";
 import { ForwardedRefComponent } from "../../../types/components";
-export declare const ERROR_MESSAGE_SERVICE_UNAVAIALBLE = "The service is currently unavailable. Please try again later";
+export declare const ERROR_MESSAGE_SERVICE_UNAVAILABLE = "The service is currently unavailable. Please try again later";
 declare const TradeSelector: ForwardedRefComponent<TradeSelectorProps, TradeSelectorElementType>;
 export { TradeSelector };

package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.js

@@ -3,57 +3,88 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TradeSelector = exports.ERROR_MESSAGE_SERVICE_UNAVAIALBLE = void 0;
+exports.TradeSelector = exports.ERROR_MESSAGE_SERVICE_UNAVAILABLE = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const clsx_1 = __importDefault(require("clsx"));
-const utils_1 = require("@react-aria/utils");
 const label_1 = require("@react-aria/label");
+const utils_1 = require("@react-aria/utils");
 const config_1 = require("./config");
-const SelectedTrade_1 = require("./SelectedTrade");
+const TradeInput_1 = require("./TradeInput");
 const SearchResults_1 = require("./SearchResults");
-const useTradeSelector_1 = require("./useTradeSelector");
-const getItemsToDisplay_1 = require("./getItemsToDisplay");
+const useFetchTrades_1 = require("./useFetchTrades");
+const useTradeSelectorUrl_1 = require("./useTradeSelectorUrl");
+const Header_1 = require("./Header");
 const ErrorMessage_1 = require("../../ErrorMessage");
 const spaceDelimitedList_1 = require("../../../utils/spaceDelimitedList");
-const Label_1 = require("../../Label");
-const Text_1 = require("../../Text");
-exports.ERROR_MESSAGE_SERVICE_UNAVAIALBLE = "The service is currently unavailable. Please try again later";
+exports.ERROR_MESSAGE_SERVICE_UNAVAILABLE = "The service is currently unavailable. Please try again later";
 const TradeSelector = (0, react_1.forwardRef)((props, ref) => {
-    const { elementType: Element = "div", minInput = 3, apiRequestDebounceInMs = 250, urls, labels, className, onTradeSelected, hideLabel, initialTrade, } = props;
-    const fieldLabels = Object.assign({ input: "What is your specific trade/profession?", description: "", exact: "Exact matches for your search", placeholder: "e.g. Cleaner, builder, consultant", suggested: "Suggested matches for your search", noResults: "View all trades", loading: "Loading..." }, labels);
-    const { site, baseUrl } = (0, config_1.getConfig)();
+    const { minInput = 3, apiRequestDebounceInMs = 250, urls, labels, className, onTradeSelected, hideLabel, initialTrade = "", vertical, searchScope, } = props;
+    const { site, baseUrl, defaultLabels } = (0, config_1.getConfig)();
+    const fieldLabels = Object.assign(Object.assign({}, defaultLabels), labels);
     const links = (0, react_1.useMemo)(() => (Object.assign({ quoteRedirect: site, tradeApi: baseUrl, allOccupations: "https://quote.simplybusiness.co.uk/trades?vertical=business" }, urls)), [site, baseUrl, urls]);
-    const { inputValue, trades, onInputChange, onSelectionChange, error, isLoading, selectedTrade, hasUserChangedMind, onUserChangedMind, } = (0, useTradeSelector_1.useTradeSelector)({
-        minInput,
-        apiRequestDebounceInMs,
-        urls: links,
-        onTradeSelected,
-        initialTrade,
-    });
     const classes = (0, clsx_1.default)("chopin", "chopin/TradeSelector", className);
+    const [userInput, setUserInput] = (0, react_1.useState)("");
+    const [selectedTrade, setSelectedTrade] = (0, react_1.useState)(null);
+    const [editMode, setEditMode] = (0, react_1.useState)(false);
+    const [isOverlayVisible, setIsOverlayVisible] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const currentTrade = selectedTrade ? selectedTrade.value : initialTrade;
+    const endpoint = (0, useTradeSelectorUrl_1.useTradeSelectorUrl)(links.tradeApi, userInput, {
+        site: links.quoteRedirect,
+        vertical,
+        searchScope,
+    });
+    const { trades, isLoading, error, fetchTrades } = (0, useFetchTrades_1.useFetchTrades)(endpoint, apiRequestDebounceInMs);
     const errorMessage = error === null || error === void 0 ? void 0 : error.message;
     const errorMessageId = (0, utils_1.useSlotId)([Boolean(errorMessage)]);
     const { labelProps, fieldProps } = (0, label_1.useLabel)({
         label: fieldLabels.input,
     });
+    const ariaLabel = hideLabel ? fieldLabels.input : undefined;
+    const inputProps = hideLabel ? undefined : fieldProps;
     const describedBy = (0, spaceDelimitedList_1.spaceDelimitedList)([
         errorMessageId,
         props["aria-describedby"],
     ]);
-    const isOpen = inputValue.length >= minInput && !errorMessage;
-    const shouldSelectedTradeDisplay = selectedTrade && !hasUserChangedMind;
-    const items = isOpen
-        ? (0, getItemsToDisplay_1.getItemsToDisplay)({
-            trades,
-            isLoading,
-            labels: fieldLabels,
-        })
-        : [];
-    const { input: inputLabel, description } = fieldLabels;
-    const ariaLabel = hideLabel ? inputLabel : undefined;
-    const inputProps = hideLabel ? undefined : fieldProps;
-    return ((0, jsx_runtime_1.jsxs)(Element, Object.assign({ ref: ref, className: classes }, { children: [!hideLabel && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({}, labelProps, { className: "chopin/TradeSelectorLabel", "aria-hidden": true }, { children: inputLabel })), (0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ className: "chopin/TradeSelectorDescription", variant: "caption" }, { children: description }))] })), shouldSelectedTradeDisplay ? ((0, jsx_runtime_1.jsx)(SelectedTrade_1.SelectedTrade, { trade: selectedTrade, onClick: onUserChangedMind })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SearchResults_1.SearchResults, { inputValue: inputValue, items: items, labels: fieldLabels, describedBy: describedBy, fallbackUrl: links.allOccupations, onInputChange: onInputChange, onSelectionChange: onSelectionChange, fieldProps: inputProps, label: ariaLabel }), error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMessage: exports.ERROR_MESSAGE_SERVICE_UNAVAIALBLE }))] }))] })));
+    const handleChange = (event) => setUserInput(event.target.value);
+    const toggleEditMode = () => setEditMode(!editMode);
+    const handleOverlayClose = () => {
+        setIsOverlayVisible(false);
+    };
+    const handleTradeSelect = (trade) => {
+        setSelectedTrade(trade);
+        if (editMode) {
+            toggleEditMode();
+        }
+        if (trade && onTradeSelected) {
+            try {
+                onTradeSelected(trade);
+            }
+            catch (err) {
+                // eslint-disable-next-line no-console
+                console.error("onTradeSelected returned the following error", err);
+            }
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (editMode && currentTrade) {
+            setUserInput(currentTrade);
+        }
+        if (!editMode) {
+            setUserInput("");
+        }
+    }, [editMode, currentTrade]);
+    (0, react_1.useEffect)(() => {
+        if (userInput.length >= minInput) {
+            setIsOverlayVisible(true);
+            fetchTrades(true);
+        }
+        if (userInput.length < minInput) {
+            setIsOverlayVisible(false);
+        }
+    }, [minInput, fetchTrades, userInput.length]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes }, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { isOpen: !hideLabel, labelProps: labelProps, labels: fieldLabels }), (0, jsx_runtime_1.jsx)(TradeInput_1.TradeInput, { inputRef: inputRef, inputProps: inputProps, value: userInput, onChange: handleChange, label: ariaLabel, placeholder: fieldLabels.placeholder, initialTrade: currentTrade, onEdit: toggleEditMode, isEditable: editMode }), error ? ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMessage: exports.ERROR_MESSAGE_SERVICE_UNAVAILABLE })) : ((0, jsx_runtime_1.jsx)(SearchResults_1.SearchResults, { isOpen: isOverlayVisible, labels: fieldLabels, onClick: handleTradeSelect, onClose: handleOverlayClose, results: trades, isLoading: isLoading, fallbackUrl: links.allOccupations, describedBy: describedBy, inputRef: inputRef }))] })));
 });
 exports.TradeSelector = TradeSelector;
 TradeSelector.displayName = "TradeSelector";

package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TradeSelector.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/TradeSelector/TradeSelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TradeSelector.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/TradeSelector/TradeSelector.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAOe;AACf,gDAAwB;AACxB,6CAA6C;AAC7C,6CAA8C;AAS9C,qCAAqC;AACrC,6CAA0C;AAC1C,mDAAgD;AAChD,qDAAkD;AAClD,+DAA4D;AAC5D,qCAAkC;AAClC,qDAAkD;AAElD,0EAAuE;AAE1D,QAAA,iCAAiC,GAC5C,8DAA8D,CAAC;AAEjE,MAAM,aAAa,GAGf,IAAA,kBAAU,EAAC,CAAC,KAAyB,EAAE,GAAqB,EAAE,EAAE;IAClE,MAAM,EACJ,QAAQ,GAAG,CAAC,EACZ,sBAAsB,GAAG,GAAG,EAC5B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,eAAe,EACf,SAAS,EACT,YAAY,GAAG,EAAE,EACjB,QAAQ,EACR,WAAW,GACZ,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,IAAA,kBAAS,GAAE,CAAC;IACrD,MAAM,WAAW,mCACZ,aAAa,GACb,MAAM,CACV,CAAC;IACF,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,iBACJ,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,OAAO,EACjB,cAAc,EACZ,6DAA6D,IAC5D,IAAI,EACP,EACF,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,CACtB,CAAC;IACF,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,QAAQ,EAAE,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAClE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAoB,IAAI,CAAC,CAAC;IAC5E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACzD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACzE,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAW,IAAI,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAA,yCAAmB,EAAC,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE;QAC9D,IAAI,EAAE,KAAK,CAAC,aAAa;QACzB,QAAQ;QACR,WAAW;KACZ,CAAC,CAAC;IACH,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAA,+BAAc,EAC9D,QAAQ,EACR,sBAAsB,CACvB,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC;IACpC,MAAM,cAAc,GAAG,IAAA,iBAAS,EAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAA,gBAAQ,EAAC;QAC1C,KAAK,EAAE,WAAW,CAAC,KAAK;KACzB,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5D,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;IACtD,MAAM,WAAW,GAAG,IAAA,uCAAkB,EAAC;QACrC,cAAc;QACd,KAAK,CAAC,kBAAkB,CAAC;KAC1B,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE,CAC5D,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEnC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEpD,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC9C,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAExB,IAAI,QAAQ,EAAE;YACZ,cAAc,EAAE,CAAC;SAClB;QAED,IAAI,KAAK,IAAI,eAAe,EAAE;YAC5B,IAAI;gBACF,eAAe,CAAC,KAAK,CAAC,CAAC;aACxB;YAAC,OAAO,GAAG,EAAE;gBACZ,sCAAsC;gBACtC,OAAO,CAAC,KAAK,CAAC,8CAA8C,EAAE,GAAG,CAAC,CAAC;aACpE;SACF;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,YAAY,EAAE;YAC5B,YAAY,CAAC,YAAY,CAAC,CAAC;SAC5B;QAED,IAAI,CAAC,QAAQ,EAAE;YACb,YAAY,CAAC,EAAE,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,MAAM,IAAI,QAAQ,EAAE;YAChC,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC1B,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB;QAED,IAAI,SAAS,CAAC,MAAM,GAAG,QAAQ,EAAE;YAC/B,mBAAmB,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9C,OAAO,CACL,+CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,iBAC/B,uBAAC,eAAM,IACL,MAAM,EAAE,CAAC,SAAS,EAClB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,WAAW,GACnB,EACF,uBAAC,uBAAU,IACT,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,CAAC,WAAW,EACpC,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,cAAc,EACtB,UAAU,EAAE,QAAQ,GACpB,EACD,KAAK,CAAC,CAAC,CAAC,CACP,uBAAC,2BAAY,IACX,EAAE,EAAE,cAAc,EAClB,YAAY,EAAE,yCAAiC,GAC/C,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,6BAAa,IACZ,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAE,kBAAkB,EAC3B,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,KAAK,CAAC,cAAc,EACjC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB,CACH,KACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAIM,sCAAa;AAFtB,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}