@commonsku/styles 1.16.1 → 1.16.3

package/dist/index.js

@@ -1328,16 +1328,18 @@ var themeOptions = {
     },
 };
 function getColor(color, def) {
+    var _a;
     if (!color) {
         return '';
     }
-    return ___default.get(colors, color, ___default.get(colors, def || '', def));
+    return (_a = ___default.get(colors, color, ___default.get(colors, def || '', def))) !== null && _a !== void 0 ? _a : '';
 }
 function getFontStyle(value, def) {
+    var _a;
     if (!value) {
         return '';
     }
-    return ___default.get(fontStyles, value, ___default.get(fontStyles, def || '', def));
+    return (_a = ___default.get(fontStyles, value, ___default.get(fontStyles, def || '', def))) !== null && _a !== void 0 ? _a : '';
 }
 function getThemeColor(props, color, fallbackColor) {
     return getThemeProperty(props, 'colors', color, fallbackColor);
@@ -1353,6 +1355,7 @@ function getThemeFontFamily(props, fallbackValue) {
     return getThemeProperty(props, 'fontFamily', fallbackValue);
 }
 function getThemeProperty(props, prop, value, fallbackValue) {
+    var _a, _b;
     if (___default.get(props, "theme.".concat(prop), null)) {
         if (___default.isObject(props.theme[prop]) && ___default.get(props.theme, "".concat(prop, ".").concat(value), null)) {
             return ___default.get(props.theme, "".concat(prop, ".").concat(value), null);
@@ -1362,7 +1365,7 @@ function getThemeProperty(props, prop, value, fallbackValue) {
         }
     }
     else if (___default.get(themeOptions, "".concat(prop, ".").concat(value), null)) {
-        return ___default.get(themeOptions, "".concat(prop, ".").concat(value), null);
+        return (_a = ___default.get(themeOptions, "".concat(prop, ".").concat(value))) !== null && _a !== void 0 ? _a : '';
     }
     switch (prop) {
         case 'fontStyles':
@@ -1372,7 +1375,7 @@ function getThemeProperty(props, prop, value, fallbackValue) {
         case 'colors':
             return getColor(value, fallbackValue);
         case 'fontFamily':
-            return ___default.get(themeOptions.fontFamilies, "".concat(value, ".fontFamily"), fallbackValue || themeOptions.fontFamily);
+            return (_b = ___default.get(themeOptions.fontFamilies, "".concat(value, ".fontFamily"), fallbackValue || themeOptions.fontFamily)) !== null && _b !== void 0 ? _b : '';
         default:
             return '';
     }
@@ -3742,8 +3745,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({
@@ -3753,17 +3756,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); })),
-            ___default.get(selectedTab, ['content'], ''));
+            _.get(selectedTab, ['content'], ''));
     };
     return Tabs;
 }(React.Component));
@@ -4356,10 +4359,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 = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var _h = React.useState(openMenu), showMenu = _h[0], setShowMenu = _h[1];
+    var _j = React.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)' },
@@ -4401,16 +4404,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))));
 };