@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -1,5 +1,7 @@
+import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { motion } from 'framer-motion';
+// Shared spacing between chips
 export const CHIP_GAP = 3;
 export const CenterIconWrapper = styled(motion.div)(({ theme }) => ({
     display: 'flex',
@@ -14,10 +16,12 @@ export const CenterIconWrapper = styled(motion.div)(({ theme }) => ({
     fontSize: '12px',
     color: theme.palette.text.primary,
 }));
+// Wrapper that applies the horizontal shift driven by a motion value
 export const CenterShiftWrapper = styled(motion.div)(() => ({
     display: 'inline-flex',
 }));
 export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
+    // Make wrapper take no layout width; spacing fully controlled by transform
     position: 'static',
     display: 'inline-flex',
     alignItems: 'center',
@@ -29,10 +33,10 @@ export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
     fontSize: '10px',
     lineHeight: 1,
     color: theme.palette.text.secondary,
-    fontWeight: 'bold',
     userSelect: 'none',
 }));
 export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
+    // Make wrapper take no layout width; spacing fully controlled by transform
     position: 'static',
     display: 'inline-flex',
     alignItems: 'center',
@@ -44,11 +48,16 @@ export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
     fontSize: '10px',
     lineHeight: 1,
     color: theme.palette.text.secondary,
-    fontWeight: 'bold',
     userSelect: 'none',
 }));
 export const ExpandedSection = styled(motion.div)(({ side }) => (Object.assign(Object.assign(Object.assign({ position: 'absolute', display: 'flex', alignItems: 'center' }, (side === 'left' ? { right: '100%', flexDirection: 'row-reverse', transformOrigin: 'right center' } : {})), (side === 'right' ? { left: '100%', flexDirection: 'row', transformOrigin: 'left center' } : {})), { top: '50%', transform: 'translateY(-50%)', gap: 0, pointerEvents: 'auto', overflow: 'visible' })));
-export const HoverBridge = styled('div')(({ side }) => (Object.assign(Object.assign({ position: 'absolute', top: 0, bottom: 0 }, (side === 'left' ? { right: '100%' } : { left: '100%' })), { pointerEvents: 'auto', background: 'transparent' })));
+// Invisible hover overlays to bridge gaps between chips
+export const HoverBridge = styled('div')(({ side }) => (Object.assign(Object.assign({ position: 'absolute', top: 0, bottom: 0 }, (side === 'left' ? { right: '100%' } : { left: '100%' })), { 
+    // width will be supplied inline via style prop
+    pointerEvents: 'auto', 
+    // transparent but present for hit-testing
+    background: 'transparent' })));
+// --- Peek chips (requested style) ---
 export const PeekContainer = styled(motion.div)(() => ({
     position: 'relative',
     display: 'inline-flex',
@@ -70,39 +79,47 @@ const baseChipStyles = (theme) => ({
     fontSize: 12,
     boxSizing: 'border-box',
     whiteSpace: 'nowrap',
+    // allow chip to grow with content
     overflow: 'visible',
 });
 export const CenterChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'relative', zIndex: 2, minWidth: 24, flex: '0 0 auto', display: 'inline-flex', overflow: 'hidden', willChange: 'transform' })));
+// Static part of the center icon container
 export const CenterContent = styled(motion.span)(() => ({
     display: 'inline-flex',
     alignItems: 'center',
     transform: 'translateZ(0)',
 }));
+// Container that grows in width to reveal the expandable content
 export const ExpandableContainer = styled(motion.span)(({ theme }) => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     boxSizing: 'border-box',
     willChange: 'width',
+    // Style to look like a seamless continuation of the center chip
     border: `1px solid ${theme.palette.divider}`,
-    borderLeft: 'none',
-    borderRadius: '0 12px 12px 0',
     backgroundColor: theme.palette.background.paper,
     height: '24px',
     alignItems: 'center',
+    paddingInline: '0px', // Match center chip padding
 }));
+// Inner content of the expandable area
 export const ExpandableInner = styled(motion.span)(() => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
-    paddingLeft: '1px',
-    paddingRight: '8px',
     alignItems: 'center',
     height: '100%',
 }));
