@mezzanine-ui/react 0.11.2 → 0.12.0

package/AppBar/AppBar.d.ts

@@ -4,8 +4,8 @@ import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { AppBarBrandProps } from './AppBarBrand';
 import { AppBarMainProps } from './AppBarMain';
 import { AppBarSupportProps } from './AppBarSupport';
-export declare type AppBarChild = ReactElement<AppBarBrandProps | AppBarMainProps | AppBarSupportProps, NamedExoticComponent>;
-export declare type AppBarChildren = AppBarChild | AppBarChild[];
+export type AppBarChild = ReactElement<AppBarBrandProps | AppBarMainProps | AppBarSupportProps, NamedExoticComponent>;
+export type AppBarChildren = AppBarChild | AppBarChild[];
 export interface AppBarProps extends NativeElementPropsWithoutKeyAndRef<'header'> {
     orientation?: AppBarOrientation;
     children?: AppBarChildren;

package/AppBar/AppBarBrand.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type AppBarBrandProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+export type AppBarBrandProps = NativeElementPropsWithoutKeyAndRef<'div'>;
 declare const AppBarBrand: import("react").ForwardRefExoticComponent<AppBarBrandProps & import("react").RefAttributes<HTMLDivElement>>;
 export default AppBarBrand;

package/AppBar/AppBarMain.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type AppBarMainProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+export type AppBarMainProps = NativeElementPropsWithoutKeyAndRef<'div'>;
 declare const AppBarMain: import("react").ForwardRefExoticComponent<AppBarMainProps & import("react").RefAttributes<HTMLDivElement>>;
 export default AppBarMain;

package/AppBar/AppBarSupport.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type AppBarSupportProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+export type AppBarSupportProps = NativeElementPropsWithoutKeyAndRef<'div'>;
 declare const AppBarSupport: import("react").ForwardRefExoticComponent<AppBarSupportProps & import("react").RefAttributes<HTMLDivElement>>;
 export default AppBarSupport;

package/Badge/BadgeContainer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type BadgeContainerProps = NativeElementPropsWithoutKeyAndRef<'span'>;
+export type BadgeContainerProps = NativeElementPropsWithoutKeyAndRef<'span'>;
 /**
  * The react component for `mezzanine` badge container.
  */

package/Button/Button.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
 import { ButtonComponent, ButtonPropsBase } from './typings';
-export declare type ButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, ButtonPropsBase>;
+export type ButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, ButtonPropsBase>;
 /**
  * The react component for `mezzanine` button.
  */

package/Button/ButtonGroup.d.ts

@@ -3,7 +3,7 @@ import { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, Bu
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { ButtonProps } from './Button';
 import { IconButtonProps } from './IconButton';
-export declare type ButtonGroupChild = ReactElement<ButtonProps | IconButtonProps> | null | undefined | false;
+export type ButtonGroupChild = ReactElement<ButtonProps | IconButtonProps> | null | undefined | false;
 export interface ButtonGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * If `true`, all buttons will not have spacing between each others.

package/Button/IconButton.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
 import { ButtonComponent, ButtonPropsBase } from './typings';
-export declare type IconButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, Omit<ButtonPropsBase, 'prefix' | 'suffix'> & {
+export type IconButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, Omit<ButtonPropsBase, 'prefix' | 'suffix'> & {
     /**
      * The icon element.
      */

package/Button/index.d.ts

@@ -9,12 +9,12 @@ export type { ButtonComponent, ButtonProps, ButtonPropsBase, IconButtonProps, };
  * @remark
  * Add type alias here for parsable to react docgen typescript.
  */
-declare type GenericIconButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<IconButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+type GenericIconButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<IconButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
 export declare const IconButton: GenericIconButton;
 /**
  * @remark
  * Add type alias here for parsable to react docgen typescript.
  */
-declare type GenericButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<ButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+type GenericButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<ButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
 declare const _default: GenericButton;
 export default _default;

package/Button/typings.d.ts

@@ -1,6 +1,6 @@
 import { JSXElementConstructor, ReactNode } from 'react';
 import { ButtonColor, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
-export declare type ButtonComponent = 'button' | 'a' | JSXElementConstructor<any>;
+export type ButtonComponent = 'button' | 'a' | JSXElementConstructor<any>;
 export interface ButtonPropsBase {
     /**
      * The color name provided by palette.

package/Calendar/CalendarContext.d.ts

@@ -7,7 +7,7 @@ export interface CalendarConfigs extends CalendarMethods {
     displayWeekDayLocale: string;
     valueLocale: string;
 }
-export declare type CalendarConfigProviderProps = {
+export type CalendarConfigProviderProps = {
     children?: ReactNode;
     defaultDateFormat?: string;
     defaultTimeFormat?: string;

package/Calendar/useCalendarControlModifiers.d.ts

@@ -1,6 +1,6 @@
 import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
-export declare type CalendarControlModifier = (value: DateType) => DateType;
-export declare type UseCalendarControlModifiersResult = Record<CalendarMode, [
+export type CalendarControlModifier = (value: DateType) => DateType;
+export type UseCalendarControlModifiersResult = Record<CalendarMode, [
     CalendarControlModifier,
     CalendarControlModifier
 ]>;

package/Form/FormMessage.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type FormMessageProps = NativeElementPropsWithoutKeyAndRef<'span'>;
+export type FormMessageProps = NativeElementPropsWithoutKeyAndRef<'span'>;
 /**
  * The react component for `mezzanine` form message.
  */

package/Form/typings.d.ts

@@ -1,4 +1,4 @@
-export declare type FormElementFocusHandlers = {
+export type FormElementFocusHandlers = {
     onBlur?: VoidFunction;
     onFocus?: VoidFunction;
 };

package/Form/useAutoCompleteValueControl.d.ts

@@ -8,19 +8,19 @@ export interface UseAutoCompleteBaseValueControl {
     onSearch?(input: string): any;
     options: SelectValue[];
 }
-export declare type UseAutoCompleteMultipleValueControl = UseAutoCompleteBaseValueControl & {
+export type UseAutoCompleteMultipleValueControl = UseAutoCompleteBaseValueControl & {
     defaultValue?: SelectValue[];
     mode: 'multiple';
     onChange?(newOptions: SelectValue[]): any;
     value?: SelectValue[];
 };
-export declare type UseAutoCompleteSingleValueControl = UseAutoCompleteBaseValueControl & {
+export type UseAutoCompleteSingleValueControl = UseAutoCompleteBaseValueControl & {
     defaultValue?: SelectValue;
     mode: 'single';
     onChange?(newOption: SelectValue | null): any;
     value?: SelectValue | null;
 };
-export declare type UseAutoCompleteValueControl = UseAutoCompleteMultipleValueControl | UseAutoCompleteSingleValueControl;
+export type UseAutoCompleteValueControl = UseAutoCompleteMultipleValueControl | UseAutoCompleteSingleValueControl;
 export interface AutoCompleteBaseValueControl {
     focused: boolean;
     onClear(e: MouseEvent<Element>): void;
@@ -31,11 +31,11 @@ export interface AutoCompleteBaseValueControl {
     setSearchText: Dispatch<SetStateAction<string>>;
     unselectedOptions: SelectValue[];
 }
-export declare type AutoCompleteMultipleValueControl = AutoCompleteBaseValueControl & {
+export type AutoCompleteMultipleValueControl = AutoCompleteBaseValueControl & {
     onChange: (v: SelectValue | null) => SelectValue[];
     value: SelectValue[];
 };
-export declare type AutoCompleteSingleValueControl = AutoCompleteBaseValueControl & {
+export type AutoCompleteSingleValueControl = AutoCompleteBaseValueControl & {
     onChange: (v: SelectValue | null) => SelectValue | null;
     value: SelectValue | null;
 };

package/Form/useInputWithTagsModeValue.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent, KeyboardEvent, RefObject } from 'react';
 import { UseInputControlValueProps } from './useInputControlValue';
-export declare type TagsType = string[] | number[];
+export type TagsType = string[] | number[];
 export interface UseInputWithTagsModeValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
     /**
      * The value of initial tags

package/Form/useSelectValueControl.d.ts

@@ -5,29 +5,29 @@ export interface UseSelectBaseValueControl {
     onChange?(newOptions: SelectValue[] | SelectValue): any;
     onClose?(): void;
 }
-export declare type UseSelectMultipleValueControl = UseSelectBaseValueControl & {
+export type UseSelectMultipleValueControl = UseSelectBaseValueControl & {
     defaultValue?: SelectValue[];
     mode: 'multiple';
     onChange?(newOptions: SelectValue[]): any;
     value?: SelectValue[];
 };
-export declare type UseSelectSingleValueControl = UseSelectBaseValueControl & {
+export type UseSelectSingleValueControl = UseSelectBaseValueControl & {
     defaultValue?: SelectValue;
     mode: 'single';
     onChange?(newOption: SelectValue): any;
     value?: SelectValue | null;
 };
-export declare type UseSelectValueControl = UseSelectMultipleValueControl | UseSelectSingleValueControl;
+export type UseSelectValueControl = UseSelectMultipleValueControl | UseSelectSingleValueControl;
 export interface SelectBaseValueControl {
     onClear(e: MouseEvent<Element>): void;
 }
-export declare type SelectMultipleValueControl = SelectBaseValueControl & {
+export type SelectMultipleValueControl = SelectBaseValueControl & {
     onChange: (v: SelectValue | null) => SelectValue[];
     value: SelectValue[];
 };
-export declare type SelectSingleValueControl = SelectBaseValueControl & {
+export type SelectSingleValueControl = SelectBaseValueControl & {
     onChange: (v: SelectValue | null) => SelectValue | null;
     value: SelectValue | null;
 };
-export declare type SelectValueControl = SelectMultipleValueControl | SelectSingleValueControl;
+export type SelectValueControl = SelectMultipleValueControl | SelectSingleValueControl;
 export declare const useSelectValueControl: (props: UseSelectValueControl) => SelectMultipleValueControl | SelectSingleValueControl;

package/Menu/MenuDivider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type MenuDividerProps = NativeElementPropsWithoutKeyAndRef<'hr'>;
+export type MenuDividerProps = NativeElementPropsWithoutKeyAndRef<'hr'>;
 /**
  * The react component for `mezzanine` menu divider.
  */

package/Message/Message.d.ts

@@ -25,7 +25,7 @@ export interface MessageData extends Omit<NotifierData, 'onClose'>, MessageConfi
      */
     severity?: MessageSeverity;
 }
-export declare type MessageType = FC<MessageData> & Notifier<MessageData, MessageConfigProps> & (Record<string, (message: MessageData['children'], props?: Omit<MessageData, 'children' | 'severity' | 'icon'>) => Key>);
+export type MessageType = FC<MessageData> & Notifier<MessageData, MessageConfigProps> & (Record<string, (message: MessageData['children'], props?: Omit<MessageData, 'children' | 'severity' | 'icon'>) => Key>);
 /**
  * The react component for `mezzanine` message.
  *

package/Modal/ModalBody.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type ModalBodyProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+export type ModalBodyProps = NativeElementPropsWithoutKeyAndRef<'div'>;
 /**
  * The react component for `mezzanine` modal body.
  */

package/Modal/ModalFooter.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type ModalFooterProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+export type ModalFooterProps = NativeElementPropsWithoutKeyAndRef<'div'>;
 /**
  * The react component for `mezzanine` modal footer.
  */

package/Navigation/Navigation.d.ts

@@ -3,8 +3,8 @@ import { NavigationOrientation } from '@mezzanine-ui/core/navigation';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { NavigationItemProps } from './NavigationItem';
 import { NavigationSubMenuProps } from './NavigationSubMenu';
-export declare type NavigationChild = ReactElement<NavigationItemProps | NavigationSubMenuProps> | null;
-export declare type NavigationChildren = NavigationChild | NavigationChild[];
+export type NavigationChild = ReactElement<NavigationItemProps | NavigationSubMenuProps> | null;
+export type NavigationChildren = NavigationChild | NavigationChild[];
 export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'onClick'> {
     /**
      * Current active key.

package/Navigation/NavigationSubMenu.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { NavigationItemProps } from './NavigationItem';
-export declare type NavigationSubMenuChild = ReactElement<NavigationItemProps>;
-export declare type NavigationSubMenuChildren = NavigationSubMenuChild | NavigationSubMenuChild[];
+export type NavigationSubMenuChild = ReactElement<NavigationItemProps>;
+export type NavigationSubMenuChildren = NavigationSubMenuChild | NavigationSubMenuChild[];
 export interface NavigationSubMenuProps extends Omit<NavigationItemProps, 'onClick' | 'eventKey' | 'key'> {
     /**
      * Strict children with `NavigationItem`.
@@ -12,6 +12,11 @@ export interface NavigationSubMenuProps extends Omit<NavigationItemProps, 'onCli
      * Set display title for sub-menu item.
      */
     title?: string;
+    /**
+     * Open menu as default
+     * @default false
+     */
+    defaultOpen?: boolean;
 }
 declare const NavigationSubMenu: import("react").ForwardRefExoticComponent<NavigationSubMenuProps & import("react").RefAttributes<HTMLLIElement>>;
 export default NavigationSubMenu;

package/Navigation/NavigationSubMenu.js

@@ -37,8 +37,8 @@ const popperOptions = {
     ],
 };
 const NavigationSubMenu = forwardRef((props, ref) => {
-    const { className, children = [], active, icon, title, ...rest } = props;
-    const [open, setOpen] = useState(false);
+    const { active, className, children = [], defaultOpen = false, icon, title, ...rest } = props;
+    const [open, setOpen] = useState(defaultOpen);
     const nodeRef = useRef(null);
     const composedNodeRef = useComposeRefs([ref, nodeRef]);
     const { orientation, } = useContext(NavigationContext);

package/Notifier/typings.d.ts

@@ -16,7 +16,7 @@ export interface NotifierData extends Pick<NotifierConfig, 'duration'> {
      */
     onClose?: (key: Key) => void;
 }
-export declare type RenderNotifier<N extends NotifierData> = (notifier: N) => ReactNode;
+export type RenderNotifier<N extends NotifierData> = (notifier: N) => ReactNode;
 export interface Notifier<N extends NotifierData, C extends NotifierConfig = NotifierConfig> {
     add: (notifier: N & {
         key?: Key;

package/Pagination/Pagination.d.ts

@@ -1,5 +1,6 @@
 import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
 import { PaginationItemProps } from './PaginationItem';
+import { PaginationPageSizeProps } from './PaginationPageSize';
 export interface PaginationProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, 'onChange'> {
     /**
      * Number of always visible pages at the beginning and end.
@@ -51,15 +52,41 @@ export interface PaginationProps extends Omit<DetailedHTMLProps<HTMLAttributes<H
      * @param {number} page The page active.
      */
     onChange?: (page: number) => void;
+    /**
+     * Callback fired when the page size is changed
+     *
+     * @param {number} pageSize
+     */
+    onChangePageSize?: PaginationPageSizeProps['onChange'];
     /**
      * Number of data per page
-     * @default 5
+     * @default 10
+     */
+    pageSize?: PaginationPageSizeProps['value'];
+    /**
+     * Label display before page size selector
+     */
+    pageSizeLabel?: PaginationPageSizeProps['label'];
+    /**
+     * Page size options to render
      */
-    pageSize?: number;
+    pageSizeOptions?: PaginationPageSizeProps['options'];
+    /**
+     * Page size unit after `select`
+     */
+    pageSizeUnit?: PaginationPageSizeProps['unit'];
+    /**
+     * Render custom page size option name
+     */
+    renderPageSizeOptionName?: PaginationPageSizeProps['renderOptionName'];
     /**
      * Show jumper or not.
      */
     showJumper?: boolean;
+    /**
+     * Ship page size or not
+     */
+    showPageSizeOptions?: boolean;
     /**
      * Number of always visible pages before and after the current page.
      * @default 1
@@ -74,5 +101,5 @@ export interface PaginationProps extends Omit<DetailedHTMLProps<HTMLAttributes<H
 /**
  * The react component for `mezzanine` pagination.
  */
-declare const Pagination: import("react").ForwardRefExoticComponent<Pick<PaginationProps, "onChange" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "boundaryCount" | "buttonText" | "current" | "disabled" | "hideNextButton" | "hidePreviousButton" | "hintText" | "inputPlaceholder" | "itemRender" | "pageSize" | "showJumper" | "siblingCount" | "total"> & import("react").RefAttributes<HTMLElement>>;
+declare const Pagination: import("react").ForwardRefExoticComponent<Pick<PaginationProps, "onChange" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "boundaryCount" | "buttonText" | "current" | "disabled" | "hideNextButton" | "hidePreviousButton" | "hintText" | "inputPlaceholder" | "itemRender" | "onChangePageSize" | "pageSize" | "pageSizeLabel" | "pageSizeOptions" | "pageSizeUnit" | "renderPageSizeOptionName" | "showJumper" | "showPageSizeOptions" | "siblingCount" | "total"> & import("react").RefAttributes<HTMLElement>>;
 export default Pagination;

package/Pagination/Pagination.js

@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
 import { paginationClasses } from '@mezzanine-ui/core/pagination';
 import PaginationItem from './PaginationItem.js';
 import PaginationJumper from './PaginationJumper.js';
+import PaginationPageSize from './PaginationPageSize.js';
 import { usePagination } from './usePagination.js';
 import cx from 'clsx';
 
@@ -10,7 +11,7 @@ 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, pageSize = 5, showJumper = false, siblingCount = 1, total = 0, ...rest } = props;
+    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 { items } = usePagination({
         boundaryCount,
         current,
@@ -22,7 +23,7 @@ const Pagination = forwardRef((props, ref) => {
         siblingCount,
         total,
     });
-    return (jsx("nav", { ...rest, ref: ref, "aria-label": "pagination navigation", className: cx(paginationClasses.host, className), children: jsxs("ul", { className: paginationClasses.container, 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 }) }))] }) }));
+    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 }) }))] }) }));
 });
 var Pagination$1 = Pagination;
 

