@mezzanine-ui/react 0.13.1 → 0.13.2

package/Loading/Loading.js

@@ -10,12 +10,15 @@ import cx from 'clsx';
 const Loading = forwardRef(function Loading(props, ref) {
     const hostRef = useRef(null);
     const { children, className, stretch = false, iconProps = {}, loading = false, overlayProps = {}, tip, tipClassName, } = props;
-    const { className: iconClassName, color: iconColor, ...iconPropsRest } = iconProps;
+    const { className: iconClassName, color: iconColor, size: iconSize, style: iconStyle, ...iconPropsRest } = iconProps;
     const isNestedPattern = typeof children !== 'undefined';
     const composedHostRef = useComposeRefs([ref, hostRef]);
     const spinElement = loading ? (jsxs("div", { ref: isNestedPattern ? null : ref, className: cx(iconClasses.spin, {
             [iconClasses.stretch]: stretch,
-        }), children: [jsx(Icon, { ...iconPropsRest, className: cx(iconClasses.icon, iconClassName), color: iconColor || 'primary', icon: SpinnerIcon, spin: true }), tip ? (jsx("span", { className: cx(iconClasses.tip, tipClassName), children: tip })) : null] })) : null;
+        }), children: [jsx(Icon, { ...iconPropsRest, className: cx(iconClasses.icon, iconClassName), color: iconColor || 'primary', icon: SpinnerIcon, spin: true, style: {
+                    ...(iconSize ? { fontSize: `${iconSize}px` } : {}),
+                    ...(iconStyle || {}),
+                } }), tip ? (jsx("span", { className: cx(iconClasses.tip, tipClassName), children: tip })) : null] })) : null;
     if (isNestedPattern) {
         return (jsxs("div", { ref: composedHostRef, className: cx(iconClasses.host, {
                 [iconClasses.stretch]: stretch,

package/Select/Select.d.ts

@@ -6,7 +6,7 @@ import { PopperProps } from '../Popper';
 import { SelectValue } from './typings';
 import { PickRenameMulti } from '../utils/general';
 import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
     maxHeight: 'menuMaxHeight';
     role: 'menuRole';
     size: 'menuSize';
@@ -18,6 +18,13 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
      * The other native props for input element.
      */
     inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
+    /**
+     * Popup menu scroll listener
+     */
+    onMenuScroll?: (computed: {
+        scrollTop: number;
+        maxScrollTop: number;
+    }, target: HTMLUListElement) => void;
     /**
      * select input placeholder
      */

package/Select/Select.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef, useMemo } from 'react';
+import { forwardRef, useContext, useState, useRef, useCallback, useMemo } from 'react';
 import { selectClasses } from '@mezzanine-ui/core/select';
 import isArray from 'lodash/isArray';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
@@ -16,7 +16,7 @@ const MENU_ID = 'mzn-select-menu-id';
 const Select = forwardRef(function Select(props, ref) {
     var _a, _b;
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onMenuScroll, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
     const [open, toggleOpen] = useState(false);
     const onOpen = () => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
@@ -98,6 +98,17 @@ const Select = forwardRef(function Select(props, ref) {
             }
         }
     };
+    /** menu onScroll listener */
+    const onMenuScrollCallback = useCallback(async (evt) => {
+        if (onMenuScroll) {
+            const target = evt.target;
+            const maxScrollTop = target.scrollHeight - target.getBoundingClientRect().height;
+            onMenuScroll({
+                scrollTop: target.scrollTop,
+                maxScrollTop,
+            }, target);
+        }
+    }, [onMenuScroll]);
     const resolvedInputProps = {
         ...inputProps,
         'aria-controls': MENU_ID,
@@ -110,7 +121,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
 });
 var Select$1 = Select;
 

package/Select/TreeSelect.d.ts

@@ -7,7 +7,7 @@ import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
 import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
 import { SelectValue, TreeSelectOption } from './typings';
 import { TreeProps } from '../Tree';
-export interface TreeSelectProps extends Omit<SelectTriggerProps, 'active' | 'onBlur' | 'onChange' | 'onClear' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'searchInputProps'>, FormElementFocusHandlers, Pick<TreeProps, 'defaultExpandAll' | 'disabledValues' | 'expandControllerRef'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+export interface TreeSelectProps extends Omit<SelectTriggerProps, 'active' | 'onBlur' | 'onChange' | 'onClear' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'searchInputProps'>, FormElementFocusHandlers, Pick<TreeProps, 'defaultExpandAll' | 'disabledValues' | 'expandControllerRef' | 'onExpand'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
     maxHeight: 'menuMaxHeight';
     role: 'menuRole';
     size: 'menuSize';

package/Select/TreeSelect.js

@@ -14,7 +14,7 @@ import cx from 'clsx';
 
 const TreeSelect = forwardRef((props, ref) => {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { className, clearable = false, defaultExpandAll, depth, disabled = disabledFromFormControl || false, disabledValues, error = severity === 'error' || false, expandControllerRef, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuProps, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onFocus, options, placeholder = '', popperOptions, prefix, renderValue, required = requiredFromFormControl || false, sameWidth = false, size, suffixActionIcon, treeProps, value: valueProp, } = props;
+    const { className, clearable = false, defaultExpandAll, depth, disabled = disabledFromFormControl || false, disabledValues, error = severity === 'error' || false, expandControllerRef, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuProps, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onExpand: onExpandProp, onFocus, options, placeholder = '', popperOptions, prefix, renderValue, required = requiredFromFormControl || false, sameWidth = false, size, suffixActionIcon, treeProps, value: valueProp, } = props;
     const { className: treeClassName, ...restTreeProps } = treeProps || {};
     const { width, border, ...restStyle } = (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || {};
     const multiple = mode === 'multiple';
@@ -142,6 +142,7 @@ const TreeSelect = forwardRef((props, ref) => {
         return {
             label: option.name,
             value: option.id,
+            dynamicNodesFetching: option.dynamicChildrenFetching,
             nodes: (_a = option.siblings) === null || _a === void 0 ? void 0 : _a.map((sibling) => mapOptionToNode(sibling)),
         };
     }
@@ -186,6 +187,7 @@ const TreeSelect = forwardRef((props, ref) => {
     const onExpand = (value) => {
         const newExpandedValues = toggleValue(value, expandedValues);
         setExpandedValues(newExpandedValues);
+        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp(value);
     };
     return (jsxs("div", { ref: nodeRef, className: selectClasses.treeSelect, children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, mode: mode, onClear: onClear, onClick: onTextFieldClick, onKeyDown: onTextFieldKeydown, onTagClose: onTagClose, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, size: size, suffixActionIcon: suffixActionIcon, value: valueProp }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, controllerRef: controllerRef, open: open, options: popperOptions, sameWidth: sameWidth, children: jsx(Menu, { itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: {
                         ...restStyle,

package/Select/typings.d.ts

@@ -3,6 +3,7 @@ export interface SelectValue {
     name: string;
 }
 export interface TreeSelectOption extends SelectValue {
+    dynamicChildrenFetching?: boolean;
     siblings?: TreeSelectOption[];
 }
 export interface SelectControl {

package/Tree/TreeNode.js

@@ -4,6 +4,7 @@ import { CaretRightIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useContext, useMemo } from 'react';
 import Typography from '../Typography/Typography.js';
 import { MezzanineConfig } from '../Provider/context.js';
+import Loading from '../Loading/Loading.js';
 import Icon from '../Icon/Icon.js';
 import Checkbox from '../Checkbox/Checkbox.js';
 import Collapse from '../Transition/Collapse.js';
@@ -14,7 +15,7 @@ import cx from 'clsx';
  */
 const TreeNode = forwardRef(function TreeNode(props, ref) {
     const { size: globalSize, } = useContext(MezzanineConfig);
-    const { children, className, disabled, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = globalSize, value, ...restRootProps } = props;
+    const { children, className, disabled, dynamicNodesFetching, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = globalSize, value, ...restRootProps } = props;
     const variant = useMemo(() => {
         if (size === 'small') {
             return 'input3';
@@ -26,7 +27,8 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
     }, [size]);
     const onExpand = onExpandProp ? () => { onExpandProp(value); } : undefined;
     const onSelect = selectable && onSelectProp && !disabled ? () => { onSelectProp(value); } : undefined;
-    return (jsxs("li", { ref: ref, ...restRootProps, className: cx(treeClasses.node, treeClasses.nodeSize(size), className), children: [jsxs("div", { className: treeClasses.nodeStem, children: [children ? (jsx(Icon, { icon: CaretRightIcon, className: cx(treeClasses.nodeCaret, {
+    const mayHaveChildren = children || dynamicNodesFetching;
+    return (jsxs("li", { ref: ref, ...restRootProps, className: cx(treeClasses.node, treeClasses.nodeSize(size), className), children: [jsxs("div", { className: treeClasses.nodeStem, children: [mayHaveChildren ? (jsx(Icon, { icon: CaretRightIcon, className: cx(treeClasses.nodeCaret, {
                             [treeClasses.nodeCaretExpanded]: expanded,
                         }), role: "button", onClick: onExpand })) : (jsx("div", {})), multiple
                         ? (jsx(Checkbox, { checked: !!selected, disabled: disabled, indeterminate: indeterminate, onChange: onSelect, size: size, value: `${value}`, children: label }))
@@ -35,7 +37,7 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
                                 [treeClasses.nodeLabelIndeterminate]: indeterminate,
                                 [treeClasses.nodeLabelActive]: selected,
                                 [treeClasses.nodeLabelDisabled]: disabled,
-                            }), children: label }))] }), children && (jsx(Collapse, { in: expanded, appear: false, children: children }))] }));
+                            }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Loading, { loading: true, iconProps: { size: 16 } }) }))] }));
 });
 var TreeNode$1 = TreeNode;
 

package/Tree/useTreeExpandedValue.d.ts

@@ -10,6 +10,6 @@ export interface UseTreeExpandedValueProps {
 }
 export declare function useTreeExpandedValue(props: UseTreeExpandedValueProps): {
     expandedValues: TreeNodeValue[];
-    onExpand: (value: TreeNodeValue) => void;
+    onExpand: ((value: TreeNodeValue) => void) | undefined;
     setExpandedValues: import("react").Dispatch<import("react").SetStateAction<TreeNodeValue[]>>;
 };

package/Tree/useTreeExpandedValue.js

@@ -21,10 +21,11 @@ function useTreeExpandedValue(props) {
     const onExpand = (value) => {
         const newExpandedValues = toggleValue(value, expandedValues);
         setExpandedValues(newExpandedValues);
+        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp(value);
     };
     return {
         expandedValues: expandedValuesProp || expandedValues,
-        onExpand: (expandedValuesProp && onExpandProp) ? onExpandProp : onExpand,
+        onExpand: expandedValuesProp ? onExpandProp : onExpand,
         setExpandedValues,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,9 +31,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.13.1",
-    "@mezzanine-ui/icons": "^0.13.1",
-    "@mezzanine-ui/system": "^0.13.1",
+    "@mezzanine-ui/core": "^0.13.2",
+    "@mezzanine-ui/icons": "^0.13.2",
+    "@mezzanine-ui/system": "^0.13.2",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",