@mezzanine-ui/react 0.6.4

package/Pagination/Pagination.d.ts

@@ -0,0 +1,78 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import { PaginationItemProps } from './PaginationItem';
+export interface PaginationProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, 'onChange'> {
+    /**
+     * Number of always visible pages at the beginning and end.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * The text displayed in the jumper `button` content.
+     */
+    buttonText?: string;
+    /**
+     * The current page number.
+     * @default 1
+     */
+    current?: number;
+    /**
+     * Whether the fields is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, hide the next-page button.
+     * @default false
+     */
+    hideNextButton?: boolean;
+    /**
+     * If `true`, hide the previous-page button.
+     * @default false
+     */
+    hidePreviousButton?: boolean;
+    /**
+     * The hint text displayed in front of jumper `input`.
+     */
+    hintText?: string;
+    /**
+    * The hint 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.
+     * @returns {ReactNode}
+     * @default (item) => <PaginationItem {...item} />
+     */
+    itemRender?: (item: PaginationItemProps) => ReactNode;
+    /**
+     * Callback fired when the page is changed.
+     *
+     * @param {number} page The page active.
+     */
+    onChange?: (page: number) => void;
+    /**
+     * Number of data per page
+     * @default 5
+     */
+    pageSize?: number;
+    /**
+     * Show jumper or not.
+     */
+    showJumper?: boolean;
+    /**
+     * Number of always visible pages before and after the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Items total count.
+     * @default 0
+     */
+    total?: number;
+}
+/**
+ * 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>>;
+export default Pagination;

package/Pagination/Pagination.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { paginationClasses } from '@mezzanine-ui/core/pagination';
+import PaginationItem from './PaginationItem.js';
+import PaginationJumper from './PaginationJumper.js';
+import { usePagination } from './usePagination.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, Object.assign({}, item), void 0), onChange, pageSize = 5, showJumper = false, siblingCount = 1, total = 0, ...rest } = props;
+    const { items } = usePagination({
+        boundaryCount,
+        current,
+        disabled,
+        hideNextButton,
+        hidePreviousButton,
+        onChange,
+        pageSize,
+        siblingCount,
+        total,
+    });
+    return (jsx("nav", Object.assign({}, rest, { ref: ref, "aria-label": "pagination navigation", className: cx(paginationClasses.host, className) }, { children: jsxs("ul", Object.assign({ className: paginationClasses.container }, { children: [items.map((item, index) => (jsx("li", Object.assign({ className: paginationClasses.item }, { children: itemRender(item) }), index))),
+                showJumper && (jsx("li", Object.assign({ className: paginationClasses.jumper }, { children: jsx(PaginationJumper, { buttonText: buttonText, disabled: disabled, hintText: hintText, inputPlaceholder: inputPlaceholder, onChange: onChange, pageSize: pageSize, total: total }, void 0) }), void 0))] }), void 0) }), void 0));
+});
+
+export default Pagination;

package/Pagination/PaginationItem.d.ts

@@ -0,0 +1,27 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { PaginationItemType } from '@mezzanine-ui/core/pagination';
+export declare type PaginationItemElement = HTMLButtonElement | HTMLDivElement;
+export interface PaginationItemProps extends Omit<DetailedHTMLProps<HTMLAttributes<PaginationItemElement>, PaginationItemElement>, 'ref'> {
+    /**
+     * If `true`, the pagination item is active.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * If `true`, the pagination item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The page number.
+     * @default 1
+     */
+    page?: number;
+    /**
+     * Whether the field type.
+     * @default 'page'
+     */
+    type?: PaginationItemType;
+}
+declare const PaginationItem: import("react").ForwardRefExoticComponent<PaginationItemProps & import("react").RefAttributes<PaginationItemElement>>;
+export default PaginationItem;

package/Pagination/PaginationItem.js

@@ -0,0 +1,25 @@
+import { forwardRef, createElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { paginationItemClasses } from '@mezzanine-ui/core/pagination';
+import { ChevronRightIcon, ChevronLeftIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const PaginationItem = forwardRef((props, ref) => {
+    const { active = false, className, disabled = false, page = 1, type = 'page', ...rest } = props;
+    const icons = {
+        next: ChevronRightIcon,
+        previous: ChevronLeftIcon,
+    };
+    const ButtonIcon = icons[type];
+    return type === 'ellipsis' ? (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(paginationItemClasses.host, paginationItemClasses.ellipsis, {
+            [paginationItemClasses.disabled]: disabled,
+        }, className) }, { children: "..." }), void 0)) : (createElement("button", Object.assign({}, 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 }, void 0),
+        type === 'page' && page));
+});
+
+export default PaginationItem;

package/Pagination/PaginationJumper.d.ts

