@depict-ai/react-ui 0.0.72 → 0.0.74

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui/dist";
+import { SDKColsAtSize, SDKGridSpacing, CategoryTitle, EmbeddedNumProducts } from "@depict-ai/js-ui";
 import { Display } from "@depict-ai/utilishared";
 import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
-import { Locale } from "@depict-ai/ui/locales";
-import { CategoryTitle, embedded_num_products } from "@depict-ai/ui";
-export const version = "0.0.72";
+import { Locale } from "@depict-ai/js-ui/locales";
+export const version = "0.0.74";
 interface PLPConfig<T extends Display> {
     /**
      * The product card to use for rendering products.
@@ -246,7 +245,7 @@ interface CategoryPageConfig<T extends Display> extends PLPConfig<T> {
      * <DepictCategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={CategoryTitle} />
      * ```
      */
-    categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
+    categoryTitlePlugin?: typeof CategoryTitle | typeof EmbeddedNumProducts;
 }
 /**
  * DepictCategoryPage is a component that renders a category page.
@@ -460,5 +459,5 @@ export const useDepictSearchField: (props?: SearchFieldProps) => UseDepictSearch
 export const Navigation: {
     nextRouterNavigation: (router: import("next/router").NextRouter) => (relativeUrl: string) => void;
 };
-export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
-export type { Locale } from "@depict-ai/ui/locales";
+export { CategoryTitle, EmbeddedNumProducts } from "@depict-ai/js-ui";
+export type { Locale } from "@depict-ai/js-ui/locales";

package/dist/main.js

@@ -1,11 +1,12 @@
 var $4GYXz$depictaiutilishared = require("@depict-ai/utilishared");
-var $4GYXz$depictaiui = require("@depict-ai/ui");
+var $4GYXz$depictaijsui = require("@depict-ai/js-ui");
 var $4GYXz$solidjs = require("solid-js");
 var $4GYXz$react = require("react");
-var $4GYXz$depictaiuilocales = require("@depict-ai/ui/locales");
+var $4GYXz$depictaijsuilocales = require("@depict-ai/js-ui/locales");
 var $4GYXz$solidjsweb = require("solid-js/web");
 var $4GYXz$reactjsxruntime = require("react/jsx-runtime");
 var $4GYXz$reactdom = require("react-dom");
+var $4GYXz$depictaiui = require("@depict-ai/ui");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -27,7 +28,7 @@ $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.72";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.74";
 
 
 
@@ -185,7 +186,7 @@ const $bc389476eeb2b615$export$599d4515591ef232 = (relativeUrl)=>{
 
 function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
     const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale  } = props;
-    const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.en);
+    const usedLocale = locale ?? (0, $4GYXz$depictaijsuilocales.en);
     const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     if (!market || !merchant) {
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](false);
@@ -199,7 +200,7 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
             if (navigateFunction) navigateFunction(new_relative_url);
             else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_relative_url);
         } : undefined;
-        if (!search) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
+        if (!search) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaijsui.DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
                 merchant: merchant,
@@ -214,7 +215,7 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
             search.merchant = merchant;
             search.localization = usedLocale;
         }
-        if (!category) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category = new (0, $4GYXz$depictaiui.DepictCategory)({
+        if (!category) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category = new (0, $4GYXz$depictaijsui.DepictCategory)({
                 market: market,
                 merchant: merchant,
                 localization: usedLocale,
@@ -258,6 +259,7 @@ const $d96434e62e08087d$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $4GYXz$react
 
 
 
+
 function $7ad7a3d0011b7b1b$export$210723f5a54a7028(props) {
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($7ad7a3d0011b7b1b$var$SolidSearchPage), props);
 }
@@ -277,7 +279,7 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
         update_updating_blocked_signal();
     });
     const component_portals = new Set();
-    return (0, $4GYXz$depictaiui.SearchPage)({
+    return (0, $4GYXz$depictaijsui.DepictSearchPage)({
         // Default config goes here
         include_input_field: props.includeInputField ?? true,
         cols_at_size: props.columnsAtSize ?? [
@@ -326,7 +328,7 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
     };
     $5aa5fcb9f8a2bebc$var$render_cb(props);
     const component_portals = new Set();
-    const category = ()=>(0, $4GYXz$depictaiui.CategoryPage)({
+    const category = ()=>(0, $4GYXz$depictaijsui.DepictCategoryPage)({
             depict_category: depict_category,
             cols_at_size: props.columnsAtSize ?? [
                 [
@@ -343,7 +345,7 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
             ],
             grid_spacing: props.gridSpacing ?? "2%",
             get_product_id: ()=>"",
-            category_title: props.categoryTitlePlugin || (0, $4GYXz$depictaiui.CategoryTitle),
+            category_title: props.categoryTitlePlugin || (0, $4GYXz$depictaijsui.CategoryTitle),
             show_breadcrumbs: props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs,
             show_quicklinks: props.showQuicklinks === undefined ? true : props.showQuicklinks,
             product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
@@ -366,7 +368,7 @@ function $d88e98b11c182b8e$export$5646050d516e06bc() {
 function $d88e98b11c182b8e$var$vanilla_breadcrumbs() {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
     if (!depict_category) throw Error("No depict_category instance when rendering BreadCrumbs. Did you forget to wrap your app in DepictProvider?");
-    return (0, $4GYXz$depictaiui.BreadCrumbs)({
+    return (0, $4GYXz$depictaijsui.BreadCrumbs)({
         depict_category: depict_category
     });
 }
@@ -381,7 +383,7 @@ function $f16af0e861aff3d0$export$466cdc317043f6cb() {
 function $f16af0e861aff3d0$var$vanilla_quick_links() {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
     if (!depict_category) throw Error("No depict_category instance when rendering QuickLinks. Did you forget to wrap your app in DepictProvider?");
-    return (0, $4GYXz$depictaiui.QuickLinks)({
+    return (0, $4GYXz$depictaijsui.QuickLinks)({
         depict_category: depict_category
     });
 }
@@ -414,40 +416,20 @@ const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-
 const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
-        const headerAligner = alignerRef?.current;
-        if (!globalState.search) throw new Error("No active search in the app!");
-        if (!headerAligner && location === "aligned") throw new Error("No active search header aligner on the page!");
-        const alignment_height = headerAligner?.clientHeight;
-        if (location !== "aligned" || isNaN(alignment_height)) {
-            // Open centered modal
-            globalState.search.modal_open = true;
-            return;
-        }
-        if (!headerAligner) return;
-        const { cleanup: cleanup  } = (0, $4GYXz$depictaiui.connect_search_field_height_to_aligner_height)(headerAligner);
-        let dispose_aligner;
-        /**
-     * Setting position to fixed is important to make the modal work with align_field.
-     */ const style_props_ = (0, $4GYXz$solidjs.createSignal)({
-            position: "fixed"
-        });
-        (0, $4GYXz$solidjs.createRoot)((dispose)=>{
-            dispose_aligner = ()=>{
-                cleanup();
-                dispose();
-            };
-            (0, $4GYXz$depictaiui.align_field)(style_props_, headerAligner, undefined, false, "top");
-        });
-        globalState.search.modal_open = [
-            {
-                style_props_: style_props_
-            },
-            dispose_aligner
-        ];
+        if (globalState.search) {
+            if (location === "aligned" && alignerRef?.current) (0, $4GYXz$depictaijsui.OpenModalWithAlignment)({
+                "element": alignerRef.current,
+                "location": location,
+                "search": globalState.search
+            });
+            else (0, $4GYXz$depictaijsui.OpenModalWithAlignment)({
+                "location": "centered",
+                "search": globalState.search
+            });
+        } else throw new Error("No search instance was provided.");
     };
     return openModal;
 };