-export const LeftPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', left: 0, zIndex: 1, pointerEvents: 'none', minWidth: 24, paddingInline: 0 })));
-export const RightPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', right: 0, zIndex: 1, pointerEvents: 'none', minWidth: 24, paddingInline: 0 })));
+export const LeftPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', left: 0, zIndex: 1, pointerEvents: 'none', 
+    // ensure circular end even without content
+    minWidth: 24, paddingInline: 0 })));
+export const RightPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', right: 0, zIndex: 1, pointerEvents: 'none', 
+    // ensure circular end even without content
+    minWidth: 24, paddingInline: 0 })));
+// Chip for expanded icons (left/right lists)
 export const ExpandChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { minWidth: 24, flex: '0 0 auto', display: 'inline-flex' })));
-export const tableCellSx = {
+// Styles applied to the containing TableCell
+export const ChipsContainer = styled(Box)(() => ({
     position: 'relative',
     overflow: 'visible',
     zIndex: 101,
@@ -110,4 +127,4 @@ export const tableCellSx = {
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: '20px',
-};
+}));

package/build/components/RightLeftExpandingCenterChip/type.d.ts

@@ -4,7 +4,8 @@ export interface RightLeftExpandingCenterChipProps {
     leftIcons?: React.ReactNode[];
     rightIcons?: React.ReactNode[];
     centerIcon: React.ReactNode;
-    expandableCenter?: React.ReactNode;
+    expandableCenterRight?: React.ReactNode;
+    expandableCenterLeft?: React.ReactNode;
     sx?: SxProps;
     expandedZIndex?: number;
 }

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.d.ts

@@ -1,12 +1,18 @@
 import { type ReactNode } from 'react';
+/**
+ * Hook: useRightLeftExpandingCenterChip
+ * Encapsulates hover logic, measurement (anchors, chip widths, expandable width),
+ * and motion values for the RightLeftExpandingCenterChip component.
+ */
 export declare const DEFAULT_CHIP_MIN_WIDTH = 24;
 export type UseRightLeftExpandingCenterChipArgs = {
     leftIcons: ReactNode[];
     rightIcons: ReactNode[];
     centerIcon: ReactNode;
-    expandableCenter?: ReactNode;
+    expandableCenterRight?: ReactNode;
+    expandableCenterLeft?: ReactNode;
 };
-export declare function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }: UseRightLeftExpandingCenterChipArgs): {
+export declare function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, }: UseRightLeftExpandingCenterChipArgs): {
     isHovering: boolean;
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
@@ -21,11 +27,15 @@ export declare function useRightLeftExpandingCenterChip({ leftIcons, rightIcons,
     rightChipRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
     leftOffsets: number[];
     rightOffsets: number[];
-    expandableInnerRef: import("react").MutableRefObject<HTMLSpanElement | null>;
-    expandableWidth: number;
-    expandedMV: import("framer-motion").MotionValue<number>;
+    expandableRightInnerRef: import("react").MutableRefObject<HTMLSpanElement | null>;
+    expandableLeftInnerRef: import("react").MutableRefObject<HTMLSpanElement | null>;
+    expandableRightWidth: number;
+    expandableLeftWidth: number;
+    expandedRightMV: import("framer-motion").MotionValue<number>;
+    expandedLeftMV: import("framer-motion").MotionValue<number>;
     shiftX: import("framer-motion").MotionValue<number>;
     rightShift: number;
+    leftShift: number;
     leftHoverWidth: number;
     rightHoverWidth: number;
 };

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js

@@ -1,21 +1,36 @@
 import { useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import { animate, useMotionValue } from 'framer-motion';
 import { CHIP_GAP } from './style';
+/**
+ * Hook: useRightLeftExpandingCenterChip
+ * Encapsulates hover logic, measurement (anchors, chip widths, expandable width),
+ * and motion values for the RightLeftExpandingCenterChip component.
+ */
 export const DEFAULT_CHIP_MIN_WIDTH = 24;
-export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }) {
+export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, }) {
+    // =================================
+    // State (move all state to the top)
+    // =================================
     const [isHovering, setIsHovering] = useState(false);
     const [anchors, setAnchors] = useState({ left: 0, right: 0 });
     const [leftWidths, setLeftWidths] = useState([]);
     const [rightWidths, setRightWidths] = useState([]);
-    const [expandableWidth, setExpandableWidth] = useState(0);
+    const [expandableRightWidth, setExpandableRightWidth] = useState(0);
+    const [expandableLeftWidth, setExpandableLeftWidth] = useState(0);
+    // ======================
+    // Refs (DOM and timers)
+    // ======================
     const hoverTimeoutRef = useRef(null);
     const centerWrapRef = useRef(null);
     const centerContentRef = useRef(null);
     const centerChipRef = useRef(null);
     const leftChipRefs = useRef([]);
     const rightChipRefs = useRef([]);
-    const expandableInnerRef = useRef(null);
+    const expandableRightInnerRef = useRef(null);
+    const expandableLeftInnerRef = useRef(null);
+    // rAF id for resize throttling
     const resizeRaf = useRef(null);
+    // Small helpers to avoid unnecessary state updates
     const arraysEqual = useCallback((a, b) => {
         if (a === b)
             return true;
@@ -29,8 +44,16 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
     const anchorsEqual = useCallback((a, b) => {
         return a.left === b.left && a.right === b.right;
     }, []);
-    const expandedMV = useMotionValue(0);
+    // ======================
+    // Motion values
+    // ======================
+    const expandedRightMV = useMotionValue(0);
+    const expandedLeftMV = useMotionValue(0);
+    // Center icon stays fixed - no shift needed
     const shiftX = useMotionValue(0);
+    // ======================
+    // Computed values
+    // ======================
     const leftOffsets = useMemo(() => {
         if (!leftWidths.length)
             return [];
@@ -55,20 +78,31 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         }
         return acc;
     }, [rightWidths]);
-    const rightShift = isHovering && expandableCenter ? expandableWidth + CHIP_GAP : 0;
-    const maxRightShift = expandableCenter ? expandableWidth + CHIP_GAP : 0;
+    // Right icons shift to account for expandable content without gap
+    const rightShift = isHovering && expandableCenterRight ? expandableRightWidth : 0;
+    // Left icons shift to account for expandable content without gap
+    const leftShift = isHovering && expandableCenterLeft ? expandableLeftWidth : 0;
+    // Predict max right shift even when not hovering to size hover zone generously
+    const maxRightShift = expandableCenterRight ? expandableRightWidth : 0;
+    // ======================
+    // Callbacks
+    // ======================
     const handleMouseEnter = useCallback(() => {
         if (hoverTimeoutRef.current)
             clearTimeout(hoverTimeoutRef.current);
+        // Enter immediately to keep hover active while moving across expanded areas
         setIsHovering(true);
     }, []);
     const handleMouseLeave = useCallback(() => {
         if (hoverTimeoutRef.current)
             clearTimeout(hoverTimeoutRef.current);
+        // Delay hover off to avoid flicker when moving between center and expanded icons
         hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
     }, []);
+    // Single measurement function to batch reads and writes
     const measureAll = useCallback(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
+        // Read DOM
         const wrap = centerWrapRef.current;
         const chip = centerChipRef.current;
         const content = centerContentRef.current;
@@ -77,6 +111,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
             const wrapRect = wrap.getBoundingClientRect();
             const targetRect = (_a = (chip !== null && chip !== void 0 ? chip : content)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             if (targetRect) {
+                // Round to prevent tiny sub-pixel changes causing re-renders
                 const left = Math.round(targetRect.left - wrapRect.left);
                 const right = Math.round(targetRect.right - wrapRect.left);
                 nextAnchors = { left, right };
@@ -84,16 +119,21 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         }
         const nextLeftWidths = leftChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH));
         const nextRightWidths = rightChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH));
