@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/cjs/core/Tile/Tile.d.ts

@@ -1,329 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { IconButton } from '../Buttons/IconButton.js';
-type TileWrapperOwnProps = {
-    /**
-     * Status of the tile.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Whether the tile is selected or in "active" state.
-     * Gets highlighted and shows a checkmark icon near tile name.
-     */
-    isSelected?: boolean;
-    /**
-     * Whether the tile is "new". Tile name becomes bold and gets a new status icon.
-     */
-    isNew?: boolean;
-    /**
-     * Default tile variant or the folder layout.
-     * @default 'default'
-     */
-    variant?: 'default' | 'folder';
-    /**
-     * Display a loading state.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Flag whether the tile is disabled.
-     *
-     * Note: This only affects the tile. You need to manually disable
-     * the buttons and other interactive elements inside the tile.
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-};
-type TileThumbnailPictureOwnProps = {
-    url?: string;
-} | {
-    url?: never;
-    children?: React.ReactNode;
-};
-type TileNameOwnProps = {
-    name?: React.ReactNode;
-};
-type TileMoreOptionsOwnProps = {
-    buttonProps?: React.ComponentPropsWithoutRef<typeof IconButton>;
-    children?: React.ReactNode[];
-};
-type TileLegacyProps = {
-    /**
-     * Name or title of the tile.
-     */
-    name: React.ReactNode;
-    /**
-     * Description text of the tile.
-     * Gets truncated if it can't fit in the tile.
-     */
-    description?: React.ReactNode;
-    /**
-     * Metadata section located below description.
-     * @example
-     * <Tile
-     *  // ...
-     *  metadata='basic metadata'
-     *  // or
-     *  metadata={<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
-     *  // or
-     *  metadata={<>
-     *    <SvgTag2 />
-     *    <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
-     *  </>}
-     * />
-     */
-    metadata?: React.ReactNode;
-    /**
-     * Thumbnail image url, a custom component or an svg.
-     * @example
-     * <Tile
-     *  // ...
-     *  thumbnail='/url/to/image.jpg'
-     *  // or
-     *  thumbnail={<Avatar image={<img src='icon.png' />} />}
-     *  // or
-     *  thumbnail={<SvgImodelHollow />}
-     * />
-     */
-    thumbnail?: string | React.ReactNode;
-    /**
-     * `Badge` shown on the bottom right of thumbnail.
-     */
-    badge?: React.ReactNode;
-    /**
-     * Icon shown on top left of the tile. Also known as "type indicator".
-     * Recommended to use an invisible `IconButton`.
-     */
-    leftIcon?: React.ReactNode;
-    /**
-     * Icon shown on top right of the tile. Also known as "quick action".
-     * Recommended to use an invisible `IconButton`.
-     */
-    rightIcon?: React.ReactNode;
-    /**
-     * Upto two buttons shown at the bottom of the tile.
-     */
-    buttons?: [React.ReactNode?, React.ReactNode?];
-    /**
-     * Dropdown menu containing `MenuItem`s.
-     */
-    moreOptions?: React.ReactNode[];
-    /**
-     * Status of the tile.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Whether the tile is selected or in "active" state.
-     * Gets highlighted and shows a checkmark icon near tile name.
-     */
-    isSelected?: boolean;
-    /**
-     * Whether the tile is "new". Tile name becomes bold and gets a new status icon.
-     */
-    isNew?: boolean;
-    /**
-     * Default tile variant or the folder layout.
-     * @default 'default'
-     */
-    variant?: 'default' | 'folder';
-    /**
-     * Any custom nodes that will be appended to the tile's main content.
-     */
-    children?: React.ReactNode;
-    /**
-     * Whether the tile is expected to be interactable (i.e. `onClick`).
-     * It becomes focusable and gets on hover styling.
-     */
-    isActionable?: boolean;
-    /**
-     * Display a loading state.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Flag whether the tile is disabled.
-     *
-     * Note: This only affects the tile. You need to manually disable
-     * the buttons and other interactive elements inside the tile.
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Adds onClick to the TileAction component.
-     */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-};
-/**
- * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents
- * @example
- * <Tile.Wrapper>
- *    <Tile.ThumbnailArea>
- *      <Tile.ThumbnailPicture/>
- *      <Tile.Badge/>
- *      <Tile.TypeIndicator/>
- *      <Tile.QuickAction/>
- *    </Tile.ThumbnailArea>
- *    <Tile.Name>
- *      <Tile.NameIcon/>
- *      <Tile.NameLabel/>
- *    </Tile.Name>
- *    <Tile.ContentArea>
- *      <Tile.Description />
- *      <Tile.Metadata/>
- *      <Tile.MoreOptions/>
- *    </Tile.ContentArea>
- *    <Tile.Buttons/>
- * </Tile.Wrapper>
- *
- * @example
- *  <Tile
- *  name='Tile name'
- *  description='Tile description that takes upto 3 lines'
- *  metadata={<TagContainer><Tag variant='basic'>Tag 1</Tag></TagContainer>}
- *  thumbnail='/url/to/image.jpg'
- *  badge={<Badge backgroundColor='blue'>Badge label</Badge>}
- *  buttons={[<Button>Button 1</Button>, <Button>Button 2</Button>]}
- *  moreOptions={[<MenuItem>Item 1</MenuItem>, <MenuItem>Item 2</MenuItem>]}
- *  leftIcon={<IconButton><SvgInfo /></IconButton>}
- *  rightIcon={<IconButton><SvgStar /></IconButton>}
- *  isSelected={true}
- *  isNew={false}
- * />
- */
-export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps> & {
-    /**
-     * Wrapper subcomponent for fully customisable Tile.
-     */
-    Wrapper: PolymorphicForwardRefComponent<"div", TileWrapperOwnProps>;
-    /**
-     * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
-     * @example
-     * <Tile.ThumbnailArea>
-     *    <Tile.ThumbnailPicture/>
-     *    <Tile.QuickAction/>
-     *    <Tile.TypeIndicator/>
-     *    <Tile.BadgeContainer/>
-     * </Tile.ThumbnailArea>
-     */
-    ThumbnailArea: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * Thumbnail image url, a custom component or an svg for thumbnail avatar.
-     * @example
-     * <Tile.Wrapper>
-     *  // ...
-     *  <Tile.ThumbnailArea>
-     *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
-     *  </Tile.ThumbnailArea>
-     * </Tile.Wrapper>
-     * or
-     * <Tile.Wrapper>
-     *  // ...
-     *  <Tile.ThumbnailArea>
-     *    <Tile.ThumbnailPicture>
-     *      {<Avatar image={<img src='icon.png' />} />}
-     *      // or
-     *      {<SvgImodelHollow />}
-     *    </Tile.ThumbnailPicture>
-     *   </Tile.ThumbnailArea>
-     * /Tile>
-     */
-    ThumbnailPicture: PolymorphicForwardRefComponent<"div", TileThumbnailPictureOwnProps>;
-    /**
-     * `QuickAction` subcomponent shown on top left of the tile.
-     * Recommended to use an invisible `IconButton`.
-     */
-    QuickAction: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * `TypeIndicator` subcomponent shown on top left of the tile.
-     * Recommended to use an invisible `IconButton`.
-     */
-    TypeIndicator: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
-     */
-    BadgeContainer: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
-     */
-    IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-        isActive?: boolean;
-        label?: React.ReactNode;
-        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
-        iconProps?: React.ComponentProps<"span">;
-        title?: string;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
-        as?: "button" | undefined;
-    }, "ref">>;
-    /**
-     * `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
-     */
-    Name: PolymorphicForwardRefComponent<"div", TileNameOwnProps>;
-    /**
-     * `NameIcon` next to name of the tile. Goes under <Tile.Name>
-     * @example
-     * <Tile.Wrapper>
-     *  <Tile.Name>
-     *    <Tile.NameIcon/>
-     *  </Tile.Name>
-     * </Tile.Wrapper>
-     */
-    NameIcon: PolymorphicForwardRefComponent<"div", {}>;
-    NameLabel: PolymorphicForwardRefComponent<"span", {}>;
-    /**
-     * Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
-     * Renders `a` element by default.
-     * @example
-     * <Tile.Name>
-     *  <Tile.NameLabel>
-     *   {<Tile.Action href='/new-page'>Tile Name<Tile.Action/>}
-     *  <Tile.NameLabel/>
-     * </Tile.Name>
-     */
-    Action: PolymorphicForwardRefComponent<"a", {}>;
-    /**
-     * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
-     * @example
-     * <Tile.Wrapper>
-     *  <Tile.ContentArea>
-     *    <Tile.Description/>
-     *    <Tile.Metadata/>
-     *    <Tile.MoreOptions/>
-     *  </Tile.ContentArea>
-     * </Tile.Wrapper>
-     */
-    ContentArea: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * Description text of the tile.
-     * Gets truncated if it can't fit in the tile.
-     */
-    Description: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * Metadata section located below description.
-     * @example
-     * <Tile.Metadata>
-     *  // ...
-     *  'basic metadata'
-     *  // or
-     *  {<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
-     *  // or
-     *  {<>
-     *    <SvgTag2 />
-     *    <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
-     *  </>}
-     * </Tile.Metadata>
-     */
-    Metadata: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * Dropdown menu containing `MenuItem`s.
-     */
-    MoreOptions: PolymorphicForwardRefComponent<"div", TileMoreOptionsOwnProps>;
-    /**
-     * Upto two buttons shown at the bottom of the tile.
-     */
-    Buttons: PolymorphicForwardRefComponent<"div", {}>;
-};
-export {};

