@depict-ai/ui 4.9.2 → 4.9.4

package/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.9.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.9.4";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -10090,15 +10090,18 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
     $52FdA$solidjsweb.effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected());
+        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected()),
+        _v$4 = isSelected === null || isSelected === void 0 ? void 0 : isSelected();
       _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$4, "data-search-result-id", _p$.t = _v$2);
       _v$3 !== _p$.a && _el$4.classList.toggle("selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$4;
@@ -11088,7 +11091,7 @@ var $29e5dbeb69da7a36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<but
   $29e5dbeb69da7a36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button type=button class=clear>`),
   $29e5dbeb69da7a36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=spacer>`),
   $29e5dbeb69da7a36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class="submit major"type=button>`),
-  $29e5dbeb69da7a36$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+  $29e5dbeb69da7a36$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
 function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -11103,7 +11106,9 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
-    class_: class_
+    class_: class_,
+    setSearchRoleOnContainer_ = true,
+    ariaControls: ariaControls
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -11202,6 +11207,13 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       [_el$17, _co$5] = $52FdA$solidjsweb.getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$18.nextSibling);
+    $52FdA$solidjsweb.spread(_el$3, $52FdA$solidjsweb.mergeProps({
+      get ["class"]() {
+        return "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : "");
+      }
+    }, setSearchRoleOnContainer_ && {
+      role: "search"
+    }), false, true);
     $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -11243,61 +11255,85 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       }
     }), true);
     $52FdA$solidjsweb.insert(_el$5, isNewModal && $52FdA$solidjsweb.createComponent(ClearButton, {}), _el$8, _co$);
-    _el$6.$$pointerdown = _ref3 => {
-      let {
-        pointerType: pointerType
-      } = _ref3;
-      // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
-      if (pointerType === "mouse") {
-        const handler = $52FdA$depictaiutilishared.catchify(_ref4 => {
-          let {
-            pointerType: pointerType,
-            target: target
-          } = _ref4;
-          if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
-          input_element.click();
-        });
-        window.addEventListener("pointerup", handler, {
-          once: true
-        });
-        $52FdA$solidjs.runWithOwner(owner_of_field_element, () => $52FdA$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
-      }
-    };
-    $52FdA$solidjsweb.addEventListener(_el$6, "select", $52FdA$depictaiutilishared.catchify(() => {
-      if (disabled_)
-        // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
-        return;
-      if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length)
-        // everything was selected, clear filters on next submit on next input
-        input_element.addEventListener("input", $52FdA$depictaiutilishared.catchify(() => clear_filters_(false)),
-        // We don't count this as user triggered since it wasn't explicit
-        {
-          once: true
-        });
-    }));
-    $52FdA$solidjsweb.addEventListener(_el$6, "input", $52FdA$depictaiutilishared.catchify(() => {
-      const {
-        value: value
-      } = input_element;
-      if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
-      setSearchFieldValue(value);
-    }), true);
-    $52FdA$solidjsweb.addEventListener(_el$6, "keydown", $52FdA$depictaiutilishared.catchify(e => {
-      if (disabled_) {
-        if (e.key !== "Tab" && e.key !== "Shift")
-          // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
-          input_element.click();
-      } else if (e.key === "Enter") {
-        const dont_submit = override_on_enter_ === null || override_on_enter_ === void 0 ? void 0 : override_on_enter_(e);
-        if (!dont_submit) submit_query_();
-      }
-    }), true);
     var _ref$2 = $52FdA$depictaiutilishared.catchify(el => {
       input_element = el;
       input_field_ref_ === null || input_field_ref_ === void 0 || input_field_ref_(el);
     });
     typeof _ref$2 === "function" && $52FdA$solidjsweb.use(_ref$2, _el$6);
     _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $52FdA$solidjsweb.spread(_el$6, $52FdA$solidjsweb.mergeProps(() => setSearchRoleOnContainer_ ? {
+      "aria-label": i18n_.search_field_field_aria_label_()
+    } :
+    // Searchbox announces basically the same as our aria-label, we could explore always using searchbox in the future
+    {
+      role: "searchbox"
+    }, {
+      get value() {
+        return searchFieldValue();
+      },
+      get onKeyDown() {
+        return $52FdA$depictaiutilishared.catchify(e => {
+          if (disabled_) {
+            if (e.key !== "Tab" && e.key !== "Shift")
+              // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
+              input_element.click();
+          } else if (e.key === "Enter") {
+            const dont_submit = override_on_enter_ === null || override_on_enter_ === void 0 ? void 0 : override_on_enter_(e);
+            if (!dont_submit) submit_query_();
+          }
+        });
+      },
+      get onInput() {
+        return $52FdA$depictaiutilishared.catchify(() => {
+          const {
+            value: value
+          } = input_element;
+          if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
+          setSearchFieldValue(value);
+        });
+      },
+      get onSelect() {
+        return $52FdA$depictaiutilishared.catchify(() => {
+          if (disabled_)
+            // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
+            return;
+          if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length)
+            // everything was selected, clear filters on next submit on next input
+            input_element.addEventListener("input", $52FdA$depictaiutilishared.catchify(() => clear_filters_(false)),
+            // We don't count this as user triggered since it wasn't explicit
+            {
+              once: true
+            });
+        });
+      },
+      "onPointerDown": _ref3 => {
+        let {
+          pointerType: pointerType
+        } = _ref3;
+        // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
+        if (pointerType === "mouse") {
+          const handler = $52FdA$depictaiutilishared.catchify(_ref4 => {
+            let {
+              pointerType: pointerType,
+              target: target
+            } = _ref4;
+            if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
+            input_element.click();
+          });
+          window.addEventListener("pointerup", handler, {
+            once: true
+          });
+          $52FdA$solidjs.runWithOwner(owner_of_field_element, () => $52FdA$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
+        }
+      },
+      get placeholder() {
+        return i18n_.placeholder_text_();
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
+    }), false, false);
     $52FdA$solidjsweb.insert(_el$5, !isNewModal && $52FdA$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
     $52FdA$solidjsweb.insert(_el$3, isNewModal && $52FdA$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
     $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
@@ -11311,25 +11347,11 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
         return _el$11;
       }
     }), _el$19, _co$6);
-    $52FdA$solidjsweb.effect(_p$ => {
-      var _v$ = "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : ""),
-        _v$2 = i18n_.search_field_field_aria_label_(),
-        _v$3 = i18n_.placeholder_text_();
-      _v$ !== _p$.e && $52FdA$solidjsweb.className(_el$3, _p$.e = _v$);
-      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$6, "aria-label", _p$.t = _v$2);
-      _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$6, "placeholder", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setProperty(_el$6, "value", searchFieldValue()));
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$3;
   })();
 }
-$52FdA$solidjsweb.delegateEvents(["click", "keydown", "input", "pointerdown"]);
+$52FdA$solidjsweb.delegateEvents(["click"]);
 var $820f2920cc576f7e$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=16><path d="M.773 7.371L7.98.176C8.098.059 8.238 0 8.402 0s.305.059.422.176S9 .434 9 .598s-.059.305-.176.422L2.648 7.195h19.547a.59.59 0 0 1 .609.609c0 .172-.059.305-.176.422s-.262.176-.434.176H2.648l6.176 6.176a.59.59 0 0 1 .176.426c0 .16-.059.301-.176.422-.055.059-.121.109-.199.137s-.148.039-.223.039-.156-.012-.234-.039a.54.54 0 0 1-.187-.137L.773 8.227c-.117-.117-.176-.258-.176-.422a.6.6 0 0 1 .176-.434zm0 0">`);
 function $820f2920cc576f7e$export$8d8893ffd8aca39a() {
   return $52FdA$solidjsweb.getNextElement($820f2920cc576f7e$var$_tmpl$);
@@ -11359,8 +11381,8 @@ function $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $9035b24c2dbd3f36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $9035b24c2dbd3f36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
-  $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $9035b24c2dbd3f36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  $9035b24c2dbd3f36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search"role=dialog><div class=depict-search-modal-backdrop></div><!$><!/>`);
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -11508,7 +11530,9 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = (() => {
     var _el$4 = $52FdA$solidjsweb.getNextElement($9035b24c2dbd3f36$var$_tmpl$3),
@@ -11764,7 +11788,16 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
         });
       }
     }));
