@mezzanine-ui/react 1.0.0-beta.6 → 1.0.0-beta.7

package/Cropper/index.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import { CropperModal, CropperProps } from './Cropper';
+import { CropArea, CropperComponent, CropperElementComponent, CropperPropsBase } from './typings';
+export type { CropperSize } from '@mezzanine-ui/core/cropper';
+export type { CropperModalConfirmContext, CropperModalOpenOptions, CropperModalProps, CropperModalResult, CropperModalType } from './Cropper';
+export { default as CropperElement } from './CropperElement';
+export type { CropperElementProps } from './CropperElement';
+export { cropToBlob, cropToDataURL, cropToFile } from './tools';
+export type { CropToBlobOptions } from './tools';
+export { CropperModal };
+export type { CropArea, CropperComponent, CropperElementComponent, CropperProps, CropperPropsBase };
+/**
+ * @remark
+ * Add type alias here for parsable to react docgen typescript.
+ */
+type GenericCropper = <C extends CropperComponent = 'div'>(props: PropsWithoutRef<CropperProps<C>> & RefAttributes<HTMLDivElement>) => ReactElement<any>;
+declare const _default: GenericCropper;
+export default _default;

package/Cropper/index.js

@@ -0,0 +1,8 @@
+import Cropper from './Cropper.js';
+export { CropperModal } from './Cropper.js';
+export { default as CropperElement } from './CropperElement.js';
+export { cropToBlob, cropToDataURL, cropToFile } from './tools.js';
+
+
+
+export { Cropper as default };

package/Cropper/tools.d.ts

@@ -0,0 +1,90 @@
+import { CropArea } from './typings';
+export interface CropToBlobOptions {
+    /**
+     * The image source (URL, File, or Blob).
+     */
+    imageSrc: string | File | Blob;
+    /**
+     * The crop area coordinates and dimensions in image pixel space.
+     */
+    cropArea: CropArea;
+    /**
+     * The canvas element used for cropping.
+     * If not provided, a temporary canvas will be created.
+     */
+    canvas?: HTMLCanvasElement;
+    /**
+     * The output image format.
+     * @default 'image/png'
+     */
+    format?: string;
+    /**
+     * The output image quality (0-1).
+     * Only applies to 'image/jpeg' and 'image/webp' formats.
+     * @default 0.92
+     */
+    quality?: number;
+    /**
+     * The output image width in pixels.
+     * If not provided, uses the crop area width.
+     */
+    outputWidth?: number;
+    /**
+     * The output image height in pixels.
+     * If not provided, uses the crop area height.
+     */
+    outputHeight?: number;
+}
+/**
+ * Converts a cropped image area to a Blob.
+ *
+ * @param options - The cropping options
+ * @returns A Promise that resolves to a Blob of the cropped image
+ *
+ * @example
+ * ```tsx
+ * const blob = await cropToBlob({
+ *   imageSrc: 'https://example.com/image.jpg',
+ *   cropArea: { x: 100, y: 100, width: 200, height: 200 },
+ *   format: 'image/jpeg',
+ *   quality: 0.9,
+ * });
+ * ```
+ */
+export declare function cropToBlob(options: CropToBlobOptions): Promise<Blob>;
+/**
+ * Converts a cropped image area to a File.
+ *
+ * @param options - The cropping options
+ * @param filename - The filename for the output file
+ * @returns A Promise that resolves to a File of the cropped image
+ *
+ * @example
+ * ```tsx
+ * const file = await cropToFile(
+ *   {
+ *     imageSrc: fileInput.files[0],
+ *     cropArea: { x: 100, y: 100, width: 200, height: 200 },
+ *   },
+ *   'cropped-image.jpg',
+ * );
+ * ```
+ */
+export declare function cropToFile(options: CropToBlobOptions, filename: string): Promise<File>;
+/**
+ * Converts a cropped image area to a data URL.
+ *
+ * @param options - The cropping options
+ * @returns A Promise that resolves to a data URL string of the cropped image
+ *
+ * @example
+ * ```tsx
+ * const dataUrl = await cropToDataURL({
+ *   imageSrc: 'https://example.com/image.jpg',
+ *   cropArea: { x: 100, y: 100, width: 200, height: 200 },
+ *   format: 'image/jpeg',
+ *   quality: 0.9,
+ * });
+ * ```
+ */
+export declare function cropToDataURL(options: CropToBlobOptions): Promise<string>;

