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

package/esm/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/esm/core/DatePicker/DatePicker.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton/index.js';
 import { TimePicker } from '../TimePicker/index.js';
 const isSameDay = (a, b) => {
@@ -111,17 +110,20 @@ export const generateLocalizedStrings = (locale) => {
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
 export const DatePicker = React.forwardRef((props, forwardedRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { date, onChange, localizedNames, className, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, isDateDisabled, ...rest } = props;
-    const monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
-    const shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
-    const longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
+    const monthNames = localizedNames?.months ?? defaultMonths;
+    const shortDays = localizedNames?.shortDays ?? defaultShortDays;
+    const longDays = localizedNames?.days ?? defaultLongDays;
     const [selectedDay, setSelectedDay] = React.useState(date);
     const [selectedStartDay, setSelectedStartDay] = React.useState(startDate);
     const [selectedEndDay, setSelectedEndDay] = React.useState(endDate);
-    const [focusedDay, setFocusedDay] = React.useState((_d = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _d !== void 0 ? _d : new Date());
-    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState((_f = (_e = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _e !== void 0 ? _e : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth()) !== null && _f !== void 0 ? _f : new Date().getMonth());
-    const [displayedYear, setDisplayedYear] = React.useState((_h = (_g = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _g !== void 0 ? _g : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getFullYear()) !== null && _h !== void 0 ? _h : new Date().getFullYear());
+    const [focusedDay, setFocusedDay] = React.useState(selectedStartDay ?? selectedDay ?? new Date());
+    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedStartDay?.getMonth() ??
+        selectedDay?.getMonth() ??
+        new Date().getMonth());
+    const [displayedYear, setDisplayedYear] = React.useState(selectedStartDay?.getFullYear() ??
+        selectedDay?.getFullYear() ??
+        new Date().getFullYear());
     // boolean that toggles between the user picking the start date and end date for date range
     const [isSelectingStartDate, setIsSelectingStartDate] = React.useState(true);
     // Used to focus days only when days are changed
@@ -137,15 +139,16 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
         setDisplayedYear(newYear);
     }, []);
     React.useEffect(() => {
-        var _a, _b, _c, _d;
         const currentDate = new Date();
         setSelectedDay(date);
         setSelectedStartDay(startDate);
         setSelectedEndDay(endDate);
         if (!enableRangeSelect) {
-            setFocusedDay(date !== null && date !== void 0 ? date : currentDate);
+            setFocusedDay(date ?? currentDate);
         }
-        setMonthAndYear((_b = (_a = startDate === null || startDate === void 0 ? void 0 : startDate.getMonth()) !== null && _a !== void 0 ? _a : date === null || date === void 0 ? void 0 : date.getMonth()) !== null && _b !== void 0 ? _b : currentDate.getMonth(), (_d = (_c = startDate === null || startDate === void 0 ? void 0 : startDate.getFullYear()) !== null && _c !== void 0 ? _c : date === null || date === void 0 ? void 0 : date.getFullYear()) !== null && _d !== void 0 ? _d : currentDate.getFullYear());
+        setMonthAndYear(startDate?.getMonth() ?? date?.getMonth() ?? currentDate.getMonth(), startDate?.getFullYear() ??
+            date?.getFullYear() ??
+            currentDate.getFullYear());
     }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
     const days = React.useMemo(() => {
         let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
@@ -170,8 +173,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
         return weeksInMonth;
     }, [days]);
     const getNewFocusedDate = (newYear, newMonth) => {
-        var _a;
-        const currentDate = (_a = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _a !== void 0 ? _a : new Date();
+        const currentDate = selectedStartDay ?? selectedDay ?? new Date();
         const newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
         return newDate;
     };
@@ -200,51 +202,51 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     const onDayClick = (day) => {
         // single date selection
         if (!enableRangeSelect) {
-            if (day.getMonth() !== (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth())) {
+            if (day.getMonth() !== selectedDay?.getMonth()) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            const currentDate = selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date();
+            const currentDate = selectedDay ?? new Date();
             const newDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
             setSelectedDay(newDate);
             setFocusedDay(newDate);
-            isSingleOnChange(onChange, enableRangeSelect) && (onChange === null || onChange === void 0 ? void 0 : onChange(newDate));
+            isSingleOnChange(onChange, enableRangeSelect) && onChange?.(newDate);
         }
         // start date selection (date range only)
         else if (isSelectingStartDate) {
-            if (day.getMonth() !== (selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth())) {
+            if (day.getMonth() !== selectedStartDay?.getMonth()) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            const currentStartDate = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : new Date();
+            const currentStartDate = selectedStartDay ?? new Date();
             const newStartDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds());
             setSelectedStartDay(newStartDate);
             setFocusedDay(newStartDate);
             // if the start date is after the end date or the end date is undefined, reset the end date
             if (!isBefore(newStartDate, selectedEndDay)) {
                 setSelectedEndDay(newStartDate);
-                onChange === null || onChange === void 0 ? void 0 : onChange(newStartDate, newStartDate);
+                onChange?.(newStartDate, newStartDate);
             }
             else {
-                selectedEndDay && (onChange === null || onChange === void 0 ? void 0 : onChange(newStartDate, selectedEndDay));
+                selectedEndDay && onChange?.(newStartDate, selectedEndDay);
             }
             setIsSelectingStartDate(false);
         }
         // end date selection (date range only)
         else {
-            if (day.getMonth() !== (selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth())) {
+            if (day.getMonth() !== selectedEndDay?.getMonth()) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            const currentEndDate = selectedEndDay !== null && selectedEndDay !== void 0 ? selectedEndDay : new Date();
+            const currentEndDate = selectedEndDay ?? new Date();
             const newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
             setFocusedDay(newEndDate);
             // if the end date is before the start date, move back the start date and still have user select end date
             if (!isBefore(newEndDate, selectedStartDay)) {
                 setSelectedEndDay(newEndDate);
-                selectedStartDay && (onChange === null || onChange === void 0 ? void 0 : onChange(selectedStartDay, newEndDate));
+                selectedStartDay && onChange?.(selectedStartDay, newEndDate);
                 setIsSelectingStartDate(true);
             }
             else {
                 setSelectedStartDay(newEndDate);
-                selectedEndDay && (onChange === null || onChange === void 0 ? void 0 : onChange(newEndDate, selectedEndDay));
+                selectedEndDay && onChange?.(newEndDate, selectedEndDay);
             }
         }
     };
@@ -296,7 +298,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
             case 'Enter':
             case ' ':
             case 'Spacebar':
-                if (!(isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(focusedDay))) {
+                if (!isDateDisabled?.(focusedDay)) {
                     onDayClick(focusedDay);
                 }
                 event.preventDefault();
@@ -349,17 +351,14 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
             React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
                 return (React.createElement(Box, { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
-                    const isDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(weekDay);
+                    const isDisabled = isDateDisabled?.(weekDay);
                     return (React.createElement(Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => !isDisabled && onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, "aria-disabled": isDisabled ? 'true' : undefined, ref: (element) => isSameDay(weekDay, focusedDay) &&
                             needFocus.current &&
-                            (element === null || element === void 0 ? void 0 : element.focus()) }, dateValue));
+                            element?.focus() }, dateValue));
                 })));
             }))),
