@mezzanine-ui/react 0.15.3 → 1.0.0-alpha.0

package/Transition/Translate.js

@@ -0,0 +1,94 @@
+import { jsx } from 'react/jsx-runtime';
+import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { forwardRef, useRef, cloneElement } from 'react';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Transition from './Transition.js';
+import { reflow } from './reflow.js';
+import { useSetNodeTransition } from './useSetNodeTransition.js';
+
+function getStyle(state, inProp, from) {
+    if (state === 'entering' || state === 'entered') {
+        return {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        };
+    }
+    const style = {
+        opacity: 0,
+        transform: {
+            top: 'translate3d(0, -4px, 0)',
+            right: 'translate3d(4px, 0, 0)',
+            bottom: 'translate3d(0, 4px, 0)',
+            left: 'translate3d(-4px, 0, 0)',
+        }[from],
+    };
+    if (state === 'exited' && !inProp) {
+        style.visibility = 'hidden';
+    }
+    return style;
+}
+const defaultDuration = {
+    enter: MOTION_DURATION.moderate,
+    exit: MOTION_DURATION.moderate,
+};
+const defaultEasing = {
+    enter: MOTION_EASING.standard,
+    exit: MOTION_EASING.standard,
+};
+/**
+ * The react component for `mezzanine` transition translate in/out.
+ */
+const Translate = forwardRef(function Translate(props, ref) {
+    const { children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, from = 'top', in: inProp = false, onEnter, onEntered, onExit, onExited, ...rest } = props;
+    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
+    const nodeRef = useRef(null);
+    const composedNodeRef = useComposeRefs([ref, nodeRef]);
+    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
+        delay,
+        duration,
+        easing,
+        properties: ['opacity', 'transform'],
+    }, children === null || children === void 0 ? void 0 : children.props.style);
+    const transitionProps = {
+        ...rest,
+        duration,
+        in: inProp,
+        nodeRef,
+        onEnter(node, isAppearing) {
+            setNodeTransition(node, 'enter');
+            reflow(node);
+            if (onEnter) {
+                onEnter(node, isAppearing);
+            }
+        },
+        onEntered(node, isAppearing) {
+            resetNodeTransition(node);
+            if (onEntered) {
+                onEntered(node, isAppearing);
+            }
+        },
+        onExit(node) {
+            setNodeTransition(node, 'exit');
+            if (onExit) {
+                onExit(node);
+            }
+        },
+        onExited(node) {
+            resetNodeTransition(node);
+            if (onExited) {
+                onExited(node);
+            }
+        },
+    };
+    return (jsx(Transition, { ...transitionProps, children: children &&
+            ((state) => cloneElement(children, {
+                ...children.props,
+                ref: composedNodeRef,
+                style: {
+                    ...getStyle(state, inProp, from),
+                    ...children.props.style,
+                },
+            })) }));
+});
+
+export { Translate as default };

package/Transition/index.d.ts

@@ -1,6 +1,16 @@
-export { TransitionState, TransitionMode, TransitionDelay, TransitionDuration, TransitionEasing, TransitionImplementationChildProps, TransitionImplementationProps, TransitionProps, default, } from './Transition';
-export { CollapseProps, default as Collapse } from './Collapse';
-export { FadeProps, default as Fade } from './Fade';
-export { GrowProps, default as Grow } from './Grow';
-export { SlideFadeDirection, SlideFadeProps, default as SlideFade, } from './SlideFade';
-export { ZoomProps, default as Zoom } from './Zoom';
+export { default } from './Transition';
+export type { TransitionState, TransitionMode, TransitionDelay, TransitionDuration, TransitionEasing, TransitionImplementationChildProps, TransitionImplementationProps, TransitionProps, } from './Transition';
+export type { CollapseProps } from './Collapse';
+export { default as Collapse } from './Collapse';
+export type { FadeProps } from './Fade';
+export { default as Fade } from './Fade';
+export type { RotateProps } from './Rotate';
+export { default as Rotate } from './Rotate';
+export type { ScaleProps } from './Scale';
+export { default as Scale } from './Scale';
+export { default as Slide } from './Slide';
+export type { SlideProps } from './Slide';
+export { default as SlideFade } from './SlideFade';
+export type { SlideFadeDirection, SlideFadeProps } from './SlideFade';
+export { default as Translate } from './Translate';
+export type { TranslateFrom, TranslateProps } from './Translate';

