oolib 2.22.0 → 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,21 +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(false); };
+        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.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/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.d.ts

@@ -1,8 +1,9 @@
-export function CheckboxInput({ option, onClick, S, value, invert, disabled, rightWrongResult, }: {
+export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, disabled, rightWrongResult, }: {
     option: 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,11 +26,11 @@ 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, onClick = _a.onClick, S = _a.S, value = _a.value, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
+    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 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, S: S }, { onClick: function () { return !rightWrongResult && onClick(option, isSelected); } }),
+    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, S: S }), isSelected && react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16 }))
             :

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

@@ -1,4 +1,4 @@
-export function CheckboxList({ id, injectOtherOption, value: valueProp, onChange, commonIsCorrectDesc, options, saveValueAsString, 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[];
@@ -6,10 +6,11 @@ export function CheckboxList({ id, injectOtherOption, value: valueProp, onChange
     commonIsCorrectDesc: any;
     options: any;
     saveValueAsString: any;
-    optionStyle: any;
+    inputStyle?: string;
     rightWrongResult: any;
     listType: any;
     invert: any;
+    optionsLimit?: number;
     style: any;
     disabled: any;
     className: any;

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

@@ -10,28 +10,57 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.CheckboxList = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var BlockLabel_1 = require("../../../BlockLabel");
 var Tags_1 = require("../../../Tags");
 var TextInputs_1 = require("../../../TextInputs");
+var Buttons_1 = require("../../../Buttons");
 var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
 var utils_1 = require("../../utils");
 var styled_1 = require("../../styled");
 var comps_1 = require("./comps");
 var styled_2 = require("./styled");
+var optionsContainers = {
+    checkbox: styled_1.StyledOptionsContainer,
+    tagSelect: styled_2.StyledTagOptionsContainer,
+};
 var convToString = function (value) { return value.map(function (v) { var _a; return (_a = v.display_desc) !== null && _a !== void 0 ? _a : v.value; }); };
 function CheckboxList(_a) {
-    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, _c = _a.value, valueProp = _c === void 0 ? [] : _c, onChange = _a.onChange, commonIsCorrectDesc = _a.commonIsCorrectDesc, options = _a.options, saveValueAsString = _a.saveValueAsString, optionStyle = _a.optionStyle, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, style = _a.style, //where to attatch this
+    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, _c = _a.value, valueProp = _c === void 0 ? [] : _c, onChange = _a.onChange, commonIsCorrectDesc = _a.commonIsCorrectDesc, options = _a.options, saveValueAsString = _a.saveValueAsString, _d = _a.inputStyle, inputStyle = _d === void 0 ? 'checkbox' : _d, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, _e = _a.optionsLimit, optionsLimit = _e === void 0 ? Infinity : _e, style = _a.style, //where to attatch this
     disabled = _a.disabled, className = _a.className, S = _a.S, readOnly = _a.readOnly;
     var props = arguments[0];
-    var _d = (0, utils_1.genDisplayedOptions)({ injectOtherOption: injectOtherOption, options: options, valueProp: valueProp, saveValueAsString: saveValueAsString }), typicalOptions = _d.typicalOptions, otherOption = _d.otherOption;
+    var shouldHideSomeOptions = options.length > optionsLimit;
+    var _f = (0, react_1.useState)(false), seeMore = _f[0], setSeeMore = _f[1];
+    var _g = (0, utils_1.genDisplayedOptions)({ injectOtherOption: injectOtherOption, options: options, valueProp: valueProp, saveValueAsString: saveValueAsString }), typicalOptions = _g.typicalOptions, injectedOtherOption = _g.injectedOtherOption;
     var value = saveValueAsString ?
-        typicalOptions.concat(otherOption).filter(function (op) { var _a; return valueProp.includes((_a = op.display_desc) !== null && _a !== void 0 ? _a : op.value); })
+        typicalOptions
+            .concat(injectedOtherOption || [])
+            .filter(function (op) { var _a; return valueProp.includes((_a = op.display_desc) !== null && _a !== void 0 ? _a : op.value); })
         : valueProp;
     var handleTextInputChange = function (text) {
         var newValue = value.map(function (selectedOp) { return (selectedOp.value === 'other' ? (0, utils_1.genOtherValueObject)(text) : selectedOp); });
@@ -53,21 +82,27 @@ function CheckboxList(_a) {
         value: value,
         S: S,
         disabled: disabled,
+        inputStyle: inputStyle,
         rightWrongResult: rightWrongResult,
         onClick: handleCheckboxClick,
     };
+    var OptionsContainer = optionsContainers[inputStyle];
     return (react_1.default.createElement("div", { className: className, id: id },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         readOnly ? (react_1.default.createElement(styled_2.StyledDisplayTagsContainer, null, value === null || value === void 0 ? void 0 : value.map(function (selOp) { return react_1.default.createElement(Tags_1.TagDisplay, { key: selOp.value, invert: invert, display: selOp.display_desc || selOp.display }); }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
-                typicalOptions.map(function (option) {
-                    return react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })));
-                }),
-                injectOtherOption && otherOption && ( //so other box and its textInput act as one entity in the flexbox
+            react_1.default.createElement(OptionsContainer, { listType: listType, S: S }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
+                typicalOptions.map(function (option, idx) { return idx < optionsLimit && (react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })))); }),
+                shouldHideSomeOptions && // if we have the case of off limit options
+                    (seeMore || rightWrongResult) && //and decided to show them
+                    typicalOptions.slice(optionsLimit).map(function (option) {
+                        return react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })));
+                    }),
+                injectOtherOption && injectedOtherOption && ( //so other box and its textInput act as one entity in the flexbox
                 react_1.default.createElement(styled_1.StyledOtherOptionContainer, { listType: listType },
-                    react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: otherOption }))),
+                    react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: injectedOtherOption }))),
                     otherOpInSelectees && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, __assign({}, { listType: listType, rightWrongResult: rightWrongResult }),
                         react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: otherOpInSelectees.display_desc, onChange: function (k, v) { return handleTextInputChange(v); } }, { disabled: disabled, invert: invert, S: S }))))))),
