oolib 2.105.0 → 2.107.0

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

@@ -1,13 +1,13 @@
-export function Comp({ children, className, style, enableContainerQuery }: {
-    children: any;
-    className: any;
-    style: any;
-    enableContainerQuery: any;
-}, ref: any): React.JSX.Element;
-export const Container: React.ForwardRefExoticComponent<{
-    children: any;
-    className: any;
-    style: any;
-    enableContainerQuery: any;
-} & React.RefAttributes<any>>;
-import React from "react";
+import React, { CSSProperties, ReactNode } from "react";
+export declare const Comp: ({ children, className, style, enableContainerQuery }: {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    enableContainerQuery?: boolean;
+}, ref: React.RefObject<HTMLDivElement> | null) => React.JSX.Element;
+export declare const Container: React.ForwardRefExoticComponent<{
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    enableContainerQuery?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Container/index.styled.d.ts

@@ -1 +1,6 @@
-export const StyledContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { useContainerQuery } from "../../utils/_EXPORTS";
+interface StyledContainerProps {
+    containerQuery?: ReturnType<typeof useContainerQuery>['containerQuery'];
+}
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, StyledContainerProps, never>;
+export {};

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

@@ -32,6 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
 exports.StyledContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 2rem;\n\n  ", "\n"], ["\n  padding: 0 2rem;\n\n  ", "\n"])), function (_a) {
     var containerQuery = _a.containerQuery;
-    return containerQuery ? containerQuery('sm')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            padding: 0 6rem\n          "], ["\n            padding: 0 6rem\n          "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          ", " {\n            padding: 0 6rem;\n          }\n        "], ["\n          ", " {\n            padding: 0 6rem;\n          }\n        "])), (0, mixins_1.mediaQuery)("sm"));
+    return containerQuery
+        ? containerQuery('sm')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 0 6rem;\n        "], ["\n          padding: 0 6rem;\n        "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          ", " {\n            padding: 0 6rem;\n          }\n        "], ["\n          ", " {\n            padding: 0 6rem;\n          }\n        "])), (0, mixins_1.mediaQuery)('sm'));
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -46,6 +46,7 @@ var TextInputs_1 = require("../../../TextInputs");
 var TextLoader_1 = require("../../../LoadersAndProgress/TextLoader");
 var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
 var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
+var VirtualizedWrapper_1 = require("../VirtualizedWrapper");
 /**
  * if used independently, must be used inside a 'position: relative/absolute' div.
  */
@@ -86,32 +87,34 @@ var OptionsSingle = function (_a) {
         react_1.default.createElement("div", { style: { padding: "1rem" } },
             react_1.default.createElement(TextInputs_1.TextInput, { invert: invert, forceFocus: searchBarFocus, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
         react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
-    return (react_1.default.createElement(OptionsShell_1.OptionsShell, __assign({ ref: optionsRef }, {
-        yOrientation: yOrientation,
-        lightboxHeight: lightboxHeight,
-        lightboxStyle: lightboxStyle,
-        options: options,
-        optionsAnchor: optionsAnchor,
-        showOptions: showOptions,
-        SelectComp: SelectComp,
-        handleHideOptions: handleHideOptions,
-        label: label,
-        optionsModalLabel: optionsModalLabel,
-        invert: invert,
-        relativeToRef: relativeToRef,
-        popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent,
-        S: S
-    }),
-        isSearchable && genSearchBar(),
-        options.length === 0
-            ? react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })
-            : options.map(function (d, i) {
-                return (react_1.default.createElement(styled_1.StyledOption, { key: d.value, invert: invert, isSelected: !d.loading && (value === null || value === void 0 ? void 0 : value.value) === d.value, isFocussed: focussedOp === i, className: 'OKE-Dropdown__option', ref: function (el) { return focussedOp === i && el && scrollFocussedOpIntoView(el); }, onClick: function (e) {
-                        if (!d.loading)
-                            handleSelect(d);
-                        setSearchString && setSearchString('');
-                    }, S: S }, d.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: d, optionsClassName: optionsClassName, invert: invert, S: S })))));
-            }),
-        genCreateTagButton && genCreateTagButton(options)));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(OptionsShell_1.OptionsShell, __assign({ ref: optionsRef }, {
+            yOrientation: yOrientation,
+            lightboxHeight: lightboxHeight,
+            lightboxStyle: lightboxStyle,
+            options: options,
+            optionsAnchor: optionsAnchor,
+            showOptions: showOptions,
+            SelectComp: SelectComp,
+            handleHideOptions: handleHideOptions,
+            label: label,
+            optionsModalLabel: optionsModalLabel,
+            invert: invert,
+            relativeToRef: relativeToRef,
+            popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent,
+            S: S
+        }),
+            isSearchable && genSearchBar(),
+            options.length === 0 ?
+                react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })
+                :
+                    react_1.default.createElement(VirtualizedWrapper_1.VirtualizedWrapper, { options: options, lightboxHeight: lightboxHeight, searchString: searchString }, function (option, index, style) {
+                        return react_1.default.createElement(styled_1.StyledOption, { key: option.value, invert: invert, isSelected: !option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value, isFocussed: focussedOp === index, className: 'OKE-Dropdown__option', ref: function (el) { return focussedOp === index && el && scrollFocussedOpIntoView(el); }, onClick: function (e) {
+                                if (!option.loading)
+                                    handleSelect(option);
+                                setSearchString && setSearchString('');
+                            }, S: S, style: style && style }, option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: option, optionsClassName: optionsClassName, invert: invert, S: S }))));
+                    }),
+            genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

