@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Header/HeaderButton.js

@@ -1,35 +1,77 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { Box } from '../../utils/index.js';
 import { HeaderSplitButton } from './HeaderSplitButton.js';
 import { HeaderDropdownButton } from './HeaderDropdownButton.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
-/**
- * Header button that handles slim state of the `Header` it's in.
- * When in slim mode, will only display the name and reduce icon size.
- * Will display an arrow on the right if `menuItems` prop is provided.
- * @example
- * <HeaderButton name='Project A' description='0n00434' menuItems={...} />
- * <HeaderButton name='Project B' description='0n00434' startIcon={<SvgImodelHollow />} />
- * <HeaderButton name='Project C' startIcon={<img style={{ objectFit: 'cover' }} src='project.png' />} />
- * <HeaderButton name='Project D' isActive />
- */
 export const HeaderButton = React.forwardRef((props, ref) => {
-    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,
-    };
-    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,
+  };
+  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,
+  );
 });

package/esm/core/Header/HeaderDropdownButton.js

@@ -1,23 +1,50 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { DropdownMenu } from '../DropdownMenu/DropdownMenu.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: { 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)));
+  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,
+    ),
+  );
 });

package/esm/core/Header/HeaderLogo.js

@@ -1,21 +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 cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-/**
- * Header Title section
- * @example
- * <HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>
- * <HeaderLogo logo={<SvgImodelHollow />} />
- * <HeaderLogo logo={<img src='image.png' />} />
- * <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'), ...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',
+    ...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,
+      ),
+  );
 });

package/esm/core/Header/HeaderSplitButton.js

@@ -1,24 +1,73 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall, Box, ButtonBase, } from '../../utils/index.js';
+import {
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  Box,
+  ButtonBase,
+} from '../../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
-    const { menuItems, className, menuPlacement = 'bottom-end', children, disabled, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuWidth, setMenuWidth] = React.useState(0);
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (ref.current) {
-            setMenuWidth(ref.current.offsetWidth);
-        }
-    }, [children]);
-    return (React.createElement(Box, { className: cx('iui-header-breadcrumb-button-wrapper', className), ref: ref },
-        React.createElement(HeaderBasicButton, { ref: forwardedRef, disabled: disabled, ...rest }, children),
-        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minInlineSize: menuWidth }, onVisibleChange: (open) => setIsMenuOpen(open) },
-            React.createElement(ButtonBase, { "aria-label": 'More', className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, 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 }))))));
+  const {
+    menuItems,
+    className,
+    menuPlacement = 'bottom-end',
+    children,
+    disabled,
+    ...rest
+  } = props;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [menuWidth, setMenuWidth] = React.useState(0);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current) {
+      setMenuWidth(ref.current.offsetWidth);
+    }
+  }, [children]);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-header-breadcrumb-button-wrapper', className),
+      ref: ref,
+    },
+    React.createElement(
+      HeaderBasicButton,
+      {
+        ref: forwardedRef,
+        disabled: disabled,
+        ...rest,
+      },
+      children,
+    ),
+    React.createElement(
+      DropdownMenu,
+      {
+        placement: menuPlacement,
+        menuItems: menuItems,
+        style: {
+          minInlineSize: menuWidth,
+        },
+        onVisibleChange: (open) => setIsMenuOpen(open),
+      },
+      React.createElement(
+        ButtonBase,
+        {
+          'aria-label': 'More',
+          className:
+            'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
+          disabled: disabled,
+        },
+        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,
+            }),
+      ),
+    ),
+  );
 });

package/esm/core/Icon/Icon.js

@@ -1,37 +1,33 @@
-/*---------------------------------------------------------------------------------------------
- * 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 getSizeValue = (size) => {
-    switch (size) {
-        case 'small':
-            return 's';
-        case 'medium':
-            return 'm';
-        case 'large':
-            return 'l';
-        default:
-            return size;
-    }
+  switch (size) {
+    case 'small':
+      return 's';
+    case 'medium':
+      return 'm';
+    case 'large':
+      return 'l';
+    default:
+      return size;
+  }
 };
-/**
- * A utility component to provide size and fill to svgs.
- * Works well with svgs from `@itwin/itwinui-icons-react`.
- *
- * @example
- * <Icon>
- *   <SvgPlaceholder />
- * </Icon>
- *
- * @example
- * <Icon fill='negative'>
- *   <SvgStatusError />
- * </Icon>
- */
 export const Icon = React.forwardRef((props, ref) => {
-    const { size = 'medium', fill = 'default', className, padded = false, ...rest } = props;
-    return (React.createElement(Box, { as: 'span', className: cx('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, "data-iui-padded": padded ? 'true' : undefined, ref: ref, ...rest }));
+  const {
+    size = 'medium',
+    fill = 'default',
+    className,
+    padded = false,
+    ...rest
+  } = props;
+  return React.createElement(Box, {
+    as: 'span',
+    className: cx('iui-svg-icon', className),
+    'data-iui-icon-size': getSizeValue(size),
+    'data-iui-icon-color': fill,
+    'data-iui-padded': padded ? 'true' : undefined,
+    ref: ref,
+    ...rest,
+  });
 });

package/esm/core/InformationPanel/InformationPanel.js

@@ -1,71 +1,98 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { useMergedRefs, Box } from '../../utils/index.js';
-/**
- * InformationPanel provides a way to view additional content or attributes
- * without leaving the main content area (e.g. Table).
- *
- * The panel appears as an overlay on top of the main content.
- * @example
- * <InformationPanelWrapper>
- *   <Table ... /> // component to overlay
- *   <InformationPanel isOpen={true}>
- *     <InformationPanelHeader onClose={() => {}}>
- *       <Text variant='subheading'>InfoPanel heading</Text>
- *     </InformationPanelHeader>
- *     <InformationPanelBody>
- *       <Text>Metadata</Text>
- *       <InformationPanelContent ... />
- *       <Text>Attributes</Text>
- *       <InformationPanelContent ... />
- *     </InformationPanelBody>
- *   </InformationPanel>
- * </InformationPanelWrapper>
- */
 export const InformationPanel = React.forwardRef((props, forwardedRef) => {
-    const { className, isOpen = false, orientation = 'vertical', resizable = true, children, ...rest } = props;
-    const [infoPanelSize, setInfoPanelSize] = React.useState({ width: undefined, height: undefined });
-    const infoPanelRef = React.useRef(null);
-    const refs = useMergedRefs(forwardedRef, infoPanelRef);
-    const startResize = (e) => {
-        if (!infoPanelRef.current) {
-            return;
-        }
-        if (e.button != undefined && e.button !== 0) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        infoPanelRef.current.ownerDocument.addEventListener('pointermove', onResize);
-        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => infoPanelRef.current?.ownerDocument.removeEventListener('pointermove', onResize), { once: true });
-    };
-    const onResize = React.useCallback((e) => {
-        e.preventDefault();
-        if (!infoPanelRef.current) {
-            return;
-        }
-        const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
-        if (orientation === 'vertical') {
-            setInfoPanelSize({ width: right - e.clientX, height: undefined });
-        }
-        else {
-            setInfoPanelSize({ height: bottom - e.clientY, width: undefined });
-        }
-    }, [orientation]);
-    return (React.createElement(Box, { className: cx('iui-information-panel', {
-            'iui-right': orientation === 'vertical',
-            'iui-bottom': orientation === 'horizontal',
-            'iui-visible': isOpen,
-        }, className), ref: refs, ...rest, style: {
-            width: orientation === 'vertical' ? infoPanelSize.width : undefined,
-            height: orientation === 'horizontal' ? infoPanelSize.height : undefined,
-            ...props.style,
-        } },
-        resizable && (React.createElement(Box, { className: 'iui-resizer', onPointerDown: startResize },
-            React.createElement(Box, { className: 'iui-resizer-bar' }))),
-        children));
+  const {
+    className,
+    isOpen = false,
+    orientation = 'vertical',
+    resizable = true,
+    children,
+    ...rest
+  } = props;
+  const [infoPanelSize, setInfoPanelSize] = React.useState({
+    width: undefined,
+    height: undefined,
+  });
+  const infoPanelRef = React.useRef(null);
+  const refs = useMergedRefs(forwardedRef, infoPanelRef);
+  const startResize = (e) => {
+    if (!infoPanelRef.current) {
+      return;
+    }
+    if (e.button != undefined && e.button !== 0) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    infoPanelRef.current.ownerDocument.addEventListener(
+      'pointermove',
+      onResize,
+    );
+    infoPanelRef.current.ownerDocument.addEventListener(
+      'pointerup',
+      () =>
+        infoPanelRef.current?.ownerDocument.removeEventListener(
+          'pointermove',
+          onResize,
+        ),
+      {
+        once: true,
+      },
+    );
+  };
+  const onResize = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!infoPanelRef.current) {
+        return;
+      }
+      const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
+      if (orientation === 'vertical') {
+        setInfoPanelSize({
+          width: right - e.clientX,
+          height: undefined,
+        });
+      } else {
+        setInfoPanelSize({
+          height: bottom - e.clientY,
+          width: undefined,
+        });
+      }
+    },
+    [orientation],
+  );
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-information-panel',
+        {
+          'iui-right': orientation === 'vertical',
+          'iui-bottom': orientation === 'horizontal',
+          'iui-visible': isOpen,
+        },
+        className,
+      ),
+      ref: refs,
+      ...rest,
+      style: {
+        width: orientation === 'vertical' ? infoPanelSize.width : undefined,
+        height: orientation === 'horizontal' ? infoPanelSize.height : undefined,
+        ...props.style,
+      },
+    },
+    resizable &&
+      React.createElement(
+        Box,
+        {
+          className: 'iui-resizer',
+          onPointerDown: startResize,
+        },
+        React.createElement(Box, {
+          className: 'iui-resizer-bar',
+        }),
+      ),
+    children,
+  );
 });

