@itwin/itwinui-react 3.0.4 → 3.0.5

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -3,14 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import {
-  useMergedRefs,
-  Portal,
-  cloneElementWithRef,
-  useControlledState,
-  mergeRefs,
-  mergeEventHandlers,
-} from '../utils/index.js';
+import { useMergedRefs, Portal, cloneElementWithRef, useControlledState, mergeRefs, mergeEventHandlers, } from '../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
 import { usePopover } from '../Popover/Popover.js';
 /**
@@ -33,72 +26,44 @@ import { usePopover } from '../Popover/Popover.js';
  * </DropdownMenu>
  */
 export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
-  const {
-    menuItems,
-    children,
-    role = 'menu',
-    visible: visibleProp,
-    placement = 'bottom-start',
-    matchWidth = false,
-    onVisibleChange,
-    portal = true,
-    ...rest
-  } = props;
-  const [visible, setVisible] = useControlledState(
-    false,
-    visibleProp,
-    onVisibleChange,
-  );
-  const triggerRef = React.useRef(null);
-  const close = React.useCallback(() => {
-    setVisible(false);
-    triggerRef.current?.focus({ preventScroll: true });
-  }, [setVisible]);
-  const menuContent = React.useMemo(() => {
-    if (typeof menuItems === 'function') {
-      return menuItems(close);
-    }
-    return menuItems;
-  }, [menuItems, close]);
-  const popover = usePopover({
-    visible,
-    onVisibleChange: (open) => (open ? setVisible(true) : close()),
-    placement,
-    matchWidth,
-  });
-  const popoverRef = useMergedRefs(forwardedRef, popover.refs.setFloating);
-  return React.createElement(
-    React.Fragment,
-    null,
-    cloneElementWithRef(children, (children) => ({
-      ...popover.getReferenceProps(children.props),
-      'aria-expanded': popover.open,
-      ref: mergeRefs(triggerRef, popover.refs.setReference),
-    })),
-    popover.open &&
-      React.createElement(
-        Portal,
-        { portal: portal },
-        React.createElement(
-          Menu,
-          {
-            ...popover.getFloatingProps({
-              role,
-              ...rest,
-              onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-                if (e.defaultPrevented) {
-                  return;
-                }
-                if (e.key === 'Tab') {
-                  close();
-                }
-              }),
-            }),
-            ref: popoverRef,
-          },
-          menuContent,
-        ),
-      ),
-  );
+    const { menuItems, children, role = 'menu', visible: visibleProp, placement = 'bottom-start', matchWidth = false, onVisibleChange, portal = true, ...rest } = props;
+    const [visible, setVisible] = useControlledState(false, visibleProp, onVisibleChange);
+    const triggerRef = React.useRef(null);
+    const close = React.useCallback(() => {
+        setVisible(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    }, [setVisible]);
+    const menuContent = React.useMemo(() => {
+        if (typeof menuItems === 'function') {
+            return menuItems(close);
+        }
+        return menuItems;
+    }, [menuItems, close]);
+    const popover = usePopover({
+        visible,
+        onVisibleChange: (open) => (open ? setVisible(true) : close()),
+        placement,
+        matchWidth,
+    });
+    const popoverRef = useMergedRefs(forwardedRef, popover.refs.setFloating);
+    return (React.createElement(React.Fragment, null,
+        cloneElementWithRef(children, (children) => ({
+            ...popover.getReferenceProps(children.props),
+            'aria-expanded': popover.open,
+            ref: mergeRefs(triggerRef, popover.refs.setReference),
+        })),
+        popover.open && (React.createElement(Portal, { portal: portal },
+            React.createElement(Menu, { ...popover.getFloatingProps({
+                    role,
+                    ...rest,
+                    onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+                        if (e.defaultPrevented) {
+                            return;
+                        }
+                        if (e.key === 'Tab') {
+                            close();
+                        }
+                    }),
+                }), ref: popoverRef }, menuContent)))));
 });
 export default DropdownMenu;

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -4,139 +4,57 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  StatusIconMap,
-  SvgChevronRight,
-  Box,
-  useSafeContext,
-  polymorphic,
-  mergeEventHandlers,
-  ButtonBase,
-} from '../utils/index.js';
+import { StatusIconMap, SvgChevronRight, Box, useSafeContext, polymorphic, mergeEventHandlers, ButtonBase, } from '../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
-  const { children, title, caption, endIcon, ...rest } = props;
-  return React.createElement(
-    ExpandableBlock.Wrapper,
-    { ...rest, ref: forwardedRef },
-    React.createElement(ExpandableBlock.Trigger, {
-      label: title,
-      caption: caption,
-      endIcon: endIcon,
-    }),
-    React.createElement(ExpandableBlock.Content, null, children),
-  );
+    const { children, title, caption, endIcon, ...rest } = props;
+    return (React.createElement(ExpandableBlock.Wrapper, { ...rest, ref: forwardedRef },
+        React.createElement(ExpandableBlock.Trigger, { label: title, caption: caption, endIcon: endIcon }),
+        React.createElement(ExpandableBlock.Content, null, children)));
 });
 ExpandableBlockComponent.displayName = 'ExpandableBlock';
 // ----------------------------------------------------------------------------
 const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
