@itwin/itwinui-react 3.0.3 → 3.0.5

package/esm/core/NonIdealState/ErrorPage.js

@@ -7,33 +7,15 @@ import { Button } from '../Buttons/Button.js';
 import { NonIdealState } from './NonIdealState.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { dynamicImport } from '../utils/index.js';
-const Svg401 = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/Svg401'),
-);
-const Svg403 = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/Svg403'),
-);
-const Svg404 = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/Svg404'),
-);
-const Svg500 = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/Svg500'),
-);
-const Svg502 = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/Svg502'),
-);
-const Svg503 = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/Svg503'),
-);
-const SvgError = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/SvgError'),
-);
-const SvgRedirect = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/SvgRedirect'),
-);
-const SvgTimedOut = React.lazy(() =>
-  dynamicImport('@itwin/itwinui-illustrations-react/SvgTimedOut'),
-);
+const Svg401 = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/Svg401'));
+const Svg403 = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/Svg403'));
+const Svg404 = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/Svg404'));
+const Svg500 = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/Svg500'));
+const Svg502 = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/Svg502'));
+const Svg503 = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/Svg503'));
+const SvgError = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/SvgError'));
+const SvgRedirect = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/SvgRedirect'));
+const SvgTimedOut = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/SvgTimedOut'));
 /**
  * @deprecated Use `NonIdealState` instead for a smaller client bundle.
  *
@@ -42,156 +24,124 @@ const SvgTimedOut = React.lazy(() =>
  * <ErrorPage errorType='401' />
  */
 export const ErrorPage = React.forwardRef((props, forwardedRef) => {
-  const {
-    errorType,
-    errorName,
-    errorMessage,
-    primaryButtonHandle,
-    primaryButtonLabel,
-    secondaryButtonHandle,
-    secondaryButtonLabel,
-    translatedErrorMessages,
-    ...rest
-  } = props;
-  const 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);
-      }
+    const { errorType, errorName, errorMessage, primaryButtonHandle, primaryButtonLabel, secondaryButtonHandle, secondaryButtonLabel, translatedErrorMessages, ...rest } = props;
+    const 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;
+    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;
+            }
+        }
     }
-    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 undefined;
+        }
+        return (React.createElement(Button, { styleType: 'high-visibility', onClick: primaryButtonHandle }, primaryButtonLabel));
     }
-  }
-  function getPrimaryButton() {
-    if (!primaryButtonHandle || !primaryButtonLabel) {
-      return undefined;
+    function getSecondaryButton() {
+        if (!secondaryButtonHandle || !secondaryButtonLabel) {
+            return undefined;
+        }
+        return (React.createElement(Button, { styleType: 'default', onClick: secondaryButtonHandle }, secondaryButtonLabel));
     }
-    return React.createElement(
-      Button,
-      { styleType: 'high-visibility', onClick: primaryButtonHandle },
-      primaryButtonLabel,
-    );
-  }
-  function getSecondaryButton() {
-    if (!secondaryButtonHandle || !secondaryButtonLabel) {
-      return undefined;
+    function getActions() {
+        const primaryButton = getPrimaryButton();
+        const secondaryButton = getSecondaryButton();
+        if (!primaryButton && !secondaryButton) {
+            return undefined;
+        }
+        return (React.createElement(React.Fragment, null,
+            primaryButton,
+            secondaryButton));
     }
-    return React.createElement(
-      Button,
-      { styleType: 'default', onClick: secondaryButtonHandle },
-      secondaryButtonLabel,
-    );
-  }
-  function getActions() {
-    const primaryButton = getPrimaryButton();
-    const secondaryButton = getSecondaryButton();
-    if (!primaryButton && !secondaryButton) {
-      return undefined;
-    }
-    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,
-  });
+    return (React.createElement(NonIdealState, { svg: React.createElement(React.Suspense, { fallback: React.createElement(ProgressRadial, null) }, getErrorIcon()), heading: getHeadingMessage(), description: errorMessage, actions: getActions(), ref: forwardedRef, ...rest }));
 });
 export default ErrorPage;