package/Transition/index.js

@@ -1,6 +1,8 @@
 export { default } from './Transition.js';
 export { default as Collapse } from './Collapse.js';
 export { default as Fade } from './Fade.js';
-export { default as Grow } from './Grow.js';
+export { default as Rotate } from './Rotate.js';
+export { default as Scale } from './Scale.js';
+export { default as Slide } from './Slide.js';
 export { default as SlideFade } from './SlideFade.js';
-export { default as Zoom } from './Zoom.js';
+export { default as Translate } from './Translate.js';

package/Transition/useAutoTransitionDuration.d.ts

@@ -1,5 +1,5 @@
 import { TransitionDuration } from './Transition';
 export declare function useAutoTransitionDuration(duration?: TransitionDuration): {
-    autoTransitionDuration: import("react").MutableRefObject<number>;
+    autoTransitionDurationRef: import("react").RefObject<number>;
     addEndListener: (node: HTMLElement, next: VoidFunction) => void;
 };

package/Transition/useAutoTransitionDuration.js

@@ -2,14 +2,14 @@ import { useRef, useEffect } from 'react';
 
 function useAutoTransitionDuration(duration) {
     const timer = useRef(NaN);
-    const autoTransitionDuration = useRef(NaN);
+    const autoTransitionDurationRef = useRef(NaN);
     const addEndListener = (_, next) => {
         if (duration === 'auto') {
-            timer.current = window.setTimeout(() => next(), autoTransitionDuration.current || 0);
+            timer.current = window.setTimeout(() => next(), autoTransitionDurationRef.current || 0);
         }
     };
     useEffect(() => () => window.clearTimeout(timer.current), []);
-    return { autoTransitionDuration, addEndListener };
+    return { autoTransitionDurationRef, addEndListener };
 }
 
 export { useAutoTransitionDuration };

package/Transition/useSetNodeTransition.js

@@ -1,7 +1,6 @@
 import { getTransitionStyleProps } from './getTransitionStyleProps.js';
 
 function useSetNodeTransition(props, style) {
-    /* eslint-disable no-param-reassign */
     const setNodeTransition = (node, mode) => {
         const transitionProps = getTransitionStyleProps(mode, props);
         const { properties } = props;
@@ -28,7 +27,6 @@ function useSetNodeTransition(props, style) {
             node.style.transition = transition;
         }
     };
-    /* eslint-enable no-param-reassign */
     return [setNodeTransition, resetNodeTransition];
 }
 

package/Tree/Tree.js

@@ -135,6 +135,5 @@ const Tree = forwardRef(function Tree(props, ref) {
     const onSelect = selectable ? selectHandler : undefined;
     return (jsx("div", { ref: ref, className: cx(treeClasses.host, className), ...restRootProp, children: jsx(TreeNodeList, { ...treeNodeListProps, multiple: multiple, nodes: displayNodes, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, treeNodeProps: treeNodeProps, treeNodeRefs: treeNodeRefs }) }));
 });
-var Tree$1 = Tree;
 
-export { Tree$1 as default };
+export { Tree as default };

package/Tree/TreeNode.js

@@ -1,12 +1,13 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { treeClasses } from '@mezzanine-ui/core/tree';
 import { CaretRightIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useContext, useMemo } from 'react';
+import Checkbox from '../Checkbox/Checkbox.js';
 import Typography from '../Typography/Typography.js';
 import { MezzanineConfig } from '../Provider/context.js';
-import Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import Icon from '../Icon/Icon.js';
-import Checkbox from '../Checkbox/Checkbox.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 
@@ -18,12 +19,12 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
     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';
+            return 'input';
         }
         if (size === 'large') {
-            return 'input1';
+            return 'input';
         }
-        return 'input2';
+        return 'input';
     }, [size]);
     const onExpand = onExpandProp
         ? () => {
@@ -43,8 +44,7 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
                             [treeClasses.nodeLabelIndeterminate]: indeterminate,
                             [treeClasses.nodeLabelActive]: selected,
                             [treeClasses.nodeLabelDisabled]: disabled,
-                        }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Loading, { loading: true, iconProps: { size: 16 } }) }))] }));
+                        }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Spin, { loading: true, iconProps: { size: 16 } }) }))] }));
 });
