@itwin/itwinui-react 1.25.0 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.26.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.25.0...v1.26.0) (2021-11-30)
+
+### What's new
+
+* **InformationPanel:** Add `InformationPanelContent` for inner rows ([#433](https://www.github.com/iTwin/iTwinUI-react/issues/433)) ([a706bcb](https://www.github.com/iTwin/iTwinUI-react/commit/a706bcb04f9af512131d9ed08fef1529314d2bb1))
+* **MiddleTextTruncation:** Utility to truncate text with ellipsis in the middle ([#330](https://www.github.com/iTwin/iTwinUI-react/issues/330)) ([371b56f](https://www.github.com/iTwin/iTwinUI-react/commit/371b56fa9150fdd110c92d05b3944f376d37441c))
+
+### Fixes
+
+* **DatePicker:** Make date arg required in `onChange` ([#437](https://www.github.com/iTwin/iTwinUI-react/issues/437)) ([ee79248](https://www.github.com/iTwin/iTwinUI-react/commit/ee792488a10e43a9b0f8ea6d77c30ef1897eb86c))
+* **Table:** Don't show paginator when there is only one page ([#441](https://www.github.com/iTwin/iTwinUI-react/issues/441)) ([e40cbc8](https://www.github.com/iTwin/iTwinUI-react/commit/e40cbc81929da14ea2754e5d847c0efe8af70203))
+
 ## [1.25.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.24.0...v1.25.0) (2021-11-16)
 
 ### What's new

package/cjs/core/Buttons/Button/Button.d.ts

@@ -43,7 +43,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: "cta" | "high-visibility" | "default" | "borderless" | undefined;
+    styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
     /**
      * Icon shown before the main button content.
      */

package/cjs/core/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isActive" | "key"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isActive" | "key"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -18,7 +18,7 @@ export declare type DatePickerProps = {
     /**
      * Callback when date is changed.
      */
-    onChange?: (date?: Date) => void;
+    onChange?: (date: Date) => void;
     /**
      * Pass localized week days (start from sunday) and months.
      * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.

package/cjs/core/InformationPanel/InformationPanel.d.ts

@@ -35,7 +35,10 @@ export declare type InformationPanelProps = {
  *       <Text variant='subheading'>InfoPanel heading</Text>
  *     </InformationPanelHeader>
  *     <InformationPanelBody>
- *       <span>Info panel content</span>
+ *       <Text>Metadata</Text>
+ *       <InformationPanelContent ... />
+ *       <Text>Attributes</Text>
+ *       <InformationPanelContent ... />
  *     </InformationPanelBody>
  *   </InformationPanel>
  * </InformationPanelWrapper>

package/cjs/core/InformationPanel/InformationPanel.js

@@ -47,7 +47,10 @@ require("@itwin/itwinui-css/css/information-panel.css");
  *       <Text variant='subheading'>InfoPanel heading</Text>
  *     </InformationPanelHeader>
  *     <InformationPanelBody>
- *       <span>Info panel content</span>
+ *       <Text>Metadata</Text>
+ *       <InformationPanelContent ... />
+ *       <Text>Attributes</Text>
+ *       <InformationPanelContent ... />
  *     </InformationPanelBody>
  *   </InformationPanel>
  * </InformationPanelWrapper>

package/cjs/core/InformationPanel/InformationPanelContent.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
+export declare type InformationPanelContentProps = {
+    /**
+     * If set to 'inline', the label/input pairs will be shown on the same line.
+     * The component handles the spacing and alignment automatically.
+     *
+     * @default 'default'
+     */
+    displayStyle?: 'default' | 'inline';
+    /**
+     * Content of the component.
+     * Should ideally be pairs of `Label` and input components.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * The `InformationPanelContent` component should be used inside `InformationPanelBody`
+ * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
+ * and the value can be any input element (including readonly inputs for non-modifiable fields).
+ *
+ * By default, the pairs are displayed of label and input are displayed  in separate lines,
+ * but displayStyle can be set to 'inline' to show them in the same line with correct alignment.
+ *
+ * You can use multiple `InformationPanelContent` instances inside one `InformationPanelBody`; this is
+ * useful when you want to show other content, e.g. separate headings for different sections of key/value pairs.
+ *
+ * @example
+ * <InformationPanelContent displayStyle='inline'>
+ *   <Label htmlFor='name-input'>File name</Label>
+ *   <Input id='name-input' value='Alpha.mp3' />
+ *
+ *   <Label htmlFor='year-input'>Year</Label>
+ *   <Input id='year-input' value='2021' />
+ *
+ *   <Label htmlFor='path-input'>Path</Label>
+ *   <Input id='path-input' value='/Shared/Music/' />
+ * </InformationPanelContent>
+ */
+export declare const InformationPanelContent: (props: InformationPanelContentProps) => JSX.Element;
+export default InformationPanelContent;

package/cjs/core/InformationPanel/InformationPanelContent.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InformationPanelContent = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/information-panel.css");
+/**
+ * The `InformationPanelContent` component should be used inside `InformationPanelBody`
+ * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
+ * and the value can be any input element (including readonly inputs for non-modifiable fields).
+ *
+ * By default, the pairs are displayed of label and input are displayed  in separate lines,
+ * but displayStyle can be set to 'inline' to show them in the same line with correct alignment.
+ *
+ * You can use multiple `InformationPanelContent` instances inside one `InformationPanelBody`; this is
+ * useful when you want to show other content, e.g. separate headings for different sections of key/value pairs.
+ *
+ * @example
+ * <InformationPanelContent displayStyle='inline'>
+ *   <Label htmlFor='name-input'>File name</Label>
+ *   <Input id='name-input' value='Alpha.mp3' />
+ *
+ *   <Label htmlFor='year-input'>Year</Label>
+ *   <Input id='year-input' value='2021' />
+ *
+ *   <Label htmlFor='path-input'>Path</Label>
+ *   <Input id='path-input' value='/Shared/Music/' />
+ * </InformationPanelContent>
+ */
+var InformationPanelContent = function (props) {
+    var className = props.className, _a = props.displayStyle, displayStyle = _a === void 0 ? 'default' : _a, children = props.children, rest = __rest(props, ["className", "displayStyle", "children"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className) }, rest), children));
+};
+exports.InformationPanelContent = InformationPanelContent;
+exports.default = exports.InformationPanelContent;

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

@@ -8,3 +8,5 @@ export { InformationPanelHeader } from './InformationPanelHeader';
 export type { InformationPanelHeaderProps } from './InformationPanelHeader';
 export { InformationPanelBody } from './InformationPanelBody';
 export type { InformationPanelBodyProps } from './InformationPanelBody';
+export { InformationPanelContent } from './InformationPanelContent';
+export type { InformationPanelContentProps } from './InformationPanelContent';

package/cjs/core/InformationPanel/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = void 0;
+exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -14,3 +14,5 @@ var InformationPanelHeader_1 = require("./InformationPanelHeader");
 Object.defineProperty(exports, "InformationPanelHeader", { enumerable: true, get: function () { return InformationPanelHeader_1.InformationPanelHeader; } });
 var InformationPanelBody_1 = require("./InformationPanelBody");
 Object.defineProperty(exports, "InformationPanelBody", { enumerable: true, get: function () { return InformationPanelBody_1.InformationPanelBody; } });
+var InformationPanelContent_1 = require("./InformationPanelContent");
+Object.defineProperty(exports, "InformationPanelContent", { enumerable: true, get: function () { return InformationPanelContent_1.InformationPanelContent; } });

package/cjs/core/LabeledInput/LabeledInput.d.ts

@@ -84,7 +84,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      * - 'inline' - appears in the same line as input.
      * @default 'default'
      */
-    displayStyle?: "default" | "inline" | undefined;
+    displayStyle?: "inline" | "default" | undefined;
     /**
      * Set display style of icon.
      * Supported values:
@@ -93,7 +93,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      *
      * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
      */
-    iconDisplayStyle?: "inline" | "block" | undefined;
+    iconDisplayStyle?: "block" | "inline" | undefined;
 } & {
     setFocus?: boolean | undefined;
     size?: "small" | "large" | undefined;

package/cjs/core/Menu/MenuItem.d.ts

@@ -77,7 +77,7 @@ export declare const MenuItem: React.ForwardRefExoticComponent<{
      *
      * Defaults to 'large' if `sublabel` provided, otherwise 'default'.
      */
-    size?: "large" | "default" | undefined;
+    size?: "default" | "large" | undefined;
     /**
      * Sub label shown below the main content of the item.
      */

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

@@ -67,5 +67,5 @@ export declare type TablePaginatorProps = {
  *   paginatorRenderer={(props) => <TablePaginator {...props} />}
  * />
  */
-export declare const TablePaginator: (props: TablePaginatorProps) => JSX.Element;
+export declare const TablePaginator: (props: TablePaginatorProps) => JSX.Element | null;
 export default TablePaginator;

package/cjs/core/Table/TablePaginator.js

@@ -144,12 +144,17 @@ var TablePaginator = function (props) {
         endPage = totalPagesCount;
     }
     var hasNoRows = totalPagesCount === 0;
+    var showPagesList = totalPagesCount > 1 || isLoading;
+    var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
     var ellipsis = (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-ellipsis', { 'iui-small': size === 'small' }) }, "\u2026"));
     var noRowsContent = (react_1.default.createElement(react_1.default.Fragment, null, isLoading ? (react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true, size: 'small' })) : (react_1.default.createElement(Buttons_1.Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
+    if (!showPagesList && !showPageSizeList) {
+        return null;
+    }
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-paginator', className) }, rest),
         react_1.default.createElement("div", { className: 'iui-left' }),
-        react_1.default.createElement("div", { className: 'iui-center', ref: overflowRef },
-            react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', disabled: currentPage === 0 || hasNoRows, onClick: function () { return onPageChange(currentPage - 1); }, size: buttonSize, "aria-label": localization.previousPage },
+        showPagesList && (react_1.default.createElement("div", { className: 'iui-center', ref: overflowRef },
+            react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: function () { return onPageChange(currentPage - 1); }, size: buttonSize, "aria-label": localization.previousPage },
                 react_1.default.createElement(ChevronLeft_1.default, null)),
             react_1.default.createElement(ButtonGroup_1.ButtonGroup, { onKeyDown: onKeyDown, ref: pageListRef }, (function () {
                 if (hasNoRows) {
@@ -171,8 +176,8 @@ var TablePaginator = function (props) {
                         react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true, size: 'small' })))));
             })()),
             react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: function () { return onPageChange(currentPage + 1); }, size: buttonSize, "aria-label": localization.nextPage },
-                react_1.default.createElement(ChevronRight_1.default, null))),
-        react_1.default.createElement("div", { className: 'iui-right' }, pageSizeList && onPageSizeChange && !!totalRowsCount && (react_1.default.createElement(Buttons_1.DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: function (close) {
+                react_1.default.createElement(ChevronRight_1.default, null)))),
+        react_1.default.createElement("div", { className: 'iui-right' }, showPageSizeList && (react_1.default.createElement(Buttons_1.DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: function (close) {
                 return pageSizeList.map(function (size) { return (react_1.default.createElement(Menu_1.MenuItem, { key: size, isSelected: size === pageSize, onClick: function () {
                         close();
                         onPageSizeChange(size);

package/cjs/core/Tabs/Tabs.js

@@ -64,12 +64,7 @@ var Tabs = function (props) {
     var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _d = props.focusActivationMode, focusActivationMode = _d === void 0 ? 'auto' : _d, _e = props.type, type = _e === void 0 ? 'default' : _e, _f = props.color, color = _f === void 0 ? 'blue' : _f, _g = props.orientation, orientation = _g === void 0 ? 'horizontal' : _g, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
     (0, utils_1.useTheme)();
     var tablistRef = react_1.default.useRef(null);
-    var _h = react_1.default.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _h[0], setTabsWidth = _h[1];
-    var updateTabsWidth = react_1.default.useCallback(function (_a) {
-        var width = _a.width;
-        return setTabsWidth(width);
-    }, []);
-    var tablistSizeRef = (0, utils_1.useResizeObserver)(updateTabsWidth)[0];
+    var _h = (0, utils_1.useContainerWidth)(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
     var refs = (0, utils_1.useMergedRefs)(tablistRef, tablistSizeRef);
     var _j = react_1.default.useState(function () {
         return activeIndex != null

package/cjs/core/index.d.ts

@@ -32,8 +32,8 @@ export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps, HorizontalTabProps, } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
-export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
+export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';
 export { Input } from './Input';
 export type { InputProps } from './Input';
 export { Label } from './Label';
@@ -88,5 +88,5 @@ export { UserIconGroup } from './UserIconGroup';
 export type { UserIconGroupProps } from './UserIconGroup';
 export { Wizard } from './Wizard';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
-export type { ThemeType } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps } from './utils';

package/cjs/core/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressLinear = exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = void 0;
+exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -64,6 +64,7 @@ Object.defineProperty(exports, "InformationPanel", { enumerable: true, get: func
 Object.defineProperty(exports, "InformationPanelWrapper", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelWrapper; } });
 Object.defineProperty(exports, "InformationPanelHeader", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelHeader; } });
 Object.defineProperty(exports, "InformationPanelBody", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelBody; } });
+Object.defineProperty(exports, "InformationPanelContent", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelContent; } });
 var Input_1 = require("./Input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
 var Label_1 = require("./Label");
@@ -147,3 +148,4 @@ var utils_1 = require("./utils");
 Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function () { return utils_1.getUserColor; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return utils_1.useTheme; } });
 Object.defineProperty(exports, "ColorValue", { enumerable: true, get: function () { return utils_1.ColorValue; } });
+Object.defineProperty(exports, "MiddleTextTruncation", { enumerable: true, get: function () { return utils_1.MiddleTextTruncation; } });

package/cjs/core/utils/components/MiddleTextTruncation.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CommonProps } from '../props';
+export declare type MiddleTextTruncationProps = {
+    /**
+     * Text to truncate.
+     */
+    text: string;
+    /**
+     * Number of characters to leave at the end.
+     * @default 6
+     */
+    endCharsCount?: number;
+} & CommonProps;
+/**
+ * Truncates text with the ellipsis in the middle,
+ * leaving defined number of chars at the end.
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ */
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
+export default MiddleTextTruncation;

package/cjs/core/utils/components/MiddleTextTruncation.js

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiddleTextTruncation = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var useOverflow_1 = require("../hooks/useOverflow");
+var ELLIPSIS_CHAR = '…';
+/**
+ * Truncates text with the ellipsis in the middle,
+ * leaving defined number of chars at the end.
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ */
+var MiddleTextTruncation = function (props) {
+    var text = props.text, _a = props.endCharsCount, endCharsCount = _a === void 0 ? 6 : _a, style = props.style, rest = __rest(props, ["text", "endCharsCount", "style"]);
+    var _b = (0, useOverflow_1.useOverflow)(text), ref = _b[0], visibleCount = _b[1];
+    var truncatedText = react_1.default.useMemo(function () {
+        if (visibleCount < text.length) {
+            return "" + text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length) + ELLIPSIS_CHAR + text.substr(text.length - endCharsCount);
+        }
+        else {
+            return text;
+        }
+    }, [endCharsCount, text, visibleCount]);
+    return (react_1.default.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+};
+exports.MiddleTextTruncation = MiddleTextTruncation;
+exports.default = exports.MiddleTextTruncation;

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

@@ -3,3 +3,4 @@ export * from './FocusTrap';
 export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
+export * from './MiddleTextTruncation';

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

@@ -19,3 +19,4 @@ __exportStar(require("./FocusTrap"), exports);
 __exportStar(require("./InputContainer"), exports);
 __exportStar(require("./icons"), exports);
 __exportStar(require("./WithCSSTransition"), exports);
+__exportStar(require("./MiddleTextTruncation"), exports);

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

@@ -2,5 +2,6 @@ export * from './useEventListener';
 export * from './useMergedRefs';
 export * from './useOverflow';
 export * from './useResizeObserver';
+export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';

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

@@ -18,5 +18,6 @@ __exportStar(require("./useEventListener"), exports);
 __exportStar(require("./useMergedRefs"), exports);
 __exportStar(require("./useOverflow"), exports);
 __exportStar(require("./useResizeObserver"), exports);
+__exportStar(require("./useContainerWidth"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);

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

@@ -0,0 +1,17 @@
+/**
+ * Hook that returns the width of an element in three stages:
+ *  - initialized with 0
+ *  - immediately set to element's initial width as soon as it's mounted
+ *  - update to new width every time it changes (using `useResizeObserver` hook)
+ *
+ * @private
+ * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
+ * @returns [ref to attach to the element, stateful width of the element]
+ *
+ * @example
+ * const [ref, width] = useContainerWidth();
+ * ... // do something with width
+ * return <div ref={ref}>...</div>;
+ */
+export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null) => void, number];
+export default useContainerWidth;

package/cjs/core/utils/hooks/useContainerWidth.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.useContainerWidth = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var useMergedRefs_1 = require("./useMergedRefs");
+var useResizeObserver_1 = require("./useResizeObserver");
+/**
+ * Hook that returns the width of an element in three stages:
+ *  - initialized with 0
+ *  - immediately set to element's initial width as soon as it's mounted
+ *  - update to new width every time it changes (using `useResizeObserver` hook)
+ *
+ * @private
+ * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
+ * @returns [ref to attach to the element, stateful width of the element]
+ *
+ * @example
+ * const [ref, width] = useContainerWidth();
+ * ... // do something with width
+ * return <div ref={ref}>...</div>;
+ */
+var useContainerWidth = function (watchResizes) {
+    if (watchResizes === void 0) { watchResizes = true; }
+    var _a = react_1.default.useState(0), contentWidth = _a[0], setContentWidth = _a[1];
+    var ref = react_1.default.useCallback(function (element) {
+        if (!element) {
+            return;
+        }
+        setContentWidth(element.getBoundingClientRect().width);
+    }, []);
+    var updateWidth = react_1.default.useCallback(function (_a) {
+        var width = _a.width;
+        return setContentWidth(width);
+    }, []);
+    var _b = (0, useResizeObserver_1.useResizeObserver)(updateWidth), resizeRef = _b[0], resizeObserver = _b[1];
+    if (!watchResizes) {
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    }
+    var refs = (0, useMergedRefs_1.useMergedRefs)(ref, watchResizes ? resizeRef : undefined);
+    return [refs, contentWidth];
+};
+exports.useContainerWidth = useContainerWidth;
+exports.default = exports.useContainerWidth;

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

@@ -20,4 +20,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[], disabled?: boolean) => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean) => readonly [(instance: T | null) => void, number];

package/esm/core/Buttons/Button/Button.d.ts

@@ -43,7 +43,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: "cta" | "high-visibility" | "default" | "borderless" | undefined;
+    styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
     /**
      * Icon shown before the main button content.
      */

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isActive" | "key"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isActive" | "key"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

package/esm/core/DatePicker/DatePicker.d.ts

@@ -18,7 +18,7 @@ export declare type DatePickerProps = {
     /**
      * Callback when date is changed.
      */
-    onChange?: (date?: Date) => void;
+    onChange?: (date: Date) => void;
     /**
      * Pass localized week days (start from sunday) and months.
      * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.

package/esm/core/InformationPanel/InformationPanel.d.ts

@@ -35,7 +35,10 @@ export declare type InformationPanelProps = {
  *       <Text variant='subheading'>InfoPanel heading</Text>
  *     </InformationPanelHeader>
  *     <InformationPanelBody>
- *       <span>Info panel content</span>
+ *       <Text>Metadata</Text>
+ *       <InformationPanelContent ... />
+ *       <Text>Attributes</Text>
+ *       <InformationPanelContent ... />
  *     </InformationPanelBody>
  *   </InformationPanel>
  * </InformationPanelWrapper>

package/esm/core/InformationPanel/InformationPanel.js

@@ -41,7 +41,10 @@ import '@itwin/itwinui-css/css/information-panel.css';
  *       <Text variant='subheading'>InfoPanel heading</Text>
  *     </InformationPanelHeader>
  *     <InformationPanelBody>
- *       <span>Info panel content</span>
+ *       <Text>Metadata</Text>
+ *       <InformationPanelContent ... />
+ *       <Text>Attributes</Text>
+ *       <InformationPanelContent ... />
  *     </InformationPanelBody>
  *   </InformationPanel>
  * </InformationPanelWrapper>

package/esm/core/InformationPanel/InformationPanelContent.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
+export declare type InformationPanelContentProps = {
+    /**
+     * If set to 'inline', the label/input pairs will be shown on the same line.
+     * The component handles the spacing and alignment automatically.
+     *
+     * @default 'default'
+     */
+    displayStyle?: 'default' | 'inline';
+    /**
+     * Content of the component.
+     * Should ideally be pairs of `Label` and input components.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * The `InformationPanelContent` component should be used inside `InformationPanelBody`
+ * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
+ * and the value can be any input element (including readonly inputs for non-modifiable fields).
+ *
+ * By default, the pairs are displayed of label and input are displayed  in separate lines,
+ * but displayStyle can be set to 'inline' to show them in the same line with correct alignment.
+ *
+ * You can use multiple `InformationPanelContent` instances inside one `InformationPanelBody`; this is
+ * useful when you want to show other content, e.g. separate headings for different sections of key/value pairs.
+ *
+ * @example
+ * <InformationPanelContent displayStyle='inline'>
+ *   <Label htmlFor='name-input'>File name</Label>
+ *   <Input id='name-input' value='Alpha.mp3' />
+ *
+ *   <Label htmlFor='year-input'>Year</Label>
+ *   <Input id='year-input' value='2021' />
+ *
+ *   <Label htmlFor='path-input'>Path</Label>
+ *   <Input id='path-input' value='/Shared/Music/' />
+ * </InformationPanelContent>
+ */
+export declare const InformationPanelContent: (props: InformationPanelContentProps) => JSX.Element;
+export default InformationPanelContent;

package/esm/core/InformationPanel/InformationPanelContent.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
+/**
+ * The `InformationPanelContent` component should be used inside `InformationPanelBody`
+ * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
+ * and the value can be any input element (including readonly inputs for non-modifiable fields).
+ *
+ * By default, the pairs are displayed of label and input are displayed  in separate lines,
+ * but displayStyle can be set to 'inline' to show them in the same line with correct alignment.
+ *
+ * You can use multiple `InformationPanelContent` instances inside one `InformationPanelBody`; this is
+ * useful when you want to show other content, e.g. separate headings for different sections of key/value pairs.
+ *
+ * @example
+ * <InformationPanelContent displayStyle='inline'>
+ *   <Label htmlFor='name-input'>File name</Label>
+ *   <Input id='name-input' value='Alpha.mp3' />
+ *
+ *   <Label htmlFor='year-input'>Year</Label>
+ *   <Input id='year-input' value='2021' />
+ *
+ *   <Label htmlFor='path-input'>Path</Label>
+ *   <Input id='path-input' value='/Shared/Music/' />
+ * </InformationPanelContent>
+ */
+export var InformationPanelContent = function (props) {
+    var className = props.className, _a = props.displayStyle, displayStyle = _a === void 0 ? 'default' : _a, children = props.children, rest = __rest(props, ["className", "displayStyle", "children"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className) }, rest), children));
+};
+export default InformationPanelContent;

package/esm/core/InformationPanel/index.d.ts

@@ -8,3 +8,5 @@ export { InformationPanelHeader } from './InformationPanelHeader';
 export type { InformationPanelHeaderProps } from './InformationPanelHeader';
 export { InformationPanelBody } from './InformationPanelBody';
 export type { InformationPanelBodyProps } from './InformationPanelBody';
+export { InformationPanelContent } from './InformationPanelContent';
+export type { InformationPanelContentProps } from './InformationPanelContent';

package/esm/core/InformationPanel/index.js

@@ -7,3 +7,4 @@ export default './InformationPanel';
 export { InformationPanelWrapper } from './InformationPanelWrapper';
 export { InformationPanelHeader } from './InformationPanelHeader';
 export { InformationPanelBody } from './InformationPanelBody';
+export { InformationPanelContent } from './InformationPanelContent';

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -84,7 +84,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      * - 'inline' - appears in the same line as input.
      * @default 'default'
      */
-    displayStyle?: "default" | "inline" | undefined;
+    displayStyle?: "inline" | "default" | undefined;
     /**
      * Set display style of icon.
      * Supported values:
@@ -93,7 +93,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      *
      * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
      */
-    iconDisplayStyle?: "inline" | "block" | undefined;
+    iconDisplayStyle?: "block" | "inline" | undefined;
 } & {
     setFocus?: boolean | undefined;
     size?: "small" | "large" | undefined;

package/esm/core/Menu/MenuItem.d.ts

@@ -77,7 +77,7 @@ export declare const MenuItem: React.ForwardRefExoticComponent<{
      *
      * Defaults to 'large' if `sublabel` provided, otherwise 'default'.
      */
-    size?: "large" | "default" | undefined;
+    size?: "default" | "large" | undefined;
     /**
      * Sub label shown below the main content of the item.
      */

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

@@ -67,5 +67,5 @@ export declare type TablePaginatorProps = {
  *   paginatorRenderer={(props) => <TablePaginator {...props} />}
  * />
  */
-export declare const TablePaginator: (props: TablePaginatorProps) => JSX.Element;
+export declare const TablePaginator: (props: TablePaginatorProps) => JSX.Element | null;
 export default TablePaginator;

package/esm/core/Table/TablePaginator.js

@@ -138,12 +138,17 @@ export var TablePaginator = function (props) {
         endPage = totalPagesCount;
     }
     var hasNoRows = totalPagesCount === 0;
+    var showPagesList = totalPagesCount > 1 || isLoading;
+    var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
     var ellipsis = (React.createElement("span", { className: cx('iui-ellipsis', { 'iui-small': size === 'small' }) }, "\u2026"));
     var noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
+    if (!showPagesList && !showPageSizeList) {
+        return null;
+    }
     return (React.createElement("div", __assign({ className: cx('iui-paginator', className) }, rest),
         React.createElement("div", { className: 'iui-left' }),
-        React.createElement("div", { className: 'iui-center', ref: overflowRef },
-            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0 || hasNoRows, onClick: function () { return onPageChange(currentPage - 1); }, size: buttonSize, "aria-label": localization.previousPage },
+        showPagesList && (React.createElement("div", { className: 'iui-center', ref: overflowRef },
+            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: function () { return onPageChange(currentPage - 1); }, size: buttonSize, "aria-label": localization.previousPage },
                 React.createElement(SvgChevronLeft, null)),
             React.createElement(ButtonGroup, { onKeyDown: onKeyDown, ref: pageListRef }, (function () {
                 if (hasNoRows) {
@@ -165,8 +170,8 @@ export var TablePaginator = function (props) {
                         React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })))));
             })()),
             React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: function () { return onPageChange(currentPage + 1); }, size: buttonSize, "aria-label": localization.nextPage },
-                React.createElement(SvgChevronRight, null))),
-        React.createElement("div", { className: 'iui-right' }, pageSizeList && onPageSizeChange && !!totalRowsCount && (React.createElement(DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: function (close) {
+                React.createElement(SvgChevronRight, null)))),
+        React.createElement("div", { className: 'iui-right' }, showPageSizeList && (React.createElement(DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: function (close) {
                 return pageSizeList.map(function (size) { return (React.createElement(MenuItem, { key: size, isSelected: size === pageSize, onClick: function () {
                         close();
                         onPageSizeChange(size);

package/esm/core/Tabs/Tabs.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, useResizeObserver, useMergedRefs, getBoundedValue, getWindow, } from '../utils';
+import { useTheme, useMergedRefs, getBoundedValue, getWindow, useContainerWidth, } from '../utils';
 import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab';
 /**
@@ -58,12 +58,7 @@ export var Tabs = function (props) {
     var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _d = props.focusActivationMode, focusActivationMode = _d === void 0 ? 'auto' : _d, _e = props.type, type = _e === void 0 ? 'default' : _e, _f = props.color, color = _f === void 0 ? 'blue' : _f, _g = props.orientation, orientation = _g === void 0 ? 'horizontal' : _g, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
     useTheme();
     var tablistRef = React.useRef(null);
-    var _h = React.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _h[0], setTabsWidth = _h[1];
-    var updateTabsWidth = React.useCallback(function (_a) {
-        var width = _a.width;
-        return setTabsWidth(width);
-    }, []);
-    var tablistSizeRef = useResizeObserver(updateTabsWidth)[0];
+    var _h = useContainerWidth(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
     var refs = useMergedRefs(tablistRef, tablistSizeRef);
     var _j = React.useState(function () {
         return activeIndex != null

package/esm/core/index.d.ts

@@ -32,8 +32,8 @@ export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps, HorizontalTabProps, } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
-export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
+export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';
 export { Input } from './Input';
 export type { InputProps } from './Input';
 export { Label } from './Label';
@@ -88,5 +88,5 @@ export { UserIconGroup } from './UserIconGroup';
 export type { UserIconGroupProps } from './UserIconGroup';
 export { Wizard } from './Wizard';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
-export type { ThemeType } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps } from './utils';

package/esm/core/index.js

@@ -19,7 +19,7 @@ export { FileUpload, FileUploadTemplate } from './FileUpload';
 export { Footer } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export { Input } from './Input';
 export { Label } from './Label';
 export { LabeledInput } from './LabeledInput';
@@ -47,4 +47,4 @@ export { Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kb
 export { UserIcon } from './UserIcon';
 export { UserIconGroup } from './UserIconGroup';
 export { Wizard } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';

package/esm/core/utils/components/MiddleTextTruncation.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CommonProps } from '../props';
+export declare type MiddleTextTruncationProps = {
+    /**
+     * Text to truncate.
+     */
+    text: string;
+    /**
+     * Number of characters to leave at the end.
+     * @default 6
+     */
+    endCharsCount?: number;
+} & CommonProps;
+/**
+ * Truncates text with the ellipsis in the middle,
+ * leaving defined number of chars at the end.
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ */
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
+export default MiddleTextTruncation;

package/esm/core/utils/components/MiddleTextTruncation.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * 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 { useOverflow } from '../hooks/useOverflow';
+var ELLIPSIS_CHAR = '…';
+/**
+ * Truncates text with the ellipsis in the middle,
+ * leaving defined number of chars at the end.
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ */
+export var MiddleTextTruncation = function (props) {
+    var text = props.text, _a = props.endCharsCount, endCharsCount = _a === void 0 ? 6 : _a, style = props.style, rest = __rest(props, ["text", "endCharsCount", "style"]);
+    var _b = useOverflow(text), ref = _b[0], visibleCount = _b[1];
+    var truncatedText = React.useMemo(function () {
+        if (visibleCount < text.length) {
+            return "" + text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length) + ELLIPSIS_CHAR + text.substr(text.length - endCharsCount);
+        }
+        else {
+            return text;
+        }
+    }, [endCharsCount, text, visibleCount]);
+    return (React.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+};
+export default MiddleTextTruncation;

package/esm/core/utils/components/index.d.ts

@@ -3,3 +3,4 @@ export * from './FocusTrap';
 export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
+export * from './MiddleTextTruncation';

package/esm/core/utils/components/index.js

@@ -7,3 +7,4 @@ export * from './FocusTrap';
 export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
+export * from './MiddleTextTruncation';

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

@@ -2,5 +2,6 @@ export * from './useEventListener';
 export * from './useMergedRefs';
 export * from './useOverflow';
 export * from './useResizeObserver';
+export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';

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

@@ -6,5 +6,6 @@ export * from './useEventListener';
 export * from './useMergedRefs';
 export * from './useOverflow';
 export * from './useResizeObserver';
+export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';

package/esm/core/utils/hooks/useContainerWidth.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Hook that returns the width of an element in three stages:
+ *  - initialized with 0
+ *  - immediately set to element's initial width as soon as it's mounted
+ *  - update to new width every time it changes (using `useResizeObserver` hook)
+ *
+ * @private
+ * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
+ * @returns [ref to attach to the element, stateful width of the element]
+ *
+ * @example
+ * const [ref, width] = useContainerWidth();
+ * ... // do something with width
+ * return <div ref={ref}>...</div>;
+ */
+export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null) => void, number];
+export default useContainerWidth;

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

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { useMergedRefs } from './useMergedRefs';
+import { useResizeObserver } from './useResizeObserver';
+/**
+ * Hook that returns the width of an element in three stages:
+ *  - initialized with 0
+ *  - immediately set to element's initial width as soon as it's mounted
+ *  - update to new width every time it changes (using `useResizeObserver` hook)
+ *
+ * @private
+ * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
+ * @returns [ref to attach to the element, stateful width of the element]
+ *
+ * @example
+ * const [ref, width] = useContainerWidth();
+ * ... // do something with width
+ * return <div ref={ref}>...</div>;
+ */
+export var useContainerWidth = function (watchResizes) {
+    if (watchResizes === void 0) { watchResizes = true; }
+    var _a = React.useState(0), contentWidth = _a[0], setContentWidth = _a[1];
+    var ref = React.useCallback(function (element) {
+        if (!element) {
+            return;
+        }
+        setContentWidth(element.getBoundingClientRect().width);
+    }, []);
+    var updateWidth = React.useCallback(function (_a) {
+        var width = _a.width;
+        return setContentWidth(width);
+    }, []);
+    var _b = useResizeObserver(updateWidth), resizeRef = _b[0], resizeObserver = _b[1];
+    if (!watchResizes) {
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    }
+    var refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
+    return [refs, contentWidth];
+};
+export default useContainerWidth;

package/esm/core/utils/hooks/useOverflow.d.ts

@@ -20,4 +20,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[], disabled?: boolean) => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean) => readonly [(instance: T | null) => void, number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",