@depict-ai/ui 4.3.10 → 4.3.12

package/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.10";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.12";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -731,7 +731,8 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
-  title_: title_
+  title_: title_,
+  NoResultsFallback_: NoResultsFallback_
 }) {
   const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
@@ -789,6 +790,9 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
     get when() {
       return is_showing_something();
     },
+    get fallback() {
+      return NoResultsFallback_?.();
+    },
     children: slider
   });
 }
@@ -1315,6 +1319,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   const enableLink = $gVhhF$solidjs.createMemo(() => userWantsExpanded() && !animationIsRunning());
   const href = $gVhhF$solidjs.createMemo(() => variantToUse()?.page_url);
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
+  const title = $gVhhF$solidjs.createMemo(() => variantToUse()?.title);
   return (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$4),
       _el$12 = _el$.firstChild,
@@ -1424,7 +1429,10 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
             disconnector();
           }));
         }, _el$3);
-        $gVhhF$solidjsweb.insert(_el$5, () => variantToUse()?.title ?? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+        $gVhhF$solidjsweb.spread(_el$5, $gVhhF$solidjsweb.mergeProps(() => title() && {
+          title: title()
+        }), false, true);
+        $gVhhF$solidjsweb.insert(_el$5, () => title() ?? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
           height: "1em",
           width: "20ch"
         }));
@@ -1502,6 +1510,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
           }
         }), _el$11, _co$2);
         $gVhhF$solidjsweb.effect(() => _el$6.classList.toggle("sale", !!isOnSale()));
+        $gVhhF$solidjsweb.runHydrationEvents();
         return _el$3;
       }
     }), _el$15, _co$4);
@@ -1865,7 +1874,8 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
   layout_options_: layout_options_,
   title_: title_,
   max_rows_: max_rows_,
-  view_more_button_: view_more_button_
+  view_more_button_: view_more_button_,
+  NoResultsFallback_: NoResultsFallback_
 }) {
   const rows_object_ = $gVhhF$solidjs.createMemo(() => {
     const view_more_button = view_more_button_?.();
@@ -1942,6 +1952,9 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
     get when() {
       return is_showing_something();
     },
+    get fallback() {
+      return NoResultsFallback_?.();
+    },
     children: elements
   });
 }
