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

package/Pagination/PaginationJumper.d.ts

@@ -5,31 +5,29 @@ export interface PaginationJumperProps extends Omit<DetailedHTMLProps<HTMLAttrib
      */
     buttonText?: string;
     /**
-     * If `true`, the pagination jumper fields is disabled.
-     * @default false
+     * If `true`, the pagination jumper fields are disabled.
      */
-    disabled?: boolean;
+    disabled?: true;
     /**
-     * The hint text displayed in front of `input`.
+     * The hint text displayed in front of input.
      */
     hintText?: string;
     /**
-     * The hint displayed in the `input` before the user enters a value.
+     * The placeholder 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.
+     * @param {number} page The active page number.
      */
     onChange?: (page: number) => void;
     /**
-     * Number of data per page
+     * Number of items per page.
      * @default 5
      */
     pageSize?: number;
     /**
-     * Items total count.
+     * Total number of items.
      * @default 0
      */
     total?: number;

package/Pagination/PaginationJumper.js

@@ -7,7 +7,7 @@ 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 { buttonText, className, disabled, 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;
@@ -38,13 +38,11 @@ const PaginationJumper = forwardRef((props, ref) => {
             handleClick();
         }
     };
-    return (jsxs("div", { ...rest, ref: ref, className: cx(paginationJumperClasses.host, className), children: [jsx(Typography, { color: disabled ? 'text-disabled' : 'text-primary', component: "div", ellipsis: true, variant: "input2", children: hintText }), jsx(Input, { disabled: disabled, error: error, onChange: (e) => {
+    return (jsxs("div", { ...rest, ref: ref, className: cx(paginationJumperClasses.host, className), children: [jsx(Typography, { component: "div", ellipsis: true, variant: "label-primary", children: hintText }), jsx(Input, { size: "sub", disabled: disabled, error: error, variant: "number", className: paginationJumperClasses.input, onChange: (e) => {
                     setValue(e.target.value);
                 }, placeholder: inputPlaceholder, inputProps: {
-                    type: 'number',
-                    className: paginationJumperClasses.input,
                     onKeyDown: handleKeyDown,
-                }, value: value }), jsx(Button, { disabled: disabled, onClick: handleClick, children: buttonText })] }));
+                }, value: value }), jsx(Button, { size: "sub", disabled: disabled, onClick: handleClick, children: buttonText })] }));
 });
 
 export { PaginationJumper as default };

package/Pagination/PaginationPageSize.d.ts

@@ -1,36 +1,33 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
 export interface PaginationPageSizeProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     /**
-     * If `true`, the pagination page size fields is disabled.
+     * If `true`, the pagination page size fields are disabled.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Label display before `select`
+     * Label displayed before select.
      */
     label?: string;
     /**
      * Callback fired when the page size is changed.
-     *
-     * @param {number} pageSize The page active.
+     * @param {number} pageSize The new page size.
      */
     onChange?: (pageSize: number) => void;
     /**
-     * options for `select` to use
+     * Options for select component.
      * @default [10, 20, 50, 100]
      */
     options?: number[];
     /**
-     * Callback to custom render option name
+     * Callback to render custom option name.
+     * @param {number} pageSize The page size value.
+     * @returns {string}
      * @default (p) => `${p}`
      */
     renderOptionName?: (pageSize: number) => string;
     /**
-     * unit display after `select`
-     */
-    unit?: string;
-    /**
-     * Current page size value
+     * Current page size value.
      */
     value?: number;
 }

package/Pagination/PaginationPageSize.js

@@ -2,19 +2,20 @@ 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 SelectTrigger from '../Select/SelectTrigger.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 { className, disabled = false, label, 
+    /* TODO: waiting Select onChange, Dropdown Menu options */
+    onChange, options = [10, 20, 50, 100], renderOptionName = (p) => `${p}`, 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] }));
+    return (jsxs("div", { ...rest, ref: ref, className: cx(paginationPageSizeClasses.host, className), children: [label ? (jsx(Typography, { component: "div", ellipsis: true, variant: "label-primary", children: label })) : null, jsx(SelectTrigger, { className: paginationPageSizeClasses.select, disabled: disabled, size: "sub", value: currentValue })] }));
 });
 
 export { PaginationPageSize as default };

package/Pagination/index.d.ts

@@ -1,6 +1,10 @@
 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 type { PaginationProps } from './Pagination';
