@itwin/itwinui-react 2.5.0 → 2.6.0

package/cjs/core/Table/TableRowMemoized.d.ts

@@ -25,6 +25,7 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
@@ -45,4 +46,5 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => JSX.Element;

package/cjs/core/Table/TableRowMemoized.js

@@ -20,7 +20,7 @@ const TableCell_1 = require("./TableCell");
  */
 const TableRow = (props) => {
     var _a;
-    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, } = props;
+    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, density, } = props;
     const onIntersect = react_1.default.useCallback(() => {
         var _a, _b;
         (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
@@ -62,7 +62,7 @@ const TableRow = (props) => {
                 (_a = mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.onClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, event);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event, row);
             } }, row.cells.map((cell, index) => {
-            return (react_1.default.createElement(TableCell_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell }));
+            return (react_1.default.createElement(TableCell_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
         })),
         subComponent && (react_1.default.createElement(utils_1.WithCSSTransition, { in: row.isExpanded },
             react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
@@ -104,5 +104,6 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, (prevProp, nex
         prevProp.state.sticky.isScrolledToLeft ===
             nextProp.state.sticky.isScrolledToLeft &&
         prevProp.state.sticky.isScrolledToRight ===
-            nextProp.state.sticky.isScrolledToRight;
+            nextProp.state.sticky.isScrolledToRight &&
+        prevProp.density === nextProp.density;
 });

package/cjs/core/Table/columns/selectionColumn.d.ts

@@ -16,6 +16,7 @@ export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {
     /** Function that returns whether row checkbox should be disabled. */
     isDisabled?: ((rowData: T) => boolean) | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => {
     id: string;
     disableResizing: boolean;

package/cjs/core/Table/columns/selectionColumn.js

@@ -25,15 +25,16 @@ exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
  * ], [isCheckboxDisabled]);
  */
 const SelectionColumn = (props = {}) => {
-    const { isDisabled } = props;
+    const { isDisabled, density } = props;
+    const densityWidth = density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
     return {
         id: exports.SELECTION_CELL_ID,
         disableResizing: true,
         disableGroupBy: true,
         disableReordering: true,
-        minWidth: 48,
-        width: 48,
-        maxWidth: 48,
+        minWidth: densityWidth,
+        width: densityWidth,
+        maxWidth: densityWidth,
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {

package/cjs/core/Table/hooks/useSelectionCell.d.ts

@@ -1,2 +1,2 @@
 import { Hooks } from 'react-table';
-export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
+export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined, density?: 'default' | 'condensed' | 'extra-condensed') => (hooks: Hooks<T>) => void;

package/cjs/core/Table/hooks/useSelectionCell.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectionCell = void 0;
 const columns_1 = require("../columns");
-const useSelectionCell = (isSelectable, selectionMode, isRowDisabled) => (hooks) => {
+const useSelectionCell = (isSelectable, selectionMode, isRowDisabled, density = 'default') => (hooks) => {
     if (!isSelectable) {
         return;
     }
     hooks.allColumns.push((columns) => selectionMode === 'single' ||
         columns.find((c) => c.id === columns_1.SELECTION_CELL_ID)
         ? columns
-        : [(0, columns_1.SelectionColumn)({ isDisabled: isRowDisabled }), ...columns]);
+        : [
+            (0, columns_1.SelectionColumn)({ isDisabled: isRowDisabled, density: density }),
+            ...columns,
+        ]);
 };
 exports.useSelectionCell = useSelectionCell;

package/cjs/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -19,7 +19,12 @@ export declare type ToggleSwitchProps = {
      * Icon inside the toggle switch. Shown only when toggle is checked.
      */
     icon?: JSX.Element;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+    /**
+     * Size of the toggle switch.
+     *  @default 'default'
+     */
+    size?: 'default' | 'small';
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
 /**
  * A switch for turning on and off.
  * @example
@@ -57,5 +62,10 @@ export declare const ToggleSwitch: React.ForwardRefExoticComponent<{
      * Icon inside the toggle switch. Shown only when toggle is checked.
      */
     icon?: JSX.Element | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+    /**
+     * Size of the toggle switch.
+     *  @default 'default'
+     */
+    size?: "small" | "default" | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
 export default ToggleSwitch;

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -31,7 +31,7 @@ require("@itwin/itwinui-css/css/toggle-switch.css");
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 exports.ToggleSwitch = react_1.default.forwardRef((props, ref) => {
-    const { disabled = false, labelPosition = 'right', icon, label, setFocus = false, className, style, ...rest } = props;
+    const { disabled = false, labelPosition = 'right', icon, label, setFocus = false, className, style, size = 'default', ...rest } = props;
     (0, utils_1.useTheme)();
     const inputElementRef = react_1.default.useRef(null);
     const refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
@@ -45,7 +45,7 @@ exports.ToggleSwitch = react_1.default.forwardRef((props, ref) => {
             'iui-disabled': disabled,
             'iui-label-on-right': label && labelPosition === 'right',
             'iui-label-on-left': label && labelPosition === 'left',
-        }, className), style: style },
+        }, className), "data-iui-size": size, style: style },
         react_1.default.createElement("input", { className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
         icon &&
             react_1.default.cloneElement(icon, {

package/cjs/core/index.d.ts

@@ -34,8 +34,8 @@ export { ExpandableBlock } from './ExpandableBlock';
 export type { ExpandableBlockProps } from './ExpandableBlock';
 export { Fieldset } from './Fieldset';
 export type { FieldsetProps } from './Fieldset';
-export { FileUpload, FileUploadTemplate } from './FileUpload';
-export type { FileUploadProps, FileUploadTemplateProps } from './FileUpload';
+export { FileUpload, FileUploadTemplate, FileUploadCard, FileEmptyCard, } from './FileUpload';
+export type { FileUploadProps, FileUploadTemplateProps, FileUploadCardProps, FileUploadCardIconProps, FileUploadCardInfoProps, FileUploadCardTitleProps, FileUploadCardDescriptionProps, FileUploadCardActionProps, FileUploadCardInputLabelProps, FileUploadCardInputProps, FileEmptyCardProps, FileEmptyCardIconProps, FileEmptyCardTextProps, } from './FileUpload';
 export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';

package/cjs/core/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
-exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = void 0;
-exports.Flex = exports.Icon = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = void 0;
+exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
+exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = void 0;
+exports.Flex = exports.Icon = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -61,6 +61,8 @@ Object.defineProperty(exports, "Fieldset", { enumerable: true, get: function ()
 var FileUpload_1 = require("./FileUpload");
 Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return FileUpload_1.FileUpload; } });
 Object.defineProperty(exports, "FileUploadTemplate", { enumerable: true, get: function () { return FileUpload_1.FileUploadTemplate; } });
+Object.defineProperty(exports, "FileUploadCard", { enumerable: true, get: function () { return FileUpload_1.FileUploadCard; } });
+Object.defineProperty(exports, "FileEmptyCard", { enumerable: true, get: function () { return FileUpload_1.FileEmptyCard; } });
 var Footer_1 = require("./Footer");
 Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return Footer_1.Footer; } });
 Object.defineProperty(exports, "defaultFooterElements", { enumerable: true, get: function () { return Footer_1.defaultFooterElements; } });

package/cjs/core/utils/hooks/index.d.ts

@@ -10,3 +10,4 @@ export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
 export * from './useIsThemeAlreadySet';
+export * from './useId';

package/cjs/core/utils/hooks/index.js

@@ -30,3 +30,4 @@ __exportStar(require("./useSafeContext"), exports);
 __exportStar(require("./useLatestRef"), exports);
 __exportStar(require("./useIsomorphicLayoutEffect"), exports);
 __exportStar(require("./useIsThemeAlreadySet"), exports);
+__exportStar(require("./useId"), exports);

package/cjs/core/utils/hooks/useId.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Return custom useId function as a fallback for React.useId
+ */
+export declare const useId: typeof React.useId;

package/cjs/core/utils/hooks/useId.js

@@ -0,0 +1,20 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useId = void 0;
+const react_1 = __importDefault(require("react"));
+const numbers_1 = require("../functions/numbers");
+/**
+ * Return custom useId function as a fallback for React.useId
+ */
+exports.useId = (_a = react_1.default.useId) !== null && _a !== void 0 ? _a : (() => {
+    const [id] = react_1.default.useState(() => `iui-${(0, numbers_1.getRandomValue)(10)}`);
+    return id;
+});

package/cjs/core/utils/icons/SvgDocument.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgDocument: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/cjs/core/utils/icons/SvgDocument.js

@@ -0,0 +1,36 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgDocument = 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 SvgDocument = (props) => {
+    return (React.createElement("svg", { viewBox: '0 0 16 16', ...props },
+        React.createElement("path", { d: 'M10 0H2v16h12V4h-4zm1 0v3h3z' })));
+};
+exports.SvgDocument = SvgDocument;

package/cjs/core/utils/icons/index.d.ts

@@ -27,3 +27,4 @@ export * from './SvgNew';
 export * from './SvgFilter';
 export * from './SvgFilterHollow';
 export * from './SvgCalendar';
+export * from './SvgDocument';

package/cjs/core/utils/icons/index.js

@@ -47,3 +47,4 @@ __exportStar(require("./SvgNew"), exports);
 __exportStar(require("./SvgFilter"), exports);
 __exportStar(require("./SvgFilterHollow"), exports);
 __exportStar(require("./SvgCalendar"), exports);
+__exportStar(require("./SvgDocument"), exports);

package/esm/core/ComboBox/ComboBox.js

@@ -77,7 +77,10 @@ export const ComboBox = (props) => {
         if (isMultipleEnabled(valueProp, multiple)) {
             const indexArray = [];
             valueProp === null || valueProp === void 0 ? void 0 : valueProp.forEach((value) => {
-                indexArray.push(options.findIndex((option) => option.value === value));
+                const indexToAdd = options.findIndex((option) => option.value === value);
+                if (indexToAdd > -1) {
+                    indexArray.push(indexToAdd);
+                }
             });
             return indexArray;
         }

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

@@ -0,0 +1,29 @@
+import React from 'react';
+export declare type FileEmptyCardIconProps = React.ComponentPropsWithRef<'span'>;
+export declare type FileEmptyCardTextProps = React.ComponentPropsWithRef<'span'>;
+export declare type FileEmptyCardProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
+ * @example
+ * <FileEmptyCard />
+ * <FileEmptyCard>
+ *   <FileEmptyCard.Icon>
+ *     <SvgSmileySadVery />
+ *   </FileEmptyCard.Icon>
+ *   <FileEmptyCard.Text>
+ *     <FileUploadCard.InputLabel>
+ *       Custom Label Text
+ *     </FileUploadCard.InputLabel>
+ *     <div>Custom Description Text</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 default FileEmptyCard;

package/esm/core/FileUpload/FileEmptyCard.js

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { SvgUpload } from '../utils';
+import cx from 'classnames';
+import FileUploadCard from './FileUploadCard';
+const FileEmptyCardIcon = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement("span", { className: cx('iui-file-card-empty-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgUpload, null)));
+});
+const FileEmptyCardText = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement("span", { className: cx('iui-file-card-empty-action', className), ref: ref, ...rest }, children));
+});
+/**
+ * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
+ * @example
+ * <FileEmptyCard />
+ * <FileEmptyCard>
+ *   <FileEmptyCard.Icon>
+ *     <SvgSmileySadVery />
+ *   </FileEmptyCard.Icon>
+ *   <FileEmptyCard.Text>
+ *     <FileUploadCard.InputLabel>
+ *       Custom Label Text
+ *     </FileUploadCard.InputLabel>
+ *     <div>Custom Description Text</div>
+ *   </FileEmptyCard.Text>
+ * </FileEmptyCard>
+ */
+export const FileEmptyCard = Object.assign(React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement("div", { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? 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."))))));
+}), {
+    Icon: FileEmptyCardIcon,
+    Text: FileEmptyCardText,
+});
+export default FileEmptyCard;

package/esm/core/FileUpload/FileUploadCard.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+export declare type FileUploadCardIconProps = React.ComponentPropsWithRef<'span'>;
+export declare type FileUploadCardInfoProps = React.ComponentPropsWithRef<'span'>;
+export declare type FileUploadCardTitleProps = React.ComponentPropsWithRef<'span'>;
+export declare type FileUploadCardDescriptionProps = React.ComponentPropsWithRef<'span'>;
+export declare type FileUploadCardActionProps = React.ComponentPropsWithRef<'div'>;
+export declare type FileUploadCardInputLabelProps = React.ComponentPropsWithRef<'label'>;
+export declare type FileUploadCardInputProps = React.ComponentPropsWithRef<'input'>;
+export declare type FileUploadCardProps = {
+    /**
+     * Files to pass (only needed when passing a custom action)
+     */
+    files?: File[];
+    /**
+     * Callback fired when files has changed (only needed passing custom action)
+     */
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Node that is shown when there is no file uploaded
+     * Either pass `FileEmptyCard` (for default state) or a different component to show
+     * @default <FileEmptyCard />
+     */
+    emptyCard?: React.ReactNode;
+    /**
+     * Input node
+     * @default <FileUploadCard.Input />
+     */
+    input?: React.ReactNode;
+} & React.ComponentPropsWithoutRef<'div'>;
+/**
+ * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
+ * @example
+ * <FileUploadCard />
+ * <FileUploadCard files={files} onFilesChange={(files) => setFiles(files)}>
+ *   <FileUploadCard.Icon>
+ *     <SvgSmileyHappyVery />
+ *   </FileUploadCard.Icon>
+ *   <FileUploadCard.Info>
+ *     <FileUploadCard.Title>Custom File Name</FileUploadCard.Title>
+ *     <FileUploadCard.Description>
+ *       Custom File Description
+ *     </FileUploadCard.Description>
+ *   </FileUploadCard.Info>
+ *   <FileUploadCard.Action>
+ *     <Button
+ *       onClick={() => {
+ *         setFiles([]);
+ *       }}
+ *     />
+ *     <FileUploadCard.Input name={fileInputId} ref={inputRef} />
+ *   </FileUploadCard.Action>
+ * </FileUploadCard>
+ */
+export declare const FileUploadCard: React.ForwardRefExoticComponent<{
+    /**
+     * Files to pass (only needed when passing a custom action)
+     */
+    files?: File[] | undefined;
+    /**
+     * Callback fired when files has changed (only needed passing custom action)
+     */
+    onFilesChange?: ((files: File[]) => void) | undefined;
+    /**
+     * Node that is shown when there is no file uploaded
+     * Either pass `FileEmptyCard` (for default state) or a different component to show
+     * @default <FileEmptyCard />
+     */
+    emptyCard?: React.ReactNode;
+    /**
+     * Input node
+     * @default <FileUploadCard.Input />
+     */
+    input?: React.ReactNode;
+} & 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>>;
+    Info: 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>>;
+    Title: 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>>;
+    Description: 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>>;
+    Action: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+    InputLabel: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "key" | keyof React.LabelHTMLAttributes<HTMLLabelElement>> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | React.RefObject<HTMLLabelElement> | null | undefined;
+    }, "key" | keyof React.LabelHTMLAttributes<HTMLLabelElement>> & React.RefAttributes<HTMLLabelElement>>;
+    Input: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+        ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
+    }, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+};
+export default FileUploadCard;
+export declare const FileUploadCardContext: React.Context<{
+    /**
+     * Files to pass
+     */
+    files: File[];
+    /**
+     * Callback fired when files have changed
+     */
+    onFilesChange?: ((files: File[]) => void) | undefined;
+    /**
+     * Sets the state of the files within FileUploadCard
+     */
+    setInternalFiles: (files: File[]) => void;
+    /**
+     * Id to pass to input
+     */
+    inputId?: string | undefined;
+    setInputId: (inputId: string) => void;
+} | undefined>;