package/dist/components/Dropdowns/comps/VirtualizedWrapper/index.d.ts

@@ -0,0 +1,7 @@
+export function VirtualizedWrapper({ children, options, lightboxHeight, searchString }: {
+    children: any;
+    options: any;
+    lightboxHeight: any;
+    searchString: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,66 @@
+"use strict";
+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.VirtualizedWrapper = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var react_virtualized_1 = require("react-virtualized");
+var VirtualizedWrapper = function (_a) {
+    var children = _a.children, options = _a.options, lightboxHeight = _a.lightboxHeight, searchString = _a.searchString;
+    // Create a cache for measuring row heights
+    var cache = (0, react_1.useRef)(new react_virtualized_1.CellMeasurerCache({
+        fixedWidth: true,
+        defaultHeight: 50, // default height for each row before height is calculated
+    }));
+    (0, react_1.useEffect)(function () {
+    }, [options.length, searchString]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, options.length > 30 ?
+        react_1.default.createElement(styled_1.StyledOptionsShellWrapper, { lightboxHeight: lightboxHeight },
+            react_1.default.createElement(react_virtualized_1.AutoSizer, null, function (_a) {
+                var width = _a.width, height = _a.height;
+                return (react_1.default.createElement(react_virtualized_1.List, { width: width, height: height, rowHeight: cache.current.rowHeight, deferredMeasurementCache: cache.current, rowCount: options.length, rowRenderer: function (_a) {
+                        var key = _a.key, index = _a.index, style = _a.style, parent = _a.parent;
+                        var option = options[index];
+                        return (react_1.default.createElement(react_virtualized_1.CellMeasurer, { key: key, cache: cache.current, parent: parent, columnIndex: 0, rowIndex: index }, children(option, index, style)));
+                    } }));
+            }))
+        :
+            options.map(function (option, index) { return (children(option, index)); })));
+};
+exports.VirtualizedWrapper = VirtualizedWrapper;
+// ################ AutoSizer #######
+// The AutoSizer component is used to automatically calculate and adjust 
+// the size of its child components based on the available space. 
+// It wraps around the List component to dynamically resize the list based on the dimensions of its parent container.
+// ################  List ########## 
+// The List component is a virtualized list that efficiently renders a 
+// large number of items by only rendering the visible items on the screen. 
+// It accepts a rowCount prop to specify the total number of items in the list, 
+// and a rowRenderer prop to define how each item should be rendered.
+// ################  Cell Measurer #############
+// The CellMeasurer component is used within the rowRenderer function 
+// to measure the dimensions of each item in the list. 
+// It calculates the height and width of each cell and provides this information to the List component, 
+// allowing it to efficiently render the list with variable-sized items.

package/dist/components/Dropdowns/comps/VirtualizedWrapper/styled.d.ts

@@ -0,0 +1 @@
+export const StyledOptionsShellWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Dropdowns/comps/VirtualizedWrapper/styled.js

@@ -0,0 +1,45 @@
+"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 __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.StyledOptionsShellWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+exports.StyledOptionsShellWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    \n    width: 100%;\n    \n    ", " {\n        width: 36rem;\n    }\n    height: ", ";\n\n"], ["\n    \n    width: 100%;\n    \n    ", " {\n        width: 36rem;\n    }\n    height: ", ";\n\n"])), (0, mixins_1.mediaQuery)("md"), function (_a) {
+    var lightboxHeight = _a.lightboxHeight;
+    switch (lightboxHeight) {
+        case 'large':
+            return '33rem';
+        case 'small':
+            return '20rem';
+        case 'medium':
+        default:
+            return '24rem';
+    }
+});
+var templateObject_1;

package/dist/components/EmptyStates/comps/EmptyStatesRenderer.js

@@ -36,6 +36,7 @@ var ThumbsUpSVG_1 = require("../PublishedSucccessful/comps/ThumbsUpSVG");
 var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var mixins_1 = require("../../../themes/mixins");
 var PublishedSuccessfullySVGShapes_1 = require("../PublishedSucccessful/comps/PublishedSuccessfullySVGShapes");
