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

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -56,42 +57,46 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
   );
   const refs = useMergedRefs(overflowRef, ref);
   return React.createElement(
-    Box,
-    {
-      className: cx(
-        {
-          'iui-button-group': orientation === 'horizontal',
-          'iui-button-group-vertical': orientation === 'vertical',
-          'iui-button-group-overflow-x':
-            !!overflowButton && orientation === 'horizontal',
-        },
-        className,
-      ),
-      ref: refs,
-      ...rest,
-    },
-    (() => {
-      if (!(visibleCount < items.length)) {
-        return items;
-      }
-      const overflowStart =
-        overflowPlacement === 'start'
-          ? items.length - visibleCount
-          : visibleCount - 1;
-      return React.createElement(
-        React.Fragment,
-        null,
-        overflowButton &&
-          overflowPlacement === 'start' &&
-          React.createElement('div', null, overflowButton(overflowStart)),
-        overflowPlacement === 'start'
-          ? items.slice(overflowStart + 1)
-          : items.slice(0, Math.max(0, overflowStart)),
-        overflowButton &&
-          overflowPlacement === 'end' &&
-          React.createElement('div', null, overflowButton(overflowStart)),
-      );
-    })(),
+    FloatingDelayGroup,
+    { delay: { open: 50, close: 250 } },
+    React.createElement(
+      Box,
+      {
+        className: cx(
+          {
+            'iui-button-group': orientation === 'horizontal',
+            'iui-button-group-vertical': orientation === 'vertical',
+            'iui-button-group-overflow-x':
+              !!overflowButton && orientation === 'horizontal',
+          },
+          className,
+        ),
+        ref: refs,
+        ...rest,
+      },
+      (() => {
+        if (!(visibleCount < items.length)) {
+          return items;
+        }
+        const overflowStart =
+          overflowPlacement === 'start'
+            ? items.length - visibleCount
+            : visibleCount - 1;
+        return React.createElement(
+          React.Fragment,
+          null,
+          overflowButton &&
+            overflowPlacement === 'start' &&
+            React.createElement('div', null, overflowButton(overflowStart)),
+          overflowPlacement === 'start'
+            ? items.slice(overflowStart + 1)
+            : items.slice(0, Math.max(0, overflowStart)),
+          overflowButton &&
+            overflowPlacement === 'end' &&
+            React.createElement('div', null, overflowButton(overflowStart)),
+        );
+      })(),
+    ),
   );
 });
 export default ButtonGroup;

package/esm/core/Buttons/Button/Button.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { ButtonBase } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type ButtonProps = {
     /**
@@ -19,7 +20,19 @@ export type ButtonProps = {
      * Icon shown after the main button content.
      */
     endIcon?: JSX.Element;
-};
+    /**
+     * Passes props to the button label.
+     */
+    labelProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to the start icon.
+     */
+    startIconProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to the end icon.
+     */
+    endIconProps?: React.ComponentProps<'span'>;
+} & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
 /**
  * Generic button component
  * @example

package/esm/core/Buttons/Button/Button.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../../utils/index.js';
+import { Box, ButtonBase } from '../../utils/index.js';
 /**
  * Generic button component
  * @example
@@ -19,36 +19,44 @@ export const Button = React.forwardRef((props, ref) => {
     children,
     className,
     size,
-    style,
     styleType = 'default',
-    type = 'button',
     startIcon,
     endIcon,
+    labelProps,
+    startIconProps,
+    endIconProps,
     ...rest
   } = props;
   return React.createElement(
-    Box,
+    ButtonBase,
     {
-      as: 'button',
       ref: ref,
       className: cx('iui-button', className),
       'data-iui-variant': styleType !== 'default' ? styleType : undefined,
       'data-iui-size': size,
-      style: style,
-      type: type,
       ...rest,
     },
     startIcon &&
       React.createElement(
         Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...startIconProps,
+          className: cx('iui-button-icon', startIconProps?.className),
+        },
         startIcon,
       ),
-    children && React.createElement('span', null, children),
+    children && React.createElement('span', { ...labelProps }, children),
     endIcon &&
       React.createElement(
         Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...endIconProps,
+          className: cx('iui-button-icon', endIconProps?.className),
+        },
         endIcon,
       ),
   );

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -52,7 +52,7 @@ export const DropdownButton = React.forwardRef((props, ref) => {
         setIsMenuOpen(false);
         dropdownMenuProps?.onHide?.(i);
       },
-      style: { minWidth: menuWidth, ...dropdownMenuProps?.style },
+      style: { minInlineSize: menuWidth, ...dropdownMenuProps?.style },
     },
     React.createElement(
       Button,

package/esm/core/Buttons/IconButton/IconButton.d.ts

@@ -11,7 +11,11 @@ export type IconButtonProps = {
      * Name of the button, shown in a tooltip and exposed to assistive technologies.
      */
     label?: React.ReactNode;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon'>;
