oolib 2.108.2 → 2.109.0

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

@@ -1,5 +1,18 @@
-export function Breadcrumbs({ links, invert }: {
-    links: any;
-    invert: any;
-}): React.JSX.Element;
 import React from "react";
+interface BreadcrumbLink {
+    to: string;
+    display: string;
+}
+interface BreadcrumbsProps {
+    links?: BreadcrumbLink[];
+    invert?: boolean;
+}
+/**
+ * Renders a Breadcrumbs component based on the provided links and invert flag.
+ *
+ * @param {BreadcrumbsProps} links - The array of links to be displayed in the breadcrumbs
+ * @param {boolean} invert - Flag to indicate whether to invert the colors of the breadcrumbs
+ * @return {React.ReactElement} The rendered Breadcrumbs component
+ */
+export declare const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps>;
+export {};

package/dist/components/Breadcrumbs/index.js

@@ -32,37 +32,49 @@ var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var ArrowLeft = icons_1.icons.ArrowLeft;
 var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100, greyColor50 = themes_1.colors.greyColor50;
-// links array will be taken from params in the future (react router)
+/**
+ * Renders a Breadcrumbs component based on the provided links and invert flag.
+ *
+ * @param {BreadcrumbsProps} links - The array of links to be displayed in the breadcrumbs
+ * @param {boolean} invert - Flag to indicate whether to invert the colors of the breadcrumbs
+ * @return {React.ReactElement} The rendered Breadcrumbs component
+ */
 var Breadcrumbs = function (_a) {
     var links = _a.links, invert = _a.invert;
     var _b = (0, react_1.useState)(0), containerWidth = _b[0], setContainerWidth = _b[1];
     var _c = (0, react_1.useState)(false), beConcise = _c[0], setBeConcise = _c[1];
     var measuredContainer = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
-        measuredContainer && setContainerWidth(measuredContainer.current.offsetWidth);
+        measuredContainer.current && setContainerWidth(measuredContainer.current.offsetWidth);
     }, []);
     (0, react_1.useLayoutEffect)(function () {
+        var _a;
         if (containerWidth === 0)
             return; // when the measuredRef isn't updated yet
-        var children = measuredContainer.current.children;
+        var children = (_a = measuredContainer.current) === null || _a === void 0 ? void 0 : _a.children;
         var isOverflowing = children[children.length - 1].getBoundingClientRect().right > containerWidth * 0.95; // if exceeds 95% of the parent
         if (isOverflowing)
             setBeConcise(true);
     }, [containerWidth]);
-    if (containerWidth > (0, mixins_1.getBreakPoint)('md')) { // for large devices (not default since containerWidth is initialized to 0)
+    if (containerWidth > (0, mixins_1.getBreakPoint)('md')) {
+        // for large devices (not default since containerWidth is initialized to 0)
         var linksDisplayed_1 = beConcise && links.length > 3 ? [links[0], { to: "", display: "..." }, links[links.length - 2], links[links.length - 1]] : links;
         return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer }, linksDisplayed_1.map(function (link, ind) {
-            return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: link.to, invert: invert, key: ind, style: ind == linksDisplayed_1.length - 1 ? {
-                    pointerEvents: 'none',
-                    color: greyColor50,
-                    width: !beConcise ? 'auto' : (function () {
-                        var children = measuredContainer.current.children;
-                        var childrenCount = children.length;
-                        var correctionFactor = 88;
-                        return containerWidth - (children[0].scrollWidth + correctionFactor + (childrenCount > 2 &&
-                            children[childrenCount - 2].scrollWidth)) + 'px';
-                    })()
-                } : {} },
+            return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: link.to, invert: invert, key: ind, style: ind === linksDisplayed_1.length - 1
+                    ? {
+                        pointerEvents: 'none',
+                        color: greyColor50,
+                        width: !beConcise
+                            ? 'auto'
+                            : (function () {
+                                var _a;
+                                var children = (_a = measuredContainer.current) === null || _a === void 0 ? void 0 : _a.children;
+                                var childrenCount = children.length;
+                                var correctionFactor = 88;
+                                return containerWidth - (children[0].scrollWidth + correctionFactor + (childrenCount > 2 && children[childrenCount - 2].scrollWidth)) + 'px';
+                            })(),
+                    }
+                    : {} },
                 react_1.default.createElement(Typo_1.SANS_2, { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, link.display)));
         })));
     }

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

