oolib 2.112.1 → 2.113.1

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

@@ -1,4 +1,6 @@
-export function Divider({ invert }: {
-    invert: any;
-}): React.JSX.Element;
-import React from "react";
+import { FunctionComponent } from 'react';
+interface DividerProps {
+    invert?: boolean;
+}
+export declare const Divider: FunctionComponent<DividerProps>;
+export {};

package/dist/components/Divider/index.js

@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
 var StyledHr = styled_components_1.default.hr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n"], ["\n  margin: 0;\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n"])), function (_a) {
     var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor15;
+    return (invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor15);
 });
 var Divider = function (_a) {
     var invert = _a.invert;

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

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

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

@@ -40,7 +40,7 @@ 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 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, lightboxStyle = _a.lightboxStyle;
     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
@@ -56,7 +56,7 @@ var OptionsAnimateWrapper = function (_a) {
             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
+    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: width, openHeight: openHeight, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { 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%)" }

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

@@ -1,15 +1,4 @@
 "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);
@@ -60,10 +49,14 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     }, [showOptions]);
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children },
+        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle },
             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(Modal_1.Modal, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
+                style: {
+                    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(Modal_1.Modal, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
         SelectComp && SelectComp,
         react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
         showDoneButton && (react_1.default.createElement("div", { style: {

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

@@ -1,2 +1,21 @@
-export function Section(props: any): React.JSX.Element;
-import React from "react";
+import React, { FunctionComponent } from 'react';
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+    borderTop?: boolean;
+    borderRight?: boolean;
+    borderLeft?: boolean;
+    borderBottom?: boolean;
+    [key: string]: any;
+}
+/**
+ * @component Renders a section component with customizable border properties.
+ *
+ * - The props object containing the following properties:
+ * @prop {boolean} props.borderTop: A boolean indicating whether to display a top border. Defaults to false.
+ * @prop {boolean} props.borderRight: A boolean indicating whether to display a right border. Defaults to false.
+ * @prop {boolean} props.borderLeft: A boolean indicating whether to display a left border. Defaults to false.
+ * @prop {boolean} props.borderBottom: A boolean indicating whether to display a bottom border. Defaults to false.
+ * @prop {React.CSSProperties} props.style: Additional CSS styles to apply to the section.
+ * @prop {React.ReactNode} props.children: The content to be rendered inside the section element.
+ * @return {ReactElement} The rendered section component.
+ */
+export declare const Section: FunctionComponent<SectionProps>;

package/dist/components/Section/index.js

@@ -16,18 +16,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
 var react_1 = __importDefault(require("react"));
-var index_styled_1 = require("./index.styled");
-/*
-especially meant for usecases where
-the page container has a max width, but we need its bottom border to stretch the full
-width of the screen
-*/
+var styled_1 = require("./styled");
+/* especially meant for usecases where the page container has a max width,
+/* but we need its bottom border to stretch the full width of the screen */
+/* props can be any valid color value,
+/* can be borderBottom/Top/Left/Right * can be style, className & children */
 /**
- * props can be any valid color value,
- * can be borderBottom/Top/Left/Right
- * can be style, className & children
+ * @component Renders a section component with customizable border properties.
+ *
+ * - The props object containing the following properties:
+ * @prop {boolean} props.borderTop: A boolean indicating whether to display a top border. Defaults to false.
+ * @prop {boolean} props.borderRight: A boolean indicating whether to display a right border. Defaults to false.
+ * @prop {boolean} props.borderLeft: A boolean indicating whether to display a left border. Defaults to false.
+ * @prop {boolean} props.borderBottom: A boolean indicating whether to display a bottom border. Defaults to false.
+ * @prop {React.CSSProperties} props.style: Additional CSS styles to apply to the section.
+ * @prop {React.ReactNode} props.children: The content to be rendered inside the section element.
+ * @return {ReactElement} The rendered section component.
  */
 var Section = function (props) {
-    return (react_1.default.createElement(index_styled_1.StyledSection, __assign({}, props), props.children));
+    return (react_1.default.createElement(styled_1.StyledSection, __assign({}, props), props.children));
 };
 exports.Section = Section;

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

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

package/dist/components/Section/{index.styled.js → styled.js}

@@ -23,7 +23,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 var setBorder = function (_a) {
     var props = _a.props;
-    var borderStyles = "";
+    var borderStyles = '';
     var greyColor15 = colors_1.colors.greyColor15;
     if (props.borderTop || props.borderRight || props.borderLeft || props.borderBottom) {
         if (props.borderTop)
@@ -40,8 +40,7 @@ var setBorder = function (_a) {
 var setFill = function (_a) {
     var _b;
     var props = _a.props;
-    var colorsObj = ((_b = props.theme) === null || _b === void 0 ? void 0 : _b.colors)
-        ? __assign(__assign({}, colors_1.colors), props.theme.colors) : colors_1.colors;
+    var colorsObj = ((_b = props.theme) === null || _b === void 0 ? void 0 : _b.colors) ? __assign(__assign({}, colors_1.colors), props.theme.colors) : colors_1.colors;
     var colorKey = Object.keys(props).find(function (p) { return !!colorsObj[p]; });
     return colorKey ? "background-color: ".concat(colorsObj[colorKey], ";") : '';
 };

package/dist/components/Wrappers/WrapperCardGrid.d.ts

@@ -1,8 +1,6 @@
-export function WrapperCardGrid({ style, className, children, id, minWidth }: {
-    style: any;
-    className: any;
-    children: any;
-    id: any;
+import React, { FunctionComponent } from 'react';
+interface WrapperCardGridProps extends React.HTMLAttributes<HTMLDivElement> {
     minWidth?: string;
-}): React.JSX.Element;
-import React from "react";
+}
+export declare const WrapperCardGrid: FunctionComponent<WrapperCardGridProps>;
+export {};

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

@@ -1,10 +1,17 @@
-export { WrapperCardGrid } from "./WrapperCardGrid";
-export function Wrapper1500(props: any): React.JSX.Element;
-export function Wrapper1120(props: any): React.JSX.Element;
-export function Wrapper1000(props: any): React.JSX.Element;
-export function Wrapper900(props: any): React.JSX.Element;
-export function Wrapper800(props: any): React.JSX.Element;
-export function Wrapper820(props: any): React.JSX.Element;
-export function Wrapper700(props: any): React.JSX.Element;
-export function Wrapper650(props: any): React.JSX.Element;
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+import { WrapperCardGrid } from './WrapperCardGrid';
+export interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: number;
+    align?: 'left' | 'center';
+    left?: boolean;
+}
+export declare const Wrapper: FunctionComponent<WrapperProps>;
+export { WrapperCardGrid };
+export declare const Wrapper1500: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper1120: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper1000: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper900: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper800: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper820: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper700: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper650: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;

package/dist/components/Wrappers/index.js

@@ -14,29 +14,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper650 = exports.Wrapper700 = exports.Wrapper820 = exports.Wrapper800 = exports.Wrapper900 = exports.Wrapper1000 = exports.Wrapper1120 = exports.Wrapper1500 = exports.WrapperCardGrid = void 0;
+exports.Wrapper650 = exports.Wrapper700 = exports.Wrapper820 = exports.Wrapper800 = exports.Wrapper900 = exports.Wrapper1000 = exports.Wrapper1120 = exports.Wrapper1500 = exports.WrapperCardGrid = exports.Wrapper = void 0;
 var react_1 = __importDefault(require("react"));
-var index_styled_1 = require("./index.styled");
+var WrapperCardGrid_1 = require("./WrapperCardGrid");
+Object.defineProperty(exports, "WrapperCardGrid", { enumerable: true, get: function () { return WrapperCardGrid_1.WrapperCardGrid; } });
+var styled_1 = require("./styled");
 var Wrapper = function (_a) {
-    var style = _a.style, children = _a.children, className = _a.className, maxWidth = _a.maxWidth, left = _a.left, align = _a.align;
+    var style = _a.style, children = _a.children, className = _a.className, maxWidth = _a.maxWidth, align = _a.align, left = _a.left;
     align = align || (left ? 'left' : 'center');
-    return (react_1.default.createElement(index_styled_1.StyledWrapper, { maxWidth: maxWidth, align: align, className: className || "", style: style }, children));
+    return (react_1.default.createElement(styled_1.StyledWrapper, { maxWidth: maxWidth, align: align, className: className || '', style: style }, children));
 };
-var WrapperCardGrid_1 = require("./WrapperCardGrid");
-Object.defineProperty(exports, "WrapperCardGrid", { enumerable: true, get: function () { return WrapperCardGrid_1.WrapperCardGrid; } });
-var Wrapper1500 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1500 })); };
+exports.Wrapper = Wrapper;
+var Wrapper1500 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 1500 }))); };
 exports.Wrapper1500 = Wrapper1500;
