@mezzanine-ui/react 0.11.3 → 0.12.0

package/Select/SelectTrigger.d.ts

@@ -2,7 +2,7 @@ import { Ref } from 'react';
 import { TextFieldProps } from '../TextField';
 import { SelectValue } from './typings';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type SelectTriggerInputProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
+export type SelectTriggerInputProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
 export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'suffix'> {
     /**
      * Controls the chevron icon layout.
@@ -51,7 +51,7 @@ export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' |
     showTextInputAfterTags?: boolean;
     suffixAction?: VoidFunction;
 }
-export declare type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
+export type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
     /**
      * Controls the layout of trigger.
      */
@@ -67,7 +67,7 @@ export declare type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
      */
     renderValue?: (value: SelectValue[]) => string;
 };
-export declare type SelectTriggerSingleProps = SelectTriggerBaseProps & {
+export type SelectTriggerSingleProps = SelectTriggerBaseProps & {
     /**
      * Controls the layout of trigger.
      */
@@ -83,7 +83,7 @@ export declare type SelectTriggerSingleProps = SelectTriggerBaseProps & {
      */
     renderValue?: (value: SelectValue | null) => string;
 };
-export declare type SelectTriggerComponentProps = SelectTriggerMultipleProps | SelectTriggerSingleProps;
-export declare type SelectTriggerProps = Omit<SelectTriggerComponentProps, 'innerRef'>;
+export type SelectTriggerComponentProps = SelectTriggerMultipleProps | SelectTriggerSingleProps;
+export type SelectTriggerProps = Omit<SelectTriggerComponentProps, 'innerRef'>;
 declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SelectTrigger;

package/Slider/Slider.d.ts

@@ -32,16 +32,16 @@ export interface SliderBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef
      */
     innerRef?: Ref<HTMLDivElement>;
 }
-export declare type SingleSliderProps = SliderBaseProps & {
+export type SingleSliderProps = SliderBaseProps & {
     onChange?: (value: SingleSliderValue) => void;
     value: UseSingleSliderProps['value'];
 };
-export declare type RangeSliderProps = SliderBaseProps & {
+export type RangeSliderProps = SliderBaseProps & {
     onChange?: (value: RangeSliderValue) => void;
     value: UseRangeSliderProps['value'];
 };
-export declare type SliderComponentProps = SingleSliderProps | RangeSliderProps;
-export declare type SliderProps = Omit<SliderComponentProps, 'innerRef'>;
+export type SliderComponentProps = SingleSliderProps | RangeSliderProps;
+export type SliderProps = Omit<SliderComponentProps, 'innerRef'>;
 /**
  * The react component for `mezzanine` slider.
  * The outcome will be base on the type of given value.

package/Table/Table.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType } from '@mezzanine-ui/core/table';
+import { ReactNode } from 'react';
+import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources } from '@mezzanine-ui/core/table';
 import { EmptyProps } from '../Empty';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role'> {
@@ -36,7 +36,9 @@ export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndR
       * When `expandable.rowExpandable` is given, it will control whether row data is expandable or not
       * `expandable.expandedRowRender` is a callback to helps you decides what data should be rendered.
       */
-    expandable?: TableExpandable<T>;
+    expandable?: Omit<TableExpandable<T>, 'expandedRowRender'> & {
+        expandedRowRender(record: T): ReactNode | ExpandRowBySources;
+    };
     /**
      * customized header className
      */
@@ -81,6 +83,6 @@ export interface TableWithPagination<T> extends TableBaseProps<T> {
     pagination?: TablePaginationType;
     fetchMore?: undefined;
 }
-export declare type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
+export type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
 declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>>;
 export default Table;

package/Table/Table.js

@@ -58,7 +58,7 @@ const Table = forwardRef(function Table(props, ref) {
     }, [refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show]);
     /** context */
     const tableContextValue = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return ({
             scrollBarSize: 4,
             emptyProps,
@@ -83,13 +83,10 @@ const Table = forwardRef(function Table(props, ref) {
                 onChange: paginationProp.onChange,
                 total: (_b = paginationProp.total) !== null && _b !== void 0 ? _b : dataSource.length,
                 options: {
-                    boundaryCount: (_d = (_c = paginationProp.options) === null || _c === void 0 ? void 0 : _c.boundaryCount) !== null && _d !== void 0 ? _d : 1,
-                    className: (_e = paginationProp.options) === null || _e === void 0 ? void 0 : _e.className,
-                    disabled: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.disabled) !== null && _g !== void 0 ? _g : false,
-                    hideNextButton: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.hideNextButton) !== null && _j !== void 0 ? _j : false,
-                    hidePreviousButton: (_l = (_k = paginationProp.options) === null || _k === void 0 ? void 0 : _k.hidePreviousButton) !== null && _l !== void 0 ? _l : false,
-                    pageSize: (_o = (_m = paginationProp.options) === null || _m === void 0 ? void 0 : _m.pageSize) !== null && _o !== void 0 ? _o : 10,
-                    siblingCount: (_q = (_p = paginationProp.options) === null || _p === void 0 ? void 0 : _p.siblingCount) !== null && _q !== void 0 ? _q : 1,
+                    ...((_c = paginationProp.options) !== null && _c !== void 0 ? _c : {}),
+                    boundaryCount: (_e = (_d = paginationProp.options) === null || _d === void 0 ? void 0 : _d.boundaryCount) !== null && _e !== void 0 ? _e : 1,
+                    pageSize: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.pageSize) !== null && _g !== void 0 ? _g : 10,
+                    siblingCount: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.siblingCount) !== null && _j !== void 0 ? _j : 1,
                 },
             } : undefined,
         });
