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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,14 +31,16 @@
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "1.0.0-beta.3",
-    "@mezzanine-ui/icons": "1.0.0-beta.3",
-    "@mezzanine-ui/system": "1.0.0-beta.3",
+    "@mezzanine-ui/core": "1.0.0-beta.4",
+    "@mezzanine-ui/icons": "1.0.0-beta.4",
+    "@mezzanine-ui/system": "1.0.0-beta.4",
     "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "keycode": "^2.2.1",
     "lodash": "^4.17.21",
+    "overlayscrollbars": "^2.13.0",
+    "overlayscrollbars-react": "^0.5.6",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.8.1"
   },

package/Navigation/CollapsedMenu.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-import { NavigationChild } from './Navigation';
-export interface CollapsedMenuProps {
-    items: NavigationChild[];
-}
-export declare const CollapsedMenu: FC<CollapsedMenuProps>;

package/Navigation/CollapsedMenu.js

@@ -1,16 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef } from 'react';
-import { navigationClasses } from '@mezzanine-ui/core/navigation';
-import NavigationIconButton from './NavigationIconButton.js';
-import { DotHorizontalIcon } from '@mezzanine-ui/icons';
-import Popper from '../Popper/Popper.js';
-
-const CollapsedMenu = ({ items }) => {
-    const [menuOpen, setMenuOpen] = useState(false);
-    const targetRef = useRef(null);
-    return (jsxs(Fragment, { children: [jsx(NavigationIconButton, { ref: targetRef, icon: DotHorizontalIcon, onClick: () => setMenuOpen(!menuOpen) }), jsx(Popper, { anchor: targetRef.current, open: menuOpen, options: {
-                    placement: 'right-end',
-                }, children: jsx("div", { className: navigationClasses.collapsedMenu, children: jsx("ul", { children: items }) }) })] }));
-};
-
-export { CollapsedMenu };

package/PageToolbar/PageToolbar.d.ts

@@ -1,110 +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: 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: 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,157 +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,
-        iconType: icon ? '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, iconType: buttonProps.icon ? 'icon-only' : undefined, 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) => {
-            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 &&
-                props.iconType === '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/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 };