@@ -0,0 +1,38 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+export interface PaginationJumperProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
+    /**
+     * The text displayed in the `button` content.
+     */
+    buttonText?: string;
+    /**
+     * If `true`, the pagination jumper fields is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The hint text displayed in front of `input`.
+     */
+    hintText?: string;
+    /**
+     * The hint displayed in the `input` before the user enters a value.
+     */
+    inputPlaceholder?: string;
+    /**
+     * Callback fired when the page is changed.
+     *
+     * @param {number} page The page active.
+     */
+    onChange?: (page: number) => void;
+    /**
+     * Number of data per page
+     * @default 5
+     */
+    pageSize?: number;
+    /**
+     * Items total count.
+     * @default 0
+     */
+    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>>;
+export default PaginationJumper;

package/Pagination/PaginationJumper.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { paginationJumperClasses } from '@mezzanine-ui/core/pagination';
+import Typography from '../Typography/Typography.js';
+import Button from '../Button/Button.js';
+import Input from '../Input/Input.js';
+import cx from 'clsx';
+
+const PaginationJumper = forwardRef((props, ref) => {
+    const { buttonText, className, disabled = false, hintText, inputPlaceholder, onChange: handleChange, pageSize = 5, total = 0, ...rest } = props;
+    const [value, setValue] = useState('');
+    const [error, setError] = useState(false);
+    const totalPages = (total ? Math.ceil(total / pageSize) : 1);
+    const valueValidator = () => {
+        const stringToNumber = +value;
+        const validNumber = !!stringToNumber;
+        if (validNumber) {
+            return !(stringToNumber > totalPages || stringToNumber < 1);
+        }
+        return false;
+    };
+    const handleClick = () => {
+        const valid = valueValidator();
+        if (valid) {
+            setError(false);
+            if (handleChange) {
+                handleChange(+value);
+                setValue('');
+            }
+        }
+        else {
+            setError(true);
+            setValue('');
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleClick();
+        }
+    };
+    return (jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(paginationJumperClasses.host, className) }, { children: [jsx(Typography, Object.assign({ color: disabled ? 'text-disabled' : 'text-primary', component: "div", ellipsis: true, variant: "input2" }, { children: hintText }), void 0),
+            jsx(Input, { disabled: disabled, error: error, onChange: (e) => {
+                    setValue(e.target.value);
+                }, placeholder: inputPlaceholder, inputProps: {
+                    type: 'number',
+                    className: paginationJumperClasses.input,
+                    onKeyDown: handleKeyDown,
+                }, value: value }, void 0),
+            jsx(Button, Object.assign({ disabled: disabled, onClick: handleClick }, { children: buttonText }), void 0)] }), void 0));
+});
+
+export default PaginationJumper;

package/Pagination/index.d.ts

@@ -0,0 +1,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 { usePagination } from './usePagination';

package/Pagination/index.js

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

package/Pagination/usePagination.d.ts

@@ -0,0 +1,16 @@
+import { PaginationItemProps } from './PaginationItem';
+export interface UsePaginationParams {
+    boundaryCount?: number;
+    current?: number;
+    disabled?: boolean;
+    hideNextButton?: boolean;
+    hidePreviousButton?: boolean;
+    pageSize?: number;
+    onChange?: (page: number) => void;
+    siblingCount?: number;
+    total?: number;
+}
+export declare const range: (start: number, end: number) => number[];
+export declare function usePagination(props?: UsePaginationParams): {
+    items: PaginationItemProps[];
+};

