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

package/AutoComplete/AutoComplete.js

@@ -48,7 +48,7 @@ function isOptionSelected(option, value, isMultiple) {
  */
 const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, asyncData = false, className, clearSearchText = true, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText, loadingPosition = 'bottom', menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, overflowStrategy, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, globalPortal = true, onReachBottom, onLeaveBottom, } = props;
+    const { addable = false, asyncData = false, className, clearSearchText = true, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText = '沒有符合的項目', error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText = '載入中...', loadingPosition = 'bottom', menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, overflowStrategy, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, globalPortal = true, onReachBottom, onLeaveBottom, } = props;
     const shouldClearSearchTextOnBlur = clearSearchText;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     const isMultiple = mode === 'multiple';

package/Dropdown/Dropdown.js

@@ -25,7 +25,7 @@ function getElementRef(element) {
     return propsRef !== null && propsRef !== void 0 ? propsRef : element.ref;
 }
 function Dropdown(props) {
-    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', toggleCheckedOnClick, maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, loadingPosition = 'full', followText: followTextProp, globalPortal = true, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
+    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', toggleCheckedOnClick, maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom-start', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, loadingPosition = 'full', followText: followTextProp, globalPortal = true, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
     const isInline = inputPosition === 'inside';
     const inputId = useId();
     const defaultListboxId = `${inputId}-listbox`;

package/Section/index.js

@@ -0,0 +1 @@
+export { default } from './Section.js';

package/Stepper/Step.js

@@ -35,6 +35,16 @@ const DotStatusIndicator = () => (jsx("span", { className: cx(stepClasses.status
  */
 const Step = forwardRef(function Step(props, ref) {
     const { className, description, index = 0, orientation, status = 'pending', title, type = 'number', error, ...rest } = props;
+    const handleKeyDown = rest.onClick
+        ? (e) => {
+            var _a;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.currentTarget.click();
+            }
+            (_a = rest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+        }
+        : rest.onKeyDown;
     return (jsxs("div", { className: cx(stepClasses.host, {
             // status
             [stepClasses.processing]: status === 'processing',
@@ -49,8 +59,8 @@ const Step = forwardRef(function Step(props, ref) {
             [stepClasses.dot]: type === 'dot',
             [stepClasses.number]: type === 'number',
             // interactive
-            [stepClasses.interactive]: rest.onClick,
-        }, className), ref: ref, ...rest, children: [type === 'number' && (jsx(NumberStatusIndicator, { status: status, indicatorNumber: index + 1, error: error })), type === 'dot' && jsx(DotStatusIndicator, {}), jsxs("div", { className: stepClasses.textContainer, children: [jsxs(Typography, { className: stepClasses.title, variant: "label-primary-highlight", children: [title, jsx("span", { className: stepClasses.titleConnectLine })] }), description && (jsx(Typography, { className: stepClasses.description, variant: "caption", children: description }))] })] }));
+            [stepClasses.interactive]: !!rest.onClick,
+        }, className), role: rest.onClick ? 'button' : undefined, ref: ref, tabIndex: rest.onClick ? 0 : undefined, ...rest, onKeyDown: handleKeyDown, children: [type === 'number' && (jsx(NumberStatusIndicator, { status: status, indicatorNumber: index + 1, error: error })), type === 'dot' && jsx(DotStatusIndicator, {}), jsxs("div", { className: stepClasses.textContainer, children: [jsxs(Typography, { className: stepClasses.title, variant: "label-primary-highlight", children: [title, jsx("span", { className: stepClasses.titleConnectLine })] }), description && (jsx(Typography, { className: stepClasses.description, variant: "caption", children: description }))] })] }));
 });
 
 export { Step as default };

package/Stepper/Stepper.js

@@ -35,6 +35,7 @@ const Stepper = forwardRef(function Stepper(props, ref) {
         var _a;
         const step = element;
         return cloneElement(step, {
+            ...step.props,
             index,
             orientation,
             ref: (el) => {
@@ -48,7 +49,6 @@ const Stepper = forwardRef(function Stepper(props, ref) {
                 ...step.props.style,
             },
             type,
-            ...step.props,
         });
     });
     useEffect(() => {

package/Tab/Tab.d.ts

@@ -24,6 +24,13 @@ export interface TabProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>
      * The change event handler of Tab
      */
     onChange?: (activeKey: Key, index: number) => void;
+    /**
+     * The size of tab, controls padding around the tab group.
+     * main: padding-horizontal-spacious + padding-vertical-spacious (top only)
+     * sub: no padding
+     * @default 'main'
+     */
+    size?: 'main' | 'sub';
 }
 /**
  * The react component for `mezzanine` tab.

package/Tab/Tab.js

@@ -1,18 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, Children, cloneElement, useLayoutEffect } from 'react';
+import { forwardRef, useState, useRef, useMemo, Children, cloneElement, useLayoutEffect } from 'react';
 import { tabClasses } from '@mezzanine-ui/core/tab';
 import TabItem from './TabItem.js';
+import { flattenChildren } from '../utils/flatten-children.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` tab.
  */
 const Tab = forwardRef(function Tab(props, ref) {
-    const { activeKey: activeKeyProp, children, className, defaultActiveKey = 0, onChange, direction = 'horizontal', ...rest } = props;
+    const { activeKey: activeKeyProp, children, className, defaultActiveKey = 0, direction = 'horizontal', onChange, size = 'main', ...rest } = props;
     const [activeKeyInternal, setActiveKey] = useState(defaultActiveKey);
     const activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyInternal;
     const activeTabItemRef = useRef(null);
-    const tabItems = Children.map(children, (tabItem, index) => {
+    const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
+    const tabItems = Children.map(flattenedChildren, (tabItem, index) => {
         var _a;
         if (!tabItem || tabItem.type !== TabItem) {
             return null;
@@ -51,6 +53,8 @@ const Tab = forwardRef(function Tab(props, ref) {
     return (jsxs("div", { ...rest, ref: ref, className: cx(tabClasses.host, {
             [tabClasses.tabHorizontal]: direction === 'horizontal',
             [tabClasses.tabVertical]: direction === 'vertical',
+            [tabClasses.tabSizeMain]: size === 'main',
+            [tabClasses.tabSizeSub]: size === 'sub',
         }, className), children: [tabItems, jsx("div", { className: tabClasses.tabActiveBar, style: activeBarStyle })] }));
 });
 

package/Tab/TabItem.d.ts

@@ -15,6 +15,11 @@ export interface TabItemProps extends NativeElementPropsWithoutKeyAndRef<'button
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Whether the tab item is in error state.
+     * @default false
+     */
+    error?: boolean;
     /**
      * The icon to display on the tab item.
      */

package/Tab/TabItem.js

@@ -9,10 +9,11 @@ import cx from 'clsx';
  * The react component for `mezzanine` tab.
  */
 const TabItem = forwardRef(function TabItem(props, ref) {
-    const { active, badgeCount, children, className, disabled = false, icon, ...rest } = props;
+    const { active, badgeCount, children, className, disabled = false, error = false, icon, ...rest } = props;
     return (jsxs("button", { ...rest, "aria-disabled": disabled, className: cx(tabClasses.tabItem, {
             [tabClasses.tabItemActive]: active,
-        }, className), disabled: disabled, ref: ref, type: "button", children: [icon && jsx(Icon, { className: tabClasses.tabItemIcon, icon: icon, size: 16 }), children, badgeCount !== undefined && (jsx(Badge, { className: tabClasses.tabItemBadge, count: badgeCount, variant: active ? 'count-brand' : 'count-inactive' }))] }));
+            [tabClasses.tabItemError]: error,
+        }, className), disabled: disabled, ref: ref, type: "button", children: [icon && jsx(Icon, { className: tabClasses.tabItemIcon, icon: icon, size: 16 }), children, badgeCount !== undefined && (jsx(Badge, { className: tabClasses.tabItemBadge, count: badgeCount, variant: error ? 'count-alert' : active ? 'count-brand' : 'count-inactive' }))] }));
 });
 
 export { TabItem as default };

package/Table/components/TableDragOrPinHandleCell.js

@@ -38,7 +38,7 @@ function TableDragOrPinHandleCellInner(props, ref) {
             return null;
         }
         if (loading) {
-            return jsx(Skeleton, { variant: "body-highlight", width: "100%" });
+            return (jsx(Skeleton, { variant: "body-highlight", width: "100%", ...(mode === 'drag' ? dragHandleProps : {}) }));
         }
         if (mode === 'drag') {
             return (jsx("span", { className: tableClasses.dragOrPinHandle, ...dragHandleProps, children: jsx(Icon, { color: "neutral", icon: DotDragVerticalIcon }) }));

package/Transition/Fade.js

@@ -73,7 +73,6 @@ const Fade = forwardRef(function Fade(props, ref) {
     };
     return (jsx(Transition, { ...transitionProps, children: children &&
             ((state) => cloneElement(children, {
-                ...children.props,
                 ref: composedNodeRef,
                 style: {
                     ...getStyle(state, inProp),

package/Transition/Scale.js

@@ -106,7 +106,6 @@ const Scale = forwardRef(function Scale(props, ref) {
     };
     return (jsx(Transition, { ...transitionProps, children: children &&
             ((state) => cloneElement(children, {
-                ...children.props,
                 ref: composedNodeRef,
                 style: {
                     visibility: state === 'exited' && !inProp ? 'hidden' : undefined,

package/Transition/Slide.js

@@ -78,7 +78,6 @@ const Slide = forwardRef(function Slide(props, ref) {
     };
     return (jsx(Transition, { ...transitionProps, children: children &&
             ((state) => cloneElement(children, {
-                ...children.props,
                 ref: composedNodeRef,
                 style: {
                     ...getStyle(state, inProp, from),

package/Transition/Translate.js

@@ -82,7 +82,6 @@ const Translate = forwardRef(function Translate(props, ref) {
     };
     return (jsx(Transition, { ...transitionProps, children: children &&
             ((state) => cloneElement(children, {
-                ...children.props,
                 ref: composedNodeRef,
                 style: {
                     ...getStyle(state, inProp, from),

package/hooks/useComposeRefs.js

@@ -1,8 +1,10 @@
-import { useMemo } from 'react';
+import { useRef, useCallback } from 'react';
 import { composeRefs } from '../utils/composeRefs.js';
 
 function useComposeRefs(refs) {
-    return useMemo(() => composeRefs(refs), [refs]);
+    const refsRef = useRef(refs);
+    refsRef.current = refs;
+    return useCallback((element) => composeRefs(refsRef.current)(element), []);
 }
 
 export { useComposeRefs };

package/package.json

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

package/utils/composeRefs.js

@@ -17,14 +17,21 @@
  */
 function composeRefs(refs) {
     return (element) => {
+        const cleanups = [];
         refs.forEach((ref) => {
             if (typeof ref === 'function') {
-                ref(element);
+                const cleanup = ref(element);
+                if (typeof cleanup === 'function') {
+                    cleanups.push(cleanup);
+                }
             }
             else if (ref) {
                 ref.current = element;
             }
         });
+        if (cleanups.length > 0) {
+            return () => cleanups.forEach((c) => c());
+        }
     };
 }
 

package/utils/flatten-children.js

@@ -20,8 +20,9 @@ function flattenChildren(children, recursionDepth = -1, keys = []) {
         }
         else {
             if (isValidElement(node)) {
+                const rawKey = String(node.key).replace(/^\.\$/, '');
                 acc.push(cloneElement(node, {
-                    key: keys.concat(String(node.key)).join('.'),
+                    key: keys.length > 0 ? keys.concat(rawKey).join('.') : rawKey,
                 }));
             }
             else if (typeof node === 'string' ||