@@ -109,13 +106,16 @@ const Table = forwardRef(function Table(props, ref) {
         isReachEnd,
         paginationProp,
     ]);
-    const tableDataContextValue = {
+    const tableDataContextValue = useMemo(() => ({
         columns,
         dataSource,
-    };
-    const tableComponentContextValue = {
-        bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
-    };
+    }), [columns, dataSource]);
+    const tableComponentContextValue = useMemo(() => {
+        var _a;
+        return ({
+            bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
+        });
+    }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
     return (jsx(Loading, { loading: loading, stretch: true, tip: "\u8CC7\u6599\u8F09\u5165\u4E2D...", children: jsx("div", { ref: ref, ...rest, className: cx(tableClasses.host, className), role: "grid", children: jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsxs(TableComponentContext.Provider, { value: tableComponentContextValue, children: [isRefreshShow ? (jsx(TableRefresh, { onClick: refreshProp.onClick })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null] }) }) }) }) }));
 });
 var Table$1 = Table;

package/Table/TableBodyRow.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useState, useMemo, Fragment } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
 import get from 'lodash/get';
@@ -33,8 +33,8 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
                         var _a, _b, _c, _d;
                         const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
                         const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
-                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, rowIndex)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}`));
-                    })] }), renderedExpandedContent ? (jsx(Fragment$1, { children: typeof renderedExpandedContent === 'string' ? (jsx(AccordionDetails, { className: expanding.className, expanded: expanded, children: renderedExpandedContent })) : (jsx(Fragment$1, { children: renderedExpandedContent.dataSource.length > 0 ? (jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent }) })) : null })) })) : null] }));
+                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}`));
+                    })] }), renderedExpandedContent ? (jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent })) : null] }));
 });
 var TableBodyRow$1 = TableBodyRow;
 

package/Table/TableContext.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
+import { ReactNode } from 'react';
+import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord, ExpandRowBySources } from '@mezzanine-ui/core/table';
 import { EmptyProps } from '../Empty';
 /** typeof rowSelection */
 export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'> {
@@ -30,7 +30,9 @@ export interface TableContextProps {
     sorting?: SortingContext;
     loading?: boolean;
     setLoading?(l: boolean): void;
-    expanding?: TableExpandable<TableRecord<unknown>>;
+    expanding?: Omit<TableExpandable<TableRecord<unknown>>, 'expandedRowRender'> & {
+        expandedRowRender(record: TableRecord<unknown>): ReactNode | ExpandRowBySources;
+    };
     fetchMore?: FetchMoreContext;
     pagination?: TablePagination;
 }

