oolib 2.29.6 → 2.30.1

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/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/dist/utils/customHooks/useScroll.js

@@ -9,8 +9,8 @@ var useScroll = function (scrollFn, options) {
         scrollFn(); //run the scroll fn once before any scroll to set initial states
         var throttledScrollFn = (0, lodash_1.throttle)(scrollFn, 100);
         var fnToUse = options.noThrottle ? scrollFn : throttledScrollFn;
-        window.addEventListener('scroll', fnToUse);
-        return function () { return window.removeEventListener('scroll', fnToUse); };
+        window.addEventListener('scroll', fnToUse, true); // <-- why 'true' : https://stackoverflow.com/a/32954565
+        return function () { return window.removeEventListener('scroll', fnToUse, true); };
     }, [options.loading]);
 };
 exports.useScroll = useScroll;

package/package.json

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