@mezzanine-ui/react 1.4.0 → 1.4.1

package/Navigation/NavigationOption.js

@@ -24,9 +24,6 @@ const NavigationOption = forwardRef((props, ref) => {
     const currentKey = id || title || href || uuid;
     const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
     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;
@@ -49,6 +46,12 @@ const NavigationOption = forwardRef((props, ref) => {
         });
         return { badge: badgeComponent, items };
     }, [flattenedChildren]);
+    // Group vs leaf is decided by the presence of real sub-options, not by
+    // raw `children` — a lone `Badge` child is rendered inline on a leaf.
+    const hasSubOptions = items.length > 0;
+    const Component = href && !hasSubOptions
+        ? ((_a = anchorComponent !== null && anchorComponent !== void 0 ? anchorComponent : optionsAnchorComponent) !== null && _a !== void 0 ? _a : 'a')
+        : 'div';
     // Default open if current path is activated
     useEffect(() => {
         if (activatedPathKey === currentPathKey ||
@@ -83,7 +86,7 @@ const NavigationOption = forwardRef((props, ref) => {
             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) &&
+    return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionClasses.host, open && navigationOptionClasses.open, !hasSubOptions && 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 && collapsedHiddenKeys.has(currentKey)) ||
             (!collapsed && !filter)
             ? navigationOptionClasses.hidden
@@ -95,16 +98,18 @@ const NavigationOption = forwardRef((props, ref) => {
                         if (collapsed) {
                             handleCollapseChange(false);
                         }
-                        if (!children)
+                        if (!hasSubOptions)
                             setActivatedPath(currentPath);
                     }, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
                             setOpen(!open);
-                            if (!children)
+                            if (!hasSubOptions)
                                 setActivatedPath(currentPath);
                         }
-                    }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.titleWrapper, children: jsx(Fade, { ref: titleRef, in: collapsed === false || !icon, children: jsx("span", { className: navigationOptionClasses.title, children: collapsed && !icon ? Array.from(title).slice(0, 2).join('') : 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: {
+                    }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.titleWrapper, children: jsx(Fade, { ref: titleRef, in: collapsed === false || !icon, children: jsx("span", { className: navigationOptionClasses.title, children: collapsed && !icon
+                                        ? Array.from(title).slice(0, 2).join('')
+                                        : title }) }) }), badge, hasSubOptions && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), hasSubOptions && !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/Select/SelectTrigger.js

@@ -11,7 +11,7 @@ import cx from 'clsx';
 const isMultipleSelection = (props) => props.mode === 'multiple';
 function SelectTriggerComponent(props) {
     var _a, _b, _c;
-    const { active, className, clearable: clearableProp = false, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, isForceClearable = false, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
+    const { active, className, clearable: clearableProp = false, disabled, error, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, isForceClearable = false, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
     const renderValueProp = 'renderValue' in props ? props.renderValue : undefined;
     // Exclude renderValue to avoid leaking unknown props to DOM.
     const sanitizedTextFieldProps = (() => {
@@ -60,9 +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', 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] }));
+        }, className), error: 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] }));
 }
 const SelectTrigger = forwardRef((props, ref) => {
     if (props.mode === 'multiple') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {