@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/core/ComboBox/ComboBoxMenuItem.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useSafeContext, useMergedRefs, SvgCheckmark } from '../../utils/index.js';
+import { ComboBoxStateContext } from './helpers.js';
+import { ListItem } from '../List/ListItem.js';
+export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef)=>{
+    let { children, isSelected, disabled, value, onClick, sublabel, size = sublabel ? 'large' : 'default', startIcon, endIcon, role = 'option', index, ...rest } = props;
+    let { focusedIndex, enableVirtualization } = useSafeContext(ComboBoxStateContext);
+    let focusRef = (el)=>{
+        if (!enableVirtualization && focusedIndex === index) el?.scrollIntoView({
+            block: 'nearest'
+        });
+    };
+    let refs = useMergedRefs(forwardedRef, focusRef);
+    return React.createElement(ListItem, {
+        as: "div",
+        actionable: true,
+        size: size,
+        active: isSelected,
+        disabled: disabled,
+        focused: focusedIndex === index,
+        ref: refs,
+        onClick: ()=>onClick?.(value),
+        role: role,
+        tabIndex: 'presentation' === role ? void 0 : -1,
+        "aria-selected": isSelected,
+        "aria-disabled": disabled,
+        "data-iui-index": index,
+        ...rest
+    }, startIcon && React.createElement(ListItem.Icon, {
+        as: "span",
+        "aria-hidden": true
+    }, startIcon), React.createElement(ListItem.Content, null, children, sublabel && React.createElement(ListItem.Description, null, sublabel)), endIcon || isSelected && React.createElement(ListItem.Icon, {
+        as: "span",
+        "aria-hidden": true
+    }, endIcon ?? React.createElement(SvgCheckmark, null)));
+}));
+ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/DEV-esm/core/ComboBox/ComboBoxMultipleContainer.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SelectTagContainer } from '../Select/SelectTagContainer.js';
+export const ComboBoxMultipleContainer = React.forwardRef((props, ref)=>{
+    let { selectedItems = [], ...rest } = props;
+    return React.createElement(SelectTagContainer, {
+        ref: ref,
+        tags: selectedItems,
+        ...rest
+    });
+});
+ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

package/DEV-esm/core/ComboBox/helpers.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const ComboBoxRefsContext = React.createContext(void 0);
+ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
+export const ComboBoxStateContext = React.createContext(void 0);
+ComboBoxStateContext.displayName = 'ComboBoxStateContext';

package/DEV-esm/core/DatePicker/DatePicker.js

