@itwin/itwinui-react 3.17.3 → 3.18.0

package/cjs/core/Tree/Tree.js

@@ -189,6 +189,7 @@ const Tree = (props) => {
         ),
   );
 };
+if ('development' === process.env.NODE_ENV) Tree.displayName = 'Tree';
 const TreeElement = _index.polymorphic.div('iui-tree', {
   role: 'tree',
   tabIndex: 0,
@@ -216,29 +217,37 @@ const VirtualizedTree = _react.forwardRef(
         ref: (0, _index.useMergedRefs)(ref, parentRef),
       },
       _react.createElement(
-        _index.ShadowRoot,
+        'div',
         {
-          css: virtualizerCss,
+          style: {
+            display: 'contents',
+          },
         },
         _react.createElement(
-          'div',
+          _index.ShadowRoot,
           {
-            'data-iui-virtualizer': 'root',
-            style: {
-              minBlockSize: virtualizer.getTotalSize(),
-            },
+            css: virtualizerCss,
           },
-          _react.createElement('slot', null),
-        ),
-      ),
-      _react.createElement(
-        _react.Fragment,
-        null,
-        virtualizer
-          .getVirtualItems()
-          .map((virtualItem) =>
-            itemRenderer(virtualItem.index, virtualItem, virtualizer),
+          _react.createElement(
+            'div',
+            {
+              'data-iui-virtualizer': 'root',
+              style: {
+                minBlockSize: virtualizer.getTotalSize(),
+              },
+            },
+            _react.createElement('slot', null),
           ),
+        ),
+        _react.createElement(
+          _react.Fragment,
+          null,
+          virtualizer
+            .getVirtualItems()
+            .map((virtualItem) =>
+              itemRenderer(virtualItem.index, virtualItem, virtualizer),
+            ),
+        ),
       ),
     );
   },

package/cjs/core/Tree/TreeNode.js

@@ -263,3 +263,4 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV) TreeNode.displayName = 'TreeNode';

package/cjs/core/Tree/TreeNodeExpander.js

@@ -43,3 +43,5 @@ const TreeNodeExpander = _react.forwardRef((props, ref) => {
     }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TreeNodeExpander.displayName = 'TreeNode.Expander';

package/cjs/core/Typography/Anchor.js

@@ -44,3 +44,4 @@ const Anchor = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV) Anchor.displayName = 'Anchor';

package/cjs/core/Typography/Blockquote.js

@@ -29,3 +29,5 @@ const Blockquote = _react.forwardRef((props, ref) => {
     footer && _react.createElement('footer', null, footer),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  Blockquote.displayName = 'Blockquote';

package/cjs/core/Typography/Code.js

@@ -10,3 +10,4 @@ Object.defineProperty(exports, 'Code', {
 });
 const _index = require('../../utils/index.js');
 const Code = _index.polymorphic.code('iui-code');
+if ('development' === process.env.NODE_ENV) Code.displayName = 'Code';

package/cjs/core/Typography/Kbd.js

@@ -52,3 +52,4 @@ const Kbd = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV) Kbd.displayName = 'Kbd';

package/cjs/core/Typography/Text.js

@@ -52,4 +52,5 @@ const Text = _react.forwardRef((props, ref) => {
     }),
   );
 });
+if ('development' === process.env.NODE_ENV) Text.displayName = 'Text';
 const TextContext = _react.createContext(false);

