@constructor-io/constructorio-ui-plp 1.5.0 → 1.6.1

package/lib/types/types.d.ts

@@ -16,6 +16,7 @@ export interface ItemFieldGetters {
     getRolloverImage: (item: Item | Variation) => string | undefined;
     getSwatchPreview: (variation: Variation) => string;
     getSwatches: (item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']) => SwatchItem[] | undefined;
+    getIsHiddenGroupField: (group: PlpItemGroup) => boolean | undefined;
 }
 export interface Formatters {
     formatPrice: (price?: number) => string;
@@ -28,6 +29,60 @@ export interface Callbacks {
     onSwatchClick?: (event: React.MouseEvent, swatch: SwatchItem) => void;
     onRedirect?: (url: string) => void;
 }
+interface ProductCardBaseProps {
+    /**
+     * Constructor's Transformed API Item Object.
+     */
+    item: Item;
+}
+/**
+ * Props that will be passed to the renderProps function
+ */
+export interface ProductCardRenderProps extends ProductCardProps {
+    /**
+     * Function to format the price. Defaults to "$0.00".
+     * Set globally at the CioPlp provider level.
+     */
+    formatPrice: (price: number) => string;
+    /**
+     * Object containing information about the current product, variation
+     */
+    productInfo: ProductInfoObject;
+    /**
+     * Callback to run on add-to-cart event.
+     * Set globally at the CioPlp provider level.
+     */
+    onAddToCart: (event: React.MouseEvent, item: Item, revenue: number, selectedVariation: string) => void;
+    /**
+     * Callback to run on Product Card Click.
+     * Set globally at the CioPlp provider level.
+     */
+    onClick: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Callback to run on Product Card Mouse Enter.
+     * Set globally at the CioPlp provider level.
+     */
+    onMouseEnter: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Callback to run on Product Card Mouse Leave.
+     * Set globally at the CioPlp provider level.
+     */
+    onMouseLeave: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Boolean to show/hide the rollover image.
+     */
+    isRolloverImageShown: boolean;
+    /**
+     * Data Attributes to surface on parent div of product card.
+     */
+    productCardCnstrcDataAttributes: CnstrcData;
+}
+export type ProductCardProps = IncludeRenderProps<ProductCardBaseProps, ProductCardRenderProps>;
+export interface RenderOverrides {
+    productCard?: {
+        renderHtml?: (props: ProductCardRenderProps) => HTMLElement | ReactNode;
+    };
+}
 export type PlpSearchData = PlpSearchDataResults | PlpSearchDataRedirect;
 export interface PlpSearchDataResults {
     resultId: string;
@@ -96,6 +151,7 @@ export interface PlpContextValue {
     formatters: Formatters;
     callbacks: Callbacks;
     urlHelpers: UrlHelpers;
+    renderOverrides: RenderOverrides;
 }
 export interface PrimaryColorStyles {
     '--primary-color-h': string;
@@ -154,6 +210,7 @@ export interface CioPlpProviderProps {
     formatters?: Partial<Formatters>;
     callbacks?: Partial<Callbacks>;
     itemFieldGetters?: Partial<ItemFieldGetters>;
+    renderOverrides?: Partial<RenderOverrides>;
     urlHelpers?: Partial<UrlHelpers>;
     initialSearchResponse?: SearchResponse;
     initialBrowseResponse?: GetBrowseResultsResponse;
@@ -234,7 +291,7 @@ export interface PlpItemGroup {
     groupId: string;
     displayName: string;
     count: number;
-    data: object | null;
+    data: Record<string, any> | null;
     children: Array<PlpItemGroup>;
     parents: Pick<PlpItemGroup, 'groupId' | 'displayName'>[];
 }
@@ -242,6 +299,7 @@ export type CnstrcData = Record<`data-cnstrc-${string}`, string | number | boole
 export type PropsWithChildren<P> = P & {
     children?: ReactNode;
 };
+export type RenderPropsChildren<RenderProps> = ((props: RenderProps) => ReactNode) | ReactNode;
 /**
  * Composes a type for a Component that accepts
  * - Props P,

package/lib/types/utils/itemFieldGetters.d.ts

@@ -1,6 +1,7 @@
-import { ItemFieldGetters, Item, SwatchItem, Variation } from '../types';
+import { ItemFieldGetters, Item, SwatchItem, Variation, PlpItemGroup } from '../types';
 export declare function getPrice(item: Item | Variation): number;
 export declare function getSalePrice(item: Item | Variation): number | undefined;
 export declare function getRolloverImage(item: Item | Variation): string | undefined;
 export declare function getSwatches(item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']): SwatchItem[] | undefined;
 export declare function getSwatchPreview(variation: Variation): string;
+export declare function getIsHiddenGroupField(group: PlpItemGroup): any;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.5.0";
+declare const _default: "1.6.1";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-plp",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "Constructor PLP UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",