package/Cropper/tools.js

@@ -0,0 +1,143 @@
+/**
+ * Converts a cropped image area to a Blob.
+ *
+ * @param options - The cropping options
+ * @returns A Promise that resolves to a Blob of the cropped image
+ *
+ * @example
+ * ```tsx
+ * const blob = await cropToBlob({
+ *   imageSrc: 'https://example.com/image.jpg',
+ *   cropArea: { x: 100, y: 100, width: 200, height: 200 },
+ *   format: 'image/jpeg',
+ *   quality: 0.9,
+ * });
+ * ```
+ */
+async function cropToBlob(options) {
+    const { imageSrc, cropArea, canvas: providedCanvas, format = 'image/png', quality = 0.92, outputWidth, outputHeight, } = options;
+    // Load image
+    const img = await loadImage(imageSrc);
+    // Create or use provided canvas
+    const canvas = providedCanvas || document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get canvas context');
+    }
+    // Crop area is already in image pixel space
+    const actualCropX = cropArea.x;
+    const actualCropY = cropArea.y;
+    const actualCropWidth = cropArea.width;
+    const actualCropHeight = cropArea.height;
+    // Set canvas size to output dimensions or crop area dimensions
+    const finalWidth = outputWidth || cropArea.width;
+    const finalHeight = outputHeight || cropArea.height;
+    canvas.width = finalWidth;
+    canvas.height = finalHeight;
+    // Draw the cropped portion of the image
+    ctx.drawImage(img, actualCropX, actualCropY, actualCropWidth, actualCropHeight, 0, 0, finalWidth, finalHeight);
+    // Convert to blob
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (blob) {
+                resolve(blob);
+            }
+            else {
+                reject(new Error('Failed to convert canvas to blob'));
+            }
+        }, format, quality);
+    });
+}
+/**
+ * Converts a cropped image area to a File.
+ *
+ * @param options - The cropping options
+ * @param filename - The filename for the output file
+ * @returns A Promise that resolves to a File of the cropped image
+ *
+ * @example
+ * ```tsx
+ * const file = await cropToFile(
+ *   {
+ *     imageSrc: fileInput.files[0],
+ *     cropArea: { x: 100, y: 100, width: 200, height: 200 },
+ *   },
+ *   'cropped-image.jpg',
+ * );
+ * ```
+ */
+async function cropToFile(options, filename) {
+    const blob = await cropToBlob(options);
+    return new File([blob], filename, { type: blob.type });
+}
+/**
+ * Converts a cropped image area to a data URL.
+ *
+ * @param options - The cropping options
+ * @returns A Promise that resolves to a data URL string of the cropped image
+ *
+ * @example
+ * ```tsx
+ * const dataUrl = await cropToDataURL({
+ *   imageSrc: 'https://example.com/image.jpg',
+ *   cropArea: { x: 100, y: 100, width: 200, height: 200 },
+ *   format: 'image/jpeg',
+ *   quality: 0.9,
+ * });
+ * ```
+ */
+async function cropToDataURL(options) {
+    const { imageSrc, cropArea, canvas: providedCanvas, format = 'image/png', quality = 0.92, outputWidth, outputHeight, } = options;
+    // Load image
+    const img = await loadImage(imageSrc);
+    // Create or use provided canvas
+    const canvas = providedCanvas || document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get canvas context');
+    }
+    // Crop area is already in image pixel space
+    const actualCropX = cropArea.x;
+    const actualCropY = cropArea.y;
+    const actualCropWidth = cropArea.width;
+    const actualCropHeight = cropArea.height;
+    // Set canvas size to output dimensions or crop area dimensions
+    const finalWidth = outputWidth || cropArea.width;
+    const finalHeight = outputHeight || cropArea.height;
+    canvas.width = finalWidth;
+    canvas.height = finalHeight;
+    // Draw the cropped portion of the image
+    ctx.drawImage(img, actualCropX, actualCropY, actualCropWidth, actualCropHeight, 0, 0, finalWidth, finalHeight);
+    return canvas.toDataURL(format, quality);
+}
+/**
+ * Helper function to load an image from various sources.
+ */
+async function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        let objectUrl = null;
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+            resolve(img);
+        };
+        img.onerror = (error) => {
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+            reject(error);
+        };
+        if (typeof src === 'string') {
+            img.src = src;
+        }
+        else {
+            objectUrl = URL.createObjectURL(src);
+            img.src = objectUrl;
+        }
+    });
+}
+
+export { cropToBlob, cropToDataURL, cropToFile };