package/Pagination/usePagination.js

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+
+const range = (start, end) => {
+    const length = end - start + 1;
+    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 totalPages = (total ? Math.ceil(total / pageSize) : 1);
+    const itemList = useMemo(() => {
+        const startPages = range(1, Math.min(boundaryCount, totalPages));
+        const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+        const siblingsStart = Math.max(Math.min(current - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+        const siblingsEnd = Math.min(Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+        return [
+            ...(hidePreviousButton ? [] : ['previous']),
+            ...startPages,
+            // eslint-disable-next-line no-nested-ternary
+            ...(siblingsStart > boundaryCount + 2
+                ? ['ellipsis']
+                : boundaryCount + 1 < totalPages - boundaryCount
+                    ? [boundaryCount + 1]
+                    : []),
+            ...range(siblingsStart, siblingsEnd),
+            // eslint-disable-next-line no-nested-ternary
+            ...(siblingsEnd < totalPages - boundaryCount - 1
+                ? ['ellipsis']
+                : totalPages - boundaryCount > boundaryCount
+                    ? [totalPages - boundaryCount]
+                    : []),
+            ...endPages,
+            ...(hideNextButton ? [] : ['next']),
+        ];
+    }, [boundaryCount, current, hideNextButton, hidePreviousButton, siblingCount, totalPages]);
+    const handleClick = (page) => {
+        if (handleChange) {
+            handleChange(page);
+        }
+    };
+    const items = useMemo(() => itemList.map((item) => {
+        if (typeof item === 'number') {
+            return {
+                active: item === current,
+                'aria-current': item === current ? true : undefined,
+                'aria-disabled': disabled ? true : undefined,
+                'aria-label': `Go to ${item} page`,
+                disabled,
+                onClick: () => { handleClick(item); },
+                page: item,
+                type: 'page',
+            };
+        }
+        const restItemProps = {
+            previous: {
+                'aria-label': 'Go to previous Page',
+                disabled: disabled || (current - 1 < 1),
+                onClick: () => { handleClick(current - 1); },
+                type: item,
+            },
+            next: {
+                'aria-label': 'Go to next Page',
+                disabled: disabled || (current + 1 > totalPages),
+                onClick: () => { handleClick(current + 1); },
+                type: item,
+            },
+            ellipsis: {
+                disabled,
+                type: item,
+            },
+        };
+        return restItemProps[item] || { type: item };
+    }), [current, disabled, itemList, totalPages]);
+    return {
+        items,
+    };
+}
+
+export { range, usePagination };

package/Picker/PickerTrigger.d.ts

@@ -0,0 +1,40 @@
+import { ChangeEventHandler, RefObject } from 'react';
+import { TextFieldProps } from '../TextField';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defualtChecked'> {
+    /**
+     * React ref for the input element.
+     */
+    inputRef?: RefObject<HTMLInputElement>;
+    /**
+     * Change handler for the input element.
+     */
+    onChange?: ChangeEventHandler;
+    /**
+     * Placeholder for the input element.
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+      * Whether the input is required.
+      * @default false
+      */
+    required?: boolean;
+    /**
+     * The value of the input element.
+     */
+    value?: string;
+    /**
+     * Other input props you may provide to input element.
+     */
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
+}
+/**
+ * The react component for `mezzanine` picker trigger.
+ */
+declare const PickerTrigger: import("react").ForwardRefExoticComponent<PickerTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default PickerTrigger;

package/Picker/PickerTrigger.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { pickerClasses } from '@mezzanine-ui/core/picker';
+import { forwardRef } from 'react';
+import TextField from '../TextField/TextField.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` picker trigger.
+ */
+const PickerTrigger = forwardRef(function PickerTrigger(props, ref) {
+    const { className, disabled, inputProps, inputRef, onChange, placeholder, readOnly, required, value, ...restTextFieldProps } = props;
+    return (jsx(TextField, Object.assign({}, restTextFieldProps, { ref: ref, active: !!value, className: cx(pickerClasses.host, className), disabled: disabled }, { children: jsx("input", Object.assign({}, inputProps, { ref: inputRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, value: value }), void 0) }), void 0));
+});
+
+export default PickerTrigger;

package/Picker/RangePickerTrigger.d.ts

@@ -0,0 +1,64 @@
+import { ChangeEventHandler, MouseEventHandler, RefObject } from 'react';
+import { TextFieldProps } from '../TextField';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface RangePickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defualtChecked' | 'placeholder'> {
+    /**
+     * Placeholder for the 'from' input element.
+     */
+    inputFromPlaceholder?: string;
+    /**
+     * React Ref for the 'from' input element.
+     */
+    inputFromRef?: RefObject<HTMLInputElement>;
+    /**
+     * Value of the 'from' input element.
+     */
+    inputFromValue?: string;
+    /**
+     * Placeholder for the 'to' input element.
+     */
+    inputToPlaceholder?: string;
+    /**
+     * React Ref for the 'to' input element.
+     */
+    inputToRef?: RefObject<HTMLInputElement>;
+    /**
+     * Value of the 'to' input element.
+     */
+    inputToValue?: string;
+    /**
+     * Click Handler for the calendar icon.
+     */
+    onIconClick?: MouseEventHandler;
+    /**
+     * Change handler for the 'from' input element.
+     */
+    onInputFromChange?: ChangeEventHandler;
+    /**
+     * Change handler for the 'to' input element.
+     */
+    onInputToChange?: ChangeEventHandler;
+    /**
+     * Whether the inputs are readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the inputs are required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Other input props you may provide to the 'from' input element.
+     */
+    inputFromProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
+    /**
+     * Other input props you may provide to the 'to' input element.
+     */
+    inputToProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
+}
+/**
+ * The react component for `mezzanine` date range picker trigger.
+ */
+declare const RangePickerTrigger: import("react").ForwardRefExoticComponent<RangePickerTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default RangePickerTrigger;

package/Picker/RangePickerTrigger.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowRightIcon } from '@mezzanine-ui/icons';
+import { pickerClasses } from '@mezzanine-ui/core/picker';
+import { forwardRef } from 'react';
+import TextField from '../TextField/TextField.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` date range picker trigger.
+ */
+const RangePickerTrigger = forwardRef(function DateRangePickerTrigger(props, ref) {
+    const { className, disabled, inputFromPlaceholder, inputFromProps, inputFromRef, inputFromValue, inputToPlaceholder, inputToProps, inputToRef, inputToValue, onIconClick, onInputFromChange, onInputToChange, readOnly, required, ...restTextFieldProps } = props;
+    return (jsxs(TextField, Object.assign({}, restTextFieldProps, { ref: ref, active: !!inputFromValue || !!inputToValue, className: cx(pickerClasses.host, className), disabled: disabled }, { children: [jsx("input", Object.assign({}, inputFromProps, { ref: inputFromRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputFromChange, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, value: inputFromValue }), void 0),
+            jsx(Icon, { icon: ArrowRightIcon, className: pickerClasses.arrowIcon }, void 0),
+            jsx("input", Object.assign({}, inputToProps, { ref: inputToRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputToChange, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, value: inputToValue }), void 0)] }), void 0));
+});
+
+export default RangePickerTrigger;

