@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

package/PageFooter/PageFooter.d.ts

@@ -1,15 +1,80 @@
-import { ReactNode } from 'react';
-import { ConfirmActionsProps } from '../ConfirmActions';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface PageFooterProps extends NativeElementPropsWithoutKeyAndRef<'footer'>, Pick<ConfirmActionsProps, 'cancelButtonProps' | 'cancelText' | 'confirmButtonProps' | 'confirmText' | 'danger' | 'loading' | 'hideCancelButton' | 'hideConfirmButton' | 'onCancel' | 'onConfirm'> {
+import type { ButtonProps } from '../Button';
+/**
+ * Single button configuration - only primary button is allowed
+ */
+type SingleButtonAction = {
+    secondaryButton?: never;
+    primaryButton: ButtonProps;
+};
+/**
+ * Two buttons configuration - both secondary and primary buttons
+ */
+type TwoButtonsAction = {
+    secondaryButton: ButtonProps;
+    primaryButton: ButtonProps;
+};
+/**
+ * Actions can be either single button or two buttons
+ */
+export type PageFooterActions = SingleButtonAction | TwoButtonsAction;
+export type PageFooterType = 'standard' | 'overflow' | 'information';
+type PageFooterBaseProps = NativeElementPropsWithoutKeyAndRef<'footer'> & {
     /**
-     * The className of action wrapper.
+     * Action buttons configuration for primary and secondary actions.
+     * Renders buttons in the order: secondary (left), primary (right).
      */
-    actionClassName?: string;
+    actions?: PageFooterActions;
     /**
-     * The action element in the left.
+     * The className of annotation wrapper.
      */
-    children?: ReactNode;
-}
+    annotationClassName?: string;
+    /**
+     * The warning message in the middle.
+     */
+    warningMessage?: string;
+};
+type PageFooterStandardProps = PageFooterBaseProps & {
+    /**
+     * The type of PageFooter annotation.
+     * @default 'standard'
+     */
+    type?: 'standard';
+    /**
+     * Standard type: A ghost button with text.
+     * Children of the button.
+     */
+    annotation?: string;
+    /**
+     * Standard type: Button click handler.
+     */
+    onAnnotationClick?: ButtonProps['onClick'];
+};
+type PageFooterOverflowProps = PageFooterBaseProps & {
+    /**
+     * The type of PageFooter annotation.
+     */
+    type: 'overflow';
+    /**
+     * Overflow type: Icon for the icon-only button.
+     * @TODO Consider Dropdown integration after Dropdown redesign.
+     */
+    annotation?: ButtonProps['icon'];
+    /**
+     * Overflow type: Button click handler.
+     */
+    onAnnotationClick?: ButtonProps['onClick'];
+};
+type PageFooterInformationProps = PageFooterBaseProps & {
+    /**
+     * The type of PageFooter annotation.
+     */
+    type: 'information';
+    /**
+     * Information type: Plain text to display.
+     */
+    annotation?: string;
+};
+export type PageFooterProps = PageFooterStandardProps | PageFooterOverflowProps | PageFooterInformationProps;
 declare const PageFooter: import("react").ForwardRefExoticComponent<PageFooterProps & import("react").RefAttributes<HTMLElement>>;
 export default PageFooter;

package/PageFooter/PageFooter.js

