@itwin/itwinui-react 3.3.4 → 3.4.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 3.4.1
+
+### Patch Changes
+
+- [#1835](https://github.com/iTwin/iTwinUI/pull/1835): Fixed the bug where `Dialog`/`Modal` was invisible on the first render with `isOpen={true}`.
+- [#1836](https://github.com/iTwin/iTwinUI/pull/1836): Updated Dialog resizer positioning to protrude outside the dialog.
+
+## 3.4.0
+
+### Minor Changes
+
+- [#1824](https://github.com/iTwin/iTwinUI/pull/1824): `LinkAction` will now automatically render a `<button>` by default if no `href` is passed.
+- [#1815](https://github.com/iTwin/iTwinUI/pull/1815): Removed unnecessary `Tag` styles, and added support for tags to be used as `<button>` elements.
+- [#1813](https://github.com/iTwin/iTwinUI/pull/1813): Added warning status for `ProgressRadial`/`ProgressLinear`
+- [#1815](https://github.com/iTwin/iTwinUI/pull/1815): Added `labelProps` and `removeButtonProps` to `Tag` to allow customizing internal parts.
+- [#1821](https://github.com/iTwin/iTwinUI/pull/1821): Added new props to `Modal` to allow customizing inner DOM elements: `wrapperProps`, `backdropProps`, `titleBarProps`.
+- [#1822](https://github.com/iTwin/iTwinUI/pull/1822): Added new `showDatesOutsideMonth` prop to `DatePicker`. Currently defaults to `true` but is recommended to be set to `false`.
+
 ## 3.3.4
 
 ### Patch Changes

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

@@ -74,4 +74,4 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
      */
     CloseButton: PolymorphicForwardRefComponent<"button", {}>;
 };
-export default Alert;
+export {};

package/cjs/core/Alert/Alert.js

@@ -130,4 +130,3 @@ exports.Alert = Object.assign(AlertComponent, {
      */
     CloseButton: AlertCloseButton,
 });
-exports.default = exports.Alert;

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

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

package/cjs/core/Avatar/Avatar.js

@@ -73,4 +73,3 @@ exports.Avatar = React.forwardRef((props, ref) => {
         image,
         status ? React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, statusTitles[status]) : null));
 });
-exports.default = exports.Avatar;

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

@@ -58,4 +58,4 @@ type AvatarGroupProps = {
  * </AvatarGroup>
  */
 export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
-export default AvatarGroup;
+export {};

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -83,4 +83,3 @@ exports.AvatarGroup = React.forwardRef((props, ref) => {
                 ? `${childrenLength - maxIcons}`
                 : `${maxLength}+`)))));
 });
-exports.default = exports.AvatarGroup;

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

@@ -23,4 +23,4 @@ type BadgeProps = {
  * <Badge backgroundColor="positive">Label</Badge>
  */
 export declare const Badge: PolymorphicForwardRefComponent<"span", BadgeProps>;
-export default Badge;
+export {};

package/cjs/core/Badge/Badge.js

@@ -70,4 +70,3 @@ exports.Badge = React.forwardRef((props, forwardedRef) => {
         : { ...style };
     return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-badge', className), style: _style, "data-iui-status": statusValue, ref: forwardedRef, ...rest }, children));
 });
-exports.default = exports.Badge;

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

@@ -89,4 +89,4 @@ export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", Breadcru
      */
     Item: PolymorphicForwardRefComponent<"a", {}>;
 };
-export default Breadcrumbs;
+export {};

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -124,4 +124,3 @@ exports.Breadcrumbs = Object.assign(BreadcrumbsComponent, {
      */
     Item: BreadcrumbsItem,
 });
-exports.default = exports.Breadcrumbs;

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

@@ -57,4 +57,4 @@ type ButtonGroupProps = {
  * </ButtonGroup>
  */
 export declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
-export default ButtonGroup;
+export {};

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -95,4 +95,3 @@ exports.ButtonGroup = React.forwardRef((props, ref) => {
                         overflowButton(overflowStart)));
             })()))));
 });
-exports.default = exports.ButtonGroup;

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