-var Wrapper1120 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1120 })); };
+var Wrapper1120 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 1120 }))); };
 exports.Wrapper1120 = Wrapper1120;
-var Wrapper1000 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1000 })); };
+var Wrapper1000 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 1000 }))); };
 exports.Wrapper1000 = Wrapper1000;
-var Wrapper900 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 900 })); };
+var Wrapper900 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 900 }))); };
 exports.Wrapper900 = Wrapper900;
-var Wrapper800 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 800 })); };
+var Wrapper800 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 800 }))); };
 exports.Wrapper800 = Wrapper800;
-var Wrapper820 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 820 })); };
+var Wrapper820 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 820 }))); };
 exports.Wrapper820 = Wrapper820;
-var Wrapper700 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 700 })); };
+var Wrapper700 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 700 }))); };
 exports.Wrapper700 = Wrapper700;
-var Wrapper650 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 650 })); };
+var Wrapper650 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 650 }))); };
 exports.Wrapper650 = Wrapper650;

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

@@ -0,0 +1,2 @@
+import { WrapperProps } from '.';
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;

package/dist/components/Wrappers/{index.styled.js → styled.js}

@@ -11,9 +11,9 @@ exports.StyledWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", ";\n  margin: ", ";\n"], ["\n  max-width: ", ";\n  margin: ", ";\n"])), function (_a) {
     var maxWidth = _a.maxWidth;