package/Pagination/PaginationItem.d.ts

@@ -1,6 +1,6 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { PaginationItemType } from '@mezzanine-ui/core/pagination';
-export declare type PaginationItemElement = HTMLButtonElement | HTMLDivElement;
+export type PaginationItemElement = HTMLButtonElement | HTMLDivElement;
 export interface PaginationItemProps extends Omit<DetailedHTMLProps<HTMLAttributes<PaginationItemElement>, PaginationItemElement>, 'ref'> {
     /**
      * If `true`, the pagination item is active.

package/Pagination/PaginationJumper.d.ts

@@ -34,5 +34,5 @@ export interface PaginationJumperProps extends Omit<DetailedHTMLProps<HTMLAttrib
      */
     total?: number;
 }
-declare const PaginationJumper: import("react").ForwardRefExoticComponent<Pick<PaginationJumperProps, "onChange" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "buttonText" | "disabled" | "hintText" | "inputPlaceholder" | "pageSize" | "total"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const PaginationJumper: import("react").ForwardRefExoticComponent<Pick<PaginationJumperProps, "onChange" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "buttonText" | "disabled" | "hintText" | "inputPlaceholder" | "pageSize" | "total"> & import("react").RefAttributes<HTMLDivElement>>;
 export default PaginationJumper;

