@mezzanine-ui/react 0.16.0 → 1.0.0-alpha.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,36 @@
+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>>;
+/**
+ * Props for the PageHeader component.
+ * Extends native HTML header element props.
+ */
+export type PageHeaderProps = NativeElementPropsWithoutKeyAndRef<'header'> & {
+    /** 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 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,65 @@
+import { jsxs, jsx } 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, 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] })] }));
+});
+
+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,67 @@
+import { ReactElement } from 'react';
+import { ButtonGroupChild, ButtonProps } from '../Button';
+import { SearchInputProps } from '../Input';
+import { SelectProps } from '../Select';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+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;
+/**
+ * Props for the PageToolbar component.
+ */
+export type PageToolbarProps = NativeElementPropsWithoutKeyAndRef<'div'> & {
+    /**
+     * Button configuration for primary, secondary, and destructive actions. <br />
+     * Automatically applies proper styling and order. <br />
+     */
+    actions: PageToolbarActions;
+    /** Filter component (SearchInput, Select, or SegmentedControl) */
+    filter?: ReactElement<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 />
+     */
+    utilities?: ButtonGroupChild;
+};
+/**
+ * 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"> & {
+    /**
+     * Button configuration for primary, secondary, and destructive actions. <br />
+     * Automatically applies proper styling and order. <br />
+     */
+    actions: PageToolbarActions;
+    /** Filter component (SearchInput, Select, or SegmentedControl) */
+    filter?: ReactElement<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 />
+     */
+    utilities?: ButtonGroupChild;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default PageToolbar;

package/PageToolbar/PageToolbar.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement, Fragment, Children } from 'react';
+import { pageToolbarClasses } from '@mezzanine-ui/core/page-toolbar';
+import Button from '../Button/Button.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 })] }));
+});
+
+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/Pagination/Pagination.d.ts

@@ -17,74 +17,68 @@ export interface PaginationProps extends Omit<DetailedHTMLProps<HTMLAttributes<H
      */
     current?: number;
     /**
-     * Whether the fields is disabled.
-     * @default false
+     * If `true`, the fields are disabled.
      */
-    disabled?: boolean;
-    /**
-     * If `true`, hide the next-page button.
-     * @default false
-     */
-    hideNextButton?: boolean;
-    /**
-     * If `true`, hide the previous-page button.
-     * @default false
-     */
-    hidePreviousButton?: boolean;
+    disabled?: true;
     /**
      * The hint text displayed in front of jumper `input`.
      */
     hintText?: string;
     /**
-     * The hint displayed in the jumper `input` before the user enters a value.
+     * The placeholder displayed in the jumper input before the user enters a value.
      */
     inputPlaceholder?: string;
     /**
      * Render the item.
-     * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
+     * @param {PaginationItemProps} item The props to spread on a PaginationItem.
      * @returns {ReactNode}
      * @default (item) => <PaginationItem {...item} />
      */
     itemRender?: (item: PaginationItemProps) => ReactNode;
     /**
      * Callback fired when the page is changed.
-     *
-     * @param {number} page The page active.
+     * @param {number} page The active page number.
      */
     onChange?: (page: number) => void;
     /**
-     * Callback fired when the page size is changed
-     *
-     * @param {number} pageSize
+     * Callback fired when the page size is changed.
+     * @param {number} pageSize The new page size.
      */
     onChangePageSize?: PaginationPageSizeProps['onChange'];
     /**
-     * Number of data per page
+     * Number of items per page.
      * @default 10
      */
     pageSize?: PaginationPageSizeProps['value'];
     /**
-     * Label display before page size selector
+     * Label displayed before page size selector.
      */
     pageSizeLabel?: PaginationPageSizeProps['label'];
     /**
-     * Page size options to render
+     * Page size options to render.
      */
     pageSizeOptions?: PaginationPageSizeProps['options'];
     /**
-     * Page size unit after `select`
+     * Render custom result summary.
+     * @param {number} from Start index of current page.
+     * @param {number} to End index of current page.
+     * @param {number} total Total number of items.
+     * @returns {string}
+     * @example (from, to, total) => `目前顯示 ${from}-${to} 筆，共 ${total} 筆資料`
      */
-    pageSizeUnit?: PaginationPageSizeProps['unit'];
+    renderResultSummary?: (from: number, to: number, total: number) => string;
     /**
-     * Render custom page size option name
+     * Render custom page size option name.
      */
     renderPageSizeOptionName?: PaginationPageSizeProps['renderOptionName'];
     /**
-     * Show jumper or not.
+     * If `true`, show jumper.
+     * @default false
      */
     showJumper?: boolean;
     /**
-     * Ship page size or not
+     * If `true`, show page size options.
+     * @default false
      */
     showPageSizeOptions?: boolean;
     /**
@@ -93,7 +87,7 @@ export interface PaginationProps extends Omit<DetailedHTMLProps<HTMLAttributes<H
      */
     siblingCount?: number;
     /**
-     * Items total count.
+     * Total number of items.
      * @default 0
      */
     total?: number;

package/Pagination/Pagination.js

@@ -5,25 +5,24 @@ import PaginationItem from './PaginationItem.js';
 import PaginationJumper from './PaginationJumper.js';
 import PaginationPageSize from './PaginationPageSize.js';
 import { usePagination } from './usePagination.js';
