@itwin/itwinui-react 3.8.1 → 3.9.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 3.9.1
+
+### Patch Changes
+
+- [#2005](https://github.com/iTwin/iTwinUI/pull/2005): Improved `IconButton` so that its tooltip is removed from the DOM when not visible.
+- [#2004](https://github.com/iTwin/iTwinUI/pull/2004): Fixed a performance issue in `Tooltip` where expensive calculations were being run even when the tooltip was not visible.
+
+## 3.9.0
+
+### Minor Changes
+
+- [#1994](https://github.com/iTwin/iTwinUI/pull/1994): Added `role="toolbar"` support to `ButtonGroup`. Use this to enable the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), with arrow-key navigation functionality.
+
+  ```jsx
+  <ButtonGroup role="toolbar">
+  ```
+
+- [#1986](https://github.com/iTwin/iTwinUI/pull/1986): `tableFilters.DateRangeFilter` now accepts `showYearSelection` to enable year-selection buttons.
+
+  ```js
+  tableFilters.DateRangeFilter({ showYearSelection: true });
+  ```
+
+- [#1971](https://github.com/iTwin/iTwinUI/pull/1971): Added a new `stretched` prop to `Button` to allow it to span the full width of its container.
+- [#1996](https://github.com/iTwin/iTwinUI/pull/1996): `Anchor` elements inside `Text` will now be underlined by default.
+
+### Patch Changes
+
+- [#1997](https://github.com/iTwin/iTwinUI/pull/1997): Fixed an issue where draggable `Dialog` was overriding its intrinsic size after mount.
+- [#1981](https://github.com/iTwin/iTwinUI/pull/1981): Fixed `jest` detection logic to correctly exit from scenarios that should not be executed in unit test environments.
+- [#1982](https://github.com/iTwin/iTwinUI/pull/1982): Fixed an issue where some components (such as `InputGroup`) were trying to render `undefined`, which is not supported in React 17.
+- [#1986](https://github.com/iTwin/iTwinUI/pull/1986): Updated the date pickers in `tableFilters.DateRangeFilter` to _not_ display dates outside the current month.
+
 ## 3.8.1
 
 ### Patch Changes

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type AlertOwnProps = {
     /**
      * Type of the alert.
@@ -55,8 +55,12 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
-        fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
+        /**
+         * Type of the alert.
+         * @default 'informational'
+         */
+        fill?: "default" | import("../../utils/types.js").AnyString | "informational" | "negative" | "positive" | "warning" | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;

package/cjs/core/Alert/Alert.js

@@ -33,7 +33,7 @@ exports.Alert = void 0;
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
 const Icon_js_1 = require("../Icon/Icon.js");
 const Anchor_js_1 = require("../Typography/Anchor.js");

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

@@ -1,5 +1,5 @@
-import { SoftBackgrounds } from '../utils/index.js';
-import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
+import { SoftBackgrounds } from '../../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;

package/cjs/core/Avatar/Avatar.js

@@ -33,7 +33,7 @@ exports.Avatar = exports.defaultStatusTitles = void 0;
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 /**
  * Helper function that returns one of the preset badge color values.

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type AvatarGroupProps = {
     /**
      * Max number of avatars unstacked.

package/cjs/core/AvatarGroup/AvatarGroup.js

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

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

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type BackdropProps = {
     /**
      * Flag whether backdrop should be shown.

package/cjs/core/Backdrop/Backdrop.js

@@ -33,7 +33,7 @@ exports.Backdrop = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 exports.Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));

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

@@ -1,5 +1,5 @@
-import { SoftBackgrounds } from '../utils/index.js';
-import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
+import { SoftBackgrounds } from '../../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
 type BadgeProps = {
     /**
      * Background color of the badge.

package/cjs/core/Badge/Badge.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -33,7 +33,7 @@ exports.Breadcrumbs = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const Button_js_1 = require("../Buttons/Button.js");
 const Anchor_js_1 = require("../Typography/Anchor.js");
 const logWarningInDev = (0, index_js_1.createWarningLogger)();
@@ -86,7 +86,6 @@ const BreadcrumbsComponent = React.forwardRef((props, ref) => {
 });
 // ----------------------------------------------------------------------------
 const ListItem = ({ item, isActive, }) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let children = item;
     if (children?.type === 'span' ||
         children?.type === 'a' ||

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
 /** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
 export declare const ButtonGroupContext: React.Context<string | undefined>;
 type ButtonGroupProps = {
@@ -27,13 +27,22 @@ type ButtonGroupProps = {
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * ARIA role for the ButtonGroup.
+     *
+     * If set to toolbar', it will automatically support arrow-key navigation.
+     *
+     * **Note**: `role="toolbar"` should not be used when the ButtonGroup contains
+     * non-button elements (such as inputs).
+     */
+    role?: 'toolbar' | AnyString;
 };
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
  *
  * @example
- * <ButtonGroup>
+ * <ButtonGroup role="toolbar">
  *   <IconButton>
  *     <SvgAdd />
  *   </IconButton>

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -33,7 +33,7 @@ exports.ButtonGroup = exports.ButtonGroupContext = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const react_1 = require("@floating-ui/react");
 // ----------------------------------------------------------------------------
 /** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
@@ -44,7 +44,7 @@ exports.ButtonGroupContext.displayName = 'ButtonGroupContext';
  * Handles responsive overflow when the `overflowButton` prop is specified.
  *
  * @example
- * <ButtonGroup>
+ * <ButtonGroup role="toolbar">
  *   <IconButton>
  *     <SvgAdd />
  *   </IconButton>
@@ -67,34 +67,46 @@ exports.ButtonGroupContext.displayName = 'ButtonGroupContext';
  *   {buttons}
  * </ButtonGroup>
  */
-exports.ButtonGroup = React.forwardRef((props, ref) => {
-    const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
-    const items = React.useMemo(() => React.Children.toArray(children).filter(Boolean), [children]);
-    const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items, !overflowButton, orientation);
-    const refs = (0, index_js_1.useMergedRefs)(!!overflowButton ? overflowRef : null, ref);
+exports.ButtonGroup = React.forwardRef((props, forwardedRef) => {
+    const { children: childrenProp, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
+    const children = React.useMemo(() => {
+        if (props.role !== 'toolbar') {
+            return childrenProp;
+        }
+        return React.Children.map(childrenProp, (child, index) => React.isValidElement(child) ? (React.createElement(react_1.CompositeItem, { key: index, render: child })) : (child));
+    }, [childrenProp, props.role]);
+    const node = overflowButton ? (React.createElement(OverflowGroup, { orientation: orientation, overflowButton: overflowButton, overflowPlacement: overflowPlacement, ref: forwardedRef, ...rest }, children)) : (React.createElement(BaseGroup, { orientation: orientation, ref: forwardedRef, ...rest }, children));
     return (React.createElement(react_1.FloatingDelayGroup, { delay: { open: 50, close: 250 } },
-        React.createElement(exports.ButtonGroupContext.Provider, { value: orientation },
-            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-group', {
-                    'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-                }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
-                if (!overflowButton) {
-                    return children;
-                }
-                if (!(visibleCount < items.length)) {
-                    return items;
-                }
-                const overflowStart = overflowPlacement === 'start'
-                    ? items.length - visibleCount
-                    : visibleCount - 1;
-                return (React.createElement(React.Fragment, null,
-                    overflowButton &&
-                        overflowPlacement === 'start' &&
-                        overflowButton(overflowStart),
-                    overflowPlacement === 'start'
-                        ? items.slice(overflowStart + 1)
-                        : items.slice(0, Math.max(0, overflowStart)),
-                    overflowButton &&
-                        overflowPlacement === 'end' &&
-                        overflowButton(overflowStart)));
-            })()))));
+        React.createElement(exports.ButtonGroupContext.Provider, { value: orientation }, props.role === 'toolbar' ? (React.createElement(react_1.Composite, { orientation: orientation, render: node })) : (node))));
+});
+// ----------------------------------------------------------------------------
+const BaseGroup = React.forwardRef((props, forwardedRef) => {
+    const { orientation, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-group', className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: forwardedRef, ...rest }));
+});
+// ----------------------------------------------------------------------------
+const OverflowGroup = React.forwardRef((props, forwardedRef) => {
+    const { children: childrenProp, orientation, overflowButton, overflowPlacement, ...rest } = props;
+    const items = React.useMemo(() => React.Children.toArray(childrenProp).filter(Boolean), [childrenProp]);
+    const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items, !overflowButton, orientation);
+    return (React.createElement(BaseGroup, { orientation: orientation, ...rest, className: (0, classnames_1.default)({
+            'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
+        }, props.className), ref: (0, index_js_1.useMergedRefs)(forwardedRef, overflowRef) }, (() => {
+        if (!(visibleCount < items.length)) {
+            return items;
+        }
+        const overflowStart = overflowPlacement === 'start'
+            ? items.length - visibleCount
+            : visibleCount - 1;
+        return (React.createElement(React.Fragment, null,
+            overflowButton &&
+                overflowPlacement === 'start' &&
+                overflowButton(overflowStart),
+            overflowPlacement === 'start'
+                ? items.slice(overflowStart + 1)
+                : items.slice(0, Math.max(0, overflowStart)),
+            overflowButton &&
+                overflowPlacement === 'end' &&
+                overflowButton(overflowStart)));
+    })()));
 });

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ButtonBase } from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { ButtonBase } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type ButtonProps = {
     /**
      * Modify size of the button.
@@ -32,6 +32,12 @@ export type ButtonProps = {
      * Passes props to the end icon.
      */
     endIconProps?: React.ComponentProps<'span'>;
+    /**
+     * Whether the button should stretch to fill the width of the container.
+     *
+     * This is useful on narrow containers and mobile views.
+     */
+    stretched?: boolean;
 } & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
 /**
  * Generic button component

package/cjs/core/Buttons/Button.js

@@ -33,7 +33,7 @@ exports.Button = void 0;
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 /**
  * Generic button component
  * @example
@@ -44,8 +44,11 @@ const index_js_1 = require("../utils/index.js");
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 exports.Button = React.forwardRef((props, ref) => {
-    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, ...rest } = props;
-    return (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, ...rest },
+    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, ...rest } = props;
+    return (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, ...rest, style: {
+            '--_iui-width': stretched ? '100%' : undefined,
+            ...props.style,
+        } },
         startIcon && (React.createElement(index_js_1.Box, { as: 'span', "aria-hidden": true, ...startIconProps, className: (0, classnames_1.default)('iui-button-icon', startIconProps?.className) }, startIcon)),
         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))));

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

@@ -1,6 +1,6 @@
 import type { ButtonProps } from './Button.js';
 import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

package/cjs/core/Buttons/DropdownButton.js

@@ -35,7 +35,7 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Button_js_1 = require("./Button.js");
 const DropdownMenu_js_1 = require("../DropdownMenu/DropdownMenu.js");
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 /**
  * Button that opens a DropdownMenu.
  * @example

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import type { ButtonProps } from './Button.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type IconButtonProps = {
     /**
      * Button gets active style.

package/cjs/core/Buttons/IconButton.js

@@ -33,7 +33,7 @@ exports.IconButton = void 0;
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
 const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 const ButtonGroup_js_1 = require("../ButtonGroup/ButtonGroup.js");

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

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type IdeasButtonProps = {
     /**
      * On click handler.

package/cjs/core/Buttons/IdeasButton.js

@@ -29,7 +29,7 @@ exports.IdeasButton = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const Button_js_1 = require("./Button.js");
 /**
  * Ideas button

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ButtonProps } from './Button.js';
 import { IconButton } from './IconButton.js';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
 import type { Placement } from '@floating-ui/react';
 export type SplitButtonProps = ButtonProps & {
     /**

package/cjs/core/Buttons/SplitButton.js

@@ -35,7 +35,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Button_js_1 = require("./Button.js");
 const IconButton_js_1 = require("./IconButton.js");
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const Menu_js_1 = require("../Menu/Menu.js");
 const Popover_js_1 = require("../Popover/Popover.js");
 /**

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CarouselProps = {
     /**
      * Index of the currently shown slide.
@@ -42,7 +42,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -73,7 +73,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             }> & {
                 content: React.ReactNode;
                 children?: React.ReactNode;
-            } & import("../utils/index.js").PortalProps & {
+            } & import("../../utils/index.js").PortalProps & {
                 placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
@@ -105,7 +105,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -136,7 +136,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             }> & {
                 content: React.ReactNode;
                 children?: React.ReactNode;
-            } & import("../utils/index.js").PortalProps & {
+            } & import("../../utils/index.js").PortalProps & {
                 placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;

package/cjs/core/Carousel/Carousel.js

@@ -33,7 +33,7 @@ exports.Carousel = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const CarouselContext_js_1 = require("./CarouselContext.js");
 const CarouselSlider_js_1 = require("./CarouselSlider.js");
 const CarouselSlide_js_1 = require("./CarouselSlide.js");

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

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CarouselDotProps = {
     /** Is this dot currently active? */
     isActive?: boolean;

package/cjs/core/Carousel/CarouselDot.js

@@ -33,7 +33,7 @@ exports.CarouselDot = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 /**
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.

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

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

package/cjs/core/Carousel/CarouselDotsList.js

@@ -34,7 +34,7 @@ exports.CarouselDotsList = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const CarouselContext_js_1 = require("./CarouselContext.js");
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const CarouselDot_js_1 = require("./CarouselDot.js");
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
  * shown on the left and right, and the `CarouselDotsList` component shown in the middle.
@@ -9,7 +9,7 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -40,7 +40,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         }> & {
             content: React.ReactNode;
             children?: React.ReactNode;
-        } & import("../utils/index.js").PortalProps & {
+        } & import("../../utils/index.js").PortalProps & {
             placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
@@ -72,7 +72,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -103,7 +103,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         }> & {
             content: React.ReactNode;
             children?: React.ReactNode;
-        } & import("../utils/index.js").PortalProps & {
+        } & import("../../utils/index.js").PortalProps & {
             placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;

package/cjs/core/Carousel/CarouselNavigation.js

@@ -36,7 +36,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const CarouselContext_js_1 = require("./CarouselContext.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
 const CarouselDotsList_js_1 = require("./CarouselDotsList.js");
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,

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

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CarouselSlideProps = {
     /**
      * Index of the current slide.

package/cjs/core/Carousel/CarouselSlide.js

@@ -33,7 +33,7 @@ exports.CarouselSlide = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 const CarouselContext_js_1 = require("./CarouselContext.js");
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.

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

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */

package/cjs/core/Carousel/CarouselSlider.js

@@ -34,7 +34,7 @@ exports.CarouselSlider = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const CarouselContext_js_1 = require("./CarouselContext.js");
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.