@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -35,66 +35,30 @@ import { FloatingDelayGroup } from '@floating-ui/react';
  * </ButtonGroup>
  */
 export const ButtonGroup = React.forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    overflowButton,
-    overflowPlacement = 'end',
-    orientation = 'horizontal',
-    ...rest
-  } = props;
-  const items = React.useMemo(
-    () => React.Children.toArray(children).filter(Boolean),
-    [children],
-  );
-  const [overflowRef, visibleCount] = useOverflow(
-    items,
-    !overflowButton,
-    orientation,
-  );
-  const refs = useMergedRefs(overflowRef, ref);
-  return React.createElement(
-    FloatingDelayGroup,
-    { delay: { open: 50, close: 250 } },
-    React.createElement(
-      Box,
-      {
-        className: cx(
-          'iui-button-group',
-          {
-            'iui-button-group-overflow-x':
-              !!overflowButton && orientation === 'horizontal',
-          },
-          className,
-        ),
-        'data-iui-orientation':
-          orientation === 'vertical' ? orientation : undefined,
-        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' &&
-            overflowButton(overflowStart),
-          overflowPlacement === 'start'
-            ? items.slice(overflowStart + 1)
-            : items.slice(0, Math.max(0, overflowStart)),
-          overflowButton &&
-            overflowPlacement === 'end' &&
-            overflowButton(overflowStart),
-        );
-      })(),
-    ),
-  );
+    const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
+    const items = React.useMemo(() => React.Children.toArray(children).filter(Boolean), [children]);
+    const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
+    const refs = useMergedRefs(overflowRef, ref);
+    return (React.createElement(FloatingDelayGroup, { delay: { open: 50, close: 250 } },
+        React.createElement(Box, { className: cx('iui-button-group', {
+                'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
+            }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, 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' &&
+                    overflowButton(overflowStart),
+                overflowPlacement === 'start'
+                    ? items.slice(overflowStart + 1)
+                    : items.slice(0, Math.max(0, overflowStart)),
+                overflowButton &&
+                    overflowPlacement === 'end' &&
+                    overflowButton(overflowStart)));
+        })())));
 });
 export default ButtonGroup;

package/esm/core/Buttons/Button.js

@@ -15,50 +15,10 @@ import { Box, ButtonBase } from '../utils/index.js';
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 export const Button = React.forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    size,
-    styleType = 'default',
-    startIcon,
-    endIcon,
-    labelProps,
-    startIconProps,
-    endIconProps,
-    ...rest
-  } = props;
-  return React.createElement(
-    ButtonBase,
-    {
-      ref: ref,
-      className: cx('iui-button', className),
-      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-      'data-iui-size': size,
-      ...rest,
-    },
-    startIcon &&
-      React.createElement(
-        Box,
-        {
-          as: 'span',
-          'aria-hidden': true,
-          ...startIconProps,
-          className: cx('iui-button-icon', startIconProps?.className),
-        },
-        startIcon,
-      ),
-    children && React.createElement('span', { ...labelProps }, children),
-    endIcon &&
-      React.createElement(
-        Box,
-        {
-          as: 'span',
-          'aria-hidden': true,
-          ...endIconProps,
-          className: cx('iui-button-icon', endIconProps?.className),
-        },
-        endIcon,
-      ),
-  );
+    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, ...rest } = props;
+    return (React.createElement(ButtonBase, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, ...rest },
+        startIcon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...startIconProps, className: cx('iui-button-icon', startIconProps?.className) }, startIcon)),
+        children && React.createElement("span", { ...labelProps }, children),
+        endIcon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...endIconProps, className: cx('iui-button-icon', endIconProps?.className) }, endIcon))));
 });
 export default Button;

package/esm/core/Buttons/DropdownButton.js

@@ -17,42 +17,12 @@ import { SvgCaretDownSmall, SvgCaretUpSmall } from '../utils/index.js';
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
 export const DropdownButton = React.forwardRef((props, forwardedRef) => {
-  const {
-    menuItems,
-    className,
-    size,
-    styleType,
-    children,
-    dropdownMenuProps,
-    ...rest
-  } = props;
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  return React.createElement(
-    DropdownMenu,
-    {
-      menuItems: menuItems,
-      matchWidth: true,
-      visible: isMenuOpen,
-      ...dropdownMenuProps,
-      onVisibleChange: (open) => {
-        setIsMenuOpen(open);
-        dropdownMenuProps?.onVisibleChange?.(open);
-      },
-    },
-    React.createElement(
-      Button,
-      {
-        className: cx('iui-button-dropdown', className),
-        size: size,
-        styleType: styleType,
-        endIcon: isMenuOpen
-          ? React.createElement(SvgCaretUpSmall, { 'aria-hidden': true })
-          : React.createElement(SvgCaretDownSmall, { 'aria-hidden': true }),
-        ref: forwardedRef,
-        ...rest,
-      },
-      children,
-    ),
-  );
+    const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    return (React.createElement(DropdownMenu, { menuItems: menuItems, matchWidth: true, visible: isMenuOpen, ...dropdownMenuProps, onVisibleChange: (open) => {
+            setIsMenuOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
+        } },
+        React.createElement(Button, { className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: forwardedRef, ...rest }, children)));
 });
 export default DropdownButton;

package/esm/core/Buttons/IconButton.js

