@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/Modal/Modal.js

@@ -1,25 +1,48 @@
 import * as React from 'react';
 import { Dialog } from '../Dialog/Dialog.js';
-export const Modal = React.forwardRef((props, forwardedRef)=>{
-    let { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, wrapperProps, backdropProps, titleBarProps, ...rest } = props;
-    return React.createElement(Dialog, {
-        isOpen: isOpen,
-        closeOnEsc: closeOnEsc,
-        closeOnExternalClick: closeOnExternalClick,
-        isDismissible: isDismissible,
-        onClose: onClose,
-        preventDocumentScroll: true,
-        trapFocus: true,
-        setFocus: true,
-        ref: forwardedRef,
-        portal: portal,
-        ...wrapperProps
-    }, React.createElement(Dialog.Backdrop, backdropProps), React.createElement(Dialog.Main, {
-        "aria-modal": true,
-        ...rest
-    }, React.createElement(Dialog.TitleBar, {
+export const Modal = React.forwardRef((props, forwardedRef) => {
+  let {
+    isOpen = false,
+    isDismissible = true,
+    closeOnEsc = true,
+    closeOnExternalClick = true,
+    onClose,
+    title,
+    children,
+    portal = true,
+    wrapperProps,
+    backdropProps,
+    titleBarProps,
+    ...rest
+  } = props;
+  return React.createElement(
+    Dialog,
+    {
+      isOpen: isOpen,
+      closeOnEsc: closeOnEsc,
+      closeOnExternalClick: closeOnExternalClick,
+      isDismissible: isDismissible,
+      onClose: onClose,
+      preventDocumentScroll: true,
+      trapFocus: true,
+      setFocus: true,
+      ref: forwardedRef,
+      portal: portal,
+      ...wrapperProps,
+    },
+    React.createElement(Dialog.Backdrop, backdropProps),
+    React.createElement(
+      Dialog.Main,
+      {
+        'aria-modal': true,
+        ...rest,
+      },
+      React.createElement(Dialog.TitleBar, {
         titleText: title,
-        ...titleBarProps
-    }), children));
+        ...titleBarProps,
+      }),
+      children,
+    ),
+  );
 });
 Modal.displayName = 'Modal';

package/DEV-esm/core/NonIdealState/ErrorPage.js

@@ -2,121 +2,166 @@ import * as React from 'react';
 import { Button } from '../Buttons/Button.js';
 import { NonIdealState } from './NonIdealState.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-let Svg401 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg401'));
