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

package/DateTimePicker/DateTimePicker.js

@@ -1,121 +1,206 @@
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ClockIcon } from '@mezzanine-ui/icons';
-import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { CalendarTimeIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import DateTimePickerPanel from './DateTimePickerPanel.js';
+import TimePickerPanel from '../TimePicker/TimePickerPanel.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';
-import { FormControlContext } from '../Form/FormControlContext.js';
+import PickerTriggerWithSeparator from '../Picker/PickerTriggerWithSeparator.js';
+import DatePickerCalendar from '../DatePicker/DatePickerCalendar.js';
 
 /**
- * The react component for `mezzanine` time picker.
- * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ * The react component for `mezzanine` date-time picker.
+ * This component features two separate inputs for date and time,
+ * with independent calendar and time panels shown based on focus.
+ * Notice that any component related to date-time picker should be used along with `CalendarContext`.
  */
 const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { defaultDateFormat, defaultTimeFormat, getNow, startOf } = useCalendarContext();
-    const defaultFormat = `${defaultDateFormat} ${defaultTimeFormat}`;
-    const { calendarProps, className, clearable = true, confirmText, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
-    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
-    const formats = useMemo(() => [format, defaultFormat], [defaultFormat, format]);
-    /** Panel open control */
-    const [open, setOpen] = useState(false);
-    const preventOpen = readOnly;
-    const onPanelToggle = useCallback((nextOpen) => {
-        if (!preventOpen) {
-            setOpen(nextOpen);
-            if (onPanelToggleProp) {
-                onPanelToggleProp(nextOpen);
+    const { defaultDateFormat, defaultTimeFormat, formatToString, getNow, getHour, getMinute, getSecond, isValid, setHour, setMinute, setSecond, startOf, locale, } = useCalendarContext();
+    const { 
+    // Calendar props
+    calendarProps, calendarRef, disabledMonthSwitch = false, disableOnDoubleNext, disableOnDoublePrev, disableOnNext, disableOnPrev, disabledYearSwitch = false, displayMonthLocale, isDateDisabled, isHalfYearDisabled, isMonthDisabled, isQuarterDisabled, isWeekDisabled, isYearDisabled, mode = 'day', 
+    // Time panel props
+    hideHour, hideMinute, hideSecond, hourStep, minuteStep, secondStep, 
+    // DateTimePicker specific props
+    className, clearable = true, defaultValue, disabled = false, error = false, fadeProps, formatDate = defaultDateFormat, formatTime = hideSecond ? 'HH:mm' : defaultTimeFormat, fullWidth = false, onClear: onClearProp, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholderLeft = formatDate, placeholderRight = formatTime, popperProps, popperPropsTime, prefix, readOnly, referenceDate: referenceDateProp, required = false, size, value: valueProp, ...restTriggerProps } = props;
+    // Internal state
+    const [focusedInput, setFocusedInput] = useState(null);
+    const [dateValue, setDateValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : valueProp);
+    const [timeValue, setTimeValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : valueProp);
+    // Refs
+    const inputLeftRef = useRef(null);
+    const inputRightRef = useRef(null);
+    const anchorRef = useRef(null);
+    const calendarPanelRef = useRef(null);
+    const timePanelRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
+    // Reference date for calendar
+    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'day'));
+    // Sync external value
+    useEffect(() => {
+        if (valueProp !== undefined) {
+            setDateValue(valueProp);
+            setTimeValue(valueProp);
+            if (valueProp) {
+                setReferenceDate(startOf(valueProp, 'day'));
             }
         }
-    }, [onPanelToggleProp, preventOpen]);
-    const onFocus = useCallback((event) => {
-        if (onFocusProp) {
-            onFocusProp(event);
+    }, [valueProp, startOf]);
+    // Open state based on focused input
+    const openCalendar = focusedInput === 'left' && !readOnly;
+    const openTimePanel = focusedInput === 'right' && !readOnly;
+    // Format values for display
+    const displayDateValue = useMemo(() => {
+        if (!dateValue)
+            return '';
+        return formatToString(locale, dateValue, formatDate) || '';
+    }, [dateValue, formatDate, formatToString, locale]);
+    const displayTimeValue = useMemo(() => {
+        if (!timeValue)
+            return '';
+        return formatToString(locale, timeValue, formatTime) || '';
+    }, [timeValue, formatTime, formatToString, locale]);
+    // Panel toggle handler
+    const onPanelToggle = useCallback((open, input) => {
+        if (onPanelToggleProp) {
+            onPanelToggleProp(open, input);
         }
-        onPanelToggle(true);
-    }, [onFocusProp, onPanelToggle]);
-    /** Controlling input value and bind change handler */
-    const inputRef = useRef(null);
-    const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
-        defaultValue,
-        format,
-        formats,
-        inputRef,
-        value: valueProp,
-    });
-    /** Panel confirm handler */
-    const onConfirm = useCallback(() => {
-        if (onChangeProp) {
-            onChangeProp(internalValue);
+    }, [onPanelToggleProp]);
+    // Focus handlers
+    const onFocusLeft = useCallback(() => {
+        if (!readOnly) {
+            setFocusedInput('left');
+            onPanelToggle(true, 'left');
         }
-        onPanelToggle(false);
-    }, [internalValue, onChangeProp, onPanelToggle]);
-    /** using internal reference date */
-    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'hour'));
-    useEffect(() => {
-        if (internalValue) {
-            setReferenceDate(internalValue);
+    }, [onPanelToggle, readOnly]);
+    const onFocusRight = useCallback(() => {
+        if (!readOnly) {
+            setFocusedInput('right');
+            onPanelToggle(true, 'right');
         }
-    }, [internalValue]);
-    /** Bind input props */
-    const onResolvedKeyDown = useCallback((event) => {
-        if (onKeyDownProp) {
-            onKeyDownProp(event);
+    }, [onPanelToggle, readOnly]);
+    // Combine date and time into a single value
+    const combineDateTime = useCallback((date, time) => {
+        if (!date)
+            return undefined;
+        const timeSource = time || getNow();
+        const result = setHour(setMinute(setSecond(date, getSecond(timeSource)), getMinute(timeSource)), getHour(timeSource));
+        return result;
+    }, [getNow, getHour, getMinute, getSecond, setHour, setMinute, setSecond]);
+    // Close handler
+    const onClose = useCallback(() => {
+        setFocusedInput(null);
+        onPanelToggle(false, null);
+    }, [onPanelToggle]);
+    // Trigger onChange when both date and time are set
+    const notifyChange = useCallback((date, time) => {
+        if (!onChangeProp)
+            return;
+        if (date && time) {
+            const combined = combineDateTime(date, time);
+            onChangeProp(combined);
         }
-        onKeyDown(event);
-        if (event.key === 'Enter') {
-            onConfirm();
+    }, [combineDateTime, onChangeProp]);
+    // Handle left complete - auto focus right
+    const onLeftComplete = useCallback(() => {
+        if (timeValue) {
+            onClose();
         }
-    }, [onConfirm, onKeyDown, onKeyDownProp]);
-    const onResolvedBlur = useCallback((event) => {
-        if (onBlurProp) {
-            onBlurProp(event);
+        else {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRightRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
         }
-        onBlur(event);
-    }, [onBlur, onBlurProp]);
-    const resolvedInputProps = {
-        ...restInputProp,
-        size: inputSize,
-        onFocus,
-        onKeyDown: onResolvedKeyDown,
-        onBlur: onResolvedBlur,
-    };
-    /** Popper positioning */
-    const anchorRef = useRef(null);
-    const panelRef = useRef(null);
-    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
-    /** Blur, click away and key down close */
-    const onClose = useCallback(() => {
-        onChange(valueProp);
-        onPanelToggle(false);
-    }, [onChange, onPanelToggle, valueProp]);
+    }, [timeValue, onClose]);
+    // Handle left complete - auto focus right
+    const onRightComplete = useCallback(() => {
+        if (dateValue) {
+            onClose();
+        }
+        else {
+            setTimeout(() => {
+                var _a;
+                (_a = inputLeftRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [dateValue, onClose]);
+    // Handle date change from input
+    const onChangeLeft = useCallback((isoValue) => {
+        if (!isoValue) {
+            setDateValue(undefined);
+            return;
+        }
+        if (isValid(isoValue)) {
+            setDateValue(isoValue);
+            setReferenceDate(startOf(isoValue, 'day'));
+            notifyChange(isoValue, timeValue);
+        }
+    }, [isValid, notifyChange, startOf, timeValue]);
+    const onChangeRight = useCallback((isoValue) => {
+        if (!isoValue) {
+            setTimeValue(undefined);
+            return;
+        }
+        if (isValid(isoValue)) {
+            setTimeValue(isoValue);
+            notifyChange(dateValue, isoValue);
+        }
+    }, [dateValue, isValid, notifyChange]);
+    const onCalendarChange = useCallback((target) => {
+        setDateValue(target);
+        setReferenceDate(startOf(target, 'day'));
+        notifyChange(target, timeValue);
+        onLeftComplete();
+    }, [notifyChange, startOf, timeValue, onLeftComplete]);
+    // Handle time change from panel
+    const onTimePanelChange = useCallback((target) => {
+        if (!target)
+            return;
+        setTimeValue(target);
+        notifyChange(dateValue, target);
+        onRightComplete();
+    }, [dateValue, notifyChange, onRightComplete]);
+    // Document event close for calendar
     usePickerDocumentEventClose({
-        open,
         anchorRef,
-        popperRef: panelRef,
-        lastElementRefInFlow: inputRef,
+        lastElementRefInFlow: inputLeftRef,
+        onChangeClose: onClose,
         onClose,
+        open: openCalendar,
+        popperRef: calendarPanelRef,
+    });
+    // Document event close for time panel
+    usePickerDocumentEventClose({
+        anchorRef,
+        lastElementRefInFlow: inputRightRef,
         onChangeClose: onClose,
+        onClose,
+        open: openTimePanel,
+        popperRef: timePanelRef,
     });
-    /** Bind on change to on clear */
-    const onClear = () => {
-        onChange(undefined);
+    const onClear = useCallback((evt) => {
+        setDateValue(undefined);
+        setTimeValue(undefined);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
-    };
-    /** Icon */
-    const onIconClick = (e) => {
-        e.stopPropagation();
-        if (open) {
-            onChange(valueProp);
+        onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(evt);
+    }, [onChangeProp, onClearProp]);
+    const onCalendarIconClick = useCallback(() => {
+        var _a;
+        if (readOnly || disabled)
+            return;
+        if (focusedInput) {
+            setFocusedInput(null);
+            onPanelToggle(false, null);
+        }
+        else {
+            (_a = inputLeftRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        onPanelToggle(!open);
-    };
-    const suffixActionIcon = jsx(Icon, { icon: ClockIcon, onClick: onIconClick });
-    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { 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: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DateTimePickerPanel, { ref: panelRef, anchor: anchorRef, calendarProps: calendarProps, confirmText: confirmText, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, referenceDate: referenceDate, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
+    }, [disabled, focusedInput, onPanelToggle, readOnly]);
+    const suffix = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarTimeIcon, onClick: onCalendarIconClick }));
+    return (jsxs(Fragment, { children: [jsx(PickerTriggerWithSeparator, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, formatLeft: formatDate, formatRight: formatTime, fullWidth: fullWidth, inputLeftRef: inputLeftRef, inputRightRef: inputRightRef, onBlurLeft: () => { }, onBlurRight: () => { }, onChangeLeft: onChangeLeft, onChangeRight: onChangeRight, onClear: onClear, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onLeftComplete: onLeftComplete, onRightComplete: onRightComplete, placeholderLeft: placeholderLeft, placeholderRight: placeholderRight, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffix, valueLeft: displayDateValue, valueRight: displayTimeValue }), jsx(DatePickerCalendar, { ref: calendarPanelRef, anchor: anchorRef, calendarProps: calendarProps, calendarRef: calendarRef, disabledMonthSwitch: disabledMonthSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isHalfYearDisabled: isHalfYearDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: openCalendar, popperProps: popperProps, referenceDate: referenceDate, value: dateValue }), jsx(TimePickerPanel, { ref: timePanelRef, anchor: anchorRef, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onTimePanelChange, open: openTimePanel, popperProps: popperPropsTime, secondStep: secondStep, value: timeValue })] }));
 });
 
 export { DateTimePicker as default };

package/DateTimePicker/index.d.ts

@@ -1,2 +1,2 @@
-export { DateTimePickerPanelProps, default as DateTimePickerPanel, } from './DateTimePickerPanel';
-export { DateTimePickerProps, default } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';
+export { default } from './DateTimePicker';

package/DateTimePicker/index.js

@@ -1,2 +1 @@
-export { default as DateTimePickerPanel } from './DateTimePickerPanel.js';
 export { default } from './DateTimePicker.js';

package/Drawer/Drawer.d.ts

@@ -1,12 +1,53 @@
-import { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+import { DrawerSize } from '@mezzanine-ui/core/drawer';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface DrawerProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+import { BackdropProps } from '../Backdrop';
+export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<BackdropProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'onBackdropClick' | 'onClose' | 'open'> {
     /**
-     * Whether the drawer placement.
-     * @default 'left'
+     * Text for the ghost action button in the bottom action area.
      */
-    placement?: DrawerPlacement;
+    bottomGhostActionText?: string;
+    /**
+     * Click handler for the ghost action button in the bottom action area.
+     */
+    bottomOnGhostActionClick?: VoidFunction;
+    /**
+     * Click handler for the primary action button in the bottom action area.
+     */
+    bottomOnPrimaryActionClick?: VoidFunction;
+    /**
+     * Click handler for the secondary action button in the bottom action area.
+     */
+    bottomOnSecondaryActionClick?: VoidFunction;
+    /**
+     * Text for the primary action button in the bottom action area.
+     */
+    bottomPrimaryActionText?: string;
+    /**
+     * Text for the secondary action button in the bottom action area.
+     */
+    bottomSecondaryActionText?: string;
+    /**
+     * Controls whether to disable closing drawer while escape key down.
+     * @default false
+     */
+    disableCloseOnEscapeKeyDown?: boolean;
+    /**
+     * Title text displayed in the drawer header.
+     */
+    headerTitle?: string;
+    /**
+     * Controls whether to display the bottom action area.
+     */
+    isBottomDisplay?: boolean;
+    /**
+     * Controls whether to display the header area.
+     */
+    isHeaderDisplay?: boolean;
+    /**
+     * Controls the width of the drawer.
+     * @default 'medium'
+     */
+    size?: DrawerSize;
 }
 declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/Drawer/Drawer.js

@@ -1,18 +1,43 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
 import { drawerClasses } from '@mezzanine-ui/core/drawer';
-import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
+import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
+import useTopStack from '../_internal/SlideFadeOverlay/useTopStack.js';
+import ClearActions from '../ClearActions/ClearActions.js';
+import Button from '../Button/Button.js';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Backdrop from '../Backdrop/Backdrop.js';
+import Slide from '../Transition/Slide.js';
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
-    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
-    const slideFadeDirection = useMemo(() => ({
-        top: 'down',
-        left: 'right',
-        right: 'left',
-        bottom: 'up',
-    }), []);
-    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
+    const { bottomGhostActionText, bottomOnGhostActionClick, bottomOnPrimaryActionClick, bottomOnSecondaryActionClick, bottomPrimaryActionText, bottomSecondaryActionText, children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, headerTitle, isBottomDisplay, isHeaderDisplay, onBackdropClick, onClose, open, size = 'medium', ...rest } = props;
+    const [exited, setExited] = useState(true);
+    /**
+     * Escape keydown close: escape will only close the top drawer
+     */
+    const checkIsOnTheTop = useTopStack(open);
+    useDocumentEscapeKeyDown(() => {
+        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (checkIsOnTheTop()) {
+                event.stopPropagation();
+                onClose();
+            }
+        };
+    }, [disableCloseOnEscapeKeyDown, checkIsOnTheTop, open, onClose]);
+    if (!open && exited) {
+        return null;
+    }
+    return (jsx(Backdrop, { className: drawerClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(Slide, { duration: {
+                enter: MOTION_DURATION.moderate,
+                exit: MOTION_DURATION.moderate,
+            }, easing: {
+                enter: MOTION_EASING.entrance,
+                exit: MOTION_EASING.exit,
+            }, in: open, onEntered: () => setExited(false), onExited: () => setExited(true), ref: ref, children: jsxs("div", { ...rest, className: cx(drawerClasses.host, drawerClasses.right, drawerClasses.size(size), className), children: [isHeaderDisplay && (jsxs("div", { className: drawerClasses.header, children: [headerTitle, jsx(ClearActions, { onClick: onClose })] })), jsx("div", { className: drawerClasses.content, children: children }), isBottomDisplay && (jsxs("div", { className: drawerClasses.bottom, children: [jsx("div", { children: bottomGhostActionText && bottomOnGhostActionClick && (jsx(Button, { onClick: bottomOnGhostActionClick, type: "button", variant: "base-ghost", children: bottomGhostActionText })) }), jsxs("div", { className: drawerClasses['bottom__actions'], children: [bottomSecondaryActionText && bottomOnSecondaryActionClick && (jsx(Button, { onClick: bottomOnSecondaryActionClick, type: "button", variant: "base-secondary", children: bottomSecondaryActionText })), bottomPrimaryActionText && bottomOnPrimaryActionClick && (jsx(Button, { onClick: bottomOnPrimaryActionClick, type: "button", variant: "base-primary", children: bottomPrimaryActionText }))] })] }))] }) }) }));
 });
 
 export { Drawer as default };

package/Drawer/index.d.ts

@@ -1,2 +1,3 @@
 export type { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-export { DrawerProps, default } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { default } from './Drawer';

package/Dropdown/Dropdown.js

@@ -1,29 +1,19 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
+import { size } from '@floating-ui/react-dom';
 import { useClickAway } from '../hooks/useClickAway.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Popper from '../Popper/Popper.js';
 
-const popperOptions = {
-    modifiers: [
-        {
-            name: 'sameWidth',
-            enabled: true,
-            phase: 'beforeWrite',
-            requires: ['computeStyles'],
-            fn: ({ state }) => {
-                const reassignState = state;
-                reassignState.styles.popper.width = 'auto';
-                reassignState.styles.popper.minWidth = `${state.rects.reference.width}px`;
-            },
-            effect: ({ state }) => {
-                const reassignState = state;
-                reassignState.elements.popper.style.width = 'auto';
-                reassignState.elements.popper.style.minWidth = `${state.elements.reference.getBoundingClientRect().width}px`;
-            },
-        },
-    ],
-};
+// Middleware to make the dropdown menu have the same width as the reference element
+const sameWidthMiddleware = size({
+    apply({ rects, elements }) {
+        Object.assign(elements.floating.style, {
+            width: 'auto',
+            minWidth: `${rects.reference.width}px`,
+        });
+    },
+});
 const Dropdown = forwardRef(function Dropdown(props, ref) {
     var _a;
     const { children, disableClickAway = false, menu, onClose, popperProps, ...rest } = props;
@@ -31,7 +21,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     const popperRef = useRef(null);
     const composedRef = useComposeRefs([ref, popperRef]);
     const open = popperProps === null || popperProps === void 0 ? void 0 : popperProps.open;
-    const modifiers = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.modifiers) || [];
+    const middleware = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.middleware) || [];
     useClickAway(() => {
         if (!open || disableClickAway || !onClose) {
             return;
@@ -45,7 +35,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     return (jsxs(Fragment, { children: [children(anchor), jsx(Popper, { ...popperProps, ref: composedRef, ...rest, anchor: anchor, options: {
                     placement: 'top-start',
                     ...popperProps === null || popperProps === void 0 ? void 0 : popperProps.options,
-                    modifiers: [...(popperOptions.modifiers || []), ...modifiers],
+                    middleware: [sameWidthMiddleware, ...middleware],
                 }, children: menu })] }));
 });
 

package/Dropdown/index.d.ts

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

package/Empty/Empty.d.ts

@@ -1,18 +1,3 @@
-import { ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface EmptyProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'> {
-    /**
-     * if true, the empty component will be 100% height of it's parent
-     */
-    fullHeight?: boolean;
-    /**
-     * Override default icon.
-     */
-    image?: ReactNode;
-    /**
-     * Optionally given a title. If not required, simply use react children to display description.
-     */
-    title?: ReactNode;
-}
+import { EmptyProps } from '.';
 declare const Empty: import("react").ForwardRefExoticComponent<EmptyProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Empty;

package/Empty/Empty.js

@@ -1,15 +1,67 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { emptyClasses } from '@mezzanine-ui/core/empty';
-import { FolderOpenIcon } from '@mezzanine-ui/icons';
+import { SystemIcon, FolderOpenIcon, NotificationIcon, BoxIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import { EmptyMainInitialDataIcon } from './icons/EmptyMainInitialDataIcon.js';
+import { EmptyMainResultIcon } from './icons/EmptyMainResultIcon.js';
+import { EmptyMainSystemIcon } from './icons/EmptyMainSystemIcon.js';
+import { flattenChildren } from '../utils/flatten-children.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
+const iconMap = {
+    custom: null,
+    'initial-data': BoxIcon,
+    notification: NotificationIcon,
+    result: FolderOpenIcon,
+    system: SystemIcon,
+};
+const mainIconMap = {
+    custom: null,
+    'initial-data': jsx(EmptyMainInitialDataIcon, { className: emptyClasses.icon }),
+    notification: null,
+    result: jsx(EmptyMainResultIcon, { className: emptyClasses.icon }),
+    system: jsx(EmptyMainSystemIcon, { className: emptyClasses.icon }),
+};
+const renderButtonOrElement = (button, size, variant) => {
+    if (!button)
+        return null;
+    if (isValidElement(button)) {
+        return cloneElement(button, { size, variant });
+    }
+    return jsx(Button, { ...button, size: size, variant: variant });
+};
 const Empty = forwardRef(function Empty(props, ref) {
-    const { children, className, fullHeight, image = jsx(Icon, { className: emptyClasses.icon, icon: FolderOpenIcon }), title, ...rest } = props;
-    return (jsxs("div", { ref: ref, ...rest, className: cx(emptyClasses.host, {
-            [emptyClasses.fullHeight]: fullHeight,
-        }, className), children: [image, title && jsx("div", { className: emptyClasses.title, children: title }), children && jsx("div", { className: emptyClasses.description, children: children })] }));
+    const { actions, children, className, description, pictogram, size = 'main', title, type = 'initial-data', ...rest } = props;
+    const icon = (size === 'main'
+        ? mainIconMap[type]
+        : iconMap[type] && (jsx(Icon, { className: emptyClasses.icon, icon: iconMap[type] }))) || null;
+    const flatChildren = flattenChildren(children);
+    const fragmentButtons = actions &&
+        ('secondaryButton' in actions ? (jsxs(Fragment, { children: [renderButtonOrElement(actions.secondaryButton, size, 'base-secondary'), renderButtonOrElement(actions.primaryButton, size, 'base-primary')] })) : (renderButtonOrElement(actions, size, 'base-secondary')));
+    const renderChildren = !fragmentButtons &&
+        flatChildren.length > 0 &&
+        flatChildren.map((child, index) => {
+            if (!isValidElement(child)) {
+                return null;
+            }
+            else if (child.type === Button) {
+                switch (index) {
+                    case 0:
+                        return renderButtonOrElement(child, size, 'base-secondary');
+                    case 1:
+                        return renderButtonOrElement(child, size, 'base-primary');
+                    default:
+                        console.warn('Only up to two Button components are allowed as children of Empty.');
+                        return null;
+                }
+            }
+            console.warn('Only Button components are allowed as children of Empty.');
+            return null;
+        });
+    return (jsx("div", { ...rest, className: cx(emptyClasses.host, emptyClasses.size(size), className), ref: ref, children: jsxs("div", { className: emptyClasses.container, children: [pictogram ? jsx("div", { className: emptyClasses.icon, children: pictogram }) : icon, jsx("p", { className: emptyClasses.title, children: title }), description && jsx("p", { className: emptyClasses.description, children: description }), (actions || children) && size !== 'minor' && (jsx(ButtonGroup, { className: emptyClasses.actions, children: fragmentButtons || renderChildren }))] }) }));
 });
 
 export { Empty as default };

package/Empty/icons/EmptyMainInitialDataIcon.d.ts

@@ -0,0 +1,4 @@
+export interface EmptyMainInitialDataIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const EmptyMainInitialDataIcon: import("react").ForwardRefExoticComponent<Omit<EmptyMainInitialDataIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/Empty/icons/EmptyMainInitialDataIcon.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const EmptyMainInitialDataIcon = forwardRef(function EmptyInitialDataIcon(props, ref) {
+    const { className, size = 64, ...rest } = props;
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_15033_10920", x1: "27.52", x2: "5.12", y1: "11.7333", y2: "52.6933", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_15033_10920", x1: "43.2", x2: "38.2673", y1: "11.7333", y2: "52.0904", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsx("clipPath", { id: "clip0_15033_10920", children: jsx("rect", { fill: "white", height: "64", width: "64" }) })] }), jsxs("g", { clipPath: "url(#clip0_15033_10920)", children: [jsx("path", { d: "M5.12 11.7333H27.52V52.6933H6.11999C5.56771 52.6933 5.12 52.2456 5.12 51.6933V11.7333Z", fill: "url(#paint0_linear_15033_10920)" }), jsx("path", { d: "M5.10416 11.7333H27.4282L22.3184 27.5737C22.1852 27.9867 21.8007 28.2667 21.3667 28.2667H1.14414C0.465656 28.2667 -0.0158672 27.6054 0.192428 26.9597L5.10416 11.7333Z", fill: "#E5E7EB" }), jsx("path", { d: "M27.52 11.7333H58.88V51.6933C58.88 52.2456 58.4323 52.6933 57.88 52.6933H27.52V11.7333Z", fill: "url(#paint1_linear_15033_10920)" }), jsx("path", { d: "M27.4282 11.7333H58.8871L63.7988 26.9597C64.0071 27.6054 63.5255 28.2667 62.8471 28.2667H33.4897C33.0557 28.2667 32.6712 27.9867 32.5379 27.5737L27.4282 11.7333Z", fill: "#E5E7EB" })] })] }));
+});
+
+export { EmptyMainInitialDataIcon };

package/Empty/icons/EmptyMainResultIcon.d.ts

@@ -0,0 +1,4 @@
+export interface EmptyMainResultIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const EmptyMainResultIcon: import("react").ForwardRefExoticComponent<Omit<EmptyMainResultIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;