oolib 2.12.1 → 2.12.4

package/dist/components/ActionMenu/index.js

@@ -57,13 +57,14 @@ var ActionMenu = function (_a) {
                 e.stopPropagation();
                 setShowActions(!showActions);
             } }),
-        react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfolded: showActions }, { align: align, invert: invert }), actions.map(function (action) {
+        react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfold: showActions }, { align: align, invert: invert }), actions.map(function (action) {
+            console.log(action);
             var ActionButton = action.buttonComp || styled_1.StyledActionBtn;
-            react_1.default.createElement(ActionButton, __assign({}, action.props, { onClick: function (ev) {
+            return (react_1.default.createElement(ActionButton, __assign({ style: { justifyContent: 'left' } }, action, { onClick: function (ev) {
                     action.onClick && action.onClick(ev);
                     setShowActions(false);
                 }, key: action.display, invert: invert }),
-                react_1.default.createElement(Typo_1.SANS_2, null, action.display));
+                react_1.default.createElement(Typo_1.SANS_2, null, action.display)));
         }))));
 };
 exports.ActionMenu = ActionMenu;

package/dist/components/ActionMenu/styled.js

@@ -34,18 +34,21 @@ var mixins_1 = require("../../themes/mixins");
 var Buttons_1 = require("../Buttons");
 var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor80 = themes_1.colors.greyColor80;
 exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: max-content;\n"], ["\n  position: relative;\n  width: max-content;\n"])));
-exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  ", "\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  z-index: 10000;\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  overflow: hidden; // for clipping animation\n  clip: rect( auto, auto, ", ", auto);\n  ", "\n\n  &::after{\n      content: '';\n      width: 1rem;\n      height: 1rem;\n      \n      position: absolute;\n      top: 0;\n\n      transform: translate(0, -100%);\n      ", "\n      border-style: solid;\n      border-color: transparent transparent ", " transparent;\n      border-width: 0px 8px 8px 8px\n  }\n"], ["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  ", "\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  z-index: 10000;\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  overflow: hidden; // for clipping animation\n  clip: rect( auto, auto, ", ", auto);\n  ", "\n\n  &::after{\n      content: '';\n      width: 1rem;\n      height: 1rem;\n      \n      position: absolute;\n      top: 0;\n\n      transform: translate(0, -100%);\n      ", "\n      border-style: solid;\n      border-color: transparent transparent ", " transparent;\n      border-width: 0px 8px 8px 8px\n  }\n"])), function (_a) {
+exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: -5px;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n\n  ", "\n  box-shadow: 2px 2px 10px  rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"], ["\n  position: absolute;\n  bottom: -5px;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n\n  ", "\n  box-shadow: 2px 2px 10px  rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"])), function (_a) {
+    var unfold = _a.unfold;
+    return "scaleY(".concat(Number(unfold), ")");
+}, (0, mixins_1.transition)('transform'), function (_a) {
     var align = _a.align;
-    return align == 'center' ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    left: 2rem;\n    transform: translate(-50%, 100%);\n  "], ["\n    left: 2rem;\n    transform: translate(-50%, 100%);\n  "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ": 0;"], ["", ": 0;"])), align);
+    return align == 'center' ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    left: 2rem;\n    transform: translate(-50%, 100%) ", ";;\n  "], ["\n    left: 2rem;\n    transform: translate(-50%, 100%) ", ";;\n  "])), function (_a) {
+        var unfold = _a.unfold;
+        return "scaleY(".concat(Number(unfold), ")");
+    }) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ": 0;"], ["", ": 0;"])), align);
 }, greyColor5, function (_a) {
     var invert = _a.invert;
     return invert ? greyColor80 : white;
 }, function (_a) {
-    var unfolded = _a.unfolded;
-    return unfolded ? '20rem' : 0;
-}, (0, mixins_1.transition)('clip', 0.5), function (_a) {
     var align = _a.align;
-    return align == 'center' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 50%;\n          transform: translate(-50%, 100%);\n        "], ["\n          left: 50%;\n          transform: translate(-50%, 100%);\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ": 1rem;"], ["", ": 1rem;"])), align);
+    return align == 'center' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 50%;\n          transform: translateX(-50%);\n        "], ["\n          left: 50%;\n          transform: translateX(-50%);\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ": 1rem;"], ["", ": 1rem;"])), align);
 }, greyColor10);
 exports.StyledActionBtn = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  white-space: nowrap;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"])), function (_a) {
     var align = _a.align;

package/dist/components/Buttons/index.js

@@ -46,13 +46,14 @@ var DisplayIcon = function (_a) {
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;
-    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, S = props.S, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className;
+    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, S = props.S, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className;
     var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
     var size = (S && "S") || 'M';
-    var composition = icon && displayText ? 'icon+text' : !displayText && 'iconOnly';
+    var composition = (icon || iconAfter) && displayText ? 'icon+text' : !displayText && 'iconOnly';
     return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? 'submit' : 'button', onClick: onClick, onMouseDown: onMouseDown, composition: composition, width: width, color: color },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20 }),
-        displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText)));
+        displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),
+        iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, size: S ? 15 : 20 })));
 };
 var Button = function (_a) {
     var props = _a.props, variant = _a.variant;

package/dist/components/TabBar/index.d.ts

@@ -1,10 +1,2 @@
-export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTabs, queryParamKey }: {
-    id: any;
-    options: any;
-    value: any;
-    onChange: any;
-    updateUrl: any;
-    style: any;
-    emptyTabs: any;
-    queryParamKey?: string;
-}): JSX.Element;
+export function TabBarStyle1(props: any): JSX.Element;
+export function TabBarStyle2(props: any): JSX.Element;

package/dist/components/TabBar/index.js

@@ -1,34 +1,40 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabBar = void 0;
+exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
 var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../Typo");
 var index_styled_1 = require("./index.styled");
-var react_router_dom_1 = require("react-router-dom");
-var TabBar = function (_a) {
-    var id = _a.id, options = _a.options, value = _a.value, onChange = _a.onChange, updateUrl = _a.updateUrl, style = _a.style, emptyTabs = _a.emptyTabs, _b = _a.queryParamKey, queryParamKey = _b === void 0 ? 'activeTab' : _b;
-    var history = (0, react_router_dom_1.useHistory)();
-    var location = (0, react_router_dom_1.useLocation)();
-    var handleClick = function (value) {
-        if (updateUrl) {
-            var params = new URLSearchParams(location.search);
-            params.set(queryParamKey, JSON.stringify(value));
-            history.push({
-                search: params.toString(),
-            });
-        }
-        onChange && onChange(null, value);
+var Base = function (_a) {
+    var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, emptyTabs = _a.emptyTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString;
+    var value = saveValueAsString ? options.find(function (d) { return d.value === valueProp; }) : valueProp;
+    var handleClick = function (v) {
+        onChange && onChange(id, saveValueAsString ? v.value : v);
     };
-    return (react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
-        react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id }, options.map(function (op) {
-            var tabHasError = emptyTabs && emptyTabs.includes(op.value);
-            var tabIsActive = value && op.value === value.value;
-            return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { style1: style === "1", key: op.value, active: tabIsActive, error: tabHasError },
-                react_1.default.createElement(index_styled_1.TabBarTabStyled, { active: tabIsActive, error: tabHasError, style1: style === "1", onClick: function () { return handleClick(op); } },
-                    react_1.default.createElement(Typo_1.SANS_2, { semibold: style === "1" }, op.display))));
-        }))));
+    return (react_1.default.createElement(index_styled_1.TabBarStyled, { style: style },
+        react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
+            react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id }, options.map(function (op) {
+                var tabHasError = emptyTabs && emptyTabs.includes(op.value);
+                var tabIsActive = value && op.value === value.value;
+                return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError },
+                    react_1.default.createElement(index_styled_1.TabBarTabStyled, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); } },
+                        react_1.default.createElement(Typo_1.SANS_2, { semibold: tabBarStyle === "1" }, op.display))));
+            })))));
 };
-exports.TabBar = TabBar;
+var TabBarStyle1 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" })); };
+exports.TabBarStyle1 = TabBarStyle1;
+var TabBarStyle2 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "2" })); };
+exports.TabBarStyle2 = TabBarStyle2;

package/dist/components/TabBar/index.styled.d.ts

@@ -1,3 +1,4 @@
+export const TabBarStyled: any;
 export const TabBarContainerStyled: any;
 export const TabBarRowStyled: any;
 export const TabBarTabWrapper: any;

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

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = void 0;
+exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
@@ -64,14 +64,21 @@ var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (template
 //   border-top: ${({ top }) => top && `0.1rem solid ${greyColor5}`};
 //   border-bottom: ${({ bottom }) => bottom && `0.1rem solid ${greyColor5}`};
 // `;
-exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
-exports.TabBarRowStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var style1 = _a.style1;
-    return (style1 ? tabBarWrapperStyle1 : tabBarWrapperStyle2);
+exports.TabBarStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  z-index: 1000;\n  height: 4rem;\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n  height: 4rem;\n"])), white);
+exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: fit-content;\n  height: 100%;\n"], ["\n  width: fit-content;\n  height: 100%;\n"])));
+exports.TabBarRowStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var tabBarStyle = _a.tabBarStyle;
+    return (tabBarStyle === '1'
+        ? tabBarWrapperStyle1
+        : tabBarStyle === '2'
+            && tabBarWrapperStyle2);
 });
-exports.TabBarTabStyled = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding: 0.8rem 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 0.8rem 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
-    var style1 = _a.style1;
-    return (style1 ? tabBarTabStyle1 : tabBarTabStyle2);
+exports.TabBarTabStyled = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding: 0.8rem 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 0.8rem 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
+    var tabBarStyle = _a.tabBarStyle;
+    return (tabBarStyle === '1'
+        ? tabBarTabStyle1
+        : tabBarStyle === '2'
+            && tabBarTabStyle2);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/components/UserRoleBadge/index.d.ts

@@ -1,8 +1,5 @@
-export function UserRoleBadge({ role, value, className, theme: { Roles } }: {
+export function UserRoleBadge({ role, value, className }: {
     role: any;
     value: any;
     className: any;
-    theme: {
-        Roles: any;
-    };
 }): JSX.Element;

package/dist/components/UserRoleBadge/index.js

@@ -6,17 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserRoleBadge = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../icons");
+var styled_components_1 = require("styled-components");
 var BadgeAdmin = icons_1.icons.BadgeAdmin, BadgeSuperAdmin = icons_1.icons.BadgeSuperAdmin, BadgeMod = icons_1.icons.BadgeMod, BadgeVetted = icons_1.icons.BadgeVetted;
 var UserRoleBadge = function (_a) {
     var _b;
-    var role = _a.role, value = _a.value, className = _a.className, Roles = _a.theme.Roles;
+    var role = _a.role, value = _a.value, className = _a.className;
     var badges = {
         BadgeSuperAdmin: BadgeSuperAdmin,
         BadgeAdmin: BadgeAdmin,
         BadgeMod: BadgeMod,
         BadgeVetted: BadgeVetted
     };
-    var iconName = (_b = Roles[value || role]) === null || _b === void 0 ? void 0 : _b.badgeIcon;
+    var theme = (0, styled_components_1.useTheme)();
+    var iconName = (_b = theme._Roles[value || role]) === null || _b === void 0 ? void 0 : _b.badgeIcon;
     var Icon = iconName && badges[iconName];
     return (Icon ?
         react_1.default.createElement("div", { className: className },

package/package.json

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