@faststore/components 3.4.4 → 3.7.0

package/dist/esm/molecules/Breadcrumb/BreadcrumbBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbBase.js","sourceRoot":"","sources":["../../../../src/molecules/Breadcrumb/BreadcrumbBase.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BreadcrumbBase.js","sourceRoot":"","sources":["../../../../src/molecules/Breadcrumb/BreadcrumbBase.tsx"],"names":[],"mappings":"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"}

package/dist/esm/organisms/SKUMatrix/SKUMatrix.d.ts

@@ -0,0 +1,9 @@
+import React, { HTMLAttributes } from 'react';
+export interface SKUMatrixProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const SKUMatrix: React.ForwardRefExoticComponent<SKUMatrixProps & React.RefAttributes<HTMLDivElement>>;
+export default SKUMatrix;

package/dist/esm/organisms/SKUMatrix/SKUMatrix.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import SKUMatrixProvider from './provider/SKUMatrixProvider';
+const SKUMatrix = forwardRef(function SKUMatrix({ testId = 'fs-sku-matrix', children, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-sku-matrix": true, "data-testid": testId, ...otherProps },
+        React.createElement(SKUMatrixProvider, null, children)));
+});
+export default SKUMatrix;
+//# sourceMappingURL=SKUMatrix.js.map

package/dist/esm/organisms/SKUMatrix/SKUMatrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SKUMatrix.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrix.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AACzD,OAAO,iBAAiB,MAAM,8BAA8B,CAAA;AAS5D,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,MAAM,GAAG,eAAe,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,6CAAkC,MAAM,KAAM,UAAU;QACnE,oBAAC,iBAAiB,QAAE,QAAQ,CAAqB,CAC7C,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/esm/organisms/SKUMatrix/SKUMatrixSidebar.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { PriceFormatter } from '../../atoms/Price';
+import { SlideOverProps } from '../SlideOver';
+interface VariationProductColumn {
+    name: string;
+    additionalColumns: Array<{
+        label: string;
+        value: string;
+    }>;
+    availability: {
+        label: string;
+        stockDisplaySettings: 'showStockQuantity' | 'showAvailability';
+    };
+    price: number;
+    quantitySelector: number;
+}
+export interface SKUMatrixSidebarProps extends Omit<SlideOverProps, 'isOpen' | 'setIsOpen' | "fade"> {
+    /**
+     * Title for the SKUMatrixSidebar component.
+     */
+    title?: string;
+    /**
+     * Represents the variations products to building the table.
+     */
+    columns: VariationProductColumn;
+    /**
+     * Properties related to the 'add to cart' button
+     */
+    buyProps: {
+        'data-testid': string;
+        'data-sku': string;
+        'data-seller': string;
+        onClick(e: React.MouseEvent<HTMLButtonElement>): void;
+    };
+    /**
+     * Formatter function that transforms the raw price value and render the result.
+     */
+    formatter?: PriceFormatter;
+    /**
+     * Check if some result is still loading before render the result.
+     */
+    loading?: boolean;
+}
+declare function SKUMatrixSidebar({ direction, title, overlayProps, size, children, columns, buyProps: { onClick: buyButtonOnClick, ...buyProps }, loading, formatter, ...otherProps }: SKUMatrixSidebarProps): React.JSX.Element;
+export default SKUMatrixSidebar;

package/dist/esm/organisms/SKUMatrix/SKUMatrixSidebar.js

