@phillips/seldon 1.67.2 → 1.68.0

package/dist/components/Search/Search.d.ts

@@ -7,6 +7,10 @@ export interface SearchProps extends React.HTMLAttributes<HTMLDivElement> {
      * @returns void
      */
     onSearch?: (searchQuery: string) => void;
+    /**
+     * called when the search is cancelled
+     */
+    onCancel?: () => void;
     /**
      * The search results to display
      */
@@ -40,5 +44,5 @@ export interface SearchProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     invalidText?: string;
 }
-declare const Search: ({ onSearch, searchResults, state, defaultValue, className, placeholder, searchButtonText, loadingText, invalidText, getAllResultsText, getAllResultsLink, ...props }: React.PropsWithChildren<SearchProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Search: ({ onSearch, onCancel, searchResults, state, defaultValue, className, placeholder, searchButtonText, loadingText, invalidText, getAllResultsText, getAllResultsLink, ...props }: React.PropsWithChildren<SearchProps>) => import("react/jsx-runtime").JSX.Element;
 export default Search;

package/dist/components/Search/Search.js

@@ -1,145 +1,149 @@
 import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import i, { useEffect as y } from "react";
-import { getCommonProps as V, px as j, encodeURLSearchParams as g } from "../../utils/index.js";
+import c, { useEffect as V } from "react";
+import { getCommonProps as j, px as D, encodeURLSearchParams as I } from "../../utils/index.js";
 import f from "../../node_modules/classnames/index.js";
-import D from "../Input/Input.js";
-import H from "../Link/Link.js";
-import O from "./SearchResults/SearchResults.js";
-import { TextVariants as A } from "../Text/types.js";
-import F from "../Text/Text.js";
-import { useOnClickOutside as K } from "../../node_modules/usehooks-ts/dist/index.js";
-import { HeaderContext as M } from "../../site-furniture/Header/Header.js";
-import { SearchButton as U } from "./SearchButton.js";
-import q from "../../node_modules/react-transition-group/esm/CSSTransition.js";
+import H from "../Input/Input.js";
+import O from "../Link/Link.js";
+import A from "./SearchResults/SearchResults.js";
+import { TextVariants as F } from "../Text/types.js";
+import K from "../Text/Text.js";
+import { useOnClickOutside as M } from "../../node_modules/usehooks-ts/dist/index.js";
+import { HeaderContext as U } from "../../site-furniture/Header/Header.js";
+import { SearchButton as q } from "./SearchButton.js";
+import z from "../../node_modules/react-transition-group/esm/CSSTransition.js";
 const ne = ({
-  onSearch: p,
-  searchResults: C = [],
-  state: c = "idle",
-  defaultValue: I = "",
-  className: E,
-  placeholder: R = "",
-  searchButtonText: l = "Search",
-  loadingText: b = "Search In Progress...",
-  invalidText: w = "Invalid search",
-  getAllResultsText: k = (e) => `View all results for ${e}`,
-  getAllResultsLink: _ = (e) => `/Search?Search=${e}`,
-  ...S
+  onSearch: _,
+  onCancel: i,
+  searchResults: E = [],
+  state: l = "idle",
+  defaultValue: R = "",
+  className: b,
+  placeholder: w = "",
+  searchButtonText: d = "Search",
+  loadingText: C = "Search In Progress...",
+  invalidText: k = "Invalid search",
+  getAllResultsText: L = (r) => `View all results for ${r}`,
+  getAllResultsLink: S = (r) => `/Search?Search=${r}`,
+  ...v
 }) => {
   var N;
-  const { className: e, "data-testid": d, ...L } = V(S, "Search"), o = i.useContext(M), m = i.useRef(null), h = i.useRef(null), v = i.useRef(null), t = o.isSearchExpanded, n = (N = m.current) == null ? void 0 : N.value, T = p ? (r) => {
-    p(r.target.value);
+  const { className: r, "data-testid": m, ...P } = j(v, "Search"), o = c.useContext(U), h = c.useRef(null), p = c.useRef(null), x = c.useRef(null), t = o.isSearchExpanded, s = (N = h.current) == null ? void 0 : N.value, T = _ ? (e) => {
+    _(e.target.value);
   } : void 0;
-  K(v, () => $(!1));
-  const x = (r) => {
-    var s;
-    if (r.stopPropagation(), r.key === "Enter") {
-      if (r.preventDefault(), n && n.length > 2) {
-        const P = g(_(n));
-        window.location.href = P;
+  M(x, (e) => {
+    i == null || i(), g(!1), e.stopPropagation();
+  });
+  const $ = (e) => {
+    var n;
+    if (e.stopPropagation(), e.key === "Enter") {
+      if (e.preventDefault(), s && s.length > 2) {
+        const y = I(S(s));
+        window.location.href = y;
       }
-      r.currentTarget instanceof HTMLAnchorElement && r.currentTarget.click();
+      e.currentTarget instanceof HTMLAnchorElement && e.currentTarget.click();
     }
-    r.key === "Escape" && (o.setIsSearchExpanded(!1), (s = h.current) == null || s.reset());
+    e.key === "Escape" && (o.setIsSearchExpanded(!1), (n = p.current) == null || n.reset());
   };
-  y(() => {
-    var r;
+  V(() => {
+    var e;
     if (t) {
-      (r = m.current) == null || r.focus();
+      (e = h.current) == null || e.focus();
       return;
     }
   }, [t]);
-  const $ = (r) => {
-    var s;
-    o.setIsSearchExpanded(r), (s = h.current) == null || s.reset();
+  const g = (e) => {
+    var n;
+    o.setIsSearchExpanded(e), (n = p.current) == null || n.reset();
   };
-  return /* @__PURE__ */ a("div", { className: `${e}__container`, children: /* @__PURE__ */ u(
+  return /* @__PURE__ */ a("div", { className: `${r}__container`, children: /* @__PURE__ */ u(
     "div",
     {
       onClick: () => o.setIsSearchExpanded(!0),
-      className: `${e}__container__inner`,
-      ref: v,
+      className: `${r}__container__inner`,
+      ref: x,
       children: [
-        /* @__PURE__ */ a(F, { variant: A.heading4, className: `${e}__container__inner__label`, children: l }),
+        /* @__PURE__ */ a(K, { variant: F.heading4, className: `${r}__container__inner__label`, children: d }),
         /* @__PURE__ */ a(
           "div",
           {
-            ...L,
-            className: f(e, E, { [`${e}--active`]: t }),
-            "data-testid": d,
+            ...P,
+            className: f(r, b, { [`${r}--active`]: t }),
+            "data-testid": m,
             role: "search",
-            ...S,
+            ...v,
             children: /* @__PURE__ */ u(
               "form",
               {
-                "data-testid": `${d}-form`,
-                className: f(`${e}__form`, {
-                  [`${e}__form--active`]: t
+                "data-testid": `${m}-form`,
+                className: f(`${r}__form`, {
+                  [`${r}__form--active`]: t
                 }),
-                ref: h,
+                ref: p,
                 children: [
                   /* @__PURE__ */ u(
                     "div",
                     {
-                      className: f(`${e}__content-wrapper`, {
-                        [`${e}__content-wrapper--active`]: t
+                      className: f(`${r}__content-wrapper`, {
+                        [`${r}__content-wrapper--active`]: t
                       }),
                       role: "combobox",
                       "aria-haspopup": "listbox",
                       children: [
                         /* @__PURE__ */ a(
-                          q,
+                          z,
                           {
                             in: t,
-                            classNames: `${j}-input`,
+                            classNames: `${D}-input`,
                             addEndListener: () => {
                             },
                             children: /* @__PURE__ */ a(
-                              D,
+                              H,
                               {
                                 "aria-hidden": !t,
-                                className: `${e}__input`,
+                                className: `${r}__input`,
                                 id: "search-input",
                                 hideLabel: !0,
-                                labelText: l,
-                                placeholder: t ? R : "",
+                                labelText: d,
+                                placeholder: t ? w : "",
                                 type: "text",
-                                defaultValue: I,
-                                invalid: c === "invalid",
-                                invalidText: w,
-                                onKeyDown: x,
+                                defaultValue: R,
+                                invalid: l === "invalid",
+                                invalidText: k,
+                                onKeyDown: $,
                                 onChange: T,
-                                ref: m
+                                ref: h
                               }
                             )
                           }
                         ),
                         /* @__PURE__ */ a(
-                          U,
+                          q,
                           {
-                            className: e,
-                            searchButtonText: l,
-                            state: c,
-                            testId: d,
+                            className: r,
+                            searchButtonText: d,
+                            state: l,
+                            testId: m,
                             isSearchExpanded: t,
-                            setIsSearchExpanded: $
+                            setIsSearchExpanded: g,
+                            onCancel: i
                           }
                         )
                       ]
                     }
                   ),
-                  n && n.length > 2 ? /* @__PURE__ */ a(
-                    O,
+                  s && s.length > 2 ? /* @__PURE__ */ a(
+                    A,
                     {
-                      autoCompleteResults: C,
-                      isLoading: c === "loading",
-                      loadingText: b,
-                      onKeyDown: x,
-                      userInputValue: n,
-                      children: /* @__PURE__ */ a("li", { className: `${e}__result`, children: /* @__PURE__ */ a(
-                        H,
+                      autoCompleteResults: E,
+                      isLoading: l === "loading",
+                      loadingText: C,
+                      onKeyDown: $,
+                      userInputValue: s,
+                      children: /* @__PURE__ */ a("li", { className: `${r}__result`, children: /* @__PURE__ */ a(
+                        O,
                         {
-                          href: ((r) => g(_(r)))(n),
-                          children: /* @__PURE__ */ a("p", { children: k(n) })
+                          href: ((e) => I(S(e)))(s),
+                          children: /* @__PURE__ */ a("p", { children: L(s) })
                         }
                       ) }, "viewAllSearchResults")
                     }

package/dist/components/Search/SearchButton.d.ts

@@ -1,7 +1,7 @@
 import { SearchProps } from './Search';
 import { ComponentProps } from 'react';
-export declare const SearchButton: ({ state, isSearchExpanded, setIsSearchExpanded, searchButtonText, className, testId, ...props }: {
+export declare const SearchButton: ({ state, isSearchExpanded, setIsSearchExpanded, searchButtonText, className, testId, onCancel, ...props }: {
     testId: string;
     isSearchExpanded: boolean;
     setIsSearchExpanded: React.Dispatch<React.SetStateAction<boolean>>;
-} & Pick<SearchProps, "state" | "searchButtonText"> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
+} & Pick<SearchProps, "onCancel" | "state" | "searchButtonText"> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Search/SearchButton.js

@@ -1,41 +1,42 @@
-import { jsx as n } from "react/jsx-runtime";
-import _ from "../../assets/search.svg.js";
-import b from "../../assets/close.svg.js";
-const m = ({
-  state: l,
-  isSearchExpanded: i,
-  setIsSearchExpanded: u,
-  searchButtonText: e,
+import { jsx as r } from "react/jsx-runtime";
+import e from "../../assets/search.svg.js";
+import l from "../../assets/close.svg.js";
+const p = ({
+  state: $,
+  isSearchExpanded: u,
+  setIsSearchExpanded: _,
+  searchButtonText: a,
   className: t,
   testId: o,
-  ...a
-}) => i ? i ? /* @__PURE__ */ n(
+  onCancel: i,
+  ...b
+}) => u ? u ? /* @__PURE__ */ r(
   "button",
   {
-    ...a,
+    ...b,
     type: "button",
     "data-testid": `${o}-close-button`,
     "aria-label": "Close Search",
     className: `${t}__button ${t}__button--close`,
-    onClick: (r) => {
-      u(!1), r.stopPropagation();
+    onClick: (n) => {
+      i == null || i(), _(!1), n.stopPropagation();
     },
-    children: /* @__PURE__ */ n(b, { "data-testid": `${o}-form-icon`, className: `${t}__button__icon` })
+    children: /* @__PURE__ */ r(l, { "data-testid": `${o}-form-icon`, className: `${t}__button__icon` })
   }
-) : null : /* @__PURE__ */ n(
+) : null : /* @__PURE__ */ r(
   "button",
   {
-    ...a,
+    ...b,
     type: "button",
     "data-testid": `${o}-button`,
-    "aria-label": e,
+    "aria-label": a,
     className: `${t}__button ${t}__button--search`,
-    onClick: (r) => {
-      u(!0), r.stopPropagation();
+    onClick: (n) => {
+      _(!0), n.stopPropagation();
     },
-    children: /* @__PURE__ */ n(_, { "data-testid": `${o}-button-icon`, className: `${t}__button__icon` })
+    children: /* @__PURE__ */ r(e, { "data-testid": `${o}-button-icon`, className: `${t}__button__icon` })
   }
 );
 export {
-  m as SearchButton
+  p as SearchButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.67.2",
+  "version": "1.68.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"