@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.5

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

@@ -1,6 +1,49 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
-export declare type TooltipProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type TooltipOptions = {
+    /**
+     * Placement of the Tooltip
+     * @default 'top'
+     */
+    placement?: Placement;
+    /**
+     * Property for manual visibility control
+     */
+    visible?: boolean;
+    /**
+     * autoUpdate options that recalculates position
+     * to ensure the floating element remains anchored
+     * to its reference element, such as when scrolling
+     * and resizing the screen
+     *
+     * https://floating-ui.com/docs/autoUpdate#options
+     */
+    autoUpdateOptions?: {
+        ancestorScroll?: boolean;
+        ancestorResize?: boolean;
+        elementResize?: boolean;
+        /**
+         * Use this if you want Tooltip to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Tooltip middleware options.
+     * https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        size?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
+    };
+};
+type TooltipOwnProps = {
     /**
      * Content of the tooltip.
      */
@@ -9,18 +52,35 @@ export declare type TooltipProps = {
      * 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?: JSX.Element;
-} & Omit<PopoverProps, 'className'> & Omit<CommonProps, 'title'>;
+    children?: React.ReactNode;
+    /**
+     * Element to portal tooltip to.
+     * Portals to ThemeProvider portalContainerRef by default.
+     * @default true;
+     */
+    portal?: boolean | {
+        to: HTMLElement;
+    };
+    /**
+     * Sets reference point to user provided element.
+     * @example
+     * const buttonRef = React.useRef();
+     * ...
+     * <Button ref={buttonRef} />
+     * <Tooltip content='tooltip text' reference={buttonRef} />
+     */
+    reference?: React.RefObject<HTMLElement>;
+};
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Uses [FloatingUI](https://floating-ui.com/).
  * @example
- * <Tooltip content='tooltip text' placement='top'><div>Hover here</div></Tooltip>
+ * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
  * const buttonRef = React.useRef();
  * ...
  * <Button ref={buttonRef} />
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
-export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+export declare const Tooltip: PolymorphicForwardRefComponent<"div", TooltipOwnProps & TooltipOptions>;
 export default Tooltip;

package/esm/core/Tooltip/Tooltip.js

@@ -4,20 +4,174 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Popover, Box } from '../utils/index.js';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useClick,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+  safePolygon,
+  size,
+  autoPlacement,
+  hide,
+  inline,
+} from '@floating-ui/react';
+import {
+  Box,
+  getDocument,
+  mergeRefs,
+  useGlobals,
+  useMergedRefs,
+} from '../utils/index.js';
+import ReactDOM from 'react-dom';
+const useTooltip = (options = {}) => {
+  const {
+    placement,
+    visible: controlledOpen,
+    middleware = {
+      flip: true,
+      shift: true,
+    },
+    autoUpdateOptions = {},
+  } = options;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setUncontrolledOpen,
+    whileElementsMounted: (referenceEl, floatingEl, update) =>
+      autoUpdate(referenceEl, floatingEl, update, {
+        animationFrame: autoUpdateOptions.animationFrame,
+        ancestorScroll: autoUpdateOptions.ancestorScroll,
+        ancestorResize: autoUpdateOptions.ancestorResize,
+        elementResize: autoUpdateOptions.elementResize,
+        layoutShift: autoUpdateOptions.layoutShift,
+      }),
+    middleware: [
+      middleware.offset !== undefined ? offset(middleware.offset) : offset(4),
+      middleware.flip && flip(),
+      middleware.shift && shift(),
+      middleware.size && size(),
+      middleware.autoPlacement && autoPlacement(),
+      middleware.inline && inline(),
+      middleware.hide && hide(),
+    ].filter(Boolean),
+  });
+  const context = data.context;
+  const hover = useHover(context, {
+    enabled: controlledOpen == null,
+    delay: {
+      open: 50,
+      close: 250,
+    },
+    handleClose: safePolygon({ buffer: -Infinity }),
+  });
+  const focus = useFocus(context, {
+    enabled: controlledOpen == null,
+  });
+  const click = useClick(context, {
+    enabled: controlledOpen == null,
+  });
+  const dismiss = useDismiss(context, {
+    enabled: controlledOpen == null,
+  });
+  const role = useRole(context, { role: 'tooltip' });
+  const interactions = useInteractions([click, hover, focus, dismiss, role]);
+  return React.useMemo(
+    () => ({
+      open,
+      setUncontrolledOpen,
+      ...interactions,
+      ...data,
+    }),
+    [open, interactions, data],
+  );
+};
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Uses [FloatingUI](https://floating-ui.com/).
  * @example
- * <Tooltip content='tooltip text' placement='top'><div>Hover here</div></Tooltip>
+ * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
  * const buttonRef = React.useRef();
  * ...
  * <Button ref={buttonRef} />
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
-export const Tooltip = (props) => {
-    const { content, children, className, style, visible, ref, id, ...rest } = props;
-    return (React.createElement(Popover, { visible: visible, interactive: false, content: React.createElement(Box, { className: cx('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref, ...rest }, children && React.cloneElement(children, { title: undefined })));
-};
+export const Tooltip = React.forwardRef((props, forwardRef) => {
+  const {
+    content,
+    children,
+    portal = true,
+    placement = 'top',
+    autoUpdateOptions,
+    middleware,
+    style,
+    className,
+    visible,
+    reference,
+    ...rest
+  } = props;
+  const tooltip = useTooltip({
+    placement,
+    visible,
+    autoUpdateOptions,
+    middleware,
+  });
+  const context = useGlobals();
+  React.useEffect(() => {
+    if (reference) {
+      tooltip.refs.setReference(reference.current);
+    }
+  }, [reference, tooltip.refs]);
+  const portalTo =
+    typeof portal !== 'boolean'
+      ? portal.to
+      : portal
+      ? context?.portalContainerRef?.current ?? getDocument()?.body
+      : null;
+  const contentBox = React.createElement(
+    Box,
+    {
+      className: cx('iui-tooltip', className),
+      ref: useMergedRefs(tooltip.refs.setFloating, forwardRef),
+      style: { ...tooltip.floatingStyles, ...style },
+      ...tooltip.getFloatingProps(),
+      ...rest,
+    },
+    content,
+  );
+  const childrenRef =
+    React.isValidElement(children) &&
+    mergeRefs(
+      tooltip.refs.setReference,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      children.ref,
+    );
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.isValidElement(children)
+      ? React.cloneElement(
+          children,
+          tooltip.getReferenceProps({
+            ref: childrenRef,
+            ...children.props,
+          }),
+        )
+      : null,
+    tooltip.open
+      ? portalTo
+        ? ReactDOM.createPortal(contentBox, portalTo)
+        : contentBox
+      : null,
+  );
+});
 export default Tooltip;

package/esm/core/TransferList/TransferList.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { ListItem } from '../List/index.js';
-declare type TransferListListboxWrapperOwnProps = {};
-declare type TransferListItemOwnProps = {
+type TransferListListboxWrapperOwnProps = {};
+type TransferListItemOwnProps = {
     /**
      * Callback fired when the the active state changes.
      */
     onActiveChange?: (value: boolean) => void;
 } & React.ComponentProps<typeof ListItem>;
-declare type TransferListListboxLabelOwnProps = {
+type TransferListListboxLabelOwnProps = {
     /**
      * Text label that is wrapped by `TransferList.ListboxLabel`
      */
@@ -30,7 +30,7 @@ declare type TransferListListboxLabelOwnProps = {
  *   </TransferList.ListboxWrapper>
  * </TransferList>
  */
-export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}> & {
+export declare const TransferList: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}> & {
     /**
      * 	TransferList listbox wrapper subcomponent
      */
@@ -38,7 +38,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList listbox subcomponent
      */
-    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
         ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
     }, "as"> & {
         as?: "ul" | undefined;
@@ -54,7 +54,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList toolbar subcomponent
      */
-    Toolbar: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Toolbar: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 };
 export declare const TransferListContext: React.Context<{
     /**

package/esm/core/TransferList/TransferList.js

@@ -4,99 +4,169 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { getFocusableElements, useMergedRefs, useId, useSafeContext, Box, polymorphic, } from '../utils/index.js';
+import {
+  getFocusableElements,
+  useMergedRefs,
+  useId,
+  useSafeContext,
+  Box,
+  polymorphic,
+} from '../utils/index.js';
 import { List, ListItem } from '../List/index.js';
 // ----------------------------------------------------------------------------
 // TransferListComponent
 const TransferListComponent = polymorphic('iui-transfer-list-wrapper');
 TransferListComponent.displayName = 'TransferList';
 const TransferListListboxWrapper = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    const uid = useId();
-    const [labelId, setLabelId] = React.useState(uid);
-    return (React.createElement(Box, { as: 'div', className: cx('iui-transfer-list-listbox-wrapper', className), ref: ref, ...rest },
-        React.createElement(TransferListContext.Provider, { value: { labelId, setLabelId } }, children)));
+  const { className, children, ...rest } = props;
+  const uid = useId();
+  const [labelId, setLabelId] = React.useState(uid);
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      className: cx('iui-transfer-list-listbox-wrapper', className),
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(
+      TransferListContext.Provider,
+      { value: { labelId, setLabelId } },
+      children,
+    ),
+  );
 });
 TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
 const TransferListListbox = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { labelId } = useSafeContext(TransferListContext);
-    const [focusedIndex, setFocusedIndex] = React.useState();
-    const listRef = React.useRef(null);
-    const refs = useMergedRefs(listRef, ref);
-    const getFocusableNodes = React.useCallback(() => {
-        const focusableItems = getFocusableElements(listRef.current);
-        // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
-        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
-    }, []);
-    React.useEffect(() => {
-        const items = getFocusableNodes();
-        if (focusedIndex != null) {
-            items?.[focusedIndex]?.focus();
-            return;
-        }
-    }, [focusedIndex, getFocusableNodes]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const items = getFocusableNodes();
-        if (!items?.length) {
-            return;
-        }
-        const currentIndex = focusedIndex ?? 0;
-        switch (event.key) {
-            case 'ArrowDown': {
-                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            case 'ArrowUp': {
-                setFocusedIndex(Math.max(currentIndex - 1, 0));
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    return (React.createElement(List, { className: cx('iui-transfer-list-listbox', className), onKeyDown: onKeyDown, role: 'listbox', "aria-multiselectable": true, "aria-labelledby": labelId, tabIndex: 0, ref: refs, ...rest }, children));
+  const { children, className, ...rest } = props;
+  const { labelId } = useSafeContext(TransferListContext);
+  const [focusedIndex, setFocusedIndex] = React.useState();
+  const listRef = React.useRef(null);
+  const refs = useMergedRefs(listRef, ref);
+  const getFocusableNodes = React.useCallback(() => {
+    const focusableItems = getFocusableElements(listRef.current);
+    // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
+    return focusableItems.filter(
+      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
+    );
+  }, []);
+  React.useEffect(() => {
+    const items = getFocusableNodes();
+    if (focusedIndex != null) {
+      items?.[focusedIndex]?.focus();
+      return;
+    }
+  }, [focusedIndex, getFocusableNodes]);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const items = getFocusableNodes();
+    if (!items?.length) {
+      return;
+    }
+    const currentIndex = focusedIndex ?? 0;
+    switch (event.key) {
+      case 'ArrowDown': {
+        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case 'ArrowUp': {
+        setFocusedIndex(Math.max(currentIndex - 1, 0));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  return React.createElement(
+    List,
+    {
+      className: cx('iui-transfer-list-listbox', className),
+      onKeyDown: onKeyDown,
+      role: 'listbox',
+      'aria-multiselectable': true,
+      'aria-labelledby': labelId,
+      tabIndex: 0,
+      ref: refs,
+      ...rest,
+    },
+    children,
+  );
 });
 TransferListListbox.displayName = 'TransferList.Listbox';
 const TransferListItem = React.forwardRef((props, ref) => {
-    const { actionable = true, disabled, onActiveChange, children, active, ...rest } = props;
-    const onClickEvents = () => actionable && onActiveChange && onActiveChange(!active);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        if (event.key === 'Enter' ||
-            event.key === ' ' ||
-            event.key === 'Spacebar') {
-            !disabled && onClickEvents();
-            event.preventDefault();
-        }
-    };
-    return (React.createElement(ListItem, { ref: ref, onClick: onClickEvents, onKeyDown: onKeyDown, active: active, actionable: actionable, tabIndex: -1, role: 'option', "aria-disabled": disabled ? 'true' : undefined, "aria-selected": active ? 'true' : undefined, disabled: disabled, ...rest }, children));
+  const {
+    actionable = true,
+    disabled,
+    onActiveChange,
+    children,
+    active,
+    ...rest
+  } = props;
+  const onClickEvents = () =>
+    actionable && onActiveChange && onActiveChange(!active);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (
+      event.key === 'Enter' ||
+      event.key === ' ' ||
+      event.key === 'Spacebar'
+    ) {
+      !disabled && onClickEvents();
+      event.preventDefault();
+    }
+  };
+  return React.createElement(
+    ListItem,
+    {
+      ref: ref,
+      onClick: onClickEvents,
+      onKeyDown: onKeyDown,
+      active: active,
+      actionable: actionable,
+      tabIndex: -1,
+      role: 'option',
+      'aria-disabled': disabled ? 'true' : undefined,
+      'aria-selected': active ? 'true' : undefined,
+      disabled: disabled,
+      ...rest,
+    },
+    children,
+  );
 });
 TransferListItem.displayName = 'TransferList.Item';
 const TransferListListboxLabel = React.forwardRef((props, ref) => {
-    const { children, className, id, ...rest } = props;
-    const { labelId, setLabelId } = useSafeContext(TransferListContext);
-    React.useEffect(() => {
-        if (id && id !== labelId) {
-            setLabelId(id);
-        }
-    }, [id, labelId, setLabelId]);
-    return (React.createElement(Box, { as: 'div', className: cx('iui-transfer-list-listbox-label', className), id: labelId, ref: ref, ...rest }, children));
+  const { children, className, id, ...rest } = props;
+  const { labelId, setLabelId } = useSafeContext(TransferListContext);
+  React.useEffect(() => {
+    if (id && id !== labelId) {
+      setLabelId(id);
+    }
+  }, [id, labelId, setLabelId]);
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      className: cx('iui-transfer-list-listbox-label', className),
+      id: labelId,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
 // ----------------------------------------------------------------------------
 // TransferList.Toolbar component
 const TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
-    role: 'toolbar',
+  role: 'toolbar',
 });
 TransferListToolbar.displayName = 'TransferList.Toolbar';
 /**
@@ -116,26 +186,26 @@ TransferListToolbar.displayName = 'TransferList.Toolbar';
  * </TransferList>
  */
 export const TransferList = Object.assign(TransferListComponent, {
-    /**
-     * 	TransferList listbox wrapper subcomponent
-     */
-    ListboxWrapper: TransferListListboxWrapper,
-    /**
-     * 	TransferList listbox subcomponent
-     */
-    Listbox: TransferListListbox,
-    /**
-     * 	TransferList item subcomponent
-     */
-    Item: TransferListItem,
-    /**
-     * 	TransferList listbox label subcomponent
-     */
-    ListboxLabel: TransferListListboxLabel,
-    /**
-     * 	TransferList toolbar subcomponent
-     */
-    Toolbar: TransferListToolbar,
+  /**
+   * 	TransferList listbox wrapper subcomponent
+   */
+  ListboxWrapper: TransferListListboxWrapper,
+  /**
+   * 	TransferList listbox subcomponent
+   */
+  Listbox: TransferListListbox,
+  /**
+   * 	TransferList item subcomponent
+   */
+  Item: TransferListItem,
+  /**
+   * 	TransferList listbox label subcomponent
+   */
+  ListboxLabel: TransferListListboxLabel,
+  /**
+   * 	TransferList toolbar subcomponent
+   */
+  Toolbar: TransferListToolbar,
 });
 export const TransferListContext = React.createContext(undefined);
 export default TransferList;

package/esm/core/Tree/Tree.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-export declare type NodeData<T> = {
+export type NodeData<T> = {
     /**
      * Array of the child nodes contained in the node.
      */
@@ -31,8 +31,8 @@ export declare type NodeData<T> = {
      */
     hasSubNodes: boolean;
 };
-export declare type NodeRenderProps<T> = Omit<NodeData<T>, 'subNodes'>;
-export declare type TreeProps<T> = {
+export type NodeRenderProps<T> = Omit<NodeData<T>, 'subNodes'>;
+export type TreeProps<T> = {
     /**
      * Render function that should return the node element.
      * Recommended to use `TreeNode` component.
@@ -127,5 +127,5 @@ export declare type TreeProps<T> = {
     ), [onNodeExpanded])}
   />
  */
-export declare const Tree: <T>(props: TreeProps<T>) => JSX.Element;
+export declare const Tree: <T>(props: TreeProps<T>) => React.JSX.Element;
 export default Tree;