oolib 2.30.1 → 2.30.3

package/dist/components/Accordion/index.js

@@ -61,7 +61,21 @@ var HeaderStyle1 = function (_a) {
             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"
+var StyledHeaderStyle3Wrapper = 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 2rem; \n\n  background-color: ", ";\n  border: 1px 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\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"
+    //this is the new grey background, slim one. with the Caret icon on the right
+    //used in access control builder and several other places.
+])), colors_1.colors.none, colors_1.colors.greyColor15, (0, mixins_1.transition)('background-color'), colors_1.colors.greyColor3);
+//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 HeaderStyle3 = function (_a) {
+    var title = _a.title, expand = _a.expand, handleToggle = _a.handleToggle;
+    return (react_1.default.createElement(StyledHeaderStyle3Wrapper, { onClick: function () { return handleToggle(!expand); } },
+        react_1.default.createElement(Typo_1.SERIF_4_5, null, 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_5 || (templateObject_5 = __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
@@ -89,7 +103,8 @@ var Accordion = function (_a) {
     }, [expandProp]);
     var HeaderStyles = {
         HeaderStyle1: HeaderStyle1,
-        HeaderStyle2: HeaderStyle2
+        HeaderStyle2: HeaderStyle2,
+        HeaderStyle3: HeaderStyle3
     };
     var genHeader = function () {
         if (CustomHeader)
@@ -108,4 +123,4 @@ var Accordion = function (_a) {
             react_1.default.createElement("div", null, children))));
 };
 exports.Accordion = Accordion;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/ActionMenu/index.js

@@ -40,7 +40,7 @@ var ButtonComps = __importStar(require("../Buttons"));
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var useHandleClickOutside_1 = require("./utils/useHandleClickOutside");
-var usePopOutOfOverflowHiddenParent_1 = require("./utils/usePopOutOfOverflowHiddenParent");
+var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflowHiddenParent");
 var styled_1 = require("./styled");
 //
 var ActionMenu = function (_a) {

package/dist/components/OKELink/index.js

@@ -78,6 +78,7 @@ var OKELink = function (_a) {
     var genIcon = function (icon) {
         return react_1.default.createElement(comps_1.DisplayIcon, __assign({}, {
             icon: icon,
+            weight: "regular",
             size: iconSize || 15,
             color: (0, styled_1.genColor)({ color: color, theme: theme, invert: invert, disabled: disabled })
         }));

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

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

package/dist/components/Tags/index.js

@@ -42,11 +42,11 @@ 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, color = _a.color, _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, tagColor = _a.tagColor, textColor = _a.textColor, _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, color: color, style: style },
-        react_1.default.createElement(TYPO_COMP, null, display)));
+    return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert, textColor: textColor, tagColor: tagColor, size: size, style: style },
+        react_1.default.createElement(TYPO_COMP, { semibold: true }, display)));
 }
 exports.TagDisplay = TagDisplay;
 function TagClear(_a) {

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

@@ -64,10 +64,14 @@ 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, color = _a.color;
+    var variant = _a.variant, invert = _a.invert, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor;
     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 ? (color ? color : greyColor15) : greyColor80, !invert ? (color ? color : greyColor80) : greyColor15);
+        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), tagColor
+            ? tagColor
+            : !invert
+                ? greyColor15
+                : greyColor80, textColor ? textColor : !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", tagColor ? tagColor : !invert ? greyColor15 : greyColor80, textColor ? textColor : !invert ? 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/utils/_EXPORTS/index.d.ts

@@ -7,3 +7,4 @@ export { formatTextToCamelCase } from "../formatTextToCamelCase";
 export { formatCamelCaseToSentenceCase } from "../formatCamelCaseToSentenceCase";
 export { toArray } from "../toArray";
 export { useScroll } from "../customHooks/useScroll";
+export { usePopOutOfOverflowHiddenParent } from "../usePopOutOfOverflowHiddenParent";

package/dist/utils/_EXPORTS/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScroll = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
+exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
 //the holy setter, getter & deleter
 var getVal_1 = require("../getterSetterDeleter/getVal");
 Object.defineProperty(exports, "getVal", { enumerable: true, get: function () { return getVal_1.getVal; } });
