@commonsku/styles 1.16.1 → 1.16.3

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import React$1, { CSSProperties, Component, ReactNode, WeakValidationMap, ComponentType } from 'react';
+import React$1, { CSSProperties, MouseEvent, Component, MouseEventHandler, ReactNode, WeakValidationMap, ComponentType } from 'react';
 import { FlattenInterpolation, ThemedStyledProps, StyledComponent, CSSObject, FlattenSimpleInterpolation, GlobalStyleComponent, DefaultTheme, ThemeProps, Keyframes, AnyStyledComponent, StyledComponentInnerComponent } from 'styled-components';
 import { DropzoneOptions } from 'react-dropzone';
 import { AsyncAdditionalProps } from 'react-select/dist/declarations/src/useAsync';
@@ -1207,9 +1207,9 @@ declare const Tab: StyledComponent<"li", any, {
     variant?: "primary" | "secondary" | undefined;
 } & SharedStyleTypes, never>;
 declare type TTab = {
-    label: string;
+    label: string | React$1.ReactNode;
     content: React$1.ReactNode;
-    onClick?: Function | VoidFunction;
+    onClick?: (e?: MouseEvent<HTMLLIElement>) => void;
 };
 declare type TabsProps = {
     tabs: TTab[];
@@ -2454,7 +2454,7 @@ declare type DropdownItemProps = {
 declare const DropdownItem: StyledComponent<"div", any, DropdownItemProps, never>;
 declare const DropDownContent: StyledComponent<"div", any, DropdownContentProps, never>;
 declare type TDropdownItem = {
-    onClick?: Function | VoidFunction | null;
+    onClick?: MouseEventHandler<HTMLDivElement>;
     props?: {
         [key: string]: any;
         underlined?: boolean;
@@ -2469,12 +2469,13 @@ declare type DropdownProps = {
     size?: TSize$1;
     style?: CSSObject;
     buttonVariant?: ButtonVariant;
+    buttonProps?: ButtonProps;
     width?: string | number;
     bordered?: boolean;
     hideOnMouseLeave?: boolean;
     onToggleMenu?: (value: boolean) => void;
 };
-declare const Dropdown: ({ items, children, underlined, primary, text, icon, openMenu, onToggleMenu, mouseLeaveCallback, size, style, buttonVariant, width, bordered, hideOnMouseLeave, ...props }: React$1.PropsWithChildren<DropdownProps & DropdownContentProps>) => JSX.Element;
+declare const Dropdown: ({ items, children, underlined, primary, text, icon, openMenu, onToggleMenu, mouseLeaveCallback, size, style, buttonVariant, buttonProps, width, bordered, hideOnMouseLeave, ...props }: React$1.PropsWithChildren<DropdownProps & DropdownContentProps>) => JSX.Element;
 
 declare const Badge: StyledComponent<"span", any, {
     color?: string | undefined;
@@ -3559,4 +3560,4 @@ declare type SimpleWindowedTableProps = {
 };
 declare function SimpleWindowedTable({ columns, data, itemSize, height, minWidth, maxWidth, defaultSort, onClickRow, onScroll, onUpdateData, useTableProps, tableHeaderProps, tableFooterProps, hideFooter, className, NoRowsFound, }: SimpleWindowedTableProps): JSX.Element;
 
-export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, ResponsiveTable, Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes };
+export { AddIcon, AddNoteIcon, 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, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, ResponsiveTable, Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes };

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import _, { map, pick, keys, isUndefined, get, toNumber, partial, uniqueId, debounce } from 'lodash';
+import _, { map, pick, keys, isUndefined, get, toNumber, isString, filter, partial, uniqueId, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
 import React__default, { Fragment, useState, useEffect, useRef, Component, useCallback, createContext, memo, forwardRef, useLayoutEffect, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -1319,16 +1319,18 @@ var themeOptions = {
     },
 };
 function getColor(color, def) {
+    var _a;
     if (!color) {
         return '';
     }
-    return _.get(colors, color, _.get(colors, def || '', def));
+    return (_a = _.get(colors, color, _.get(colors, def || '', def))) !== null && _a !== void 0 ? _a : '';
 }
 function getFontStyle(value, def) {
+    var _a;
     if (!value) {
         return '';
     }
-    return _.get(fontStyles, value, _.get(fontStyles, def || '', def));
+    return (_a = _.get(fontStyles, value, _.get(fontStyles, def || '', def))) !== null && _a !== void 0 ? _a : '';
 }
 function getThemeColor(props, color, fallbackColor) {
     return getThemeProperty(props, 'colors', color, fallbackColor);
@@ -1344,6 +1346,7 @@ function getThemeFontFamily(props, fallbackValue) {
     return getThemeProperty(props, 'fontFamily', fallbackValue);
 }
 function getThemeProperty(props, prop, value, fallbackValue) {
+    var _a, _b;
     if (_.get(props, "theme.".concat(prop), null)) {
         if (_.isObject(props.theme[prop]) && _.get(props.theme, "".concat(prop, ".").concat(value), null)) {
             return _.get(props.theme, "".concat(prop, ".").concat(value), null);
@@ -1353,7 +1356,7 @@ function getThemeProperty(props, prop, value, fallbackValue) {
         }
     }
     else if (_.get(themeOptions, "".concat(prop, ".").concat(value), null)) {
-        return _.get(themeOptions, "".concat(prop, ".").concat(value), null);
+        return (_a = _.get(themeOptions, "".concat(prop, ".").concat(value))) !== null && _a !== void 0 ? _a : '';
     }
     switch (prop) {
         case 'fontStyles':
@@ -1363,7 +1366,7 @@ function getThemeProperty(props, prop, value, fallbackValue) {
         case 'colors':
             return getColor(value, fallbackValue);
         case 'fontFamily':
-            return _.get(themeOptions.fontFamilies, "".concat(value, ".fontFamily"), fallbackValue || themeOptions.fontFamily);
+            return (_b = _.get(themeOptions.fontFamilies, "".concat(value, ".fontFamily"), fallbackValue || themeOptions.fontFamily)) !== null && _b !== void 0 ? _b : '';
         default:
             return '';
     }
@@ -3733,8 +3736,8 @@ var Tabs = /** @class */ (function (_super) {
         var sameTabs = prevProps.tabs.length !== this.props.tabs.length
             || (prevProps.tabs.length === this.props.tabs.length
                 && prevProps.tabs.every(function (e, i) {
-                    return e.label === _this.props.tabs[i].label
-                        && (e.onClick || "null").toString() === (_this.props.tabs[i].onClick || 'null').toString();
+                    return !isString(e.label) || (e.label === _this.props.tabs[i].label
+                        && (e.onClick || "null").toString() === (_this.props.tabs[i].onClick || 'null').toString());
                 }));
         if (!sameTabs) {
             this.setState({
@@ -3744,17 +3747,17 @@ var Tabs = /** @class */ (function (_super) {
     };
     Tabs.prototype.render = function () {
         var _this = this;
-        var _a = this.props, tabs = _a.tabs, size = _a.size;
+        var _a = this.props, tabs = _a.tabs, size = _a.size, props = __rest(_a, ["tabs", "size"]);
         var selectedTab = this.getTab(tabs, this.state.selectedTabIndex);
-        return React__default.createElement("div", null,
-            React__default.createElement(TabBar, { padded: this.props.padded === true }, tabs.map(function (tab, index) { return React__default.createElement(Tab, { key: index, size: size, selected: index === _this.state.selectedTabIndex, onClick: function () {
+        return React__default.createElement("div", __assign({}, props),
+            React__default.createElement(TabBar, { padded: this.props.padded === true }, tabs.map(function (tab, index) { return React__default.createElement(Tab, { key: index, size: size, className: index === _this.state.selectedTabIndex ? 'selected' : '', selected: index === _this.state.selectedTabIndex, onClick: function (e) {
                     _this.setState({ selectedTabIndex: index });
                     var callback = tabs[index].onClick;
                     if (callback) {
-                        callback();
+                        callback(e);
                     }
                 } }, tab.label); })),
-            _.get(selectedTab, ['content'], ''));
+            get(selectedTab, ['content'], ''));
     };
     return Tabs;
 }(Component));
@@ -4347,10 +4350,10 @@ var getContentStyle = function (width, rootElem, buttonElem) {
     return {};
 };
 var Dropdown = function (_a) {
-    var items = _a.items, _b = _a.children, children = _b === void 0 ? undefined : _b, underlined = _a.underlined, primary = _a.primary, text = _a.text, icon = _a.icon, _c = _a.openMenu, openMenu = _c === void 0 ? false : _c, onToggleMenu = _a.onToggleMenu, mouseLeaveCallback = _a.mouseLeaveCallback, size = _a.size, _d = _a.style, style = _d === void 0 ? {} : _d, buttonVariant = _a.buttonVariant, _e = _a.width, width = _e === void 0 ? 160 : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.hideOnMouseLeave, hideOnMouseLeave = _g === void 0 ? true : _g, props = __rest(_a, ["items", "children", "underlined", "primary", "text", "icon", "openMenu", "onToggleMenu", "mouseLeaveCallback", "size", "style", "buttonVariant", "width", "bordered", "hideOnMouseLeave"]);
+    var items = _a.items, _b = _a.children, children = _b === void 0 ? undefined : _b, underlined = _a.underlined, primary = _a.primary, text = _a.text, icon = _a.icon, _c = _a.openMenu, openMenu = _c === void 0 ? false : _c, onToggleMenu = _a.onToggleMenu, mouseLeaveCallback = _a.mouseLeaveCallback, size = _a.size, _d = _a.style, style = _d === void 0 ? {} : _d, buttonVariant = _a.buttonVariant, _e = _a.buttonProps, buttonProps = _e === void 0 ? {} : _e, _f = _a.width, width = _f === void 0 ? 160 : _f, _g = _a.bordered, bordered = _g === void 0 ? false : _g, _h = _a.hideOnMouseLeave, hideOnMouseLeave = _h === void 0 ? true : _h, props = __rest(_a, ["items", "children", "underlined", "primary", "text", "icon", "openMenu", "onToggleMenu", "mouseLeaveCallback", "size", "style", "buttonVariant", "buttonProps", "width", "bordered", "hideOnMouseLeave"]);
     var rootRef = useRef(null);
     var buttonRef = useRef(null);
-    var _h = useState(openMenu), showMenu = _h[0], setShowMenu = _h[1];
+    var _j = useState(openMenu), showMenu = _j[0], setShowMenu = _j[1];
     var iconProps = {
         color: getColor(primary ? 'primary100' : 'white'),
         style: { verticalAlign: 'middle', transitionDuration: '.3s', transform: 'rotate(' + (showMenu ? 0 : 180) + 'deg)' },
@@ -4392,16 +4395,17 @@ var Dropdown = function (_a) {
             icon ?
                 React__default.createElement("span", { onClick: function () { return handleToggleMenu(!showMenu); } }, icon)
                 :
-                    React__default.createElement(Button, { size: size, cta: Boolean(!primary), variant: buttonVariant, onClick: function () { return handleToggleMenu(!showMenu); }, ref: buttonRef },
+                    React__default.createElement(Button, __assign({ size: size, cta: Boolean(!primary), variant: buttonVariant, onClick: function () { return handleToggleMenu(!showMenu); }, ref: buttonRef }, buttonProps),
                         text ? text : "Actions",
                         " ",
                         React__default.createElement(ChevronIcon, __assign({ direction: "up" }, iconProps))),
             showMenu && React__default.createElement(DropDownContent, { style: contentStyle, underlined: underlined, primary: primary, width: width, bordered: bordered },
-                items && items.map(function (item, i) {
-                    return item && React__default.createElement(DropdownItem, __assign({ key: 'dropdown-item-' + i }, item.props, { primary: primary, underlined: item.props && item.props.underlined ? item.props.underlined : underlined, onClick: function () {
+                items && filter(items).map(function (_a, i) {
+                    var onClick = _a.onClick, content = _a.content, legecyProps = _a.props, itemProps = __rest(_a, ["onClick", "content", "props"]);
+                    return React__default.createElement(DropdownItem, __assign({ key: 'dropdown-item-' + i, underlined: underlined }, legecyProps, { primary: primary, onClick: function (e) {
                             setShowMenu(false);
-                            item.onClick && item.onClick();
-                        } }), item.content);
+                            onClick && onClick(e);
+                        } }, itemProps), content);
                 }),
                 children ? children : null))));
 };