@@ -0,0 +1,362 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, Box, useId } from '../../utils/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { TimePicker } from '../TimePicker/TimePicker.js';
+let isSameDay = (a, b)=>a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+let isInDateRange = (date, startDate, endDate)=>{
+    if (!date || !startDate || !endDate) return false;
+    let minDate = new Date(startDate);
+    let maxDate = new Date(endDate);
+    let testDate = new Date(date);
+    testDate && testDate.setHours(0, 0, 0, 0);
+    minDate && minDate.setHours(0, 0, 0, 0);
+    maxDate && maxDate.setHours(0, 0, 0, 0);
+    return testDate > minDate && testDate < maxDate;
+};
+let isSingleOnChange = (onChange, enableRangeSelect)=>!enableRangeSelect;
+let defaultMonths = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+];
+let defaultShortDays = [
+    'Su',
+    'Mo',
+    'Tu',
+    'We',
+    'Th',
+    'Fr',
+    'Sa'
+];
+let defaultLongDays = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+];
+export const generateLocalizedStrings = (locale)=>{
+    let shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+        weekday: 'short'
+    });
+    let longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+        weekday: 'long'
+    });
+    let monthFormatter = new Intl.DateTimeFormat(locale, {
+        month: 'long'
+    });
+    let months = [
+        monthFormatter.format(new Date(2020, 0, 1)),
+        monthFormatter.format(new Date(2020, 1, 1)),
+        monthFormatter.format(new Date(2020, 2, 1)),
+        monthFormatter.format(new Date(2020, 3, 1)),
+        monthFormatter.format(new Date(2020, 4, 1)),
+        monthFormatter.format(new Date(2020, 5, 1)),
+        monthFormatter.format(new Date(2020, 6, 1)),
+        monthFormatter.format(new Date(2020, 7, 1)),
+        monthFormatter.format(new Date(2020, 8, 1)),
+        monthFormatter.format(new Date(2020, 9, 1)),
+        monthFormatter.format(new Date(2020, 10, 1)),
+        monthFormatter.format(new Date(2020, 11, 1))
+    ];
+    let days = [
+        longWeekDayFormatter.format(new Date(2020, 10, 1)),
+        longWeekDayFormatter.format(new Date(2020, 10, 2)),
+        longWeekDayFormatter.format(new Date(2020, 10, 3)),
+        longWeekDayFormatter.format(new Date(2020, 10, 4)),
+        longWeekDayFormatter.format(new Date(2020, 10, 5)),
+        longWeekDayFormatter.format(new Date(2020, 10, 6)),
+        longWeekDayFormatter.format(new Date(2020, 10, 7))
+    ];
+    let shortDays = [
+        shortWeekDayFormatter.format(new Date(2020, 10, 1)).slice(0, 2),
+        shortWeekDayFormatter.format(new Date(2020, 10, 2)).slice(0, 2),
+        shortWeekDayFormatter.format(new Date(2020, 10, 3)).slice(0, 2),
+        shortWeekDayFormatter.format(new Date(2020, 10, 4)).slice(0, 2),
+        shortWeekDayFormatter.format(new Date(2020, 10, 5)).slice(0, 2),
+        shortWeekDayFormatter.format(new Date(2020, 10, 6)).slice(0, 2),
+        shortWeekDayFormatter.format(new Date(2020, 10, 7)).slice(0, 2)
+    ];
+    return {
+        months,
+        shortDays,
+        days
+    };
+};
+export const DatePicker = React.forwardRef((props, forwardedRef)=>{
+    let { 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, monthYearProps, calendarProps, monthProps, weekDayProps, dayProps, weekProps, isDateDisabled, applyBackground = true, showDatesOutsideMonth = true, ...rest } = props;
+    let monthNames = localizedNames?.months ?? defaultMonths;
+    let shortDays = localizedNames?.shortDays ?? defaultShortDays;
+    let longDays = localizedNames?.days ?? defaultLongDays;
+    let [selectedDay, setSelectedDay] = React.useState(date);
+    let [selectedStartDay, setSelectedStartDay] = React.useState(startDate);
+    let [selectedEndDay, setSelectedEndDay] = React.useState(endDate);
+    let [focusedDay, setFocusedDay] = React.useState(selectedStartDay ?? selectedDay ?? new Date());
+    let [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedStartDay?.getMonth() ?? selectedDay?.getMonth() ?? new Date().getMonth());
+    let [displayedYear, setDisplayedYear] = React.useState(selectedStartDay?.getFullYear() ?? selectedDay?.getFullYear() ?? new Date().getFullYear());
+    let [isSelectingStartDate, setIsSelectingStartDate] = React.useState(true);
+    let needFocus = React.useRef(setFocus);
+    React.useEffect(()=>{
+        if (needFocus.current) needFocus.current = false;
+    });
+    let setMonthAndYear = React.useCallback((newMonth, newYear)=>{
+        setDisplayedMonthIndex(newMonth);
+        setDisplayedYear(newYear);
+    }, []);
+    React.useEffect(()=>{
+        let currentDate = new Date();
+        setSelectedDay(date);
+        setSelectedStartDay(startDate);
+        setSelectedEndDay(endDate);
+        if (!enableRangeSelect) setFocusedDay(date ?? currentDate);
+        setMonthAndYear(startDate?.getMonth() ?? date?.getMonth() ?? currentDate.getMonth(), startDate?.getFullYear() ?? date?.getFullYear() ?? currentDate.getFullYear());
+    }, [
+        date,
+        setMonthAndYear,
+        startDate,
+        endDate,
+        enableRangeSelect
+    ]);
+    let days = React.useMemo(()=>{
+        let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
+        if (0 === offsetToFirst && showDatesOutsideMonth) offsetToFirst = 7;
+        let daysInMonth = [];
+        for(let i = 1; i <= 42; i++){
+            let adjustedDay = i - offsetToFirst;
+            daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
+        }
+        return daysInMonth;
+    }, [
+        displayedMonthIndex,
+        displayedYear,
+        showDatesOutsideMonth
+    ]);
+    let weeks = React.useMemo(()=>{
+        let weeksInMonth = [];
+        let weekCount = Math.ceil(days.length / 7);
+        for(let i = 0; i < weekCount; i++)weeksInMonth.push(days.slice(7 * i, (i + 1) * 7));
+        return weeksInMonth;
+    }, [
+        days
+    ]);
+    let getNewFocusedDate = (newYear, newMonth)=>{
+        let currentDate = selectedStartDay ?? selectedDay ?? new Date();
+        let newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
+        return newDate;
+    };
+    let handleMoveToPreviousYear = ()=>{
+        let newYear = displayedYear - 1;
+        setMonthAndYear(displayedMonthIndex, newYear);
+        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+    };
+    let handleMoveToNextYear = ()=>{
+        let newYear = displayedYear + 1;
+        setMonthAndYear(displayedMonthIndex, newYear);
+        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+    };
+    let handleMoveToPreviousMonth = ()=>{
+        let newMonth = 0 !== displayedMonthIndex ? displayedMonthIndex - 1 : 11;
+        let newYear = 0 !== displayedMonthIndex ? displayedYear : displayedYear - 1;
+        setMonthAndYear(newMonth, newYear);
+        setFocusedDay(getNewFocusedDate(newYear, newMonth));
+    };
+    let handleMoveToNextMonth = ()=>{
+        let newMonth = 11 !== displayedMonthIndex ? displayedMonthIndex + 1 : 0;
+        let newYear = 11 !== displayedMonthIndex ? displayedYear : displayedYear + 1;
+        setMonthAndYear(newMonth, newYear);
+        setFocusedDay(getNewFocusedDate(newYear, newMonth));
+    };
+    let onDayClick = (day)=>{
+        if (enableRangeSelect) {
+            if (isSelectingStartDate) {
+                if (day.getMonth() !== selectedStartDay?.getMonth()) setMonthAndYear(day.getMonth(), day.getFullYear());
+                let currentStartDate = selectedStartDay ?? new Date();
+                let newStartDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds());
+                setSelectedStartDay(newStartDate);
+                setFocusedDay(newStartDate);
+                if (isBefore(newStartDate, selectedEndDay)) selectedEndDay && onChange?.(newStartDate, selectedEndDay);
+                else {
+                    setSelectedEndDay(newStartDate);
+                    onChange?.(newStartDate, newStartDate);
+                }
+                setIsSelectingStartDate(false);
+            } else {
+                if (day.getMonth() !== selectedEndDay?.getMonth()) setMonthAndYear(day.getMonth(), day.getFullYear());
+                let currentEndDate = selectedEndDay ?? new Date();
+                let newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
+                setFocusedDay(newEndDate);
+                if (isBefore(newEndDate, selectedStartDay)) {
+                    setSelectedStartDay(newEndDate);
+                    selectedEndDay && onChange?.(newEndDate, selectedEndDay);
+                } else {
+                    setSelectedEndDay(newEndDate);
+                    selectedStartDay && onChange?.(selectedStartDay, newEndDate);
+                    setIsSelectingStartDate(true);
+                }
+            }
+        } else {
+            if (day.getMonth() !== selectedDay?.getMonth()) setMonthAndYear(day.getMonth(), day.getFullYear());
+            let currentDate = selectedDay ?? new Date();
+            let newDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
+            setSelectedDay(newDate);
+            setFocusedDay(newDate);
+            isSingleOnChange(onChange, enableRangeSelect) && onChange?.(newDate);
+        }
+    };
+    let handleCalendarKeyDown = (event)=>{
+        if (event.altKey) return;
+        if (!focusedDay) return;
+        let adjustedFocusedDay = new Date(focusedDay);
+        switch(event.key){
+            case 'ArrowDown':
+                adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
+                if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) handleMoveToNextMonth();
+                setFocusedDay(adjustedFocusedDay);
+                needFocus.current = true;
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                adjustedFocusedDay.setDate(focusedDay.getDate() - 7);
+                if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) handleMoveToPreviousMonth();
+                setFocusedDay(adjustedFocusedDay);
+                needFocus.current = true;
+                event.preventDefault();
+                break;
+            case 'ArrowLeft':
+                adjustedFocusedDay.setDate(focusedDay.getDate() - 1);
+                if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) handleMoveToPreviousMonth();
+                setFocusedDay(adjustedFocusedDay);
+                needFocus.current = true;
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                adjustedFocusedDay.setDate(focusedDay.getDate() + 1);
+                if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) handleMoveToNextMonth();
+                setFocusedDay(adjustedFocusedDay);
+                needFocus.current = true;
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+            case 'Spacebar':
+                if (!isDateDisabled?.(focusedDay)) onDayClick(focusedDay);
+                event.preventDefault();
+                break;
+        }
+    };
+    let getDayClass = (day)=>{
+        if (day.getMonth() !== displayedMonthIndex) return 'iui-calendar-day-outside-month';
+        let dayClass = 'iui-calendar-day';
+        let isSelectedDay = isSameDay(day, selectedDay) || isSameDay(day, selectedStartDay) && isSameDay(day, selectedEndDay);
+        if (isSelectedDay) dayClass += '-selected';
+        else if (isSameDay(day, selectedStartDay)) dayClass += '-range-start';
+        else if (isSameDay(day, selectedEndDay)) dayClass += '-range-end';
+        if (selectedStartDay && selectedEndDay && isInDateRange(day, selectedStartDay, selectedEndDay)) dayClass += '-range';
+        if (isSameDay(day, new Date())) dayClass += '-today';
+        return dayClass;
+    };
+    let dateTableId = useId();
+    return React.createElement(Box, {
+        className: cx('iui-date-picker', {
+            'iui-popover-surface': applyBackground
+        }, className),
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement("div", null, React.createElement(Box, {
+        as: "div",
+        ...monthYearProps,
+        className: cx('iui-calendar-month-year', monthYearProps?.className)
+    }, showYearSelection && React.createElement(IconButton, {
+        styleType: "borderless",
+        onClick: handleMoveToPreviousYear,
+        "aria-label": "Previous year",
+        size: "small"
+    }, React.createElement(SvgChevronLeftDouble, null)), React.createElement(IconButton, {
+        styleType: "borderless",
+        onClick: handleMoveToPreviousMonth,
+        "aria-label": "Previous month",
+        size: "small"
+    }, React.createElement(SvgChevronLeft, null)), React.createElement("span", {
+        "aria-live": "polite"
+    }, React.createElement(Box, {
+        as: "span",
+        id: dateTableId,
+        title: monthNames[displayedMonthIndex],
+        ...monthProps,
+        className: cx('iui-calendar-month', monthProps?.className)
+    }, monthNames[displayedMonthIndex]), " ", displayedYear), React.createElement(IconButton, {
+        styleType: "borderless",
+        onClick: handleMoveToNextMonth,
+        "aria-label": "Next month",
+        size: "small"
+    }, React.createElement(SvgChevronRight, null)), showYearSelection && React.createElement(IconButton, {
+        styleType: "borderless",
+        onClick: handleMoveToNextYear,
+        "aria-label": "Next year",
+        size: "small"
+    }, React.createElement(SvgChevronRightDouble, null))), React.createElement(Box, {
+        as: "div",
+        ...weekDayProps,
+        className: cx('iui-calendar-weekdays', weekDayProps?.className)
+    }, shortDays.map((day, index)=>React.createElement("div", {
+            key: day,
+            title: longDays[index]
+        }, day))), React.createElement("div", {
+        onKeyDown: handleCalendarKeyDown,
+        role: "listbox",
+        "aria-labelledby": dateTableId,
+        ...calendarProps
+    }, weeks.map((weekDays, weekIndex)=>React.createElement(Box, {
+            as: "div",
+            key: `week-${displayedMonthIndex}-${weekIndex}`,
+            ...weekProps,
+            className: cx('iui-calendar-week', weekProps?.className)
+        }, weekDays.map((weekDay, dayIndex)=>{
+            let dateValue = weekDay.getDate();
+            let isDisabled = isDateDisabled?.(weekDay);
+            let isOutsideMonth = weekDay.getMonth() !== displayedMonthIndex;
+            if (isOutsideMonth && !showDatesOutsideMonth) return React.createElement(Box, {
+                key: `day-${displayedMonthIndex}-${dayIndex}`,
+                className: cx(getDayClass(weekDay), dayProps?.className),
+                "aria-hidden": true
+            });
+            return React.createElement(Box, {
+                as: "div",
+                key: `day-${displayedMonthIndex}-${dayIndex}`,
+                onClick: ()=>!isDisabled && onDayClick(weekDay),
+                role: "option",
+                tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
+                "aria-disabled": isDisabled ? 'true' : void 0,
+                ref: (element)=>isSameDay(weekDay, focusedDay) && needFocus.current && element?.focus(),
+                ...dayProps,
+                className: cx(getDayClass(weekDay), dayProps?.className)
+            }, dateValue);
+        }))))), 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()))
+    }));
+});
+DatePicker.displayName = 'DatePicker';

