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

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
 type LabeledTextareaProps = {
     /**
      * Label for the textarea.
@@ -15,14 +17,22 @@ type LabeledTextareaProps = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
-     * Custom class name for textarea.
+     * Pass props to wrapper element.
      */
-    textareaClassName?: string;
+    wrapperProps?: React.ComponentProps<typeof InputGrid>;
     /**
-     * Custom style for textarea.
+     * Passes properties for label.
      */
-    textareaStyle?: React.CSSProperties;
-} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle' | 'iconDisplayStyle'>;
+    labelProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes properties for message content.
+     */
+    messageContentProps?: React.ComponentPropsWithRef<'div'>;
+    /**
+     * Passes properties for svgIcon.
+     */
+    iconProps?: React.ComponentProps<typeof Icon>;
+} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle'>;
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -3,8 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
-import { Textarea } from '../Textarea/index.js';
+import { Icon } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { LabeledInput } from '../LabeledInput/index.js';
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -26,49 +27,17 @@ import { Textarea } from '../Textarea/index.js';
  *  status='negative'
  * />
  */
-export const LabeledTextarea = React.forwardRef((props, ref) => {
-  const uid = useId();
-  const {
-    className,
-    style,
-    disabled = false,
-    label,
-    message,
-    status,
-    textareaClassName,
-    textareaStyle,
-    displayStyle = 'default',
-    iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline',
-    svgIcon,
-    required = false,
-    id = uid,
-    ...textareaProps
-  } = props;
-  const icon = svgIcon ?? (status && StatusIconMap[status]());
-  return React.createElement(
-    InputContainer,
-    {
-      label: label,
-      disabled: disabled,
-      required: required,
-      status: status,
-      message: message,
-      icon: icon,
-      isLabelInline: displayStyle === 'inline',
-      isIconInline: iconDisplayStyle === 'inline',
-      className: className,
-      style: style,
-      inputId: id,
-    },
-    React.createElement(Textarea, {
-      disabled: disabled,
-      className: textareaClassName,
-      style: textareaStyle,
-      required: required,
-      id: id,
-      ...textareaProps,
-      ref: ref,
-    }),
+export const LabeledTextarea = React.forwardRef((props, forwardedRef) => {
+  return (
+    // ref types don't match but it's internal, so ts-ignore is ok here
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    React.createElement(LabeledInput, {
+      as: 'textarea',
+      rows: 3,
+      ref: forwardedRef,
+      ...props,
+    })
   );
 });
 export default LabeledTextarea;

package/esm/core/Menu/Menu.d.ts

@@ -17,5 +17,5 @@ type MenuProps = {
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
-export declare const Menu: PolymorphicForwardRefComponent<"ul", MenuProps>;
+export declare const Menu: PolymorphicForwardRefComponent<"div", MenuProps>;
 export default Menu;

package/esm/core/Menu/Menu.js

@@ -60,7 +60,7 @@ export const Menu = React.forwardRef((props, ref) => {
     }
   };
   return React.createElement(Box, {
-    as: 'ul',
+    as: 'div',
     className: cx('iui-menu', className),
     role: 'menu',
     onKeyDown: onKeyDown,

package/esm/core/Menu/MenuDivider.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -13,5 +14,5 @@
  *   ]}
  * </Menu>
  */
-export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
+export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 export default MenuDivider;

package/esm/core/Menu/MenuDivider.js

@@ -18,7 +18,7 @@ import { polymorphic } from '../utils/index.js';
  *   ]}
  * </Menu>
  */
-export const MenuDivider = polymorphic.li('iui-menu-divider', {
+export const MenuDivider = polymorphic('iui-menu-divider', {
   role: 'separator',
 });
 export default MenuDivider;

package/esm/core/Menu/MenuItem.d.ts

@@ -64,5 +64,5 @@ export type MenuItemProps = {
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export declare const MenuItem: PolymorphicForwardRefComponent<"li", MenuItemProps>;
+export declare const MenuItem: PolymorphicForwardRefComponent<"div", MenuItemProps>;
 export default MenuItem;

package/esm/core/Menu/MenuItem.js

@@ -70,6 +70,7 @@ export const MenuItem = React.forwardRef((props, ref) => {
   const listItem = React.createElement(
     ListItem,
     {
+      as: 'div',
       actionable: true,
       size: size,
       active: isSelected,

package/esm/core/Menu/MenuItemSkeleton.d.ts

@@ -26,5 +26,5 @@ type MenuItemSkeletonProps = {
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"li", MenuItemSkeletonProps>;
+export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"div", MenuItemSkeletonProps>;
 export default MenuItemSkeleton;

package/esm/core/Menu/MenuItemSkeleton.js

@@ -21,7 +21,6 @@ export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     Box,
     {
-      as: 'li',
       className: cx('iui-menu-item-skeleton', className),
       'data-iui-size': hasSublabel && 'large',
       style: {

package/esm/core/ProgressIndicators/ProgressLinear.d.ts

@@ -24,6 +24,10 @@ type ProgressLinearProps = {
      * Status of progress.
      */
     status?: 'positive' | 'negative';
+    /**
+     * Pass props to ProgressLinear label group.
+     */
+    labelGroupProps?: React.ComponentProps<'div'>;
 };
 /**
  * Shows progress on a linear bar

package/esm/core/ProgressIndicators/ProgressLinear.js

@@ -28,6 +28,7 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
     isAnimated = false,
     status,
     className,
+    labelGroupProps,
     ...rest
   } = props;
   const boundedValue = getBoundedValue(value ?? 100, 0, 100);
@@ -47,7 +48,14 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
     labels.length > 0 &&
       React.createElement(
         Box,
-        { className: 'iui-progress-indicator-linear-label' },
+        {
+          as: 'div',
+          ...labelGroupProps,
+          className: cx(
+            'iui-progress-indicator-linear-label',
+            labelGroupProps?.className,
+          ),
+        },
         labels.map((label, index) =>
           React.createElement('span', { key: index }, label),
         ),

package/esm/core/SearchBox/SearchBox.js

@@ -71,7 +71,7 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
           { 'iui-expandable-searchbox': expandable },
           className,
         ),
-        'data-iui-size': size,
+        size: size,
         isDisabled: isDisabled,
         'data-iui-expanded': isExpanded,
         ...rest,

package/esm/core/Select/Select.d.ts

@@ -93,6 +93,10 @@ export type SelectProps<T> = {
      * Modify size of select.
      */
     size?: 'small' | 'large';
+    /**
+     * Status of select.
+     */
+    status?: 'positive' | 'warning' | 'negative';
     /**
      * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
      */

package/esm/core/Select/Select.js

@@ -11,6 +11,8 @@ import {
   useId,
   AutoclearingHiddenLiveRegion,
   Box,
+  SvgCheckmark,
+  Icon,
 } from '../utils/index.js';
 import SelectTag from './SelectTag.js';
 import SelectTagContainer from './SelectTagContainer.js';
@@ -90,6 +92,7 @@ export const Select = (props) => {
     popoverProps,
     multiple = false,
     triggerProps,
+    status,
     ...rest
   } = props;
   const [isOpenState, setIsOpen] = React.useState(false);
@@ -97,7 +100,6 @@ export const Select = (props) => {
   const [minWidth, setMinWidth] = React.useState(0);
   const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
   const selectRef = React.useRef(null);
-  const toggleButtonRef = React.useRef(null);
   const onShowHandler = React.useCallback(
     (instance) => {
       setIsOpen(true);
@@ -148,6 +150,9 @@ export const Select = (props) => {
         key: `${label}-${index}`,
         isSelected,
         startIcon: startIcon,
+        endIcon: isSelected
+          ? React.createElement(SvgCheckmark, { 'aria-hidden': true })
+          : null,
         onClick: () => {
           if (option.disabled) {
             return;
@@ -210,8 +215,8 @@ export const Select = (props) => {
             role: 'listbox',
             className: cx('iui-scroll', menuClassName),
             style: {
-              minWidth,
-              maxWidth: `min(${minWidth * 2}px, 90vw)`,
+              minInlineSize: minWidth,
+              maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
               ...menuStyle,
             },
             id: `${uid}-menu`,
@@ -225,10 +230,8 @@ export const Select = (props) => {
         onHide: onHideHandler,
         ...popoverProps,
         visible: isOpen,
-        onClickOutside: (_, { target }) => {
-          if (!toggleButtonRef.current?.contains(target)) {
-            setIsOpen(false);
-          }
+        onClickOutside: () => {
+          setIsOpen(false);
         },
       },
       React.createElement(
@@ -238,6 +241,7 @@ export const Select = (props) => {
           role: 'combobox',
           ref: selectRef,
           'data-iui-size': size,
+          'data-iui-status': status,
           onClick: () => !disabled && setIsOpen((o) => !o),
           onKeyDown: (e) => !disabled && onKeyDown(e),
           'aria-disabled': disabled,
@@ -275,17 +279,14 @@ export const Select = (props) => {
       ),
     ),
     React.createElement(
-      Box,
+      Icon,
       {
         as: 'span',
         'aria-hidden': true,
-        ref: toggleButtonRef,
         className: cx('iui-end-icon', {
-          'iui-actionable': !disabled,
           'iui-disabled': disabled,
           'iui-open': isOpen,
         }),
-        onClick: () => !disabled && setIsOpen((o) => !o),
       },
       React.createElement(SvgCaretDownSmall, null),
     ),

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -48,6 +48,22 @@ type SideNavigationProps = {
      * @default false
      */
     isSubmenuOpen?: boolean;
+    /**
+     * Passes props for SideNav wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav top.
+     */
+    topProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav bottom.
+     */
+    bottomProps?: React.ComponentProps<'div'>;
 };
 /**
  * Left side navigation menu component.

package/esm/core/SideNavigation/SideNavigation.js

@@ -31,6 +31,10 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     onExpanderClick,
     submenu,
     isSubmenuOpen = false,
+    wrapperProps,
+    contentProps,
+    topProps,
+    bottomProps,
     ...rest
   } = props;
   const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
@@ -40,6 +44,8 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
   const ExpandButton = React.createElement(
     IconButton,
     {
+      label: 'Toggle icon labels',
+      'aria-expanded': _isExpanded,
       className: 'iui-sidenav-button iui-expand',
       onClick: React.useCallback(() => {
         _setIsExpanded((expanded) => !expanded);
@@ -51,25 +57,39 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     Box,
     {
-      className: cx('iui-side-navigation-wrapper', className),
+      ...wrapperProps,
+      className: cx('iui-side-navigation-wrapper', wrapperProps?.className),
       ref: forwardedRef,
-      ...rest,
     },
     React.createElement(
       Box,
       {
-        className: cx('iui-side-navigation', {
-          'iui-expanded': _isExpanded,
-          'iui-collapsed': !_isExpanded,
-        }),
+        as: 'div',
+        className: cx(
+          'iui-side-navigation',
+          {
+            'iui-expanded': _isExpanded,
+            'iui-collapsed': !_isExpanded,
+          },
+          className,
+        ),
+        ...rest,
       },
       expanderPlacement === 'top' && ExpandButton,
       React.createElement(
         Box,
-        { className: 'iui-sidenav-content' },
+        {
+          as: 'div',
+          ...contentProps,
+          className: cx('iui-sidenav-content', contentProps?.className),
+        },
         React.createElement(
           Box,
-          { className: 'iui-top' },
+          {
+            as: 'div',
+            ...topProps,
+            className: cx('iui-top', topProps?.className),
+          },
           items.map((sidenavButton, index) =>
             !_isExpanded
               ? React.createElement(
@@ -86,7 +106,11 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
         ),
         React.createElement(
           Box,
-          { className: 'iui-bottom' },
+          {
+            as: 'div',
+            ...bottomProps,
+            className: cx('iui-bottom', bottomProps?.className),
+          },
           secondaryItems?.map((sidenavButton, index) =>
             !_isExpanded
               ? React.createElement(

package/esm/core/Slider/Slider.d.ts

@@ -68,6 +68,30 @@ export type SliderProps = {
      * Additional props for container `<div>` that hold the slider rail, thumbs, and tracks.
      */
     railContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Allows props to be passed for slider-min
+     */
+    minProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-max
+     */
+    maxProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-rail
+     */
+    railProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for slider-track
+     */
+    trackProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for slider-tick
+     */
+    tickProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-ticks
+     */
+    ticksProps?: React.ComponentProps<'div'>;
     /**
      * Defines the allowed behavior when moving Thumbs when multiple Thumbs are
      * shown. It controls if a Thumb movement should be limited to only move in

package/esm/core/Slider/Slider.js

@@ -79,6 +79,12 @@ export const Slider = React.forwardRef((props, ref) => {
     thumbProps,
     className,
     railContainerProps,
+    minProps,
+    maxProps,
+    railProps,
+    trackProps,
+    tickProps,
+    ticksProps,
     orientation = 'horizontal',
     ...rest
   } = props;
@@ -263,18 +269,27 @@ export const Slider = React.forwardRef((props, ref) => {
     if (Array.isArray(tickLabels)) {
       return React.createElement(
         Box,
-        { className: 'iui-slider-ticks' },
+        {
+          as: 'div',
+          ...ticksProps,
+          className: cx('iui-slider-ticks', ticksProps?.className),
+        },
         tickLabels.map((label, index) =>
           React.createElement(
             Box,
-            { as: 'span', key: index, className: 'iui-slider-tick' },
+            {
+              as: 'span',
+              ...tickProps,
+              key: index,
+              className: cx('iui-slider-tick', tickProps?.className),
+            },
             label,
           ),
         ),
       );
     }
     return tickLabels;
-  }, [tickLabels]);
+  }, [tickLabels, tickProps, ticksProps]);
   const generateTooltipProps = React.useCallback(
     (index, val) => {
       const outProps = tooltipProps ? tooltipProps(index, val, step) : {};
@@ -302,20 +317,33 @@ export const Slider = React.forwardRef((props, ref) => {
     minValueLabel &&
       React.createElement(
         Box,
-        { as: 'span', className: 'iui-slider-min' },
+        {
+          as: 'span',
+          ...minProps,
+          className: cx('iui-slider-min', minProps?.className),
+        },
         minValueLabel,
       ),
     React.createElement(
       Box,
       {
+        as: 'div',
         ref: containerRef,
-        className: cx('iui-slider-container', {
-          'iui-grabbing': undefined !== activeThumbIndex,
-        }),
-        onPointerDown: handlePointerDownOnSlider,
         ...railContainerProps,
+        className: cx(
+          'iui-slider-container',
+          {
+            'iui-grabbing': undefined !== activeThumbIndex,
+          },
+          railContainerProps?.className,
+        ),
+        onPointerDown: handlePointerDownOnSlider,
       },
-      React.createElement(Box, { className: 'iui-slider-rail' }),
+      React.createElement(Box, {
+        as: 'div',
+        ...railProps,
+        className: cx('iui-slider-rail', railProps?.className),
+      }),
       currentValues.map((thumbValue, index) => {
         const [minVal, maxVal] = getAllowableThumbRange(index);
         const thisThumbProps = thumbProps?.(index);
@@ -343,13 +371,18 @@ export const Slider = React.forwardRef((props, ref) => {
         sliderMax: max,
         values: currentValues,
         orientation: orientation,
+        ...trackProps,
       }),
       tickMarkArea,
     ),
     maxValueLabel &&
       React.createElement(
         Box,
-        { as: 'span', className: 'iui-slider-max' },
+        {
+          as: 'span',
+          ...maxProps,
+          className: cx('iui-slider-max', maxProps?.className),
+        },
         maxValueLabel,
       ),
   );

package/esm/core/Slider/Thumb.js

@@ -88,6 +88,7 @@ export const Thumb = (props) => {
     {
       placement: 'top',
       autoUpdateOptions: { animationFrame: true },
+      ariaStrategy: 'none',
       ...tooltipProps,
     },
     React.createElement(Box, {
@@ -97,8 +98,8 @@ export const Thumb = (props) => {
       style: {
         ...style,
         ...(orientation === 'horizontal'
-          ? { left: `${lowPercent}%` }
-          : { bottom: `${lowPercent}%` }),
+          ? { insetInlineStart: `${lowPercent}%` }
+          : { insetBlockEnd: `${lowPercent}%` }),
       },
       className: cx('iui-slider-thumb', { 'iui-active': isActive }, className),
       role: 'slider',

package/esm/core/Slider/Track.d.ts

@@ -6,7 +6,7 @@ export type TrackProps = {
     sliderMax: number;
     values: number[];
     orientation: SliderProps['orientation'];
-};
+} & React.HTMLAttributes<HTMLDivElement>;
 /**
  * Track displays color segments above Rail. Which, if any, segments that are
  * colorized is based on `trackDisplayMode`.

package/esm/core/Slider/Track.js

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import cx from 'classnames';
 import { Box } from '../utils/index.js';
 function shouldDisplaySegment(segmentIndex, mode) {
   if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
@@ -37,7 +38,14 @@ function generateSegments(values, min, max) {
  * colorized is based on `trackDisplayMode`.
  */
 export const Track = (props) => {
-  const { trackDisplayMode, sliderMin, sliderMax, values, orientation } = props;
+  const {
+    className,
+    trackDisplayMode,
+    sliderMin,
+    sliderMax,
+    values,
+    orientation,
+  } = props;
   const [segments, setSegments] = React.useState(() =>
     generateSegments(values, sliderMin, sliderMax),
   );
@@ -63,16 +71,16 @@ export const Track = (props) => {
           { key: index },
           shouldDisplaySegment(index, trackDisplayMode)
             ? React.createElement(Box, {
-                className: 'iui-slider-track',
+                className: cx('iui-slider-track', className),
                 style: {
                   ...(orientation === 'horizontal'
                     ? {
-                        left: `${lowPercent}%`,
-                        right: `${highPercent}%`,
+                        insetInlineStart: `${lowPercent}%`,
+                        insetInlineEnd: `${highPercent}%`,
                       }
                     : {
-                        top: `${highPercent}%`,
-                        bottom: `${lowPercent}%`,
+                        insetBlockStart: `${highPercent}%`,
+                        insetBlockEnd: `${lowPercent}%`,
                       }),
                 },
               })

package/esm/core/StatusMessage/StatusMessage.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Icon } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.
@@ -13,12 +15,20 @@ type StatusMessageProps = {
      * Status of the message.
      */
     status?: 'positive' | 'warning' | 'negative';
+    /**
+     * Passes props to icon
+     */
+    iconProps?: React.ComponentProps<typeof Icon>;
+    /**
+     * Passes props to content
+     */
+    contentProps?: React.ComponentPropsWithRef<'div'>;
 };
 /**
- * Component to display icon and text below the `Combobox` component.
+ * Component to display icon and text below the form field.
  * @example
  * <StatusMessage>This is the text</StatusMessage>
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
-export declare const StatusMessage: ({ startIcon: userStartIcon, children, status, }: StatusMessageProps) => React.JSX.Element;
+export declare const StatusMessage: PolymorphicForwardRefComponent<"div", StatusMessageProps>;
 export default StatusMessage;