@mezzanine-ui/react 0.6.4

package/Checkbox/CheckAll.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, useMemo } from 'react';
+import { checkboxClasses } from '@mezzanine-ui/core/checkbox';
+import Checkbox from './Checkbox.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` check all.
+ * Only support controlled.
+ */
+const CheckAll = forwardRef(function CheckAll(props, ref) {
+    const { children, className, label, ...rest } = props;
+    const checkboxGroup = children && Children.only(children);
+    const { disabled, name, onChange, options, size, value, } = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.props) || {};
+    const enabledOptions = useMemo(() => options === null || options === void 0 ? void 0 : options.filter((option) => !option.disabled), [options]);
+    let allChecked = false;
+    let indeterminate = false;
+    if (enabledOptions && value) {
+        allChecked = enabledOptions.length === value.length;
+        indeterminate = enabledOptions.length > value.length && value.length > 0;
+    }
+    return (jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(checkboxClasses.all, className) }, { children: [jsx("div", { children: jsx(Checkbox, Object.assign({ checked: allChecked, disabled: disabled, indeterminate: indeterminate, inputProps: {
+                        name,
+                    }, onChange: (event) => {
+                        if (onChange) {
+                            if (!event.target.checked) {
+                                onChange([], event);
+                            }
+                            else if (enabledOptions) {
+                                onChange(enabledOptions.map((option) => option.value), event);
+                            }
+                        }
+                    }, size: size }, { children: label }), void 0) }, void 0), children] }), void 0));
+});
+
+export default CheckAll;

package/Checkbox/Checkbox.d.ts

@@ -0,0 +1,46 @@
+import { ChangeEventHandler } from 'react';
+import { CheckboxSize } from '@mezzanine-ui/core/checkbox';
+import { InputCheckProps } from '../_internal/InputCheck';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CheckboxProps extends Omit<InputCheckProps, 'control' | 'htmlFor'> {
+    /**
+     * Whether the checkbox is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is checked by default.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * If true, it means its children checkboxes have at least one unchecked.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     *  If you need direct control to the input element, use this prop to provide to it.
+     *
+     * Noticed that if you pass in an id within this prop,
+     *  the rendered label element will have `htmlFor` sync with passed in id.
+     */
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
+    /**
+     * The change event handler of input in checkbox.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The size of checkbox.
+     * @default 'medium'
+     */
+    size?: CheckboxSize;
+    /**
+     * The value of input in checkbox.
+     */
+    value?: string;
+}
+/**
+ * The react component for `mezzanine` checkbox.
+ */
+declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default Checkbox;

