oolib 2.29.5 → 2.30.0

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

@@ -0,0 +1,11 @@
+export function Accordion({ id, HeaderStyle, CustomHeader, noHeader, children, expand: expandProp, setExpand: setExpandProp, title, label }: {
+    id: any;
+    HeaderStyle?: string;
+    CustomHeader: any;
+    noHeader?: boolean;
+    children: any;
+    expand?: boolean;
+    setExpand: any;
+    title: any;
+    label: any;
+}): any;

package/dist/components/Accordion/index.js

@@ -0,0 +1,111 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+var framer_motion_1 = require("framer-motion");
+var phosphor_react_1 = require("phosphor-react");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var Buttons_1 = require("../Buttons");
+var Typo_1 = require("../Typo");
+var mixins_1 = require("../../themes/mixins");
+var colors_1 = require("../../themes/colors");
+var utilsOolib_1 = require("../../utilsOolib");
+var StyledAccordionContentsWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n"])));
+var StyledHeaderStyle1Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 2rem; \n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"], ["\n  display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 2rem; \n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"])), colors_1.colors.greyColor5, colors_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), colors_1.colors.greyColor10);
+var NormalizedButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  background-color: ", ";\n"], ["\n  border: none;\n  background-color: ", ";\n"])), colors_1.colors.none);
+//this is the new grey background, slim one. with the Caret icon on the right
+//used in access control builder and several other places.
+var HeaderStyle1 = function (_a) {
+    var title = _a.title, expand = _a.expand, handleToggle = _a.handleToggle;
+    return (react_1.default.createElement(StyledHeaderStyle1Wrapper, { onClick: function () { return handleToggle(!expand); } },
+        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, title),
+        react_1.default.createElement(NormalizedButton, null,
+            react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: "tween", ease: "easeOut" } },
+                react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })))));
+};
+var StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 0; \n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n  /* &:hover{\n    background-color: ", ";\n  } */\n"], ["\n  display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 0; \n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n  /* &:hover{\n    background-color: ", ";\n  } */\n"
+    //analysis dashboard wordcloud - this is the old accordion header style designed at the time of updates module
+])), colors_1.colors.white, colors_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), colors_1.colors.greyColor5);
+//analysis dashboard wordcloud - this is the old accordion header style designed at the time of updates module
+var HeaderStyle2 = function (_a) {
+    var title = _a.title, label = _a.label, expand = _a.expand, handleToggle = _a.handleToggle;
+    var theme = (0, styled_components_1.useTheme)();
+    return (react_1.default.createElement(StyledHeaderStyle2Wrapper, { onClick: function () { return handleToggle(!expand); } },
+        react_1.default.createElement("div", null,
+            label &&
+                react_1.default.createElement(Typo_1.LABEL, { style: { color: (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors) } }, label),
+            react_1.default.createElement(Typo_1.SANS_5_6, { semibold: true }, title)),
+        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: expand ? 'Minus' : 'Plus' })));
+};
+var Accordion = function (_a) {
+    var id = _a.id, _b = _a.HeaderStyle, HeaderStyle = _b === void 0 ? "HeaderStyle1" : _b, CustomHeader = _a.CustomHeader, _c = _a.noHeader, noHeader = _c === void 0 ? false : _c, children = _a.children, _d = _a.expand, expandProp = _d === void 0 ? false : _d, setExpandProp = _a.setExpand, title = _a.title, label = _a.label;
+    var _e = (0, react_1.useState)(expandProp), expand = _e[0], setExpand = _e[1];
+    var handleToggle = function (bool) {
+        setExpand(bool);
+        setExpandProp && setExpandProp(bool);
+    };
+    (0, react_1.useEffect)(function () {
+        if (expandProp !== expand) {
+            setExpand(expandProp);
+        }
+    }, [expandProp]);
+    var HeaderStyles = {
+        HeaderStyle1: HeaderStyle1,
+        HeaderStyle2: HeaderStyle2
+    };
+    var genHeader = function () {
+        if (CustomHeader)
+            return CustomHeader;
+        //else
+        var HeaderStyleComp = HeaderStyles[HeaderStyle];
+        if (!HeaderStyleComp)
+            return react_1.default.createElement("div", { style: { padding: '1rem 2rem', background: colors_1.colors.red } },
+                react_1.default.createElement(Typo_1.SANS_2, null, 'Incorrect accordion HeaderStyle'));
+        return react_1.default.createElement(HeaderStyleComp, __assign({}, { handleToggle: handleToggle, expand: expand, title: title, label: label }));
+    };
+    return (react_1.default.createElement("div", { id: id },
+        //unless header is explicitly disabled, generate it
+        !noHeader && genHeader(),
+        react_1.default.createElement(StyledAccordionContentsWrapper, { initial: { height: expand ? "auto" : 0 }, animate: { height: expand ? "auto" : 0 }, transition: { type: "tween", ease: "easeOut" } },
+            react_1.default.createElement("div", null, children))));
+};
+exports.Accordion = Accordion;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ActionMenu/utils/usePopOutOfOverflowHiddenParent.js

