@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/esm/core/NonIdealState/ErrorPage.js

@@ -0,0 +1,137 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Button } from '../Buttons/Button';
+import { NonIdealState } from './NonIdealState';
+import { Svg401, Svg403, Svg404, Svg500, Svg502, Svg503, SvgError, SvgRedirect, SvgTimedOut, } from '@itwin/itwinui-illustrations-react';
+/**
+ * @deprecated Use `NonIdealState` instead for a smaller client bundle.
+ *
+ * A stylized display to communicate common http errors.
+ * @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);
+            }
+        }
+    }
+    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 undefined;
+        }
+        return (React.createElement(Button, { styleType: 'high-visibility', onClick: primaryButtonHandle }, primaryButtonLabel));
+    }
+    function getSecondaryButton() {
+        if (!secondaryButtonHandle || !secondaryButtonLabel) {
+            return undefined;
+        }
+        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: getErrorIcon(), heading: getHeadingMessage(), description: errorMessage, actions: getActions(), ...rest }));
+};
+export default ErrorPage;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/non-ideal-state.css';
+export declare type NonIdealStateProps = {
+    /**
+     * An svg component, preferably from @itwin/itwinui-illustrations-react.
+     *
+     * @example
+     * import { Svg404 } from '@itwin/itwinui-illustrations-react';
+     * <NonIdealState svg={<Svg404 />} heading='Not found' />
+     */
+    svg: React.ReactNode;
+    /**
+     * Primary heading for the error page
+     */
+    heading?: React.ReactNode;
+    /**
+     * Secondary text to explain the error
+     * Can include html in order to provide a hyperlink
+     * E.g. `Please visit <a href="https://www.bentley.com/help">our support page</a> for help.`
+     */
+    description?: React.ReactNode;
+    /**
+     * Actions to provide the user with a way to recover from the error.
+     * Typically should be a primary and secondary button.
+     *
+     * @example
+     * <ErrorPage
+     *  actions={
+     *   <>
+     *    <Button styleType={'high-visibility'}>Retry</Button>
+     *    <Button>Contact us</Button>
+     *   </>
+     *  }
+     * />
+     */
+    actions?: React.ReactNode;
+} & React.ComponentPropsWithoutRef<'div'>;
+/**
+ * A stylized display to communicate common http errors and other non-ideal states.
+ * Works well with svgs from @itwin/itwinui-illustrations-react.
+ *
+ * @example
+ * <NonIdealState svg={<Svg404 />} heading='Not found' />
+ */
+export declare const NonIdealState: (props: NonIdealStateProps) => JSX.Element;
+export default NonIdealState;

package/esm/core/NonIdealState/NonIdealState.js

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { useTheme } from '../utils';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/non-ideal-state.css';
+/**
+ * A stylized display to communicate common http errors and other non-ideal states.
+ * Works well with svgs from @itwin/itwinui-illustrations-react.
+ *
+ * @example
+ * <NonIdealState svg={<Svg404 />} heading='Not found' />
+ */
+export const NonIdealState = (props) => {
+    const { className, svg, heading, description, actions, ...rest } = props;
+    useTheme();
+    return (React.createElement("div", { className: cx('iui-non-ideal-state', className), ...rest },
+        React.createElement("div", { className: 'iui-non-ideal-state-illustration' }, svg),
+        heading && React.createElement("div", { className: 'iui-non-ideal-state-title' }, heading),
+        description && (React.createElement("div", { className: 'iui-non-ideal-state-description' }, description)),
+        actions && React.createElement("div", { className: 'iui-non-ideal-state-actions' }, actions)));
+};
+export default NonIdealState;

package/{cjs/core/ErrorPage → esm/core/NonIdealState}/index.d.ts

@@ -1,4 +1,6 @@
 export { ErrorPage } from './ErrorPage';
 export type { ErrorPageProps, ErrorPageType, ErrorTypeTranslations, } from './ErrorPage';
-declare const _default: "./ErrorPage";
+export { NonIdealState } from './NonIdealState';
+export type { NonIdealStateProps } from './NonIdealState';
+declare const _default: "./NonIdealState";
 export default _default;

package/esm/core/{ErrorPage → NonIdealState}/index.js

@@ -3,4 +3,5 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 export { ErrorPage } from './ErrorPage';
-export default './ErrorPage';
+export { NonIdealState } from './NonIdealState';
+export default './NonIdealState';

package/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -43,19 +21,18 @@ import '@itwin/itwinui-css/css/progress-indicator.css';
  * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
  * <ProgressLinear status='negative' />
  */
