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

package/Upload/UploadPictureCard.d.ts

@@ -9,30 +9,35 @@ export interface UploadPictureCardAriaLabels {
      */
     cancelUpload?: string;
     /**
-     * Aria label for uploading status.
-     * @default 'Uploading'
+     * Aria label for the click-to-replace overlay label.
+     * @default 'Click to Replace'
      */
-    uploading?: string;
+    clickToReplace?: string;
     /**
-     * Aria label for zoom in button.
-     * @default 'Zoom in image'
+     * Aria label for delete button.
+     * @default 'Delete file'
      */
-    zoomIn?: string;
+    delete?: string;
     /**
      * Aria label for download button.
      * @default 'Download file'
      */
     download?: string;
-    /**
-     * Aria label for delete button.
-     * @default 'Delete file'
-     */
-    delete?: string;
     /**
      * Aria label for reload/retry button.
      * @default 'Retry upload'
      */
     reload?: string;
+    /**
+     * Aria label for uploading status.
+     * @default 'Uploading'
+     */
+    uploading?: string;
+    /**
+     * Aria label for zoom in button.
+     * @default 'Zoom in image'
+     */
+    zoomIn?: string;
 }
 export interface UploadPictureCardProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
@@ -90,10 +95,6 @@ export interface UploadPictureCardProps extends NativeElementPropsWithoutKeyAndR
      * When delete icon is clicked, this callback will be fired.
      */
     onDelete?: MouseEventHandler;
-    /**
-     * When zoom in icon is clicked, this callback will be fired.
-     */
-    onZoomIn?: MouseEventHandler;
     /**
      * When download icon is clicked, this callback will be fired.
      */
@@ -102,6 +103,15 @@ export interface UploadPictureCardProps extends NativeElementPropsWithoutKeyAndR
      * When reload icon is clicked, this callback will be fired.
      */
     onReload?: MouseEventHandler;
+    /**
+     * When provided, the card becomes a replacement trigger in done status.
+     * On hover, shows a "Click to Replace" overlay label. Fired when the card body is clicked.
+     */
+    onReplace?: MouseEventHandler;
+    /**
+     * When zoom in icon is clicked, this callback will be fired.
+     */
+    onZoomIn?: MouseEventHandler;
 }
 /**
  * The react component for `mezzanine` upload picture card.

package/Upload/UploadPictureCard.js

@@ -15,14 +15,15 @@ import cx from 'clsx';
  */
 const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
     var _a;
