@mezzanine-ui/react 1.0.0-beta.3 → 1.0.0-beta.5

package/Select/Select.js

@@ -1,41 +1,34 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef, useCallback, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { selectClasses } from '@mezzanine-ui/core/select';
 import isArray from 'lodash/isArray';
+import React, { forwardRef, useContext, useState, useCallback, useRef, useMemo, Children } from 'react';
+import { useSelectValueControl } from '../Form/useSelectValueControl.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Option from './Option.js';
 import { SelectControlContext } from './SelectControlContext.js';
-import { useSelectValueControl } from '../Form/useSelectValueControl.js';
-import { useClickAway } from '../hooks/useClickAway.js';
 import SelectTrigger from './SelectTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
-import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
-import Menu from '../Menu/Menu.js';
+import Dropdown from '../Dropdown/Dropdown.js';
 import cx from 'clsx';
 
-const MENU_ID = 'mzn-select-menu-id';
 const Select = forwardRef(function Select(props, ref) {
-    var _a, _b;
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onMenuScroll, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, menuMaxHeight, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onScroll, options: optionsProp, placeholder = '', prefix, readOnly = false, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, type = 'default', value: valueProp, } = props;
     const [open, toggleOpen] = useState(false);
-    const onOpen = () => {
+    const onOpen = useCallback(() => {
+        // Prevent opening when readOnly is true
+        if (readOnly) {
+            return;
+        }
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
         toggleOpen(true);
-    };
-    const onClose = () => {
+    }, [onFocus, readOnly]);
+    const onClose = useCallback(() => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         toggleOpen(false);
-    };
-    const onToggleOpen = () => {
-        if (open) {
-            onClose();
-        }
-        else {
-            onOpen();
-        }
-    };
-    const { onChange, onClear, value } = useSelectValueControl({
+    }, [onBlur]);
+    const { onChange, onClear: onClearFromControl, value } = useSelectValueControl({
         defaultValue,
         mode,
         onChange: onChangeProp,
@@ -43,9 +36,99 @@ const Select = forwardRef(function Select(props, ref) {
         onClose,
         value: valueProp,
     });
+    // Wrap onClear and delegate to control hook
+    const onClear = useCallback((e) => {
+        onClearFromControl(e);
+    }, [onClearFromControl]);
     const nodeRef = useRef(null);
-    const controlRef = useRef(null);
-    const composedRef = useComposeRefs([ref, controlRef]);
+    const composedRef = useComposeRefs([ref, nodeRef]);
+    // Helper function to recursively add checkbox to all options in tree structure
+    const addCheckboxToTreeOptions = useCallback((opts) => {
+        return opts.map((opt) => ({
+            ...opt,
+            showCheckbox: true,
+            checkSite: 'prefix',
+            children: opt.children
+                ? addCheckboxToTreeOptions(opt.children)
+                : undefined,
+        }));
+    }, []);
+    const getAllDescendantIds = useCallback((option) => {
+        const ids = new Set();
+        const collect = (opt) => {
+            ids.add(String(opt.id));
+            if (opt.children && opt.children.length > 0) {
+                opt.children.forEach(collect);
+            }
+        };
+        collect(option);
+        return Array.from(ids);
+    }, []);
+    const findOptionById = useCallback((id, opts) => {
+        for (const opt of opts) {
+            if (String(opt.id) === id) {
+                return opt;
+            }
+            if (opt.children) {
+                const found = findOptionById(id, opt.children);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }, []);
+    // Convert children (Option components) to DropdownOption format
+    // Or use provided options directly
+    const options = useMemo(() => {
+        // If options prop is provided, use it directly
+        if (optionsProp) {
+            // In tree mode (multiple mode with tree structure), ensure all options have checkbox
+            if (mode === 'multiple') {
+                const hasTreeStructure = optionsProp.some((opt) => opt.children && opt.children.length > 0);
+                if (hasTreeStructure) {
+                    return addCheckboxToTreeOptions(optionsProp);
+                }
+            }
+            return optionsProp;
+        }
+        // Otherwise, convert children to options
+        if (!children)
+            return [];
+        return Children.toArray(children)
+            .filter((child) => {
+            var _a;
+            return (React.isValidElement(child) &&
+                (child.type === Option || ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Option'));
+        })
+            .map((child) => {
+            const props = child.props;
+            return {
+                id: props.value,
+                name: props.children,
+                showCheckbox: mode === 'multiple',
+                checkSite: mode === 'multiple' ? 'prefix' : 'suffix',
+            };
+        });
+    }, [children, mode, optionsProp, addCheckboxToTreeOptions]);
+    // Determine dropdown type based on options structure and mode
+    // Tree mode is only available in multiple mode
+    const dropdownType = useMemo(() => {
+        if (optionsProp && mode === 'multiple') {
+            // If options prop is provided and mode is multiple, check if it has tree structure
+            const hasTreeStructure = optionsProp.some((opt) => opt.children && opt.children.length > 0);
+            return hasTreeStructure ? 'tree' : type;
+        }
+        return type;
+    }, [optionsProp, type, mode]);
+    const dropdownValue = useMemo(() => {
+        if (!value)
+            return undefined;
+        if (Array.isArray(value)) {
+            return value.map((v) => String(v.id));
+        }
+        return String(value.id);
+    }, [value]);
     function getPlaceholder() {
         if (typeof renderValue === 'function') {
             return renderValue(value);
@@ -55,23 +138,15 @@ const Select = forwardRef(function Select(props, ref) {
         }
         return placeholder;
     }
-    useClickAway(() => {
-        if (!open)
-            return;
-        return () => {
-            onClose();
-        };
-    }, nodeRef, [nodeRef, open, toggleOpen]);
-    const onClickTextField = () => {
-        if (!disabled) {
-            onToggleOpen();
-        }
-    };
     /**
      * keyboard events for a11y
      * (@todo keyboard event map into option selection when menu is opened)
      */
     const onKeyDownTextField = (evt) => {
+        // Prevent keyboard events from opening when readOnly is true
+        if (readOnly) {
+            return;
+        }
         /** for a11y to open menu via keyboard */
         switch (evt.code) {
             case 'Enter':
@@ -94,23 +169,62 @@ const Select = forwardRef(function Select(props, ref) {
             }
         }
     };
-    /** menu onScroll listener */
-    const onMenuScrollCallback = useCallback(async (evt) => {
-        evt.stopPropagation();
-        if (onMenuScroll) {
-            const target = evt.target;
-            const maxScrollTop = target.scrollHeight - target.getBoundingClientRect().height;
-            onMenuScroll({
-                scrollTop: target.scrollTop,
-                maxScrollTop,
-            }, target);
+    const handleDropdownSelect = useCallback((option) => {
+        if (mode === 'multiple' && dropdownType === 'tree') {
+            const onChangeMultiple = onChange;
+            const currentValues = Array.isArray(value) ? value : [];
+            const allDescendantIds = getAllDescendantIds(option);
+            const allDescendantValues = allDescendantIds.map((id) => {
+                const foundOption = findOptionById(id, options);
+                return {
+                    id,
+                    name: (foundOption === null || foundOption === void 0 ? void 0 : foundOption.name) || id,
+                };
+            });
+            const selectedDescendantIds = allDescendantIds.filter((id) => currentValues.some((v) => String(v.id) === id));
+            const allSelected = selectedDescendantIds.length === allDescendantIds.length;
+            if (allSelected) {
+                // Deselect all descendants in a single update
+                const descendantIdSet = new Set(allDescendantIds.map((id) => String(id)));
+                const nextValues = currentValues.filter((v) => !descendantIdSet.has(String(v.id)));
+                onChangeMultiple(nextValues);
+            }
+            else {
+                // Select all descendants that are not yet selected in a single update
+                const existingIdSet = new Set(currentValues.map((v) => String(v.id)));
+                const valuesToAdd = allDescendantValues.filter((descValue) => !existingIdSet.has(String(descValue.id)));
+                const nextValues = [...currentValues, ...valuesToAdd];
+                onChangeMultiple(nextValues);
+            }
+        }
+        else {
+            // Normal selection logic for non-tree mode
+            const selectValue = {
+                id: String(option.id),
+                name: String(option.name),
+            };
+            if (mode === 'multiple') {
+                onChange(selectValue);
+            }
+            else {
+                onChange(selectValue);
+                onClose();
+            }
+        }
+    }, [mode, onChange, onClose, value, dropdownType, getAllDescendantIds, findOptionById, options]);
+    const handleVisibilityChange = useCallback((isOpen) => {
+        if (isOpen && readOnly) {
+            return;
+        }
+        if (isOpen) {
+            onOpen();
+        }
+        else {
+            onClose();
         }
-    }, [onMenuScroll]);
+    }, [onOpen, onClose, readOnly]);
     const resolvedInputProps = {
         ...inputProps,
-        'aria-controls': MENU_ID,
-        'aria-expanded': open,
-        'aria-owns': MENU_ID,
         placeholder: getPlaceholder(),
         role: 'combobox',
     };
@@ -118,7 +232,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? ((_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '') : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsx("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: jsx(Dropdown, { disabled: readOnly || disabled, disablePortal: disablePortal, maxHeight: menuMaxHeight, mode: mode, onScroll: onScroll, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: readOnly ? false : open, options: options, sameWidth: true, type: dropdownType, value: dropdownValue, children: jsx(SelectTrigger, { ref: composedRef, active: !readOnly && open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: readOnly, ...(mode === 'single' && renderValue ? { renderValue } : {}), required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value === null ? undefined : value }) }) }) }));
 });
 
 export { Select as default };

package/Select/SelectTrigger.js

@@ -11,7 +11,7 @@ import cx from 'clsx';
 const isMultipleSelection = (props) => props.mode === 'multiple';
 function SelectTriggerComponent(props) {
     var _a, _b, _c;
-    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
+    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, isForceClearable = false, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
     /** Render value to string for single selection trigger input */
     const renderValue = () => {
         var _a, _b;
@@ -46,9 +46,10 @@ function SelectTriggerComponent(props) {
     return (jsxs(TextField, { ref: innerRef, ...interactiveProps, ...restTextFieldProps, onClick: onClick, active: active, className: cx(selectClasses.trigger, selectClasses.triggerMode(mode), selectClasses.triggerSelected(Array.isArray(props.value) ? (_a = props.value) === null || _a === void 0 ? void 0 : _a.length : props.value), {
             [selectClasses.triggerReadOnly]: readOnly,
             [selectClasses.triggerDisabled]: disabled,
-        }, className), error: type === 'error', size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, clearable: mode === 'multiple' &&
-            Array.isArray(props.value) &&
-            !!props.value.length, children: [jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-haspopup": "listbox", autoComplete: "off", className: cx(selectClasses.triggerInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, placeholder: placeholder, readOnly: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) !== null && _b !== void 0 ? _b : true, required: required, type: "text", value: renderValue() }), isMultipleSelection(props) && ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length) && (jsx(SelectTriggerTags, { disabled: disabled, overflowStrategy: overflowStrategy, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: props.value }))] }));
+        }, className), error: type === 'error', size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, clearable: isForceClearable ||
+            (mode === 'multiple' &&
+                Array.isArray(props.value) &&
+                !!props.value.length), children: [jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-haspopup": "listbox", autoComplete: "off", className: cx(selectClasses.triggerInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, placeholder: placeholder, readOnly: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) !== null && _b !== void 0 ? _b : true, required: required, type: "text", value: renderValue() }), isMultipleSelection(props) && ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length) && (jsx(SelectTriggerTags, { disabled: disabled, overflowStrategy: overflowStrategy, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: props.value }))] }));
 }
 const SelectTrigger = forwardRef((props, ref) => {
     if (props.mode === 'multiple') {

package/Select/index.d.ts

@@ -1,14 +1,13 @@
-export * from './typings';
+export { default as OptionGroup } from '../Menu/MenuItemGroup';
+export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
+export { default as Option } from './Option';
+export type { OptionProps } from './Option';
+export { default } from './Select';
+export type { SelectProps } from './Select';
 export { SelectControlContext } from './SelectControlContext';
 export { default as SelectTrigger } from './SelectTrigger';
-export type { SelectTriggerProps, SelectTriggerInputProps, } from './SelectTrigger';
 export { default as SelectTriggerTags } from './SelectTriggerTags';
 export type { SelectTriggerTagsProps } from './SelectTriggerTags';
-export type { SelectProps } from './Select';
-export { default } from './Select';
-export { default as Option } from './Option';
-export type { OptionProps } from './Option';
-export { default as OptionGroup } from '../Menu/MenuItemGroup';
-export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
-export type { TreeSelectProps } from './TreeSelect';
 export { default as TreeSelect } from './TreeSelect';
+export type { TreeSelectProps } from './TreeSelect';
+export * from './typings';

package/Select/index.js

@@ -1,7 +1,7 @@
+export { default as OptionGroup } from '../Menu/MenuItemGroup.js';
+export { default as Option } from './Option.js';
+export { default } from './Select.js';
 export { SelectControlContext } from './SelectControlContext.js';
 export { default as SelectTrigger } from './SelectTrigger.js';
 export { default as SelectTriggerTags } from './SelectTriggerTags.js';
-export { default } from './Select.js';
-export { default as Option } from './Option.js';
-export { default as OptionGroup } from '../Menu/MenuItemGroup.js';
 export { default as TreeSelect } from './TreeSelect.js';

package/Select/typings.d.ts

@@ -1,6 +1,6 @@
+import { SelectTriggerType } from '@mezzanine-ui/core/select';
 import { ReactElement, Ref } from 'react';
 import Icon, { IconProps } from '../Icon';
-import { SelectTriggerType } from '@mezzanine-ui/core/select';
 import { TextFieldProps } from '../TextField';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface SelectValue<T = string> {
@@ -48,6 +48,11 @@ export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' |
     onTagClose?: (target: SelectValue) => void;
     /** Placeholder text when not selected */
     placeholder?: string;
+    /**
+     * Whether to force show clearable icon regardless of value state.
+     * @default false
+     */
+    isForceClearable?: boolean;
     /**
      * Whether the input is readonly.
      * @default false

package/Selection/Selection.js

@@ -36,7 +36,7 @@ const Selection = forwardRef(function Selection(props, ref) {
             [selectionClasses.readonly]: readonly,
         }, className), ...(disabled && { 'aria-disabled': true }), ...(onClick && { onClick }), children: [jsxs("div", { className: selectionClasses.container, children: [haveImage
                         ? jsx("img", { src: image, alt: text, className: selectionClasses.selectionImage, style: { objectFit: imageObjectFit } })
-                        : jsx(Icon, { "aria-hidden": "true", className: selectionClasses.icon, color: "neutral-solid", icon: customIcon || FileIcon, size: SELECTION_ICON_SIZE }), jsxs("div", { className: selectionClasses.content, children: [jsx(Typography, { id: textId, color: "text-neutral-solid", variant: "body-highlight", className: selectionClasses.text, children: text }), supportingText && (jsx(Typography, { id: supportingTextId, color: "text-neutral", variant: "caption", className: selectionClasses.supportingText, children: supportingText }))] })] }), !readonly && (jsx("input", { ref: inputRefProp, type: selector, name: name, id: inputId, className: selectionClasses.input, disabled: disabled, ...(checkedProp !== undefined
+                        : jsx(Icon, { "aria-hidden": "true", className: selectionClasses.icon, color: "neutral-solid", icon: customIcon || FileIcon, size: SELECTION_ICON_SIZE }), jsxs("div", { className: selectionClasses.content, children: [jsx(Typography, { className: selectionClasses.text, color: "text-neutral-solid", display: "block", ellipsis: true, id: textId, variant: "body-highlight", children: text }), supportingText && (jsx(Typography, { className: selectionClasses.supportingText, color: "text-neutral", display: "block", ellipsis: true, id: supportingTextId, variant: "caption", children: supportingText }))] })] }), !readonly && (jsx("input", { ref: inputRefProp, type: selector, name: name, id: inputId, className: selectionClasses.input, disabled: disabled, ...(checkedProp !== undefined
                     ? { checked: checkedProp }
                     : { defaultChecked }), value: value, onChange: onInputChange, ...(isRadioOrCheckbox && checkedProp !== undefined
                     ? { 'aria-checked': checkedProp }

package/Selection/SelectionGroup.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, ReactElement } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import Selection, { SelectionProps } from './Selection';
+export interface SelectionGroupBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * The class name of the selection group.
+     */
+    className?: string;
+}
+export interface SelectionGroupProps extends SelectionGroupBaseProps {
+    /**
+     * The selections in the group.
+     * Only Selection components are allowed.
+     * When provided, will take priority over selections prop.
+     */
+    children?: ReactElement<ComponentProps<typeof Selection>> | ReactElement<ComponentProps<typeof Selection>>[];
+    /**
+     * The selections array.
+     * When provided, Selection components will be automatically rendered.
+     * Will be ignored if children is provided.
+     */
+    selections?: SelectionProps[];
+}
+/**
+ * The react component for `mezzanine` selection group.
+ */
+declare const SelectionGroup: import("react").ForwardRefExoticComponent<SelectionGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SelectionGroup;

package/Table/Table.d.ts

@@ -1,123 +1,5 @@
-import { TableSize, type HighlightMode, type TableActions, type TableActionsWithMinWidth, type TableColumn, type TableColumnWithMinWidth, type TableDataSource, type TableDraggable, type TableExpandable, type TableRowSelection, type TableScroll } from '@mezzanine-ui/core/table';
-import type { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import type { TableTransitionState } from './hooks/useTableDataSource';
-import { TablePaginationProps } from './components/TablePagination';
-import type { EmptyProps } from '../Empty';
-export interface TableBaseProps<T extends TableDataSource = TableDataSource> extends Omit<NativeElementPropsWithoutKeyAndRef<'table'>, 'children' | 'draggable' | 'summary' | 'onChange'> {
-    /** Data source */
-    dataSource: T[];
-    /** Props for Empty component when no data */
-    emptyProps?: EmptyProps & {
-        height?: number | string;
-    };
-    /** Expandable row configuration */
-    expandable?: TableExpandable<T>;
-    /**
-     * Whether the table should stretch to fill its container width.
-     * When true, the table will always be 100% width of its container.
-     * Note: If the sum of all column widths is less than the table width,
-     * columns will be proportionally stretched to fill the remaining space.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /** Highlight mode for hover effects
-     * @default 'row'
-     */
-    highlight?: HighlightMode;
-    /** Loading state */
-    loading?: boolean;
-    /** Number of rows to display when loading */
-    loadingRowsCount?: number;
-    /** Minimum height of the table */
-    minHeight?: number | string;
-    /**
-     * Whether the table is nested inside an expanded row content area
-     */
-    nested?: boolean;
-    /** Pagination configuration */
-    pagination?: TablePaginationProps;
-    /**
-     * Row height preset token.
-     */
-    rowHeightPreset?: 'base' | 'condensed' | 'detailed' | 'roomy';
-    /** Row selection configuration */
-    rowSelection?: TableRowSelection<T>;
-    /** Row indexes where a separator border should be displayed */
-    separatorAtRowIndexes?: number[];
-    /** Show header row */
-    showHeader?: boolean;
-    /** Custom size variant
-     * @default 'main'
-     */
-    size?: TableSize;
-    /** Whether to enable sticky header
-     *  @default true
-     */
-    sticky?: boolean;
-    /** Transition state for row add/remove animations (from useTableDataSource hook) */
-    transitionState?: TableTransitionState;
-    /** Enable zebra striping for alternating row backgrounds */
-    zebraStriping?: boolean;
-}
-/**
- * Props when resizable is enabled.
- * Requires minWidth on all columns.
- */
-export interface TableResizableProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
-    /** Actions column configuration - minWidth required when resizable */
-    actions?: TableActionsWithMinWidth<T>;
-    /** Column configuration - minWidth required for each column when resizable */
-    columns: TableColumnWithMinWidth<T>[];
-    /**
-     * Whether columns are resizable by user interaction
-     */
-    resizable: true;
-}
-/**
- * Props when resizable is disabled or not specified.
- */
-export interface TableNonResizableProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
-    /** Actions column configuration */
-    actions?: TableActions<T>;
-    /** Column configuration */
-    columns: TableColumn<T>[];
-    /**
-     * Whether columns are resizable by user interaction
-     * @default false
-     */
-    resizable?: false;
-}
-/**
- * Props when virtualized scrolling is enabled.
- * Draggable is not allowed in this mode.
- */
-export type TableVirtualizedProps<T extends TableDataSource = TableDataSource> = (TableResizableProps<T> | TableNonResizableProps<T>) & {
-    /** Draggable row configuration - not available when virtualized is enabled */
-    draggable?: never;
-    /** Scroll configuration with virtualized enabled */
-    scroll: TableScroll & {
-        virtualized: true;
-        y: number | string;
-    };
-};
-/**
- * Props when virtualized scrolling is disabled or not specified.
- * Draggable is allowed in this mode.
- */
-export type TableNonVirtualizedProps<T extends TableDataSource = TableDataSource> = (TableResizableProps<T> | TableNonResizableProps<T>) & {
-    /** Draggable row configuration */
-    draggable?: TableDraggable<T>;
-    /** Scroll configuration for scrolling (virtualized defaults to false) */
-    scroll?: TableScroll & {
-        virtualized?: false;
-    };
-};
-/**
- * TableProps - discriminated union to ensure draggable and virtualized
- * scrolling are mutually exclusive at the type level, and resizable
- * requires minWidth on all columns.
- */
-export type TableProps<T extends TableDataSource = TableDataSource> = TableVirtualizedProps<T> | TableNonVirtualizedProps<T>;
+import { type TableDataSource } from '@mezzanine-ui/core/table';
+import type { TableProps } from './typings';
 /**
  * Table is a high-performance data table component with support for
  * virtual scrolling, column resizing, fixed columns, row selection,