@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.10

package/esm/core/Footer/Footer.js

@@ -9,42 +9,42 @@ import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.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.
@@ -59,34 +59,65 @@ export const defaultFooterElements = [
  * @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;
+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("a", { 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(
+                        '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/FooterSeparator.js

@@ -7,6 +7,6 @@ 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,
 });
 export default FooterSeparator;

package/esm/core/Header/Header.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type HeaderTranslations = {
+type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.
      */
     moreOptions: string;
 };
-declare type HeaderProps = {
+type HeaderProps = {
     /**
      * Application logo.
      * (expects `HeaderLogo`)
@@ -26,11 +26,8 @@ declare type HeaderProps = {
     breadcrumbs?: React.ReactNode;
     /**
      * Content displayed to the left of the `menuItems`
-     * (expects array of `IconButton`, potentially wrapped in a `DropdownMenu`)
+     * (expects array of icons/avatars wrapped in `IconButton` and/or `DropdownMenu`).
      *
-     * Since v2, `userIcon` is deprecated.
-     * The new recommendation is to add `Avatar` (Called `UserIcon` before v2) to the end of `actions`.
-     * `Avatar` can be wrapped in `IconButton` and `DropdownMenu` if needed.
      * @example
      * [
      *  <IconButton><SvgNotification /></IconButton>,
@@ -51,22 +48,6 @@ declare type HeaderProps = {
      * Children is put in the center of the Header.
      */
     children?: React.ReactNode;
-    /**
-     * @deprecated Since v2, add your `UserIcon` (called `Avatar` since v2) to the end of `actions` itself
-     *
-     * User icon
-     *
-     * It's size and transition will be handled between slim/not slim state of the
-     * Header
-     * (expects `UserIcon`, can be wrapped in `IconButton` and `DropdownMenu` if needed)
-     * @example
-     * <DropdownMenu menuItems={...}>
-     *   <IconButton styleType='borderless'>
-     *     <UserIcon ... />
-     *   </IconButton>
-     * </DropdownMenu>
-     */
-    userIcon?: React.ReactNode;
     /**
      * Items in the more dropdown menu.
      * Pass a function that takes the `close` argument (to close the menu),

package/esm/core/Header/Header.js

@@ -8,7 +8,7 @@ import { IconButton } from '../Buttons/index.js';
 import { SvgMoreVertical, Box } from '../utils/index.js';
 import { DropdownMenu } from '../DropdownMenu/index.js';
 const defaultTranslations = {
-    moreOptions: 'More options',
+  moreOptions: 'More options',
 };
 /**
  * Application header
@@ -38,19 +38,59 @@ const defaultTranslations = {
  * />
  */
 export const Header = React.forwardRef((props, forwardedRef) => {
-    const { appLogo, breadcrumbs, isSlim = false, actions, userIcon, 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,
-            userIcon,
-            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 }),
+          ),
+        ),
+    ),
+  );
 });
 export default Header;

package/esm/core/Header/HeaderBasicButton.js

@@ -4,14 +4,22 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
 export const HeaderBasicButton = React.forwardRef((props, ref) => {
-    const { onClick, className, children, style, startIcon, endIcon, styleType, size, ...rest } = props;
-    styleType; // To omit and prevent eslint error.
-    size; // To omit and prevent eslint error.
-    return (React.createElement(Box, { as: 'button', className: cx('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: 'button', style: style, ...rest },
-        startIcon,
-        children,
-        endIcon));
+  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,
+  );
 });
 export default HeaderBasicButton;

package/esm/core/Header/HeaderBreadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type HeaderBreadcrumbsProps = {
+type HeaderBreadcrumbsProps = {
     /**
      * Array of elements, chevrons will be put between them.
      * (expects HeaderButton[])

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -16,13 +16,37 @@ import { SvgChevronRight, Box } from '../utils/index.js';
  * />
  */
 export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
-    const { className, items, ...rest } = props;
-    return (React.createElement(Box, { as: 'nav', "aria-label": 'breadcrumbs', className: cx('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { as: 'ol', className: '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-header-breadcrumbs', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      { as: 'ol', className: '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',
+              }),
+            ),
+        ],
+        [],
+      ),
+    ),
+  );
 });
 export default HeaderBreadcrumbs;

