@commonsku/styles 1.17.7 → 1.17.9

package/dist/index.d.ts

@@ -2891,26 +2891,26 @@ interface BaseSortByHeaderGroup<D extends object = {}> extends HeaderGroup<D>, U
 interface Row<D extends Record<string, unknown> = Record<string, unknown>> extends UseTableRowProps<D>, UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseRowStateRowProps<D> {
 }
 
-type VirtualTableProps = {
-    columns: Column$1<object>[];
-    data: object[];
+type VirtualTableProps<RowType extends Record<string, unknown>, TableProps, TableFooterProps> = {
+    columns: readonly Column$1<RowType>[];
+    data: RowType[];
     itemSize?: (value: {
         index: number;
-        row: Row;
+        row: Row<RowType>;
     }) => number;
     height?: number;
     minWidth?: number;
     maxWidth?: number;
     defaultSort?: SortingRule<string>;
-    onClickRow?: (row?: object, index?: number, data?: {
+    onClickRow?: (row?: RowType, index?: number, data?: {
         isScrolling?: boolean;
-        cell: Cell<Record<string, unknown>, any>;
+        cell: Cell<RowType>;
         resetList: (index?: number) => void;
         toggleAllRowsExpanded: (value?: boolean | undefined) => void;
     }) => void;
     onScroll?: ((props: ListOnScrollProps) => any);
     onUpdateData?: (...args: any) => void;
-    useTableProps?: object;
+    useTableProps?: TableProps;
     tableHeaderProps?: {
         className?: string;
         style?: React__default.CSSProperties;
@@ -2919,34 +2919,30 @@ type VirtualTableProps = {
         className?: string;
         style?: React__default.CSSProperties;
     };
-    TableFooter?: (props: React__default.PropsWithChildren<{
-        [key: string]: any;
-    }>) => React__default.ReactElement;
-    customTableFooterProps?: object;
+    TableFooter?: (props: React__default.PropsWithChildren<TableFooterProps>) => React__default.ReactElement;
+    customTableFooterProps?: TableFooterProps;
     className?: string;
     hideFooter?: boolean;
     hideHeader?: boolean;
     NoRowsFound?: (props: React__default.PropsWithChildren<{
         [key: string]: any;
     }>) => React__default.ReactElement;
-    renderRowSubComponent?: (props: React__default.PropsWithChildren<{
-        [key: string]: any;
-    }>) => React__default.ReactElement;
+    renderRowSubComponent?: <P = unknown>(props: React__default.PropsWithChildren<P>) => React__default.ReactElement;
     onSort?: (value: {
-        column: BaseSortByHeaderGroup<object>;
+        column: BaseSortByHeaderGroup<RowType>;
     }) => void;
     onResize?: VoidFunction;
     rowGroupStyles?: (value: {
-        row: Row;
+        row: Row<RowType>;
         style: React__default.CSSProperties;
     }) => React__default.CSSProperties;
     rowStyles?: (value: {
-        row: Row;
+        row: Row<RowType>;
         style: React__default.CSSProperties;
     }) => React__default.CSSProperties;
     gutterSize?: number;
 };
-declare const VirtualTable: (props: VirtualTableProps) => React__default.JSX.Element;
+declare const VirtualTable: <RowType extends Record<string, unknown>, TableProps, TableFooterProps>(props: VirtualTableProps<RowType, TableProps, TableFooterProps>) => React__default.JSX.Element;
 
 declare const VirtualTableStyles: styled_components.StyledComponent<"div", any, {
     tableHeight?: string | number | undefined;
@@ -2959,10 +2955,11 @@ declare const VirtualTableStyles: styled_components.StyledComponent<"div", any,
 }, never>;
 //# sourceMappingURL=VirtualTableStyles.d.ts.map
 
-type SelectionTableProps = VirtualTableProps & {
-    onSelectRow?: (row?: object, index?: number) => void;
+type SelectionTableProps<RowType extends Record<string, unknown>, TableProps, TableFooterProps> = VirtualTableProps<RowType, TableProps, TableFooterProps> & {
+    selectedRows?: RowType[];
+    onSelectionChange?: (selectedRows: RowType[]) => void;
 };
-declare const SelectionTable: (props: SelectionTableProps) => React__default.JSX.Element;
+declare const SelectionTable: <RowType extends Record<string, unknown>, TableProps, TableFooterProps>(props: SelectionTableProps<RowType, TableProps, TableFooterProps>) => React__default.JSX.Element;
 
 type ResponsiveValue<T = string | number> = T | Array<T | null> | {
     xs?: T;
@@ -3490,6 +3487,9 @@ type SlideInIconProps = SVGIconProps & {
 };
 declare function SlideInIcon({ color, size, hover, filled, altText, ...props }: SlideInIconProps): React__default.JSX.Element;
 
+type EmptyStateArrowProps = SVGIconProps;
+declare function EmptyStateArrowIcon({ direction, altText, ...props }: EmptyStateArrowProps): React__default.JSX.Element;
+
 type TagIconProps = SVGIconProps;
 declare function TagIcon({ color, size, altText, ...props }: TagIconProps): React__default.JSX.Element;
 
@@ -3916,4 +3916,4 @@ declare const Dropzone: React__default.ForwardRefExoticComponent<Pick<React__def
     useDropzoneProps?: boolean | undefined;
 } & React__default.RefAttributes<DropzoneRef>>;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps$1 as CollapsibleProps, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps$1 as CollapsibleProps, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };

package/dist/index.mjs

@@ -2779,6 +2779,45 @@ function SlideInIcon(_a) {
         React.createElement("path", { d: "M3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999ZM3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999Z", fill: color }));
 }
 
+function EmptyStateArrowIcon(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "Up" : _b; _a.altText; var props = __rest(_a, ["direction", "altText"]);
+    var d1, d2, x1, x2, y1, y2;
+    var arrowColor = teal['30'];
+    switch (direction) {
+        case "down":
+            d1 = "m9.239 20.009 2.704.784c.037.011.077.011.114 0l2.704-.784c.164-.048.304.114.207.24l-2.818 3.68a.196.196 0 0 1-.3 0l-2.818-3.68c-.097-.125.043-.288.207-.24Z";
+            d2 = "M5.15 0c5.411 2.2 6.084 16.033 6.084 21h1.57c0-5.275 0-18.5 6.246-21H5.15Z";
+            x1 = 12.636;
+            x2 = 12.636;
+            y1 = 19.98;
+            y2 = 0;
+            break;
+        case "up":
+            d1 = "m14.761 3.991-2.704-.784a.205.205 0 0 0-.114 0L9.24 3.99c-.164.048-.304-.115-.207-.24L11.85.07a.196.196 0 0 1 .3 0l2.818 3.68c.097.126-.043.288-.207.24Z";
+            d2 = "M18.85 24c-5.411-2.2-6.084-16.033-6.084-21h-1.57c0 5.276 0 18.5-6.246 21h13.9Z";
+            x1 = 11.364;
+            x2 = 11.364;
+            y1 = 4.02;
+            y2 = 24;
+            break;
+        case "up-right":
+            d1 = "m22.406 2.203-1.173-.394a.145.145 0 0 0-.092 0l-1.173.394c-.134.044-.247-.108-.169-.227l1.266-1.91a.146.146 0 0 1 .244 0l1.265 1.91c.079.119-.035.271-.168.227Z";
+            d2 = "M6.389 23.515C16.608 15.176 21.225 7.772 21.657 1.721l-.877-.064c.357 2.992-8.819 10.581-19.247 15.372l4.856 6.486Z";
+            x1 = 21.05;
+            x2 = 14.656;
+            y1 = 2.11;
+            y2 = 12.611;
+            break;
+    }
+    return React.createElement(SVG$1, __assign({ height: 500, width: 500, viewBox: "0 0 633 633", "aria-labelledby": "Arrow" }, props),
+        React.createElement("path", { fill: arrowColor, d: d1 }),
+        React.createElement("path", { fill: "url(#a)", d: d2 }),
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: "a", x1: x1, x2: x2, y1: y1, y2: y2, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: arrowColor }),
+                React.createElement("stop", { offset: 1, stopColor: arrowColor, stopOpacity: 0 }))));
+}
+
 function TagIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c; _a.altText; var props = __rest(_a, ["color", "size", "altText"]);
     return React.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "TagIcon" }, props),
