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

package/Breadcrumb/Breadcrumb.js

@@ -1,25 +1,53 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { SlashIcon } from '@mezzanine-ui/icons';
 import { breadcrumbClasses } from '@mezzanine-ui/core/breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem.js';
+import { flattenChildren } from '../utils/flatten-children.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
+const renderItemWithProps = (item, appendProps) => {
+    if (isValidElement(item)) {
+        return cloneElement(item, appendProps);
+    }
+    return jsx(BreadcrumbItem, { ...item, ...appendProps });
+};
+const renderItems = (items, condensed) => {
+    if (!items) {
+        return null;
+    }
+    const lastIndex = items.length - 1;
+    return (jsxs(Fragment, { children: [!condensed &&
+                lastIndex >= 0 &&
+                renderItemWithProps(items[0], { current: lastIndex === 0 }), !condensed && lastIndex >= 1 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[1], { current: lastIndex === 1 })] })), !condensed && items.length <= 4 && (jsxs(Fragment, { children: [lastIndex >= 2 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[2], { current: lastIndex === 2 })] })), lastIndex === 3 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[3], { current: true })] }))] })), (items.length > 4 || condensed) && (jsxs(Fragment, { children: [!condensed && jsx(Icon, { icon: SlashIcon, size: 14 }), (!condensed || items.length > 2) && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { options: (condensed
+                                    ? items.slice(0, lastIndex - 1)
+                                    : items.slice(2, lastIndex - 1)).map((item) => {
+                                    if (isValidElement(item)) {
+                                        const { props } = item;
+                                        return {
+                                            label: props.label,
+                                            href: props.href,
+                                            target: props.target,
+                                            id: props.id,
+                                        };
+                                    }
+                                    return {
+                                        label: item.label,
+                                        href: item.href,
+                                        target: item.target,
+                                        id: item.id,
+                                    };
+                                }) }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), lastIndex - 1 >= 0 && (jsxs(Fragment, { children: [renderItemWithProps(items[lastIndex - 1]), jsx(Icon, { icon: SlashIcon, size: 14 })] })), renderItemWithProps(items[lastIndex], { current: true })] }))] }));
+};
 /**
  * The react component for `mezzanine` breadcrumb.
  */
 const Breadcrumb = forwardRef(function Breadcrumb(props, ref) {
-    const { className, condensed, items, ...rest } = props;
-    const lastIndex = items.length - 1;
-    return (jsxs("nav", { ...rest, "aria-label": "Breadcrumb", className: cx(breadcrumbClasses.host, className), ref: ref, children: [!condensed && lastIndex >= 0 && (jsx(BreadcrumbItem, { ...items[0], current: lastIndex === 0 })), !condensed && lastIndex >= 1 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[1], current: lastIndex === 1 })] })), !condensed && items.length <= 4 && (jsxs(Fragment, { children: [lastIndex >= 2 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[2], current: lastIndex === 2 })] })), lastIndex === 3 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[3], current: true })] }))] })), (items.length > 4 || condensed) && (jsxs(Fragment, { children: [!condensed && jsx(Icon, { icon: SlashIcon, size: 14 }), (!condensed || items.length > 2) && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { options: (condensed
-                                    ? items.slice(0, lastIndex - 1)
-                                    : items.slice(2, lastIndex - 1)).map((item) => ({
-                                    label: item.label,
-                                    href: item.href,
-                                    target: item.target,
-                                    id: item.id,
-                                })) }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), lastIndex - 1 >= 0 && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { ...items[lastIndex - 1] }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), jsx(BreadcrumbItem, { ...items[lastIndex], current: true })] }))] }));
+    const { children, className, condensed, items, ...rest } = props;
+    const flatChildren = flattenChildren(children);
+    const itemFragment = renderItems(items || flatChildren, condensed);
+    return (jsx("nav", { ...rest, "aria-label": "Breadcrumb", className: cx(breadcrumbClasses.host, className), ref: ref, children: itemFragment }));
 });
 
 export { Breadcrumb as default };

package/Breadcrumb/typings.d.ts