+import Typography from '../Typography/Typography.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` pagination.
  */
 const Pagination = forwardRef((props, ref) => {
-    const { className, boundaryCount = 1, buttonText, current = 1, disabled = false, hideNextButton = false, hidePreviousButton = false, hintText, inputPlaceholder, itemRender = (item) => jsx(PaginationItem, { ...item }), onChange, onChangePageSize, pageSize = 10, pageSizeLabel, pageSizeOptions, pageSizeUnit, renderPageSizeOptionName, showJumper = false, showPageSizeOptions = false, siblingCount = 1, total = 0, ...rest } = props;
+    const { boundaryCount = 1, buttonText, className, current = 1, disabled, hintText, inputPlaceholder, itemRender = (item) => jsx(PaginationItem, { ...item }), onChange, onChangePageSize, pageSize = 10, pageSizeLabel, pageSizeOptions, renderPageSizeOptionName, renderResultSummary, showJumper = false, showPageSizeOptions = false, siblingCount = 1, total = 0, ...rest } = props;
     const { items } = usePagination({
         boundaryCount,
         current,
         disabled,
-        hideNextButton,
-        hidePreviousButton,
         onChange,
         pageSize,
         siblingCount,
         total,
     });
-    return (jsx("nav", { ...rest, ref: ref, "aria-label": "pagination navigation", className: cx(paginationClasses.host, className), children: jsxs("ul", { className: paginationClasses.container, children: [showPageSizeOptions && (jsx("li", { className: paginationClasses.pageSize, children: jsx(PaginationPageSize, { disabled: disabled, label: pageSizeLabel, onChange: onChangePageSize, options: pageSizeOptions, renderOptionName: renderPageSizeOptionName, unit: pageSizeUnit, value: pageSize }) })), items.map((item, index) => (jsx("li", { className: paginationClasses.item, children: itemRender(item) }, index))), showJumper && (jsx("li", { className: paginationClasses.jumper, children: jsx(PaginationJumper, { buttonText: buttonText, disabled: disabled, hintText: hintText, inputPlaceholder: inputPlaceholder, onChange: onChange, pageSize: pageSize, total: total }) }))] }) }));
+    return (jsxs("nav", { ...rest, ref: ref, "aria-label": "pagination navigation", className: cx(paginationClasses.host, className), children: [renderResultSummary && (jsx(Typography, { variant: "label-primary", children: renderResultSummary(pageSize * (current - 1) + 1, Math.min(pageSize * current, total), total) })), jsxs("ul", { className: paginationClasses.container, children: [showPageSizeOptions && (jsx("li", { className: paginationClasses.pageSize, children: jsx(PaginationPageSize, { disabled: disabled, label: pageSizeLabel, onChange: onChangePageSize, options: pageSizeOptions, renderOptionName: renderPageSizeOptionName, value: pageSize }) })), jsx("li", { children: jsx("ul", { className: paginationClasses.itemList, children: items.map((item, index) => (jsx("li", { className: paginationClasses.item, children: itemRender(item) }, index))) }) }), showJumper && (jsx("li", { className: paginationClasses.jumper, children: jsx(PaginationJumper, { buttonText: buttonText, disabled: disabled, hintText: hintText, inputPlaceholder: inputPlaceholder, onChange: onChange, pageSize: pageSize, total: total }) }))] })] }));
 });
 
 export { Pagination as default };

package/Pagination/PaginationItem.d.ts

@@ -18,7 +18,7 @@ export interface PaginationItemProps extends Omit<DetailedHTMLProps<HTMLAttribut
      */
     page?: number;
     /**
-     * Whether the field type.
+     * The type of pagination item.
      * @default 'page'
      */
     type?: PaginationItemType;

package/Pagination/PaginationItem.js

@@ -1,7 +1,8 @@
 import { forwardRef, createElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { paginationItemClasses } from '@mezzanine-ui/core/pagination';
-import { ChevronLeftIcon, ChevronRightIcon } from '@mezzanine-ui/icons';
+import { DotHorizontalIcon, DoubleChevronRightIcon, DoubleChevronLeftIcon, ChevronLeftIcon, ChevronRightIcon } from '@mezzanine-ui/icons';
+import Typography from '../Typography/Typography.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -10,16 +11,18 @@ const PaginationItem = forwardRef((props, ref) => {
     const icons = {
         next: ChevronRightIcon,
         previous: ChevronLeftIcon,
+        first: DoubleChevronLeftIcon,
+        last: DoubleChevronRightIcon,
     };
     const ButtonIcon = icons[type];
     return type === 'ellipsis' ? (jsx("div", { ...rest, ref: ref, className: cx(paginationItemClasses.host, paginationItemClasses.ellipsis, {
             [paginationItemClasses.disabled]: disabled,
-        }, className), children: "..." })) : (createElement("button", { ...rest, ref: ref, key: page, disabled: disabled, className: cx(paginationItemClasses.host, paginationItemClasses.button, {
+        }, className), children: jsx(Icon, { icon: DotHorizontalIcon }) })) : (createElement("button", { ...rest, ref: ref, key: page, disabled: disabled, className: cx(paginationItemClasses.host, paginationItemClasses.button, {
             [paginationItemClasses.active]: active,
             [paginationItemClasses.disabled]: disabled,
         }, className), type: "button" },
         ButtonIcon && jsx(Icon, { icon: ButtonIcon }),
-        type === 'page' && page));
+        type === 'page' && (jsx(Typography, { variant: "label-primary", children: page }))));
 });
 
 export { PaginationItem as default };