-    return maxWidth + 'px';
+    return (maxWidth ? "".concat(maxWidth, "px") : 'unset');
 }, function (_a) {
     var align = _a.align;
-    return align === 'left' ? 'unset' : '0 auto';
+    return (align === 'left' ? 'unset' : '0 auto');
 });
 var templateObject_1;

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

@@ -1 +1,10 @@
-export function useScreenWidth(resizeFn: any): number;
+export interface UseScreenWidthOptions {
+    resizeFn?: () => void;
+}
+/**
+ * Custom hook that tracks the screen width and invokes a resize function if provided.
+ *
+ * @param {resizerFn} resizeFn - The resize function to invoke when the screen width changes. Defaults to `() => {}` -.
+ * @return {number} The current screen width.
+ */
+export declare const useScreenWidth: (options?: UseScreenWidthOptions) => number;

package/dist/utils/customHooks/useScreenWidth.js

@@ -3,20 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScreenWidth = void 0;
 var lodash_1 = require("lodash");
 var react_1 = require("react");
-var useScreenWidth = function (resizeFn) {
-    var _a = (0, react_1.useState)(document.documentElement.clientWidth), screenWidth = _a[0], setScreenWidth = _a[1]; // exclude scrollbar + zoom
-    var handleResize = function () {
-        //if (screenWidth === document.documentElement.clientWidth) return; // in case of vertical resize (mobile browser bottom/top bars)
+/**
+ * Custom hook that tracks the screen width and invokes a resize function if provided.
+ *
+ * @param {resizerFn} resizeFn - The resize function to invoke when the screen width changes. Defaults to `() => {}` -.
+ * @return {number} The current screen width.
+ */
+var useScreenWidth = function (options) {
+    if (options === void 0) { options = {}; }
+    var resizeFn = options.resizeFn;
+    var _a = (0, react_1.useState)(document.documentElement.clientWidth), screenWidth = _a[0], setScreenWidth = _a[1];
+    var handleResize = (0, lodash_1.debounce)(function () {
         setScreenWidth(document.documentElement.clientWidth);
-        resizeFn && resizeFn();
-    };
-    handleResize = (0, lodash_1.debounce)(handleResize, 500);
+        resizeFn === null || resizeFn === void 0 ? void 0 : resizeFn();
+    }, 500);
     (0, react_1.useEffect)(function () {
         window.addEventListener('resize', handleResize);
         return function () {
             window.removeEventListener('resize', handleResize);
         };
-    }, []);
+    }, [handleResize]);
     return screenWidth;
 };
 exports.useScreenWidth = useScreenWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.112.1",
+  "version": "2.113.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,8 +85,9 @@
     "access": "public"
   },
   "dependencies": {
-    "framer-motion": "^4.1.17",
     "@faker-js/faker": "^8.3.1",
+    "@lexical/react": "^0.13.1",
+    "@lexical/table": "^0.13.1",
     "@react-hook/resize-observer": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",
@@ -95,15 +96,14 @@
     "draft-js": "^0.11.7",
     "draftjs-conductor": "^2.2.0",
     "faker": "^6.6.6",
+    "framer-motion": "^4.1.17",
     "immutable": "^3.7.6",
+    "lexical": "^0.13.1",
     "lodash": "^4.17.21",
     "modularscale-js": "^3.0.1",
     "moment": "^2.24.0",
     "phosphor-react": "^1.4.1",
     "react-player": "^2.12.0",
-    "react-virtualized": "^9.22.5",
-    "lexical": "0.13.1",
-    "@lexical/react": "0.13.1",
-    "@lexical/table": "0.13.1"
+    "react-virtualized": "^9.22.5"
   }
 }

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

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

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

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