+export { default } from './Pagination';
+export { default as PaginationItem } from './PaginationItem';
+export type { PaginationItemProps } from './PaginationItem';
+export { default as PaginationJumper } from './PaginationJumper';
+export type { PaginationJumperProps } from './PaginationJumper';
+export { default as PaginationPageSize } from './PaginationPageSize';
+export type { PaginationPageSizeProps } from './PaginationPageSize';
 export { usePagination } from './usePagination';

package/Pagination/usePagination.d.ts

@@ -3,10 +3,12 @@ export interface UsePaginationParams {
     boundaryCount?: number;
     current?: number;
     disabled?: boolean;
+    hideFirstButton?: boolean;
+    hideLastButton?: boolean;
     hideNextButton?: boolean;
     hidePreviousButton?: boolean;
-    pageSize?: number;
     onChange?: (page: number) => void;
+    pageSize?: number;
     siblingCount?: number;
     total?: number;
 }

package/Pagination/usePagination.js

@@ -1,11 +1,11 @@
-import { useMemo } from 'react';
+import { useMemo, useCallback } 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 = 10, onChange: handleChange, siblingCount = 1, total = 0, } = props;
+    const { boundaryCount = 1, current = 1, disabled = false, onChange: handleChange, pageSize = 10, siblingCount = 1, total = 0, } = props;
     const totalPages = total ? Math.ceil(total / pageSize) : 1;
     const itemList = useMemo(() => {
         const startPages = range(1, Math.min(boundaryCount, totalPages));
@@ -13,37 +13,30 @@ function usePagination(props = {}) {
         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']),
+            'first',
+            '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']),
+            'next',
+            'last',
         ];
-    }, [
-        boundaryCount,
-        current,
-        hideNextButton,
-        hidePreviousButton,
-        siblingCount,
-        totalPages,
-    ]);
-    const handleClick = (page) => {
+    }, [boundaryCount, current, siblingCount, totalPages]);
+    const handleClick = useCallback((page) => {
         if (handleChange) {
             handleChange(page);
         }
-    };
+    }, [handleChange]);
     const items = useMemo(() => itemList.map((item) => {
         if (typeof item === 'number') {
             return {
@@ -61,28 +54,44 @@ function usePagination(props = {}) {
         }
         const restItemProps = {
             previous: {
-                'aria-label': 'Go to previous Page',
-                disabled: disabled || current - 1 < 1,
+                'aria-label': 'Go to previous page',
+                disabled: disabled || current === 1,
                 onClick: () => {
                     handleClick(current - 1);
                 },
                 type: item,
             },
             next: {
-                'aria-label': 'Go to next Page',
-                disabled: disabled || current + 1 > totalPages,
+                'aria-label': 'Go to next page',
+                disabled: disabled || current === totalPages,
                 onClick: () => {
                     handleClick(current + 1);
                 },
                 type: item,
             },
+            first: {
+                'aria-label': 'Go to first page',
+                disabled: disabled || current === 1,
+                onClick: () => {
+                    handleClick(1);
+                },
+                type: item,
+            },
+            last: {
+                'aria-label': 'Go to last page',
+                disabled: disabled || current === totalPages,
+                onClick: () => {
+                    handleClick(totalPages);
+                },
+                type: item,
+            },
             ellipsis: {
                 disabled,
                 type: item,
             },
         };
         return restItemProps[item] || { type: item };
-    }), [current, disabled, itemList, totalPages]);
+    }), [current, disabled, itemList, totalPages, handleClick]);
     return {
         items,
     };

package/Picker/FormattedInput.d.ts

@@ -0,0 +1,17 @@
+import { InputHTMLAttributes } from 'react';
+import { type UseDateInputFormatterProps } from './useDateInputFormatter';
+export interface FormattedInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>, Pick<UseDateInputFormatterProps, 'errorMessages' | 'validate' | 'format' | 'onChange'> {
+    /**
+     * Placeholder to show when not focused and value is empty
+     */
+    placeholder?: string;
+    /**
+     * The current value
+     */
+    value?: string;
+}
+/**
+ * Formatted input component with mixed-color placeholder
+ */
+declare const FormattedInput: import("react").ForwardRefExoticComponent<FormattedInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default FormattedInput;