package/Cropper/typings.d.ts

@@ -0,0 +1,69 @@
+import { CropperSize } from '@mezzanine-ui/core/cropper';
+import { ReactNode } from 'react';
+export type CropperComponent = 'div' | 'span';
+export type CropperElementComponent = 'canvas';
+export interface CropperPropsBase {
+    /**
+     * The size of cropper.
+     * @default 'main'
+     */
+    size?: CropperSize;
+    /**
+     * The cropper content.
+     */
+    children?: ReactNode;
+    /**
+     * The image source to crop.
+     * Can be a URL string, File, or Blob.
+     */
+    imageSrc?: string | File | Blob;
+    /**
+     * Callback fired when the crop area changes.
+     */
+    onCropChange?: (cropArea: CropArea) => void;
+    /**
+     * Callback fired when crop area drag ends.
+     */
+    onCropDragEnd?: (cropArea: CropArea) => void;
+    /**
+     * Callback fired when image drag ends.
+     */
+    onImageDragEnd?: () => void;
+    /**
+     * Callback fired when scale (zoom) changes.
+     */
+    onScaleChange?: (scale: number) => void;
+    /**
+     * Callback fired when image loads successfully.
+     */
+    onImageLoad?: () => void;
+    /**
+     * Callback fired when image fails to load.
+     */
+    onImageError?: (error: Error) => void;
+    /**
+     * Initial crop area.
+     */
+    initialCropArea?: CropArea;
+    /**
+     * Aspect ratio for the crop area (width / height).
+     * If not provided, free aspect ratio is allowed.
+     */
+    aspectRatio?: number;
+    /**
+     * Minimum crop area width in pixels.
+     * @default 50
+     */
+    minWidth?: number;
+    /**
+     * Minimum crop area height in pixels.
+     * @default 50
+     */
+    minHeight?: number;
+}
+export interface CropArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}

package/Cropper/utils/cropper-calculations.d.ts

@@ -0,0 +1,39 @@
+import type { CropArea } from '../typings';
+export interface ImagePosition {
+    offsetX: number;
+    offsetY: number;
+}
+export interface BaseDisplaySize {
+    width: number;
+    height: number;
+}
+export interface InitialCropAreaResult {
+    baseDisplayHeight: number;
+    baseDisplayWidth: number;
+    cropArea: CropArea;
+    imagePosition: ImagePosition;
+}
+/**
+ * Calculate base scale for image to fit canvas height.
+ */
+export declare function getBaseScale(rect: DOMRect, img: HTMLImageElement): number;
+/**
+ * Calculate base display size of image.
+ */
+export declare function getBaseDisplaySize(rect: DOMRect, img: HTMLImageElement): BaseDisplaySize;
+/**
+ * Calculate initial crop area and image position.
+ */
+export declare function calculateInitialCropArea(img: HTMLImageElement, rect: DOMRect, aspectRatio?: number): InitialCropAreaResult;
+/**
+ * Constrain image position to ensure it covers crop area.
+ */
+export declare function constrainImagePosition(newOffsetX: number, newOffsetY: number, displayWidth: number, displayHeight: number, cropArea: CropArea): ImagePosition;
+/**
+ * Check if two crop areas are similar (within threshold).
+ */
+export declare function isCropAreaSimilar(a: CropArea | null, b: CropArea | null, threshold?: number): boolean;
+/**
+ * Check if two image positions are similar (within threshold).
+ */
+export declare function isImagePositionSimilar(a: ImagePosition | null, b: ImagePosition | null, threshold?: number): boolean;

