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

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/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;

package/Description/DescriptionContext.js

@@ -0,0 +1,9 @@
+'use client';
+import { createContext, useContext } from 'react';
+
+const DescriptionContext = createContext({
+    size: 'main',
+});
+const useDescriptionContext = () => useContext(DescriptionContext);
+
+export { DescriptionContext, useDescriptionContext };

package/Description/index.d.ts

@@ -6,3 +6,5 @@ export { default as DescriptionContent } from './DescriptionContent';
 export type { DescriptionContentProps } from './DescriptionContent';
 export { default as DescriptionGroup } from './DescriptionGroup';
 export type { DescriptionGroupProps } from './DescriptionGroup';
+export { DescriptionContext } from './DescriptionContext';
+export type { DescriptionContextValue } from './DescriptionContext';

package/Description/index.js

@@ -2,3 +2,4 @@ export { default as Description } from './Description.js';
 export { default as DescriptionTitle } from './DescriptionTitle.js';
 export { default as DescriptionContent } from './DescriptionContent.js';
 export { default as DescriptionGroup } from './DescriptionGroup.js';
+export { DescriptionContext } from './DescriptionContext.js';

package/Form/FormField.d.ts

@@ -37,6 +37,12 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
      * The icon to display alongside the hint text.
      */
     hintTextIcon?: IconDefinition;
+    /**
+     * Whether to display the hint text icon.
+     * When false, neither the custom icon nor the default severity icon will be shown.
+     * @default true
+     */
+    showHintTextIcon?: boolean;
     /**
      * The label text for the form field.
      */

package/Form/FormField.js

@@ -10,7 +10,7 @@ import cx from 'clsx';
  * The React component for `mezzanine` form field.
  */
 const FormField = forwardRef(function FormField(props, ref) {
-    const { children, className, counter, counterColor, controlFieldSlotLayout = ControlFieldSlotLayout.MAIN, density, disabled = false, fullWidth = false, hintText, hintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, labelSpacing = FormFieldLabelSpacing.MAIN, layout = FormFieldLayout.HORIZONTAL, name, required = false, severity = 'info', ...rest } = props;
+    const { children, className, counter, counterColor, controlFieldSlotLayout = ControlFieldSlotLayout.MAIN, density, disabled = false, fullWidth = false, hintText, hintTextIcon, showHintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, labelSpacing = FormFieldLabelSpacing.MAIN, layout = FormFieldLayout.HORIZONTAL, name, required = false, severity = 'info', ...rest } = props;
     const formControl = {
         disabled,
         fullWidth,
@@ -30,7 +30,7 @@ const FormField = forwardRef(function FormField(props, ref) {
             [formFieldClasses.fullWidth]: fullWidth,
         }, className), children: jsxs(FormControlContext.Provider, { value: formControl, children: [label && (jsx(FormLabel, { className: cx(formFieldClasses.labelArea, labelSpacingClass), htmlFor: name, informationIcon: labelInformationIcon, informationText: labelInformationText, labelText: label, optionalMarker: labelOptionalMarker })), jsxs("div", { className: cx(formFieldClasses.dataEntry), children: [jsx("div", { className: cx(`${formFieldClasses.controlFieldSlot}--${controlFieldSlotLayout}`), children: children }), hintText || hintTextIcon || counter ? (jsxs("div", { className: cx(formFieldClasses.hintTextAndCounterArea, {
                                 [formFieldClasses.hintTextAndCounterArea + '--align-right']: !(hintText || hintTextIcon) && counter,
-                            }), children: [(hintText || hintTextIcon) && (jsx(FormHintText, { hintText: hintText, hintTextIcon: hintTextIcon, severity: severity })), counter && (jsx("span", { className: cx(formFieldClasses.counter, formFieldClasses.counterColor(counterColor || FormFieldCounterColor.INFO)), children: counter }))] })) : null] })] }) }));
+                            }), children: [(hintText || hintTextIcon) && (jsx(FormHintText, { hintText: hintText, hintTextIcon: hintTextIcon, severity: severity, showHintTextIcon: showHintTextIcon })), counter && (jsx("span", { className: cx(formFieldClasses.counter, formFieldClasses.counterColor(counterColor || FormFieldCounterColor.INFO)), children: counter }))] })) : null] })] }) }));
 });
 
 export { FormField as default };

package/Form/FormHintText.d.ts

@@ -17,6 +17,12 @@ export type FormHintTextProps = NativeElementPropsWithoutKeyAndRef<'span'> & {
      * if not provided, no icon will be displayed.
      */
     severity?: keyof typeof formHintIcons | undefined;
+    /**
+     * Whether to display the hint text icon.
+     * When false, neither the custom icon nor the default severity icon will be shown.
+     * @default true
+     */
+    showHintTextIcon?: boolean;
 };
 /**
  * The React component for `mezzanine` form message.
@@ -37,5 +43,11 @@ declare const FormHintText: import("react").ForwardRefExoticComponent<NativeElem
      * if not provided, no icon will be displayed.
      */
     severity?: keyof typeof formHintIcons | undefined;
+    /**
+     * Whether to display the hint text icon.
+     * When false, neither the custom icon nor the default severity icon will be shown.
+     * @default true
+     */
+    showHintTextIcon?: boolean;
 } & import("react").RefAttributes<HTMLSpanElement>>;
 export default FormHintText;

package/Form/FormHintText.js

@@ -9,9 +9,10 @@ import cx from 'clsx';
  * The React component for `mezzanine` form message.
  */
 const FormHintText = forwardRef(function FormHintText(props, ref) {
-    const { className, hintText, hintTextIcon, severity = 'info', ...rest } = props;
+    const { className, hintText, hintTextIcon, severity = 'info', showHintTextIcon = true, ...rest } = props;
     const defaultIcon = severity ? formHintIcons[severity] : null;
-    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [hintTextIcon ? (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: hintTextIcon, color: severity })) : (defaultIcon && (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: defaultIcon, color: severity }))), hintText] }));
+    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [showHintTextIcon &&
+                (hintTextIcon ? (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: hintTextIcon, color: severity })) : (defaultIcon && (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: defaultIcon, color: severity })))), hintText] }));
 });
 
 export { FormHintText as default };

