@depict-ai/ui 0.0.19 → 0.0.21

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export const embedded_num_products: ({ make_product_count_, set_observed_results
     middle_elements_: Accessor<JSX.Element>;
     on_filters_constructed_: () => void;
 };
-export const version = "0.0.19";
+export const version = "0.0.21";
 export function add_to_version_info(stuff_to_add: {
     [key: string]: string;
 }): void;

package/dist/main.js

@@ -168,7 +168,7 @@ const $93e94e7b0aa8ca88$export$824dde41348efed1 = /*@__PURE__*/ (()=>{
 
 
 
-const $b757f75811f3261f$export$83d89fbfd8236492 = "0.0.19";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "0.0.21";
 
 
 /**
@@ -1750,6 +1750,7 @@ function $d659702496cb72ea$export$469c7af753d08925({ price_: price_ , price_form
 
 
 
+
 class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;
@@ -1776,7 +1777,12 @@ class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
         }
     });
     #get_rendered_recs() {
-        return (0, $iBTHO$depictaiutilishared.catchify)(this.render_, "rendering failed")(true) || [];
+        return (0, $iBTHO$solidjs.createRoot)((dispose)=>{
+            this.addEventListener("close", dispose, {
+                once: true
+            });
+            return (0, $iBTHO$depictaiutilishared.catchify)(this.render_, "rendering failed")(true) || [];
+        });
     }
     #unload = (0, $iBTHO$depictaiutilishared.catchify)(()=>{
         if (!this.#is_open) return;
@@ -3081,38 +3087,53 @@ async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_
 
 
 
-
 
 
 const $b3cf6ca8dc0e9998$var$_tmpl$ = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<span class="count"></span>`, 2), $b3cf6ca8dc0e9998$var$_tmpl$2 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<label class="input-row"><div class="left"><input type="checkbox"><span class="custom-indicator"></span><span class="text"></span></div></label>`, 9);
 const $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d = (props)=>{
+    // It seems like there's no diffing without memos here (since we often just have computations in the getters above that update to the same result often because their dependencies change with unrelated changes often), so put memos here to avoid unneeded DOM changes
+    const count = (0, $iBTHO$solidjs.createMemo)(()=>props.count_);
+    const label = (0, $iBTHO$solidjs.createMemo)(()=>props.label_);
+    const checked = (0, $iBTHO$solidjs.createMemo)(()=>props.checked_);
+    const value = (0, $iBTHO$solidjs.createMemo)(()=>props.value_);
+    const is_count_zero = (0, $iBTHO$solidjs.createMemo)(()=>props.is_count_zero_);
     const id = (0, $iBTHO$depictaiutilishared.make_random_classname)();
     return /* We can't use actual margin because ExpandingContainer gets messed up */ (()=>{
         const _el$ = $b3cf6ca8dc0e9998$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
         (0, $iBTHO$solidjsweb.setAttribute)(_el$, "for", id);
+        (0, $iBTHO$solidjsweb.use)((input_el)=>{
+            // For the checkboxes we know that they changed by putting them into a form and listening on the form changing.
+            // A bug here was that some checkboxes didn't match the state of their checked() solid accessor.
+            // The reason for that being that we re-use the checkboxes. That means if one box was unchecked by the user and then removed, the "checked" value of "another" checkbox (that now had position 0) had changed to 0 (because the user unchecked the box with position 0) while solid js still believed that it was checked because it's checked signal hadn't changed.
+            // I've worked around this by restoring the state of the checkbox to what it is in solid js a bit after it was changed
+            // Why it can't be done instantaneously I don't know.
+            input_el.addEventListener("change", (0, $iBTHO$depictaiutilishared.catchify)(()=>requestAnimationFrame((0, $iBTHO$depictaiutilishared.catchify)(()=>{
+                    if (input_el.checked !== checked()) input_el.checked = checked();
+                }))));
+            props.input_ref_?.(input_el);
+        }, _el$3);
         (0, $iBTHO$solidjsweb.setAttribute)(_el$3, "id", id);
-        (0, $iBTHO$solidjsweb.spread)(_el$3, (0, $iBTHO$solidjsweb.mergeProps)({
-            get name () {
-                return props.value_;
-            },
-            get checked () {
-                return props.checked_;
-            }
-        }, ()=>props.input_ref_ ? {
-                ref: props.input_ref_
-            } : {}), false, false);
-        (0, $iBTHO$solidjsweb.insert)(_el$5, ()=>props.label_ /* don't destructure this it could be a reactive getter */  || props.value_);
+        (0, $iBTHO$solidjsweb.insert)(_el$5, ()=>label() || value());
         (0, $iBTHO$solidjsweb.insert)(_el$, (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$solidjs.Show), {
             get when () {
-                return props.count_ != undefined;
+                return count() != undefined;
             },
             get children () {
                 const _el$6 = $b3cf6ca8dc0e9998$var$_tmpl$.cloneNode(true);
-                (0, $iBTHO$solidjsweb.insert)(_el$6, ()=>props.count_);
+                (0, $iBTHO$solidjsweb.insert)(_el$6, count);
                 return _el$6;
             }
         }), null);
-        (0, $iBTHO$solidjsweb.effect)(()=>_el$.classList.toggle("count-0", !!(props.is_count_zero_ || props.count_ === 0)));
+        (0, $iBTHO$solidjsweb.effect)((_p$)=>{
+            const _v$ = !!(is_count_zero() || count() === 0), _v$2 = value();
+            _v$ !== _p$._v$ && _el$.classList.toggle("count-0", _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && (0, $iBTHO$solidjsweb.setAttribute)(_el$3, "name", _p$._v$2 = _v$2);
+            return _p$;
+        }, {
+            _v$: undefined,
+            _v$2: undefined
+        });
+        (0, $iBTHO$solidjsweb.effect)(()=>_el$3.checked = checked());
         return _el$;
     })();
 };
@@ -3164,7 +3185,7 @@ function $d94869c80e337a3d$export$dd948f91abc3a1c4({ filter_: filter_ , selected
             }));
     });
     const render_checkbox = (checkbox)=>{
-        // Checkbox always calls the getters in props so we don't wrap these values into memos
+        // Checkbox always calls the getters in props, so we don't wrap these values into memos
         return (0, $iBTHO$solidjsweb.createComponent)((0, $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d), {
             get value_ () {
                 return checkbox().value_;
@@ -7734,6 +7755,7 @@ function $f40a47a30a358305$export$1c593cbd6f1e10bc({ search_field_value_: search
     const body_style = (0, $iBTHO$solidjs.createMemo)(()=>{
         const style_obj = {
             width: "80vw",
+            position: "absolute",
             ...style_props_[0]()
         };
         return {

package/dist/module.js

@@ -1,6 +1,6 @@
 import {dlog as $kyEB6$dlog, Placeholder as $kyEB6$Placeholder, catchify as $kyEB6$catchify, base_url as $kyEB6$base_url, get_depict_id as $kyEB6$get_depict_id, get_user_id as $kyEB6$get_user_id, get_session_id as $kyEB6$get_session_id, make_url_with_query_params as $kyEB6$make_url_with_query_params, fetch_retry as $kyEB6$fetch_retry, sort_obj as $kyEB6$sort_obj, version as $kyEB6$version, observer as $kyEB6$observer, report as $kyEB6$report, ContainedPlaceholderImage as $kyEB6$ContainedPlaceholderImage, javascript_media_query as $kyEB6$javascript_media_query, href_change_ipns as $kyEB6$href_change_ipns, standard_price_format as $kyEB6$standard_price_format, deparallelize as $kyEB6$deparallelize, make_asyncIterable_exiter as $kyEB6$make_asyncIterable_exiter, insert_surfaces as $kyEB6$insert_surfaces, Tenant as $kyEB6$Tenant, deparallelize_no_drop as $kyEB6$deparallelize_no_drop, default_rr as $kyEB6$default_rr, make_random_classname as $kyEB6$make_random_classname, n_col_styling_with_dist as $kyEB6$n_col_styling_with_dist, Lazyfier as $kyEB6$Lazyfier, queueMacroTask as $kyEB6$queueMacroTask, Rec_Renderer as $kyEB6$Rec_Renderer, CrossIcon as $kyEB6$CrossIcon, useExpandingContainer as $kyEB6$useExpandingContainer, Amazing_Slider as $kyEB6$Amazing_Slider, slider_snap_css as $kyEB6$slider_snap_css, slider_fading_factory as $kyEB6$slider_fading_factory, MinusIcon as $kyEB6$MinusIcon, FilterIcon as $kyEB6$FilterIcon, SortIconAsc as $kyEB6$SortIconAsc, SortIconDesc as $kyEB6$SortIconDesc, PlusIcon as $kyEB6$PlusIcon, TickIcon as $kyEB6$TickIcon, ArrowUp as $kyEB6$ArrowUp, normal_get_product_id as $kyEB6$normal_get_product_id, GenericSliderArrowButton as $kyEB6$GenericSliderArrowButton, BackIcon as $kyEB6$BackIcon, SearchIcon as $kyEB6$SearchIcon, Layout as $kyEB6$Layout, make_placeholder_rr as $kyEB6$make_placeholder_rr, async_iterable_ipns as $kyEB6$async_iterable_ipns, depict_click as $kyEB6$depict_click, impression_track_element as $kyEB6$impression_track_element, add_new_tab_listener as $kyEB6$add_new_tab_listener, ContainedImage as $kyEB6$ContainedImage, buildThresholdList as $kyEB6$buildThresholdList, PreviousSearchIcon as $kyEB6$PreviousSearchIcon} from "@depict-ai/utilishared";
 import {template as $kyEB6$template, insert as $kyEB6$insert, createComponent as $kyEB6$createComponent, spread as $kyEB6$spread, effect as $kyEB6$effect, setAttribute as $kyEB6$setAttribute, use as $kyEB6$use, addEventListener as $kyEB6$addEventListener, delegateEvents as $kyEB6$delegateEvents, memo as $kyEB6$memo, style as $kyEB6$style, mergeProps as $kyEB6$mergeProps, classList as $kyEB6$classList, className as $kyEB6$className} from "solid-js/web";
-import {createSignal as $kyEB6$createSignal, untrack as $kyEB6$untrack, createMemo as $kyEB6$createMemo, onCleanup as $kyEB6$onCleanup, createEffect as $kyEB6$createEffect, createComputed as $kyEB6$createComputed, batch as $kyEB6$batch, createRoot as $kyEB6$createRoot, createResource as $kyEB6$createResource, Show as $kyEB6$Show, createRenderEffect as $kyEB6$createRenderEffect, runWithOwner as $kyEB6$runWithOwner, getOwner as $kyEB6$getOwner, on as $kyEB6$on, Index as $kyEB6$Index, For as $kyEB6$For, ErrorBoundary as $kyEB6$ErrorBoundary} from "solid-js";
+import {createSignal as $kyEB6$createSignal, untrack as $kyEB6$untrack, createMemo as $kyEB6$createMemo, onCleanup as $kyEB6$onCleanup, createEffect as $kyEB6$createEffect, createRoot as $kyEB6$createRoot, createComputed as $kyEB6$createComputed, batch as $kyEB6$batch, createResource as $kyEB6$createResource, Show as $kyEB6$Show, createRenderEffect as $kyEB6$createRenderEffect, runWithOwner as $kyEB6$runWithOwner, getOwner as $kyEB6$getOwner, on as $kyEB6$on, Index as $kyEB6$Index, For as $kyEB6$For, ErrorBoundary as $kyEB6$ErrorBoundary} from "solid-js";
 
 /*! Depict.ai search and product listing SDK */ 
 
@@ -117,7 +117,7 @@ const $a79d86d64fb64e8e$export$824dde41348efed1 = /*@__PURE__*/ (()=>{
 
 
 
-const $ec291e0010116877$export$83d89fbfd8236492 = "0.0.19";
+const $ec291e0010116877$export$83d89fbfd8236492 = "0.0.21";
 
 
 /**
@@ -1699,6 +1699,7 @@ function $8c0f86cb3e266eeb$export$469c7af753d08925({ price_: price_ , price_form
 
 
 
+
 class $753e9b2889a47c89$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;
@@ -1725,7 +1726,12 @@ class $753e9b2889a47c89$export$3ccaa27d81dd8556 extends EventTarget {
         }
     });
     #get_rendered_recs() {
-        return (0, $kyEB6$catchify)(this.render_, "rendering failed")(true) || [];
+        return (0, $kyEB6$createRoot)((dispose)=>{
+            this.addEventListener("close", dispose, {
+                once: true
+            });
+            return (0, $kyEB6$catchify)(this.render_, "rendering failed")(true) || [];
+        });
     }
     #unload = (0, $kyEB6$catchify)(()=>{
         if (!this.#is_open) return;
@@ -3030,38 +3036,53 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
 
 
 
-
 
 
 const $87c712b5b33f24f7$var$_tmpl$ = /*#__PURE__*/ (0, $kyEB6$template)(`<span class="count"></span>`, 2), $87c712b5b33f24f7$var$_tmpl$2 = /*#__PURE__*/ (0, $kyEB6$template)(`<label class="input-row"><div class="left"><input type="checkbox"><span class="custom-indicator"></span><span class="text"></span></div></label>`, 9);
 const $87c712b5b33f24f7$export$48513f6b9f8ce62d = (props)=>{
+    // It seems like there's no diffing without memos here (since we often just have computations in the getters above that update to the same result often because their dependencies change with unrelated changes often), so put memos here to avoid unneeded DOM changes
+    const count = (0, $kyEB6$createMemo)(()=>props.count_);
+    const label = (0, $kyEB6$createMemo)(()=>props.label_);
+    const checked = (0, $kyEB6$createMemo)(()=>props.checked_);
+    const value = (0, $kyEB6$createMemo)(()=>props.value_);
+    const is_count_zero = (0, $kyEB6$createMemo)(()=>props.is_count_zero_);
     const id = (0, $kyEB6$make_random_classname)();
     return /* We can't use actual margin because ExpandingContainer gets messed up */ (()=>{
         const _el$ = $87c712b5b33f24f7$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
         (0, $kyEB6$setAttribute)(_el$, "for", id);
+        (0, $kyEB6$use)((input_el)=>{
+            // For the checkboxes we know that they changed by putting them into a form and listening on the form changing.
+            // A bug here was that some checkboxes didn't match the state of their checked() solid accessor.
+            // The reason for that being that we re-use the checkboxes. That means if one box was unchecked by the user and then removed, the "checked" value of "another" checkbox (that now had position 0) had changed to 0 (because the user unchecked the box with position 0) while solid js still believed that it was checked because it's checked signal hadn't changed.
+            // I've worked around this by restoring the state of the checkbox to what it is in solid js a bit after it was changed
+            // Why it can't be done instantaneously I don't know.
+            input_el.addEventListener("change", (0, $kyEB6$catchify)(()=>requestAnimationFrame((0, $kyEB6$catchify)(()=>{
+                    if (input_el.checked !== checked()) input_el.checked = checked();
+                }))));
+            props.input_ref_?.(input_el);
+        }, _el$3);
         (0, $kyEB6$setAttribute)(_el$3, "id", id);
-        (0, $kyEB6$spread)(_el$3, (0, $kyEB6$mergeProps)({
-            get name () {
-                return props.value_;
-            },
-            get checked () {
-                return props.checked_;
-            }
-        }, ()=>props.input_ref_ ? {
-                ref: props.input_ref_
-            } : {}), false, false);
-        (0, $kyEB6$insert)(_el$5, ()=>props.label_ /* don't destructure this it could be a reactive getter */  || props.value_);
+        (0, $kyEB6$insert)(_el$5, ()=>label() || value());
         (0, $kyEB6$insert)(_el$, (0, $kyEB6$createComponent)((0, $kyEB6$Show), {
             get when () {
-                return props.count_ != undefined;
+                return count() != undefined;
             },
             get children () {
                 const _el$6 = $87c712b5b33f24f7$var$_tmpl$.cloneNode(true);
-                (0, $kyEB6$insert)(_el$6, ()=>props.count_);
+                (0, $kyEB6$insert)(_el$6, count);
                 return _el$6;
             }
         }), null);
-        (0, $kyEB6$effect)(()=>_el$.classList.toggle("count-0", !!(props.is_count_zero_ || props.count_ === 0)));
+        (0, $kyEB6$effect)((_p$)=>{
+            const _v$ = !!(is_count_zero() || count() === 0), _v$2 = value();
+            _v$ !== _p$._v$ && _el$.classList.toggle("count-0", _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && (0, $kyEB6$setAttribute)(_el$3, "name", _p$._v$2 = _v$2);
+            return _p$;
+        }, {
+            _v$: undefined,
+            _v$2: undefined
+        });
+        (0, $kyEB6$effect)(()=>_el$3.checked = checked());
         return _el$;
     })();
 };
@@ -3113,7 +3134,7 @@ function $a4601e6bea3ed1e6$export$dd948f91abc3a1c4({ filter_: filter_ , selected
             }));
     });
     const render_checkbox = (checkbox)=>{
-        // Checkbox always calls the getters in props so we don't wrap these values into memos
+        // Checkbox always calls the getters in props, so we don't wrap these values into memos
         return (0, $kyEB6$createComponent)((0, $87c712b5b33f24f7$export$48513f6b9f8ce62d), {
             get value_ () {
                 return checkbox().value_;
@@ -7683,6 +7704,7 @@ function $fabfda1230351b1a$export$1c593cbd6f1e10bc({ search_field_value_: search
     const body_style = (0, $kyEB6$createMemo)(()=>{
         const style_obj = {
             width: "80vw",
+            position: "absolute",
             ...style_props_[0]()
         };
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -36,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@depict-ai/utilishared": "^0.0.17",
+    "@depict-ai/utilishared": "^0.0.19",
     "solid-js": "^1.6.2"
   },
   "devDependencies": {