@@ -0,0 +1,90 @@
+import Image from 'next/image';
+import React, { useMemo } from 'react';
+import { Badge, Button, QuantitySelector, Skeleton } from '../..';
+import Price from '../../atoms/Price';
+import Icon from '../../atoms/Icon';
+import { useFadeEffect, useSKUMatrix, useUI } from '../../hooks';
+import { Table, TableBody, TableCell, TableHead, TableRow, } from '../../molecules/Table';
+import SlideOver, { SlideOverHeader } from '../SlideOver';
+function SKUMatrixSidebar({ direction = 'rightSide', title, overlayProps, size = 'partial', children, columns, buyProps: { onClick: buyButtonOnClick, ...buyProps }, loading, formatter, ...otherProps }) {
+    const { isOpen, setIsOpen, setAllVariantProducts, allVariantProducts, onChangeQuantityItem, } = useSKUMatrix();
+    const { pushToast } = useUI();
+    const { fade } = useFadeEffect();
+    const cartDetails = useMemo(() => {
+        return allVariantProducts.reduce((acc, product) => ({
+            amount: acc.amount + product.selectedCount,
+            subtotal: acc.subtotal + product.selectedCount * product.price,
+        }), { amount: 0, subtotal: 0 });
+    }, [allVariantProducts]);
+    function resetQuantityItems() {
+        setAllVariantProducts((prev) => prev.map((item) => ({ ...item, quantity: 0 })));
+    }
+    function onClose() {
+        resetQuantityItems();
+        setIsOpen(false);
+    }
+    function handleAddToCart(e) {
+        buyButtonOnClick(e);
+        onClose();
+    }
+    const totalColumnsSkeletonLength = Object.keys(columns).filter((v) => v !== 'additionalColumns').length +
+        (columns.additionalColumns?.length ?? 0);
+    return (React.createElement(SlideOver, { "data-fs-sku-matrix-sidebar": true, size: size, direction: direction, overlayProps: overlayProps, isOpen: isOpen, fade: fade, ...otherProps },
+        React.createElement(SlideOverHeader, { onClose: onClose },
+            React.createElement("h2", { "data-fs-sku-matrix-sidebar-title": true }, title)),
+        children,
+        React.createElement(Table, { variant: "bordered" },
+            React.createElement(TableHead, null,
+                React.createElement(TableRow, null,
+                    React.createElement(TableCell, { align: "left", variant: "header", scope: "col" }, columns.name),
+                    columns.additionalColumns?.map(({ label, value }) => (React.createElement(TableCell, { key: value, align: "left", variant: "header", scope: "col" }, label))),
+                    React.createElement(TableCell, { align: "left", variant: "header", scope: "col" }, columns.availability.label),
+                    React.createElement(TableCell, { align: "right", variant: "header", scope: "col" }, columns.price),
+                    React.createElement(TableCell, { align: "left", variant: "header", scope: "col" }, columns.quantitySelector))),
+            React.createElement(TableBody, null, loading ? (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => {
+                return (React.createElement(TableRow, { key: `table-row-${index}` }, Array.from({
+                    length: totalColumnsSkeletonLength,
+                }).map((_, index) => {
+                    return (React.createElement(TableCell, { key: `table-cell-${index}` },
+                        React.createElement("span", null,
+                            React.createElement(Skeleton, { key: index, size: { width: '100%', height: '30px' } }))));
+                })));
+            }))) : (React.createElement(React.Fragment, null, allVariantProducts.map((variantProduct) => (React.createElement(TableRow, { key: `${variantProduct.name}-${variantProduct.id}` },
+                React.createElement(TableCell, { "data-fs-sku-matrix-sidebar-cell-image": true, align: "left" },
+                    React.createElement(Image, { src: variantProduct.image.url, alt: variantProduct.image.alternateName, width: 48, height: 48 }),
+                    variantProduct.name),
+                columns.additionalColumns?.map(({ value }) => (React.createElement(TableCell, { key: `${variantProduct.name}-${variantProduct.id}-${value}`, align: "left" }, variantProduct.specifications[value.toLowerCase()]))),
+                React.createElement(TableCell, { align: "left" },
+                    columns.availability.stockDisplaySettings ===
+                        'showAvailability' && (React.createElement(Badge, { variant: variantProduct.availability === 'outOfStock'
+                            ? 'warning'
+                            : 'success' }, variantProduct.availability === 'outOfStock'
+                        ? 'Out of stock'
+                        : 'Available')),
+                    columns.availability.stockDisplaySettings ===
+                        'showStockQuantity' && variantProduct.inventory),
+                React.createElement(TableCell, { align: "right" },
+                    React.createElement("div", { "data-fs-sku-matrix-sidebar-table-price": true },
+                        React.createElement(Price, { value: variantProduct.price, variant: "spot", formatter: formatter }))),
+                React.createElement(TableCell, { align: "right", "data-fs-sku-matrix-sidebar-table-cell-quantity-selector": true },
+                    React.createElement("div", { "data-fs-sku-matrix-sidebar-table-action": true },
+                        React.createElement(QuantitySelector, { min: 0, max: variantProduct.inventory, disabled: !variantProduct.inventory ||
+                                variantProduct.availability === 'outOfStock', initial: variantProduct.selectedCount, onChange: (value) => onChangeQuantityItem(variantProduct.id, value), onValidateBlur: (min, maxValue, quantity) => {
+                                pushToast({
+                                    title: 'Invalid quantity!',
+                                    message: `The quantity you entered is outside the range of ${min} to ${maxValue}. The quantity was set to ${quantity}.`,
+                                    status: 'INFO',
+                                    icon: (React.createElement(Icon, { name: "CircleWavyWarning", width: 30, height: 30 })),
+                                });
+                            } })))))))))),
+        React.createElement("footer", { "data-fs-sku-matrix-sidebar-footer": true },
+            React.createElement("div", null,
+                React.createElement("p", null,
+                    cartDetails.amount,
+                    " ",
+                    cartDetails.amount !== 1 ? 'Items' : 'Item'),
+                React.createElement(Price, { value: cartDetails.subtotal, variant: "spot", formatter: formatter })),
+            React.createElement(Button, { variant: "primary", disabled: !cartDetails.amount, onClick: handleAddToCart, ...buyProps }, "Add to Cart"))));
+}
+export default SKUMatrixSidebar;
+//# sourceMappingURL=SKUMatrixSidebar.js.map