@@ -3622,7 +3661,7 @@ var LabeledIconInput = React.forwardRef(function (_a, ref) {
             }, style: __assign(__assign(__assign(__assign({}, activeStyles), errorStyles), disabledStyles), (props.style || {})), onMouseOver: function () { return setIsHovering(true); }, onMouseLeave: function () { return setIsHovering(false); } }),
             iconPosition !== 'right' ? React.createElement(InputIconLabel, { style: __assign({ marginBottom: 0 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering }, NewIcon) : null,
             React.createElement(Input, { hasIcon: true, ref: ref, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, readOnly: readOnly, required: required, style: { marginBottom: 0, }, noMargin: noMargin, error: error, disabled: disabled, onFocus: onFocus, onChange: onChange, onBlur: onBlur }),
-            iconPosition === 'right' ? React.createElement(InputIconLabel, { style: { marginBottom: 0, padding: 6, }, isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
+            iconPosition === 'right' ? React.createElement(InputIconLabel, { style: __assign({ marginBottom: 0, padding: 6 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
 });
 var CheckboxLabel = styled.label(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
 var RadioLabel = styled(CheckboxLabel)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  &&& {\n    padding-left: 32px;\n  }\n"], ["\n  &&& {\n    padding-left: 32px;\n  }\n"])));
@@ -6769,50 +6808,51 @@ var VirtualTableStyles = styled.div(templateObject_1$a || (templateObject_1$a =
 var templateObject_1$a;
 
 var SelectionTable = function (props) {
-    var columns = props.columns, onSelectRow = props.onSelectRow;
-    var _a = useState(props.data.map(function (row) { return (__assign({ selected: false }, row)); })), data = _a[0], setData = _a[1];
+    var columns = props.columns, data = props.data, selectedRows = props.selectedRows, onSelectionChange = props.onSelectionChange;
     var selectionState = useMemo(function () {
-        return !data.some(function (row) { return row.selected === false; })
-            ? 'all'
-            : data.some(function (row) { return row.selected === true; })
-                ? 'indeterminate'
-                : 'none';
-    }, [data]);
+        if (selectedRows == null)
+            return "none";
+        switch (selectedRows.length) {
+            case 0:
+                return 'none';
+            case data.length:
+                return 'all';
+            default:
+                return 'some';
+        }
+    }, [data.length, selectedRows]);
+    var handleSelectRows = useCallback(function (rows) {
+        if (onSelectionChange == null)
+            return;
+        if (selectedRows == null) {
+            onSelectionChange(rows);
+            return;
+        }
+        var newSelection = selectedRows.filter(function (row) { return !rows.includes(row); });
+        newSelection.push.apply(newSelection, rows.filter(function (row) { return !selectedRows.includes(row); }));
+        onSelectionChange(newSelection);
+    }, [selectedRows, onSelectionChange]);
     var handleSelectHeader = useCallback(function () {
+        if (onSelectionChange == null)
+            return;
         switch (selectionState) {
             case 'none':
-                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: true })); }));
+                onSelectionChange(__spreadArray([], data, true));
                 break;
             case 'all':
-            case 'indeterminate':
-                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: false })); }));
+            case 'some':
+                onSelectionChange([]);
                 break;
         }