+    /**
+     * Passes props to IconButton icon.
+     */
+    iconProps?: React.ComponentProps<'span'>;
+} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps'>;
 /**
  * Icon button
  * @example

package/esm/core/Buttons/IconButton/IconButton.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { VisuallyHidden, Popover, Box } from '../../utils/index.js';
+import { VisuallyHidden, Box, ButtonBase } from '../../utils/index.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
 /**
  * Icon button
  * @example
@@ -18,53 +19,40 @@ export const IconButton = React.forwardRef((props, ref) => {
     children,
     styleType = 'default',
     size,
-    type = 'button',
     className,
     label,
+    iconProps,
     ...rest
   } = props;
-  return React.createElement(
-    IconButtonTooltip,
-    { label: label },
+  const button = React.createElement(
+    ButtonBase,
+    {
+      ref: ref,
+      className: cx('iui-button', className),
+      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+      'data-iui-size': size,
+      'data-iui-active': isActive,
+      'aria-pressed': isActive,
+      ...rest,
+    },
     React.createElement(
       Box,
       {
-        as: 'button',
-        ref: ref,
-        className: cx('iui-button', className),
-        'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-        'data-iui-size': size,
-        'data-iui-active': isActive,
-        'aria-pressed': isActive,
-        type: type,
-        ...rest,
+        as: 'span',
+        'aria-hidden': true,
+        ...iconProps,
+        className: cx('iui-button-icon', iconProps?.className),
       },
-      React.createElement(
-        Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
-        children,
-      ),
-      label ? React.createElement(VisuallyHidden, null, label) : null,
+      children,
     ),
+    label ? React.createElement(VisuallyHidden, null, label) : null,
   );
-});
-const IconButtonTooltip = (props) => {
-  const { label, children } = props;
   return label
     ? React.createElement(
-        Popover,
-        {
-          interactive: false,
-          offset: [0, 4],
-          aria: { content: null },
-          content: React.createElement(
-            Box,
-            { 'aria-hidden': 'true', className: 'iui-tooltip' },
-            label,
-          ),
-        },
-        children,
+        Tooltip,
+        { content: label, ariaStrategy: 'none' },
+        button,
       )
-    : children;
-};
+    : button;
+});
 export default IconButton;

package/esm/core/Buttons/SplitButton/SplitButton.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
+import { IconButton } from '../IconButton/index.js';
 import type { Placement } from 'tippy.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type SplitButtonProps = ButtonProps & {
@@ -18,6 +19,14 @@ export type SplitButtonProps = ButtonProps & {
      * Content of primary button.
      */
     children: React.ReactNode;
