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

package/esm/core/Toast/Toaster.js

@@ -3,130 +3,110 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { getContainer, getDocument } from '../utils/index.js';
-import { ToastWrapper } from './ToastWrapper.js';
-const TOASTS_CONTAINER_ID = 'iui-toasts-container';
-export default class Toaster {
-    constructor() {
-        this.toasts = [];
-        this.lastId = 0;
-        this.settings = {
-            order: 'descending',
-            placement: 'top',
-        };
-        this.toastsRef = React.createRef();
-        this.isInitialized = false;
-        // Create container on demand.
-        // Cannot do it in constructor, because SSG/SSR apps would fail.
-        this.asyncInit = async () => {
-            var _a, _b;
-            if (this.isInitialized) {
-                return;
-            }
-            const container = (_a = getContainer(TOASTS_CONTAINER_ID)) !== null && _a !== void 0 ? _a : (_b = getDocument()) === null || _b === void 0 ? void 0 : _b.body;
-            if (!container) {
-                return;
-            }
-            this.isInitialized = true;
-            const toastWrapper = React.createElement(ToastWrapper, { ref: this.toastsRef });
-            const _ReactDOM = ReactDOM; // eslint-disable-line @typescript-eslint/no-explicit-any
-            // v18 mode
-            if (_ReactDOM.createRoot) {
-                const _ReactDOMInternals = _ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-                // suppress warning about importing createRoot from react-dom/client
-                if (_ReactDOMInternals) {
-                    _ReactDOMInternals.usingClientEntryPoint = true;
-                }
-                const root = _ReactDOM.createRoot(container);
-                root.render(toastWrapper);
-                // revert suppression, not to influence users app
-                if (_ReactDOMInternals) {
-                    _ReactDOMInternals.usingClientEntryPoint = false;
-                }
-            }
-            else {
-                // v17 and before
-                ReactDOM.render(toastWrapper, container);
-            }
-        };
+import cx from 'classnames';
+import { Box, useSafeContext } from '../utils/index.js';
+import { Toast } from './Toast.js';
+// ----------------------------------------------------------------------------
+export const useToaster = () => {
+  const dispatch = useSafeContext(ToasterDispatchContext);
+  const showToast = React.useCallback(
+    (category) => (content, options) => {
+      const id = nextId();
+      dispatch({
+        type: 'add',
+        toast: { ...options, id, content, category },
+      });
+      return { close: () => dispatch({ type: 'remove', id }) };
+    },
+    [dispatch],
+  );
+  return {
+    positive: showToast('positive'),
+    informational: showToast('informational'),
+    negative: showToast('negative'),
+    warning: showToast('warning'),
+    closeAll: () => {
+      dispatch({ type: 'close-all' });
+    },
+    setSettings: (settings) => {
+      dispatch({ type: 'settings', settings });
+    },
+  };
+};
+// ----------------------------------------------------------------------------
+export const Toaster = () => {
+  const { toasts, settings } = useSafeContext(ToasterStateContext);
+  return React.createElement(
+    Box,
+    {
+      className: cx(`iui-toast-wrapper`, `iui-placement-${settings.placement}`),
+    },
+    toasts.map((toastProps) => {
+      return React.createElement(Toast, { key: toastProps.id, ...toastProps });
+    }),
+  );
+};
+// ----------------------------------------------------------------------------
+export const ToastProvider = ({ children }) => {
+  const [toasterState, dispatch] = React.useReducer(toastReducer, {
+    toasts: [],
+    settings: {
+      order: 'auto',
+      placement: 'top',
+    },
+  });
+  return React.createElement(
+    ToasterDispatchContext.Provider,
+    { value: dispatch },
+    React.createElement(
+      ToasterStateContext.Provider,
+      { value: toasterState },
+      children,
+    ),
+  );
+};
+const toastReducer = (state, action) => {
+  if (action.type === 'add') {
+    let order = state.settings.order;
+    if (order === 'auto') {
+      order = state.settings.placement.startsWith('top')
+        ? 'descending'
+        : 'ascending';
     }
-    /**
-     * Set global Toaster settings for toasts order and placement.
-     * Settings will be applied to new toasts on the page.
-     */
-    setSettings(newSettings) {
-        var _a, _b, _c;
-        (_a = newSettings.placement) !== null && _a !== void 0 ? _a : (newSettings.placement = this.settings.placement);
-        (_b = newSettings.order) !== null && _b !== void 0 ? _b : (newSettings.order = ((_c = newSettings.placement) === null || _c === void 0 ? void 0 : _c.startsWith('bottom'))
-            ? 'ascending'
-            : 'descending');
-        this.settings = newSettings;
-        this.asyncInit().then(() => {
-            var _a, _b;
-            (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setPlacement((_b = this.settings.placement) !== null && _b !== void 0 ? _b : 'top');
-        });
-    }
-    positive(content, options) {
-        return this.createToast(content, 'positive', options);
-    }
-    informational(content, options) {
-        return this.createToast(content, 'informational', options);
-    }
-    negative(content, options) {
-        return this.createToast(content, 'negative', options);
-    }
-    warning(content, options) {
-        return this.createToast(content, 'warning', options);
-    }
-    createToast(content, category, options) {
-        ++this.lastId;
-        const currentId = this.lastId;
-        this.toasts = [
-            ...(this.settings.order === 'ascending' ? this.toasts : []),
-            {
-                ...options,
-                content,
-                category,
-                onRemove: () => {
-                    var _a;
-                    this.removeToast(currentId);
-                    (_a = options === null || options === void 0 ? void 0 : options.onRemove) === null || _a === void 0 ? void 0 : _a.call(options);
-                },
-                id: currentId,
-                isVisible: true,
-            },
-            ...(this.settings.order === 'descending' ? this.toasts : []),
-        ];
-        this.updateView();
-        return { close: () => this.closeToast(currentId) };
-    }
-    removeToast(id) {
-        this.toasts = this.toasts.filter((toast) => toast.id !== id);
-        this.updateView();
-    }
-    updateView() {
-        this.asyncInit().then(() => {
-            var _a;
-            (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(this.toasts);
-        });
-    }
-    closeToast(toastId) {
-        this.toasts = this.toasts.map((toast) => {
-            return {
-                ...toast,
-                isVisible: toast.id !== toastId,
-            };
-        });
-        this.updateView();
-    }
-    closeAll() {
-        this.toasts = this.toasts.map((toast) => {
-            return {
-                ...toast,
-                isVisible: false,
-            };
-        });
-        this.updateView();
-    }
-}
+    return {
+      ...state,
+      toasts: [
+        ...(order === 'ascending' ? state.toasts : []),
+        action.toast,
+        ...(order === 'descending' ? state.toasts : []),
+      ],
+    };
+  }
+  if (action.type === 'remove') {
+    return {
+      ...state,
+      toasts: state.toasts.filter((toast) => toast.id !== action.id),
+    };
+  }
+  if (action.type === 'close-all') {
+    return {
+      ...state,
+      toasts: state.toasts.map((toast) => ({ ...toast, isVisible: false })),
+    };
+  }
+  if (action.type === 'settings') {
+    return { ...state, settings: { ...state.settings, ...action.settings } };
+  }
+  return state;
+};
+// ----------------------------------------------------------------------------
+export const ToasterStateContext = React.createContext(undefined);
+ToasterStateContext.displayName = 'ToasterStateContext';
+// ----------------------------------------------------------------------------
+const ToasterDispatchContext = React.createContext(undefined);
+ToasterDispatchContext.displayName = 'ToasterDispatchContext';
+// ----------------------------------------------------------------------------
+const nextId = (() => {
+  let count = 0;
+  return () => ++count;
+})();

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

@@ -1,4 +1 @@
-import Toaster from './Toaster.js';
-export type { ToastOptions } from './Toaster.js';
-declare const toaster: Toaster;
-export default toaster;
+export { useToaster } from './Toaster.js';

package/esm/core/Toast/index.js

@@ -2,6 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import Toaster from './Toaster.js';
-const toaster = new Toaster();
-export default toaster;
+export { useToaster } from './Toaster.js';

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toggle-switch.css';
-declare type ToggleSwitchProps = {
+type ToggleSwitchProps = {
     /**
      * Label for the toggle switch.
      */
@@ -11,11 +10,6 @@ declare type ToggleSwitchProps = {
      * @default 'right'
      */
     labelPosition?: 'left' | 'right';
-    /**
-     * Set focus on toggle.
-     * @default false
-     */
-    setFocus?: boolean;
 } & ({
     /**
      * Size of the toggle switch.

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toggle-switch.css';
 /**
  * A switch for turning on and off.
  * @example
@@ -25,28 +24,65 @@ import '@itwin/itwinui-css/css/toggle-switch.css';
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 export const ToggleSwitch = React.forwardRef((props, ref) => {
-    let icon;
-    if (props.size !== 'small') {
-        icon = props.icon;
-        props = { ...props };
-        delete props.icon;
-    }
-    const { disabled = false, labelPosition = 'right', label, setFocus = false, className, style, size = 'default', ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = useMergedRefs(inputElementRef, ref);
-    const WrapperComponent = label ? 'label' : 'div';
-    React.useEffect(() => {
-        if (inputElementRef.current && setFocus) {
-            inputElementRef.current.focus();
-        }
-    }, [setFocus]);
-    return (React.createElement(WrapperComponent, { className: cx('iui-toggle-switch-wrapper', {
-            'iui-disabled': disabled,
-            'iui-label-on-right': label && labelPosition === 'right',
-            'iui-label-on-left': label && labelPosition === 'left',
-        }, className), "data-iui-size": size, style: style },
-        React.createElement(Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
-        icon && size !== 'small' && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
-        label && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
+  let icon;
+  if (props.size !== 'small') {
+    icon = props.icon;
+    props = { ...props };
+    delete props.icon;
+  }
+  const {
+    disabled = false,
+    labelPosition = 'right',
+    label,
+    className,
+    style,
+    size = 'default',
+    ...rest
+  } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = useMergedRefs(inputElementRef, ref);
+  return React.createElement(
+    Box,
+    {
+      as: label ? 'label' : 'div',
+      className: cx(
+        'iui-toggle-switch-wrapper',
+        {
+          'iui-disabled': disabled,
+          'iui-label-on-right': label && labelPosition === 'right',
+          'iui-label-on-left': label && labelPosition === 'left',
+        },
+        className,
+      ),
+      'data-iui-size': size,
+      style: style,
+    },
+    React.createElement(Box, {
+      as: 'input',
+      className: 'iui-toggle-switch',
+      type: 'checkbox',
+      role: 'switch',
+      disabled: disabled,
+      ref: refs,
+      ...rest,
+    }),
+    icon &&
+      size !== 'small' &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          className: 'iui-toggle-switch-icon',
+          'aria-hidden': true,
+        },
+        icon,
+      ),
+    label &&
+      React.createElement(
+        Box,
+        { as: 'span', className: 'iui-toggle-switch-label' },
+        label,
+      ),
+  );
 });
 export default ToggleSwitch;

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

@@ -1,27 +1,93 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tooltip.css';
-export declare type TooltipProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
+type TooltipOptions = {
     /**
-     * Content of the tooltip.
+     * Placement of the Tooltip
+     * @default 'top'
      */
-    content: React.ReactNode;
+    placement?: Placement;
     /**
-     * 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.
+     * 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
+     * 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;
+    };
+    /**
+     * Sets reference point to user provided element.
+     * @example
+     * const [trigger, setTrigger] = React.useState(null);
+     * ...
+     * <Button ref={setTrigger} />
+     * <Tooltip content='tooltip text' reference={trigger} />
+     */
+    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'
      */
-    children?: JSX.Element;
-} & Omit<PopoverProps, 'className'> & Omit<CommonProps, 'title'>;
+    ariaStrategy?: 'description' | 'label' | 'none';
+    id?: string;
+};
 /**
  * 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} />
  */
-export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+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;

package/esm/core/Tooltip/Tooltip.js

@@ -4,21 +4,177 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Popover, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tooltip.css';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useClick,
+  useHover,
+  useFocus,
+  useDismiss,
+  useInteractions,
+  safePolygon,
+  size,
+  autoPlacement,
+  hide,
+  inline,
+  useDelayGroupContext,
+  useDelayGroup,
+} from '@floating-ui/react';
+import {
+  Box,
+  Portal,
+  cloneElementWithRef,
+  useControlledState,
+  useId,
+  useMergedRefs,
+} from '../utils/index.js';
+const useTooltip = (options = {}) => {
+  const uniqueId = useId();
+  const {
+    placement = 'top',
+    visible,
+    onVisibleChange,
+    middleware = { flip: true, shift: true },
+    autoUpdateOptions = {},
+    reference,
+    ariaStrategy = 'description',
+    id = uniqueId,
+    ...props
+  } = options;
+  const [open, onOpenChange] = useControlledState(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = useFloating({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
+    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),
+    ...(reference && { elements: { reference } }),
+  });
+  const ariaProps = React.useMemo(
+    () =>
+      ariaStrategy === 'description'
+        ? { 'aria-describedby': id }
+        : ariaStrategy === 'label'
+        ? { 'aria-labelledby': id }
+        : {},
+    [ariaStrategy, id],
+  );
+  const { delay } = useDelayGroupContext();
+  useDelayGroup(floating.context, { id: useId() });
+  const interactions = useInteractions([
+    useHover(floating.context, {
+      delay: delay ?? { open: 50, close: 250 },
+      handleClose: safePolygon({ buffer: -Infinity }),
+    }),
+    useFocus(floating.context),
+    useClick(floating.context),
+    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} />
  */
-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, forwardedRef) => {
+  const { content, children, portal = true, className, style, ...rest } = props;
+  const tooltip = useTooltip(rest);
+  return React.createElement(
+    React.Fragment,
+    null,
+    cloneElementWithRef(children, (children) => ({
+      ...tooltip.getReferenceProps(children.props),
+      ref: tooltip.refs.setReference,
+    })),
+    React.createElement(
+      Portal,
+      { portal: portal },
+      React.createElement(
+        Box,
+        {
+          className: cx('iui-tooltip', className),
+          ref: useMergedRefs(tooltip.refs.setFloating, forwardedRef),
+          style: { ...tooltip.floatingStyles, ...style },
+          ...tooltip.floatingProps,
+        },
+        content,
+      ),
+    ),
+  );
+});
 export default Tooltip;