@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -1,199 +1,94 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandableBlock = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const Icon_js_1 = require('../Icon/Icon.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const Icon_js_1 = require("../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(
-    exports.ExpandableBlock.Wrapper,
-    { ...rest, ref: forwardedRef },
-    React.createElement(exports.ExpandableBlock.Trigger, {
-      label: title,
-      caption: caption,
-      endIcon: endIcon,
-    }),
-    React.createElement(exports.ExpandableBlock.Content, null, children),
-  );
+    const { children, title, caption, endIcon, ...rest } = props;
+    return (React.createElement(exports.ExpandableBlock.Wrapper, { ...rest, ref: forwardedRef },
+        React.createElement(exports.ExpandableBlock.Trigger, { label: title, caption: caption, endIcon: endIcon }),
+        React.createElement(exports.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(
-      index_js_1.Box,
-      {
-        className: (0, classnames_1.default)('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(index_js_1.Box, { className: (0, classnames_1.default)('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 } = (0,
-  index_js_1.useSafeContext)(ExpandableBlockContext);
-  return React.createElement(
-    index_js_1.ButtonBase,
-    {
-      className: (0, classnames_1.default)('iui-expandable-header', className),
-      'aria-expanded': isExpanded,
-      'aria-disabled': disabled,
-      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
-        if (disabled) {
-          return;
-        }
-        setExpanded(!isExpanded);
-        onToggle?.(!isExpanded);
-      }),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
-        expandIcon ??
-          React.createElement(exports.ExpandableBlock.ExpandIcon, null),
-        React.createElement(
-          exports.ExpandableBlock.LabelArea,
-          null,
-          React.createElement(exports.ExpandableBlock.Title, null, label),
-          caption &&
-            React.createElement(exports.ExpandableBlock.Caption, null, caption),
-        ),
-        endIcon || status
-          ? React.createElement(exports.ExpandableBlock.EndIcon, null, endIcon)
-          : null,
-      ),
-  );
+    const { className, children, label, caption, onClick: onClickProp, expandIcon, endIcon, ...rest } = props;
+    const { isExpanded, setExpanded, disabled, onToggle, status } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
+    return (React.createElement(index_js_1.ButtonBase, { className: (0, classnames_1.default)('iui-expandable-header', className), "aria-expanded": isExpanded, "aria-disabled": disabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
+            if (disabled) {
+                return;
+            }
+            setExpanded(!isExpanded);
+            onToggle?.(!isExpanded);
+        }), ref: forwardedRef, ...rest }, children ?? (React.createElement(React.Fragment, null,
+        expandIcon ?? React.createElement(exports.ExpandableBlock.ExpandIcon, null),
+        React.createElement(exports.ExpandableBlock.LabelArea, null,
+            React.createElement(exports.ExpandableBlock.Title, null, label),
+            caption && (React.createElement(exports.ExpandableBlock.Caption, null, caption))),
+        endIcon || status ? (React.createElement(exports.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_js_1.Icon,
-    {
-      className: (0, classnames_1.default)(
-        'iui-expandable-block-icon',
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ??
-      React.createElement(index_js_1.SvgChevronRight, { 'aria-hidden': true }),
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(Icon_js_1.Icon, { className: (0, classnames_1.default)('iui-expandable-block-icon', className), ref: forwardedRef, ...rest }, children ?? React.createElement(index_js_1.SvgChevronRight, { "aria-hidden": true })));
 });
 ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.LabelArea component
-const ExpandableBlockLabelArea = index_js_1.polymorphic.span(
-  'iui-expandable-block-label',
-);
+const ExpandableBlockLabelArea = index_js_1.polymorphic.span('iui-expandable-block-label');
 ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Title component
 const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-expandable-block-title',
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-expandable-block-title', className), ref: forwardedRef, ...rest }, children));
 });
 ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Caption component
-const ExpandableBlockCaption = (0, index_js_1.polymorphic)(
-  'iui-expandable-block-caption',
-);
+const ExpandableBlockCaption = (0, index_js_1.polymorphic)('iui-expandable-block-caption');
 ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.EndIcon component
 const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
-  const { children, ...rest } = props;
-  const { status } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
-  const icon = children ?? (status && index_js_1.StatusIconMap[status]());
-  return React.createElement(
-    Icon_js_1.Icon,
-    { fill: status, ref: forwardedRef, ...rest },
-    icon,
-  );
+    const { children, ...rest } = props;
+    const { status } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
+    const icon = children ?? (status && index_js_1.StatusIconMap[status]());
+    return (React.createElement(Icon_js_1.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(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-expandable-content', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(index_js_1.Box, { ...innerProps }, children),
-  );
+    const { className, children, innerProps, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-expandable-content', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { ...innerProps }, children)));
 });
 ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 /**
@@ -212,54 +107,54 @@ ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
  *  </ExpandableBlock.Wrapper>
  */
 exports.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,
 });
 exports.default = exports.ExpandableBlock;

package/cjs/core/Fieldset/Fieldset.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Fieldset = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example
@@ -21,24 +21,13 @@ const classnames_1 = tslib_1.__importDefault(require('classnames'));
  * </Fieldset>
  */
 exports.Fieldset = React.forwardRef((props, ref) => {
-  const { children, className, disabled, legend, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'fieldset',
-      className: (0, classnames_1.default)('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(index_js_1.Box, { as: 'fieldset', className: (0, classnames_1.default)('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));
 });
 exports.default = exports.Fieldset;

package/cjs/core/FileUpload/FileEmptyCard.js

@@ -1,58 +1,32 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileEmptyCard = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const FileUploadCard_js_1 = tslib_1.__importDefault(
-  require('./FileUploadCard.js'),
-);
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const FileUploadCard_js_1 = tslib_1.__importDefault(require("./FileUploadCard.js"));
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Icon component
-const FileEmptyCardIcon = index_js_1.polymorphic.span(
-  'iui-file-card-empty-icon',
-  {
+const FileEmptyCardIcon = index_js_1.polymorphic.span('iui-file-card-empty-icon', {
     children: React.createElement(index_js_1.SvgUpload, null),
-  },
-);
+});
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Text component
-const FileEmptyCardText = index_js_1.polymorphic.span(
-  'iui-file-card-empty-action',
-);
+const FileEmptyCardText = index_js_1.polymorphic.span('iui-file-card-empty-action');
 // ----------------------------------------------------------------------------
 // FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-file-card-empty', className),
-      ref: ref,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
+    const { children, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(exports.FileEmptyCard.Icon, null),
-        React.createElement(
-          exports.FileEmptyCard.Text,
-          null,
-          React.createElement(
-            FileUploadCard_js_1.default.InputLabel,
-            null,
-            'Choose a file',
-          ),
-          React.createElement('div', null, 'to upload.'),
-        ),
-      ),
-  );
+        React.createElement(exports.FileEmptyCard.Text, null,
+            React.createElement(FileUploadCard_js_1.default.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.
@@ -71,7 +45,7 @@ const FileEmptyCardComponent = React.forwardRef((props, ref) => {
  * </FileEmptyCard>
  */
 exports.FileEmptyCard = Object.assign(FileEmptyCardComponent, {
-  Icon: FileEmptyCardIcon,
-  Text: FileEmptyCardText,
+    Icon: FileEmptyCardIcon,
+    Text: FileEmptyCardText,
 });
 exports.default = exports.FileEmptyCard;

package/cjs/core/FileUpload/FileUpload.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUpload = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
@@ -17,87 +17,41 @@ const index_js_1 = require('../utils/index.js');
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 exports.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 = (0, index_js_1.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(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-file-upload',
-        { 'iui-drag': isDragActive },
-        className,
-      ),
-      onDragEnter: onDragEnterHandler,
-      onDragOver: onDragOverHandler,
-      onDragLeave: onDragLeaveHandler,
-      onDrop: onDropHandler,
-      ref: refs,
-      ...rest,
-    },
-    dragContent
-      ? children
-      : React.createElement(
-          index_js_1.Box,
-          {
-            as: 'div',
-            ...contentProps,
-            className: (0, classnames_1.default)(
-              'iui-content',
-              contentProps?.className,
-            ),
-          },
-          children,
-        ),
-    dragContent &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...contentProps,
-          className: (0, classnames_1.default)(
-            '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 = (0, index_js_1.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(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },
+        dragContent ? (children) : (React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-content', contentProps?.className) }, children)),
+        dragContent && (React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-content', contentProps?.className) }, dragContent))));
 });
 exports.default = exports.FileUpload;