@depict-ai/ui 2.0.4 → 2.0.6

package/latest/index.cjs

@@ -61,7 +61,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.4";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.6";
 
 /** @jsxImportSource solid-js */
 
@@ -1740,6 +1740,9 @@ function $0b7222ba8a8bb72f$export$e0d834a0ad870cda({
   selected_filters_: selected_filters_,
   i18n_: i18n_
 }) {
+  // If you ever attempt to implement that one can drag one range "knob" over the other like on prisjakt, see https://gitlab.com/depict-ai/depict.ai/-/merge_requests/8458/diffs?commit_id=c52dbdd15ca073489bee138b15d27bb6bf2992df
+  // The issue with it is that one wants to discard the changes to the lower value as soon as the lower value has become the upper value when dragging the initially lower knob over the initially upper knob
+  // But we can't reliably know when we've started dragging/changing the value (or at least I gave up at that point for now)
   const current_range = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(() => filter_().data));
   const selected_filter = $gVhhF$solidjs.createMemo(() => selected_filters_[0]().find(({
     field: checking_field,
@@ -1804,6 +1807,7 @@ function $0b7222ba8a8bb72f$var$RangeSelector({
   const [get_current_range] = current_range_;
   const pre_price = $gVhhF$solidjs.createMemo(() => price_formatting_().pre_);
   const post_price = $gVhhF$solidjs.createMemo(() => price_formatting_().post_);
+  const should_be_disabled_ = $gVhhF$solidjs.createMemo(() => Math.abs(min_() - max_()) < 2);
   return (() => {
     const _el$ = $gVhhF$solidjsweb.getNextElement($0b7222ba8a8bb72f$var$_tmpl$),
       _el$2 = _el$.firstChild,
@@ -1849,7 +1853,8 @@ function $0b7222ba8a8bb72f$var$RangeSelector({
       max_: max_,
       min_: min_,
       current_range_: current_range_,
-      i18n_: i18n_
+      i18n_: i18n_,
+      should_be_disabled_: should_be_disabled_
     }), _el$24, _co$7);
     $gVhhF$solidjsweb.insert(_el$9, pre_price, _el$11, _co$);
     $gVhhF$solidjsweb.insert(_el$9, $gVhhF$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
@@ -1872,18 +1877,24 @@ function $0b7222ba8a8bb72f$var$RangeSelector({
     }), _el$20, _co$5);
     $gVhhF$solidjsweb.insert(_el$16, post_price, _el$22, _co$6);
     $gVhhF$solidjsweb.effect(_p$ => {
-      const _v$ = i18n_.range_filter_low_point_aria_label_(),
-        _v$2 = min_(),
-        _v$3 = max_(),
-        _v$4 = i18n_.range_filter_high_point_aria_label_(),
-        _v$5 = min_(),
-        _v$6 = max_();
-      _v$ !== _p$._v$ && $gVhhF$solidjsweb.setAttribute(_el$4, "aria-label", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && $gVhhF$solidjsweb.setAttribute(_el$4, "min", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && $gVhhF$solidjsweb.setAttribute(_el$4, "max", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-label", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && $gVhhF$solidjsweb.setAttribute(_el$7, "min", _p$._v$5 = _v$5);
-      _v$6 !== _p$._v$6 && $gVhhF$solidjsweb.setAttribute(_el$7, "max", _p$._v$6 = _v$6);
+      const _v$ = !!(min_() === max_()),
+        _v$2 = should_be_disabled_(),
+        _v$3 = i18n_.range_filter_low_point_aria_label_(),
+        _v$4 = min_(),
+        _v$5 = max_(),
+        _v$6 = should_be_disabled_(),
+        _v$7 = i18n_.range_filter_high_point_aria_label_(),
+        _v$8 = min_(),
+        _v$9 = max_();
+      _v$ !== _p$._v$ && _el$.classList.toggle("disabled", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && (_el$4.disabled = _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && $gVhhF$solidjsweb.setAttribute(_el$4, "aria-label", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && $gVhhF$solidjsweb.setAttribute(_el$4, "min", _p$._v$4 = _v$4);
+      _v$5 !== _p$._v$5 && $gVhhF$solidjsweb.setAttribute(_el$4, "max", _p$._v$5 = _v$5);
+      _v$6 !== _p$._v$6 && (_el$7.disabled = _p$._v$6 = _v$6);
+      _v$7 !== _p$._v$7 && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-label", _p$._v$7 = _v$7);
+      _v$8 !== _p$._v$8 && $gVhhF$solidjsweb.setAttribute(_el$7, "min", _p$._v$8 = _v$8);
+      _v$9 !== _p$._v$9 && $gVhhF$solidjsweb.setAttribute(_el$7, "max", _p$._v$9 = _v$9);
       return _p$;
     }, {
       _v$: undefined,
@@ -1891,7 +1902,10 @@ function $0b7222ba8a8bb72f$var$RangeSelector({
       _v$3: undefined,
       _v$4: undefined,
       _v$5: undefined,
-      _v$6: undefined
+      _v$6: undefined,
+      _v$7: undefined,
+      _v$8: undefined,
+      _v$9: undefined
     });
     $gVhhF$solidjsweb.effect(() => _el$4.value = get_current_range()[0]);
     $gVhhF$solidjsweb.effect(() => _el$7.value = get_current_range()[1]);
@@ -1903,13 +1917,13 @@ function $0b7222ba8a8bb72f$var$ExponentialSlider({
   current_range_: current_range_,
   min_: min_,
   i18n_: i18n_,
-  max_: max_
+  max_: max_,
+  should_be_disabled_: should_be_disabled_
 }) {
   // inspired by https://observablehq.com/@mbostock/nonlinear-slider
   const transform_linear_to_nonlinear = ([smaller, larger]) => [Math.sqrt(smaller), Math.sqrt(larger)];
   const [read_current_range, write_current_range] = current_range_;
-  const modified_range = $gVhhF$solidjs.createSignal(transform_linear_to_nonlinear($gVhhF$solidjs.untrack(read_current_range)));
-  const [read_modified_range, write_modified_range] = modified_range;
+  const modified_range_accessor = $gVhhF$solidjs.createMemo(() => transform_linear_to_nonlinear(read_current_range()));
   const modified_max = $gVhhF$solidjs.createMemo(() => Math.sqrt(max_()));
   const modified_min = $gVhhF$solidjs.createMemo(() => Math.sqrt(min_()));
   const offset_value_calculator_ = (value, how_many) => {
@@ -1917,23 +1931,28 @@ function $0b7222ba8a8bb72f$var$ExponentialSlider({
     const changed = number_in_linear + how_many;
     return Math.sqrt(changed);
   };
-  $gVhhF$solidjs.createComputed($gVhhF$solidjs.on(read_current_range, new_range_from_above => {
-    // to prevent from infinite looping, don't write if it's around the same
-    const new_modified_range = transform_linear_to_nonlinear(new_range_from_above);
-    const current_modified_range = read_modified_range();
-    if (!current_modified_range.every((item, index) => Math.round(item) === Math.round(new_modified_range[index]))) write_modified_range(new_modified_range);
-  }, {
-    defer: true
-  }));
-  $gVhhF$solidjs.createComputed($gVhhF$solidjs.on(read_modified_range, ([smaller, larger]) => write_current_range([Math.round(smaller * smaller), Math.round(larger * larger)]), {
-    defer: true
-  }));
+  const convert_back = (smaller, larger) => [Math.round(smaller * smaller), Math.round(larger * larger)];
+  const modified_range_setter = new_range_or_function => {
+    const old_range = $gVhhF$solidjs.untrack(modified_range_accessor);
+    const new_range = typeof new_range_or_function === "function" ? new_range_or_function(old_range) : new_range_or_function;
+    const [smaller, larger] = new_range;
+    const [old_smaller, old_larger] = old_range;
+    const new_range_converted = convert_back(smaller, larger);
+    const old_range_converted = convert_back(old_smaller, old_larger);
+    if (new_range_converted[0] === old_range_converted[0] && new_range_converted[1] === old_range_converted[1])
+      // If the new value gets identical rounding errors to the old value when being converted back, don't write it to the signal since it would cause an infinite loop
+      return new_range;
+    write_current_range(new_range_converted);
+    return new_range;
+  };
   return $0b7222ba8a8bb72f$var$LinearSlider({
-    current_range_: modified_range,
+    current_range_: [modified_range_accessor, modified_range_setter],
+    // "Lie" to the actual slider so we don't have to implement exponential handling in there
     min_: modified_min,
     max_: modified_max,
     offset_value_calculator_: offset_value_calculator_,
-    i18n_: i18n_
+    i18n_: i18n_,
+    should_be_disabled_: should_be_disabled_
   });
 }
 function $0b7222ba8a8bb72f$var$LinearSlider({
@@ -1941,14 +1960,19 @@ function $0b7222ba8a8bb72f$var$LinearSlider({
   min_: min_,
   current_range_: current_range_,
   offset_value_calculator_: offset_value_calculator_,
-  i18n_: i18n_
+  i18n_: i18n_,
+  should_be_disabled_: should_be_disabled_
 }) {
   let range_input_1;
   let range_input_2;
   let clickable_slider;
   const [get_current_range, set_current_range] = current_range_;
   const progress_styling = $gVhhF$solidjs.createMemo(() => {
-    return `left:${get_current_range()[0] / max_() * 100}%;right:${100 - get_current_range()[1] / max_() * 100}%`;
+    const min = min_();
+    const span = max_() - min;
+    const [start, end] = get_current_range();
+    if (should_be_disabled_()) return `left:50%;right:50%`;
+    return `left:${(start - min) / span * 100}%;right:${100 - (end - min) / span * 100}%`;
   });
   const set_value = (el, index) => {
     // initially I set the value on the elements by just having value={get_current_range()[0]}
@@ -1971,7 +1995,7 @@ function $0b7222ba8a8bb72f$var$LinearSlider({
       const click_from_left_in_slider = e.clientX - slider_beginning_left; // both of these value contain scroll position so this should work regardless of horisontal scroll if there is any
       const place_of_click_in_percent = click_from_left_in_slider / slider_width * 100;
       const one_percent_of_range = (max_() - min_()) / 100;
-      const place_of_click = Math.round(min_() + one_percent_of_range * place_of_click_in_percent);
+      const place_of_click = min_() + one_percent_of_range * place_of_click_in_percent;
       const [lower, upper] = get_current_range();
       const distance_to_lower_point = Math.abs(place_of_click - lower);
       const distance_to_upper_point = Math.abs(upper - place_of_click);
@@ -1997,26 +2021,32 @@ function $0b7222ba8a8bb72f$var$LinearSlider({
     }, _el$29);
     $gVhhF$solidjsweb.addEventListener(_el$29, "input", $gVhhF$depictaiutilishared.catchify(() => $0b7222ba8a8bb72f$var$set_range_with_sanitation(min_, max_, current_range_, 1, range_input_2, offset_value_calculator_)), true);
     $gVhhF$solidjsweb.effect(_p$ => {
-      const _v$7 = i18n_.range_filter_low_point_aria_label_(),
-        _v$8 = min_(),
-        _v$9 = max_(),
-        _v$10 = i18n_.range_filter_high_point_aria_label_(),
-        _v$11 = min_(),
-        _v$12 = max_();
-      _v$7 !== _p$._v$7 && $gVhhF$solidjsweb.setAttribute(_el$28, "aria-label", _p$._v$7 = _v$7);
-      _v$8 !== _p$._v$8 && $gVhhF$solidjsweb.setAttribute(_el$28, "min", _p$._v$8 = _v$8);
-      _v$9 !== _p$._v$9 && $gVhhF$solidjsweb.setAttribute(_el$28, "max", _p$._v$9 = _v$9);
-      _v$10 !== _p$._v$10 && $gVhhF$solidjsweb.setAttribute(_el$29, "aria-label", _p$._v$10 = _v$10);
-      _v$11 !== _p$._v$11 && $gVhhF$solidjsweb.setAttribute(_el$29, "min", _p$._v$11 = _v$11);
-      _v$12 !== _p$._v$12 && $gVhhF$solidjsweb.setAttribute(_el$29, "max", _p$._v$12 = _v$12);
+      const _v$10 = should_be_disabled_(),
+        _v$11 = i18n_.range_filter_low_point_aria_label_(),
+        _v$12 = min_(),
+        _v$13 = max_(),
+        _v$14 = should_be_disabled_(),
+        _v$15 = i18n_.range_filter_high_point_aria_label_(),
+        _v$16 = min_(),
+        _v$17 = max_();
+      _v$10 !== _p$._v$10 && (_el$28.disabled = _p$._v$10 = _v$10);
+      _v$11 !== _p$._v$11 && $gVhhF$solidjsweb.setAttribute(_el$28, "aria-label", _p$._v$11 = _v$11);
+      _v$12 !== _p$._v$12 && $gVhhF$solidjsweb.setAttribute(_el$28, "min", _p$._v$12 = _v$12);
+      _v$13 !== _p$._v$13 && $gVhhF$solidjsweb.setAttribute(_el$28, "max", _p$._v$13 = _v$13);
+      _v$14 !== _p$._v$14 && (_el$29.disabled = _p$._v$14 = _v$14);
+      _v$15 !== _p$._v$15 && $gVhhF$solidjsweb.setAttribute(_el$29, "aria-label", _p$._v$15 = _v$15);
+      _v$16 !== _p$._v$16 && $gVhhF$solidjsweb.setAttribute(_el$29, "min", _p$._v$16 = _v$16);
+      _v$17 !== _p$._v$17 && $gVhhF$solidjsweb.setAttribute(_el$29, "max", _p$._v$17 = _v$17);
       return _p$;
     }, {
-      _v$7: undefined,
-      _v$8: undefined,
-      _v$9: undefined,
       _v$10: undefined,
       _v$11: undefined,
-      _v$12: undefined
+      _v$12: undefined,
+      _v$13: undefined,
+      _v$14: undefined,
+      _v$15: undefined,
+      _v$16: undefined,
+      _v$17: undefined
     });
     $gVhhF$solidjsweb.effect(() => _el$28.value = $gVhhF$solidjs.createMemo(() => {
       min_();
@@ -2306,47 +2336,50 @@ function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_) {
                 return has_expandable();
               },
               get children() {
-                return $gVhhF$solidjsweb.createComponent((0, $a69e505a12a77874$export$6c6d7a51fa9aa15d), {
-                  get details_() {
-                    return $gVhhF$solidjsweb.getNextElement($3bdc00a1353c1150$var$_tmpl$3);
-                  },
-                  get summary_() {
-                    return (() => {
-                      const _el$12 = $gVhhF$solidjsweb.getNextElement($3bdc00a1353c1150$var$_tmpl$4),
-                        _el$13 = _el$12.firstChild,
-                        _el$14 = _el$13.firstChild,
-                        _el$15 = _el$14.nextSibling,
-                        [_el$16, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$15.nextSibling);
-                      $gVhhF$solidjsweb.insert(_el$14, () => value()?.count_);
-                      $gVhhF$solidjsweb.insert(_el$13, $gVhhF$solidjsweb.createComponent((0, $7567511a7c3e4bd7$export$e5c2828934226505), {
-                        i18n_: i18n_,
-                        get expanded_() {
-                          return $gVhhF$solidjs.createMemo(() => value()?.is_expanded_?.ui_should_show_expanded_?.() ?? false);
-                        }
-                      }), _el$16, _co$5);
-                      $gVhhF$solidjsweb.effect(() => _el$14.classList.toggle("count-0", !!(value()?.count_ === 0)));
-                      return _el$12;
-                    })();
-                  },
-                  get is_open_() {
-                    return $gVhhF$solidjs.createMemo(() => {
-                      const v = value();
-                      if (!v)
-                        // only to prevent cleanup errors
-                        return $gVhhF$solidjs.createSignal(false);
-                      const {
-                        is_expanded_: {
-                          ui_should_show_expanded_: ui_should_show_expanded_,
-                          set_user_expanded_: set_user_expanded_
-                        }
-                      } = v;
-                      return [ui_should_show_expanded_, set_user_expanded_];
-                    })();
-                  },
-                  get children() {
-                    return $3bdc00a1353c1150$var$render_stuff($gVhhF$solidjs.createMemo(() => value()?.children_ || {}), existing_filter, i18n_);
-                  }
-                });
+                return (() => {
+                  const is_open = $gVhhF$solidjs.createMemo(() => {
+                    const v = value();
+                    if (!v)
+                      // only to prevent cleanup errors
+                      return $gVhhF$solidjs.createSignal(false);
+                    const {
+                      is_expanded_: {
+                        ui_should_show_expanded_: ui_should_show_expanded_,
+                        set_user_expanded_: set_user_expanded_
+                      }
+                    } = v;
+                    return [ui_should_show_expanded_, set_user_expanded_];
+                  });
+                  return $gVhhF$solidjsweb.createComponent((0, $a69e505a12a77874$export$6c6d7a51fa9aa15d), {
+                    get details_() {
+                      return $gVhhF$solidjsweb.getNextElement($3bdc00a1353c1150$var$_tmpl$3);
+                    },
+                    get summary_() {
+                      return (() => {
+                        const _el$12 = $gVhhF$solidjsweb.getNextElement($3bdc00a1353c1150$var$_tmpl$4),
+                          _el$13 = _el$12.firstChild,
+                          _el$14 = _el$13.firstChild,
+                          _el$15 = _el$14.nextSibling,
+                          [_el$16, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$15.nextSibling);
+                        $gVhhF$solidjsweb.insert(_el$14, () => value()?.count_);
+                        $gVhhF$solidjsweb.insert(_el$13, $gVhhF$solidjsweb.createComponent((0, $7567511a7c3e4bd7$export$e5c2828934226505), {
+                          i18n_: i18n_,
+                          get expanded_() {
+                            return $gVhhF$solidjs.createMemo(() => value()?.is_expanded_?.ui_should_show_expanded_?.() ?? false);
+                          }
+                        }), _el$16, _co$5);
+                        $gVhhF$solidjsweb.effect(() => _el$14.classList.toggle("count-0", !!(value()?.count_ === 0)));
+                        return _el$12;
+                      })();
+                    },
+                    get is_open_() {
+                      return is_open();
+                    },
+                    get children() {
+                      return $3bdc00a1353c1150$var$render_stuff($gVhhF$solidjs.createMemo(() => value()?.children_ || {}), existing_filter, i18n_);
+                    }
+                  });
+                })();
               }
             }), _el$10, _co$4);
             $gVhhF$solidjsweb.effect(() => _el$6.classList.toggle("expandable", !!has_expandable()));
@@ -2412,7 +2445,7 @@ function $3bdc00a1353c1150$var$create_updating_signal({
     // wait for the children to have populated and us to have received the correct value_ and name_ values
     let updating_blocked = false;
     const index_of_us_in_selected_filter = existing_filter_?.data?.findIndex?.(el => el.length === self_.value_.length && el.every((sub_el, index) => self_.value_[index] === sub_el));
-    signal_.push(...$gVhhF$solidjs.createSignal(index_of_us_in_selected_filter >= 0 ? true : false));
+    signal_.push(...$gVhhF$solidjs.createSignal(index_of_us_in_selected_filter >= 0));
     const [read_checked, write_checked] = signal_;
     const child_objects = Object.values(self_.children_);
     const get_child_object_values = child_objects.map(({

package/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.4";
+export const version = "2.0.6";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */