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

package/Accordion/AccordionGroup.d.ts

@@ -1,5 +1,10 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface AccordionGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * If true, only one accordion can be expanded at a time.
+     * @default false
+     */
+    exclusive?: boolean;
     /**
      * The size of accordion group, which will be passed to each Accordion in the group.
      * @default 'main'

package/Accordion/AccordionGroup.js

@@ -1,26 +1,49 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, isValidElement } from 'react';
+import { forwardRef, useState, useMemo, isValidElement, useCallback, cloneElement } from 'react';
 import { accordionGroupClasses } from '@mezzanine-ui/core/accordion';
 import { flattenChildren } from '../utils/flatten-children.js';
 import Accordion from './Accordion.js';
 import cx from 'clsx';
 
 const AccordionGroup = forwardRef(function AccordionGroup(props, ref) {
-    const { className, children, size, ...rest } = props;
-    const childrenWithSize = useMemo(() => flattenChildren(children).map((child) => {
+    const { className, children, exclusive = false, size, ...rest } = props;
+    const [expandedIndex, setExpandedIndex] = useState(null);
+    const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
+    const defaultExpandedIndex = useMemo(() => flattenedChildren.findIndex((child) => isValidElement(child) &&
+        child.type === Accordion &&
+        typeof child.props.expanded === 'undefined' &&
+        !!child.props.defaultExpanded), [flattenedChildren]);
+    const resolvedExpandedIndex = expandedIndex === null ? defaultExpandedIndex : expandedIndex;
+    const handleChange = useCallback((index, open) => {
+        setExpandedIndex(open ? index : -1);
+    }, []);
+    const childrenWithProps = useMemo(() => flattenedChildren.map((child, index) => {
         if (isValidElement(child) && child.type === Accordion) {
-            return {
-                ...child,
-                props: {
-                    ...child.props,
-                    size,
-                },
-            };
+            const accordionProps = child.props;
+            const extraProps = { size };
+            if (exclusive) {
+                const isExpandedControlled = typeof accordionProps.expanded !== 'undefined';
+                if (!isExpandedControlled) {
+                    extraProps.expanded = resolvedExpandedIndex === index;
+                }
+                extraProps.onChange = (open) => {
+                    if (typeof accordionProps.onChange === 'function') {
+                        accordionProps.onChange(open);
+                    }
+                    if (!isExpandedControlled) {
+                        handleChange(index, open);
+                    }
+                };
+            }
+            return cloneElement(child, {
+                ...accordionProps,
+                ...extraProps,
+            });
         }
         return child;
-    }), [children, size]);
-    return (jsx("div", { ...rest, ref: ref, className: cx(accordionGroupClasses.host, className), children: childrenWithSize }));
+    }), [exclusive, flattenedChildren, handleChange, resolvedExpandedIndex, size]);
+    return (jsx("div", { ...rest, ref: ref, className: cx(accordionGroupClasses.host, className), children: childrenWithProps }));
 });
 
 export { AccordionGroup as default };

package/AutoComplete/AutoComplete.d.ts

@@ -131,6 +131,7 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * Imperative handle to control search text externally (e.g. reset or sync).
      */
     searchTextControlRef?: RefObject<{
+        reset: () => void;
         setSearchText: Dispatch<SetStateAction<string>>;
     } | undefined>;
     /**

package/AutoComplete/AutoComplete.js

@@ -92,7 +92,10 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
                 : undefined,
         });
     /** export set search text action to props (allow user to customize search text) */
-    useImperativeHandle(searchTextControlRef, () => ({ setSearchText }));
+    useImperativeHandle(searchTextControlRef, () => ({
+        reset: resetSearchInputsAndOptions,
+        setSearchText,
+    }));
     /** Track created items (new, unselected, all) */
     const { clearUnselected, filterUnselected, isCreated, markCreated, clearNewlyCreated, markUnselected, } = useCreationTracker();
     const creationEnabled = addable && typeof onInsert === 'function';

package/DatePicker/DatePicker.js

@@ -152,7 +152,7 @@ const DatePicker = forwardRef(function DatePicker(props, ref) {
         onCalendarToggle(!open);
     };
     const suffixActionIcon = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarIcon, onClick: readOnly ? undefined : onIconClick }));
-    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, errorMessages: errorMessages, format: format, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: (e) => {
+    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, forceShowClearable: !!internalValue, hideSuffixWhenClearable: clearable, errorMessages: errorMessages, format: format, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: (e) => {
                     onInputChange(e);
                     onCalendarChange(e.target.value);
                     onCalendarToggle(true);

package/DateRangePicker/DateRangePicker.js

@@ -223,7 +223,7 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
         onCalendarToggle(!open);
     }, [onChange, onCalendarToggle, open, valueProp]);
     const suffixActionIcon = jsx(Icon, { icon: CalendarIcon, onClick: onIconClick });
-    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { className: className, clearable: clearable, disabled: disabled, error: error, errorMessagesFrom: errorMessagesFrom, errorMessagesTo: errorMessagesTo, format: format, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: inputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: inputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClear, onFromBlur: onFromBlur, onFromFocus: onFromFocusHandler, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, onToBlur: onToBlur, onToFocus: onToFocusHandler, prefix: prefix, readOnly: readOnly, ref: triggerComposedRef, required: required, size: size, suffixActionIcon: suffixActionIcon, validateFrom: validateFrom, validateTo: validateTo }), jsx(DateRangePickerCalendar, { actions: actions, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, fadeProps: fadeProps, firstCalendarRef: firstCalendarRef, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: getIsInRangeHandler('half-year'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), isQuarterDisabled: isQuarterDisabled, isQuarterInRange: getIsInRangeHandler('quarter'), isWeekDisabled: isWeekDisabled, isWeekInRange: getIsInRangeHandler('week'), isYearDisabled: isYearDisabled, isYearInRange: getIsInRangeHandler('year'), mode: mode, onChange: onCalendarChangeWithCloseControl, onDateHover: onCalendarHover, onHalfYearHover: onCalendarHover, onMonthHover: onCalendarHover, onQuarterHover: onCalendarHover, onWeekHover: onCalendarHover, onYearHover: onCalendarHover, open: open, popperProps: popperProps, quickSelect: quickSelect, ref: calendarRef, referenceDate: referenceDate, renderAnnotations: renderAnnotations, secondCalendarRef: secondCalendarRef, value: calendarValue })] }));
+    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { className: className, clearable: clearable, disabled: disabled, forceShowClearable: !!(internalValue[0] || internalValue[1]), hideSuffixWhenClearable: clearable, error: error, errorMessagesFrom: errorMessagesFrom, errorMessagesTo: errorMessagesTo, format: format, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: inputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: inputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClear, onFromBlur: onFromBlur, onFromFocus: onFromFocusHandler, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, onToBlur: onToBlur, onToFocus: onToFocusHandler, prefix: prefix, readOnly: readOnly, ref: triggerComposedRef, required: required, size: size, suffixActionIcon: suffixActionIcon, validateFrom: validateFrom, validateTo: validateTo }), jsx(DateRangePickerCalendar, { actions: actions, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, fadeProps: fadeProps, firstCalendarRef: firstCalendarRef, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: getIsInRangeHandler('half-year'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), isQuarterDisabled: isQuarterDisabled, isQuarterInRange: getIsInRangeHandler('quarter'), isWeekDisabled: isWeekDisabled, isWeekInRange: getIsInRangeHandler('week'), isYearDisabled: isYearDisabled, isYearInRange: getIsInRangeHandler('year'), mode: mode, onChange: onCalendarChangeWithCloseControl, onDateHover: onCalendarHover, onHalfYearHover: onCalendarHover, onMonthHover: onCalendarHover, onQuarterHover: onCalendarHover, onWeekHover: onCalendarHover, onYearHover: onCalendarHover, open: open, popperProps: popperProps, quickSelect: quickSelect, ref: calendarRef, referenceDate: referenceDate, renderAnnotations: renderAnnotations, secondCalendarRef: secondCalendarRef, value: calendarValue })] }));
 });
 
 export { DateRangePicker as default };

package/DateTimePicker/DateTimePicker.js

@@ -217,7 +217,7 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
         }
     }, [disabled, focusedInput, onPanelToggle, readOnly]);
     const suffix = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarTimeIcon, onClick: onCalendarIconClick }));