package/Cropper/utils/cropper-calculations.js

@@ -0,0 +1,95 @@
+/**
+ * Calculate base scale for image to fit canvas height.
+ */
+function getBaseScale(rect, img) {
+    if (!rect.height)
+        return 1;
+    return img.height / rect.height;
+}
+/**
+ * Calculate base display size of image.
+ */
+function getBaseDisplaySize(rect, img) {
+    const baseScale = getBaseScale(rect, img);
+    return {
+        width: img.width / baseScale,
+        height: img.height / baseScale,
+    };
+}
+/**
+ * Calculate initial crop area and image position.
+ */
+function calculateInitialCropArea(img, rect, aspectRatio) {
+    const baseScale = getBaseScale(rect, img);
+    const baseDisplayWidth = img.width / baseScale;
+    const baseDisplayHeight = img.height / baseScale;
+    const initialOffsetX = (rect.width - baseDisplayWidth) / 2;
+    const initialOffsetY = (rect.height - baseDisplayHeight) / 2;
+    let initialWidth = baseDisplayWidth;
+    let initialHeight = baseDisplayHeight;
+    if (aspectRatio) {
+        const maxWidthByHeight = baseDisplayHeight * aspectRatio;
+        const maxHeightByWidth = baseDisplayWidth / aspectRatio;
+        if (maxWidthByHeight <= baseDisplayWidth) {
+            initialWidth = maxWidthByHeight;
+            initialHeight = baseDisplayHeight;
+        }
+        else {
+            initialWidth = baseDisplayWidth;
+            initialHeight = maxHeightByWidth;
+        }
+    }
+    const initialX = initialOffsetX + (baseDisplayWidth - initialWidth) / 2;
+    const initialY = initialOffsetY + (baseDisplayHeight - initialHeight) / 2;
+    return {
+        baseDisplayHeight,
+        baseDisplayWidth,
+        cropArea: {
+            height: initialHeight,
+            width: initialWidth,
+            x: initialX,
+            y: initialY,
+        },
+        imagePosition: {
+            offsetX: initialOffsetX,
+            offsetY: initialOffsetY,
+        },
+    };
+}
+/**
+ * Constrain image position to ensure it covers crop area.
+ */
+function constrainImagePosition(newOffsetX, newOffsetY, displayWidth, displayHeight, cropArea) {
+    const { x: cx, y: cy, width: cw, height: ch } = cropArea;
+    // Ensure image always covers crop area (no white space in crop area)
+    const minOffsetX = cx + cw - displayWidth;
+    const maxOffsetX = cx;
+    const minOffsetY = cy + ch - displayHeight;
+    const maxOffsetY = cy;
+    return {
+        offsetX: Math.max(minOffsetX, Math.min(newOffsetX, maxOffsetX)),
+        offsetY: Math.max(minOffsetY, Math.min(newOffsetY, maxOffsetY)),
+    };
+}
+/**
+ * Check if two crop areas are similar (within threshold).
+ */
+function isCropAreaSimilar(a, b, threshold = 0.5) {
+    if (!a || !b)
+        return a === b;
+    return (Math.abs(a.x - b.x) < threshold &&
+        Math.abs(a.y - b.y) < threshold &&
+        Math.abs(a.width - b.width) < threshold &&
+        Math.abs(a.height - b.height) < threshold);
+}
+/**
+ * Check if two image positions are similar (within threshold).
+ */
+function isImagePositionSimilar(a, b, threshold = 0.1) {
+    if (!a || !b)
+        return a === b;
+    return (Math.abs(a.offsetX - b.offsetX) < threshold &&
+        Math.abs(a.offsetY - b.offsetY) < threshold);
+}
+
+export { calculateInitialCropArea, constrainImagePosition, getBaseDisplaySize, getBaseScale, isCropAreaSimilar, isImagePositionSimilar };

