@itwin/itwinui-react 3.0.0-dev.6 → 3.0.0-dev.8

package/esm/core/Toast/Toast.js

@@ -11,6 +11,7 @@ import {
   SvgCloseSmall,
   Box,
   useSafeContext,
+  ButtonBase,
 } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 import { ToasterStateContext } from './Toaster.js';
@@ -35,6 +36,7 @@ export const Toast = (props) => {
     hasCloseButton,
     onRemove,
     animateOutTo,
+    domProps,
   } = props;
   const closeTimeout = React.useRef(0);
   const { placement } = useSafeContext(ToasterStateContext).settings;
@@ -46,9 +48,9 @@ export const Toast = (props) => {
   const [margin, setMargin] = React.useState(0);
   const marginStyle = () => {
     if (placementPosition === 'top') {
-      return { marginBottom: margin };
+      return { marginBlockEnd: margin };
     }
-    return { marginTop: margin };
+    return { marginBlockStart: margin };
   };
   React.useEffect(() => {
     if (type === 'temporary') {
@@ -147,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,
         }),
       ),
     ),
@@ -162,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,
@@ -171,27 +176,35 @@ 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(
-        Box,
-        {
-          as: 'button',
-          className: 'iui-toast-anchor',
-          ...link,
-          title: undefined,
-        },
+        ButtonBase,
+        { className: 'iui-toast-anchor', ...link, title: undefined },
         link.title,
       ),
     (type === 'persisting' || hasCloseButton) &&
@@ -206,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 portalContainerRef 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;

package/esm/core/Tooltip/Tooltip.js

@@ -14,46 +14,46 @@ import {
   useHover,
   useFocus,
   useDismiss,
-  useRole,
   useInteractions,
   safePolygon,
   size,
   autoPlacement,
   hide,
   inline,
+  useDelayGroupContext,
+  useDelayGroup,
 } from '@floating-ui/react';
 import {
   Box,
-  getDocument,
-  mergeRefs,
-  useGlobals,
+  Portal,
+  cloneElementWithRef,
+  useControlledState,
+  useId,
   useMergedRefs,
 } from '../utils/index.js';
-import ReactDOM from 'react-dom';
 const useTooltip = (options = {}) => {
+  const uniqueId = useId();
   const {
-    placement,
-    visible: controlledOpen,
-    middleware = {
-      flip: true,
-      shift: true,
-    },
+    placement = 'top',
+    visible,
+    onVisibleChange,
+    middleware = { flip: true, shift: true },
     autoUpdateOptions = {},
+    reference,
+    ariaStrategy = 'description',
+    id = uniqueId,
+    ...props
   } = options;
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
-  const open = controlledOpen ?? uncontrolledOpen;
-  const data = useFloating({
+  const [open, onOpenChange] = useControlledState(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = 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,
-      }),
+    onOpenChange,
+    whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
     middleware: [
       middleware.offset !== undefined ? offset(middleware.offset) : offset(4),
       middleware.flip && flip(),
@@ -63,35 +63,81 @@ const useTooltip = (options = {}) => {
       middleware.inline && inline(),
       middleware.hide && hide(),
     ].filter(Boolean),
+    ...(reference && { elements: { reference } }),
   });
-  const context = data.context;
-  const hover = useHover(context, {
-    enabled: controlledOpen == null,
-    delay: {
-      open: 50,
-      close: 250,
+  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 });
     },
-    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]);
+    [interactions, ariaProps],
+  );
+  const floatingProps = React.useMemo(
+    () =>
+      interactions.getFloatingProps({
+        hidden: !open,
+        'aria-hidden': 'true',
+        ...props,
+        id,
+      }),
+    [interactions, props, id, open],
+  );
   return React.useMemo(
-    () => ({
-      open,
-      setUncontrolledOpen,
-      ...interactions,
-      ...data,
-    }),
-    [open, interactions, data],
+    () => ({ getReferenceProps, floatingProps, ...floating }),
+    [getReferenceProps, floatingProps, floating],
   );
 };
 /**
@@ -100,78 +146,35 @@ const useTooltip = (options = {}) => {
  * @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 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,
-    );
+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,
-    React.isValidElement(children)
-      ? React.cloneElement(
-          children,
-          tooltip.getReferenceProps({
-            ref: childrenRef,
-            ...children.props,
-          }),
-        )
-      : null,
-    tooltip.open
-      ? portalTo
-        ? ReactDOM.createPortal(contentBox, portalTo)
-        : contentBox
-      : 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;

package/esm/core/TransferList/TransferList.js

@@ -13,6 +13,7 @@ import {
   polymorphic,
 } from '../utils/index.js';
 import { List, ListItem } from '../List/index.js';
+import { Label } from '../Label/index.js';
 // ----------------------------------------------------------------------------
 // TransferListComponent
 const TransferListComponent = polymorphic('iui-transfer-list-wrapper');
@@ -143,7 +144,7 @@ const TransferListItem = React.forwardRef((props, ref) => {
 });
 TransferListItem.displayName = 'TransferList.Item';
 const TransferListListboxLabel = React.forwardRef((props, ref) => {
-  const { children, className, id, ...rest } = props;
+  const { children, id, ...rest } = props;
   const { labelId, setLabelId } = useSafeContext(TransferListContext);
   React.useEffect(() => {
     if (id && id !== labelId) {
@@ -151,14 +152,8 @@ const TransferListListboxLabel = React.forwardRef((props, ref) => {
     }
   }, [id, labelId, setLabelId]);
   return React.createElement(
-    Box,
-    {
-      as: 'div',
-      className: cx('iui-transfer-list-listbox-label', className),
-      id: labelId,
-      ref: ref,
-      ...rest,
-    },
+    Label,
+    { as: 'div', id: labelId, ref: ref, ...rest },
     children,
   );
 });

package/esm/core/Tree/TreeNode.js

@@ -221,7 +221,7 @@ export const TreeNode = (props) => {
         as: 'ul',
         className: 'iui-sub-tree',
         role: 'group',
-        'aria-owns': subNodeIds.join(','),
+        'aria-owns': subNodeIds.join(' '),
       }),
   );
 };

package/esm/core/index.d.ts

@@ -26,6 +26,8 @@ export { TransferList } from './TransferList/index.js';
 export { Tabs, Tab } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
+export { InputWithDecorations } from './InputWithDecorations/InputWithDecorations.js';
+export { InputGrid } from './InputGrid/InputGrid.js';
 export { Label } from './Label/index.js';
 export { LabeledInput } from './LabeledInput/index.js';
 export { InputGroup } from './InputGroup/index.js';

package/esm/core/index.js

@@ -56,6 +56,8 @@ export {
   InformationPanelContent,
 } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
+export { InputWithDecorations } from './InputWithDecorations/InputWithDecorations.js';
+export { InputGrid } from './InputGrid/InputGrid.js';
 export { Label } from './Label/index.js';
 export { LabeledInput } from './LabeledInput/index.js';
 export { InputGroup } from './InputGroup/index.js';

package/esm/core/utils/components/ButtonBase.d.ts

@@ -0,0 +1,14 @@
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export declare const ButtonBase: PolymorphicForwardRefComponent<"button", ButtonBaseProps>;
+type ButtonBaseProps = {
+    /**
+     * Custom `disabled` prop that keeps the button focusable, prevents
+     * clicks, applied disabled styling, and adds `aria-disabled`.
+     */
+    disabled?: boolean;
+    /**
+     * Built-in html `disabled` attribute
+     */
+    htmlDisabled?: boolean;
+};
+export {};

