@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Flex/Flex.js

@@ -1,127 +1,79 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/components/Box.js';
-const sizeTokens = [
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-    '2xl',
-    '3xl',
-];
+const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
 const getValueForToken = (token) => {
-    if (sizeTokens.includes(token)) {
-        return `var(--iui-size-${token})`;
-    }
-    return token;
+  if (sizeTokens.includes(token)) {
+    return `var(--iui-size-${token})`;
+  }
+  return token;
 };
-// ----------------------------------------------------------------------------
-// Main Flex component
 const FlexComponent = React.forwardRef((props, ref) => {
-    const { display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-flex', className), style: {
-            '--iui-flex-display': display,
-            '--iui-flex-direction': flexDirection,
-            '--iui-flex-justify': justifyContent,
-            '--iui-flex-align': alignItems,
-            '--iui-flex-gap': getValueForToken(gap),
-            '--iui-flex-wrap': flexWrap,
-            ...style,
-        }, ref: ref, ...rest }));
+  const {
+    display,
+    flexDirection,
+    justifyContent,
+    alignItems,
+    gap,
+    flexWrap,
+    className,
+    style,
+    ...rest
+  } = props;
+  return React.createElement(Box, {
+    className: cx('iui-flex', className),
+    style: {
+      '--iui-flex-display': display,
+      '--iui-flex-direction': flexDirection,
+      '--iui-flex-justify': justifyContent,
+      '--iui-flex-align': alignItems,
+      '--iui-flex-gap': getValueForToken(gap),
+      '--iui-flex-wrap': flexWrap,
+      ...style,
+    },
+    ref: ref,
+    ...rest,
+  });
 });
 FlexComponent.displayName = 'Flex';
