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

package/Checkbox/CheckboxGroup.js

@@ -1,38 +1,183 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, createElement } from 'react';
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { checkboxGroupClasses } from '@mezzanine-ui/core/checkbox';
+import { forwardRef, useId, useMemo, useCallback, useEffect, Children, isValidElement } from 'react';
 import { useControlValueState } from '../Form/useControlValueState.js';
-import { CheckboxGroupContext } from './CheckboxGroupContext.js';
 import Checkbox from './Checkbox.js';
-import InputCheckGroup from '../_internal/InputCheck/InputCheckGroup.js';
+import { CheckboxGroupContext } from './CheckboxGroupContext.js';
+import cx from 'clsx';
 
-const renderOption = ({ label: children, ...option }) => (createElement(Checkbox, { ...option, key: option.value }, children));
+function assignCheckboxGroupValuesToEvent(event, values, name) {
+    const target = event.target;
+    target.values = values;
+    if (name) {
+        target.name = name;
+    }
+    return event;
+}
+const equalityFn = (a, b) => {
+    if (a.length !== b.length)
+        return false;
+    const sortedA = [...a].sort();
+    const sortedB = [...b].sort();
+    return sortedA.every((val, idx) => val === sortedB[idx]);
+};
 /**
  * The react component for `mezzanine` checkbox group.
  */
 const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
-    const { children: childrenProp, defaultValue = [], disabled, name, options = [], onChange, size, value: valueProp, ...rest } = props;
+    var _a, _b, _c, _d, _e;
+    const { children: childrenProp, className, defaultValue, disabled, layout = 'horizontal', level, mode, name, options, onChange: onChangeProp, role = 'group', value: valueProp, ...rest } = props;
+    const generatedName = useId();
+    const resolvedName = name !== null && name !== void 0 ? name : generatedName;
+    const normalizedOptions = useMemo(() => options !== null && options !== void 0 ? options : [], [options]);
     const [value, setValue] = useControlValueState({
-        defaultValue,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : [],
+        equalityFn,
         value: valueProp,
     });
