@itwin/itwinui-react 1.23.1 → 1.26.0

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/Label/Label.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/inputs.css';
+declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
+    /**
+     * What element should the label be rendered as?
+     * @default 'label'
+     */
+    as?: T;
+    /**
+     * Set the display style of the label.
+     *   - 'block' - default, no extra spacing (label and input will be on separate lines)
+     *   - 'inline' - label gets a right margin so it can be placed inline
+     * @default 'block'
+     */
+    displayStyle?: 'block' | 'inline';
+    /**
+     * Set to true if the label's associated input is required.
+     * This adds an asterisk next to the label text.
+     */
+    required?: boolean;
+};
+export declare type LabelProps<T extends React.ElementType = 'label'> = LabelOwnProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof LabelOwnProps<T>>;
+/**
+ * A standalone label to be used with input components (using `htmlFor`).
+ * Can be rendered as any element, e.g. span, using the `as` prop.
+ * @example
+ * <Label htmlFor='name-input'>Name</Label>
+ * <Input id='name-input' />
+ */
+export declare const Label: <T extends React.ElementType<any> = "label">(props: LabelProps<T>) => JSX.Element;
+export default Label;

package/cjs/core/Label/Label.js

@@ -0,0 +1,53 @@
+"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.Label = 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 classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/inputs.css");
+/**
+ * A standalone label to be used with input components (using `htmlFor`).
+ * Can be rendered as any element, e.g. span, using the `as` prop.
+ * @example
+ * <Label htmlFor='name-input'>Name</Label>
+ * <Input id='name-input' />
+ */
+var Label = function (props) {
+    var _a = props.as, Element = _a === void 0 ? 'label' : _a, _b = props.displayStyle, displayStyle = _b === void 0 ? 'block' : _b, required = props.required, className = props.className, children = props.children, rest = __rest(props, ["as", "displayStyle", "required", "className", "children"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-input-label', {
+            'iui-inline': displayStyle === 'inline',
+            'iui-required': required,
+        }, className) }, rest), children));
+};
+exports.Label = Label;
+exports.default = exports.Label;

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

@@ -0,0 +1,4 @@
+export { Label } from './Label';
+export type { LabelProps } from './Label';
+declare const _default: "./Label";
+export default _default;