package/Table/TableExpandedTable.js

@@ -17,7 +17,7 @@ const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
                         var _a, _b, _c, _d;
                         const ellipsis = !!(get(source, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
                         const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : get(source, column.dataIndex));
-                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, source, sourceIndex)) || get(source, column.dataIndex) }) }, `${column.dataIndex}-${index}`));
+                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, source, sourceIndex, column)) || get(source, column.dataIndex) }) }, `${column.dataIndex}-${index}`));
                     })] }, (source.key || source.id)));
         }) }));
 });

package/Table/pagination/TablePagination.js

@@ -7,6 +7,7 @@ import Pagination from '../../Pagination/Pagination.js';
 import cx from 'clsx';
 
 const TablePagination = forwardRef(function TablePagination(props, ref) {
+    var _a;
     const { className, bodyRef, ...rest } = props;
     const { pagination, } = useContext(TableContext) || {};
     const { current: currentPageProp, onChange: onChangePageProp, total, options: paginationOptions = {}, } = pagination || {};
@@ -15,10 +16,10 @@ const TablePagination = forwardRef(function TablePagination(props, ref) {
         current: currentPageProp,
         onChange: onChangePageProp,
     });
-    const { boundaryCount, className: paginationClassName, disabled, hideNextButton, hidePreviousButton, pageSize: pageSizeProp, siblingCount, } = paginationOptions;
+    const { boundaryCount, className: paginationClassName, disabled, hideNextButton, hidePreviousButton, jumperButtonText, jumperHintText, jumperInputPlaceholder, onChangePageSize, pageSize: pageSizeProp, pageSizeLabel, pageSizeOptions, pageSizeUnit, renderPageSizeOptionName, renderPaginationSummary, showJumper, showPageSizeOptions, siblingCount, } = paginationOptions;
     const currentStartCount = (pageSizeProp * (currentPage - 1)) + 1;
     const currentEndCount = Math.min(pageSizeProp * currentPage, total);
-    return (jsxs("div", { ...rest, ref: ref, className: cx(tableClasses.pagination, className), children: [jsx("span", { className: tableClasses.paginationIndicator, children: `目前顯示 ${currentStartCount} - ${currentEndCount} 筆，共 ${total} 筆資料` }), jsx("div", { className: tableClasses.paginationActions, children: jsx(Pagination, { boundaryCount: boundaryCount, className: paginationClassName, current: currentPage, disabled: disabled, hideNextButton: hideNextButton, hidePreviousButton: hidePreviousButton, onChange: setCurrentPage, pageSize: pageSizeProp, siblingCount: siblingCount, total: total }) })] }));
+    return (jsxs("div", { ...rest, ref: ref, className: cx(tableClasses.pagination, className), children: [jsx("span", { className: tableClasses.paginationIndicator, children: (_a = renderPaginationSummary === null || renderPaginationSummary === void 0 ? void 0 : renderPaginationSummary(currentStartCount, currentEndCount)) !== null && _a !== void 0 ? _a : `目前顯示 ${currentStartCount} - ${currentEndCount} 筆，共 ${total} 筆資料` }), jsx("div", { className: tableClasses.paginationActions, children: jsx(Pagination, { boundaryCount: boundaryCount, buttonText: jumperButtonText, className: paginationClassName, current: currentPage, disabled: disabled, hideNextButton: hideNextButton, hidePreviousButton: hidePreviousButton, hintText: jumperHintText, inputPlaceholder: jumperInputPlaceholder, onChange: setCurrentPage, onChangePageSize: onChangePageSize, pageSize: pageSizeProp, pageSizeLabel: pageSizeLabel, pageSizeOptions: pageSizeOptions, pageSizeUnit: pageSizeUnit, renderPageSizeOptionName: renderPageSizeOptionName, showJumper: showJumper, showPageSizeOptions: showPageSizeOptions, siblingCount: siblingCount, total: total }) })] }));
 });
 var TablePagination$1 = TablePagination;
 

package/Table/sorting/useTableSorting.d.ts

@@ -2,7 +2,7 @@ import { TableDataSource, TableColumn, TableRecord } from '@mezzanine-ui/core/ta
 export interface UseTableSorting {
     dataSource: TableDataSource[];
 }