package/dist/esm/organisms/SKUMatrix/SKUMatrixSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SKUMatrixSidebar.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrixSidebar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/organisms/SKUMatrix/SKUMatrixTrigger.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ButtonProps } from '../../atoms/Button';
+export type SKUMatrixTriggerProps = ButtonProps;
+declare const SKUMatrixTrigger: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default SKUMatrixTrigger;

package/dist/esm/organisms/SKUMatrix/SKUMatrixTrigger.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Button from '../../atoms/Button';
+import { useSKUMatrix } from '../../hooks';
+const SKUMatrixTrigger = forwardRef(function SKUMatrixTrigger({ children, variant = 'secondary', onClick, ...otherProps }, ref) {
+    const { setIsOpen } = useSKUMatrix();
+    return (React.createElement(Button, { ref: ref, variant: variant, onClick: (event) => {
+            setIsOpen(true);
+            onClick?.(event);
+        }, ...otherProps }, children));
+});
+export default SKUMatrixTrigger;
+//# sourceMappingURL=SKUMatrixTrigger.js.map

package/dist/esm/organisms/SKUMatrix/SKUMatrixTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SKUMatrixTrigger.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrixTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAI1C,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CACvB,EAAE,QAAQ,EAAE,OAAO,GAAG,WAAW,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAC3D,GAAG;IAEH,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,CAAA;IAEpC,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,SAAS,CAAC,IAAI,CAAC,CAAA;YACf,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC,KACG,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/esm/organisms/SKUMatrix/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './SKUMatrix';
+export type { SKUMatrixProps } from './SKUMatrix';
+export { default as SKUMatrixTrigger } from './SKUMatrixTrigger';
+export type { SKUMatrixTriggerProps } from './SKUMatrixTrigger';
+export { default as SKUMatrixSidebar } from './SKUMatrixSidebar';
+export type { SKUMatrixSidebarProps } from './SKUMatrixSidebar';

package/dist/esm/organisms/SKUMatrix/index.js

@@ -0,0 +1,4 @@
+export { default } from './SKUMatrix';
+export { default as SKUMatrixTrigger } from './SKUMatrixTrigger';
+export { default as SKUMatrixSidebar } from './SKUMatrixSidebar';
+//# sourceMappingURL=index.js.map

package/dist/esm/organisms/SKUMatrix/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAGrC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/esm/organisms/SKUMatrix/provider/SKUMatrixProvider.d.ts

@@ -0,0 +1,49 @@
+import React, { SetStateAction } from 'react';
+import type { ReactNode } from 'react';
+interface IAllVariantProducts {
+    id: string;
+    name: string;
+    image: {
+        url: string;
+        alternateName: string;
+    };
+    inventory: number;
+    availability: string;
+    price: number;
+    listPrice: number;
+    priceWithTaxes: number;
+    listPriceWithTaxes: number;
+    specifications: Record<string, string>;
+    selectedCount: number;
+    offers: {
+        highPrice: number;
+        lowPrice: number;
+        lowPriceWithTaxes: number;
+        offerCount: number;
+        priceCurrency: string;
+        offers: Array<{
+            listPrice: number;
+            listPriceWithTaxes: number;
+            sellingPrice: number;
+            priceCurrency: string;
+            price: number;
+            priceWithTaxes: number;
+            priceValidUntil: string;
+            itemCondition: string;
+            availability: string;
+            quantity: number;
+        }>;
+    };
+}
+export interface SKUMatrixProviderContextValue {
+    isOpen: boolean;
+    allVariantProducts: IAllVariantProducts[];
+    setAllVariantProducts(items: SetStateAction<IAllVariantProducts[]>): void;
+    onChangeQuantityItem(id: string, value: number): IAllVariantProducts[];
+    setIsOpen(value: boolean): void;
+}
+export declare const SKUMatrixContext: React.Context<SKUMatrixProviderContextValue | null>;
+declare function SKUMatrixProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+export default SKUMatrixProvider;

package/dist/esm/organisms/SKUMatrix/provider/SKUMatrixProvider.js

@@ -0,0 +1,24 @@
+import React, { createContext, useCallback, useState } from 'react';
+export const SKUMatrixContext = createContext(null);
+function SKUMatrixProvider({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [allVariantProducts, setAllVariantProducts] = useState([]);
+    const onChangeQuantityItem = useCallback((id, value) => {
+        const data = [...allVariantProducts];
+        const matchedSKU = data.find((item) => item.id === id);
+        if (matchedSKU) {
+            matchedSKU.selectedCount = value;
+        }
+        setAllVariantProducts(data);
+        return data;
+    }, [allVariantProducts]);
+    return (React.createElement(SKUMatrixContext.Provider, { value: {
+            isOpen,
+            allVariantProducts,
+            setAllVariantProducts,
+            onChangeQuantityItem,
+            setIsOpen,
+        } }, children));
+}
+export default SKUMatrixProvider;
+//# sourceMappingURL=SKUMatrixProvider.js.map

package/dist/esm/organisms/SKUMatrix/provider/SKUMatrixProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SKUMatrixProvider.js","sourceRoot":"","sources":["../../../../../src/organisms/SKUMatrix/provider/SKUMatrixProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAmB,MAAM,OAAO,CAAA;AA+DpF,MAAM,CAAC,MAAM,gBAAgB,GAC3B,aAAa,CAAuC,IAAI,CAAC,CAAA;AAE3D,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAA2B;IAC9D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACpD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAE1D,EAAE,CAAC,CAAA;IAEL,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,EAAU,EAAE,KAAa,EAAE,EAAE;QAC5B,MAAM,IAAI,GAAG,CAAC,GAAG,kBAAkB,CAAC,CAAA;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;QAEtD,IAAG,UAAU,EAAE;YACb,UAAU,CAAC,aAAa,GAAG,KAAK,CAAA;SACjC;QAED,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAE3B,OAAO,IAAI,CAAA;IACb,CAAC,EACD,CAAC,kBAAkB,CAAC,CACrB,CAAA;IAED,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;YACL,MAAM;YACN,kBAAkB;YAClB,qBAAqB;YACrB,oBAAoB;YACpB,SAAS;SACV,IAEA,QAAQ,CACiB,CAC7B,CAAA;AACH,CAAC;AAED,eAAe,iBAAiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "3.4.4",
+  "version": "3.7.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -35,8 +35,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@faststore/eslint-config": "^3.4.4",
-    "@faststore/shared": "^3.4.4",
+    "@faststore/eslint-config": "^3.5.0",
+    "@faststore/shared": "^3.5.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.3.0",
     "@types/jest-axe": "^3.5.9",
@@ -52,5 +52,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "7e548f73d188d00ea1883b1bdecc625ba719b75f"
+  "gitHead": "b692b179d39c24f590083cc0a1fdaaa779aa6dd9"
 }

package/src/hooks/index.ts

@@ -2,6 +2,7 @@ export { default as UIProvider, Toast as ToastProps, useUI } from './UIProvider'
 export { useFadeEffect } from './useFadeEffect'
 export { useTrapFocus } from './useTrapFocus'
 export { useSearch } from './useSearch'
