@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/cjs/core/Tooltip/Tooltip.js

@@ -1,53 +1,165 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Tooltip = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const react_1 = require('@floating-ui/react');
+const index_js_1 = require('../utils/index.js');
+const useTooltip = (options = {}) => {
+  const uniqueId = (0, index_js_1.useId)();
+  const {
+    placement = 'top',
+    visible,
+    onVisibleChange,
+    middleware = { flip: true, shift: true },
+    autoUpdateOptions = {},
+    reference,
+    ariaStrategy = 'description',
+    id = uniqueId,
+    ...props
+  } = options;
+  const [open, onOpenChange] = (0, index_js_1.useControlledState)(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = (0, react_1.useFloating)({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: (...args) =>
+      (0, react_1.autoUpdate)(...args, autoUpdateOptions),
+    middleware: [
+      middleware.offset !== undefined
+        ? (0, react_1.offset)(middleware.offset)
+        : (0, react_1.offset)(4),
+      middleware.flip && (0, react_1.flip)(),
+      middleware.shift && (0, react_1.shift)(),
+      middleware.size && (0, react_1.size)(),
+      middleware.autoPlacement && (0, react_1.autoPlacement)(),
+      middleware.inline && (0, react_1.inline)(),
+      middleware.hide && (0, react_1.hide)(),
+    ].filter(Boolean),
+    ...(reference && { elements: { reference } }),
+  });
+  const ariaProps = React.useMemo(
+    () =>
+      ariaStrategy === 'description'
+        ? { 'aria-describedby': id }
+        : ariaStrategy === 'label'
+        ? { 'aria-labelledby': id }
+        : {},
+    [ariaStrategy, id],
+  );
+  const { delay } = (0, react_1.useDelayGroupContext)();
+  (0, react_1.useDelayGroup)(floating.context, { id: (0, index_js_1.useId)() });
+  const interactions = (0, react_1.useInteractions)([
+    (0, react_1.useHover)(floating.context, {
+      delay: delay ?? { open: 50, close: 250 },
+      handleClose: (0, react_1.safePolygon)({ buffer: -Infinity }),
+    }),
+    (0, react_1.useFocus)(floating.context),
+    (0, react_1.useClick)(floating.context),
+    (0, react_1.useDismiss)(floating.context),
+  ]);
+  // Manually add attributes and event handlers to external reference element,
+  // because we cannot spread getReferenceProps onto it.
+  React.useEffect(() => {
+    if (!reference) {
+      return;
+    }
+    /** e.g. onPointerDown --> pointerdown */
+    const domEventName = (e) => e.toLowerCase().substring(2);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cleanupValues = {};
+    Object.entries({
+      ...ariaProps,
+      ...interactions.getReferenceProps(),
+    }).forEach(([key, value]) => {
+      if (typeof value === 'function') {
+        reference.addEventListener(domEventName(key), value);
+        cleanupValues[key] = value;
+      } else if (value) {
+        cleanupValues[key] = reference.getAttribute(key);
+        reference.setAttribute(key, value);
+      }
+    });
+    return () => {
+      Object.entries(cleanupValues).forEach(([key, value]) => {
+        if (typeof value === 'function') {
+          reference.removeEventListener(domEventName(key), value);
+        } else if (value) {
+          reference.setAttribute(key, value);
+        } else {
+          reference.removeAttribute(key);
+        }
+      });
+    };
+  }, [ariaProps, reference, interactions]);
+  const getReferenceProps = React.useCallback(
+    (userProps) => {
+      return interactions.getReferenceProps({ ...userProps, ...ariaProps });
+    },
+    [interactions, ariaProps],
+  );
+  const floatingProps = React.useMemo(
+    () =>
+      interactions.getFloatingProps({
+        hidden: !open,
+        'aria-hidden': 'true',
+        ...props,
+        id,
+      }),
+    [interactions, props, id, open],
+  );
+  return React.useMemo(
+    () => ({ getReferenceProps, floatingProps, ...floating }),
+    [getReferenceProps, floatingProps, floating],
+  );
+};
 /**
  * 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();
+ * const [trigger, setTrigger] = React.useState(null);
  * ...
- * <Button ref={buttonRef} />
- * <Tooltip content='tooltip text' reference={buttonRef} />
+ * <Button ref={setTrigger} />
+ * <Tooltip content='tooltip text' reference={trigger} />
  */
-const Tooltip = (props) => {
-    const { content, children, className, style, visible, ref, id, ...rest } = props;
-    return (React.createElement(index_js_1.Popover, { visible: visible, interactive: false, content: React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref, ...rest }, children && React.cloneElement(children, { title: undefined })));
-};
-exports.Tooltip = Tooltip;
+exports.Tooltip = React.forwardRef((props, forwardedRef) => {
+  const { content, children, portal = true, className, style, ...rest } = props;
+  const tooltip = useTooltip(rest);
+  return React.createElement(
+    React.Fragment,
+    null,
+    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      ...tooltip.getReferenceProps(children.props),
+      ref: tooltip.refs.setReference,
+    })),
+    React.createElement(
+      index_js_1.Portal,
+      { portal: portal },
+      React.createElement(
+        index_js_1.Box,
+        {
+          className: (0, classnames_1.default)('iui-tooltip', className),
+          ref: (0, index_js_1.useMergedRefs)(
+            tooltip.refs.setFloating,
+            forwardedRef,
+          ),
+          style: { ...tooltip.floatingStyles, ...style },
+          ...tooltip.floatingProps,
+        },
+        content,
+      ),
+    ),
+  );
+});
 exports.default = exports.Tooltip;

