@mezzanine-ui/react 1.0.0-beta.2 → 1.0.0-beta.4

package/PageToolbar/PageToolbar.d.ts

@@ -1,114 +0,0 @@
-import { ReactElement } from 'react';
-import { ButtonProps } from '../Button';
-import { SearchInputProps } from '../Input';
-import { SelectProps } from '../Select';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { IconDefinition } from '@mezzanine-ui/icons';
-type SegmentedControlProps = {
-    mock: 'SegmentedControlProps';
-};
-type PageToolbarChild = ReactElement<SearchInputProps | SelectProps | SegmentedControlProps | ButtonProps> | null | false | undefined;
-/**
- * Props for the PageToolbar component.
- *
- * PageToolbar provides a flexible toolbar layout for page-level actions,
- * including filter components, action buttons, and utility buttons.
- *
- * @example
- * ```tsx
- * <PageToolbar
- *   size="main"
- *   filter={{ variant: 'search', placeholder: 'Search...' }}
- *   actions={{
- *     primaryButton: { children: 'Save' },
- *     secondaryButton: { children: 'Cancel' },
- *   }}
- *   utilities={[{ icon: { src: settingsIcon }, title: 'Settings' }]}
- * />
- * ```
- */
-export type PageToolbarProps = Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> & {
-    /**
-     * Button configuration for primary, secondary, and destructive actions. <br />
-     * Automatically applies proper styling and order. <br />
-     */
-    actions?: {
-        destructiveButton?: ButtonProps;
-        primaryButton?: ButtonProps;
-        secondaryButton?: ButtonProps;
-    };
-    /**
-     * Children elements: <br />
-     * - Filter component (SearchInput, Select, or SegmentedControl) <br />
-     * - Action buttons `<Button />` <br />
-     * - Icon-only utility buttons `<Button icon="..." />` <br />
-     * <br />
-     * Can mix and match the above children. <br />
-     * The order of children does not matter as they will be arranged properly. <br />
-     * When conflicting with other props, props take priority over children. <br />
-     */
-    children?: PageToolbarChild[] | PageToolbarChild;
-    /** Filter component (SearchInput, Select, or SegmentedControl) */
-    filter?: {
-        variant: 'search' | 'select' | 'segmentedControl';
-    } & (SearchInputProps | SelectProps | SegmentedControlProps);
-    /**
-     * Size variant of the toolbar. <br />
-     * Affects the size of buttons and filter component. <br />
-     */
-    size?: 'main' | 'sub';
-    /**
-     * Icon-only utility buttons `<Button icon="..." />`. <br />
-     * They usually appear as smaller buttons with only an icon and no text.
-     */
-    utilities?: (ButtonProps & {
-        icon: {
-            src: IconDefinition;
-        };
-    })[];
-};
-/**
- * PageToolbar component provides a flexible toolbar with filter, action buttons, and utility icons.
- * Commonly used in page headers for primary user actions.
- */
-declare const PageToolbar: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"div">, "children"> & {
-    /**
-     * Button configuration for primary, secondary, and destructive actions. <br />
-     * Automatically applies proper styling and order. <br />
-     */
-    actions?: {
-        destructiveButton?: ButtonProps;
-        primaryButton?: ButtonProps;
-        secondaryButton?: ButtonProps;
-    };
-    /**
-     * Children elements: <br />
-     * - Filter component (SearchInput, Select, or SegmentedControl) <br />
-     * - Action buttons `<Button />` <br />
-     * - Icon-only utility buttons `<Button icon="..." />` <br />
-     * <br />
-     * Can mix and match the above children. <br />
-     * The order of children does not matter as they will be arranged properly. <br />
-     * When conflicting with other props, props take priority over children. <br />
-     */
-    children?: PageToolbarChild[] | PageToolbarChild;
-    /** Filter component (SearchInput, Select, or SegmentedControl) */
-    filter?: {
-        variant: "search" | "select" | "segmentedControl";
-    } & (SearchInputProps | SelectProps | SegmentedControlProps);
-    /**
-     * Size variant of the toolbar. <br />
-     * Affects the size of buttons and filter component. <br />
-     */
-    size?: "main" | "sub";
-    /**
-     * Icon-only utility buttons `<Button icon="..." />`. <br />
-     * They usually appear as smaller buttons with only an icon and no text.
-     */
-    utilities?: (ButtonProps & {
-        icon: {
-            src: IconDefinition;
-        };
-    })[];
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default PageToolbar;

package/PageToolbar/PageToolbar.js

@@ -1,23 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { pageToolbarClasses } from '@mezzanine-ui/core/page-toolbar';
-import { renderFilterProp, renderActionsProp, renderIconButtonsProp, resolvePageToolbarChild } from './utils.js';
-import ButtonGroup from '../Button/ButtonGroup.js';
-import cx from 'clsx';
-
-/**
- * PageToolbar component provides a flexible toolbar with filter, action buttons, and utility icons.
- * Commonly used in page headers for primary user actions.
- */
-const PageToolbar = forwardRef(function PageToolbar(props, ref) {
-    const { actions, children, className, filter, size = 'main', utilities, ...rest } = props;
-    const renderFilter = renderFilterProp(filter, size);
-    const renderActions = actions ? renderActionsProp(actions, size) : null;
-    const renderUtilities = utilities
-        ? renderIconButtonsProp(utilities, size)
-        : null;
-    const { filter: filterFromChildren, actions: actionsFromChildren, utilities: utilitiesFromChildren, } = resolvePageToolbarChild(children, size);
-    return (jsxs("div", { ...rest, className: cx(pageToolbarClasses.host, pageToolbarClasses.size(size), className), ref: ref, children: [renderFilter || filterFromChildren, jsx(ButtonGroup, { children: renderActions || actionsFromChildren }), jsx(ButtonGroup, { children: renderUtilities || utilitiesFromChildren })] }));
-});
-
-export { PageToolbar as default };

package/PageToolbar/index.d.ts

@@ -1,2 +0,0 @@
-export type { PageToolbarProps } from './PageToolbar';
-export { default } from './PageToolbar';

package/PageToolbar/index.js

@@ -1 +0,0 @@
-export { default } from './PageToolbar.js';

package/PageToolbar/utils.d.ts

@@ -1,23 +0,0 @@
-import { ReactElement } from 'react';
-import { ButtonProps, ButtonGroupChild } from '../Button';
-import { PageToolbarProps } from './PageToolbar';
-type ToolbarButtonVariant = 'base-primary' | 'base-secondary' | 'destructive-secondary';
-/**
- * Renders a button from either ButtonProps or a React element.
- * Applies the specified size and variant to the button.
- */
-export declare const renderButton: (button: ButtonProps | ButtonGroupChild | undefined, size: ButtonProps["size"], variant: ToolbarButtonVariant) => ReactElement<ButtonProps> | null;
-export declare const renderFilterProp: (prop: PageToolbarProps["filter"], size: "main" | "sub") => import("react/jsx-runtime").JSX.Element | null;
-export declare const renderIconButtonWithProps: (child: ReactElement<ButtonProps>, size: ButtonProps["size"]) => ReactElement<ButtonProps>;
-export declare const renderIconButtonsProp: (utilities: PageToolbarProps["utilities"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
-/**
- * Renders action buttons based on the actions configuration.
- * Supports both structured actions object and single button element/props.
- */
-export declare const renderActionsProp: (actions: PageToolbarProps["actions"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
-export declare const resolvePageToolbarChild: (children: PageToolbarProps["children"], size: "main" | "sub") => {
-    filter: null;
-    actions: [ButtonGroupChild, ButtonGroupChild, ButtonGroupChild];
-    utilities: ButtonGroupChild[];
-};
-export {};

package/PageToolbar/utils.js

@@ -1,165 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement } from 'react';
-import Button from '../Button/Button.js';
-import { flattenChildren } from '../utils/flatten-children.js';
-import Input from '../Input/Input.js';
-import Select from '../Select/Select.js';
-
-/**
- * Renders a button from either ButtonProps or a React element.
- * Applies the specified size and variant to the button.
- */
-const renderButton = (button, size, variant) => {
-    if (!button) {
-        return null;
-    }
-    if (isValidElement(button)) {
-        return cloneElement(button, {
-            size,
-            variant,
-            key: variant,
-        });
-    }
-    return jsx(Button, { ...button, size: size, variant: variant }, variant);
-};
-const withSize = (target, size) => {
-    return cloneElement(target, { size });
-};
-const renderFilterProp = (prop, size) => {
-    if (!prop) {
-        return null;
-    }
-    const { variant } = prop;
-    if (variant === 'search') {
-        return (jsx(Input, { ...prop, size: size, variant: "search" }));
-    }
-    if (variant === 'select') {
-        return jsx(Select, { ...prop, size: size });
-    }
-    if (variant === 'segmentedControl') {
-        console.warn('SegmentedControl component is not implemented yet.');
-        return null;
-    }
-    return null;
-};
-const renderIconButtonWithProps = (child, size) => {
-    const { icon } = child.props;
-    return cloneElement(child, {
-        icon: icon
-            ? {
-                ...icon,
-                position: 'icon-only',
-            }
-            : undefined,
-        size,
-        variant: 'base-secondary',
-    });
-};
-const renderIconButtonsProp = (utilities, size) => {
-    const result = [];
-    utilities === null || utilities === void 0 ? void 0 : utilities.forEach((buttonProps) => {
-        result.push(jsx(Button, { ...buttonProps, size: size, icon: {
-                ...buttonProps.icon,
-                position: 'icon-only',
-            }, variant: "base-secondary" }));
-    });
-    return result;
-};
-/**
- * Renders action buttons based on the actions configuration.
- * Supports both structured actions object and single button element/props.
- */
-const renderActionsProp = (actions, size) => {
-    if (actions &&
-        ('primaryButton' in actions ||
-            'secondaryButton' in actions ||
-            'destructiveButton' in actions)) {
-        return [
-            renderButton(actions.destructiveButton, size, 'destructive-secondary'),
-            renderButton(actions.secondaryButton, size, 'base-secondary'),
-            renderButton(actions.primaryButton, size, 'base-primary'),
-        ].filter(Boolean);
-    }
-    return jsx(Button, { ...actions, size: size, variant: "base-primary" });
-};
-const resolvePageToolbarChild = (children, size) => {
-    let filter = null;
-    const actions = [
-        null,
-        null,
-        null,
-    ];
-    const buttonsWithoutVariant = [];
-    const utilities = [];
-    if (children) {
-        const flatChildren = flattenChildren(children);
-        Children.forEach(flatChildren, (child) => {
-            var _a;
-            if (!isValidElement(child)) {
-                return;
-            }
-            const { type, props } = child;
-            // is filter
-            if (type === Input && props.variant === 'search') {
-                filter = withSize(child, size);
-            }
-            else if (type === Select) {
-                // TODO: waiting size prop Select
-                filter = withSize(child, size);
-            }
-            else if (type.toString() === 'SegmentedControl') {
-                console.warn('SegmentedControl component is not implemented yet.');
-            }
-            // is utilities (icon button)
-            else if (type === Button &&
-                ((_a = props.icon) === null || _a === void 0 ? void 0 : _a.position) === 'icon-only') {
-                utilities.push(renderIconButtonWithProps(child, size));
-            }
-            // is actions (normal button)
-            else if (type === Button && props.variant) {
-                // with variant prop
-                const variant = props.variant;
-                if (variant !== 'base-primary' &&
-                    variant !== 'base-secondary' &&
-                    variant !== 'destructive-secondary') {
-                    return;
-                }
-                const buttonElement = renderButton(child, size, variant);
-                if (variant === 'destructive-secondary') {
-                    actions[0] = buttonElement;
-                }
-                else if (variant === 'base-secondary') {
-                    actions[1] = buttonElement;
-                }
-                else if (variant === 'base-primary') {
-                    actions[2] = buttonElement;
-                }
-            }
-            else if (type === Button) {
-                // without variant prop
-                buttonsWithoutVariant.push(child);
-            }
-        });
-        // Fill the buttons from left to right according to the number of buttons passed in,
-        // and ensure that the button on the right has a higher priority
-        const fillIndexStartWith = 3 -
-            buttonsWithoutVariant.length -
-            (actions[0] ? 1 : 0) -
-            (actions[1] ? 1 : 0) -
-            (actions[2] ? 1 : 0);
-        buttonsWithoutVariant.forEach((button) => {
-            if (fillIndexStartWith <= 0 && !actions[0]) {
-                actions[0] = renderButton(button, size, 'destructive-secondary');
-            }
-            else if (fillIndexStartWith <= 1 && !actions[1]) {
-                actions[1] = renderButton(button, size, 'base-secondary');
-            }
-            else if (fillIndexStartWith <= 2 && !actions[2]) {
-                actions[2] = renderButton(button, size, 'base-primary');
-            }
-        });
-    }
-    return { filter, actions, utilities };
-};
-
-export { renderActionsProp, renderButton, renderFilterProp, renderIconButtonWithProps, renderIconButtonsProp, resolvePageToolbarChild };

package/Select/AutoComplete.d.ts

@@ -1,107 +0,0 @@
-import { Dispatch, SetStateAction, RefObject } from 'react';
-import { SelectInputSize } from '@mezzanine-ui/core/select';
-import { SelectValue } from './typings';
-import { MenuProps } from '../Menu';
-import { PopperProps } from '../Popper';
-import { PickRenameMulti } from '../utils/general';
-import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active' | 'clearable' | 'forceHideSuffixActionIcon' | 'mode' | 'onClick' | 'onKeyDown' | 'onChange' | 'renderValue' | 'inputProps' | 'suffixActionIcon' | 'value'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
-    maxHeight: 'menuMaxHeight';
-    role: 'menuRole';
-    size: 'menuSize';
-}>, PickRenameMulti<Pick<PopperProps, 'options'>, {
-    options: 'popperOptions';
-}> {
-    /**
-     * Set to true when options can be added dynamically
-     * @default false
-     */
-    addable?: boolean;
-    /**
-     * Should the filter rules be disabled (If you need to control options filter by yourself)
-     * @default false
-     */
-    disabledOptionsFilter?: boolean;
-    /**
-     * The other native props for input element.
-     */
-    inputProps?: Omit<SelectTriggerInputProps, 'onChange' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
-    /**
-     * insert callback whenever insert icon is clicked
-     * return `true` when insert is successfully
-     */
-    onInsert?(text: string): SelectValue;
-    /**
-     * The search event handler
-     */
-    onSearch?(input: string): any;
-    /**
-     * The options that mapped autocomplete options
-     */
-    options: SelectValue[];
-    /**
-     * select input placeholder
-     */
-    placeholder?: string;
-    /**
-     * Whether the selection is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     *
-     */
-    searchTextControlRef?: RefObject<{
-        setSearchText: Dispatch<SetStateAction<string>>;
-    } | undefined>;
-    /**
-     * The size of input.
-     */
-    size?: SelectInputSize;
-}
-export type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue[];
-    /**
-     * Controls the layout of trigger.
-     */
-    mode: 'multiple';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue[]): any;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue[];
-};
-export type AutoCompleteSingleProps = AutoCompleteBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue;
-    /**
-     * Controls the layout of trigger.
-     */
-    mode?: 'single';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue): any;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue | null;
-};
-export type AutoCompleteProps = AutoCompleteMultipleProps | AutoCompleteSingleProps;
-/**
- * The AutoComplete component for react. <br />
- * Note that if you need search for ONLY given options, not included your typings,
- * should considering using the `Select` component with `onSearch` prop.
- */
-declare const AutoComplete: import("react").ForwardRefExoticComponent<(Omit<AutoCompleteMultipleProps, "ref"> | Omit<AutoCompleteSingleProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
-export default AutoComplete;

package/Select/AutoComplete.js

@@ -1,114 +0,0 @@
-'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useImperativeHandle, useRef, useMemo } from 'react';
-import { selectClasses } from '@mezzanine-ui/core/select';
-import { PlusIcon } from '@mezzanine-ui/icons';
-import isArray from 'lodash/isArray';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import Option from './Option.js';
-import { SelectControlContext } from './SelectControlContext.js';
-import { useAutoCompleteValueControl } from '../Form/useAutoCompleteValueControl.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 Icon from '../Icon/Icon.js';
-import cx from 'clsx';
-
-const MENU_ID = 'mzn-select-autocomplete-menu-id';
-/**
- * The AutoComplete component for react. <br />
- * Note that if you need search for ONLY given options, not included your typings,
- * should considering using the `Select` component with `onSearch` prop.
- */
-const AutoComplete = forwardRef(function Select(props, ref) {
-    var _a, _b;
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, className, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, defaultValue, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef, inputProps, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, searchTextControlRef, size, value: valueProp, } = props;
-    const [open, toggleOpen] = useState(false);
-    const { focused, onFocus, onChange, onClear, options, searchText, selectedOptions, setSearchText, unselectedOptions, value, } = useAutoCompleteValueControl({
-        defaultValue,
-        disabledOptionsFilter,
-        mode,
-        onChange: onChangeProp,
-        onClear: onClearProp,
-        onClose: () => toggleOpen(false),
-        onSearch,
-        options: optionsProp,
-        value: valueProp,
-    });
-    /** export set search text action to props (allow user to customize search text) */
-    useImperativeHandle(searchTextControlRef, () => ({ setSearchText }));
-    /** insert feature */
-    const [insertText, setInsertText] = useState('');
-    const nodeRef = useRef(null);
-    const controlRef = useRef(null);
-    const popperRef = useRef(null);
-    const composedRef = useComposeRefs([ref, controlRef]);
-    const renderValue = focused ? () => searchText : undefined;
-    useClickAway(() => {
-        if (!open || focused)
-            return;
-        return () => {
-            toggleOpen((prev) => !prev);
-        };
-    }, nodeRef, [focused, nodeRef, open, toggleOpen]);
-    function getPlaceholder() {
-        if (focused && value && !isArray(value)) {
-            return value.name;
-        }
-        return placeholder;
-    }
-    /** Trigger input props */
-    const onSearchInputChange = (e) => {
-        /** should sync both search input and value */
-        setSearchText(e.target.value);
-        setInsertText(e.target.value);
-        /** return current value to onSearch */
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
-    };
-    const onSearchInputFocus = (e) => {
-        var _a;
-        e.stopPropagation();
-        toggleOpen(true);
-        onFocus(true);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    const onSearchInputBlur = (e) => {
-        var _a;
-        onFocus(false);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    const onClickSuffixActionIcon = () => {
-        toggleOpen((prev) => !prev);
-    };
-    const resolvedInputProps = {
-        ...inputProps,
-        'aria-controls': MENU_ID,
-        'aria-expanded': open,
-        'aria-owns': MENU_ID,
-        onBlur: onSearchInputBlur,
-        onChange: onSearchInputChange,
-        onFocus: onSearchInputFocus,
-        placeholder: getPlaceholder(),
-        role: 'combobox',
-    };
-    const searchTextExistWithoutOption = !!searchText &&
-        options.find((option) => option.name === searchText) === undefined;
-    const context = useMemo(() => ({ onChange, value }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, { [selectClasses.hostFullWidth]: fullWidth }), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: disabled, ellipsis: true, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, prefix: prefix, readOnly: false, required: required, inputProps: resolvedInputProps, searchText: searchText, size: size, showTextInputAfterTags: true, suffixAction: onClickSuffixActionIcon, value: value, renderValue: renderValue }), jsxs(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions, children: [options.length ? (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, role: menuRole, size: menuSize, style: { border: 0 }, children: mode === 'single' ? (jsx(Fragment, { children: options.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))) })) : (jsxs(Fragment, { children: [selectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))), unselectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id)))] })) })) : null, searchTextExistWithoutOption && addable ? (jsxs("button", { type: "button", className: selectClasses.autoComplete, onClick: (e) => {
-                                var _a;
-                                e.stopPropagation();
-                                if (insertText) {
-                                    const newOption = (_a = onInsert === null || onInsert === void 0 ? void 0 : onInsert(insertText)) !== null && _a !== void 0 ? _a : null;
-                                    if (newOption) {
-                                        setInsertText('');
-                                        setSearchText('');
-                                        onChange(newOption);
-                                    }
-                                }
-                            }, children: [jsx("p", { children: insertText }), jsx(Icon, { className: selectClasses.autoCompleteIcon, icon: PlusIcon })] })) : null] })] }) }));
-});
-
-export { AutoComplete as default };