package/Pagination/PaginationPageSize.d.ts

@@ -0,0 +1,38 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+export interface PaginationPageSizeProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
+    /**
+     * If `true`, the pagination page size fields is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label display before `select`
+     */
+    label?: string;
+    /**
+     * Callback fired when the page size is changed.
+     *
+     * @param {number} pageSize The page active.
+     */
+    onChange?: (pageSize: number) => void;
+    /**
+     * options for `select` to use
+     * @default [10, 20, 50, 100]
+     */
+    options?: number[];
+    /**
+     * Callback to custom render option name
+     * @default (p) => `${p}`
+     */
+    renderOptionName?: (pageSize: number) => string;
+    /**
+     * unit display after `select`
+     */
+    unit?: string;
+    /**
+     * Current page size value
+     */
+    value?: number;
+}
+declare const PaginationPageSize: import("react").ForwardRefExoticComponent<Pick<PaginationPageSizeProps, "onChange" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "label" | "options" | "renderOptionName" | "unit" | "value"> & import("react").RefAttributes<HTMLDivElement>>;
+export default PaginationPageSize;

package/Pagination/PaginationPageSize.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { paginationPageSizeClasses } from '@mezzanine-ui/core/pagination';
+import Typography from '../Typography/Typography.js';
+import Select from '../Select/Select.js';
+import Option from '../Select/Option.js';
+import cx from 'clsx';
+
+const PaginationPageSize = forwardRef((props, ref) => {
+    const { className, disabled = false, label, onChange, options = [10, 20, 50, 100], renderOptionName = (p) => `${p}`, unit, value, ...rest } = props;
+    const currentValue = useMemo(() => (value ? ({
+        id: `${value}`,
+        name: renderOptionName(value),
+    }) : undefined), [value, renderOptionName]);
+    return (jsxs("div", { ...rest, ref: ref, className: cx(paginationPageSizeClasses.host, className), children: [label ? (jsx(Typography, { color: "text-secondary", component: "div", ellipsis: true, variant: "button3", children: label })) : null, jsx(Select, { disabled: disabled, value: currentValue, onChange: (nextSelection) => onChange === null || onChange === void 0 ? void 0 : onChange(Number(nextSelection.id)), className: paginationPageSizeClasses.select, children: options.map((opt) => (jsx(Option, { value: `${opt}`, children: renderOptionName(opt) }, opt))) }), unit ? (jsx(Typography, { color: "text-secondary", component: "div", ellipsis: true, variant: "button3", children: unit })) : null] }));
+});
+var PaginationPageSize$1 = PaginationPageSize;
+
+export { PaginationPageSize$1 as default };