package/cjs/core/Label/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = 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 Label_1 = require("./Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
+exports.default = './Label';

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/LabeledTextarea/LabeledTextarea.d.ts

@@ -66,7 +66,7 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<{
      * Custom style for textarea.
      */
     textareaStyle?: React.CSSProperties | undefined;
-} & Pick<LabeledInputProps, "svgIcon" | "displayStyle" | "iconDisplayStyle"> & {
+} & Pick<LabeledInputProps, "displayStyle" | "svgIcon" | "iconDisplayStyle"> & {
     setFocus?: boolean | undefined;
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export default LabeledTextarea;

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

@@ -60,45 +60,38 @@ var Tab_1 = require("./Tab");
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 var Tabs = function (props) {
-    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _a = props.focusActivationMode, focusActivationMode = _a === void 0 ? 'auto' : _a, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.color, color = _c === void 0 ? 'blue' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
+    var _a, _b, _c;
+    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 _e = react_1.default.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _e[0], setTabsWidth = _e[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 _f = react_1.default.useState(function () {
+    var _j = react_1.default.useState(function () {
         return activeIndex != null
             ? (0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
             : 0;
-    }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
+    }), currentActiveIndex = _j[0], setCurrentActiveIndex = _j[1];
     react_1.default.useLayoutEffect(function () {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex((0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
-    var _g = react_1.default.useState({}), stripeStyle = _g[0], setStripeStyle = _g[1];
+    // CSS custom properties to place the active stripe
+    var _k = react_1.default.useState({}), stripeProperties = _k[0], setStripeProperties = _k[1];
     react_1.default.useLayoutEffect(function () {
-        var _a;
-        if (type !== 'default') {
-            var activeTab = (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.children[currentActiveIndex];
-            var activeTabRect = activeTab === null || activeTab === void 0 ? void 0 : activeTab.getBoundingClientRect();
-            setStripeStyle({
-                width: orientation === 'horizontal' ? activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.width : undefined,
-                height: orientation === 'vertical' ? activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.height : undefined,
-                left: orientation === 'horizontal'
-                    ? activeTab === null || activeTab === void 0 ? void 0 : activeTab.offsetLeft
-                    : (activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.width) - 2,
-                top: orientation === 'horizontal'
-                    ? (activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.height) - 2
-                    : activeTab === null || activeTab === void 0 ? void 0 : activeTab.offsetTop,
-            });
+        if (type !== 'default' && tablistRef.current != undefined) {
+            var activeTab = tablistRef.current.children[currentActiveIndex];
+            var activeTabRect = activeTab.getBoundingClientRect();
+            setStripeProperties(__assign(__assign({}, (orientation === 'horizontal' && {
+                '--stripe-width': activeTabRect.width + "px",
+                '--stripe-left': activeTab.offsetLeft + "px",
+            })), (orientation === 'vertical' && {
+                '--stripe-height': activeTabRect.height + "px",
+                '--stripe-top': activeTab.offsetTop + "px",
+            })));
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
-    var _h = react_1.default.useState(), focusedIndex = _h[0], setFocusedIndex = _h[1];
+    var _l = react_1.default.useState(), focusedIndex = _l[0], setFocusedIndex = _l[1];
     react_1.default.useEffect(function () {
         var _a;
         if (tablistRef.current && focusedIndex !== undefined) {
@@ -106,7 +99,7 @@ var Tabs = function (props) {
             (_a = tab) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [focusedIndex]);
-    var _j = react_1.default.useState(false), hasSublabel = _j[0], setHasSublabel = _j[1]; // used for setting size
+    var _m = react_1.default.useState(false), hasSublabel = _m[0], setHasSublabel = _m[1]; // used for setting size
     react_1.default.useLayoutEffect(function () {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
@@ -179,10 +172,12 @@ var Tabs = function (props) {
                 break;
         }
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-" + orientation) },
+    var isIE = !((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, '--stripe-width', '100px'));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-" + orientation), style: stripeProperties },
         react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tabs', "iui-" + type, {
                 'iui-green': color === 'green',
-                'iui-animated': type !== 'default',
+                'iui-animated': type !== 'default' && !isIE,
+                'iui-not-animated': isIE,
                 'iui-large': hasSublabel,
             }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown }, rest), labels.map(function (label, index) {
             var onClick = function () {
@@ -204,7 +199,6 @@ var Tabs = function (props) {
                 },
             }))));
         })),
-        type !== 'default' && (react_1.default.createElement("div", { className: 'iui-tab-stripe', style: stripeStyle })),
         children && (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 exports.Tabs = Tabs;

package/cjs/core/index.d.ts

@@ -32,10 +32,12 @@ 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';
+export type { LabelProps } from './Label';
 export { LabeledInput } from './LabeledInput';
 export type { LabeledInputProps } from './LabeledInput';
 export { InputGroup } from './InputGroup';
@@ -86,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.ProgressRadial = exports.ProgressLinear = exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = 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 = 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,8 +64,11 @@ 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");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
 var LabeledInput_1 = require("./LabeledInput");
 Object.defineProperty(exports, "LabeledInput", { enumerable: true, get: function () { return LabeledInput_1.LabeledInput; } });
 var InputGroup_1 = require("./InputGroup");
@@ -145,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/color/ColorValue.d.ts

@@ -170,6 +170,7 @@ export declare class ColorValue {
     private static toHsv;
     /** True if the value of this ColorValue is the same as another ColorValue. */
     equals(other: ColorValue): boolean;
+    static getFormattedColorNumber(value: number, precision?: number): string;
     /** Convert the 0xTTBBGGRR color to a string of the form "rgba(r,g,b,a)" where the color components are specified in decimal and the alpha component is a fraction. */
     toRgbString(includeAlpha?: boolean): string;
     /** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */