@itwin/itwinui-react 3.17.3 → 3.18.0

package/esm/core/LabeledTextarea/LabeledTextarea.js

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

package/esm/core/LinkAction/LinkAction.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { polymorphic } from '../../utils/functions/polymorphic.js';
 import { Box } from '../../utils/components/index.js';
 export const LinkAction = React.forwardRef((props, forwardedRef) => {
-  let { as: asProp = props.href ? 'a' : 'button' } = props;
+  let { as: asProp = !!props.href ? 'a' : 'button' } = props;
   return React.createElement(Box, {
     ...props,
     as: asProp,
@@ -11,4 +11,7 @@ export const LinkAction = React.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  LinkAction.displayName = 'LinkAction';
 export const LinkBox = polymorphic.div('iui-link-box');
+if ('development' === process.env.NODE_ENV) LinkBox.displayName = 'LinkBox';

package/esm/core/List/List.js

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

package/esm/core/List/ListItem.js

@@ -24,10 +24,20 @@ let ListItemComponent = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  ListItemComponent.displayName = 'ListItem';
 let ListItemIcon = polymorphic.div('iui-list-item-icon');
+if ('development' === process.env.NODE_ENV)
+  ListItemIcon.displayName = 'ListItem.Icon';
 let ListItemContent = polymorphic.div('iui-list-item-content');
+if ('development' === process.env.NODE_ENV)
+  ListItemContent.displayName = 'ListItem.Content';
 let ListItemDescription = polymorphic.div('iui-list-item-description');
+if ('development' === process.env.NODE_ENV)
+  ListItemDescription.displayName = 'ListItem.Description';
 let ListItemAction = LinkAction;
+if ('development' === process.env.NODE_ENV)
+  ListItemAction.displayName = 'ListItem.Action';
 export const ListItem = Object.assign(ListItemComponent, {
   Icon: ListItemIcon,
   Content: ListItemContent,

package/esm/core/Menu/Menu.d.ts

@@ -17,7 +17,9 @@ type MenuProps = {
     trigger: React.ReactNode;
     /**
      * You can use this optional prop when the position reference is not the trigger.
-     * (Equivalent to using FloatingUI's `floating.refs.setPositionReference`)
+     *
+     * This can be either a real element, or a [virtual element](https://floating-ui.com/docs/virtual-elements)
+     * containing a `getBoundingClientRect` method.
      */
     positionReference?: Parameters<ReturnType<typeof usePopover>['refs']['setPositionReference']>[0];
     /**

package/esm/core/Menu/Menu.js

@@ -151,7 +151,10 @@ export const Menu = React.forwardRef((props, ref) => {
         onMouseEnter: mergeEventHandlers(userProps?.onMouseEnter, (event) => {
           if (null != focusableItemIndex && focusableItemIndex >= 0)
             setActiveIndex(focusableItemIndex);
-          if (event.target === event.currentTarget) event.currentTarget.focus();
+          if (event.target === event.currentTarget)
+            event.currentTarget.focus({
+              focusVisible: false,
+            });
         }),
       }),
     [activeIndex, getItemProps, nodeId, parentId, tree?.events],

package/esm/core/Menu/MenuDivider.js

@@ -2,3 +2,5 @@ import { polymorphic } from '../../utils/index.js';
 export const MenuDivider = polymorphic.div('iui-menu-divider', {
   role: 'separator',
 });
+if ('development' === process.env.NODE_ENV)
+  MenuDivider.displayName = 'MenuDivider';

package/esm/core/Menu/MenuExtraContent.d.ts

@@ -18,4 +18,4 @@
  *   ]}
  * </Menu>
  */
-export declare const MenuExtraContent: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
+export declare const MenuExtraContent: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/Menu/MenuExtraContent.js

@@ -1,4 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
-export const MenuExtraContent = polymorphic.li('iui-menu-content', {
-  role: 'presentation',
-});
+export const MenuExtraContent = polymorphic.div('iui-menu-content');
+if ('development' === process.env.NODE_ENV)
+  MenuExtraContent.displayName = 'MenuExtraContent';

package/esm/core/Menu/MenuItem.js

@@ -21,7 +21,7 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     value,
     onClick: onClickProp,
     sublabel,
-    size = sublabel ? 'large' : 'default',
+    size = !!sublabel ? 'large' : 'default',
     icon,
     startIcon = icon,
     badge,
@@ -31,6 +31,14 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = useWarningLogger();
+  if (
+    'development' === process.env.NODE_ENV &&
+    null != onClickProp &&
+    subMenuItems.length > 0
+  )
+    logWarning(
+      'Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.',
+    );
   let parentMenu = React.useContext(MenuContext);
   let dropdownMenu = React.useContext(DropdownMenuContext);
   let shouldCloseMenuOnClick = React.useContext(
@@ -139,3 +147,4 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
       : trigger,
   );
 });
+if ('development' === process.env.NODE_ENV) MenuItem.displayName = 'MenuItem';

package/esm/core/Menu/MenuItemSkeleton.js

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

package/esm/core/Modal/Modal.d.ts

@@ -30,7 +30,7 @@ type ModalProps = {
      */
     onKeyDown?: React.KeyboardEventHandler;
     /**
-     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     * If true, the dialog will be portaled to the end of `<body>` or to the nearest popover.
      *
      * Can be set to an object with a `to` property to portal into a specific element.
      * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).

package/esm/core/Modal/Modal.js

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

package/esm/core/Modal/ModalButtonBar.js

@@ -1,2 +1,4 @@
 import { DialogButtonBar } from '../Dialog/DialogButtonBar.js';
 export const ModalButtonBar = Object.assign({}, DialogButtonBar);
+if ('development' === process.env.NODE_ENV)
+  ModalButtonBar.displayName = 'ModalButtonBar';

package/esm/core/Modal/ModalContent.js

@@ -1,2 +1,4 @@
 import { DialogContent } from '../Dialog/DialogContent.js';
 export const ModalContent = Object.assign({}, DialogContent);
+if ('development' === process.env.NODE_ENV)
+  ModalContent.displayName = 'ModalContent';

package/esm/core/NonIdealState/ErrorPage.js

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

package/esm/core/NonIdealState/NonIdealState.js

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

package/esm/core/NotificationMarker/NotificationMarker.js

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

package/esm/core/Overlay/Overlay.js

@@ -12,6 +12,8 @@ let OverlayComponent = React.forwardRef((props, forwardedRef) => {
     React.createElement(OverlayHiddenContent, null, children),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  OverlayComponent.displayName = 'Overlay';
 let OverlayHiddenContent = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   return React.createElement(
@@ -24,8 +26,14 @@ let OverlayHiddenContent = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
 let OverlayOverlay = polymorphic.div('iui-overlay');
+if ('development' === process.env.NODE_ENV)
+  OverlayOverlay.displayName = 'Overlay.Overlay';
 let OverlayWrapper = polymorphic.div('iui-overlay-wrapper');
+if ('development' === process.env.NODE_ENV)
+  OverlayWrapper.displayName = 'Overlay.Wrapper';
 export const Overlay = Object.assign(OverlayComponent, {
   Wrapper: OverlayWrapper,
   HiddenContent: OverlayHiddenContent,

package/esm/core/Panels/Panels.js

@@ -92,7 +92,11 @@ export const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapper.displayName = 'Panels.Wrapper';
 export const PanelsWrapperContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapperContext.displayName = 'PanelsWrapperContext';
 let Panel = React.forwardRef((props, forwardedRef) => {
   let { id, children, className, ...rest } = props;
   let { activePanelId, triggers, panels, setActivePanelId } =
@@ -140,7 +144,10 @@ let Panel = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV) Panel.displayName = 'Panels.Panel';
 let PanelContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  PanelContext.displayName = 'PanelContext';
 let PanelTrigger = (props) => {
   let { children, for: forProp } = props;
   let {
@@ -213,6 +220,8 @@ let PanelTrigger = (props) => {
     'aria-controls': forProp,
   }));
 };
+if ('development' === process.env.NODE_ENV)
+  PanelTrigger.displayName = 'Panels.Trigger';
 let PanelHeader = React.forwardRef((props, forwardedRef) => {
   let { titleProps, children, ...rest } = props;
   let { shouldFocus, setShouldFocus } = useSafeContext(PanelsWrapperContext);
@@ -252,6 +261,8 @@ let PanelHeader = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  PanelHeader.displayName = 'Panels.Header';
 let PanelBackButton = React.forwardRef((props, forwardedRef) => {
   let { children, onClick, ...rest } = props;
   let { instance: panelInstance } = useSafeContext(PanelsInstanceContext);
@@ -272,6 +283,8 @@ let PanelBackButton = React.forwardRef((props, forwardedRef) => {
     children || React.createElement(SvgChevronLeft, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  PanelBackButton.displayName = 'Panels.BackButton';
 export const Panels = {
   Wrapper: PanelsWrapper,
   Panel,

package/esm/core/Panels/helpers.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useSafeContext, useSynchronizeInstance } from '../../utils/index.js';
 import { Panels, PanelsWrapperContext } from './Panels.js';
 export const PanelsInstanceContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  PanelsInstanceContext.displayName = 'PanelsInstanceContext';
 export const PanelsInstanceProvider = (props) => {
   let { children, instance: instanceProp } = props;
   let instanceBackup = Panels.useInstance();

package/esm/core/Popover/Popover.js

@@ -32,7 +32,10 @@ import {
   useLayoutEffect,
   useMergedRefs,
 } from '../../utils/index.js';
-import { usePortalTo } from '../../utils/components/Portal.js';
+import {
+  PortalContainerContext,
+  usePortalTo,
+} from '../../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 export const PopoverOpenContext = React.createContext(void 0);
 export const PopoverInitialFocusContext = React.createContext(void 0);
@@ -51,10 +54,12 @@ export const usePopover = (options) => {
   let mergedInteractions = React.useMemo(
     () => ({
       ...interactionsProp,
-      click: interactionsProp?.click ?? true,
-      dismiss: interactionsProp?.dismiss ?? true,
-      hover: interactionsProp?.hover ?? false,
-      focus: interactionsProp?.focus ?? false,
+      ...{
+        click: interactionsProp?.click ?? true,
+        dismiss: interactionsProp?.dismiss ?? true,
+        hover: interactionsProp?.hover ?? false,
+        focus: interactionsProp?.focus ?? false,
+      },
     }),
     [interactionsProp],
   );
@@ -81,6 +86,7 @@ export const usePopover = (options) => {
     open,
     onOpenChange,
     strategy: 'fixed',
+    transform: false,
     whileElementsMounted: React.useMemo(
       () =>
         open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
@@ -163,7 +169,7 @@ export const usePopover = (options) => {
             availableHeight && {
               maxBlockSize: `min(${availableHeight}px, ${maxHeight})`,
             }),
-          zIndex: 9999,
+          zIndex: 999,
           ...(matchWidth && referenceWidth
             ? {
                 minInlineSize: `${referenceWidth}px`,
@@ -233,7 +239,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = React.useState();
+  let [popoverElement, setPopoverElement] = React.useState(null);
   let popoverRef = useMergedRefs(
     popover.refs.setFloating,
     forwardedRef,
@@ -280,33 +286,37 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
             },
             React.createElement(
               ThemeProvider,
-              {
-                portalContainer: popoverElement,
-              },
-              React.createElement(DisplayContents, null),
+              null,
               React.createElement(
-                FloatingFocusManager,
+                PortalContainerContext.Provider,
                 {
-                  context: popover.context,
-                  modal: false,
-                  initialFocus: initialFocus,
+                  value: popoverElement,
                 },
+                React.createElement(DisplayContents, null),
                 React.createElement(
-                  Box,
+                  FloatingFocusManager,
                   {
-                    className: cx(
-                      {
-                        'iui-popover-surface': applyBackground,
-                      },
-                      className,
-                    ),
-                    'aria-labelledby': hasAriaLabel
-                      ? void 0
-                      : popover.refs.domReference.current?.id,
-                    ...popover.getFloatingProps(rest),
-                    ref: popoverRef,
+                    context: popover.context,
+                    modal: false,
+                    initialFocus: initialFocus,
                   },
-                  content,
+                  React.createElement(
+                    Box,
+                    {
+                      className: cx(
+                        {
+                          'iui-popover-surface': applyBackground,
+                        },
+                        className,
+                      ),
+                      'aria-labelledby': hasAriaLabel
+                        ? void 0
+                        : popover.refs.domReference.current?.id,
+                      ...popover.getFloatingProps(rest),
+                      ref: popoverRef,
+                    },
+                    content,
+                  ),
                 ),
               ),
             ),
@@ -315,6 +325,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV) Popover.displayName = 'Popover';
 let PopoverPortal = ({ children, portal = true }) => {
   let portalTo = usePortalTo(portal);
   return React.createElement(

package/esm/core/ProgressIndicators/ProgressLinear.js

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

package/esm/core/ProgressIndicators/ProgressRadial.js

@@ -55,3 +55,5 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
     'x-small' !== size ? children ?? (status ? statusMap[status] : null) : null,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ProgressRadial.displayName = 'ProgressRadial';

package/esm/core/Radio/Radio.js

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

package/esm/core/RadioTiles/RadioTile.js

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

package/esm/core/RadioTiles/RadioTileGroup.js

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

package/esm/core/SearchBox/SearchBox.js

@@ -113,11 +113,15 @@ let SearchBoxCollapsedState = ({ children }) => {
     children ?? React.createElement(SearchBoxExpandButton, null),
   );
 };
+if ('development' === process.env.NODE_ENV)
+  SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
 let SearchBoxExpandedState = ({ children }) => {
   let { isExpanded, expandable } = useSafeContext(SearchBoxContext);
   if (expandable && !isExpanded) return null;
   return React.createElement(React.Fragment, null, children);
 };
+if ('development' === process.env.NODE_ENV)
+  SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 let SearchBoxIcon = React.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   return React.createElement(
@@ -131,6 +135,8 @@ let SearchBoxIcon = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgSearch, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SearchBoxIcon.displayName = 'SearchBox.Icon';
 let SearchBoxInput = React.forwardRef((props, ref) => {
   let { className, id: idProp, ...rest } = props;
   let { inputId, setInputId, isDisabled, inputRef } =
@@ -149,6 +155,8 @@ let SearchBoxInput = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  SearchBoxInput.displayName = 'SearchBox.Input';
 let SearchBoxButton = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   let { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
@@ -163,6 +171,8 @@ let SearchBoxButton = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgSearch, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SearchBoxButton.displayName = 'SearchBox.Button';
 let SearchBoxCollapseButton = React.forwardRef((props, ref) => {
   let { children, onClick: onClickProp, ...rest } = props;
   let {
@@ -183,6 +193,8 @@ let SearchBoxCollapseButton = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgCloseSmall, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 let SearchBoxExpandButton = React.forwardRef((props, ref) => {
   let { children, onClick: onClickProp, ...rest } = props;
   let {
@@ -205,6 +217,8 @@ let SearchBoxExpandButton = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgSearch, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 export const SearchBox = Object.assign(SearchBoxComponent, {
   Icon: SearchBoxIcon,
   Input: SearchBoxInput,
@@ -214,3 +228,4 @@ export const SearchBox = Object.assign(SearchBoxComponent, {
   ExpandedState: SearchBoxExpandedState,
   CollapsedState: SearchBoxCollapsedState,
 });
+if ('development' === process.env.NODE_ENV) SearchBox.displayName = 'SearchBox';