-export declare type SortedType = 'desc' | 'asc' | 'none';
+export type SortedType = 'desc' | 'asc' | 'none';
 export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "dataIndex" | "sorter" | "onSorted">) => void, {
     readonly sortedOn: string;
     readonly sortedType: SortedType;

package/Tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import { Key, MouseEvent, ReactElement, ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TabPaneProps } from './TabPane';
-export declare type TabsChild = ReactElement<TabPaneProps>;
+export type TabsChild = ReactElement<TabPaneProps>;
 export interface TabsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'> {
     /**
      * Current TabPane's index

package/Transition/Fade.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TransitionImplementationProps } from './Transition';
-export declare type FadeProps = TransitionImplementationProps;
+export type FadeProps = TransitionImplementationProps;
 /**
  * The react component for `mezzanine` transition fade.
  */

package/Transition/SlideFade.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TransitionImplementationProps } from './Transition';
-export declare type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
+export type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
 export interface SlideFadeProps extends TransitionImplementationProps {
     /**
      * The direction of child element will enter to.

package/Transition/Transition.d.ts

@@ -2,18 +2,18 @@ import { RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } fr
 import { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
 import { NativeElementTag } from '../utils/jsx-types';
 export { TransitionState };
-export declare type TransitionMode = 'enter' | 'exit';
-export declare type TransitionDuration = 'auto' | number | {
+export type TransitionMode = 'enter' | 'exit';
+export type TransitionDuration = 'auto' | number | {
     [mode in TransitionMode]?: number;
 };
-export declare type TransitionEasing = string | {
+export type TransitionEasing = string | {
     [mode in TransitionMode]?: string;
 };
-export declare type TransitionDelay = number | {
+export type TransitionDelay = number | {
     [mode in TransitionMode]?: number;
 };
-export declare type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
-export declare type TransitionExitHandler = (node: HTMLElement) => void;
+export type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type TransitionExitHandler = (node: HTMLElement) => void;
 export interface TransitionImplementationChildProps {
     ref?: Ref<HTMLElement>;
     style?: CSSProperties;

package/Transition/Zoom.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TransitionImplementationProps } from './Transition';
-export declare type ZoomProps = TransitionImplementationProps;
+export type ZoomProps = TransitionImplementationProps;
 /**
  * The react component for `mezzanine` transition zoom.
  */

package/Tree/TreeNode.d.ts

@@ -3,7 +3,7 @@ import { TreeNodeValue, TreeSize } from '@mezzanine-ui/core/tree';
 import { CollapseProps } from '../Transition';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TreeNodeData } from './typings';