package/esm/core/NonIdealState/NonIdealState.js

@@ -13,70 +13,11 @@ import cx from 'classnames';
  * <NonIdealState svg={<Svg404 />} heading='Not found' />
  */
 export const NonIdealState = React.forwardRef((props, forwardedRef) => {
-  const {
-    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,
-      ),
-  );
+    const { 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))));
 });
 export default NonIdealState;

package/esm/core/NotificationMarker/NotificationMarker.js

@@ -18,25 +18,7 @@ import cx from 'classnames';
  * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
  */
 export const NotificationMarker = React.forwardRef((props, ref) => {
-  const {
-    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,
-  );
+    const { 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 default NotificationMarker;

package/esm/core/Overlay/Overlay.d.ts

@@ -2,55 +2,51 @@ import React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type OverlayComponentProps = {
     /**
-     * The sub-component elements of Overlay.
+     * Page elements that are blurred by the Overlay. Will become blurred and inert.
      */
     children?: React.ReactNode;
     /**
-     * Placeholder for Progress Indicator in Overlay
+     * Content shown inside the Overlay, on top of the blurred content.
+     *
+     * Can be used to show a loading indicator.
      */
     content?: React.ReactNode;
 };
 /**
+ * The Overlay component can be used to hide some UI while its content is loading or revalidating,
+ * and display a loading indicator on top of it.
  *
- * This is an Overlay Component.
- *
+ * The hidden content gets blurred and becomes inert so it cannot be interacted with.
  *
  * @example
- * <Overlay content="loading">
- * content beneath the overlay... (text, img, etc.)
+ * <Overlay content="loading…">
+ *   content beneath the overlay… (text, img, etc.)
  * </Overlay>
  *
- *
- * This is an Overlay Component using subcomponents.
- *
- *
  * @example
  * <Overlay.Wrapper>
- *  <Overlay.Overlay>
- *    loading...
- *  <Overlay.Overlay>
- *  <Overlay.HiddenContent>
- *    content beneath the overlay... (text, img, etc.)
- *  <Overlay.HiddenContent />
+ *   <Overlay.Overlay>
+ *     loading…
+ *   <Overlay.Overlay>
+ *   <Overlay.HiddenContent>
+ *     content beneath the overlay… (text, img, etc.)
+ *   <Overlay.HiddenContent />
  * </Overlay.Wrapper>
- *
- *
  */
 export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayComponentProps> & {
     /**
-     *
      * The main component is a wrapper to hold the
-     * Overlay HiddenContent and Overlay Message.
+     * `Overlay.HiddenContent` and `Overlay.Overlay`.
      */
     Wrapper: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
     /**
-     * HiddenContent houses page elements that are blurred by the
-     * Overlay.
+     * `Overlay.HiddenContent` houses page elements that are blurred by the
+     * Overlay. These elements will become inert when the overlay is active.
      */
     HiddenContent: PolymorphicForwardRefComponent<"div", {}>;
     /**
-     *  Message contains the progress indicator and loading message
-     *  for the Overlay. It sits on top of the HiddenContent.
+     * `Overlay.Overlay` sits on top of the HiddenContent, and can show
+     * any arbitrary content like a progress indicator and loading message.
      */
     Overlay: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 };

package/esm/core/Overlay/Overlay.js

@@ -6,83 +6,73 @@ import React from 'react';
 import { Box, polymorphic, dynamicImport } from '../utils/index.js';
 // --------------------------------------------------------------------------------
 const OverlayComponent = React.forwardRef((props, forwardedRef) => {
-  const { content, children, ...rest } = props;
-  return React.createElement(
-    OverlayWrapper,
-    { ref: forwardedRef, ...rest },
-    React.createElement(OverlayMessage, null, content),
-    React.createElement(OverlayHiddenContent, null, children),
-  );
+    const { content, children, ...rest } = props;
+    return (React.createElement(OverlayWrapper, { ref: forwardedRef, ...rest },
+        React.createElement(OverlayOverlay, null, content),
+        React.createElement(OverlayHiddenContent, null, children)));
 });
 OverlayComponent.displayName = 'Overlay';
 // --------------------------------------------------------------------------------
 const OverlayHiddenContent = React.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  useInertPolyfill();
-  return React.createElement(Box, { inert: '', ref: ref, ...rest }, children);
+    const { children, ...rest } = props;
+    useInertPolyfill();
+    return (React.createElement(Box, { inert: '', ref: ref, ...rest }, children));
 });
 OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
 // --------------------------------------------------------------------------------
-const OverlayMessage = polymorphic('iui-overlay');
-OverlayMessage.displayName = 'Overlay.Overlay';
+const OverlayOverlay = polymorphic('iui-overlay');
+OverlayOverlay.displayName = 'Overlay.Overlay';
 // --------------------------------------------------------------------------------
 const OverlayWrapper = polymorphic('iui-overlay-wrapper');
 OverlayWrapper.displayName = 'Overlay.Wrapper';
 // --------------------------------------------------------------------------------
 /**
+ * The Overlay component can be used to hide some UI while its content is loading or revalidating,
+ * and display a loading indicator on top of it.
  *
- * This is an Overlay Component.
- *
+ * The hidden content gets blurred and becomes inert so it cannot be interacted with.
  *
  * @example
- * <Overlay content="loading">
- * content beneath the overlay... (text, img, etc.)
+ * <Overlay content="loading…">
+ *   content beneath the overlay… (text, img, etc.)
  * </Overlay>
  *
- *
- * This is an Overlay Component using subcomponents.
- *
- *
  * @example
  * <Overlay.Wrapper>
- *  <Overlay.Overlay>
- *    loading...
- *  <Overlay.Overlay>
- *  <Overlay.HiddenContent>
- *    content beneath the overlay... (text, img, etc.)
- *  <Overlay.HiddenContent />
+ *   <Overlay.Overlay>
+ *     loading…
+ *   <Overlay.Overlay>
+ *   <Overlay.HiddenContent>
+ *     content beneath the overlay… (text, img, etc.)
+ *   <Overlay.HiddenContent />
  * </Overlay.Wrapper>
- *
- *
  */
 export const Overlay = Object.assign(OverlayComponent, {
-  /**
-   *
-   * The main component is a wrapper to hold the
-   * Overlay HiddenContent and Overlay Message.
-   */
-  Wrapper: OverlayWrapper,
-  /**
-   * HiddenContent houses page elements that are blurred by the
-   * Overlay.
-   */
-  HiddenContent: OverlayHiddenContent,
-  /**
-   *  Message contains the progress indicator and loading message
-   *  for the Overlay. It sits on top of the HiddenContent.
-   */
-  Overlay: OverlayMessage,
+    /**
+     * The main component is a wrapper to hold the
+     * `Overlay.HiddenContent` and `Overlay.Overlay`.
+     */
+    Wrapper: OverlayWrapper,
+    /**
+     * `Overlay.HiddenContent` houses page elements that are blurred by the
+     * Overlay. These elements will become inert when the overlay is active.
+     */
+    HiddenContent: OverlayHiddenContent,
+    /**
+     * `Overlay.Overlay` sits on top of the HiddenContent, and can show
+     * any arbitrary content like a progress indicator and loading message.
+     */
+    Overlay: OverlayOverlay,
 });
 const useInertPolyfill = () => {
-  const loaded = React.useRef(false);
-  const 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 dynamicImport(modulePath);
-        loaded.current = true;
-      }
-    };
-  }, []);
+    const loaded = React.useRef(false);
+    const 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 dynamicImport(modulePath);
+                loaded.current = true;
+            }
+        })();
+    }, []);
 };