+            shouldHideSomeOptions && !rightWrongResult && (react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setSeeMore(!seeMore); }, value: !seeMore ? 'See More' : 'See Less', style: inputStyle != 'tagSelect' ? { marginTop: 10 } : {} })),
             rightWrongResult && commonIsCorrectDesc &&
                 react_1.default.createElement(styled_1.StyledCorrectMessage, null, commonIsCorrectDesc)))));
 }

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

@@ -1 +1,2 @@
 export const StyledDisplayTagsContainer: any;
+export const StyledTagOptionsContainer: any;

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

@@ -7,7 +7,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledDisplayTagsContainer = void 0;
+exports.StyledTagOptionsContainer = exports.StyledDisplayTagsContainer = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.StyledDisplayTagsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n"])));
-var templateObject_1;
+exports.StyledTagOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: ", ";\n  gap: 1rem;\n  padding: 1.5rem 0 2rem 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: ", ";\n  gap: 1rem;\n  padding: 1.5rem 0 2rem 0;\n"])), function (_a) {
+    var listType = _a.listType;
+    return listType === 'vertical' ? 'column' : 'row';
+});
+var templateObject_1, templateObject_2;

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index.js

@@ -29,7 +29,7 @@ var RadioInput = function (_a) {
     var isSelected = option.value === (value === null || value === void 0 ? void 0 : value.value);
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
     var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
-    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && onClick(option); } }),
+    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option); } }),
         !rightWrongResult || markingCommand === undefined ?
             react_1.default.createElement(styled_2.StyledRadioInput, __assign({ className: 'btn' }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert, S: S }))
             :

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

