@mezzanine-ui/react 1.0.0-rc.0 → 1.0.0-rc.2

package/Badge/Badge.d.ts

@@ -6,24 +6,28 @@ declare const Badge: import("react").ForwardRefExoticComponent<(Omit<Omit<Native
     children?: never;
     count: number;
     overflowCount?: number;
+    size?: never;
     text?: never;
     variant: BadgeCountVariant;
 }, "ref"> | Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
     children?: never;
     count?: never;
     overflowCount?: never;
+    size?: import("@mezzanine-ui/core/badge").BadgeTextSize;
     text?: string;
     variant: import("@mezzanine-ui/core/badge").BadgeDotVariant;
 }, "ref"> | Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
     children?: import("react").ReactNode;
     count?: never;
     overflowCount?: never;
+    size?: never;
     text?: never;
     variant: import("@mezzanine-ui/core/badge").BadgeDotVariant;
 }, "ref"> | Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
     children?: never;
     count?: never;
     overflowCount?: never;
+    size?: import("@mezzanine-ui/core/badge").BadgeTextSize;
     text: string;
     variant: import("@mezzanine-ui/core/badge").BadgeTextVariant;
 }, "ref">) & import("react").RefAttributes<HTMLSpanElement>>;

package/Badge/Badge.js

@@ -14,8 +14,8 @@ const isCountVariant = (variant) => [
  * The react component for `mezzanine` badge.
  */
 const Badge = forwardRef(function Badge(props, ref) {
-    const { children, count, className, overflowCount, text, variant, ...rest } = props;
-    return (jsxs("div", { className: badgeClasses.container(!!children), children: [children, jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, badgeClasses.variant(variant), { [badgeClasses.hide]: isCountVariant(variant) && count === 0 }, className), children: isCountVariant(variant)
+    const { children, count, className, overflowCount, size, text, variant, ...rest } = props;
+    return (jsxs("div", { className: badgeClasses.container(!!children), children: [children, jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, badgeClasses.variant(variant), { [badgeClasses.hide]: isCountVariant(variant) && count === 0 }, size && badgeClasses.size(size), className), children: isCountVariant(variant)
                     ? overflowCount && count > overflowCount
                         ? `${overflowCount}+`
                         : count

package/Badge/typings.d.ts

@@ -1,4 +1,4 @@
-import { BadgeCountVariant, BadgeDotVariant, BadgeTextVariant } from '@mezzanine-ui/core/badge';
+import { BadgeCountVariant, BadgeDotVariant, BadgeTextSize, BadgeTextVariant } from '@mezzanine-ui/core/badge';
 import { ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from 'react/src/utils/jsx-types';
 export type BadgeProps = Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'children'> & BadgeVariantProps;
@@ -21,6 +21,11 @@ type BadgeCountProps = {
      * it will show overflowCount suffixed with a "+".
      */
     overflowCount?: number;
+    /**
+     * ONLY AVAILABLE FOR DOT WITH TEXT BADGE.
+     * Controls the size of the dot and text.
+     */
+    size?: never;
     /**
      * ONLY AVAILABLE FOR DOT WITH TEXT BADGE.
      * String displayed next to the dot badge.
@@ -35,6 +40,7 @@ type BadgeTextProps = {
     children?: never;
     count?: never;
     overflowCount?: never;
+    size?: BadgeTextSize;
     text: string;
     variant: BadgeTextVariant;
 };
@@ -42,6 +48,11 @@ type BadgeDotWithTextProps = {
     children?: never;
     count?: never;
     overflowCount?: never;
+    /**
+     * Controls the size of the text.
+     * @default 'main'
+     */
+    size?: BadgeTextSize;
     text?: string;
     variant: BadgeDotVariant;
 };
@@ -49,6 +60,7 @@ type BadgeDotProps = {
     children?: ReactNode;
     count?: never;
     overflowCount?: never;
+    size?: never;
     text?: never;
     variant: BadgeDotVariant;
 };

package/Calendar/CalendarDays.js

@@ -14,10 +14,11 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarDays(props) {
-    const { locale, getCalendarGrid, getDate, getMonth, getNow, isDateIncluded, isSameDate, setDate, setMonth, setHour, setMinute, setSecond, setMillisecond, } = useCalendarContext();
+    const { locale, getCalendarGrid, getDate, getMonth, getNow, getWeekends, isDateIncluded, isSameDate, setDate, setMonth, setHour, setMinute, setSecond, setMillisecond, } = useCalendarContext();
     const { className, displayWeekDayLocale = locale, isYearDisabled, isMonthDisabled, isDateDisabled, isDateInRange, onClick: onClickProp, onDateHover, renderAnnotations, referenceDate, value, ...rest } = props;
+    const weekends = useMemo(() => getWeekends(displayWeekDayLocale), [getWeekends, displayWeekDayLocale]);
     const daysGrid = useMemo(() => getCalendarGrid(referenceDate, displayWeekDayLocale), [getCalendarGrid, displayWeekDayLocale, referenceDate]);
-    return (jsx("div", { ...rest, className: cx(calendarClasses.board, className), children: jsxs("div", { className: calendarClasses.daysGrid, children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), daysGrid.map((week, index) => (jsx("div", { className: calendarClasses.row, children: week.map((dateNum) => {
+    return (jsx("div", { ...rest, className: cx(calendarClasses.board, className), children: jsxs("div", { className: calendarClasses.daysGrid, children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), daysGrid.map((week, index) => (jsx("div", { className: calendarClasses.row, children: week.map((dateNum, dayIndex) => {
                         const isPrevMonth = index === 0 && dateNum > 7;
                         const isNextMonth = index > 3 && dateNum <= 14;
                         const thisMonth = getMonth(referenceDate);
@@ -66,7 +67,7 @@ function CalendarDays(props) {
                         ]
                             .filter(Boolean)
                             .join(', ');
-                        return (jsx(CalendarCell, { mode: "day", today: isSameDate(date, getNow()), active: active, disabled: isPrevMonth || isNextMonth, withAnnotation: Boolean(renderAnnotations), isRangeStart: inRangeStart, isRangeEnd: inRangeEnd, children: jsxs("button", { type: "button", "aria-disabled": disabled, disabled: disabled, "aria-label": ariaLabel, "aria-pressed": active, "aria-current": isToday ? 'date' : undefined, onMouseEnter: onMouseEnter, className: cx(calendarClasses.button, {
+                        return (jsx(CalendarCell, { active: active, disabled: isPrevMonth || isNextMonth, isRangeEnd: inRangeEnd, isRangeStart: inRangeStart, isWeekend: weekends[dayIndex], mode: "day", today: isSameDate(date, getNow()), withAnnotation: Boolean(renderAnnotations), children: jsxs("button", { type: "button", "aria-disabled": disabled, disabled: disabled, "aria-label": ariaLabel, "aria-pressed": active, "aria-current": isToday ? 'date' : undefined, onMouseEnter: onMouseEnter, className: cx(calendarClasses.button, {
                                     [calendarClasses.buttonInRange]: inRange,
                                     [calendarClasses.buttonActive]: active,
                                     [calendarClasses.buttonDisabled]: disabled,

package/Calendar/CalendarWeeks.js

@@ -13,8 +13,9 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarWeeks(props) {
-    const { locale, getCalendarGrid, getWeek, getDate, getMonth, getNow, isInMonth, isSameDate, isWeekIncluded, setDate, setMonth, setHour, setMinute, setSecond, setMillisecond, getCurrentWeekFirstDate, } = useCalendarContext();
+    const { locale, getCalendarGrid, getWeek, getDate, getMonth, getNow, getWeekends, isInMonth, isSameDate, isWeekIncluded, setDate, setMonth, setHour, setMinute, setSecond, setMillisecond, getCurrentWeekFirstDate, } = useCalendarContext();
     const { className, displayWeekDayLocale = locale, isYearDisabled, isMonthDisabled, isWeekDisabled, isWeekInRange, onClick: onClickProp, onWeekHover, referenceDate, value, ...rest } = props;
+    const weekends = useMemo(() => getWeekends(displayWeekDayLocale), [getWeekends, displayWeekDayLocale]);
     const daysGrid = useMemo(() => getCalendarGrid(referenceDate, displayWeekDayLocale), [getCalendarGrid, referenceDate, displayWeekDayLocale]);
     // Pre-calculate all weeks data including dates and week first dates
     const weeksData = useMemo(() => {
@@ -143,8 +144,8 @@ function CalendarWeeks(props) {
                                             isSameDate(currentDate, lastWeekDatesMap.lastWeekDates[6]);
                                     cellActive = isFirstWeekFirstDate || isLastWeekLastDate;
                                 }
-                                return (jsx(CalendarCell, { mode: "week", today: isSameDate(dates[dateIndex], getNow()), disabled: disabled ||
-                                        !isInMonth(dates[dateIndex], getMonth(referenceDate)), active: cellActive, isRangeStart: isFirstWeekFirstDate, isRangeEnd: isLastWeekLastDate, children: jsx("div", { className: cx(calendarClasses.button, {
+                                return (jsx(CalendarCell, { active: cellActive, disabled: disabled ||
+                                        !isInMonth(dates[dateIndex], getMonth(referenceDate)), isRangeEnd: isLastWeekLastDate, isRangeStart: isFirstWeekFirstDate, isWeekend: weekends[dateIndex], mode: "week", today: isSameDate(dates[dateIndex], getNow()), children: jsx("div", { className: cx(calendarClasses.button, {
                                             [calendarClasses.buttonInRange]: weekIncluded,
                                             [calendarClasses.buttonActive]: cellActive,
                                         }), style: {

package/Cascader/Cascader.d.ts

@@ -0,0 +1,3 @@
+import { CascaderProps } from './typings';
+declare const Cascader: import("react").ForwardRefExoticComponent<CascaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Cascader;

package/Cascader/Cascader.js

@@ -0,0 +1,241 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useRef, useCallback, useMemo, createElement } from 'react';
+import { cascaderClasses } from '@mezzanine-ui/core/cascader';
+import { offset } from '@floating-ui/react-dom';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import { TransitionGroup } from 'react-transition-group';
+import { useControlValueState } from '../Form/useControlValueState.js';
+import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
+import SelectTrigger from '../Select/SelectTrigger.js';
+import Translate from '../Transition/Translate.js';
+import CascaderPanel from './CascaderPanel.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import Popper from '../Popper/Popper.js';
+import cx from 'clsx';
+
+/**
+ * Walks the options tree using ids from `value` and returns a new activePath
+ * whose items carry proper `children` references from the tree.
+ * Items in `value` may omit `children`, so we cannot rely on them directly
+ * for panel expansion.
+ */
+function resolveActivePath(options, value) {
+    const result = [];
+    let currentOptions = options;
+    for (const selectedItem of value) {
+        const found = currentOptions.find((o) => o.id === selectedItem.id);
+        if (!found)
+            break;
+        result.push(found);
+        if (found.children && found.children.length > 0) {
+            currentOptions = found.children;
+        }
+        else {
+            break;
+        }
+    }
+    return result;
+}
+const Cascader = forwardRef(function Cascader(props, ref) {
+    var _a, _b;
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, dropdownZIndex, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, globalPortal = true, menuMaxHeight, onBlur, onChange: onChangeProp, onFocus, options, placeholder = '', readOnly = false, required = requiredFromFormControl || false, size, value: valueProp, } = props;
+    const [open, setOpen] = useState(false);
+    const [activePath, setActivePath] = useState([]);
+    const [keyboardFocusedIndex, setKeyboardFocusedIndex] = useState(-1);
+    const [value, setValue] = useControlValueState({
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : [],
+        value: valueProp,
+    });
+    const anchorRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const handleOpen = useCallback(() => {
+        if (readOnly || disabled)
+            return;
+        setActivePath(resolveActivePath(options, value));
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        setOpen(true);
+    }, [disabled, onFocus, options, readOnly, value]);
+    const handleClose = useCallback(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        setOpen(false);
+        setKeyboardFocusedIndex(-1);
+    }, [onBlur]);
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        setValue([]);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([]);
+        if (open) {
+            handleClose();
+        }
+    }, [handleClose, onChangeProp, open, setValue]);
+    const handleItemSelect = useCallback((panelIndex, option, isLeaf) => {
+        const newActivePath = [...activePath.slice(0, panelIndex), option];
+        setActivePath(newActivePath);
+        if (isLeaf) {
+            setValue(newActivePath);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newActivePath);
+            handleClose();
+        }
+        else {
+            setKeyboardFocusedIndex(-1);
+        }
+    }, [activePath, handleClose, onChangeProp, setValue]);
+    const panels = useMemo(() => {
+        const result = [options];
+        for (const activeOption of activePath) {
+            if (activeOption.children && activeOption.children.length > 0) {
+                result.push(activeOption.children);
+            }
+            else {
+                break;
+            }
+        }
+        return result;
+    }, [activePath, options]);
+    useDocumentEvents(() => {
+        if (!open)
+            return;
+        const handleClickAway = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            const anchor = anchorRef.current;
+            const dropdown = dropdownRef.current;
+            if ((anchor === null || anchor === void 0 ? void 0 : anchor.contains(target)) || (dropdown === null || dropdown === void 0 ? void 0 : dropdown.contains(target)))
+                return;
+            handleClose();
+        };
+        return {
+            click: handleClickAway,
+            touchend: handleClickAway,
+        };
+    }, [handleClose, open]);
+    useDocumentEvents(() => {
+        if (!open)
+            return;
+        const currentPanelOptions = panels[panels.length - 1];
+        return {
+            keydown(event) {
+                switch (event.key) {
+                    case 'Escape': {
+                        event.preventDefault();
+                        handleClose();
+                        break;
+                    }
+                    case 'ArrowDown': {
+                        event.preventDefault();
+                        let next = keyboardFocusedIndex + 1;
+                        while (next < currentPanelOptions.length &&
+                            currentPanelOptions[next].disabled) {
+                            next++;
+                        }
+                        if (next < currentPanelOptions.length) {
+                            setKeyboardFocusedIndex(next);
+                        }
+                        break;
+                    }
+                    case 'ArrowUp': {
+                        event.preventDefault();
+                        let prev = keyboardFocusedIndex === -1
+                            ? currentPanelOptions.length - 1
+                            : keyboardFocusedIndex - 1;
+                        while (prev >= 0 && currentPanelOptions[prev].disabled) {
+                            prev--;
+                        }
+                        if (prev >= 0) {
+                            setKeyboardFocusedIndex(prev);
+                        }
+                        break;
+                    }
+                    case 'ArrowRight':
+                    case 'Enter':
+                    case ' ': {
+                        if (keyboardFocusedIndex === -1)
+                            return;
+                        const focusedOption = currentPanelOptions[keyboardFocusedIndex];
+                        if (!focusedOption || focusedOption.disabled)
+                            return;
+                        const isLeaf = !focusedOption.children || focusedOption.children.length === 0;
+                        if (event.key === 'ArrowRight' && isLeaf)
+                            return;
+                        event.preventDefault();
+                        handleItemSelect(panels.length - 1, focusedOption, isLeaf);
+                        break;
+                    }
+                    case 'ArrowLeft': {
+                        event.preventDefault();
+                        if (activePath.length === 0)
+                            return;
+                        const removedItem = activePath[activePath.length - 1];
+                        const parentPanel = panels[activePath.length - 1];
+                        const idx = parentPanel.findIndex((o) => o.id === removedItem.id);
+                        setActivePath(activePath.slice(0, -1));
+                        setKeyboardFocusedIndex(idx >= 0 ? idx : -1);
+                        break;
+                    }
+                }
+            },
+        };
+    }, [
+        activePath,
+        handleClose,
+        handleItemSelect,
+        keyboardFocusedIndex,
+        open,
+        panels,
+    ]);
+    const displayPath = open ? activePath : value;
+    const displayString = displayPath.map((o) => o.name).join(' / ');
+    const triggerValue = useMemo(() => {
+        if (displayPath.length === 0)
+            return undefined;
+        return { id: 'cascader-value', name: displayString };
+    }, [displayPath.length, displayString]);
+    const isPartial = open &&
+        activePath.length > 0 &&
+        !!((_b = (_a = activePath[activePath.length - 1]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length);
+    const zIndexMiddleware = useMemo(() => ({
+        name: 'zIndex',
+        fn: ({ elements }) => {
+            const val = dropdownZIndex !== null && dropdownZIndex !== void 0 ? dropdownZIndex : 1;
+            const num = typeof val === 'number' ? val : parseInt(val, 10) || val;
+            Object.assign(elements.floating.style, { zIndex: num });
+            return {};
+        },
+    }), [dropdownZIndex]);
+    const offsetMiddleware = useMemo(() => offset({ mainAxis: 4 }), []);
+    const translateProps = useMemo(() => ({
+        duration: {
+            enter: MOTION_DURATION.moderate,
+            exit: MOTION_DURATION.moderate,
+        },
+        easing: {
+            enter: MOTION_EASING.standard,
+            exit: MOTION_EASING.standard,
+        },
+    }), []);
+    return (jsxs("div", { ref: ref, className: cx(cascaderClasses.host, fullWidth && cascaderClasses.hostFullWidth), children: [jsx(Popper, { anchor: anchorRef, open: open, disablePortal: !globalPortal, options: {
+                    placement: 'bottom-start',
+                    middleware: [offsetMiddleware, zIndexMiddleware],
+                }, children: jsx(TransitionGroup, { component: null, children: open && (createElement(Translate, { ...translateProps, from: "bottom", key: "cascader-dropdown", in: true },
+                        jsx("div", { children: jsx("div", { ref: dropdownRef, className: cascaderClasses.dropdownPanels, children: panels.map((panelOptions, panelIndex) => {
+                                    var _a, _b, _c;
+                                    return (jsx(CascaderPanel, { activeId: (_a = activePath[panelIndex]) === null || _a === void 0 ? void 0 : _a.id, focusedId: panelIndex === panels.length - 1 &&
+                                            keyboardFocusedIndex >= 0
+                                            ? (_b = panels[panelIndex][keyboardFocusedIndex]) === null || _b === void 0 ? void 0 : _b.id
+                                            : undefined, maxHeight: menuMaxHeight, onSelect: (option, isLeaf) => handleItemSelect(panelIndex, option, isLeaf), options: panelOptions, selectedId: value.length > 0 && panelIndex === value.length - 1
+                                            ? (_c = value[panelIndex]) === null || _c === void 0 ? void 0 : _c.id
+                                            : undefined }, panelIndex));
+                                }) }) }))) }) }), jsx(SelectTrigger, { ref: anchorRef, active: open, className: cx(className, isPartial && cascaderClasses.triggerPartial), disabled: disabled, fullWidth: fullWidth, inputProps: {
+                    onKeyDown: (e) => {
+                        if (!open && (e.key === ' ' || e.key === 'Enter')) {
+                            e.preventDefault();
+                            handleOpen();
+                        }
+                    },
+                }, isForceClearable: clearable && !disabled && !readOnly && value.length > 0, mode: "single", onClick: open ? handleClose : handleOpen, onClear: handleClear, placeholder: placeholder, readOnly: readOnly, required: required, size: size, type: error ? 'error' : 'default', value: triggerValue })] }));
+});
+
+export { Cascader as default };

package/Cascader/CascaderPanel.d.ts

@@ -0,0 +1,29 @@
+import { CascaderOption } from './typings';
+export interface CascaderPanelProps {
+    /**
+     * The id of the currently active (navigating) option.
+     */
+    activeId?: string;
+    /**
+     * The id of the keyboard-focused option in this panel.
+     */
+    focusedId?: string;
+    /**
+     * The max height for the panel.
+     */
+    maxHeight?: number | string;
+    /**
+     * Called when an option is clicked.
+     * `isLeaf` is true if the option has no children.
+     */
+    onSelect: (option: CascaderOption, isLeaf: boolean) => void;
+    /**
+     * The options to render in this panel.
+     */
+    options: CascaderOption[];
+    /**
+     * The id of the confirmed selected option at this level.
+     */
+    selectedId?: string;
+}
+export default function CascaderPanel({ activeId, focusedId, maxHeight, onSelect, options, selectedId, }: CascaderPanelProps): import("react/jsx-runtime").JSX.Element;

package/Cascader/CascaderPanel.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cascaderClasses } from '@mezzanine-ui/core/cascader';
+import { CheckedIcon, CaretRightIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+function CascaderPanel({ activeId, focusedId, maxHeight, onSelect, options, selectedId, }) {
+    const toItemId = (optionId) => `mzn-cascader-option-${optionId}`;
+    return (jsx("div", { className: cascaderClasses.panel, style: maxHeight ? { maxHeight } : undefined, children: jsx("ul", { "aria-activedescendant": focusedId ? toItemId(focusedId) : undefined, "aria-label": "Options", role: "listbox", style: { listStyle: 'none', margin: 0, padding: 0 }, tabIndex: -1, children: options.map((option) => {
+                const isLeaf = !option.children || option.children.length === 0;
+                const isActive = option.id === activeId;
+                const isSelected = option.id === selectedId;
+                return (jsxs("li", { "aria-disabled": option.disabled || undefined, "aria-expanded": !isLeaf ? isActive : undefined, "aria-selected": isSelected, className: cx(cascaderClasses.item, isActive && cascaderClasses.itemActive, option.disabled && cascaderClasses.itemDisabled, option.id === focusedId && cascaderClasses.itemFocused, isSelected && cascaderClasses.itemSelected), id: toItemId(option.id), onClick: () => {
+                        if (!option.disabled) {
+                            onSelect(option, isLeaf);
+                        }
+                    }, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            if (!option.disabled) {
+                                onSelect(option, isLeaf);
+                            }
+                        }
+                    }, role: "option", children: [jsx("span", { className: cascaderClasses.itemLabel, children: option.name }), jsx("span", { className: cascaderClasses.itemAppend, children: isLeaf ? (isSelected && jsx(Icon, { icon: CheckedIcon })) : (jsx(Icon, { icon: CaretRightIcon })) })] }, option.id));
+            }) }) }));
+}
+
+export { CascaderPanel as default };

package/Cascader/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './Cascader';
+export type { CascaderProps } from './typings';
+export type { CascaderOption, CascaderSize } from './typings';
+export { default as CascaderPanel } from './CascaderPanel';
+export type { CascaderPanelProps } from './CascaderPanel';

package/Cascader/index.js

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

package/Cascader/typings.d.ts

@@ -0,0 +1,92 @@
+import { CascaderSize } from '@mezzanine-ui/core/cascader';
+export type { CascaderSize };
+export interface CascaderOption {
+    children?: CascaderOption[];
+    disabled?: boolean;
+    id: string;
+    name: string;
+}
+export interface CascaderBaseProps {
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Whether to show the clear button when a value is selected.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Whether the cascader is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show in error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Whether the cascader takes full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * The z-index of the dropdown.
+     */
+    dropdownZIndex?: number | string;
+    /**
+     * Whether to enable portal for the dropdown.
+     * @default true
+     */
+    globalPortal?: boolean;
+    /**
+     * The max height of each cascader panel column.
+     */
+    menuMaxHeight?: number | string;
+    /**
+     * Callback fired when the dropdown is closed.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback fired when the dropdown is opened.
+     */
+    onFocus?: () => void;
+    /**
+     * The tree options for the cascader.
+     */
+    options: CascaderOption[];
+    /**
+     * Placeholder text for the trigger input.
+     */
+    placeholder?: string;
+    /**
+     * Whether the cascader is read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the cascader is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The size of the trigger input.
+     * @default 'main'
+     */
+    size?: CascaderSize;
+}
+export interface CascaderProps extends CascaderBaseProps {
+    /**
+     * Uncontrolled default value (array from root to leaf).
+     */
+    defaultValue?: CascaderOption[];
+    /**
+     * Callback fired when the final leaf option is selected.
+     */
+    onChange?: (value: CascaderOption[]) => void;
+    /**
+     * Controlled value (array from root to leaf).
+     */
+    value?: CascaderOption[];
+}

package/Description/Description.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DescriptionOrientation } from '@mezzanine-ui/core/description';
+import { DescriptionOrientation, DescriptionSize } from '@mezzanine-ui/core/description';
 import { DescriptionTitleProps } from './DescriptionTitle';
 import { DescriptionContentProps } from './DescriptionContent';
 import { BadgeProps } from '../Badge/typings';
@@ -21,6 +21,11 @@ export type DescriptionProps = DistributiveOmit<DescriptionTitleProps, 'classNam
      * @default 'horizontal'
      */
     orientation?: DescriptionOrientation;
+    /**
+     * Controls the text size of the description content
+     * @default 'main'
+     */
+    size?: DescriptionSize;
     /**
      * title text for description
      */

package/Description/Description.js

@@ -1,13 +1,20 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { descriptionClasses } from '@mezzanine-ui/core/description';
 import DescriptionTitle from './DescriptionTitle.js';
+import { DescriptionContext } from './DescriptionContext.js';
 import cx from 'clsx';
 
 const Description = forwardRef(function Description(props, ref) {
-    const { children, className, orientation = 'horizontal', title, ...rest } = props;
-    return (jsxs("div", { className: cx(descriptionClasses.host, descriptionClasses.orientation(orientation), className), ref: ref, children: [jsx(DescriptionTitle, { ...rest, children: title }), children] }));
+    var _a;
+    const { children, className, orientation = 'horizontal', size = 'main', title, ...rest } = props;
+    const injectedChildren = isValidElement(children)
+        ? cloneElement(children, {
+            size: (_a = children.props.size) !== null && _a !== void 0 ? _a : size,
+        })
+        : children;
+    return (jsx(DescriptionContext.Provider, { value: { size }, children: jsxs("div", { className: cx(descriptionClasses.host, descriptionClasses.orientation(orientation), className), ref: ref, children: [jsx(DescriptionTitle, { ...rest, children: title }), injectedChildren] }) }));
 });
 
 export { Description as default };

package/Description/DescriptionContent.d.ts

@@ -1,5 +1,5 @@
 import { IconDefinition } from '@mezzanine-ui/icons';
-import { DescriptionSize, DescriptionContentVariant } from '@mezzanine-ui/core/description';
+import { DescriptionContentVariant, DescriptionSize } from '@mezzanine-ui/core/description';
 interface DescriptionContentBaseProps {
     /**
      * Custom class name for content
@@ -10,8 +10,9 @@ interface DescriptionContentBaseProps {
      */
     children: string;
     /**
-     * Control the text size of the content
-     * @default 'main'
+     * Controls the text size of the content. When provided, overrides the size
+     * inherited from a parent <Description> component.
+     * @default context value or 'main'
      */
     size?: DescriptionSize;
     /**
@@ -31,6 +32,11 @@ interface DescriptionContentBaseProps {
 interface DescriptionContentWithClickableIcon {
     className?: string;
     children: string;
+    /**
+     * Controls the text size of the content. When provided, overrides the size
+     * inherited from a parent <Description> component.
+     * @default context value or 'main'
+     */
     size?: DescriptionSize;
     variant: Extract<DescriptionContentVariant, 'with-icon'>;
     icon: IconDefinition;

package/Description/DescriptionContent.js

@@ -3,11 +3,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { CaretUpIcon, CaretDownIcon } from '@mezzanine-ui/icons';
 import { descriptionClasses } from '@mezzanine-ui/core/description';
+import { useDescriptionContext } from './DescriptionContext.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 const DescriptionContent = forwardRef(function DescriptionContent(props, ref) {
-    const { className, children, icon, onClickIcon, size = 'main', variant = 'normal', } = props;
+    const { className, children, icon, onClickIcon, size: sizeProp, variant = 'normal', } = props;
+    const { size: contextSize } = useDescriptionContext();
+    const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : contextSize;
     return (jsxs("span", { className: cx(descriptionClasses.contentHost, descriptionClasses.contentVariant(variant), descriptionClasses.contentSize(size), className), ref: ref, children: [variant === 'trend-up' && (jsx(Icon, { className: descriptionClasses.contentTrendUp, icon: CaretUpIcon, size: 16 })), variant === 'trend-down' && (jsx(Icon, { className: descriptionClasses.contentTrendDown, icon: CaretDownIcon, size: 16 })), children, variant === 'with-icon' && icon && (jsx(Icon, { className: descriptionClasses.contentIcon, icon: icon, size: 16, onClick: onClickIcon }))] }));
 });
 

package/Description/DescriptionContext.d.ts

@@ -0,0 +1,6 @@
+import { DescriptionSize } from '@mezzanine-ui/core/description';
+export interface DescriptionContextValue {
+    size: DescriptionSize;
+}
+export declare const DescriptionContext: import("react").Context<DescriptionContextValue>;
+export declare const useDescriptionContext: () => DescriptionContextValue;