package/Table/components/TableDragHandleCell.d.ts

@@ -1,11 +0,0 @@
-export interface TableDragHandleCellProps {
-    className?: string;
-    dragHandleProps?: Record<string, unknown>;
-    fixed?: boolean;
-    fixedOffset?: number;
-    isHeader?: boolean;
-    showShadow?: boolean;
-    /** Explicit width for dragging state */
-    width?: number;
-}
-export declare const TableDragHandleCell: import("react").NamedExoticComponent<TableDragHandleCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/Table/components/TableDragHandleCell.js

@@ -1,44 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { memo, forwardRef } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
-import { DotDragVerticalIcon } from '@mezzanine-ui/icons';
-import { useTableContext } from '../TableContext.js';
-import Skeleton from '../../Skeleton/Skeleton.js';
-import Icon from '../../Icon/Icon.js';
-import cx from 'clsx';
-
-const TableDragHandleCellInner = forwardRef(function TableDragHandleCell(props, ref) {
-    const { loading } = useTableContext();
-    const { className, dragHandleProps, fixed = false, fixedOffset = 0, isHeader = false, showShadow = false, width, } = props;
-    const CellComponent = isHeader ? 'th' : 'td';
-    const cellStyle = {};
-    // Apply explicit width for dragging state
-    if (width !== undefined) {
-        cellStyle.width = width;
-        cellStyle.minWidth = width;
-        cellStyle.maxWidth = width;
-        cellStyle.flexShrink = 0;
-    }
-    if (fixed) {
-        cellStyle['--fixed-start-offset'] =
-            `${fixedOffset}px`;
-    }
-    const renderChild = () => {
-        if (!isHeader) {
-            if (loading) {
-                return jsx(Skeleton, { width: "100%", variant: "body-highlight" });
-            }
-            return (jsx("span", { className: tableClasses.dragHandle, ...dragHandleProps, children: jsx(Icon, { color: "neutral", icon: DotDragVerticalIcon }) }));
-        }
-        return null;
-    };
-    return (jsx(CellComponent, { className: cx(isHeader ? tableClasses.headerCell : tableClasses.cell, tableClasses.dragHandleCell, {
-            [tableClasses.cellFixed]: fixed,
-            [tableClasses.cellFixedStart]: fixed,
-            [tableClasses.cellFixedShadow]: showShadow,
-        }, className), ref: ref, scope: isHeader ? 'col' : undefined, style: cellStyle, children: renderChild() }));
-});
-const TableDragHandleCell = memo(TableDragHandleCellInner);
-
-export { TableDragHandleCell };