@itwin/itwinui-react 1.40.1 → 1.43.0

package/cjs/core/Dialog/DialogContext.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export declare type DialogContextProps = {
+    /**
+     * Flag whether dialog should be shown.
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Handler that is called when dialog is closed.
+     */
+    onClose?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Flag whether dialog is dismissible. If false, you can't close it.
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * Flag whether dialog should be closed on backdrop press.
+     * @default false
+     */
+    closeOnExternalClick?: boolean;
+    /**
+     * Flag whether dialog should be closed on Escape key press.
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Traps the focus inside the dialog. This is useful when the dialog is modal.
+     * @default false
+     */
+    trapFocus?: boolean;
+    /**
+     * Prevents body from being scrollable. This is useful when the dialog is modal.
+     * @default false
+     */
+    preventDocumentScroll?: boolean;
+};
+export declare const DialogContext: React.Context<DialogContextProps | undefined>;
+export declare const useDialogContext: () => DialogContextProps;

package/cjs/core/Dialog/DialogContext.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialogContext = exports.DialogContext = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+exports.DialogContext = react_1.default.createContext(undefined);
+var useDialogContext = function () {
+    return react_1.default.useContext(exports.DialogContext) || {};
+};
+exports.useDialogContext = useDialogContext;

package/cjs/core/Dialog/DialogMain.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+import { DialogContextProps } from './DialogContext';
+export declare type DialogMainProps = {
+    /**
+     * Type of the dialog.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'fullPage';
+    /**
+     * Content of the dialog.
+     */
+    children: React.ReactNode;
+} & Omit<DialogContextProps, 'closeOnExternalClick'> & React.ComponentPropsWithRef<'div'>;
+/**
+ * Dialog component which can wrap any content.
+ * @example
+ * <Dialog.Main>
+ *   <Dialog.TitleBar>
+ *     My dialog title
+ *   </Dialog.TitleBar>
+ *   <Dialog.Content>
+ *     Here is my dialog content
+ *   </Dialog.Content>
+ *   <Dialog.ButtonBar>
+ *     <Button styleType='high-visibility'>
+ *       Primary button
+ *     </Button>
+ *     <Button>
+ *       Secondary button
+ *     </Button>
+ *   </Dialog.ButtonBar>
+ * </Dialog.Main>
+ */
+export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "styleType" | "isOpen" | "isDismissible" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll"> & React.RefAttributes<HTMLDivElement>>;
+export default DialogMain;

package/cjs/core/Dialog/DialogMain.js

@@ -0,0 +1,120 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogMain = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/dialog.css");
+var DialogContext_1 = require("./DialogContext");
+var react_transition_group_1 = require("react-transition-group");
+/**
+ * Dialog component which can wrap any content.
+ * @example
+ * <Dialog.Main>
+ *   <Dialog.TitleBar>
+ *     My dialog title
+ *   </Dialog.TitleBar>
+ *   <Dialog.Content>
+ *     Here is my dialog content
+ *   </Dialog.Content>
+ *   <Dialog.ButtonBar>
+ *     <Button styleType='high-visibility'>
+ *       Primary button
+ *     </Button>
+ *     <Button>
+ *       Secondary button
+ *     </Button>
+ *   </Dialog.ButtonBar>
+ * </Dialog.Main>
+ */
+exports.DialogMain = react_1.default.forwardRef(function (props, ref) {
+    var dialogContext = (0, DialogContext_1.useDialogContext)();
+    var className = props.className, children = props.children, _a = props.styleType, styleType = _a === void 0 ? 'default' : _a, _b = props.isOpen, isOpen = _b === void 0 ? dialogContext.isOpen : _b, _c = props.isDismissible, isDismissible = _c === void 0 ? dialogContext.isDismissible : _c, _d = props.onClose, onClose = _d === void 0 ? dialogContext.onClose : _d, _e = props.closeOnEsc, closeOnEsc = _e === void 0 ? dialogContext.closeOnEsc : _e, _f = props.trapFocus, trapFocus = _f === void 0 ? dialogContext.trapFocus : _f, _g = props.preventDocumentScroll, preventDocumentScroll = _g === void 0 ? dialogContext.preventDocumentScroll : _g, onKeyDown = props.onKeyDown, rest = __rest(props, ["className", "children", "styleType", "isOpen", "isDismissible", "onClose", "closeOnEsc", "trapFocus", "preventDocumentScroll", "onKeyDown"]);
+    (0, utils_1.useTheme)();
+    var dialogRef = react_1.default.useRef(null);
+    var refs = (0, utils_1.useMergedRefs)(dialogRef, ref);
+    // Focuses dialog when opened and brings back focus to the previously focused element when closed.
+    var previousFocusedElement = react_1.default.useRef();
+    react_1.default.useEffect(function () {
+        var _a, _b, _c;
+        if (isOpen) {
+            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
+            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else {
+            (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        var ref = dialogRef.current;
+        return function () {
+            var _a;
+            (ref === null || ref === void 0 ? void 0 : ref.contains(document.activeElement)) &&
+                ((_a = previousFocusedElement.current) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+    }, [isOpen]);
+    // Prevents document from scrolling when the dialog is open.
+    var originalBodyOverflow = react_1.default.useRef('');
+    react_1.default.useEffect(function () {
+        var _a;
+        var ownerDocument = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument;
+        if (!ownerDocument || !preventDocumentScroll) {
+            return;
+        }
+        if (isOpen) {
+            originalBodyOverflow.current = ownerDocument.body.style.overflow;
+            ownerDocument.body.style.overflow = 'hidden';
+        }
+        else {
+            ownerDocument.body.style.overflow = originalBodyOverflow.current;
+        }
+        return function () {
+            ownerDocument.body.style.overflow = originalBodyOverflow.current;
+        };
+    }, [isOpen, preventDocumentScroll]);
+    var handleKeyDown = function (event) {
+        // Prevents React from resetting its properties
+        event.persist();
+        if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
+            onClose(event);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    var content = (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog', {
+            'iui-dialog-default': styleType === 'default',
+            'iui-dialog-full-page': styleType === 'fullPage',
+            'iui-dialog-visible': isOpen,
+        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1 }, rest), children));
+    return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            trapFocus && react_1.default.createElement(utils_1.FocusTrap, null, content),
+            !trapFocus && content)));
+});
+exports.default = exports.DialogMain;

