@phillips/seldon 1.66.0 → 1.67.1

package/dist/components/Search/Search.js

@@ -1,10 +1,10 @@
-import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
 import i, { useEffect as y } from "react";
-import { getCommonProps as j, px as D, encodeURLSearchParams as g } from "../../utils/index.js";
-import p from "../../node_modules/classnames/index.js";
-import H from "../Input/Input.js";
-import O from "../Link/Link.js";
-import V from "./SearchResults/SearchResults.js";
+import { getCommonProps as V, px as j, encodeURLSearchParams as g } 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";
@@ -12,11 +12,11 @@ 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";
 const ne = ({
-  onSearch: u,
+  onSearch: p,
   searchResults: C = [],
   state: c = "idle",
-  defaultValue: E = "",
-  className: I,
+  defaultValue: I = "",
+  className: E,
   placeholder: R = "",
   searchButtonText: l = "Search",
   loadingText: b = "Search In Progress...",
@@ -26,8 +26,8 @@ const ne = ({
   ...S
 }) => {
   var N;
-  const { className: e, "data-testid": d, ...L } = j(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 = u ? (r) => {
-    u(r.target.value);
+  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);
   } : void 0;
   K(v, () => $(!1));
   const x = (r) => {
@@ -52,7 +52,7 @@ const ne = ({
     var s;
     o.setIsSearchExpanded(r), (s = h.current) == null || s.reset();
   };
-  return /* @__PURE__ */ a("div", { className: `${e}__container`, children: /* @__PURE__ */ f(
+  return /* @__PURE__ */ a("div", { className: `${e}__container`, children: /* @__PURE__ */ u(
     "div",
     {
       onClick: () => o.setIsSearchExpanded(!0),
@@ -64,23 +64,23 @@ const ne = ({
           "div",
           {
             ...L,
-            className: p(e, I, { [`${e}--active`]: t }),
+            className: f(e, E, { [`${e}--active`]: t }),
             "data-testid": d,
             role: "search",
             ...S,
-            children: /* @__PURE__ */ f(
+            children: /* @__PURE__ */ u(
               "form",
               {
                 "data-testid": `${d}-form`,
-                className: p(`${e}__form`, {
+                className: f(`${e}__form`, {
                   [`${e}__form--active`]: t
                 }),
                 ref: h,
                 children: [
-                  /* @__PURE__ */ f(
+                  /* @__PURE__ */ u(
                     "div",
                     {
-                      className: p(`${e}__content-wrapper`, {
+                      className: f(`${e}__content-wrapper`, {
                         [`${e}__content-wrapper--active`]: t
                       }),
                       role: "combobox",
@@ -90,11 +90,11 @@ const ne = ({
                           q,
                           {
                             in: t,
-                            classNames: `${D}-input`,
+                            classNames: `${j}-input`,
                             addEndListener: () => {
                             },
                             children: /* @__PURE__ */ a(
-                              H,
+                              D,
                               {
                                 "aria-hidden": !t,
                                 className: `${e}__input`,
@@ -103,7 +103,7 @@ const ne = ({
                                 labelText: l,
                                 placeholder: t ? R : "",
                                 type: "text",
-                                defaultValue: E,
+                                defaultValue: I,
                                 invalid: c === "invalid",
                                 invalidText: w,
                                 onKeyDown: x,
@@ -128,14 +128,15 @@ const ne = ({
                     }
                   ),
                   n && n.length > 2 ? /* @__PURE__ */ a(
-                    V,
+                    O,
                     {
                       autoCompleteResults: C,
                       isLoading: c === "loading",
                       loadingText: b,
                       onKeyDown: x,
+                      userInputValue: n,
                       children: /* @__PURE__ */ a("li", { className: `${e}__result`, children: /* @__PURE__ */ a(
-                        O,
+                        H,
                         {
                           href: ((r) => g(_(r)))(n),
                           children: /* @__PURE__ */ a("p", { children: k(n) })

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

@@ -10,6 +10,7 @@ export interface SearchResultsProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
     loadingText?: string;
     onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    userInputValue?: string;
 }
-declare const SearchResults: ({ autoCompleteResults, isLoading, children, loadingText, onKeyDown, }: React.PropsWithChildren<SearchResultsProps>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchResults: ({ autoCompleteResults, isLoading, children, loadingText, onKeyDown, userInputValue, }: React.PropsWithChildren<SearchResultsProps>) => import("react/jsx-runtime").JSX.Element;
 export default SearchResults;

package/dist/components/Search/SearchResults/SearchResults.js

@@ -1,21 +1,27 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { px as s } from "../../../utils/index.js";
-import d from "../../Link/Link.js";
-import { LinkVariants as m } from "../../Link/types.js";
-const p = ({
-  autoCompleteResults: a = [],
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { px as a } from "../../../utils/index.js";
+import u from "../../Link/Link.js";
+import { LinkVariants as L } from "../../Link/types.js";
+const w = ({
+  autoCompleteResults: e = [],
   isLoading: i,
-  children: l,
-  loadingText: n = "Loading...",
-  onKeyDown: c
+  children: c,
+  loadingText: t = "Loading...",
+  onKeyDown: o,
+  userInputValue: h = ""
 }) => {
-  const t = Array.isArray(a) && a.length > 0;
-  return /* @__PURE__ */ r("div", { className: `${s}-search__results`, children: /* @__PURE__ */ h("ul", { "data-testid": "search-results", className: `${s}-search__results-container`, children: [
-    i ? /* @__PURE__ */ r("li", { className: `${s}-search__result`, children: n }) : null,
-    t && a.map((e) => /* @__PURE__ */ r("li", { className: `${s}-search__result`, children: /* @__PURE__ */ r(d, { href: e.url, onKeyDown: c, variant: m.snwFlyoutLink, children: e.label }) }, e.id)),
-    l
+  const m = Array.isArray(e) && e.length > 0;
+  function d(s, n) {
+    return s.split(new RegExp(`(${n})`, "gi")).map(
+      (l, _) => l.toLocaleLowerCase() === n.toLocaleLowerCase() ? /* @__PURE__ */ r("strong", { children: l }, _) : l
+    );
+  }
+  return /* @__PURE__ */ r("div", { className: `${a}-search__results`, children: /* @__PURE__ */ p("ul", { "data-testid": "search-results", className: `${a}-search__results-container`, children: [
+    i ? /* @__PURE__ */ r("li", { className: `${a}-search__result`, children: t }) : null,
+    m && e.map((s) => /* @__PURE__ */ r("li", { className: `${a}-search__result`, children: /* @__PURE__ */ r(u, { href: s.url, onKeyDown: o, variant: L.snwFlyoutLink, children: /* @__PURE__ */ r("span", { className: "${px}-search__result__label", children: d(s.label, h) }) }) }, s.id)),
+    c
   ] }) });
 };
 export {
-  p as default
+  w as default
 };

package/dist/scss/componentStyles.scss

@@ -30,7 +30,6 @@
 @use 'components/Accordion/accordion';
 @use 'components/Breadcrumb/breadcrumb';
 @use 'components/Drawer/drawer';
-@use 'components/HTMLParser/htmlParser';
 @use 'components/Dropdown/dropdown';
 @use 'components/Video/video';
 @use 'components/Pagination/pagination';

package/dist/scss/components/Search/SearchResults/_searchResults.scss

@@ -28,5 +28,9 @@
 .#{$px}-search {
   &__result {
     display: flex;
+
+    &__label {
+      text-transform: initial;
+    }
   }
 }

package/dist/scss/components/Search/_search.scss

@@ -11,6 +11,18 @@
   top: $padding-md;
   transition: left 0.25s ease-in;
 
+  &::after {
+    border-bottom: 1px solid #000;
+    bottom: 0;
+    content: '';
+    display: flex;
+    margin-bottom: -1px;
+    position: absolute;
+    right: 0;
+    transition: width 0.25s ease-in;
+    width: 0;
+  }
+
   @include isHeaderDesktop {
     top: 0;
   }
@@ -25,13 +37,17 @@
     left: 0;
     transition: left 0.25s ease-in 0.2s;
 
+    &::after {
+      transition: width 0.25s ease-in 0.2s;
+      width: 100%;
+    }
+
     @include isHeaderMobile {
       left: $spacing-md;
     }
   }
 
   &__input-status-icon {
-    border-bottom: 1px solid $pure-black;
     height: $search-size;
     width: $search-size;
 
@@ -81,7 +97,6 @@
       &__input {
         background: transparent;
         border: 0;
-        border-bottom: 1px solid $pure-black;
         border-radius: unset;
         color: $pure-black;
         font-size: $string-size1;

package/dist/scss/components/Search/_searchButton.scss

@@ -26,10 +26,6 @@
     padding: 0 0 0.125rem;
   }
 
-  &--close {
-    border-bottom: 1px solid $pure-black;
-  }
-
   svg {
     height: 1.5rem;
     width: 1.5rem;
@@ -38,7 +34,21 @@
   &:hover,
   &:focus-visible,
   &:active {
-    border-bottom: 1px solid $pure-black;
+    &::after {
+      border-bottom: 1px solid #000;
+      bottom: 0;
+      content: '';
+      display: flex;
+      margin-bottom: -2px;
+      position: absolute;
+      right: 0;
+      width: 102%;
+
+      @include isHeaderMobile {
+        margin-bottom: -1px;
+        width: 52%;
+      }
+    }
   }
 
   &__icon {

package/dist/scss/site-furniture/Header/_header.scss

@@ -174,7 +174,7 @@
       height: 100vh;
       left: 0;
       position: absolute;
-      top: $header-height;
+      top: calc($header-height + 1px);
       width: 100%;
     }
   }

package/package.json

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

package/dist/scss/components/HTMLParser/_htmlParser.scss

@@ -1,5 +0,0 @@
-@use '../../allPartials' as *;
-
-.#{$px}-html-parser {
-  width: 100%;
-}