@@ -1,12 +1,43 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { pageFooterClasses } from '@mezzanine-ui/core/page-footer';
-import ConfirmActions from '../ConfirmActions/ConfirmActions.js';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import Typography from '../Typography/Typography.js';
 import cx from 'clsx';
 
 const PageFooter = forwardRef(function PageFooter(props, ref) {
-    const { className, actionClassName, cancelButtonProps, cancelText, children, danger, loading, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, onCancel, onConfirm, ...rest } = props;
-    return (jsxs("footer", { ref: ref, ...rest, className: cx(pageFooterClasses.host, className), children: [jsx("div", { className: actionClassName, children: children }), jsx(ConfirmActions, { cancelText: cancelText, confirmText: confirmText, cancelButtonProps: cancelButtonProps, confirmButtonProps: confirmButtonProps, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: loading, onCancel: onCancel, onConfirm: onConfirm })] }));
+    var _a;
+    const { actions, annotation, annotationClassName, className, type = 'standard', warningMessage, ...rest } = props;
+    // Filter out onAnnotationClick from rest props to avoid React warnings
+    if ('onAnnotationClick' in rest) {
+        delete rest.onAnnotationClick;
+    }
+    const { children: primaryButtonText, ...restPrimaryButtonProps } = (_a = actions === null || actions === void 0 ? void 0 : actions.primaryButton) !== null && _a !== void 0 ? _a : {};
+    // Render annotation based on type
+    const renderAnnotation = () => {
+        if (!annotation)
+            return null;
+        switch (type) {
+            case 'standard': {
+                return (jsx(Button, { onClick: 'onAnnotationClick' in props
+                        ? props.onAnnotationClick
+                        : undefined, size: "main", variant: "base-ghost", children: annotation }));
+            }
+            case 'overflow': {
+                // @TODO Consider Dropdown integration after Dropdown redesign
+                return (jsx(Button, { icon: annotation, onClick: 'onAnnotationClick' in props
+                        ? props.onAnnotationClick
+                        : undefined, size: "main", variant: "base-ghost" }));
+            }
+            case 'information': {
+                return (jsx(Typography, { color: "text-neutral", variant: "caption", children: annotation }));
+            }
+            default:
+                return null;
+        }
+    };
+    return (jsxs("footer", { ref: ref, ...rest, className: cx(pageFooterClasses.host, className), children: [jsx("div", { className: cx(pageFooterClasses.annotation, annotationClassName), children: renderAnnotation() }), jsx("div", { className: pageFooterClasses.message, children: warningMessage ? (jsx(Typography, { variant: "caption", color: "text-warning", align: "right", children: warningMessage })) : null }), jsxs(ButtonGroup, { children: [(actions === null || actions === void 0 ? void 0 : actions.secondaryButton) && (jsx(Button, { size: "main", variant: "base-secondary", ...actions.secondaryButton })), jsx(Button, { size: "main", variant: "base-primary", ...restPrimaryButtonProps, children: primaryButtonText || 'Button' })] })] }));
 });
 
 export { PageFooter as default };

package/PageFooter/index.d.ts

@@ -1 +1,2 @@
-export { PageFooterProps, default } from './PageFooter';
+export type { PageFooterProps } from './PageFooter';
+export { default } from './PageFooter';

package/PageHeader/PageHeader.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactElement } from 'react';
+import { BreadcrumbProps } from '../Breadcrumb';
+import { ButtonProps } from '../Button';
+import { PageToolbarProps } from '../PageToolbar';
+import { TypographyProps } from '../Typography';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+type PageHeaderChild = ReactElement<BreadcrumbProps> | ReactElement<PageToolbarProps> | ReactElement<ButtonProps> | ReactElement<HTMLAttributes<HTMLAnchorElement>> | null | undefined | false;
+/**
+ * Props for the PageHeader component.
+ * Extends native HTML header element props.
+ */
+export type PageHeaderProps = NativeElementPropsWithoutKeyAndRef<'header'> & {
+    /** Optional back button properties */
+    onBackClick?: () => void;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Main title text for the page header */
+    title: string;
+    /** HTML element type for the title (defaults to 'h2') */
+    titleComponent?: TypographyProps['component'];
+    /** Child components: Breadcrumb, PageToolbar, Button, or component with href prop */
+    children?: PageHeaderChild | PageHeaderChild[];
+};
+/**
+ * PageHeader component displays a page title with optional breadcrumb navigation,
+ * description, back button, and action toolbar.
+ */
+declare const PageHeader: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"header"> & {
+    /** Optional back button properties */
+    onBackClick?: () => void;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Main title text for the page header */
+    title: string;
+    /** HTML element type for the title (defaults to 'h2') */
+    titleComponent?: TypographyProps["component"];
+    /** Child components: Breadcrumb, PageToolbar, Button, or component with href prop */
+    children?: PageHeaderChild | PageHeaderChild[];
+} & import("react").RefAttributes<HTMLElement>>;
+export default PageHeader;

