@itwin/itwinui-react 1.42.0 → 1.43.0

package/esm/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/esm/core/Dialog/DialogContext.js

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * 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';
+export var DialogContext = React.createContext(undefined);
+export var useDialogContext = function () {
+    return React.useContext(DialogContext) || {};
+};

package/esm/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/esm/core/Dialog/DialogMain.js

@@ -0,0 +1,114 @@
+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.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { FocusTrap, useMergedRefs, useTheme } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
+import { useDialogContext } from './DialogContext';
+import { CSSTransition } from '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>
+ */
+export var DialogMain = React.forwardRef(function (props, ref) {
+    var dialogContext = 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"]);
+    useTheme();
+    var dialogRef = React.useRef(null);
+    var refs = useMergedRefs(dialogRef, ref);
+    // Focuses dialog when opened and brings back focus to the previously focused element when closed.
+    var previousFocusedElement = React.useRef();
+    React.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.useRef('');
+    React.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.createElement("div", __assign({ className: cx('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.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
+        React.createElement(React.Fragment, null,
+            trapFocus && React.createElement(FocusTrap, null, content),
+            !trapFocus && content)));
+});
+export default DialogMain;

package/esm/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/esm/core/Dialog/DialogTitleBar.js

@@ -0,0 +1,63 @@
+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.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
+import { useTheme } from '@storybook/theming';
+import { IconButton } from '../Buttons';
+import '@itwin/itwinui-css/css/dialog.css';
+import { useDialogContext } from './DialogContext';
+import { DialogTitleBarTitle } from './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>
+ */
+export var DialogTitleBar = Object.assign(React.forwardRef(function (props, ref) {
+    var dialogContext = 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"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-dialog-title-bar', className), ref: ref }, rest), children ? (children) : (React.createElement(React.Fragment, null,
+        React.createElement(DialogTitleBarTitle, null, titleText),
+        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+            React.createElement(SvgClose, null)))))));
+}), {
+    Title: DialogTitleBarTitle,
+});
+export default DialogTitleBar;

package/esm/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/esm/core/Dialog/DialogTitleBarTitle.js

@@ -0,0 +1,41 @@
+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.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '@storybook/theming';
+import '@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>
+ */
+export var DialogTitleBarTitle = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-dialog-title', className), ref: ref }, rest), children));
+});
+export default DialogTitleBarTitle;

package/esm/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/esm/core/Dialog/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { Dialog } from './Dialog';
+export default './Dialog';

package/esm/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;

package/esm/core/Footer/Footer.js