@@ -469,7 +451,7 @@ function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params = {}) {
 
 const $5e06ce09dcfaf030$export$bde46b5bb6287cea = (props)=>{
     const ReactSearchField = ()=>{
-        return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
+        return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaijsui.SearchField)({
                 depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search,
                 aligner_ref: props?.alignerRef?.current
             })), {});

package/dist/module.js

@@ -1,15 +1,16 @@
 import {add_to_version_info as $TZSbU$add_to_version_info, catchify as $TZSbU$catchify, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask, href_change_ipns as $TZSbU$href_change_ipns, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
-import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, CategoryPage as $TZSbU$CategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, connect_search_field_height_to_aligner_height as $TZSbU$connect_search_field_height_to_aligner_height, align_field as $TZSbU$align_field, SearchField as $TZSbU$SearchField} from "@depict-ai/ui";
+import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, EmbeddedNumProducts as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, DepictSearchPage as $TZSbU$DepictSearchPage, DepictCategoryPage as $TZSbU$DepictCategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, OpenModalWithAlignment as $TZSbU$OpenModalWithAlignment, SearchField as $TZSbU$SearchField} from "@depict-ai/js-ui";
 import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createSignal as $TZSbU$createSignal, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createComputed as $TZSbU$createComputed} from "solid-js";
 import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, forwardRef as $TZSbU$forwardRef} from "react";
-import {en as $TZSbU$en} from "@depict-ai/ui/locales";
+import {en as $TZSbU$en} from "@depict-ai/js-ui/locales";
 import {render as $TZSbU$render} from "solid-js/web";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
 import {createPortal as $TZSbU$createPortal} from "react-dom";
+import {get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal} from "@depict-ai/ui";
 
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.72";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.74";
 
 
 
@@ -240,6 +241,7 @@ const $4db0e2f013fc5124$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $TZSbU$forwa
 
 
 