@@ -1,2 +1,3 @@
-export const StyledBreadcrumbs: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledLinkCrumb: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledLinkCrumb: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export { StyledBreadcrumbs, StyledLinkCrumb };

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

@@ -1,13 +1,19 @@
 import React, { CSSProperties, ReactNode } from "react";
-export declare const Comp: ({ children, className, style, enableContainerQuery }: {
-    children?: ReactNode;
+export interface ContainerProps {
+    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>>;
+}
+export declare const Comp: ({ children, className, style, enableContainerQuery }: ContainerProps, ref: React.RefObject<HTMLDivElement> | null) => React.JSX.Element;
+/**
+ * Renders a container component with optional container query feature.
+ *
+ * @param {ContainerProps} children - The child elements to be rendered within the container.
+ * @param {string} className - The CSS class for styling the container.
+ * @param {Object} style - The inline styles for the container.
+ * @param {boolean} enableContainerQuery - Flag to enable or disable the container query feature.
+ * @param {React.RefObject<HTMLDivElement> | null} ref - Reference object to the container element.
+ * @return {React.ReactElement} The rendered container component.
+ */
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Container/index.js

@@ -36,4 +36,14 @@ var Comp = function (_a, ref //if a ref is passed from outside, it will override
     return (react_1.default.createElement(index_styled_1.StyledContainer, { ref: ref || selfRef, className: className || "", style: style, containerQuery: containerQuery }, children));
 };
 exports.Comp = Comp;
+/**
+ * Renders a container component with optional container query feature.
+ *
+ * @param {ContainerProps} children - The child elements to be rendered within the container.
+ * @param {string} className - The CSS class for styling the container.
+ * @param {Object} style - The inline styles for the container.
+ * @param {boolean} enableContainerQuery - Flag to enable or disable the container query feature.
+ * @param {React.RefObject<HTMLDivElement> | null} ref - Reference object to the container element.
+ * @return {React.ReactElement} The rendered container component.
+ */
 exports.Container = (0, react_1.forwardRef)(exports.Comp);

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

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

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

@@ -1,4 +1,4 @@
-export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, genCreateTagButton, invert, popOutOfOverflowHiddenParent, enableUseSetYOrientation, S, observerRef }: {
+export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, genCreateTagButton, invert, popOutOfOverflowHiddenParent, enableUseSetYOrientation, S, observerRef, }: {
     lightboxHeight: any;
     lightboxStyle: any;
     optionsAnchor: any;

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

@@ -58,17 +58,14 @@ var OptionsSingle = function (_a) {
     relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
     showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
     searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, genCreateTagButton = _a.genCreateTagButton, invert = _a.invert, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, _b = _a.enableUseSetYOrientation, enableUseSetYOrientation = _b === void 0 ? true : _b, // if using this component standalone, this should be set to false ( if relativeToRef is not being passed thru)
-    S = _a.S, observerRef = _a.observerRef
-    //disabled only with this is being used for the RTEEmbedLightbox. Also this might be temp.
-    //ensure this is set to false, if you are not passing a 'relativeToRef'
-    ;
+    S = _a.S, observerRef = _a.observerRef;
     //INIT ORIENTATION STATE AND CUSTOM HOOK
     var optionsRef = (0, react_1.useRef)(null);
     var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
         showOptions: showOptions,
         optionsRef: optionsRef,
         relativeToRef: relativeToRef,
-        enabled: enableUseSetYOrientation
+        enabled: enableUseSetYOrientation,
     }).yOrientation;
     var _c = (0, useKeyboardControl_1.useKeyboardControl)({
         showOptions: showOptions,
@@ -83,7 +80,12 @@ var OptionsSingle = function (_a) {
     (0, react_1.useEffect)(function () {
         setSearchBarFocus(showOptions);
     }, [showOptions]);
-    var genSearchBar = function () { return (react_1.default.createElement("div", { style: { position: 'sticky', top: 0, zIndex: 1, background: invert ? themes_1.colors.greyColor90 : themes_1.colors.white } },
+    var genSearchBar = function () { return (react_1.default.createElement("div", { style: {
+            position: "sticky",
+            top: 0,
+            zIndex: 1,
+            background: invert ? themes_1.colors.greyColor90 : themes_1.colors.white,
+        } },
         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 }))); };
@@ -102,19 +104,22 @@ var OptionsSingle = function (_a) {
             invert: invert,
             relativeToRef: relativeToRef,
             popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent,
-            S: S
+            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, observerRef: options.length === index + 1 ? observerRef : null }))));
-                    }),
+            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,
+                observerRef: options.length === index + 1 ? observerRef : null,
+            }))))); })),
             genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

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