package/esm/core/FileUpload/FileUploadCard.js

@@ -0,0 +1,138 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { getWindow, SvgDocument, useMergedRefs, useSafeContext, } from '../utils';
+import cx from 'classnames';
+import { FileEmptyCard } from './FileEmptyCard';
+import { useId } from '../utils';
+const toBytes = (bytes) => {
+    const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
+    let i = 0;
+    while (bytes >= 1024 && ++i) {
+        bytes = bytes / 1024;
+    }
+    return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
+};
+const toDate = (dateNumber) => {
+    const date = new Date(dateNumber);
+    return date.toDateString() + ' ' + date.toLocaleTimeString();
+};
+const FileUploadCardIcon = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement("span", { className: cx('iui-file-card-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgDocument, null)));
+});
+const FileUploadCardInfo = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement("span", { className: cx('iui-file-card-text', className), ref: ref, ...rest }, children));
+});
+const FileUploadCardTitle = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { files } = useSafeContext(FileUploadCardContext);
+    const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
+    return (React.createElement("span", { className: cx('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
+});
+const FileUploadCardDescription = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { files } = useSafeContext(FileUploadCardContext);
+    let description = files.length > 1
+        ? files[0].name + ', ' + files[1].name
+        : toBytes(files[0].size) + ' ' + toDate(files[0].lastModified);
+    if (files.length > 2) {
+        description += ', and ' + (files.length - 2) + ' others';
+    }
+    return (React.createElement("span", { className: cx('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
+});
+const FileUploadCardAction = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement("div", { className: cx('iui-file-card-action', className), ref: ref, ...rest }, children));
+});
+const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { inputId } = useSafeContext(FileUploadCardContext);
+    return (React.createElement("label", { className: cx('iui-anchor', className), ref: ref, htmlFor: inputId, ...rest }, children));
+});
+const FileUploadCardInput = React.forwardRef((props, ref) => {
+    const { children, className, onChange, id, ...rest } = props;
+    const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
+    const setNativeFilesRef = React.useCallback((node) => {
+        var _a;
+        if (!node || !((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.DataTransfer)) {
+            return;
+        }
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.clear();
+        Array.from(files).forEach((file) => dataTransfer.items.add(file));
+        node.files = dataTransfer.files;
+    }, [files]);
+    const refs = useMergedRefs(ref, setNativeFilesRef);
+    if (id && id !== inputId) {
+        setInputId(id);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { className: cx('iui-visually-hidden', className), type: 'file', onChange: (e) => {
+                onChange === null || onChange === void 0 ? void 0 : onChange(e);
+                if (!e.isDefaultPrevented()) {
+                    const _files = Array.from(e.currentTarget.files || []);
+                    onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
+                    setInternalFiles(_files);
+                }
+            }, ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
+        children));
+});
+/**
+ * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
+ * @example
+ * <FileUploadCard />
+ * <FileUploadCard files={files} onFilesChange={(files) => setFiles(files)}>
+ *   <FileUploadCard.Icon>
+ *     <SvgSmileyHappyVery />
+ *   </FileUploadCard.Icon>
+ *   <FileUploadCard.Info>
+ *     <FileUploadCard.Title>Custom File Name</FileUploadCard.Title>
+ *     <FileUploadCard.Description>
+ *       Custom File Description
+ *     </FileUploadCard.Description>
+ *   </FileUploadCard.Info>
+ *   <FileUploadCard.Action>
+ *     <Button
+ *       onClick={() => {
+ *         setFiles([]);
+ *       }}
+ *     />
+ *     <FileUploadCard.Input name={fileInputId} ref={inputRef} />
+ *   </FileUploadCard.Action>
+ * </FileUploadCard>
+ */
+export const FileUploadCard = Object.assign(React.forwardRef((props, ref) => {
+    var _a;
+    const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
+    const [internalFiles, setInternalFiles] = React.useState();
+    const [inputId, setInputId] = React.useState(useId());
+    const files = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
+    return (React.createElement(FileUploadCardContext.Provider, { value: {
+            files,
+            onFilesChange,
+            setInternalFiles,
+            inputId,
+            setInputId,
+        } },
+        (files === null || files === void 0 ? void 0 : files.length) ? (React.createElement("div", { className: cx('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+            React.createElement(FileUploadCard.Icon, null),
+            React.createElement(FileUploadCard.Info, null,
+                React.createElement(FileUploadCard.Title, null),
+                React.createElement(FileUploadCard.Description, null)),
+            React.createElement(FileUploadCard.Action, null,
+                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard), input !== null && input !== void 0 ? input : React.createElement(FileUploadCard.Input, null)));
+}), {
+    Icon: FileUploadCardIcon,
+    Info: FileUploadCardInfo,
+    Title: FileUploadCardTitle,
+    Description: FileUploadCardDescription,
+    Action: FileUploadCardAction,
+    InputLabel: FileUploadCardInputLabel,
+    Input: FileUploadCardInput,
+});
+export default FileUploadCard;
+export const FileUploadCardContext = React.createContext(undefined);

package/esm/core/FileUpload/FileUploadTemplate.d.ts

@@ -30,7 +30,7 @@ export declare type FileUploadTemplateProps = {
      * Optional children appended to the template.
      */
     children?: React.ReactNode;
-};
+} & React.ComponentProps<'div'>;
 /**
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).