@mezzanine-ui/react 0.6.4

package/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,122 @@
+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 { useComposeRefs } from '../hooks/useComposeRefs.js';
+import DateTimePickerPanel from './DateTimePickerPanel.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` time picker.
+ * Notice that any component related to 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, confirmText, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, 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);
+            }
+        }
+    }, [onPanelToggleProp, preventOpen]);
+    const onFocus = useCallback((event) => {
+        if (onFocusProp) {
+            onFocusProp(event);
+        }
+        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);
+        }
+        onPanelToggle(false);
+    }, [internalValue, onChangeProp, onPanelToggle]);
+    /** using internal reference date */
+    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'hour'));
+    useEffect(() => {
+        if (internalValue) {
+            setReferenceDate(internalValue);
+        }
+    }, [internalValue]);
+    /** Bind input props */
+    const onResolvedKeyDown = useCallback((event) => {
+        if (onKeyDownProp) {
+            onKeyDownProp(event);
+        }
+        onKeyDown(event);
+        if (event.key === 'Enter') {
+            onConfirm();
+        }
+    }, [onConfirm, onKeyDown, onKeyDownProp]);
+    const onResolvedBlur = useCallback((event) => {
+        if (onBlurProp) {
+            onBlurProp(event);
+        }
+        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]);
+    usePickerDocumentEventClose({
+        open,
+        anchorRef,
+        popperRef: panelRef,
+        lastElementRefInFlow: inputRef,
+        onClose,
+        onChangeClose: onClose,
+    });
+    /** Bind on change to on clear */
+    const onClear = () => {
+        onChange(undefined);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+    };
+    /** Icon */
+    const onIconClick = (e) => {
+        e.stopPropagation();
+        if (open) {
+            onChange(valueProp);
+        }
+        onPanelToggle(!open);
+    };
+    const suffixActionIcon = (jsx(Icon, { icon: ClockIcon, onClick: onIconClick }, void 0));
+    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 }, void 0),
+            jsx(DateTimePickerPanel, { ref: panelRef, anchor: anchorRef, calendarProps: calendarProps, confirmText: confirmText, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, referenceDate: referenceDate, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue }, void 0)] }, void 0));
+});
+
+export default DateTimePicker;

package/DateTimePicker/DateTimePickerPanel.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { TimePanelProps } from '../TimePanel';
+import { CalendarProps } from '../Calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
+export interface DateTimePickerPanelProps extends Omit<TimePanelProps, Exclude<keyof NativeElementPropsWithoutKeyAndRef<'div'>, 'className' | 'style' | 'id'> | 'withoutAction' | 'onChange' | 'value' | 'withoutAction'>, 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'>;
+    /**
+     * Change Handler. Receive `DateType` as props.
+     */
+    onChange?: (value?: DateType) => void;
+    /**
+     * Other props you may provide to `Popper` component
+     */
+    popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
+    /**
+     * Display value of the panel.
+     */
+    value?: DateType;
+}
+/**
+ * The react component for `mezzanine` time picker panel.
+ */
+declare const DateTimePickerPanel: import("react").ForwardRefExoticComponent<DateTimePickerPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DateTimePickerPanel;