-var TreeNode$1 = TreeNode;
 
-export { TreeNode$1 as default };
+export { TreeNode as default };

package/Tree/TreeNodeList.js

@@ -24,6 +24,5 @@ const TreeNodeList = forwardRef((props, ref) => {
             return (jsx(TreeNode, { ref: getNodeRefHandler === null || getNodeRefHandler === void 0 ? void 0 : getNodeRefHandler(value), ...treeNodeProps, multiple: multiple, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, value: value, ...restNodeProps, children: (siblingNodes === null || siblingNodes === void 0 ? void 0 : siblingNodes.length) ? (jsx(TreeNodeList, { ...restRootProp, className: className, multiple: multiple, nodes: siblingNodes, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, treeNodeRefs: treeNodeRefs })) : undefined }, value));
         }) }));
 });
-var TreeNodeList$1 = TreeNodeList;
 
-export { TreeNodeList$1 as default };
+export { TreeNodeList as default };

package/Tree/index.d.ts

@@ -1,8 +1,13 @@
 export * from './typings';
 export { uniqueArray, toggleValue, toggleValueWithStatusControl, } from './toggleValue';
 export { traverseTree } from './traverseTree';
-export { UseTreeExpandedValueProps, useTreeExpandedValue, } from './useTreeExpandedValue';
-export { GetTreeNodeEntitiesProps, getTreeNodeEntities, } from './getTreeNodeEntities';
-export { TreeNodeElementProps, TreeNodeProps, default as TreeNode, } from './TreeNode';
-export { TreeNodeListElementProps, TreeNodeListProps, default as TreeNodeList, } from './TreeNodeList';
-export { TreeProps, default } from './Tree';
+export { useTreeExpandedValue } from './useTreeExpandedValue';
+export type { UseTreeExpandedValueProps } from './useTreeExpandedValue';
+export { getTreeNodeEntities } from './getTreeNodeEntities';
+export type { GetTreeNodeEntitiesProps } from './getTreeNodeEntities';
+export { default as TreeNode } from './TreeNode';
+export type { TreeNodeElementProps, TreeNodeProps } from './TreeNode';
+export { default as TreeNodeList } from './TreeNodeList';
+export type { TreeNodeListElementProps, TreeNodeListProps, } from './TreeNodeList';
+export type { TreeProps } from './Tree';
+export { default } from './Tree';

package/Tree/typings.d.ts

@@ -1,11 +1,11 @@
-import { MutableRefObject, ReactNode } from 'react';
+import { RefObject, ReactNode } from 'react';
 import { TreeNodeDataShape, TreeNodeEntityShape, TreeNodePropShape, TreeNodeValue } from '@mezzanine-ui/core/tree';
 export type TreeNodeProp = TreeNodePropShape<ReactNode>;
 export type TreeNodeData = TreeNodeDataShape<ReactNode>;
 export type TreeNodeEntity = TreeNodeEntityShape<ReactNode>;
 export type TreeNodeEntities = Map<TreeNodeValue, TreeNodeEntity>;
 export type TreeNodeRefsShape = Record<TreeNodeValue, HTMLLIElement>;
