@depict-ai/react-ui 1.5.20 → 2.0.0

package/ES10/index.cjs

@@ -4,10 +4,11 @@ var $2kiy7$solidjs = require("solid-js");
 var $2kiy7$react = require("react");
 var $2kiy7$depictaiuilocales = require("@depict-ai/ui/locales/ES10");
 var $2kiy7$solidjsweb = require("solid-js/web");
-var $2kiy7$reactjsxruntime = require("react/jsx-runtime");
-var $2kiy7$reactdom = require("react-dom");
 var $2kiy7$solidjsstore = require("solid-js/store");
 var $2kiy7$depictaidpc = require("@depict-ai/dpc/ES10");
+var $2kiy7$reactjsxruntime = require("react/jsx-runtime");
+var $2kiy7$reactdom = require("react-dom");
+var $2kiy7$reactdomserver = require("react-dom/server");
 require("../multi_import_deduplicator.cjs").register_es_version("react-ui", "ES10");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -25,6 +26,8 @@ $parcel$export(module.exports, "CategoryPage", () => $15691268d8df90a9$export$f7
 $parcel$export(module.exports, "SearchPage", () => $735104b46c50160f$export$a54ec244c8863715);
 $parcel$export(module.exports, "ImagePlaceholder", () => $95af6193353bea10$export$3f37af283f8fb843);
 $parcel$export(module.exports, "TextPlaceholder", () => $07e1b96355935829$export$89c6019e4baa40b1);
+$parcel$export(module.exports, "RecommendationGrid", () => $8f89f8a832210d6b$export$b0a773486c1c2312);
+$parcel$export(module.exports, "RecommendationSlider", () => $745b83c12baac3c0$export$82cfdc85a4d15688);
 $parcel$export(module.exports, "useSearchModal", () => $0991f250194bf9f3$export$912994940e660d32);
 $parcel$export(module.exports, "useSearchField", () => $fea6ed5be1bf2b27$export$9bb30bbe003b82e0);
 $parcel$export(module.exports, "useFetchRecommendations", () => $2ea1d71b29581906$export$6501da23a2770fc);
@@ -35,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 = "1.5.20";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.0.0";
 const $ef516b1f92253963$export$8e769ad4338a911e = {
   usedLocale: $2kiy7$solidjs.createSignal((0, $2kiy7$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -55,31 +58,6 @@ const $ef516b1f92253963$export$8e769ad4338a911e = {
   category_meta_title_suffix: $2kiy7$solidjs.createSignal(),
   disable_override_query_id: $2kiy7$solidjs.createSignal()
 };
-class $e9048b15cf1e8792$export$d0f82e3ef89b1f22 extends (0, $2kiy7$react.Component) {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false
-    };
-  }
-  static getDerivedStateFromError() {
-    // Update state so the next render will show the fallback UI.
-    return {
-      hasError: true
-    };
-  }
-  componentDidCatch(error) {
-    this.props.on_error(error);
-  }
-  render() {
-    if (this.state.hasError)
-      // You can render any custom fallback UI
-      return $2kiy7$react.createElement("div", {
-        children: "Component failed"
-      });
-    return this.props.children;
-  }
-}
 let $e7ba61a7074c02d3$var$run_on_href_change;
 let $e7ba61a7074c02d3$var$old_href = location.href;
 function $e7ba61a7074c02d3$export$74f3924c5027fe1d(cb) {
@@ -156,45 +134,6 @@ function $e7ba61a7074c02d3$export$e5139bbbb9a05035(component, is_set) {
     });
   };
 }
