@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/InputGroup/InputGroup.js

@@ -5,7 +5,7 @@ import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     className,
     children,
     disabled = false,
@@ -59,12 +59,10 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-const BottomMessage = (props) => {
-  const { message, status, svgIcon, displayStyle, messageProps } = props;
-  if (message && typeof message !== 'string') {
-    return message;
-  }
-  if (message || status || svgIcon) {
+let BottomMessage = (props) => {
+  let { message, status, svgIcon, displayStyle, messageProps } = props;
+  if (message && 'string' != typeof message) return message;
+  if (message || status || svgIcon)
     return React.createElement(
       StatusMessage,
       {
@@ -75,8 +73,7 @@ const BottomMessage = (props) => {
         status: status,
         ...messageProps,
       },
-      displayStyle !== 'inline' && message,
+      'inline' !== displayStyle && message,
     );
-  }
   return null;
 };

package/esm/core/InputWithDecorations/InputWithDecorations.js

@@ -6,9 +6,9 @@ import {
   InputFlexContainerIcon,
   useSafeContext,
 } from '../../utils/index.js';
-const InputWithDecorationsContext = React.createContext(undefined);
-const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
-  const { children, size, isDisabled, ...rest } = props;
+let InputWithDecorationsContext = React.createContext(void 0);
+let InputWithDecorationsComponent = React.forwardRef((props, ref) => {
+  let { children, size, isDisabled, ...rest } = props;
   return React.createElement(
     InputWithDecorationsContext.Provider,
     {
@@ -29,9 +29,9 @@ const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
     ),
   );
 });
-const InputWithDecorationsInput = React.forwardRef((props, ref) => {
-  const { id: idProp, size, disabled: localDisabled, ...rest } = props;
-  const { size: contextSize, isDisabled } = useSafeContext(
+let InputWithDecorationsInput = React.forwardRef((props, ref) => {
+  let { id: idProp, size, disabled: localDisabled, ...rest } = props;
+  let { size: contextSize, isDisabled } = useSafeContext(
     InputWithDecorationsContext,
   );
   return React.createElement(Box, {
@@ -43,10 +43,9 @@ const InputWithDecorationsInput = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
-const InputWithDecorationsButton = React.forwardRef((props, ref) => {
-  const { children, size, disabled: localDisabled, ...rest } = props;
-  const { size: contextSize, isDisabled } = useSafeContext(
+let InputWithDecorationsButton = React.forwardRef((props, ref) => {
+  let { children, size, disabled: localDisabled, ...rest } = props;
+  let { size: contextSize, isDisabled } = useSafeContext(
     InputWithDecorationsContext,
   );
   return React.createElement(
@@ -60,9 +59,7 @@ const InputWithDecorationsButton = React.forwardRef((props, ref) => {
     children,
   );
 });
-InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
-const InputWithDecorationsIcon = InputFlexContainerIcon;
-InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
+let InputWithDecorationsIcon = InputFlexContainerIcon;
 export const InputWithDecorations = Object.assign(
   InputWithDecorationsComponent,
   {

package/esm/core/Label/Label.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 export const Label = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     displayStyle = 'block',
     required,
     disabled,
@@ -17,12 +17,12 @@ export const Label = React.forwardRef((props, forwardedRef) => {
       className: cx(
         'iui-input-label',
         {
-          'iui-inline': displayStyle === 'inline',
+          'iui-inline': 'inline' === displayStyle,
           'iui-required': required,
         },
         className,
       ),
-      'data-iui-disabled': disabled ? true : undefined,
+      'data-iui-disabled': !!disabled || void 0,
       ref: forwardedRef,
       ...rest,
     },

package/esm/core/LabeledInput/LabeledInput.js

@@ -7,7 +7,7 @@ import { Label } from '../Label/Label.js';
 import { Icon } from '../Icon/Icon.js';
 import cx from 'classnames';
 export const LabeledInput = React.forwardRef((props, ref) => {
-  const {
+  let {
     disabled = false,
     label,
     message,
@@ -22,8 +22,8 @@ export const LabeledInput = React.forwardRef((props, ref) => {
     required = false,
     ...rest
   } = props;
-  const icon = svgIcon ?? (status && StatusIconMap[status]());
-  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
+  let icon = svgIcon ?? (status && StatusIconMap[status]());
+  let shouldShowIcon = null !== svgIcon && (svgIcon || (status && !message));
   return React.createElement(
     InputGrid,
     {
@@ -62,7 +62,7 @@ export const LabeledInput = React.forwardRef((props, ref) => {
           icon,
         ),
     ),
-    typeof message === 'string'
+    'string' == typeof message
       ? React.createElement(
           StatusMessage,
           {

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -4,7 +4,7 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
 export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     className,
     disabled = false,
     label,
@@ -42,14 +42,12 @@ export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
       disabled: disabled,
       className: className,
       style: style,
-      required: props.native ? required : undefined,
+      required: props.native ? required : void 0,
       ...rest,
       ref: forwardedRef,
-      ...{
-        styleType: 'default',
-      },
+      styleType: 'default',
     }),
-    typeof message === 'string'
+    'string' == typeof message
       ? React.createElement(
           StatusMessage,
           {

package/esm/core/LabeledSelect/LabeledSelect.types-test.js

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { LabeledSelect } from './LabeledSelect.js';
 () => {
-  const ref = useRef(null);
+  let ref = useRef(null);
   return React.createElement(
     React.Fragment,
     null,
@@ -21,15 +21,15 @@ import { LabeledSelect } from './LabeledSelect.js';
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
       ref: ref,
     }),
   );
 };
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(LabeledSelect, {
@@ -48,14 +48,13 @@ import { LabeledSelect } from './LabeledSelect.js';
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(LabeledSelect, {
@@ -75,14 +74,13 @@ import { LabeledSelect } from './LabeledSelect.js';
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(LabeledSelect, {
@@ -94,9 +92,8 @@ import { LabeledSelect } from './LabeledSelect.js';
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { LabeledInput } from '../LabeledInput/LabeledInput.js';
-export const LabeledTextarea = React.forwardRef((props, forwardedRef) => {
-  return React.createElement(LabeledInput, {
+export const LabeledTextarea = React.forwardRef((props, forwardedRef) =>
+  React.createElement(LabeledInput, {
     as: 'textarea',
     rows: 3,
     ref: forwardedRef,
     ...props,
-  });
-});
+  }),
+);

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) => {
-  const { as: asProp = !!props.href ? 'a' : 'button' } = props;
+  let { as: asProp = props.href ? 'a' : 'button' } = props;
   return React.createElement(Box, {
     ...props,
     as: asProp,
@@ -11,6 +11,4 @@ export const LinkAction = React.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
   });
 });
-LinkAction.displayName = 'LinkAction';
 export const LinkBox = polymorphic.div('iui-link-box');
-LinkBox.displayName = 'LinkBox';

package/esm/core/List/List.js

@@ -2,4 +2,3 @@ import { polymorphic } from '../../utils/index.js';
 export const List = polymorphic.ul('iui-list', {
   role: 'list',
 });
-List.displayName = 'List';

package/esm/core/List/ListItem.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import cx from 'classnames';
 import { polymorphic, Box } from '../../utils/index.js';
 import { LinkAction } from '../LinkAction/LinkAction.js';
-const ListItemComponent = React.forwardRef((props, ref) => {
-  const {
+let ListItemComponent = React.forwardRef((props, ref) => {
+  let {
     size = 'default',
     disabled = false,
     active = false,
@@ -15,24 +15,19 @@ const ListItemComponent = React.forwardRef((props, ref) => {
   return React.createElement(Box, {
     as: 'li',
     className: cx('iui-list-item', className),
-    'data-iui-active': active ? 'true' : undefined,
-    'data-iui-disabled': disabled ? 'true' : undefined,
-    'data-iui-size': size === 'large' ? 'large' : undefined,
-    'data-iui-actionable': actionable ? 'true' : undefined,
-    'data-iui-focused': focused ? 'true' : undefined,
+    'data-iui-active': active ? 'true' : void 0,
+    'data-iui-disabled': disabled ? 'true' : void 0,
+    'data-iui-size': 'large' === size ? 'large' : void 0,
+    'data-iui-actionable': actionable ? 'true' : void 0,
+    'data-iui-focused': focused ? 'true' : void 0,
     ref: ref,
     ...rest,
   });
 });
-ListItemComponent.displayName = 'ListItem';
-const ListItemIcon = polymorphic('iui-list-item-icon');
-ListItemIcon.displayName = 'ListItem.Icon';
-const ListItemContent = polymorphic('iui-list-item-content');
-ListItemContent.displayName = 'ListItem.Content';
-const ListItemDescription = polymorphic('iui-list-item-description');
-ListItemDescription.displayName = 'ListItem.Description';
-const ListItemAction = LinkAction;
-ListItemAction.displayName = 'ListItem.Action';
+let ListItemIcon = polymorphic('iui-list-item-icon');
+let ListItemContent = polymorphic('iui-list-item-content');
+let ListItemDescription = polymorphic('iui-list-item-description');
+let ListItemAction = LinkAction;
 export const ListItem = Object.assign(ListItemComponent, {
   Icon: ListItemIcon,
   Content: ListItemContent,

package/esm/core/Menu/Menu.js

@@ -21,7 +21,7 @@ import {
   useInteractions,
 } from '@floating-ui/react';
 export const Menu = React.forwardRef((props, ref) => {
-  const {
+  let {
     className,
     trigger,
     positionReference,
@@ -30,29 +30,29 @@ export const Menu = React.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const tree = useFloatingTree();
-  const nodeId = useFloatingNodeId();
-  const parentId = useFloatingParentNodeId();
-  const {
+  let tree = useFloatingTree();
+  let nodeId = useFloatingNodeId();
+  let parentId = useFloatingParentNodeId();
+  let {
     interactions: interactionsProp,
     visible: visibleProp,
     onVisibleChange: onVisibleChangeProp,
     ...restPopoverProps
   } = popoverPropsProp ?? {};
-  const {
+  let {
     listNavigation: listNavigationPropsProp,
     hover: hoverProp,
     ...restInteractionsProps
   } = interactionsProp ?? {};
-  const [visible, setVisible] = useControlledState(
+  let [visible, setVisible] = useControlledState(
     false,
     visibleProp,
     onVisibleChangeProp,
   );
-  const [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] =
+  let [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] =
     React.useState(false);
-  const [menuElement, setMenuElement] = React.useState(null);
-  const { focusableElementsRef, focusableElements } = useFocusableElements(
+  let [menuElement, setMenuElement] = React.useState(null);
+  let { focusableElementsRef, focusableElements } = useFocusableElements(
     menuElement,
     {
       filter: (allElements) =>
@@ -61,14 +61,14 @@ export const Menu = React.forwardRef((props, ref) => {
         ),
     },
   );
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const popover = usePopover({
+  let [activeIndex, setActiveIndex] = React.useState(null);
+  let popover = usePopover({
     nodeId,
     visible,
     onVisibleChange: (open) => (open ? setVisible(true) : close()),
     interactions: {
       hover:
-        tree == null
+        null == tree
           ? hoverProp
           : {
               enabled: !!hoverProp && !hasFocusedNodeInSubmenu,
@@ -78,35 +78,31 @@ export const Menu = React.forwardRef((props, ref) => {
     },
     ...restPopoverProps,
   });
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
-    [
-      useListNavigation(popover.context, {
-        activeIndex,
-        focusItemOnHover: false,
-        listRef: focusableElementsRef,
-        onNavigate: setActiveIndex,
-        ...listNavigationPropsProp,
-      }),
-    ],
-  );
+  let { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    useListNavigation(popover.context, {
+      activeIndex,
+      focusItemOnHover: false,
+      listRef: focusableElementsRef,
+      onNavigate: setActiveIndex,
+      ...listNavigationPropsProp,
+    }),
+  ]);
   React.useEffect(() => {
-    if (positionReference !== undefined) {
+    if (void 0 !== positionReference)
       popover.refs.setPositionReference(positionReference);
-    }
   }, [popover.refs, positionReference]);
-  const refs = useMergedRefs(setMenuElement, ref, popover.refs.setFloating);
-  const triggerRef = React.useRef(null);
-  const close = React.useCallback(() => {
+  let refs = useMergedRefs(setMenuElement, ref, popover.refs.setFloating);
+  let triggerRef = React.useRef(null);
+  let close = React.useCallback(() => {
     setVisible(false);
-    if (parentId == null) {
+    if (null == parentId)
       triggerRef.current?.focus({
         preventScroll: true,
       });
-    }
   }, [parentId, setVisible]);
   useSyncExternalStore(
     React.useCallback(() => {
-      const closeUnrelatedMenus = (event) => {
+      let closeUnrelatedMenus = (event) => {
         if (
           (parentId === event.parentId && nodeId !== event.nodeId) ||
           parentId === event.nodeId
@@ -120,16 +116,16 @@ export const Menu = React.forwardRef((props, ref) => {
         tree?.events.off('onNodeFocused', closeUnrelatedMenus);
       };
     }, [nodeId, parentId, tree?.events, setVisible]),
-    () => undefined,
-    () => undefined,
+    () => void 0,
+    () => void 0,
   );
-  const popoverGetItemProps = ({ focusableItemIndex, userProps }) => {
-    return getItemProps({
+  let popoverGetItemProps = ({ focusableItemIndex, userProps }) =>
+    getItemProps({
       ...userProps,
       tabIndex:
-        activeIndex != null &&
+        null != activeIndex &&
         activeIndex >= 0 &&
-        focusableItemIndex != null &&
+        null != focusableItemIndex &&
         focusableItemIndex >= 0 &&
         activeIndex === focusableItemIndex
           ? 0
@@ -144,16 +140,12 @@ export const Menu = React.forwardRef((props, ref) => {
         });
       }),
       onMouseEnter: mergeEventHandlers(userProps?.onMouseEnter, (event) => {
-        if (focusableItemIndex != null && focusableItemIndex >= 0) {
+        if (null != focusableItemIndex && focusableItemIndex >= 0)
           setActiveIndex(focusableItemIndex);
-        }
-        if (event.target === event.currentTarget) {
-          event.currentTarget.focus();
-        }
+        if (event.target === event.currentTarget) event.currentTarget.focus();
       }),
     });
-  };
-  const reference = cloneElementWithRef(trigger, (triggerChild) =>
+  let reference = cloneElementWithRef(trigger, (triggerChild) =>
     getReferenceProps(
       popover.getReferenceProps({
         ...triggerChild.props,
@@ -162,7 +154,7 @@ export const Menu = React.forwardRef((props, ref) => {
       }),
     ),
   );
-  const floating =
+  let floating =
     popover.open &&
     React.createElement(
       Portal,
@@ -203,7 +195,7 @@ export const Menu = React.forwardRef((props, ref) => {
         },
         reference,
       ),
-      tree != null
+      null != tree
         ? React.createElement(
             FloatingNode,
             {
@@ -215,4 +207,4 @@ export const Menu = React.forwardRef((props, ref) => {
     ),
   );
 });
-export const MenuContext = React.createContext(undefined);
+export const MenuContext = React.createContext(void 0);

package/esm/core/Menu/MenuItem.js

@@ -8,9 +8,9 @@ import {
 import { Menu, MenuContext } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
 import cx from 'classnames';
-const logWarningInDev = createWarningLogger();
+let logWarning = createWarningLogger();
 export const MenuItem = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     className,
     children,
     isSelected,
@@ -18,7 +18,7 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     value,
     onClick: onClickProp,
     sublabel,
-    size = !!sublabel ? 'large' : 'default',
+    size = sublabel ? 'large' : 'default',
     icon,
     startIcon = icon,
     badge,
@@ -27,16 +27,11 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     subMenuItems = [],
     ...rest
   } = props;
-  if (onClickProp != null && subMenuItems.length > 0) {
-    logWarningInDev(
-      '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.',
-    );
-  }
-  const parentMenu = React.useContext(MenuContext);
-  const menuItemRef = React.useRef(null);
-  const submenuId = useId();
-  const popoverProps = React.useMemo(() => {
-    return {
+  let parentMenu = React.useContext(MenuContext);
+  let menuItemRef = React.useRef(null);
+  let submenuId = useId();
+  let popoverProps = React.useMemo(
+    () => ({
       placement: 'right-start',
       interactions: {
         click: true,
@@ -46,21 +41,20 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
           openOnArrowKeyDown: true,
         },
       },
-    };
-  }, [subMenuItems.length]);
-  const onClick = () => {
-    if (disabled) {
-      return;
-    }
+    }),
+    [subMenuItems.length],
+  );
+  let onClick = () => {
+    if (disabled) return;
     onClickProp?.(value);
   };
-  const handlers = {
+  let handlers = {
     onClick,
   };
-  const focusableItemIndex = parentMenu?.focusableElements.findIndex(
+  let focusableItemIndex = parentMenu?.focusableElements.findIndex(
     (el) => el === menuItemRef.current,
   );
-  const trigger = React.createElement(
+  let trigger = React.createElement(
     ListItem,
     {
       as: 'button',
@@ -74,8 +68,8 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
       role: role,
       tabIndex: isSelected ? 0 : -1,
       'aria-selected': isSelected,
-      'aria-haspopup': subMenuItems.length > 0 ? 'true' : undefined,
-      'aria-controls': subMenuItems.length > 0 ? submenuId : undefined,
+      'aria-haspopup': subMenuItems.length > 0 ? 'true' : void 0,
+      'aria-controls': subMenuItems.length > 0 ? submenuId : void 0,
       'aria-disabled': disabled,
       ...(parentMenu?.popoverGetItemProps != null
         ? parentMenu.popoverGetItemProps({

package/esm/core/Menu/MenuItemSkeleton.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     hasSublabel,
     hasIcon,
     contentWidth,
@@ -20,9 +20,7 @@ export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
       className: cx('iui-menu-item-skeleton', className),
       'data-iui-size': hasSublabel && 'large',
       style: {
-        ...{
-          '--iui-menu-item-content-skeleton-max-width': contentWidth,
-        },
+        '--iui-menu-item-content-skeleton-max-width': contentWidth,
         ...style,
       },
       ref: forwardedRef,

package/esm/core/Modal/Modal.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Dialog } from '../Dialog/Dialog.js';
 export const Modal = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     isOpen = false,
     isDismissible = true,
     closeOnEsc = true,