+    /**
+     * Passes props to SplitButton wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to SplitButton menu button.
+     */
+    menuButtonProps?: React.ComponentProps<typeof IconButton>;
 };
 /**
  * Split button component with a DropdownMenu.

package/esm/core/Buttons/SplitButton/SplitButton.js

@@ -7,7 +7,12 @@ import * as React from 'react';
 import { Button } from '../Button/index.js';
 import { IconButton } from '../IconButton/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
-import { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
+import {
+  Box,
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  useId,
+} from '../../utils/index.js';
 /**
  * Split button component with a DropdownMenu.
  *
@@ -31,36 +36,42 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     styleType = 'default',
     size,
     children,
-    style,
-    title,
+    wrapperProps,
+    menuButtonProps,
     ...rest
   } = props;
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const [menuWidth, setMenuWidth] = React.useState(0);
-  const ref = React.useRef(null);
+  const wrapperRef = React.useRef(null);
   React.useEffect(() => {
-    if (ref.current) {
-      setMenuWidth(ref.current.offsetWidth);
+    if (wrapperRef.current) {
+      setMenuWidth(wrapperRef.current.offsetWidth);
     }
   }, [children, size]);
+  const labelId = useId();
   return React.createElement(
     Box,
     {
-      className: cx(className, 'iui-button-split', {
-        'iui-disabled': props.disabled,
-      }),
-      style: style,
-      title: title,
-      ref: ref,
+      ...wrapperProps,
+      className: cx(
+        'iui-button-split',
+        {
+          'iui-disabled': props.disabled,
+        },
+        wrapperProps?.className,
+      ),
+      ref: wrapperRef,
     },
     React.createElement(
       Button,
       {
+        className: className,
         styleType: styleType,
         size: size,
         onClick: onClick,
         ref: forwardedRef,
         ...rest,
+        labelProps: { id: labelId, ...props.labelProps },
       },
       children,
     ),
@@ -69,13 +80,19 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
       {
         placement: menuPlacement,
         menuItems: menuItems,
-        style: { minWidth: menuWidth },
+        style: { minInlineSize: menuWidth },
         onShow: React.useCallback(() => setIsMenuOpen(true), []),
         onHide: React.useCallback(() => setIsMenuOpen(false), []),
       },
       React.createElement(
         IconButton,
-        { styleType: styleType, size: size, disabled: props.disabled },
+        {
+          styleType: styleType,
+          size: size,
+          disabled: props.disabled,
+          'aria-labelledby': props.labelProps?.id || labelId,
+          ...menuButtonProps,
+        },
         isMenuOpen
           ? React.createElement(SvgCaretUpSmall, null)
           : React.createElement(SvgCaretDownSmall, null),

package/esm/core/Carousel/Carousel.d.ts

@@ -38,18 +38,20 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+            iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+            iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
     };

package/esm/core/Carousel/Carousel.js

@@ -4,7 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { getRandomValue, useMergedRefs, Box } from '../utils/index.js';
+import {
+  getRandomValue,
+  useMergedRefs,
+  Box,
+  useLatestRef,
+} from '../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 import { CarouselSlider } from './CarouselSlider.js';
 import { CarouselSlide } from './CarouselSlide.js';
@@ -70,10 +75,10 @@ const CarouselComponent = React.forwardRef((props, ref) => {
       }
     }
   };
-  const userOnSlideChange = React.useRef(onSlideChange);
+  const userOnSlideChange = useLatestRef(onSlideChange);
   React.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
-  }, [currentIndex]);
+  }, [userOnSlideChange, currentIndex]);
   return React.createElement(
     Box,
     {

package/esm/core/Carousel/CarouselDot.js

@@ -4,16 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from '../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
 /**
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.
  */
 export const CarouselDot = React.forwardRef((props, ref) => {
   const { isActive, isSmaller, isSmall, className, ...rest } = props;
-  return React.createElement(Box, {
-    as: 'button',
-    type: 'button',
+  return React.createElement(ButtonBase, {
     role: 'tab',
     tabIndex: -1,
     className: cx(

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -9,18 +9,20 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/esm/core/ColorPicker/ColorBuilder.js

@@ -245,7 +245,8 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
       React.createElement(Box, {
         className: 'iui-color-dot',
         style: {
-          '--iui-color-dot-inset': `${squareTop.toString()}% auto auto ${squareLeft.toString()}%`,
+          '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
+          '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
         },
         onPointerDown: () => {
           setColorDotActive(true);