@itwin/itwinui-react 2.11.11 → 2.12.1

package/CHANGELOG.md

@@ -1,10 +1,29 @@
 # Changelog
 
+## 2.12.1
+
+### Patch Changes
+
+- [#1467](https://github.com/iTwin/iTwinUI/pull/1467): Fixed an issue in Carousel where latest `onSlideChange` callback was being ignored.
+
+## 2.12.0
+
+### Minor Changes
+
+- [#1415](https://github.com/iTwin/iTwinUI/pull/1415): The styling strategy has changed so there will now be a single stylesheet included at runtime, instead of separate css imports inside every component. All the styles are also wrapped in a cascade layer named `itwinui`. This behavior can be customized using the `includeCss` prop in `ThemeProvider`.
+
+  **Important note**: The dependencies on `@itwin/itwinui-css` and `@itwin/itwinui-variables` have been removed, so these packages _don't_ need to be installed if you are only using components from `@itwin/itwinui-react`.
+
+- [#1422](https://github.com/iTwin/iTwinUI/pull/1422): Changed `all: revert` to `all: revert-layer` so that only styles from the v1 layer are reverted, thus avoiding issues with inadvertently removing browser default styles.
+- [#1443](https://github.com/iTwin/iTwinUI/pull/1443): `DropdownButton` now supports `styleType='high-visibility'` to make it blue. This should be used sparingly, as a default or borderless dropdown button is the better choice in most cases.
+- [#1454](https://github.com/iTwin/iTwinUI/pull/1454): Added `disabled` prop to `ExpandableBlock` to disable intersction with it.
+- [#1441](https://github.com/iTwin/iTwinUI/pull/1441): Added `placement` prop to `Dialog` to allow placing it at one of the corners.
+
 ## 2.11.11
 
 ### Patch Changes
 
-- [#3](https://github.com/iTwin/iTwinUI/pull/3): Fix resizable Dialog bug where Dialog jumped around the screen when resized on right side.
+- [#1448](https://github.com/iTwin/iTwinUI/pull/1448): Fix resizable Dialog bug where Dialog jumped around the screen when resized on right side.
 
 ## 2.11.10
 
@@ -555,4 +574,4 @@ If you're interested in more details about every signle change, check out a full
 
 ## 1.X
 
-For any changes prior to 2.0.0, check out the [1.X changelog](https://github.com/iTwin/iTwinUI-react/blob/v1/packages/iTwinUI-react/CHANGELOG.md).
+For any changes prior to 2.0.0, check out the [1.X changelog](https://github.com/iTwin/iTwinUI/blob/legacy/v1-react/packages/iTwinUI-react/CHANGELOG.md).

package/cjs/core/Alert/Alert.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/alert.css';
 import type { CommonProps } from '../utils/props.js';
 export declare type AlertProps = {
     /**

package/cjs/core/Alert/Alert.js

@@ -33,7 +33,6 @@ exports.Alert = void 0;
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-require("@itwin/itwinui-css/css/alert.css");
 const index_js_1 = require("../utils/index.js");
 /**
  * A small box to quickly grab user attention and communicate a brief message

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 /**
  * @deprecated Since v2, this has been renamed to `AvatarStatus` (Use with `Avatar`)

package/cjs/core/Avatar/Avatar.js

@@ -34,7 +34,6 @@ exports.UserIcon = exports.Avatar = exports.defaultStatusTitles = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/avatar.css");
 exports.defaultStatusTitles = {
     away: 'Away',
     busy: 'Busy',

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarGroupProps = {
     /**
      * Max number of avatars unstacked.

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -34,7 +34,6 @@ exports.UserIconGroup = exports.AvatarGroup = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/avatar.css");
 /**
  * Group Avatars together.
  *

package/cjs/core/Backdrop/Backdrop.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/backdrop.css';
 export declare type BackdropProps = {
     /**
      * Flag whether backdrop should be shown.

package/cjs/core/Backdrop/Backdrop.js

@@ -34,7 +34,6 @@ exports.Backdrop = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/backdrop.css");
 exports.Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
     (0, index_js_1.useTheme)();

package/cjs/core/Badge/Badge.d.ts

@@ -2,7 +2,6 @@
 import { SoftBackgrounds } from '../utils/index.js';
 import type { CommonProps } from '../utils/index.js';
 import type { AnyString } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
 export declare type BadgeProps = {
     /**
      * Background color of the badge.

package/cjs/core/Badge/Badge.js

@@ -34,7 +34,6 @@ exports.Badge = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/badge.css");
 /**
  * Helper function that returns one of the preset badge color values.
  */

package/cjs/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 export declare type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -34,7 +34,6 @@ exports.Breadcrumbs = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/breadcrumbs.css");
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -34,7 +34,6 @@ exports.ButtonGroup = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 declare type ButtonOwnProps = {
     /**
      * Modify size of the button.

package/cjs/core/Buttons/Button/Button.js

@@ -34,7 +34,6 @@ exports.Button = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Generic button component
  * @example

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/index.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.
@@ -14,7 +13,7 @@ export declare type DropdownButtonProps = {
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: 'default' | 'borderless';
+    styleType?: 'default' | 'borderless' | 'high-visibility';
     /**
      * Props for the `DropdownMenu` which extends `PopoverProps`.
      */
@@ -41,7 +40,7 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<{
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: "default" | "borderless" | undefined;
+    styleType?: "default" | "high-visibility" | "borderless" | undefined;
     /**
      * Props for the `DropdownMenu` which extends `PopoverProps`.
      */

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -36,7 +36,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../Button/index.js");
 const index_js_2 = require("../../DropdownMenu/index.js");
 const index_js_3 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -67,6 +66,6 @@ exports.DropdownButton = React.forwardRef((props, ref) => {
             setIsMenuOpen(false);
             (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
         }, style: { minWidth: menuWidth, ...dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.style } },
-        React.createElement(index_js_1.Button, { className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(index_js_3.SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(index_js_3.SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown', ...rest }, children)));
+        React.createElement(index_js_1.Button, { className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(index_js_3.SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(index_js_3.SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, ...rest }, children)));
 });
 exports.default = exports.DropdownButton;

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-import '@itwin/itwinui-css/css/tooltip.css';
 export declare type IconButtonProps = {
     /**
      * Button gets active style.

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -34,8 +34,6 @@ exports.IconButton = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
-require("@itwin/itwinui-css/css/tooltip.css");
 /**
  * Icon button
  * @example

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { ButtonProps } from '../Button/index.js';
 import type { Placement } from 'tippy.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -37,7 +37,6 @@ const index_js_1 = require("../Button/index.js");
 const index_js_2 = require("../IconButton/index.js");
 const index_js_3 = require("../../DropdownMenu/index.js");
 const index_js_4 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Split button component with a DropdownMenu.
  *

package/cjs/core/Carousel/Carousel.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/carousel.css';
 export declare type CarouselProps = {
     /**
      * Index of the currently shown slide.
@@ -59,7 +58,9 @@ export declare const Carousel: React.ForwardRefExoticComponent<{
     DotsList: React.ForwardRefExoticComponent<{
         length?: number | undefined;
         currentIndex?: number | undefined;
-        onSlideChange?: ((index: number) => void) | undefined;
+        onSlideChange?: ((index: number) => void) | undefined; /**
+         * Callback fired when the current slide changes.
+         */
     } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
     Dot: React.ForwardRefExoticComponent<{
         isActive?: boolean | undefined;

package/cjs/core/Carousel/Carousel.js

@@ -34,7 +34,6 @@ exports.Carousel = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/carousel.css");
 const CarouselContext_js_1 = require("./CarouselContext.js");
 const CarouselSlider_js_1 = require("./CarouselSlider.js");
 const CarouselSlide_js_1 = require("./CarouselSlide.js");
@@ -112,11 +111,11 @@ exports.Carousel = Object.assign(React.forwardRef((props, ref) => {
             }
         }
     };
-    const userOnSlideChange = React.useRef(onSlideChange);
+    const userOnSlideChange = (0, index_js_1.useLatestRef)(onSlideChange);
     React.useEffect(() => {
         var _a;
         (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
-    }, [currentIndex]);
+    }, [userOnSlideChange, currentIndex]);
     return (React.createElement("section", { "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className), ...rest, id: id },
         React.createElement(CarouselContext_js_1.CarouselContext.Provider, { value: {
                 currentIndex,

package/cjs/core/Carousel/CarouselDotsList.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/carousel.css';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need

package/cjs/core/Carousel/CarouselDotsList.js

@@ -36,7 +36,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const CarouselContext_js_1 = require("./CarouselContext.js");
 const index_js_1 = require("../utils/index.js");
 const CarouselDot_js_1 = require("./CarouselDot.js");
-require("@itwin/itwinui-css/css/carousel.css");
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need

package/cjs/core/Checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/checkbox.css';
 export declare type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.

package/cjs/core/Checkbox/Checkbox.js

@@ -35,7 +35,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../ProgressIndicators/index.js");
 const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/checkbox.css");
 /**
  * Simple input checkbox
  * @example

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorBuilderProps = Omit<CommonProps, 'title'>;
 /**
  * `ColorBuilder` consists of two parts:

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Slider/index.js");
-require("@itwin/itwinui-css/css/color-picker.css");
 const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
     const position = (0, index_js_1.getBoundedValue)(pointer, rect.top, rect.bottom);

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorInputPanelProps = {
     /**
      * The default color format to be inputted in the panel.

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -37,7 +37,6 @@ const index_js_1 = require("../Buttons/index.js");
 const index_js_2 = require("../Input/index.js");
 const index_js_3 = require("../utils/index.js");
 const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
-require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
  * It also allows switching between the specified formats using a swap button.

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ColorValue } from '../utils/index.js';
 import type { CommonProps, ColorType } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorPaletteProps = {
     /**
      * Label shown above the palette.

package/cjs/core/ColorPicker/ColorPalette.js

@@ -37,7 +37,6 @@ const index_js_1 = require("../utils/index.js");
 const ColorPicker_js_1 = require("./ColorPicker.js");
 const ColorSwatch_js_1 = require("./ColorSwatch.js");
 const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
-require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
  * @example

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { CommonProps, ColorType } from '../utils/index.js';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;

package/cjs/core/ColorPicker/ColorPicker.js

@@ -32,7 +32,6 @@ exports.ColorPicker = exports.getColorValue = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-require("@itwin/itwinui-css/css/color-picker.css");
 const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
 const ColorPickerContext_js_1 = require("./ColorPickerContext.js");

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType } from '../utils/index.js';
 export declare type ColorSwatchProps = {

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -33,7 +33,6 @@ exports.ColorSwatch = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/color-picker.css");
 const index_js_1 = require("../utils/index.js");
 const ColorPicker_js_1 = require("./ColorPicker.js");
 /**

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { InputProps } from '../Input/index.js';
 import type { SelectOption } from '../Select/index.js';
 import type { PopoverProps, CommonProps, InputContainerProps } from '../utils/index.js';
-import 'tippy.js/animations/shift-away.css';
 declare type ActionType = 'added' | 'removed';
 declare type MultipleOnChangeProps<T> = {
     value: T;

package/cjs/core/ComboBox/ComboBox.js

@@ -37,7 +37,6 @@ const index_js_1 = require("../Menu/index.js");
 const SelectTag_js_1 = __importDefault(require("../Select/SelectTag.js"));
 const index_js_2 = require("../Typography/index.js");
 const index_js_3 = require("../utils/index.js");
-require("tippy.js/animations/shift-away.css");
 const helpers_js_1 = require("./helpers.js");
 const ComboBoxDropdown_js_1 = require("./ComboBoxDropdown.js");
 const ComboBoxEndIcon_js_1 = require("./ComboBoxEndIcon.js");

package/cjs/core/ComboBox/ComboBoxDropdown.d.ts

@@ -3,5 +3,5 @@ import type { PopoverProps } from '../utils/index.js';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };
-export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "children" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
+export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "children" | "theme" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
 export {};

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/date-picker.css';
 import type { TimePickerProps } from '../TimePicker/index.js';
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.

package/cjs/core/DatePicker/DatePicker.js

@@ -34,7 +34,6 @@ exports.DatePicker = exports.generateLocalizedStrings = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/date-picker.css");
 const index_js_2 = require("../Buttons/IconButton/index.js");
 const index_js_3 = require("../TimePicker/index.js");
 const isSameDay = (a, b) => {

package/cjs/core/Dialog/Dialog.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogProps = {
     /**
@@ -29,9 +28,9 @@ export declare type DialogProps = {
  *   </Dialog.Main>
  * </Dialog>
  */
-export declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnExternalClick" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>> & {
+export declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "placement" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnExternalClick" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>> & {
     Backdrop: React.ForwardRefExoticComponent<Pick<import("./DialogBackdrop.js").DialogBackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
-    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain.js").DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain.js").DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "placement" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
     TitleBar: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBar.js").DialogTitleBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
         Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle.js").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
     };

package/cjs/core/Dialog/Dialog.js

@@ -33,7 +33,6 @@ exports.Dialog = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/dialog.css");
 const DialogTitleBar_js_1 = require("./DialogTitleBar.js");
 const DialogContent_js_1 = require("./DialogContent.js");
 const DialogBackdrop_js_1 = require("./DialogBackdrop.js");
@@ -64,7 +63,7 @@ const index_js_1 = require("../utils/index.js");
  * </Dialog>
  */
 exports.Dialog = Object.assign(React.forwardRef((props, ref) => {
-    const { children, trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', className, style, ...rest } = props;
+    const { children, trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, style, ...rest } = props;
     const dialogRootRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(ref, dialogRootRef);
     return (React.createElement(DialogContext_js_1.DialogContext.Provider, { value: {
@@ -80,6 +79,7 @@ exports.Dialog = Object.assign(React.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             dialogRootRef,
+            placement,
         } },
         React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: {
                 ...style,

package/cjs/core/Dialog/DialogButtonBar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogButtonBarProps = {
     /**
      * Buttons in the dialog bar.

package/cjs/core/Dialog/DialogButtonBar.js

@@ -34,7 +34,6 @@ exports.DialogButtonBar = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Dialog/DialogContent.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogContentProps = {
     /**
      * Main content in the `Dialog`.

package/cjs/core/Dialog/DialogContent.js

@@ -34,7 +34,6 @@ exports.DialogContent = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Dialog/DialogContext.d.ts

@@ -65,6 +65,10 @@ export declare type DialogContextProps = {
      * Dialog root ref. For internal use.
      */
     dialogRootRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Determines the positioning of Dialog on page.
+     */
+    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 export declare const DialogContext: React.Context<DialogContextProps | undefined>;
 export declare const useDialogContext: () => DialogContextProps;

package/cjs/core/Dialog/DialogMain.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogMainProps = {
     /**
@@ -32,5 +31,5 @@ export declare type DialogMainProps = {
  *   </Dialog.ButtonBar>
  * </Dialog.Main>
  */
-export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "placement" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
 export default DialogMain;

package/cjs/core/Dialog/DialogMain.js

@@ -34,7 +34,6 @@ exports.DialogMain = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 const DialogContext_js_1 = require("./DialogContext.js");
 const react_transition_group_1 = require("react-transition-group");
 const DialogDragContext_js_1 = require("./DialogDragContext.js");
@@ -61,7 +60,7 @@ const useDragAndDrop_js_1 = __importDefault(require("../utils/hooks/useDragAndDr
  */
 exports.DialogMain = React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
-    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, ...rest } = props;
+    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
     (0, index_js_1.useTheme)();
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
@@ -143,7 +142,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
+        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
             transform,
             ...style,
             ...propStyle,

package/cjs/core/Dialog/DialogTitleBar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogTitleBarProps = {
     /**