package/cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -50,6 +50,8 @@ const VisuallyHidden = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  VisuallyHidden.displayName = 'VisuallyHidden';
 const css = `
   :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
     clip-path: inset(50%) !important;

package/cjs/index.d.ts

@@ -39,7 +39,7 @@ export { HeaderLogo } from './core/Header/HeaderLogo.js';
 export { List } from './core/List/List.js';
 export { ListItem } from './core/List/ListItem.js';
 export { TransferList } from './core/TransferList/TransferList.js';
-export { Tabs, Tab } from './core/Tabs/Tabs.js';
+export { Tabs, Tab, unstable_TabsPresentation } from './core/Tabs/Tabs.js';
 export { InformationPanel } from './core/InformationPanel/InformationPanel.js';
 export { InformationPanelWrapper } from './core/InformationPanel/InformationPanelWrapper.js';
 export { InformationPanelHeader } from './core/InformationPanel/InformationPanelHeader.js';

package/cjs/index.js

@@ -374,6 +374,9 @@ _export(exports, {
   unstable_Panels: function () {
     return _Panels.Panels;
   },
+  unstable_TabsPresentation: function () {
+    return _Tabs.unstable_TabsPresentation;
+  },
   useToaster: function () {
     return _Toaster.useToaster;
   },

package/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.17.3';
+const e = '3.18.0';
 const u = new Proxy(
   {},
   {

package/cjs/utils/components/AutoclearingHiddenLiveRegion.d.ts

@@ -7,6 +7,6 @@ import * as React from 'react';
  *
  * @private
  */
-export declare const AutoclearingHiddenLiveRegion: ({ text }: {
-    text?: string | undefined;
+export declare const AutoclearingHiddenLiveRegion: ({ text, ...props }: React.ComponentProps<"div"> & {
+    text: string;
 }) => React.JSX.Element;

package/cjs/utils/components/AutoclearingHiddenLiveRegion.js

@@ -12,7 +12,7 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _VisuallyHidden = require('../../core/VisuallyHidden/VisuallyHidden.js');
 const _index = require('../functions/index.js');
-const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
+const AutoclearingHiddenLiveRegion = ({ text, ...props }) => {
   let [maybeText, setMaybeText] = _react.useState(text);
   _react.useEffect(() => {
     setMaybeText(text);
@@ -28,6 +28,7 @@ const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
       as: 'div',
       'aria-live': 'polite',
       'aria-atomic': 'true',
+      ...props,
     },
     maybeText,
   );

package/cjs/utils/components/ButtonBase.js

@@ -46,3 +46,5 @@ const ButtonBase = _react.forwardRef((props, forwardedRef) => {
     onPointerUp: handleIfEnabled(props.onPointerUp),
   });
 });
+if ('development' === process.env.NODE_ENV)
+  ButtonBase.displayName = 'ButtonBase';

package/cjs/utils/components/InputWithIcon.js

@@ -10,3 +10,5 @@ Object.defineProperty(exports, 'InputWithIcon', {
 });
 const _polymorphic = require('../functions/polymorphic.js');
 const InputWithIcon = _polymorphic.polymorphic.div('iui-input-with-icon');
+if ('development' === process.env.NODE_ENV)
+  InputWithIcon.displayName = 'InputWithIcon';

package/cjs/utils/components/LineClamp.js

@@ -8,8 +8,12 @@ Object.defineProperty(exports, 'LineClamp', {
     return LineClamp;
   },
 });
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _Box = require('./Box.js');
 const _ShadowRoot = require('./ShadowRoot.js');
 const LineClamp = _react.forwardRef((props, forwardedRef) => {
@@ -19,6 +23,7 @@ const LineClamp = _react.forwardRef((props, forwardedRef) => {
     {
       ref: forwardedRef,
       ...rest,
+      className: (0, _classnames.default)('iui-line-clamp', props.className),
       style: {
         '--_iui-line-clamp': lines,
         ...props.style,
@@ -28,6 +33,7 @@ const LineClamp = _react.forwardRef((props, forwardedRef) => {
       _ShadowRoot.ShadowRoot,
       {
         css: css,
+        flush: false,
       },
       _react.createElement('slot', null),
     ),

package/cjs/utils/components/MiddleTextTruncation.js

@@ -49,6 +49,8 @@ const MiddleTextTruncation = _react.forwardRef((props, forwardedRef) => {
     }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  MiddleTextTruncation.displayName = 'MiddleTextTruncation';
 const MiddleTextTruncationContent = (props) => {
   let { text, endCharsCount = 6, textRenderer } = props;
   let { visibleCount } = _OverflowContainer.OverflowContainer.useContext();

package/cjs/utils/components/OverflowContainer.js

@@ -75,6 +75,8 @@ const OverflowContainer = Object.assign(OverflowContainerComponent, {
   useContext: useOverflowContainerContext,
 });
 const OverflowContainerContext = _react.default.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  OverflowContainerContext.displayName = 'OverflowContainerContext';
 const useOverflow = (itemsCount, orientation = 'horizontal') => {
   let [guessState, dispatch] = _react.default.useReducer(
     overflowGuessReducer,
@@ -103,18 +105,14 @@ const useOverflow = (itemsCount, orientation = 'horizontal') => {
           (1 === visibleCount && isOverflowing) ||
           (visibleCount === itemsCount && !isOverflowing) ||
           (maxGuess - minGuess === 1 && visibleCount === minGuess)
-        ) {
-          dispatch({
+        )
+          return void dispatch({
             type: 'stabilize',
           });
-          return;
-        }
-        if (maxGuess === visibleCount && !isOverflowing) {
-          dispatch({
+        if (maxGuess === visibleCount && !isOverflowing)
+          return void dispatch({
             type: 'shiftGuessRangeForward',
           });
-          return;
-        }
         isOverflowing
           ? dispatch({
               type: 'decreaseMaxGuess',

package/cjs/utils/components/Portal.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-export declare const portalContainerAtom: import("jotai").PrimitiveAtom<HTMLElement | null> & {
-    init: HTMLElement | null;
-};
+export declare const PortalContainerContext: React.Context<HTMLElement | null>;
 export type PortalProps = {
     /**
      * Where should the element be portaled to?
@@ -23,8 +21,8 @@ export type PortalProps = {
 /**
  * Helper component that portals children according to the following conditions:
  *   - renders null on server
- *   - if `portal` is set to true, renders into nearest ThemeProvider's portalContainer
- *   - if `portal` is set to false, renders as-is without portal
+ *   - if `portal` is set to true, renders into the element provided by PortalContainerContext.
+ *   - if `portal` is set to false, renders as-is without portal.
  *   - otherwise renders into `portal.to` (can be an element or a function)
  *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
  *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.

package/cjs/utils/components/Portal.js

@@ -13,8 +13,8 @@ _export(exports, {
   Portal: function () {
     return Portal;
   },
-  portalContainerAtom: function () {
-    return portalContainerAtom;
+  PortalContainerContext: function () {
+    return PortalContainerContext;
   },
   usePortalTo: function () {
     return usePortalTo;
@@ -26,9 +26,7 @@ const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(
   require('react-dom'),
 );
 const _useIsClient = require('../hooks/useIsClient.js');
-const _jotai = require('jotai');
-const _ScopeProvider = require('../providers/ScopeProvider.js');
-const portalContainerAtom = (0, _jotai.atom)(null);
+const PortalContainerContext = _react.createContext(null);
 const Portal = (props) => {
   let { portal = true, children } = props;
   let isClient = (0, _useIsClient.useIsClient)();
@@ -37,9 +35,7 @@ const Portal = (props) => {
   return portalTo ? _reactdom.createPortal(children, portalTo) : children;
 };
 const usePortalTo = (portal) => {
-  let [portalContainer] = (0, _ScopeProvider.useScopedAtom)(
-    portalContainerAtom,
-  );
+  let portalContainer = _react.useContext(PortalContainerContext);
   if ('boolean' == typeof portal) return portal ? portalContainer : null;
   let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
   return portalTo ?? portalContainer;

package/cjs/utils/components/ShadowRoot.d.ts

@@ -2,12 +2,21 @@ import * as React from 'react';
 type ShadowRootProps = {
     children: React.ReactNode;
     css?: string;
+    /**
+     * Control whether the children are portaled synchronously into the shadow-root (by using
+     * `flushSync` inside `queueMicrotask`).
+     *
+     * NOTE: This can block the main thread if too many ShadowRoots are rendered at the same time.
+     *
+     * @default true
+     */
+    flush?: boolean;
 };
 /**
  * Wrapper around `<template>` element that attaches shadow root to its parent
- * and moves its children into the shadow root.
+ * and portals its children into the shadow root.
  *
  * @private
  */
-export declare const ShadowRoot: ({ children, css }: ShadowRootProps) => React.JSX.Element | null;
+export declare const ShadowRoot: ({ children, css, flush, }: ShadowRootProps) => React.JSX.Element | null;
 export {};

package/cjs/utils/components/ShadowRoot.js

@@ -20,7 +20,7 @@ const supportsDSD =
   isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
 const supportsAdoptedStylesheets =
   isBrowser && 'adoptedStyleSheets' in Document.prototype;
-const ShadowRoot = ({ children, css }) => {
+const ShadowRoot = ({ children, css, flush = true }) => {
   let isHydrating = 'hydrating' === (0, _index1.useHydration)();
   if (!isBrowser)
     return _react.createElement(
@@ -36,14 +36,16 @@ const ShadowRoot = ({ children, css }) => {
     ClientShadowRoot,
     {
       css: css,
+      flush: flush,
     },
     children,
   );
 };
-const ClientShadowRoot = ({ children, css }) => {
+const ClientShadowRoot = ({ children, css, flush = true }) => {
   let templateRef = _react.useRef(null);
   let shadowRoot = useShadowRoot(templateRef, {
     css,
+    flush,
   });
   let fallbackCss =
     !supportsAdoptedStylesheets && css
@@ -58,7 +60,7 @@ const ClientShadowRoot = ({ children, css }) => {
         ref: templateRef,
       });
 };
-function useShadowRoot(templateRef, { css = '' }) {
+function useShadowRoot(templateRef, { css = '', flush = true }) {
   let [shadowRoot, setShadowRoot] = _react.useState(null);
   let styleSheet = _react.useRef(void 0);
   let latestCss = (0, _index.useLatestRef)(css);
@@ -88,13 +90,13 @@ function useShadowRoot(templateRef, { css = '' }) {
           mode: 'open',
         });
       createStyleSheet(shadow);
-      _reactdom.flushSync(() => setShadowRoot(shadow));
+      if (flush) _reactdom.flushSync(() => setShadowRoot(shadow));
+      else setShadowRoot(shadow);
     };
-    queueMicrotask(() => {
-      setupOrReuseShadowRoot();
-    });
+    if (flush) queueMicrotask(() => setupOrReuseShadowRoot());
+    else setupOrReuseShadowRoot();
     return () => void setShadowRoot(null);
-  }, [templateRef, createStyleSheet, latestShadowRoot]);
+  }, [templateRef, createStyleSheet, latestShadowRoot, flush]);
   (0, _index.useLayoutEffect)(() => {
     if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
   }, [css]);

package/cjs/utils/functions/polymorphic.js

@@ -40,6 +40,8 @@ const _base = (defaultElement) => (className, attrs) => {
       ...props,
     });
   });
+  if ('development' === process.env.NODE_ENV)
+    Comp.displayName = getDisplayNameFromClass(className);
   return Comp;
 };
 const polymorphic = new Proxy(

package/cjs/utils/hooks/useGlobals.js

@@ -32,8 +32,35 @@ const useGlobals = () => {
   return themeContext;
 };
 const useThemeProviderWarning = (themeContext) => {
-  _react.useEffect(() => {}, [themeContext]);
+  _react.useEffect(() => {
+    if (
+      'development' === process.env.NODE_ENV &&
+      !_dev.isUnitTest &&
+      !didLogWarning.themeProvider &&
+      !themeContext
+    ) {
+      console.error(
+        'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
+      );
+      didLogWarning.themeProvider = true;
+    }
+  }, [themeContext]);
 };
 const useRootFontSizeWarning = () => {
-  _react.useEffect(() => {}, []);
+  _react.useEffect(() => {
+    if (
+      'development' === process.env.NODE_ENV &&
+      !_dev.isUnitTest &&
+      !didLogWarning.fontSize
+    ) {
+      let rootFontSize = parseInt(
+        getComputedStyle(document.documentElement).fontSize,
+      );
+      if (rootFontSize < 16)
+        console.error(
+          'Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size',
+        );
+      didLogWarning.fontSize = true;
+    }
+  }, []);
 };

package/cjs/utils/hooks/useWarningLogger.js

@@ -15,4 +15,32 @@ const _dom = require('../functions/dom.js');
 const _React = _react;
 const ReactInternals =
   _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-const useWarningLogger = () => () => {};
+const useWarningLogger =
+  'development' !== process.env.NODE_ENV || _dev.isUnitTest
+    ? () => () => {}
+    : function () {
+        let loggedRef = _react.useRef(false);
+        let timeoutRef = _react.useRef(void 0);
+        let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
+        let componentName = stack?.trim().split('\n')[1]?.trim();
+        let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
+        let logWarning = _react.useCallback(
+          (message) => {
+            timeoutRef.current = (0, _dom.getWindow)()?.setTimeout(() => {
+              if (!loggedRef.current) {
+                console.error(prefix, message);
+                loggedRef.current = true;
+              }
+            });
+          },
+          [prefix],
+        );
+        _react.useEffect(
+          () => () => {
+            if (timeoutRef.current)
+              (0, _dom.getWindow)()?.clearTimeout(timeoutRef.current);
+          },
+          [],
+        );
+        return logWarning;
+      };

package/cjs/utils/providers/index.d.ts

@@ -1,2 +1 @@
 export * from './HydrationProvider.js';
-export * from './ScopeProvider.js';

package/cjs/utils/providers/index.js

@@ -4,4 +4,3 @@ Object.defineProperty(exports, '__esModule', {
 });
 const _export_star = require('@swc/helpers/_/_export_star');
 _export_star._(require('./HydrationProvider.js'), exports);
-_export_star._(require('./ScopeProvider.js'), exports);

package/esm/core/Alert/Alert.js

@@ -45,6 +45,8 @@ let AlertComponent = React.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertComponent.displayName = 'Alert';
 let AlertWrapper = React.forwardRef((props, ref) => {
   let {
     children,
@@ -73,6 +75,8 @@ let AlertWrapper = React.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertWrapper.displayName = 'Alert.Wrapper';
 let AlertIcon = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   let { type } = useSafeContext(AlertContext);
@@ -87,7 +91,11 @@ let AlertIcon = React.forwardRef((props, ref) => {
     children ?? React.createElement(StatusIcon, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertIcon.displayName = 'Alert.Icon';
 let AlertMessage = polymorphic.span('iui-alert-message');
+if ('development' === process.env.NODE_ENV)
+  AlertMessage.displayName = 'Alert.Message';
 let AlertAction = React.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { type } = useSafeContext(AlertContext);
@@ -104,6 +112,8 @@ let AlertAction = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertAction.displayName = 'Alert.Action';
 let AlertCloseButton = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   return React.createElement(
@@ -118,6 +128,8 @@ let AlertCloseButton = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgCloseSmall, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertCloseButton.displayName = 'Alert.CloseButton';
 export const Alert = Object.assign(AlertComponent, {
   Wrapper: AlertWrapper,
   Icon: AlertIcon,

package/esm/core/Avatar/Avatar.js

@@ -51,3 +51,4 @@ export const Avatar = React.forwardRef((props, ref) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV) Avatar.displayName = 'Avatar';

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -60,3 +60,5 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AvatarGroup.displayName = 'AvatarGroup';

package/esm/core/Backdrop/Backdrop.js

@@ -15,3 +15,4 @@ export const Backdrop = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV) Backdrop.displayName = 'Backdrop';

package/esm/core/Badge/Badge.js

@@ -38,3 +38,4 @@ export const Badge = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV) Badge.displayName = 'Badge';

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -49,6 +49,8 @@ let BreadcrumbsComponent = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsComponent.displayName = 'Breadcrumbs';
 let BreadcrumbContent = (props) => {
   let { children: items, currentIndex, overflowButton, separator } = props;
   let { visibleCount } = OverflowContainer.useContext();
@@ -125,8 +127,13 @@ let ListItem = ({ item, isActive }) => {
     children?.type === 'span' ||
     children?.type === 'a' ||
     children?.type === Button
-  )
+  ) {
+    if ('development' === process.env.NODE_ENV)
+      logWarning(
+        'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
+      );
     children = React.createElement(BreadcrumbsItem, children.props);
+  }
   return React.createElement(
     Box,
     {
@@ -171,6 +178,8 @@ let BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
     ...commonProps,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
   Item: BreadcrumbsItem,
 });

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -8,6 +8,8 @@ import {
 } from '@floating-ui/react';
 import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 export const ButtonGroupContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
 export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
   let {
     children: childrenProp,
@@ -68,6 +70,8 @@ export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ButtonGroup.displayName = 'ButtonGroup';
 let BaseGroup = React.forwardRef((props, forwardedRef) => {
   let { orientation, className, ...rest } = props;
   return React.createElement(Box, {

package/esm/core/Buttons/Button.js

@@ -76,3 +76,4 @@ export const Button = React.forwardRef((props, ref) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV) Button.displayName = 'Button';

package/esm/core/Buttons/DropdownButton.js

@@ -46,3 +46,5 @@ export const DropdownButton = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  DropdownButton.displayName = 'DropdownButton';

package/esm/core/Buttons/IconButton.js

@@ -21,6 +21,13 @@ export const IconButton = React.forwardRef((props, ref) => {
   let buttonGroupOrientation = React.useContext(ButtonGroupContext);
   let hasPopoverOpen = React.useContext(PopoverOpenContext);
   let logWarning = useWarningLogger();
+  if (
+    'development' === process.env.NODE_ENV &&
+    !label &&
+    !props['aria-label'] &&
+    !props['aria-labelledby']
+  )
+    logWarning('IconButton is missing the `label` prop.');
   let button = React.createElement(
     ButtonBase,
     {
@@ -58,3 +65,5 @@ export const IconButton = React.forwardRef((props, ref) => {
       )
     : button;
 });
+if ('development' === process.env.NODE_ENV)
+  IconButton.displayName = 'IconButton';