@itwin/itwinui-react 1.41.0 → 1.43.1

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 utils_1 = require("../utils");
+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, utils_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 utils_1 = require("../utils");
+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, utils_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/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/cjs/core/Footer/Footer.js

@@ -34,7 +34,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
+exports.Footer = exports.defaultFooterElements = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -43,6 +43,9 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/footer.css");
+var FooterItem_1 = require("./FooterItem");
+var FooterSeparator_1 = require("./FooterSeparator");
+var FooterList_1 = require("./FooterList");
 var footerTranslations = {
     cookies: 'Cookies',
     legalNotices: 'Legal notices',
@@ -50,6 +53,37 @@ var footerTranslations = {
     termsOfService: 'Terms of service',
     termsOfUse: 'Terms of use',
 };
+exports.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.
@@ -63,54 +97,32 @@ var footerTranslations = {
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-var Footer = function (props) {
-    var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
+exports.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"]);
     (0, utils_1.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 = exports.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_1.default.createElement("footer", __assign({ className: (0, classnames_1.default)('iui-legal-footer', className) }, rest),
-        react_1.default.createElement("ul", null, elements.map(function (element, index) {
-            return (react_1.default.createElement("li", { key: element.key || "".concat(element.title, "-").concat(index) },
-                index > 0 && react_1.default.createElement("span", { className: 'iui-separator' }),
-                element.url ? (react_1.default.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
-        }))));
-};
-exports.Footer = Footer;
+    return (react_1.default.createElement("footer", __assign({ className: (0, classnames_1.default)('iui-legal-footer', className) }, rest), children ? (children) : (react_1.default.createElement(FooterList_1.FooterList, null, elements.map(function (element, index) {
+        return (react_1.default.createElement(react_1.default.Fragment, { key: element.key || "".concat(element.title, "-").concat(index) },
+            index > 0 && react_1.default.createElement(FooterSeparator_1.FooterSeparator, null),
+            react_1.default.createElement(FooterItem_1.FooterItem, null, element.url ? (react_1.default.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
+    })))));
+}, {
+    List: FooterList_1.FooterList,
+    Item: FooterItem_1.FooterItem,
+    Separator: FooterSeparator_1.FooterSeparator,
+});
 exports.default = exports.Footer;

package/cjs/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/cjs/core/Footer/FooterItem.js

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

package/cjs/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/cjs/core/Footer/FooterList.js

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

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