package/Navigation/Navigation.d.ts

@@ -32,6 +32,10 @@ export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef
      * Called when a navigation option is clicked.
      */
     onOptionClick?: (activePath?: string[]) => void;
+    /**
+     * Custom component for rendering navigation options which have an href prop.
+     */
+    optionsAnchorComponent?: React.ElementType;
 }
 declare const Navigation: import("react").ForwardRefExoticComponent<NavigationProps & import("react").RefAttributes<HTMLElement>>;
 export default Navigation;

package/Navigation/Navigation.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useMemo, Children, isValidElement } from 'react';
+import { forwardRef, useState, useCallback, useMemo, Children, isValidElement, useRef, useEffect } from 'react';
 import { navigationClasses } from '@mezzanine-ui/core/navigation';
 import NavigationOption from './NavigationOption.js';
 import NavigationHeader from './NavigationHeader.js';
@@ -15,17 +15,19 @@ import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
-    const { activatedPath, children = [], className, collapsed: collapsedProp, filter, onCollapseChange, onOptionClick, ...rest } = props;
+    const { activatedPath, children = [], className, collapsed: collapsedProp, filter, onCollapseChange, onOptionClick, optionsAnchorComponent, ...rest } = props;
     const [collapsedState, setCollapsedState] = useState(collapsedProp || false);
     const collapsed = collapsedProp !== null && collapsedProp !== void 0 ? collapsedProp : collapsedState;
     const handleCollapseChange = useCallback((newCollapsed) => {
         setCollapsedState(newCollapsed);
         onCollapseChange === null || onCollapseChange === void 0 ? void 0 : onCollapseChange(newCollapsed);
     }, [onCollapseChange]);
-    const [innerActivatedPath, setInnerActivatedPath] = useState([]);
+    const [innerActivatedPath, setInnerActivatedPath] = useState(activatedPath || []);
+    const [activatedPathKey, setActivatedPathKey] = useState(activatedPath ? activatedPath.join('::') : '');
     const combineSetActivatedPath = useCallback((newActivatedPath) => {
         onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(newActivatedPath);
         setInnerActivatedPath(newActivatedPath);
+        setActivatedPathKey(newActivatedPath.join('::'));
     }, [onOptionClick]);
     const currentPathname = useCurrentPathname();
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
@@ -65,6 +67,38 @@ const Navigation = forwardRef((props, ref) => {
         });
         return { headerComponent, footerComponent, items, level1Items };
     }, [flattenedChildren]);
+    const hrefActivated = useRef(false);
+    // Scan level1Items and its descendants (up to level3) to find out whether href matches to determine whether to preset expansion and activatedPath
+    useEffect(() => {
+        if (hrefActivated.current || !currentPathname) {
+            return;
+        }
+        const checkActivatedPathKey = (items, path) => {
+            for (const item of items) {
+                if (!isValidElement(item) || item.type !== NavigationOption) {
+                    continue;
+                }
+                const newKey = item.props.id || item.props.title || item.props.href;
+                if (!newKey) {
+                    continue;
+                }
+                const newPath = [...path, newKey];
+                if (item.props.href && item.props.href === currentPathname) {
+                    combineSetActivatedPath(newPath);
+                    return true;
+                }
+                if (item.props.children) {
+                    const flattenedChildren = flattenChildren(item.props.children);
+                    if (checkActivatedPathKey(flattenedChildren, newPath)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        checkActivatedPathKey(level1Items, []);
+        hrefActivated.current = true;
+    }, [combineSetActivatedPath, currentPathname, level1Items]);
     const { contentRef, visibleCount } = useVisibleItems(items, collapsed);
     const { collapsedItems, collapsedMenuItems } = useMemo(() => {
         return {
@@ -77,11 +111,13 @@ const Navigation = forwardRef((props, ref) => {
     const [filterText, setFilterText] = useState('');
     return (jsx("nav", { ...rest, ref: ref, className: cx(navigationClasses.host, collapsed ? navigationClasses.collapsed : navigationClasses.expand, className), children: jsxs(NavigationActivatedContext.Provider, { value: {
                 activatedPath: activatedPath || innerActivatedPath,
+                activatedPathKey,
                 collapsed,
                 currentPathname,
                 filterText,
                 handleCollapseChange,
                 setActivatedPath: combineSetActivatedPath,
+                optionsAnchorComponent,
             }, children: [headerComponent, jsx(NavigationOptionLevelContext.Provider, { value: navigationOptionLevelContextDefaultValues, children: jsxs("div", { ref: contentRef, className: navigationClasses.content, children: [filter && (jsx(Input, { size: "sub", variant: "search", className: cx(navigationClasses.searchInput), value: filterText, onChange: (e) => setFilterText(e.target.value) })), jsxs("ul", { children: [collapsed ? collapsedItems : items, collapsed &&
                                         visibleCount !== null &&
                                         visibleCount < level1Items.length && (jsx(NavigationOverflowMenu, { items: collapsedMenuItems }))] }, collapsed ? 'collapsed' : 'expand')] }) }), footerComponent] }) }));

package/Navigation/NavigationFooter.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, use, Children, isValidElement } from 'react';
+import { forwardRef, use, useRef, useState, useEffect, Children, isValidElement } from 'react';
 import { navigationFooterClasses } from '@mezzanine-ui/core/navigation';
 import NavigationUserMenu from './NavigationUserMenu.js';
 import { NavigationActivatedContext } from './context.js';
@@ -22,7 +22,24 @@ const NavigationFooter = forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { collapsed } = use(NavigationActivatedContext);
     const { userMenu, otherChildren } = resolveChildren(children);
-    return (jsxs("footer", { ...rest, ref: ref, className: cx(navigationFooterClasses.host, collapsed && navigationFooterClasses.collapsed, className), children: [userMenu, jsx("span", { className: navigationFooterClasses.icons, children: otherChildren })] }));
+    const iconsRef = useRef(null);
+    const [iconsWidth, setIconsWidth] = useState(0);
+    useEffect(() => {
+        if (!iconsRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            if (iconsRef.current) {
+                setIconsWidth(iconsRef.current.offsetWidth);
+            }
+        });
+        resizeObserver.observe(iconsRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return (jsxs("footer", { ...rest, ref: ref, className: cx(navigationFooterClasses.host, collapsed && navigationFooterClasses.collapsed, className), style: {
+            ['--icons-width']: `${iconsWidth}px`,
+        }, children: [userMenu, jsx("span", { ref: iconsRef, className: navigationFooterClasses.icons, children: otherChildren })] }));
 });
 
 export { NavigationFooter as default };

package/Navigation/NavigationOption.d.ts

@@ -13,6 +13,10 @@ export interface NavigationOptionProps extends Omit<NativeElementPropsWithoutKey
      * Strict children with `NavigationOption`.
      */
     children?: NavigationOptionChildren;
+    /**
+     * Custom component to render, it should support `href` and `onClick` props if provided.
+     */
+    anchorComponent?: React.ElementType;
     /**
      * Icon of the item.
      */

package/Navigation/NavigationOption.js

@@ -1,34 +1,32 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, use, useId, useMemo, useEffect, Children, isValidElement } from 'react';
+import { forwardRef, use, useState, useId, useMemo, Children, isValidElement, useEffect, useRef } from 'react';
 import { navigationOptionClasses } from '@mezzanine-ui/core/navigation';
 import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
-import { NavigationOptionLevelContext, NavigationActivatedContext } from './context.js';
+import { NavigationActivatedContext, NavigationOptionLevelContext } from './context.js';
 import { flattenChildren } from '../utils/flatten-children.js';
 import Badge from '../Badge/Badge.js';
 import Tooltip from '../Tooltip/Tooltip.js';
 import Icon from '../Icon/Icon.js';
+import Fade from '../Transition/Fade.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 
 const NavigationOption = forwardRef((props, ref) => {
-    const { active, children, className, defaultOpen = false, href, icon, id, onTriggerClick, title, ...rest } = props;
-    const [open, setOpen] = useState(defaultOpen);
+    var _a;
+    const { active, children, className, anchorComponent, defaultOpen, href, icon, id, onTriggerClick, title, ...rest } = props;
+    const { activatedPathKey, activatedPath, collapsed, filterText, handleCollapseChange, setActivatedPath, optionsAnchorComponent, } = use(NavigationActivatedContext);
+    const [open, setOpen] = useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
     const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
     const { level, path: parentPath } = use(NavigationOptionLevelContext);
     const currentLevel = level + 1; // start as 1
     const uuid = useId();
     const currentKey = id || title || href || uuid;
     const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
-    const { activatedPath, collapsed, currentPathname, filterText, handleCollapseChange, setActivatedPath, } = use(NavigationActivatedContext);
-    useEffect(() => {
-        if (currentPathname === href) {
-            setActivatedPath(currentPath);
-            setOpen(true);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const Component = href ? 'a' : 'div';
+    const currentPathKey = currentPath.join('::');
+    const Component = href && !children
+        ? ((_a = anchorComponent !== null && anchorComponent !== void 0 ? anchorComponent : optionsAnchorComponent) !== null && _a !== void 0 ? _a : 'a')
+        : 'div';
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
     const { badge, items } = useMemo(() => {
         let badgeComponent = null;
@@ -51,6 +49,13 @@ const NavigationOption = forwardRef((props, ref) => {
         });
         return { badge: badgeComponent, items };
     }, [flattenedChildren]);
+    // Default open if current path is activated
+    useEffect(() => {
+        if (activatedPathKey === currentPathKey ||
+            activatedPathKey.startsWith(`${currentPathKey}::`)) {
+            setOpen(true);
+        }
+    }, [activatedPathKey, currentLevel, currentPathKey]);
     const [filter, setFilter] = useState(true);
     useEffect(() => {
         var _a;
@@ -60,10 +65,28 @@ const NavigationOption = forwardRef((props, ref) => {
         }
         setFilter((_a = (title.includes(filterText) || (href === null || href === void 0 ? void 0 : href.includes(filterText)))) !== null && _a !== void 0 ? _a : false);
     }, [currentPath, filterText, href, title]);
+    const titleRef = useRef(null);
+    const [titleOverflow, setTitleOverflow] = useState(false);
+    useEffect(() => {
+        if (!titleRef.current)
+            return;
+        const checkOverflow = () => {
+            if (!titleRef.current)
+                return;
+            const { scrollWidth, clientWidth } = titleRef.current;
+            setTitleOverflow(scrollWidth > clientWidth);
+        };
+        checkOverflow();
+        const resizeObserver = new ResizeObserver(checkOverflow);
+        resizeObserver.observe(titleRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [title]);
     return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionClasses.host, open && navigationOptionClasses.open, !children && navigationOptionClasses.basic, (active !== null && active !== void 0 ? active : (activatedPath === null || activatedPath === void 0 ? void 0 : activatedPath[currentLevel - 1]) === currentKey) &&
-            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, !collapsed && !filter && navigationOptionClasses.hidden, className), "data-id": currentKey, children: [jsx(Tooltip, { options: {
-                    placement: 'right',
-                }, title: collapsed ? title : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipChildRef }) => (jsxs(Component, { className: cx(navigationOptionClasses.content, navigationOptionClasses.level(currentLevel)), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, href: href, onClick: () => {
+            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, !collapsed && !filter && navigationOptionClasses.hidden, className), "data-id": currentKey, children: [jsx(Tooltip, { disablePortal: false, options: {
+                    placement: collapsed ? 'right' : 'top',
+                }, title: collapsed || titleOverflow ? title : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipChildRef }) => (jsxs(Component, { className: cx(navigationOptionClasses.content, navigationOptionClasses.level(currentLevel)), href: Component === 'div' ? undefined : href, onClick: () => {
                         setOpen(!open);
                         onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, currentKey, href);
                         if (collapsed) {
@@ -78,9 +101,7 @@ const NavigationOption = forwardRef((props, ref) => {
                             if (!children)
                                 setActivatedPath(currentPath);
                         }
-                    }, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.title, children: title }), badge, children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { className: navigationOptionClasses.childrenWrapper, style: {
-                    width: '100%',
-                }, in: !!open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
+                    }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx(Fade, { ref: titleRef, in: collapsed === false || !icon, children: jsx("span", { className: navigationOptionClasses.title, children: title }) }), badge, children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { lazyMount: true, className: cx(navigationOptionClasses.childrenWrapper), in: open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
                         level: currentLevel,
                         path: currentPath,
                     }, children: jsx("ul", { className: navigationOptionClasses.group, children: items }) }) }))] }));

package/Navigation/NavigationOverflowMenuOption.js

@@ -11,22 +11,26 @@ import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 const NavigationOverflowMenuOption = forwardRef((props, ref) => {
-    const { active, children, className, defaultOpen = false, href, icon, id, onTriggerClick, title, ...rest } = props;
+    var _a;
+    const { active, children, className, anchorComponent, defaultOpen = false, href, icon, id, onTriggerClick, title, ...rest } = props;
     const [open, setOpen] = useState(defaultOpen);
     const { level, path: parentPath } = use(NavigationOptionLevelContext);
     const currentLevel = level + 1; // start as 1
     const uuid = useId();
     const currentKey = id || title || href || uuid;
     const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
-    const { activatedPath, setActivatedPath, currentPathname } = use(NavigationActivatedContext);
+    const currentPathKey = currentPath.join('::');
+    const { activatedPath, activatedPathKey, setActivatedPath, optionsAnchorComponent, } = use(NavigationActivatedContext);
+    // Default open if current path is activated
     useEffect(() => {
-        if (currentPathname === href) {
-            setActivatedPath(currentPath);
+        if (activatedPathKey === currentPathKey ||
+            activatedPathKey.startsWith(`${currentPathKey}::`)) {
             setOpen(true);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const Component = href ? 'a' : 'div';
+    }, [activatedPathKey, currentLevel, currentPathKey]);
+    const Component = href
+        ? ((_a = anchorComponent !== null && anchorComponent !== void 0 ? anchorComponent : optionsAnchorComponent) !== null && _a !== void 0 ? _a : 'a')
+        : 'div';
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
     const { badge, items } = useMemo(() => {
         let badgeComponent = null;

package/Navigation/NavigationUserMenu.d.ts

@@ -3,6 +3,7 @@ import { DropdownProps } from '../Dropdown';
 export interface NavigationUserMenuProps extends Omit<DropdownProps, 'children' | 'type'> {
     children?: ReactNode;
     className?: string;
+    collapsedPlacement?: DropdownProps['placement'];
     imgSrc?: string;
     onClick?: () => void;
 }

package/Navigation/NavigationUserMenu.js

@@ -1,26 +1,45 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, use, useRef, useEffect } from 'react';
 import { navigationUserMenuClasses } from '@mezzanine-ui/core/navigation';
 import { UserIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
+import { NavigationActivatedContext } from './context.js';
 import Dropdown from '../Dropdown/Dropdown.js';
+import Tooltip from '../Tooltip/Tooltip.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 const NavigationUserMenu = forwardRef((props, ref) => {
-    // shared props
     const { children, className, imgSrc, onClick, ...rest } = props;
-    const { open: openProp, onClose, placement = 'top-end', onVisibilityChange, ...dropdownRest } = rest;
+    const { open: openProp, onClose, placement = 'top-end', collapsedPlacement = 'right-end', onVisibilityChange, ...dropdownRest } = rest;
     const [imgError, setImgError] = useState(false);
     const [_open, setOpen] = useState(false);
+    const { collapsed } = use(NavigationActivatedContext);
     const open = openProp !== null && openProp !== void 0 ? openProp : _open;
-    return (jsx(Dropdown, { ...dropdownRest, open: open, placement: placement, onVisibilityChange: () => {
+    const userNameRef = useRef(null);
+    const [userNameOverflow, setUserNameOverflow] = useState(false);
+    useEffect(() => {
+        if (!userNameRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            if (userNameRef.current) {
+                setUserNameOverflow(userNameRef.current.scrollWidth > userNameRef.current.offsetWidth);
+            }
+        });
+        resizeObserver.observe(userNameRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return (jsx(Dropdown, { ...dropdownRest, open: open, placement: collapsed ? collapsedPlacement : placement, onVisibilityChange: () => {
             setOpen(!open);
             onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(!open);
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }, onClose: () => {
             setOpen(false);
             onClose === null || onClose === void 0 ? void 0 : onClose();
-        }, children: jsxs("button", { type: "button", ref: ref, className: cx(navigationUserMenuClasses.host, open && navigationUserMenuClasses.open, className), children: [jsx("span", { className: navigationUserMenuClasses.avatar, children: imgError ? (jsx(Icon, { icon: UserIcon })) : (jsx("img", { alt: "User avatar", className: navigationUserMenuClasses.avatar, src: imgSrc, onError: () => setImgError(true) })) }), children && jsx("span", { className: navigationUserMenuClasses.userName, children: children }), jsx(Icon, { className: navigationUserMenuClasses.icon, icon: ChevronDownIcon })] }) }));
+        }, children: jsx("button", { className: cx(navigationUserMenuClasses.host, open && navigationUserMenuClasses.open, className), ref: ref, type: "button", children: jsx(Tooltip, { disablePortal: false, options: {
+                    placement: collapsed ? 'right' : 'top',
+                }, title: (collapsed || userNameOverflow) && !open ? children : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipRef }) => (jsxs("span", { className: navigationUserMenuClasses.content, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipRef, children: [jsx("span", { className: navigationUserMenuClasses.avatar, children: imgError || !imgSrc ? (jsx(Icon, { icon: UserIcon })) : (jsx("img", { alt: "User avatar", className: navigationUserMenuClasses.avatar, src: imgSrc, onError: () => setImgError(true) })) }), children && (jsx("span", { className: navigationUserMenuClasses.userName, children: jsx("span", { ref: userNameRef, children: children }) })), jsx(Icon, { className: navigationUserMenuClasses.icon, icon: ChevronDownIcon })] })) }) }) }));
 });
 
 export { NavigationUserMenu as default };

package/Navigation/context.d.ts

@@ -8,9 +8,11 @@ export declare const NavigationOptionLevelContext: import("react").Context<{
 }>;
 export declare const NavigationActivatedContext: import("react").Context<{
     activatedPath: string[];
+    activatedPathKey: string;
     collapsed: boolean;
     currentPathname: string | null;
     filterText: string;
     handleCollapseChange: (newCollapsed: boolean) => void;
     setActivatedPath: (path: string[]) => void;
+    optionsAnchorComponent?: React.ElementType;
 }>;

package/Navigation/context.js

@@ -1,6 +1,9 @@
 import { createContext } from 'react';
 
-const navigationOptionLevelContextDefaultValues = { level: 0, path: [] };
+const navigationOptionLevelContextDefaultValues = {
+    level: 0,
+    path: [],
+};
 const NavigationOptionLevelContext = createContext(navigationOptionLevelContextDefaultValues);
 const NavigationActivatedContext = createContext(null);
 

package/Picker/RangePickerTrigger.js

@@ -69,7 +69,7 @@ const RangePickerTrigger = forwardRef(function RangePickerTrigger(props, ref) {
     const handleToBlur = useCallback((e) => {
         onToBlur === null || onToBlur === void 0 ? void 0 : onToBlur(e);
     }, [onToBlur]);
-    return (jsxs(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, suffix: suffix !== null && suffix !== void 0 ? suffix : defaultSuffix, children: [jsx(FormattedInput, { ...inputFromProps, ref: fromRef, "aria-disabled": disabled, "aria-label": "Start date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesFrom, format: format, onBlur: handleFromBlur, onChange: handleFromChange, onFocus: handleFromFocus, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, validate: validateFrom, value: inputFromValue }), jsx(Icon, { icon: LongTailArrowRightIcon, className: pickerClasses.arrowIcon, "aria-hidden": "true" }), jsx(FormattedInput, { ...inputToProps, ref: toRef, "aria-disabled": disabled, "aria-label": "End date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesTo, format: format, onBlur: handleToBlur, onChange: handleToChange, onFocus: handleToFocus, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, validate: validateTo, value: inputToValue })] }));
+    return (jsxs(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, className: cx(pickerClasses.host, pickerClasses.hostRange, className), clearable: !readOnly && clearable, suffix: suffix !== null && suffix !== void 0 ? suffix : defaultSuffix, children: [jsx(FormattedInput, { ...inputFromProps, ref: fromRef, "aria-disabled": disabled, "aria-label": "Start date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesFrom, format: format, onBlur: handleFromBlur, onChange: handleFromChange, onFocus: handleFromFocus, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, validate: validateFrom, value: inputFromValue }), jsx(Icon, { icon: LongTailArrowRightIcon, className: pickerClasses.arrowIcon, "aria-hidden": "true" }), jsx(FormattedInput, { ...inputToProps, ref: toRef, "aria-disabled": disabled, "aria-label": "End date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesTo, format: format, onBlur: handleToBlur, onChange: handleToChange, onFocus: handleToFocus, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, validate: validateTo, value: inputToValue })] }));
 });
 
 export { RangePickerTrigger as default };

package/Section/Section.js

@@ -1,4 +1,4 @@
-import { jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, cloneElement, isValidElement } from 'react';
 import { sectionClasses } from '@mezzanine-ui/core/section';
 import ContentHeader from '../ContentHeader/ContentHeader.js';
@@ -11,9 +11,9 @@ function getDisplayName(element) {
     if (typeof type === 'string') {
         return type;
     }
-    return type.displayName
-        || type.name
-        || 'Unknown';
+    return (type.displayName ||
+        type.name ||
+        'Unknown');
 }
 function isContentHeaderElement(element) {
     return isValidElement(element) && element.type === ContentHeader;
@@ -28,7 +28,7 @@ function isTabElement(element) {
  * The react component for `mezzanine` section.
  */
 const Section = forwardRef(function Section(props, ref) {
-    const { children, className, contentHeader, filterArea, tab, } = props;
+    const { children, className, contentHeader, filterArea, tab } = props;
     let renderedContentHeader = null;
     let renderedFilterArea = null;
     let renderedTab = null;
@@ -56,7 +56,7 @@ const Section = forwardRef(function Section(props, ref) {
             console.warn(`[Section] Invalid tab type: <${getDisplayName(tab)}>. Only <Tab /> component from @mezzanine-ui/react is allowed.`);
         }
     }
-    return (jsxs("div", { ref: ref, className: cx(sectionClasses.host, className), children: [renderedContentHeader, renderedFilterArea, renderedTab, children] }));
+    return (jsxs("div", { ref: ref, className: cx(sectionClasses.host, className), children: [renderedContentHeader, renderedFilterArea, renderedTab, jsx("div", { className: sectionClasses.hostContent, children: children })] }));
 });
 
 export { Section as default };

package/Transition/Collapse.d.ts

@@ -10,7 +10,8 @@ export interface CollapseProps extends TransitionImplementationProps, Omit<Nativ
 }
 /**
  * The react component for `mezzanine` transition collapse.
- * @deprecated 設計師未定義，暫時標記為 deprecated
+ * @deprecated 設計師未定義，暫時標記為 deprecated.
+ * 目前 NavigationOption 與 Accordion 正在使用此元件.
  */
 declare const Collapse: import("react").ForwardRefExoticComponent<CollapseProps & import("react").RefAttributes<HTMLElement>>;
 export default Collapse;

package/Transition/Collapse.js

@@ -27,7 +27,8 @@ const defaultEasing = {
 };
 /**
  * The react component for `mezzanine` transition collapse.
- * @deprecated 設計師未定義，暫時標記為 deprecated
+ * @deprecated 設計師未定義，暫時標記為 deprecated.
+ * 目前 NavigationOption 與 Accordion 正在使用此元件.
  */
 const Collapse = forwardRef(function Collapse(props, ref) {
     const { appear, children, collapsedHeight: collapsedHeightProp = 0, delay = 0, duration = 'auto', easing = defaultEasing, in: inProp = false, lazyMount, keepMount, onEnter, onEntered, onEntering, onExit, onExiting, onExited, style, ...rest } = props;

package/Upload/Upload.js

@@ -14,11 +14,13 @@ const Upload = forwardRef(function Upload(props, ref) {
     const { accept, className, disabled = false, mode = 'list', size = 'main', showFileSize = true, files: controlledFiles = [], onUpload, onDelete, onReload, onDownload, onZoomIn, onChange, id, name, multiple = false, maxFiles, hints, uploaderLabel, uploaderIcon, inputRef, inputProps, onMaxFilesExceeded, errorMessage, errorIcon, ...rest } = props;
     const files = controlledFiles;
     const filesRef = useRef(files);
+    const replaceFileIdRef = useRef(null);
+    const replaceInputRef = useRef(null);
     useEffect(() => {
         filesRef.current = files;
     }, [files]);
     // Default error icon when status is error and no errorIcon is provided
-    const defaultErrorIconElement = useMemo(() => errorIcon !== null && errorIcon !== void 0 ? errorIcon : jsx(Icon, { icon: DangerousFilledIcon, color: "error", size: 24 }), [errorIcon]);
+    const defaultErrorIconElement = useMemo(() => errorIcon !== null && errorIcon !== void 0 ? errorIcon : (jsx(Icon, { icon: DangerousFilledIcon, color: "error", size: 24 })), [errorIcon]);
     // Auto-disable when maxFiles is reached
     const isMaxFilesReached = useMemo(() => {
         if (maxFiles === undefined)
@@ -37,6 +39,12 @@ const Upload = forwardRef(function Upload(props, ref) {
     const handleUpload = useCallback(async (selectedFiles) => {
         if (!selectedFiles.length)
             return;
+        // If a replace operation is in progress, remove the old file first
+        if (replaceFileIdRef.current !== null) {
+            const fileIdToReplace = replaceFileIdRef.current;
+            replaceFileIdRef.current = null;
+            filesRef.current = filesRef.current.filter((f) => f.id !== fileIdToReplace);
+        }
         // Check maxFiles limit
         if (maxFiles !== undefined) {
             const currentCount = filesRef.current.length;
@@ -100,7 +108,8 @@ const Upload = forwardRef(function Upload(props, ref) {
                             var _a, _b, _c;
                             const tempIndex = tempIdToIndex.get(file.id);
                             // If this is a temp file and we have a corresponding backend file
-                            if (tempIndex !== undefined && tempIndex < backendFiles.length) {
+                            if (tempIndex !== undefined &&
+                                tempIndex < backendFiles.length) {
                                 const backendFile = backendFiles[tempIndex];
                                 // Replace temporary file with backend file (includes real ID and status)
                                 // Apply default error message and icon if status is error and not provided
@@ -124,7 +133,8 @@ const Upload = forwardRef(function Upload(props, ref) {
                         const nextFiles = filesRef.current.map((file) => {
                             const tempIndex = tempIdToIndex.get(file.id);
                             // If this is a temp file and we have a corresponding backend ID
-                            if (tempIndex !== undefined && tempIndex < backendIds.length) {
+                            if (tempIndex !== undefined &&
+                                tempIndex < backendIds.length) {
                                 const backendId = backendIds[tempIndex];
                                 // Replace temporary ID with backend ID, set status to 'done'
                                 return {
@@ -142,7 +152,11 @@ const Upload = forwardRef(function Upload(props, ref) {
                 else {
                     // Old API: backward compatibility - no return value, assume success
                     const nextFiles = filesRef.current.map((file) => tempFiles.some((tf) => tf.id === file.id)
-                        ? { ...file, status: 'done', progress: 100 }
+                        ? {
+                            ...file,
+                            status: 'done',
+                            progress: 100,
+                        }
                         : file);
                     emitChange(nextFiles);
                 }
@@ -172,7 +186,14 @@ const Upload = forwardRef(function Upload(props, ref) {
                 : file);
             emitChange(nextFiles);
         }
-    }, [emitChange, maxFiles, onMaxFilesExceeded, onUpload, errorMessage, defaultErrorIconElement]);
+    }, [
+        emitChange,
+        maxFiles,
+        onMaxFilesExceeded,
+        onUpload,
+        errorMessage,
+        defaultErrorIconElement,
+    ]);
     const handleDelete = useCallback((fileId) => {
         const file = findFileById(fileId);
         if (!file)
@@ -254,6 +275,7 @@ const Upload = forwardRef(function Upload(props, ref) {
     const shouldUsePictureCard = useMemo(() => {
         return /cards|card-wall/.test(mode);
     }, [mode]);
+    const isSingleFileCardMode = shouldUsePictureCard && maxFiles === 1;
     const renderUploadItem = useCallback((uploadFile) => {
         // Skip rendering if neither file nor url is provided
         if (!uploadFile.file && !uploadFile.url) {
@@ -262,18 +284,50 @@ const Upload = forwardRef(function Upload(props, ref) {
         // Determine if it's an image using shared utility
         const isImage = isImageFile(uploadFile.file, uploadFile.url);
         // For images, use 'thumbnail' to show image preview; for non-images, use 'icon' to show file icon
-        const itemType = isImage ? 'thumbnail' : 'icon';
+        const itemType = isImage
+            ? 'thumbnail'
+            : 'icon';
         return (jsx(UploadItem, { file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, type: itemType, showFileSize: showFileSize, disabled: disabled, onDelete: () => handleDelete(uploadFile.id), onDownload: () => handleDownload(uploadFile.id), onReload: () => handleReload(uploadFile.id) }, uploadFile.id));
-    }, [size, showFileSize, disabled, handleDelete, handleDownload, handleReload]);
+    }, [
+        size,
+        showFileSize,
+        disabled,
+        handleDelete,
+        handleDownload,
+        handleReload,
+    ]);
     const uploaderElement = (jsx(Uploader, { accept: accept, disabled: effectiveDisabled, id: id, name: name, multiple: multiple, label: uploaderLabel, icon: uploaderIcon, inputRef: inputRef, inputProps: inputProps, hints: hints, onUpload: handleUpload, ...uploaderConfig }));
     const topUploaderElement = topUploaderConfig ? (jsx(Uploader, { accept: accept, disabled: effectiveDisabled, id: id ? `${id}-top` : undefined, name: name, multiple: multiple, label: uploaderLabel, icon: uploaderIcon, inputRef: inputRef, inputProps: inputProps, hints: hints, onUpload: handleUpload, ...topUploaderConfig })) : null;
     const hintsElement = useMemo(() => {
-        if (!hints || hints.length === 0 || mode === 'list' || mode === 'card-wall')
+        if (!hints ||
+            hints.length === 0 ||
+            mode === 'list' ||
+            mode === 'card-wall')
             return null;
         const hintsClassName = mode === 'cards' ? uploadClasses.fillWidthHints : uploadClasses.hints;
         return (jsx("ul", { className: hintsClassName, children: hints.map((hint) => (jsxs("li", { className: uploadClasses.hint(hint.type || 'info'), children: [jsx(Icon, { icon: hint.type === 'info' ? InfoFilledIcon : DangerousFilledIcon, color: hint.type === 'info' ? 'info' : 'error', size: 14 }), hint.label] }, hint.label))) }));
     }, [hints, mode]);
-    return (jsxs("div", { ref: ref, className: cx(uploadClasses.host, className, mode === 'cards' && uploadClasses.hostCards), ...rest, children: [topUploaderElement, !shouldUsePictureCard && (jsxs("div", { className: uploadClasses.uploadButtonList, children: [uploaderElement, mode === 'button-list' && hintsElement] })), jsxs("div", { className: cx(uploadClasses.uploadList, shouldUsePictureCard && uploadClasses.uploadListCards), children: [shouldUsePictureCard && (jsxs(Fragment, { children: [imageFiles.map((uploadFile) => (jsx(UploadPictureCard, { file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, disabled: disabled, errorMessage: uploadFile.errorMessage, onDelete: () => handleDelete(uploadFile.id), onReload: () => handleReload(uploadFile.id), onDownload: () => handleDownload(uploadFile.id), onZoomIn: () => handleZoomIn(uploadFile.id) }, uploadFile.id))), uploaderElement] })), nonImageFiles.length > 0 && nonImageFiles.map(renderUploadItem), !shouldUsePictureCard && imageFiles.length > 0 && imageFiles.map(renderUploadItem)] }), mode === 'cards' && hintsElement] }));
+    return (jsxs("div", { ref: ref, className: cx(uploadClasses.host, className, mode === 'cards' && uploadClasses.hostCards), ...rest, children: [topUploaderElement, !shouldUsePictureCard && (jsxs("div", { className: uploadClasses.uploadButtonList, children: [uploaderElement, mode === 'button-list' && hintsElement] })), jsxs("div", { className: cx(uploadClasses.uploadList, shouldUsePictureCard && uploadClasses.uploadListCards), children: [shouldUsePictureCard && (jsxs(Fragment, { children: [imageFiles.map((uploadFile) => (jsx(UploadPictureCard, { file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, disabled: disabled, errorMessage: uploadFile.errorMessage, onDelete: () => handleDelete(uploadFile.id), onReload: () => handleReload(uploadFile.id), ...(!isSingleFileCardMode && {
+                                    onDownload: () => handleDownload(uploadFile.id),
+                                    onZoomIn: () => handleZoomIn(uploadFile.id),
+                                }), ...(isSingleFileCardMode && {
+                                    onReplace: (e) => {
+                                        var _a;
+                                        e.stopPropagation();
+                                        replaceFileIdRef.current = uploadFile.id;
+                                        (_a = replaceInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                    },
+                                }) }, uploadFile.id))), !isSingleFileCardMode && uploaderElement, isSingleFileCardMode &&
+                                imageFiles.length === 0 &&
+                                uploaderElement, isSingleFileCardMode && (jsx("input", { ref: replaceInputRef, accept: accept, style: { display: 'none' }, type: "file", onChange: (e) => {
+                                    var _a;
+                                    const selectedFiles = Array.from((_a = e.target.files) !== null && _a !== void 0 ? _a : []);
+                                    e.target.value = '';
+                                    if (selectedFiles.length)
+                                        handleUpload(selectedFiles);
+                                } }))] })), nonImageFiles.length > 0 && nonImageFiles.map(renderUploadItem), !shouldUsePictureCard &&
+                        imageFiles.length > 0 &&
+                        imageFiles.map(renderUploadItem)] }), mode === 'cards' && hintsElement] }));
 });
 
 export { Upload as default };

package/Upload/UploadPictureCard.d.ts

@@ -9,30 +9,35 @@ export interface UploadPictureCardAriaLabels {
      */
     cancelUpload?: string;
     /**
-     * Aria label for uploading status.
-     * @default 'Uploading'
+     * Aria label for the click-to-replace overlay label.
+     * @default 'Click to Replace'
      */
-    uploading?: string;
+    clickToReplace?: string;
     /**
-     * Aria label for zoom in button.
-     * @default 'Zoom in image'
+     * Aria label for delete button.
+     * @default 'Delete file'
      */
-    zoomIn?: string;
+    delete?: string;
     /**
      * Aria label for download button.
      * @default 'Download file'
      */
     download?: string;
-    /**
-     * Aria label for delete button.
-     * @default 'Delete file'
-     */
-    delete?: string;
     /**
      * Aria label for reload/retry button.
      * @default 'Retry upload'
      */
     reload?: string;
+    /**
+     * Aria label for uploading status.
+     * @default 'Uploading'
+     */
+    uploading?: string;
+    /**
+     * Aria label for zoom in button.
+     * @default 'Zoom in image'
+     */
+    zoomIn?: string;
 }
 export interface UploadPictureCardProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
@@ -90,10 +95,6 @@ export interface UploadPictureCardProps extends NativeElementPropsWithoutKeyAndR
      * When delete icon is clicked, this callback will be fired.
      */
     onDelete?: MouseEventHandler;
-    /**
-     * When zoom in icon is clicked, this callback will be fired.
-     */
-    onZoomIn?: MouseEventHandler;
     /**
      * When download icon is clicked, this callback will be fired.
      */
@@ -102,6 +103,15 @@ export interface UploadPictureCardProps extends NativeElementPropsWithoutKeyAndR
      * When reload icon is clicked, this callback will be fired.
      */
     onReload?: MouseEventHandler;
+    /**
+     * When provided, the card becomes a replacement trigger in done status.
+     * On hover, shows a "Click to Replace" overlay label. Fired when the card body is clicked.
+     */
+    onReplace?: MouseEventHandler;
+    /**
+     * When zoom in icon is clicked, this callback will be fired.
+     */
+    onZoomIn?: MouseEventHandler;
 }
 /**
  * The react component for `mezzanine` upload picture card.

package/Upload/UploadPictureCard.js

@@ -15,14 +15,15 @@ import cx from 'clsx';
  */
 const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
     var _a;
-    const { ariaLabels, className, file, url, status = 'loading', imageFit = 'cover', size = 'main', disabled = false, errorMessage, errorIcon, onDelete, onZoomIn, onDownload, onReload, ...rest } = props;
+    const { ariaLabels, className, file, url, status = 'loading', imageFit = 'cover', size = 'main', disabled = false, errorMessage, errorIcon, onDelete, onDownload, onReload, onReplace, onZoomIn, ...rest } = props;
     const defaultAriaLabels = {
         cancelUpload: 'Cancel upload',
-        uploading: 'Uploading',
-        zoomIn: 'Zoom in image',
-        download: 'Download file',
+        clickToReplace: 'Click to Replace',
         delete: 'Delete file',
+        download: 'Download file',
         reload: 'Retry upload',
+        uploading: 'Uploading',
+        zoomIn: 'Zoom in image',
     };
     const labels = { ...defaultAriaLabels, ...ariaLabels };
     const isImage = useMemo(() => {
@@ -92,10 +93,17 @@ const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
         console.warn('UploadPictureCard: minor size is not supported for non-image files');
         return null;
     }
-    return (jsx("div", { className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, className), "aria-disabled": disabled, ref: ref, role: "group", tabIndex: disabled ? -1 : 0, ...rest, children: jsxs("div", { className: uploadPictureCardClasses.container, children: [isImage && imageUrl && status !== 'error' && (jsx("img", { alt: fileName, src: imageUrl, style: {
+    return (jsx("div", { "aria-disabled": disabled, className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, onReplace && status === 'done' && uploadPictureCardClasses.replaceMode, className), onClick: onReplace && status === 'done' ? onReplace : undefined, onKeyDown: onReplace && status === 'done'
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.currentTarget.click();
+                }
+            }
+            : undefined, ref: ref, role: "group", tabIndex: disabled ? -1 : 0, ...rest, children: jsxs("div", { className: uploadPictureCardClasses.container, children: [isImage && imageUrl && status !== 'error' && (jsx("img", { alt: fileName, src: imageUrl, style: {
                         objectFit: imageFit,
                         objectPosition: 'center',
-                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: ZoomInIcon, iconType: "icon-only", onClick: onZoomIn, "aria-label": labels.zoomIn }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: DownloadIcon, onClick: onDownload, "aria-label": labels.download }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: ResetIcon, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
+                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsxs(Fragment, { children: [jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [onZoomIn && (jsx(Button, { variant: "base-secondary", size: "minor", icon: ZoomInIcon, iconType: "icon-only", onClick: onZoomIn, "aria-label": labels.zoomIn })), onDownload && (jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: DownloadIcon, onClick: onDownload, "aria-label": labels.download })), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }), onReplace && (jsx("span", { className: uploadPictureCardClasses.replaceLabel, children: labels.clickToReplace }))] })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: ResetIcon, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
 });
 
 export { UploadPictureCard as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,9 +31,9 @@
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "1.0.0-rc.0",
-    "@mezzanine-ui/icons": "1.0.0-rc.0",
-    "@mezzanine-ui/system": "1.0.0-rc.0",
+    "@mezzanine-ui/core": "1.0.0-rc.1",
+    "@mezzanine-ui/icons": "1.0.0-rc.1",
+    "@mezzanine-ui/system": "1.0.0-rc.1",
     "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",