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

package/esm/core/Tile/Tile.js

@@ -4,33 +4,356 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tile.css';
+import {
+  StatusIconMap,
+  SvgMore,
+  SvgNew,
+  SvgCheckmark,
+  LinkAction,
+  useSafeContext,
+  supportsHas,
+  polymorphic,
+  Box,
+} from '../utils/index.js';
 import { DropdownMenu } from '../DropdownMenu/index.js';
 import { IconButton } from '../Buttons/index.js';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 const TileContext = React.createContext(undefined);
-/**
- * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
- * Renders `a` element by default.
- * @example
- * <Tile
- *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
- * />
- */
-export const TileAction = React.forwardRef((props, forwardedRef) => {
-    const tileContext = useSafeContext(TileContext);
-    React.useEffect(() => {
-        if (!supportsHas()) {
-            tileContext.setActionable(true);
-        }
-    }, [tileContext]);
-    return React.createElement(LinkAction, { ref: forwardedRef, ...props });
+TileContext.displayName = 'TileContext';
+const TileWrapper = React.forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    status,
+    variant,
+    isNew,
+    isSelected,
+    isLoading,
+    isDisabled,
+    ...rest
+  } = props;
+  const [localActionable, setLocalActionable] = React.useState(false);
+  const isActionable = localActionable;
+  return React.createElement(
+    TileContext.Provider,
+    {
+      value: {
+        status,
+        variant,
+        isNew,
+        isSelected,
+        isLoading,
+        isActionable,
+        isDisabled,
+        setActionable: setLocalActionable,
+      },
+    },
+    React.createElement(Box, {
+      className: cx(
+        'iui-tile',
+        {
+          'iui-folder': variant === 'folder',
+          'iui-new': isNew,
+          'iui-selected': isSelected,
+          'iui-actionable': isActionable,
+          [`iui-${status}`]: !!status,
+          'iui-loading': isLoading,
+        },
+        className,
+      ),
+      'aria-disabled': isDisabled,
+      ref: forwardedRef,
+      ...rest,
+    }),
+  );
+});
+TileWrapper.displayName = 'Tile.Wrapper';
+// ----------------------------------------------------------------------------
+// Tile.Action component
+const TileAction = React.forwardRef((props, forwardedRef) => {
+  const { onClick, children, href, ...rest } = props;
+  const { setActionable, isDisabled } = useSafeContext(TileContext);
+  React.useEffect(() => {
+    if (!supportsHas()) {
+      setActionable(true);
+    }
+  }, [setActionable]);
+  return React.createElement(
+    LinkAction,
+    {
+      as: !!props.href ? 'a' : 'button',
+      href: href,
+      onClick: !isDisabled ? onClick : undefined,
+      'aria-disabled': isDisabled,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
+});
+TileAction.displayName = 'Tile.Action';
+// ----------------------------------------------------------------------------
+// Tile.ThumbnailArea component
+const TileThumbnailArea = polymorphic('iui-tile-thumbnail');
+TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
+const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
+  const { className, url, children, ...rest } = props;
+  if (url) {
+    return React.createElement(Box, {
+      className: cx('iui-tile-thumbnail-picture', className),
+      style: {
+        backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
+      },
+      ref: forwardedRef,
+      ...rest,
+    });
+  }
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-thumbnail-icon', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
+});
+TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
+// ----------------------------------------------------------------------------
+// Tile.QuickAction component
+const TileQuickAction = polymorphic('iui-tile-thumbnail-quick-action');
+TileQuickAction.displayName = 'Tile.QuickAction';
+// ----------------------------------------------------------------------------
+// Tile.TypeIndicator component
+const TileTypeIndicator = polymorphic('iui-tile-thumbnail-type-indicator');
+TileTypeIndicator.displayName = 'Tile.TypeIndicator';
+// ----------------------------------------------------------------------------
+// Tile.IconButton component
+const TileIconButton = React.forwardRef((props, forwardedRef) => {
+  const { className, children, ...rest } = props;
+  return React.createElement(
+    IconButton,
+    {
+      className: className,
+      styleType: 'borderless',
+      size: 'small',
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
+});
+TileIconButton.displayName = 'Tile.IconButton';
+// ----------------------------------------------------------------------------
+// Tile.BadgeContainer component
+const TileBadgeContainer = polymorphic('iui-tile-thumbnail-badge-container');
+TileBadgeContainer.displayName = 'Tile.BadgeContainer';
+const TileName = React.forwardRef((props, forwardedRef) => {
+  const { className, children, name, ...rest } = props;
+  return React.createElement(
+    Box,
+    { className: cx('iui-tile-name', className), ref: forwardedRef, ...rest },
+    children ?? name,
+  );
 });
+TileBadgeContainer.displayName = 'Tile.Name';
+// ----------------------------------------------------------------------------
+// Tile.NameIcon component
+const TileNameIcon = React.forwardRef((props, forwardedRef) => {
+  const { children, className, ...rest } = props;
+  const { status, isLoading, isSelected, isNew } = useSafeContext(TileContext);
+  const StatusIcon = !!status && StatusIconMap[status];
+  let icon;
+  if (StatusIcon) {
+    icon = React.createElement(StatusIcon, { 'aria-hidden': true });
+  }
+  if (isLoading) {
+    icon = React.createElement(ProgressRadial, {
+      size: 'x-small',
+      'aria-hidden': true,
+      indeterminate: true,
+    });
+  }
+  if (isSelected) {
+    icon = React.createElement(SvgCheckmark, { 'aria-hidden': true });
+  }
+  if (isNew) {
+    icon = React.createElement(SvgNew, { 'aria-hidden': true });
+  }
+  return children || icon
+    ? React.createElement(
+        Box,
+        {
+          className: cx('iui-tile-status-icon', className),
+          ref: forwardedRef,
+          ...rest,
+        },
+        children ?? icon,
+      )
+    : null;
+});
+TileNameIcon.displayName = 'Tile.NameIcon';
+// ----------------------------------------------------------------------------
+// Tile.NameLabel component
+const TileNameLabel = polymorphic.span('iui-tile-name-label');
+TileNameLabel.displayName = 'Tile.NameLabel';
+// ----------------------------------------------------------------------------
+// Tile.ContentArea component
+const TileContentArea = polymorphic('iui-tile-content');
+TileContentArea.displayName = 'Tile.ContentArea';
+// ----------------------------------------------------------------------------
+// Tile.Description component
+const TileDescription = polymorphic('iui-tile-description');
+TileDescription.displayName = 'Tile.Description';
+// ----------------------------------------------------------------------------
+// Tile.Metadata component
+const TileMetadata = polymorphic('iui-tile-metadata');
+TileMetadata.displayName = 'Tile.Metadata';
+const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
+  const { className, children = [], buttonProps, ...rest } = props;
+  const [isMenuVisible, setIsMenuVisible] = React.useState(false);
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      DropdownMenu,
+      {
+        onVisibleChange: setIsMenuVisible,
+        menuItems: (close) =>
+          children?.map((option) =>
+            React.cloneElement(option, {
+              onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+              },
+            }),
+          ),
+      },
+      React.createElement(
+        IconButton,
+        {
+          styleType: 'borderless',
+          size: 'small',
+          'aria-label': 'More options',
+          ...buttonProps,
+        },
+        React.createElement(SvgMore, null),
+      ),
+    ),
+  );
+});
+TileMoreOptions.displayName = 'Tile.MoreOptions';
+// ----------------------------------------------------------------------------
+// Tile.Buttons component
+const TileButtons = polymorphic('iui-tile-buttons');
+TileButtons.displayName = 'Tile.Buttons';
+const TileComponent = React.forwardRef((props, forwardedRef) => {
+  const {
+    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 ? onClick : undefined,
+                'aria-disabled': isDisabled,
+              },
+              name,
+            )
+          : name,
+      ),
+    ),
+    React.createElement(
+      TileThumbnailArea,
+      null,
+      typeof thumbnail !== 'string'
+        ? 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),
+  );
+});
+TileComponent.displayName = 'Tile';
 /**
- * Tile component that displays content and actions in a card-like format.
+ * 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
+ *  <Tile
  *  name='Tile name'
  *  description='Tile description that takes upto 3 lines'
  *  metadata={<TagContainer><Tag variant='basic'>Tag 1</Tag></TagContainer>}
@@ -44,86 +367,137 @@ export const TileAction = React.forwardRef((props, forwardedRef) => {
  *  isNew={false}
  * />
  */