package/DEV-esm/core/Dialog/Dialog.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import cx from 'classnames';
+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, Portal } from '../../utils/index.js';
+import { Transition } from 'react-transition-group';
+let DialogComponent = React.forwardRef((props, ref)=>{
+    let { 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;
+    let dialogRootRef = React.useRef(null);
+    return React.createElement(Transition, {
+        in: isOpen,
+        timeout: {
+            exit: 600
+        },
+        mountOnEnter: true,
+        unmountOnExit: true
+    }, React.createElement(DialogContext.Provider, {
+        value: {
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            dialogRootRef,
+            placement
+        }
+    }, React.createElement(Portal, {
+        portal: portal
+    }, React.createElement(Box, {
+        className: cx('iui-dialog-wrapper', className),
+        "data-iui-relative": 'container' === relativeTo,
+        ref: useMergedRefs(ref, dialogRootRef),
+        ...rest
+    }))));
+});
+DialogComponent.displayName = 'Dialog';
+export const Dialog = Object.assign(DialogComponent, {
+    Backdrop: DialogBackdrop,
+    Main: DialogMain,
+    TitleBar: DialogTitleBar,
+    Content: DialogContent,
+    ButtonBar: DialogButtonBar
+});

package/DEV-esm/core/Dialog/DialogBackdrop.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Backdrop } from '../Backdrop/Backdrop.js';
+import { useMergedRefs } from '../../utils/index.js';
+import { useDialogContext } from './DialogContext.js';
+import cx from 'classnames';
+export const DialogBackdrop = React.forwardRef((props, ref)=>{
+    let dialogContext = useDialogContext();
+    let { isVisible = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnExternalClick = dialogContext.closeOnExternalClick, relativeTo = dialogContext.relativeTo, onMouseDown, className, style, ...rest } = props;
+    let backdropRef = React.useRef(null);
+    let refs = useMergedRefs(backdropRef, ref);
+    let handleMouseDown = (event)=>{
+        event.persist();
+        if (event.target !== backdropRef.current) return;
+        if (isDismissible && closeOnExternalClick && onClose) onClose(event);
+        onMouseDown?.(event);
+    };
+    return React.createElement(Backdrop, {
+        isVisible: isVisible,
+        className: cx({
+            'iui-backdrop-fixed': 'viewport' === relativeTo
+        }, className),
+        ref: refs,
+        onMouseDown: handleMouseDown,
+        style: {
+            pointerEvents: 'auto',
+            ...style
+        },
+        ...rest
+    });
+});
+DialogBackdrop.displayName = 'Dialog.Backdrop';