-        showTime && (React.createElement(TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, useCombinedRenderer: useCombinedRenderer, combinedRenderer: combinedRenderer, hourRenderer: hourRenderer, minuteRenderer: minuteRenderer, secondRenderer: secondRenderer, meridiemRenderer: meridiemRenderer, onChange: (date) => {
-                var _a, _b, _c, _d, _e, _f;
-                return isSingleOnChange(onChange, enableRangeSelect)
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(date)
-                    : onChange === null || onChange === void 0 ? void 0 : onChange(new Date((_a = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _a !== void 0 ? _a : date.getFullYear(), (_b = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _b !== void 0 ? _b : date.getMonth(), (_c = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getDate()) !== null && _c !== void 0 ? _c : date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()), new Date((_d = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getFullYear()) !== null && _d !== void 0 ? _d : date.getFullYear(), (_e = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth()) !== null && _e !== void 0 ? _e : date.getMonth(), (_f = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getDate()) !== null && _f !== void 0 ? _f : date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
-            } }))));
+        showTime && (React.createElement(TimePicker, { date: selectedStartDay ?? selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, useCombinedRenderer: useCombinedRenderer, combinedRenderer: combinedRenderer, hourRenderer: hourRenderer, minuteRenderer: minuteRenderer, secondRenderer: secondRenderer, meridiemRenderer: meridiemRenderer, onChange: (date) => isSingleOnChange(onChange, enableRangeSelect)
+                ? onChange?.(date)
+                : onChange?.(new Date(selectedStartDay?.getFullYear() ?? date.getFullYear(), selectedStartDay?.getMonth() ?? date.getMonth(), selectedStartDay?.getDate() ?? date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()), new Date(selectedEndDay?.getFullYear() ?? date.getFullYear(), selectedEndDay?.getMonth() ?? date.getMonth(), selectedEndDay?.getDate() ?? date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds())) }))));
 });
 export default DatePicker;