@@ -43,4 +43,3 @@ export type ButtonProps = {
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 export declare const Button: PolymorphicForwardRefComponent<"button", ButtonProps>;
-export default Button;

package/cjs/core/Buttons/Button.js

@@ -50,4 +50,3 @@ exports.Button = React.forwardRef((props, ref) => {
         children && React.createElement("span", { ...labelProps }, children),
         endIcon && (React.createElement(index_js_1.Box, { as: 'span', "aria-hidden": true, ...endIconProps, className: (0, classnames_1.default)('iui-button-icon', endIconProps?.className) }, endIcon))));
 });
-exports.default = exports.Button;

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

@@ -29,4 +29,3 @@ export type DropdownButtonProps = {
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
 export declare const DropdownButton: PolymorphicForwardRefComponent<"button", DropdownButtonProps>;
-export default DropdownButton;

package/cjs/core/Buttons/DropdownButton.js

@@ -54,4 +54,3 @@ exports.DropdownButton = React.forwardRef((props, forwardedRef) => {
         } },
         React.createElement(Button_js_1.Button, { className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(index_js_1.SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(index_js_1.SvgCaretDownSmall, { "aria-hidden": true })), ref: forwardedRef, ...rest }, children)));
 });
-exports.default = exports.DropdownButton;

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

@@ -30,4 +30,3 @@ export type IconButtonProps = {
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 export declare const IconButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
-export default IconButton;

package/cjs/core/Buttons/IconButton.js

@@ -52,4 +52,3 @@ exports.IconButton = React.forwardRef((props, ref) => {
         label ? React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, label) : null));
     return label ? (React.createElement(Tooltip_js_1.Tooltip, { placement: buttonGroupOrientation === 'vertical' ? 'right' : 'top', ...labelProps, content: label, ariaStrategy: 'none' }, button)) : (button);
 });
-exports.default = exports.IconButton;

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

@@ -16,4 +16,4 @@ type IdeasButtonProps = {
  * <IdeasButton />
  */
 export declare const IdeasButton: PolymorphicForwardRefComponent<"button", IdeasButtonProps>;
-export default IdeasButton;
+export {};

package/cjs/core/Buttons/IdeasButton.js

@@ -40,4 +40,3 @@ exports.IdeasButton = React.forwardRef((props, ref) => {
     const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
     return (React.createElement(Button_js_1.Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(index_js_1.SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
 });
-exports.default = exports.IdeasButton;

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

@@ -43,4 +43,3 @@ export type SplitButtonProps = ButtonProps & {
  * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
  */
 export declare const SplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;
-export default SplitButton;

package/cjs/core/Buttons/SplitButton.js

@@ -87,4 +87,3 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
                     },
                 }), ref: popover.refs.setFloating }, menuContent)))));
 });
-exports.default = exports.SplitButton;

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

@@ -217,4 +217,4 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         isSmaller?: boolean | undefined;
     }>;
 };
-export default Carousel;
+export {};

package/cjs/core/Carousel/Carousel.js

@@ -104,4 +104,3 @@ exports.Carousel = Object.assign(CarouselComponent, {
     DotsList: CarouselDotsList_js_1.CarouselDotsList,
     Dot: CarouselDot_js_1.CarouselDot,
 });
-exports.default = exports.Carousel;

package/cjs/core/Carousel/CarouselSlider.js

@@ -52,7 +52,7 @@ exports.CarouselSlider = React.forwardRef((props, ref) => {
             index,
         })
         : child) ?? [], [children, idPrefix]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = React.useRef(null);

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

@@ -46,4 +46,4 @@ type CheckboxProps = {
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
 export declare const Checkbox: PolymorphicForwardRefComponent<"input", CheckboxProps>;
-export default Checkbox;
+export {};

package/cjs/core/Checkbox/Checkbox.js

@@ -75,4 +75,3 @@ exports.Checkbox = React.forwardRef((props, ref) => {
         checkbox,
         label && (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-checkbox-label', labelClassName), ...restLabelProps }, label))));
 });
-exports.default = exports.Checkbox;

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

@@ -23,4 +23,4 @@ type ColorInputPanelProps = {
  * </ColorPicker>
  */
 export declare const ColorInputPanel: PolymorphicForwardRefComponent<"div", ColorInputPanelProps>;
-export default ColorInputPanel;
+export {};

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -294,4 +294,3 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
                 currentFormat === 'rgb' && rgbInputs,
                 currentFormat === 'hsl' && hslInputs))));
 });