package/Pagination/index.d.ts

@@ -2,4 +2,5 @@ export type { PaginationItemType, } from '@mezzanine-ui/core/pagination';
 export { PaginationProps, default } from './Pagination';
 export { PaginationItemProps, default as PaginationItem } from './PaginationItem';
 export { PaginationJumperProps, default as PaginationJumper } from './PaginationJumper';
+export { PaginationPageSizeProps, default as PaginationPageSize } from './PaginationPageSize';
 export { usePagination } from './usePagination';

package/Pagination/index.js

@@ -1,4 +1,5 @@
 export { default } from './Pagination.js';
 export { default as PaginationItem } from './PaginationItem.js';
 export { default as PaginationJumper } from './PaginationJumper.js';
+export { default as PaginationPageSize } from './PaginationPageSize.js';
 export { usePagination } from './usePagination.js';

package/Pagination/usePagination.js

@@ -5,7 +5,7 @@ const range = (start, end) => {
     return Array.from({ length }, (_, i) => start + i);
 };
 function usePagination(props = {}) {
-    const { boundaryCount = 1, current = 1, disabled = false, hideNextButton = false, hidePreviousButton = false, pageSize = 5, onChange: handleChange, siblingCount = 1, total = 0, } = props;
+    const { boundaryCount = 1, current = 1, disabled = false, hideNextButton = false, hidePreviousButton = false, pageSize = 10, onChange: handleChange, siblingCount = 1, total = 0, } = props;
     const totalPages = (total ? Math.ceil(total / pageSize) : 1);
     const itemList = useMemo(() => {
         const startPages = range(1, Math.min(boundaryCount, totalPages));

package/Picker/usePickerValue.d.ts

@@ -1,6 +1,6 @@
 import { DateType } from '@mezzanine-ui/core/calendar';
 import { FocusEventHandler, KeyboardEventHandler, RefObject } from 'react';
-export declare type UsePickerValueProps = {
+export type UsePickerValueProps = {
     defaultValue?: DateType;
     format: string;
     formats: string[];

package/Popper/Popper.d.ts

@@ -5,10 +5,10 @@ import { ElementGetter } from '../utils/getElement';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { PortalProps } from '../Portal';
 export type { Placement as PopperPlacement, PositioningStrategy as PopperPositionStrategy, } from '@popperjs/core';
-export declare type PopperOptions<Modifiers> = Omit<Partial<_PopperOptions>, 'modifiers'> & {
+export type PopperOptions<Modifiers> = Omit<Partial<_PopperOptions>, 'modifiers'> & {
     modifiers?: ReadonlyArray<Modifier<Modifiers>>;
 };
-export declare type PopperController = ReturnType<typeof usePopper>;
+export type PopperController = ReturnType<typeof usePopper>;
 export interface PopperProps extends Pick<PortalProps, 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * The ref of trigger Element.