-        const nextExpandableWidth = (_c = (_b = expandableInnerRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
+        const nextExpandableRightWidth = (_c = (_b = expandableRightInnerRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
+        const nextExpandableLeftWidth = (_e = (_d = expandableLeftInnerRef.current) === null || _d === void 0 ? void 0 : _d.scrollWidth) !== null && _e !== void 0 ? _e : 0;
+        // Write state only if changed
         if (!anchorsEqual(anchors, nextAnchors))
             setAnchors(nextAnchors);
         if (!arraysEqual(leftWidths, nextLeftWidths))
             setLeftWidths(nextLeftWidths);
         if (!arraysEqual(rightWidths, nextRightWidths))
             setRightWidths(nextRightWidths);
-        if (expandableWidth !== nextExpandableWidth)
-            setExpandableWidth(nextExpandableWidth);
-    }, [anchors, leftWidths, rightWidths, expandableWidth, anchorsEqual, arraysEqual]);
+        if (expandableRightWidth !== nextExpandableRightWidth)
+            setExpandableRightWidth(nextExpandableRightWidth);
+        if (expandableLeftWidth !== nextExpandableLeftWidth)
+            setExpandableLeftWidth(nextExpandableLeftWidth);
+    }, [anchors, leftWidths, rightWidths, expandableRightWidth, expandableLeftWidth, anchorsEqual, arraysEqual]);
+    // rAF-throttled resize handler (memoized)
     const onResize = useCallback(() => {
         if (resizeRaf.current)
             cancelAnimationFrame(resizeRaf.current);
@@ -101,17 +141,22 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
             measureAll();
         });
     }, [measureAll]);