package/esm/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/esm/core/Dialog/Dialog.js

@@ -3,19 +3,26 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/dialog.css';
 import { DialogTitleBar } from './DialogTitleBar.js';
 import { DialogContent } from './DialogContent.js';
 import { DialogBackdrop } from './DialogBackdrop.js';
 import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
-import { useMergedRefs, Box } from '../utils/index.js';
+import { useMergedRefs, Box, useGlobals, getDocument, useIsClient, } from '../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, portal = false, ...rest } = props;
     const dialogRootRef = React.useRef(null);
-    const refs = useMergedRefs(ref, dialogRootRef);
+    const context = useGlobals();
+    const isClient = useIsClient();
+    const portalTo = typeof portal !== 'boolean'
+        ? portal.to
+        : portal
+            ? context?.portalContainerRef?.current ?? getDocument()?.body
+            : null;
+    const dialog = (React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: useMergedRefs(ref, dialogRootRef), ...rest }));
     return (React.createElement(DialogContext.Provider, { value: {
             isOpen,
             onClose,
@@ -29,8 +36,8 @@ const DialogComponent = React.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             dialogRootRef,
-        } },
-        React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, ...rest })));
+            placement,
+        } }, portalTo && isClient ? ReactDOM.createPortal(dialog, portalTo) : dialog));
 });
 /**
  * Dialog component.

package/esm/core/Dialog/DialogBackdrop.js

@@ -27,7 +27,7 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
         if (isDismissible && closeOnExternalClick && onClose) {
             onClose(event);
         }
-        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        onMouseDown?.(event);
     };
     return (React.createElement(Backdrop, { isVisible: isVisible, className: cx({ 'iui-backdrop-fixed': relativeTo === 'viewport' }, className), ref: refs, onMouseDown: handleMouseDown, style: {
             pointerEvents: 'auto',

package/esm/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/esm/core/Dialog/DialogButtonBar.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/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/esm/core/Dialog/DialogContent.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

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

@@ -61,10 +61,25 @@ export declare type DialogContextProps = {
      * @default 'viewport'
      */
     relativeTo?: 'container' | 'viewport';
