@itwin/itwinui-react 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 2.6.0
+
+### Minor Changes
+
+- 85af52c6: Add small size toggle switch option using `size` prop as follows: `<ToggleSwitch size='small' />`
+- 1b541699: Added a new FileUploadCard component which serves as a default UI for when a single file is uploaded. This can also be used as a child of FileUpload
+
+  ```jsx
+  <FileUploadCard />
+  ```
+
+  ```jsx
+  const [files, setFiles] = React.useState<File[]>([]);
+
+  <FileUpload
+    onFileDropped={(files) => {
+      setFiles(files);
+    }}
+  >
+    <FileUploadCard files={files} onFilesChange={(files) => setFiles(files)} />
+  </FileUpload>
+  ```
+
+### Patch Changes
+
+- d2ffe2f2: `ComboBox` will not crash when user provided value is not in Options list.
+- 56f9d524: HeaderLogo now supports `as` prop to allow rendering as a link. It will default to a `button` if `onClick` is passed, and `div` if not.
+- Updated dependencies
+  - @itwin/itwinui-css@1.7.0
+
+## 2.5.1
+
+### Patch Changes
+
+- 9ad85ff2: The different density settings for table will now also affect horizontal spacing.
+
 ## 2.5.0
 
 ### Minor Changes

package/cjs/core/ComboBox/ComboBox.js

@@ -83,7 +83,10 @@ 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/cjs/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/cjs/core/FileUpload/FileEmptyCard.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileEmptyCard = 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_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const FileUploadCard_1 = __importDefault(require("./FileUploadCard"));
+const FileEmptyCardIcon = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-empty-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : react_1.default.createElement(utils_1.SvgUpload, null)));
+});
+const FileEmptyCardText = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('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>
+ */
+exports.FileEmptyCard = Object.assign(react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(exports.FileEmptyCard.Icon, null),
+        react_1.default.createElement(exports.FileEmptyCard.Text, null,
+            react_1.default.createElement(FileUploadCard_1.default.InputLabel, null, "Choose a file"),
+            react_1.default.createElement("div", null, "to upload."))))));
+}), {
+    Icon: FileEmptyCardIcon,
+    Text: FileEmptyCardText,
+});
+exports.default = exports.FileEmptyCard;

package/cjs/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/cjs/core/FileUpload/FileUploadCard.js