@@ -1,8 +1,3 @@
 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?: import("react").ReactNode;
-    className?: string;
-    style?: import("react").CSSProperties;
-    enableContainerQuery?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Container").ContainerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/components/Lexical/Plugins/TableCellResizer/index.d.ts

@@ -0,0 +1,3 @@
+import './style.css';
+import { ReactPortal } from 'react';
+export default function TableCellResizerPlugin(): null | ReactPortal;

package/dist/components/Lexical/Plugins/TableCellResizer/index.js

@@ -0,0 +1,286 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./style.css");
+var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+var useLexicalEditable_1 = __importDefault(require("@lexical/react/useLexicalEditable"));
+var table_1 = require("@lexical/table");
+var lexical_1 = require("lexical");
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var MIN_ROW_HEIGHT = 33;
+var MIN_COLUMN_WIDTH = 50;
+function TableCellResizer(_a) {
+    var editor = _a.editor;
+    var targetRef = (0, react_1.useRef)(null);
+    var resizerRef = (0, react_1.useRef)(null);
+    var tableRectRef = (0, react_1.useRef)(null);
+    var mouseStartPosRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(null), mouseCurrentPos = _b[0], updateMouseCurrentPos = _b[1];
+    var _c = (0, react_1.useState)(null), activeCell = _c[0], updateActiveCell = _c[1];
+    var _d = (0, react_1.useState)(false), isSelectingGrid = _d[0], updateIsSelectingGrid = _d[1];
+    var _e = (0, react_1.useState)(null), draggingDirection = _e[0], updateDraggingDirection = _e[1];
+    (0, react_1.useEffect)(function () {
+        return editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, function (payload) {
+            var selection = (0, lexical_1.$getSelection)();
+            var isTableSelection = (0, table_1.$isTableSelection)(selection);
+            if (isSelectingGrid !== isTableSelection) {
+                updateIsSelectingGrid(isTableSelection);
+            }
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_HIGH);
+    });
+    var resetState = (0, react_1.useCallback)(function () {
+        updateActiveCell(null);
+        targetRef.current = null;
+        updateDraggingDirection(null);
+        mouseStartPosRef.current = null;
+        tableRectRef.current = null;
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var onMouseMove = function (event) {
+            setTimeout(function () {
+                var target = event.target;
+                if (draggingDirection) {
+                    updateMouseCurrentPos({
+                        x: event.clientX,
+                        y: event.clientY,
+                    });
+                    return;
+                }
+                if (resizerRef.current && resizerRef.current.contains(target)) {
+                    return;
+                }
+                if (targetRef.current !== target) {
+                    targetRef.current = target;
+                    var cell_1 = (0, table_1.getDOMCellFromTarget)(target);
+                    if (cell_1 && activeCell !== cell_1) {
+                        editor.update(function () {
+                            var tableCellNode = (0, lexical_1.$getNearestNodeFromDOMNode)(cell_1.elem);
+                            if (!tableCellNode) {
+                                throw new Error('TableCellResizer: Table cell node not found.');
+                            }
+                            var tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
+                            var tableElement = editor.getElementByKey(tableNode.getKey());
+                            if (!tableElement) {
+                                throw new Error('TableCellResizer: Table element not found.');
+                            }
+                            targetRef.current = target;
+                            tableRectRef.current = tableElement.getBoundingClientRect();
+                            updateActiveCell(cell_1);
+                        });
+                    }
+                    else if (cell_1 == null) {
+                        resetState();
+                    }
+                }
+            }, 0);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        return function () {
+            document.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [activeCell, draggingDirection, editor, resetState]);
+    var isHeightChanging = function (direction) {
+        if (direction === 'bottom') {
+            return true;
+        }
+        return false;
+    };
+    var updateRowHeight = (0, react_1.useCallback)(function (newHeight) {
+        if (!activeCell) {
+            throw new Error('TableCellResizer: Expected active cell.');
+        }
+        editor.update(function () {
+            var tableCellNode = (0, lexical_1.$getNearestNodeFromDOMNode)(activeCell.elem);
+            if (!(0, table_1.$isTableCellNode)(tableCellNode)) {
+                throw new Error('TableCellResizer: Table cell node not found.');
+            }
+            var tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
+            var tableRowIndex = (0, table_1.$getTableRowIndexFromTableCellNode)(tableCellNode);
+            var tableRows = tableNode.getChildren();
+            if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
+                throw new Error('Expected table cell to be inside of table row.');
+            }
+            var tableRow = tableRows[tableRowIndex];
+            if (!(0, table_1.$isTableRowNode)(tableRow)) {
+                throw new Error('Expected table row');
+            }
+            tableRow.setHeight(newHeight);
+        });
+    }, [activeCell, editor]);
+    var updateColumnWidth = (0, react_1.useCallback)(function (newWidth) {
+        if (!activeCell) {
+            throw new Error('TableCellResizer: Expected active cell.');
+        }
+        editor.update(function () {
+            var tableCellNode = (0, lexical_1.$getNearestNodeFromDOMNode)(activeCell.elem);
+            if (!(0, table_1.$isTableCellNode)(tableCellNode)) {
+                throw new Error('TableCellResizer: Table cell node not found.');
+            }
+            var tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
+            var tableColumnIndex = (0, table_1.$getTableColumnIndexFromTableCellNode)(tableCellNode);
+            var tableRows = tableNode.getChildren();
+            for (var r = 0; r < tableRows.length; r++) {
+                var tableRow = tableRows[r];
+                if (!(0, table_1.$isTableRowNode)(tableRow)) {
+                    throw new Error('Expected table row');
+                }
+                var rowCells = tableRow.getChildren();
+                var rowCellsSpan = rowCells.map(function (cell) { return cell.getColSpan(); });
+                var aggregatedRowSpans = rowCellsSpan.reduce(function (rowSpans, cellSpan) {
+                    var _a;
+                    var previousCell = (_a = rowSpans[rowSpans.length - 1]) !== null && _a !== void 0 ? _a : 0;
+                    rowSpans.push(previousCell + cellSpan);
+                    return rowSpans;
+                }, []);
+                var rowColumnIndexWithSpan = aggregatedRowSpans.findIndex(function (cellSpan) { return cellSpan > tableColumnIndex; });
+                if (rowColumnIndexWithSpan >= rowCells.length ||
+                    rowColumnIndexWithSpan < 0) {
+                    throw new Error('Expected table cell to be inside of table row.');
+                }
+                var tableCell = rowCells[rowColumnIndexWithSpan];
+                if (!(0, table_1.$isTableCellNode)(tableCell)) {
+                    throw new Error('Expected table cell');
+                }
+                tableCell.setWidth(newWidth);
+            }
+        });
+    }, [activeCell, editor]);
+    var mouseUpHandler = (0, react_1.useCallback)(function (direction) {
+        var handler = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!activeCell) {
+                throw new Error('TableCellResizer: Expected active cell.');
+            }
+            if (mouseStartPosRef.current) {
+                var _a = mouseStartPosRef.current, x = _a.x, y = _a.y;
+                if (activeCell === null) {
+                    return;
+                }
+                if (isHeightChanging(direction)) {
+                    var height = activeCell.elem.getBoundingClientRect().height;
+                    var heightChange = Math.abs(event.clientY - y);
+                    var isShrinking = direction === 'bottom' && y > event.clientY;
+                    updateRowHeight(Math.max(isShrinking ? height - heightChange : heightChange + height, MIN_ROW_HEIGHT));
+                }
+                else {
+                    var computedStyle = getComputedStyle(activeCell.elem);
+                    var width = activeCell.elem.clientWidth; // width with padding
+                    width -=
+                        parseFloat(computedStyle.paddingLeft) +
+                            parseFloat(computedStyle.paddingRight);
+                    var widthChange = Math.abs(event.clientX - x);
+                    var isShrinking = direction === 'right' && x > event.clientX;
+                    updateColumnWidth(Math.max(isShrinking ? width - widthChange : widthChange + width, MIN_COLUMN_WIDTH));
+                }
+                resetState();
+                document.removeEventListener('mouseup', handler);
+            }
+        };
+        return handler;
+    }, [activeCell, resetState, updateColumnWidth, updateRowHeight]);
+    var toggleResize = (0, react_1.useCallback)(function (direction) {
+        return function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!activeCell) {
+                throw new Error('TableCellResizer: Expected active cell.');
+            }
+            mouseStartPosRef.current = {
+                x: event.clientX,
+                y: event.clientY,
+            };
+            updateMouseCurrentPos(mouseStartPosRef.current);
+            updateDraggingDirection(direction);
+            document.addEventListener('mouseup', mouseUpHandler(direction));
+        };
+    }, [activeCell, mouseUpHandler]);
+    var getResizers = (0, react_1.useCallback)(function () {
+        if (activeCell) {
+            var _a = activeCell.elem.getBoundingClientRect(), height = _a.height, width = _a.width, top_1 = _a.top, left = _a.left;
+            var styles = {
+                bottom: {
+                    backgroundColor: 'none',
+                    cursor: 'row-resize',
+                    height: '10px',
+                    left: "".concat(window.pageXOffset + left, "px"),
+                    top: "".concat(window.pageYOffset + top_1 + height, "px"),
+                    width: "".concat(width, "px"),
+                },
+                right: {
+                    backgroundColor: 'none',
+                    cursor: 'col-resize',
+                    height: "".concat(height, "px"),
+                    left: "".concat(window.pageXOffset + left + width, "px"),
+                    top: "".concat(window.pageYOffset + top_1, "px"),
+                    width: '10px',
+                },
+            };
+            var tableRect = tableRectRef.current;
+            if (draggingDirection && mouseCurrentPos && tableRect) {
+                if (isHeightChanging(draggingDirection)) {
+                    styles[draggingDirection].left = "".concat(window.pageXOffset + tableRect.left, "px");
+                    styles[draggingDirection].top = "".concat(window.pageYOffset + mouseCurrentPos.y, "px");
+                    styles[draggingDirection].height = '3px';
+                    styles[draggingDirection].width = "".concat(tableRect.width, "px");
+                }
+                else {
+                    styles[draggingDirection].top = "".concat(window.pageYOffset + tableRect.top, "px");
+                    styles[draggingDirection].left = "".concat(window.pageXOffset + mouseCurrentPos.x, "px");
+                    styles[draggingDirection].width = '3px';
+                    styles[draggingDirection].height = "".concat(tableRect.height, "px");
+                }
+                styles[draggingDirection].backgroundColor = '#adf';
+            }
+            return styles;
+        }
+        return {
+            bottom: null,
+            left: null,
+            right: null,
+            top: null,
+        };
+    }, [activeCell, draggingDirection, mouseCurrentPos]);
+    var resizerStyles = getResizers();
+    return (React.createElement("div", { ref: resizerRef }, activeCell != null && !isSelectingGrid && (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "TableCellResizer__resizer TableCellResizer__ui", style: resizerStyles.right || undefined, onMouseDown: toggleResize('right') }),
+        React.createElement("div", { className: "TableCellResizer__resizer TableCellResizer__ui", style: resizerStyles.bottom || undefined, onMouseDown: toggleResize('bottom') })))));
+}
+function TableCellResizerPlugin() {
+    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
+    var isEditable = (0, useLexicalEditable_1.default)();
+    return (0, react_1.useMemo)(function () {
+        return isEditable
+            ? (0, react_dom_1.createPortal)(React.createElement(TableCellResizer, { editor: editor }), document.body)
+            : null;
+    }, [editor, isEditable]);
+}
+exports.default = TableCellResizerPlugin;

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export { ResourceInput } from "./components/ResourceInput";
 export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfirmAction";
 export { SimpleTable } from "./components/SimpleTable";
 export { styledOKELinkCSS } from "./components/OKELink/styled";
