@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -3,29 +3,47 @@ import cx from 'classnames';
 import { Button } from './Button.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
-export const DropdownButton = React.forwardRef((props, forwardedRef)=>{
-    let { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
-    let [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, {
+export const DropdownButton = React.forwardRef((props, forwardedRef) => {
+  let {
+    menuItems,
+    className,
+    size,
+    styleType,
+    children,
+    dropdownMenuProps,
+    ...rest
+  } = props;
+  let [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
-        }),
+        endIcon: isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, {
+              'aria-hidden': true,
+            })
+          : React.createElement(SvgCaretDownSmall, {
+              'aria-hidden': true,
+            }),
         ref: forwardedRef,
-        ...rest
-    }, children));
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 DropdownButton.displayName = 'DropdownButton';

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

@@ -1,34 +1,63 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase } from '../../utils/index.js';
+import { Box, ButtonBase, createWarningLogger } from '../../utils/index.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
 import { PopoverOpenContext } from '../Popover/Popover.js';
-export const IconButton = React.forwardRef((props, ref)=>{
-    let { isActive, children, styleType = 'default', size, className, label, iconProps, labelProps, ...rest } = props;
-    let buttonGroupOrientation = React.useContext(ButtonGroupContext);
-    let hasPopoverOpen = React.useContext(PopoverOpenContext);
-    let button = React.createElement(ButtonBase, {
-        ref: ref,
-        className: cx('iui-button', 'iui-field', className),
-        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
-        "data-iui-size": size,
-        "data-iui-active": isActive,
-        "data-iui-has-popover": hasPopoverOpen ? 'open' : void 0,
-        "aria-pressed": isActive,
-        ...rest
-    }, React.createElement(Box, {
-        as: "span",
-        "aria-hidden": true,
+let logWarning = createWarningLogger();
+export const IconButton = React.forwardRef((props, ref) => {
+  let {
+    isActive,
+    children,
+    styleType = 'default',
+    size,
+    className,
+    title,
+    label = title,
+    iconProps,
+    labelProps,
+    ...rest
+  } = props;
+  let buttonGroupOrientation = React.useContext(ButtonGroupContext);
+  let hasPopoverOpen = React.useContext(PopoverOpenContext);
+  if (!label && !props['aria-label'] && !props['aria-labelledby'])
+    logWarning('IconButton is missing the `label` prop.');
+  let button = React.createElement(
+    ButtonBase,
+    {
+      ref: ref,
+      className: cx('iui-button', 'iui-field', className),
+      'data-iui-variant': 'default' !== styleType ? styleType : void 0,
+      'data-iui-size': size,
+      'data-iui-active': isActive,
+      'data-iui-has-popover': hasPopoverOpen ? 'open' : void 0,
+      '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, {
-        placement: 'vertical' === buttonGroupOrientation ? 'right' : 'top',
-        ...labelProps,
-        content: label,
-        ariaStrategy: "none"
-    }, button) : button;
+        className: cx('iui-button-icon', iconProps?.className),
+      },
+      children,
+    ),
+    label ? React.createElement(VisuallyHidden, null, label) : null,
+  );
+  return label
+    ? React.createElement(
+        Tooltip,
+        {
+          placement: 'vertical' === buttonGroupOrientation ? 'right' : 'top',
+          ...labelProps,
+          content: label,
+          ariaStrategy: 'none',
+        },
+        button,
+      )
+    : button;
 });
 IconButton.displayName = 'IconButton';

package/DEV-esm/core/Buttons/IdeasButton.js

@@ -2,17 +2,21 @@ import cx from 'classnames';
 import * as React from 'react';
 import { SvgSmileyHappy } from '../../utils/index.js';
 import { Button } from './Button.js';
-export const IdeasButton = React.forwardRef((props, ref)=>{
-    let { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
-    return React.createElement(Button, {
-        ref: ref,
-        className: cx('iui-button-idea', className),
-        "data-iui-variant": "high-visibility",
-        onClick: onClick,
-        startIcon: React.createElement(SvgSmileyHappy, {
-            "aria-hidden": true
-        }),
-        ...rest
-    }, feedbackLabel);
+export const IdeasButton = React.forwardRef((props, ref) => {
+  let { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
+  return React.createElement(
+    Button,
+    {
+      ref: ref,
+      className: cx('iui-button-idea', className),
+      'data-iui-variant': 'high-visibility',
+      onClick: onClick,
+      startIcon: React.createElement(SvgSmileyHappy, {
+        'aria-hidden': true,
+      }),
+      ...rest,
+    },
+    feedbackLabel,
+  );
 });
 IdeasButton.displayName = 'IdeasButton';

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

@@ -2,40 +2,71 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Button } from './Button.js';
 import { IconButton } from './IconButton.js';
-import { Box, SvgCaretDownSmall, SvgCaretUpSmall, useId } from '../../utils/index.js';
+import {
+  Box,
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  useId,
+} from '../../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
-export const SplitButton = React.forwardRef((props, forwardedRef)=>{
-    let { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, wrapperProps, menuButtonProps, portal = true, ...rest } = props;
-    let [visible, setVisible] = React.useState(false);
-    let menuContent = React.useMemo(()=>{
-        if ('function' == typeof menuItems) return menuItems(()=>setVisible(false));
-        return menuItems;
-    }, [
-        menuItems
-    ]);
-    let popoverProps = {
-        visible,
-        onVisibleChange: setVisible,
-        placement: menuPlacement,
-        matchWidth: true
-    };
-    let labelId = useId();
-    let trigger = React.createElement(IconButton, {
-        styleType: styleType,
-        size: size,
-        disabled: props.disabled,
-        "aria-labelledby": props.labelProps?.id || labelId,
-        ...menuButtonProps
-    }, visible ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null));
-    let [positionReference, setPositionReference] = React.useState(null);
-    return React.createElement(Box, {
-        as: "div",
-        ...wrapperProps,
-        ref: setPositionReference,
-        className: cx('iui-button-split', {
-            'iui-disabled': props.disabled
-        }, wrapperProps?.className)
-    }, React.createElement(Button, {
+export const SplitButton = React.forwardRef((props, forwardedRef) => {
+  let {
+    onClick,
+    menuItems,
+    className,
+    menuPlacement = 'bottom-end',
+    styleType = 'default',
+    size,
+    children,
+    wrapperProps,
+    menuButtonProps,
+    portal = true,
+    ...rest
+  } = props;
+  let [visible, setVisible] = React.useState(false);
+  let menuContent = React.useMemo(() => {
+    if ('function' == typeof menuItems)
+      return menuItems(() => setVisible(false));
+    return menuItems;
+  }, [menuItems]);
+  let popoverProps = {
+    visible,
+    onVisibleChange: setVisible,
+    placement: menuPlacement,
+    matchWidth: true,
+  };
+  let labelId = useId();
+  let trigger = React.createElement(
+    IconButton,
+    {
+      styleType: styleType,
+      size: size,
+      disabled: props.disabled,
+      'aria-labelledby': props.labelProps?.id || labelId,
+      ...menuButtonProps,
+    },
+    visible
+      ? React.createElement(SvgCaretUpSmall, null)
+      : React.createElement(SvgCaretDownSmall, null),
+  );
+  let [positionReference, setPositionReference] = React.useState(null);
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      ...wrapperProps,
+      ref: setPositionReference,
+      className: cx(
+        'iui-button-split',
+        {
+          'iui-disabled': props.disabled,
+        },
+        wrapperProps?.className,
+      ),
+    },
+    React.createElement(
+      Button,
+      {
         className: className,
         styleType: styleType,
         size: size,
@@ -43,17 +74,25 @@ export const SplitButton = React.forwardRef((props, forwardedRef)=>{
         ref: forwardedRef,
         ...rest,
         labelProps: {
-            id: labelId,
-            ...props.labelProps
-        }
-    }, children), React.createElement(Menu, {
+          id: labelId,
+          ...props.labelProps,
+        },
+      },
+      children,
+    ),
+    React.createElement(
+      Menu,
+      {
         popoverProps: popoverProps,
         trigger: trigger,
         portal: portal,
         positionReference: positionReference,
-        onKeyDown: ({ key })=>{
-            if ('Tab' === key) setVisible(false);
-        }
-    }, menuContent));
+        onKeyDown: ({ key }) => {
+          if ('Tab' === key) setVisible(false);
+        },
+      },
+      menuContent,
+    ),
+  );
 });
 SplitButton.displayName = 'SplitButton';

package/DEV-esm/core/Carousel/Carousel.js

@@ -7,56 +7,66 @@ import { CarouselSlide } from './CarouselSlide.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import { CarouselDot } from './CarouselDot.js';
 import { CarouselNavigation } from './CarouselNavigation.js';
-let CarouselComponent = React.forwardRef((props, ref)=>{
-    let idPrefix = useId();
-    let { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, id = idPrefix, ...rest } = props;
-    let isManuallyUpdating = React.useRef(false);
-    let carouselRef = React.useRef(null);
-    let refs = useMergedRefs(carouselRef, ref);
-    let [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
-    let scrollToSlide = React.useRef(()=>{});
-    let justMounted = React.useRef(true);
-    React.useEffect(()=>{
-        setCurrentIndex(userActiveIndex);
-        scrollToSlide.current(userActiveIndex, {
-            instant: justMounted.current
-        });
-        justMounted.current = false;
-    }, [
-        userActiveIndex
-    ]);
-    let [slideCount, setSlideCount] = React.useState(0);
-    let 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, {
+let CarouselComponent = React.forwardRef((props, ref) => {
+  let idPrefix = useId();
+  let {
+    activeSlideIndex: userActiveIndex = 0,
+    onSlideChange,
+    className,
+    children,
+    id = idPrefix,
+    ...rest
+  } = props;
+  let isManuallyUpdating = React.useRef(false);
+  let carouselRef = React.useRef(null);
+  let refs = useMergedRefs(carouselRef, ref);
+  let [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
+  let scrollToSlide = React.useRef(() => {});
+  let justMounted = React.useRef(true);
+  React.useEffect(() => {
+    setCurrentIndex(userActiveIndex);
+    scrollToSlide.current(userActiveIndex, {
+      instant: justMounted.current,
+    });
+    justMounted.current = false;
+  }, [userActiveIndex]);
+  let [slideCount, setSlideCount] = React.useState(0);
+  let 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));
+          currentIndex,
+          setCurrentIndex,
+          slideCount,
+          setSlideCount,
+          idPrefix: id,
+          isManuallyUpdating,
+          scrollToSlide,
+        },
+      },
+      children,
+    ),
+  );
 });
 CarouselComponent.displayName = '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,
 });

package/DEV-esm/core/Carousel/CarouselDot.js

@@ -1,19 +1,23 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { ButtonBase } from '../../utils/index.js';
-export const CarouselDot = React.forwardRef((props, ref)=>{
-    let { 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
-    });
+export const CarouselDot = React.forwardRef((props, ref) => {
+  let { 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,
+  });
 });
 CarouselDot.displayName = 'Carousel.Dot';