package/Checkbox/Checkbox.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { checkboxClasses } from '@mezzanine-ui/core/checkbox';
+import { useCheckboxControlValue } from '../Form/useCheckboxControlValue.js';
+import { CheckboxGroupContext } from './CheckboxGroupContext.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import InputCheck from '../_internal/InputCheck/InputCheck.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` checkbox.
+ */
+const Checkbox = forwardRef(function Checkbox(props, ref) {
+    const { disabled: disabledFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const checkboxGroup = useContext(CheckboxGroupContext);
+    const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = checkboxGroup || {};
+    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, indeterminate: indeterminateProp = false, onChange: onChangeProp, size = sizeFromGroup || 'medium', value, inputProps, ...rest } = props;
+    const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
+    const [checked, onChange] = useCheckboxControlValue({
+        checkboxGroup,
+        checked: checkedProp,
+        defaultChecked,
+        onChange: onChangeProp,
+        value,
+    });
+    const indeterminate = !checked && indeterminateProp;
+    return (jsx(InputCheck, Object.assign({}, rest, { ref: ref, control: (jsx("span", Object.assign({ className: cx(checkboxClasses.host, {
+                [checkboxClasses.checked]: checked,
+                [checkboxClasses.indeterminate]: indeterminate,
+            }) }, { children: jsx("input", Object.assign({}, restInputProps, { "aria-checked": indeterminate ? 'mixed' : checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "checkbox", value: value }), void 0) }), void 0)), disabled: disabled, error: error, htmlFor: inputId, size: size }, { children: children }), void 0));
+});
+
+export default Checkbox;

package/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,47 @@
+import { CheckboxGroupOption, CheckboxSize } from '@mezzanine-ui/core/checkbox';
+import { ChangeEvent, ReactNode } from 'react';
+import { InputCheckGroupProps } from '../_internal/InputCheck';
+export interface CheckboxGroupProps extends Omit<InputCheckGroupProps, 'defaultValue' | 'onChange'> {
+    /**
+     * The checkboxes in radio group.
+     */
+    children?: ReactNode;
+    /**
+     * The default value of checkbox group.
+     */
+    defaultValue?: string[];
+    /**
+     * Whether the checkbox group is disabled.
+     * Control the disabled of checkboxes in group if disabled not passed to checkbox.
+     */
+    disabled?: boolean;
+    /**
+     * The name of checkbox group.
+     * Control the name of checkboxes in group if name not passed to checkbox.
+     */
+    name?: string;
+    /**
+     * The onChange of checkbox group.
+     * Will be passed to each checkboxes but composing both instead of overriding.
+     */
+    onChange?: (value: string[], event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The options of checkbox group.
+     * Will be ignored if children passed.
+     */
+    options?: CheckboxGroupOption[];
+    /**
+     * The size of checkbox group.
+     * Control the size of checkboxes in group if size not passed to checkbox.
+     */
+    size?: CheckboxSize;
+    /**
+     * The value of checkbox group.
+     */
+    value?: string[];
+}
+/**
+ * The react component for `mezzanine` checkbox group.
+ */
+declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CheckboxGroup;

package/Checkbox/CheckboxGroup.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createElement } 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';
+
+const renderOption = ({ label: children, ...option }) => (createElement(Checkbox, Object.assign({}, option, { key: option.value }), children));
+/**
+ * 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;
+    const [value, setValue] = useControlValueState({
+        defaultValue,
+        value: valueProp,
+    });
+    const context = {
+        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,
+    };
+    const children = childrenProp || options.map(renderOption);
+    return (jsx(CheckboxGroupContext.Provider, Object.assign({ value: context }, { children: jsx(InputCheckGroup, Object.assign({}, rest, { ref: ref }, { children: children }), void 0) }), void 0));
+});
+
+export default CheckboxGroup;

package/Checkbox/CheckboxGroupContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+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

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const CheckboxGroupContext = createContext(undefined);
+
+export { CheckboxGroupContext };

package/Checkbox/index.d.ts

@@ -0,0 +1,4 @@
+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';

package/Checkbox/index.js

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

package/ConfirmActions/ConfirmActions.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { ButtonGroupProps, ButtonProps } from '../Button';
+export interface ConfirmActionsProps extends Omit<ButtonGroupProps, 'children'> {
+    /**
+     * Other props of cancel button.
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * Content of cancel button.
+     */
+    cancelText?: ReactNode;
+    /**
+     * Other props of confirm button.
+     */
+    confirmButtonProps?: ButtonProps;
+    /**
+     * Content of confirm button.
+     */
+    confirmText?: ReactNode;
+    /**
+     * Whether to hide cancel button.
+     */
+    hideCancelButton?: boolean;
+    /**
+     * Whether to hide confirm button.
+     */
+    hideConfirmButton?: boolean;
+    /**
+     * Indicate whether confirm button loading and cancel button disabled.
+     */
+    loading?: boolean;
+    /**
+     * Click handler for cancel button.
+     */
+    onCancel?: ButtonProps['onClick'];
+    /**
+     * Click handler for confirm button.
+     */
+    onConfirm?: ButtonProps['onClick'];
+}
+/**
+ * The react component for `mezzanine` confirm actions.
+ */
+declare const ConfirmActions: import("react").ForwardRefExoticComponent<ConfirmActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ConfirmActions;

package/ConfirmActions/ConfirmActions.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+
+/**
+ * The react component for `mezzanine` confirm actions.
+ */
+const ConfirmActions = forwardRef(function ConfirmActions(props, ref) {
+    const { cancelButtonProps, cancelText, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, loading, onCancel, onConfirm, ...rest } = props;
+    const { disabled: cancelButtonDisabled = loading, } = cancelButtonProps || {};
+    return (jsxs(ButtonGroup, Object.assign({}, rest, { ref: ref }, { children: [!hideCancelButton && (jsx(Button, Object.assign({ variant: "outlined" }, cancelButtonProps, { disabled: cancelButtonDisabled, onClick: onCancel }, { children: cancelText }), void 0)),
+            !hideConfirmButton && (jsx(Button, Object.assign({ variant: "contained" }, confirmButtonProps, { loading: loading, onClick: onConfirm }, { children: confirmText }), void 0))] }), void 0));
+});
+
+export default ConfirmActions;

package/ConfirmActions/index.d.ts

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

package/ConfirmActions/index.js

@@ -0,0 +1 @@
+export { default } from './ConfirmActions.js';

package/DatePicker/DatePicker.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+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'> {
+    /**
+     * Default value for date picker.
+     */
+    defaultValue?: DateType;
+    /**
+     * The format for displaying date.
+     */
+    format?: string;
+    /**
+     * A function that fires when calendar toggle. Receive open status in boolean format as props.
+     */
+    onCalendarToggle?: (open: boolean) => void;
+    /**
+     * Change handler. Takes your declared `DateType` as argument.
+     */
+    onChange?: (target?: DateType) => void;
+    /**
+     * The reference date for getting calendars. Default to current time.
+     */
+    referenceDate?: DateType;
+}
+/**
+ * The react component for `mezzanine` date picker.
+ * Notice that any component related to date-picker should be used along with `CalendarContext`. <br />
+ */
+declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DatePicker;

package/DatePicker/DatePicker.js

@@ -0,0 +1,135 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { getDefaultModeFormat } from '@mezzanine-ui/core/calendar';
+import { CalendarIcon } from '@mezzanine-ui/icons';
+import DatePickerCalendar from './DatePickerCalendar.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import { usePickerValue } from '../Picker/usePickerValue.js';
+import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
+import Icon from '../Icon/Icon.js';
+import PickerTrigger from '../Picker/PickerTrigger.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, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
+    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
+    const formats = useMemo(() => [
+        format,
+        defaultDateFormat,
+        getDefaultModeFormat(mode),
+    ], [defaultDateFormat, format, mode]);
+    /** Calender display control */
+    const [open, setOpen] = useState(false);
+    const preventOpen = readOnly;
+    const onCalendarToggle = useCallback((currentOpen) => {
+        if (!preventOpen) {
+            if (onCalendarToggleProp) {
+                onCalendarToggleProp(currentOpen);
+            }
+            setOpen(currentOpen);
+        }
+    }, [onCalendarToggleProp, preventOpen]);
+    const onFocus = useMemo(() => {
+        if (readOnly) {
+            return undefined;
+        }
+        return (event) => {
+            if (onFocusProp) {
+                onFocusProp(event);
+            }
+            onCalendarToggle(true);
+        };
+    }, [onCalendarToggle, onFocusProp, readOnly]);
+    /** Value and change handlers */
+    const inputRef = useRef(null);
+    const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
+        defaultValue,
+        format,
+        formats,
+        inputRef,
+        value: valueProp,
+    });
+    /** Bind close control to handlers */
+    const onCalendarChange = (val) => {
+        onChange(val);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(val);
+        onCalendarToggle(false);
+    };
+    const onKeyDownWithCloseControl = useCallback((event) => {
+        onKeyDown(event);
+        if (onKeyDownProp) {
+            onKeyDownProp(event);
+        }
+        if (event.key === 'Enter') {
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
+            onCalendarToggle(false);
+        }
+    }, [internalValue, onCalendarToggle, onChangeProp, onKeyDown, onKeyDownProp]);
+    /** using internal reference date */
+    const [referenceDate, setReferenceDate] = useState(referenceDateProp || defaultValue || getNow());
+    useEffect(() => {
+        if (internalValue) {
+            setReferenceDate(internalValue);
+        }
+    }, [internalValue]);
+    /** Resolve input props */
+    const onResolvedBlur = useCallback((event) => {
+        if (onBlurProp) {
+            onBlurProp(event);
+        }
+        onBlur(event);
+    }, [onBlur, onBlurProp]);
+    const resolvedInputProps = {
+        ...restInputProp,
+        size: inputSize,
+        onFocus,
+        onKeyDown: onKeyDownWithCloseControl,
+        onBlur: onResolvedBlur,
+    };
+    /** Popper positioning */
+    const anchorRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([ref, anchorRef]);
+    const calendarRef = useRef(null);
+    /** Clear handler */
+    const onClear = useCallback(() => {
+        onChange(undefined);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+    }, [onChange, onChangeProp]);
+    /** Blur, click away and key down close */
+    const onClose = () => {
+        onChange(valueProp);
+        onCalendarToggle(false);
+    };
+    const onChangeClose = () => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
+        onCalendarToggle(false);
+    };
+    usePickerDocumentEventClose({
+        open,
+        anchorRef,
+        popperRef: calendarRef,
+        lastElementRefInFlow: inputRef,
+        onClose,
+        onChangeClose,
+    });
+    /** Icon */
+    const onIconClick = (e) => {
+        e.stopPropagation();
+        if (open) {
+            onChange(valueProp);
+        }
+        onCalendarToggle(!open);
+    };
+    const suffixActionIcon = (jsx(Icon, { icon: CalendarIcon, onClick: onIconClick }, void 0));
+    return (jsxs(Fragment, { children: [jsx(PickerTrigger, Object.assign({}, 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 }), void 0),
+            jsx(DatePickerCalendar, { ref: calendarRef, anchor: anchorRef, calendarProps: calendarProps, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue }, void 0)] }, void 0));
+});
+
+export default DatePicker;

package/DatePicker/DatePickerCalendar.d.ts

@@ -0,0 +1,32 @@
+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, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
+    /**
+     * Other calendar props you may provide to `Calendar`.
+     */
+    calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
+    /**
+     * React ref for calendar component.
+     */
+    calendarRef?: RefObject<HTMLDivElement>;
+    /**
+     * The desired mode of calendar.<br />
+     * The `onChange` function will only fired if the calendar mode meets this prop.
+     */
+    mode?: CalendarMode;
+    /**
+     * Other props you may provide to `Popper` component
+     */
+    popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
+    /**
+     * The calendar cell will be marked as active if it matches the same date of given value.
+     */
+    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

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+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, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, isDateDisabled, isMonthDisabled, 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') {
+            return (target) => {
+                const result = currentMode === mode ? target : setYear(referenceDate, getYear(target));
+                updateReferenceDate(result);
+                popModeStack();
+                if (currentMode === mode && onChangeProp) {
+                    onChangeProp(result);
+                }
+            };
+        }
+    }, [
+        currentMode,
+        referenceDate,
+        updateReferenceDate,
+        popModeStack,
+        mode,
+        onChangeProp,
+        setMonth,
+        getMonth,
+        setYear,
+        getYear,
+    ]);
+    return (jsx(InputTriggerPopper, Object.assign({}, popperProps, { ref: ref, anchor: anchor, open: open, fadeProps: fadeProps }, { children: jsx(Calendar, Object.assign({}, restCalendarProps, { ref: calendarRef, className: calendarClassName, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }), void 0) }), void 0));
+});
+
+export default DatePickerCalendar;

package/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePickerCalendarProps, default as DatePickerCalendar, } from './DatePickerCalendar';
+export { DatePickerProps, default, } from './DatePicker';

package/DatePicker/index.js

@@ -0,0 +1,2 @@
+export { default as DatePickerCalendar } from './DatePickerCalendar.js';
+export { default } from './DatePicker.js';

package/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { RangePickerValue } from '@mezzanine-ui/core/picker';
+import { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
+import { RangePickerTriggerProps } from '../Picker';
+export interface DateRangePickerProps extends Pick<DateRangePickerCalendarProps, 'calendarProps' | 'displayMonthLocale' | 'fadeProps' | 'mode' | 'popperProps' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size'> {
+    /**
+     * Default value for date range picker.
+     */
+    defaultValue?: [DateType, DateType];
+    /**
+     * The format for displaying date.
+     */
+    format?: string;
+    /**
+     * A function that fires when calendar toggle. Receive open status in boolean format as props.
+     */
+    onCalendarToggle?: (open: boolean) => void;
+    /**
+     * Change handler. Takes an array of your declared `DateType` which represents from and to in order.
+     */
+    onChange?: (target?: RangePickerValue) => void;
+    /**
+     * The reference date for getting calendars. Default to current time.
+     */
+    referenceDate?: DateRangePickerCalendarProps['referenceDate'];
+    /**
+     * Value of the range picker.
+     * It is an array of your declared `DateType` which represents from and to in order.
+     */
+    value?: RangePickerValue;
+}
+/**
+ * The react component for `mezzanine` date range picker.
+ * Notice that any component related to date-range-picker should be used along with `CalendarContext`. <br />
+ */
+declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DateRangePicker;