@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 3.0.0-dev.4
+
+### Major Changes
+
+- [#1383](https://github.com/iTwin/iTwinUI/pull/1383): Removed previously-deprecated `UserIcon` and `UserIconGroup` components. Also removed `userIcon` prop from `Header`.
+- [#1384](https://github.com/iTwin/iTwinUI/pull/1384): Removed previously-deprecated `Wizard` component (replaced by `Stepper` and `WorkflowDiagram`).
+- [#1255](https://github.com/iTwin/iTwinUI/pull/1255): Updated Tile component to be composition of customizable subcomponents: `Tile.Name`, `Tile.NameIcon`, `Tile.NameLabel`, `Tile.Action`, `Tile.ThumbnailArea`, `Tile.ThumbnailPicture`, `Tile.BadgeContainer`, `Tile.TypeIndicator`, `Tile.QuickAction`, `Tile.ContentArea`, `Tile.Description`, `Tile.MoreOptions`, `Tile.Metadata`, `Tile.Buttons`. Certain props have been removed as they are now subcomponents: `name`, `description`, `metadata`, `thumbnail`, `badge`, `leftIcon`, `rightIcon`, `button`, `moreOptions`, `isActionable` props have been removed.
+
+- [#1356](https://github.com/iTwin/iTwinUI/pull/1356): ProgressRadial has been refactored to be a single `<div>` instead of using a nested svg. Also it is recommended to explicitly set `size` when using in other components.
+- [#1311](https://github.com/iTwin/iTwinUI/pull/1311): - Removed Tippy.js as dependency in Tooltip. Using FloatingUI instead.
+- [#1388](https://github.com/iTwin/iTwinUI/pull/1388): Removed deprecated `HorizontalTabs` and `VerticalTabs` (replaced by `orientation` prop in `Tabs`).
+
+### Minor Changes
+
+- [#1362](https://github.com/iTwin/iTwinUI/pull/1362): All elements under the root will now get a default focus styling matching `--iui-color-border-accent`.
+
+### Patch Changes
+
+- [#1360](https://github.com/iTwin/iTwinUI/pull/1360): The `color-scheme` property will now be correctly set for dark theme, resulting in better theming of built-in html elements.
+
 ## 3.0.0-dev.3
 
 ### Major Changes
@@ -54,6 +74,14 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.11.7
+
+### Patch Changes
+
+- [#1376](https://github.com/iTwin/iTwinUI/pull/1376): Fix issue where a nested expandable block's expander icon would always display as expanded.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.2
+
 ## 2.11.6
 
 ### Patch Changes

package/cjs/core/Avatar/Avatar.d.ts

@@ -52,8 +52,4 @@ export declare const defaultStatusTitles: StatusTitles;
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
 export declare const Avatar: PolymorphicForwardRefComponent<"span", AvatarProps>;
-/**
- * @deprecated Since v2, this has been renamed to `Avatar`
- */
-export declare const UserIcon: PolymorphicForwardRefComponent<"span", AvatarProps>;
 export default Avatar;

package/cjs/core/Avatar/Avatar.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserIcon = exports.Avatar = exports.defaultStatusTitles = void 0;
+exports.Avatar = exports.defaultStatusTitles = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -66,8 +66,4 @@ exports.Avatar = React.forwardRef((props, ref) => {
                 [`iui-${status}`]: !!status,
             }), "aria-label": statusTitles[status] }))));
 });
-/**
- * @deprecated Since v2, this has been renamed to `Avatar`
- */
-exports.UserIcon = exports.Avatar;
 exports.default = exports.Avatar;

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

@@ -1,3 +1,3 @@
-export { Avatar, UserIcon } from './Avatar.js';
+export { Avatar } from './Avatar.js';
 declare const _default: "./Avatar";
 export default _default;

package/cjs/core/Avatar/index.js

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

package/cjs/core/AvatarGroup/AvatarGroup.d.ts

@@ -58,8 +58,4 @@ declare type AvatarGroupProps = {
  * </AvatarGroup>
  */
 export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
-/**
- * @deprecated Since v2, this has been renamed to `AvatarGroup`
- */
-export declare const UserIconGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
 export default AvatarGroup;

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserIconGroup = exports.AvatarGroup = void 0;
+exports.AvatarGroup = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -85,8 +85,4 @@ exports.AvatarGroup = React.forwardRef((props, ref) => {
                     : `${maxLength}+`),
                 React.createElement(index_js_1.Box, { className: 'iui-stroke' }))))));
 });
-/**
- * @deprecated Since v2, this has been renamed to `AvatarGroup`
- */
-exports.UserIconGroup = exports.AvatarGroup;
 exports.default = exports.AvatarGroup;

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

@@ -1,3 +1,3 @@
-export { AvatarGroup, UserIconGroup } from './AvatarGroup.js';
+export { AvatarGroup } from './AvatarGroup.js';
 declare const _default: "./AvatarGroup";
 export default _default;

package/cjs/core/AvatarGroup/index.js

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

package/cjs/core/Header/Header.d.ts