+export { default as TableCellResizerPlugin } from "./components/Lexical/Plugins/TableCellResizer";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";

package/dist/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.ResourceInput = void 0;
+exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.ResourceInput = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -166,3 +166,6 @@ Object.defineProperty(exports, "SimpleTable", { enumerable: true, get: function
 //styled-components css for use in lexical, since lexical uses classes primarily
 var styled_1 = require("./components/OKELink/styled");
 Object.defineProperty(exports, "styledOKELinkCSS", { enumerable: true, get: function () { return styled_1.styledOKELinkCSS; } });
+// lexical
+var TableCellResizer_1 = require("./components/Lexical/Plugins/TableCellResizer");
+Object.defineProperty(exports, "TableCellResizerPlugin", { enumerable: true, get: function () { return __importDefault(TableCellResizer_1).default; } });

package/dist/themes/mixins/index.d.ts

@@ -1,15 +1,16 @@
 export { transition } from "./transitions";
-export function getBreakPoint(point: any): 0 | 600 | 800 | 1000 | 1300 | 1600 | "pass a valid breakpoint";
-export function mediaQuery(point: any): string;
-export function isElementInViewport(el: any): boolean;
-export const ellipsis: import("styled-components").FlattenSimpleInterpolation;
-export function clampText(noOfLines: any): import("styled-components").FlattenSimpleInterpolation;
-export function multilineUnderline({ color, thickness, reverse, }: {
+export { boxShadow0, boxShadow1, innerShadow0 } from "./boxShadows";
+export type breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export declare const getBreakPoint: (point: breakpoint) => 0 | 600 | 800 | 1000 | 1300 | 1600;
+export declare const mediaQuery: (point: any) => string;
+export declare const isElementInViewport: (el: any) => boolean;
+export declare const ellipsis: import("styled-components").FlattenSimpleInterpolation;
+export declare const clampText: (noOfLines: any) => import("styled-components").FlattenSimpleInterpolation;
+export declare const multilineUnderline: ({ color, thickness, reverse, }: {
     color: any;
     thickness?: string;
     reverse?: boolean;
-}): {
+}) => {
     init: import("styled-components").FlattenSimpleInterpolation;
     hovered: import("styled-components").FlattenSimpleInterpolation;
 };
-export { boxShadow0, boxShadow1, innerShadow0 } from "./boxShadows";

package/dist/themes/mixins/index.js

@@ -27,7 +27,7 @@ var getBreakPoint = function (point) {
         case "xxl":
             return 1600;
         default:
-            return "pass a valid breakpoint";
+            throw new Error("Invalid breakpoint");
     }
 };
 exports.getBreakPoint = getBreakPoint;

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

@@ -1,8 +1,12 @@
-export declare const useContainerQuery: (options?: {
+/// <reference types="react" />
+import { breakpoint } from "../../themes/mixins";
+export interface useContainerQueryOptions {
     enabled?: boolean;
-}) => {
+}
+export interface useContainerQueryReturn {
     ref?: React.RefObject<HTMLDivElement>;
-    containerQuery?: (point: string) => (styles: string | TemplateStringsArray) => string;
+    containerQuery?: (point: breakpoint) => (styles: string | TemplateStringsArray) => string;
     containerWidth: number;
     containerHeight: number;
-};
+}
+export declare const useContainerQuery: (options?: useContainerQueryOptions) => useContainerQueryReturn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.108.2",
+  "version": "2.109.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -100,6 +100,9 @@
     "moment": "^2.24.0",
     "phosphor-react": "^1.4.1",
     "react-player": "^2.12.0",
-    "react-virtualized": "^9.22.5"
+    "react-virtualized": "^9.22.5",
+    "lexical": "0.13.1",
+    "@lexical/react": "0.13.1",
+    "@lexical/table": "0.13.1"
   }
 }