package/DateTimePicker/DateTimePicker.d.ts

@@ -3,7 +3,7 @@ import { DatePickerCalendarProps } from '../DatePicker';
 import { PickerTriggerWithSeparatorProps } from '../Picker';
 import { TimePickerPanelProps } from '../TimePicker';
 type FocusedInput = 'left' | 'right' | null;
-export interface DateTimePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'onChange' | 'open' | 'referenceDate' | 'value'>, Omit<TimePickerPanelProps, 'anchor' | 'onChange' | 'open' | 'popperProps' | 'value'>, Omit<PickerTriggerWithSeparatorProps, 'formatLeft' | 'formatRight' | 'inputLeftRef' | 'inputRightRef' | 'onBlurLeft' | 'onBlurRight' | 'onChangeLeft' | 'onChangeRight' | 'onFocusLeft' | 'onFocusRight' | 'onLeftComplete' | 'onRightComplete' | 'suffix' | 'valueLeft' | 'valueRight'> {
+export interface DateTimePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'onChange' | 'open' | 'referenceDate' | 'value'>, Omit<TimePickerPanelProps, 'anchor' | 'onChange' | 'open' | 'popperProps' | 'value'>, Omit<PickerTriggerWithSeparatorProps, 'formatLeft' | 'formatRight' | 'inputLeftRef' | 'inputRightRef' | 'onBlurLeft' | 'onBlurRight' | 'onChangeLeft' | 'onChangeRight' | 'onFocusLeft' | 'onFocusRight' | 'onLeftComplete' | 'onPasteIsoValueLeft' | 'onPasteIsoValueRight' | 'onRightComplete' | 'suffix' | 'valueLeft' | 'valueRight'> {
     /**
      * Default value for date-time picker.
      */

package/DateTimePicker/DateTimePicker.js

@@ -153,6 +153,19 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
             notifyChange(dateValue, isoValue);
         }
     }, [dateValue, isValid, notifyChange]);
+    const onPasteIsoValueLeft = useCallback((isoValue) => {
+        if (!timeValue && isValid(isoValue)) {
+            // Time is empty, update it from pasted value
+            setTimeValue(isoValue);
+        }
+    }, [isValid, timeValue]);
+    const onPasteIsoValueRight = useCallback((isoValue) => {
+        if (!dateValue && isValid(isoValue)) {
+            // Date is empty, update it from pasted value
+            setDateValue(isoValue);
+            setReferenceDate(startOf(isoValue, 'day'));
+        }
+    }, [dateValue, isValid, startOf]);
     const onCalendarChange = useCallback((target) => {
         setDateValue(target);
         setReferenceDate(startOf(target, 'day'));
@@ -204,7 +217,7 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
         }
     }, [disabled, focusedInput, onPanelToggle, readOnly]);
     const suffix = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarTimeIcon, onClick: onCalendarIconClick }));