@@ -1,4 +1,4 @@
-export function RadioList({ id, injectOtherOption, value: valueProp, onChange, saveValueAsString, options, commonIsCorrectDesc, rightWrongResult, listType, disabled, invert, style, className, readOnly, S }: {
+export function RadioList({ id, injectOtherOption, value: valueProp, onChange, saveValueAsString, options, commonIsCorrectDesc, rightWrongResult, optionsLimit, listType, disabled, invert, style, className, readOnly, S }: {
     id: any;
     injectOtherOption?: boolean;
     value: any;
@@ -7,6 +7,7 @@ export function RadioList({ id, injectOtherOption, value: valueProp, onChange, s
     options: any;
     commonIsCorrectDesc: any;
     rightWrongResult: any;
+    optionsLimit?: number;
     listType: any;
     disabled: any;
     invert: any;

package/dist/components/RadioAndCheckbox/comps/RadioList/index.js

@@ -10,25 +10,51 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.RadioList = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var BlockLabel_1 = require("../../../BlockLabel");
 var Tags_1 = require("../../../Tags");
 var TextInputs_1 = require("../../../TextInputs");
+var Buttons_1 = require("../../../Buttons");
 var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
 var styled_1 = require("../../styled");
 var utils_1 = require("../../utils");
 var comps_1 = require("./comps");
 function RadioList(_a) {
-    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, valueProp = _a.value, onChange = _a.onChange, saveValueAsString = _a.saveValueAsString, options = _a.options, commonIsCorrectDesc = _a.commonIsCorrectDesc, rightWrongResult = _a.rightWrongResult, listType = _a.listType, disabled = _a.disabled, invert = _a.invert, style = _a.style, className = _a.className, readOnly = _a.readOnly, S = _a.S;
+    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, valueProp = _a.value, onChange = _a.onChange, saveValueAsString = _a.saveValueAsString, options = _a.options, commonIsCorrectDesc = _a.commonIsCorrectDesc, rightWrongResult = _a.rightWrongResult, _c = _a.optionsLimit, optionsLimit = _c === void 0 ? Infinity : _c, listType = _a.listType, disabled = _a.disabled, invert = _a.invert, style = _a.style, className = _a.className, readOnly = _a.readOnly, S = _a.S;
     var props = arguments[0];
-    var _c = (0, utils_1.genDisplayedOptions)({ injectOtherOption: injectOtherOption, options: options, valueProp: valueProp, saveValueAsString: saveValueAsString }), typicalOptions = _c.typicalOptions, otherOption = _c.otherOption;
+    var shouldHideSomeOptions = options.length > optionsLimit;
+    var _d = (0, react_1.useState)(false), seeMore = _d[0], setSeeMore = _d[1];
+    var _e = (0, utils_1.genDisplayedOptions)({ injectOtherOption: injectOtherOption, options: options, valueProp: valueProp, saveValueAsString: saveValueAsString }), typicalOptions = _e.typicalOptions, injectedOtherOption = _e.injectedOtherOption;
     var value = saveValueAsString ?
-        typicalOptions.concat(otherOption).find(function (op) { var _a; return ((_a = op.display_desc) !== null && _a !== void 0 ? _a : op.value) === valueProp; })
+        typicalOptions
+            .concat(injectedOtherOption)
+            .filter(Boolean)
+            .find(function (op) { var _a; return ((_a = op.display_desc) !== null && _a !== void 0 ? _a : op.value) === valueProp; })
         : valueProp;
     var correctOp = options.find(function (op) { return op.isCorrect; }); //
     var handleInputClick = function (option) {
@@ -51,15 +77,19 @@ function RadioList(_a) {
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         readOnly ? ((value === null || value === void 0 ? void 0 : value.display) && react_1.default.createElement(Tags_1.TagDisplay, { display: value.display_desc || value.display, invert: invert }) //prioritzing display_desc since display of 'other' option is === other
         ) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType, style: style }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
-                typicalOptions.map(function (option) {
-                    return react_1.default.createElement(comps_1.RadioInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })));
-                }),
-                injectOtherOption && otherOption && ( //so other box and its textInput act as one entity in the flexbox
+            react_1.default.createElement(styled_1.StyledOptionsContainer, __assign({}, { listType: listType, style: style, S: S }), typicalOptions === null || typicalOptions === void 0 ? void 0 :
+                typicalOptions.map(function (option, idx) { return idx < optionsLimit && (react_1.default.createElement(comps_1.RadioInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })))); }),
+                shouldHideSomeOptions && // if we have the case of off limit options
+                    (seeMore || rightWrongResult) && //and decided to show them
+                    typicalOptions.slice(optionsLimit).map(function (option) {
+                        return react_1.default.createElement(comps_1.RadioInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })));
+                    }),
+                injectOtherOption && injectedOtherOption && ( //so other box and its textInput act as one entity in the flexbox
                 react_1.default.createElement(styled_1.StyledOtherOptionContainer, { listType: listType },
-                    react_1.default.createElement(comps_1.RadioInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: otherOption }))),
+                    react_1.default.createElement(comps_1.RadioInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: injectedOtherOption }))),
                     (value === null || value === void 0 ? void 0 : value.value) === "other" && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, __assign({}, { listType: listType, rightWrongResult: rightWrongResult }),
                         react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: value.display_desc, onChange: function (k, v) { return handleTextInputChange(v); } }, { disabled: disabled, invert: invert, S: S }))))))),
