oolib 2.21.3 → 2.23.0

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

@@ -1,4 +1,4 @@
-export function ActionMenu({ icon, invert, actions, align, iconSize, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent }: {
+export function ActionMenu({ icon, invert, actions, align, iconSize, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, storybookPreview }: {
     icon?: string;
     invert: any;
     actions: any;
@@ -6,4 +6,6 @@ export function ActionMenu({ icon, invert, actions, align, iconSize, ButtonComp:
     iconSize?: string;
     ButtonComp?: string;
     setShowActions: any;
+    popOutOfOverflowHiddenParent?: boolean;
+    storybookPreview: any;
 }): JSX.Element;

package/dist/components/ActionMenu/index.js

@@ -39,17 +39,19 @@ var react_1 = __importStar(require("react"));
 var ButtonComps = __importStar(require("../Buttons"));
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
-var utils_1 = require("./utils");
+var useHandleClickOutside_1 = require("./utils/useHandleClickOutside");
+var usePopOutOfOverflowHiddenParent_1 = require("./utils/usePopOutOfOverflowHiddenParent");
 var styled_1 = require("./styled");
 //
 var ActionMenu = function (_a) {
     var _b, _c;
     var _d = _a.icon, icon = _d === void 0 ? 'DotsThree' : _d, //most likely will never change
-    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, _g = _a.ButtonComp, _ButtonComp = _g === void 0 ? 'ButtonGhost' : _g, setShowActionsInParent = _a.setShowActions;
+    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, _g = _a.ButtonComp, _ButtonComp = _g === void 0 ? 'ButtonGhost' : _g, setShowActionsInParent = _a.setShowActions, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, storybookPreview = _a.storybookPreview //for storybook purposes
+    ;
     var actionMenuRef = (0, react_1.useRef)(null);
     var optionsWrapperRef = (0, react_1.useRef)(null);
-    var _h = (0, react_1.useState)(false), showActions = _h[0], setShowActions = _h[1];
-    (0, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
+    var _j = (0, react_1.useState)(false), showActions = _j[0], setShowActions = _j[1];
+    (0, useHandleClickOutside_1.useHandleClickOutside)(actionMenuRef, setShowActions);
     if (!actions || actions.length === 0)
         return null;
     var getOpsRect = function () { var _a; return (_a = optionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };
@@ -60,17 +62,32 @@ var ActionMenu = function (_a) {
     };
     (0, react_1.useEffect)(function () {
         setShowActionsInParent && setShowActionsInParent(showActions);
+        if (popOutOfOverflowHiddenParent) {
+            if (showActions)
+                applyFixedPos();
+            else
+                removeFixedPos();
+        }
     }, [showActions]);
+    //on unmount, setShowActionsInParent to false, obviously.
+    (0, react_1.useEffect)(function () {
+        return function () { return setShowActionsInParent && setShowActionsInParent(false); };
+    }, []);
+    var _k = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _k.fixPos, applyFixedPos = _k.applyFixedPos, removeFixedPos = _k.removeFixedPos, trackerRef = _k.trackerRef;
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
         react_1.default.createElement(ButtonComp, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, onClick: function (e) {
                 setShowActions(!showActions);
             }, active: showActions }),
+        popOutOfOverflowHiddenParent &&
+            react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef }),
         react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({}, {
+            id: 'dropmenu',
             align: align,
             invert: invert,
             optionsHeight: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.height,
             optionsWidth: (_c = getOpsRect()) === null || _c === void 0 ? void 0 : _c.width,
-            showActions: showActions
+            showActions: showActions,
+            fixPos: fixPos
         }),
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
                 return (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (ev) {

package/dist/components/ActionMenu/styled.d.ts

@@ -1,4 +1,5 @@
 export const StyledActionMenu: any;
+export const StyledActionMenuTracker: any;
 export const StyledActionsDropMenu: any;
 export const StyledOptionsWrapper: any;
 export const StyledOption: any;

package/dist/components/ActionMenu/styled.js

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledOption = exports.StyledOptionsWrapper = exports.StyledActionsDropMenu = exports.StyledActionMenu = void 0;
+exports.StyledOption = exports.StyledOptionsWrapper = exports.StyledActionsDropMenu = exports.StyledActionMenuTracker = exports.StyledActionMenu = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
@@ -42,18 +42,47 @@ var pointerHeight = 10;
  */
 var offset = 10;
 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_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  z-index: 1001;\n  transform-origin: left top;\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  ", "\n"], ["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  z-index: 1001;\n  transform-origin: left top;\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  ", "\n"])), (0, mixins_1.transition)("height"), function (_a) {
+var trackerSize = 5;
+exports.StyledActionMenuTracker = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  ", "\n  bottom: 0;\n  transform: translateY(100%);\n  ", ";\n"], ["\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  ", "\n  bottom: 0;\n  transform: translateY(100%);\n  ", ";\n"])), trackerSize, trackerSize, function (_a) {
+    var align = _a.align;
+    switch (align) {
+        case "left":
+            return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          left: -", "px;\n        "], ["\n          left: -", "px;\n        "])), offset);
+        case "right":
+            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          right: -", "px;\n        "], ["\n          right: -", "px;\n        "])), offset + trackerSize);
+        case "center":
+            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 1.5rem; //actionMenu button half width\n        "], ["\n          left: 1.5rem; //actionMenu button half width\n        "])));
+    }
+}, function (_a) {
+    var storybookPreview = _a.storybookPreview;
+    return storybookPreview && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject([" background-color: ", ""], [" background-color: ", ""])), themes_1.colors.red);
+});
+exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n\n  z-index: 1001;\n\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n"], ["\n  ", "\n\n  z-index: 1001;\n\n  ", ";\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+    var fixPos = _a.fixPos;
+    return fixPos
+        ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          z-index: 1000;\n          ", "\n        "], ["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          z-index: 1000;\n          ", "\n        "])), fixPos.y, fixPos.x, function (_a) {
+            var align = _a.align;
+            switch (align) {
+                case "center":
+                    return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                  transform: translate(-50%, 0);\n                "], ["\n                  transform: translate(-50%, 0);\n                "])));
+                case "right":
+                    return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                  transform: translate(-100%, 0);\n                "], ["\n                  transform: translate(-100%, 0);\n                "])));
+            }
+        }) : (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          position: absolute;\n          bottom: 0;\n          transform: translateY(100%);\n          transform-origin: left top;\n          ", "\n        "], ["\n          position: absolute;\n          bottom: 0;\n          transform: translateY(100%);\n          transform-origin: left top;\n          ", "\n        "])), function (_a) {
+        var align = _a.align;
+        return align === "center"
+            ? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                  left: 1.5rem;\n                  transform: translate(-50%, 100%);\n                "], ["\n                  left: 1.5rem;\n                  transform: translate(-50%, 100%);\n                "]))) : (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                  ", ": ", "px;\n                "], ["\n                  ", ": ", "px;\n                "])), align, 0 - offset);
+    });
+}, (0, mixins_1.transition)("height"), function (_a) {
     var optionsWidth = _a.optionsWidth;
-    return (optionsWidth + (offset * 2)) + "px";
+    return optionsWidth + offset * 2 + "px";
 }, function (_a) {
     var showActions = _a.showActions, optionsHeight = _a.optionsHeight;
-    return showActions ? (optionsHeight + pointerHeight + offset) + "px" || "auto" : 0;
-}, function (_a) {
-    var align = _a.align;
-    return align == "center"
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          left: 1.5rem;\n          transform: translate(-50%, 100%);\n        "], ["\n          left: 1.5rem;\n          transform: translate(-50%, 100%);\n        "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          ", ": ", "px;\n        "], ["\n          ", ": ", "px;\n        "])), align, 0 - offset);
+    return showActions
+        ? optionsHeight + pointerHeight + offset + "px" || "auto"
+        : 0;
 });
-exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  margin: 0 ", "px;\n  \n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid \n      ", ";\n    z-index: 1;\n  }\n"], ["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  margin: 0 ", "px;\n  \n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid \n      ", ";\n    z-index: 1;\n  }\n"])), function (_a) {
+exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  margin: 0 ", "px;\n\n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid\n      ", ";\n    z-index: 1;\n  }\n"], ["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  margin: 0 ", "px;\n\n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid\n      ", ";\n    z-index: 1;\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor70 : greyColor5);
 }, function (_a) {
@@ -62,23 +91,23 @@ exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_9
 }, offset, function (_a) {
     var align = _a.align;
     return align === "center"
-        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            left: 50%;\n            transform: translateX(-50%);\n          "], ["\n            left: 50%;\n            transform: translateX(-50%);\n          "]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            ", ": 0.5rem;\n          "], ["\n            ", ": 0.5rem;\n          "])), align);
+        ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n            left: 50%;\n            transform: translateX(-50%);\n          "], ["\n            left: 50%;\n            transform: translateX(-50%);\n          "]))) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n            ", ": 0.5rem;\n          "], ["\n            ", ": 0.5rem;\n          "])), align);
 }, function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor70 : greyColor5);
 }, function (_a) {
     var align = _a.align;
     return align === "center"
-        ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            left: 50%;\n            transform: translateX(-50%);\n          "], ["\n            left: 50%;\n            transform: translateX(-50%);\n          "]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            ", ": 0.65rem;\n          "], ["\n            ", ": 0.65rem;\n          "])), align);
+        ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n            left: 50%;\n            transform: translateX(-50%);\n          "], ["\n            left: 50%;\n            transform: translateX(-50%);\n          "]))) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n            ", ": 0.65rem;\n          "], ["\n            ", ": 0.65rem;\n          "])), align);
 }, function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor80 : white);
 });