-  const {
-    children,
-    className,
-    onToggle,
-    style,
-    isExpanded,
-    status,
-    size = 'default',
-    styleType = 'default',
-    disabled = false,
-    ...rest
-  } = props;
-  const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
-  const expanded = isExpanded ?? expandedState;
-  return React.createElement(
-    ExpandableBlockContext.Provider,
-    {
-      value: {
-        status,
-        isExpanded: expanded,
-        onToggle,
-        size,
-        styleType,
-        disabled,
-        setExpanded,
-        children,
-      },
-    },
-    React.createElement(
-      Box,
-      {
-        className: cx('iui-expandable-block', className),
-        'data-iui-expanded': expanded,
-        'data-iui-size': size,
-        'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-        style: style,
-        ref: forwardedRef,
-        ...rest,
-      },
-      children,
-    ),
-  );
+    const { children, className, onToggle, style, isExpanded, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
+    const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
+    const expanded = isExpanded ?? expandedState;
+    return (React.createElement(ExpandableBlockContext.Provider, { value: {
+            status,
+            isExpanded: expanded,
+            onToggle,
+            size,
+            styleType,
+            disabled,
+            setExpanded,
+            children,
+        } },
+        React.createElement(Box, { className: cx('iui-expandable-block', className), "data-iui-expanded": expanded, "data-iui-size": size, "data-iui-variant": styleType !== 'default' ? styleType : undefined, style: style, ref: forwardedRef, ...rest }, children)));
 });
 ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
 const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    children,