+
 function $4a678f0c87b12e78$export$210723f5a54a7028(props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($4a678f0c87b12e78$var$SolidSearchPage), props);
 }
@@ -259,7 +261,7 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
         update_updating_blocked_signal();
     });
     const component_portals = new Set();
-    return (0, $TZSbU$SearchPage)({
+    return (0, $TZSbU$DepictSearchPage)({
         // Default config goes here
         include_input_field: props.includeInputField ?? true,
         cols_at_size: props.columnsAtSize ?? [
@@ -308,7 +310,7 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     };
     $48d7f568740a317d$var$render_cb(props);
     const component_portals = new Set();
-    const category = ()=>(0, $TZSbU$CategoryPage)({
+    const category = ()=>(0, $TZSbU$DepictCategoryPage)({
             depict_category: depict_category,
             cols_at_size: props.columnsAtSize ?? [
                 [
@@ -396,40 +398,20 @@ const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-
 const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
-        const headerAligner = alignerRef?.current;
-        if (!globalState.search) throw new Error("No active search in the app!");
-        if (!headerAligner && location === "aligned") throw new Error("No active search header aligner on the page!");
-        const alignment_height = headerAligner?.clientHeight;
-        if (location !== "aligned" || isNaN(alignment_height)) {
-            // Open centered modal
-            globalState.search.modal_open = true;
-            return;
-        }
-        if (!headerAligner) return;
-        const { cleanup: cleanup  } = (0, $TZSbU$connect_search_field_height_to_aligner_height)(headerAligner);
-        let dispose_aligner;
-        /**
-     * Setting position to fixed is important to make the modal work with align_field.
-     */ const style_props_ = (0, $TZSbU$createSignal)({
-            position: "fixed"
-        });
-        (0, $TZSbU$createRoot)((dispose)=>{
-            dispose_aligner = ()=>{
-                cleanup();
-                dispose();
-            };
-            (0, $TZSbU$align_field)(style_props_, headerAligner, undefined, false, "top");
-        });
-        globalState.search.modal_open = [
-            {
-                style_props_: style_props_
-            },
-            dispose_aligner
-        ];
+        if (globalState.search) {
+            if (location === "aligned" && alignerRef?.current) (0, $TZSbU$OpenModalWithAlignment)({
+                "element": alignerRef.current,
+                "location": location,
+                "search": globalState.search
+            });
+            else (0, $TZSbU$OpenModalWithAlignment)({
+                "location": "centered",
+                "search": globalState.search
+            });
+        } else throw new Error("No search instance was provided.");
     };
     return openModal;
 };

package/dist/styles/components/PLP/SlidableItems.scss

@@ -53,7 +53,7 @@
 ///
 /// Examples are the QuickLinks (used to navigate sideways or downwards in the category tree) and the SelectedFilters (if not all selected filters fit on the screen).
 /// @param {Color} $fade-to [variables.$brand-lighter-grey] - The color the slider buttons fade to, set this to the background color behind the slider.
-/// @param {Color} @fade-from [transparent] - The color the slider buttons fade from, you probably want to leave this at transparent.
+/// @param {Color} fade-from [transparent] - The color the slider buttons fade from, you probably want to leave this at transparent.
 @mixin SlidableItems($fade-to: variables.$brand-lighter-grey, $fade-from: rgba(238, 238, 240, 0)) {
   // TODO: we could probably infer these colours (and maybe some more) if we add some global background color variable
   .depict-slider {

package/dist-server/index.d.ts

@@ -9,7 +9,7 @@ interface UseDepictSearchFieldReturn {
      */
     DepictSearchField: () => ReactElement;
 }
-export const version = "0.0.72";
+export const version = "0.0.74";
 export function DepictProvider(props: any): any;
 export function DepictSearchPage(): any;
 export function DepictCategoryPage(): any;

package/dist-server/main.js

@@ -19,7 +19,7 @@ $parcel$export(module.exports, "useDepictSearchModal", () => $41e7e5d85b5e0d49$e
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.72";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.74";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {

package/dist-server/module.js

@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.72";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.74";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/locales/index.d.ts

@@ -1,2 +1,2 @@
-export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales";
-export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales";
+export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/js-ui/locales";
+export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/js-ui/locales";

package/locales/index.js

@@ -1 +1 @@
-export * from "@depict-ai/ui/locales";
+export * from "@depict-ai/js-ui/locales";

package/locales/require.js

@@ -1 +1 @@
-module.exports = require("@depict-ai/ui/locales");
+module.exports = require("@depict-ai/js-ui/locales");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,8 +90,9 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.49",
-    "@depict-ai/utilishared": "^0.0.47",
+    "@depict-ai/js-ui": "^0.0.1",
+    "@depict-ai/ui": "^0.0.52",
+    "@depict-ai/utilishared": "^0.0.49",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -104,7 +105,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^0.0.12",
+    "@depict-ai/plp-styling": "^0.0.13",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",