package/Picker/FormattedInput.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { pickerClasses } from '@mezzanine-ui/core/picker';
+import { useDateInputFormatter } from './useDateInputFormatter.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { parseFormatSegments, getTemplateWithoutBrackets, findPreviousMaskSegment, isMaskSegmentFilled } from './formatUtils.js';
+import cx from 'clsx';
+
+/**
+ * Formatted input component with mixed-color placeholder
+ */
+const FormattedInput = forwardRef(function FormattedInput(props, ref) {
+    const { className, disabled, errorMessages = {
+        enabled: true,
+        invalidInput: 'Input value is not valid.',
+        invalidPaste: 'Pasted content is not valid.',
+    }, format, placeholder, validate, value: externalValue, onChange, onFocus, onBlur, ...inputProps } = props;
+    const internalInputRef = useRef(null);
+    const composedRef = useComposeRefs([ref, internalInputRef]);
+    const { value, focused, handleKeyDown, handleFocus, handleBlur, handlePaste, } = useDateInputFormatter({
+        errorMessages,
+        format,
+        value: externalValue,
+        onChange,
+        inputRef: internalInputRef,
+        onFocus,
+        onBlur,
+        validate,
+    });
+    const segments = useRef(parseFormatSegments(format)).current;
+    const renderMixedColorDisplay = () => {
+        const currentValue = value || '';
+        // Show placeholder when no value
+        if (currentValue === getTemplateWithoutBrackets(format) && placeholder) {
+            return null;
+        }
+        // Show format mask when focused or has value
+        const displaySegments = [];
+        for (const segment of segments) {
+            if (segment.type === 'mask') {
+                // Render each character of the mask segment
+                for (let i = segment.start; i < segment.end; i++) {
+                    displaySegments.push({
+                        text: currentValue[i] || segment.text[i - segment.start],
+                        filled: /\d/.test(currentValue[i]),
+                    });
+                }
+            }
+            else {
+                // Separator or literal - show as filled if previous mask segment is filled
+                const prevMask = findPreviousMaskSegment(segments, segment.start);
+                const isFilled = prevMask
+                    ? isMaskSegmentFilled(currentValue, prevMask)
+                    : false;
+                displaySegments.push({
+                    text: segment.text,
+                    filled: isFilled,
+                });
+            }
+        }
+        return (jsx("div", { "aria-hidden": "true", className: pickerClasses.formattedInputDisplay, children: displaySegments.map((segment, index) => (jsx("span", { className: cx(pickerClasses.formattedInputSegment, segment.filled && pickerClasses.formattedInputSegmentFilled, disabled && pickerClasses.formattedInputSegmentDisabled), children: segment.text }, index))) }));
+    };
+    const renderPlaceholder = () => {
+        if (value === getTemplateWithoutBrackets(format)) {
+            if (focused)
+                return getTemplateWithoutBrackets(format);
+            return placeholder;
+        }
+        return undefined;
+    };
+    return (jsxs("div", { className: pickerClasses.formattedInput, children: [jsx("input", { ...inputProps, ref: composedRef, className: cx(pickerClasses.inputMono, pickerClasses.formattedInputHidden, className), disabled: disabled, type: "text", value: value === getTemplateWithoutBrackets(format) ? '' : value, placeholder: renderPlaceholder(), onChange: () => { }, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste }), renderMixedColorDisplay()] }));
+});
+
+export { FormattedInput as default };

package/Picker/MaskFormat.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Format keys that can be used in mask format
+ */
+export declare const FORMAT_KEYS: string[];
+/**
+ * Cell represents a single mask field or separator in the format
+ */
+export interface Cell {
+    /** Text content of this cell */
+    text: string;
+    /** Mask key if this is an editable field (e.g., 'YYYY', 'MM'), undefined for separators */
+    mask?: string;
+    /** Start position in the format string */
+    start: number;
+    /** End position in the format string */
+    end: number;
+}
+/**
+ * Get valid range for a mask field
+ * @param key Mask key (e.g., 'YYYY', 'MM', 'DD')
+ * @returns [min, max] tuple
+ */
+export declare function getMaskRange(key: string): [number, number];
+/**
+ * MaskFormat class parses format string into cells for mask input
+ */
+export default class MaskFormat {
+    /** All cells including separators */
+    cells: Cell[];
+    /** Only editable mask cells (excludes separators) */
+    maskCells: Cell[];
+    constructor(format: string);
+    /**
+     * Check if text matches this format
+     * @param text Input text to validate
+     * @returns true if text structure matches format
+     */
+    match(text: string): boolean;
+}

package/Picker/MaskFormat.js

@@ -0,0 +1,94 @@
+import { parseFormatSegments } from './formatUtils.js';
+
+/**
+ * Get valid range for a mask field
+ * @param key Mask key (e.g., 'YYYY', 'MM', 'DD')
+ * @returns [min, max] tuple
+ */
+function getMaskRange(key) {
+    switch (key) {
+        case 'YYYY':
+        case 'gggg':
+        case 'GGGG':
+            return [1000, 9999];
+        case 'WW':
+        case 'ww':
+            return [1, 53];
+        case 'MM':
+            return [1, 12];
+        case 'DD':
+            return [1, 31];
+        case 'HH':
+            return [0, 23];
+        case 'n':
+            return [1, 2]; // Half-year number: 1 or 2
+        case 'mm':
+        case 'ss':
+            return [0, 59];
+        case 'SSS':
+            return [0, 999];
+        case 'Q':
+            return [1, 4];
+        default:
+            return [0, 99];
+    }
+}
+/**
+ * MaskFormat class parses format string into cells for mask input
+ */
+class MaskFormat {
+    constructor(format) {
+        this.cells = [];
+        this.maskCells = [];
+        const segments = parseFormatSegments(format);
+        for (const segment of segments) {
+            let cell;
+            if (segment.type === 'mask') {
+                cell = {
+                    text: segment.text,
+                    mask: segment.text,
+                    start: segment.start,
+                    end: segment.end,
+                };
+                this.maskCells.push(cell);
+            }
+            else {
+                cell = {
+                    text: segment.text,
+                    start: segment.start,
+                    end: segment.end,
+                };
+            }
+            this.cells.push(cell);
+        }
+    }
+    /**
+     * Check if text matches this format
+     * @param text Input text to validate
+     * @returns true if text structure matches format
+     */
+    match(text) {
+        var _a;
+        if (text.length !== ((_a = this.cells[this.cells.length - 1]) === null || _a === void 0 ? void 0 : _a.end)) {
+            return false;
+        }
+        for (const cell of this.cells) {
+            const cellText = text.slice(cell.start, cell.end);
+            if (cell.mask) {
+                // Editable field should be all digits
+                if (!/^\d+$/.test(cellText)) {
+                    return false;
+                }
+            }
+            else {
+                // Separator should match exactly
+                if (cellText !== cell.text) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+}
+
+export { MaskFormat as default, getMaskRange };

package/Picker/PickerTrigger.d.ts

@@ -1,7 +1,13 @@
-import { ChangeEventHandler, RefObject } from 'react';
+import { ChangeEventHandler, ReactNode, RefObject } from 'react';
 import { TextFieldProps } from '../TextField';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defaultChecked'> {
+import { FormattedInputProps } from './FormattedInput';
+export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'disabled' | 'readonly' | 'typing'>, Pick<FormattedInputProps, 'errorMessages' | 'validate' | 'format'> {
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * React ref for the input element.
      */
@@ -9,7 +15,7 @@ export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
     /**
      * Change handler for the input element.
      */
-    onChange?: ChangeEventHandler;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
     /**
      * Placeholder for the input element.
      */
@@ -24,6 +30,10 @@ export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
      * @default false
      */
     required?: boolean;
+    /**
+     * Custom suffix element. If not provided, defaults to CalendarIcon.
+     */
+    suffix?: ReactNode;
     /**
      * The value of the input element.
      */

package/Picker/PickerTrigger.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { pickerClasses } from '@mezzanine-ui/core/picker';
 import { forwardRef } from 'react';
+import FormattedInput from './FormattedInput.js';
 import TextField from '../TextField/TextField.js';
 import cx from 'clsx';
 
@@ -8,8 +9,22 @@ import cx from 'clsx';
  * The react component for `mezzanine` picker trigger.
  */
 const PickerTrigger = forwardRef(function PickerTrigger(props, ref) {
-    const { className, clearable, disabled, inputProps, inputRef, onChange, placeholder, readOnly, required, value, ...restTextFieldProps } = props;
-    return (jsx(TextField, { ...restTextFieldProps, ref: ref, active: !!value, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, disabled: disabled, children: jsx("input", { ...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 }) }));
+    const { className, clearable = true, disabled, errorMessages, format, inputProps, inputRef, onChange, placeholder, readOnly, required, suffix, validate, value, ...restTextFieldProps } = props;
+    // TextField requires disabled and readonly to be mutually exclusive
+    let defaultTextFieldProps = {};
+    if (disabled) {
+        defaultTextFieldProps = { disabled: true };
+    }
+    else if (readOnly) {
+        defaultTextFieldProps = { readonly: true };
+    }
+    return (jsx(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, suffix: suffix, children: jsx(FormattedInput, { ...inputProps, ref: inputRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessages, format: format, onChange: (formatted, _rawDigits) => {
+                if (onChange) {
+                    onChange({
+                        target: { value: formatted },
+                    });
+                }
+            }, placeholder: placeholder, readOnly: readOnly, required: required, validate: validate, value: value }) }));
 });
 
 export { PickerTrigger as default };