-    return (jsxs(Fragment, { children: [jsx(PickerTriggerWithSeparator, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, formatLeft: formatDate, formatRight: formatTime, fullWidth: fullWidth, inputLeftRef: inputLeftRef, inputRightRef: inputRightRef, onBlurLeft: () => { }, onBlurRight: () => { }, onChangeLeft: onChangeLeft, onChangeRight: onChangeRight, onClear: onClear, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onLeftComplete: onLeftComplete, onPasteIsoValueLeft: onPasteIsoValueLeft, onPasteIsoValueRight: onPasteIsoValueRight, onRightComplete: onRightComplete, placeholderLeft: placeholderLeft, placeholderRight: placeholderRight, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffix, valueLeft: displayDateValue, valueRight: displayTimeValue }), jsx(DatePickerCalendar, { ref: calendarPanelRef, anchor: anchorRef, calendarProps: calendarProps, calendarRef: calendarRef, disabledMonthSwitch: disabledMonthSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isHalfYearDisabled: isHalfYearDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: openCalendar, popperProps: popperProps, referenceDate: referenceDate, value: dateValue }), jsx(TimePickerPanel, { ref: timePanelRef, anchor: anchorRef, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onTimePanelChange, open: openTimePanel, popperProps: popperPropsTime, secondStep: secondStep, value: timeValue })] }));
+    return (jsxs(Fragment, { children: [jsx(PickerTriggerWithSeparator, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, forceShowClearable: !!(dateValue || timeValue), hideSuffixWhenClearable: clearable, error: error, formatLeft: formatDate, formatRight: formatTime, fullWidth: fullWidth, inputLeftRef: inputLeftRef, inputRightRef: inputRightRef, onBlurLeft: () => { }, onBlurRight: () => { }, onChangeLeft: onChangeLeft, onChangeRight: onChangeRight, onClear: onClear, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onLeftComplete: onLeftComplete, onPasteIsoValueLeft: onPasteIsoValueLeft, onPasteIsoValueRight: onPasteIsoValueRight, onRightComplete: onRightComplete, placeholderLeft: placeholderLeft, placeholderRight: placeholderRight, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffix, valueLeft: displayDateValue, valueRight: displayTimeValue }), jsx(DatePickerCalendar, { ref: calendarPanelRef, anchor: anchorRef, calendarProps: calendarProps, calendarRef: calendarRef, disabledMonthSwitch: disabledMonthSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isHalfYearDisabled: isHalfYearDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: openCalendar, popperProps: popperProps, referenceDate: referenceDate, value: dateValue }), jsx(TimePickerPanel, { ref: timePanelRef, anchor: anchorRef, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onTimePanelChange, open: openTimePanel, popperProps: popperPropsTime, secondStep: secondStep, value: timeValue })] }));
 });
 
 export { DateTimePicker as default };

package/Dropdown/DropdownItem.js

@@ -320,8 +320,11 @@ function DropdownItem(props) {
         return renderDefaultOptions(optionList, startIndex);
     };
     const { elements: renderedOptions } = renderOptions(optionsContent, 0, -1);
-    // Show full status when options are empty and status is provided, but not when loadingPosition is 'bottom'
-    const shouldShowFullStatus = optionsContent.length === 0 && status && loadingPosition !== 'bottom';
+    // Show full status when options are empty and status is provided.
+    // Empty status always shows as full; loading status respects loadingPosition (bottom vs full).
+    const shouldShowFullStatus = optionsContent.length === 0 &&
+        status &&
+        (status === 'empty' || loadingPosition !== 'bottom');
     // Show bottom loading when status is loading and loadingPosition is bottom
     const shouldShowBottomLoading = status === 'loading' && loadingPosition === 'bottom';
     const listStyle = useMemo(() => {

package/Navigation/Navigation.d.ts

@@ -20,6 +20,12 @@ export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef
      * @default false (expanded)
      */
     collapsed?: boolean;
+    /**
+     * When true, href must match the current pathname exactly to be activated.
+     * When false (default), any href that is a prefix of the current pathname will be activated.
+     * @default false
+     */
+    exactActivatedMatch?: boolean;
     /**
      * Whether to show search input
      */

package/Navigation/Navigation.js

@@ -15,7 +15,7 @@ import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
-    const { activatedPath, children = [], className, collapsed: collapsedProp, filter, onCollapseChange, onOptionClick, optionsAnchorComponent, ...rest } = props;
+    const { activatedPath, children = [], className, collapsed: collapsedProp, exactActivatedMatch = false, 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) => {
@@ -83,7 +83,11 @@ const Navigation = forwardRef((props, ref) => {
                     continue;
                 }
                 const newPath = [...path, newKey];
-                if (item.props.href && item.props.href === currentPathname) {
+                const hrefMatches = exactActivatedMatch
+                    ? item.props.href === currentPathname
+                    : currentPathname === item.props.href ||
+                        currentPathname.startsWith(item.props.href + '/');
+                if (item.props.href && hrefMatches) {
                     combineSetActivatedPath(newPath);
                     return true;
                 }
@@ -98,7 +102,7 @@ const Navigation = forwardRef((props, ref) => {
         };
         checkActivatedPathKey(level1Items, []);
         hrefActivated.current = true;
-    }, [combineSetActivatedPath, currentPathname, level1Items]);
+    }, [combineSetActivatedPath, currentPathname, exactActivatedMatch, level1Items]);
     const { contentRef, visibleCount } = useVisibleItems(items, collapsed);
     const { collapsedItems, collapsedMenuItems } = useMemo(() => {
         return {

package/Select/SelectTrigger.js

@@ -60,7 +60,7 @@ function SelectTriggerComponent(props) {
     return (jsxs(TextField, { ref: innerRef, ...interactiveProps, ...sanitizedTextFieldProps, onClick: onClick, active: active, className: cx(selectClasses.trigger, selectClasses.triggerMode(mode), selectClasses.triggerSelected(Array.isArray(props.value) ? (_a = props.value) === null || _a === void 0 ? void 0 : _a.length : props.value), {
             [selectClasses.triggerReadOnly]: readOnly,
             [selectClasses.triggerDisabled]: disabled,
-        }, className), error: type === 'error', forceShowClearable: shouldEnableClearable, size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, clearable: shouldEnableClearable, children: [jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-haspopup": "listbox", autoComplete: "off", className: cx(selectClasses.triggerInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, placeholder: placeholder, readOnly: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) !== null && _b !== void 0 ? _b : true, required: required, type: "text", value: renderValue() }), isMultipleSelection(props) && ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length)
+        }, className), error: type === 'error', clearable: shouldEnableClearable, forceShowClearable: shouldEnableClearable, size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, children: [jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-haspopup": "listbox", autoComplete: "off", className: cx(selectClasses.triggerInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, placeholder: placeholder, readOnly: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) !== null && _b !== void 0 ? _b : true, required: required, type: "text", value: renderValue() }), isMultipleSelection(props) && ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length)
                 ? (jsx(SelectTriggerTags, { disabled: disabled, overflowStrategy: overflowStrategy, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: props.value }))
                 : null] }));
 }

package/Table/Table.js

@@ -23,7 +23,7 @@ import Scrollbar from '../Scrollbar/Scrollbar.js';
 import cx from 'clsx';
 
 function TableInner(props, ref) {
-    const { actions, className, columns, dataSource, draggable, emptyProps, expandable, fullWidth = false, highlight = 'row', loading = false, loadingRowsCount = 10, minHeight, nested = false, pagination, pinnable, resizable = false, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, toggleable, collectable, transitionState, zebraStriping, separatorAtRowIndexes, ...restProps } = props;
+    const { actions, className, columns, dataSource, draggable, emptyProps, expandable, fullWidth = false, highlight = 'row', loading = false, loadingRowsCount = 10, minHeight, nested = false, pagination, pinnable, resizable = false, rowState, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, toggleable, collectable, transitionState, zebraStriping, separatorAtRowIndexes, ...restProps } = props;
     const hostRef = useRef(null);
     const composedHostRef = useComposeRefs([ref, hostRef]);
     /** Feature: Loading */
@@ -244,6 +244,7 @@ function TableInner(props, ref) {
         pagination: pagination || undefined,
         pinnable: pinnableState,
         resizable,
+        rowState,
         rowHeight,
         scroll,
         scrollContainerRef,
@@ -272,6 +273,7 @@ function TableInner(props, ref) {
         pagination,
         pinnableState,
         resizable,
+        rowState,
         rowHeight,
         scroll,
         scrollContainerRef,

package/Table/TableContext.d.ts

@@ -1,4 +1,4 @@
-import type { HighlightMode, TableSize, TableActionsBase, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableScroll, TableSelectionMode, TableCollectable, TableToggleable, TablePinnable, TableDraggable } from '@mezzanine-ui/core/table';
+import type { HighlightMode, TableSize, TableActionsBase, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableRowState, TableScroll, TableSelectionMode, TableCollectable, TableToggleable, TablePinnable, TableDraggable } from '@mezzanine-ui/core/table';
 import type { EmptyProps } from '../Empty';
 import type { PaginationProps } from '../Pagination';
 import type { UseTableFixedOffsetsReturn } from './hooks/useTableFixedOffsets';
@@ -59,6 +59,7 @@ export interface TableContextValue<T extends TableDataSource = TableDataSource>
     pagination?: PaginationProps;
     pinnable?: TablePinnable;
     resizable?: boolean;
+    rowState?: TableRowState | ((rowData: TableDataSource) => TableRowState | undefined);
     rowHeight: number;
     scroll?: TableScroll;
     scrollContainerRef?: React.RefObject<HTMLDivElement | null>;

package/Table/components/TableRow.js

@@ -14,6 +14,18 @@ import { TableToggleableCell } from './TableToggleableCell.js';
 import { composeRefs } from '../../utils/composeRefs.js';
 import cx from 'clsx';
 
+const resolveRowStateClass = (state) => {
+    switch (state) {
+        case 'added':
+            return tableClasses.bodyRowStateAdded;
+        case 'deleted':
+            return tableClasses.bodyRowStateDeleted;
+        case 'disabled':
+            return tableClasses.bodyRowStateDisabled;
+        default:
+            return undefined;
+    }
+};
 const parseFixed = (fixed) => {
     if (fixed === true || fixed === 'start')
         return 'start';
@@ -24,7 +36,7 @@ const parseFixed = (fixed) => {
 const TableRowInner = forwardRef(function TableRow(props, ref) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { className, draggableProvided, record, rowIndex, style } = props;
-    const { actions, collectable, draggable, expansion, fixedOffsets, highlight, pinnable, rowHeight, selection, separatorAtRowIndexes, toggleable, transitionState, zebraStriping, } = useTableContext();
+    const { actions, collectable, draggable, expansion, fixedOffsets, highlight, pinnable, rowState, rowHeight, selection, separatorAtRowIndexes, toggleable, transitionState, zebraStriping, } = useTableContext();
     const { columns } = useTableDataContext();
     const isDragging = useMemo(() => {
         var _a;
@@ -178,7 +190,7 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
             [tableClasses.bodyRowSelected]: isSelected,
             [tableClasses.bodyRowSeparator]: isSeparatorRow,
             [tableClasses.bodyRowZebra]: isZebraRow,
-        }, className), "data-index": rowIndex, "data-row-key": rowKey, onMouseLeave: handleMouseLeave, ref: rowRef, tabIndex: 0, ...draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps, style: resolvedStyle, children: [renderExpandCell(), renderDragOrPinHandleCell(), renderSelectionCell(), renderCells()] }));
+        }, resolveRowStateClass(typeof rowState === 'function' ? rowState(record) : rowState), className), "data-index": rowIndex, "data-row-key": rowKey, onMouseLeave: handleMouseLeave, ref: rowRef, tabIndex: 0, ...draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps, style: resolvedStyle, children: [renderExpandCell(), renderDragOrPinHandleCell(), renderSelectionCell(), renderCells()] }));
 });
 const TableRow = memo(TableRowInner);
 

