@depict-ai/ui 1.0.17 → 1.0.18

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Display, Elem, ColsAtSize, Node_Array } from "@depict-ai/utilishared";
 import { JSX, Accessor, Setter, Signal } from "solid-js";
+import { Display, Elem, ColsAtSize, Node_Array } from "@depict-ai/utilishared";
 import { SearchResponse } from "@depict-ai/types/api/SearchResponse";
 import { SearchRequest, SearchFilter } from "@depict-ai/types/api/SearchRequest";
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
@@ -7,7 +7,13 @@ import { SearchSuggestionsResponse, CategorySuggestion } from "@depict-ai/types/
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
 import { ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
-export const version = "1.0.17";
+export const version = "1.0.18";
+export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+    width_?: number;
+    height_?: number;
+}): SVGElement;
 export type OnNavigation = ((options: {
     is_replace: boolean;
     new_url: URL;
@@ -214,6 +220,27 @@ declare class SDKError extends Error {
 export class ProductCardError extends SDKError {
     constructor(templateError: Error);
 }
+/**
+ * Base placeholder component used by ImagePlaceholder and TextPlaceholder
+ */
+export function BasePlaceholder(props: {
+    style: JSX.CSSProperties;
+    class?: string;
+}): JSX.Element;
+/**
+ * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
+ * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
+ * @property height height of the placeholder. Set to `1em` by default.
+ * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function TextPlaceholder(props: {
+    style?: JSX.CSSProperties;
+    height: string;
+    width: string;
+    class?: string;
+}): JSX.Element;
 /**
  * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
  * @returns A cleanup function to manually re-enable scrolling.
@@ -222,7 +249,7 @@ export function disable_scrolling(): () => void;
 export const CategoryTitle: ({ category_title_, product_count_, }: {
     category_title_: Accessor<string | undefined>;
     product_count_: JSX.Element;
-}) => HTMLElement;
+}) => JSX.Element;
 /**
  * Embeds number of products between sort and filter buttons on mobile if possible, only supported for category pages right now. Pass it as category_title_ to Category.
  * Note: this will add an invisible element as first element in depict-search-page which will confuse the flex-gap SCSS mixin a bit so you'll get some extra spacing at the beginning of the search page
@@ -287,7 +314,34 @@ export function BreadCrumbs({ depict_category }: {
 export function QuickLinks({ depict_category }: {
     depict_category: DepictCategory;
 }): HTMLElement;
-export function get_categories(tenant: string, market: string): Promise<string[]>;
+/**
+ * Gets available categories/collections (query_ids for the product-listing endpoint) for a merchant
+ * @param tenant
+ * @param market
+ * @param type - optional, currently only setting this to "collection" will return collections instead of categories
+ */
+export function get_categories(tenant: string, market: string, type?: string): Promise<string[]>;
+type ImagePlaceholderBaseOptions = {
+    style?: JSX.CSSProperties;
+    class?: string;
+};
+type ImagePlaceholderBlockOptions = {
+    width: string;
+    height: string;
+};
+type ImagePlaceholderImageOptions = {
+    aspectRatio: number;
+};
+/**
+ * A placeholder that can be used instead of an image or other block of content while it's loading.
+ * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
+ * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
+ * @property width If width and height is set, the defined width and height will be used.
+ * @property height If width and height is set, the defined width and height will be used.
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
 export function DefaultInstantCardPlaceholder(): HTMLDivElement;
 /**
  * Useful for aligning the search modal to an element, like an existing input field
@@ -451,28 +505,6 @@ export interface BaseCategoryPageConfig extends BaseProductListingConfig {
      */
     showQuicklinks?: boolean;
 }
-/**
- * Props for the TextPlaceholder component.
- */
-export interface TextPlaceholderProps {
-    /**
-     * The height of the text, including a unit.
-     * @example "1em"
-     */
-    height: string;
-    /**
-     * The width of the text.
-     * @example "60px", "10em"
-     */
-    width: string;
-}
-/**
- * Props for the ImagePlaceholder component.
- */
-export interface ImagePlaceholderProps {
-    /** The aspect ratio of the image that will be displayed. */
-    aspectRatio: number;
-}
 type CenteredLocation = {
     location?: "centered";
 };
@@ -538,5 +570,5 @@ export const defaultGridSpacing = "2%";
 export const defaultCategoryTitlePlugin: ({ category_title_, product_count_, }: {
     category_title_: import("solid-js").Accessor<string | undefined>;
     product_count_: import("solid-js").JSX.Element;
-}) => HTMLElement;
+}) => import("solid-js").JSX.Element;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";

package/dist/main.js

@@ -37,7 +37,7 @@ $parcel$export(module.exports, "defaultGridSpacing", () => $a3280f0aad997933$exp
 $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$export$c3834fa86c616831);
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.0.17";
+/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.0.9";
 
 
 
@@ -995,17 +995,22 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({ displays_by_key_: displays_
             ];
         },
         children: (product_id, index)=>{
+            // We're using `untrack` here since we don't want to react in here to displays_by_key changing
+            // As long as our key stays the same we assume that the display hasn't changed, so we don't want to rerender
+            // If the key gets removed, <For> will remove us
             const owner = (0, $iBTHO$solidjs.getOwner)();
             const display_accessor = (0, $iBTHO$solidjs.createMemo)(()=>displays_by_key_().get(product_id));
-            const [product_card_resource] = (0, $iBTHO$solidjs.createResource)(display_accessor, // re-render when the reference to the display object changes
-            // this should only be the case when the merchant or market changes and the new request has completed
-            (display)=>{
+            const [product_card_resource] = (0, $iBTHO$solidjs.createResource)((0, $iBTHO$solidjs.createMemo)(()=>[
+                    merchant_(),
+                    market_()
+                ]), // re-render when merchant or market changes
+            ([merchant, market])=>{
                 // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+                const display = (0, $iBTHO$solidjs.untrack)(display_accessor);
                 return product_card_template_(display, {
                     set_on_index_change: (fn)=>(0, $iBTHO$solidjs.runWithOwner)(owner, ()=>(0, $iBTHO$solidjs.createEffect)(()=>fn(index()))),
-                    merchant: (0, $iBTHO$solidjs.untrack)(merchant_),
-                    // this means that the merchant and market provided to the template is wrong while we do another fetch, but I don't see how anyone would need to know the correct market there
-                    market: (0, $iBTHO$solidjs.untrack)(market_)
+                    merchant: merchant,
+                    market: market
                 });
             });
             const node_accessor = (0, $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52)(product_card_resource);
@@ -6452,8 +6457,7 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = (display_or_variant_container,
             sizes: "0px"
         }));
     const is_sale = (0, $iBTHO$solidjs.createMemo)(()=>display().sale_price !== display().original_price);
-    // localized_page_url currently only used by MayaDelorez, but potentially more. Convenience to avoid requireing full frontend URL transformation.
-    const href = (0, $iBTHO$solidjs.createMemo)(()=>display().localized_page_url || display().page_url);
+    const href = (0, $iBTHO$solidjs.createMemo)(()=>display().page_url);
     return (()=>{
         const _el$ = $6ae613870d3380fc$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$9 = _el$7.firstChild;
         (0, $iBTHO$solidjsweb.addEventListener)(_el$, "click", (0, $iBTHO$depictaiutilishared.catchify)((event_)=>router_.navigate_.go_to_({

package/dist/module.js

@@ -2,7 +2,7 @@ import {add_to_version_info as $kyEB6$add_to_version_info, fetch_recs as $kyEB6$
 import {template as $kyEB6$template, insert as $kyEB6$insert, effect as $kyEB6$effect, setAttribute as $kyEB6$setAttribute, createComponent as $kyEB6$createComponent, use as $kyEB6$use, memo as $kyEB6$memo, addEventListener as $kyEB6$addEventListener, delegateEvents as $kyEB6$delegateEvents, spread as $kyEB6$spread, classList as $kyEB6$classList, style as $kyEB6$style, Dynamic as $kyEB6$Dynamic, mergeProps as $kyEB6$mergeProps, className as $kyEB6$className} from "solid-js/web";
 import {createSignal as $kyEB6$createSignal, getOwner as $kyEB6$getOwner, createRoot as $kyEB6$createRoot, runWithOwner as $kyEB6$runWithOwner, onCleanup as $kyEB6$onCleanup, createComputed as $kyEB6$createComputed, createRenderEffect as $kyEB6$createRenderEffect, createEffect as $kyEB6$createEffect, untrack as $kyEB6$untrack, batch as $kyEB6$batch, createResource as $kyEB6$createResource, createMemo as $kyEB6$createMemo, Show as $kyEB6$Show, createReaction as $kyEB6$createReaction, Suspense as $kyEB6$Suspense, on as $kyEB6$on, ErrorBoundary as $kyEB6$ErrorBoundary, For as $kyEB6$For, Index as $kyEB6$Index} from "solid-js";
 
-/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.0.17";
+/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.0.9";
 
 
 
@@ -960,17 +960,22 @@ function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({ displays_by_key_: displays_
             ];
         },
         children: (product_id, index)=>{
+            // We're using `untrack` here since we don't want to react in here to displays_by_key changing
+            // As long as our key stays the same we assume that the display hasn't changed, so we don't want to rerender
+            // If the key gets removed, <For> will remove us
             const owner = (0, $kyEB6$getOwner)();
             const display_accessor = (0, $kyEB6$createMemo)(()=>displays_by_key_().get(product_id));
-            const [product_card_resource] = (0, $kyEB6$createResource)(display_accessor, // re-render when the reference to the display object changes
-            // this should only be the case when the merchant or market changes and the new request has completed
-            (display)=>{
+            const [product_card_resource] = (0, $kyEB6$createResource)((0, $kyEB6$createMemo)(()=>[
+                    merchant_(),
+                    market_()
+                ]), // re-render when merchant or market changes
+            ([merchant, market])=>{
                 // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+                const display = (0, $kyEB6$untrack)(display_accessor);
                 return product_card_template_(display, {
                     set_on_index_change: (fn)=>(0, $kyEB6$runWithOwner)(owner, ()=>(0, $kyEB6$createEffect)(()=>fn(index()))),
-                    merchant: (0, $kyEB6$untrack)(merchant_),
-                    // this means that the merchant and market provided to the template is wrong while we do another fetch, but I don't see how anyone would need to know the correct market there
-                    market: (0, $kyEB6$untrack)(market_)
+                    merchant: merchant,
+                    market: market
                 });
             });
             const node_accessor = (0, $a52235d12ccf9c88$export$2f0cbfbb4354bb52)(product_card_resource);
@@ -6417,8 +6422,7 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = (display_or_variant_container,
             sizes: "0px"
         }));
     const is_sale = (0, $kyEB6$createMemo)(()=>display().sale_price !== display().original_price);
-    // localized_page_url currently only used by MayaDelorez, but potentially more. Convenience to avoid requireing full frontend URL transformation.
-    const href = (0, $kyEB6$createMemo)(()=>display().localized_page_url || display().page_url);
+    const href = (0, $kyEB6$createMemo)(()=>display().page_url);
     return (()=>{
         const _el$ = $e003be2a50d9e5bc$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$9 = _el$7.firstChild;
         (0, $kyEB6$addEventListener)(_el$, "click", (0, $kyEB6$catchify)((event_)=>router_.navigate_.go_to_({