oolib 2.19.0 → 2.19.2

package/dist/components/ActionMenu/index.js

@@ -65,8 +65,7 @@ var ActionMenu = function (_a) {
             showActions: showActions
         }),
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
-                var ActionButton = action.buttonComp || styled_1.StyledOption;
-                return (react_1.default.createElement(ActionButton, __assign({}, action, { onClick: function (ev) {
+                return (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (ev) {
                         action.onClick && action.onClick(ev);
                         setShowActions(false);
                     }, key: action.display, invert: invert }),

package/dist/components/Loader/BarLoader/index.d.ts

@@ -1,6 +1,7 @@
-export function BarLoader({ progress, text, isBlock, blockHeight, }: {
+export function BarLoader({ progress, text, children, isBlock, blockHeight, }: {
     progress: any;
     text: any;
+    children: any;
     isBlock?: boolean;
     blockHeight?: string;
 }): JSX.Element;

package/dist/components/Loader/BarLoader/index.js

@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../../Typo");
 var styled_1 = require("../styled");
 var BarLoader = function (_a) {
-    var progress = _a.progress, text = _a.text, _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c;
+    var progress = _a.progress, text = _a.text, children = _a.children, _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c;
     var loaderWidth = 100; //maybe in the future this will be controlled by a size prop
     var genLoader = function () { return (react_1.default.createElement(styled_1.StyledLoaderWrapper, { isBlock: isBlock },
         react_1.default.createElement(styled_1.StyledHorLoader, { loaderWidth: loaderWidth },

package/dist/components/TabBar/index.styled.js

@@ -43,7 +43,7 @@ var tabBarWrapperStyle1 = (0, styled_components_1.css)(templateObject_3 || (temp
     var error = _a.error;
     return error && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: relative;\n      background-color: ", ";\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      background-color: ", ";\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "])), lightRed, red);
 });
-var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  background-color: ", ";\n  :first-of-type {\n    border-radius: 2px 0 0 2px;\n  }\n  :last-of-type {\n    border-radius: 0 2px 2px 0;\n  }\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  ", "\n  background-color: ", ";\n  :first-of-type {\n    border-radius: 2px 0 0 2px;\n  }\n  :last-of-type {\n    border-radius: 0 2px 2px 0;\n  }\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), (0, mixins_1.multiTransition)("background-color"), greyColor5, function (_a) {
+var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  background-color: ", ";\n  :first-of-type {\n    border-radius: 2px 0 0 2px;\n  }\n  :last-of-type {\n    border-radius: 0 2px 2px 0;\n  }\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  ", "\n  background-color: ", ";\n  :first-of-type {\n    border-radius: 2px 0 0 2px;\n  }\n  :last-of-type {\n    border-radius: 0 2px 2px 0;\n  }\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), (0, mixins_1.transition)("background-color"), greyColor5, function (_a) {
     var active = _a.active;
     return (active ? "" : greyColor10);
 }, function (_a) {
@@ -54,7 +54,7 @@ var tabBarTabStyle1 = (0, styled_components_1.css)(templateObject_7 || (template
     var error = _a.error;
     return error && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), red);
 });
-var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding-left: 2rem;\n  padding-right: 2rem;\n  ", "\n  ", "\n"], ["\n  padding-left: 2rem;\n  padding-right: 2rem;\n  ", "\n  ", "\n"])), (0, mixins_1.multiTransition)("color"), function (_a) {
+var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding-left: 2rem;\n  padding-right: 2rem;\n  ", "\n  ", "\n"], ["\n  padding-left: 2rem;\n  padding-right: 2rem;\n  ", "\n  ", "\n"])), (0, mixins_1.transition)("color"), function (_a) {
     var active = _a.active;
     return active && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      border-radius: 0.2rem;\n      color: ", ";\n    "], ["\n      border-radius: 0.2rem;\n      color: ", ";\n    "])), white);
 });

package/dist/components/Tags/index.styled.js

@@ -93,7 +93,7 @@ var StyledTagClear = styled_components_1.default.div(templateObject_13 || (templ
     return variant === "ghost" && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: none;\n\t  border: none;\n    "], ["\n      background: none;\n\t  border: none;\n    "])));
 });
 exports.StyledTagClear = StyledTagClear;
-var StyledTagClearIconWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n  \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"], ["\n  \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n  \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"])), (0, mixins_1.multiTransition)('color', 'background-color'), function (_a) {
+var StyledTagClearIconWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n  \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"], ["\n  \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n  \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"])), (0, mixins_1.transition)('color', 'background-color'), function (_a) {
     var invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
     return grey
         ? greyHover({ invert: invert, colors: colors })
@@ -103,7 +103,7 @@ exports.StyledTagClearIconWrapper = StyledTagClearIconWrapper;
 var StyledTagSelect = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  ", "\n\n\t", "\n  \n"], ["\n  ", "\n  ", "\n\n\t", "\n  \n"])), function (_a) {
     var size = _a.size;
     return commonStyle({ size: size });
-}, (0, mixins_1.multiTransition)("background-color"), function (_a) {
+}, (0, mixins_1.transition)("background-color"), function (_a) {
     var selected = _a.selected, size = _a.size, colors = _a.theme.colors;
     return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    border: ", " solid ", ";\n    cursor: pointer;\n    background-color: ", ";\n\t  color: ", ";\n\t\t", "\n  "], ["\n    border: ", " solid ", ";\n    cursor: pointer;\n    background-color: ", ";\n\t  color: ", ";\n\t\t", "\n  "])), size === "XS" ? "1px" : "2px", (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor40)(colors) : null, (0, utilsOolib_1.getPrimaryColorText)(colors), !selected && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["&:hover {\n      background-color: ", ";\n      color: ", ";\n\t\t}"], ["&:hover {\n      background-color: ", ";\n      color: ", ";\n\t\t}"])), (0, utilsOolib_1.getPrimaryColor40)(colors), (0, utilsOolib_1.getPrimaryColorText)(colors)));
 });
@@ -111,7 +111,7 @@ exports.StyledTagSelect = StyledTagSelect;
 var StyledTagLink = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  \t", "\n\t", ";\n    ", "\n"], ["\n  \t", "\n\t", ";\n    ", "\n"])), function (_a) {
     var size = _a.size;
     return commonStyle({ size: size });
-}, (0, mixins_1.multiTransition)("background-color", "color"), function (_a) {
+}, (0, mixins_1.transition)("background-color", "color"), function (_a) {
     var variant = _a.variant, invert = _a.invert, size = _a.size, colors = _a.theme.colors;
     return variant === "primary"
         ? (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          \t\tbackground-color: ", ";\n          \t\tcolor: ", ";\n\t\t\t\t", ";\n        \t"], ["\n          \t\tbackground-color: ", ";\n          \t\tcolor: ", ";\n\t\t\t\t", ";\n        \t"])), !invert

package/dist/components/ToggleButton/styled.js

@@ -50,5 +50,5 @@ exports.StyledToggleButton = styled_components_1.default.button(templateObject_3
 }, function (_a) {
     var direction = _a.direction;
     return direction === 'left' ? '0' : 'calc(100% - 2rem)';
-}, (0, mixins_1.transition)('left', 0.2));
+}, (0, mixins_1.transition)('left 0.2s'));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Tooltip/styled.js

@@ -43,7 +43,7 @@ var clipPaths = {
 exports.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", "\n\n  padding: 0.4rem 1rem;\n  white-space: nowrap;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: absolute;\n  ", "\n\n  \n"], ["\n  ", ";\n  ", "\n\n  padding: 0.4rem 1rem;\n  white-space: nowrap;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: absolute;\n  ", "\n\n  \n"])), function (_a) {
     var show = _a.show;
     return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["opacity:1; z-index: 5;"], ["opacity:1; z-index: 5;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["opacity:0; z-index: -5;"], ["opacity:0; z-index: -5;"])));
-}, (0, mixins_1.transition)('opacity', 0.1), white, greyColor15, function (_a) {
+}, (0, mixins_1.transition)('opacity 0.1s'), white, greyColor15, function (_a) {
     var position = _a.position;
     return (0, util_1.positionTooltip)(position);
 });

package/dist/themes/mixins/index.d.ts

@@ -1,8 +1,7 @@
 export function mediaQuery(point: any): string;
 export function getBreakPoint(point: any): 0 | 600 | 800 | 1000 | 1300 | 1600 | "pass a valid breakpoint";
 import { transition } from "./transitions";
-import { multiTransition } from "./transitions";
 export function isElementInViewport(el: any): boolean;
 export const ellipsis: any;
 export function multilineUnderline(color: any, thickness?: string, reverse?: boolean, hovered?: boolean): any;
-export { transition, multiTransition };
+export { transition };

package/dist/themes/mixins/index.js

@@ -4,11 +4,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.multilineUnderline = exports.ellipsis = exports.isElementInViewport = exports.multiTransition = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
+exports.multilineUnderline = exports.ellipsis = exports.isElementInViewport = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
 var styled_components_1 = require("styled-components");
 var transitions_1 = require("./transitions");
 Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return transitions_1.transition; } });