-export type TreeNodeRefs = MutableRefObject<TreeNodeRefsShape | undefined>;
+export type TreeNodeRefs = RefObject<TreeNodeRefsShape | undefined>;
 export type TreeExpandControl = {
     collapse: (value: TreeNodeValue) => void;
     collapseAll: () => void;

package/Typography/Typography.d.ts

@@ -1,5 +1,6 @@
 import { JSXElementConstructor } from 'react';
-import { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant, TypographyWeight } from '@mezzanine-ui/core/typography';
+import { TypographyAlign, TypographyColor, TypographyDisplay } from '@mezzanine-ui/core/typography';
+import { TypographySemanticType } from '@mezzanine-ui/system/typography';
 import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
 export type TypographyComponent = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'p' | 'span' | 'label' | 'div' | 'caption' | 'a' | JSXElementConstructor<any>;
 interface TypographyPropsBase {
@@ -8,7 +9,7 @@ interface TypographyPropsBase {
      */
     align?: TypographyAlign;
     /**
-     * The color name provided by palette.
+     * The text semantic color from the palette.
      */
     color?: TypographyColor;
     /**
@@ -28,14 +29,10 @@ interface TypographyPropsBase {
      */
     noWrap?: boolean;
     /**
-     * Applies the typography variant.
-     * @default 'body1'
+     * Applies the typography semantic type.
+     * @default 'body'
      */
-    variant?: TypographyVariant;
-    /**
-     * The css variable for customizing `font-weight`.
-     */
-    weight?: TypographyWeight;
+    variant?: TypographySemanticType;
 }
 export type TypographyProps<C extends TypographyComponent = 'p'> = ComponentOverridableForwardRefComponentPropsFactory<TypographyComponent, C, TypographyPropsBase>;
 /**

package/Typography/Typography.js

@@ -3,11 +3,11 @@ import { forwardRef } from 'react';
 import { toTypographyCssVars, typographyClasses } from '@mezzanine-ui/core/typography';
 import cx from 'clsx';
 
-function getComponentFromVariant(variant) {
-    if (variant.startsWith('h')) {
-        return variant;
+function getComponentFromType(type) {
+    if (type === 'h1' || type === 'h2' || type === 'h3') {
+        return type;
     }
-    if (variant.startsWith('body')) {
+    if (type.startsWith('body') || type.startsWith('text-link-body')) {
         return 'p';
     }
     return 'span';
@@ -16,26 +16,24 @@ function getComponentFromVariant(variant) {
  * The react component for `mezzanine` typography.
  */
 const Typography = forwardRef(function Typography(props, ref) {
-    const { align, children, className, color, component, display, ellipsis = false, noWrap = false, variant = 'body1', style: styleProp, weight, ...rest } = props;
-    const Component = component || getComponentFromVariant(variant);
+    const { align, children, className, color, component, display, ellipsis = false, noWrap = false, variant = 'body', style: styleProp, ...rest } = props;
+    const Component = component || getComponentFromType(variant);
     const cssVars = toTypographyCssVars({
         align,
         color,
         display,
-        weight,
     });
     const style = {
         ...cssVars,
         ...styleProp,
     };
     const title = ellipsis && typeof children === 'string' ? children : undefined;
-    return (jsx(Component, { ...rest, ref: ref, className: cx(typographyClasses.variant(variant), {
+    return (jsx(Component, { ...rest, ref: ref, className: cx(typographyClasses.type(variant), {
             [typographyClasses.align]: align,
             [typographyClasses.color]: color,
             [typographyClasses.display]: display,
             [typographyClasses.ellipsis]: ellipsis,
             [typographyClasses.noWrap]: noWrap,
-            [typographyClasses.weight]: weight,
         }, className), style: style, title: title, children: children }));
 });
 

package/Typography/index.d.ts

@@ -1,11 +1,8 @@
-import { ElementRef, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
 import { TypographyComponent, TypographyProps } from './Typography';
-export type { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant, TypographyWeight, } from '@mezzanine-ui/core/typography';
+export type { TypographyAlign, TypographyColor, TypographyDisplay, } from '@mezzanine-ui/core/typography';
+export type { TypographySemanticType } from '@mezzanine-ui/system/typography';
 export type { TypographyComponent, TypographyProps };
-/**
- * @remark
- * Add type alias here for parsable to react docgen typescript.
- */
-type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<HTMLElement>) => ReactElement<any>;
 declare const _default: GenericTypography;
 export default _default;

package/Upload/Upload.d.ts

@@ -0,0 +1,175 @@
+import { type UploadItemStatus, type UploadMode, type UploadSize } from '@mezzanine-ui/core/upload';
+import { type ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import type { UploaderProps } from './Uploader';
+export interface UploadFile {
+    /**
+     * The file object.
+     * Required when uploading new files.
+     * Optional when `url` is provided for already uploaded files.
+     */
+    file?: File;
+    /**
+     * The URL of the uploaded file.
+     * When provided, this will be used to display files that have already been uploaded to the server.
+     * Useful for loading file lists from the backend.
+     */
+    url?: string;
+    /**
+     * The unique id of the file.
+     */
+    id: string;
+    /**
+     * The upload status of the file.
+     * @default 'loading'
+     */
+    status: UploadItemStatus;
+    /**
+     * The upload progress percentage (0-100).
+     * @default 0
+     */
+    progress?: number;
+    /**
+     * Error message to display when status is 'error'.
+     * If not provided, the default error message from Upload component will be used.
+     */
+    errorMessage?: string;
+    /**
+     * Error icon to display when status is 'error'.
+     * If not provided, the default error icon from Upload component will be used.
+     */
+    errorIcon?: ReactNode;
+}
+export interface UploadProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange'> {
+    /**
+     * The accept attributes of native input element.
+     * @example 'image/*', '.pdf,.doc,.docx'
+     */
+    accept?: string;
+    /**
+     * Whether the upload is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controlled file list for the upload component.
+     * Provide this along with `onChange` to fully control the file state.
+     */
+    files?: UploadFile[];
+    /**
+     * Array of hints to display with the upload component.
+     */
+    hints?: UploaderProps['hints'];
+    /**
+     * Icon configuration for different actions and states.
+     */
+    uploaderIcon?: UploaderProps['icon'];
+    /**
+     * The id of input element.
+     */
+    id?: string;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     * If you need direct control to the input element, use this prop to provide to it.
+     */
+    inputProps?: UploaderProps['inputProps'];
+    /**
+     * The react ref passed to input element.
+     */
+    inputRef?: UploaderProps['inputRef'];
+    /**
+     * Whether to fill the width of the container.
+     * @default false
+     */
+    isFillWidth?: boolean;
+    /**
+     * Maximum number of files allowed to upload.
+     * If exceeded, the excess files will be ignored.
+     */
+    maxFiles?: number;
+    /**
+     * The display mode for the upload component.
+     * - 'list': Display files as a list using UploadItem
+     * - 'button-list': Display uploader as a button with files in list format
+     * - 'cards': Display image files as picture cards using UploadPictureCard
+     * - 'card-wall': Display uploader at top with image files as picture cards below
+     * @default 'list'
+     */
+    mode?: UploadMode;
+    /**
+     * Whether can select multiple files to upload.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * The name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * The size of the upload component.
+     * @default 'main'
+     */
+    size?: UploadSize;
+    /**
+     * Whether to show file size in list mode.
+     * @default true
+     */
+    showFileSize?: boolean;
+    /**
+     * Label configuration for different states.
+     */
+    uploaderLabel?: UploaderProps['label'];
+    /**
+     * Default error message to display when upload fails.
+     * This will be used when a file's status becomes 'error' and no errorMessage is provided.
+     */
+    errorMessage?: string;
+    /**
+     * Default error icon to display when upload fails.
+     * This will be used when a file's status becomes 'error' and no errorIcon is provided.
+     */
+    errorIcon?: ReactNode;
+    /**
+     * Fired when files list changes.
+     */
+    onChange?: (files: UploadFile[]) => void;
+    /**
+     * Fired when a file is deleted.
+     */
+    onDelete?: (fileId: string, file: File) => void;
+    /**
+     * Fired when a file is downloaded (done state).
+     */
+    onDownload?: (fileId: string, file: File) => void;
+    /**
+     * Fired when the maximum number of files is exceeded.
+     * @param maxFiles - The maximum number of files allowed
+     * @param selectedCount - The number of files selected
+     * @param currentCount - The current number of files in the list
+     */
+    onMaxFilesExceeded?: (maxFiles: number, selectedCount: number, currentCount: number) => void;
+    /**
+     * Fired when a file upload is retried (error state).
+     */
+    onReload?: (fileId: string, file: File) => void;
+    /**
+     * Fired when files are selected for upload.
+     * @param files - The files to upload
+     * @param setProgress - Callback to update upload progress for a specific file (file index, progress 0-100)
+     * @returns Can return:
+     *   - UploadFile[]: Full file objects with backend-provided IDs and status
+     *   - { id: string }[]: Array of objects with backend-provided IDs (status will be set to 'done')
+     *   - void/Promise<void>: For backward compatibility (status will be set to 'done')
+     */
+    onUpload?: (files: File[], setProgress?: (fileIndex: number, progress: number) => void) => Promise<UploadFile[]> | UploadFile[] | Promise<Array<{
+        id: string;
+    }>> | Array<{
+        id: string;
+    }> | Promise<void> | void;
+    /**
+     * Fired when zoom in is clicked on a picture card (done state).
+     */
+    onZoomIn?: (fileId: string, file: File) => void;
+}
+declare const Upload: import("react").ForwardRefExoticComponent<UploadProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Upload;