package/Table/index.d.ts

@@ -1,4 +1,4 @@
-export { TABLE_ACTIONS_KEY, tableClasses as classes, getCellAlignClass, getRowKey, type ColumnAlign, type FixedType, type HighlightMode, type SortOrder, type TableActionItem, type TableActions, type TableActionsBase, type TableActionsWithMinWidth, type TableBulkActions, type TableBulkGeneralAction, type TableBulkOverflowAction, type TableColumnBase, type TableColumnBaseWithMinWidthRequired, type TableColumn, type TableColumnTitleMenu, type TableColumnWithDataIndex, type TableColumnWithDataIndexAndMinWidth, type TableColumnWithMinWidth, type TableColumnWithRender, type TableColumnWithRenderAndMinWidth, type TableDataSource, type TableDataSourceWithId, type TableDataSourceWithKey, type TableCollectable, type TableDraggable, type TableExpandable, type TablePinnable, type TableRecord, type TableToggleable, type TableRowSelection, type TableRowSelectionBase, type TableRowSelectionCheckbox, type TableRowSelectionRadio, type TableScroll, type TableSelectionMode, type TableSize, } from '@mezzanine-ui/core/table';
+export { TABLE_ACTIONS_KEY, tableClasses as classes, getCellAlignClass, getRowKey, type ColumnAlign, type FixedType, type HighlightMode, type SortOrder, type TableActionItem, type TableActions, type TableActionsBase, type TableActionsWithMinWidth, type TableBulkActions, type TableBulkGeneralAction, type TableBulkOverflowAction, type TableColumnBase, type TableColumnBaseWithMinWidthRequired, type TableColumn, type TableColumnTitleMenu, type TableColumnWithDataIndex, type TableColumnWithDataIndexAndMinWidth, type TableColumnWithMinWidth, type TableColumnWithRender, type TableColumnWithRenderAndMinWidth, type TableDataSource, type TableDataSourceWithId, type TableDataSourceWithKey, type TableCollectable, type TableDraggable, type TableExpandable, type TablePinnable, type TableRecord, type TableToggleable, type TableRowSelection, type TableRowSelectionBase, type TableRowState, type TableRowSelectionCheckbox, type TableRowSelectionRadio, type TableScroll, type TableSelectionMode, type TableSize, } from '@mezzanine-ui/core/table';
 export { default } from './Table';
 export type { TableBaseProps, TableDraggableOnlyProps, TableNoDragOrPinProps, TableNonResizableProps, TableNonVirtualizedProps, TablePinnableOnlyProps, TableProps, TableResizableProps, TableVirtualizedProps, } from './typings';
 export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext, type TableResizedColumnState, type TableContextValue, type TableDataContextValue, type TableHighlightState, type TableExpansionState, type TableSelectionState, type TableSortingState, } from './TableContext';