+            shouldHideSomeOptions && !rightWrongResult && (react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setSeeMore(!seeMore); }, value: !seeMore ? 'See More' : 'See Less', style: { marginTop: 10 } })),
             /*
             the minute the results have come in, irrespective of user's answer
             being right or wrong, we always show an explanation

package/dist/components/RadioAndCheckbox/styled.js

@@ -34,9 +34,15 @@ var Typo_1 = require("../Typo");
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var green = themes_1.colors.green, greyColor80 = themes_1.colors.greyColor80;
-exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem 2rem;\n  align-items: center;\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem 2rem;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
+exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  align-items: center;\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  align-items: center;\n\n  ", "\n"])), function (_a) {
+    var S = _a.S;
+    return S ? '0.7rem 1.5rem' : '1rem 2rem';
+}, function (_a) {
     var listType = _a.listType;
-    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: column;\n      gap: 1.5rem;\n      align-items: initial;\n    "], ["\n      flex-direction: column;\n      gap: 1.5rem;\n      align-items: initial;\n    "]))) :
+    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: column;\n      gap: ", ";\n      align-items: initial;\n    "], ["\n      flex-direction: column;\n      gap: ", ";\n      align-items: initial;\n    "])), function (_a) {
+        var S = _a.S;
+        return S ? '1rem' : '1.5rem';
+    }) :
         '';
 });
 exports.StyledOption = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"])), function (_a) {
@@ -61,5 +67,5 @@ exports.StyledOtherTextInputWrapper = styled_components_1.default.div(templateOb
     var listType = _a.listType;
     return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["margin-left: 2.5rem;"], ["margin-left: 2.5rem;"]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["width: 28rem"], ["width: 28rem"])));
 }, (0, mixins_1.mediaQuery)('sm'));
-exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  padding-left: 3.3rem;\n  padding-top: 1rem;\n"], ["\n  color: ", ";\n  padding-left: 3.3rem;\n  padding-top: 1rem;\n"])), green);
+exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  padding-top: 1rem;\n"], ["\n  color: ", ";\n  padding-top: 1rem;\n"])), green);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/components/RadioAndCheckbox/utils.d.ts

@@ -15,5 +15,8 @@ export function genDisplayedOptions({ injectOtherOption, options, valueProp, sav
     saveValueAsString: any;
 }): {
     typicalOptions: any;
-    otherOption: any;
+    injectedOtherOption?: undefined;
+} | {
+    typicalOptions: any;
+    injectedOtherOption: any;
 };

package/dist/components/RadioAndCheckbox/utils.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.genDisplayedOptions = exports.genOtherValueObject = exports.getMarkingCommand = void 0;
-var genValueFromDisplay_1 = require("../../utils/genValueFromDisplay");
+var formatTextToCamelCase_1 = require("../../utils/formatTextToCamelCase");
+var toArray_1 = require("../../utils/toArray");
 var getMarkingCommand = function (_a) {
     var option = _a.option, isSelected = _a.isSelected;
     if (isSelected) {
@@ -14,7 +15,7 @@ var getMarkingCommand = function (_a) {
 };
 exports.getMarkingCommand = getMarkingCommand;
 var genOtherValueObject = function (text) {
-    var value_desc = (0, genValueFromDisplay_1.genValueFromDisplay)(text);
+    var value_desc = (0, formatTextToCamelCase_1.formatTextToCamelCase)(text);
     return {
         value: "other",
         display_desc: text,
@@ -25,21 +26,24 @@ var genOtherValueObject = function (text) {
 exports.genOtherValueObject = genOtherValueObject;
 var genDisplayedOptions = function (_a) {
     var injectOtherOption = _a.injectOtherOption, options = _a.options, valueProp = _a.valueProp, saveValueAsString = _a.saveValueAsString;
-    var otherOption = options.find(function (op) { return op.value === "other"; }); // if options has the other object already
-    if (otherOption)
+    /*
+    if options has the other object already
+    then do none of this inject business
+    */
+    if (options.find(function (op) { return op.value === "other"; }) ||
+        !injectOtherOption)
         return {
-            typicalOptions: options.filter(function (op) { return op.value !== 'other'; }),
-            otherOption: injectOtherOption ? otherOption : {}
+            typicalOptions: options
         };