-exports.StyledOption = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.button(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? white : greyColor100);
 }, (0, mixins_1.transition)("background-color"), function (_a) {
     var invert = _a.invert;
-    return invert ? greyColor70 : greyColor10;
+    return (invert ? greyColor70 : greyColor10);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+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, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/components/ActionMenu/utils/useHandleClickOutside.d.ts

@@ -0,0 +1 @@
+export function useHandleClickOutside(ref: any, setShowOptions: any, options?: {}): void;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTrackFocus = void 0;
+exports.useHandleClickOutside = void 0;
 var react_1 = require("react");
-var useTrackFocus = function (ref, setShowOptions, options) {
+var useHandleClickOutside = function (ref, setShowOptions, options) {
     if (options === void 0) { options = {}; }
     var _a = options.enabled, enabled = _a === void 0 ? true : _a;
     var handleClickOutside = function (event) {
@@ -18,4 +18,4 @@ var useTrackFocus = function (ref, setShowOptions, options) {
         return function () { return document.removeEventListener('mousedown', handleClickOutside); };
     }, [enabled]);
 };
-exports.useTrackFocus = useTrackFocus;
+exports.useHandleClickOutside = useHandleClickOutside;

package/dist/components/ActionMenu/utils/usePopOutOfOverflowHiddenParent.d.ts

@@ -0,0 +1,6 @@
+export function usePopOutOfOverflowHiddenParent(popOutOfOverflowHiddenParent: any): {
+    trackerRef: import("react").MutableRefObject<any>;
+    applyFixedPos: () => void;
+    removeFixedPos: () => void;
+    fixPos: any;
+};

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopOutOfOverflowHiddenParent = void 0;
+var react_1 = require("react");
+var useScroll_1 = require("../../../utils/customHooks/useScroll");
+//HOW TO USE
+/**
+ * this utility is useful when action menus or dropdowns are
+ * used inside parents that have overflow hidden.
+ *
+ * When the dropdown / menu opens, we need it to show,
+ * and sometimes its not possible to reposition the dropdown / menu
+ * outside of the overflow hidden container.
+ *
+ * In such cases, we can use this hook.
+ * The way to use is this:
+ *
+ * 1// initiate -> (see what it returns below)
+ *
+ * 2// attach the ref & pass fixPos as a prop to whatever
+ * wrapper is wrapping the menu or dropdown.
+ *
+ * 3// whereever you are tracking the dropdown/menu opening or closing,
+ * there you can write a function to
+ * trigger applyFixedPos() when open
+ * and removeFixedPos() when closed
+ * for example in ActionMenu we can pass a prop called 'setShowActions'
+ * which listens to open-close changes
+ *
+ * And thats it. it should work.
+ *
+ * Current Usage :
+ * 1. In ImageEditor component > to make the ActionMenu stick out of parent
+ * 2. In TableRowElem component > to make the ActionMenu stick out of parent
+ *
+ * Known Issues :
+ * 1. If you scroll while the menu is open, it remains fixed to that part of the
+ * screen since we are using fixed positioning.
+ * 2. When you close the menu, fixed position is removed, so momentarily you see the
+ * menu disappearing behind the overflow hidden parent. Minor, but an issue none the less.
+ *
+ *
+ *
+ */
+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 updateFixedPos = function (e) {
+        /**
+         * only if popOut... prop is enabled, AND
+         * if an initial fixedPos has been applied,
+         * then update it
+         */
+        if (popOutOfOverflowHiddenParent)
+            setFixPos(function (prev) { return prev && getBoundingClientRect(); });
+    };
+    (0, useScroll_1.useScroll)(updateFixedPos, { noThrottle: true });
+    var removeFixedPos = function () { return setFixPos(undefined); };
+    return ({ trackerRef: trackerRef, applyFixedPos: applyFixedPos, removeFixedPos: removeFixedPos, fixPos: fixPos });
+};
+exports.usePopOutOfOverflowHiddenParent = usePopOutOfOverflowHiddenParent;

package/dist/components/Buttons/index.js

@@ -42,9 +42,9 @@ var lodash_1 = require("lodash");
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var DisplayIcon = function (_a) {
-    var icon = _a.icon, size = _a.size;
+    var icon = _a.icon, size = _a.size, color = _a.color;
     var IconComp = icons_1.icons[icon];
-    return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" }));
+    return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: "bold" }));
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;

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

