@itwin/itwinui-react 2.5.1 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # 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

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/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;