@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

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

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type HeaderTranslations = {
-    /**
-     * 'More' menu button aria-label.
-     */
-    moreOptions: string;
-};
-type HeaderProps = {
-    /**
-     * Application logo.
-     * (expects `HeaderLogo`)
-     * @example
-     * <HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>
-     */
-    appLogo: React.ReactNode;
-    /**
-     * Content on the right of the application button
-     * (expects `HeaderBreadcrumbs`)
-     * @example
-     * <HeaderBreadcrumbs items={[
-     *   <HeaderButton key='project' name='Project A' />
-     *   <HeaderButton key='imodel' name='IModel X' />
-     * ]} />
-     */
-    breadcrumbs?: React.ReactNode;
-    /**
-     * Content displayed to the left of the `menuItems`
-     * (expects array of icons/avatars wrapped in `IconButton` and/or `DropdownMenu`).
-     *
-     * @example
-     * [
-     *  <IconButton><SvgNotification /></IconButton>,
-     *  <DropdownMenu>
-     *   <IconButton>
-     *    <SvgHelpCircularHollow />
-     *   </IconButton>
-     *  </DropdownMenu>,
-     *  <DropdownMenu menuItems={...}>
-     *    <IconButton styleType='borderless'>
-     *      <Avatar ... />
-     *    </IconButton>
-     *  </DropdownMenu>
-     * ]
-     */
-    actions?: React.ReactNode[];
-    /**
-     * Children is put in the center of the Header.
-     */
-    children?: React.ReactNode;
-    /**
-     * Items in the more dropdown menu.
-     * Pass a function that takes the `close` argument (to close the menu),
-     * and returns a list of `MenuItem` components.
-     */
-    menuItems?: (close: () => void) => JSX.Element[];
-    /**
-     * If true, the header height is reduced, typically used when viewing 3D content.
-     * @default false
-     */
-    isSlim?: boolean;
-    /**
-     * Provide localized strings.
-     */
-    translatedStrings?: HeaderTranslations;
-};
-/**
- * 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 declare const Header: PolymorphicForwardRefComponent<"header", HeaderProps>;
-export {};

package/esm/core/Header/Header.js

@@ -1,79 +0,0 @@
-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';
-let defaultTranslations = {
-  moreOptions: 'More options',
-};
-export const Header = React.forwardRef((props, forwardedRef) => {
-  let {
-    appLogo,
-    breadcrumbs,
-    isSlim = false,
-    actions,
-    menuItems,
-    translatedStrings,
-    className,
-    children,
-    ...rest
-  } = props;
-  let headerTranslations = {
-    ...defaultTranslations,
-    ...translatedStrings,
-  };
-  return React.createElement(
-    Box,
-    {
-      as: 'header',
-      className: cx('iui-page-header', className),
-      'data-iui-size': isSlim ? 'slim' : void 0,
-      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.d.ts

@@ -1,3 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { ButtonProps } from '../Buttons/Button.js';
-export declare const HeaderBasicButton: PolymorphicForwardRefComponent<"button", ButtonProps>;

package/esm/core/Header/HeaderBasicButton.js

@@ -1,18 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { ButtonBase } from '../../utils/index.js';
-export const HeaderBasicButton = React.forwardRef((props, ref) => {
-  let { className, children, startIcon, endIcon, styleType, size, ...rest } =
-    props;
-  return React.createElement(
-    ButtonBase,
-    {
-      className: cx('iui-header-breadcrumb-button', className),
-      ref: ref,
-      ...rest,
-    },
-    startIcon,
-    children,
-    endIcon,
-  );
-});

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type HeaderBreadcrumbsProps = {
-    /**
-     * Array of elements, chevrons will be put between them.
-     * (expects HeaderButton[])
-     * @example
-     * [
-     *  <HeaderButton key={...} ... />
-     *  <HeaderButton key={...} ... />
-     * ]
-     */
-    items: React.ReactNode[];
-};
-/**
- * Header breadcrumbs, adds chevron between each provided items.
- * @example
- * <HeaderBreadcrumbs
- *   items={[
- *     <HeaderButton key={...} ... />
- *     <HeaderButton key={...} ... />
- *   ]}
- * />
- */
-export declare const HeaderBreadcrumbs: PolymorphicForwardRefComponent<"nav", HeaderBreadcrumbsProps>;
-export {};

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { SvgChevronRight, Box } from '../../utils/index.js';
-export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
-  let { 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',
-              }),
-            ),
-        ],
-        [],
-      ),
-    ),
-  );
-});

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import type { ButtonProps } from '../Buttons/Button.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { DropdownButtonProps } from '../Buttons/DropdownButton.js';
-type HeaderButtonProps = {
-    /**
-     * Main label of the header button.
-     */
-    name: React.ReactNode;
-    /**
-     * Description shown below the main label, will be hidden in `Header` slim mode.
-     */
-    description?: React.ReactNode;
-    /**
-     * Is the menu active.
-     * @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.
- * 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 declare const HeaderButton: PolymorphicForwardRefComponent<"button", HeaderButtonProps>;
-export {};

package/esm/core/Header/HeaderButton.js

@@ -1,77 +0,0 @@
-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';
-export const HeaderButton = React.forwardRef((props, ref) => {
-  let {
-    name,
-    description,
-    htmlName,
-    isActive = false,
-    startIcon,
-    menuItems,
-    disabled,
-    ...rest
-  } = props;
-  let 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,
-  };
-  let 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' : void 0,
-      'aria-disabled': disabled ? 'true' : void 0,
-    },
-    headerButton,
-  );
-});

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

@@ -1,3 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { DropdownButtonProps } from '../Buttons/DropdownButton.js';
-export declare const HeaderDropdownButton: PolymorphicForwardRefComponent<"button", DropdownButtonProps>;

package/esm/core/Header/HeaderDropdownButton.js

@@ -1,48 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import {
-  useMergedRefs,
-  SvgCaretDownSmall,
-  SvgCaretUpSmall,
-} from '../../utils/index.js';
-import { HeaderBasicButton } from './HeaderBasicButton.js';
-export const HeaderDropdownButton = React.forwardRef((props, ref) => {
-  let { menuItems, className, children, ...rest } = props;
-  let [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  let [menuWidth, setMenuWidth] = React.useState(0);
-  let buttonRef = React.useRef(null);
-  let 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.d.ts

@@ -1,22 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type HeaderLogoOwnProps = {
-    /**
-     * Logo shown before the main content.
-     */
-    logo: JSX.Element;
-    /**
-     * Click event handler.
-     * If passed, the component will be rendered as a `<button>` rather than `<div>`.
-     */
-    onClick?: (e: unknown) => void;
-};
-/**
- * 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 declare const HeaderLogo: PolymorphicForwardRefComponent<"div", HeaderLogoOwnProps>;
-export {};

package/esm/core/Header/HeaderLogo.js

@@ -1,44 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-export const HeaderLogo = React.forwardRef((props, ref) => {
-  let {
-    className,
-    children,
-    logo,
-    onClick,
-    as = onClick ? 'button' : 'div',
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-header-brand', className),
-      as: as,
-      type: 'button' === as ? 'button' : void 0,
-      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.d.ts

@@ -1,3 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { SplitButtonProps } from '../Buttons/SplitButton.js';
-export declare const HeaderSplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;

package/esm/core/Header/HeaderSplitButton.js

@@ -1,71 +0,0 @@
-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 { HeaderBasicButton } from './HeaderBasicButton.js';
-export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
-  let {
-    menuItems,
-    className,
-    menuPlacement = 'bottom-end',
-    children,
-    disabled,
-    ...rest
-  } = props;
-  let [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  let [menuWidth, setMenuWidth] = React.useState(0);
-  let 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.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import type { AnyString } from '../../utils/types.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
-export type IconProps = {
-    /**
-     * Size of the svg.
-     *  - 'medium': works well with most text
-     *  - 'small': smaller than medium
-     *  - 'large': larger than medium
-     *  - 'auto': scales with text
-     *
-     * Also accepts a custom string value that will be used unchanged.
-     *
-     * @default 'medium'
-     */
-    size?: 'auto' | 'small' | 'medium' | 'large' | AnyString;
-    /**
-     * Fill (color) of the svg.
-     * Defaults to `--iui-color-icon-muted`. Can be specified to
-     * use one of the status colors.
-     *
-     * Also accepts a custom string value that will be used unchanged.
-     *
-     * @default 'default'
-     */
-    fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
-    /**
-     * Option to add padding to the icon.
-     * @default false
-     */
-    padded?: boolean;
-} & React.ComponentPropsWithoutRef<'span'>;
-/**
- * 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 declare const Icon: PolymorphicForwardRefComponent<"span", IconProps>;

package/esm/core/Icon/Icon.js

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/components/Box.js';
-let getSizeValue = (size) => {
-  switch (size) {
-    case 'small':
-      return 's';
-    case 'medium':
-      return 'm';
-    case 'large':
-      return 'l';
-    default:
-      return size;
-  }
-};
-export const Icon = React.forwardRef((props, ref) => {
-  let {
-    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' : void 0,
-    ref: ref,
-    ...rest,
-  });
-});