@@ -0,0 +1,144 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadCardContext = exports.FileUploadCard = 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_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const FileEmptyCard_1 = require("./FileEmptyCard");
+const utils_2 = require("../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_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : react_1.default.createElement(utils_1.SvgDocument, null)));
+});
+const FileUploadCardInfo = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-text', className), ref: ref, ...rest }, children));
+});
+const FileUploadCardTitle = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { files } = (0, utils_1.useSafeContext)(exports.FileUploadCardContext);
+    const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
+});
+const FileUploadCardDescription = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { files } = (0, utils_1.useSafeContext)(exports.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_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
+});
+const FileUploadCardAction = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-file-card-action', className), ref: ref, ...rest }, children));
+});
+const FileUploadCardInputLabel = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { inputId } = (0, utils_1.useSafeContext)(exports.FileUploadCardContext);
+    return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-anchor', className), ref: ref, htmlFor: inputId, ...rest }, children));
+});
+const FileUploadCardInput = react_1.default.forwardRef((props, ref) => {
+    const { children, className, onChange, id, ...rest } = props;
+    const { files, onFilesChange, setInternalFiles, inputId, setInputId } = (0, utils_1.useSafeContext)(exports.FileUploadCardContext);
+    const setNativeFilesRef = react_1.default.useCallback((node) => {
+        var _a;
+        if (!node || !((_a = (0, utils_1.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 = (0, utils_1.useMergedRefs)(ref, setNativeFilesRef);
+    if (id && id !== inputId) {
+        setInputId(id);
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { className: (0, classnames_1.default)('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>
+ */
+exports.FileUploadCard = Object.assign(react_1.default.forwardRef((props, ref) => {
+    var _a;
+    const { className, children, files: filesProp, onFilesChange, emptyCard = react_1.default.createElement(FileEmptyCard_1.FileEmptyCard, null), input, ...rest } = props;
+    const [internalFiles, setInternalFiles] = react_1.default.useState();
+    const [inputId, setInputId] = react_1.default.useState((0, utils_2.useId)());
+    const files = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
+    return (react_1.default.createElement(exports.FileUploadCardContext.Provider, { value: {
+            files,
+            onFilesChange,
+            setInternalFiles,
+            inputId,
+            setInputId,
+        } },
+        (files === null || files === void 0 ? void 0 : files.length) ? (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(exports.FileUploadCard.Icon, null),
+            react_1.default.createElement(exports.FileUploadCard.Info, null,
+                react_1.default.createElement(exports.FileUploadCard.Title, null),
+                react_1.default.createElement(exports.FileUploadCard.Description, null)),
+            react_1.default.createElement(exports.FileUploadCard.Action, null,
+                react_1.default.createElement(exports.FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard), input !== null && input !== void 0 ? input : react_1.default.createElement(exports.FileUploadCard.Input, null)));
+}), {
+    Icon: FileUploadCardIcon,
+    Info: FileUploadCardInfo,
+    Title: FileUploadCardTitle,
+    Description: FileUploadCardDescription,
+    Action: FileUploadCardAction,
+    InputLabel: FileUploadCardInputLabel,
+    Input: FileUploadCardInput,
+});
+exports.default = exports.FileUploadCard;
+exports.FileUploadCardContext = react_1.default.createContext(undefined);

package/cjs/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).

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -9,6 +9,7 @@ exports.FileUploadTemplate = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/file-upload.css");
 /**
@@ -18,10 +19,10 @@ require("@itwin/itwinui-css/css/file-upload.css");
  * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
  */
 const FileUploadTemplate = (props) => {
-    const { onChange, acceptMultiple = true, acceptType, label = 'Choose a file', subtitle = 'or drag & drop it here.', children, } = props;
+    const { onChange, acceptMultiple = true, acceptType, label = 'Choose a file', subtitle = 'or drag & drop it here.', children, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(utils_1.SvgUpload, { className: 'iui-icon', "aria-hidden": true }),
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-file-upload-template', className), ...rest },
+        react_1.default.createElement(utils_1.SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
         react_1.default.createElement("div", { className: 'iui-template-text' },
             react_1.default.createElement("label", { className: 'iui-anchor' },
                 react_1.default.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),

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

@@ -4,3 +4,7 @@ declare const _default: "./FileUpload";
 export default _default;
 export { FileUploadTemplate } from './FileUploadTemplate';
 export type { FileUploadTemplateProps } from './FileUploadTemplate';
+export { FileUploadCard } from './FileUploadCard';
+export type { FileUploadCardProps, FileUploadCardIconProps, FileUploadCardInfoProps, FileUploadCardTitleProps, FileUploadCardDescriptionProps, FileUploadCardActionProps, FileUploadCardInputLabelProps, FileUploadCardInputProps, } from './FileUploadCard';
+export { FileEmptyCard } from './FileEmptyCard';
+export type { FileEmptyCardProps, FileEmptyCardIconProps, FileEmptyCardTextProps, } from './FileEmptyCard';

package/cjs/core/FileUpload/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUploadTemplate = exports.FileUpload = void 0;
+exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -10,3 +10,7 @@ Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function (
 exports.default = './FileUpload';
 var FileUploadTemplate_1 = require("./FileUploadTemplate");
 Object.defineProperty(exports, "FileUploadTemplate", { enumerable: true, get: function () { return FileUploadTemplate_1.FileUploadTemplate; } });
+var FileUploadCard_1 = require("./FileUploadCard");
+Object.defineProperty(exports, "FileUploadCard", { enumerable: true, get: function () { return FileUploadCard_1.FileUploadCard; } });
+var FileEmptyCard_1 = require("./FileEmptyCard");
+Object.defineProperty(exports, "FileEmptyCard", { enumerable: true, get: function () { return FileEmptyCard_1.FileEmptyCard; } });

package/cjs/core/Header/HeaderLogo.d.ts

@@ -1,21 +1,18 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+/// <reference types="react" />
+import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils';
 import '@itwin/itwinui-css/css/header.css';
-export declare type HeaderLogoProps = {
+declare type HeaderLogoOwnProps = {
     /**
      * Logo shown before the main content.
      */
     logo: JSX.Element;
     /**
      * Click event handler.
-     * Will update the Logo to have mouse and keyboard interaction if provided.
+     * If passed, the component will be rendered as a `<button>` rather than `<div>`.
      */
-    onClick?: () => void;
-    /**
-     * Expects the app name, is put on the right of the logo.
-     */
-    children?: React.ReactNode;
-} & CommonProps;
+    onClick?: (e: unknown) => void;
+};
+export declare type HeaderLogoProps = PolymorphicComponentProps<'div', HeaderLogoOwnProps>;
 /**
  * Header Title section
  * @example
@@ -24,5 +21,5 @@ export declare type HeaderLogoProps = {
  * <HeaderLogo logo={<img src='image.png' />} />
  * <HeaderLogo logo={<img src='data:image/png;base64,...' />}>Downloaded Image</HeaderLogo>
  */
-export declare const HeaderLogo: (props: HeaderLogoProps) => JSX.Element;
+export declare const HeaderLogo: PolymorphicForwardRefComponent<"div", HeaderLogoOwnProps>;
 export default HeaderLogo;

package/cjs/core/Header/HeaderLogo.js

@@ -20,23 +20,18 @@ require("@itwin/itwinui-css/css/header.css");
  * <HeaderLogo logo={<img src='image.png' />} />
  * <HeaderLogo logo={<img src='data:image/png;base64,...' />}>Downloaded Image</HeaderLogo>
  */
-const HeaderLogo = (props) => {
-    const { className, children, logo, onClick, ...rest } = props;
-    const keyDownHandler = (e) => {
-        if (onClick &&
-            (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar')) {
-            e.preventDefault();
-            onClick();
-        }
-    };
+exports.HeaderLogo = react_1.default.forwardRef((props, ref) => {
+    const { className, children, logo, onClick, as: Element = !!onClick ? 'button' : 'div', ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-header-brand', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick, ...rest },
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-header-brand', className), onClick: onClick, 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TS complains here but it's ok; it is an implementation detail
+        // @ts-ignore
+        ref: ref, ...rest },
         react_1.default.isValidElement(logo)
             ? react_1.default.cloneElement(logo, {
                 className: (0, classnames_1.default)('iui-header-brand-icon', logo.props.className),
             })
             : undefined,
         children && react_1.default.createElement("span", { className: 'iui-header-brand-label' }, children)));
-};
-exports.HeaderLogo = HeaderLogo;
+});
 exports.default = exports.HeaderLogo;

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

@@ -5,6 +5,7 @@ export declare type SubRowExpanderProps<T extends Record<string, unknown>> = {
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
     isDisabled: boolean;
     cellProps: CellProps<T>;
+    density?: 'default' | 'condensed' | 'extra-condensed';
 };
 export declare const SubRowExpander: <T extends Record<string, unknown>>(props: SubRowExpanderProps<T>) => JSX.Element;
 export default SubRowExpander;

package/cjs/core/Table/SubRowExpander.js

@@ -12,8 +12,10 @@ const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
 const Buttons_1 = require("../Buttons");
 const SubRowExpander = (props) => {
-    const { cell, isDisabled, cellProps, expanderCell } = props;
-    return (react_1.default.createElement(react_1.default.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (react_1.default.createElement(Buttons_1.IconButton, { style: { marginRight: 8 }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
+    const { cell, isDisabled, cellProps, expanderCell, density } = props;
+    return (react_1.default.createElement(react_1.default.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (react_1.default.createElement(Buttons_1.IconButton, { style: {
+            marginRight: density === 'default' || density === undefined ? 8 : 4,
+        }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
             e.stopPropagation();
             cell.row.toggleRowExpanded();
         }, disabled: isDisabled }, react_1.default.createElement(utils_1.SvgChevronRight, { style: {

package/cjs/core/Table/Table.js

@@ -204,7 +204,7 @@ const Table = (props) => {
         getSubRows,
         initialState: { pageSize, ...props.initialState },
         columnResizeMode,
-    }, react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
+    }, react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled, density), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
     const { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
     let headerGroups = _headerGroups;
     if (columns.length === 1 && 'columns' in columns[0]) {
@@ -342,7 +342,7 @@ const Table = (props) => {
     const getPreparedRow = react_1.default.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
-        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row) }));
+        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
     }, [
         page,
         prepareRow,
@@ -357,6 +357,7 @@ const Table = (props) => {
         expanderCell,
         enableVirtualization,
         tableRowRef,
+        density,
     ]);
     const virtualizedItemRenderer = react_1.default.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {

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

@@ -7,6 +7,7 @@ export declare type TableCellProps<T extends Record<string, unknown>> = {
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
+    density?: 'default' | 'condensed' | 'extra-condensed';
 };
 export declare const TableCell: <T extends Record<string, unknown>>(props: TableCellProps<T>) => JSX.Element;
 export default TableCell;

package/cjs/core/Table/TableCell.js

@@ -15,7 +15,7 @@ const SubRowExpander_1 = require("./SubRowExpander");
 const columns_1 = require("./columns");
 const cells_1 = require("./cells");
 const TableCell = (props) => {
-    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, } = props;
+    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
         cell.row.cells.findIndex((c) => c.column.id !== columns_1.SELECTION_CELL_ID);
     const getSubRowStyle = () => {
@@ -23,9 +23,20 @@ const TableCell = (props) => {
             return undefined;
         }
         // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
-        // 16 = initial_cell_padding, 35 = 27 + 8 = expander_width + margin
+        const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
+        let cellPadding = 16;
+        let expanderMargin = 8;
+        if (density === 'condensed') {
+            cellPadding = 12;
+            expanderMargin = 4;
+        }
+        else if (density === 'extra-condensed') {
+            cellPadding = 8;
+            expanderMargin = 4;
+        }
+        const multiplier = 26 + expanderMargin; // 26 = expander width
         return {
-            paddingLeft: 16 + (cell.row.depth + (cell.row.canExpand ? 0 : 1)) * 35,
+            paddingLeft: cellPadding + dynamicMargin * multiplier,
         };
     };
     const cellElementProps = cell.getCellProps({
@@ -43,7 +54,7 @@ const TableCell = (props) => {
         ...{ cell, row: cell.row, value: cell.value, column: cell.column },
     };
     const cellContent = (react_1.default.createElement(react_1.default.Fragment, null,
-        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (react_1.default.createElement(SubRowExpander_1.SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell })),
+        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (react_1.default.createElement(SubRowExpander_1.SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density })),
         cell.render('Cell')));
     const cellRendererProps = {
         cellElementProps,