-export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
-    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable: isActionableProp, status, isLoading = false, isDisabled = false, onClick, ...rest } = props;
-    const [isMenuVisible, setIsMenuVisible] = React.useState(false);
-    const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
-    const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
-    const [localActionable, setLocalActionable] = React.useState(isActionableProp);
-    const isActionable = isActionableProp !== null && isActionableProp !== void 0 ? isActionableProp : localActionable;
-    const tileName = (React.createElement(Box, { className: 'iui-tile-name' },
-        React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-        React.createElement(Box, { as: 'span', className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
-    return (React.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
-        React.createElement(Box, { className: cx('iui-tile', {
-                'iui-folder': variant === 'folder',
-                'iui-new': isNew,
-                'iui-selected': isSelected,
-                'iui-actionable': isActionable,
-                [`iui-${status}`]: !!status,
-                'iui-loading': isLoading,
-            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest },
-            variant !== 'folder' ? tileName : null,
-            thumbnail && (React.createElement(Box, { className: 'iui-tile-thumbnail' },
-                typeof thumbnail === 'string' ? (React.createElement(Box, { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
-                    className: 'iui-tile-thumbnail-picture',
-                })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
-                    className: cx('iui-thumbnail-icon', thumbnail.props.className),
-                })) : (thumbnail),
-                leftIcon &&
-                    React.cloneElement(leftIcon, {
-                        className: 'iui-tile-thumbnail-type-indicator',
-                        'data-iui-size': 'small',
-                    }),
-                rightIcon &&
-                    React.cloneElement(rightIcon, {
-                        className: 'iui-tile-thumbnail-quick-action',
-                        'data-iui-size': 'small',
-                    }),
-                badge && (React.createElement(Box, { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-            React.createElement(Box, { className: 'iui-tile-content' },
-                variant === 'folder' ? tileName : null,
-                description != undefined && (React.createElement(Box, { className: 'iui-tile-description' }, description)),
-                metadata != undefined && (React.createElement(Box, { className: 'iui-tile-metadata' }, metadata)),
-                moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
-                        onClick: (value) => {
-                            var _a, _b;
-                            close();
-                            (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-                        },
-                    })) },
-                    React.createElement(Box, { className: cx('iui-tile-more-options', {
-                            'iui-visible': isMenuVisible,
-                        }) },
-                        React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                            React.createElement(SvgMore, null))))),
-                children),
-            buttons && React.createElement(Box, { className: 'iui-tile-buttons' }, buttons))));
-}), {
-    /**
-     * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
-     * Renders `a` element by default.
-     * @example
-     * <Tile
-     *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
-     * />
-     */
-    Action: TileAction,
+export const Tile = Object.assign(TileComponent, {
+  /**
+   * Wrapper subcomponent for fully customisable Tile.
+   */
+  Wrapper: TileWrapper,
+  /**
+   * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
+   * @example
+   * <Tile.ThumbnailArea>
+   *    <Tile.ThumbnailPicture/>
+   *    <Tile.QuickAction/>
+   *    <Tile.TypeIndicator/>
+   *    <Tile.BadgeContainer/>
+   * </Tile.ThumbnailArea>
+   */
+  ThumbnailArea: TileThumbnailArea,
+  /**
+   * 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: TileThumbnailPicture,
+  /**
+   * `QuickAction` subcomponent shown on top left of the tile.
+   * Recommended to use an invisible `IconButton`.
+   */
+  QuickAction: TileQuickAction,
+  /**
+   * `TypeIndicator` subcomponent shown on top left of the tile.
+   * Recommended to use an invisible `IconButton`.
+   */
+  TypeIndicator: TileTypeIndicator,
+  /**
+   * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
+   */
+  BadgeContainer: TileBadgeContainer,
+  /**
+   * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
+   */
+  IconButton: TileIconButton,
+  /**
+   * `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
+   */
+  Name: TileName,
+  /**
+   * `NameIcon` next to name of the tile. Goes under <Tile.Name>
+   * @example
+   * <Tile.Wrapper>
+   *  <Tile.Name>
+   *    <Tile.NameIcon/>
+   *  </Tile.Name>
+   * </Tile.Wrapper>
+   */
+  NameIcon: TileNameIcon,
+  /*
+   * `NameLabel` of the tile
+   * @example
+   * <Tile.Wrapper>
+   *  <Tile.Name>
+   *    <Tile.NameLabel> Tile Name <Tile.NameLabel/>
+   *  </Tile.Name/>
+   * </Tile.Wrapper>
+   */
+  NameLabel: TileNameLabel,
+  /**
+   * 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: TileAction,
+  /**
+   * 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: TileContentArea,
+  /**
+   * Description text of the tile.
+   * Gets truncated if it can't fit in the tile.
+   */
+  Description: TileDescription,
+  /**
+   * 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: TileMetadata,
+  /**
+   * Dropdown menu containing `MenuItem`s.
+   */
+  MoreOptions: TileMoreOptions,
+  /**
+   * Upto two buttons shown at the bottom of the tile.
+   */
+  Buttons: TileButtons,
 });
-const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
-    const StatusIcon = !!status && StatusIconMap[status];
-    if (isLoading) {
-        return (React.createElement(ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
-    }
-    if (isSelected) {
-        return React.createElement(SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
-    }
-    if (isNew) {
-        return React.createElement(SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
-    }
-    if (StatusIcon) {
-        return React.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
-    }
-    return null;
-};
 export default Tile;

package/esm/core/TimePicker/TimePicker.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/time-picker.css';
-export declare type MeridiemType = 'AM' | 'PM';
-export declare type Precision = 'hours' | 'minutes' | 'seconds';
-export declare type TimePickerProps = {
+export type MeridiemType = 'AM' | 'PM';
+export type Precision = 'hours' | 'minutes' | 'seconds';
+export type TimePickerProps = {
     /**
      * Selected date. Only time is used from Date object.
      */