-    label,
-    caption,
-    onClick: onClickProp,
-    expandIcon,
-    endIcon,
-    ...rest
-  } = props;
-  const { isExpanded, setExpanded, disabled, onToggle, status } =
-    useSafeContext(ExpandableBlockContext);
-  return React.createElement(
-    ButtonBase,
-    {
-      className: cx('iui-expandable-header', className),
-      'aria-expanded': isExpanded,
-      'aria-disabled': disabled,
-      onClick: mergeEventHandlers(onClickProp, () => {
-        if (disabled) {
-          return;
-        }
-        setExpanded(!isExpanded);
-        onToggle?.(!isExpanded);
-      }),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
+    const { className, children, label, caption, onClick: onClickProp, expandIcon, endIcon, ...rest } = props;
+    const { isExpanded, setExpanded, disabled, onToggle, status } = useSafeContext(ExpandableBlockContext);
+    return (React.createElement(ButtonBase, { className: cx('iui-expandable-header', className), "aria-expanded": isExpanded, "aria-disabled": disabled, onClick: mergeEventHandlers(onClickProp, () => {
+            if (disabled) {
+                return;
+            }
+            setExpanded(!isExpanded);
+            onToggle?.(!isExpanded);
+        }), ref: forwardedRef, ...rest }, children ?? (React.createElement(React.Fragment, null,
         expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null),
-        React.createElement(
-          ExpandableBlock.LabelArea,
-          null,
-          React.createElement(ExpandableBlock.Title, null, label),
-          caption &&
-            React.createElement(ExpandableBlock.Caption, null, caption),
-        ),
-        endIcon || status
-          ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
-          : null,
-      ),
-  );
+        React.createElement(ExpandableBlock.LabelArea, null,
+            React.createElement(ExpandableBlock.Title, null, label),
+            caption && (React.createElement(ExpandableBlock.Caption, null, caption))),
+        endIcon || status ? (React.createElement(ExpandableBlock.EndIcon, null, endIcon)) : null))));
 });
 ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.ExpandIcon component
 const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    Icon,
-    {
-      className: cx('iui-expandable-block-icon', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ?? React.createElement(SvgChevronRight, { 'aria-hidden': true }),
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(Icon, { className: cx('iui-expandable-block-icon', className), ref: forwardedRef, ...rest }, children ?? React.createElement(SvgChevronRight, { "aria-hidden": true })));
 });
 ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
 // ----------------------------------------------------------------------------
@@ -146,16 +64,8 @@ ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Title component
 const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-expandable-block-title', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-expandable-block-title', className), ref: forwardedRef, ...rest }, children));
 });
 ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
 // ----------------------------------------------------------------------------
@@ -165,27 +75,16 @@ ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.EndIcon component
 const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
-  const { children, ...rest } = props;
-  const { status } = useSafeContext(ExpandableBlockContext);
-  const icon = children ?? (status && StatusIconMap[status]());
-  return React.createElement(
-    Icon,
-    { fill: status, ref: forwardedRef, ...rest },
-    icon,
-  );
+    const { children, ...rest } = props;
+    const { status } = useSafeContext(ExpandableBlockContext);
+    const icon = children ?? (status && StatusIconMap[status]());
+    return (React.createElement(Icon, { fill: status, ref: forwardedRef, ...rest }, icon));
 });
 ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
 const ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
-  const { className, children, innerProps, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-expandable-content', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(Box, { ...innerProps }, children),
-  );
+    const { className, children, innerProps, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-expandable-content', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { ...innerProps }, children)));
 });
 ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 /**
@@ -204,54 +103,54 @@ ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
  *  </ExpandableBlock.Wrapper>
  */
 export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
