@itwin/itwinui-react 2.11.5 → 3.0.0-dev.1

package/cjs/core/Dialog/DialogContent.js

@@ -1,40 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContent = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example
@@ -42,9 +13,5 @@ require("@itwin/itwinui-css/css/dialog.css");
  *   My dialog content
  * </Dialog.Content>
  */
-exports.DialogContent = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-content', className), ref: ref, ...rest }, children));
-});
+exports.DialogContent = index_js_1.polymorphic.div('iui-dialog-content');
 exports.default = exports.DialogContent;

package/cjs/core/Dialog/DialogContext.d.ts

@@ -65,6 +65,10 @@ export declare type DialogContextProps = {
      * Dialog root ref. For internal use.
      */
     dialogRootRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Determines the positioning of Dialog on page.
+     */
+    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 export declare const DialogContext: React.Context<DialogContextProps | undefined>;
 export declare const useDialogContext: () => DialogContextProps;

package/cjs/core/Dialog/DialogMain.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogMainProps = {
     /**
@@ -11,7 +11,7 @@ export declare type DialogMainProps = {
      * Content of the dialog.
      */
     children: React.ReactNode;
-} & Omit<DialogContextProps, 'closeOnExternalClick' | 'dialogRootRef'> & React.ComponentPropsWithRef<'div'>;
+} & Omit<DialogContextProps, 'closeOnExternalClick' | 'dialogRootRef'>;
 /**
  * Dialog component which can wrap any content.
  * @example
@@ -32,5 +32,5 @@ export declare type DialogMainProps = {
  *   </Dialog.ButtonBar>
  * </Dialog.Main>
  */
-export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogMain: PolymorphicForwardRefComponent<"div", DialogMainProps>;
 export default DialogMain;

package/cjs/core/Dialog/DialogMain.js

@@ -34,7 +34,6 @@ exports.DialogMain = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 const DialogContext_js_1 = require("./DialogContext.js");
 const react_transition_group_1 = require("react-transition-group");
 const DialogDragContext_js_1 = require("./DialogDragContext.js");