-async function $e7ba61a7074c02d3$export$79c79419c1ef0081(_ref2) {
-  let {
-    display: display,
-    component_portals: component_portals,
-    set_portals: set_portals,
-    react_template: react_template
-  } = _ref2;
-  let set_react_has_ran_hooks;
-  let was_cleaned_up = false;
-  const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
-  const solid_container = document.createElement("div");
-  const owner = $2kiy7$solidjs.getOwner();
-  const reactProductCard = $2kiy7$reactjsxruntime.jsx(props => {
-    // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
-    $2kiy7$react.useEffect(set_react_has_ran_hooks, []);
-    return react_template(props);
-  }, {
-    display: display
-  });
-  const reactProductCardInErrorBoundary = $2kiy7$reactjsxruntime.jsx((0, $e9048b15cf1e8792$export$d0f82e3ef89b1f22), {
-    children: reactProductCard,
-    on_error: error => $2kiy7$solidjs.runWithOwner(owner, () => {
-      if (was_cleaned_up) return; // Would infinite loop if we'd throw after we've already been cleaned up. That is because the `ErrorBoundary` won't be "registered" with the cleaned-up owner anymore so react would hear about the throw and attempt to re-render the error boundary or something which would throw again, etc.
-      throw new (0, $2kiy7$depictaiui.ProductCardError)(error);
-    })
-  });
-  const portal = $2kiy7$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
-  component_portals.add(portal);
-  set_portals([...component_portals]);
-  $2kiy7$solidjs.onCleanup(() => {
-    was_cleaned_up = true;
-    // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
-    component_portals.delete(portal);
-    // Updating i.e. the merchant will cause a setState call while rendering the DepictProvider component which is illegal because it usually infinite loops react apps. In our case it doesn't though, so we just evade detection by doing it a microtask later. See also https://github.com/facebook/react/issues/18178#issuecomment-595846312
-    queueMicrotask(() => set_portals([...component_portals]));
-  });
-  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];
-}
 let $abe6528d061993d2$var$set = false;
 let $abe6528d061993d2$var$padding_animation;
 function $abe6528d061993d2$export$6453cbc34515a94d() {
@@ -546,6 +485,70 @@ function $fe70497a7dcbe63d$export$f4d89133c6985668(type, stateKey, componentName
   });
   return instance.instance;
 }