@@ -37,6 +37,9 @@ import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/footer.css';
+import { FooterItem } from './FooterItem';
+import { FooterSeparator } from './FooterSeparator';
+import { FooterList } from './FooterList';
 var footerTranslations = {
     cookies: 'Cookies',
     legalNotices: 'Legal notices',
@@ -44,6 +47,37 @@ var footerTranslations = {
     termsOfService: 'Terms of service',
     termsOfUse: 'Terms of use',
 };
+export var defaultFooterElements = [
+    {
+        key: 'copyright',
+        title: "\u00A9 ".concat(new Date().getFullYear(), " Bentley Systems, Incorporated"),
+    },
+    {
+        key: 'termsOfService',
+        title: footerTranslations.termsOfService,
+        url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
+    },
+    {
+        key: 'privacy',
+        title: footerTranslations.privacy,
+        url: 'https://www.bentley.com/en/privacy-policy',
+    },
+    {
+        key: 'termsOfUse',
+        title: footerTranslations.termsOfUse,
+        url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
+    },
+    {
+        key: 'cookies',
+        title: footerTranslations.cookies,
+        url: 'https://www.bentley.com/en/cookie-policy',
+    },
+    {
+        key: 'legalNotices',
+        title: footerTranslations.legalNotices,
+        url: 'https://connect.bentley.com/Legal',
+    },
+];
 /**
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
@@ -57,53 +91,32 @@ var footerTranslations = {
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-export var Footer = function (props) {
-    var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
+export var Footer = Object.assign(function (props) {
+    var children = props.children, customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["children", "customElements", "translatedTitles", "className"]);
     useTheme();
     var titles = __assign(__assign({}, footerTranslations), translatedTitles);
-    var defaultElements = [
-        {
-            key: 'copyright',
-            title: "\u00A9 ".concat(new Date().getFullYear(), " Bentley Systems, Incorporated"),
-        },
-        {
-            key: 'termsOfService',
-            title: titles.termsOfService,
-            url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
-        },
-        {
-            key: 'privacy',
-            title: titles.privacy,
-            url: 'https://www.bentley.com/en/privacy-policy',
-        },
-        {
-            key: 'termsOfUse',
-            title: titles.termsOfUse,
-            url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
-        },
-        {
-            key: 'cookies',
-            title: titles.cookies,
-            url: 'https://www.bentley.com/en/cookie-policy',
-        },
-        {
-            key: 'legalNotices',
-            title: titles.legalNotices,
-            url: 'https://connect.bentley.com/Legal',
-        },
-    ];
-    var elements = defaultElements;
+    var translatedElements = defaultFooterElements.map(function (element) {
+        if (element.key && titles.hasOwnProperty(element.key)) {
+            var key = element.key;
+            return __assign(__assign({}, element), { title: titles[key] });
+        }
+        return element;
+    });
+    var elements = translatedElements;
     if (customElements) {
         elements =
             typeof customElements === 'function'
-                ? customElements(defaultElements)
-                : __spreadArray(__spreadArray([], defaultElements, true), customElements, true);
+                ? customElements(translatedElements)
+                : __spreadArray(__spreadArray([], translatedElements, true), customElements, true);
     }
-    return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest),
-        React.createElement("ul", null, elements.map(function (element, index) {
-            return (React.createElement("li", { key: element.key || "".concat(element.title, "-").concat(index) },
-                index > 0 && React.createElement("span", { className: 'iui-separator' }),
-                element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
-        }))));
-};
+    return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest), children ? (children) : (React.createElement(FooterList, null, elements.map(function (element, index) {
+        return (React.createElement(React.Fragment, { key: element.key || "".concat(element.title, "-").concat(index) },
+            index > 0 && React.createElement(FooterSeparator, null),
+            React.createElement(FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
+    })))));
+}, {
+    List: FooterList,
+    Item: FooterItem,
+    Separator: FooterSeparator,
+});
 export default Footer;

package/esm/core/Footer/FooterItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/footer.css';
+export declare type FooterItemProps = React.ComponentPropsWithRef<'li'>;
+/**
+ * Footer item. Recommended to use inside `Footer.List`.
+ */
+export declare const FooterItem: (props: FooterItemProps) => JSX.Element;
+export default FooterItem;

package/esm/core/Footer/FooterItem.js

@@ -0,0 +1,39 @@
+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.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useTheme } from '../utils';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/footer.css';
+/**
+ * Footer item. Recommended to use inside `Footer.List`.
+ */
+export var FooterItem = function (props) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("li", __assign({ className: cx('iui-legal-footer-item', className) }, rest), children));
+};
+export default FooterItem;

package/esm/core/Footer/FooterList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/footer.css';
+export declare type FooterListProps = React.ComponentPropsWithRef<'ul'>;
+/**
+ * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
+ */
+export declare const FooterList: (props: FooterListProps) => JSX.Element;
+export default FooterList;

package/esm/core/Footer/FooterList.js

@@ -0,0 +1,39 @@
+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.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useTheme } from '../utils';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/footer.css';
+/**
+ * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
+ */
+export var FooterList = function (props) {
+    var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
+    useTheme();
+    return (React.createElement("ul", __assign({ className: cx('iui-legal-footer-list', className) }, rest), children));
+};
+export default FooterList;

package/esm/core/Footer/FooterSeparator.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/footer.css';
+export declare type FooterSeparatorProps = Omit<React.ComponentPropsWithRef<'li'>, 'children'>;
+/**
+ * Footer separator. Recommended to use inside `Footer.List`.
+ */
+export declare const FooterSeparator: (props: FooterSeparatorProps) => JSX.Element;
+export default FooterSeparator;