-// ----------------------------------------------------------------------------
-// Flex.Spacer component
 const FlexSpacer = React.forwardRef((props, ref) => {
-    const { flex, className, style, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
+  const { flex, className, style, ...rest } = props;
+  return React.createElement(Box, {
+    className: cx('iui-flex-spacer', className),
+    style: {
+      '--iui-flex-spacer-flex': flex,
+      ...style,
+    },
+    ref: ref,
+    ...rest,
+  });
 });
 FlexSpacer.displayName = 'Flex.Spacer';
-// ----------------------------------------------------------------------------
-// Flex.Item subcomponent
 const FlexItem = React.forwardRef((props, ref) => {
-    const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
-    const _style = {
-        '--iui-flex-item-flex': flex,
-        '--iui-flex-item-align': alignSelf,
-        '--iui-flex-item-gap-before': getValueForToken(gapBefore),
-        '--iui-flex-item-gap-after': getValueForToken(gapAfter),
-        ...(gapBefore !== undefined && {
-            '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
-        }),
-        ...(gapAfter !== undefined && {
-            '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
-        }),
-        ...style,
-    };
-    return (React.createElement(Box, { className: cx('iui-flex-item', className), ref: ref, style: _style, ...rest }));
+  const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
+    props;
+  const _style = {
+    '--iui-flex-item-flex': flex,
+    '--iui-flex-item-align': alignSelf,
+    '--iui-flex-item-gap-before': getValueForToken(gapBefore),
+    '--iui-flex-item-gap-after': getValueForToken(gapAfter),
+    ...(gapBefore !== undefined && {
+      '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
+    }),
+    ...(gapAfter !== undefined && {
+      '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
+    }),
+    ...style,
+  };
+  return React.createElement(Box, {
+    className: cx('iui-flex-item', className),
+    ref: ref,
+    style: _style,
+    ...rest,
+  });
 });
 FlexItem.displayName = 'Flex.Item';
-// ----------------------------------------------------------------------------
-// Exported compound component
-/**
- * A utility component that makes it easier to work with CSS flexbox
- * and iTwinUI design tokens. Supports all flex properties.
- * Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
- *
- * @example
- * <Flex>
- *   <Icon>...</Icon>
- *   <Text>...</Text>
- *   <Flex.Spacer />
- *   <IconButton>...</IconButton>
- * </Flex>
- *
- * @example
- * <Flex gap='m' flexWrap='wrap'>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- *   ...
- * </Flex>
- *
- * @example
- * <Flex gap='l'>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item gapBefore='s'>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- * </Flex>
- */
 export const Flex = Object.assign(FlexComponent, {
-    /**
-     * Subcomponent that allows customizing flex items through the
-     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
-     *
-     * The `gapBefore`/`gapAfter` props can used to override the gap at an
-     * individual level, for when you need a different gap than the one
-     * set in the parent `Flex`.
-     *
-     * @example
-     * <Flex gap='l'>
-     *   <Flex.Item>...</Flex.Item>
-     *   <Flex.Item>...</Flex.Item>
-     *   <Flex.Item gapBefore='s'>...</Flex.Item>
-     *   <Flex.Item>...</Flex.Item>
-     * </Flex>
-     */
-    Item: FlexItem,
-    /**
-     * Subcomponent that fills up the available space using a really large `flex` value.
-     * Useful when you want to push certain items to one edge.
-     *
-     * @example
-     * <Flex>
-     *   <div>this stays on the left</div>
-     *   <Flex.Spacer /> // this fills up the available empty space
-     *   <div>this gets pushed all the way to the end</div>
-     * </Flex>
-     */
-    Spacer: FlexSpacer,
+  Item: FlexItem,
+  Spacer: FlexSpacer,
 });

package/esm/core/Footer/Footer.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
@@ -10,83 +6,110 @@ import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';
 import { Anchor } from '../Typography/Anchor.js';
 const footerTranslations = {
-    cookies: 'Cookies',
-    legalNotices: 'Legal notices',
-    privacy: 'Privacy',
-    termsOfService: 'Terms of service',
-    termsOfUse: 'Terms of use',
+  cookies: 'Cookies',
+  legalNotices: 'Legal notices',
+  privacy: 'Privacy',
+  termsOfService: 'Terms of service',
+  termsOfUse: 'Terms of use',
 };
 export const defaultFooterElements = [
-    {
-        key: 'copyright',
-        title: `© ${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',
-    },
+  {
+    key: 'copyright',
+    title: `© ${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.
- * You can use position 'absolute' with relative body or set the height of the content and place footer at the end.
- * @example <caption>Appending custom element after default elements</caption>
- * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} />
- * @example <caption>Returning only custom elements</caption>
- * <Footer customElements={() => newFooterElements)} />
- * @example <caption>Filtering out a specific element</caption>
- * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} />
- * @example <caption>Changing a url</caption>
- * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
- */
-export const Footer = Object.assign((props) => {
-    const { children, customElements, translatedTitles, className, ...rest } = props;
-    const titles = { ...footerTranslations, ...translatedTitles };
+export const Footer = Object.assign(
+  (props) => {
+    const { children, customElements, translatedTitles, className, ...rest } =
+      props;
+    const titles = {
+      ...footerTranslations,
+      ...translatedTitles,
+    };
     const translatedElements = defaultFooterElements.map((element) => {
-        if (element.key && titles.hasOwnProperty(element.key)) {
-            const key = element.key;
-            return {
-                ...element,
-                title: titles[key],
-            };
-        }
-        return element;
+      if (element.key && titles.hasOwnProperty(element.key)) {
+        const key = element.key;
+        return {
+          ...element,
+          title: titles[key],
+        };
+      }
+      return element;
     });
     let elements = translatedElements;
     if (customElements) {
-        elements =
-            typeof customElements === 'function'
-                ? customElements(translatedElements)
-                : [...translatedElements, ...customElements];
+      elements =
+        typeof customElements === 'function'
+          ? customElements(translatedElements)
+          : [...translatedElements, ...customElements];
     }
-    return (React.createElement(Box, { as: 'footer', className: cx('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList, null, elements.map((element, index) => {
-        return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
-            index > 0 && React.createElement(FooterSeparator, null),
-            React.createElement(FooterItem, null, element.url ? (React.createElement(Anchor, { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
-    })))));
-}, {
+    return React.createElement(
+      Box,
+      {
+        as: 'footer',
+        className: cx('iui-legal-footer', className),
+        ...rest,
+      },
+      children
+        ? children
+        : React.createElement(
+            FooterList,
+            null,
+            elements.map((element, index) => {
+              return React.createElement(
+                React.Fragment,
+                {
+                  key: element.key || `${element.title}-${index}`,
+                },
+                index > 0 && React.createElement(FooterSeparator, null),
+                React.createElement(
+                  FooterItem,
+                  null,
+                  element.url
+                    ? React.createElement(
+                        Anchor,
+                        {
+                          href: element.url,
+                          target: '_blank',
+                          rel: 'noreferrer',
+                        },
+                        element.title,
+                      )
+                    : element.title,
+                ),
+              );
+            }),
+          ),
+    );
+  },
+  {
     List: FooterList,
     Item: FooterItem,
     Separator: FooterSeparator,
-});
+  },
+);

package/esm/core/Footer/FooterItem.js

@@ -1,9 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * Footer item. Recommended to use inside `Footer.List`.
- */
 export const FooterItem = polymorphic.li('iui-legal-footer-item');

package/esm/core/Footer/FooterList.js

@@ -1,9 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
- */
 export const FooterList = polymorphic.ul('iui-legal-footer-list');

package/esm/core/Footer/FooterSeparator.js

@@ -1,11 +1,4 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * Footer separator. Recommended to use inside `Footer.List`.
- */
 export const FooterSeparator = polymorphic.li('iui-legal-footer-separator', {
-    'aria-hidden': true,
+  'aria-hidden': true,
 });

package/esm/core/Header/Header.js

@@ -1,54 +1,79 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
 import { IconButton } from '../Buttons/IconButton.js';
 import { SvgMoreVertical, Box } from '../../utils/index.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 const defaultTranslations = {
-    moreOptions: 'More options',
+  moreOptions: 'More options',
 };
-/**
- * Application header
- * @example
- * <Header
- *  appLogo={<HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>}
- *  breadcrumbs={
- *   <HeaderBreadcrumbs items={[
- *    <HeaderButton key='project' name='Project A' />,
- *    <HeaderButton key='imodel' name='IModel X' />
- *   ]} />
- *  }
- *  actions={[
- *   <IconButton><SvgNotification /></IconButton>,
- *   <DropdownMenu>
- *    <IconButton>
- *     <SvgHelpCircularHollow />
- *    </IconButton>
- *   </DropdownMenu>,
- *   <DropdownMenu menuItems={…}>
- *    <IconButton styleType='borderless'>
- *     <Avatar … />
- *    </IconButton>
- *   </DropdownMenu>
- *  ]}
- *  isSlim
- * />
- */
 export const Header = React.forwardRef((props, forwardedRef) => {
-    const { appLogo, breadcrumbs, isSlim = false, actions, menuItems, translatedStrings, className, children, ...rest } = props;
-    const headerTranslations = { ...defaultTranslations, ...translatedStrings };
-    return (React.createElement(Box, { as: 'header', className: cx('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ref: forwardedRef, ...rest },
-        React.createElement(Box, { className: 'iui-page-header-left' },
-            appLogo,
-            breadcrumbs && React.createElement(Box, { className: 'iui-page-header-divider' }),
-            breadcrumbs),
-        children && React.createElement(Box, { className: 'iui-page-header-center' }, children),
-        React.createElement(Box, { className: 'iui-page-header-right' },
-            actions,
-            menuItems && (React.createElement(DropdownMenu, { menuItems: menuItems },
-                React.createElement(IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
-                    React.createElement(SvgMoreVertical, { "aria-hidden": true })))))));
+  const {
+    appLogo,
+    breadcrumbs,
+    isSlim = false,
+    actions,
+    menuItems,
+    translatedStrings,
+    className,
+    children,
+    ...rest
+  } = props;
+  const headerTranslations = {
+    ...defaultTranslations,
+    ...translatedStrings,
+  };
+  return React.createElement(
+    Box,
+    {
+      as: 'header',
+      className: cx('iui-page-header', className),
+      'data-iui-size': isSlim ? 'slim' : undefined,
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: 'iui-page-header-left',
+      },
+      appLogo,
+      breadcrumbs &&
+        React.createElement(Box, {
+          className: 'iui-page-header-divider',
+        }),
+      breadcrumbs,
+    ),
+    children &&
+      React.createElement(
+        Box,
+        {
+          className: 'iui-page-header-center',
+        },
+        children,
+      ),
+    React.createElement(
+      Box,
+      {
+        className: 'iui-page-header-right',
+      },
+      actions,
+      menuItems &&
+        React.createElement(
+          DropdownMenu,
+          {
+            menuItems: menuItems,
+          },
+          React.createElement(
+            IconButton,
+            {
+              styleType: 'borderless',
+              'aria-label': headerTranslations.moreOptions,
+            },
+            React.createElement(SvgMoreVertical, {
+              'aria-hidden': true,
+            }),
+          ),
+        ),
+    ),
+  );
 });

package/esm/core/Header/HeaderBasicButton.js

@@ -1,16 +1,20 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
 import { ButtonBase } from '../../utils/index.js';
 export const HeaderBasicButton = React.forwardRef((props, ref) => {
-    const { className, children, startIcon, endIcon, styleType, size, ...rest } = props;
-    styleType; // To omit and prevent eslint error.
-    size; // To omit and prevent eslint error.
-    return (React.createElement(ButtonBase, { className: cx('iui-header-breadcrumb-button', className), ref: ref, ...rest },
-        startIcon,
-        children,
-        endIcon));
+  const { className, children, startIcon, endIcon, styleType, size, ...rest } =
+    props;
+  styleType;
+  size;
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-header-breadcrumb-button', className),
+      ref: ref,
+      ...rest,
+    },
+    startIcon,
+    children,
+    endIcon,
+  );
 });

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -1,27 +1,44 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight, Box } from '../../utils/index.js';
-/**
- * Header breadcrumbs, adds chevron between each provided items.
- * @example
- * <HeaderBreadcrumbs
- *   items={[
- *     <HeaderButton key={...} ... />
- *     <HeaderButton key={...} ... />
- *   ]}
- * />
- */
 export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
-    const { className, items, ...rest } = props;
-    return (React.createElement(Box, { as: 'nav', "aria-label": 'breadcrumbs', className: cx('iui-breadcrumbs', 'iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { as: 'ol', className: cx('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list') }, items.reduce((previous, current, index) => [
-            ...previous,
-            current,
-            index !== items.length - 1 && (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },
-                React.createElement(SvgChevronRight, { key: `chevron${index}`, "aria-hidden": true, className: 'iui-chevron' }))),
-        ], []))));
+  const { className, items, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'nav',
+      'aria-label': 'breadcrumbs',
+      className: cx('iui-breadcrumbs', 'iui-header-breadcrumbs', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'ol',
+        className: cx('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list'),
+      },
+      items.reduce(
+        (previous, current, index) => [
+          ...previous,
+          current,
+          index !== items.length - 1 &&
+            React.createElement(
+              Box,
+              {
+                as: 'li',
+                className: 'iui-breadcrumbs-separator',
+                key: index,
+              },
+              React.createElement(SvgChevronRight, {
+                key: `chevron${index}`,
+                'aria-hidden': true,
+                className: 'iui-chevron',
+              }),
+            ),
+        ],
+        [],
+      ),
+    ),
+  );
 });