@@ -22,3 +22,5 @@ Object.defineProperty(exports, "toArray", { enumerable: true, get: function () {
 //custom hooks
 var useScroll_1 = require("../customHooks/useScroll");
 Object.defineProperty(exports, "useScroll", { enumerable: true, get: function () { return useScroll_1.useScroll; } });
+var usePopOutOfOverflowHiddenParent_1 = require("../usePopOutOfOverflowHiddenParent");
+Object.defineProperty(exports, "usePopOutOfOverflowHiddenParent", { enumerable: true, get: function () { return usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent; } });

package/dist/utils/customHooks/useScroll.d.ts

@@ -1 +1 @@
-export function useScroll(scrollFn: any, options?: {}): void;
+export function useScroll(scrollFn: Function, options?: any): void;

package/dist/utils/customHooks/useScroll.js

@@ -3,14 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScroll = void 0;
 var lodash_1 = require("lodash");
 var react_1 = require("react");
+/**
+ * @param {Function} scrollFn
+ * @param {*} options
+ * @summary if you dont use options.detectScrollInAllDivs, scroll is detected only at the 'window' level
+ */
 var useScroll = function (scrollFn, options) {
     if (options === void 0) { options = {}; }
     (0, react_1.useLayoutEffect)(function () {
         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, true); // <-- why 'true' : https://stackoverflow.com/a/32954565
-        return function () { return window.removeEventListener('scroll', fnToUse, true); };
+        window.addEventListener('scroll', fnToUse, options.detectScrollInAllDivs); // <-- why 'true' : https://stackoverflow.com/a/32954565
+        return function () { return window.removeEventListener('scroll', fnToUse, options.detectScrollInAllDivs); };
     }, [options.loading]);
 };
 exports.useScroll = useScroll;

package/dist/{components/ActionMenu/utils → utils}/usePopOutOfOverflowHiddenParent.d.ts

@@ -1,6 +1,6 @@
 export function usePopOutOfOverflowHiddenParent(popOutOfOverflowHiddenParent: any): {
     trackerRef: any;
-    applyFixedPos: () => void;
+    applyFixedPos: () => any;
     removeFixedPos: () => any;
     fixPos: any;
 };

package/dist/{components/ActionMenu/utils → utils}/usePopOutOfOverflowHiddenParent.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePopOutOfOverflowHiddenParent = void 0;
 var react_1 = require("react");
-var useScroll_1 = require("../../../utils/customHooks/useScroll");
+var useScroll_1 = require("./customHooks/useScroll");
 //HOW TO USE
 /**
  * this utility is useful when action menus or dropdowns are
@@ -46,20 +46,17 @@ var usePopOutOfOverflowHiddenParent = function (popOutOfOverflowHiddenParent) {
     var trackerRef = (0, react_1.useRef)(null);
     var _a = (0, react_1.useState)(undefined), fixPos = _a[0], setFixPos = _a[1];
     var getBoundingClientRect = function () { var _a; return (_a = trackerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };
-    var applyFixedPos = function () {
-        setFixPos(getBoundingClientRect());
-    };
+    var applyFixedPos = function () { return setFixPos(getBoundingClientRect()); };
     var updateFixedPos = function (e) {
         /**
          * only if popOut... prop is enabled, AND
          * if an initial fixedPos has been applied,
          * then update it
          */
-        console.log({ 'BC': getBoundingClientRect() });
         if (popOutOfOverflowHiddenParent)
             setFixPos(function (prev) { return prev && getBoundingClientRect(); });
     };
-    (0, useScroll_1.useScroll)(updateFixedPos, { noThrottle: true });
+    (0, useScroll_1.useScroll)(updateFixedPos, { noThrottle: true, detectScrollInAllDivs: true });
     var removeFixedPos = function () { return setFixPos(undefined); };
     return ({ trackerRef: trackerRef, applyFixedPos: applyFixedPos, removeFixedPos: removeFixedPos, fixPos: fixPos });
 };

package/package.json

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