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

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

@@ -35,36 +35,42 @@ exports.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 = (0, index_js_4.useId)();
   return React.createElement(
     index_js_4.Box,
     {
-      className: (0, classnames_1.default)(className, 'iui-button-split', {
-        'iui-disabled': props.disabled,
-      }),
-      style: style,
-      title: title,
-      ref: ref,
+      ...wrapperProps,
+      className: (0, classnames_1.default)(
+        'iui-button-split',
+        {
+          'iui-disabled': props.disabled,
+        },
+        wrapperProps?.className,
+      ),
+      ref: wrapperRef,
     },
     React.createElement(
       index_js_1.Button,
       {
+        className: className,
         styleType: styleType,
         size: size,
         onClick: onClick,
         ref: forwardedRef,
         ...rest,
+        labelProps: { id: labelId, ...props.labelProps },
       },
       children,
     ),
@@ -73,13 +79,19 @@ exports.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(
         index_js_2.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(index_js_4.SvgCaretUpSmall, null)
           : React.createElement(index_js_4.SvgCaretDownSmall, null),

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

@@ -74,10 +74,10 @@ const CarouselComponent = React.forwardRef((props, ref) => {
       }
     }
   };
-  const userOnSlideChange = React.useRef(onSlideChange);
+  const userOnSlideChange = (0, index_js_1.useLatestRef)(onSlideChange);
   React.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
-  }, [currentIndex]);
+  }, [userOnSlideChange, currentIndex]);
   return React.createElement(
     index_js_1.Box,
     {

package/cjs/core/Carousel/CarouselDot.js

@@ -15,9 +15,7 @@ const index_js_1 = require('../utils/index.js');
  */
 exports.CarouselDot = React.forwardRef((props, ref) => {
   const { isActive, isSmaller, isSmall, className, ...rest } = props;
-  return React.createElement(index_js_1.Box, {
-    as: 'button',
-    type: 'button',
+  return React.createElement(index_js_1.ButtonBase, {
     role: 'tab',
     tabIndex: -1,
     className: (0, classnames_1.default)(

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

@@ -254,7 +254,8 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
       React.createElement(index_js_1.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);

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -139,20 +139,43 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       applyHsvColorChange(color.toHsvColor(), true, color);
     }
   };
-  const hexInputField = React.createElement(
-    index_js_3.InputContainer,
-    { status: validHexInput ? undefined : 'negative' },
+  const hexInputField = React.createElement(index_js_2.Input, {
+    size: 'small',
+    maxLength: showAlpha ? 9 : 7,
+    minLength: 1,
+    placeholder: 'HEX',
+    value: input[0],
+    onChange: (event) => {
+      const value = event.target.value.startsWith('#')
+        ? event.target.value
+        : `#${event.target.value}`;
+      setInput([value]);
+    },
+    onKeyDown: (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        handleColorInputChange();
+      }
+    },
+    onBlur: (event) => {
+      event.preventDefault();
+      handleColorInputChange();
+    },
+    status: validHexInput ? undefined : 'negative',
+  });
+  const hslInputs = React.createElement(
+    React.Fragment,
+    null,
     React.createElement(index_js_2.Input, {
       size: 'small',
-      maxLength: showAlpha ? 9 : 7,
-      minLength: 1,
-      placeholder: 'HEX',
-      value: input[0],
+      type: 'number',
+      min: '0',
+      max: '359',
+      step: '.1',
+      placeholder: 'H',
+      value: input[0] ?? '',
       onChange: (event) => {
-        const value = event.target.value.startsWith('#')
-          ? event.target.value
-          : `#${event.target.value}`;
-        setInput([value]);
+        setInput([event.target.value, input[1], input[2], input[3]]);
       },
       onKeyDown: (event) => {
         if (event.key === 'Enter') {
@@ -162,97 +185,76 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       },
       onBlur: (event) => {
         event.preventDefault();
-        handleColorInputChange();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
       },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
     }),
-  );
-  const hslInputs = React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[0]) < 0 || Number(input[0]) > 360
-            ? 'negative'
-            : undefined,
+    React.createElement(index_js_2.Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '100',
+      step: '.1',
+      placeholder: 'S',
+      value: input[1] ?? '',
+      onChange: (event) => {
+        setInput([input[0], event.target.value, input[2], input[3]]);
       },
-      React.createElement(index_js_2.Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '359',
-        step: '.1',
-        placeholder: 'H',
-        value: input[0] ?? '',
-        onChange: (event) => {
-          setInput([event.target.value, input[1], input[2], input[3]]);
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-      }),
-    ),
-    React.createElement(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[1]) < 0 || Number(input[1]) > 100
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
       },
-      React.createElement(index_js_2.Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '100',
-        step: '.1',
-        placeholder: 'S',
-        value: input[1] ?? '',
-        onChange: (event) => {
-          setInput([input[0], event.target.value, input[2], input[3]]);
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
+    }),
+    React.createElement(index_js_2.Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '100',
+      step: '.1',
+      placeholder: 'L',
+      value: input[2] ?? '',
+      onChange: (event) => {
+        setInput([input[0], input[1], event.target.value, input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-      }),
-    ),
-    React.createElement(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[2]) < 0 || Number(input[2]) > 100
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
       },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
+    }),
+    showAlpha &&
       React.createElement(index_js_2.Input, {
         size: 'small',
         type: 'number',
         min: '0',
-        max: '100',
-        step: '.1',
-        placeholder: 'L',
-        value: input[2] ?? '',
+        max: '1',
+        step: '.01',
+        placeholder: 'A',
+        value: input[3] ?? '',
         onChange: (event) => {
-          setInput([input[0], input[1], event.target.value, input[3]]);
+          setInput([input[0], input[1], input[2], event.target.value]);
         },
         onKeyDown: (event) => {
           if (event.key === 'Enter') {
@@ -266,127 +268,99 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
             handleColorInputChange();
           }
         },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
-    ),
-    showAlpha &&
-      React.createElement(
-        index_js_3.InputContainer,
-        {
-          status:
-            Number(input[3]) < 0 || Number(input[3]) > 1
-              ? 'negative'
-              : undefined,
-        },
-        React.createElement(index_js_2.Input, {
-          size: 'small',
-          type: 'number',
-          min: '0',
-          max: '1',
-          step: '.01',
-          placeholder: 'A',
-          value: input[3] ?? '',
-          onChange: (event) => {
-            setInput([input[0], input[1], input[2], event.target.value]);
-          },
-          onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          },
-          onBlur: (event) => {
-            event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          },
-        }),
-      ),
   );
   const rgbInputs = React.createElement(
     React.Fragment,
     null,
-    React.createElement(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[0]) < 0 || Number(input[0]) > 255
-            ? 'negative'
-            : undefined,
+    React.createElement(index_js_2.Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'R',
+      value: input[0] ?? '',
+      onChange: (event) => {
+        setInput([event.target.value, input[1], input[2], input[3]]);
       },
-      React.createElement(index_js_2.Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '255',
-        placeholder: 'R',
-        value: input[0] ?? '',
-        onChange: (event) => {
-          setInput([event.target.value, input[1], input[2], input[3]]);
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-      }),
-    ),
-    React.createElement(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[1]) < 0 || Number(input[1]) > 255
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
       },
-      React.createElement(index_js_2.Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '255',
-        placeholder: 'G',
-        value: input[1] ?? '',
-        onChange: (event) => {
-          setInput([input[0], event.target.value, input[2], input[3]]);
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
+    }),
+    React.createElement(index_js_2.Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'G',
+      value: input[1] ?? '',
+      onChange: (event) => {
+        setInput([input[0], event.target.value, input[2], input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-      }),
-    ),
-    React.createElement(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[2]) < 0 || Number(input[2]) > 255
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
       },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
+    }),
+    React.createElement(index_js_2.Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'B',
+      value: input[2] ?? '',
+      onChange: (event) => {
+        setInput([input[0], input[1], event.target.value, input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
+    }),
+    showAlpha &&
       React.createElement(index_js_2.Input, {
         size: 'small',
         type: 'number',
         min: '0',
-        max: '255',
-        placeholder: 'B',
-        value: input[2] ?? '',
+        max: '1',
+        step: '.01',
+        placeholder: 'A',
+        value: input[3] ?? '',
         onChange: (event) => {
-          setInput([input[0], input[1], event.target.value, input[3]]);
+          setInput([input[0], input[1], input[2], event.target.value]);
         },
         onKeyDown: (event) => {
           if (event.key === 'Enter') {
@@ -400,42 +374,9 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
             handleColorInputChange();
           }
         },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
-    ),
-    showAlpha &&
-      React.createElement(
-        index_js_3.InputContainer,
-        {
-          status:
-            Number(input[3]) < 0 || Number(input[3]) > 1
-              ? 'negative'
-              : undefined,
-        },
-        React.createElement(index_js_2.Input, {
-          size: 'small',
-          type: 'number',
-          min: '0',
-          max: '1',
-          step: '.01',
-          placeholder: 'A',
-          value: input[3] ?? '',
-          onChange: (event) => {
-            setInput([input[0], input[1], input[2], event.target.value]);
-          },
-          onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          },
-          onBlur: (event) => {
-            event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          },
-        }),
-      ),
   );
   return React.createElement(
     index_js_3.Box,