package/cjs/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 = {
+import { ListItem } from '../List/ListItem.js';
+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/cjs/core/TransferList/TransferList.js

@@ -1,110 +1,183 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.TransferListContext = exports.TransferList = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../List/index.js");
+const react_1 = tslib_1.__importDefault(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const List_js_1 = require('../List/List.js');
+const ListItem_js_1 = require('../List/ListItem.js');
+const Label_js_1 = require('../Label/Label.js');
 // ----------------------------------------------------------------------------
 // TransferListComponent
-const TransferListComponent = (0, index_js_1.polymorphic)('iui-transfer-list-wrapper');
+const TransferListComponent = (0, index_js_1.polymorphic)(
+  'iui-transfer-list-wrapper',
+);
 TransferListComponent.displayName = 'TransferList';
 const TransferListListboxWrapper = react_1.default.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    const uid = (0, index_js_1.useId)();
-    const [labelId, setLabelId] = react_1.default.useState(uid);
-    return (react_1.default.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-transfer-list-listbox-wrapper', className), ref: ref, ...rest },
-        react_1.default.createElement(exports.TransferListContext.Provider, { value: { labelId, setLabelId } }, children)));
+  const { className, children, ...rest } = props;
+  const uid = (0, index_js_1.useId)();
+  const [labelId, setLabelId] = react_1.default.useState(uid);
+  return react_1.default.createElement(
+    index_js_1.Box,
+    {
+      as: 'div',
+      className: (0, classnames_1.default)(
+        'iui-transfer-list-listbox-wrapper',
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    react_1.default.createElement(
+      exports.TransferListContext.Provider,
+      { value: { labelId, setLabelId } },
+      children,
+    ),
+  );
 });
 TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
 const TransferListListbox = react_1.default.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { labelId } = (0, index_js_1.useSafeContext)(exports.TransferListContext);
-    const [focusedIndex, setFocusedIndex] = react_1.default.useState();
-    const listRef = react_1.default.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(listRef, ref);
-    const getFocusableNodes = react_1.default.useCallback(() => {
-        const focusableItems = (0, index_js_1.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_1.default.useEffect(() => {
-        var _a;
-        const items = getFocusableNodes();
-        if (focusedIndex != null) {
-            (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-    }, [focusedIndex, getFocusableNodes]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
-            return;
-        }
-        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? 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_1.default.createElement(index_js_2.List, { className: (0, classnames_1.default)('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 } = (0, index_js_1.useSafeContext)(
+    exports.TransferListContext,
+  );
+  const [focusedIndex, setFocusedIndex] = react_1.default.useState();
+  const listRef = react_1.default.useRef(null);
+  const refs = (0, index_js_1.useMergedRefs)(listRef, ref);
+  const getFocusableNodes = react_1.default.useCallback(() => {
+    const focusableItems = (0, index_js_1.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_1.default.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_1.default.createElement(
+    List_js_1.List,
+    {
+      className: (0, classnames_1.default)(
+        '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_1.default.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_1.default.createElement(index_js_2.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_1.default.createElement(
+    ListItem_js_1.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_1.default.forwardRef((props, ref) => {
-    const { children, className, id, ...rest } = props;
-    const { labelId, setLabelId } = (0, index_js_1.useSafeContext)(exports.TransferListContext);
-    react_1.default.useEffect(() => {
-        if (id && id !== labelId) {
-            setLabelId(id);
-        }
-    }, [id, labelId, setLabelId]);
-    return (react_1.default.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-transfer-list-listbox-label', className), id: labelId, ref: ref, ...rest }, children));
+  const { children, id, ...rest } = props;
+  const { labelId, setLabelId } = (0, index_js_1.useSafeContext)(
+    exports.TransferListContext,
+  );
+  react_1.default.useEffect(() => {
+    if (id && id !== labelId) {
+      setLabelId(id);
+    }
+  }, [id, labelId, setLabelId]);
+  return react_1.default.createElement(
+    Label_js_1.Label,
+    { as: 'div', id: labelId, ref: ref, ...rest },
+    children,
+  );
 });
 TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
 // ----------------------------------------------------------------------------
 // TransferList.Toolbar component
-const TransferListToolbar = (0, index_js_1.polymorphic)('iui-transfer-list-toolbar', {
+const TransferListToolbar = (0, index_js_1.polymorphic)(
+  'iui-transfer-list-toolbar',
+  {
     role: 'toolbar',
-});
+  },
+);
 TransferListToolbar.displayName = 'TransferList.Toolbar';
 /**
  * The TransferList component is used to display a list within a box
@@ -123,26 +196,26 @@ TransferListToolbar.displayName = 'TransferList.Toolbar';
  * </TransferList>
  */
 exports.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,
 });
 exports.TransferListContext = react_1.default.createContext(undefined);
 exports.default = exports.TransferList;

package/cjs/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;