@@ -1,12 +1,17 @@
-import type { JSXElementConstructor } from 'react';
+import type { JSXElementConstructor, ReactElement } from 'react';
 import type { ComponentOverridableForwardRefComponentPropsFactory, NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface BreadcrumbProps extends Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'children'> {
+export type BreadcrumbProps = Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'children'> & ({
     /**
      * Display only the last two items with an ellipsis dropdown for all previous items
      */
     condensed?: boolean;
     items: Array<BreadcrumbItemProps>;
-}
+    children?: never;
+} | {
+    condensed?: boolean;
+    items?: never;
+    children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
+});
 export type BreadcrumbItemComponent = 'a' | 'button' | JSXElementConstructor<any>;
 export type BreadcrumbItemProps<C extends BreadcrumbItemComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<BreadcrumbItemComponent, C, BreadcrumbDropdownItemProps | BreadcrumbItemTextProps | BreadcrumbLinkItemProps>;
 export type BreadcrumbDropdownItemProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children'> & {

package/Drawer/Drawer.d.ts

@@ -1,12 +1,53 @@
-import { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+import { DrawerSize } from '@mezzanine-ui/core/drawer';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface DrawerProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+import { BackdropProps } from '../Backdrop';
+export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<BackdropProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'onBackdropClick' | 'onClose' | 'open'> {
     /**
-     * Whether the drawer placement.
-     * @default 'left'
+     * Text for the ghost action button in the bottom action area.
      */
-    placement?: DrawerPlacement;
+    bottomGhostActionText?: string;
+    /**
+     * Click handler for the ghost action button in the bottom action area.
+     */
+    bottomOnGhostActionClick?: VoidFunction;
+    /**
+     * Click handler for the primary action button in the bottom action area.
+     */
+    bottomOnPrimaryActionClick?: VoidFunction;
+    /**
+     * Click handler for the secondary action button in the bottom action area.
+     */
+    bottomOnSecondaryActionClick?: VoidFunction;
+    /**
+     * Text for the primary action button in the bottom action area.
+     */
+    bottomPrimaryActionText?: string;
+    /**
+     * Text for the secondary action button in the bottom action area.
+     */
+    bottomSecondaryActionText?: string;
+    /**
+     * Controls whether to disable closing drawer while escape key down.
+     * @default false
+     */
+    disableCloseOnEscapeKeyDown?: boolean;
+    /**
+     * Title text displayed in the drawer header.
+     */
+    headerTitle?: string;
+    /**
+     * Controls whether to display the bottom action area.
+     */
+    isBottomDisplay?: boolean;
+    /**
+     * Controls whether to display the header area.
+     */
+    isHeaderDisplay?: boolean;
+    /**
+     * Controls the width of the drawer.
+     * @default 'medium'
+     */
+    size?: DrawerSize;
 }
 declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/Drawer/Drawer.js

@@ -1,18 +1,43 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
 import { drawerClasses } from '@mezzanine-ui/core/drawer';
-import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
+import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
+import useTopStack from '../_internal/SlideFadeOverlay/useTopStack.js';
+import ClearActions from '../ClearActions/ClearActions.js';
+import Button from '../Button/Button.js';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Backdrop from '../Backdrop/Backdrop.js';
+import Slide from '../Transition/Slide.js';
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
-    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
-    const slideFadeDirection = useMemo(() => ({
-        top: 'down',
-        left: 'right',
-        right: 'left',
-        bottom: 'up',
-    }), []);
-    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
+    const { bottomGhostActionText, bottomOnGhostActionClick, bottomOnPrimaryActionClick, bottomOnSecondaryActionClick, bottomPrimaryActionText, bottomSecondaryActionText, children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, headerTitle, isBottomDisplay, isHeaderDisplay, onBackdropClick, onClose, open, size = 'medium', ...rest } = props;
+    const [exited, setExited] = useState(true);
+    /**
+     * Escape keydown close: escape will only close the top drawer
+     */
+    const checkIsOnTheTop = useTopStack(open);
+    useDocumentEscapeKeyDown(() => {
+        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (checkIsOnTheTop()) {
+                event.stopPropagation();
+                onClose();
+            }
+        };
+    }, [disableCloseOnEscapeKeyDown, checkIsOnTheTop, open, onClose]);
+    if (!open && exited) {
+        return null;
+    }
+    return (jsx(Backdrop, { className: drawerClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(Slide, { duration: {
+                enter: MOTION_DURATION.moderate,
+                exit: MOTION_DURATION.moderate,
+            }, easing: {
+                enter: MOTION_EASING.entrance,
+                exit: MOTION_EASING.exit,
+            }, in: open, onEntered: () => setExited(false), onExited: () => setExited(true), ref: ref, children: jsxs("div", { ...rest, className: cx(drawerClasses.host, drawerClasses.right, drawerClasses.size(size), className), children: [isHeaderDisplay && (jsxs("div", { className: drawerClasses.header, children: [headerTitle, jsx(ClearActions, { onClick: onClose })] })), jsx("div", { className: drawerClasses.content, children: children }), isBottomDisplay && (jsxs("div", { className: drawerClasses.bottom, children: [jsx("div", { children: bottomGhostActionText && bottomOnGhostActionClick && (jsx(Button, { onClick: bottomOnGhostActionClick, type: "button", variant: "base-ghost", children: bottomGhostActionText })) }), jsxs("div", { className: drawerClasses['bottom__actions'], children: [bottomSecondaryActionText && bottomOnSecondaryActionClick && (jsx(Button, { onClick: bottomOnSecondaryActionClick, type: "button", variant: "base-secondary", children: bottomSecondaryActionText })), bottomPrimaryActionText && bottomOnPrimaryActionClick && (jsx(Button, { onClick: bottomOnPrimaryActionClick, type: "button", variant: "base-primary", children: bottomPrimaryActionText }))] })] }))] }) }) }));
 });
 
 export { Drawer as default };

