@constructor-io/constructorio-ui-plp 1.4.7 → 1.6.0

package/lib/types/components/ProductCard/ProductCard.d.ts

@@ -1,42 +1,6 @@
 import React from 'react';
-import { CnstrcData, IncludeRenderProps, Item, ProductInfoObject } from '../../types';
-interface Props {
-    /**
-     * 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;
-    /**
-     * Data Attributes to surface on parent div of product card.
-     */
-    productCardCnstrcDataAttributes: CnstrcData;
-}
-export type ProductCardProps = IncludeRenderProps<Props, ProductCardRenderProps>;
+import { ProductCardProps } from '../../types';
 /**
  * ProductCard component that has Constructor tracking built-in.
  */
 export default function ProductCard(props: ProductCardProps): React.JSX.Element;
-export {};

package/lib/types/components/ProductCard/index.d.ts

@@ -1,3 +1,2 @@
 import ProductCard from './ProductCard';
-export * from './ProductCard';
 export default ProductCard;

package/lib/types/components/RenderPropsWrapper/CustomHtmlRender.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+interface CustomHtmlRenderProps<T> {
+    renderHtml: (props: T) => HTMLElement | ReactNode;
+    topLevelAttributes?: object;
+}
+export default function CustomHtmlRender<T>(props: T & CustomHtmlRenderProps<T>): React.JSX.Element | null;
+export {};

package/lib/types/components/RenderPropsWrapper/RenderPropsWrapper.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { RenderPropsChildren } from '../../types';
+export interface ReactPropsWrapperProps<T> {
+    /**
+     * The props to be passed to the render props function provided
+     */
+    props: T;
+    /**
+     * The default implementation to be nested within the wrapper
+     */
+    children: ReactNode;
+    /**
+     * One of Function<T> | JSX. Overrides default implementation
+     */
+    override?: RenderPropsChildren<T>;
+    /**
+     * One of Function<T> -> HTMLElement. Overrides default implementation
+     */
+    htmlOverride?: (props: T) => HTMLElement | ReactNode;
+    /**
+     * Object containing the attributes to be spread on the top-level div. To be used with `htmlOverride`
+     */
+    topLevelAttributes?: object;
+}
+export default function RenderPropsWrapper<T>({ props, children, override, htmlOverride, topLevelAttributes, }: ReactPropsWrapperProps<T>): React.JSX.Element;

package/lib/types/constants.d.ts

@@ -1 +1,4 @@
 export declare const DEMO_API_KEY = "key_M57QS8SMPdLdLx4x";
+export declare const EMITTED_EVENTS: {
+    PRODUCT_CARD_IMAGE_ROLLOVER: string;
+};

package/lib/types/index.d.ts

@@ -28,7 +28,6 @@ export type { FiltersProps, FiltersWithRenderProps } from './components/Filters'
 export type { GroupsProps, GroupsWithRenderProps } from './components/Groups';
 export type { MobileModalProps } from './components/MobileModal';
 export type { PaginationProps, PaginationWithRenderProps } from './components/Pagination';
-export type { ProductCardProps } from './components/ProductCard';
 export type { ProductSwatchProps } from './components/ProductSwatch';
 export type { SortProps, SortWithRenderProps } from './components/Sort';
 export type { UseOptionsListProps } from './hooks/useOptionsList';

package/lib/types/types.d.ts

@@ -13,8 +13,9 @@ export type CioClientOptions = Omit<ConstructorClientOptions, 'apiKey' | 'sendTr
 export interface ItemFieldGetters {
     getPrice: (item: Item | Variation) => number;
     getSalePrice: (item: Item | Variation) => number | undefined;
+    getRolloverImage: (item: Item | Variation) => string | undefined;
     getSwatchPreview: (variation: Variation) => string;
-    getSwatches: (item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice']) => SwatchItem[] | undefined;
+    getSwatches: (item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']) => SwatchItem[] | undefined;
 }
 export interface Formatters {
     formatPrice: (price?: number) => string;
@@ -22,9 +23,65 @@ export interface Formatters {
 export interface Callbacks {
     onAddToCart?: (event: React.MouseEvent, item: Item, selectedVariation?: Variation) => void;
     onProductCardClick?: (event: React.MouseEvent, item: Item) => void;
+    onProductCardMouseEnter?: (event: React.MouseEvent, item: Item) => void;
+    onProductCardMouseLeave?: (event: React.MouseEvent, item: Item) => void;
     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;
@@ -93,6 +150,7 @@ export interface PlpContextValue {
     formatters: Formatters;
     callbacks: Callbacks;
     urlHelpers: UrlHelpers;
+    renderOverrides: RenderOverrides;
 }
 export interface PrimaryColorStyles {
     '--primary-color-h': string;
@@ -134,6 +192,7 @@ export interface SwatchItem {
     salePrice?: number;
     swatchPreview: string;
     variationId?: string;
+    rolloverImage?: string;
 }
 export interface PlpBrowseData {
     resultId: string;
@@ -150,6 +209,7 @@ export interface CioPlpProviderProps {
     formatters?: Partial<Formatters>;
     callbacks?: Partial<Callbacks>;
     itemFieldGetters?: Partial<ItemFieldGetters>;
+    renderOverrides?: Partial<RenderOverrides>;
     urlHelpers?: Partial<UrlHelpers>;
     initialSearchResponse?: SearchResponse;
     initialBrowseResponse?: GetBrowseResultsResponse;
@@ -178,6 +238,7 @@ export interface ProductInfoObject {
     itemUrl?: string;
     itemImageUrl?: string;
     variationId?: string;
+    rolloverImage?: string;
     hasSalePrice?: boolean;
 }
 export type UseProductInfoProps = {
@@ -237,6 +298,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,5 +1,6 @@
 import { ItemFieldGetters, Item, SwatchItem, Variation } from '../types';
 export declare function getPrice(item: Item | Variation): number;
 export declare function getSalePrice(item: Item | Variation): number | undefined;
-export declare function getSwatches(item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice']): SwatchItem[] | 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;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.4.7";
+declare const _default: "1.6.0";
 export default _default;

package/package.json

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