-export declare type TreeNodeElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'children' | 'value' | 'onSelect'>;
+export type TreeNodeElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'children' | 'value' | 'onSelect'>;
 export interface TreeNodeProps extends TreeNodeData, TreeNodeElementProps {
     /**
      * Provided children will be wrapped under `Collapse`.

package/Tree/TreeNodeList.d.ts

@@ -2,7 +2,7 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TreeNodeElementProps, TreeNodeProps } from './TreeNode';
 import { TreeNodeData, TreeNodeRefs } from './typings';
-export declare type TreeNodeListElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'children' | 'onSelect'>;
+export type TreeNodeListElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'children' | 'onSelect'>;
 export interface TreeNodeListProps extends TreeNodeListElementProps, Pick<TreeNodeProps, 'multiple' | 'onExpand' | 'onSelect' | 'selectable' | 'size'> {
     /**
      * Given nodes will be passed to `TreeNode` component orderly.

package/Tree/typings.d.ts

@@ -1,12 +1,12 @@
 import { MutableRefObject, ReactNode } from 'react';
 import { TreeNodeDataShape, TreeNodeEntityShape, TreeNodePropShape, TreeNodeValue } from '@mezzanine-ui/core/tree';
-export declare type TreeNodeProp = TreeNodePropShape<ReactNode>;
-export declare type TreeNodeData = TreeNodeDataShape<ReactNode>;
-export declare type TreeNodeEntity = TreeNodeEntityShape<ReactNode>;
-export declare type TreeNodeEntities = Map<TreeNodeValue, TreeNodeEntity>;
-export declare type TreeNodeRefsShape = Record<TreeNodeValue, HTMLLIElement>;
-export declare type TreeNodeRefs = MutableRefObject<TreeNodeRefsShape | undefined>;
-export declare type TreeExpandControl = {
+export type TreeNodeProp = TreeNodePropShape<ReactNode>;
+export type TreeNodeData = TreeNodeDataShape<ReactNode>;
+export type TreeNodeEntity = TreeNodeEntityShape<ReactNode>;
+export type TreeNodeEntities = Map<TreeNodeValue, TreeNodeEntity>;
+export type TreeNodeRefsShape = Record<TreeNodeValue, HTMLLIElement>;
+export type TreeNodeRefs = MutableRefObject<TreeNodeRefsShape | undefined>;
+export type TreeExpandControl = {
     collapse: (value: TreeNodeValue) => void;
     collapseAll: () => void;
     collapseAllFrom: (value: TreeNodeValue) => void;

package/Typography/Typography.d.ts

@@ -1,7 +1,7 @@
 import { JSXElementConstructor } from 'react';
 import { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant } from '@mezzanine-ui/core/typography';
 import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
-export declare type TypographyComponent = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'p' | 'span' | 'label' | 'div' | 'caption' | 'a' | JSXElementConstructor<any>;
+export type TypographyComponent = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'p' | 'span' | 'label' | 'div' | 'caption' | 'a' | JSXElementConstructor<any>;
 interface TypographyPropsBase {
     /**
      * The css variable for `text-align`.
@@ -33,7 +33,7 @@ interface TypographyPropsBase {
      */
     variant?: TypographyVariant;
 }
-export declare type TypographyProps<C extends TypographyComponent = 'p'> = ComponentOverridableForwardRefComponentPropsFactory<TypographyComponent, C, TypographyPropsBase>;
+export type TypographyProps<C extends TypographyComponent = 'p'> = ComponentOverridableForwardRefComponentPropsFactory<TypographyComponent, C, TypographyPropsBase>;
 /**
  * The react component for `mezzanine` typography.
  */

package/Typography/index.d.ts

@@ -6,6 +6,6 @@ export type { TypographyComponent, TypographyProps, };
  * @remark
  * Add type alias here for parsable to react docgen typescript.
  */
-declare type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
 declare const _default: GenericTypography;
 export default _default;