-    $52FdA$solidjsweb.effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $52FdA$solidjsweb.effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$2;
   })();
@@ -11968,6 +12001,7 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $b0f8d9f49e018db9$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
+              const wholeTextToDisplay = $52FdA$solidjs.createMemo(() => item().title_);
               return (() => {
                 var _el$7 = $52FdA$solidjsweb.getNextElement($79a8fa74cb5cdfb9$var$_tmpl$2);
                 $52FdA$solidjsweb.use(element => {
@@ -11992,20 +12026,24 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
                 $52FdA$solidjsweb.addEventListener(_el$7, "mouseenter", $52FdA$depictaiutilishared.catchify(() => write_selected_index_([itemIndex_(), index])));
                 $52FdA$solidjsweb.insert(_el$7, $52FdA$solidjsweb.createComponent((0, $23c3f390dee33ff8$export$ba17c5b7e6dda39f), {
                   class_: "title line-clamp",
-                  get whole_text_to_display_() {
-                    return $52FdA$solidjs.createMemo(() => item().title_);
-                  },
+                  whole_text_to_display_: wholeTextToDisplay,
                   searching_for_value_: searching_for_value_
                 }));
                 $52FdA$solidjsweb.effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href();
+                    _v$2 = isSelected(),
+                    _v$3 = href(),
+                    _v$4 = wholeTextToDisplay();
                   _v$ !== _p$.e && _el$7.classList.toggle("selected", _p$.e = _v$);
-                  _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$7, "href", _p$.t = _v$2);
+                  _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
-                  t: undefined
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -12197,7 +12235,7 @@ var $43600b30502feeda$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div
   $43600b30502feeda$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $43600b30502feeda$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
   $43600b30502feeda$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
-  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div></div><!$><!/>`),
+  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded></div></div><!$><!/>`),
   $43600b30502feeda$var$_tmpl$8 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=left>`),
   $43600b30502feeda$var$_tmpl$9 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=right>`);
 /**
@@ -12447,6 +12485,9 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -12552,7 +12593,9 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.9.2";
+export const version = "4.9.4";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -1539,7 +1539,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1619,5 +1619,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
   showSliderArrow_?: boolean;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";