+class $e9048b15cf1e8792$export$d0f82e3ef89b1f22 extends (0, $2kiy7$react.Component) {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error) {
+    this.props.on_error(error);
+  }
+  render() {
+    if (this.state.hasError)
+      // You can render any custom fallback UI
+      return $2kiy7$react.createElement("div", {
+        children: "Component failed"
+      });
+    return this.props.children;
+  }
+}
+async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
+  let {
+    display: display,
+    component_portals: component_portals,
+    set_portals: set_portals,
+    react_template: react_template
+  } = _ref;
+  let set_react_has_ran_hooks;
+  let was_cleaned_up = false;
+  const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
+  const solid_container = document.createElement("div");
+  const owner = $2kiy7$solidjs.getOwner();
+  const reactProductCard = $2kiy7$reactjsxruntime.jsx(props => {
+    // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
+    $2kiy7$react.useEffect(set_react_has_ran_hooks, []);
+    return react_template(props);
+  }, {
+    display: display
+  });
+  const reactProductCardInErrorBoundary = $2kiy7$reactjsxruntime.jsx((0, $e9048b15cf1e8792$export$d0f82e3ef89b1f22), {
+    children: reactProductCard,
+    on_error: error => $2kiy7$solidjs.runWithOwner(owner, () => {
+      if (was_cleaned_up) return; // Would infinite loop if we'd throw after we've already been cleaned up. That is because the `ErrorBoundary` won't be "registered" with the cleaned-up owner anymore so react would hear about the throw and attempt to re-render the error boundary or something which would throw again, etc.
+      throw new (0, $2kiy7$depictaiui.ProductCardError)(error);
+    })
+  });
+  const portal = $2kiy7$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
+  component_portals.add(portal);
+  set_portals([...component_portals]);
+  $2kiy7$solidjs.onCleanup(() => {
+    was_cleaned_up = true;
+    // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
+    component_portals.delete(portal);
+    // Updating i.e. the merchant will cause a setState call while rendering the DepictProvider component which is illegal because it usually infinite loops react apps. In our case it doesn't though, so we just evade detection by doing it a microtask later. See also https://github.com/facebook/react/issues/18178#issuecomment-595846312
+    queueMicrotask(() => set_portals([...component_portals]));
+  });
+  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];
+}
 const $735104b46c50160f$var$rendered_components_with_state_key = new Set();
 function $735104b46c50160f$export$a54ec244c8863715(props) {
   return $e7ba61a7074c02d3$export$f6e64e17bd69eeef({
@@ -610,7 +613,7 @@ 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 => $e7ba61a7074c02d3$export$79c79419c1ef0081({
+      product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
         display: display,
         react_template: $2kiy7$solidjs.untrack(() => props.productCard),
         component_portals: component_portals,
@@ -691,7 +694,7 @@ function $15691268d8df90a9$var$SolidCategoryPage(props, set_portals) {
       get show_quicklinks() {
         return props.showQuicklinks;
       },
-      product_card_template: display => $e7ba61a7074c02d3$export$79c79419c1ef0081({
+      product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
         display: display,
         react_template: $2kiy7$solidjs.untrack(() => props.productCard),
         component_portals: component_portals,
@@ -759,6 +762,83 @@ const $07e1b96355935829$export$89c6019e4baa40b1 = raw_react_props => {
     }
   });
 };
+function $745b83c12baac3c0$export$82cfdc85a4d15688(props) {
+  return $e7ba61a7074c02d3$export$f6e64e17bd69eeef({
+    solid_component: $745b83c12baac3c0$export$5abb40edfde2a843,
+    props: props
+  });
+}
+function $745b83c12baac3c0$export$5abb40edfde2a843(props, set_portals) {
+  const component_portals = new Set();
+  return $2kiy7$depictaiui.RecommendationSlider({
+    get recommendations() {
+      return props.recommendations;
+    },
+    product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
+      display: display,
+      react_template: $2kiy7$solidjs.untrack(() => props.productCard),
+      component_portals: component_portals,
+      set_portals: set_portals
+    }),
+    get cols_at_size() {
+      return props.columnsAtSize || (0, $2kiy7$depictaiui.defaultColsAtSize);
+    },
+    get grid_spacing() {
+      var _props$gridSpacing;
+      return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $2kiy7$depictaiui.defaultGridSpacing);
+    }
+  });
+}
+function $27d583018ba6e604$export$bd8acc07a8bae229(props, set_portals) {
+  const component_portals = new Set();
+  return $2kiy7$depictaiui.RecommendationGrid({
+    get recommendations() {
+      return props.recommendations;
+    },
+    product_card_template: display => {
+      if (0, $2kiy7$solidjsweb.isServer)
+        // This function can't be async on the server
+        // @ts-ignore
+        return {
+          t: $2kiy7$reactdomserver.renderToString($2kiy7$react.createElement(() => props.productCard({
+            display: display
+          })))
+        };
+      return $99405615baa3d774$export$79c79419c1ef0081({
+        display: display,
+        react_template: $2kiy7$solidjs.untrack(() => props.productCard),
+        component_portals: component_portals,
+        set_portals: set_portals
+      });
+    },
+    get cols_at_size() {
+      return props.columnsAtSize || (0, $2kiy7$depictaiui.defaultColsAtSize);
+    },
+    get grid_spacing() {
+      var _props$gridSpacing;
+      return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $2kiy7$depictaiui.defaultGridSpacing);
+    },
+    get view_more_button() {
+      var _viewMoreButton$start;
+      const {
+        viewMoreButton: viewMoreButton
+      } = props;
+      return viewMoreButton ? {
+        text: viewMoreButton.text,
+        start_rows: (_viewMoreButton$start = viewMoreButton.startRows) !== null && _viewMoreButton$start !== void 0 ? _viewMoreButton$start : 2,
+        rows_per_click: viewMoreButton.rowsPerClick
+      } : undefined;
+    }
+  });
+}
+function $8f89f8a832210d6b$export$b0a773486c1c2312(props) {
+  return $e7ba61a7074c02d3$export$f6e64e17bd69eeef({
+    solid_component: (0, $27d583018ba6e604$export$bd8acc07a8bae229),
+    props: props,
+    hydrate_function_when_ssr: (0, $2kiy7$solidjsweb.hydrate),
+    wrapper_type: "section"
+  });
+}
 const $205fe657e57228d5$export$d69d8daa20eae175 = createOpenModalParams => {
   const {
     location = "centered",