@monolith-forensics/monolith-ui 1.2.91 → 1.2.93

package/dist/SelectBox/SelectBox.js

@@ -36,6 +36,15 @@ export const StyledInputContainer = styled.div `
     if (typeof width === "number")
         return `${width}px`;
 }};
+
+  &[data-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+
+    > * {
+      pointer-events: none;
+    }
+  }
 `;
 const StyledInnerItemContainer = styled.div `
   overflow-y: auto;
@@ -143,12 +152,6 @@ const StyledItem = styled.div `
                     ? "6px 16px"
                     : "2px 8px"};
 
-  // Mantine-Dev syntax, styles if the item is disabled
-  &[data-disabled] {
-    color: ${(props) => props.theme.palette.text.secondary};
-    pointer-events: "none";
-  }
-
   &:hover {
     background-color: ${(props) => props.theme.palette.action.hover};
     color: ${(props) => props.theme.palette.text.primary};
@@ -159,15 +162,78 @@ const StyledItem = styled.div `
     background-color: ${(props) => props.theme.palette.divider};
     color: ${(props) => props.theme.palette.text.primary};
   }
+
+  &[data-disabled] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    opacity: 0.5;
+    pointer-events: none;
+  }
 `;
+/**
+ *
+ * Attempts to resolve the value to an Option object
+ * if the value is a string, it will attempt to find the corresponding Option object
+ * if the value is an Option object, it will attempt to find the corresponding Option object
+ * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
+ */
+const resolveValue = (value, data) => {
+    let foundOption;
+    if (value === undefined)
+        return undefined;
+    if (value === null)
+        return null;
+    if (typeof value === "string") {
+        foundOption = data.find((item) => item.value === value);
+    }
+    else if (typeof value === "number") {
+        foundOption = data.find((item) => item.value === value);
+    }
+    else if (typeof value === "object") {
+        foundOption = data.find((item) => item.value == value.value);
+    }
+    if (foundOption)
+        return foundOption;
+    if (typeof value === "string") {
+        return { value, label: value };
+    }
+    if (typeof value === "number") {
+        return { value, label: value.toString() };
+    }
+    return value;
+};
 const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
-DropDownProps = {}, debounceTime = 150, sort = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const theme = useTheme();
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    const [inputValue, setInputValue] = useState("");
+    const isControlled = value !== undefined;
+    const resolvedOptions = data.map((item) => ({
+        value: isObjectArray ? item.value : item,
+        label: isObjectArray ? item.label : item,
+        group: isObjectArray ? item.group : undefined,
+        disabled: isObjectArray ? item.disabled : undefined,
+        data: isObjectArray ? item.data : undefined,
+    }));
+    /**
+     * Get the correct option if the default value is a string
+     * otherwise, use the default value as is
+     * this allows setting the value with a string or Option object
+     */
+    const resolvedDefaultValue = resolveValue(defaultValue, resolvedOptions);
+    /**
+     * Get the correct option if the value is a string
+     * otherwise, use the value as is
+     * this allows setting the value with a string or Option object
+     */
+    const resolvedValue = resolveValue(value, resolvedOptions);
+    const [valueState, setValueState] = useState(resolvedDefaultValue);
+    /**
+     * Get the correct value based on whether the component is controlled or not
+     * if controlled, use the controlled value, otherwise use the resolved value
+     */
+    const _value = isControlled ? resolvedValue : valueState;
+    const [inputValue, setInputValue] = useState(typeof _value === "object" ? (_value === null || _value === void 0 ? void 0 : _value.label) || "" : _value || "");
     const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState(null);
     const [searchValue, setSearchValue] = useState("");
     const [customItems, setCustomItems] = useState([]);
     const [placement, setPlacement] = useState("bottom-start");
@@ -176,18 +242,17 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
     // Remove duplicates from search dropdown data
-    const uniqueItems = Array.from(new Map([...data, ...customItems].map((item) => [
-        isObjectArray ? item.value : item,
-        item,
-    ])).values());
+    const uniqueItems = Array.from(new Map([...resolvedOptions, ...customItems].map((item) => [item.value, item])).values());
     // search filter for dropdown items
     const filteredItems = uniqueItems
         .filter((item) => {
-        const itemValue = (isObjectArray ? item.label : item);
-        return itemValue === null || itemValue === void 0 ? void 0 : itemValue.toLowerCase().includes(searchValue.toLowerCase());
+        var _a;
+        return (_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase());
     })
         .sort((a, b) => {
         if (grouped) {
+            if (!a.group || !b.group)
+                return 0;
             const aValue = a.group;
             const bValue = b.group;
             return aValue.localeCompare(bValue);
@@ -195,8 +260,8 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         if (!sort)
             return 0;
         // Secondary sort by label/value to ensure consistent ordering
-        const aLabel = isObjectArray ? a.label : a;
-        const bLabel = isObjectArray ? b.label : b;
+        const aLabel = a.label;
+        const bLabel = b.label;
         return aLabel.localeCompare(bLabel);
     });
     const groupedItems = grouped
@@ -242,8 +307,8 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
     };
     const handleInputChange = (e) => {
         const value = e.target.value;
+        setInputValue(value || "");
         debouncedHandleChange(value);
-        setInputValue(value);
         setIsOpen(true);
     };
     const debouncedHandleChange = useDebouncedCallback((value) => {
@@ -254,9 +319,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
             setSearchValue(value);
         }
         if (allowCustomValue && value) {
-            const existingItem = data.find((item) => isObjectArray
-                ? item.label.toLowerCase() === value.toLowerCase()
-                : item.toLowerCase() === value.toLowerCase());
+            const existingItem = resolvedOptions.find((item) => item.value.toLowerCase() === value.toLowerCase());
             if (existingItem)
                 handleChangeSelection(existingItem);
             else
@@ -265,23 +328,21 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         update();
     }, debounceTime);
     const handleBlur = () => {
-        var _a, _b;
         // add custom value if prop is set
         // and input value is not empty
         // and no item is selected
-        if (allowCustomValue && !selected && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
-            handleAddItem((_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.value);
+        if (allowCustomValue && !_value && !!inputValue) {
+            handleAddItem(inputValue);
         }
         setIsOpen(false);
         setSearchValue("");
     };
     const handleClear = (e) => {
         e.preventDefault();
-        if (inputRef.current)
-            inputRef.current.value = "";
+        setInputValue("");
         setIsOpen(false);
         handleChangeSelection(null);
-        setSelected(null);
+        !isControlled && setValueState(null);
         setSearchValue("");
         searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
         update();
@@ -295,23 +356,21 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         setIsOpen(false);
     };
     const handleChangeSelection = useCallback((option) => {
-        setSelected(option);
-        onChange === null || onChange === void 0 ? void 0 : onChange((option === null || option === void 0 ? void 0 : option.value) || option, option);
+        !isControlled && setValueState(option);
+        onChange === null || onChange === void 0 ? void 0 : onChange(option === null || option === void 0 ? void 0 : option.value, option);
     }, [onChange]);
     const handleAddItem = useCallback((newItem) => {
-        const newValue = isObjectArray
-            ? { label: newItem, value: newItem }
-            : newItem;
+        const newValue = { label: newItem, value: newItem };
         setCustomItems((prev) => [...prev, newValue]);
         handleChangeSelection(newValue);
         onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
     }, [onItemAdded, isObjectArray, handleChangeSelection]);
     const handleKeyDown = (e) => {
-        var _a, _b;
-        const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        var _a;
+        const currentInputValue = inputValue;
         // Escape key
         if (e.key === "Escape") {
-            const reference = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+            const reference = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
             reference === null || reference === void 0 ? void 0 : reference.blur();
             setSearchValue("");
             update();
@@ -326,52 +385,56 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         // Arrow down
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            setSelected((prev) => {
-                let newItem = filteredItems[0]; // Loop back to the first item
-                const index = filteredItems.findIndex((item) => isObjectArray
-                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
-                    : item === prev);
-                if (index < filteredItems.length - 1) {
-                    newItem = filteredItems[index + 1];
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
-                return newItem;
-            });
+            let newItem = filteredItems[0]; // Loop back to the first item
+            // Find the index of the currently selected item
+            const index = filteredItems.findIndex((item) => item.value === (_value === null || _value === void 0 ? void 0 : _value.value));
+            // find next available item
+            const nextItem = filteredItems.find((item, i) => i > index && !item.disabled);
+            if (nextItem) {
+                newItem = nextItem;
+            }
+            else if (index < filteredItems.length - 1) {
+                newItem = filteredItems[index + 1];
+            }
+            !isControlled && setValueState(newItem);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newItem.value, newItem);
             return;
         }
         // Arrow up
         if (e.key === "ArrowUp") {
             e.preventDefault();
-            setSelected((prev) => {
-                let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
-                const index = filteredItems.findIndex((item) => isObjectArray
-                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
-                    : item === prev);
-                if (index > 0) {
-                    newItem = filteredItems[index - 1];
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
-                return newItem;
-            });
+            let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+            // Find the index of the currently selected item
+            const index = filteredItems.findIndex((item) => item.value === (_value === null || _value === void 0 ? void 0 : _value.value));
+            // find previous available item
+            const prevItem = filteredItems
+                .slice(0, index)
+                .reverse()
+                .find((item) => !item.disabled);
+            if (prevItem) {
+                newItem = prevItem;
+            }
+            else if (index > 0) {
+                newItem = filteredItems[index - 1];
+            }
+            !isControlled && setValueState(newItem);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newItem.value, newItem);
             return;
         }
         // Tab key
         if (e.key === "Tab") {
-            if (allowCustomValue && !selected && !!currentInputValue) {
+            if (allowCustomValue && !_value && !!currentInputValue) {
                 handleAddItem(currentInputValue);
                 setSearchValue("");
             }
-            else if (!selected) {
+            else if (!_value) {
                 // clear input
-                if (inputRef.current) {
-                    inputRef.current.value = "";
-                }
+                setInputValue("");
             }
             setSearchValue("");
             setIsOpen(false);
             return;
         }
-        // setSelected(null); // Reset selected value when input value changes
     };
     const handleFocus = () => {
         if (openOnFocus) {
@@ -407,26 +470,10 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating, refs.reference, handleBlur]);
-    // Handle default value
-    useEffect(() => {
-        if (defaultValue) {
-            const isOption = defaultValue.value !== undefined;
-            const searchPattern = isOption
-                ? defaultValue.value
-                : defaultValue;
-            setSelected(data.find((item) => isObjectArray
-                ? item.value === searchPattern
-                : item === searchPattern) || null);
-        }
-    }, [data, defaultValue, isObjectArray]);
     // handle input value change
     useEffect(() => {
-        if (inputRef.current && selected) {
-            inputRef.current.value = isObjectArray
-                ? selected.label
-                : selected;
-        }
-    }, [selected]);
+        setInputValue((_value === null || _value === void 0 ? void 0 : _value.label) || "");
+    }, [_value]);
     // handle scroll item into view
     useEffect(() => {
         var _a, _b;
@@ -434,7 +481,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         if (item) {
             item.scrollIntoView({ block: "nearest" });
         }
-    }, [selected]);
+    }, [_value]);
     // make calls to onSearch callback
     useEffect(() => {
         if (searchable) {
@@ -456,7 +503,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (_value || !!inputValue) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
@@ -476,16 +523,10 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
                                 : "",
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && actionComponent && (_jsx(ActionMenu, { children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: "No Items" })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
                                     ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                                return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
-                                                            ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
-                                                                item.value
-                                                            : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                                return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
                                             })] }, group.label)))
                                     : filteredItems.map((item, index) => {
-                                        return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
-                                                    ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
-                                                        (item === null || item === void 0 ? void 0 : item.value)
-                                                    : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                        return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
                                     }) }))] })) }) }))] }));
 }) `
   position: relative;

package/dist/SelectBox/types.d.ts

@@ -3,12 +3,14 @@ export type Option = {
     label: string;
     value: any;
     group?: string;
+    disabled?: boolean;
     data?: any;
 };
+export type Value = number | boolean | string | Option;
 export interface SelectBoxProps {
     className?: string;
-    defaultValue?: Option | string;
-    value?: Option | string;
+    defaultValue?: Option | string | number;
+    value?: Option | string | number;
     data?: Option[] | string[];
     placeholder?: string;
     arrow?: boolean;
@@ -25,18 +27,19 @@ export interface SelectBoxProps {
     required?: boolean;
     error?: string;
     openOnFocus?: boolean;
-    actionComponent?: JSX.Element;
+    actionComponent?: React.ReactNode;
     focused?: boolean;
     DropDownProps?: any;
     debounceTime?: number;
     sort?: boolean;
+    disabled?: boolean;
     renderOption?: (item: Option | string) => React.ReactNode;
     OptionTooltip?: (props: {
         data: any;
-    }) => JSX.Element | React.ReactNode;
+    }) => React.ReactNode;
     onChange?: (value: any, item: any) => void;
     onScroll?: (e: any) => void;
     onSearch?: (value: string) => void;
     searchFn?: (value: string) => void;
-    onItemAdded?: (item: any) => void;
+    onItemAdded?: (item: Option | string) => void;
 }

package/dist/Switch/Switch.js

@@ -35,9 +35,9 @@ const StyledRoot = styled(RadixSwitch.Root) `
     : size === "sm"
         ? "35px"
         : size === "md"