-    return (jsxs(Fragment, { children: [jsx(PickerTriggerWithSeparator, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, formatLeft: formatDate, formatRight: formatTime, fullWidth: fullWidth, inputLeftRef: inputLeftRef, inputRightRef: inputRightRef, onBlurLeft: () => { }, onBlurRight: () => { }, onChangeLeft: onChangeLeft, onChangeRight: onChangeRight, onClear: onClear, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onLeftComplete: onLeftComplete, onRightComplete: onRightComplete, placeholderLeft: placeholderLeft, placeholderRight: placeholderRight, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffix, valueLeft: displayDateValue, valueRight: displayTimeValue }), jsx(DatePickerCalendar, { ref: calendarPanelRef, anchor: anchorRef, calendarProps: calendarProps, calendarRef: calendarRef, disabledMonthSwitch: disabledMonthSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isHalfYearDisabled: isHalfYearDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: openCalendar, popperProps: popperProps, referenceDate: referenceDate, value: dateValue }), jsx(TimePickerPanel, { ref: timePanelRef, anchor: anchorRef, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onTimePanelChange, open: openTimePanel, popperProps: popperPropsTime, secondStep: secondStep, value: timeValue })] }));
+    return (jsxs(Fragment, { children: [jsx(PickerTriggerWithSeparator, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, formatLeft: formatDate, formatRight: formatTime, fullWidth: fullWidth, inputLeftRef: inputLeftRef, inputRightRef: inputRightRef, onBlurLeft: () => { }, onBlurRight: () => { }, onChangeLeft: onChangeLeft, onChangeRight: onChangeRight, onClear: onClear, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onLeftComplete: onLeftComplete, onPasteIsoValueLeft: onPasteIsoValueLeft, onPasteIsoValueRight: onPasteIsoValueRight, onRightComplete: onRightComplete, placeholderLeft: placeholderLeft, placeholderRight: placeholderRight, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffix, valueLeft: displayDateValue, valueRight: displayTimeValue }), jsx(DatePickerCalendar, { ref: calendarPanelRef, anchor: anchorRef, calendarProps: calendarProps, calendarRef: calendarRef, disabledMonthSwitch: disabledMonthSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isHalfYearDisabled: isHalfYearDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: openCalendar, popperProps: popperProps, referenceDate: referenceDate, value: dateValue }), jsx(TimePickerPanel, { ref: timePanelRef, anchor: anchorRef, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onTimePanelChange, open: openTimePanel, popperProps: popperPropsTime, secondStep: secondStep, value: timeValue })] }));
 });
 
 export { DateTimePicker as default };