package/Upload/UploadPicture.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type UploadPictureControl = {
+export type UploadPictureControl = {
     getData: () => void;
 };
 export interface UploadPictureProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {

package/Upload/UploadPictureWall.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type UploadPictureWallControl = {
+export type UploadPictureWallControl = {
     getAllData: () => void;
 };
 export interface UploadPictureWallBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {
@@ -75,6 +75,6 @@ export interface UploadPictureWallMultiUploadProps extends UploadPictureWallBase
     onUpload?: undefined;
     parallel?: undefined;
 }
-export declare type UploadPictureWallProps = UploadPictureWallSingleUploadProps | UploadPictureWallMultiUploadProps;
+export type UploadPictureWallProps = UploadPictureWallSingleUploadProps | UploadPictureWallMultiUploadProps;
 declare const UploadPictureWall: import("react").ForwardRefExoticComponent<UploadPictureWallProps & import("react").RefAttributes<HTMLDivElement>>;
 export default UploadPictureWall;

package/hooks/useClickAway.d.ts

@@ -1,5 +1,5 @@
 import { RefObject, DependencyList } from 'react';
-export declare type ClickAwayEvent = MouseEvent | TouchEvent | PointerEvent;
-export declare type ClickAwayHandler = (event: ClickAwayEvent) => void;
-export declare type ClickAwayHandlerFactory = () => ClickAwayHandler | undefined;
+export type ClickAwayEvent = MouseEvent | TouchEvent | PointerEvent;
+export type ClickAwayHandler = (event: ClickAwayEvent) => void;
+export type ClickAwayHandlerFactory = () => ClickAwayHandler | undefined;
 export declare function useClickAway(factory: ClickAwayHandlerFactory, containerRef: RefObject<HTMLElement>, deps?: DependencyList): void;

package/hooks/useDocumentEscapeKeyDown.d.ts

@@ -1,3 +1,3 @@
 import { DependencyList } from 'react';
-export declare type DocumentEscapeKeyDownHandlerFactory = () => ((event: KeyboardEvent) => void) | undefined;
+export type DocumentEscapeKeyDownHandlerFactory = () => ((event: KeyboardEvent) => void) | undefined;
 export declare function useDocumentEscapeKeyDown(factory: DocumentEscapeKeyDownHandlerFactory, deps?: DependencyList): void;

package/hooks/useDocumentEvents.d.ts

@@ -1,5 +1,5 @@
 import { DependencyList } from 'react';
-export declare type DocumentEventHandlersFactory = () => {
+export type DocumentEventHandlersFactory = () => {
     [event in keyof DocumentEventMap]?: (event: DocumentEventMap[event]) => void;
 } | undefined;
 export declare function useDocumentEvents(factory: DocumentEventHandlersFactory, deps?: DependencyList): void;

package/hooks/useDocumentTabKeyDown.d.ts

@@ -1,3 +1,3 @@
 import { DependencyList } from 'react';
-export declare type DocumentTabKeyDownHandlerFactory = () => ((event: KeyboardEvent) => void) | undefined;
+export type DocumentTabKeyDownHandlerFactory = () => ((event: KeyboardEvent) => void) | undefined;
 export declare function useDocumentTabKeyDown(factory: DocumentTabKeyDownHandlerFactory, deps?: DependencyList): void;

package/index.d.ts

@@ -53,7 +53,7 @@ export { CardProps, CardActionsProps, CardActions, default as Card, } from './Ca
 export { EmptyProps, default as Empty, } from './Empty';
 export { TableProps, TableRefreshProps, TableRefresh, default as Table, } from './Table';
 export { TagSize, TagProps, default as Tag, } from './Tag';
-export { usePagination, PaginationItemProps, PaginationItemType, PaginationItem, PaginationJumperProps, PaginationJumper, PaginationProps, default as Pagination, } from './Pagination';
+export { usePagination, PaginationItemProps, PaginationItemType, PaginationItem, PaginationJumperProps, PaginationJumper, PaginationPageSizeProps, PaginationPageSize, PaginationProps, default as Pagination, } from './Pagination';
 export { TreeNodeProp, TreeNodeData, TreeNodeEntity, TreeNodeEntities, TreeNodeRefsShape, TreeNodeRefs, TreeExpandControl, uniqueArray, toggleValue, toggleValueWithStatusControl, traverseTree, UseTreeExpandedValueProps, useTreeExpandedValue, GetTreeNodeEntitiesProps, getTreeNodeEntities, TreeNodeElementProps, TreeNodeProps, TreeNode, TreeNodeListElementProps, TreeNodeListProps, TreeNodeList, TreeProps, default as Tree, } from './Tree';
 /**
  * Data Entry

package/index.js

@@ -62,6 +62,7 @@ export { default as Tag } from './Tag/Tag.js';
 export { usePagination } from './Pagination/usePagination.js';
 export { default as PaginationItem } from './Pagination/PaginationItem.js';
 export { default as PaginationJumper } from './Pagination/PaginationJumper.js';
+export { default as PaginationPageSize } from './Pagination/PaginationPageSize.js';
 export { default as Pagination } from './Pagination/Pagination.js';
 export { toggleValue, toggleValueWithStatusControl, uniqueArray } from './Tree/toggleValue.js';
 export { traverseTree } from './Tree/traverseTree.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,30 +31,30 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.11.3",
-    "@mezzanine-ui/icons": "^0.11.3",
-    "@mezzanine-ui/system": "^0.11.3",
-    "@popperjs/core": "^2.11.5",
+    "@mezzanine-ui/core": "^0.12.0",
+    "@mezzanine-ui/icons": "^0.12.0",
+    "@mezzanine-ui/system": "^0.12.0",
+    "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.5",
-    "clsx": "^1.1.1",
+    "clsx": "^1.2.1",
     "lodash": "^4.17.21",
     "react-popper": "^2.3.0",
-    "react-transition-group": "^4.4.2",
-    "tslib": "^2.1.0"
+    "react-transition-group": "^4.4.5",
+    "tslib": "^2.4.1"
   },
   "devDependencies": {
-    "@storybook/react": "^6.5.9",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@types/lodash": "^4.14.182",
+    "@storybook/react": "^6.5.13",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/lodash": "^4.14.188",
     "@types/moment": "^2.13.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@types/react-test-renderer": "^18.0.0",
-    "chromatic": "^6.6.4",
-    "dayjs": "^1.11.3",
+    "chromatic": "^6.11.4",
+    "dayjs": "^1.11.6",
     "lodash": "^4.17.21",
-    "moment": "^2.29.3",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0"

package/utils/composeRefs.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
-export declare type ComposableRef<T> = Ref<T> | null | undefined;
-export declare type ComposedRef<T> = Extract<Ref<T>, (...args: any[]) => any>;
+export type ComposableRef<T> = Ref<T> | null | undefined;
+export type ComposedRef<T> = Extract<Ref<T>, (...args: any[]) => any>;
 /**
  * Compose all refs to single one.
  * It's helpful if you want to use useRef in an forwardRef component.

package/utils/general.d.ts

@@ -1,8 +1,8 @@
-export declare type PickRenameMulti<T, R extends {
+export type PickRenameMulti<T, R extends {
     [K in keyof R]: K extends keyof T ? PropertyKey : 'Error: key not in T';
 }> = {
     [P in keyof T as P extends keyof R ? R[P] : P]: T[P];
 };
-export declare type ExtendedProperties<T> = {
+export type ExtendedProperties<T> = {
     [P in keyof T]: T[P];
 };

package/utils/getElement.d.ts

@@ -1,3 +1,3 @@
 import { RefObject } from 'react';
-export declare type ElementGetter = HTMLElement | (() => HTMLElement) | RefObject<HTMLElement | null> | null;
+export type ElementGetter = HTMLElement | (() => HTMLElement) | RefObject<HTMLElement | null> | null;
 export declare function getElement(elementGetter?: ElementGetter): HTMLElement | null;

package/utils/jsx-types.d.ts

@@ -1,9 +1,9 @@
 import { ComponentPropsWithoutRef, DetailedHTMLProps, ElementType, JSXElementConstructor, SVGProps } from 'react';
-export declare type NativeElementTag = keyof JSX.IntrinsicElements;
-export declare type NativeElementPropsWithoutKeyAndRef<T extends NativeElementTag> = Omit<JSX.IntrinsicElements[T], 'key' | 'ref'>;
-export declare type NativeElement<T extends NativeElementTag> = JSX.IntrinsicElements[T] extends DetailedHTMLProps<infer _A, infer E> ? E : JSX.IntrinsicElements[T] extends SVGProps<infer E> ? E : unknown;
-export declare type ComponentPropsWithoutKeyAndRef<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'key'>;
-export declare type ComponentOverridableForwardRefComponentPropsFactory<VC extends NativeElementTag | JSXElementConstructor<any>, C extends VC, P> = Omit<Omit<ComponentPropsWithoutKeyAndRef<C>, keyof P> & P, 'component'> & {
+export type NativeElementTag = keyof JSX.IntrinsicElements;
+export type NativeElementPropsWithoutKeyAndRef<T extends NativeElementTag> = Omit<JSX.IntrinsicElements[T], 'key' | 'ref'>;
+export type NativeElement<T extends NativeElementTag> = JSX.IntrinsicElements[T] extends DetailedHTMLProps<infer _A, infer E> ? E : JSX.IntrinsicElements[T] extends SVGProps<infer E> ? E : unknown;
+export type ComponentPropsWithoutKeyAndRef<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'key'>;
+export type ComponentOverridableForwardRefComponentPropsFactory<VC extends NativeElementTag | JSXElementConstructor<any>, C extends VC, P> = Omit<Omit<ComponentPropsWithoutKeyAndRef<C>, keyof P> & P, 'component'> & {
     /**
      * Override the component used to render.
      */