+    /**
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     * Recommended to set to true when for modal dialogs that use `relativeTo='viewport'`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default false
+     */
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * 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/esm/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/esm/core/Dialog/DialogMain.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
@@ -32,7 +31,7 @@ import useDragAndDrop from '../utils/hooks/useDragAndDrop.js';
  */
 export const DialogMain = React.forwardRef((props, ref) => {
     const dialogContext = 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 = useMergedRefs(dialogRef, ref);
@@ -46,8 +45,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
     }, [isOpen]);
     // Prevents document from scrolling when the dialog is open.
     React.useEffect(() => {
-        var _a;
-        const ownerDocument = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument;
+        const ownerDocument = dialogRef.current?.ownerDocument;
         // If there is no `ownerDocument` or `preventDocumentScroll` is false or
         // document body originally has `overflow: hidden` (possibly from other/parent dialog), then do nothing.
         if (!ownerDocument ||
@@ -74,7 +72,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
             onClose(event);
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown?.(event);
     };
     const { onPointerDown, transform } = useDragAndDrop(dialogRef, dialogContext.dialogRootRef, isDraggable);
     const handlePointerDown = React.useCallback((event) => {
@@ -84,23 +82,19 @@ export const DialogMain = React.forwardRef((props, ref) => {
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
     useIsomorphicLayoutEffect(() => {
-        var _a;
         if (!isDraggable || !isOpen) {
             return;
         }
-        const rect = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const rect = dialogRef.current?.getBoundingClientRect();
         const [translateX, translateY] = getTranslateValues(dialogRef.current);
-        setStyle((oldStyle) => {
-            var _a, _b;
-            return ({
-                ...oldStyle,
-                width: rect === null || rect === void 0 ? void 0 : rect.width,
-                height: rect === null || rect === void 0 ? void 0 : rect.height,
-                left: (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft,
-                top: (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop,
-                transform: `translate(${translateX}px,${translateY}px)`,
-            });
-        });
+        setStyle((oldStyle) => ({
+            ...oldStyle,
+            width: rect?.width,
+            height: rect?.height,
+            left: dialogRef.current?.offsetLeft,
+            top: dialogRef.current?.offsetTop,
+            transform: `translate(${translateX}px,${translateY}px)`,
+        }));
     }, [isDraggable, isOpen]);
     const setResizeStyle = React.useCallback((newStyle) => {
         setStyle((oldStyle) => ({
@@ -113,7 +107,7 @@ export const 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,
@@ -132,15 +126,14 @@ export const DialogMain = React.forwardRef((props, ref) => {
         }, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {
-            var _a, _b;
-            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
-            setFocus && ((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true }));
+            previousFocusedElement.current = dialogRef.current?.ownerDocument
+                .activeElement;
+            setFocus && dialogRef.current?.focus({ preventScroll: true });
         }, 
         // Brings back focus to the previously focused element when closed
         onExit: () => {
-            var _a, _b, _c;
-            if ((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.activeElement)) {
-                (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+            if (dialogRef.current?.contains(dialogRef.current?.ownerDocument.activeElement)) {
+                previousFocusedElement.current?.focus();
             }
         }, unmountOnExit: true, nodeRef: dialogRef },
         React.createElement(DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },

package/esm/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/esm/core/Dialog/DialogTitleBar.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { SvgClose, mergeEventHandlers, Box } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';

package/esm/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/esm/core/Dialog/DialogTitleBarTitle.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -26,29 +26,27 @@ import { Menu } from '../Menu/index.js';
  */
 export const DropdownMenu = (props) => {
     const { menuItems, children, className, style, role = 'menu', visible, placement = 'bottom-start', onShow, onHide, trigger, id, ...rest } = props;
-    const [isVisible, setIsVisible] = React.useState(visible !== null && visible !== void 0 ? visible : false);
+    const [isVisible, setIsVisible] = React.useState(visible ?? false);
     React.useEffect(() => {
-        setIsVisible(visible !== null && visible !== void 0 ? visible : false);
+        setIsVisible(visible ?? false);
     }, [visible]);
     const open = React.useCallback(() => setIsVisible(true), []);
     const close = React.useCallback(() => setIsVisible(false), []);
     const targetRef = React.useRef(null);
     const onShowHandler = React.useCallback((instance) => {
         setIsVisible(true);
-        onShow === null || onShow === void 0 ? void 0 : onShow(instance);
+        onShow?.(instance);
     }, [onShow]);
     const onHideHandler = React.useCallback((instance) => {
-        var _a;
         setIsVisible(false);
-        (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        onHide === null || onHide === void 0 ? void 0 : onHide(instance);
+        targetRef.current?.focus();
+        onHide?.(instance);
     }, [onHide]);
     return (React.createElement(Popover, { content: React.createElement(Menu, { className: className, style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
         ref: mergeRefs(targetRef, props.children.ref),
         onClick: (args) => {
-            var _a, _b;
             trigger === undefined && (isVisible ? close() : open());
-            (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+            children.props.onClick?.(args);
         },
     })));
 };

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/expandable-block.css';
 declare type ExpandableBlockProps = {
     /**
      * The main text displayed on the block, regardless of state.
@@ -44,6 +43,11 @@ declare type ExpandableBlockProps = {
      * @default 'default'
      */
     styleType?: 'default' | 'borderless';
+    /**
+     * Disables ExpandableBlock.
+     * @default false
+     */
+    disabled?: boolean;
 };
 /**
  * Container that allows content to be hidden behind a brief title and a caption.

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { StatusIconMap, WithCSSTransition, SvgChevronRight, Icon, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/expandable-block.css';
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example
@@ -16,18 +15,21 @@ import '@itwin/itwinui-css/css/expandable-block.css';
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
 export const ExpandableBlock = React.forwardRef((props, ref) => {
-    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', ...rest } = props;
-    const icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && StatusIconMap[status]());
+    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
+    const icon = endIcon ?? (status && StatusIconMap[status]());
     const [expanded, setExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
         setExpanded(isExpanded);
     }, [isExpanded]);
     const handleToggle = () => {
+        if (disabled) {
+            return;
+        }
         setExpanded(!expanded);
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
+        onToggle?.(!expanded);
     };
     const onKeyDown = (event) => {
-        if (event.altKey) {
+        if (event.altKey || disabled) {
             return;
         }
         if (event.key === 'Enter' ||
@@ -42,7 +44,7 @@ export const ExpandableBlock = React.forwardRef((props, ref) => {
             'iui-small': size === 'small',
             'iui-borderless': styleType === 'borderless',
         }, className), style: style, ref: ref, ...rest },
-        React.createElement(Box, { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
+        React.createElement(Box, { role: 'button', "aria-expanded": expanded, className: 'iui-header', "aria-disabled": disabled, tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             React.createElement(SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
             React.createElement(Box, { as: 'span', className: 'iui-expandable-block-label' },
                 React.createElement(Box, { className: 'iui-title' }, title),

package/esm/core/Fieldset/Fieldset.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/fieldset.css';
 declare type FieldsetProps = {
     /**
      * The caption or title for the fieldset.

package/esm/core/Fieldset/Fieldset.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import { Box } from '../utils/index.js';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/fieldset.css';
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example

package/esm/core/FileUpload/FileEmptyCard.js

@@ -18,7 +18,7 @@ const FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
 // FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(FileEmptyCard.Icon, null),
         React.createElement(FileEmptyCard.Text, null,
             React.createElement(FileUploadCard.InputLabel, null, "Choose a file"),

package/esm/core/FileUpload/FileUpload.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.

package/esm/core/FileUpload/FileUpload.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, useMergedRefs } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
@@ -23,31 +22,28 @@ export const FileUpload = React.forwardRef((props, ref) => {
         e.stopPropagation();
     };
     const onDragEnterHandler = (e) => {
-        var _a, _b, _c;
         e.preventDefault();
         e.stopPropagation();
         // only set active if a file is dragged over
-        if (!isDragActive && ((_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.kind) === 'file') {
+        if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
             setIsDragActive(true);
         }
     };
     const onDragLeaveHandler = (e) => {
-        var _a;
         e.preventDefault();
         e.stopPropagation();
         // only set inactive if secondary target is outside the component
         if (isDragActive &&
-            !((_a = fileUploadRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            !fileUploadRef.current?.contains(e.relatedTarget)) {
             setIsDragActive(false);
         }
     };
     const onDropHandler = (e) => {
-        var _a;
         e.preventDefault();
         e.stopPropagation();
         if (isDragActive) {
             setIsDragActive(false);
-            onFileDropped((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
+            onFileDropped(e.dataTransfer?.files);
         }
     };
     return (React.createElement(Box, { className: cx('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },

package/esm/core/FileUpload/FileUploadCard.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadCardProps = {
     /**
      * Files to pass (only needed when passing a custom action)