package/Table/typings.d.ts

@@ -1,4 +1,4 @@
-import type { HighlightMode, TableActions, TableActionsWithMinWidth, TableCollectable, TableColumn, TableColumnWithMinWidth, TableDataSource, TableDraggable, TableExpandable, TablePinnable, TableRowSelection, TableScroll, TableSize, TableToggleable } from '@mezzanine-ui/core/table';
+import type { HighlightMode, TableActions, TableActionsWithMinWidth, TableCollectable, TableColumn, TableColumnWithMinWidth, TableDataSource, TableDraggable, TableExpandable, TablePinnable, TableRowSelection, TableRowState, TableScroll, TableSize, TableToggleable } from '@mezzanine-ui/core/table';
 import type { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import type { EmptyProps } from '../Empty';
 import type { TablePaginationProps } from './components/TablePagination';
@@ -47,6 +47,8 @@ export interface TableBaseProps<T extends TableDataSource = TableDataSource> ext
     rowHeightPreset?: 'base' | 'condensed' | 'detailed' | 'roomy';
     /** Row selection configuration */
     rowSelection?: TableRowSelection<T>;
+    /** Semantic state applied to each row. Accepts a state string or a function that receives the row data and returns a state string. */
+    rowState?: TableRowState | ((rowData: T) => TableRowState | undefined);
     /** Row indexes where a separator border should be displayed */
     separatorAtRowIndexes?: number[];
     /** Show header row */

package/TextField/TextField.d.ts

@@ -39,6 +39,11 @@ export interface TextFieldBaseProps extends Omit<NativeElementPropsWithoutKeyAnd
      * @default false
      */
     forceShowClearable?: boolean;
+    /**
+     * Whether to hide the suffix when the clear button is visible.
+     * @default false
+     */
+    hideSuffixWhenClearable?: boolean;
     /**
      * Whether the field is in error state.
      * @default false

package/TextField/TextField.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { textFieldClasses } from '@mezzanine-ui/core/text-field';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import ClearActions from '../ClearActions/ClearActions.js';
@@ -11,7 +11,7 @@ import cx from 'clsx';
  * The react component for `mezzanine` text field.
  */
 const TextField = forwardRef(function TextField(props, ref) {
-    const { active = false, children, className, clearable = false, disabled, error = false, forceShowClearable = false, fullWidth = true, onClear, onClick: onClickProps, onKeyDown: onKeyDownProps, prefix, readonly, role: roleProp, size = 'main', suffix, typing: typingProp, warning, ...rest } = props;
+    const { active = false, children, className, clearable = false, disabled, error = false, forceShowClearable = false, fullWidth = true, hideSuffixWhenClearable = false, onClear, onClick: onClickProps, onKeyDown: onKeyDownProps, prefix, readonly, role: roleProp, size = 'main', suffix, typing: typingProp, warning, ...rest } = props;
     const [isTyping, setIsTyping] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -117,11 +117,9 @@ const TextField = forwardRef(function TextField(props, ref) {
             [textFieldClasses.readonly]: readonly,
             [textFieldClasses.typing]: typing,
             [textFieldClasses.active]: active,
+            [textFieldClasses.clearing]: shouldShowClearable,
             [textFieldClasses.warning]: warning,
-        }, className), children: [prefix && jsx("div", { className: textFieldClasses.prefix, children: prefix }), renderedChildren, clearable && (jsx(ClearActions, { type: "clearable", className: textFieldClasses.clearIcon, style: {
-                    opacity: shouldShowClearable ? 1 : 0,
-                    pointerEvents: shouldShowClearable ? 'auto' : 'none',
-                }, onClick: (event) => {
+        }, className), children: [prefix && jsx("div", { className: textFieldClasses.prefix, children: prefix }), renderedChildren, clearable && !hideSuffixWhenClearable && (jsx(ClearActions, { type: "clearable", className: textFieldClasses.clearIcon, onClick: (event) => {
                     if (!disabled && !readonly && onClear) {
                         onClear(event);
                         requestAnimationFrame(() => {
@@ -129,7 +127,15 @@ const TextField = forwardRef(function TextField(props, ref) {
                             (_a = checkValueRef.current) === null || _a === void 0 ? void 0 : _a.call(checkValueRef);
                         });
                     }
-                }, onMouseDown: (event) => event.preventDefault(), tabIndex: -1 })), suffix && jsx("div", { className: textFieldClasses.suffix, children: suffix })] }));
+                }, onMouseDown: (event) => event.preventDefault(), tabIndex: -1 })), suffix && (jsx("div", { className: cx(textFieldClasses.suffix, { [textFieldClasses.suffixOverlay]: hideSuffixWhenClearable }), children: hideSuffixWhenClearable ? (jsxs(Fragment, { children: [jsx("div", { className: textFieldClasses.suffixContent, children: suffix }), clearable && (jsx(ClearActions, { type: "clearable", className: textFieldClasses.clearIcon, onClick: (event) => {
+                                if (!disabled && !readonly && onClear) {
+                                    onClear(event);
+                                    requestAnimationFrame(() => {
+                                        var _a;
+                                        (_a = checkValueRef.current) === null || _a === void 0 ? void 0 : _a.call(checkValueRef);
+                                    });
+                                }
+                            }, onMouseDown: (event) => event.preventDefault(), tabIndex: -1 }))] })) : suffix }))] }));
 });
 
 export { TextField as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "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.2",
-    "@mezzanine-ui/icons": "1.0.0-rc.2",
-    "@mezzanine-ui/system": "1.0.0-rc.2",
+    "@mezzanine-ui/core": "1.0.0-rc.3",
+    "@mezzanine-ui/icons": "1.0.0-rc.3",
+    "@mezzanine-ui/system": "1.0.0-rc.3",
     "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",