@@ -55,6 +55,7 @@ var usePopOutOfOverflowHiddenParent = function (popOutOfOverflowHiddenParent) {
          * if an initial fixedPos has been applied,
          * then update it
          */
+        console.log({ 'BC': getBoundingClientRect() });
         if (popOutOfOverflowHiddenParent)
             setFixPos(function (prev) { return prev && getBoundingClientRect(); });
     };

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

@@ -1,9 +1,10 @@
-export function TagDisplay({ display, style, invert, M, XS, variant }: {
+export function TagDisplay({ display, style, invert, M, XS, color, variant }: {
     display: any;
     style: any;
     invert: any;
     M: any;
     XS: any;
+    color: any;
     variant?: string;
 }): any;
 export function TagClear({ id, display, value, M, XS, invert, onClick, variant, grey, }: {

package/dist/components/Tags/index.js

@@ -42,10 +42,10 @@ var getTypoComp = function (size) { return size === 'XS' ?
     function (props) { return react_1.default.createElement(index_styled_1.STYLED_ELLIPSIS_SANS_2, __assign({}, props)); }
     : function (props) { return react_1.default.createElement(index_styled_1.STYLED_ELLIPSIS_SANS_3, __assign({}, props)); }; };
 function TagDisplay(_a) {
-    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, color = _a.color, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
     var size = M ? 'M' : XS ? 'XS' : 'S';
     var TYPO_COMP = getTypoComp(size);
-    return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert, size: size, style: style },
+    return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert, size: size, color: color, style: style },
         react_1.default.createElement(TYPO_COMP, null, display)));
 }
 exports.TagDisplay = TagDisplay;

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

@@ -64,10 +64,10 @@ var StyledTagDisplay = styled_components_1.default.div(templateObject_7 || (temp
     var size = _a.size;
     return commonStyle({ size: size });
 }, function (_a) {
-    var variant = _a.variant, invert = _a.invert, size = _a.size;
+    var variant = _a.variant, invert = _a.invert, size = _a.size, color = _a.color;
     return variant === "primary"
         ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40) : //secondary
-     (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n        "], ["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n        "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15);
+     (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n        "], ["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n        "])), size === "XS" ? "1px" : "2px", !invert ? (color ? color : greyColor15) : greyColor80, !invert ? (color ? color : greyColor80) : greyColor15);
 });
 exports.StyledTagDisplay = StyledTagDisplay;
 var StyledTagClear = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\n  \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n  \n\t\n\t", "\n"], ["\n\n  \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n  \n\t\n\t", "\n"])), function (_a) {

package/dist/components/TextInputs/index.js

@@ -204,8 +204,9 @@ var EmailInput = function (_a) {
         var errorObj = regEx.test(value)
             ? ''
             : { type: 'error', msg: 'Enter a valid email address' };
-        if (errorObj && passValidationErrorToFormValidation)
-            passValidationErrorToFormValidation(errorObj);
+        if (passValidationErrorToFormValidation) {
+            passValidationErrorToFormValidation((errorObj === null || errorObj === void 0 ? void 0 : errorObj.type) || 'success');
+        }
         return errorObj;
     };
     return (react_1.default.createElement(exports.TextInput, __assign({ type: "email", placeholder: 'Enter email...', validateOnBlur: handleValidation }, props)));
@@ -218,15 +219,18 @@ var PhoneInput = function (_a) {
         if (isNaN(value)) {
             errorObj = { type: 'error', msg: 'Enter a valid phone number' };
             if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj);
+                passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
         if (value.length < 10) {
             errorObj = { type: 'error', msg: 'Enter a valid phone number' };
             if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj);
+                passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
+        //else
+        if (passValidationErrorToFormValidation)
+            passValidationErrorToFormValidation('success');
     };
     return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: 'Enter Phone...', validateOnBlur: handleValidation, maxLength: 10 }, props)));
 };