-exports.default = exports.ColorInputPanel;

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

@@ -27,4 +27,3 @@ export type ColorPaletteProps = {
  * </ColorPalette>
  */
 export declare const ColorPalette: PolymorphicForwardRefComponent<"div", ColorPaletteProps>;
-export default ColorPalette;

package/cjs/core/ColorPicker/ColorPalette.js

@@ -64,4 +64,3 @@ exports.ColorPalette = React.forwardRef((props, ref) => {
                         }, isActive: color.equals(activeColor) }));
                 }))));
 });
-exports.default = exports.ColorPalette;

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

@@ -54,4 +54,4 @@ type ColorPickerProps = {
  * </ColorPicker>
  */
 export declare const ColorPicker: PolymorphicForwardRefComponent<"div", ColorPickerProps>;
-export default ColorPicker;
+export {};

package/cjs/core/ColorPicker/ColorPicker.js

@@ -99,4 +99,3 @@ exports.ColorPicker = React.forwardRef((props, forwardedRef) => {
                 showAlpha,
             } }, children)));
 });
-exports.default = exports.ColorPicker;

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

@@ -17,4 +17,4 @@ type ColorSwatchProps = {
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
 export declare const ColorSwatch: PolymorphicForwardRefComponent<"button", ColorSwatchProps>;
-export default ColorSwatch;
+export {};

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -52,4 +52,3 @@ exports.ColorSwatch = React.forwardRef((props, ref) => {
             ...style,
         }, onClick: onClick, "aria-pressed": !!onClick && isActive ? 'true' : undefined, ref: ref, ...rest }, props.children ?? (React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, colorString.toUpperCase()))));
 });
-exports.default = exports.ColorSwatch;

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

@@ -105,4 +105,4 @@ export type ComboBoxProps<T> = {
 export declare const ComboBox: <T>(props: ComboBoxProps<T> & {
     ref?: React.ForwardedRef<HTMLElement> | undefined;
 }) => JSX.Element;
-export default ComboBox;
+export {};

package/cjs/core/ComboBox/ComboBox.js

@@ -120,7 +120,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
         dispatch({ type: 'close' });
         onHideRef.current?.();
     }, [onHideRef]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         // When the dropdown opens
         if (isOpen) {
             inputRef.current?.focus(); // Focus the input
@@ -339,4 +339,3 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
                     ? filteredOptions.map(getMenuItem)
                     : emptyContent)))));
 });
-exports.default = exports.ComboBox;

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -22,9 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxMultipleContainer = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -32,9 +29,9 @@ exports.ComboBoxMultipleContainer = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const SelectTagContainer_js_1 = __importDefault(require("../Select/SelectTagContainer.js"));
+const SelectTagContainer_js_1 = require("../Select/SelectTagContainer.js");
 exports.ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
     const { selectedItems = [], ...rest } = props;
-    return React.createElement(SelectTagContainer_js_1.default, { ref: ref, tags: selectedItems, ...rest });
+    return React.createElement(SelectTagContainer_js_1.SelectTagContainer, { ref: ref, tags: selectedItems, ...rest });
 });
 exports.ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

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

@@ -96,6 +96,14 @@ type DatePickerProps = {
      * @default true
      */
     applyBackground?: boolean;
+    /**
+     * Whether dates outside the current month should be displayed (in a muted text style).
+     *
+     * It is recommended to set this to false. Currently it defaults to true for backward compatibility.
+     *
+     * @default true
+     */
+    showDatesOutsideMonth?: boolean;
 } & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component