@@ -19,7 +19,7 @@ var SIZES = {
     S: "3rem",
     M: "4rem",
 };
-var ButtonPrimary = (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+var ButtonPrimary = (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -47,7 +47,7 @@ var ButtonPrimary = (0, styled_components_2.css)(templateObject_3 || (templateOb
         ? greyColor100
         : (0, utilsOolib_1.getPrimaryColorText)(colors);
 });
-var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n    &:hover {\n    background-color: ", ";\n    color: ", "; \n  }\n"], ["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n    &:hover {\n    background-color: ", ";\n    color: ", "; \n  }\n"])), function (_a) {
+var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n    @media (hover: hover) {\n      &:hover {\n      background-color: ", ";\n      color: ", "; \n    }\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n    @media (hover: hover) {\n      &:hover {\n      background-color: ", ";\n      color: ", "; \n    }\n  }\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -92,7 +92,7 @@ var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (template
     var colors = _a.theme.colors;
     return (0, utilsOolib_1.getPrimaryColorText)(colors);
 });
-var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -128,7 +128,7 @@ var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateOb
         ? greyColor80
         : (0, utilsOolib_1.getPrimaryColor40)(colors);
 });
-var ButtonGhost = (0, styled_components_2.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", "; //$white;\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", "; //$white;\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var ButtonGhost = (0, styled_components_2.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", "; //$white;\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  background-color: ", "; //$white;\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
     var active = _a.active, colors = _a.theme.colors;
     return active ? (0, utilsOolib_1.getPrimaryColor40)(colors) : "inherit";
 }, function (_a) {

package/dist/components/LoadersAndProgress/{CircleLoader → LoaderCircle}/index.d.ts

@@ -1,4 +1,4 @@
-export function CircleLoader({ isBlock, blockHeight, L, S, M, ...props }: {
+export function LoaderCircle({ isBlock, blockHeight, L, S, M, ...props }: {
     [x: string]: any;
     isBlock?: boolean;
     blockHeight?: string;

package/dist/components/LoadersAndProgress/{CircleLoader → LoaderCircle}/index.js

@@ -25,18 +25,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircleLoader = void 0;
+exports.LoaderCircle = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = require("styled-components");
 var utils_1 = require("../utils");
 var styled_1 = require("../styled");
-function CircleLoader(_a) {
+function LoaderCircle(_a) {
     var _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c, L = _a.L, S = _a.S, M = _a.M, props = __rest(_a, ["isBlock", "blockHeight", "L", "S", "M"]);
     var size = L ? 'L' : S ? 'S' : 'M'; //defaults to M if no L or S, so techinically, the M prop isnt really required..
     var renderLoaderDiv = function () { return react_1.default.createElement(LoaderDiv, __assign({}, __assign(__assign({}, props), { isBlock: isBlock, size: size }))); };
     return !isBlock ? (renderLoaderDiv()) : (react_1.default.createElement(styled_1.StyledLoaderOverlay, { blockHeight: blockHeight }, renderLoaderDiv()));
 }
-exports.CircleLoader = CircleLoader;
+exports.LoaderCircle = LoaderCircle;
 var LoaderDiv = function (_a) {
     var size = _a.size, children = _a.children, _text = _a.text, debug = _a.debug, invert = _a.invert, isBlock = _a.isBlock;
     var theme = (0, styled_components_1.useTheme)();

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

@@ -1,2 +1,2 @@
 export { ProgressBar } from "./ProgressBar";
-export { CircleLoader } from "./CircleLoader";
+export { LoaderCircle } from "./LoaderCircle";

package/dist/components/LoadersAndProgress/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircleLoader = exports.ProgressBar = void 0;
+exports.LoaderCircle = exports.ProgressBar = void 0;
 var ProgressBar_1 = require("./ProgressBar");
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return ProgressBar_1.ProgressBar; } });
-var CircleLoader_1 = require("./CircleLoader");
-Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return CircleLoader_1.CircleLoader; } });
+var LoaderCircle_1 = require("./LoaderCircle");
+Object.defineProperty(exports, "LoaderCircle", { enumerable: true, get: function () { return LoaderCircle_1.LoaderCircle; } });

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.d.ts

@@ -1,9 +1,9 @@
-export function CheckboxInput({ option, id, onChange, S, value, invert, disabled, rightWrongResult, }: {
+export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, disabled, rightWrongResult, }: {
     option: any;
-    id: any;
-    onChange: any;
+    onClick: any;
     S: any;
-    value: any;
+    inputStyle: any;
+    value?: any[];
     invert: any;
     disabled: any;
     rightWrongResult: any;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -18,6 +18,7 @@ exports.CheckboxInput = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../../../../icons");
 var themes_1 = require("../../../../../../themes");
+var Tags_1 = require("../../../../../Tags");
 var Typo_1 = require("../../../../../Typo");
 var styled_1 = require("../../../../styled");
 var utils_1 = require("../../../../utils");
@@ -25,28 +26,21 @@ var styled_2 = require("./styled");
 var Check = icons_1.icons.Check, CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
 var white = themes_1.colors.white, green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100;
 var CheckboxInput = function (_a) {
-    var option = _a.option, id = _a.id, onChange = _a.onChange, S = _a.S, value = _a.value, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
-    var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });
+    var option = _a.option, onClick = _a.onClick, S = _a.S, inputStyle = _a.inputStyle, _b = _a.value, value = _b === void 0 ? [] : _b, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
+    var isSelected = value.find(function (selOp) { return selOp.value === option.value; });
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
-    var handleCheckboxClick = function () {
-        if (!rightWrongResult) { // no toggling if users are being informed of thier choices result
-            onChange(id, isSelected ?
-                value.filter(function (selOp) { return selOp.value !== option.value; })
-                : value.concat(option));
-        }
-    };
     var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
-    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert }, { onClick: handleCheckboxClick }),
+    return inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, __assign({}, { isSelected: isSelected, invert: invert, disabled: disabled }, { onClick: function () { return !disabled && onClick(option, isSelected); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } }))) : (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option, isSelected); } }),
         !rightWrongResult || markingCommand === undefined ?