-export var ProgressLinear = function (props) {
-    var _a;
-    var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, _d = props.labels, labels = _d === void 0 ? [] : _d, _e = props.isAnimated, isAnimated = _e === void 0 ? false : _e, status = props.status, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "labels", "isAnimated", "status", "className", "style"]);
+export const ProgressLinear = (props) => {
+    const { value = 0, indeterminate = false, labels = [], isAnimated = false, status, className, style, ...rest } = props;
     useTheme();
-    var boundedValue = Math.min(100, Math.max(0, value));
-    return (React.createElement("div", __assign({ className: cx('iui-progress-indicator-linear', (_a = {},
-            _a["iui-".concat(status)] = !!status,
-            _a), className), style: style }, rest),
+    const boundedValue = Math.min(100, Math.max(0, value));
+    return (React.createElement("div", { className: cx('iui-progress-indicator-linear', {
+            [`iui-${status}`]: !!status,
+        }, className), style: style, ...rest },
         React.createElement("div", { className: 'iui-track' },
             React.createElement("div", { className: cx('iui-fill', {
                     'iui-determinate': !indeterminate && isAnimated,
                     'iui-indeterminate': indeterminate,
-                }), style: { width: indeterminate ? '100%' : "".concat(boundedValue, "%") } })),
-        labels.length > 0 && (React.createElement("div", { className: 'iui-label' }, labels.map(function (label, index) { return (React.createElement("span", { key: index }, label)); })))));
+                }), style: { width: indeterminate ? '100%' : `${boundedValue}%` } })),
+        labels.length > 0 && (React.createElement("div", { className: 'iui-label' }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
 };
 export default ProgressLinear;

package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -43,27 +21,25 @@ import '@itwin/itwinui-css/css/progress-indicator.css';
  * Small
  * <ProgressRadial size={'small'} indeterminate/>
  */
-export var ProgressRadial = function (props) {
-    var _a;
-    var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, status = props.status, children = props.children, _d = props.size, size = _d === void 0 ? '' : _d, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "status", "children", "size", "className", "style"]);
+export const ProgressRadial = (props) => {
+    const { value = 0, indeterminate = false, status, children, size = '', className, style, ...rest } = props;
     useTheme();
-    var statusMap = {
+    const statusMap = {
         negative: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
         positive: React.createElement(SvgCheckmarkSmall, { "aria-hidden": true }),
     };
-    var fillStyle = {
+    const fillStyle = {
         strokeDashoffset: status === 'positive'
             ? 0
             : 88 -
                 Math.min(88, Math.max(0, indeterminate ? 88 : (88 * value) / 100)),
     };
-    return (React.createElement("div", __assign({ className: cx('iui-progress-indicator-radial', (_a = {
-                'iui-determinate': !indeterminate,
-                'iui-indeterminate': indeterminate
-            },
-            _a["iui-".concat(size)] = !!size,
-            _a["iui-".concat(status)] = !!status,
-            _a), className), style: style }, rest),
+    return (React.createElement("div", { className: cx('iui-progress-indicator-radial', {
+            'iui-determinate': !indeterminate,
+            'iui-indeterminate': indeterminate,
+            [`iui-${size}`]: !!size,
+            [`iui-${status}`]: !!status,
+        }, className), style: style, ...rest },
         React.createElement("svg", { className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
             React.createElement("circle", { className: 'iui-track', cx: '16', cy: '16', r: '14' }),
             React.createElement("circle", { className: 'iui-fill', cx: '16', cy: '16', r: '14', style: fillStyle })),

package/esm/core/Radio/Radio.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -38,19 +16,18 @@ import '@itwin/itwinui-css/css/radio.css';
  * <Radio status='warning' label='Warning' />
  * <Radio status='negative' label='Negative' />
  */
-export var Radio = React.forwardRef(function (props, ref) {
-    var _a, _b;
-    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, label = props.label, status = props.status, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "status", "style", "setFocus"]);
+export const Radio = React.forwardRef((props, ref) => {
+    const { className, disabled = false, label, status, style, setFocus = false, ...rest } = props;
     useTheme();
-    var inputElementRef = React.useRef(null);
-    var refs = useMergedRefs(inputElementRef, ref);
-    React.useEffect(function () {
+    const inputElementRef = React.useRef(null);
+    const refs = useMergedRefs(inputElementRef, ref);
+    React.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    var radio = (React.createElement("input", __assign({ className: cx('iui-radio', className && (_a = {}, _a[className] = !label, _a)), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs }, rest)));
-    return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-".concat(status)] = !!status, _b), className), style: style },
+    const radio = (React.createElement("input", { className: cx('iui-radio', className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs, ...rest }));
+    return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, className), style: style },
         radio,
         label && React.createElement("span", { className: 'iui-radio-label' }, label)));
 });

package/esm/core/RadioTiles/RadioTile.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -33,18 +11,18 @@ import '@itwin/itwinui-css/css/radio-tile.css';
  * @example
  * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
  */
-export var RadioTile = React.forwardRef(function (props, ref) {
-    var icon = props.icon, label = props.label, description = props.description, _a = props.setFocus, setFocus = _a === void 0 ? false : _a, className = props.className, style = props.style, rest = __rest(props, ["icon", "label", "description", "setFocus", "className", "style"]);
+export const RadioTile = React.forwardRef((props, ref) => {
+    const { icon, label, description, setFocus = false, className, style, ...rest } = props;
     useTheme();
-    var inputElementRef = React.useRef(null);
-    var refs = useMergedRefs(inputElementRef, ref);
-    React.useEffect(function () {
+    const inputElementRef = React.useRef(null);
+    const refs = useMergedRefs(inputElementRef, ref);
+    React.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
     return (React.createElement("label", { className: cx('iui-radio-tile', className), style: style },
-        React.createElement("input", __assign({ className: 'iui-radio-tile-input', type: 'radio', ref: refs }, rest)),
+        React.createElement("input", { className: 'iui-radio-tile-input', type: 'radio', ref: refs, ...rest }),
         React.createElement("div", { className: 'iui-radio-tile-content' },
             icon &&
                 React.cloneElement(icon, {

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -36,10 +14,10 @@ import { useTheme } from '../utils';
  *   <RadioTile label='Second tile' icon={<SvgSmileySad />} />
  * </RadioTileGroup>
  */
-export var RadioTileGroup = function (props) {
-    var children = props.children, label = props.label, rest = __rest(props, ["children", "label"]);
+export const RadioTileGroup = (props) => {
+    const { children, label, ...rest } = props;
     useTheme();
-    return (React.createElement(InputGroup, __assign({ label: label }, rest),
+    return (React.createElement(InputGroup, { label: label, ...rest },
         React.createElement("div", { className: 'iui-radio-tile-container' }, children)));
 };
 export default RadioTileGroup;