-            ? "28px"
+            ? "41px"
             : size === "lg"
-                ? "34px"
+                ? "53px"
                 : size === "xl"
                     ? "70px"
                     : "26px"};
@@ -53,9 +53,9 @@ const StyledRoot = styled(RadixSwitch.Root) `
     : size === "sm"
         ? "2px"
         : size === "md"
-            ? "28px"
+            ? "2px 9px 2px 3px"
             : size === "lg"
-                ? "34px"
+                ? "2px 9px 2px 3px"
                 : size === "xl"
                     ? "2px 4px"
                     : "2px"};

package/dist/Table/ActionButton.d.ts

@@ -1,4 +1,2 @@
-declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export default ActionButton;

package/dist/Table/ActionCell.d.ts

@@ -1,4 +1,2 @@
-declare const ActionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./types").TDProps> & import("./types").TDProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+declare const ActionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./types").TDProps> & import("./types").TDProps, never>> & string;
 export default ActionCell;

package/dist/Table/SelectionCell.d.ts

@@ -1,4 +1,2 @@
-declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./types").TDProps> & import("./types").TDProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./types").TDProps> & import("./types").TDProps, never>> & string;
 export default SelectionCell;

package/dist/Table/StaticRows.d.ts

@@ -1,5 +1,5 @@
 declare const StaticRows: React.FC<{
-    targetElm: React.RefObject<HTMLDivElement>;
-    listElm: React.RefObject<HTMLDivElement>;
+    targetElm: React.MutableRefObject<HTMLDivElement | null>;
+    listElm: React.MutableRefObject<HTMLDivElement | null>;
 }>;
 export default StaticRows;

package/dist/Table/Table.d.ts

@@ -1,3 +1,2 @@
 import { TableProps } from "./types";
-declare const Table: React.FC<TableProps>;
-export default Table;
+export declare const Table: React.FC<TableProps>;

package/dist/Table/Table.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import Column from "./Column";
 import { useOverlayScrollbars } from "overlayscrollbars-react";
 import { StyledTable } from "./TableComponents";
 import TableHeader from "./TableHeader";
@@ -32,21 +31,21 @@ const StyledTableContainer = styled.div `
   flex: 1 1 auto;
 `;
 const TableContent = () => {
-    const { columnState, tableElement, headerRowElm, tableDimensions, targetElm, listElm, rowHeight, headerRowHeight, compactState, virtualized, loading, } = useTable();
+    const { columnState, tableElement, tableHeight, tableMaxHeight, tableMinHeight, headerRowElm, tableDimensions, targetElm, listElm, rowHeight, headerRowHeight, compactState, virtualized, loading, } = useTable();
     const visibleColumnCount = columnState.filter((column) => column.visible === true).length;
-    return (_jsxs(StyledTableContainer, { children: [_jsx(TableMenu, {}), _jsxs(StyledTable, { className: "mfui-table", ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx(_Fragment, {}), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
+    return (_jsxs(StyledTableContainer, { children: [_jsx(TableMenu, {}), _jsxs(StyledTable, { className: "mfui-table", style: {
+                    height: tableHeight || "100%",
+                    maxHeight: tableMaxHeight,
+                    minHeight: tableMinHeight,
+                }, ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx(_Fragment, {}), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
 };
-const Table = (_a) => {
-    var { data, children } = _a, props = __rest(_a, ["data", "children"]) // pass through props straight to table context
+export const Table = (_a) => {
+    var { data, columnProps } = _a, props = __rest(_a, ["data", "columnProps"]) // pass through props straight to table context
     ;
     const tableElement = useRef(null);
     const targetElm = useRef(null);
     const listElm = useRef(null);
     const headerRowElm = useRef(null);
-    // check if children is array and convert if not
-    if (!Array.isArray(children)) {
-        children = [children];
-    }
     const [tableDimensions, setTableDimensions] = useState({
         width: 0,
         height: 0,
@@ -111,8 +110,5 @@ const Table = (_a) => {
         };
     }, []);
     const __data = useMemo(() => data === null || data === void 0 ? void 0 : data.map((d, i) => (Object.assign(Object.assign({}, d), { __key: shortUUID.generate(), __index: i }))), [data]);
-    return (_jsx(TableProvider, Object.assign({ columns: children
-            .filter((child) => child.type === Column)
-            .map((child) => child.props), data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm }, props, { children: _jsx(TableContent, {}) })));
+    return (_jsx(TableProvider, Object.assign({ columns: columnProps, data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm }, props, { children: _jsx(TableContent, {}) })));
 };
-export default Table;

package/dist/Table/TableComponents.d.ts

@@ -2,13 +2,9 @@ import { TDProps, TRProps } from "./types";
 export declare const THead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TR: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TRProps>> & string;
-export declare const THR: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TRProps> & TRProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+export declare const THR: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TRProps> & TRProps, never>> & string;
 export declare const TD: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TDProps>> & string;
-export declare const TH: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TDProps> & TDProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+export declare const TH: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TDProps> & TDProps, never>> & string;
 export declare const InnerCellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableViewPort: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableListElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Table/TableComponents.js

@@ -116,15 +116,10 @@ export const TableWrapper = styled.div `
 `;
 export const StyledTable = styled.div `
   position: relative;