-            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert }), isSelected && react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16 }))
+            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16 }))
             :
                 ["markCorrect", "revealCorrect"].includes(markingCommand) ?
-                    react_1.default.createElement(CheckSquare, { size: 26, color: green, style: {
+                    react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: green, style: {
                             margin: '-7px -2.8px -7px -3.2px',
                             flexShrink: 0
                         } })
                     : // then wrong
-                        react_1.default.createElement(XSquare, { size: 26, color: red, style: {
+                        react_1.default.createElement(XSquare, { size: S ? 21.5 : 26, color: red, style: {
                                 margin: '-7px -2.8px -7px -3.2px',
                                 flexShrink: 0
                             } }),

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/styled.js

@@ -33,7 +33,13 @@ var utilsOolib_1 = require("../../../../../../utilsOolib");
 var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../themes/mixins");
 var none = themes_1.colors.none, greyColor40 = themes_1.colors.greyColor40;
-exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"])), function (_a) {
+exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"], ["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"])), function (_a) {
+    var S = _a.S;
+    return S ? '1.7rem' : '2rem';
+}, function (_a) {
+    var S = _a.S;
+    return S ? '1.7rem' : '2rem';
+}, function (_a) {
     var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
     return disabled ?
         greyColor40 : invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);

package/dist/components/RadioAndCheckbox/comps/CheckboxList/index.d.ts

@@ -1,14 +1,16 @@
-export function CheckboxList({ id, injectOtherOption, value, onChange, commonIsCorrectDesc, options, optionStyle, rightWrongResult, listType, invert, style, disabled, className, S, readOnly }: {
+export function CheckboxList({ id, injectOtherOption, value: valueProp, onChange, commonIsCorrectDesc, options, saveValueAsString, inputStyle, rightWrongResult, listType, invert, optionsLimit, style, disabled, className, S, readOnly }: {
     id: any;
     injectOtherOption?: boolean;
     value?: any[];
     onChange: any;
     commonIsCorrectDesc: any;
     options: any;
-    optionStyle: any;
+    saveValueAsString: any;
+    inputStyle?: string;
     rightWrongResult: any;
     listType: any;
     invert: any;
+    optionsLimit?: number;
     style: any;
     disabled: any;
     className: any;