@@ -235,7 +239,7 @@ var URLInput = function (_a) {
     var _b = _a.routesAreValidInputs, routesAreValidInputs = _b === void 0 ? false : _b, //if we want react route declarations to be considered as 'valid' then set this to true
     validationPlugin = _a.validationPlugin, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, content = _a.content, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "passValidationErrorToFormValidation", "content"]);
     var handleValidation = function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var pluginResponse, response, err_1, errorObj;
+        var pluginResponse, successObj, response, successObj, err_1, successObj, errorObj;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -250,7 +254,10 @@ var URLInput = function (_a) {
                     //else
                     //if routesAreValidInputs, then first validate for a route
                     if (routesAreValidInputs && value.substring(0, 1) === '/') {
-                        return [2 /*return*/, { type: 'success', msg: 'valid route' }];
+                        successObj = { type: 'success', msg: 'valid route' };
+                        if (passValidationErrorToFormValidation)
+                            passValidationErrorToFormValidation(successObj.type);
+                        return [2 /*return*/, successObj];
                     }
                     //else validate for a url
                     if (!/^https?:\/\//i.test(value)) {
@@ -264,15 +271,21 @@ var URLInput = function (_a) {
                     response = _a.sent();
                     if (response.status !== 200)
                         throw new Error('');
-                    return [2 /*return*/, { type: 'success', msg: 'valid url' }];
+                    successObj = { type: 'success', msg: 'valid url' };
+                    if (passValidationErrorToFormValidation)
+                        passValidationErrorToFormValidation(successObj.type);
+                    return [2 /*return*/, successObj];
                 case 5:
                     err_1 = _a.sent();
                     if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/ig.test(value)) {
-                        return [2 /*return*/, { type: 'success', msg: 'valid url' }];
+                        successObj = { type: 'success', msg: 'valid url' };
+                        if (passValidationErrorToFormValidation)
+                            passValidationErrorToFormValidation(successObj.type);
+                        return [2 /*return*/, successObj];
                     }
                     errorObj = { type: 'error', msg: 'Enter a valid url...' };
                     if (passValidationErrorToFormValidation)
-                        passValidationErrorToFormValidation(errorObj);
+                        passValidationErrorToFormValidation(errorObj.type);
                     return [2 /*return*/, errorObj];
                 case 6: return [2 /*return*/];
             }
@@ -289,21 +302,24 @@ var NumberInput = function (_a) {
         if (isNaN(value)) {
             errorObj = { type: 'error', msg: 'Enter a number' };
             if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj);
+                passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
         if (min && value < min) {
             errorObj = { type: 'error', msg: "Enter value greater than ".concat(min) };
             if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj);
+                passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
         if (max && value > max) {
             errorObj = { type: 'error', msg: "Enter value less than ".concat(max) };
             if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj);
+                passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
+        //else
+        if (passValidationErrorToFormValidation)
+            passValidationErrorToFormValidation('success');
     };
     return (react_1.default.createElement(exports.TextInput
     // type="number"

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { UserRoleBadge } from "./components/UserRoleBadge";
 export { OKELink } from "./components/OKELink";
 export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
+export { Accordion } from "./components/Accordion";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
 export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HintsProvider = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.HintsProvider = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -55,6 +55,8 @@ var Tooltip_1 = require("./components/Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
 var ActionMenu_1 = require("./components/ActionMenu");
 Object.defineProperty(exports, "ActionMenu", { enumerable: true, get: function () { return ActionMenu_1.ActionMenu; } });
+var Accordion_1 = require("./components/Accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
 var PercentCompletedPie_1 = require("./components/PercentCompletedPie");
 Object.defineProperty(exports, "PercentCompletedPie", { enumerable: true, get: function () { return PercentCompletedPie_1.PercentCompletedPie; } });
 var Divider_1 = require("./components/Divider");

package/package.json

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