@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/NonIdealState/ErrorPage.js

@@ -2,35 +2,35 @@ import * as React from 'react';
 import { Button } from '../Buttons/Button.js';
 import { NonIdealState } from './NonIdealState.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-const Svg401 = React.lazy(
+let Svg401 = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/Svg401'),
 );
-const Svg403 = React.lazy(
+let Svg403 = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/Svg403'),
 );
-const Svg404 = React.lazy(
+let Svg404 = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/Svg404'),
 );
-const Svg500 = React.lazy(
+let Svg500 = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/Svg500'),
 );
-const Svg502 = React.lazy(
+let Svg502 = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/Svg502'),
 );
-const Svg503 = React.lazy(
+let Svg503 = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/Svg503'),
 );
-const SvgError = React.lazy(
+let SvgError = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/SvgError'),
 );
-const SvgRedirect = React.lazy(
+let SvgRedirect = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/SvgRedirect'),
 );
-const SvgTimedOut = React.lazy(
+let SvgTimedOut = React.lazy(
   () => import('@itwin/itwinui-illustrations-react/SvgTimedOut'),
 );
 export const ErrorPage = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     errorType,
     errorName,
     errorMessage,
@@ -41,7 +41,7 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => {
     translatedErrorMessages,
     ...rest
   } = props;
-  const defaultErrorMessages = {
+  let defaultErrorMessages = {
     badGateway: 'Bad gateway',
     error: 'Error',
     forbidden: 'Forbidden',
@@ -62,41 +62,30 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => {
       case '304':
       case '305':
       case '307':
-      case '308': {
+      case '308':
         return React.createElement(SvgRedirect, null);
-      }
-      case '401': {
+      case '401':
         return React.createElement(Svg401, null);
-      }
-      case '403': {
+      case '403':
         return React.createElement(Svg403, null);
-      }
-      case '404': {
+      case '404':
         return React.createElement(Svg404, null);
-      }
       case '408':
-      case '504': {
+      case '504':
         return React.createElement(SvgTimedOut, null);
-      }
-      case '500': {
+      case '500':
         return React.createElement(Svg500, null);
-      }
-      case '502': {
+      case '502':
         return React.createElement(Svg502, null);
-      }
-      case '503': {
+      case '503':
         return React.createElement(Svg503, null);
-      }
       case 'generic':
-      default: {
+      default:
         return React.createElement(SvgError, null);
-      }
     }
   }
   function getHeadingMessage() {
-    if (errorName) {
-      return errorName;
-    }
+    if (errorName) return errorName;
     switch (errorType) {
       case '300':
       case '301':
@@ -105,41 +94,30 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => {
       case '304':
       case '305':
       case '307':
-      case '308': {
+      case '308':
         return defaultErrorMessages.redirect || '';
-      }
-      case '401': {
+      case '401':
         return defaultErrorMessages.unauthorized;
-      }
-      case '403': {
+      case '403':
         return defaultErrorMessages.forbidden;
-      }
-      case '404': {
+      case '404':
         return defaultErrorMessages.pageNotFound;
-      }
       case '408':
-      case '504': {
+      case '504':
         return defaultErrorMessages.timedOut || '';
-      }
-      case '500': {
+      case '500':
         return defaultErrorMessages.internalServerError;
-      }
-      case '502': {
+      case '502':
         return defaultErrorMessages.badGateway;
-      }
-      case '503': {
+      case '503':
         return defaultErrorMessages.serviceUnavailable;
-      }
       case 'generic':
-      default: {
+      default:
         return defaultErrorMessages.error;
-      }
     }
   }
   function getPrimaryButton() {
-    if (!primaryButtonHandle || !primaryButtonLabel) {
-      return null;
-    }
+    if (!primaryButtonHandle || !primaryButtonLabel) return null;
     return React.createElement(
       Button,
       {
@@ -150,9 +128,7 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => {
     );
   }
   function getSecondaryButton() {
-    if (!secondaryButtonHandle || !secondaryButtonLabel) {
-      return null;
-    }
+    if (!secondaryButtonHandle || !secondaryButtonLabel) return null;
     return React.createElement(
       Button,
       {
@@ -163,11 +139,9 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => {
     );
   }
   function getActions() {
-    const primaryButton = getPrimaryButton();
-    const secondaryButton = getSecondaryButton();
-    if (!primaryButton && !secondaryButton) {
-      return null;
-    }
+    let primaryButton = getPrimaryButton();
+    let secondaryButton = getSecondaryButton();
+    if (!primaryButton && !secondaryButton) return null;
     return React.createElement(
       React.Fragment,
       null,

package/esm/core/NonIdealState/NonIdealState.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import cx from 'classnames';
 export const NonIdealState = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     className,
     svg,
     heading,

package/esm/core/NotificationMarker/NotificationMarker.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import cx from 'classnames';
 export const NotificationMarker = React.forwardRef((props, ref) => {
-  const {
+  let {
     className,
     children,
     status = 'primary',

package/esm/core/Overlay/Overlay.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Box, polymorphic } from '../../utils/index.js';
-const OverlayComponent = React.forwardRef((props, forwardedRef) => {
-  const { content, children, ...rest } = props;
+import { Box, isUnitTest, polymorphic } from '../../utils/index.js';
+let OverlayComponent = React.forwardRef((props, forwardedRef) => {
+  let { content, children, ...rest } = props;
   return React.createElement(
     OverlayWrapper,
     {
@@ -12,9 +12,8 @@ const OverlayComponent = React.forwardRef((props, forwardedRef) => {
     React.createElement(OverlayHiddenContent, null, children),
   );
 });
-OverlayComponent.displayName = 'Overlay';
-const OverlayHiddenContent = React.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
+let OverlayHiddenContent = React.forwardRef((props, ref) => {
+  let { children, ...rest } = props;
   useInertPolyfill();
   return React.createElement(
     Box,
@@ -26,24 +25,25 @@ const OverlayHiddenContent = React.forwardRef((props, ref) => {
     children,
   );
 });
-OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
-const OverlayOverlay = polymorphic('iui-overlay');
-OverlayOverlay.displayName = 'Overlay.Overlay';
-const OverlayWrapper = polymorphic('iui-overlay-wrapper');
-OverlayWrapper.displayName = 'Overlay.Wrapper';
+let OverlayOverlay = polymorphic('iui-overlay');
+let OverlayWrapper = polymorphic('iui-overlay-wrapper');
 export const Overlay = Object.assign(OverlayComponent, {
   Wrapper: OverlayWrapper,
   HiddenContent: OverlayHiddenContent,
   Overlay: OverlayOverlay,
 });
-const useInertPolyfill = () => {
-  const loaded = React.useRef(false);
-  const modulePath =
+let useInertPolyfill = () => {
+  let loaded = React.useRef(false);
+  let modulePath =
     'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
   React.useEffect(() => {
     (async () => {
-      if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
-        await import(modulePath);
+      if (
+        !HTMLElement.prototype.hasOwnProperty('inert') &&
+        !loaded.current &&
+        !isUnitTest
+      ) {
+        await new Function('url', 'return import(url)')(modulePath);
         loaded.current = true;
       }
     })();

package/esm/core/Popover/Popover.js

@@ -33,9 +33,9 @@ import {
 } from '../../utils/index.js';
 import { usePortalTo } from '../../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
-export const PopoverOpenContext = React.createContext(undefined);
+export const PopoverOpenContext = React.createContext(void 0);
 export const usePopover = (options) => {
-  const {
+  let {
     placement = 'bottom-start',
     visible,
     onVisibleChange,
@@ -46,20 +46,18 @@ export const usePopover = (options) => {
     role,
     ...rest
   } = options;
-  const mergedInteractions = React.useMemo(
+  let mergedInteractions = React.useMemo(
     () => ({
-      ...{
-        click: true,
-        dismiss: true,
-        hover: false,
-        focus: false,
-      },
+      click: true,
+      dismiss: true,
+      hover: false,
+      focus: false,
       ...interactionsProp,
     }),
     [interactionsProp],
   );
-  const tree = useFloatingTree();
-  const middleware = React.useMemo(
+  let tree = useFloatingTree();
+  let middleware = React.useMemo(
     () => ({
       flip: true,
       shift: true,
@@ -67,25 +65,25 @@ export const usePopover = (options) => {
     }),
     [options.middleware],
   );
-  const [open, onOpenChange] = useControlledState(
+  let [open, onOpenChange] = useControlledState(
     false,
     visible,
     onVisibleChange,
   );
-  const floating = useFloating({
+  let floating = useFloating({
     placement,
     open,
     onOpenChange,
     whileElementsMounted: React.useMemo(
       () =>
-        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined,
+        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
       [autoUpdateOptions, open],
     ),
     ...rest,
     middleware: React.useMemo(
       () =>
         [
-          middleware.offset !== undefined && offset(middleware.offset),
+          void 0 !== middleware.offset && offset(middleware.offset),
           middleware.flip && flip(),
           middleware.shift && shift(),
           matchWidth &&
@@ -101,7 +99,7 @@ export const usePopover = (options) => {
       [matchWidth, middleware],
     ),
   });
-  const interactions = useInteractions([
+  let interactions = useInteractions([
     useClick(floating.context, {
       enabled: !!mergedInteractions.click,
       ...mergedInteractions.click,
@@ -109,7 +107,7 @@ export const usePopover = (options) => {
     useDismiss(floating.context, {
       enabled: !!mergedInteractions.dismiss,
       outsidePress: closeOnOutsideClick,
-      bubbles: tree != null,
+      bubbles: null != tree,
       ...mergedInteractions.dismiss,
     }),
     useHover(floating.context, {
@@ -131,8 +129,8 @@ export const usePopover = (options) => {
       enabled: !!role,
     }),
   ]);
-  const [referenceWidth, setReferenceWidth] = React.useState();
-  const getFloatingProps = React.useCallback(
+  let [referenceWidth, setReferenceWidth] = React.useState();
+  let getFloatingProps = React.useCallback(
     (userProps) =>
       interactions.getFloatingProps({
         ...userProps,
@@ -142,7 +140,7 @@ export const usePopover = (options) => {
           ...(matchWidth && referenceWidth
             ? {
                 minInlineSize: `${referenceWidth}px`,
-                maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
+                maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`,
               }
             : {}),
           ...userProps?.style,
@@ -150,14 +148,12 @@ export const usePopover = (options) => {
       }),
     [floating.floatingStyles, interactions, matchWidth, referenceWidth],
   );
-  const getReferenceProps = React.useCallback(
+  let getReferenceProps = React.useCallback(
     (userProps) =>
       interactions.getReferenceProps({
         ...userProps,
         onClick: mergeEventHandlers(userProps?.onClick, () => {
-          if (!!mergedInteractions.click && visible) {
-            onOpenChange(false);
-          }
+          if (!!mergedInteractions.click && visible) onOpenChange(false);
         }),
       }),
     [interactions, mergedInteractions.click, visible, onOpenChange],
@@ -174,7 +170,7 @@ export const usePopover = (options) => {
   );
 };
 export const Popover = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     portal = true,
     visible,
     placement = 'bottom-start',
@@ -188,7 +184,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     applyBackground = false,
     ...rest
   } = props;
-  const popover = usePopover({
+  let popover = usePopover({
     visible,
     placement,
     onVisibleChange,
@@ -196,18 +192,16 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  const [popoverElement, setPopoverElement] = React.useState();
-  const popoverRef = useMergedRefs(
+  let [popoverElement, setPopoverElement] = React.useState();
+  let popoverRef = useMergedRefs(
     popover.refs.setFloating,
     forwardedRef,
     setPopoverElement,
   );
-  const triggerId = `${useId()}-trigger`;
-  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+  let triggerId = `${useId()}-trigger`;
+  let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   useLayoutEffect(() => {
-    if (!positionReference) {
-      return;
-    }
+    if (!positionReference) return;
     popover.refs.setPositionReference(positionReference);
     return () => void popover.refs.setPositionReference(null);
   }, [popover.refs, positionReference]);
@@ -253,9 +247,9 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
                     },
                     className,
                   ),
-                  'aria-labelledby': !hasAriaLabel
-                    ? popover.refs.domReference.current?.id
-                    : undefined,
+                  'aria-labelledby': hasAriaLabel
+                    ? void 0
+                    : popover.refs.domReference.current?.id,
                   ...popover.getFloatingProps(rest),
                   ref: popoverRef,
                 },
@@ -267,8 +261,8 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
-const PopoverPortal = ({ children, portal = true }) => {
-  const portalTo = usePortalTo(portal);
+let PopoverPortal = ({ children, portal = true }) => {
+  let portalTo = usePortalTo(portal);
   return React.createElement(
     FloatingPortal,
     {
@@ -279,8 +273,8 @@ const PopoverPortal = ({ children, portal = true }) => {
     children,
   );
 };
-const DisplayContents = React.memo(() => {
-  return React.createElement(
+let DisplayContents = React.memo(() =>
+  React.createElement(
     ShadowRoot,
     {
       css: `
@@ -290,5 +284,5 @@ const DisplayContents = React.memo(() => {
       `,
     },
     React.createElement('slot', null),
-  );
-});
+  ),
+);

package/esm/core/ProgressIndicators/ProgressLinear.js

@@ -3,9 +3,9 @@ import cx from 'classnames';
 import { Box, ShadowRoot, getBoundedValue } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     value,
-    indeterminate = value === undefined,
+    indeterminate = void 0 === value,
     labels = [],
     isAnimated = false,
     status,
@@ -13,15 +13,15 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
     labelGroupProps,
     ...rest
   } = props;
-  const boundedValue = getBoundedValue(value ?? 100, 0, 100);
+  let boundedValue = getBoundedValue(value ?? 100, 0, 100);
   return React.createElement(
     Box,
     {
       className: cx('iui-progress-indicator-linear', className),
       ref: forwardedRef,
       'data-iui-status': status,
-      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
-      'data-iui-animated': isAnimated ? 'true' : undefined,
+      'data-iui-indeterminate': indeterminate ? 'true' : void 0,
+      'data-iui-animated': isAnimated ? 'true' : void 0,
       style: {
         '--iui-progress-percentage': `${boundedValue}%`,
       },
@@ -30,7 +30,7 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
     React.createElement(
       ShadowRoot,
       null,
-      value !== 100 && React.createElement(VisuallyHidden, null, 'Loading.'),
+      100 !== value && React.createElement(VisuallyHidden, null, 'Loading.'),
       React.createElement('slot', null),
     ),
     labels.length > 0 &&

package/esm/core/ProgressIndicators/ProgressRadial.js

@@ -9,9 +9,9 @@ import {
 } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     value,
-    indeterminate = value === undefined,
+    indeterminate = void 0 === value,
     status,
     size,
     className,
@@ -19,7 +19,7 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const statusMap = {
+  let statusMap = {
     negative: React.createElement(SvgImportantSmall, {
       'aria-hidden': true,
     }),
@@ -36,10 +36,10 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
       className: cx('iui-progress-indicator-radial', className),
       'data-iui-size': size,
       'data-iui-status': status,
-      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      'data-iui-indeterminate': indeterminate ? 'true' : void 0,
       ref: forwardedRef,
       style: {
-        ...(value !== undefined && {
+        ...(void 0 !== value && {
           '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
         }),
         ...style,
@@ -49,11 +49,9 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
     React.createElement(
       ShadowRoot,
       null,
-      value !== 100 && React.createElement(VisuallyHidden, null, 'Loading.'),
+      100 !== value && React.createElement(VisuallyHidden, null, 'Loading.'),
       React.createElement('slot', null),
     ),
-    size !== 'x-small'
-      ? children ?? (!!status ? statusMap[status] : null)
-      : null,
+    'x-small' !== size ? children ?? (status ? statusMap[status] : null) : null,
   );
 });

package/esm/core/Radio/Radio.js

@@ -2,7 +2,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../../utils/index.js';
 export const Radio = React.forwardRef((props, ref) => {
-  const {
+  let {
     className,
     disabled = false,
     label,
@@ -12,9 +12,9 @@ export const Radio = React.forwardRef((props, ref) => {
     style,
     ...rest
   } = props;
-  const inputElementRef = React.useRef(null);
-  const refs = useMergedRefs(inputElementRef, ref);
-  const radio = React.createElement(Box, {
+  let inputElementRef = React.useRef(null);
+  let refs = useMergedRefs(inputElementRef, ref);
+  let radio = React.createElement(Box, {
     as: 'input',
     className: cx('iui-radio', className),
     style: style,
@@ -23,9 +23,8 @@ export const Radio = React.forwardRef((props, ref) => {
     ref: refs,
     ...rest,
   });
-  return !label
-    ? radio
-    : React.createElement(
+  return label
+    ? React.createElement(
         Box,
         {
           as: 'label',
@@ -50,5 +49,6 @@ export const Radio = React.forwardRef((props, ref) => {
             },
             label,
           ),
-      );
+      )
+    : radio;
 });

package/esm/core/RadioTiles/RadioTile.js

@@ -2,7 +2,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../../utils/index.js';
 export const RadioTile = React.forwardRef((props, ref) => {
-  const {
+  let {
     icon,
     label,
     description,
@@ -14,13 +14,13 @@ export const RadioTile = React.forwardRef((props, ref) => {
     style,
     ...rest
   } = props;
-  const inputElementRef = React.useRef(null);
-  const refs = useMergedRefs(inputElementRef, ref);
+  let inputElementRef = React.useRef(null);
+  let refs = useMergedRefs(inputElementRef, ref);
   return React.createElement(
     Box,
     {
       as: 'label',
-      'data-iui-disabled': props.disabled ? 'true' : undefined,
+      'data-iui-disabled': props.disabled ? 'true' : void 0,
       ...wrapperProps,
       className: cx('iui-radio-tile', wrapperProps?.className),
     },

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { InputGroup } from '../InputGroup/InputGroup.js';
 import { Box } from '../../utils/index.js';
 export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
-  const { children, label, ...rest } = props;
+  let { children, label, ...rest } = props;
   return React.createElement(
     InputGroup,
     {