package/esm/core/utils/components/ButtonBase.js

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from './Box.js';
+import { useIsClient } from '../hooks/useIsClient.js';
+export const ButtonBase = React.forwardRef((props, forwardedRef) => {
+  const {
+    as: asProp = 'button',
+    disabled: disabledProp,
+    htmlDisabled,
+    ...rest
+  } = props;
+  const isClient = useIsClient();
+  const ariaDisabled =
+    disabledProp &&
+    !htmlDisabled && // htmlDisabled prop takes preference
+    isClient && // progressively enhance after first render
+    asProp === 'button'; // ignore if not button, e.g. links
+  const handleIfEnabled = (handler) => (e) => {
+    if (disabledProp) {
+      return;
+    }
+    handler?.(e);
+  };
+  return React.createElement(Box, {
+    as: asProp,
+    type: asProp === 'button' ? 'button' : undefined,
+    ref: forwardedRef,
+    'aria-disabled': ariaDisabled ? 'true' : undefined,
+    'data-iui-disabled': disabledProp ? 'true' : undefined,
+    disabled: htmlDisabled ?? (!isClient && disabledProp) ? true : undefined,
+    ...rest,
+    className: cx('iui-button-base', props.className),
+    onClick: handleIfEnabled(props.onClick),
+    onPointerDown: handleIfEnabled(props.onPointerDown),
+    onPointerUp: handleIfEnabled(props.onPointerUp),
+  });
+});
+ButtonBase.displayName = 'ButtonBase';

package/esm/core/utils/components/Icon.d.ts

@@ -24,6 +24,11 @@ export type IconProps = {
      * @default 'default'
      */
     fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
+    /**
+     * Option to add padding to the icon.
+     * @default false
+     */
+    padded?: boolean;
 } & React.ComponentPropsWithoutRef<'span'>;
 /**
  * A utility component to provide size and fill to svgs.

package/esm/core/utils/components/Icon.js

@@ -32,12 +32,19 @@ const getSizeValue = (size) => {
  * </Icon>
  */
 export const Icon = React.forwardRef((props, ref) => {
-  const { size = 'medium', fill = 'default', className, ...rest } = props;
+  const {
+    size = 'medium',
+    fill = 'default',
+    className,
+    padded = false,
+    ...rest
+  } = props;
   return React.createElement(Box, {
     as: 'span',
     className: cx('iui-svg-icon', className),
     'data-iui-icon-size': getSizeValue(size),
     'data-iui-icon-color': fill,
+    'data-iui-padded': padded ? 'true' : undefined,
     ref: ref,
     ...rest,
   });

package/esm/core/utils/components/InputContainer.d.ts

@@ -8,7 +8,6 @@ export type InputContainerProps<T extends React.ElementType = 'div'> = {
     message?: React.ReactNode;
     icon?: JSX.Element;
     isLabelInline?: boolean;
-    isIconInline?: boolean;
     statusMessage?: React.ReactNode;
     inputId?: string;
     labelId?: string;