package/cjs/core/Tile/Tile.js

@@ -1,330 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Tile', {
-  enumerable: true,
-  get: function () {
-    return Tile;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _DropdownMenu = require('../DropdownMenu/DropdownMenu.js');
-const _IconButton = require('../Buttons/IconButton.js');
-const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
-const _LinkAction = require('../LinkAction/LinkAction.js');
-const TileContext = _react.createContext(void 0);
-const TileWrapper = _react.forwardRef((props, forwardedRef) => {
-  let {
-    className,
-    status,
-    variant,
-    isNew,
-    isSelected,
-    isLoading,
-    isDisabled,
-    ...rest
-  } = props;
-  let [localActionable, setLocalActionable] = _react.useState(false);
-  let isActionable = localActionable;
-  return _react.createElement(
-    TileContext.Provider,
-    {
-      value: {
-        status,
-        variant,
-        isNew,
-        isSelected,
-        isLoading,
-        isActionable,
-        isDisabled,
-        setActionable: setLocalActionable,
-      },
-    },
-    _react.createElement(_index.Box, {
-      className: (0, _classnames.default)(
-        'iui-tile',
-        {
-          'iui-folder': 'folder' === variant,
-          'iui-new': isNew,
-          'iui-selected': isSelected,
-          'iui-actionable': isActionable,
-          [`iui-${status}`]: !!status,
-          'iui-loading': isLoading,
-        },
-        className,
-      ),
-      'aria-disabled': isDisabled,
-      ref: forwardedRef,
-      ...rest,
-    }),
-  );
-});
-const TileAction = _react.forwardRef((props, forwardedRef) => {
-  let { onClick, children, href, ...rest } = props;
-  let { setActionable, isDisabled } = (0, _index.useSafeContext)(TileContext);
-  _react.useEffect(() => {
-    if (!(0, _index.supportsHas)()) setActionable(true);
-  }, [setActionable]);
-  return _react.createElement(
-    _LinkAction.LinkAction,
-    {
-      as: props.href ? 'a' : 'button',
-      href: href,
-      onClick: isDisabled ? void 0 : onClick,
-      'aria-disabled': isDisabled,
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
-});
-const TileThumbnailArea = _index.polymorphic.div('iui-tile-thumbnail');
-const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
-  let { className, url, children, ...rest } = props;
-  if (url)
-    return _react.createElement(_index.Box, {
-      className: (0, _classnames.default)(
-        'iui-tile-thumbnail-picture',
-        className,
-      ),
-      style: {
-        backgroundImage: 'string' == typeof url ? `url(${url})` : void 0,
-      },
-      ref: forwardedRef,
-      ...rest,
-    });
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)('iui-thumbnail-icon', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
-});
-const TileQuickAction = _index.polymorphic.div(
-  'iui-tile-thumbnail-quick-action',
-);
-const TileTypeIndicator = _index.polymorphic.div(
-  'iui-tile-thumbnail-type-indicator',
-);
-const TileIconButton = _react.forwardRef((props, forwardedRef) => {
-  let { className, children, ...rest } = props;
-  return _react.createElement(
-    _IconButton.IconButton,
-    {
-      className: (0, _classnames.default)(
-        'iui-tile-thumbnail-button',
-        className,
-      ),
-      styleType: 'borderless',
-      size: 'small',
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
-});
-const TileBadgeContainer = _index.polymorphic.div(
-  'iui-tile-thumbnail-badge-container',
-);
-const TileName = _react.forwardRef((props, forwardedRef) => {
-  let { className, children, name, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)('iui-tile-name', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ?? name,
-  );
-});
-const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
-  let { children, className, ...rest } = props;
-  let { status, isLoading, isSelected, isNew } = (0, _index.useSafeContext)(
-    TileContext,
-  );
-  let StatusIcon = !!status && _index.StatusIconMap[status];
-  let icon;
-  if (StatusIcon)
-    icon = _react.createElement(StatusIcon, {
-      'aria-hidden': true,
-    });
-  if (isLoading)
-    icon = _react.createElement(_ProgressRadial.ProgressRadial, {
-      size: 'x-small',
-      'aria-hidden': true,
-      indeterminate: true,
-    });
-  if (isSelected)
-    icon = _react.createElement(_index.SvgCheckmark, {
-      'aria-hidden': true,
-    });
-  if (isNew)
-    icon = _react.createElement(_index.SvgNew, {
-      'aria-hidden': true,
-    });
-  return children || icon
-    ? _react.createElement(
-        _index.Box,
-        {
-          className: (0, _classnames.default)(
-            'iui-tile-status-icon',
-            className,
-          ),
-          ref: forwardedRef,
-          ...rest,
-        },
-        children ?? icon,
-      )
-    : null;
-});
-const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
-const TileContentArea = _index.polymorphic.div('iui-tile-content');
-const TileDescription = _index.polymorphic.div('iui-tile-description');
-const TileMetadata = _index.polymorphic.div('iui-tile-metadata');
-const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
-  let { className, children = [], buttonProps, ...rest } = props;
-  let [isMenuVisible, setIsMenuVisible] = _react.useState(false);
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)(
-        'iui-tile-more-options',
-        {
-          'iui-visible': isMenuVisible,
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    _react.createElement(
-      _DropdownMenu.DropdownMenu,
-      {
-        onVisibleChange: setIsMenuVisible,
-        menuItems: (close) =>
-          children?.map((option) =>
-            _react.cloneElement(option, {
-              onClick: (value) => {
-                close();
-                option.props.onClick?.(value);
-              },
-            }),
-          ),
-      },
-      _react.createElement(
-        _IconButton.IconButton,
-        {
-          styleType: 'borderless',
-          size: 'small',
-          'aria-label': 'More options',
-          ...buttonProps,
-        },
-        _react.createElement(_index.SvgMore, null),
-      ),
-    ),
-  );
-});
-const TileButtons = _index.polymorphic.div('iui-tile-buttons');
-const TileComponent = _react.forwardRef((props, forwardedRef) => {
-  let {
-    name,
-    description,
-    status,
-    isNew,
-    isLoading,
-    isSelected,
-    thumbnail,
-    badge,
-    leftIcon,
-    rightIcon,
-    buttons,
-    metadata,
-    moreOptions,
-    children,
-    isActionable,
-    isDisabled,
-    onClick,
-    ...rest
-  } = props;
-  return _react.createElement(
-    TileWrapper,
-    {
-      ref: forwardedRef,
-      isNew: isNew,
-      isSelected: isSelected,
-      isLoading: isLoading,
-      status: status,
-      isDisabled: isDisabled,
-      ...rest,
-    },
-    _react.createElement(
-      TileName,
-      null,
-      (status || isNew || isLoading || isSelected) &&
-        _react.createElement(TileNameIcon, null),
-      _react.createElement(
-        TileNameLabel,
-        null,
-        isActionable
-          ? _react.createElement(
-              TileAction,
-              {
-                onClick: isDisabled ? void 0 : onClick,
-                'aria-disabled': isDisabled,
-              },
-              name,
-            )
-          : name,
-      ),
-    ),
-    thumbnail &&
-      _react.createElement(
-        TileThumbnailArea,
-        null,
-        'string' != typeof thumbnail
-          ? _react.createElement(TileThumbnailPicture, null, thumbnail)
-          : _react.createElement(TileThumbnailPicture, {
-              url: thumbnail,
-            }),
-        badge && _react.createElement(TileBadgeContainer, null, badge),
-        leftIcon && _react.createElement(TileTypeIndicator, null, leftIcon),
-        rightIcon && _react.createElement(TileQuickAction, null, rightIcon),
-      ),
-    _react.createElement(
-      TileContentArea,
-      null,
-      description && _react.createElement(TileDescription, null, description),
-      moreOptions && _react.createElement(TileMoreOptions, null, moreOptions),
-      metadata && _react.createElement(TileMetadata, null, metadata),
-      children,
-    ),
-    buttons && _react.createElement(TileButtons, null, buttons),
-  );
-});
-const Tile = Object.assign(TileComponent, {
-  Wrapper: TileWrapper,
-  ThumbnailArea: TileThumbnailArea,
-  ThumbnailPicture: TileThumbnailPicture,
-  QuickAction: TileQuickAction,
-  TypeIndicator: TileTypeIndicator,
-  BadgeContainer: TileBadgeContainer,
-  IconButton: TileIconButton,
-  Name: TileName,
-  NameIcon: TileNameIcon,
-  NameLabel: TileNameLabel,
-  Action: TileAction,
-  ContentArea: TileContentArea,
-  Description: TileDescription,
-  Metadata: TileMetadata,
-  MoreOptions: TileMoreOptions,
-  Buttons: TileButtons,
-});