@@ -103,4 +111,4 @@ type DatePickerProps = {
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
 export declare const DatePicker: PolymorphicForwardRefComponent<"div", DatePickerProps>;
-export default DatePicker;
+export {};

package/cjs/core/DatePicker/DatePicker.js

@@ -140,7 +140,7 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
 exports.DatePicker = React.forwardRef((props, forwardedRef) => {
-    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, monthYearProps, calendarProps, monthProps, weekDayProps, dayProps, weekProps, isDateDisabled, applyBackground = true, ...rest } = props;
+    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, monthYearProps, calendarProps, monthProps, weekDayProps, dayProps, weekProps, isDateDisabled, applyBackground = true, showDatesOutsideMonth = true, ...rest } = props;
     const monthNames = localizedNames?.months ?? defaultMonths;
     const shortDays = localizedNames?.shortDays ?? defaultShortDays;
     const longDays = localizedNames?.days ?? defaultLongDays;
@@ -182,8 +182,9 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
     const days = React.useMemo(() => {
         let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
-        // if its sunday, show one week before
-        if (0 === offsetToFirst) {
+        // If it's sunday, show one week before, but only if dates outside month are shown.
+        // (We do not want empty space at the top if dates outside month are not shown.)
+        if (0 === offsetToFirst && showDatesOutsideMonth) {
             offsetToFirst = 7;
         }
         const daysInMonth = [];
@@ -193,7 +194,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
         }
         return daysInMonth;
-    }, [displayedMonthIndex, displayedYear]);
+    }, [displayedMonthIndex, displayedYear, showDatesOutsideMonth]);
     const weeks = React.useMemo(() => {
         const weeksInMonth = [];
         const weekCount = Math.ceil(days.length / 7);
@@ -383,6 +384,10 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
                 return (React.createElement(index_js_1.Box, { as: 'div', key: `week-${displayedMonthIndex}-${weekIndex}`, ...weekProps, className: (0, classnames_1.default)('iui-calendar-week', weekProps?.className) }, weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
                     const isDisabled = isDateDisabled?.(weekDay);
+                    const isOutsideMonth = weekDay.getMonth() !== displayedMonthIndex;
+                    if (isOutsideMonth && !showDatesOutsideMonth) {
+                        return (React.createElement(index_js_1.Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: (0, classnames_1.default)(getDayClass(weekDay), dayProps?.className), "aria-hidden": true }));
+                    }
                     return (React.createElement(index_js_1.Box, { as: 'div', key: `day-${displayedMonthIndex}-${dayIndex}`, 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?.focus(), ...dayProps, className: (0, classnames_1.default)(getDayClass(weekDay), dayProps?.className) }, dateValue));
@@ -392,4 +397,3 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
                 ? 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())) }))));
 });
-exports.default = exports.DatePicker;

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

@@ -41,4 +41,4 @@ export declare const Dialog: PolymorphicForwardRefComponent<"div", DialogProps>
     Content: PolymorphicForwardRefComponent<"div", {}>;
     ButtonBar: PolymorphicForwardRefComponent<"div", {}>;
 };
-export default Dialog;
+export {};

package/cjs/core/Dialog/Dialog.js

@@ -90,4 +90,3 @@ exports.Dialog = Object.assign(DialogComponent, {
     Content: DialogContent_js_1.DialogContent,
     ButtonBar: DialogButtonBar_js_1.DialogButtonBar,
 });
-exports.default = exports.Dialog;

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

@@ -9,4 +9,4 @@ type DialogBackdropProps = BackdropProps & Pick<DialogContextProps, 'onClose' |
  * <Dialog.Backdrop />
  */
 export declare const DialogBackdrop: PolymorphicForwardRefComponent<"div", DialogBackdropProps>;
-export default DialogBackdrop;
+export {};

package/cjs/core/Dialog/DialogBackdrop.js

@@ -63,4 +63,3 @@ exports.DialogBackdrop = React.forwardRef((props, ref) => {
             ...style,
         }, ...rest }));
 });
-exports.default = exports.DialogBackdrop;

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

@@ -7,4 +7,3 @@
  * </Dialog.ButtonBar>
  */
 export declare const DialogButtonBar: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
-export default DialogButtonBar;

package/cjs/core/Dialog/DialogButtonBar.js