@@ -15,45 +15,10 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 export const IconButton = React.forwardRef((props, ref) => {
-  const {
-    isActive,
-    children,
-    styleType = 'default',
-    size,
-    className,
-    label,
-    iconProps,
-    ...rest
-  } = props;
-  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: 'span',
-        'aria-hidden': true,
-        ...iconProps,
-        className: cx('iui-button-icon', iconProps?.className),
-      },
-      children,
-    ),
-    label ? React.createElement(VisuallyHidden, null, label) : null,
-  );
-  return label
-    ? React.createElement(
-        Tooltip,
-        { content: label, ariaStrategy: 'none' },
-        button,
-      )
-    : button;
+    const { isActive, children, styleType = 'default', size, className, label, iconProps, ...rest } = props;
+    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: 'span', "aria-hidden": true, ...iconProps, className: cx('iui-button-icon', iconProps?.className) }, children),
+        label ? React.createElement(VisuallyHidden, null, label) : null));
+    return label ? (React.createElement(Tooltip, { content: label, ariaStrategy: 'none' }, button)) : (button);
 });
 export default IconButton;

package/esm/core/Buttons/IdeasButton.js

@@ -11,17 +11,7 @@ import { Button } from './Button.js';
  * <IdeasButton />
  */
 export const IdeasButton = React.forwardRef((props, ref) => {
-  const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
-  return React.createElement(
-    Button,
-    {
-      ref: ref,
-      'data-iui-variant': 'idea',
-      onClick: onClick,
-      startIcon: React.createElement(SvgSmileyHappy, { 'aria-hidden': true }),
-      ...rest,
-    },
-    feedbackLabel,
-  );
+    const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
+    return (React.createElement(Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
 });
 export default IdeasButton;

package/esm/core/Buttons/SplitButton.js

@@ -6,14 +6,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Button } from './Button.js';
 import { IconButton } from './IconButton.js';
-import {
-  Box,
-  Portal,
-  SvgCaretDownSmall,
-  SvgCaretUpSmall,
-  useId,
-  useMergedRefs,
-} from '../utils/index.js';
+import { Box, Portal, SvgCaretDownSmall, SvgCaretUpSmall, useId, useMergedRefs, } from '../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
 import { usePopover } from '../Popover/Popover.js';
 /**
@@ -31,98 +24,38 @@ import { usePopover } from '../Popover/Popover.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,
-    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,
-        ),
-      ),
-  );
+    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.js

@@ -4,12 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  getRandomValue,
-  useMergedRefs,
-  Box,
-  useLatestRef,
-} 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';
@@ -17,61 +12,37 @@ 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(
-    () => 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,
-    });
-    justMounted.current = false;
-  }, [userActiveIndex]);
-  const [slideCount, setSlideCount] = React.useState(0);
-  const userOnSlideChange = useLatestRef(onSlideChange);
-  React.useEffect(() => {
-    userOnSlideChange.current?.(currentIndex);
-  }, [userOnSlideChange, currentIndex]);
-  return React.createElement(
-    Box,
-    {
-      as: 'section',
-      'aria-roledescription': 'carousel',
-      ref: refs,
-      className: cx('iui-carousel', className),
-      ...rest,
-      id: id,
-    },
-    React.createElement(
-      CarouselContext.Provider,
-      {
-        value: {
-          currentIndex,
-          setCurrentIndex,
-          slideCount,
-          setSlideCount,
-          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,
+        });
+        justMounted.current = false;
+    }, [userActiveIndex]);
+    const [slideCount, setSlideCount] = React.useState(0);
+    const userOnSlideChange = useLatestRef(onSlideChange);
+    React.useEffect(() => {
+        userOnSlideChange.current?.(currentIndex);
+    }, [userOnSlideChange, currentIndex]);
+    return (React.createElement(Box, { as: 'section', "aria-roledescription": 'carousel', ref: refs, className: cx('iui-carousel', className), ...rest, id: id },
+        React.createElement(CarouselContext.Provider, { value: {
+                currentIndex,
+                setCurrentIndex,
+                slideCount,
+                setSlideCount,
+                idPrefix: id,
+                isManuallyUpdating,
+                scrollToSlide,
+            } }, children)));
 });
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
@@ -93,16 +64,16 @@ const CarouselComponent = React.forwardRef((props, ref) => {
  * </Carousel>
  */
 export const Carousel = Object.assign(CarouselComponent, {
-  Slider: CarouselSlider,
-  Slide: CarouselSlide,
-  /**
-   * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
-   */
-  Navigation: CarouselNavigation,
-  /**
-   * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
-   */
-  DotsList: CarouselDotsList,
-  Dot: CarouselDot,
+    Slider: CarouselSlider,
+    Slide: CarouselSlide,
+    /**
+     * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
+     */
+    Navigation: CarouselNavigation,
+    /**
+     * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
+     */
+    DotsList: CarouselDotsList,
+    Dot: CarouselDot,
 });
 export default Carousel;

package/esm/core/Carousel/CarouselDot.js

@@ -10,21 +10,10 @@ import { ButtonBase } from '../utils/index.js';
  * 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(ButtonBase, {
-    role: 'tab',
-    tabIndex: isActive ? 0 : -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: isActive ? 0 : -1, className: cx('iui-carousel-navigation-dot', {
+            'iui-active': isActive,
+            'iui-first': isSmaller,
+            'iui-second': isSmall,
+        }, className), "aria-selected": isActive, ref: ref, ...rest }));
 });