package/cjs/core/Dialog/DialogTitleBar.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+import { DialogContextProps } from './DialogContext';
+export declare type DialogTitleBarProps = {
+    /**
+     * Dialog title bar content. If passed, then `title` prop is ignored.
+     */
+    children?: React.ReactNode;
+    /**
+     * Dialog title.
+     */
+    titleText?: React.ReactNode;
+} & Pick<DialogContextProps, 'isDismissible' | 'onClose'> & React.ComponentPropsWithRef<'div'>;
+/**
+ * Dialog title bar. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.TitleBar title='My dialog title' />
+ * @example
+ * <Dialog.TitleBar>
+ *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
+ *   <IconButton
+ *     size='small'
+ *     styleType='borderless'
+ *     onClick={onClose}
+ *     aria-label='Close'
+ *   >
+ *     <SvgClose />
+ *   </IconButton>
+ * </Dialog.TitleBar>
+ */
+export declare const DialogTitleBar: React.ForwardRefExoticComponent<Pick<DialogTitleBarProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isDismissible" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
+    Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+};
+export default DialogTitleBar;

package/cjs/core/Dialog/DialogTitleBar.js

@@ -0,0 +1,69 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogTitleBar = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
+var theming_1 = require("@storybook/theming");
+var Buttons_1 = require("../Buttons");
+require("@itwin/itwinui-css/css/dialog.css");
+var DialogContext_1 = require("./DialogContext");
+var DialogTitleBarTitle_1 = require("./DialogTitleBarTitle");
+/**
+ * Dialog title bar. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.TitleBar title='My dialog title' />
+ * @example
+ * <Dialog.TitleBar>
+ *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
+ *   <IconButton
+ *     size='small'
+ *     styleType='borderless'
+ *     onClick={onClose}
+ *     aria-label='Close'
+ *   >
+ *     <SvgClose />
+ *   </IconButton>
+ * </Dialog.TitleBar>
+ */
+exports.DialogTitleBar = Object.assign(react_1.default.forwardRef(function (props, ref) {
+    var dialogContext = (0, DialogContext_1.useDialogContext)();
+    var children = props.children, titleText = props.titleText, _a = props.isDismissible, isDismissible = _a === void 0 ? dialogContext.isDismissible : _a, _b = props.onClose, onClose = _b === void 0 ? dialogContext.onClose : _b, className = props.className, rest = __rest(props, ["children", "titleText", "isDismissible", "onClose", "className"]);
+    (0, theming_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-title-bar', className), ref: ref }, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(DialogTitleBarTitle_1.DialogTitleBarTitle, null, titleText),
+        isDismissible && (react_1.default.createElement(Buttons_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+            react_1.default.createElement(Close_1.default, null)))))));
+}), {
+    Title: DialogTitleBarTitle_1.DialogTitleBarTitle,
+});
+exports.default = exports.DialogTitleBar;

package/cjs/core/Dialog/DialogTitleBarTitle.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+export declare type DialogTitleBarTitleProps = {
+    /**
+     * Dialog title content.
+     */
+    children: React.ReactNode;
+} & React.ComponentPropsWithRef<'div'>;
+/**
+ * Dialog title bar. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
+ */
+export declare const DialogTitleBarTitle: React.ForwardRefExoticComponent<Pick<DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export default DialogTitleBarTitle;

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -0,0 +1,47 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogTitleBarTitle = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var theming_1 = require("@storybook/theming");
+require("@itwin/itwinui-css/css/dialog.css");
+/**
+ * Dialog title bar. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
+ */
+exports.DialogTitleBarTitle = react_1.default.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    (0, theming_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-title', className), ref: ref }, rest), children));
+});
+exports.default = exports.DialogTitleBarTitle;