@@ -15,4 +15,3 @@ const index_js_1 = require("../utils/index.js");
  * </Dialog.ButtonBar>
  */
 exports.DialogButtonBar = index_js_1.polymorphic.div('iui-dialog-button-bar');
-exports.default = exports.DialogButtonBar;

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

@@ -6,4 +6,3 @@
  * </Dialog.Content>
  */
 export declare const DialogContent: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
-export default DialogContent;

package/cjs/core/Dialog/DialogContent.js

@@ -14,4 +14,3 @@ const index_js_1 = require("../utils/index.js");
  * </Dialog.Content>
  */
 exports.DialogContent = index_js_1.polymorphic.div('iui-dialog-content');
-exports.default = exports.DialogContent;

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

@@ -33,4 +33,3 @@ export type DialogMainProps = {
  * </Dialog.Main>
  */
 export declare const DialogMain: PolymorphicForwardRefComponent<"div", DialogMainProps>;
-export default DialogMain;

package/cjs/core/Dialog/DialogMain.js

@@ -37,8 +37,7 @@ const index_js_1 = require("../utils/index.js");
 const DialogContext_js_1 = require("./DialogContext.js");
 const react_transition_group_1 = require("react-transition-group");
 const DialogDragContext_js_1 = require("./DialogDragContext.js");
-const useDragAndDrop_js_1 = __importDefault(require("../utils/hooks/useDragAndDrop.js"));
-const styles_js_1 = __importDefault(require("../../styles.js"));
+const useDragAndDrop_js_1 = require("../utils/hooks/useDragAndDrop.js");
 /**
  * Dialog component which can wrap any content.
  * @example
@@ -103,14 +102,14 @@ exports.DialogMain = React.forwardRef((props, ref) => {
         }
         onKeyDown?.(event);
     };
-    const { onPointerDown, transform } = (0, useDragAndDrop_js_1.default)(dialogRef, dialogContext.dialogRootRef, isDraggable);
+    const { onPointerDown, transform } = (0, useDragAndDrop_js_1.useDragAndDrop)(dialogRef, dialogContext.dialogRootRef, isDraggable);
     const handlePointerDown = React.useCallback((event) => {
         if (isDraggable) {
             onPointerDown(event);
         }
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!isDraggable || !isOpen) {
             return;
         }
@@ -134,24 +133,23 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
+            'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
             transform,
             ...style,
             ...propStyle,
         }, ...rest },
-        isResizable && (React.createElement(index_js_1.Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeStart: () => {
-                if (!hasBeenResized.current) {
-                    hasBeenResized.current = true;
-                    setResizeStyle({ maxInlineSize: '100%' });
-                }
-            }, onResizeEnd: setResizeStyle })),
+        React.createElement(index_js_1.ShadowRoot, null,
+            React.createElement("slot", null),
+            isResizable && (React.createElement(index_js_1.Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeStart: () => {
+                    if (!hasBeenResized.current) {
+                        hasBeenResized.current = true;
+                        setResizeStyle({ maxInlineSize: '100%' });
+                    }
+                }, onResizeEnd: setResizeStyle }))),
         children));
-    return (React.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: {
-            enter: styles_js_1.default['iui-dialog-animation-enter'],
-            enterActive: styles_js_1.default['iui-dialog-animation-enter-active'],
-            enterDone: styles_js_1.default['iui-dialog-visible'],
-        }, timeout: { exit: 600 }, 
+    return (React.createElement(react_transition_group_1.Transition, { in: isOpen, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {
             previousFocusedElement.current = dialogRef.current?.ownerDocument
@@ -168,4 +166,3 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             trapFocus && React.createElement(index_js_1.FocusTrap, null, content),
             !trapFocus && content)));
 });
-exports.default = exports.DialogMain;

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

@@ -31,4 +31,4 @@ type DialogTitleBarProps = {
 export declare const DialogTitleBar: PolymorphicForwardRefComponent<"div", DialogTitleBarProps> & {
     Title: PolymorphicForwardRefComponent<"div", {}>;
 };
-export default DialogTitleBar;
+export {};

package/cjs/core/Dialog/DialogTitleBar.js

@@ -68,4 +68,3 @@ exports.DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
 }), {
     Title: DialogTitleBarTitle_js_1.DialogTitleBarTitle,
 });
-exports.default = exports.DialogTitleBar;

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

@@ -4,4 +4,3 @@
  * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
  */
 export declare const DialogTitleBarTitle: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
-export default DialogTitleBarTitle;

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -12,4 +12,3 @@ const index_js_1 = require("../utils/index.js");
  * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
  */
 exports.DialogTitleBarTitle = index_js_1.polymorphic.div('iui-dialog-title');
-exports.default = exports.DialogTitleBarTitle;

package/cjs/core/Divider/Divider.d.ts

@@ -10,4 +10,4 @@ type DividerProps = {
  * Shows a divider
  */
 export declare const Divider: PolymorphicForwardRefComponent<"hr", DividerProps>;
-export default Divider;
+export {};

package/cjs/core/Divider/Divider.js

@@ -41,4 +41,3 @@ exports.Divider = React.forwardRef((props, ref) => {
     const { className, orientation = 'horizontal', ...rest } = props;
     return (React.createElement(Box_js_1.Box, { as: 'hr', className: (0, classnames_1.default)('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
 });
-exports.default = exports.Divider;

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -37,4 +37,3 @@ export type DropdownMenuProps = {
  * </DropdownMenu>
  */
 export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;
-export default DropdownMenu;

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -92,4 +92,3 @@ exports.DropdownMenu = React.forwardRef((props, forwardedRef) => {
                     }),
                 }), ref: popoverRef }, menuContent)))));
 });