@@ -61,8 +60,7 @@ const useDragAndDrop_js_1 = __importDefault(require("../utils/hooks/useDragAndDr
  */
 exports.DialogMain = React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
-    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
@@ -138,12 +136,12 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
-    const content = (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog', {
+    const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
+        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
             transform,
             overflow: 'unset',
             ...style,

package/cjs/core/Dialog/DialogTitleBar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { DialogContextProps } from './DialogContext.js';
-export declare type DialogTitleBarProps = {
+declare type DialogTitleBarProps = {
     /**
      * Dialog title bar content. If passed, then `title` prop is ignored.
      */
@@ -10,7 +10,7 @@ export declare type DialogTitleBarProps = {
      * Dialog title.
      */
     titleText?: React.ReactNode;
-} & Pick<DialogContextProps, 'isDismissible' | 'onClose' | 'isDraggable'> & React.ComponentPropsWithRef<'div'>;
+} & Pick<DialogContextProps, 'isDismissible' | 'onClose' | 'isDraggable'>;
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
@@ -28,7 +28,7 @@ export declare type DialogTitleBarProps = {
  *   </IconButton>
  * </Dialog.TitleBar>
  */
-export declare const DialogTitleBar: React.ForwardRefExoticComponent<Pick<DialogTitleBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
-    Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle.js").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogTitleBar: PolymorphicForwardRefComponent<"div", DialogTitleBarProps> & {
+    Title: PolymorphicForwardRefComponent<"div", {}>;
 };
 export default DialogTitleBar;

package/cjs/core/Dialog/DialogTitleBar.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Buttons/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 const DialogContext_js_1 = require("./DialogContext.js");
 const DialogTitleBarTitle_js_1 = require("./DialogTitleBarTitle.js");
 const DialogDragContext_js_1 = require("./DialogDragContext.js");
@@ -60,8 +59,7 @@ exports.DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
     const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
     const { onPointerDown } = (0, DialogDragContext_js_1.useDialogDragContext)();
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-title-bar', className, {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-title-bar', className, {
             'iui-dialog-title-bar-filled': isDraggable,
         }), ref: ref, onPointerDown: (0, index_js_1.mergeEventHandlers)(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
         React.createElement(DialogTitleBarTitle_js_1.DialogTitleBarTitle, null, titleText),

package/cjs/core/Dialog/DialogTitleBarTitle.d.ts

@@ -1,15 +1,7 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
-export declare type DialogTitleBarTitleProps = {
-    /**
-     * Dialog title content.
-     */
-    children: React.ReactNode;
-} & React.ComponentPropsWithRef<'div'>;
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
  * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
  */
-export declare const DialogTitleBarTitle: React.ForwardRefExoticComponent<Pick<DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogTitleBarTitle: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default DialogTitleBarTitle;

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -1,48 +1,15 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogTitleBarTitle = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
  * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
  */
-exports.DialogTitleBarTitle = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-title', className), ref: ref, ...rest }, children));
-});
+exports.DialogTitleBarTitle = index_js_1.polymorphic.div('iui-dialog-title');
 exports.default = exports.DialogTitleBarTitle;

package/cjs/core/Dialog/index.d.ts

@@ -1,8 +1,3 @@
 export { Dialog } from './Dialog.js';
-export type { DialogProps } from './Dialog.js';
-export type { DialogMainProps } from './DialogMain.js';
-export type { DialogTitleBarProps } from './DialogTitleBar.js';
-export type { DialogContentProps } from './DialogContent.js';
-export type { DialogButtonBarProps } from './DialogButtonBar.js';
 declare const _default: "./Dialog";
 export default _default;

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -69,7 +69,6 @@ const DropdownMenu = (props) => {
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
-    (0, index_js_1.useTheme)();
     return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_2.Menu, { className: className, style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
         ref: (0, index_js_1.mergeRefs)(targetRef, props.children.ref),
         onClick: (args) => {

package/cjs/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/expandable-block.css';
-export declare type ExpandableBlockProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type ExpandableBlockProps = {
     /**
      * The main text displayed on the block, regardless of state.
      */
@@ -44,7 +43,12 @@ export declare type ExpandableBlockProps = {
      * @default 'default'
      */
     styleType?: 'default' | 'borderless';
-} & Omit<CommonProps, 'title'>;
+    /**
+     * Disables ExpandableBlock.
+     * @default false
+     */
+    disabled?: boolean;
+};
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example
@@ -54,5 +58,5 @@ export declare type ExpandableBlockProps = {
  * <ExpandableBlock title='Positive status' status='positive'>Content</ExpandableBlock>
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
-export declare const ExpandableBlock: (props: ExpandableBlockProps) => JSX.Element;
+export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockProps>;
 export default ExpandableBlock;

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -34,7 +34,6 @@ exports.ExpandableBlock = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/expandable-block.css");
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example
@@ -44,20 +43,22 @@ require("@itwin/itwinui-css/css/expandable-block.css");
  * <ExpandableBlock title='Positive status' status='positive'>Content</ExpandableBlock>
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
-const ExpandableBlock = (props) => {
-    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', ...rest } = props;
-    (0, index_js_1.useTheme)();
+exports.ExpandableBlock = React.forwardRef((props, ref) => {
+    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
     const icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && index_js_1.StatusIconMap[status]());
     const [expanded, setExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
         setExpanded(isExpanded);
     }, [isExpanded]);
     const handleToggle = () => {
+        if (disabled) {
+            return;
+        }
         setExpanded(!expanded);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
     };
     const onKeyDown = (event) => {
-        if (event.altKey) {
+        if (event.altKey || disabled) {
             return;
         }
         if (event.key === 'Enter' ||
@@ -66,21 +67,20 @@ const ExpandableBlock = (props) => {
             handleToggle();
         }
     };
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-expandable-block', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-expandable-block', {
             'iui-with-caption': !!caption,
             'iui-expanded': expanded,
             'iui-small': size === 'small',
             'iui-borderless': styleType === 'borderless',
-        }, className), style: style, ...rest },
-        React.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
+        }, className), style: style, ref: ref, ...rest },
+        React.createElement(index_js_1.Box, { role: 'button', "aria-expanded": expanded, className: 'iui-header', "aria-disabled": disabled, tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             React.createElement(index_js_1.SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
-            React.createElement("span", { className: 'iui-expandable-block-label' },
-                React.createElement("div", { className: 'iui-title' }, title),
-                caption && React.createElement("div", { className: 'iui-caption' }, caption)),
+            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-expandable-block-label' },
+                React.createElement(index_js_1.Box, { className: 'iui-title' }, title),
+                caption && React.createElement(index_js_1.Box, { className: 'iui-caption' }, caption)),
             icon && React.createElement(index_js_1.Icon, { fill: status }, icon)),
         React.createElement(index_js_1.WithCSSTransition, { in: expanded },
-            React.createElement("div", { className: 'iui-expandable-content' },
+            React.createElement(index_js_1.Box, { className: 'iui-expandable-content' },
                 React.createElement("div", null, children)))));
-};
-exports.ExpandableBlock = ExpandableBlock;
+});
 exports.default = exports.ExpandableBlock;

package/cjs/core/ExpandableBlock/index.d.ts

@@ -1,4 +1,3 @@
 export { ExpandableBlock } from './ExpandableBlock.js';
-export type { ExpandableBlockProps } from './ExpandableBlock.js';
 declare const _default: "./ExpandableBlock";
 export default _default;

package/cjs/core/Fieldset/Fieldset.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/fieldset.css';
-export declare type FieldsetProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type FieldsetProps = {
     /**
      * The caption or title for the fieldset.
      */
     legend?: React.ReactNode;
-} & React.ComponentPropsWithoutRef<'fieldset'>;
+};
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example
@@ -17,5 +17,5 @@ export declare type FieldsetProps = {
  *   </InputGroup>
  * </Fieldset>
  */
-export declare const Fieldset: (props: FieldsetProps) => JSX.Element;
+export declare const Fieldset: PolymorphicForwardRefComponent<"fieldset", FieldsetProps>;
 export default Fieldset;

package/cjs/core/Fieldset/Fieldset.js

@@ -34,7 +34,6 @@ exports.Fieldset = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/fieldset.css");
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example
@@ -46,16 +45,14 @@ require("@itwin/itwinui-css/css/fieldset.css");
  *   </InputGroup>
  * </Fieldset>
  */
-const Fieldset = (props) => {
+exports.Fieldset = React.forwardRef((props, ref) => {
     const { children, className, disabled, legend, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("fieldset", { className: (0, classnames_1.default)('iui-fieldset', className), disabled: disabled, ...rest },
+    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.Fieldset = Fieldset;
+});
 exports.default = exports.Fieldset;

package/cjs/core/Fieldset/index.d.ts

@@ -1,4 +1,3 @@
 export { Fieldset } from './Fieldset.js';
-export type { FieldsetProps } from './Fieldset.js';
 declare const _default: "./Fieldset";
 export default _default;

package/cjs/core/FileUpload/FileEmptyCard.d.ts

@@ -1,7 +1,4 @@
-import * as React from 'react';
-export declare type FileEmptyCardIconProps = React.ComponentPropsWithRef<'span'>;
-export declare type FileEmptyCardTextProps = React.ComponentPropsWithRef<'span'>;
-export declare type FileEmptyCardProps = React.ComponentPropsWithoutRef<'div'>;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
  * @example
@@ -18,12 +15,8 @@ export declare type FileEmptyCardProps = React.ComponentPropsWithoutRef<'div'>;
  *   </FileEmptyCard.Text>
  * </FileEmptyCard>
  */
-export declare const FileEmptyCard: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>> & {
-    Icon: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
-    Text: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FileEmptyCard: PolymorphicForwardRefComponent<"div", {}> & {
+    Icon: PolymorphicForwardRefComponent<"span", {}>;
+    Text: PolymorphicForwardRefComponent<"span", {}>;
 };
 export default FileEmptyCard;

package/cjs/core/FileUpload/FileEmptyCard.js

@@ -35,13 +35,23 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
 const FileUploadCard_js_1 = __importDefault(require("./FileUploadCard.js"));
-const FileEmptyCardIcon = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-file-card-empty-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgUpload, null)));
+// ----------------------------------------------------------------------------
+// FileEmptyCard.Icon component
+const FileEmptyCardIcon = index_js_1.polymorphic.span('iui-file-card-empty-icon', {
+    children: React.createElement(index_js_1.SvgUpload, null),
 });
-const FileEmptyCardText = React.forwardRef((props, ref) => {
+// ----------------------------------------------------------------------------
+// FileEmptyCard.Text component
+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("span", { className: (0, classnames_1.default)('iui-file-card-empty-action', className), ref: ref, ...rest }, children));
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? 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."))))));
 });
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
@@ -59,14 +69,7 @@ const FileEmptyCardText = React.forwardRef((props, ref) => {
  *   </FileEmptyCard.Text>
  * </FileEmptyCard>
  */
-exports.FileEmptyCard = Object.assign(React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? 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."))))));
-}), {
+exports.FileEmptyCard = Object.assign(FileEmptyCardComponent, {
     Icon: FileEmptyCardIcon,
     Text: FileEmptyCardText,
 });

package/cjs/core/FileUpload/FileUpload.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
-export declare type FileUploadProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.
      * Should always be used when drag content differs from `children` being wrapped.
@@ -17,7 +16,7 @@ export declare type FileUploadProps = {
      * Either pass `FileUploadTemplate` (for default state) or a different component to wrap.
      */
     children: React.ReactNode;
-} & CommonProps;
+};
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
@@ -25,26 +24,5 @@ export declare type FileUploadProps = {
  * <FileUpload onFileDropped={console.log}><FileUploadTemplate /></FileUpload>
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
-export declare const FileUpload: React.ForwardRefExoticComponent<{
-    /**
-     * Content shown over `children` when file is being dragged onto the component.
-     * Should always be used when drag content differs from `children` being wrapped.
-     * Can be skipped if wrapping `FileUploadTemplate`.
-     */
-    dragContent?: React.ReactNode;
-    /**
-     * Callback fired when files are dropped onto the component.
-     */
-    onFileDropped: (files: FileList) => void;
-    /**
-     * Component to wrap `FileUpload` around.
-     * Either pass `FileUploadTemplate` (for default state) or a different component to wrap.
-     */
-    children: React.ReactNode;
-} & {
-    title?: string | undefined;
-    id?: string | undefined;
-} & {
-    style?: React.CSSProperties | undefined;
-} & import("../utils/props.js").ClassNameProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FileUpload: PolymorphicForwardRefComponent<"div", FileUploadProps>;
 export default FileUpload;

package/cjs/core/FileUpload/FileUpload.js

@@ -34,7 +34,6 @@ exports.FileUpload = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/file-upload.css");
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
@@ -44,7 +43,6 @@ require("@itwin/itwinui-css/css/file-upload.css");
  */
 exports.FileUpload = React.forwardRef((props, ref) => {
     const { dragContent, children, onFileDropped, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const [isDragActive, setIsDragActive] = React.useState(false);
     const fileUploadRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(fileUploadRef, ref);
@@ -80,8 +78,8 @@ exports.FileUpload = React.forwardRef((props, ref) => {
             onFileDropped((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
         }
     };
-    return (React.createElement("div", { 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("div", { className: 'iui-content' }, children),
-        dragContent && React.createElement("div", { className: 'iui-content' }, dragContent)));
+    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, { className: 'iui-content' }, children),
+        dragContent && React.createElement(index_js_1.Box, { className: 'iui-content' }, dragContent)));
 });
 exports.default = exports.FileUpload;