package/Picker/index.d.ts

@@ -0,0 +1,7 @@
+export { useTabKeyClose, } from './useTabKeyClose';
+export { UsePickerDocumentEventCloseProps, usePickerDocumentEventClose, } from './usePickerDocumentEventClose';
+export { UsePickerInputValueProps, usePickerInputValue, } from './usePickerInputValue';
+export { UsePickerValueProps, usePickerValue, } from './usePickerValue';
+export { UseRangePickerValueProps, useRangePickerValue, } from './useRangePickerValue';
+export { PickerTriggerProps, default as PickerTrigger, } from './PickerTrigger';
+export { RangePickerTriggerProps, default as RangePickerTrigger, } from './RangePickerTrigger';

package/Picker/index.js

@@ -0,0 +1,7 @@
+export { useTabKeyClose } from './useTabKeyClose.js';
+export { usePickerDocumentEventClose } from './usePickerDocumentEventClose.js';
+export { usePickerInputValue } from './usePickerInputValue.js';
+export { usePickerValue } from './usePickerValue.js';
+export { useRangePickerValue } from './useRangePickerValue.js';
+export { default as PickerTrigger } from './PickerTrigger.js';
+export { default as RangePickerTrigger } from './RangePickerTrigger.js';

package/Picker/usePickerDocumentEventClose.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+export interface UsePickerDocumentEventCloseProps {
+    anchorRef: RefObject<HTMLElement>;
+    lastElementRefInFlow: RefObject<HTMLElement>;
+    onClose: VoidFunction;
+    onChangeClose: VoidFunction;
+    open?: boolean;
+    popperRef: RefObject<HTMLElement>;
+}
+export declare function usePickerDocumentEventClose({ anchorRef, lastElementRefInFlow, onClose, onChangeClose, open, popperRef, }: UsePickerDocumentEventCloseProps): void;

package/Picker/usePickerDocumentEventClose.js

@@ -0,0 +1,27 @@
+import { useClickAway } from '../hooks/useClickAway.js';
+import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
+import { useTabKeyClose } from './useTabKeyClose.js';
+
+function usePickerDocumentEventClose({ anchorRef, lastElementRefInFlow, onClose, onChangeClose, open, popperRef, }) {
+    useClickAway(() => {
+        if (!open) {
+            return;
+        }
+        return (event) => {
+            var _a;
+            if (!((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                onChangeClose();
+            }
+        };
+    }, anchorRef, [open, onClose]);
+    /** Close popper when escape key down */
+    useDocumentEscapeKeyDown(() => () => {
+        if (open) {
+            onClose();
+        }
+    }, [open, onClose]);
+    /** Close popper when tab key down */
+    useTabKeyClose(onChangeClose, lastElementRefInFlow, [onChangeClose]);
+}
+
+export { usePickerDocumentEventClose };

package/Picker/usePickerInputValue.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface UsePickerInputValueProps {
+    defaultValue?: string;
+    initialValue?: string;
+    onChange?: (val: string) => void;
+}
+export declare function usePickerInputValue(props?: UsePickerInputValueProps): {
+    inputValue: string;
+    inputChangeHandler: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onChange: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
+export default usePickerInputValue;

package/Picker/usePickerInputValue.js

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+function usePickerInputValue(props) {
+    const { defaultValue = '', initialValue = '', onChange: onChangeProp, } = props || {};
+    const [value, setValue] = useState(initialValue || defaultValue);
+    const onChange = (val) => {
+        setValue(val);
+        if (onChangeProp) {
+            onChangeProp(val);
+        }
+    };
+    const onInputChange = (event) => {
+        const val = event.target.value;
+        onChange(val);
+    };
+    return {
+        inputValue: value,
+        inputChangeHandler: onInputChange,
+        onChange: setValue,
+    };
+}
+
+export default usePickerInputValue;
+export { usePickerInputValue };