@depict-ai/ui 0.0.67 → 0.0.70

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestions
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
 import { ProductListingResponse, BaseCategoryDisplay } from "@depict-ai/types/api/ProductListingResponse";
 import { JSX as _JSX1 } from "solid-js/types/jsx";
-export const version = "0.0.67";
+export const version = "0.0.70";
 type ExclusiveId = {
     categoryId: string;
     productId?: undefined;
@@ -322,6 +322,7 @@ type OpenModalArguments = [
         closing_animation_?: () => Promise<any>;
         class_list_?: Accessor<Record<string, boolean>>;
         selected_text_range_?: readonly [number | null, number | null] | [number | null, number | null];
+        dont_sync_search_field_value_except_on_submit_?: boolean;
     },
     on_dispose?: VoidFunction
 ];
@@ -463,6 +464,10 @@ type AlignedLocation = {
 type ModalLocation = AlignedLocation | CenteredLocation;
 type OpenModalParams<T extends Display> = ModalLocation & {
     search: DepictSearch<T>;
+    /**
+     * If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
+     */
+    makesNewSearch?: boolean;
 };
 /**
  * Open the modal with support for alignment.

package/dist/main.js

@@ -35,7 +35,7 @@ $parcel$export(module.exports, "solid_format_price", () => $5fc9fc23df1591db$exp
 $parcel$export(module.exports, "connect_search_field_height_to_aligner_height", () => $246e3e89a097f014$export$828dcdd425fd3231);
 $parcel$export(module.exports, "PageReplacer", () => $37e96a5ebc768cc7$export$3ccaa27d81dd8556);
 $parcel$export(module.exports, "version", () => $ae93561d5649a847$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.67";
+/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.70";
 
 
 
@@ -6846,8 +6846,26 @@ function $4a976b492943589f$export$f021bdedd3ec901a(props) {
 
 
 const $121d25ca6af2898f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $121d25ca6af2898f$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<b></b>`, 2), $121d25ca6af2898f$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $121d25ca6af2898f$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
-function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: search_field_value_ , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $46MJV$solidjs.createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: submit_query_ , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , alternative_query_submitter_for_spas_: alternative_query_submitter_for_spas_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , after_submit_: after_submit_ , bottom_distance_under_modal_: bottom_distance_under_modal_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_  }) {
+function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_search_field_value , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $46MJV$solidjs.createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: props_submit_query , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , alternative_query_submitter_for_spas_: alternative_query_submitter_for_spas_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , after_submit_: props_after_submit , bottom_distance_under_modal_: bottom_distance_under_modal_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_ , dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_ = false  }) {
     let on_enter_in_search_field_function;
+    // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
+    // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
+    // Basically the UI signals that the button that opens the modal starts a new search.
+    const search_field_value_ = dont_sync_search_field_value_except_on_submit_ ? (0, $46MJV$solidjs.createSignal)("") : props_search_field_value;
+    const propagate_search_field_value_back = dont_sync_search_field_value_except_on_submit_ ? ()=>props_search_field_value[1]((0, $46MJV$solidjs.untrack)(search_field_value_[0])) // Set actual search field value to the throwaway internal one before submitting
+     : undefined;
+    const submit_query_ = (...args)=>{
+        // submit_query expects to read the current search field value which is why we have to write the current one to the signal before calling it
+        // It will write the old one back and then write the new one after submit
+        propagate_search_field_value_back?.();
+        return props_submit_query(...args);
+    };
+    const after_submit_ = props_after_submit && ((...args)=>{
+        // This will be called by link_to_param_change when clicking on a suggestion
+        // the logic in link_to_param_change doesn't need to read the search field value before submitting, so we can just propagate the changes after submitting
+        propagate_search_field_value_back?.();
+        return props_after_submit(...args);
+    });
     const [input_field, set_input_field] = (0, $46MJV$solidjs.createSignal)();
     const [get_search_field_value_] = search_field_value_;
     const [elements_outside_scrollable, set_elements_outside_scrollable] = (0, $46MJV$solidjs.createSignal)();
@@ -6870,7 +6888,7 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: search
             (matches ? set_elements_outside_scrollable : set_elements_inside_scrollable)("");
             (matches ? set_elements_inside_scrollable : set_elements_outside_scrollable)((()=>{
                 const _el$ = $121d25ca6af2898f$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild;
-                (0, $46MJV$solidjsweb.addEventListener)(_el$2, "click", submit_query_, true);
+                _el$2.$$click = submit_query_;
                 (0, $46MJV$solidjsweb.insert)(_el$2, (()=>{
                     const _c$ = (0, $46MJV$solidjsweb.memo)(()=>!!get_search_field_value_());
                     return ()=>_c$() ? i18n_.modal_view_all_results_()((()=>{
@@ -7592,7 +7610,6 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
                 }
                 if (!open_signal_value[0]?.style_props_ && search_page_aligned_modal_body_style_signal_) {
                     // Open modal aligned with search page if no alignment specified and possible to align with search page
-                    // TODO: nice to have: align with most visible SearchField if possible since that's always more desirable than centering
                     if (!signal_value_is_options) {
                         open_modal_({
                             style_props_: search_page_aligned_modal_body_style_signal_
@@ -7623,7 +7640,7 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
                     const [options_arg, ...rest] = open_signal_value;
                     open_modal_({
                         ...options_arg,
-                        style_props_: search_page_aligned_modal_body_style_signal_
+                        style_props_: search_page_aligned_modal_body_style_signal_ || style_props_
                     }, ...rest);
                     return;
                 }
@@ -7832,18 +7849,26 @@ function $79fbf145b15af988$var$align_field_modal(style_props_, input, aligner_re
 
 
 const $9c5a1d57540c06e5$export$d86a33413558014e = (openModalParams)=>{
-    const { search: search  } = openModalParams;
+    const { search: search , makesNewSearch: makesNewSearch = true  } = openModalParams;
     openModalParams.location ||= "centered";
     if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
     if (openModalParams.location !== "aligned") {
         // Open centered modal
-        search.modal_open = true;
+        search.modal_open = [
+            {
+                dont_sync_search_field_value_except_on_submit_: makesNewSearch
+            }
+        ];
         return;
     }
     const alignment_height = openModalParams.element?.clientHeight;
     if (isNaN(alignment_height)) {
         // Open centered modal
-        search.modal_open = true;
+        search.modal_open = [
+            {
+                dont_sync_search_field_value_except_on_submit_: makesNewSearch
+            }
+        ];
         return;
     }
     const { cleanup: cleanup  } = (0, $246e3e89a097f014$export$828dcdd425fd3231)(openModalParams.element);
@@ -7862,7 +7887,8 @@ const $9c5a1d57540c06e5$export$d86a33413558014e = (openModalParams)=>{
     });
     search.modal_open = [
         {
-            style_props_: style_props_
+            style_props_: style_props_,
+            dont_sync_search_field_value_except_on_submit_: makesNewSearch
         },
         dispose_aligner
     ];

package/dist/module.js

@@ -2,7 +2,7 @@ import {add_to_version_info as $g9l4l$add_to_version_info, fetch_recs as $g9l4l$
 import {template as $g9l4l$template, insert as $g9l4l$insert, effect as $g9l4l$effect, setAttribute as $g9l4l$setAttribute, createComponent as $g9l4l$createComponent, use as $g9l4l$use, addEventListener as $g9l4l$addEventListener, delegateEvents as $g9l4l$delegateEvents, spread as $g9l4l$spread, classList as $g9l4l$classList, memo as $g9l4l$memo, style as $g9l4l$style, mergeProps as $g9l4l$mergeProps, className as $g9l4l$className} from "solid-js/web";
 import {createSignal as $g9l4l$createSignal, onCleanup as $g9l4l$onCleanup, createComputed as $g9l4l$createComputed, createEffect as $g9l4l$createEffect, untrack as $g9l4l$untrack, batch as $g9l4l$batch, createResource as $g9l4l$createResource, createMemo as $g9l4l$createMemo, Show as $g9l4l$Show, createRenderEffect as $g9l4l$createRenderEffect, runWithOwner as $g9l4l$runWithOwner, createRoot as $g9l4l$createRoot, getOwner as $g9l4l$getOwner, createReaction as $g9l4l$createReaction, on as $g9l4l$on, ErrorBoundary as $g9l4l$ErrorBoundary, Index as $g9l4l$Index, For as $g9l4l$For} from "solid-js";
 
-/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.67";
+/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.70";
 
 
 
@@ -6813,8 +6813,26 @@ function $b24f16c875c2baa6$export$f021bdedd3ec901a(props) {
 
 
 const $a9f6faeac82c322b$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $a9f6faeac82c322b$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<b></b>`, 2), $a9f6faeac82c322b$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $a9f6faeac82c322b$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
-function $a9f6faeac82c322b$export$1c593cbd6f1e10bc({ search_field_value_: search_field_value_ , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $g9l4l$createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: submit_query_ , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , alternative_query_submitter_for_spas_: alternative_query_submitter_for_spas_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , after_submit_: after_submit_ , bottom_distance_under_modal_: bottom_distance_under_modal_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_  }) {
+function $a9f6faeac82c322b$export$1c593cbd6f1e10bc({ search_field_value_: props_search_field_value , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $g9l4l$createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: props_submit_query , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , alternative_query_submitter_for_spas_: alternative_query_submitter_for_spas_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , after_submit_: props_after_submit , bottom_distance_under_modal_: bottom_distance_under_modal_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_ , dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_ = false  }) {
     let on_enter_in_search_field_function;
+    // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
+    // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
+    // Basically the UI signals that the button that opens the modal starts a new search.
+    const search_field_value_ = dont_sync_search_field_value_except_on_submit_ ? (0, $g9l4l$createSignal)("") : props_search_field_value;
+    const propagate_search_field_value_back = dont_sync_search_field_value_except_on_submit_ ? ()=>props_search_field_value[1]((0, $g9l4l$untrack)(search_field_value_[0])) // Set actual search field value to the throwaway internal one before submitting
+     : undefined;
+    const submit_query_ = (...args)=>{
+        // submit_query expects to read the current search field value which is why we have to write the current one to the signal before calling it
+        // It will write the old one back and then write the new one after submit
+        propagate_search_field_value_back?.();
+        return props_submit_query(...args);
+    };
+    const after_submit_ = props_after_submit && ((...args)=>{
+        // This will be called by link_to_param_change when clicking on a suggestion
+        // the logic in link_to_param_change doesn't need to read the search field value before submitting, so we can just propagate the changes after submitting
+        propagate_search_field_value_back?.();
+        return props_after_submit(...args);
+    });
     const [input_field, set_input_field] = (0, $g9l4l$createSignal)();
     const [get_search_field_value_] = search_field_value_;
     const [elements_outside_scrollable, set_elements_outside_scrollable] = (0, $g9l4l$createSignal)();
@@ -6837,7 +6855,7 @@ function $a9f6faeac82c322b$export$1c593cbd6f1e10bc({ search_field_value_: search
             (matches ? set_elements_outside_scrollable : set_elements_inside_scrollable)("");
             (matches ? set_elements_inside_scrollable : set_elements_outside_scrollable)((()=>{
                 const _el$ = $a9f6faeac82c322b$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild;
-                (0, $g9l4l$addEventListener)(_el$2, "click", submit_query_, true);
+                _el$2.$$click = submit_query_;
                 (0, $g9l4l$insert)(_el$2, (()=>{
                     const _c$ = (0, $g9l4l$memo)(()=>!!get_search_field_value_());
                     return ()=>_c$() ? i18n_.modal_view_all_results_()((()=>{
@@ -7559,7 +7577,6 @@ class $540e930c58500cbe$export$ac6237957a15b3f0 {
                 }
                 if (!open_signal_value[0]?.style_props_ && search_page_aligned_modal_body_style_signal_) {
                     // Open modal aligned with search page if no alignment specified and possible to align with search page
-                    // TODO: nice to have: align with most visible SearchField if possible since that's always more desirable than centering
                     if (!signal_value_is_options) {
                         open_modal_({
                             style_props_: search_page_aligned_modal_body_style_signal_
@@ -7590,7 +7607,7 @@ class $540e930c58500cbe$export$ac6237957a15b3f0 {
                     const [options_arg, ...rest] = open_signal_value;
                     open_modal_({
                         ...options_arg,
-                        style_props_: search_page_aligned_modal_body_style_signal_
+                        style_props_: search_page_aligned_modal_body_style_signal_ || style_props_
                     }, ...rest);
                     return;
                 }
@@ -7799,18 +7816,26 @@ function $540e930c58500cbe$var$align_field_modal(style_props_, input, aligner_re
 
 
 const $7cbfd6122dbaf087$export$d86a33413558014e = (openModalParams)=>{
-    const { search: search  } = openModalParams;
+    const { search: search , makesNewSearch: makesNewSearch = true  } = openModalParams;
     openModalParams.location ||= "centered";
     if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
     if (openModalParams.location !== "aligned") {
         // Open centered modal
-        search.modal_open = true;
+        search.modal_open = [
+            {
+                dont_sync_search_field_value_except_on_submit_: makesNewSearch
+            }
+        ];
         return;
     }
     const alignment_height = openModalParams.element?.clientHeight;
     if (isNaN(alignment_height)) {
         // Open centered modal
-        search.modal_open = true;
+        search.modal_open = [
+            {
+                dont_sync_search_field_value_except_on_submit_: makesNewSearch
+            }
+        ];
         return;
     }
     const { cleanup: cleanup  } = (0, $a79ffb1cbfbd2a09$export$828dcdd425fd3231)(openModalParams.element);
@@ -7829,7 +7854,8 @@ const $7cbfd6122dbaf087$export$d86a33413558014e = (openModalParams)=>{
     });
     search.modal_open = [
         {
-            style_props_: style_props_
+            style_props_: style_props_,
+            dont_sync_search_field_value_except_on_submit_: makesNewSearch
         },
         dispose_aligner
     ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "0.0.67",
+  "version": "0.0.70",
   "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",
   "source": [
@@ -84,9 +84,9 @@
     "ts-jest": "^29.0.3"
   },
   "dependencies": {
-    "@depict-ai/plp-styling": "^0.0.28",
-    "@depict-ai/types": "^0.0.19",
-    "@depict-ai/utilishared": "^0.0.64",
+    "@depict-ai/plp-styling": "^0.0.31",
+    "@depict-ai/types": "^0.0.22",
+    "@depict-ai/utilishared": "^0.0.74",
     "solid-js": "^1.6.2"
   },
   "types": "dist/index.d.ts"