+    const handleChange = useCallback((event) => {
+        const checkboxValue = event.target.value;
+        const isChecked = event.target.checked;
+        const currentValue = value || [];
+        const newValue = isChecked
+            ? [...currentValue, checkboxValue]
+            : currentValue.filter((v) => v !== checkboxValue);
+        setValue(newValue);
+        if (onChangeProp) {
+            const syntheticEvent = assignCheckboxGroupValuesToEvent(event, newValue, resolvedName);
+            onChangeProp(syntheticEvent);
+        }
+    }, [onChangeProp, resolvedName, setValue, value]);
     const context = useMemo(() => ({
         disabled,
-        name,
-        onChange(event) {
-            const { checked, value: targetValue } = event.target;
-            const newValue = checked
-                ? [...value, targetValue]
-                : value.filter((v) => v !== targetValue);
-            setValue(newValue);
-            if (onChange) {
-                onChange(newValue, event);
-            }
-        },
-        size,
-        value,
-    }), [disabled, name, value, size, onChange, setValue]);
-    const children = childrenProp || options.map(renderOption);
-    return (jsx(CheckboxGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, children: children }) }));
+        name: resolvedName,
+        onChange: handleChange,
+        value: value || [],
+    }), [disabled, resolvedName, handleChange, value]);
+    const hasChildrenInput = typeof childrenProp !== 'undefined';
+    const hasOptionsInput = Array.isArray(options);
+    // Validate input props and warn about missing props
+    useEffect(() => {
+        if (hasChildrenInput && hasOptionsInput) {
+            console.error('CheckboxGroup: Please provide either `children` or `options`, but not both.');
+        }
+        else if (!hasChildrenInput && !hasOptionsInput) {
+            console.error('CheckboxGroup: Please provide one of `children` or `options`.');
+        }
+        // Warn if name is not provided (important for react-hook-form integration)
+        if (!name) {
+            console.warn('CheckboxGroup: The `name` prop is recommended, especially when integrating with react-hook-form. ' +
+                'All checkboxes in the group should share the same `name` attribute.');
+        }
+        // Validate that all children have value prop
+        if (hasChildrenInput) {
+            Children.forEach(childrenProp, (child, index) => {
+                if (isValidElement(child) && child.type === Checkbox) {
+                    const checkboxProps = child.props;
+                    if (!checkboxProps.value) {
+                        console.warn(`CheckboxGroup: Each Checkbox child should have a \`value\` prop. ` +
+                            `Checkbox at index ${index} is missing the \`value\` prop.`);
+                    }
+                }
+            });
+        }
+    }, [hasChildrenInput, hasOptionsInput, name, childrenProp]);
+    // Validate that all children are Checkbox components
+    useEffect(() => {
+        if (hasChildrenInput) {
+            Children.forEach(childrenProp, (child) => {
+                var _a;
+                if (isValidElement(child) && child.type !== Checkbox) {
+                    console.warn('CheckboxGroup: When using ReactNode (children) input, only Checkbox components are supported. ' +
+                        `Found unsupported component: ${typeof child.type === 'string' ? child.type : ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) || 'Unknown'}`);
+                }
+            });
+        }
+    }, [hasChildrenInput, childrenProp]);
+    // Render priority: ReactNode (children) first, then options
+    // If using ReactNode, only Checkbox components are supported, other components are not supported
+    const children = useMemo(() => {
+        // Render ReactNode (children) if provided
+        if (hasChildrenInput) {
+            return childrenProp;
+        }
+        if (hasOptionsInput && normalizedOptions.length > 0) {
+            return normalizedOptions.map(({ label, value: optionValue, disabled: optionDisabled, id: optionId, inputProps: optionInputProps, inputRef: optionInputRef, ...optionRest }) => {
+                // Generate unique id if not provided
+                // Format: {name}-{value} or fallback to checkbox-{value}
+                const generatedId = resolvedName
+                    ? `${resolvedName}-${optionValue}`
+                    : `checkbox-${optionValue}`;
+                const finalId = optionId !== null && optionId !== void 0 ? optionId : generatedId;
+                return (jsx(Checkbox, { disabled: optionDisabled !== null && optionDisabled !== void 0 ? optionDisabled : disabled, id: finalId, inputProps: optionInputProps, inputRef: optionInputRef, label: typeof label === 'string' ? label : String(label), mode: mode, value: optionValue, ...optionRest }, optionValue));
+            });
+        }
+        return null;
+    }, [
+        childrenProp,
+        disabled,
+        hasChildrenInput,
+        hasOptionsInput,
+        mode,
+        normalizedOptions,
+        resolvedName,
+    ]);
+    const isLevelActive = (_a = level === null || level === void 0 ? void 0 : level.active) !== null && _a !== void 0 ? _a : false;
+    const isChipMode = mode === 'chip';
+    const isHorizontalLayout = layout === 'horizontal';
+    const shouldRenderLevelInsideContent = isLevelActive && isChipMode;
+    const ariaOrientation = isLevelActive ? 'vertical' : layout;
+    const canRenderLevelControl = isLevelActive && normalizedOptions.length > 0;
+    useEffect(() => {
+        if (isLevelActive && !hasOptionsInput) {
+            console.warn('CheckboxGroup: `level.active=true` currently supports only the `options` input approach.');
+        }
+    }, [hasOptionsInput, isLevelActive]);
+    const { levelChecked, levelIndeterminate } = useMemo(() => {
+        if (!canRenderLevelControl) {
+            return { levelChecked: false, levelIndeterminate: false };
+        }
+        const enabledOptions = normalizedOptions.filter((opt) => !opt.disabled);
+        const enabledValues = enabledOptions.map((opt) => opt.value);
+        const selectedEnabledValues = (value || []).filter((v) => enabledValues.includes(v));
+        if (selectedEnabledValues.length === 0) {
+            return { levelChecked: false, levelIndeterminate: false };
+        }
+        if (selectedEnabledValues.length === enabledValues.length) {
+            return { levelChecked: true, levelIndeterminate: false };
+        }
+        return { levelChecked: false, levelIndeterminate: true };
+    }, [canRenderLevelControl, normalizedOptions, value]);
+    const handleLevelControlChange = useCallback((event) => {
+        if (!canRenderLevelControl) {
+            return;
+        }
+        // Use custom onChange if provided
+        if (level === null || level === void 0 ? void 0 : level.onChange) {
+            level.onChange(event);
+            return;
+        }
+        // Default behavior: select/deselect all
+        const isChecked = event.target.checked;
+        const currentValue = value || [];
+        const enabledOptions = normalizedOptions.filter((opt) => !opt.disabled);
+        const enabledValues = enabledOptions.map((opt) => opt.value);
+        const disabledOptions = normalizedOptions.filter((opt) => opt.disabled);
+        const disabledValues = disabledOptions.map((opt) => opt.value);
+        const selectedDisabledValues = currentValue.filter((v) => disabledValues.includes(v));
+        const newValue = isChecked
+            ? [...enabledValues, ...selectedDisabledValues]
+            : selectedDisabledValues;
+        setValue(newValue);
+        if (onChangeProp) {
+            const syntheticEvent = assignCheckboxGroupValuesToEvent(event, newValue, resolvedName);
+            onChangeProp(syntheticEvent);
+        }
+    }, [canRenderLevelControl, level, onChangeProp, normalizedOptions, resolvedName, setValue, value]);
+    return (jsxs("div", { ...rest, ref: ref, "aria-orientation": ariaOrientation, className: cx(checkboxGroupClasses.host, {
+            [checkboxGroupClasses.nested]: isLevelActive,
+        }, className), role: role, children: [canRenderLevelControl && !shouldRenderLevelInsideContent && (jsx(Checkbox, { checked: levelChecked, disabled: disabled || (level === null || level === void 0 ? void 0 : level.disabled), id: `${resolvedName}-level-control`, indeterminate: levelIndeterminate, label: (_b = level === null || level === void 0 ? void 0 : level.label) !== null && _b !== void 0 ? _b : '', mode: (_c = level === null || level === void 0 ? void 0 : level.mode) !== null && _c !== void 0 ? _c : 'main', name: `${resolvedName}-level-control`, onChange: handleLevelControlChange })), jsxs("div", { className: cx(checkboxGroupClasses.contentWrapper, checkboxGroupClasses.layout(layout), mode && checkboxGroupClasses.mode(mode)), children: [canRenderLevelControl && shouldRenderLevelInsideContent && (jsxs(Fragment, { children: [jsx(Checkbox, { checked: levelChecked, disabled: disabled || (level === null || level === void 0 ? void 0 : level.disabled), id: `${resolvedName}-level-control`, indeterminate: levelIndeterminate, label: (_d = level === null || level === void 0 ? void 0 : level.label) !== null && _d !== void 0 ? _d : '', mode: (_e = level === null || level === void 0 ? void 0 : level.mode) !== null && _e !== void 0 ? _e : 'main', name: `${resolvedName}-level-control`, onChange: handleLevelControlChange }), isHorizontalLayout && jsx("i", { className: checkboxGroupClasses.levelControlSeparator })] })), jsx(CheckboxGroupContext.Provider, { value: context, children: children })] })] }));
 });
 