+var utilsOolib_1 = require("../../../utilsOolib");
 var EmptyStatesRenderer = function (_a) {
     var _image = _a.image, _b = _a.align, align = _b === void 0 ? "center" : _b, _title = _a.title, _subtitle = _a.subtitle, link = _a.link, button = _a.button, onClick = _a.onClick, preset = _a.preset;
     var imagesLookup = {
@@ -50,6 +51,7 @@ var EmptyStatesRenderer = function (_a) {
         searchDashBoardListing: searchDashBoardListing_svg_1.default,
         dashboardListing: dashboardListing_svg_1.default,
     };
+    var localize = (0, utilsOolib_1.useLocale)();
     //basically image prop can be either the src string or an object with more properties
     var image = typeof _image === "string" ? { src: _image } : _image; // src + style
     var title = typeof _title === "string" ? { text: _title } : _title; // text + style
@@ -63,10 +65,10 @@ var EmptyStatesRenderer = function (_a) {
             preset === "successFullyPublish" &&
                 react_1.default.createElement(styled_2.StyledPublishedSVGWrapper, null,
                     react_1.default.createElement(ThumbsUpSVG_1.ThumbsUpSVG, null)),
-            (title === null || title === void 0 ? void 0 : title.text) && (react_1.default.createElement(styled_1.StyledSERIF_4_5, { style: title.style, preset: preset }, title.text)),
-            (subtitle === null || subtitle === void 0 ? void 0 : subtitle.text) && (react_1.default.createElement(Typo_1.SANS_3, { style: subtitle.style }, subtitle.text)),
+            (title === null || title === void 0 ? void 0 : title.text) && (react_1.default.createElement(styled_1.StyledSERIF_4_5, { style: title.style, preset: preset }, localize(title.text))),
+            (subtitle === null || subtitle === void 0 ? void 0 : subtitle.text) && (react_1.default.createElement(Typo_1.SANS_3, { style: subtitle.style }, localize(subtitle.text))),
             link && (react_1.default.createElement(Typo_1.SANS_3, { style: { paddingTop: '1rem' } },
-                react_1.default.createElement(OKELink_1.OKELink, { text: link.text, onClick: onClick }))),
-            button && (react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onClick, style: { marginTop: "2rem" } }, button.text)))));
+                react_1.default.createElement(OKELink_1.OKELink, { text: localize(link.text), onClick: onClick }))),
+            button && (react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onClick, style: { marginTop: "2rem" } }, localize(button.text))))));
 };
 exports.EmptyStatesRenderer = EmptyStatesRenderer;

package/dist/components/EmptyStates/comps/styled.d.ts

@@ -1,8 +1,8 @@
 export const StyledSERIF_4_5: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
 export const StyledFlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    children: any;
-    className: any;
-    style: any;
-    enableContainerQuery: any;
-} & import("react").RefAttributes<any>>, any, {}, never>;
+    children?: import("react").ReactNode;
+    className?: string;
+    style?: import("react").CSSProperties;
+    enableContainerQuery?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/components/ResourceInput/comp/ResourceDisplayBlock.js