-    var OtherValInValueProp = (valueProp instanceof Array ? valueProp : [valueProp]).find(function (v) {
+    var OtherValInValueProp = (0, toArray_1.toArray)(valueProp).find(function (v) {
         return saveValueAsString ?
             options.every(function (op) { return op.value !== v; })
             : (v === null || v === void 0 ? void 0 : v.value) === 'other';
     });
-    otherOption = saveValueAsString ?
+    var injectedOtherOption = saveValueAsString ?
         { value: "other", display: "Other", display_desc: (OtherValInValueProp || '') }
         :
             OtherValInValueProp || { value: "other", display: "Other", display_desc: '' };
-    return { typicalOptions: options, otherOption: otherOption };
+    return { typicalOptions: options, injectedOtherOption: injectedOtherOption };
 };
 exports.genDisplayedOptions = genDisplayedOptions;

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

@@ -17,13 +17,14 @@ export function TagClear({ id, display, value, M, XS, invert, onClick, variant,
     variant?: string;
     grey: any;
 }): JSX.Element;
-export function TagSelect({ onClick, isSelected, display, value, M, XS, style, onMouseDown }: {
+export function TagSelect({ onClick, isSelected, display, value, M, XS, invert, style, onMouseDown }: {
     onClick: any;
     isSelected?: boolean;
     display: any;
     value: any;
     M: any;
     XS: any;
+    invert: any;
     style: any;
     onMouseDown: any;
 }): JSX.Element;

package/dist/components/Tags/index.js

@@ -56,7 +56,7 @@ function TagClear(_a) {
 }
 exports.TagClear = TagClear;
 function TagSelect(_a) {
-    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, style = _a.style, onMouseDown = _a.onMouseDown;
+    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, invert = _a.invert, style = _a.style, onMouseDown = _a.onMouseDown;
     var _c = (0, react_1.useState)(isSelected), selected = _c[0], setSelected = _c[1];
     var handleOnClick = function () {
         setSelected(!selected);
@@ -69,7 +69,7 @@ function TagSelect(_a) {
     }, [isSelected]);
     var size = M ? 'M' : XS ? 'XS' : 'S';
     var TYPO_COMP = getTypoComp(size);
-    return (react_1.default.createElement(index_styled_1.StyledTagSelect, { onClick: onMouseDown ? function () { return null; } : handleOnClick, selected: selected, size: size, style: style, onMouseDown: onMouseDown },
+    return (react_1.default.createElement(index_styled_1.StyledTagSelect, { invert: invert, onClick: onMouseDown ? function () { return null; } : handleOnClick, selected: selected, size: size, style: style, onMouseDown: onMouseDown },
         react_1.default.createElement(TYPO_COMP, null, display)));
 }
 exports.TagSelect = TagSelect;

package/dist/utils/_EXPORTS/index.d.ts

@@ -3,4 +3,6 @@ export { setVal } from "../getterSetterDeleter/setVal";
 export { deleteVal } from "../getterSetterDeleter/deleteVal";
 export { getBlockLabelProps } from "../getBlockLabelProps";
 export { injectHttps } from "../injectHttps";
-export { genValueFromDisplay } from "../genValueFromDisplay";
+export { formatTextToCamelCase } from "../formatTextToCamelCase";
+export { toArray } from "../toArray";
+export { useScroll } from "../customHooks/useScroll";

package/dist/utils/_EXPORTS/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.genValueFromDisplay = exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
+exports.useScroll = exports.toArray = 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; } });
@@ -13,5 +13,10 @@ var getBlockLabelProps_1 = require("../getBlockLabelProps");
 Object.defineProperty(exports, "getBlockLabelProps", { enumerable: true, get: function () { return getBlockLabelProps_1.getBlockLabelProps; } });
 var injectHttps_1 = require("../injectHttps");
 Object.defineProperty(exports, "injectHttps", { enumerable: true, get: function () { return injectHttps_1.injectHttps; } });
-var genValueFromDisplay_1 = require("../genValueFromDisplay");
-Object.defineProperty(exports, "genValueFromDisplay", { enumerable: true, get: function () { return genValueFromDisplay_1.genValueFromDisplay; } });
+var formatTextToCamelCase_1 = require("../formatTextToCamelCase");
+Object.defineProperty(exports, "formatTextToCamelCase", { enumerable: true, get: function () { return formatTextToCamelCase_1.formatTextToCamelCase; } });
+var toArray_1 = require("../toArray");
+Object.defineProperty(exports, "toArray", { enumerable: true, get: function () { return toArray_1.toArray; } });
+//custom hooks
+var useScroll_1 = require("../customHooks/useScroll");
+Object.defineProperty(exports, "useScroll", { enumerable: true, get: function () { return useScroll_1.useScroll; } });

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

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

package/dist/utils/customHooks/useScroll.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScroll = void 0;
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+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);
+        return function () { return window.removeEventListener('scroll', fnToUse); };
+    }, [options.loading]);
+};
+exports.useScroll = useScroll;