-  Wrapper: ExpandableBlockWrapper,
-  /**
-   * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
-   * @example
-   * <ExpandableBlock.Trigger>
-   *    <ExpandableBlock.ExpandIcon/>
-   *    <ExpandableBlock.LabelArea/>
-   *    <ExpandableBlock.EndIcon/>
-   * </ExpandableBlock.Trigger>
-   */
-  Trigger: ExpandableBlockTrigger,
-  /**
-   * The expanding icon on the left of header
-   */
-  ExpandIcon: ExpandableBlockExpandIcon,
-  /**
-   * `LabelArea` subcomponent that contains `Title` and `Caption`
-   * @example
-   * <ExpandableBlock.LabelArea>
-   *    <ExpandableBLock.Title> Title </ExpandableBlock.Title>
-   *    <ExpandableBlock.Caption> Caption </ExpandableBlock.Caption>
-   * </ExpandableBlock.LabelArea>
-   */
-  LabelArea: ExpandableBlockLabelArea,
-  /**
-   * The main text displayed on the block header, regardless of state.
-   */
-  Title: ExpandableBlockTitle,
-  /**
-   * Small note displayed below title, regardless of state.
-   */
-  Caption: ExpandableBlockCaption,
-  /**
-   * Svg icon displayed at the end of the main text.
-   * Will override status icon if specified. Used inside `Header` subcomponent.
-   * @example
-   * <ExpandableBlock.Trigger>
-   *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
-   * <ExpandableBlock.Trigger/>
-   */
-  EndIcon: ExpandableBlockEndIcon,
-  /**
-   * Content shown in the block's body when fully expanded.
-   * @example
-   * <ExpandableBlock.Wrapper>
-   *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
-   * </ExpandableBlock.Wrapper>
-   */
-  Content: ExpandableBlockContent,
+    Wrapper: ExpandableBlockWrapper,
+    /**
+     * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
+     * @example
+     * <ExpandableBlock.Trigger>
+     *    <ExpandableBlock.ExpandIcon/>
+     *    <ExpandableBlock.LabelArea/>
+     *    <ExpandableBlock.EndIcon/>
+     * </ExpandableBlock.Trigger>
+     */
+    Trigger: ExpandableBlockTrigger,
+    /**
+     * The expanding icon on the left of header
+     */
+    ExpandIcon: ExpandableBlockExpandIcon,
+    /**
+     * `LabelArea` subcomponent that contains `Title` and `Caption`
+     * @example
+     * <ExpandableBlock.LabelArea>
+     *    <ExpandableBLock.Title> Title </ExpandableBlock.Title>
+     *    <ExpandableBlock.Caption> Caption </ExpandableBlock.Caption>
+     * </ExpandableBlock.LabelArea>
+     */
+    LabelArea: ExpandableBlockLabelArea,
+    /**
+     * The main text displayed on the block header, regardless of state.
+     */
+    Title: ExpandableBlockTitle,
+    /**
+     * Small note displayed below title, regardless of state.
+     */
+    Caption: ExpandableBlockCaption,
+    /**
+     * Svg icon displayed at the end of the main text.
+     * Will override status icon if specified. Used inside `Header` subcomponent.
+     * @example
+     * <ExpandableBlock.Trigger>
+     *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
+     * <ExpandableBlock.Trigger/>
+     */
+    EndIcon: ExpandableBlockEndIcon,
+    /**
+     * Content shown in the block's body when fully expanded.
+     * @example
+     * <ExpandableBlock.Wrapper>
+     *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
+     * </ExpandableBlock.Wrapper>
+     */
+    Content: ExpandableBlockContent,
 });
 export default ExpandableBlock;

package/esm/core/Fieldset/Fieldset.js

@@ -17,24 +17,13 @@ import cx from 'classnames';
  * </Fieldset>
  */
 export const Fieldset = React.forwardRef((props, ref) => {
-  const { children, className, disabled, legend, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      as: 'fieldset',
-      className: cx('iui-fieldset', className),
-      disabled: disabled,
-      ref: ref,
-      ...rest,
-    },
-    legend && React.createElement('legend', null, legend),
-    disabled
-      ? React.Children.map(children, (child) =>
-          React.isValidElement(child)
-            ? React.cloneElement(child, { disabled: true })
-            : child,
-        )
-      : children,
-  );
+    const { children, className, disabled, legend, ...rest } = props;
+    return (React.createElement(Box, { as: 'fieldset', className: cx('iui-fieldset', className), disabled: disabled, ref: ref, ...rest },
+        legend && React.createElement("legend", null, legend),
+        disabled
+            ? React.Children.map(children, (child) => React.isValidElement(child)
+                ? React.cloneElement(child, { disabled: true })
+                : child)
+            : children));
 });
 export default Fieldset;

package/esm/core/FileUpload/FileEmptyCard.js

@@ -9,7 +9,7 @@ import FileUploadCard from './FileUploadCard.js';
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Icon component
 const FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
-  children: React.createElement(SvgUpload, null),
+    children: React.createElement(SvgUpload, null),
 });
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Text component
@@ -17,23 +17,12 @@ const FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
 // ----------------------------------------------------------------------------
 // FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  return React.createElement(