package/cjs/core/Dialog/index.d.ts

@@ -0,0 +1,8 @@
+export { Dialog } from './Dialog';
+export type { DialogProps } from './Dialog';
+export type { DialogMainProps } from './DialogMain';
+export type { DialogTitleBarProps } from './DialogTitleBar';
+export type { DialogContentProps } from './DialogContent';
+export type { DialogButtonBarProps } from './DialogButtonBar';
+declare const _default: "./Dialog";
+export default _default;

package/cjs/core/Dialog/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var Dialog_1 = require("./Dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return Dialog_1.Dialog; } });
+exports.default = './Dialog';

package/cjs/core/ErrorPage/ErrorPage.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/non-ideal-state.css';
-export declare type ErrorPageType = '401' | '403' | '404' | '500' | '502' | '503' | 'generic';
+export declare type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
 export declare type ErrorTypeTranslations = {
     badGateway: string;
     error: string;
     forbidden: string;
     internalServerError: string;
+    redirect?: string;
     pageNotFound: string;
     serviceUnavailable: string;
+    timedOut?: string;
     unauthorized: string;
 };
 export declare type ErrorPageProps = {

package/cjs/core/ErrorPage/ErrorPage.js

@@ -37,6 +37,8 @@ var _500_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/ill
 var _502_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/502"));
 var _503_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/503"));
 var Error_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/Error"));
+var Redirect_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/Redirect"));
+var TimedOut_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/TimedOut"));
 var react_1 = __importDefault(require("react"));
 var Button_1 = require("../Buttons/Button");
 var utils_1 = require("../utils");
@@ -50,9 +52,19 @@ require("@itwin/itwinui-css/css/non-ideal-state.css");
 var ErrorPage = function (props) {
     var errorType = props.errorType, errorName = props.errorName, errorMessage = props.errorMessage, primaryButtonHandle = props.primaryButtonHandle, primaryButtonLabel = props.primaryButtonLabel, secondaryButtonHandle = props.secondaryButtonHandle, secondaryButtonLabel = props.secondaryButtonLabel, translatedErrorMessages = props.translatedErrorMessages, className = props.className, rest = __rest(props, ["errorType", "errorName", "errorMessage", "primaryButtonHandle", "primaryButtonLabel", "secondaryButtonHandle", "secondaryButtonLabel", "translatedErrorMessages", "className"]);
     (0, utils_1.useTheme)();
-    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', unauthorized: 'Unauthorized' }, translatedErrorMessages);
+    var defaultErrorMessages = __assign({ 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_1.default.createElement(Redirect_1.default, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '401': {
                 return react_1.default.createElement(_401_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -62,6 +74,10 @@ var ErrorPage = function (props) {
             case '404': {
                 return react_1.default.createElement(_404_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
+            case '408':
+            case '504': {
+                return react_1.default.createElement(TimedOut_1.default, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '500': {
                 return react_1.default.createElement(_500_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -82,6 +98,16 @@ var ErrorPage = function (props) {
             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;
             }
@@ -91,6 +117,10 @@ var ErrorPage = function (props) {
             case '404': {
                 return defaultErrorMessages.pageNotFound;
             }
+            case '408':
+            case '504': {
+                return defaultErrorMessages.timedOut || '';
+            }
             case '500': {
                 return defaultErrorMessages.internalServerError;
             }

package/cjs/core/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { StylingProps } from '../utils';
 import '@itwin/itwinui-css/css/footer.css';
 export declare type TitleTranslations = {
@@ -19,6 +19,11 @@ export declare type FooterProps = {
      * Provide localized strings.
      */
     translatedTitles?: TitleTranslations;
+    /**
+     * Custom footer content. If provided, it will render only what you passed.
+     * Use `defaultFooterElements` to get the default footer elements.
+     */
+    children?: React.ReactNode;
 } & StylingProps;
 export declare type FooterElement = {
     /**
@@ -34,6 +39,7 @@ export declare type FooterElement = {
      */
     key?: keyof TitleTranslations | 'copyright' | (string & Record<never, never>);
 };
+export declare const defaultFooterElements: FooterElement[];
 /**
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
@@ -47,5 +53,13 @@ export declare type FooterElement = {
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-export declare const Footer: (props: FooterProps) => JSX.Element;
+export declare const Footer: ((props: FooterProps) => JSX.Element) & {
+    List: (props: Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
+        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    }) => JSX.Element;
+    Item: (props: Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & {
+        ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+    }) => JSX.Element;
+    Separator: (props: import("./FooterSeparator").FooterSeparatorProps) => JSX.Element;
+};
 export default Footer;