+    // ======================
+    // Effects
+    // ======================
     useEffect(() => {
         return () => {
             if (hoverTimeoutRef.current)
                 clearTimeout(hoverTimeoutRef.current);
         };
     }, []);
+    // Perform initial measurements (and when inputs that affect layout change) before paint
     useLayoutEffect(() => {
         measureAll();
-    }, [centerIcon, leftIcons, rightIcons, expandableCenter, measureAll]);
+    }, [centerIcon, leftIcons, rightIcons, expandableCenterRight, expandableCenterLeft, measureAll]);
+    // Window resize listener effect
     useEffect(() => {
-        onResize();
+        onResize(); // initial measurement on mount
         window.addEventListener('resize', onResize);
         return () => {
             window.removeEventListener('resize', onResize);
@@ -119,20 +164,30 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
                 cancelAnimationFrame(resizeRaf.current);
         };
     }, [onResize]);
+    // Animate right expandable content - no gap for seamless connection
     useEffect(() => {
-        const target = isHovering && expandableCenter ? expandableWidth + CHIP_GAP : 0;
-        const controls = animate(expandedMV, target, { duration: 0.2, ease: 'easeOut' });
+        const target = isHovering && expandableCenterRight ? expandableRightWidth : 0;
+        const controls = animate(expandedRightMV, target, { duration: 0.2, ease: 'easeOut' });
         return () => controls.stop();
-    }, [isHovering, expandableCenter, expandableWidth, expandedMV]);
+    }, [isHovering, expandableCenterRight, expandableRightWidth, expandedRightMV]);
+    // Animate left expandable content - no gap for seamless connection
+    useEffect(() => {
+        const target = isHovering && expandableCenterLeft ? expandableLeftWidth : 0;
+        const controls = animate(expandedLeftMV, target, { duration: 0.2, ease: 'easeOut' });
+        return () => controls.stop();
+    }, [isHovering, expandableCenterLeft, expandableLeftWidth, expandedLeftMV]);
+    // ======================
+    // Derived hover zone widths (adjusted for seamless positioning)
+    // ======================
     const leftHoverWidth = useMemo(() => {
         var _a;
         if (!leftOffsets.length)
             return 0;
         const last = leftOffsets.length - 1;
         const lastWidth = (_a = leftWidths[last]) !== null && _a !== void 0 ? _a : DEFAULT_CHIP_MIN_WIDTH;
-        const farthest = leftOffsets[last] + lastWidth / 2;
+        const farthest = leftOffsets[last] + lastWidth / 2 + leftShift;
         return farthest + CHIP_GAP;
-    }, [leftOffsets, leftWidths]);
+    }, [leftOffsets, leftWidths, leftShift]);
     const rightHoverWidth = useMemo(() => {
         var _a;
         if (!rightOffsets.length)
@@ -142,23 +197,36 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         const farthest = maxRightShift + rightOffsets[last] + lastWidth / 2;
         return farthest + CHIP_GAP;
     }, [rightOffsets, rightWidths, maxRightShift]);
