@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 3.0.0-dev.1
+
+### Major Changes
+
+- [#1302](https://github.com/iTwin/iTwinUI/pull/1302): The dependencies on `@itwin/itwinui-css` and `@itwin/itwinui-variable` have been removed. This means `@itwin/itwinui-react` will bring its own stylesheet.
+- [#1322](https://github.com/iTwin/iTwinUI/pull/1322): All css imports within components have been removed. `@itwin/itwinui-react/styles.css` must now be manually imported at the entrypoint.
+- [#1302](https://github.com/iTwin/iTwinUI/pull/1302): All elements have had their class names changed to prevent conflict with older versions. It is strongly recommended to switch these internal classes with your own classes or data attributes.
+
+### Minor Changes
+
+- [#1321](https://github.com/iTwin/iTwinUI/pull/1321): Added `disabled` prop to ExpandableBlock component. When activated, it triggers the "disabled" CSS styling for the ExpandableBlock and disables user interaction with it.
+- [#1073](https://github.com/iTwin/iTwinUI/pull/1073): Added new `TransferList` component which is used to move one or more items between lists. Added the following subcomponents: `TransferList.ListWrapper`, `TransferList.ListboxWrapper`, `TransferList.ListboxLabel`, `TransferList.Listbox`, `TransferList.Item`, and `TransferList.Toolbar`
+- [#1323](https://github.com/iTwin/iTwinUI/pull/1323): Added `placement` prop to `Dialog` to allow placing it at one of the corners.
+
 ## 3.0.0-dev.0
 
 ### Major Changes
@@ -21,6 +35,12 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.11.5
+
+### Patch Changes
+
+- [#1329](https://github.com/iTwin/iTwinUI/pull/1329): Fixed an issue where the visually hidden `FileUploadCard.Input` was inadvertently showing when focused.
+
 ## 2.11.4
 
 ### Patch Changes

package/README.md

@@ -39,43 +39,49 @@ yarn add @itwin/itwinui-react
 
 ---
 
-## Usage
+## Setup
 
-Import the component you want and start using it!
+Wrap your application entrypoint in `ThemeProvider` and import `styles.css`.
 
 ```jsx
-import { Button } from '@itwin/itwinui-react';
-
-const App = () => (
-  <Button>Hello!</Button>
-);
+import { ThemeProvider } from '@itwin/itwinui-react';
+import '@itwin/itwinui-react/styles.css';
+
+export default function App() {
+  return (
+    <>
+      <ThemeProvider>
+        {/* Your components go here. */}
+      </ThemeProvider>
+    </>
+  );
+}
 ```
 
-Yes, that's really all you need as you can see in this live interactive demo:
-
-[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+ThemeProvider has a `theme` prop which accepts one of the following values:
+  - `light` (default)
+  - `dark`
+  - `os` (respects the color scheme of the operating system)
+  - `inherit`
 
 ---
 
-## Theming
+## Usage
 
-By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop:
-  - `light` (default)
-  - `dark`
-  - `os` (which respects the color scheme of the operating system)
+After setting up ThemeProvider and styles, import the component you want and start using it!
 
 ```jsx
-import { ThemeProvider } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 
-const App = () => (
-  <>
-    <ThemeProvider theme='dark'>
-      {/* Your components go here. */}
-    </ThemeProvider>
-  </>
+const Page = () => (
+  <Button>Hello!</Button>
 );
 ```
 
+Check out this template for a live interactive demo:
+
+[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+
 ---
 
 ## FAQ

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 { PolymorphicForwardRefComponent } from '../utils/index.js';
 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 { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 declare type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;

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 { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 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 type { PolymorphicForwardRefComponent } from '../utils/index.js';
-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;
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));

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

@@ -1,6 +1,5 @@
 import { SoftBackgrounds } from '../utils/index.js';
 import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
 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 { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 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,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 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 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonProps = {
     /**
      * 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

@@ -2,7 +2,6 @@
 import type { ButtonProps } from '../Button/Button.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

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

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.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/Button.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,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 declare type CarouselProps = {
     /**
      * Index of the currently shown slide.

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");

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

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 declare type CarouselDotsListProps = {
     /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
     length?: number;

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,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/checkbox.css';
 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,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorBuilder` consists of two parts:
  * a color canvas to adjust saturation and lightness values,

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,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 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 { ColorType, PolymorphicForwardRefComponent } 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 { ColorType, PolymorphicForwardRefComponent } 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,4 +1,3 @@
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
 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 { SelectOption } from '../Select/index.js';
 import type { Input } from '../Input/Input.js';
 import type { PopoverProps, InputContainerProps, CommonProps } 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

@@ -36,7 +36,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/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/date-picker.css';
 import type { TimePickerProps } from '../TimePicker/TimePicker.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';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type DialogProps = {

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");
@@ -42,7 +41,7 @@ const DialogButtonBar_js_1 = require("./DialogButtonBar.js");
 const DialogMain_js_1 = require("./DialogMain.js");
 const index_js_1 = require("../utils/index.js");
 const DialogComponent = React.forwardRef((props, ref) => {
-    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', className, ...rest } = props;
+    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, ...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: {
@@ -58,6 +57,7 @@ const DialogComponent = React.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             dialogRootRef,
+            placement,
         } },
         React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, ...rest })));
 });

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

@@ -1,4 +1,3 @@
-import '@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/DialogButtonBar.js

@@ -6,7 +6,6 @@ exports.DialogButtonBar = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 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,4 +1,3 @@
-import '@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/DialogContent.js

@@ -6,7 +6,6 @@ exports.DialogContent = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 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,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogMainProps = {
     /**

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;
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
@@ -142,7 +141,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,
             overflow: 'unset',
             ...style,

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

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

package/cjs/core/Dialog/DialogTitleBar.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("../Buttons/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 const DialogContext_js_1 = require("./DialogContext.js");
 const DialogTitleBarTitle_js_1 = require("./DialogTitleBarTitle.js");
 const DialogDragContext_js_1 = require("./DialogDragContext.js");

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

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -6,7 +6,6 @@ exports.DialogTitleBarTitle = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example