-export { CheckboxGroup as default };
+export { assignCheckboxGroupValuesToEvent, CheckboxGroup as default };

package/Checkbox/CheckboxGroupContext.d.ts

@@ -1,8 +1,6 @@
-import { CheckboxSize } from '@mezzanine-ui/core/checkbox';
 import { CheckboxGroupControlContextValue } from '../Form/useCheckboxControlValue';
 export interface CheckboxGroupContextValue extends CheckboxGroupControlContextValue {
     disabled?: boolean;
     name?: string;
-    size?: CheckboxSize;
 }
 export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;

package/Checkbox/CheckboxGroupContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from 'react';
 
 const CheckboxGroupContext = createContext(undefined);

package/Checkbox/index.d.ts

@@ -1,4 +1,16 @@
-export type { CheckboxSize, CheckboxGroupOrientation, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
-export { CheckboxProps, default } from './Checkbox';
-export { CheckboxGroupProps, default as CheckboxGroup } from './CheckboxGroup';
-export { CheckAllProps, default as CheckAll } from './CheckAll';
+import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import { CheckboxProps } from './Checkbox';
+export type { CheckboxGroupLayout, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
+export { default as CheckAll } from './CheckAll';
+export type { CheckAllProps } from './CheckAll';
+export { default as CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupChangeEvent, CheckboxGroupChangeEventTarget, CheckboxGroupLevelConfig, CheckboxGroupProps, } from './CheckboxGroup';
+export type { CheckboxProps } from './Checkbox';
+export type { CheckboxComponent, CheckboxPropsBase } from './typings';
+/**
+ * @remark
+ * Add type alias here for parsable to react docgen typescript.
+ */
+type GenericCheckbox = (props: PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLLabelElement>) => ReactElement<any>;
+declare const _default: GenericCheckbox;
+export default _default;

package/Checkbox/index.js

@@ -1,3 +1,7 @@
-export { default } from './Checkbox.js';
-export { default as CheckboxGroup } from './CheckboxGroup.js';
+import Checkbox from './Checkbox.js';
 export { default as CheckAll } from './CheckAll.js';
+export { default as CheckboxGroup } from './CheckboxGroup.js';
+
+
+
+export { Checkbox as default };

package/Checkbox/typings.d.ts

@@ -0,0 +1,37 @@
+import { CheckboxMode } from '@mezzanine-ui/core/checkbox';
+import { JSXElementConstructor } from 'react';
+export type CheckboxComponent = 'label' | JSXElementConstructor<any>;
+export interface CheckboxPropsBase {
+    /**
+     * Whether the checkbox is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is checked by default.
+     * Only used for uncontrolled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The description text displayed below the label.
+     */
+    description?: string;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkbox is in indeterminate state.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * The label text displayed beside the checkbox.
+     */
+    label?: string;
+    /**
+     * The mode of checkbox.
+     * @default 'main'
+     */
+    mode?: CheckboxMode;
+}

package/ClearActions/ClearActions.d.ts

@@ -0,0 +1,41 @@
+import { ClearActionsEmbeddedVariant, ClearActionsStandardVariant } from '@mezzanine-ui/core/clear-actions';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+type ClearActionsCommonProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'onClick' | 'type'> & {
+    /**
+     * Called when user clicks or activates the button (via mouse or keyboard).
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+type ClearActionsStandardProps = ClearActionsCommonProps & {
+    /**
+     * Clear Actions Contextual type.
+     * @default 'standard'
+     */
+    type?: 'standard';
+    /**
+     * Visual variant for standard type.
+     */
+    variant?: ClearActionsStandardVariant;
+};
+type ClearActionsEmbeddedProps = ClearActionsCommonProps & {
+    /**
+     * Clear Actions Contextual type.
+     */
+    type: 'embedded';
+    /**
+     * Visual variant for embedded type.
+     */
+    variant?: ClearActionsEmbeddedVariant;
+};
+type ClearActionsClearableProps = ClearActionsCommonProps & {
+    /**
+     * Clear Actions Contextual type.
+     */
+    type: 'clearable';
+};
+export type ClearActionsProps = ClearActionsEmbeddedProps | ClearActionsStandardProps | ClearActionsClearableProps;
+/**
+ * Mezzanine clear actions button.
+ */
+declare const ClearActions: import("react").ForwardRefExoticComponent<ClearActionsProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default ClearActions;

package/ClearActions/ClearActions.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DangerousFilledIcon, CloseIcon } from '@mezzanine-ui/icons';
+import { clearActionsClasses } from '@mezzanine-ui/core/clear-actions';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * Mezzanine clear actions button.
+ */
+const ClearActions = forwardRef(function ClearActions(props, ref) {
+    const { className, onClick, type = 'standard', ...rest } = props;
+    const variant = 'variant' in props ? props.variant : undefined;
+    const resolvedVariant = type === 'clearable'
+        ? 'default'
+        : variant !== null && variant !== void 0 ? variant : (type === 'standard' ? 'base' : 'contrast');
+    return (jsx("button", { ...rest, ref: ref, "aria-label": "Close", className: cx(clearActionsClasses.host, clearActionsClasses.type(type), clearActionsClasses.variant(resolvedVariant), className), onClick: onClick, type: "button", children: type === 'clearable'
+            ? jsx(Icon, { className: clearActionsClasses.icon, icon: DangerousFilledIcon })
+            : jsx(Icon, { className: clearActionsClasses.icon, icon: CloseIcon }) }));
+});
+
+export { ClearActions as default };

package/ClearActions/index.d.ts

@@ -0,0 +1,3 @@
+import ClearActions from './ClearActions';
+export type { ClearActionsProps } from './ClearActions';
+export default ClearActions;

package/ClearActions/index.js

@@ -0,0 +1,5 @@
+import ClearActions from './ClearActions.js';
+
+
+
+export { ClearActions as default };

package/ConfirmActions/ConfirmActions.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { ButtonGroupProps, ButtonProps } from '../Button';
+import { ButtonProps } from '../Button/Button';
+import { ButtonGroupProps } from '../Button/ButtonGroup';
 export interface ConfirmActionsProps extends Omit<ButtonGroupProps, 'children'> {
     /**
      * Other props of cancel button.

package/ConfirmActions/index.d.ts

@@ -1 +1,2 @@
-export { ConfirmActionsProps, default } from './ConfirmActions';
+export { default } from './ConfirmActions';
+export type { ConfirmActionsProps } from './ConfirmActions';

package/DatePicker/DatePicker.d.ts

@@ -1,13 +1,24 @@
 import { DateType } from '@mezzanine-ui/core/calendar';
 import { DatePickerCalendarProps } from './DatePickerCalendar';
 import { PickerTriggerProps } from '../Picker';
-export interface DatePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'calendarRef' | 'onChange' | 'open' | 'referenceDate' | 'updateReferenceDate'>, Omit<PickerTriggerProps, 'defaultValue' | 'inputRef' | 'onChange' | 'onClear' | 'onClick' | 'onIconClick' | 'onKeyDown' | 'suffixActionIcon' | 'value'> {
+export interface DatePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'calendarRef' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'onChange' | 'open' | 'referenceDate' | 'updateReferenceDate'>, Omit<PickerTriggerProps, 'defaultValue' | 'format' | 'inputRef' | 'onChange' | 'onClear' | 'onClick' | 'onIconClick' | 'onKeyDown' | 'value'> {
     /**
      * Default value for date picker.
      */
     defaultValue?: DateType;
+    /**
+     * Disabled "double next" button on calendar controls
+     * @default false
+     */
+    disableOnDoubleNext?: boolean;
+    /**
+     * Disabled "double prev" button on calendar controls
+     * @default false
+     */
+    disableOnDoublePrev?: boolean;
     /**
      * The format for displaying date.
+     * The length of the format must match the length of the actual generated value. For example, "gggg-wo" may cause a length mismatch when the week of year is a single digit. It is recommended to use the system's default format instead.
      */
     format?: string;
     /**

package/DatePicker/DatePicker.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { forwardRef, useCallback, useState, useMemo, useRef, useEffect } from 'react';
 import { getDefaultModeFormat } from '@mezzanine-ui/core/calendar';
 import { CalendarIcon } from '@mezzanine-ui/icons';
 import DatePickerCalendar from './DatePickerCalendar.js';
@@ -9,18 +10,46 @@ import { usePickerValue } from '../Picker/usePickerValue.js';
 import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
 import Icon from '../Icon/Icon.js';
 import PickerTrigger from '../Picker/PickerTrigger.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
 
 /**
  * The react component for `mezzanine` date picker.
  * Notice that any component related to date-picker should be used along with `CalendarContext`. <br />
  */
 const DatePicker = forwardRef(function DatePicker(props, ref) {
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { defaultDateFormat, getNow } = useCalendarContext();
-    const { calendarProps, className, clearable = true, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
+    const { getNow } = useCalendarContext();
+    const { calendarProps, className, clearable = true, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disableOnDoubleNext, disableOnDoublePrev, disabledYearSwitch = false, disabled = false, displayMonthLocale, error = false, errorMessages, fadeProps, format: formatProp, fullWidth = false, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, isQuarterDisabled, isHalfYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = false, size, value: valueProp, ...restTriggerProps } = props;
+    const format = formatProp || getDefaultModeFormat(mode);
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
-    const formats = useMemo(() => [format, defaultDateFormat, getDefaultModeFormat(mode)], [defaultDateFormat, format, mode]);
+    /**
+     * Validate date value against disabled constraints based on mode.
+     * Returns true if valid, false if the date is disabled.
+     */
+    const validateDate = useCallback((isoDate) => {
+        switch (mode) {
+            case 'day':
+                return !(isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(isoDate));
+            case 'week':
+                return !(isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(isoDate));
+            case 'month':
+                return !(isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(isoDate));
+            case 'quarter':
+                return !(isQuarterDisabled === null || isQuarterDisabled === void 0 ? void 0 : isQuarterDisabled(isoDate));
+            case 'year':
+                return !(isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(isoDate));
+            case 'half-year':
+                return !(isHalfYearDisabled === null || isHalfYearDisabled === void 0 ? void 0 : isHalfYearDisabled(isoDate));
+            default:
+                return true;
+        }
+    }, [
+        isDateDisabled,
+        isHalfYearDisabled,
+        isMonthDisabled,
+        isQuarterDisabled,
+        isWeekDisabled,
+        isYearDisabled,
+        mode,
+    ]);
     /** Calender display control */
     const [open, setOpen] = useState(false);
     const preventOpen = readOnly;
@@ -48,7 +77,6 @@ const DatePicker = forwardRef(function DatePicker(props, ref) {
     const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
         defaultValue,
         format,
-        formats,
         inputRef,
         value: valueProp,
     });
@@ -123,8 +151,12 @@ const DatePicker = forwardRef(function DatePicker(props, ref) {
         }
         onCalendarToggle(!open);
     };
-    const suffixActionIcon = jsx(Icon, { icon: CalendarIcon, onClick: onIconClick });
-    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DatePickerCalendar, { ref: calendarRef, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue })] }));
+    const suffixActionIcon = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarIcon, onClick: readOnly ? undefined : onIconClick }));
+    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, errorMessages: errorMessages, format: format, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: (e) => {
+                    onInputChange(e);
+                    onCalendarChange(e.target.value);
+                    onCalendarToggle(true);
+                }, onClear: onClear, onFocus: () => onCalendarToggle(true), placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffixActionIcon, validate: validateDate, value: inputValue }), jsx(DatePickerCalendar, { ref: calendarRef, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isQuarterDisabled: isQuarterDisabled, isYearDisabled: isYearDisabled, isHalfYearDisabled: isHalfYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue })] }));
 });
 
 export { DatePicker as default };