package/Empty/Empty.js

@@ -7,6 +7,7 @@ import ButtonGroup from '../Button/ButtonGroup.js';
 import { EmptyMainInitialDataIcon } from './icons/EmptyMainInitialDataIcon.js';
 import { EmptyMainResultIcon } from './icons/EmptyMainResultIcon.js';
 import { EmptyMainSystemIcon } from './icons/EmptyMainSystemIcon.js';
+import { flattenChildren } from '../utils/flatten-children.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -33,12 +34,34 @@ const renderButtonOrElement = (button, size, variant) => {
     return jsx(Button, { ...button, size: size, variant: variant });
 };
 const Empty = forwardRef(function Empty(props, ref) {
-    const { actions, className, description, pictogram, size = 'main', title, type = 'initial-data', ...rest } = props;
+    const { actions, children, className, description, pictogram, size = 'main', title, type = 'initial-data', ...rest } = props;
     const icon = (size === 'main'
         ? mainIconMap[type]
         : iconMap[type] && (jsx(Icon, { className: emptyClasses.icon, icon: iconMap[type] }))) || null;
-    const fragmentButtons = actions && 'secondaryButton' in actions ? (jsxs(Fragment, { children: [renderButtonOrElement(actions.secondaryButton, size, 'base-secondary'), renderButtonOrElement(actions.primaryButton, size, 'base-primary')] })) : (renderButtonOrElement(actions, size, 'base-secondary'));
-    return (jsx("div", { ...rest, className: cx(emptyClasses.host, emptyClasses.size(size), className), ref: ref, children: jsxs("div", { className: emptyClasses.container, children: [pictogram ? jsx("div", { className: emptyClasses.icon, children: pictogram }) : icon, jsx("p", { className: emptyClasses.title, children: title }), description && jsx("p", { className: emptyClasses.description, children: description }), actions && size !== 'minor' && (jsx(ButtonGroup, { className: emptyClasses.actions, children: fragmentButtons }))] }) }));
+    const flatChildren = flattenChildren(children);
+    const fragmentButtons = actions &&
+        ('secondaryButton' in actions ? (jsxs(Fragment, { children: [renderButtonOrElement(actions.secondaryButton, size, 'base-secondary'), renderButtonOrElement(actions.primaryButton, size, 'base-primary')] })) : (renderButtonOrElement(actions, size, 'base-secondary')));
+    const renderChildren = !fragmentButtons &&
+        flatChildren.length > 0 &&
+        flatChildren.map((child, index) => {
+            if (!isValidElement(child)) {
+                return null;
+            }
+            else if (child.type === Button) {
+                switch (index) {
+                    case 0:
+                        return renderButtonOrElement(child, size, 'base-secondary');
+                    case 1:
+                        return renderButtonOrElement(child, size, 'base-primary');
+                    default:
+                        console.warn('Only up to two Button components are allowed as children of Empty.');
+                        return null;
+                }
+            }
+            console.warn('Only Button components are allowed as children of Empty.');
+            return null;
+        });
+    return (jsx("div", { ...rest, className: cx(emptyClasses.host, emptyClasses.size(size), className), ref: ref, children: jsxs("div", { className: emptyClasses.container, children: [pictogram ? jsx("div", { className: emptyClasses.icon, children: pictogram }) : icon, jsx("p", { className: emptyClasses.title, children: title }), description && jsx("p", { className: emptyClasses.description, children: description }), (actions || children) && size !== 'minor' && (jsx(ButtonGroup, { className: emptyClasses.actions, children: fragmentButtons || renderChildren }))] }) }));
 });
 
 export { Empty as default };