-    }, [data, selectionState]);
-    var handleSelectRow = useCallback(function (rowIndex) {
-        setData(function (prev) { return prev.map(function (row, index) {
-            if (rowIndex !== index)
-                return row;
-            if (onSelectRow != null) {
-                onSelectRow(row, rowIndex);
-            }
-            return __assign(__assign({}, row), { selected: rowIndex === index
-                    ? !row.selected
-                    : row.selected });
-        }); });
-    }, [onSelectRow]);
-    var selectionHeader = useMemo(function () { return (React.createElement(LabeledCheckbox, { label: "", checked: selectionState === 'all', indeterminate: selectionState === 'indeterminate', onChange: handleSelectHeader })); }, [selectionState, handleSelectHeader]);
+    }, [selectionState, data, onSelectionChange]);
+    var selectionHeader = useMemo(function () { return (React.createElement(LabeledCheckbox, { label: "", checked: selectionState === 'all', indeterminate: selectionState === 'some', onChange: handleSelectHeader })); }, [selectionState, handleSelectHeader]);
     var selectionColumn = useMemo(function () { return ({
         Header: selectionHeader,
         accessor: 'selected',
-        Cell: function (cellObj) {
-            return (React.createElement(LabeledCheckbox, { label: "", checked: cellObj.row.original.selected, onChange: function () { return handleSelectRow(cellObj.row.index); } }));
-        },
-        sticky: 'left',
-        noDrag: true,
+        Cell: function (cell) { return (React.createElement(LabeledCheckbox, { label: "", checked: selectedRows != null && selectedRows.includes(cell.row.original), onChange: function () { return handleSelectRows([cell.row.original]); } })); },
         width: 40,
         disableSortBy: true,
-    }); }, [handleSelectRow, selectionHeader]);
+    }); }, [selectedRows, selectionHeader, handleSelectRows]);
     return (React.createElement(VirtualTable, __assign({}, props, { columns: __spreadArray([selectionColumn], columns, true), data: data, minWidth: 40 })));
 };
 
@@ -7841,5 +7881,5 @@ var Dropzone = React.forwardRef(function (_a, ref) {
             React.createElement(RenderChild, { parseProps: parseChildProps }, children))));
 });
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
 //# sourceMappingURL=index.mjs.map