package/dist/utils/formatTextToCamelCase.d.ts

@@ -0,0 +1 @@
+export function formatTextToCamelCase(text: any): any;

package/dist/utils/{genValueFromDisplay.js → formatTextToCamelCase.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.genValueFromDisplay = void 0;
-var genValueFromDisplay = function (text) {
+exports.formatTextToCamelCase = void 0;
+var formatTextToCamelCase = function (text) {
     var value_desc = ( // genrating a value text abiding js conventions (camelCased)
     text
         .trim()
@@ -12,4 +12,4 @@ var genValueFromDisplay = function (text) {
         .join(""));
     return value_desc;
 };
-exports.genValueFromDisplay = genValueFromDisplay;
+exports.formatTextToCamelCase = formatTextToCamelCase;

package/dist/utils/toArray.d.ts

@@ -0,0 +1 @@
+export function toArray(property: any): any[];

package/dist/utils/toArray.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toArray = void 0;
+var toArray = function (property) {
+    if (!property &&
+        (property !== false && property !== 0))
+        return []; //return an empty array if the property is falsy. ( except for an explicity 'false' or '0' value )
+    if (property.constructor === Array)
+        return property;
+    //else
+    return [property];
+};
+exports.toArray = toArray;

package/package.json

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

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

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

package/dist/utils/genValueFromDisplay.d.ts

@@ -1 +0,0 @@
-export function genValueFromDisplay(text: any): any;