package/DateTimePicker/DateTimePickerPanel.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { dateTimePickerClasses } from '@mezzanine-ui/core/date-time-picker';
+import { forwardRef } 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';
+import TimePanel from '../TimePanel/TimePanel.js';
+import TimePanelAction from '../TimePanel/TimePanelAction.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` time picker panel.
+ */
+const DateTimePickerPanel = forwardRef(function TimePickerPanel(props, ref) {
+    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, setHour, setMinute, setSecond, getHour, getMinute, getSecond, } = useCalendarContext();
+    const { anchor, calendarProps, className, confirmText, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onConfirm, open, popperProps, referenceDate: referenceDateProp, secondPrefix, secondStep, value, ...restHostProps } = props;
+    const mode = 'day';
+    const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
+    const onCalendarChange = (target) => {
+        if (currentMode === 'day' || currentMode === 'week') {
+            updateReferenceDate(target);
+            popModeStack();
+            if (currentMode === mode && onChangeProp) {
+                onChangeProp(target);
+            }
+        }
+        if (currentMode === 'month') {
+            const result = setMonth(referenceDate, getMonth(target));
+            updateReferenceDate(result);
+            popModeStack();
+        }
+        if (currentMode === 'year') {
+            const result = setYear(referenceDate, getYear(target));
+            updateReferenceDate(result);
+            popModeStack();
+        }
+    };
+    const onTimePanelChange = (target) => {
+        const result = setHour(setMinute(setSecond(referenceDate, getSecond(target)), getMinute(target)), getHour(target));
+        updateReferenceDate(result);
+        if (currentMode === mode && onChangeProp) {
+            onChangeProp(result);
+        }
+    };
+    return (jsx(InputTriggerPopper, Object.assign({}, popperProps, { ref: ref, anchor: anchor, open: open, fadeProps: fadeProps }, { children: jsxs("div", Object.assign({}, restHostProps, { className: cx(dateTimePickerClasses.panel, className) }, { children: [jsxs("div", Object.assign({ className: dateTimePickerClasses.panelSelectors }, { children: [jsx(Calendar, Object.assign({}, calendarProps, { disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onCalendarChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value, className: dateTimePickerClasses.panelCalendar }), void 0),
+                        jsx(TimePanel, { hideHour: hideHour, hourStep: hourStep, hideMinute: hideMinute, minuteStep: minuteStep, hideSecond: hideSecond, secondStep: secondStep, hourPrefix: hourPrefix, minutePrefix: minutePrefix, secondPrefix: secondPrefix, onChange: onTimePanelChange, value: value, withoutAction: true }, void 0)] }), void 0),
+                jsx(TimePanelAction, { onConfirm: onConfirm, confirmText: confirmText }, void 0)] }), void 0) }), void 0));
+});
+
+export default DateTimePickerPanel;

package/DateTimePicker/index.d.ts

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

package/DateTimePicker/index.js

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

package/Drawer/Drawer.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { DrawerPlacement } from '@mezzanine-ui/core/drawer';
+import { OverlayProps } from '../Overlay';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'hideBackdrop' | 'invisibleBackdrop' | 'onBackdropClick' | 'onClose' | 'open'> {
+    /**
+     * Controls whether to disable closing drawer while escape key down.
+     * @default false
+     */
+    disableCloseOnEscapeKeyDown?: boolean;
+    /**
+     * Whether the drawer placement.
+     * @default 'left'
+     */
+    placement?: DrawerPlacement;
+}
+declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Drawer;

package/Drawer/Drawer.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { drawerClasses } from '@mezzanine-ui/core/drawer';
+import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
+import Overlay from '../Overlay/Overlay.js';
+import SlideFade from '../Transition/SlideFade.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 [exited, setExited] = useState(true);
+    useDocumentEscapeKeyDown(() => {
+        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
+            return;
+        }
+        return onClose;
+    }, [
+        disableCloseOnEscapeKeyDown,
+        open,
+        onClose,
+    ]);
+    if (!open && exited) {
+        return null;
+    }
+    const slideFadeDirection = {
+        top: 'down',
+        left: 'right',
+        right: 'left',
+        bottom: 'up',
+    };
+    return (jsx(Overlay, Object.assign({ className: drawerClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(SlideFade, Object.assign({ ref: ref, direction: slideFadeDirection[placement], in: open, onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: jsx("div", Object.assign({}, rest, { className: cx(drawerClasses.host, drawerClasses[placement], className) }, { children: children }), void 0) }), void 0) }), void 0));
+});
+
+export default Drawer;

package/Drawer/index.d.ts

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

package/Drawer/index.js

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

package/Dropdown/Dropdown.d.ts

@@ -0,0 +1,25 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref } from 'react';
+import { PopperProps } from '../Popper';
+import { ClickAwayEvent } from '../hooks/useClickAway';
+export interface DropdownProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'children'> {
+    children: (ref: Ref<HTMLElement>) => ReactNode;
+    /**
+     * Whether to disable triggering onClose while clicked away.
+     * @default false
+     */
+    disableClickAway?: boolean;
+    /**
+     * The dropdown menu
+     */
+    menu?: ReactNode;
+    /**
+     * The handler fired while clicked away.
+     */
+    onClose?: (event: ClickAwayEvent) => void;
+    /**
+     * the props of popper
+     */
+    popperProps?: PopperProps;
+}
+declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Dropdown;

