@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.10

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
-import type { Placement } from 'tippy.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export declare type SplitButtonProps = ButtonProps & {
+import { IconButton } from '../IconButton/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+import type { Placement } from '@floating-ui/react';
+export type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.
      * Pass a function that takes the `close` argument (to close the menu),
@@ -18,7 +19,15 @@ export declare 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?: Omit<React.ComponentProps<typeof IconButton>, 'label' | 'size'>;
+} & Pick<PortalProps, 'portal'>;
 /**
  * Split button component with a DropdownMenu.
  *

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

@@ -6,8 +6,16 @@ import cx from 'classnames';
 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,
+  Portal,
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  useId,
+  useMergedRefs,
+  usePopover,
+} from '../../utils/index.js';
+import { Menu } from '../../Menu/Menu.js';
 /**
  * Split button component with a DropdownMenu.
  *
@@ -23,20 +31,98 @@ import { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
  * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
  */
 export const SplitButton = React.forwardRef((props, forwardedRef) => {
-    const { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, style, title, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuWidth, setMenuWidth] = React.useState(0);
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (ref.current) {
-            setMenuWidth(ref.current.offsetWidth);
-        }
-    }, [children, size]);
-    return (React.createElement(Box, { className: cx(className, 'iui-button-split', {
-            'iui-disabled': props.disabled,
-        }), style: style, title: title, ref: ref },
-        React.createElement(Button, { styleType: styleType, size: size, onClick: onClick, ref: forwardedRef, ...rest }, children),
-        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(() => setIsMenuOpen(true), []), onHide: React.useCallback(() => setIsMenuOpen(false), []) },
-            React.createElement(IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null)))));
+  const {
+    onClick,
+    menuItems,
+    className,
+    menuPlacement = 'bottom-end',
+    styleType = 'default',
+    size,
+    children,
+    wrapperProps,
+    menuButtonProps,
+    portal = true,
+    ...rest
+  } = props;
+  const buttonRef = React.useRef(null);
+  const [visible, setVisible] = React.useState(false);
+  const close = React.useCallback(() => {
+    setVisible(false);
+    buttonRef.current?.focus({ preventScroll: true });
+  }, []);
+  const menuContent = React.useMemo(() => {
+    if (typeof menuItems === 'function') {
+      return menuItems(close);
+    }
+    return menuItems;
+  }, [menuItems, close]);
+  const popover = usePopover({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement: menuPlacement,
+    matchWidth: true,
+  });
+  const labelId = useId();
+  return React.createElement(
+    Box,
+    {
+      ...wrapperProps,
+      ref: popover.refs.setPositionReference,
+      className: cx(
+        'iui-button-split',
+        {
+          'iui-disabled': props.disabled,
+        },
+        wrapperProps?.className,
+      ),
+    },
+    React.createElement(
+      Button,
+      {
+        className: className,
+        styleType: styleType,
+        size: size,
+        onClick: onClick,
+        ref: useMergedRefs(buttonRef, forwardedRef),
+        ...rest,
+        labelProps: { id: labelId, ...props.labelProps },
+      },
+      children,
+    ),
+    React.createElement(
+      IconButton,
+      {
+        styleType: styleType,
+        size: size,
+        disabled: props.disabled,
+        'aria-labelledby': props.labelProps?.id || labelId,
+        'aria-expanded': popover.open,
+        ref: popover.refs.setReference,
+        ...popover.getReferenceProps(menuButtonProps),
+      },
+      visible
+        ? React.createElement(SvgCaretUpSmall, null)
+        : React.createElement(SvgCaretDownSmall, null),
+    ),
+    popover.open &&
+      React.createElement(
+        Portal,
+        { portal: portal },
+        React.createElement(
+          Menu,
+          {
+            ...popover.getFloatingProps({
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  close();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuContent,
+        ),
+      ),
+  );
 });
 export default SplitButton;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselProps = {
+type CarouselProps = {
     /**
      * Index of the currently shown slide.
      * Can be used to set the default index or control the active slide programmatically.
@@ -36,20 +36,22 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         index?: number | undefined;
     }>;
     Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
-        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        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" | "isActive" | "styleType"> & {
+        }, "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<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        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" | "isActive" | "styleType"> & {
+        }, "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';
@@ -12,73 +17,98 @@ import { CarouselDotsList } from './CarouselDotsList.js';
 import { CarouselDot } from './CarouselDot.js';
 import { CarouselNavigation } from './CarouselNavigation.js';
 const CarouselComponent = React.forwardRef((props, ref) => {
-    const { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, ...rest } = props;
-    // Generate a stateful random id if not specified
-    const [id] = React.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${getRandomValue(10)}`; });
-    const isManuallyUpdating = React.useRef(false);
-    const carouselRef = React.useRef(null);
-    const refs = useMergedRefs(carouselRef, ref);
-    const [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
-    const scrollToSlide = React.useRef(() => { }); // stub function populated in CarouselSlider
-    const justMounted = React.useRef(true);
-    React.useEffect(() => {
-        var _a;
-        setCurrentIndex(userActiveIndex);
-        scrollToSlide.current(userActiveIndex, {
-            instant: justMounted.current,
-        });
-        // re-focus the carousel for keyboard nav, but not on first mount
-        // because it shows outline and might interfere with other components
-        if (!justMounted.current) {
-            (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
-        }
-        justMounted.current = false;
-    }, [userActiveIndex]);
-    const [slideCount, setSlideCount] = React.useState(0);
-    const [keysPressed, setKeysPressed] = React.useState({});
-    const handleKeyDown = (event) => {
-        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-            return;
-        }
-        const key = event.key;
-        if (key === 'ArrowLeft' || key === 'ArrowRight') {
-            setKeysPressed((old) => ({ ...old, [key]: true }));
-        }
-    };
-    const handleKeyUp = (event) => {
-        switch (event.key) {
-            case 'ArrowLeft': {
-                setKeysPressed((old) => ({ ...old, ArrowLeft: false }));
-                const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-                scrollToSlide.current(prevIndex);
-                setCurrentIndex(prevIndex);
-                break;
-            }
-            case 'ArrowRight': {
-                setKeysPressed((old) => ({ ...old, ArrowRight: false }));
-                const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-                scrollToSlide.current(nextIndex);
-                setCurrentIndex(nextIndex);
-                break;
-            }
-        }
-    };
-    const userOnSlideChange = React.useRef(onSlideChange);
-    React.useEffect(() => {
-        var _a;
-        (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
-    }, [currentIndex]);
-    return (React.createElement(Box, { as: 'section', "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: cx('iui-carousel', className), ...rest, id: id },
-        React.createElement(CarouselContext.Provider, { value: {
-                currentIndex,
-                setCurrentIndex,
-                slideCount,
-                setSlideCount,
-                keysPressed,
-                idPrefix: id,
-                isManuallyUpdating,
-                scrollToSlide,
-            } }, children)));
+  const {
+    activeSlideIndex: userActiveIndex = 0,
+    onSlideChange,
+    className,
+    children,
+    ...rest
+  } = props;
+  // Generate a stateful random id if not specified
+  const [id] = React.useState(
+    () => props.id ?? `iui-carousel-${getRandomValue(10)}`,
+  );
+  const isManuallyUpdating = React.useRef(false);
+  const carouselRef = React.useRef(null);
+  const refs = useMergedRefs(carouselRef, ref);
+  const [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
+  const scrollToSlide = React.useRef(() => {}); // stub function populated in CarouselSlider
+  const justMounted = React.useRef(true);
+  React.useEffect(() => {
+    setCurrentIndex(userActiveIndex);
+    scrollToSlide.current(userActiveIndex, {
+      instant: justMounted.current,
+    });
+    // re-focus the carousel for keyboard nav, but not on first mount
+    // because it shows outline and might interfere with other components
+    if (!justMounted.current) {
+      carouselRef.current?.focus({ preventScroll: true });
+    }
+    justMounted.current = false;
+  }, [userActiveIndex]);
+  const [slideCount, setSlideCount] = React.useState(0);
+  const [keysPressed, setKeysPressed] = React.useState({});
+  const handleKeyDown = (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    const key = event.key;
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      setKeysPressed((old) => ({ ...old, [key]: true }));
+    }
+  };
+  const handleKeyUp = (event) => {
+    switch (event.key) {
+      case 'ArrowLeft': {
+        setKeysPressed((old) => ({ ...old, ArrowLeft: false }));
+        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+        scrollToSlide.current(prevIndex);
+        setCurrentIndex(prevIndex);
+        break;
+      }
+      case 'ArrowRight': {
+        setKeysPressed((old) => ({ ...old, ArrowRight: false }));
+        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+        scrollToSlide.current(nextIndex);
+        setCurrentIndex(nextIndex);
+        break;
+      }
+    }
+  };
+  const userOnSlideChange = useLatestRef(onSlideChange);
+  React.useEffect(() => {
+    userOnSlideChange.current?.(currentIndex);
+  }, [userOnSlideChange, currentIndex]);
+  return React.createElement(
+    Box,
+    {
+      as: 'section',
+      'aria-roledescription': 'carousel',
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      ref: refs,
+      className: cx('iui-carousel', className),
+      ...rest,
+      id: id,
+    },
+    React.createElement(
+      CarouselContext.Provider,
+      {
+        value: {
+          currentIndex,
+          setCurrentIndex,
+          slideCount,
+          setSlideCount,
+          keysPressed,
+          idPrefix: id,
+          isManuallyUpdating,
+          scrollToSlide,
+        },
+      },
+      children,
+    ),
+  );
 });
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
@@ -99,10 +129,10 @@ const CarouselComponent = React.forwardRef((props, ref) => {
  * </Carousel>
  */
 export const Carousel = Object.assign(CarouselComponent, {
-    Slider: CarouselSlider,
-    Slide: CarouselSlide,
-    Navigation: CarouselNavigation,
-    DotsList: CarouselDotsList,
-    Dot: CarouselDot,
+  Slider: CarouselSlider,
+  Slide: CarouselSlide,
+  Navigation: CarouselNavigation,
+  DotsList: CarouselDotsList,
+  Dot: CarouselDot,
 });
 export default Carousel;

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

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselDotProps = {
+type CarouselDotProps = {
     /** Is this dot currently active? */
     isActive?: boolean;
     /** Should be set to true for dots that are one spot from the edge of truncation. The dot size becomes small.  */

package/esm/core/Carousel/CarouselDot.js

@@ -4,16 +4,27 @@
  *--------------------------------------------------------------------------------------------*/
 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', role: 'tab', tabIndex: -1, className: cx('iui-carousel-navigation-dot', {
-            'iui-active': isActive,
-            'iui-first': isSmaller,
-            'iui-second': isSmall,
-        }, className), "aria-selected": isActive, ref: ref, ...rest }));
+  const { isActive, isSmaller, isSmall, className, ...rest } = props;
+  return React.createElement(ButtonBase, {
+    role: 'tab',
+    tabIndex: -1,
+    className: cx(
+      'iui-carousel-navigation-dot',
+      {
+        'iui-active': isActive,
+        'iui-first': isSmaller,
+        'iui-second': isSmall,
+      },
+      className,
+    ),
+    'aria-selected': isActive,
+    ref: ref,
+    ...rest,
+  });
 });

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

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselDotsListProps = {
+type CarouselDotsListProps = {
     /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
     length?: number;
     /** Index of currently active dot. Will be inferred from Carousel context, or else default to 0. */