@itwin/itwinui-react 2.5.1 → 2.6.1

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/hooks/useTheme.js

@@ -27,6 +27,11 @@ const useTheme = (theme, themeOptions) => {
         if (!ownerDocument || isThemeAlreadySet.current) {
             return;
         }
+        // do nothing if using v1 for the main page (incremental migration)
+        if (ownerDocument.documentElement.className.includes('iui-theme-') ||
+            ownerDocument.body.classList.contains('iui-body')) {
+            return;
+        }
         ownerDocument.body.classList.toggle('iui-root', true);
         switch (theme) {
             case 'light':

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).

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
+import cx from 'classnames';
 import { useTheme, SvgUpload } from '../utils';
 import '@itwin/itwinui-css/css/file-upload.css';
 /**
@@ -12,10 +13,10 @@ import '@itwin/itwinui-css/css/file-upload.css';
  * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
  */
 export 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;
     useTheme();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SvgUpload, { className: 'iui-icon', "aria-hidden": true }),
+    return (React.createElement("div", { className: cx('iui-file-upload-template', className), ...rest },
+        React.createElement(SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
         React.createElement("div", { className: 'iui-template-text' },
             React.createElement("label", { className: 'iui-anchor' },
                 React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),

package/esm/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/esm/core/FileUpload/index.js

@@ -5,3 +5,5 @@
 export { FileUpload } from './FileUpload';
 export default './FileUpload';
 export { FileUploadTemplate } from './FileUploadTemplate';
+export { FileUploadCard } from './FileUploadCard';
+export { FileEmptyCard } from './FileEmptyCard';

package/esm/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/esm/core/Header/HeaderLogo.js

@@ -14,22 +14,18 @@ import '@itwin/itwinui-css/css/header.css';
  * <HeaderLogo logo={<img src='image.png' />} />
  * <HeaderLogo logo={<img src='data:image/png;base64,...' />}>Downloaded Image</HeaderLogo>
  */
-export 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();
-        }
-    };
+export const HeaderLogo = React.forwardRef((props, ref) => {
+    const { className, children, logo, onClick, as: Element = !!onClick ? 'button' : 'div', ...rest } = props;
     useTheme();
-    return (React.createElement("div", { className: cx('iui-header-brand', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick, ...rest },
+    return (React.createElement(Element, { className: cx('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.isValidElement(logo)
             ? React.cloneElement(logo, {
                 className: cx('iui-header-brand-icon', logo.props.className),
             })
             : undefined,
         children && React.createElement("span", { className: 'iui-header-brand-label' }, children)));
-};
+});
 export default HeaderLogo;

package/esm/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/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -25,7 +25,7 @@ import '@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>} />
  */
 export const ToggleSwitch = React.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;
     useTheme();
     const inputElementRef = React.useRef(null);
     const refs = useMergedRefs(inputElementRef, ref);
@@ -39,7 +39,7 @@ export const ToggleSwitch = React.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.createElement("input", { className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
         icon &&
             React.cloneElement(icon, {

package/esm/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/esm/core/index.js

@@ -20,7 +20,7 @@ export { DropdownMenu } from './DropdownMenu';
 export { ErrorPage, NonIdealState } from './NonIdealState';
 export { ExpandableBlock } from './ExpandableBlock';
 export { Fieldset } from './Fieldset';
-export { FileUpload, FileUploadTemplate } from './FileUpload';
+export { FileUpload, FileUploadTemplate, FileUploadCard, FileEmptyCard, } from './FileUpload';
 export { Footer, defaultFooterElements } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';

package/esm/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/esm/core/utils/hooks/index.js

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

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