package/esm/core/Header/HeaderButton.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ButtonProps } from '../Buttons/Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
-declare type HeaderButtonProps = {
+type HeaderButtonProps = {
     /**
      * Main label of the header button.
      */
@@ -16,6 +16,10 @@ declare type HeaderButtonProps = {
      * @default false
      */
     isActive?: boolean;
+    /**
+     * Modify the native `name` attribute of the `<button>` element.
+     */
+    htmlName?: string;
 } & Partial<Pick<DropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
 /**
  * Header button that handles slim state of the `Header` it's in.

package/esm/core/Header/HeaderButton.js

@@ -18,18 +18,67 @@ import { HeaderBasicButton } from './HeaderBasicButton.js';
  * <HeaderButton name='Project D' isActive />
  */
 export const HeaderButton = React.forwardRef((props, ref) => {
-    const { name, description, isActive = false, startIcon, menuItems, disabled, ...rest } = props;
-    const buttonProps = {
-        startIcon: startIcon ? (React.createElement(Box, { as: 'span', className: 'iui-header-breadcrumb-button-icon', "aria-hidden": true }, startIcon)) : null,
-        children: (React.createElement(Box, { as: 'span', className: 'iui-header-breadcrumb-button-text' },
-            React.createElement(Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-label' }, name),
-            description && (React.createElement(Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))),
-        ref: ref,
-        disabled: disabled,
-        ...(!!menuItems && { menuItems }),
-        ...rest,
-    }; // eslint-disable-line @typescript-eslint/no-explicit-any
-    const headerButton = !!props.menuItems && !!props.onClick ? (React.createElement(HeaderSplitButton, { ...buttonProps })) : !!props.menuItems ? (React.createElement(HeaderDropdownButton, { ...buttonProps })) : (React.createElement(HeaderBasicButton, { ...buttonProps }));
-    return (React.createElement(Box, { as: 'li', className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
+  const {
+    name,
+    description,
+    htmlName,
+    isActive = false,
+    startIcon,
+    menuItems,
+    disabled,
+    ...rest
+  } = props;
+  const buttonProps = {
+    startIcon: startIcon
+      ? React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-header-breadcrumb-button-icon',
+            'aria-hidden': true,
+          },
+          startIcon,
+        )
+      : null,
+    children: React.createElement(
+      Box,
+      { as: 'span', className: 'iui-header-breadcrumb-button-text' },
+      React.createElement(
+        Box,
+        { as: 'span', className: 'iui-header-breadcrumb-button-text-label' },
+        name,
+      ),
+      description &&
+        React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-header-breadcrumb-button-text-sublabel',
+          },
+          description,
+        ),
+    ),
+    ref: ref,
+    disabled: disabled,
+    name: htmlName,
+    ...(!!menuItems && { menuItems }),
+    ...rest,
+  }; // eslint-disable-line @typescript-eslint/no-explicit-any
+  const headerButton =
+    !!props.menuItems && !!props.onClick
+      ? React.createElement(HeaderSplitButton, { ...buttonProps })
+      : !!props.menuItems
+      ? React.createElement(HeaderDropdownButton, { ...buttonProps })
+      : React.createElement(HeaderBasicButton, { ...buttonProps });
+  return React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: 'iui-header-breadcrumb-item',
+      'aria-current': isActive ? 'location' : undefined,
+      'aria-disabled': disabled ? 'true' : undefined,
+    },
+    headerButton,
+  );
 });
 export default HeaderButton;

package/esm/core/Header/HeaderDropdownButton.js

@@ -5,20 +5,49 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { DropdownMenu } from '../DropdownMenu/index.js';
-import { useMergedRefs, SvgCaretDownSmall, SvgCaretUpSmall, } from '../utils/index.js';
+import {
+  useMergedRefs,
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+} from '../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderDropdownButton = React.forwardRef((props, ref) => {
-    const { menuItems, className, children, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuWidth, setMenuWidth] = React.useState(0);
-    const buttonRef = React.useRef(null);
-    const refs = useMergedRefs(ref, buttonRef);
-    React.useEffect(() => {
-        if (buttonRef.current) {
-            setMenuWidth(buttonRef.current.offsetWidth);
-        }
-    }, [children]);
-    return (React.createElement(DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: () => setIsMenuOpen(true), onHide: () => setIsMenuOpen(false) },
-        React.createElement(HeaderBasicButton, { className: cx('iui-header-breadcrumb-button', className), ref: refs, "aria-label": 'Dropdown', endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })), ...rest }, children)));
+  const { menuItems, className, children, ...rest } = props;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [menuWidth, setMenuWidth] = React.useState(0);
+  const buttonRef = React.useRef(null);
+  const refs = useMergedRefs(ref, buttonRef);
+  React.useEffect(() => {
+    if (buttonRef.current) {
+      setMenuWidth(buttonRef.current.offsetWidth);
+    }
+  }, [children]);
+  return React.createElement(
+    DropdownMenu,
+    {
+      menuItems: menuItems,
+      style: { minInlineSize: menuWidth },
+      onVisibleChange: (open) => setIsMenuOpen(open),
+    },
+    React.createElement(
+      HeaderBasicButton,
+      {
+        className: cx('iui-header-breadcrumb-button', className),
+        ref: refs,
+        'aria-label': 'Dropdown',
+        endIcon: isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            })
+          : React.createElement(SvgCaretDownSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            }),
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 export default HeaderDropdownButton;

package/esm/core/Header/HeaderLogo.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type HeaderLogoOwnProps = {
+type HeaderLogoOwnProps = {
     /**
      * Logo shown before the main content.
      */

package/esm/core/Header/HeaderLogo.js

@@ -14,10 +14,41 @@ import { Box } from '../utils/index.js';
  * <HeaderLogo logo={<img src='data:image/png;base64,...' />}>Downloaded Image</HeaderLogo>
  */
 export const HeaderLogo = React.forwardRef((props, ref) => {
-    const { className, children, logo, onClick, as = (!!onClick ? 'button' : 'div'), // eslint-disable-line @typescript-eslint/no-explicit-any
-    ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-header-brand', className), as: as, type: as === 'button' ? 'button' : undefined, onClick: onClick, ref: ref, ...rest },
-        logo ? (React.createElement(Box, { as: 'span', className: 'iui-header-brand-icon', "aria-hidden": true }, logo)) : null,
-        children && (React.createElement(Box, { as: 'span', className: 'iui-header-brand-label' }, children))));
+  const {
+    className,
+    children,
+    logo,
+    onClick,
+    as = !!onClick ? 'button' : 'div', // eslint-disable-line @typescript-eslint/no-explicit-any
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-header-brand', className),
+      as: as,
+      type: as === 'button' ? 'button' : undefined,
+      onClick: onClick,
+      ref: ref,
+      ...rest,
+    },
+    logo
+      ? React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-header-brand-icon',
+            'aria-hidden': true,
+          },
+          logo,
+        )
+      : null,
+    children &&
+      React.createElement(
+        Box,
+        { as: 'span', className: 'iui-header-brand-label' },
+        children,
+      ),
+  );
 });
 export default HeaderLogo;