@itwin/itwinui-react 2.5.0 → 2.6.0

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/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/esm/core/Table/SubRowExpander.js

@@ -6,8 +6,10 @@ import React from 'react';
 import { SvgChevronRight } from '../utils';
 import { IconButton } from '../Buttons';
 export const SubRowExpander = (props) => {
-    const { cell, isDisabled, cellProps, expanderCell } = props;
-    return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(IconButton, { style: { marginRight: 8 }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
+    const { cell, isDisabled, cellProps, expanderCell, density } = props;
+    return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(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.createElement(SvgChevronRight, { style: {

package/esm/core/Table/Table.js

@@ -198,7 +198,7 @@ export const Table = (props) => {
         getSubRows,
         initialState: { pageSize, ...props.initialState },
         columnResizeMode,
-    }, useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
+    }, useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled, density), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), 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]) {
@@ -336,7 +336,7 @@ export const Table = (props) => {
     const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
-        return (React.createElement(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.createElement(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,
@@ -351,6 +351,7 @@ export const Table = (props) => {
         expanderCell,
         enableVirtualization,
         tableRowRef,
+        density,
     ]);
     const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {

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

@@ -9,7 +9,7 @@ import { SubRowExpander } from './SubRowExpander';
 import { SELECTION_CELL_ID } from './columns';
 import { DefaultCell } from './cells';
 export 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 !== SELECTION_CELL_ID);
     const getSubRowStyle = () => {
@@ -17,9 +17,20 @@ export 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({
@@ -37,7 +48,7 @@ export const TableCell = (props) => {
         ...{ cell, row: cell.row, value: cell.value, column: cell.column },
     };
     const cellContent = (React.createElement(React.Fragment, null,
-        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell })),
+        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density })),
         cell.render('Cell')));
     const cellRendererProps = {
         cellElementProps,

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

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

package/esm/core/Table/TableRowMemoized.js

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

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

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

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

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

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

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

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

@@ -1,10 +1,13 @@
 import { SelectionColumn, SELECTION_CELL_ID } from '../columns';
-export const useSelectionCell = (isSelectable, selectionMode, isRowDisabled) => (hooks) => {
+export const useSelectionCell = (isSelectable, selectionMode, isRowDisabled, density = 'default') => (hooks) => {
     if (!isSelectable) {
         return;
     }
     hooks.allColumns.push((columns) => selectionMode === 'single' ||
         columns.find((c) => c.id === SELECTION_CELL_ID)
         ? columns
-        : [SelectionColumn({ isDisabled: isRowDisabled }), ...columns]);
+        : [
+            SelectionColumn({ isDisabled: isRowDisabled, density: density }),
+            ...columns,
+        ]);
 };

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;

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

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var _a;
+import React from 'react';
+import { getRandomValue } from '../functions/numbers';
+/**
+ * Return custom useId function as a fallback for React.useId
+ */
+export const useId = (_a = React.useId) !== null && _a !== void 0 ? _a : (() => {
+    const [id] = React.useState(() => `iui-${getRandomValue(10)}`);
+    return id;
+});

package/esm/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/esm/core/utils/icons/SvgDocument.js

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+export const SvgDocument = (props) => {
+    return (React.createElement("svg", { viewBox: '0 0 16 16', ...props },
+        React.createElement("path", { d: 'M10 0H2v16h12V4h-4zm1 0v3h3z' })));
+};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -62,7 +62,7 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.6.0",
+    "@itwin/itwinui-css": "^1.7.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@tippyjs/react": "^4.2.6",