@itwin/itwinui-react 3.0.0-dev.7 → 3.0.0-dev.9

package/esm/core/Tile/Tile.js

@@ -20,7 +20,7 @@ import { IconButton } from '../Buttons/index.js';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 const TileContext = React.createContext(undefined);
 TileContext.displayName = 'TileContext';
-const TileComponent = React.forwardRef((props, forwardedRef) => {
+const TileWrapper = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     status,
@@ -66,7 +66,7 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-TileComponent.displayName = 'Tile';
+TileWrapper.displayName = 'Tile.Wrapper';
 // ----------------------------------------------------------------------------
 // Tile.Action component
 const TileAction = React.forwardRef((props, forwardedRef) => {
@@ -212,32 +212,31 @@ const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
   const { className, children = [], buttonProps, ...rest } = props;
   const [isMenuVisible, setIsMenuVisible] = React.useState(false);
   return React.createElement(
-    DropdownMenu,
+    Box,
     {
-      onShow: React.useCallback(() => setIsMenuVisible(true), []),
-      onHide: React.useCallback(() => setIsMenuVisible(false), []),
-      menuItems: (close) =>
-        children?.map((option) =>
-          React.cloneElement(option, {
-            onClick: (value) => {
-              close();
-              option.props.onClick?.(value);
-            },
-          }),
-        ),
+      className: cx(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
     },
     React.createElement(
-      Box,
+      DropdownMenu,
       {
-        className: cx(
-          'iui-tile-more-options',
-          {
-            'iui-visible': isMenuVisible,
-          },
-          className,
-        ),
-        ref: forwardedRef,
-        ...rest,
+        onVisibleChange: setIsMenuVisible,
+        menuItems: (close) =>
+          children?.map((option) =>
+            React.cloneElement(option, {
+              onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+              },
+            }),
+          ),
       },
       React.createElement(
         IconButton,
@@ -257,10 +256,84 @@ 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 with customizable Thumbnail, Name, Content and Buttons subcomponents
  * @example
- * <Tile>
+ * <Tile.Wrapper>
  *    <Tile.ThumbnailArea>
  *      <Tile.ThumbnailPicture/>
  *      <Tile.Badge/>
@@ -270,23 +343,40 @@ TileButtons.displayName = 'Tile.Buttons';
  *    <Tile.Name>
  *      <Tile.NameIcon/>
  *      <Tile.NameLabel/>
- *    <Tile.Name/>
+ *    </Tile.Name>
  *    <Tile.ContentArea>
  *      <Tile.Description />
  *      <Tile.Metadata/>
  *      <Tile.MoreOptions/>
  *    </Tile.ContentArea>
  *    <Tile.Buttons/>
- * </Tile>
+ * </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 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/>
-   *    // or
-   *    <Tile.ThumbnailAvatar/>
    *    <Tile.QuickAction/>
    *    <Tile.TypeIndicator/>
    *    <Tile.BadgeContainer/>
@@ -296,14 +386,14 @@ export const Tile = Object.assign(TileComponent, {
   /**
    * Thumbnail image url, a custom component or an svg for thumbnail avatar.
    * @example
-   * <Tile>
+   * <Tile.Wrapper>
    *  // ...
    *  <Tile.ThumbnailArea>
    *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
    *  </Tile.ThumbnailArea>
-   * </Tile>
+   * </Tile.Wrapper>
    * or
-   * <Tile>
+   * <Tile.Wrapper>
    *  // ...
    *  <Tile.ThumbnailArea>
    *    <Tile.ThumbnailPicture>
@@ -340,21 +430,21 @@ export const Tile = Object.assign(TileComponent, {
   /**
    * `NameIcon` next to name of the tile. Goes under <Tile.Name>
    * @example
-   * <Tile>
+   * <Tile.Wrapper>
    *  <Tile.Name>
    *    <Tile.NameIcon/>
    *  </Tile.Name>
-   * <Tile/>
+   * </Tile.Wrapper>
    */
   NameIcon: TileNameIcon,
   /*
    * `NameLabel` of the tile
    * @example
-   * <Tile>
+   * <Tile.Wrapper>
    *  <Tile.Name>
    *    <Tile.NameLabel> Tile Name <Tile.NameLabel/>
    *  </Tile.Name/>
-   * <Tile/>
+   * </Tile.Wrapper>
    */
   NameLabel: TileNameLabel,
   /**
@@ -371,13 +461,13 @@ export const Tile = Object.assign(TileComponent, {
   /**
    * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
    * @example
-   * <Tile>
+   * <Tile.Wrapper>
    *  <Tile.ContentArea>
    *    <Tile.Description/>
    *    <Tile.Metadata/>
    *    <Tile.MoreOptions/>
    *  </Tile.ContentArea>
-   * </Tile>
+   * </Tile.Wrapper>
    */
   ContentArea: TileContentArea,
   /**

package/esm/core/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export type ToastProps = {
     /**
@@ -10,6 +10,13 @@ export type ToastProps = {
      * Content of the Toast message
      */
     content: React.ReactNode;
+    /**
+     * Passes props to toast and content
+     */
+    domProps?: {
+        toastProps?: React.ComponentProps<'div'>;
+        contentProps?: React.ComponentProps<'div'>;
+    };
     /**
      * Category of the Toast, which controls the border color, as well as the category icon.
      */
@@ -60,12 +67,13 @@ export type ToastProps = {
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 export declare const Toast: (props: ToastProps) => React.JSX.Element;
-export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove'> & {
+export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove' | 'domProps'> & {
     onClose?: () => void;
-} & CommonProps;
+    contentProps?: React.ComponentProps<'div'>;
+};
 /**
  * The presentational part of a toast, without any animation or logic.
  * @private
  */
-export declare const ToastPresentation: (props: ToastPresentationProps) => React.JSX.Element;
+export declare const ToastPresentation: PolymorphicForwardRefComponent<"div", ToastPresentationProps>;
 export default Toast;

package/esm/core/Toast/Toast.js

@@ -36,6 +36,7 @@ export const Toast = (props) => {
     hasCloseButton,
     onRemove,
     animateOutTo,
+    domProps,
   } = props;
   const closeTimeout = React.useRef(0);
   const { placement } = useSafeContext(ToasterStateContext).settings;
@@ -148,12 +149,15 @@ export const Toast = (props) => {
         'div',
         { ref: onRef },
         React.createElement(ToastPresentation, {
+          as: 'div',
           category: category,
           content: content,
           link: link,
           type: type,
           hasCloseButton: hasCloseButton,
           onClose: close,
+          ...domProps?.toastProps,
+          contentProps: domProps?.contentProps,
         }),
       ),
     ),
@@ -163,7 +167,7 @@ export const Toast = (props) => {
  * The presentational part of a toast, without any animation or logic.
  * @private
  */
-export const ToastPresentation = (props) => {
+export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
   const {
     content,
     category,
@@ -172,18 +176,31 @@ export const ToastPresentation = (props) => {
     hasCloseButton,
     onClose,
     className,
+    contentProps,
     ...rest
   } = props;
   const StatusIcon = StatusIconMap[category];
   return React.createElement(
     Box,
-    { className: cx(`iui-toast iui-${category}`, className), ...rest },
+    {
+      className: cx(`iui-toast iui-${category}`, className),
+      ref: forwardedRef,
+      ...rest,
+    },
     React.createElement(
       Box,
       { className: 'iui-status-area' },
       React.createElement(StatusIcon, { className: 'iui-icon' }),
     ),
-    React.createElement(Box, { className: 'iui-message' }, content),
+    React.createElement(
+      Box,
+      {
+        as: 'div',
+        ...contentProps,
+        className: cx('iui-message', contentProps?.className),
+      },
+      content,
+    ),
     link &&
       React.createElement(
         ButtonBase,
@@ -202,5 +219,5 @@ export const ToastPresentation = (props) => {
         React.createElement(SvgCloseSmall, null),
       ),
   );
-};
+});
 export default Toast;

package/esm/core/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Placement } from '@floating-ui/react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
 type TooltipOptions = {
     /**
      * Placement of the Tooltip
@@ -11,6 +11,11 @@ type TooltipOptions = {
      * Property for manual visibility control
      */
     visible?: boolean;
+    /**
+     * Callback invoked every time the tooltip visibility changes as a result
+     * of internal logic. Should be used alongside `visible` prop.
+     */
+    onVisibleChange?: (visible: boolean) => void;
     /**
      * autoUpdate options that recalculates position
      * to ensure the floating element remains anchored
@@ -42,34 +47,26 @@ type TooltipOptions = {
         hide?: boolean;
         inline?: boolean;
     };
-};
-type TooltipOwnProps = {
-    /**
-     * Content of the tooltip.
-     */
-    content: React.ReactNode;
-    /**
-     * Element to have tooltip on. Has to be a valid JSX element and needs to forward its ref.
-     * If not specified, the `reference` prop should be used instead.
-     */
-    children?: React.ReactNode;
-    /**
-     * Element to portal tooltip to.
-     * Portals to ThemeProvider portalContainer by default.
-     * @default true;
-     */
-    portal?: boolean | {
-        to: HTMLElement;
-    };
     /**
      * Sets reference point to user provided element.
      * @example
-     * const buttonRef = React.useRef();
+     * const [trigger, setTrigger] = React.useState(null);
      * ...
-     * <Button ref={buttonRef} />
-     * <Tooltip content='tooltip text' reference={buttonRef} />
+     * <Button ref={setTrigger} />
+     * <Tooltip content='tooltip text' reference={trigger} />
      */
-    reference?: React.RefObject<HTMLElement>;
+    reference?: HTMLElement | null;
+    /**
+     * By default, the tooltip will be associated with the reference element
+     * using `aria-describedby`.
+     *
+     * Pass "label" if you want to use `aria-labelledby` instead, or pass "none"
+     * if you don't want any association.
+     *
+     * @default 'description'
+     */
+    ariaStrategy?: 'description' | 'label' | 'none';
+    id?: string;
 };
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
@@ -77,10 +74,20 @@ type TooltipOwnProps = {
  * @example
  * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
- * const buttonRef = React.useRef();
+ * const [trigger, setTrigger] = React.useState(null);
  * ...
- * <Button ref={buttonRef} />
- * <Tooltip content='tooltip text' reference={buttonRef} />
+ * <Button ref={setTrigger} />
+ * <Tooltip content='tooltip text' reference={trigger} />
  */
-export declare const Tooltip: PolymorphicForwardRefComponent<"div", TooltipOwnProps & TooltipOptions>;
+export declare const Tooltip: PolymorphicForwardRefComponent<"div", {
+    /**
+     * Content of the tooltip.
+     */
+    content: React.ReactNode;
+    /**
+     * Element to have tooltip on. Has to be a valid JSX element and needs to forward its ref.
+     * If not specified, the `reference` prop should be used instead.
+     */
+    children?: React.ReactNode;
+} & PortalProps & TooltipOptions>;
 export default Tooltip;