@depict-ai/react-ui 0.0.65 → 0.0.67

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.67";
 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.65";
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */

package/dist/main.js

@@ -28,6 +28,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.67";
+
+
+
 
 
 
@@ -137,7 +141,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 +152,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 +293,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 +342,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 +357,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;
@@ -422,10 +423,7 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
             globalState.search.modal_open = true;
             return;
         }
-        if (!headerAligner) // Very important not to throw here, as it just means the ref hasn't been set by react yet.
-        // This is a race condition that will be resolved in the next render.
-        // If we throw here, the app will crash.
-        return;
+        if (!headerAligner) return;
         const { cleanup: cleanup  } = (0, $4GYXz$depictaiui.connect_query_input_height_to_aligner_height)(headerAligner);
         let dispose_aligner;
         /**
@@ -489,10 +487,6 @@ const $ca5840628781f899$export$45080d603eda647c = (props)=>{
 
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.65";
-
-
-
 
 const $e387bd534de10acd$export$804fac5697cfbe35 = (router)=>(href)=>{
         const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);

package/dist/module.js

@@ -10,6 +10,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.67";
+
+
+
 
 
 
@@ -119,7 +123,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 +134,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 +275,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 +324,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 +339,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;
@@ -404,10 +405,7 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
             globalState.search.modal_open = true;
             return;
         }
-        if (!headerAligner) // Very important not to throw here, as it just means the ref hasn't been set by react yet.
-        // This is a race condition that will be resolved in the next render.
-        // If we throw here, the app will crash.
-        return;
+        if (!headerAligner) return;
         const { cleanup: cleanup  } = (0, $TZSbU$connect_query_input_height_to_aligner_height)(headerAligner);
         let dispose_aligner;
         /**
@@ -471,10 +469,6 @@ const $e3ccaca62718bae4$export$45080d603eda647c = (props)=>{
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.65";
-
-
-
 
 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.65";
+export const version = "0.0.67";
 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.65";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.67";
 
 
 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.65";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.67";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,8 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.42",
-    "@depict-ai/utilishared": "^0.0.40",
+    "@depict-ai/ui": "^0.0.44",
+    "@depict-ai/utilishared": "^0.0.42",
     "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.7",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",