package/DEV-esm/core/Dialog/DialogButtonBar.js

@@ -0,0 +1,3 @@
+import { polymorphic } from '../../utils/index.js';
+export const DialogButtonBar = polymorphic.div('iui-dialog-button-bar');
+DialogButtonBar.displayName = 'Dialog.ButtonBar';

package/DEV-esm/core/Dialog/DialogContent.js

@@ -0,0 +1,3 @@
+import { polymorphic } from '../../utils/index.js';
+export const DialogContent = polymorphic.div('iui-dialog-content');
+DialogContent.displayName = 'Dialog.Content';

package/DEV-esm/core/Dialog/DialogContext.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export const DialogContext = React.createContext(void 0);
+export const useDialogContext = ()=>React.useContext(DialogContext) || {};

package/DEV-esm/core/Dialog/DialogDragContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const DialogDragContext = React.createContext(void 0);
+export const useDialogDragContext = ()=>{
+    let context = React.useContext(DialogDragContext);
+    return {
+        ...context
+    };
+};

package/DEV-esm/core/Dialog/DialogMain.js

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useLayoutEffect, Box, ShadowRoot } from '../../utils/index.js';
+import { useDialogContext } from './DialogContext.js';
+import { Transition } from 'react-transition-group';
+import { DialogDragContext } from './DialogDragContext.js';
+import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
+export const DialogMain = React.forwardRef((props, ref)=>{
+    let dialogContext = useDialogContext();
+    let { 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;
+    let [style, setStyle] = React.useState();
+    let dialogRef = React.useRef(null);
+    let hasBeenResized = React.useRef(false);
+    let previousFocusedElement = React.useRef();
+    let originalBodyOverflow = React.useRef('');
+    React.useEffect(()=>{
+        if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
+    }, [
+        isOpen
+    ]);
+    React.useEffect(()=>{
+        let ownerDocument = dialogRef.current?.ownerDocument;
+        if (!ownerDocument || !preventDocumentScroll || 'hidden' === originalBodyOverflow.current) return;
+        if (isOpen) ownerDocument.body.style.overflow = 'hidden';
+        else ownerDocument.body.style.overflow = originalBodyOverflow.current;
+        return ()=>{
+            ownerDocument.body.style.overflow = originalBodyOverflow.current;
+        };
+    }, [
+        isOpen,
+        preventDocumentScroll
+    ]);
+    let handleKeyDown = (event)=>{
+        if (event.altKey) return;
+        event.persist();
+        if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose) onClose(event);
+        onKeyDown?.(event);
+    };
+    let { onPointerDown, transform } = useDragAndDrop(dialogRef, dialogContext.dialogRootRef, isDraggable);
+    let handlePointerDown = React.useCallback((event)=>{
+        if (isDraggable) onPointerDown(event);
+    }, [
+        isDraggable,
+        onPointerDown
+    ]);
+    useLayoutEffect(()=>{
+        if (!isDraggable || !isOpen) return;
+        let [translateX, translateY] = getTranslateValuesFromElement(dialogRef.current);
+        setStyle((oldStyle)=>({
+                ...oldStyle,
+                insetInlineStart: dialogRef.current?.offsetLeft,
+                insetBlockStart: dialogRef.current?.offsetTop,
+                transform: `translate(${translateX}px,${translateY}px)`
+            }));
+    }, [
+        isDraggable,
+        isOpen
+    ]);
+    let setResizeStyle = React.useCallback((newStyle)=>{
+        setStyle((oldStyle)=>({
+                ...oldStyle,
+                ...newStyle
+            }));
+    }, []);
+    let content = React.createElement(Box, {
+        className: cx('iui-dialog', {
+            'iui-dialog-default': 'default' === styleType,
+            'iui-dialog-full-page': 'fullPage' === styleType,
+            'iui-dialog-visible': isOpen,
+            'iui-dialog-draggable': isDraggable
+        }, className),
+        role: "dialog",
+        ref: useMergedRefs(dialogRef, ref),
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        "data-iui-placement": placement,
+        style: {
+            transform,
+            ...style,
+            ...propStyle
+        },
+        ...rest
+    }, React.createElement(ShadowRoot, null, React.createElement("slot", null), isResizable && React.createElement(Resizer, {
+        elementRef: dialogRef,
+        containerRef: dialogContext.dialogRootRef,
+        onResizeStart: ()=>{
+            if (!hasBeenResized.current) {
+                hasBeenResized.current = true;
+                setResizeStyle({
+                    maxInlineSize: '100%'
+                });
+            }
+        },
+        onResizeEnd: setResizeStyle
+    })), children);
+    return React.createElement(Transition, {
+        in: isOpen,
+        appear: true,
+        timeout: {
+            exit: 600
+        },
+        onEntered: ()=>{
+            previousFocusedElement.current = dialogRef.current?.ownerDocument.activeElement;
+            setFocus && dialogRef.current?.focus({
+                preventScroll: true
+            });
+        },
+        onExit: ()=>{
+            if (dialogRef.current?.contains(dialogRef.current?.ownerDocument.activeElement)) previousFocusedElement.current?.focus();
+        },
+        unmountOnExit: true,
+        nodeRef: dialogRef
+    }, React.createElement(DialogDragContext.Provider, {
+        value: {
+            onPointerDown: handlePointerDown
+        }
+    }, trapFocus && React.createElement(FocusTrap, null, content), !trapFocus && content));
+});
+DialogMain.displayName = 'Dialog.Main';