@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.5

package/esm/core/NonIdealState/ErrorPage.js

@@ -5,7 +5,35 @@
 import * as React from 'react';
 import { Button } from '../Buttons/Button/index.js';
 import { NonIdealState } from './NonIdealState.js';
-import { Svg401, Svg403, Svg404, Svg500, Svg502, Svg503, SvgError, SvgRedirect, SvgTimedOut, } from '@itwin/itwinui-illustrations-react';
+import { ProgressRadial } from '../ProgressIndicators/index.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'),
+);
 /**
  * @deprecated Use `NonIdealState` instead for a smaller client bundle.
  *
@@ -13,125 +41,157 @@ import { Svg401, Svg403, Svg404, Svg500, Svg502, Svg503, SvgError, SvgRedirect,
  * @example
  * <ErrorPage errorType='401' />
  */
-export const ErrorPage = (props) => {
-    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);
-            }
-        }
+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);
+      }
     }
-    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;
     }
-    function getPrimaryButton() {
-        if (!primaryButtonHandle || !primaryButtonLabel) {
-            return undefined;
-        }
-        return (React.createElement(Button, { styleType: 'high-visibility', onClick: primaryButtonHandle }, primaryButtonLabel));
+    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 getSecondaryButton() {
-        if (!secondaryButtonHandle || !secondaryButtonLabel) {
-            return undefined;
-        }
-        return (React.createElement(Button, { styleType: 'default', onClick: secondaryButtonHandle }, secondaryButtonLabel));
+  }
+  function getPrimaryButton() {
+    if (!primaryButtonHandle || !primaryButtonLabel) {
+      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: 'high-visibility', onClick: primaryButtonHandle },
+      primaryButtonLabel,
+    );
+  }
+  function getSecondaryButton() {
+    if (!secondaryButtonHandle || !secondaryButtonLabel) {
+      return undefined;
     }
-    return (React.createElement(NonIdealState, { svg: getErrorIcon(), heading: getHeadingMessage(), description: errorMessage, actions: getActions(), ...rest }));
-};
+    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,
+  });
+});
 export default ErrorPage;

package/esm/core/NonIdealState/NonIdealState.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type NonIdealStateProps = {
+type NonIdealStateProps = {
     /**
      * An svg component, preferably from @itwin/itwinui-illustrations-react.
      *
@@ -34,6 +34,22 @@ declare type NonIdealStateProps = {
      * />
      */
     actions?: React.ReactNode;
+    /**
+     *  Allows props to be passed for non-ideal-state-illustration
+     */
+    illustrationProps?: React.ComponentProps<'div'>;
+    /**
+     *  Allows props to be passed for non-ideal-state-title
+     */
+    titleProps?: React.ComponentProps<'div'>;
+    /**
+     *  Allows props to be passed for non-ideal-state-description
+     */
+    descriptionProps?: React.ComponentProps<'div'>;
+    /**
+     *  Allows props to be passed for non-ideal-state-action
+     */
+    actionsProps?: React.ComponentProps<'div'>;
 };
 /**
  * A stylized display to communicate common http errors and other non-ideal states.

package/esm/core/NonIdealState/NonIdealState.js

@@ -13,11 +13,70 @@ import cx from 'classnames';
  * <NonIdealState svg={<Svg404 />} heading='Not found' />
  */
 export const NonIdealState = React.forwardRef((props, forwardedRef) => {
-    const { className, svg, heading, description, actions, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-non-ideal-state', className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { className: 'iui-non-ideal-state-illustration' }, svg),
-        heading && React.createElement(Box, { className: 'iui-non-ideal-state-title' }, heading),
-        description && (React.createElement(Box, { className: 'iui-non-ideal-state-description' }, description)),
-        actions && React.createElement(Box, { className: 'iui-non-ideal-state-actions' }, 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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type NotificationMarkerProps = {
+type NotificationMarkerProps = {
     /**
      * Content of the NotificationMarker.
      */

package/esm/core/NotificationMarker/NotificationMarker.js

@@ -18,7 +18,25 @@ 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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type OverlayComponentProps = {
+    /**
+     * The sub-component elements of Overlay.
+     */
+    children?: React.ReactNode;
+    /**
+     * Placeholder for Progress Indicator in Overlay
+     */
+    content?: React.ReactNode;
+};
+/**
+ *
+ * This is an Overlay Component.
+ *
+ *
+ * @example
+ * <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.Wrapper>
+ *
+ *
+ */
+export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayComponentProps> & {
+    /**
+     *
+     * The main component is a wrapper to hold the
+     * Overlay HiddenContent and Overlay Message.
+     */
+    Wrapper: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * HiddenContent houses page elements that are blurred by the
+     * Overlay.
+     */
+    HiddenContent: PolymorphicForwardRefComponent<"div", {}>;
+    /**
+     *  Message contains the progress indicator and loading message
+     *  for the Overlay. It sits on top of the HiddenContent.
+     */
+    Overlay: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+};
+export {};

package/esm/core/Overlay/Overlay.js

@@ -0,0 +1,88 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+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),
+  );
+});
+OverlayComponent.displayName = 'Overlay';
+// --------------------------------------------------------------------------------
+const OverlayHiddenContent = React.forwardRef((props, ref) => {
+  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 OverlayWrapper = polymorphic('iui-overlay-wrapper');
+OverlayWrapper.displayName = 'Overlay.Wrapper';
+// --------------------------------------------------------------------------------
+/**
+ *
+ * This is an Overlay Component.
+ *
+ *
+ * @example
+ * <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.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,
+});
+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;
+      }
+    };
+  }, []);
+};

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

@@ -0,0 +1 @@
+export { Overlay } from './Overlay.js';

package/esm/core/{ProgressIndicators/ProgressLinear → Overlay}/index.js

@@ -2,5 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { ProgressLinear } from './ProgressLinear.js';
-export default './ProgressLinear';
+export { Overlay } from './Overlay.js';

package/esm/core/ProgressIndicators/{ProgressLinear/ProgressLinear.d.ts → ProgressLinear.d.ts}

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-declare type ProgressLinearProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
-     * Progress variant. If true, value will be ignored.
-     * @default false
+     * Progress variant. If true, `value` will be ignored.
+     *
+     * Defaults to true if `value` is passed, otherwise false.
      */
     indeterminate?: boolean;
     /**
@@ -21,7 +21,7 @@ declare type ProgressLinearProps = {
      */
     isAnimated?: boolean;
     /**
-     * Status of progress. Positive status always has 100% value.
+     * Status of progress.
      */
     status?: 'positive' | 'negative';
 };