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

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?.portalContainer || 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/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';
@@ -63,4 +65,4 @@ export { Anchor, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/inde
 export { Stepper, WorkflowDiagram } from './Stepper/index.js';
 export type { StepProperties, StepperLocalization } from './Stepper/index.js';
 export { SearchBox } from './SearchBox/index.js';
-export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';
+export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, Popover, } from './utils/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';
@@ -126,4 +128,5 @@ export {
   Flex,
   VisuallyHidden,
   Divider,
+  Popover,
 } from './utils/index.js';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export type InputContainerProps<T extends React.ElementType = 'div'> = {
-    as?: T;
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export type InputContainerProps = {
     label?: React.ReactNode;
     disabled?: boolean;
     required?: boolean;
@@ -8,13 +8,12 @@ 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;
-} & React.ComponentPropsWithoutRef<T>;
+};
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => React.JSX.Element;
+export declare const InputContainer: PolymorphicForwardRefComponent<"div", InputContainerProps>;

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

@@ -5,11 +5,13 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
+import { Label } from '../../Label/index.js';
+import { StatusMessage } from '../../StatusMessage/index.js';
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export const InputContainer = (props) => {
+export const InputContainer = React.forwardRef((props, forwardedRef) => {
   const {
     label,
     disabled,
@@ -18,7 +20,6 @@ export const InputContainer = (props) => {
     message,
     icon,
     isLabelInline,
-    isIconInline,
     children,
     className,
     style,
@@ -30,29 +31,24 @@ export const InputContainer = (props) => {
   return React.createElement(
     Box,
     {
-      className: cx(
-        'iui-input-container',
-        {
-          'iui-disabled': disabled,
-          [`iui-${status}`]: !!status,
-          'iui-inline-label': isLabelInline,
-          'iui-inline-icon': isIconInline,
-          'iui-with-message':
-            (!!message || !!icon || !!statusMessage) && !isLabelInline,
-        },
-        className,
-      ),
+      className: cx('iui-input-grid', className),
+      'data-iui-status': status,
+      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
       style: style,
+      ref: forwardedRef,
       ...rest,
     },
     label &&
       React.createElement(
-        Box,
+        Label,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           as: inputId && props.as !== 'label' ? 'label' : 'div',
-          className: cx('iui-label', {
-            'iui-required': required,
-          }),
+          required: required,
+          disabled: disabled,
           htmlFor: inputId,
           id: labelId,
         },
@@ -61,18 +57,11 @@ export const InputContainer = (props) => {
     children,
     statusMessage
       ? statusMessage
-      : React.createElement(
-          React.Fragment,
-          null,
-          icon &&
-            React.createElement(
-              Box,
-              { as: 'span', className: 'iui-input-icon', 'aria-hidden': true },
-              icon,
-            ),
-          message &&
-            !isLabelInline &&
-            React.createElement(Box, { className: 'iui-message' }, message),
-        ),
+      : message &&
+          React.createElement(
+            StatusMessage,
+            { startIcon: icon, status: status },
+            message,
+          ),
   );
-};
+});

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

@@ -2,6 +2,7 @@ import type { PolymorphicForwardRefComponent } from '../props.js';
 export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
+    size?: 'small' | 'large';
 };
 /**
  * Utility component for input container with display flex abilities.

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

@@ -10,12 +10,14 @@ import { Box } from './Box.js';
  * @private
  */
 export const InputFlexContainer = React.forwardRef((props, ref) => {
-  const { isDisabled, status, children, className, style, ...rest } = props;
+  const { isDisabled, status, children, className, size, style, ...rest } =
+    props;
   return React.createElement(
     Box,
     {
       className: cx('iui-input-flex-container', className),
       'data-iui-status': status,
+      'data-iui-size': size,
       'data-iui-disabled': isDisabled ? 'true' : undefined,
       ref: ref,
       style: style,

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

@@ -1,39 +1,125 @@
 import * as React from 'react';
-import type { TippyProps } from '@tippyjs/react';
-import type { Placement, Instance } from 'tippy.js';
-export type PopoverInstance = Instance;
-export type PopoverProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../index.js';
+import type { PortalProps } from './Portal.js';
+type PopoverOptions = {
+    /**
+     * Placement of the popover content.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
     /**
      * Controlled flag for whether the popover is visible.
      */
     visible?: boolean;
     /**
-     * Determines the events that cause the popover to show.
-     * Should not be used when `visible` is set.
-     * @see [tippy.js trigger prop](https://atomiks.github.io/tippyjs/v6/all-props/#trigger)
+     * Callback invoked every time the popover visibility changes as a result
+     * of internal logic. Should be used alongside `visible` prop.
      */
-    trigger?: string;
+    onVisibleChange?: (visible: boolean) => void;
     /**
-     * Placement of the popover content.
-     * @default 'bottom-start'
-     * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
+     * If true, the popover will close when clicking outside it.
      */
-    placement?: Placement;
-} & Omit<TippyProps, 'placement' | 'trigger' | 'visible'>;
-/**
- * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
- * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
- * @private
- */
-export declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React.RefAttributes<unknown>>;
-/**
- * Plugin to hide Popover when either Esc key is pressed,
- * or when the content inside is not tabbable and Tab key is pressed.
- */
-export declare const hideOnEscOrTab: {
-    fn(instance: Instance): {
-        onShow(): void;
-        onHide(): void;
+    closeOnOutsideClick?: boolean;
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: boolean;
+};
+type PopoverInternalProps = {
+    /**
+     * 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 popover to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Middleware options.
+     *
+     * @see https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
     };
+    /**
+     * By default, the popover will only open on click.
+     * `hover` and `focus` can be manually specified as triggers.
+     */
+    trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
+    role?: 'dialog' | 'menu' | 'listbox';
+};
+export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null; /**
+         * Middleware options.
+         *
+         * @see https://floating-ui.com/docs/offset
+         */
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    open: boolean | undefined;
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };
+type PopoverPublicProps = {
+    content?: React.ReactNode;
+    children?: React.ReactNode;
+    applyBackground?: boolean;
+} & PortalProps & PopoverOptions;
+/**
+ * A utility component to help with positioning of floating content.
+ * Built on top of [`floating-ui`](https://floating-ui.com/)
+ */
+export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
 export default Popover;