@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/NonIdealState/ErrorPage.js

@@ -1,47 +1,25 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorPage = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const Button_js_1 = require('../Buttons/Button.js');
-const NonIdealState_js_1 = require('./NonIdealState.js');
-const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
-const index_js_1 = require('../utils/index.js');
-const Svg401 = React.lazy(() =>
-  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'),
-);
-const Svg403 = React.lazy(() =>
-  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'),
-);
-const Svg404 = React.lazy(() =>
-  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'),
-);
-const Svg500 = React.lazy(() =>
-  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'),
-);
-const Svg502 = React.lazy(() =>
-  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'),
-);
-const Svg503 = React.lazy(() =>
-  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'),
-);
-const SvgError = React.lazy(() =>
-  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'),
-);
-const SvgRedirect = React.lazy(() =>
-  (0, index_js_1.dynamicImport)(
-    '@itwin/itwinui-illustrations-react/SvgRedirect',
-  ),
-);
-const SvgTimedOut = React.lazy(() =>
-  (0, index_js_1.dynamicImport)(
-    '@itwin/itwinui-illustrations-react/SvgTimedOut',
-  ),
-);
+const React = tslib_1.__importStar(require("react"));
+const Button_js_1 = require("../Buttons/Button.js");
+const NonIdealState_js_1 = require("./NonIdealState.js");
+const ProgressRadial_js_1 = require("../ProgressIndicators/ProgressRadial.js");
+const index_js_1 = require("../utils/index.js");
+const Svg401 = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'));
+const Svg403 = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'));
+const Svg404 = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'));
+const Svg500 = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'));
+const Svg502 = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'));
+const Svg503 = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'));
+const SvgError = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'));
+const SvgRedirect = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/SvgRedirect'));
+const SvgTimedOut = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/SvgTimedOut'));
 /**
  * @deprecated Use `NonIdealState` instead for a smaller client bundle.
  *
@@ -50,158 +28,124 @@ const SvgTimedOut = React.lazy(() =>
  * <ErrorPage errorType='401' />
  */
 exports.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_js_1.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_js_1.Button, { styleType: 'default', onClick: secondaryButtonHandle }, secondaryButtonLabel));
     }
-    return React.createElement(
-      Button_js_1.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_js_1.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_js_1.NonIdealState, {
-    svg: React.createElement(
-      React.Suspense,
-      {
-        fallback: React.createElement(ProgressRadial_js_1.ProgressRadial, null),
-      },
-      getErrorIcon(),
-    ),
-    heading: getHeadingMessage(),
-    description: errorMessage,
-    actions: getActions(),
-    ref: forwardedRef,
-    ...rest,
-  });
+    return (React.createElement(NonIdealState_js_1.NonIdealState, { svg: React.createElement(React.Suspense, { fallback: React.createElement(ProgressRadial_js_1.ProgressRadial, null) }, getErrorIcon()), heading: getHeadingMessage(), description: errorMessage, actions: getActions(), ref: forwardedRef, ...rest }));
 });
 exports.default = exports.ErrorPage;

package/cjs/core/NonIdealState/NonIdealState.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.NonIdealState = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
  * Works well with svgs from @itwin/itwinui-illustrations-react.
@@ -17,76 +17,11 @@ const classnames_1 = tslib_1.__importDefault(require('classnames'));
  * <NonIdealState svg={<Svg404 />} heading='Not found' />
  */
 exports.NonIdealState = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    svg,
-    heading,
-    description,
-    actions,
-    illustrationProps,
-    titleProps,
-    descriptionProps,
-    actionsProps,
-    ...rest
-  } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-non-ideal-state', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      index_js_1.Box,
-      {
-        as: 'div',
-        ...illustrationProps,
-        className: (0, classnames_1.default)(
-          'iui-non-ideal-state-illustration',
-          illustrationProps?.className,
-        ),
-      },
-      svg,
-    ),
-    heading &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...titleProps,
-          className: (0, classnames_1.default)(
-            'iui-non-ideal-state-title',
-            titleProps?.className,
-          ),
-        },
-        heading,
-      ),
-    description &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...descriptionProps,
-          className: (0, classnames_1.default)(
-            'iui-non-ideal-state-description',
-            descriptionProps?.className,
-          ),
-        },
-        description,
-      ),
-    actions &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...actionsProps,
-          className: (0, classnames_1.default)(
-            'iui-non-ideal-state-actions',
-            actionsProps?.className,
-          ),
-        },
-        actions,
-      ),
-  );
+    const { className, svg, heading, description, actions, illustrationProps, titleProps, descriptionProps, actionsProps, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-non-ideal-state', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { as: 'div', ...illustrationProps, className: (0, classnames_1.default)('iui-non-ideal-state-illustration', illustrationProps?.className) }, svg),
+        heading && (React.createElement(index_js_1.Box, { as: 'div', ...titleProps, className: (0, classnames_1.default)('iui-non-ideal-state-title', titleProps?.className) }, heading)),
+        description && (React.createElement(index_js_1.Box, { as: 'div', ...descriptionProps, className: (0, classnames_1.default)('iui-non-ideal-state-description', descriptionProps?.className) }, description)),
+        actions && (React.createElement(index_js_1.Box, { as: 'div', ...actionsProps, className: (0, classnames_1.default)('iui-non-ideal-state-actions', actionsProps?.className) }, actions))));
 });
 exports.default = exports.NonIdealState;

package/cjs/core/NotificationMarker/NotificationMarker.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationMarker = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 /**
  * A small notification circle to the top-right of the passed children prop.
  * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
@@ -22,28 +22,7 @@ const classnames_1 = tslib_1.__importDefault(require('classnames'));
  * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
  */
 exports.NotificationMarker = React.forwardRef((props, ref) => {
-  const {
-    className,
-    children,
-    status = 'primary',
-    pulsing = false,
-    enabled = true,
-    ...rest
-  } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'span',
-      ref: ref,
-      className: (0, classnames_1.default)(
-        { '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(index_js_1.Box, { as: 'span', ref: ref, className: (0, classnames_1.default)({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
 });
 exports.default = exports.NotificationMarker;

package/cjs/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>, {}>;
 };