-    const { ariaLabels, className, file, url, status = 'loading', imageFit = 'cover', size = 'main', disabled = false, errorMessage, errorIcon, onDelete, onZoomIn, onDownload, onReload, ...rest } = props;
+    const { ariaLabels, className, file, url, status = 'loading', imageFit = 'cover', size = 'main', disabled = false, errorMessage, errorIcon, onDelete, onDownload, onReload, onReplace, onZoomIn, ...rest } = props;
     const defaultAriaLabels = {
         cancelUpload: 'Cancel upload',
-        uploading: 'Uploading',
-        zoomIn: 'Zoom in image',
-        download: 'Download file',
+        clickToReplace: 'Click to Replace',
         delete: 'Delete file',
+        download: 'Download file',
         reload: 'Retry upload',
+        uploading: 'Uploading',
+        zoomIn: 'Zoom in image',
     };
     const labels = { ...defaultAriaLabels, ...ariaLabels };
     const isImage = useMemo(() => {
@@ -92,10 +93,17 @@ const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
         console.warn('UploadPictureCard: minor size is not supported for non-image files');
         return null;
     }
-    return (jsx("div", { className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, className), "aria-disabled": disabled, ref: ref, role: "group", tabIndex: disabled ? -1 : 0, ...rest, children: jsxs("div", { className: uploadPictureCardClasses.container, children: [isImage && imageUrl && status !== 'error' && (jsx("img", { alt: fileName, src: imageUrl, style: {
+    return (jsx("div", { "aria-disabled": disabled, className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, onReplace && status === 'done' && uploadPictureCardClasses.replaceMode, className), onClick: onReplace && status === 'done' ? onReplace : undefined, onKeyDown: onReplace && status === 'done'
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.currentTarget.click();
+                }
+            }
+            : undefined, ref: ref, role: "group", tabIndex: disabled ? -1 : 0, ...rest, children: jsxs("div", { className: uploadPictureCardClasses.container, children: [isImage && imageUrl && status !== 'error' && (jsx("img", { alt: fileName, src: imageUrl, style: {
                         objectFit: imageFit,
                         objectPosition: 'center',
-                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: ZoomInIcon, iconType: "icon-only", onClick: onZoomIn, "aria-label": labels.zoomIn }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: DownloadIcon, onClick: onDownload, "aria-label": labels.download }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: ResetIcon, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
+                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsxs(Fragment, { children: [jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [onZoomIn && (jsx(Button, { variant: "base-secondary", size: "minor", icon: ZoomInIcon, iconType: "icon-only", onClick: onZoomIn, "aria-label": labels.zoomIn })), onDownload && (jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: DownloadIcon, onClick: onDownload, "aria-label": labels.download })), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }), onReplace && (jsx("span", { className: uploadPictureCardClasses.replaceLabel, children: labels.clickToReplace }))] })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: ResetIcon, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
 });
 
 export { UploadPictureCard as default };

package/index.d.ts

@@ -42,8 +42,8 @@ export { default as Cropper } from './Cropper';
 export type { CropperComponent, CropperProps, CropperPropsBase, CropperSize, } from './Cropper';
 export { default as Icon } from './Icon';
 export type { IconColor, IconProps } from './Icon';
-export { default as Layout, LayoutMain, LayoutSidePanel } from './Layout';
-export type { LayoutMainProps, LayoutProps, LayoutSidePanelProps } from './Layout';
+export { default as Layout, LayoutLeftPanel, LayoutMain, LayoutRightPanel, } from './Layout';
+export type { LayoutLeftPanelProps, LayoutMainProps, LayoutProps, LayoutRightPanelProps, } from './Layout';
 export { default as Separator } from './Separator';
 export type { SeparatorProps } from './Separator';
 export { default as Typography } from './Typography';
@@ -116,6 +116,8 @@ export { PickerTrigger, RangePickerTrigger, usePickerDocumentEventClose, usePick
 export type { PickerTriggerProps, RangePickerTriggerProps, UsePickerDocumentEventCloseProps, UsePickerValueProps, } from './Picker';
 export { default as Radio, RadioGroup } from './Radio';
 export type { RadioGroupOrientation, RadioGroupProps, RadioProps, RadioSize, } from './Radio';
+export { default as Cascader, CascaderPanel } from './Cascader';
+export type { CascaderOption, CascaderPanelProps, CascaderProps, CascaderSize, } from './Cascader';
 export { default as Select, SelectControlContext, SelectTrigger, SelectTriggerTags, } from './Select';
 export type { SelectControl, SelectProps, SelectTriggerInputProps, SelectTriggerProps, SelectTriggerTagsProps, SelectValue, } from './Select';
 export { default as Selection } from './Selection';

package/index.js

@@ -104,6 +104,8 @@ export { default as PickerTrigger } from './Picker/PickerTrigger.js';
 export { default as RangePickerTrigger } from './Picker/RangePickerTrigger.js';
 export { default as Radio } from './Radio/Radio.js';
 export { default as RadioGroup } from './Radio/RadioGroup.js';
+export { default as Cascader } from './Cascader/Cascader.js';
+export { default as CascaderPanel } from './Cascader/CascaderPanel.js';
 export { default as Select } from './Select/Select.js';
 export { default as SelectTrigger } from './Select/SelectTrigger.js';
 export { default as SelectTriggerTags } from './Select/SelectTriggerTags.js';
@@ -161,8 +163,9 @@ export { default as Slide } from './Transition/Slide.js';
 export { default as Transition } from './Transition/Transition.js';
 export { default as Translate } from './Transition/Translate.js';
 export { default as Dropdown } from './Dropdown/Dropdown.js';
+export { LayoutLeftPanel } from './Layout/LayoutLeftPanel.js';
 export { LayoutMain } from './Layout/LayoutMain.js';
-export { LayoutSidePanel } from './Layout/LayoutSidePanel.js';
+export { LayoutRightPanel } from './Layout/LayoutRightPanel.js';
 export { useStepper } from './Stepper/useStepper.js';
 export { usePagination } from './Pagination/usePagination.js';
 export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext } from './Table/TableContext.js';

package/package.json

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

package/Layout/LayoutSidePanel.d.ts

@@ -1,14 +0,0 @@
-export interface LayoutSidePanelProps {
-    /** The content rendered inside the side panel. */
-    children?: React.ReactNode;
-    /** Initial width (in px) of the side panel. Clamped to a minimum of 240px. */
-    defaultSidePanelWidth?: number;
-    /** Callback fired when the side panel width changes during resize. */
-    onSidePanelWidthChange?: (width: number) => void;
-    /** Controls whether the side panel and divider are visible. */
-    open?: boolean;
-}
-export declare function LayoutSidePanel({ children, defaultSidePanelWidth, onSidePanelWidthChange, open, }: LayoutSidePanelProps): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace LayoutSidePanel {
-    var displayName: string;
-}