package/DatePicker/DatePickerCalendar.d.ts

@@ -2,11 +2,11 @@ import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
 import { RefObject } from 'react';
 import { CalendarProps } from '../Calendar';
 import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
-export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
+export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isQuarterDisabled' | 'isHalfYearDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
     /**
      * Other calendar props you may provide to `Calendar`.
      */
-    calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
+    calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isQuarterDisabled' | 'isHalfYearDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onDoubleNext' | 'onPrev' | 'onDoublePrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
     /**
      * React ref for calendar component.
      */
@@ -25,8 +25,5 @@ export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, '
      */
     value?: DateType;
 }
-/**
- * The react component for `mezzanine` date picker calendar.
- */
 declare const DatePickerCalendar: import("react").ForwardRefExoticComponent<DatePickerCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default DatePickerCalendar;

package/DatePicker/DatePickerCalendar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
@@ -5,61 +6,60 @@ import { useCalendarControls } from '../Calendar/useCalendarControls.js';
 import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
 import Calendar from '../Calendar/Calendar.js';
 
-/**
- * The react component for `mezzanine` date picker calendar.
- */
 const DatePickerCalendar = forwardRef(function DatePickerCalendar(props, ref) {
-    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, } = useCalendarContext();
-    const { anchor, calendarProps, calendarRef, disabledMonthSwitch, disableOnNext, disableOnPrev, disabledYearSwitch, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onChange: onChangeProp, open, popperProps, referenceDate: referenceDateProp, value, } = props;
+    const { locale, getMonth, getYear, setMonth, setYear } = useCalendarContext();
+    const { anchor, calendarProps, calendarRef, disabledMonthSwitch, disableOnNext, disableOnPrev, disableOnDoubleNext, disableOnDoublePrev, disabledYearSwitch, displayMonthLocale = locale, fadeProps, isDateDisabled, isMonthDisabled, isQuarterDisabled, isHalfYearDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onChange: onChangeProp, open, popperProps, referenceDate: referenceDateProp, value, } = props;
     const { className: calendarClassName, ...restCalendarProps } = calendarProps || {};
-    const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
-    const onChange = useMemo(() => {
-        if (currentMode === 'day' || currentMode === 'week') {
-            return (target) => {
-                updateReferenceDate(target);
-                popModeStack();
-                if (onChangeProp) {
-                    onChangeProp(target);
-                }
-            };
-        }
-        if (currentMode === 'month') {
-            return (target) => {
-                const result = currentMode === mode
-                    ? target
-                    : setMonth(referenceDate, getMonth(target));
-                updateReferenceDate(result);
-                popModeStack();
-                if (currentMode === mode && onChangeProp) {
-                    onChangeProp(result);
-                }
-            };
-        }
-        if (currentMode === 'year') {
+    const { currentMode, onMonthControlClick, onNext, onPrev, onDoublePrev, onDoubleNext, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
+    // Helper to handle mode switching with optional value transformation
+    const createModeChangeHandler = useMemo(() => {
+        return (transformValue) => {
             return (target) => {
-                const result = currentMode === mode
-                    ? target
-                    : setYear(referenceDate, getYear(target));
+                const result = transformValue
+                    ? transformValue(target, referenceDate)
+                    : target;
                 updateReferenceDate(result);
                 popModeStack();
                 if (currentMode === mode && onChangeProp) {
                     onChangeProp(result);
                 }
             };
-        }
+        };
     }, [
         currentMode,
+        mode,
         referenceDate,
         updateReferenceDate,
         popModeStack,
-        mode,
         onChangeProp,
-        setMonth,
+    ]);
+    const onChange = useMemo(() => {
+        switch (currentMode) {
+            case 'day':
+            case 'week':
+                return createModeChangeHandler();
+            case 'month':
+                return createModeChangeHandler((target, reference) => currentMode === mode
+                    ? target
+                    : setMonth(reference, getMonth(target)));
+            case 'year':
+                return createModeChangeHandler((target, reference) => currentMode === mode ? target : setYear(reference, getYear(target)));
+            case 'quarter':
+            case 'half-year':
+                return createModeChangeHandler();
+            default:
+                return undefined;
+        }
+    }, [
+        currentMode,
+        mode,
+        createModeChangeHandler,
         getMonth,
-        setYear,
+        setMonth,
         getYear,
+        setYear,
     ]);
-    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(Calendar, { ...restCalendarProps, ref: calendarRef, className: calendarClassName, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }) }));
+    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(Calendar, { ...restCalendarProps, ref: calendarRef, className: calendarClassName, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isHalfYearDisabled: isHalfYearDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onDoubleNext: onDoubleNext, onPrev: onPrev, onDoublePrev: onDoublePrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }) }));
 });
 
 export { DatePickerCalendar as default };