@@ -26,11 +26,8 @@ declare type HeaderProps = {
     breadcrumbs?: React.ReactNode;
     /**
      * Content displayed to the left of the `menuItems`
-     * (expects array of `IconButton`, potentially wrapped in a `DropdownMenu`)
+     * (expects array of icons/avatars wrapped in `IconButton` and/or `DropdownMenu`).
      *
-     * Since v2, `userIcon` is deprecated.
-     * The new recommendation is to add `Avatar` (Called `UserIcon` before v2) to the end of `actions`.
-     * `Avatar` can be wrapped in `IconButton` and `DropdownMenu` if needed.
      * @example
      * [
      *  <IconButton><SvgNotification /></IconButton>,
@@ -51,22 +48,6 @@ declare type HeaderProps = {
      * Children is put in the center of the Header.
      */
     children?: React.ReactNode;
-    /**
-     * @deprecated Since v2, add your `UserIcon` (called `Avatar` since v2) to the end of `actions` itself
-     *
-     * User icon
-     *
-     * It's size and transition will be handled between slim/not slim state of the
-     * Header
-     * (expects `UserIcon`, can be wrapped in `IconButton` and `DropdownMenu` if needed)
-     * @example
-     * <DropdownMenu menuItems={...}>
-     *   <IconButton styleType='borderless'>
-     *     <UserIcon ... />
-     *   </IconButton>
-     * </DropdownMenu>
-     */
-    userIcon?: React.ReactNode;
     /**
      * Items in the more dropdown menu.
      * Pass a function that takes the `close` argument (to close the menu),

package/cjs/core/Header/Header.js

@@ -67,7 +67,7 @@ const defaultTranslations = {
  * />
  */
 exports.Header = React.forwardRef((props, forwardedRef) => {
-    const { appLogo, breadcrumbs, isSlim = false, actions, userIcon, menuItems, translatedStrings, className, children, ...rest } = props;
+    const { appLogo, breadcrumbs, isSlim = false, actions, menuItems, translatedStrings, className, children, ...rest } = props;
     const headerTranslations = { ...defaultTranslations, ...translatedStrings };
     return (React.createElement(index_js_2.Box, { as: 'header', className: (0, classnames_1.default)('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ref: forwardedRef, ...rest },
         React.createElement(index_js_2.Box, { className: 'iui-page-header-left' },
@@ -77,7 +77,6 @@ exports.Header = React.forwardRef((props, forwardedRef) => {
         children && React.createElement(index_js_2.Box, { className: 'iui-page-header-center' }, children),
         React.createElement(index_js_2.Box, { className: 'iui-page-header-right' },
             actions,
-            userIcon,
             menuItems && (React.createElement(index_js_3.DropdownMenu, { menuItems: menuItems },
                 React.createElement(index_js_1.IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
                     React.createElement(index_js_2.SvgMoreVertical, { "aria-hidden": true })))))));

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.d.ts

@@ -3,12 +3,12 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 declare type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
      * Progress variant. If true, value will be ignored.
-     * @default false
+     *
+     * @default false if value is provided, true otherwise
      */
     indeterminate?: boolean;
     /**

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -50,28 +50,21 @@ const index_js_1 = require("../../utils/index.js");
  * <ProgressRadial size={'small'} indeterminate/>
  */
 exports.ProgressRadial = React.forwardRef((props, forwardedRef) => {
-    const { value = 0, indeterminate = false, status, children, size = '', className, ...rest } = props;
+    const { value, indeterminate = value === undefined, status, size, className, style, children, ...rest } = props;
     const statusMap = {
         negative: React.createElement(index_js_1.SvgImportantSmall, { "aria-hidden": true }),
         positive: React.createElement(index_js_1.SvgCheckmarkSmall, { "aria-hidden": true }),
     };
-    const fillStyle = {
-        strokeDashoffset: status === 'positive'
-            ? 0
-            : 88 -
-                Math.min(88, Math.max(0, indeterminate ? 88 : (88 * value) / 100)),
-    };
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-progress-indicator-radial', {
-            'iui-determinate': !indeterminate,
             'iui-indeterminate': indeterminate,
-            [`iui-${size}`]: !!size,
-            [`iui-${status}`]: !!status,
-        }, className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { as: 'svg', className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
-            React.createElement(index_js_1.Box, { as: 'circle', className: 'iui-track', cx: '16', cy: '16', r: '14' }),
-            React.createElement(index_js_1.Box, { as: 'circle', className: 'iui-fill', cx: '16', cy: '16', r: '14', style: fillStyle })),
-        React.createElement(React.Fragment, null,
-            status && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-inner-content' }, statusMap[status])),
-            !status && children && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-inner-content' }, children)))));
+            'iui-determinate': !indeterminate,
+        }, className), "data-iui-size": size, "data-iui-status": status, ref: forwardedRef, style: {
+            ...(value !== undefined && {
+                '--iui-progress-percentage': `${(0, index_js_1.getBoundedValue)(value, 0, 100)}%`,
+            }),
+            ...style,
+        }, ...rest }, size !== 'x-small'
+        ? children ?? (!!status ? statusMap[status] : null)
+        : null));
 });
 exports.default = exports.ProgressRadial;

package/cjs/core/Slider/Slider.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { TooltipProps } from '../Tooltip/Tooltip.js';
+import type { Tooltip } from '../Tooltip/index.js';
 /**
  * Determines which segments are shown with color.
  */
 export declare type TrackDisplayMode = 'auto' | 'none' | 'odd-segments' | 'even-segments';
+declare type TooltipProps = React.ComponentProps<typeof Tooltip>;
 export declare type SliderProps = {
     /**
      * Set focus on first thumb in slider element.

package/cjs/core/Slider/Thumb.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TooltipProps } from '../Tooltip/Tooltip.js';
+import { Tooltip } from '../Tooltip/index.js';
 import type { SliderProps } from './Slider.js';
 declare type ThumbProps = {
     /**
@@ -49,7 +49,7 @@ declare type ThumbProps = {
     /**
      * Additional tooltip props.
      */
-    tooltipProps: Omit<TooltipProps, 'children'>;
+    tooltipProps: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;
     /**
      * Additional props for Thumb.
      */

package/cjs/core/Slider/Thumb.js

@@ -86,7 +86,7 @@ const Thumb = (props) => {
         return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
-    return (React.createElement(index_js_1.Tooltip, { placement: 'top', trigger: tooltipProps?.visible == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
+    return (React.createElement(index_js_1.Tooltip, { placement: 'top', autoUpdateOptions: { animationFrame: true }, ...tooltipProps },
         React.createElement(index_js_2.Box, { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'

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

@@ -1,7 +1,3 @@
-export { Wizard } from './Wizard.js';
 export { Stepper } from './Stepper.js';
 export { WorkflowDiagram } from './WorkflowDiagram.js';
-export type { WizardType, WizardLocalization } from './Wizard.js';
 export type { StepProperties, StepperLocalization } from './Stepper.js';
-declare const _default: "./Wizard";
-export default _default;

package/cjs/core/Stepper/index.js

@@ -1,14 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WorkflowDiagram = exports.Stepper = exports.Wizard = void 0;
+exports.WorkflowDiagram = exports.Stepper = 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 Wizard_js_1 = require("./Wizard.js");
-Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return Wizard_js_1.Wizard; } });
 var Stepper_js_1 = require("./Stepper.js");
 Object.defineProperty(exports, "Stepper", { enumerable: true, get: function () { return Stepper_js_1.Stepper; } });
 var WorkflowDiagram_js_1 = require("./WorkflowDiagram.js");
 Object.defineProperty(exports, "WorkflowDiagram", { enumerable: true, get: function () { return WorkflowDiagram_js_1.WorkflowDiagram; } });
-exports.default = './Wizard';

package/cjs/core/Tabs/Tabs.d.ts

@@ -99,16 +99,6 @@ export declare type TabsProps = {
      */
     children?: React.ReactNode;
 } & TabsOrientationProps & TabsTypeProps & TabsOverflowProps;
-/**
- * @deprecated Since v2, use `TabProps` with `Tabs`
- */
-declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
-/**
- * @deprecated Since v2, use `TabProps` with `Tabs`
- */
-declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
-    type?: 'default' | 'borderless';
-};
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -137,30 +127,4 @@ declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 export declare const Tabs: (props: TabsProps) => JSX.Element;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <HorizontalTabs labels={tabs} activeIndex={1}>Tabpanel content</HorizontalTabs>
- */
-export declare const HorizontalTabs: (props: HorizontalTabsProps) => JSX.Element;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
- */
-export declare const VerticalTabs: (props: VerticalTabsProps) => JSX.Element;
 export default Tabs;

package/cjs/core/Tabs/Tabs.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalTabs = exports.HorizontalTabs = exports.Tabs = void 0;
+exports.Tabs = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -383,32 +383,4 @@ const Tabs = (props) => {
         children && (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 exports.Tabs = Tabs;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <HorizontalTabs labels={tabs} activeIndex={1}>Tabpanel content</HorizontalTabs>
- */
-const HorizontalTabs = (props) => (React.createElement(exports.Tabs, { orientation: 'horizontal', ...props }));
-exports.HorizontalTabs = HorizontalTabs;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
- */
-const VerticalTabs = (props) => (React.createElement(exports.Tabs, { orientation: 'vertical', ...props }));
-exports.VerticalTabs = VerticalTabs;
 exports.default = exports.Tabs;

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

@@ -1,2 +1,2 @@
-export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
+export { Tabs } from './Tabs.js';
 export { Tab } from './Tab.js';

package/cjs/core/Tabs/index.js

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.HorizontalTabs = exports.VerticalTabs = exports.Tabs = void 0;
+exports.Tab = exports.Tabs = 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 Tabs_js_1 = require("./Tabs.js");
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_js_1.Tabs; } });
-Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_js_1.VerticalTabs; } });
-Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return Tabs_js_1.HorizontalTabs; } });
 var Tab_js_1 = require("./Tab.js");
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_js_1.Tab; } });