@depict-ai/react-ui 0.0.64 → 0.0.66

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui/dist";
-import { Display } from "../../../lib/displays/Display";
+import { Display } from "@depict-ai/utilishared";
 import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
 import { Locale } from "@depict-ai/ui/locales";
-import { Display as _Display1 } from "@depict-ai/utilishared";
-import { CategoryPage } from "@depict-ai/ui";
+import { CategoryTitle, embedded_num_products } from "@depict-ai/ui";
+export const version = "0.0.66";
 interface PLPConfig<T extends Display> {
     /**
      * The product card to use for rendering products.
@@ -170,7 +170,7 @@ export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("
  * @returns {JSX.Element}
  */
 export const DepictAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
-interface SearchPageConfig<T extends _Display1> extends PLPConfig<T> {
+interface SearchPageConfig<T extends Display> extends PLPConfig<T> {
     /**
      * Whether to show the search input field in the search page.
      * @default true
@@ -217,8 +217,8 @@ interface SearchPageConfig<T extends _Display1> extends PLPConfig<T> {
  *
  * ```
  */
-export function DepictSearchPage<T extends _Display1>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-interface CategoryPageConfig<T extends _Display1> extends PLPConfig<T> {
+export function DepictSearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CategoryPageConfig<T extends Display> extends PLPConfig<T> {
     /**
      * The category id to show.
      */
@@ -242,7 +242,7 @@ interface CategoryPageConfig<T extends _Display1> extends PLPConfig<T> {
      * <DepictCategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={CategoryTitle} />
      * ```
      */
-    categoryTitlePlugin?: Parameters<typeof CategoryPage>[0]["category_title"];
+    categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
 }
 /**
  * DepictCategoryPage is a component that renders a category page.
@@ -283,7 +283,7 @@ interface CategoryPageConfig<T extends _Display1> extends PLPConfig<T> {
  * }
  * ```
  */
-export function DepictCategoryPage<T extends _Display1>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export function DepictCategoryPage<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * BreadCrumbs is the "trail" in the header of a category page.
  */
@@ -346,7 +346,7 @@ interface UseSearchModalParams {
   
           const { open } = useDepictSearchModal({
             location: "aligned",
-            headerAlignerRef: ref,
+            alignerRef: ref,
           });
   
           return (
@@ -417,7 +417,7 @@ interface UseDepictSearchFieldReturn {
  * import { useDepictSearchField } from "@depict-ai/react-ui";
  *
  * const App = () => {
- *   const { DepictSearchField } = useDepictSearchModal();
+ *   const { DepictSearchField } = useDepictSearchField();
  *
  *   return (
  *     <div>
@@ -430,17 +430,17 @@ interface UseDepictSearchFieldReturn {
  * Render a search field that opens a modal aligned another DOM element:
  * ```tsx
  * import React from "react";
- * import { useDepictSearchField } from "@depict-ai/react-ui";
+ * import { DepictAligner, useDepictSearchField } from "@depict-ai/react-ui";
  *
  * const App = () => {
- *   const alignerRef = useRef(null);
- *   const { DepictSearchField } = useDepictSearchModal({
+ *   const ref = useRef(null);
+ *   const { DepictSearchField } = useDepictSearchField({
  *     alignerRef: ref
  *   });
  *
  *   return (
  *     <div>
- *       <div ref={alignerRef} style={{ height: "100px", width: "100px" }} />
+ *       <DepictAligner ref={ref} />
  *       <DepictSearchField />
  *     </div>
  *   );
@@ -449,7 +449,6 @@ interface UseDepictSearchFieldReturn {
  * @returns {JSX.Element}
  */
 export const useDepictSearchField: (props: SearchFieldProps) => UseDepictSearchFieldReturn;
-export const version = "0.0.64";
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */

package/dist/main.js

@@ -1,3 +1,4 @@
+const process = { env: {} }; // In case that the code using this wasn't built with "node emulation", just make process.env accesses become undefined.
 var $4GYXz$depictaiutilishared = require("@depict-ai/utilishared");
 var $4GYXz$depictaiui = require("@depict-ai/ui");
 var $4GYXz$solidjs = require("solid-js");
@@ -28,6 +29,10 @@ $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a6
 /*! 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.66";
+
+
+
 
 
 
@@ -137,7 +142,7 @@ function $b4d0d98857ed9934$export$e5139bbbb9a05035(component, is_set = (0, $0b7c
         });
     };
 }
-async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , info: info , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
+async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
     const solid_container = document.createElement("div");
     const react_has_rendered = new Promise((r)=>{
         const m_o = new MutationObserver(()=>{
@@ -148,9 +153,8 @@ async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , in
             childList: true
         });
     });
-    const is_placeholder = info.rendering_options.type === "placeholder";
     const reactProductCard = (0, $4GYXz$reactjsxruntime.jsx)(react_template, {
-        display: is_placeholder ? null : display
+        display: display
     });
     const portal = $4GYXz$reactdom.createPortal(reactProductCard, solid_container);
     component_portals.add(portal);
@@ -290,9 +294,8 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
         // Todo: Do we need this?
         get_product_id: ()=>"",
         depict_search: depict_search,
-        product_card_template: (display, info)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
+        product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
                 display: display,
-                info: info,
                 react_template: props.productCard,
                 component_portals: component_portals,
                 set_portals: set_portals
@@ -340,9 +343,8 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
             category_title: props.categoryTitlePlugin || (0, $4GYXz$depictaiui.CategoryTitle),
             show_breadcrumbs: props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs,
             show_quicklinks: props.showQuicklinks === undefined ? true : props.showQuicklinks,
-            product_card_template: (display, info)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
+            product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
                     display: display,
-                    info: info,
                     react_template: props.productCard,
                     component_portals: component_portals,
                     set_portals: set_portals
@@ -356,7 +358,7 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
 
 
 function $d88e98b11c182b8e$export$5646050d516e06bc() {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($d88e98b11c182b8e$var$vanilla_breadcrumbs), {});
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($d88e98b11c182b8e$var$vanilla_breadcrumbs), undefined);
 }
 function $d88e98b11c182b8e$var$vanilla_breadcrumbs() {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
@@ -410,7 +412,6 @@ const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-
 const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
@@ -423,17 +424,8 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
             globalState.search.modal_open = true;
             return;
         }
-        const style_element = document.createElement("style");
-        document.head.append(style_element);
-        const resize_observer = new ResizeObserver((0, $4GYXz$depictaiutilishared.catchify)(()=>{
-            const styles = (0, $4GYXz$depictaiui.styles_to_valid_css_string)({
-                ".depict.plp .depict-search-modal .query-input": {
-                    "height": `${headerAligner?.clientHeight}px`
-                }
-            });
-            style_element.replaceChildren(styles);
-        }));
-        resize_observer.observe(headerAligner);
+        if (!headerAligner) return;
+        const { cleanup: cleanup  } = (0, $ef7db890e488d4f4$import$5090e60c224b3b76$bec48a3a3ca6bc09)(headerAligner);
         let dispose_aligner;
         /**
      * Setting position to fixed is important to make the modal work with align_field.
@@ -442,8 +434,7 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
         });
         (0, $4GYXz$solidjs.createRoot)((dispose)=>{
             dispose_aligner = ()=>{
-                resize_observer.disconnect();
-                style_element.remove();
+                cleanup();
                 dispose();
             };
             (0, $4GYXz$depictaiui.align_field)(style_props_, headerAligner, undefined, false, "top");
@@ -497,10 +488,6 @@ const $ca5840628781f899$export$45080d603eda647c = (props)=>{
 
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.64";
-
-
-
 
 const $e387bd534de10acd$export$804fac5697cfbe35 = (router)=>(href)=>{
         const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);

package/dist/module.js

@@ -1,5 +1,6 @@
+const process = { env: {} }; // In case that the code using this wasn't built with "node emulation", just make process.env accesses become undefined.
 import {dlog as $TZSbU$dlog, 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 {add_to_version_info as $TZSbU$add_to_version_info, 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, styles_to_valid_css_string as $TZSbU$styles_to_valid_css_string, align_field as $TZSbU$align_field, SearchField as $TZSbU$SearchField} from "@depict-ai/ui";
+import {add_to_version_info as $TZSbU$add_to_version_info, 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, align_field as $TZSbU$align_field, SearchField as $TZSbU$SearchField} from "@depict-ai/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";
@@ -10,6 +11,10 @@ import {createPortal as $TZSbU$createPortal} from "react-dom";
 /*! 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.66";
+
+
+
 
 
 
@@ -119,7 +124,7 @@ function $c83ba9ab79386687$export$e5139bbbb9a05035(component, is_set = (0, $4285
         });
     };
 }
-async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , info: info , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
+async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
     const solid_container = document.createElement("div");
     const react_has_rendered = new Promise((r)=>{
         const m_o = new MutationObserver(()=>{
@@ -130,9 +135,8 @@ async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , in
             childList: true
         });
     });
-    const is_placeholder = info.rendering_options.type === "placeholder";
     const reactProductCard = (0, $TZSbU$jsx)(react_template, {
-        display: is_placeholder ? null : display
+        display: display
     });
     const portal = $TZSbU$createPortal(reactProductCard, solid_container);
     component_portals.add(portal);
@@ -272,9 +276,8 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
         // Todo: Do we need this?
         get_product_id: ()=>"",
         depict_search: depict_search,
-        product_card_template: (display, info)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
+        product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
                 display: display,
-                info: info,
                 react_template: props.productCard,
                 component_portals: component_portals,
                 set_portals: set_portals
@@ -322,9 +325,8 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
             category_title: props.categoryTitlePlugin || (0, $43099132aad1ceb6$re_export$CategoryTitle),
             show_breadcrumbs: props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs,
             show_quicklinks: props.showQuicklinks === undefined ? true : props.showQuicklinks,
-            product_card_template: (display, info)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
+            product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
                     display: display,
-                    info: info,
                     react_template: props.productCard,
                     component_portals: component_portals,
                     set_portals: set_portals
@@ -338,7 +340,7 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
 
 
 function $f866f7ed9f751af4$export$5646050d516e06bc() {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($f866f7ed9f751af4$var$vanilla_breadcrumbs), {});
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($f866f7ed9f751af4$var$vanilla_breadcrumbs), undefined);
 }
 function $f866f7ed9f751af4$var$vanilla_breadcrumbs() {
     const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
@@ -392,7 +394,6 @@ const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-
 const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
@@ -405,17 +406,8 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
             globalState.search.modal_open = true;
             return;
         }
-        const style_element = document.createElement("style");
-        document.head.append(style_element);
-        const resize_observer = new ResizeObserver((0, $TZSbU$catchify)(()=>{
-            const styles = (0, $TZSbU$styles_to_valid_css_string)({
-                ".depict.plp .depict-search-modal .query-input": {
-                    "height": `${headerAligner?.clientHeight}px`
-                }
-            });
-            style_element.replaceChildren(styles);
-        }));
-        resize_observer.observe(headerAligner);
+        if (!headerAligner) return;
+        const { cleanup: cleanup  } = (0, $5e26376d86621891$import$5090e60c224b3b76$bec48a3a3ca6bc09)(headerAligner);
         let dispose_aligner;
         /**
      * Setting position to fixed is important to make the modal work with align_field.
@@ -424,8 +416,7 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
         });
         (0, $TZSbU$createRoot)((dispose)=>{
             dispose_aligner = ()=>{
-                resize_observer.disconnect();
-                style_element.remove();
+                cleanup();
                 dispose();
             };
             (0, $TZSbU$align_field)(style_props_, headerAligner, undefined, false, "top");
@@ -479,10 +470,6 @@ const $e3ccaca62718bae4$export$45080d603eda647c = (props)=>{
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.64";
-
-
-
 
 const $a92aa2beb560b8af$export$804fac5697cfbe35 = (router)=>(href)=>{
         const shallow = (0, $c83ba9ab79386687$export$92a8f8b3c630fa0d)(location);

package/dist-server/index.d.ts

@@ -9,7 +9,7 @@ interface UseDepictSearchFieldReturn {
      */
     DepictSearchField: () => ReactElement;
 }
-export const version = "0.0.64";
+export const version = "0.0.66";
 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.64";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.66";
 
 
 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.64";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.66";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "clear-dist": "rm -r -f ./dist",
-    "build": "node ./build-scripts/pre_build.js && yarn build-server && parcel build --no-source-maps && yarn ignore-optional && cp -a src/styles/plp-styling/. dist/styles/",
+    "build": "node ./build-scripts/pre_build.js && yarn build-server && parcel build --no-source-maps && yarn ignore-optional && cp -a src/styles/plp-styling/. dist/styles/ && node ./build-scripts/post_build.js",
     "build-server": "yarn clear-dist && parcel build --no-source-maps ./src-server/index.ts && cp -r ./dist/ ./dist-server && yarn clear-dist",
     "ignore-optional": "node build-scripts/ignore-optional.js",
     "print-included-package-files": "yarn pack --dry-run",
@@ -90,8 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.41",
-    "@depict-ai/utilishared": "^0.0.39",
+    "@depict-ai/ui": "^0.0.43",
+    "@depict-ai/utilishared": "^0.0.41",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -104,7 +104,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^0.0.5",
+    "@depict-ai/plp-styling": "^0.0.6",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",