@@ -2009,7 +2022,8 @@ function $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa(props) {
       layout_options_: $gVhhF$solidjs.createMemo(() => ({
         cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.columnsAtSize_),
         ...grid_spacing_override()
-      }))
+      })),
+      NoResultsFallback_: () => props.NoResultsFallback_
     };
     $gVhhF$solidjs.createEffect(() => {
       const {
@@ -7148,44 +7162,20 @@ function $7567511a7c3e4bd7$export$e5c2828934226505({
   expanded_: expanded_,
   i18n_: i18n_
 }) {
-  let first_span;
-  let second_span;
-  const animation_options = {
-    fill: "forwards",
-    duration: 200
-  };
-  const outer_div = (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($7567511a7c3e4bd7$var$_tmpl$),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.nextSibling;
-    var _ref$ = first_span;
-    typeof _ref$ === "function" ? $gVhhF$solidjsweb.use(_ref$, _el$2) : first_span = _el$2;
-    var _ref$2 = second_span;
-    typeof _ref$2 === "function" ? $gVhhF$solidjsweb.use(_ref$2, _el$3) : second_span = _el$3;
-    $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setAttribute(_el$, "aria-label", expanded_() ? i18n_.morphing_sign_expanded_aria_label_() : i18n_.morphing_sign_collapsed_aria_label_()));
+  return (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($7567511a7c3e4bd7$var$_tmpl$);
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = !!expanded_(),
+        _v$2 = expanded_() ? i18n_.morphing_sign_expanded_aria_label_() : i18n_.morphing_sign_collapsed_aria_label_();
+      _v$ !== _p$.e && _el$.classList.toggle("expanded", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
-  const [is_in_dom, set_is_in_dom] = $gVhhF$solidjs.createSignal(false);
-  (0, $gVhhF$depictaiutilishared.observer).wait_for_element(outer_div).then($gVhhF$depictaiutilishared.catchify(() => set_is_in_dom(true)));
-  $gVhhF$solidjs.createEffect(() => {
-    if (!is_in_dom())
-      // wait for us to being in DOM as animations don't work otherwise
-      return;
-    try {
-      const expanded = expanded_();
-      for (const span of [first_span, second_span]) span.animate([{
-        transform: `rotate(${expanded ? 90 : "0"}deg)`
-      }], animation_options);
-      const percentage_value = `${expanded ? 50 : 25}%`;
-      second_span.animate([{
-        left: percentage_value,
-        right: percentage_value
-      }], animation_options);
-    } catch (e) {
-      $gVhhF$depictaiutilishared.dlog("partial keyframes probably not supported", e);
-    }
-  });
-  return outer_div;
 }
 var $5ea5a82e398f6f44$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=highlighted-part>`);
 const $5ea5a82e398f6f44$var$dont_cut_in_between_less_than_characters = 30;
@@ -12526,7 +12516,7 @@ function $76227de40be817e5$export$f631859cab12b342({
 function $8781fcec27b20709$export$9ff751cd77687edc({
   search_results_: search_results_,
   router_: router_,
-  queries_without_content_results_: queries_without_content_results_,
+  setNumberContentResultsPerQuery_: setNumberContentResultsPerQuery_,
   get_search_query_: get_search_query_
 }) {
   const content_results = $gVhhF$solidjs.createMemo(() => search_results_()?.content_search_links);
@@ -12542,7 +12532,11 @@ function $8781fcec27b20709$export$9ff751cd77687edc({
   });
   $gVhhF$solidjs.createEffect(() => {
     const results = content_results();
-    if (Array.isArray(results) && results.length === 0) queries_without_content_results_.add($gVhhF$solidjs.untrack(get_search_query_));
+    const numberResults = Array.isArray(results) ? results.length : 0;
+    setNumberContentResultsPerQuery_(prev => {
+      prev.set($gVhhF$solidjs.untrack(get_search_query_), numberResults);
+      return prev;
+    });
   });
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
     get each() {
@@ -12559,7 +12553,8 @@ function $8781fcec27b20709$export$9ff751cd77687edc({
 }
 function $c2f92eb265a14529$export$4405d077f0a20494({
   content_results_rows_: [get_history_state_content_results_rows],
-  cols_at_size_: cols_at_size_
+  cols_at_size_: cols_at_size_,
+  overrideAmount_: overrideAmount_
 }) {
   const colsShowingNow = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $gVhhF$solidjs.createMemo(() => {
@@ -12567,9 +12562,12 @@ function $c2f92eb265a14529$export$4405d077f0a20494({
     if (isNaN(largest_in_cols_at_size) || Math.abs(largest_in_cols_at_size) === Infinity) return 4; // fallback to something big so we always have the right amount of placeholders
     return largest_in_cols_at_size;
   });
-  const num_placeholders = $gVhhF$solidjs.createMemo(() =>
-  // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
-  (get_history_state_content_results_rows() ?? (0, $3716b8caf7f959e2$export$70ceae36059a1036)) * (colsShowingNow() || largest_column()));
+  const num_placeholders = $gVhhF$solidjs.createMemo(() => {
+    const override = overrideAmount_();
+    if (override !== undefined) return override;
+    // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+    return (get_history_state_content_results_rows() ?? (0, $3716b8caf7f959e2$export$70ceae36059a1036)) * (colsShowingNow() || largest_column());
+  });
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
     get each() {
       return Array.from({
@@ -12599,15 +12597,13 @@ function $3716b8caf7f959e2$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const queries_without_content_results_ = new (0, $gVhhF$depictaiutilishared.ListenableSet)();
-  const [check_query, set_check_query] = $gVhhF$solidjs.createSignal(false);
-  const placeholders_enabled = $gVhhF$solidjs.createMemo(() => {
-    // don't show placeholders when the user toggles filters
-    check_query();
-    return !queries_without_content_results_.has(get_search_query_());
+  const [numberContentResultsPerQuery, setNumberContentResultsPerQuery_] = $gVhhF$solidjs.createSignal(new Map(), {
+    equals: false
   });
+  const contentResultsForCurrentQuery = $gVhhF$solidjs.createMemo(() => numberContentResultsPerQuery().get(get_search_query_()));
+  // Don't show placeholder if we know there will not be any content results and someone is just toggling filters
+  const placeholders_enabled = $gVhhF$solidjs.createMemo(() => contentResultsForCurrentQuery() !== 0);
   const rows_object = $3716b8caf7f959e2$var$make_state_saved_rows(content_results_rows_, i18n_);
-  for (const ev of ["add", "delete"]) queries_without_content_results_.addEventListener(ev, () => set_check_query(prev => !prev));
   return (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($3716b8caf7f959e2$var$_tmpl$),
       _el$2 = _el$.firstChild,
@@ -12637,14 +12633,15 @@ function $3716b8caf7f959e2$export$6d0c9c22f6652669({
               content_results_rows_: content_results_rows_,
               get cols_at_size_() {
                 return $gVhhF$solidjs.createMemo(() => layout_options_().cols_at_size);
-              }
+              },
+              overrideAmount_: contentResultsForCurrentQuery
             });
           },
           get children() {
             return $gVhhF$solidjsweb.createComponent((0, $8781fcec27b20709$export$9ff751cd77687edc), {
               router_: router_,
               search_results_: search_results_,
-              queries_without_content_results_: queries_without_content_results_,
+              setNumberContentResultsPerQuery_: setNumberContentResultsPerQuery_,
               get_search_query_: get_search_query_
             });
           }

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.3.10";
+export const version = "4.3.12";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -877,6 +877,7 @@ export function LooksSliderOrGrid(props: {
   FavoriteButton_?: (props: {
     display_: Accessor<ModernDisplay | null | undefined>;
   }) => JSX.Element;
+  NoResultsFallback_?: () => JSX.Element;
   displayTransformers_?: DisplayTransformers<ModernDisplay, ModernDisplayWithPageUrl<ModernDisplay>>;
   /**
    * If provided, will render as grid instead of slider
@@ -1398,7 +1399,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 unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1476,5 +1477,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/latest/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, fetch_retry as $9HbP8$fetch_retry, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, slider_fractional_factory as $9HbP8$slider_fractional_factory, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, catchify as $9HbP8$catchify, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, observer as $9HbP8$observer, javascript_media_query as $9HbP8$javascript_media_query, queueMacroTask as $9HbP8$queueMacroTask, findMostFrequentItem as $9HbP8$findMostFrequentItem, standard_price_format as $9HbP8$standard_price_format, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces, is_debug as $9HbP8$is_debug } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, fetch_retry as $9HbP8$fetch_retry, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, slider_fractional_factory as $9HbP8$slider_fractional_factory, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, catchify as $9HbP8$catchify, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, observer as $9HbP8$observer, javascript_media_query as $9HbP8$javascript_media_query, queueMacroTask as $9HbP8$queueMacroTask, findMostFrequentItem as $9HbP8$findMostFrequentItem, standard_price_format as $9HbP8$standard_price_format, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, insert_surfaces as $9HbP8$insert_surfaces, is_debug as $9HbP8$is_debug } from "@depict-ai/utilishared/latest";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, effect as $9HbP8$effect, className as $9HbP8$className, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, style as $9HbP8$style, use as $9HbP8$use, setProperty as $9HbP8$setProperty, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
 import { createSignal as $9HbP8$createSignal, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, createEffect as $9HbP8$createEffect, Show as $9HbP8$Show, mergeProps as $9HbP8$mergeProps1, Suspense as $9HbP8$Suspense, untrack as $9HbP8$untrack, createRenderEffect as $9HbP8$createRenderEffect, Index as $9HbP8$Index, createRoot as $9HbP8$createRoot, onCleanup as $9HbP8$onCleanup, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, splitProps as $9HbP8$splitProps, on as $9HbP8$on, batch as $9HbP8$batch, createSelector as $9HbP8$createSelector, children as $9HbP8$children, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.10";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.12";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -644,7 +644,8 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
-  title_: title_
+  title_: title_,
+  NoResultsFallback_: NoResultsFallback_
 }) {
   const is_showing_something = $9HbP8$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const title = $9HbP8$createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
@@ -702,6 +703,9 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
     get when() {
       return is_showing_something();
     },
+    get fallback() {
+      return NoResultsFallback_?.();
+    },
     children: slider
   });
 }
@@ -1228,6 +1232,7 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
   const enableLink = $9HbP8$createMemo(() => userWantsExpanded() && !animationIsRunning());
   const href = $9HbP8$createMemo(() => variantToUse()?.page_url);
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
+  const title = $9HbP8$createMemo(() => variantToUse()?.title);
   return (() => {
     var _el$ = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$4),
       _el$12 = _el$.firstChild,
@@ -1337,7 +1342,10 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
             disconnector();
           }));
         }, _el$3);
-        $9HbP8$insert(_el$5, () => variantToUse()?.title ?? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
+        $9HbP8$spread(_el$5, $9HbP8$mergeProps(() => title() && {
+          title: title()
+        }), false, true);
+        $9HbP8$insert(_el$5, () => title() ?? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
           height: "1em",
           width: "20ch"
         }));
@@ -1415,6 +1423,7 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
           }
         }), _el$11, _co$2);
         $9HbP8$effect(() => _el$6.classList.toggle("sale", !!isOnSale()));
+        $9HbP8$runHydrationEvents();
         return _el$3;
       }
     }), _el$15, _co$4);
@@ -1778,7 +1787,8 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
   layout_options_: layout_options_,
   title_: title_,
   max_rows_: max_rows_,
-  view_more_button_: view_more_button_
+  view_more_button_: view_more_button_,
+  NoResultsFallback_: NoResultsFallback_
 }) {
   const rows_object_ = $9HbP8$createMemo(() => {
     const view_more_button = view_more_button_?.();
@@ -1855,6 +1865,9 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
     get when() {
       return is_showing_something();
     },
+    get fallback() {
+      return NoResultsFallback_?.();
+    },
     children: elements
   });
 }
@@ -1922,7 +1935,8 @@ function $07ef910e8ef6b783$export$2c9f9bf2092486aa(props) {
       layout_options_: $9HbP8$createMemo(() => ({
         cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.columnsAtSize_),
         ...grid_spacing_override()
-      }))
+      })),
+      NoResultsFallback_: () => props.NoResultsFallback_
     };
     $9HbP8$createEffect(() => {
       const {
@@ -7061,44 +7075,20 @@ function $0b6bc2f8309efa8a$export$e5c2828934226505({
   expanded_: expanded_,
   i18n_: i18n_
 }) {
-  let first_span;
-  let second_span;
-  const animation_options = {
-    fill: "forwards",
-    duration: 200
-  };
-  const outer_div = (() => {
-    var _el$ = $9HbP8$getNextElement($0b6bc2f8309efa8a$var$_tmpl$),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.nextSibling;
-    var _ref$ = first_span;
-    typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$2) : first_span = _el$2;
-    var _ref$2 = second_span;
-    typeof _ref$2 === "function" ? $9HbP8$use(_ref$2, _el$3) : second_span = _el$3;
-    $9HbP8$effect(() => $9HbP8$setAttribute(_el$, "aria-label", expanded_() ? i18n_.morphing_sign_expanded_aria_label_() : i18n_.morphing_sign_collapsed_aria_label_()));
+  return (() => {
+    var _el$ = $9HbP8$getNextElement($0b6bc2f8309efa8a$var$_tmpl$);
+    $9HbP8$effect(_p$ => {
+      var _v$ = !!expanded_(),
+        _v$2 = expanded_() ? i18n_.morphing_sign_expanded_aria_label_() : i18n_.morphing_sign_collapsed_aria_label_();
+      _v$ !== _p$.e && _el$.classList.toggle("expanded", _p$.e = _v$);
+      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
-  const [is_in_dom, set_is_in_dom] = $9HbP8$createSignal(false);
-  (0, $9HbP8$observer).wait_for_element(outer_div).then($9HbP8$catchify(() => set_is_in_dom(true)));
-  $9HbP8$createEffect(() => {
-    if (!is_in_dom())
-      // wait for us to being in DOM as animations don't work otherwise
-      return;
-    try {
-      const expanded = expanded_();
-      for (const span of [first_span, second_span]) span.animate([{
-        transform: `rotate(${expanded ? 90 : "0"}deg)`
-      }], animation_options);
-      const percentage_value = `${expanded ? 50 : 25}%`;
-      second_span.animate([{
-        left: percentage_value,
-        right: percentage_value
-      }], animation_options);
-    } catch (e) {
-      $9HbP8$dlog("partial keyframes probably not supported", e);
-    }
-  });
-  return outer_div;
 }
 var $522a690e0e2bd46d$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span class=highlighted-part>`);
 const $522a690e0e2bd46d$var$dont_cut_in_between_less_than_characters = 30;
@@ -12439,7 +12429,7 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
 function $b26bdbd081f63e3f$export$9ff751cd77687edc({
   search_results_: search_results_,
   router_: router_,
-  queries_without_content_results_: queries_without_content_results_,
+  setNumberContentResultsPerQuery_: setNumberContentResultsPerQuery_,
   get_search_query_: get_search_query_
 }) {
   const content_results = $9HbP8$createMemo(() => search_results_()?.content_search_links);
@@ -12455,7 +12445,11 @@ function $b26bdbd081f63e3f$export$9ff751cd77687edc({
   });
   $9HbP8$createEffect(() => {
     const results = content_results();
-    if (Array.isArray(results) && results.length === 0) queries_without_content_results_.add($9HbP8$untrack(get_search_query_));
+    const numberResults = Array.isArray(results) ? results.length : 0;
+    setNumberContentResultsPerQuery_(prev => {
+      prev.set($9HbP8$untrack(get_search_query_), numberResults);
+      return prev;
+    });
   });
   return $9HbP8$createComponent((0, $9HbP8$For), {
     get each() {
@@ -12472,7 +12466,8 @@ function $b26bdbd081f63e3f$export$9ff751cd77687edc({
 }
 function $9d5b3ed1fc91c672$export$4405d077f0a20494({
   content_results_rows_: [get_history_state_content_results_rows],
-  cols_at_size_: cols_at_size_
+  cols_at_size_: cols_at_size_,
+  overrideAmount_: overrideAmount_
 }) {
   const colsShowingNow = $77348875ac090fcd$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $9HbP8$createMemo(() => {
@@ -12480,9 +12475,12 @@ function $9d5b3ed1fc91c672$export$4405d077f0a20494({
     if (isNaN(largest_in_cols_at_size) || Math.abs(largest_in_cols_at_size) === Infinity) return 4; // fallback to something big so we always have the right amount of placeholders
     return largest_in_cols_at_size;
   });
-  const num_placeholders = $9HbP8$createMemo(() =>
-  // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
-  (get_history_state_content_results_rows() ?? (0, $49de9d31aeea1b5e$export$70ceae36059a1036)) * (colsShowingNow() || largest_column()));
+  const num_placeholders = $9HbP8$createMemo(() => {
+    const override = overrideAmount_();
+    if (override !== undefined) return override;
+    // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+    return (get_history_state_content_results_rows() ?? (0, $49de9d31aeea1b5e$export$70ceae36059a1036)) * (colsShowingNow() || largest_column());
+  });
   return $9HbP8$createComponent((0, $9HbP8$Index), {
     get each() {
       return Array.from({
@@ -12512,15 +12510,13 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const queries_without_content_results_ = new (0, $9HbP8$ListenableSet1)();
-  const [check_query, set_check_query] = $9HbP8$createSignal(false);
-  const placeholders_enabled = $9HbP8$createMemo(() => {
-    // don't show placeholders when the user toggles filters
-    check_query();
-    return !queries_without_content_results_.has(get_search_query_());
+  const [numberContentResultsPerQuery, setNumberContentResultsPerQuery_] = $9HbP8$createSignal(new Map(), {
+    equals: false
   });
+  const contentResultsForCurrentQuery = $9HbP8$createMemo(() => numberContentResultsPerQuery().get(get_search_query_()));
+  // Don't show placeholder if we know there will not be any content results and someone is just toggling filters
+  const placeholders_enabled = $9HbP8$createMemo(() => contentResultsForCurrentQuery() !== 0);
   const rows_object = $49de9d31aeea1b5e$var$make_state_saved_rows(content_results_rows_, i18n_);
-  for (const ev of ["add", "delete"]) queries_without_content_results_.addEventListener(ev, () => set_check_query(prev => !prev));
   return (() => {
     var _el$ = $9HbP8$getNextElement($49de9d31aeea1b5e$var$_tmpl$),
       _el$2 = _el$.firstChild,
@@ -12550,14 +12546,15 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
               content_results_rows_: content_results_rows_,
               get cols_at_size_() {
                 return $9HbP8$createMemo(() => layout_options_().cols_at_size);
-              }
+              },
+              overrideAmount_: contentResultsForCurrentQuery
             });
           },
           get children() {
             return $9HbP8$createComponent((0, $b26bdbd081f63e3f$export$9ff751cd77687edc), {
               router_: router_,
               search_results_: search_results_,
-              queries_without_content_results_: queries_without_content_results_,
+              setNumberContentResultsPerQuery_: setNumberContentResultsPerQuery_,
               get_search_query_: get_search_query_
             });
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.3.10",
+  "version": "4.3.12",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.0.3",
+    "@depict-ai/plp-styling": "^4.0.4",
     "@depict-ai/types": "^5.1.2",
     "@depict-ai/utilishared": "^2.1.2",
     "solid-js": "^1.8.12"