package/esm/core/InformationPanel/InformationPanelBody.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';
-/**
- * Body of the `InformationPanel` containing the main content.
- */
 export const InformationPanelBody = polymorphic.div('iui-information-body');

package/esm/core/InformationPanel/InformationPanelContent.js

@@ -1,34 +1,23 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { Box } from '../../utils/index.js';
-/**
- * The `InformationPanelContent` component should be used inside `InformationPanelBody`
- * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
- * and the value can be any input element (including readonly inputs for non-modifiable fields).
- *
- * By default, the pairs are displayed of label and input are displayed  in separate lines,
- * but displayStyle can be set to 'inline' to show them in the same line with correct alignment.
- *
- * You can use multiple `InformationPanelContent` instances inside one `InformationPanelBody`; this is
- * useful when you want to show other content, e.g. separate headings for different sections of key/value pairs.
- *
- * @example
- * <InformationPanelContent displayStyle='inline'>
- *   <Label htmlFor='name-input'>File name</Label>
- *   <Input id='name-input' value='Alpha.mp3' />
- *
- *   <Label htmlFor='year-input'>Year</Label>
- *   <Input id='year-input' value='2021' />
- *
- *   <Label htmlFor='path-input'>Path</Label>
- *   <Input id='path-input' value='/Shared/Music/' />
- * </InformationPanelContent>
- */
-export const InformationPanelContent = React.forwardRef((props, forwardedRef) => {
+export const InformationPanelContent = React.forwardRef(
+  (props, forwardedRef) => {
     const { className, displayStyle = 'default', children, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className), ref: forwardedRef, ...rest }, children));
-});
+    return React.createElement(
+      Box,
+      {
+        className: cx(
+          'iui-information-body-content',
+          {
+            'iui-inline': displayStyle === 'inline',
+          },
+          className,
+        ),
+        ref: forwardedRef,
+        ...rest,
+      },
+      children,
+    );
+  },
+);