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

package/cjs/core/Tooltip/Tooltip.js

@@ -10,31 +10,30 @@ 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 react_dom_1 = tslib_1.__importDefault(require('react-dom'));
 const useTooltip = (options = {}) => {
+  const uniqueId = (0, index_js_1.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 = (0, react_1.useFloating)({
+  const [open, onOpenChange] = (0, index_js_1.useControlledState)(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = (0, react_1.useFloating)({
     placement,
     open,
-    onOpenChange: setUncontrolledOpen,
-    whileElementsMounted: (referenceEl, floatingEl, update) =>
-      (0, react_1.autoUpdate)(referenceEl, floatingEl, update, {
-        animationFrame: autoUpdateOptions.animationFrame,
-        ancestorScroll: autoUpdateOptions.ancestorScroll,
-        ancestorResize: autoUpdateOptions.ancestorResize,
-        elementResize: autoUpdateOptions.elementResize,
-        layoutShift: autoUpdateOptions.layoutShift,
-      }),
+    onOpenChange,
+    whileElementsMounted: (...args) =>
+      (0, react_1.autoUpdate)(...args, autoUpdateOptions),
     middleware: [
       middleware.offset !== undefined
         ? (0, react_1.offset)(middleware.offset)
@@ -46,41 +45,81 @@ const useTooltip = (options = {}) => {
       middleware.inline && (0, react_1.inline)(),
       middleware.hide && (0, react_1.hide)(),
     ].filter(Boolean),
+    ...(reference && { elements: { reference } }),
   });
-  const context = data.context;
-  const hover = (0, react_1.useHover)(context, {
-    enabled: controlledOpen == null,
-    delay: {
-      open: 50,
-      close: 250,
-    },
-    handleClose: (0, react_1.safePolygon)({ buffer: -Infinity }),
-  });
-  const focus = (0, react_1.useFocus)(context, {
-    enabled: controlledOpen == null,
-  });
-  const click = (0, react_1.useClick)(context, {
-    enabled: controlledOpen == null,
-  });
-  const dismiss = (0, react_1.useDismiss)(context, {
-    enabled: controlledOpen == null,
-  });
-  const role = (0, react_1.useRole)(context, { role: 'tooltip' });
+  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)([
-    click,
-    hover,
-    focus,
-    dismiss,
-    role,
+    (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(
-    () => ({
-      open,
-      setUncontrolledOpen,
-      ...interactions,
-      ...data,
-    }),
-    [open, interactions, data],
+    () => ({ getReferenceProps, floatingProps, ...floating }),
+    [getReferenceProps, floatingProps, floating],
   );
 };
 /**
@@ -89,79 +128,38 @@ 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} />
  */
-exports.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 = (0, index_js_1.useGlobals)();
-  React.useEffect(() => {
-    if (reference) {
-      tooltip.refs.setReference(reference.current);
-    }
-  }, [reference, tooltip.refs]);
-  const portalTo =
-    typeof portal !== 'boolean'
-      ? portal.to
-      : portal
-      ? context?.portalContainerRef?.current ??
-        (0, index_js_1.getDocument)()?.body
-      : null;
-  const contentBox = React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-tooltip', className),
-      ref: (0, index_js_1.useMergedRefs)(tooltip.refs.setFloating, forwardRef),
-      style: { ...tooltip.floatingStyles, ...style },
-      ...tooltip.getFloatingProps(),
-      ...rest,
-    },
-    content,
-  );
-  const childrenRef =
-    React.isValidElement(children) &&
-    (0, index_js_1.mergeRefs)(
-      tooltip.refs.setReference,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      children.ref,
-    );
+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,
-    React.isValidElement(children)
-      ? React.cloneElement(
-          children,
-          tooltip.getReferenceProps({
-            ref: childrenRef,
-            ...children.props,
-          }),
-        )
-      : null,
-    tooltip.open
-      ? portalTo
-        ? react_dom_1.default.createPortal(contentBox, portalTo)
-        : contentBox
-      : 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.js

@@ -10,6 +10,7 @@ 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 index_js_2 = require('../List/index.js');
+const index_js_3 = require('../Label/index.js');
 // ----------------------------------------------------------------------------
 // TransferListComponent
 const TransferListComponent = (0, index_js_1.polymorphic)(
@@ -152,7 +153,7 @@ const TransferListItem = react_1.default.forwardRef((props, ref) => {
 });
 TransferListItem.displayName = 'TransferList.Item';
 const TransferListListboxLabel = react_1.default.forwardRef((props, ref) => {
-  const { children, className, id, ...rest } = props;
+  const { children, id, ...rest } = props;
   const { labelId, setLabelId } = (0, index_js_1.useSafeContext)(
     exports.TransferListContext,
   );
@@ -162,17 +163,8 @@ const TransferListListboxLabel = react_1.default.forwardRef((props, ref) => {
     }
   }, [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,
-    },
+    index_js_3.Label,
+    { as: 'div', id: labelId, ref: ref, ...rest },
     children,
   );
 });

package/cjs/core/Tree/TreeNode.js

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

package/cjs/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/cjs/core/index.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.Label =
+exports.InputWithDecorations =
   exports.Input =
   exports.InformationPanelContent =
   exports.InformationPanelBody =
@@ -51,9 +51,7 @@ exports.Label =
   exports.Avatar =
   exports.Alert =
     void 0;
-exports.TreeNodeExpander =
-  exports.TreeNode =
-  exports.Tree =
+exports.Tree =
   exports.Tooltip =
   exports.ToggleSwitch =
   exports.ThemeProvider =
@@ -101,6 +99,8 @@ exports.TreeNodeExpander =
   exports.LabeledSelect =
   exports.InputGroup =
   exports.LabeledInput =
+  exports.Label =
+  exports.InputGrid =
     void 0;
 exports.Divider =
   exports.VisuallyHidden =
@@ -120,6 +120,8 @@ exports.Divider =
   exports.Code =
   exports.Blockquote =
   exports.Anchor =
+  exports.TreeNodeExpander =
+  exports.TreeNode =
     void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -445,6 +447,20 @@ Object.defineProperty(exports, 'Input', {
     return index_js_26.Input;
   },
 });
+var InputWithDecorations_js_1 = require('./InputWithDecorations/InputWithDecorations.js');
+Object.defineProperty(exports, 'InputWithDecorations', {
+  enumerable: true,
+  get: function () {
+    return InputWithDecorations_js_1.InputWithDecorations;
+  },
+});
+var InputGrid_js_1 = require('./InputGrid/InputGrid.js');
+Object.defineProperty(exports, 'InputGrid', {
+  enumerable: true,
+  get: function () {
+    return InputGrid_js_1.InputGrid;
+  },
+});
 var index_js_27 = require('./Label/index.js');
 Object.defineProperty(exports, 'Label', {
   enumerable: true,

package/cjs/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/cjs/core/utils/components/ButtonBase.js

@@ -0,0 +1,46 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ButtonBase = 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 = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Box_js_1 = require('./Box.js');
+const useIsClient_js_1 = require('../hooks/useIsClient.js');
+exports.ButtonBase = React.forwardRef((props, forwardedRef) => {
+  const {
+    as: asProp = 'button',
+    disabled: disabledProp,
+    htmlDisabled,
+    ...rest
+  } = props;
+  const isClient = (0, useIsClient_js_1.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_js_1.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: (0, classnames_1.default)('iui-button-base', props.className),
+    onClick: handleIfEnabled(props.onClick),
+    onPointerDown: handleIfEnabled(props.onPointerDown),
+    onPointerUp: handleIfEnabled(props.onPointerUp),
+  });
+});
+exports.ButtonBase.displayName = 'ButtonBase';

package/cjs/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/cjs/core/utils/components/Icon.js

@@ -36,12 +36,19 @@ const getSizeValue = (size) => {
  * </Icon>
  */
 exports.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_js_1.Box, {
     as: 'span',
     className: (0, classnames_1.default)('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/cjs/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;

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

@@ -9,6 +9,8 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const Box_js_1 = require('./Box.js');
+const index_js_1 = require('../../Label/index.js');
+const index_js_2 = require('../../StatusMessage/index.js');
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
@@ -22,7 +24,6 @@ const InputContainer = (props) => {
     message,
     icon,
     isLabelInline,
-    isIconInline,
     children,
     className,
     style,
@@ -34,29 +35,19 @@ const InputContainer = (props) => {
   return React.createElement(
     Box_js_1.Box,
     {
-      className: (0, classnames_1.default)(
-        '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: (0, classnames_1.default)('iui-input-grid', className),
+      'data-iui-status': status,
+      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
       style: style,
       ...rest,
     },
     label &&
       React.createElement(
-        Box_js_1.Box,
+        index_js_1.Label,
         {
           as: inputId && props.as !== 'label' ? 'label' : 'div',
-          className: (0, classnames_1.default)('iui-label', {
-            'iui-required': required,
-          }),
+          required: required,
+          disabled: disabled,
           htmlFor: inputId,
           id: labelId,
         },
@@ -65,23 +56,12 @@ const InputContainer = (props) => {
     children,
     statusMessage
       ? statusMessage
-      : React.createElement(
-          React.Fragment,
-          null,
-          icon &&
-            React.createElement(
-              Box_js_1.Box,
-              { as: 'span', className: 'iui-input-icon', 'aria-hidden': true },
-              icon,
-            ),
-          message &&
-            !isLabelInline &&
-            React.createElement(
-              Box_js_1.Box,
-              { className: 'iui-message' },
-              message,
-            ),
-        ),
+      : message &&
+          React.createElement(
+            index_js_2.StatusMessage,
+            { startIcon: icon, status: status },
+            message,
+          ),
   );
 };
 exports.InputContainer = InputContainer;

package/cjs/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/cjs/core/utils/components/InputFlexContainer.js

@@ -14,7 +14,8 @@ const Box_js_1 = require('./Box.js');
  * @private
  */
 exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
-  const { isDisabled, status, children, className, style, ...rest } = props;
+  const { isDisabled, status, children, className, size, style, ...rest } =
+    props;
   return react_1.default.createElement(
     Box_js_1.Box,
     {
@@ -23,6 +24,7 @@ exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
         className,
       ),
       'data-iui-status': status,
+      'data-iui-size': size,
       'data-iui-disabled': isDisabled ? 'true' : undefined,
       ref: ref,
       style: style,

package/cjs/core/utils/components/Popover.js

@@ -40,8 +40,7 @@ exports.Popover = React.forwardRef((props, ref) => {
   const computedProps = {
     allowHTML: true,
     animation: false,
-    appendTo: (el) =>
-      themeInfo?.portalContainerRef?.current || el.ownerDocument.body,
+    appendTo: (el) => themeInfo?.portalContainer || el.ownerDocument.body,
     arrow: false,
     duration: 0,
     interactive: true,
@@ -66,7 +65,10 @@ exports.Popover = React.forwardRef((props, ref) => {
       ...props.popperOptions,
       modifiers: [
         { name: 'flip' },
-        { name: 'preventOverflow', options: { padding: 0 } },
+        {
+          name: 'preventOverflow',
+          options: { padding: 0 },
+        },
         ...(props.popperOptions?.modifiers || []),
       ],
     },

package/cjs/core/utils/components/Portal.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export type PortalProps = {
+    /**
+     * Where should the element be portaled to?
+     *
+     * If true, it will portal into nearest ThemeContext.portalContainer.
+     *
+     * If false, it will not be portaled.
+     *
+     * Otherwise, it will portal to the element passed to `to`.
+     *
+     * @default true
+     */
+    portal?: boolean | {
+        to: HTMLElement | (() => HTMLElement);
+    };
+};
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;