package/Dropdown/Dropdown.js

@@ -0,0 +1,60 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+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`;
+            },
+        },
+    ],
+};
+const Dropdown = forwardRef(function Dropdown(props, ref) {
+    var _a;
+    const { children, disableClickAway = false, menu, onClose, popperProps, ...rest } = props;
+    const anchor = useRef(null);
+    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) || [];
+    useClickAway(() => {
+        if (!open || disableClickAway || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (onClose) {
+                onClose(event);
+            }
+        };
+    }, popperRef, [
+        disableClickAway,
+        onClose,
+        open,
+        popperRef,
+    ]);
+    return (jsxs(Fragment, { children: [children(anchor), jsx(Popper, Object.assign({}, popperProps, { ref: composedRef }, rest, { anchor: anchor, options: {
+                    placement: 'top-start',
+                    ...popperProps === null || popperProps === void 0 ? void 0 : popperProps.options,
+                    modifiers: [
+                        ...(popperOptions.modifiers || []),
+                        ...modifiers,
+                    ],
+                } }, { children: menu }), void 0)] }, void 0));
+});
+
+export default Dropdown;

package/Dropdown/index.d.ts

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

package/Dropdown/index.js

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

package/Empty/Empty.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const Empty: import("react").ForwardRefExoticComponent<EmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Empty;

package/Empty/Empty.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { emptyClasses } from '@mezzanine-ui/core/empty';
+import { FolderOpenIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const Empty = forwardRef(function Empty(props, ref) {
+    const { children, className, fullHeight, image = jsx(Icon, { className: emptyClasses.icon, icon: FolderOpenIcon }, void 0), title, ...rest } = props;
+    return (jsxs("div", Object.assign({ ref: ref }, rest, { className: cx(emptyClasses.host, {
+            [emptyClasses.fullHeight]: fullHeight,
+        }, className) }, { children: [image, title && jsx("div", Object.assign({ className: emptyClasses.title }, { children: title }), void 0),
+            children && jsx("div", Object.assign({ className: emptyClasses.description }, { children: children }), void 0)] }), void 0));
+});
+
+export default Empty;

package/Empty/index.d.ts

@@ -0,0 +1 @@
+export { EmptyProps, default, } from './Empty';

package/Empty/index.js

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

package/Form/FormControlContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Severity } from '@mezzanine-ui/system/severity';
+export interface FormControl {
+    disabled: boolean;
+    fullWidth: boolean;
+    required: boolean;
+    severity?: Severity;
+}
+export declare const FormControlContext: import("react").Context<FormControl | undefined>;

package/Form/FormControlContext.js

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

package/Form/FormField.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { Severity } from '@mezzanine-ui/system/severity';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * To control the field passed from children whether should be disabled.
+     * The form message won't appear if disabled.
+     */
+    disabled?: boolean;
+    /**
+     * To control the field passed from children whether should be fullWidth.
+     */
+    fullWidth?: boolean;
+    /**
+     * To control the field passed from children whether should be required.
+     */
+    required?: boolean;
+    /**
+     * To control the severity of field passed from children and form message.
+     */
+    severity?: Severity;
+}
+/**
+ * The react component for `mezzanine` form field.
+ */
+declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FormField;

package/Form/FormField.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { formFieldClasses } from '@mezzanine-ui/core/form';
+import { FormControlContext } from './FormControlContext.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` form field.
+ */
+const FormField = forwardRef(function FormField(props, ref) {
+    const { children, className, disabled = false, fullWidth = false, required = false, severity, ...rest } = props;
+    const formControl = {
+        disabled,
+        fullWidth,
+        required,
+        severity,
+    };
+    return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(formFieldClasses.host, severity && formFieldClasses.severity(severity), {
+            [formFieldClasses.disabled]: disabled,
+            [formFieldClasses.fullWidth]: fullWidth,
+        }, className) }, { children: jsx(FormControlContext.Provider, Object.assign({ value: formControl }, { children: children }), void 0) }), void 0));
+});
+
+export default FormField;

package/Form/FormLabel.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface FormLabelProps extends NativeElementPropsWithoutKeyAndRef<'label'> {
+    remark?: ReactNode;
+    remarkIcon?: ReactNode;
+}
+/**
+ * The react component for `mezzanine` form label.
+ */
+declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default FormLabel;

package/Form/FormLabel.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { formFieldClasses } from '@mezzanine-ui/core/form';
+import { FormControlContext } from './FormControlContext.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` form label.
+ */
+const FormLabel = forwardRef(function FormLabel(props, ref) {
+    const { children, className, htmlFor, remark, remarkIcon, ...rest } = props;
+    const { required } = useContext(FormControlContext) || {};
+    return (jsxs("label", Object.assign({}, rest, { ref: ref, className: cx(formFieldClasses.label, className), htmlFor: htmlFor }, { children: [jsxs("span", { children: [children, required && jsx("span", Object.assign({ className: formFieldClasses.asterisk }, { children: "*" }), void 0)] }, void 0),
+            (remark || remarkIcon) && (jsxs("span", Object.assign({ className: formFieldClasses.remark }, { children: [jsx("span", { children: remark }, void 0), remarkIcon] }), void 0))] }), void 0));
+});
+
+export default FormLabel;

package/Form/FormMessage.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type FormMessageProps = NativeElementPropsWithoutKeyAndRef<'span'>;
+/**
+ * The react component for `mezzanine` form message.
+ */
+declare const FormMessage: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLSpanElement>>;
+export default FormMessage;

package/Form/FormMessage.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { formMessageIcons, formFieldClasses } from '@mezzanine-ui/core/form';
+import { FormControlContext } from './FormControlContext.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` form message.
+ */
+const FormMessage = forwardRef(function FormMessage(props, ref) {
+    const { children, className, ...rest } = props;
+    const { severity } = useContext(FormControlContext) || {};
+    const icon = severity ? formMessageIcons[severity] : null;
+    return (jsxs("span", Object.assign({}, rest, { ref: ref, className: cx(formFieldClasses.message, className) }, { children: [icon && (jsx(Icon, { className: formFieldClasses.severityIcon, icon: icon }, void 0)), children] }), void 0));
+});
+
+export default FormMessage;

package/Form/index.d.ts

@@ -0,0 +1,5 @@
+export * from './typings';
+export * from './FormControlContext';
+export { FormFieldProps, default as FormField } from './FormField';
+export { FormLabelProps, default as FormLabel } from './FormLabel';
+export { FormMessageProps, default as FormMessage } from './FormMessage';

package/Form/index.js

@@ -0,0 +1,4 @@
+export { FormControlContext } from './FormControlContext.js';
+export { default as FormField } from './FormField.js';
+export { default as FormLabel } from './FormLabel.js';
+export { default as FormMessage } from './FormMessage.js';

package/Form/typings.d.ts

@@ -0,0 +1,4 @@
+export declare type FormElementFocusHandlers = {
+    onBlur?: VoidFunction;
+    onFocus?: VoidFunction;
+};

package/Form/useAutoCompleteValueControl.d.ts

@@ -0,0 +1,23 @@
+import { Dispatch, MouseEvent, SetStateAction } from 'react';
+import { SelectValue } from '../Select/typings';
+export interface UseAutoCompleteValueControl {
+    defaultValue?: string;
+    disabledOptionsFilter: boolean;
+    onChange?(newOption: string): any;
+    onClear?(e: MouseEvent<Element>): void;
+    onClose?(): void;
+    options: string[];
+    value?: string;
+}
+export interface AutoCompleteValueControl {
+    focused: boolean;
+    onChange: (v: SelectValue | null) => SelectValue[];
+    onClear(e: MouseEvent<Element>): void;
+    onFocus: (f: boolean) => void;
+    options: string[];
+    searchText: string;
+    setSearchText: Dispatch<SetStateAction<string>>;
+    setValue: Dispatch<SetStateAction<string>>;
+    value: SelectValue[];
+}
+export declare function useAutoCompleteValueControl(props: UseAutoCompleteValueControl): AutoCompleteValueControl;