-let Svg403 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg403'));
-let Svg404 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg404'));
-let Svg500 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg500'));
-let Svg502 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg502'));
-let Svg503 = React.lazy(()=>import('@itwin/itwinui-illustrations-react/Svg503'));
-let SvgError = React.lazy(()=>import('@itwin/itwinui-illustrations-react/SvgError'));
-let SvgRedirect = React.lazy(()=>import('@itwin/itwinui-illustrations-react/SvgRedirect'));
-let SvgTimedOut = React.lazy(()=>import('@itwin/itwinui-illustrations-react/SvgTimedOut'));
-export const ErrorPage = React.forwardRef((props, forwardedRef)=>{
-    let { errorType, errorName, errorMessage, primaryButtonHandle, primaryButtonLabel, secondaryButtonHandle, secondaryButtonLabel, translatedErrorMessages, ...rest } = props;
-    let defaultErrorMessages = {
-        badGateway: 'Bad gateway',
-        error: 'Error',
-        forbidden: 'Forbidden',
-        internalServerError: 'Internal server error',
-        redirect: 'Redirect',
-        pageNotFound: 'Page not found',
-        serviceUnavailable: 'Service unavailable',
-        timedOut: 'Timed out',
-        unauthorized: 'Unauthorized',
-        ...translatedErrorMessages
-    };
-    function getErrorIcon() {
-        switch(errorType){
-            case '300':
-            case '301':
-            case '302':
-            case '303':
-            case '304':
-            case '305':
-            case '307':
-            case '308':
-                return React.createElement(SvgRedirect, null);
-            case '401':
-                return React.createElement(Svg401, null);
-            case '403':
-                return React.createElement(Svg403, null);
-            case '404':
-                return React.createElement(Svg404, null);
-            case '408':
-            case '504':
-                return React.createElement(SvgTimedOut, null);
-            case '500':
-                return React.createElement(Svg500, null);
-            case '502':
-                return React.createElement(Svg502, null);
-            case '503':
-                return React.createElement(Svg503, null);
-            case 'generic':
-            default:
-                return React.createElement(SvgError, null);
-        }
+let Svg401 = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/Svg401'),
+);
+let Svg403 = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/Svg403'),
+);
+let Svg404 = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/Svg404'),
+);
+let Svg500 = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/Svg500'),
+);
+let Svg502 = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/Svg502'),
+);
+let Svg503 = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/Svg503'),
+);
+let SvgError = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/SvgError'),
+);
+let SvgRedirect = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/SvgRedirect'),
+);
+let SvgTimedOut = React.lazy(
+  () => import('@itwin/itwinui-illustrations-react/SvgTimedOut'),
+);
+export const ErrorPage = React.forwardRef((props, forwardedRef) => {
+  let {
+    errorType,
+    errorName,
+    errorMessage,
+    primaryButtonHandle,
+    primaryButtonLabel,
+    secondaryButtonHandle,
+    secondaryButtonLabel,
+    translatedErrorMessages,
+    ...rest
+  } = props;
+  let defaultErrorMessages = {
+    badGateway: 'Bad gateway',
+    error: 'Error',
+    forbidden: 'Forbidden',
+    internalServerError: 'Internal server error',
+    redirect: 'Redirect',
+    pageNotFound: 'Page not found',
+    serviceUnavailable: 'Service unavailable',
+    timedOut: 'Timed out',
+    unauthorized: 'Unauthorized',
+    ...translatedErrorMessages,
+  };
+  function getErrorIcon() {
+    switch (errorType) {
+      case '300':
+      case '301':
+      case '302':
+      case '303':
+      case '304':
+      case '305':
+      case '307':
+      case '308':
+        return React.createElement(SvgRedirect, null);
+      case '401':
+        return React.createElement(Svg401, null);
+      case '403':
+        return React.createElement(Svg403, null);
+      case '404':
+        return React.createElement(Svg404, null);
+      case '408':
+      case '504':
+        return React.createElement(SvgTimedOut, null);
+      case '500':
+        return React.createElement(Svg500, null);
+      case '502':
+        return React.createElement(Svg502, null);
+      case '503':
+        return React.createElement(Svg503, null);
+      case 'generic':
+      default:
+        return React.createElement(SvgError, null);
     }
-    function getHeadingMessage() {
-        if (errorName) return errorName;
-        switch(errorType){
-            case '300':
-            case '301':
-            case '302':
-            case '303':
-            case '304':
-            case '305':
-            case '307':
-            case '308':
-                return defaultErrorMessages.redirect || '';
-            case '401':
-                return defaultErrorMessages.unauthorized;
-            case '403':
-                return defaultErrorMessages.forbidden;
-            case '404':
-                return defaultErrorMessages.pageNotFound;
-            case '408':
-            case '504':
-                return defaultErrorMessages.timedOut || '';
-            case '500':
-                return defaultErrorMessages.internalServerError;
-            case '502':
-                return defaultErrorMessages.badGateway;
-            case '503':
-                return defaultErrorMessages.serviceUnavailable;
-            case 'generic':
-            default:
-                return defaultErrorMessages.error;
-        }
+  }
+  function getHeadingMessage() {
+    if (errorName) return errorName;
+    switch (errorType) {
+      case '300':
+      case '301':
+      case '302':
+      case '303':
+      case '304':
+      case '305':
+      case '307':
+      case '308':
+        return defaultErrorMessages.redirect || '';
+      case '401':
+        return defaultErrorMessages.unauthorized;
+      case '403':
+        return defaultErrorMessages.forbidden;
+      case '404':
+        return defaultErrorMessages.pageNotFound;
+      case '408':
+      case '504':
+        return defaultErrorMessages.timedOut || '';
+      case '500':
+        return defaultErrorMessages.internalServerError;
+      case '502':
+        return defaultErrorMessages.badGateway;
+      case '503':
+        return defaultErrorMessages.serviceUnavailable;
+      case 'generic':
+      default:
+        return defaultErrorMessages.error;
     }
-    function getPrimaryButton() {
-        if (!primaryButtonHandle || !primaryButtonLabel) return null;
-        return React.createElement(Button, {
-            styleType: "high-visibility",
-            onClick: primaryButtonHandle
-        }, primaryButtonLabel);
-    }
-    function getSecondaryButton() {
-        if (!secondaryButtonHandle || !secondaryButtonLabel) return null;
-        return React.createElement(Button, {
-            styleType: "default",
-            onClick: secondaryButtonHandle
-        }, secondaryButtonLabel);
-    }
-    function getActions() {
-        let primaryButton = getPrimaryButton();
-        let secondaryButton = getSecondaryButton();
-        if (!primaryButton && !secondaryButton) return null;
-        return React.createElement(React.Fragment, null, primaryButton, secondaryButton);
-    }
-    return React.createElement(NonIdealState, {
-        svg: React.createElement(React.Suspense, {
-            fallback: React.createElement(ProgressRadial, null)
-        }, getErrorIcon()),
-        heading: getHeadingMessage(),
-        description: errorMessage,
-        actions: getActions(),
-        ref: forwardedRef,
-        ...rest
-    });
+  }
+  function getPrimaryButton() {
+    if (!primaryButtonHandle || !primaryButtonLabel) return null;
+    return React.createElement(
+      Button,
+      {
+        styleType: 'high-visibility',
+        onClick: primaryButtonHandle,
+      },
+      primaryButtonLabel,
+    );
+  }
+  function getSecondaryButton() {
+    if (!secondaryButtonHandle || !secondaryButtonLabel) return null;
+    return React.createElement(
+      Button,
+      {
+        styleType: 'default',
+        onClick: secondaryButtonHandle,
+      },
+      secondaryButtonLabel,
+    );
+  }
+  function getActions() {
+    let primaryButton = getPrimaryButton();
+    let secondaryButton = getSecondaryButton();
+    if (!primaryButton && !secondaryButton) return null;
+    return React.createElement(
+      React.Fragment,
+      null,
+      primaryButton,
+      secondaryButton,
+    );
+  }
+  return React.createElement(NonIdealState, {
+    svg: React.createElement(
+      React.Suspense,
+      {
+        fallback: React.createElement(ProgressRadial, null),
+      },
+      getErrorIcon(),
+    ),
+    heading: getHeadingMessage(),
+    description: errorMessage,
+    actions: getActions(),
+    ref: forwardedRef,
+    ...rest,
+  });
 });
 ErrorPage.displayName = 'ErrorPage';

package/DEV-esm/core/NonIdealState/NonIdealState.js

@@ -1,28 +1,71 @@
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import cx from 'classnames';
-export const NonIdealState = React.forwardRef((props, forwardedRef)=>{
-    let { className, svg, heading, description, actions, illustrationProps, titleProps, descriptionProps, actionsProps, ...rest } = props;
-    return React.createElement(Box, {
-        className: cx('iui-non-ideal-state', className),
-        ref: forwardedRef,
-        ...rest
-    }, React.createElement(Box, {
-        as: "div",
+export const NonIdealState = React.forwardRef((props, forwardedRef) => {
+  let {
+    className,
+    svg,
+    heading,
+    description,
+    actions,
+    illustrationProps,
+    titleProps,
+    descriptionProps,
+    actionsProps,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-non-ideal-state', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'div',
         ...illustrationProps,
-        className: cx('iui-non-ideal-state-illustration', illustrationProps?.className)
-    }, svg), heading && React.createElement(Box, {
-        as: "div",
-        ...titleProps,
-        className: cx('iui-non-ideal-state-title', titleProps?.className)
-    }, heading), description && React.createElement(Box, {
-        as: "div",
-        ...descriptionProps,
-        className: cx('iui-non-ideal-state-description', descriptionProps?.className)
-    }, description), actions && React.createElement(Box, {
-        as: "div",
-        ...actionsProps,
-        className: cx('iui-non-ideal-state-actions', actionsProps?.className)
-    }, actions));
+        className: cx(
+          'iui-non-ideal-state-illustration',
+          illustrationProps?.className,
+        ),
+      },
+      svg,
+    ),
+    heading &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...titleProps,
+          className: cx('iui-non-ideal-state-title', titleProps?.className),
+        },
+        heading,
+      ),
+    description &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...descriptionProps,
+          className: cx(
+            'iui-non-ideal-state-description',
+            descriptionProps?.className,
+          ),
+        },
+        description,
+      ),
+    actions &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...actionsProps,
+          className: cx('iui-non-ideal-state-actions', actionsProps?.className),
+        },
+        actions,
+      ),
+  );
 });
 NonIdealState.displayName = 'NonIdealState';