package/Empty/typings.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { ButtonGroupChild, ButtonProps } from '../Button';
+import { ReactElement, ReactNode } from 'react';
+import { ButtonProps } from '../Button';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface BaseEmptyProps {
     /**
@@ -25,13 +25,22 @@ export interface CustomPictogramEmptyProps {
 }
 export interface MainOrSubEmptyProps {
     /**
-     * Action buttons configuration for primary and secondary actions.
-     * Renders buttons in the order: secondary (left or only one), primary (right).
+     * Action buttons configuration for primary and secondary actions. <br />
+     * Renders buttons in the order: secondary (left or only one), primary (right). <br />
+     * If actions provided, children will be ignored. <br />
      */
     actions?: {
-        primaryButton?: ButtonProps | ButtonGroupChild;
-        secondaryButton: ButtonProps | ButtonGroupChild;
-    } | ButtonProps | ButtonGroupChild;
+        primaryButton?: ButtonProps;
+        secondaryButton: ButtonProps;
+    } | ButtonProps;
+    /**
+     * Child button elements for actions. <br />
+     * Can be a single Button element or an array of one or two Button elements. <br />
+     * When using children, the first Button is treated as secondary and the second as primary. <br />
+     * If only one Button is provided, it is treated as secondary. <br />
+     * If actions provided, children will be ignored. <br />
+     */
+    children?: ReactElement<ButtonProps> | [ReactElement<ButtonProps>] | [ReactElement<ButtonProps>, ReactElement<ButtonProps>];
     /**
      * Optional description text displayed below the title.
      * Provides additional context or details about the empty state.

package/PageHeader/PageHeader.d.ts

@@ -4,12 +4,14 @@ 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>>;
+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 */
@@ -24,6 +26,8 @@ export type PageHeaderProps = NativeElementPropsWithoutKeyAndRef<'header'> & {
  * 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 */

package/PageHeader/PageHeader.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+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';
@@ -57,9 +57,14 @@ const getBreadcrumbAndToolbar = (children) => {
  * description, back button, and action toolbar.
  */
 const PageHeader = forwardRef(function PageHeader(props, ref) {
-    const { children, className, description, title, titleComponent = 'h2', ...rest } = props;
+    const { children, className, description, onBackClick, title, titleComponent = 'h2', ...rest } = props;
     const { backButtonOrLink, breadcrumb, pageToolbar } = getBreadcrumbAndToolbar(children);
-    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: [backButtonOrLink && jsx("div", { children: backButtonOrLink }), 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] })] }));
+    // 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/PageToolbar/PageToolbar.d.ts

@@ -1,67 +1,114 @@
 import { ReactElement } from 'react';
-import { ButtonGroupChild, ButtonProps } from '../Button';
+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';
 };