package/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DropdownInputPosition, DropdownItemSharedProps, DropdownOption, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { DropdownInputPosition, DropdownItemSharedProps, DropdownLoadingPosition, DropdownOption, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
 import { ButtonProps } from '../Button';
 import { InputProps } from '../Input';
 import { PopperPlacement } from '../Popper';
@@ -162,6 +162,12 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * The icon of the dropdown empty status.
      */
     emptyIcon?: IconDefinition;
+    /**
+     * The position to display the loading status.
+     * Only takes effect when `status === 'loading'`.
+     * @default 'full'
+     */
+    loadingPosition?: DropdownLoadingPosition;
     /**
      * Whether to enable portal.
      * This prop is only relevant when `inputPosition` is set to 'outside'.

package/Dropdown/Dropdown.js

@@ -13,8 +13,19 @@ import { composeRefs } from '../utils/composeRefs.js';
 import DropdownItem from './DropdownItem.js';
 import Popper from '../Popper/Popper.js';
 
+/**
+ * Extracts ref from a ReactElement, supporting both React 18 and 19.
+ * In React 18, ref is on the element itself; in React 19, ref is in props.
+ */
+function getElementRef(element) {
+    var _a;
+    // React 19: ref is in props
+    const propsRef = (_a = element.props) === null || _a === void 0 ? void 0 : _a.ref;
+    // React 18: ref is on the element itself
+    return propsRef !== null && propsRef !== void 0 ? propsRef : element.ref;
+}
 function Dropdown(props) {
-    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', 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, followText: followTextProp, globalPortal = true, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
+    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', 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 isInline = inputPosition === 'inside';
     const inputId = useId();
     const defaultListboxId = `${inputId}-listbox`;
@@ -179,8 +190,8 @@ function Dropdown(props) {
     const popperControllerRef = useRef(null);
     // Extract combobox props logic to avoid duplication
     const getComboboxProps = useMemo(() => {
-        const childWithRef = children;
-        const isInput = childWithRef.type !== Button;
+        // Only access the type property to check if it's a Button component
+        const isInput = children.type !== Button;
         if (!isInput)
             return {};
         return {
@@ -216,6 +227,7 @@ function Dropdown(props) {
         loadingText,
         emptyText,
         emptyIcon,
+        loadingPosition,
         mode,
         value,
         scrollbarDefer,
@@ -242,6 +254,7 @@ function Dropdown(props) {
         loadingText,
         emptyText,
         emptyIcon,
+        loadingPosition,
         mode,
         value,
         scrollbarDefer,
@@ -251,13 +264,15 @@ function Dropdown(props) {
     ]);
     const triggerElement = useMemo(() => {
         const childWithRef = children;
-        const composedRef = composeRefs([anchorRef, childWithRef.ref]);
+        const childProps = childWithRef.props;
+        const childRef = getElementRef(childWithRef);
+        const composedRef = composeRefs([anchorRef, childRef]);
+        const originalOnClick = childProps.onClick;
         return cloneElement(childWithRef, {
             ref: composedRef,
             ...getComboboxProps,
             onClick: (event) => {
-                var _a, _b;
-                (_b = (_a = childWithRef.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                originalOnClick === null || originalOnClick === void 0 ? void 0 : originalOnClick(event);
                 if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                     return;
                 if (!isInline) {
@@ -271,13 +286,17 @@ function Dropdown(props) {
             return null;
         }
         const childWithRef = children;
-        const composedRef = composeRefs([childWithRef.ref]);
+        const childProps = childWithRef.props;
+        const childRef = getElementRef(childWithRef);
+        const composedRef = composeRefs([childRef]);
+        const originalOnBlur = childProps.onBlur;
+        const originalOnClick = childProps.onClick;
+        const originalOnFocus = childProps.onFocus;
         return cloneElement(childWithRef, {
             ref: composedRef,
             ...getComboboxProps,
             onBlur: (event) => {
-                var _a, _b;
-                (_b = (_a = childWithRef.props) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                originalOnBlur === null || originalOnBlur === void 0 ? void 0 : originalOnBlur(event);
                 if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                     return;
                 // When open is controlled, don't automatically close on blur
@@ -295,21 +314,19 @@ function Dropdown(props) {
                 setOpen(false);
             },
             onClick: (event) => {
-                var _a, _b;
-                (_b = (_a = childWithRef.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                originalOnClick === null || originalOnClick === void 0 ? void 0 : originalOnClick(event);
                 if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                     return;
                 setOpen(true);
             },
             onFocus: (event) => {
-                var _a, _b;
-                (_b = (_a = childWithRef.props) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                originalOnFocus === null || originalOnFocus === void 0 ? void 0 : originalOnFocus(event);
                 if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                     return;
                 setOpen(true);
             },
         });
-    }, [children, getComboboxProps, isInline, setOpen, isOpenControlled]);
+    }, [children, getComboboxProps, isInline, isOpenControlled, setOpen]);
     useDocumentEvents(() => {
         if (!isOpen) {
             return;

package/Dropdown/DropdownItem.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DropdownItemSharedProps, DropdownOptionsByType, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { DropdownItemSharedProps, DropdownLoadingPosition, DropdownOptionsByType, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
 import { type IconDefinition } from '@mezzanine-ui/icons';
 import type { PartialOptions } from 'overlayscrollbars';
 import { type DropdownActionProps } from './DropdownAction';
@@ -74,6 +74,12 @@ export interface DropdownItemProps<T extends DropdownType | undefined = Dropdown
      * The icon of the dropdown empty status.
      */
     emptyIcon?: IconDefinition;
+    /**
+     * The position to display the loading status.
+     * Only takes effect when `status === 'loading'`.
+     * @default 'full'
+     */
+    loadingPosition?: DropdownLoadingPosition;
     /**
      * Callback fired when the dropdown list reaches the bottom.
      * Only fires when `maxHeight` is set and the list is scrollable.