-exports.default = exports.DropdownMenu;

package/cjs/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -124,4 +124,4 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
      */
     Content: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
 };
-export default ExpandableBlock;
+export {};

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -195,4 +195,3 @@ exports.ExpandableBlock = Object.assign(ExpandableBlockComponent, {
      */
     Content: ExpandableBlockContent,
 });
-exports.default = exports.ExpandableBlock;

package/cjs/core/Fieldset/Fieldset.d.ts

@@ -18,4 +18,4 @@ type FieldsetProps = {
  * </Fieldset>
  */
 export declare const Fieldset: PolymorphicForwardRefComponent<"fieldset", FieldsetProps>;
-export default Fieldset;
+export {};

package/cjs/core/Fieldset/Fieldset.js

@@ -55,4 +55,3 @@ exports.Fieldset = React.forwardRef((props, ref) => {
                 : child)
             : children));
 });
-exports.default = exports.Fieldset;

package/cjs/core/FileUpload/FileEmptyCard.d.ts

@@ -19,4 +19,3 @@ export declare const FileEmptyCard: PolymorphicForwardRefComponent<"div", {}> &
     Icon: PolymorphicForwardRefComponent<"span", {}>;
     Text: PolymorphicForwardRefComponent<"span", {}>;
 };
-export default FileEmptyCard;

package/cjs/core/FileUpload/FileEmptyCard.js

@@ -34,7 +34,7 @@ exports.FileEmptyCard = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
-const FileUploadCard_js_1 = __importDefault(require("./FileUploadCard.js"));
+const FileUploadCard_js_1 = require("./FileUploadCard.js");
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Icon component
 const FileEmptyCardIcon = index_js_1.polymorphic.span('iui-file-card-empty-icon', {
@@ -50,7 +50,7 @@ const FileEmptyCardComponent = React.forwardRef((props, ref) => {
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(exports.FileEmptyCard.Icon, null),
         React.createElement(exports.FileEmptyCard.Text, null,
-            React.createElement(FileUploadCard_js_1.default.InputLabel, null, "Choose a file"),
+            React.createElement(FileUploadCard_js_1.FileUploadCard.InputLabel, null, "Choose a file"),
             React.createElement("div", null, "to upload."))))));
 });
 /**
@@ -73,4 +73,3 @@ exports.FileEmptyCard = Object.assign(FileEmptyCardComponent, {
     Icon: FileEmptyCardIcon,
     Text: FileEmptyCardText,
 });
-exports.default = exports.FileEmptyCard;