-    Box,
-    { className: cx('iui-file-card-empty', className), ref: ref, ...rest },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
+    const { children, className, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(FileEmptyCard.Icon, null),
-        React.createElement(
-          FileEmptyCard.Text,
-          null,
-          React.createElement(FileUploadCard.InputLabel, null, 'Choose a file'),
-          React.createElement('div', null, 'to upload.'),
-        ),
-      ),
-  );
+        React.createElement(FileEmptyCard.Text, null,
+            React.createElement(FileUploadCard.InputLabel, null, "Choose a file"),
+            React.createElement("div", null, "to upload."))))));
 });
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
@@ -52,7 +41,7 @@ const FileEmptyCardComponent = React.forwardRef((props, ref) => {
  * </FileEmptyCard>
  */
 export const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
-  Icon: FileEmptyCardIcon,
-  Text: FileEmptyCardText,
+    Icon: FileEmptyCardIcon,
+    Text: FileEmptyCardText,
 });
 export default FileEmptyCard;

package/esm/core/FileUpload/FileUpload.js

@@ -13,77 +13,41 @@ import { Box, useMergedRefs } from '../utils/index.js';
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 export const FileUpload = React.forwardRef((props, ref) => {
-  const {
-    dragContent,
-    children,
-    onFileDropped,
-    className,
-    contentProps,
-    ...rest
-  } = props;
-  const [isDragActive, setIsDragActive] = React.useState(false);
-  const fileUploadRef = React.useRef(null);
-  const refs = useMergedRefs(fileUploadRef, ref);
-  const onDragOverHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const onDragEnterHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // only set active if a file is dragged over
-    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
-      setIsDragActive(true);
-    }
-  };
-  const onDragLeaveHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // only set inactive if secondary target is outside the component
-    if (isDragActive && !fileUploadRef.current?.contains(e.relatedTarget)) {
-      setIsDragActive(false);
-    }
-  };
-  const onDropHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isDragActive) {
-      setIsDragActive(false);
-      onFileDropped(e.dataTransfer?.files);
-    }
-  };
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-file-upload', { 'iui-drag': isDragActive }, className),
-      onDragEnter: onDragEnterHandler,
-      onDragOver: onDragOverHandler,
-      onDragLeave: onDragLeaveHandler,
-      onDrop: onDropHandler,
-      ref: refs,
-      ...rest,
-    },
-    dragContent
-      ? children
-      : React.createElement(
-          Box,
-          {
-            as: 'div',
-            ...contentProps,
-            className: cx('iui-content', contentProps?.className),
-          },
-          children,
-        ),
-    dragContent &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...contentProps,
-          className: cx('iui-content', contentProps?.className),
-        },
-        dragContent,
-      ),
-  );
+    const { dragContent, children, onFileDropped, className, contentProps, ...rest } = props;
+    const [isDragActive, setIsDragActive] = React.useState(false);
+    const fileUploadRef = React.useRef(null);
+    const refs = useMergedRefs(fileUploadRef, ref);
+    const onDragOverHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const onDragEnterHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // only set active if a file is dragged over
+        if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
+            setIsDragActive(true);
+        }
+    };
+    const onDragLeaveHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // only set inactive if secondary target is outside the component
+        if (isDragActive &&
+            !fileUploadRef.current?.contains(e.relatedTarget)) {
+            setIsDragActive(false);
+        }
+    };
+    const onDropHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDragActive) {
+            setIsDragActive(false);
+            onFileDropped(e.dataTransfer?.files);
+        }
+    };
+    return (React.createElement(Box, { className: cx('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },
+        dragContent ? (children) : (React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-content', contentProps?.className) }, children)),
+        dragContent && (React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-content', contentProps?.className) }, dragContent))));
 });
 export default FileUpload;