+    // ======================
+    // Public API
+    // ======================
     return {
+        // hover state/handlers
         isHovering,
         handleMouseEnter,
         handleMouseLeave,
+        // anchors/refs
         centerWrapRef,
         centerContentRef,
         centerChipRef,
         anchors,
+        // chip measurement/offsets
         leftChipRefs,
         rightChipRefs,
         leftOffsets,
         rightOffsets,
-        expandableInnerRef,
-        expandableWidth,
-        expandedMV,
+        // expandable area
+        expandableRightInnerRef,
+        expandableLeftInnerRef,
+        expandableRightWidth,
+        expandableLeftWidth,
+        // motion values
+        expandedRightMV,
+        expandedLeftMV,
         shiftX,
         rightShift,
+        leftShift,
+        // hover zone widths
         leftHoverWidth,
         rightHoverWidth,
     };

package/build/components/SalesChannelFilter/SalesChannelFilter.d.ts

@@ -0,0 +1,11 @@
+import { OptionsListItem } from '../../types/index.js';
+interface SalesChannelFilterProps {
+    onSalesChannelChange: (salesChannels: OptionsListItem[] | undefined) => void;
+    onSearchChange: (searchValue: string) => void;
+    filteredOptions: OptionsListItem[];
+    isLoading: boolean;
+    initialSalesChannels?: OptionsListItem[];
+    initialSalesChannelsSearch?: string;
+}
+export default function SalesChannelFilter({ onSalesChannelChange, onSearchChange, filteredOptions, isLoading, initialSalesChannels, initialSalesChannelsSearch, }: Readonly<SalesChannelFilterProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/SalesChannelFilter/SalesChannelFilter.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import { MenuItem, Skeleton } from '../index.js';
+import { FilterWrapper, ListWrapper, SearchIconWrapper } from './style';
+import { InputStyled } from '../SelectWithSearch';
+import { closeXIcon, searchIcon } from '../../constants/index.js';
+export default function SalesChannelFilter({ onSalesChannelChange, onSearchChange, filteredOptions, isLoading, initialSalesChannels, initialSalesChannelsSearch, }) {
+    const salesChannels = useMemo(() => {
+        return initialSalesChannels || [];
+    }, [initialSalesChannels]);
+    const [searchValue, setSearchValue] = useState(initialSalesChannelsSearch || '');
+    const checkIsSelected = (salesChannelId) => salesChannels.some((channel) => channel.id === salesChannelId);
+    const isAllSelected = useMemo(() => {
+        return (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) === filteredOptions.length && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0;
+    }, [salesChannels, filteredOptions]);
+    const isOnlyBlankSelected = useMemo(() => {
+        return (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.some((channel) => channel.id === 'blank')) && (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) === 1;
+    }, [salesChannels]);
+    const isSearchDisabled = useMemo(() => {
+        return (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) === 0 || isOnlyBlankSelected;
+    }, [isOnlyBlankSelected, salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length]);
+    return (_jsxs(FilterWrapper, { children: [_jsx(InputStyled, { placeholder: 'Search', endAdornment: !isSearchDisabled && (_jsx(SearchIconWrapper, Object.assign({ sx: Object.assign({}, (searchValue && { backgroundColor: '#F2F2F2' })) }, { children: _jsx(Box, { component: "img", src: searchValue ? closeXIcon : searchIcon, alt: "search", onClick: () => {
+                            setSearchValue('');
+                            onSearchChange('');
+                        }, sx: Object.assign({}, (searchValue && {
+                            backgroundColor: '#F2F2F2',
+                            borderRadius: '4px',
+                            width: '8px',
+                            height: '8px',
+                        })) }) }))), disabled: isSearchDisabled, onChange: (e) => {
+                    setSearchValue(e.target.value);
+                    onSearchChange(e.target.value);
+                }, value: searchValue, disableUnderline: true, sx: Object.assign({ cursor: 'default', width: '100%', border: '1px solid #F2F2F2', backgroundColor: isSearchDisabled ? '#F8F8F8' : '#fff' }, (searchValue && { cursor: 'pointer' })) }), _jsx(ListWrapper, { children: isLoading ? (Array.from({ length: 9 }).map((_, index) => _jsx(Skeleton, { variant: "rectangular", width: "100%", height: 24 }, index))) : (_jsxs(_Fragment, { children: [_jsx(MenuItem, Object.assign({ sx: {
+                                backgroundColor: '#F8F8F8',
+                                fontWeight: 600,
+                                padding: '4px 8px',
+                                color: '#1F88D0',
+                                gap: '0px',
+                            }, isSelected: isAllSelected, isIndeterminate: !isAllSelected && ((salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) || 0) > 0, onClick: (e) => {
+                                e.stopPropagation();
+                                onSalesChannelChange(isAllSelected ? [] : filteredOptions);
+                            } }, { children: isAllSelected ? 'Deselect All' : 'Select All' })), filteredOptions.map((channel) => {
+                            var _a;
+                            return (_jsx(MenuItem, Object.assign({ isSelected: checkIsSelected(channel.id), onClick: (e) => {
+                                    e.stopPropagation();
+                                    const isSelected = checkIsSelected(channel.id);
+                                    const newSalesChannels = isSelected ? salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.filter((c) => c.id !== channel.id) : [...(salesChannels !== null && salesChannels !== void 0 ? salesChannels : []), channel];
+                                    onSalesChannelChange(newSalesChannels);
+                                }, sx: {
+                                    padding: '4px 8px',
+                                    gap: '0px',
+                                    fontWeight: 400,
+                                } }, { children: (_a = channel === null || channel === void 0 ? void 0 : channel.name) === null || _a === void 0 ? void 0 : _a.en }), channel.id));
+                        })] })) })] }));
+}

package/build/components/SalesChannelFilter/index.d.ts

@@ -0,0 +1 @@
+export { default as SalesChannelFilter } from './SalesChannelFilter';

package/build/components/SalesChannelFilter/index.js

@@ -0,0 +1 @@
+export { default as SalesChannelFilter } from './SalesChannelFilter';

package/build/components/SalesChannelFilter/style.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const FilterButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isActive?: boolean | undefined;
+}, {}, {}>;
+export declare const ListWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const FilterWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SearchIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/SalesChannelFilter/style.js

@@ -0,0 +1,29 @@
+import { Box, styled } from '@mui/material';
+export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
+        opacity: 0.7,
+    } }, (isActive && {
+    boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
+    border: `1px solid ${theme.palette.info.dark}`,
+}))));
+export const ListWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '8px',
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.common.white,
+    maxHeight: '232px',
+    overflow: 'auto',
+}));
+export const FilterWrapper = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+}));
+export const SearchIconWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '13px',
+    height: '13px',
+    borderRadius: '50%',
+}));

package/build/components/ScrollLoader/ScrollLoader.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Stack from '@mui/material/Stack';
-const OFFSET = 50;
+const OFFSET = 50; // px to trigger loading before reaching full bottom
 const isNearBottom = (el, offset = OFFSET) => {
     const scrollBottom = el.scrollTop + el.clientHeight;
     const scrollHeight = el.scrollHeight;
@@ -44,6 +44,7 @@ const ScrollLoader = (props) => {
         el.addEventListener('scroll', handleScroll);
         return () => el.removeEventListener('scroll', handleScroll);
     }, [handleScroll]);
+    // Initially .. auto load the data if the scrollable container allows
     useEffect(() => {
         const el = containerRef.current;
         if (!el || loading || initialChecked)