@itwin/itwinui-react 3.8.1 → 3.9.0

package/cjs/core/Tree/TreeNode.js

@@ -32,7 +32,7 @@ exports.TreeNode = 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 classnames_1 = __importDefault(require("classnames"));
 const TreeNodeExpander_js_1 = require("./TreeNodeExpander.js");
 const TreeContext_js_1 = require("./TreeContext.js");

package/cjs/core/Tree/TreeNodeExpander.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { IconButtonProps } from '../Buttons/IconButton.js';
 type TreeNodeExpanderProps = {
     isExpanded?: boolean;

package/cjs/core/Tree/TreeNodeExpander.js

@@ -33,7 +33,7 @@ exports.TreeNodeExpander = 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 IconButton_js_1 = require("../Buttons/IconButton.js");
 const TreeContext_js_1 = require("./TreeContext.js");
 exports.TreeNodeExpander = React.forwardRef((props, ref) => {

package/cjs/core/Typography/Anchor.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type AnchorProps = {
     /**
      * Whether the anchor links to an external site.

package/cjs/core/Typography/Anchor.js

@@ -33,8 +33,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Anchor = 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 VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
+const Text_js_1 = require("./Text.js");
 /**
  * A consistently styled anchor component.
  *
@@ -51,7 +52,8 @@ const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
 exports.Anchor = React.forwardRef((props, forwardedRef) => {
-    const { isExternal, underline, children, ...rest } = props;
+    const isInsideText = React.useContext(Text_js_1.TextContext);
+    const { isExternal, underline = isInsideText, children, ...rest } = props;
     return (React.createElement(index_js_1.Box, { as: 'a', "data-iui-underline": underline ? 'true' : undefined, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-anchor', { 'iui-anchor-external': isExternal }, props.className) },
         children,
         props.target === '_blank' && (React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, " (opens in new tab)"))));

package/cjs/core/Typography/Blockquote.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 BlockquoteProps = {
     /**
      * Optional footer for any attribution/source.

package/cjs/core/Typography/Blockquote.js

@@ -33,7 +33,7 @@ exports.Blockquote = 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");
 /**
  * Basic blockquote component
  * @example

package/cjs/core/Typography/Code.d.ts

@@ -3,4 +3,4 @@
  * @example
  * <p>Some <Code>inline code</Code> in a paragraph</p>
  */
-export declare const Code: import("../utils/props.js").PolymorphicForwardRefComponent<"code", {}>;
+export declare const Code: import("../../utils/props.js").PolymorphicForwardRefComponent<"code", {}>;

package/cjs/core/Typography/Code.js

@@ -5,7 +5,7 @@ exports.Code = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require("../../utils/index.js");
 /**
  * Inline code element.
  * @example

package/cjs/core/Typography/Kbd.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * Some predefined strings for common keyboard keys.
  */

package/cjs/core/Typography/Kbd.js

@@ -33,7 +33,7 @@ exports.Kbd = exports.KbdKeys = 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");
 /**
  * Some predefined strings for common keyboard keys.
  */

package/cjs/core/Typography/Text.d.ts

@@ -1,4 +1,5 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type TextProps = {
     /**
      * Which typography variant/size should be used for the styling?
@@ -37,4 +38,5 @@ type TextProps = {
  * <Text isSkeleton>Skeleton text</Text>
  */
 export declare const Text: PolymorphicForwardRefComponent<"div", TextProps>;
+export declare const TextContext: React.Context<boolean>;
 export {};

package/cjs/core/Typography/Text.js

@@ -26,14 +26,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
+exports.TextContext = exports.Text = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 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");
+// ----------------------------------------------------------------------------
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
  * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
@@ -48,10 +49,13 @@ const index_js_1 = require("../utils/index.js");
  */
 exports.Text = React.forwardRef((props, ref) => {
     const { variant = 'body', className, isMuted = false, isSkeleton = false, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({
-            [`iui-text-${variant}`]: variant !== 'body',
-            'iui-text-block': variant === 'body',
-            'iui-text-muted': isMuted,
-            'iui-skeleton': isSkeleton,
-        }, className), ref: ref, ...rest }));
+    return (React.createElement(exports.TextContext.Provider, { value: true },
+        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({
+                [`iui-text-${variant}`]: variant !== 'body',
+                'iui-text-block': variant === 'body',
+                'iui-text-muted': isMuted,
+                'iui-skeleton': isSkeleton,
+            }, className), ref: ref, ...rest })));
 });
+// ----------------------------------------------------------------------------
+exports.TextContext = React.createContext(false);

package/cjs/core/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/props.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
 type VisuallyHiddenOwnProps = {
     /**
      * When VisuallyHidden is used with an interactive element (e.g. button),

package/cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -33,7 +33,7 @@ exports.VisuallyHidden = 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");
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.

package/cjs/index.d.ts

@@ -103,7 +103,7 @@ export { Stepper } from './core/Stepper/Stepper.js';
 export { WorkflowDiagram } from './core/Stepper/WorkflowDiagram.js';
 export type { StepProperties, StepperLocalization, } from './core/Stepper/Stepper.js';
 export { SearchBox } from './core/SearchBox/SearchBox.js';
-export { getUserColor, ColorValue, MiddleTextTruncation, } from './core/utils/index.js';
+export { getUserColor, ColorValue, MiddleTextTruncation, } from './utils/index.js';
 export { LinkBox, LinkAction } from './core/LinkAction/LinkAction.js';
 export { VisuallyHidden } from './core/VisuallyHidden/VisuallyHidden.js';
 export { Icon } from './core/Icon/Icon.js';

package/cjs/index.js

@@ -215,7 +215,7 @@ var WorkflowDiagram_js_1 = require("./core/Stepper/WorkflowDiagram.js");
 Object.defineProperty(exports, "WorkflowDiagram", { enumerable: true, get: function () { return WorkflowDiagram_js_1.WorkflowDiagram; } });
 var SearchBox_js_1 = require("./core/SearchBox/SearchBox.js");
 Object.defineProperty(exports, "SearchBox", { enumerable: true, get: function () { return SearchBox_js_1.SearchBox; } });
-var index_js_2 = require("./core/utils/index.js");
+var index_js_2 = require("./utils/index.js");
 Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function () { return index_js_2.getUserColor; } });
 Object.defineProperty(exports, "ColorValue", { enumerable: true, get: function () { return index_js_2.ColorValue; } });
 Object.defineProperty(exports, "MiddleTextTruncation", { enumerable: true, get: function () { return index_js_2.MiddleTextTruncation; } });

package/cjs/react-table/react-table.js

@@ -3,7 +3,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-empty-interface */
 /* eslint-disable @typescript-eslint/ban-types */

package/cjs/{core/utils → utils}/components/AutoclearingHiddenLiveRegion.js

@@ -29,7 +29,7 @@ exports.AutoclearingHiddenLiveRegion = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const VisuallyHidden_js_1 = require("../../VisuallyHidden/VisuallyHidden.js");
+const VisuallyHidden_js_1 = require("../../core/VisuallyHidden/VisuallyHidden.js");
 const index_js_1 = require("../functions/index.js");
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.

package/cjs/{core/utils → utils}/components/InputContainer.js

@@ -34,8 +34,8 @@ exports.InputContainer = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_js_1 = require("./Box.js");
-const Label_js_1 = require("../../Label/Label.js");
-const StatusMessage_js_1 = require("../../StatusMessage/StatusMessage.js");
+const Label_js_1 = require("../../core/Label/Label.js");
+const StatusMessage_js_1 = require("../../core/StatusMessage/StatusMessage.js");
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private

package/{esm/core → cjs}/utils/components/InputFlexContainer.d.ts

@@ -1,6 +1,6 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
-import type { IconProps } from '../../Icon/Icon.js';
-import type { IconButtonProps } from '../../Buttons/IconButton.js';
+import type { IconProps } from '../../core/Icon/Icon.js';
+import type { IconButtonProps } from '../../core/Buttons/IconButton.js';
 export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';

package/cjs/{core/utils → utils}/components/InputFlexContainer.js

@@ -11,8 +11,8 @@ exports.InputFlexContainerIcon = exports.InputFlexContainerButton = exports.Inpu
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_js_1 = require("./Box.js");
-const Icon_js_1 = require("../../Icon/Icon.js");
-const IconButton_js_1 = require("../../Buttons/IconButton.js");
+const Icon_js_1 = require("../../core/Icon/Icon.js");
+const IconButton_js_1 = require("../../core/Buttons/IconButton.js");
 /**
  * Utility component for input container with display flex abilities.
  * @private

package/cjs/{core/utils → utils}/components/Portal.js

@@ -30,7 +30,7 @@ exports.Portal = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const ReactDOM = __importStar(require("react-dom"));
-const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
+const ThemeContext_js_1 = require("../../core/ThemeProvider/ThemeContext.js");
 const dom_js_1 = require("../functions/dom.js");
 const useIsClient_js_1 = require("../hooks/useIsClient.js");
 // ----------------------------------------------------------------------------

package/cjs/{core/utils → utils}/components/WithCSSTransition.js

@@ -33,7 +33,7 @@ exports.WithCSSTransition = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const react_transition_group_1 = require("react-transition-group");
-const styles_js_1 = __importDefault(require("../../../styles.js"));
+const styles_js_1 = __importDefault(require("../../styles.js"));
 const WithCSSTransition = (props) => {
     const { in: visible, dimension = 'height', children, ...rest } = props;
     const expandedSize = React.useRef(0);

package/cjs/{core/utils → utils}/functions/dev.js

@@ -3,10 +3,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-/* eslint-disable @typescript-eslint/no-explicit-any */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createWarningLogger = exports.isDev = exports.isUnitTest = void 0;
-const isJest = typeof globalThis.jest !== 'undefined';
+// @ts-expect-error -- jest is not used in iTwinUI but may be used in consuming apps
+const isJest = typeof jest !== 'undefined';
 const isMocha = typeof globalThis.beforeEach !== 'undefined' &&
     `${globalThis.beforeEach}`.replace(/\s/g, '') ===
         'function(name,fn){suites[0].beforeEach(name,fn);}';

package/cjs/{core/utils → utils}/functions/polymorphic.js

@@ -31,11 +31,10 @@ exports.polymorphic = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const useGlobals_js_1 = require("../hooks/useGlobals.js");
-const styles_js_1 = __importDefault(require("../../../styles.js"));
+const styles_js_1 = __importDefault(require("../../styles.js"));
 const _base = (defaultElement) => {
     return (className, attrs) => {
         const Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {

package/cjs/{core/utils → utils}/functions/react.js

@@ -45,7 +45,6 @@ const cloneElementWithRef = (children, getProps) => {
     }
     const props = getProps(children);
     const ref = (0, useMergedRefs_js_1.mergeRefs)(...[
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         'ref' in children ? children.ref : null,
         'ref' in props ? props.ref : null,
     ].filter(Boolean));

package/{esm/core → cjs}/utils/hooks/useGlobals.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
+import { ThemeContext } from '../../core/ThemeProvider/ThemeContext.js';
 /**
  * Hook used in every component for any shared setup and side effects.
  * Returns the nearest ThemeContext.
@@ -7,8 +7,8 @@ import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
  * @private
  */
 export declare const useGlobals: () => {
-    theme?: import("../../ThemeProvider/ThemeProvider.js").ThemeType | undefined;
-    themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
+    theme?: import("../../index.js").ThemeType | undefined;
+    themeOptions?: import("../../core/ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
     portalContainer?: HTMLElement | null | undefined;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */

package/cjs/{core/utils → utils}/hooks/useGlobals.js

@@ -29,7 +29,7 @@ exports.useThemeProviderWarning = exports.useGlobals = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
+const ThemeContext_js_1 = require("../../core/ThemeProvider/ThemeContext.js");
 const dev_js_1 = require("../functions/dev.js");
 const didLogWarning = {
     fontSize: false,

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useSafeContext, polymorphic, StatusIconMap, SvgCloseSmall, Box, } from '../utils/index.js';
+import { useSafeContext, polymorphic, StatusIconMap, SvgCloseSmall, Box, } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Icon } from '../Icon/Icon.js';
 import { Anchor } from '../Typography/Anchor.js';

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, SoftBackgrounds, isSoftBackground } from '../utils/index.js';
+import { Box, SoftBackgrounds, isSoftBackground } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Helper function that returns one of the preset badge color values.

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from '../utils/index.js';
+import { Box } from '../../utils/index.js';
 /**
  * Group Avatars together.
  *

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from '../utils/index.js';
+import { Box } from '../../utils/index.js';
 export const Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
     return (React.createElement(Box, { className: cx('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { isSoftBackground, SoftBackgrounds, Box } from '../utils/index.js';
+import { isSoftBackground, SoftBackgrounds, Box } from '../../utils/index.js';
 /**
  * Helper function that returns one of the preset badge color values.
  */

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, useOverflow, SvgChevronRight, Box, createWarningLogger, } from '../utils/index.js';
+import { useMergedRefs, useOverflow, SvgChevronRight, Box, createWarningLogger, } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
 const logWarningInDev = createWarningLogger();
@@ -57,7 +57,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/esm/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/esm/core/ButtonGroup/ButtonGroup.js

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
-import { FloatingDelayGroup } from '@floating-ui/react';
+import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
+import { Composite, CompositeItem, FloatingDelayGroup, } from '@floating-ui/react';
 // ----------------------------------------------------------------------------
 /** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
 export const ButtonGroupContext = React.createContext(undefined);
@@ -15,7 +15,7 @@ ButtonGroupContext.displayName = 'ButtonGroupContext';
  * Handles responsive overflow when the `overflowButton` prop is specified.
  *
  * @example
- * <ButtonGroup>
+ * <ButtonGroup role="toolbar">
  *   <IconButton>
  *     <SvgAdd />
  *   </IconButton>
@@ -38,34 +38,46 @@ ButtonGroupContext.displayName = 'ButtonGroupContext';
  *   {buttons}
  * </ButtonGroup>
  */
-export const 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] = useOverflow(items, !overflowButton, orientation);
-    const refs = useMergedRefs(!!overflowButton ? overflowRef : null, ref);
+export const 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(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(FloatingDelayGroup, { delay: { open: 50, close: 250 } },
-        React.createElement(ButtonGroupContext.Provider, { value: orientation },
-            React.createElement(Box, { className: cx('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(ButtonGroupContext.Provider, { value: orientation }, props.role === 'toolbar' ? (React.createElement(Composite, { orientation: orientation, render: node })) : (node))));
+});
+// ----------------------------------------------------------------------------
+const BaseGroup = React.forwardRef((props, forwardedRef) => {
+    const { orientation, className, ...rest } = props;
+    return (React.createElement(Box, { className: cx('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] = useOverflow(items, !overflowButton, orientation);
+    return (React.createElement(BaseGroup, { orientation: orientation, ...rest, className: cx({
+            'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
+        }, props.className), ref: 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)));
+    })()));
 });