-  flex: 1 1 auto;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 
-  //   border-left: 1px solid ${({ theme }) => theme.palette.divider};
-  //   border-right: 1px solid ${({ theme }) => theme.palette.divider};
-  //   border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-
   &[data-compact="true"] .mfui-tr,
   &[data-compact="true"] .mfui-thr,
   &[data-compact="true"] .mfui-td {

package/dist/Table/TableHeader.js

@@ -8,6 +8,12 @@ import CheckBox from "../CheckBox";
 import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
 import resolveColumnReorder from "./Utils/resolveColumnReorder";
 import TableDefaults from "./TableDefaults";
+import styled from "styled-components";
+const StyledCaption = styled.span `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
 const TableHeader = ({ headerRowElm }) => {
     var _a;
     const { columnState, sortState, setColumnState, onColumnResize, handleColumnReorder, enableColumnReorder, handleColumnHeaderClick, enableColumnResize, headerRowHeight, enableActionButton, enableSelection, selectionState, disableSelectAll, selectAllRows, clearSelections, compactState, } = useTable();
@@ -86,8 +92,8 @@ const TableHeader = ({ headerRowElm }) => {
                                     // console.log("onResize", e);
                                 }, onResizeFinished: (e) => {
                                     handleResize(e);
-                                } })), _jsxs(InnerCellContent, { className: "mfui inner-cell-content", children: [column.caption, (sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField &&
-                                        (sortState.dir === "asc" ? (_jsx(ArrowUpIcon, { size: 14 })) : (_jsx(ArrowDownIcon, { size: 14 })))] })] }), column.columnId));
+                                } })), _jsxs(InnerCellContent, { className: "mfui inner-cell-content", children: [_jsx(StyledCaption, { style: { flex: 1 }, children: column.caption }), _jsx(StyledCaption, { children: (sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField &&
+                                            (sortState.dir === "asc" ? (_jsx(ArrowUpIcon, { size: 14 })) : (_jsx(ArrowDownIcon, { size: 14 }))) })] })] }), column.columnId));
                 })] }) }));
 };
 export default TableHeader;