@depict-ai/react-ui 2.0.11 → 2.1.0

package/ES10/index.cjs

@@ -38,7 +38,7 @@ $parcel$export(module.exports, "version", () => $efbdd2dab4314170$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $0d3a2413fdeb34b9$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 $efbdd2dab4314170$export$83d89fbfd8236492 = "2.0.11";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.1.0";
 const $ef516b1f92253963$export$8e769ad4338a911e = {
   usedLocale: $2kiy7$solidjs.createSignal((0, $2kiy7$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -510,9 +510,9 @@ class $e9048b15cf1e8792$export$d0f82e3ef89b1f22 extends (0, $2kiy7$react.Compone
     return this.props.children;
   }
 }
-async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
+async function $3441d987b5ea85cb$export$32024253978abdc7(_ref) {
   let {
-    display: display,
+    component_props: component_props,
     component_portals: component_portals,
     set_portals: set_portals,
     get_react_template: get_react_template
@@ -529,9 +529,7 @@ async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
     const [react_template, set_react_template] = $2kiy7$react.useState(() => $2kiy7$solidjs.untrack(get_react_template));
     call_when_template_changes = set_react_template;
     return react_template(props);
-  }, {
-    display: display
-  });
+  }, component_props);
   const reactProductCardInErrorBoundary = $2kiy7$reactjsxruntime.jsx((0, $e9048b15cf1e8792$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
     on_error: error => $2kiy7$solidjs.runWithOwner(owner, () => {
@@ -562,6 +560,28 @@ async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
   await react_has_ran_hooks; // After React has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
   return [solid_container];
 }
+function $2a64b3ddab2ffebd$export$84006927f874e911(blocks, component_portals, set_portals) {
+  return $2kiy7$solidjs.mapArray(blocks, block => {
+    if (!block) return block;
+    return {
+      get span_columns() {
+        return block === null || block === void 0 ? void 0 : block.spanColumns;
+      },
+      get span_rows() {
+        return block === null || block === void 0 ? void 0 : block.spanRows;
+      },
+      get position() {
+        return block === null || block === void 0 ? void 0 : block.position;
+      },
+      content: () => $3441d987b5ea85cb$export$32024253978abdc7({
+        get_react_template: () => block.content,
+        component_portals: component_portals,
+        set_portals: set_portals,
+        component_props: {}
+      })
+    };
+  });
+}
 const $735104b46c50160f$var$rendered_components_with_state_key = new Set();
 function $735104b46c50160f$export$a54ec244c8863715(props) {
   return $e7ba61a7074c02d3$export$f6e64e17bd69eeef({
@@ -610,6 +630,7 @@ function $735104b46c50160f$var$SolidSearchPage(props, set_portals) {
   return $2kiy7$solidjs.createMemo(() => {
     const stateKey = $2kiy7$solidjs.untrack(() => props.stateKey);
     if ($735104b46c50160f$var$rendered_components_with_state_key.has(stateKey)) throw new Error("You have multiple SearchPage components with the same stateKey: ".concat(stateKey, ". Each SearchPage component must have a unique stateKey."));
+    const transformed_content_blocks = $2a64b3ddab2ffebd$export$84006927f874e911(() => props.contentBlocksByRow, component_portals, set_portals);
     $735104b46c50160f$var$rendered_components_with_state_key.add(stateKey);
     $2kiy7$solidjs.onCleanup(() => $735104b46c50160f$var$rendered_components_with_state_key.delete(stateKey));
     return $2kiy7$depictaiui.SearchPage({
@@ -626,12 +647,17 @@ function $735104b46c50160f$var$SolidSearchPage(props, set_portals) {
         return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $2kiy7$depictaiui.defaultGridSpacing);
       },
       depict_search: depict_search(),
-      product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
-        display: display,
+      product_card_template: display => $3441d987b5ea85cb$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
-      })
+      }),
+      get content_blocks_by_row() {
+        return transformed_content_blocks();
+      }
     });
   });
 }
@@ -692,6 +718,7 @@ function $15691268d8df90a9$var$SolidCategoryPage(props, set_portals) {
     if ($15691268d8df90a9$var$rendered_components_with_state_key.has(stateKey)) throw new Error("You have multiple CategoryPage components with the same stateKey: ".concat(stateKey, ". Each CategoryPage component must have a unique stateKey."));
     $15691268d8df90a9$var$rendered_components_with_state_key.add(stateKey);
     $2kiy7$solidjs.onCleanup(() => $15691268d8df90a9$var$rendered_components_with_state_key.delete(stateKey));
+    const transformed_content_blocks = $2a64b3ddab2ffebd$export$84006927f874e911(() => props.contentBlocksByRow, component_portals, set_portals);
     return $2kiy7$depictaiui.CategoryPage({
       depict_category: depict_category(),
       get cols_at_size() {
@@ -709,8 +736,13 @@ function $15691268d8df90a9$var$SolidCategoryPage(props, set_portals) {
       get show_quicklinks() {
         return props.showQuicklinks;
       },
-      product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
-        display: display,
+      get content_blocks_by_row() {
+        return transformed_content_blocks();
+      },
+      product_card_template: display => $3441d987b5ea85cb$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
@@ -789,8 +821,10 @@ function $745b83c12baac3c0$export$5abb40edfde2a843(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
-      display: display,
+    product_card_template: display => $3441d987b5ea85cb$export$32024253978abdc7({
+      component_props: {
+        display: display
+      },
       get_react_template: () => props.productCard,
       component_portals: component_portals,
       set_portals: set_portals
@@ -819,8 +853,10 @@ function $27d583018ba6e604$export$bd8acc07a8bae229(props, set_portals) {
             display: display
           })))
         };
-      return $99405615baa3d774$export$79c79419c1ef0081({
-        display: display,
+      return $3441d987b5ea85cb$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals

package/ES10/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/ES10";
-import React, { PropsWithChildren, ReactNode, ReactPortal, ReactElement } from "react";
+import React, { PropsWithChildren, ReactNode, FC, ReactPortal, ReactElement } from "react";
 import { BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/ES10";
 import { Locale } from "@depict-ai/ui/locales/ES10";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
-export const version = "2.0.11";
+export const version = "2.1.0";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -172,11 +172,43 @@ export interface DepictProductCardProps<T extends Display> {
  * Depict product card to use for rendering products.
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
+/**
+ * The interface for a content block.
+ * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
+ * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so, to avoid layout shifts and ensure scroll restoration works correctly.
+ *
+ * - `spanColumns`: How many columns the block should span. This will be capped to the number of columns available.
+ * - `spanRows`: How many rows the block should span.
+ * - `position`: Where the block should be positioned. Can be `left`, `center` or `right`.
+ * - `content`: The content to render in the block - please provide a React component.
+ */
+type ReactContentBlock = {
+  spanColumns: number;
+  spanRows: number;
+  position: "left" | "center" | "right";
+  content: FC;
+};
+/**
+ * A sparse array containing content blocks to show (or an empty slot or undefined if there's no block at that index). See ReactContentBlock for how a content block looks like. The index is the row where the content block should be shown.
+ * For example, to create a block on row 1 and 3 you'd do `[, block1, , block2]`.
+ * Alternatively:
+ * ```
+ * const blocks = [];
+ * blocks[1] = block1;
+ * blocks[3] = block2;
+ * ```
+ */
+type ReactContentBlocksByRow = (undefined | ReactContentBlock)[];
 interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
   /**
    * When using multiple search instances on the same page, you need to set a unique stateKey for each one. We recommend using an incrementing number, such as "1", "2", "3", etc. To associate a modal with a SearchPage keyed component, set the same stateKey on both. If no stateKey is provided, the "default" instance will be used.
    */
   stateKey?: string;
+  /**
+   * See JSDoc of ReactContentBlocksByRow
+   */
+  contentBlocksByRow?: ReactContentBlocksByRow;
 }
 /**
  * SearchPage is a component that renders a Depict search results page.
@@ -242,6 +274,10 @@ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig,
    * When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. We recommend using an incrementing number, such as "1", "2", "3", etc. To associate a certain BreadCrumbs or QuickLinks component with a certain CategoryPage component, set the same stateKey on both.
    */
   stateKey?: string;
+  /**
+   * See JSDoc of ReactContentBlocksByRow
+   */
+  contentBlocksByRow?: ReactContentBlocksByRow;
 }
 /**
  * CategoryPage is a component that renders a Depict category page. Go to definition on the props for more info.

package/ES10/index.js

@@ -1,6 +1,6 @@
 import { add_to_version_info as $jb2Oo$add_to_version_info, catchify as $jb2Oo$catchify, queueMacroTask as $jb2Oo$queueMacroTask, instant_exec_on_suspect_history_change as $jb2Oo$instant_exec_on_suspect_history_change, derror as $jb2Oo$derror } from "@depict-ai/utilishared/ES10";
 import { CategoryTitle as $383b6fd56bf151bd$re_export$CategoryTitle, embedded_num_products as $383b6fd56bf151bd$re_export$EmbeddedNumProducts, DepictAPI as $jb2Oo$DepictAPI, DepictSearch as $jb2Oo$DepictSearch, DepictCategory as $jb2Oo$DepictCategory, get_search_query_updating_blocked_signal as $jb2Oo$get_search_query_updating_blocked_signal, SearchPage as $jb2Oo$SearchPage, defaultColsAtSize as $jb2Oo$defaultColsAtSize, defaultGridSpacing as $jb2Oo$defaultGridSpacing, ProductCardError as $jb2Oo$ProductCardError, CategoryPage as $jb2Oo$CategoryPage, defaultCategoryTitlePlugin as $jb2Oo$defaultCategoryTitlePlugin, BreadCrumbs as $jb2Oo$BreadCrumbs, QuickLinks as $jb2Oo$QuickLinks, ImagePlaceholder as $jb2Oo$ImagePlaceholder, TextPlaceholder as $jb2Oo$TextPlaceholder, RecommendationSlider as $jb2Oo$RecommendationSlider, RecommendationGrid as $jb2Oo$RecommendationGrid, open_modal_with_alignment as $jb2Oo$open_modal_with_alignment, SearchField as $jb2Oo$SearchField, fetchDepictRecommendations as $jb2Oo$fetchDepictRecommendations } from "@depict-ai/ui/ES10";
-import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, createSignal as $jb2Oo$createSignal, createComputed as $jb2Oo$createComputed, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner, on as $jb2Oo$on } from "solid-js";
+import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, createSignal as $jb2Oo$createSignal, createComputed as $jb2Oo$createComputed, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner, on as $jb2Oo$on, mapArray as $jb2Oo$mapArray } from "solid-js";
 import { createElement as $jb2Oo$createElement, Fragment as $jb2Oo$Fragment, useEffect as $jb2Oo$useEffect, useState as $jb2Oo$useState, useRef as $jb2Oo$useRef, forwardRef as $jb2Oo$forwardRef, Component as $jb2Oo$Component, useCallback as $jb2Oo$useCallback } from "react";
 import { defaultLocale as $jb2Oo$defaultLocale } from "@depict-ai/ui/locales/ES10";
 import { render as $jb2Oo$render, hydrate as $jb2Oo$hydrate, isServer as $jb2Oo$isServer } from "solid-js/web";
@@ -14,7 +14,7 @@ import { renderToString as $jb2Oo$renderToString } from "react-dom/server";
 // Note, if you add an export here, also add one in src-server/main.ts
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("react-ui", "ES10");
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.11";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.1.0";
 const $8c691d7f86317052$export$8e769ad4338a911e = {
   usedLocale: $jb2Oo$createSignal((0, $jb2Oo$defaultLocale)),
   search_instances: new Map(),
@@ -486,9 +486,9 @@ class $88d93ed7309e90d1$export$d0f82e3ef89b1f22 extends (0, $jb2Oo$Component) {
     return this.props.children;
   }
 }
-async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
+async function $cce08f18e2476cbf$export$32024253978abdc7(_ref) {
   let {
-    display: display,
+    component_props: component_props,
     component_portals: component_portals,
     set_portals: set_portals,
     get_react_template: get_react_template
@@ -505,9 +505,7 @@ async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
     const [react_template, set_react_template] = $jb2Oo$useState(() => $jb2Oo$untrack(get_react_template));
     call_when_template_changes = set_react_template;
     return react_template(props);
-  }, {
-    display: display
-  });
+  }, component_props);
   const reactProductCardInErrorBoundary = $jb2Oo$jsx((0, $88d93ed7309e90d1$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
     on_error: error => $jb2Oo$runWithOwner(owner, () => {
@@ -538,6 +536,28 @@ async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
   await react_has_ran_hooks; // After React has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
   return [solid_container];
 }
+function $4a7d79203c110c2a$export$84006927f874e911(blocks, component_portals, set_portals) {
+  return $jb2Oo$mapArray(blocks, block => {
+    if (!block) return block;
+    return {
+      get span_columns() {
+        return block === null || block === void 0 ? void 0 : block.spanColumns;
+      },
+      get span_rows() {
+        return block === null || block === void 0 ? void 0 : block.spanRows;
+      },
+      get position() {
+        return block === null || block === void 0 ? void 0 : block.position;
+      },
+      content: () => $cce08f18e2476cbf$export$32024253978abdc7({
+        get_react_template: () => block.content,
+        component_portals: component_portals,
+        set_portals: set_portals,
+        component_props: {}
+      })
+    };
+  });
+}
 const $d059770e7af9e2dc$var$rendered_components_with_state_key = new Set();
 function $d059770e7af9e2dc$export$a54ec244c8863715(props) {
   return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
@@ -586,6 +606,7 @@ function $d059770e7af9e2dc$var$SolidSearchPage(props, set_portals) {
   return $jb2Oo$createMemo(() => {
     const stateKey = $jb2Oo$untrack(() => props.stateKey);
     if ($d059770e7af9e2dc$var$rendered_components_with_state_key.has(stateKey)) throw new Error("You have multiple SearchPage components with the same stateKey: ".concat(stateKey, ". Each SearchPage component must have a unique stateKey."));
+    const transformed_content_blocks = $4a7d79203c110c2a$export$84006927f874e911(() => props.contentBlocksByRow, component_portals, set_portals);
     $d059770e7af9e2dc$var$rendered_components_with_state_key.add(stateKey);
     $jb2Oo$onCleanup(() => $d059770e7af9e2dc$var$rendered_components_with_state_key.delete(stateKey));
     return $jb2Oo$SearchPage({
@@ -602,12 +623,17 @@ function $d059770e7af9e2dc$var$SolidSearchPage(props, set_portals) {
         return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $jb2Oo$defaultGridSpacing);
       },
       depict_search: depict_search(),
-      product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
-        display: display,
+      product_card_template: display => $cce08f18e2476cbf$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
-      })
+      }),
+      get content_blocks_by_row() {
+        return transformed_content_blocks();
+      }
     });
   });
 }
@@ -668,6 +694,7 @@ function $e86a296a07b17ad5$var$SolidCategoryPage(props, set_portals) {
     if ($e86a296a07b17ad5$var$rendered_components_with_state_key.has(stateKey)) throw new Error("You have multiple CategoryPage components with the same stateKey: ".concat(stateKey, ". Each CategoryPage component must have a unique stateKey."));
     $e86a296a07b17ad5$var$rendered_components_with_state_key.add(stateKey);
     $jb2Oo$onCleanup(() => $e86a296a07b17ad5$var$rendered_components_with_state_key.delete(stateKey));
+    const transformed_content_blocks = $4a7d79203c110c2a$export$84006927f874e911(() => props.contentBlocksByRow, component_portals, set_portals);
     return $jb2Oo$CategoryPage({
       depict_category: depict_category(),
       get cols_at_size() {
@@ -685,8 +712,13 @@ function $e86a296a07b17ad5$var$SolidCategoryPage(props, set_portals) {
       get show_quicklinks() {
         return props.showQuicklinks;
       },
-      product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
-        display: display,
+      get content_blocks_by_row() {
+        return transformed_content_blocks();
+      },
+      product_card_template: display => $cce08f18e2476cbf$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
@@ -765,8 +797,10 @@ function $c02e9fd51f31a1bd$export$5abb40edfde2a843(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
-      display: display,
+    product_card_template: display => $cce08f18e2476cbf$export$32024253978abdc7({
+      component_props: {
+        display: display
+      },
       get_react_template: () => props.productCard,
       component_portals: component_portals,
       set_portals: set_portals
@@ -795,8 +829,10 @@ function $48b0916cc674770c$export$bd8acc07a8bae229(props, set_portals) {
             display: display
           })))
         };
-      return $6593e4e126cb318f$export$79c79419c1ef0081({
-        display: display,
+      return $cce08f18e2476cbf$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals