oolib 2.185.4 → 2.187.0

package/dist/components/LoadersAndProgress/LoaderOverlay/index.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoaderOverlay = void 0;
 var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
 var themes_1 = require("../../../themes");
 var LoaderCircle_1 = require("../LoaderCircle");
 /**
@@ -46,7 +47,7 @@ var LoaderCircle_1 = require("../LoaderCircle");
  */
 var LoaderOverlay = function (_a) {
     var loaderText = _a.loaderText;
-    return (react_1.default.createElement(react_1.Fragment, null,
+    return ((0, react_dom_1.createPortal)(react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement("div", { style: {
                 position: 'fixed',
                 width: '100vw',
@@ -57,6 +58,6 @@ var LoaderOverlay = function (_a) {
                 left: 0,
                 zIndex: 1000000,
             } },
-            react_1.default.createElement(LoaderCircle_1.LoaderCircle, { text: loaderText || "Generating Template...", isBlock: true, invert: true }))));
+            react_1.default.createElement(LoaderCircle_1.LoaderCircle, { text: loaderText || "Generating Template...", isBlock: true, invert: true }))), document.getElementById("loader-root")));
 };
 exports.LoaderOverlay = LoaderOverlay;

package/dist/stories/v2/components/TabBar.stories.js

@@ -90,7 +90,7 @@ exports.default = {
 };
 var TabBar_ = function (args) {
     var options = [
-        { display: "display 1", value: "value1", icon: 'Funnel' },
+        { display: "display 1", value: "value1", icon: 'Funnel', message: "new" },
         { display: "display 2", value: "value2", icon: 'ListDashes' },
         { display: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", value: "value3" },
         { display: "display 3", value: "value4" },

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

@@ -26,6 +26,7 @@ var Typo2_1 = require("../Typo2");
 var phosphor_react_1 = require("phosphor-react");
 var colors_1 = require("../../themes/colors");
 var icons_1 = require("../../../icons");
+var __1 = require("../../..");
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, disabledTabs = _a.disabledTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
     ;
@@ -55,7 +56,11 @@ var Base = function (_a) {
                         react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
                             react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4rem' } },
                                 op.icon && genIconInTab(op.icon),
-                                op.display && react_1.default.createElement(index_styled_1.STYLED_TYPO, { capitalize: true }, op.display)),
+                                op.display &&
+                                    react_1.default.createElement(index_styled_1.STYLED_TYPO, { capitalize: true }, op.display),
+                                op.message &&
+                                    react_1.default.createElement("div", { style: { background: __1.colors2.black, padding: "0.3rem 0.5rem", borderRadius: "2px" } },
+                                        react_1.default.createElement(Typo2_1.UI_TAG, { style: { color: __1.colors2.white } }, op.message))),
                             tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
                 }))),
             !scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },

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

@@ -62,7 +62,7 @@ exports.wrapperStyles = {
 exports.tabStyles = {
     style1: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    border-radius: 6px;\n    background-color: ", ";\n    color: ", ";\n      \n      ", "  \n        \n      &:active {\n        background-color: ", " ;\n        color:  ", " ;\n      }\n        \n      &:hover {\n        background-color: ", ";\n        color: ", ";\n        border-radius: 6px;\n      }  \n        \n    ", "\n  "], ["\n    border-radius: 6px;\n    background-color: ", ";\n    color: ", ";\n      \n      ", "  \n        \n      &:active {\n        background-color: ", " ;\n        color:  ", " ;\n      }\n        \n      &:hover {\n        background-color: ", ";\n        color: ", ";\n        border-radius: 6px;\n      }  \n        \n    ", "\n  "])), function (_a) {
         var active = _a.active, disabled = _a.disabled, colors = _a.theme.colors;
-        return active ? (0, getDynamicColors_1.getSecondaryContainer)(colors) || secondaryContainer : white;
+        return active ? (0, getDynamicColors_1.getSecondaryContainer)(colors) : white;
     }, function (_a) {
         var active = _a.active, disabled = _a.disabled, colors = _a.theme.colors;
         return disabled ? grey40 : active ? (0, getDynamicColors_1.getOnSecondary)(colors) || onSecondary : grey80;
@@ -71,16 +71,16 @@ exports.tabStyles = {
         return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          cursor: not-allowed;\n          color: ", ";\n      "], ["\n          cursor: not-allowed;\n          color: ", ";\n      "])), grey40);
     }, function (_a) {
         var disabled = _a.disabled, colors = _a.theme.colors;
-        return disabled ? grey40 : (0, getDynamicColors_1.getSecondaryContainer)(colors) || secondaryContainer;
+        return disabled ? grey40 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
     }, function (_a) {
         var colors = _a.theme.colors;
-        return (0, getDynamicColors_1.getOnSecondary)(colors) || onSecondary;
+        return (0, getDynamicColors_1.getOnSecondary)(colors);
     }, function (_a) {
-        var disabled = _a.disabled;
-        return disabled ? white : grey10;
+        var disabled = _a.disabled, active = _a.active;
+        return disabled ? white : active ? (0, getDynamicColors_1.getSecondaryContainer)(themes_1.colors) : grey10;
     }, function (_a) {
         var disabled = _a.disabled, colors = _a.theme.colors;
-        return disabled ? grey40 : (0, getDynamicColors_1.getOnSecondary)(colors) || onSecondary;
+        return disabled ? grey40 : (0, getDynamicColors_1.getOnSecondary)(colors);
     }, (0, mixins_1.transition)("color"))
 };
 exports.TabBarStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  z-index: 1000;\n  height: ", ";\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n  height: ", ";\n"])), white, function (_a) {

package/package.json

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