+export { useSKUMatrix } from './useSKUMatrix'
 export { useScrollDirection } from './useScrollDirection'
 export { useSlider } from './useSlider'
 export type {
@@ -11,5 +12,3 @@ export type {
   SlideDirection,
 } from './useSlider'
 export { useSlideVisibility } from './useSlideVisibility'
-
-

package/src/hooks/useSKUMatrix.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react'
+
+import { SKUMatrixContext } from '../organisms/SKUMatrix/provider/SKUMatrixProvider'
+
+export function useSKUMatrix() {
+  const context = useContext(SKUMatrixContext)
+
+  if (!context) {
+    throw new Error(
+      'Do not use SKUMatrix components outside the SKUMatrix context.'
+    )
+  }
+
+  return context
+}

package/src/index.ts

@@ -360,3 +360,14 @@ export type {
   SlideOverProps,
   SlideOverHeaderProps,
 } from './organisms/SlideOver'
+
+export {
+  default as SKUMatrix,
+  SKUMatrixTrigger,
+  SKUMatrixSidebar,
+} from './organisms/SKUMatrix'
+export type {
+  SKUMatrixProps,
+  SKUMatrixTriggerProps,
+  SKUMatrixSidebarProps
+} from './organisms/SKUMatrix'

package/src/molecules/Breadcrumb/BreadcrumbBase.tsx

@@ -1,19 +1,45 @@
 import React, {
   cloneElement,
+  ComponentType,
   forwardRef,
+  lazy,
+  PropsWithChildren,
   ReactElement,
   ReactNode,
+  Suspense,
   useCallback,
 } from 'react'
 import Icon from '../../atoms/Icon'
 import Link from '../../atoms/Link'
-import Dropdown, {
-  DropdownButton,
-  DropdownItem,
-  DropdownMenu,
+import type {
+  DropdownButtonProps,
+  DropdownItemProps,
+  DropdownMenuProps,
+  DropdownProps,
 } from '../Dropdown'
 import BreadcrumbPure, { BreadcrumbPureProps } from './BreadcrumbPure'
 
+const Dropdown = lazy<ComponentType<PropsWithChildren<DropdownProps>>>(
+  () => import(/* webpackChunkName: "Dropdown" */ '../Dropdown/Dropdown')
+)
+
+const DropdownButton = lazy<ComponentType<DropdownButtonProps>>(
+  () =>
+    import(
+      /* webpackChunkName: "DropdownButton" */ '../Dropdown/DropdownButton'
+    )
+)
+
+const DropdownMenu = lazy<ComponentType<DropdownMenuProps>>(
+  () =>
+    import(/* webpackChunkName: "DropdownMenu" */ '../Dropdown/DropdownMenu')
+)
+
+const DropdownItem = lazy<ComponentType<DropdownItemProps>>(
+  () =>
+    import(/* webpackChunkName: "DropdownItem" */ '../Dropdown/DropdownItem')
+)
+
 type ItemElement = {
   item: string
   name: string
@@ -137,26 +163,28 @@ const BreadcrumbBase = forwardRef<HTMLDivElement, BreadcrumbBaseProps>(
           breadcrumbLink({ itemProps: firstItem, collapsed: false })}
 
         {collapseBreadcrumb && (
-          <Dropdown>
-            <DropdownButton
-              aria-label="View More"
-              data-fs-breadcrumb-dropdown-button
-              size="small"
-            >
-              {dropdownButtonIcon}
-            </DropdownButton>
-            <DropdownMenu data-fs-breadcrumb-dropdown-menu>
-              {mediumItems.map((item) => (
-                <DropdownItem
-                  data-fs-breadcrumb-dropdown-item
-                  key={String(item.position)}
-                  icon={collapsedItemsIcon}
-                >
-                  {breadcrumbLink({ itemProps: item, collapsed: true })}
-                </DropdownItem>
-              ))}
-            </DropdownMenu>
-          </Dropdown>
+          <Suspense>
+            <Dropdown>
+              <DropdownButton
+                aria-label="View More"
+                data-fs-breadcrumb-dropdown-button
+                size="small"
+              >
+                {dropdownButtonIcon}
+              </DropdownButton>
+              <DropdownMenu data-fs-breadcrumb-dropdown-menu>
+                {mediumItems.map((item) => (
+                  <DropdownItem
+                    data-fs-breadcrumb-dropdown-item
+                    key={String(item.position)}
+                    icon={collapsedItemsIcon}
+                  >
+                    {breadcrumbLink({ itemProps: item, collapsed: true })}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+          </Suspense>
         )}
 
         {collapseBreadcrumb &&

package/src/organisms/SKUMatrix/SKUMatrix.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import SKUMatrixProvider from './provider/SKUMatrixProvider'
+
+export interface SKUMatrixProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const SKUMatrix = forwardRef<HTMLDivElement, SKUMatrixProps>(function SKUMatrix(
+  { testId = 'fs-sku-matrix', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-sku-matrix data-testid={testId} {...otherProps}>
+      <SKUMatrixProvider>{children}</SKUMatrixProvider>
+    </div>
+  )
+})
+
+export default SKUMatrix