package/PageHeader/PageHeader.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import { pageHeaderClasses } from '@mezzanine-ui/core/page-header';
+import Button from '../Button/Button.js';
+import Typography from '../Typography/Typography.js';
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js';
+import PageToolbar from '../PageToolbar/PageToolbar.js';
+import cx from 'clsx';
+
+const getBreadcrumbAndToolbar = (children) => {
+    let breadcrumb;
+    let pageToolbar;
+    let backButtonOrLink;
+    const childrenArray = Children.toArray(children);
+    if (children) {
+        childrenArray.forEach((child) => {
+            if (!isValidElement(child))
+                return;
+            if (child.type === Breadcrumb) {
+                breadcrumb = child;
+            }
+            else if (child.type === PageToolbar) {
+                pageToolbar = cloneElement(child, {
+                    size: 'main',
+                });
+            }
+            else if (child.type === Button) {
+                backButtonOrLink = cloneElement(child, {
+                    icon: {
+                        position: 'icon-only',
+                        src: ChevronLeftIcon,
+                    },
+                    size: 'sub',
+                    variant: 'base-tertiary',
+                });
+            }
+            else if (child.type === 'a') {
+                backButtonOrLink = cloneElement(child, {
+                    children: (jsx(Button, { component: 'div', icon: {
+                            position: 'icon-only',
+                            src: ChevronLeftIcon,
+                        }, size: "sub", variant: "base-tertiary" })),
+                });
+            }
+            else {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.warn('PageHeader only accepts Breadcrumb, PageToolbar, Button or component with href prop as its children.');
+                }
+            }
+        });
+    }
+    return { breadcrumb, backButtonOrLink, pageToolbar };
+};
+/**
+ * PageHeader component displays a page title with optional breadcrumb navigation,
+ * description, back button, and action toolbar.
+ */
+const PageHeader = forwardRef(function PageHeader(props, ref) {
+    const { children, className, description, onBackClick, title, titleComponent = 'h2', ...rest } = props;
+    const { backButtonOrLink, breadcrumb, pageToolbar } = getBreadcrumbAndToolbar(children);
+    // prop onBack takes precedence over backButtonOrLink
+    const backButton = onBackClick ? (jsx(Button, { icon: {
+            position: 'icon-only',
+            src: ChevronLeftIcon,
+        }, onClick: onBackClick, size: "sub", variant: "base-tertiary" })) : (backButtonOrLink);
+    return (jsxs("header", { ...rest, className: cx(pageHeaderClasses.host, className), ref: ref, children: [breadcrumb, jsxs("span", { className: pageHeaderClasses.headerContent, children: [jsxs("span", { className: pageHeaderClasses.pageTitleWithIcon, children: [backButton && jsx("div", { children: backButton }), jsxs("div", { className: pageHeaderClasses.pageTitleText, children: [jsx(Typography, { align: "left", color: "text-neutral-solid", component: titleComponent, variant: "h2", children: title }), description && (jsx(Typography, { align: "left", color: "text-neutral", component: "p", variant: "caption", children: description }))] })] }), pageToolbar] })] }));
+});
+
+export { PageHeader as default };

package/PageHeader/index.d.ts

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

package/PageHeader/index.js

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

package/PageToolbar/PageToolbar.d.ts

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,23 @@
+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

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

package/PageToolbar/index.js

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

package/PageToolbar/utils.d.ts

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,165 @@
+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 };