@@ -95,7 +95,7 @@ var ResourceDisplayBlock = function (_a) {
         resources.map(function (file) { return (react_1.default.createElement(styled_1.StyledBlock, { style: { position: 'relative' }, invert: invert, key: file === null || file === void 0 ? void 0 : file.id },
             genResourceBlock(file),
             react_1.default.createElement("div", { style: { position: 'absolute', top: '0', right: '0' } },
-                react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonPrimary", invert: invert, actions: [
+                react_1.default.createElement(ActionMenu_1.ActionMenu, { ButtonComp: "ButtonPrimary", invert: invert, actions: [
                         {
                             display: "Delete",
                             onClick: function () { return removeResource(file === null || file === void 0 ? void 0 : file.id); },

package/dist/components/ResourceInput/index.js

@@ -61,7 +61,7 @@ var ResourceInput = function (props) {
     var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
     var _c = (0, react_1.useState)(undefined), uploadProgress = _c[0], setUploadProgress = _c[1];
     var _d = (0, react_1.useState)(0), filesLength = _d[0], setFilesLength = _d[1];
-    var _e = (0, react_1.useState)(__spreadArray([], value, true)), resources = _e[0], setResources = _e[1];
+    var _e = (0, react_1.useState)(value ? __spreadArray([], value, true) : []), resources = _e[0], setResources = _e[1];
     var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
     var upload = ((theme === null || theme === void 0 ? void 0 : theme.useUploadMedia({
         mediaConfigs: {

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

@@ -1,11 +1,27 @@
-export function Tooltip({ text, position, style, children, popOutOfOverflowHiddenParent, invert, debug, presetTarget, }: {
-    text: any;
-    position?: string;
-    style: any;
-    children: any;
+import React from "react";
+interface TooltipProps {
+    text: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    style?: React.CSSProperties;
+    children: React.ReactNode;
     popOutOfOverflowHiddenParent?: boolean;
     invert?: boolean;
     debug?: boolean;
-    presetTarget: any;
-}): React.JSX.Element;
-import React from "react";
+    presetTarget?: 'infoIcon';
+}
+/**
+ * Renders a tooltip component with customizable text and styling.
+ *
+ * @param props - The props object containing the following properties:
+ *   - text: The text to be displayed in the tooltip.
+ *   - position: The position of the tooltip relative to the target element. Defaults to "top".
+ *   - style: Additional CSS styles to apply to the tooltip.
+ *   - children: The content to be rendered inside the tooltip target element.
+ *   - popOutOfOverflowHiddenParent: A boolean indicating whether the tooltip should pop out of an overflow:hidden parent element. Defaults to false.
+ *   - invert: A boolean indicating whether to invert the tooltip colors. Defaults to false.
+ *   - debug: A boolean indicating whether to enable debug mode for the tooltip. Defaults to false.
+ *   - presetTarget: A string indicating a preset target for the tooltip. Defaults to infoIcon.
+ * @return {ReactElement} The rendered tooltip component.
+ */
+export declare const Tooltip: React.FunctionComponent<TooltipProps>;
+export {};

package/dist/components/Tooltip/index.js

@@ -41,6 +41,20 @@ var themes_1 = require("../../themes");
 var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflowHiddenParent");
 var Typo_1 = require("../Typo");
 var styled_1 = require("./styled");
+/**
+ * Renders a tooltip component with customizable text and styling.
+ *
+ * @param props - The props object containing the following properties:
+ *   - text: The text to be displayed in the tooltip.
+ *   - position: The position of the tooltip relative to the target element. Defaults to "top".
+ *   - style: Additional CSS styles to apply to the tooltip.
+ *   - children: The content to be rendered inside the tooltip target element.
+ *   - popOutOfOverflowHiddenParent: A boolean indicating whether the tooltip should pop out of an overflow:hidden parent element. Defaults to false.
+ *   - invert: A boolean indicating whether to invert the tooltip colors. Defaults to false.
+ *   - debug: A boolean indicating whether to enable debug mode for the tooltip. Defaults to false.
+ *   - presetTarget: A string indicating a preset target for the tooltip. Defaults to infoIcon.
+ * @return {ReactElement} The rendered tooltip component.
+ */
 var Tooltip = function (_a) {
     var text = _a.text, _b = _a.position, position = _b === void 0 ? "top" : _b, style = _a.style, children = _a.children, _c = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _c === void 0 ? false : _c, _d = _a.invert, invert = _d === void 0 ? false : _d, _e = _a.debug, debug = _e === void 0 ? false : _e, presetTarget = _a.presetTarget;
     var _f = (0, react_1.useState)(debug ? true : false), isClicked = _f[0], setIsClicked = _f[1];
@@ -73,13 +87,10 @@ var Tooltip = function (_a) {
                 setIsClicked(true), setShowTooltip(true);
             }, onBlur: function () {
                 setIsClicked(false), setShowTooltip(false);
-            }, ref: targetRef, 
-            // isFocused={isFocused}
-            tabIndex: 0 }, presetTarget === "infoIcon" ? (react_1.default.createElement(styled_1.StyledIconButton, { type: showTooltip ? "none" : "fill" },
+            }, ref: targetRef, tabIndex: 0 }, presetTarget === "infoIcon" ? (react_1.default.createElement(styled_1.StyledIconButton, null,
             react_1.default.createElement(phosphor_react_1.Info, { color: invert ? themes_1.colors.white : themes_1.colors.greyColor100, size: 20, weight: showTooltip ? 'fill' : 'regular' }))) : (children)),
         showTooltip && (react_1.default.createElement(styled_1.StyledTooltipBox, { fixPos: fixPos, isOpen: showTooltip, position: position, show: showTooltip, style: style, invert: invert },
-            text.split('\n').filter(Boolean).map(function (singleline, i) { return ( // this detects line breaks in text and renders them properly
-            react_1.default.createElement(Typo_1.SANS_2, __assign({}, (i !== 0 ? { style: { marginTop: '0.5rem' } } : {})), singleline)); }),
+            text.split('\n').filter(Boolean).map(function (singleline, i) { return (react_1.default.createElement(Typo_1.SANS_2, __assign({}, (i !== 0 ? { style: { marginTop: '0.5rem' } } : {})), singleline)); }),
             react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
                 react_1.default.createElement(styled_1.StyledArrow, { position: position, invert: invert }))))));
 };

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

@@ -1,6 +1,27 @@
-export const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledTooltipBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledTooltipTarget: import("styled-components").StyledComponent<"button", any, {}, never>;
-export const StyledArrowOutline: import("styled-components").StyledComponent<"span", any, {}, never>;
-export const StyledArrow: import("styled-components").StyledComponent<"span", any, {}, never>;
-export const StyledIconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledTooltipBoxProps {
+    show: boolean;
+    invert: boolean;
+    fixPos?: {
+        x: number;
+        y: number;
+    } | undefined;
+    position: string;
+    isOpen: boolean;
+}
+export declare const StyledTooltipBox: import("styled-components").StyledComponent<"div", any, StyledTooltipBoxProps, never>;
+interface StyledTooltipTargetProps {
+    isFocused?: boolean;
+}
+export declare const StyledTooltipTarget: import("styled-components").StyledComponent<"button", any, StyledTooltipTargetProps, never>;
+interface StyledArrowOutlineProps {
+    position: string;
+}
+export declare const StyledArrowOutline: import("styled-components").StyledComponent<"span", any, StyledArrowOutlineProps, never>;
+interface StyledArrowProps {
+    position: string;
+    invert: boolean;
+}
+export declare const StyledArrow: import("styled-components").StyledComponent<"span", any, StyledArrowProps, never>;
+export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export {};

package/dist/components/Tooltip/styled.js

@@ -3,36 +3,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledIconButton = exports.StyledArrow = exports.StyledArrowOutline = exports.StyledTooltipTarget = exports.StyledTooltipBox = exports.StyledWrapper = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var util_1 = require("./util");
-exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n  text-align: left;\n  cursor: pointer;\n"], ["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n  text-align: left;\n  cursor: pointer;\n"])));
 var greyColor15 = themes_1.colors.greyColor15, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10;
 var clipPaths = {
     top: "0% 0%, 47% 65.4%, 52% 65.4%, 100% 0",
@@ -40,27 +19,19 @@ var clipPaths = {
     right: '100% 0%, 50% 47%, 50% 52%, 100% 100%',
     left: '0% 0%, 50% 47%, 50% 52%, 0% 100%',
 };
-exports.StyledTooltipBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  /* position: ", "; */\n  /* left: ", "px; */\n  /* top: ", "px; */\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap:break-word;\n"], ["\n  ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  /* position: ", "; */\n  /* left: ", "px; */\n  /* top: ", "px; */\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap:break-word;\n"])), function (_a) {
-    var show = _a.show;
-    return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["display:'visible'; z-index: 5000000;"], ["display:'visible'; z-index: 5000000;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["display:'none'; z-index: -5;"], ["display:'none'; z-index: -5;"])));
-}, (0, mixins_1.transition)('opacity 0.1s'), function (props) { return props.invert ? greyColor10 : greyColor100; }, function (props) { return props.invert ? greyColor100 : white; }, greyColor15, function (props) { return !props.fixPos ? 'fixed' : 'absolute'; }, function (props) { var _a; return (_a = props.fixPos) === null || _a === void 0 ? void 0 : _a.x; }, function (props) { var _a; return (_a = props.fixPos) === null || _a === void 0 ? void 0 : _a.y; }, function (_a) {
+exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n"], ["\n  position: relative;\n  width: fit-content;\n  text-align: left;\n  cursor: pointer;\n"])));
+exports.StyledTooltipBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  z-index: ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap: break-word;\n"], ["\n  display: ", ";\n  z-index: ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap: break-word;\n"])), function (props) { return (props.show ? "block" : "none"); }, function (props) { return (props.show ? 5000000 : -5); }, (0, mixins_1.transition)("opacity 0.1s"), function (props) { return (props.invert ? greyColor10 : greyColor100); }, function (props) { return (props.invert ? greyColor100 : white); }, greyColor15, function (_a) {
     var position = _a.position, fixPos = _a.fixPos;
-    return (0, util_1.positionTooltip)(position, fixPos);
+    return (0, util_1.positionTooltip)({ position: position, fixPos: fixPos });
 });
-exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  background: inherit;\n  font-size: inherit;\n  /* color: inherit; */\n  cursor: inherit;\n  /* background : ", "; */\n  /* color : ", "; */\n  /* border-radius : ", "; */\n  /* border-radius: 2px; */\n"], ["\n  border: none;\n  background: inherit;\n  font-size: inherit;\n  /* color: inherit; */\n  cursor: inherit;\n  /* background : ", "; */\n  /* color : ", "; */\n  /* border-radius : ", "; */\n  /* border-radius: 2px; */\n"])), function (props) { return props.isFocused ? greyColor100 : 'none'; }, function (props) { return props.isFocused ? 'white' : 'inherit'; }, function (props) { return props.isFocused ? '50%' : 'none'; });
-exports.StyledArrowOutline = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 1rem;\n  height: 1rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"], ["\n  background-color: ", ";\n  width: 1rem;\n  height: 1rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"])), greyColor15, function (_a) {
+exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  background: inherit;\n  font-size: inherit;\n"], ["\n  border: none;\n  background: inherit;\n  font-size: inherit;\n"])));
+exports.StyledArrowOutline = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 1rem;\n  height: 1rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"], ["\n  background-color: ", ";\n  width: 1rem;\n  height: 1rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"])), greyColor15, function (_a) {
     var position = _a.position;
     return clipPaths[position];
-}, function (_a) {
-    var position = _a.position;
-    return (0, util_1.positionArrowBorder)(position);
-});
-exports.StyledArrow = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject([" // the the white part\n  background-color: ", ";\n  color: ", ";\n  display:inline-block;\n  width: 0.85rem;\n  height: 0.85rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"], [" // the the white part\n  background-color: ", ";\n  color: ", ";\n  display:inline-block;\n  width: 0.85rem;\n  height: 0.85rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"])), function (props) { return props.invert ? greyColor10 : greyColor100; }, function (props) { return props.invert ? greyColor100 : white; }, function (_a) {
+}, util_1.positionArrowBorder);
+exports.StyledArrow = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  display: inline-block;\n  width: 0.85rem;\n  height: 0.85rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"], ["\n  background-color: ", ";\n  color: ", ";\n  display: inline-block;\n  width: 0.85rem;\n  height: 0.85rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"])), function (props) { return (props.invert ? greyColor10 : greyColor100); }, function (props) { return (props.invert ? greyColor100 : white); }, function (_a) {
     var position = _a.position;
     return clipPaths[position];
-}, function (_a) {
-    var position = _a.position;
-    return (0, util_1.positionArrow)(position);
-});
-exports.StyledIconButton = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none; \n  outline: none; \n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border: none; \n  outline: none; \n  cursor: pointer;\n"])), themes_1.colors.none);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+}, util_1.positionArrow);
+exports.StyledIconButton = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  outline: none;\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border: none;\n  outline: none;\n  cursor: pointer;\n"])), themes_1.colors.none);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/Tooltip/util/index.d.ts

@@ -1,3 +1,37 @@
-export function positionTooltip(position: any, fixPos: any): import("styled-components").FlattenSimpleInterpolation;
-export function positionArrowBorder(position: any): import("styled-components").FlattenSimpleInterpolation;
-export function positionArrow(position: any): import("styled-components").FlattenSimpleInterpolation;
+import { CSSObject } from "styled-components";
+interface PositionTooltipProps {
+    position: string;
+    fixPos?: {
+        x: number;
+        y: number;
+    } | undefined;
+}
+interface PositionArrowBorderProps {
+    position: string;
+}
+interface PositionArrowProps {
+    position: string;
+}
+/**
+ * Generates the CSS object for positioning a tooltip based on the provided position and fix position.
+ *
+ * @param {PositionTooltipProps} position - The position of the tooltip ('top', 'bottom', 'left', 'right').
+ * @param {PositionTooltipProps} fixPos - The fix position of the tooltip. If provided, the tooltip will be fixed at this position.
+ * @return {CSSObject} The CSS object for positioning the tooltip.
+ */
+export declare const positionTooltip: ({ position, fixPos, }: PositionTooltipProps) => CSSObject;
+/**
+ * Generates the CSS object for positioning the arrow border based on the given position.
+ *
+ * @param {PositionArrowBorderProps} position - The position of the arrow border.
+ * @return {CSSObject} The CSS object for positioning the arrow border.
+ */
+export declare const positionArrowBorder: ({ position, }: PositionArrowBorderProps) => CSSObject;
+/**
+ * Generates the CSS object for positioning the arrow based on the given position.
+ *
+ * @param {PositionArrowProps} position - The position of the arrow.
+ * @return {CSSObject} The CSS object for positioning the arrow.
+ */
+export declare const positionArrow: ({ position, }: PositionArrowProps) => CSSObject;
+export {};

package/dist/components/Tooltip/util/index.js

@@ -6,16 +6,26 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.positionArrow = exports.positionArrowBorder = exports.positionTooltip = void 0;
 var styled_components_1 = require("styled-components");
-var positionTooltip = function (position, fixPos) {
+/**
+ * Generates the CSS object for positioning a tooltip based on the provided position and fix position.
+ *
+ * @param {PositionTooltipProps} position - The position of the tooltip ('top', 'bottom', 'left', 'right').
+ * @param {PositionTooltipProps} fixPos - The fix position of the tooltip. If provided, the tooltip will be fixed at this position.
+ * @return {CSSObject} The CSS object for positioning the tooltip.
+ */
+// This function calculates the CSS styles for positioning a tooltip based on the given position and fixPos values
+var positionTooltip = function (_a) {
+    var position = _a.position, fixPos = _a.fixPos;
     switch (position) {
         case 'top':
             if (fixPos) {
-                return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            position: fixed;\n            top: ", "px;\n            left: ", "px;\n            transform: translateX(-50%);\n          "], ["\n            position: fixed;\n            top: ", "px;\n            left: ", "px;\n            transform: translateX(-50%);\n          "])), fixPos.y - 50, fixPos.x + 10);
+                // If fixPos is truthy, return CSS styles for a fixed position tooltip
+                return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          transform: translateX(-50%);\n        "], ["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          transform: translateX(-50%);\n        "])), fixPos.y - 50, fixPos.x + 10);
             }
-            return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        position: absolute;\n        bottom: calc(100% + 8.5px);\n        left: 50%;\n        transform: translateX(-50%);\n      "], ["\n        position: absolute;\n        bottom: calc(100% + 8.5px);\n        left: 50%;\n        transform: translateX(-50%);\n      "])));
+            return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        // If fixPos is falsy, return CSS styles for an absolute position tooltip\n        position: absolute;\n        bottom: calc(100% + 8.5px);\n        left: 50%;\n        transform: translateX(-50%);\n      "], ["\n        // If fixPos is falsy, return CSS styles for an absolute position tooltip\n        position: absolute;\n        bottom: calc(100% + 8.5px);\n        left: 50%;\n        transform: translateX(-50%);\n      "])));
         case 'bottom':
             if (fixPos) {
-                return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            position: fixed;\n            top: ", "px;\n            left: ", "px;\n            transform: translateX(-50%);\n          "], ["\n            position: fixed;\n            top: ", "px;\n            left: ", "px;\n            transform: translateX(-50%);\n          "])), fixPos.y + 30, fixPos.x + 12);
+                return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          transform: translateX(-50%);\n        "], ["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          transform: translateX(-50%);\n        "])), fixPos.y + 30, fixPos.x + 12);
             }
             return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        position: absolute;\n        top: calc(100% + 8.5px);\n        left: 50%;\n        transform: translateX(-50%);\n      "], ["\n        position: absolute;\n        top: calc(100% + 8.5px);\n        left: 50%;\n        transform: translateX(-50%);\n      "])));
         case 'left':
@@ -28,28 +38,56 @@ var positionTooltip = function (position, fixPos) {
                 return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          transform: translateY(-50%);\n        "], ["\n          position: fixed;\n          top: ", "px;\n          left: ", "px;\n          transform: translateY(-50%);\n        "])), fixPos.y + 8.5, fixPos.x + 30);
             }
             return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        position: absolute;\n        left: calc(100% + 8.5px);\n        top: 50%;\n        transform: translateY(-50%);\n      "], ["\n        position: absolute;\n        left: calc(100% + 8.5px);\n        top: 50%;\n        transform: translateY(-50%);\n      "])));
+        default:
+            return {};
     }
 };
 exports.positionTooltip = positionTooltip;
-var positionArrowBorder = function (position) {
+/**
+ * Generates the CSS object for positioning the arrow border based on the given position.
+ *
+ * @param {PositionArrowBorderProps} position - The position of the arrow border.
+ * @return {CSSObject} The CSS object for positioning the arrow border.
+ */
+var positionArrowBorder = function (_a) {
+    var position = _a.position;
+    // Check the position of the arrow border
     switch (position) {
         case 'top':
         case 'bottom':
-            return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        ", ";\n        left: 50%;\n        transform: translateX(-5px); // 13/2 - 1.5 of the arrow itself    \n      "], ["\n        ", ";\n        left: 50%;\n        transform: translateX(-5px); // 13/2 - 1.5 of the arrow itself    \n      "])), position + ': 100%');
+            // Position the arrow border at the top or bottom of the tooltip
+            return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        ", ": 100%;\n        left: 50%;\n        transform: translateX(-5px);\n      "], ["\n        ", ": 100%;\n        left: 50%;\n        transform: translateX(-5px);\n      "])), position);
         case 'left':
         case 'right':
-            return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        ", ";\n        top: 50%;\n        transform: translateY(-5px); // 13/2\n      "], ["\n        ", ";\n        top: 50%;\n        transform: translateY(-5px); // 13/2\n      "])), position + ': 100%');
+            // Position the arrow border at the left or right of the tooltip
+            return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        ", ": 100%;\n        top: 50%;\n        transform: translateY(-5px);\n      "], ["\n        ", ": 100%;\n        top: 50%;\n        transform: translateY(-5px);\n      "])), position);
+        default:
+            // Return an empty object if the position is not recognized
+            return {};
     }
 };
 exports.positionArrowBorder = positionArrowBorder;
-var positionArrow = function (position) {
+/**
+ * Generates the CSS object for positioning the arrow based on the given position.
+ *
+ * @param {PositionArrowProps} position - The position of the arrow.
+ * @return {CSSObject} The CSS object for positioning the arrow.
+ */
+var positionArrow = function (_a) {
+    var position = _a.position;
+    // Check the position value
     switch (position) {
         case 'top':
         case 'bottom':
-            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        ", ";\n        left: 8%;\n      "], ["\n        ", ";\n        left: 8%;\n      "])), position + ': -2%');
+            // If the position is 'top' or 'bottom', set the CSS properties accordingly
+            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        ", ": -2%;\n        left: 8%;\n      "], ["\n        ", ": -2%;\n        left: 8%;\n      "])), position);
         case 'left':
         case 'right':
-            return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        ", ";\n        top: 8%;\n      "], ["\n        ", ";\n        top: 8%;\n      "])), position + ': -2%');
+            // If the position is 'left' or 'right', set the CSS properties accordingly
+            return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        ", ": -2%;\n        top: 8%;\n      "], ["\n        ", ": -2%;\n        top: 8%;\n      "])), position);
+        default:
+            // If the position is not recognized, return an empty object
+            return {};
     }
 };
 exports.positionArrow = positionArrow;

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

@@ -1,6 +1,8 @@
-export function useContainerQuery(options?: {}): {
-    ref: import("react").MutableRefObject<any>;
-    containerQuery: (point: any) => (styles: any) => any;
+export declare const useContainerQuery: (options?: {
+    enabled?: boolean;
+}) => {
+    ref?: React.RefObject<HTMLDivElement>;
+    containerQuery?: (point: string) => (styles: string | TemplateStringsArray) => string;
     containerWidth: number;
     containerHeight: number;
 };

package/dist/utils/customHooks/useContainerQuery.js

@@ -31,13 +31,13 @@ var useContainerQuery = function (options) {
     //query and so on. Else bugs will happen.
     var containerQuery = function (point) { return function (styles) {
         var breakpointWidth = (0, mixins_1.getBreakPoint)(point);
-        return containerSize.width >= breakpointWidth ? styles : '';
+        return containerSize.width >= breakpointWidth ? styles : "";
     }; };
     return {
         ref: enabled ? ref : undefined,
         containerQuery: enabled ? containerQuery : undefined,
         containerWidth: containerSize.width,
-        containerHeight: containerSize.height
+        containerHeight: containerSize.height,
     };
 };
 exports.useContainerQuery = useContainerQuery;

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

@@ -1 +1,12 @@
-export function useScroll(scrollFn: Function, options?: any): void;
+interface ScrollOptions {
+    noThrottle?: boolean;
+    detectScrollInAllDivs?: boolean;
+    loading?: any;
+}
+/**
+ * @param {Function} scrollFn
+ * @param {*} options
+ * @summary if you dont use options.detectScrollInAllDivs, scroll is detected only at the 'window' level
+ */
+export declare const useScroll: (scrollFn: () => void, options?: ScrollOptions) => void;
+export {};

package/dist/utils/customHooks/useScroll.js

@@ -11,10 +11,11 @@ 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 _a;
+        scrollFn(); // Run the scroll function 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, options.detectScrollInAllDivs); // <-- why 'true' : https://stackoverflow.com/a/32954565
+        window.addEventListener('scroll', fnToUse, (_a = options.detectScrollInAllDivs) !== null && _a !== void 0 ? _a : true); // <-- why 'true' : https://stackoverflow.com/a/32954565 // Use a default value of `true` if `detectScrollInAllDivs` is not provided.
         return function () { return window.removeEventListener('scroll', fnToUse, options.detectScrollInAllDivs); };
     }, [options.loading]);
 };

package/dist/utils/usePopOutOfOverflowHiddenParent.d.ts

@@ -1,6 +1,57 @@
-export function usePopOutOfOverflowHiddenParent(popOutOfOverflowHiddenParent: any): {
-    trackerRef: import("react").MutableRefObject<any>;
+/// <reference types="react" />
+interface PopOutOfOverflowHiddenParentResult {
+    trackerRef: React.MutableRefObject<HTMLDivElement | null>;
     applyFixedPos: () => void;
     removeFixedPos: () => void;
-    fixPos: any;
-};
+    fixPos: DOMRect | undefined;
+}
+/**
+ * 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.
+ *
+ *
+ *
+ */
+/**
+ * Creates a custom hook that enables an element to pop out of its overflow hidden parent.
+ *
+ * @param {boolean} popOutOfOverflowHiddenParent - Determines if the element should pop out of its overflow hidden parent.
+ * @return {object} An object containing the following properties:
+ *   - {RefObject<HTMLDivElement>} trackerRef: A ref to the tracker div element.
+ *   - {Function} applyFixedPos: A function that applies the fixed position to the element.
+ *   - {Function} removeFixedPos: A function that removes the fixed position from the element.
+ *   - {undefined | ClientRect} fixPos: The fixed position of the element.
+ */
+export declare const usePopOutOfOverflowHiddenParent: (popOutOfOverflowHiddenParent: boolean) => PopOutOfOverflowHiddenParentResult;
+export {};

package/dist/utils/usePopOutOfOverflowHiddenParent.js

@@ -42,23 +42,29 @@ var useScroll_1 = require("./customHooks/useScroll");
  *
  *
  */
+/**
+ * Creates a custom hook that enables an element to pop out of its overflow hidden parent.
+ *
+ * @param {boolean} popOutOfOverflowHiddenParent - Determines if the element should pop out of its overflow hidden parent.
+ * @return {object} An object containing the following properties:
+ *   - {RefObject<HTMLDivElement>} trackerRef: A ref to the tracker div element.
+ *   - {Function} applyFixedPos: A function that applies the fixed position to the element.
+ *   - {Function} removeFixedPos: A function that removes the fixed position from the element.
+ *   - {undefined | ClientRect} fixPos: The fixed position of the element.
+ */
 var usePopOutOfOverflowHiddenParent = function (popOutOfOverflowHiddenParent) {
-    var enabled = popOutOfOverflowHiddenParent; // is either true or falsw
+    var enabled = popOutOfOverflowHiddenParent;
     var trackerRef = (0, react_1.useRef)(null);
-    var _a = (0, react_1.useState)(undefined), fixPos = _a[0], setFixPos = _a[1];
+    var _a = (0, react_1.useState)(), 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 () { return enabled && 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)
+    var updateFixedPos = function () {
+        if (popOutOfOverflowHiddenParent) {
             setFixPos(function (prev) { return prev && getBoundingClientRect(); });
+        }
     };
     var removeFixedPos = function () { return enabled && setFixPos(undefined); };
     (0, useScroll_1.useScroll)(updateFixedPos, { noThrottle: true, detectScrollInAllDivs: true });
-    return ({ trackerRef: trackerRef, applyFixedPos: applyFixedPos, removeFixedPos: removeFixedPos, fixPos: fixPos });
+    return { trackerRef: trackerRef, applyFixedPos: applyFixedPos, removeFixedPos: removeFixedPos, fixPos: fixPos };
 };
 exports.usePopOutOfOverflowHiddenParent = usePopOutOfOverflowHiddenParent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.105.0",
+  "version": "2.107.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,6 +85,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@faker-js/faker": "^8.3.1",
     "@react-hook/resize-observer": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",
@@ -92,11 +93,13 @@
     "d3-geo": "^3.1.0",
     "draft-js": "^0.11.7",
     "draftjs-conductor": "^2.2.0",
+    "faker": "^6.6.6",
     "immutable": "^3.7.6",
     "lodash": "^4.17.21",
     "modularscale-js": "^3.0.1",
     "moment": "^2.24.0",
     "phosphor-react": "^1.4.1",
-    "react-player": "^2.12.0"
+    "react-player": "^2.12.0",
+    "react-virtualized": "^9.22.5"
   }
 }