-/**
- * Actions configuration for PageToolbar.
- * Can be either an object with specific button types or a single button element/props.
- */
-type PageToolbarActions = {
-    destructiveButton?: ReactElement<ButtonProps> | ButtonProps;
-    primaryButton?: ReactElement<ButtonProps> | ButtonProps;
-    secondaryButton?: ReactElement<ButtonProps> | ButtonProps;
-} | ReactElement<ButtonProps> | ButtonProps;
+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 = NativeElementPropsWithoutKeyAndRef<'div'> & {
+export type PageToolbarProps = Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> & {
     /**
      * Button configuration for primary, secondary, and destructive actions. <br />
      * Automatically applies proper styling and order. <br />
      */
-    actions: PageToolbarActions;
+    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?: ReactElement<SearchInputProps | SelectProps | SegmentedControlProps>;
+    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 title="..." icon="..." />`. <br />
-     * Wrapped with Tooltip automatically. <br />
-     * Supports a single Button or a Fragment of Buttons. <br />
-     * `<> <Button ... /> <Button ... /> </>` <br />
+     * Icon-only utility buttons `<Button icon="..." />`. <br />
+     * They usually appear as smaller buttons with only an icon and no text.
      */
-    utilities?: ButtonGroupChild;
+    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<NativeElementPropsWithoutKeyAndRef<"div"> & {
+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: PageToolbarActions;
+    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?: ReactElement<SearchInputProps | SelectProps | SegmentedControlProps>;
+    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 title="..." icon="..." />`. <br />
-     * Wrapped with Tooltip automatically. <br />
-     * Supports a single Button or a Fragment of Buttons. <br />
-     * `<> <Button ... /> <Button ... /> </>` <br />
+     * Icon-only utility buttons `<Button icon="..." />`. <br />
+     * They usually appear as smaller buttons with only an icon and no text.
      */
-    utilities?: ButtonGroupChild;
+    utilities?: (ButtonProps & {
+        icon: {
+            src: IconDefinition;
+        };
+    })[];
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default PageToolbar;

package/PageToolbar/PageToolbar.js

@@ -1,114 +1,23 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, isValidElement, cloneElement, Fragment, Children } from 'react';
+import { forwardRef } from 'react';
 import { pageToolbarClasses } from '@mezzanine-ui/core/page-toolbar';
-import Button from '../Button/Button.js';
+import { renderFilterProp, renderActionsProp, renderIconButtonsProp, resolvePageToolbarChild } from './utils.js';
 import ButtonGroup from '../Button/ButtonGroup.js';
-import Tooltip from '../Tooltip/Tooltip.js';
 import cx from 'clsx';
 
-/**
- * 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);
-};
-/**
- * Clones filter component with the specified size prop.
- */
-const withSize = (target, size) => {
-    if (!target) {
-        return null;
-    }
-    if (isValidElement(target)) {
-        return cloneElement(target, { size });
-    }
-    return target;
-};
-/**
- * Wraps an icon button with a Tooltip.
- * Uses the button's title prop or children text as tooltip content.
- */
-const createIconButtonWithTooltip = (child, size, index = 0) => {
-    const { children, title, ...childProps } = child.props;
-    const tooltipText = title || (typeof children === 'string' ? children : undefined);
-    return (jsx(Tooltip, { title: tooltipText, children: (tooltipProps) => cloneElement(child, {
-            ...tooltipProps,
-            icon: childProps.icon
-                ? {
-                    ...childProps.icon,
-                    position: 'icon-only',
-                }
-                : undefined,
-            size,
-            title: undefined,
-            variant: 'base-secondary',
-        }) }, childProps.id || tooltipText || index));
-};
-/**
- * Renders utility icon buttons wrapped in tooltips.
- * Handles both single Button elements and Fragment containing multiple Buttons.
- */
-const renderIconButtons = (utilities, size) => {
-    if (!utilities) {
-        return null;
-    }
-    if (!isValidElement(utilities)) {
-        return null;
-    }
-    if (utilities.type === Fragment) {
-        const children = Children.map(utilities.props.children, (child, index) => {
-            if (!isValidElement(child) || child.type !== Button) {
-                return null;
-            }
-            return createIconButtonWithTooltip(child, size, index);
-        });
-        return children === null || children === void 0 ? void 0 : children.filter(Boolean);
-    }
-    if (utilities.type === Button) {
-        return createIconButtonWithTooltip(utilities, size);
-    }
-    return null;
-};
-/**
- * Renders action buttons based on the actions configuration.
- * Supports both structured actions object and single button element/props.
- */
-const renderActions = (actions, size) => {
-    if ('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);
-    }
-    if (isValidElement(actions)) {
-        return renderButton(actions, size, 'base-primary');
-    }
-    return jsx(Button, { ...actions, size: size, variant: "base-primary" });
-};
 /**
  * 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, className, filter, size = 'main', utilities, ...rest } = props;
-    const filterWithSize = withSize(filter, size);
-    const fragmentActions = renderActions(actions, size);
-    const fragmentUtilities = renderIconButtons(utilities, size);
-    return (jsxs("div", { ...rest, className: cx(pageToolbarClasses.host, pageToolbarClasses.size(size), className), ref: ref, children: [filterWithSize, jsx(ButtonGroup, { children: fragmentActions }), jsx(ButtonGroup, { children: fragmentUtilities })] }));
+    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/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 {};