-Object.defineProperty(exports, "multiTransition", { enumerable: true, get: function () { return transitions_1.multiTransition; } });
 var getBreakPoint = function (point) {
     switch (point) {
         case "xs":

package/dist/themes/mixins/transitions.d.ts

@@ -1,2 +1 @@
-export function transition(property: any, duration?: number, delay?: number): any;
-export function multiTransition(...properties: any[]): any;
+export function transition(...properties: any[]): any;

package/dist/themes/mixins/transitions.js

@@ -4,20 +4,20 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.multiTransition = exports.transition = void 0;
+exports.transition = void 0;
 var styled_components_1 = require("styled-components");
-var transition = function (property, duration, delay) {
-    if (duration === void 0) { duration = 0.3; }
-    if (delay === void 0) { delay = 0; }
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: ", " ", "s ease-out ", "s;\n"], ["\n  transition: ", " ", "s ease-out ", "s;\n"])), property, duration, delay);
-};
-exports.transition = transition;
-var multiTransition = function () {
+var transition = function () {
     var properties = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         properties[_i] = arguments[_i];
     }
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transition: ", " 0.3s ease-out;\n"], ["\n  transition: ", " 0.3s ease-out;\n"])), properties.join(' 0.3s ease-out, '));
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: ", ";\n"], ["\n  transition: ", ";\n"])), properties.map(function (property) {
+        return property.split(' ').length === 1 //meaning only property name is passed. e.g background-color
+            ? "".concat(property, " 0.3s ease-out")
+            : property.split(' ').length === 2 //means duration is there...
+                ? "".concat(property, " ease-out")
+                : property; //else we assume time and ease and whatever is passed
+    }).join(', '));
 };
-exports.multiTransition = multiTransition;
-var templateObject_1, templateObject_2;
+exports.transition = transition;
+var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",