package/DEV-esm/core/NotificationMarker/NotificationMarker.js

@@ -1,17 +1,31 @@
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import cx from 'classnames';
-export const NotificationMarker = React.forwardRef((props, ref)=>{
-    let { className, children, status = 'primary', pulsing = false, enabled = true, ...rest } = props;
-    return React.createElement(Box, {
-        as: "span",
-        ref: ref,
-        className: cx({
-            'iui-notification-marker': enabled
-        }, className),
-        "data-iui-variant": enabled ? status : null,
-        "data-iui-urgent": enabled ? pulsing : null,
-        ...rest
-    }, children);
+export const NotificationMarker = React.forwardRef((props, ref) => {
+  let {
+    className,
+    children,
+    status = 'primary',
+    pulsing = false,
+    enabled = true,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'span',
+      ref: ref,
+      className: cx(
+        {
+          'iui-notification-marker': enabled,
+        },
+        className,
+      ),
+      'data-iui-variant': enabled ? status : null,
+      'data-iui-urgent': enabled ? pulsing : null,
+      ...rest,
+    },
+    children,
+  );
 });
 NotificationMarker.displayName = 'NotificationMarker';

package/DEV-esm/core/Overlay/Overlay.js

@@ -1,41 +1,55 @@
 import * as React from 'react';
 import { Box, isUnitTest, polymorphic } from '../../utils/index.js';
-let OverlayComponent = React.forwardRef((props, forwardedRef)=>{
-    let { content, children, ...rest } = props;
-    return React.createElement(OverlayWrapper, {
-        ref: forwardedRef,
-        ...rest
-    }, React.createElement(OverlayOverlay, null, content), React.createElement(OverlayHiddenContent, null, children));
+let OverlayComponent = React.forwardRef((props, forwardedRef) => {
+  let { content, children, ...rest } = props;
+  return React.createElement(
+    OverlayWrapper,
+    {
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(OverlayOverlay, null, content),
+    React.createElement(OverlayHiddenContent, null, children),
+  );
 });
 OverlayComponent.displayName = 'Overlay';
-let OverlayHiddenContent = React.forwardRef((props, ref)=>{
-    let { children, ...rest } = props;
-    useInertPolyfill();
-    return React.createElement(Box, {
-        inert: '',
-        ref: ref,
-        ...rest
-    }, children);
+let OverlayHiddenContent = React.forwardRef((props, ref) => {
+  let { children, ...rest } = props;
+  useInertPolyfill();
+  return React.createElement(
+    Box,
+    {
+      inert: '',
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
-let OverlayOverlay = polymorphic('iui-overlay');
+let OverlayOverlay = polymorphic.div('iui-overlay');
 OverlayOverlay.displayName = 'Overlay.Overlay';
-let OverlayWrapper = polymorphic('iui-overlay-wrapper');
+let OverlayWrapper = polymorphic.div('iui-overlay-wrapper');
 OverlayWrapper.displayName = 'Overlay.Wrapper';
 export const Overlay = Object.assign(OverlayComponent, {
-    Wrapper: OverlayWrapper,
-    HiddenContent: OverlayHiddenContent,
-    Overlay: OverlayOverlay
+  Wrapper: OverlayWrapper,
+  HiddenContent: OverlayHiddenContent,
+  Overlay: OverlayOverlay,
 });
-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 && !isUnitTest) {
-                await new Function('url', 'return import(url)')(modulePath);
-                loaded.current = true;
-            }
-        })();
-    }, []);
+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 &&
+        !isUnitTest
+      ) {
+        await new Function('url', 'return import(url)')(modulePath);
+        loaded.current = true;
+      }
+    })();
+  }, []);
 };