oolib 2.70.0 → 2.70.1

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.d.ts

@@ -0,0 +1,12 @@
+export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, }: {
+    options: any;
+    optionsRef: any;
+    relativeToRef: any;
+    showOptions: any;
+    invert: any;
+    yOrientation: any;
+    fixPos: any;
+    optionsAnchor: any;
+    children: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsAnimateWrapper = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var OptionsAnimateWrapper = function (_a) {
+    var _b;
+    var _c;
+    var options = _a.options, optionsRef = _a.optionsRef, relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, invert = _a.invert, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children;
+    var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    //we need to recalc when ops length change because, in tag comps, when loading a fixed set of 'loading' options are shown
+    //before the actual number of options are loaded
+    //useMemo wont work cuz it runs before render, and before render ref doesnt exist.
+    var _d = (0, react_1.useState)({
+        width: undefined,
+        openHeight: undefined,
+    }), _e = _d[0], width = _e.width, openHeight = _e.openHeight, setWidthAndOpenHeight = _d[1];
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        setWidthAndOpenHeight({
+            width: (_b = (_a = optionsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width,
+            openHeight: (_d = (_c = optionsRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.height,
+        });
+    }, [options.length]);
+    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: width, openHeight: openHeight, style: __assign({ zIndex: 100000 }, (fixPos
+            ? __assign({ position: "fixed", top: "".concat(fixPos.y -
+                    (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
+                ? { transform: "translateY(-100%)" }
+                : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
+            ? { bottom: 0, transform: "translateY(100%)" }
+            : { top: 0, transform: "translateY(-100%)" })))) }, children));
+};
+exports.OptionsAnimateWrapper = OptionsAnimateWrapper;

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/styled.d.ts

@@ -0,0 +1,2 @@
+/** for lightbox shell */
+export const StyledOptionsAnimateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/styled.js

@@ -0,0 +1,25 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledOptionsAnimateWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var globalVariables_1 = require("../../../../../../globalStyles/globalVariables");
+var mixins_1 = require("../../../../../../themes/mixins");
+/** for lightbox shell */
+exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
+    var isOpen = _a.isOpen, openHeight = _a.openHeight;
+    return isOpen ? (openHeight ? openHeight + 'px' : 'auto') : 0;
+}, function (_a) {
+    var width = _a.width;
+    return width ? width + 'px' : '100%';
+}, (0, mixins_1.transition)('height', 'border-width'), globalVariables_1.globalLightboxStyle, function (_a) {
+    var isOpen = _a.isOpen;
+    return isOpen ? '1px' : 0;
+});
+var templateObject_1;

package/dist/components/Dropdowns/comps/OptionsShell/index.js

@@ -44,13 +44,12 @@ var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOv
 var Buttons_1 = require("../../../Buttons");
 var ModalLarge_1 = require("../../../Modals/ModalLarge");
 var styled_1 = require("./styled");
+var OptionsAnimateWrapper_1 = require("./comps/OptionsAnimateWrapper");
 exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
-    var _b;
-    var _c, _d, _e, _f, _g;
-    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, relativeToRef = _a.relativeToRef, S = _a.S;
+    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _b = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _b === void 0 ? false : _b, relativeToRef = _a.relativeToRef, S = _a.S;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
-    var _j = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _j.fixPos, applyFixedPos = _j.applyFixedPos, removeFixedPos = _j.removeFixedPos, trackerRef = _j.trackerRef;
+    var _c = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _c.fixPos, applyFixedPos = _c.applyFixedPos, removeFixedPos = _c.removeFixedPos, trackerRef = _c.trackerRef;
     (0, react_1.useEffect)(function () {
         if (popOutOfOverflowHiddenParent) {
             if (showOptions)
@@ -59,16 +58,19 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
                 removeFixedPos();
         }
     }, [showOptions]);
-    var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width, openHeight: (_g = (_f = ref.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.height, style: __assign({ zIndex: 100000 }, (fixPos
-                ? __assign({ position: "fixed", top: "".concat(fixPos.y -
-                        (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
-                    ? { transform: "translateY(-100%)" }
-                    : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
-                ? { bottom: 0, transform: "translateY(100%)" }
-                : { top: 0, transform: "translateY(-100%)" })))) },
+        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, __assign({}, {
+            options: options,
+            optionsRef: ref,
+            relativeToRef: relativeToRef,
+            showOptions: showOptions,
+            invert: invert,
+            yOrientation: yOrientation,
+            fixPos: fixPos,
+            optionsAnchor: optionsAnchor,
+            children: children,
+        }),
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
                 // className={className}
                 style: __assign(__assign({}, (lightboxStyle || {})), { position: "absolute", bottom: yOrientation === "top" ? undefined : 0, top: yOrientation === "top" ? 0 : undefined }) }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(ModalLarge_1.ModalLarge, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },

package/package.json

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