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

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -12,6 +12,7 @@ import {
   useSafeContext,
   polymorphic,
   mergeEventHandlers,
+  ButtonBase,
 } from '../utils/index.js';
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
@@ -73,10 +74,8 @@ const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
     ExpandableBlockContext,
   );
   return React.createElement(
-    Box,
+    ButtonBase,
     {
-      as: 'button',
-      type: 'button',
       className: cx('iui-expandable-header', className),
       'aria-expanded': isExpanded,
       'aria-disabled': disabled,

package/esm/core/FileUpload/FileUpload.d.ts

@@ -15,6 +15,10 @@ type FileUploadProps = {
      * Either pass `FileUploadCard` (for default state) or a different component to wrap.
      */
     children: React.ReactNode;
+    /**
+     *  Allows for custom prop to be passed for content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
 };
 /**
  * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.

package/esm/core/FileUpload/FileUpload.js

@@ -13,7 +13,14 @@ import { Box, useMergedRefs } from '../utils/index.js';
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 export const FileUpload = React.forwardRef((props, ref) => {
-  const { dragContent, children, onFileDropped, className, ...rest } = props;
+  const {
+    dragContent,
+    children,
+    onFileDropped,
+    className,
+    contentProps,
+    ...rest
+  } = props;
   const [isDragActive, setIsDragActive] = React.useState(false);
   const fileUploadRef = React.useRef(null);
   const refs = useMergedRefs(fileUploadRef, ref);
@@ -58,9 +65,25 @@ export const FileUpload = React.forwardRef((props, ref) => {
     },
     dragContent
       ? children
-      : React.createElement(Box, { className: 'iui-content' }, children),
+      : React.createElement(
+          Box,
+          {
+            as: 'div',
+            ...contentProps,
+            className: cx('iui-content', contentProps?.className),
+          },
+          children,
+        ),
     dragContent &&
-      React.createElement(Box, { className: 'iui-content' }, dragContent),
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...contentProps,
+          className: cx('iui-content', contentProps?.className),
+        },
+        dragContent,
+      ),
   );
 });
 export default FileUpload;

package/esm/core/Header/HeaderBasicButton.js

@@ -4,30 +4,17 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
 export const HeaderBasicButton = React.forwardRef((props, ref) => {
-  const {
-    onClick,
-    className,
-    children,
-    style,
-    startIcon,
-    endIcon,
-    styleType,
-    size,
-    ...rest
-  } = props;
+  const { className, children, startIcon, endIcon, styleType, size, ...rest } =
+    props;
   styleType; // To omit and prevent eslint error.
   size; // To omit and prevent eslint error.
   return React.createElement(
-    Box,
+    ButtonBase,
     {
-      as: 'button',
       className: cx('iui-header-breadcrumb-button', className),
-      onClick: onClick,
       ref: ref,
-      type: 'button',
-      style: style,
       ...rest,
     },
     startIcon,

package/esm/core/Header/HeaderDropdownButton.js

@@ -26,7 +26,7 @@ export const HeaderDropdownButton = React.forwardRef((props, ref) => {
     DropdownMenu,
     {
       menuItems: menuItems,
-      style: { minWidth: menuWidth },
+      style: { minInlineSize: menuWidth },
       onShow: () => setIsMenuOpen(true),
       onHide: () => setIsMenuOpen(false),
     },

package/esm/core/Header/HeaderSplitButton.js

@@ -5,7 +5,12 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { DropdownMenu } from '../DropdownMenu/index.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall, Box } from '../utils/index.js';
+import {
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  Box,
+  ButtonBase,
+} from '../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
   const {
@@ -40,15 +45,13 @@ export const HeaderSplitButton = 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(
-        Box,
+        ButtonBase,
         {
-          as: 'button',
-          type: 'button',
           className:
             'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
           disabled: disabled,

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/Select/Select.js

@@ -210,8 +210,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`,

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);
@@ -51,25 +55,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 +104,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

@@ -97,8 +97,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/Stepper/Stepper.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type StepperLocalization = {
     stepsCountLabel: (currentStep: number, totalSteps: number) => string;
@@ -11,7 +12,7 @@ export type StepProperties = {
      * A tooltip giving detailed description to this step.
      */
     description?: string;
-};
+} & React.ComponentProps<'li'>;
 export type StepperProps = {
     /**
      * Current step index, 0 - based.
@@ -34,6 +35,30 @@ export type StepperProps = {
      *  Click handler on completed step.
      */
     onStepClick?: (clickedIndex: number) => void;
+    /**
+     * Callback that can provide additional props for `<li>` representing a step.
+     */
+    stepProps?: (index: number) => React.ComponentProps<'li'>;
+    /**
+     * Allows props to be passed for track content.
+     */
+    trackContentProps?: (index: number) => React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for circle.
+     */
+    circleProps?: (index: number) => React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for name.
+     */
+    nameProps?: (index: number) => React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for label.
+     */
+    labelProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for label count.
+     */
+    labelCountProps?: React.ComponentProps<'span'>;
 };
 export declare const Stepper: PolymorphicForwardRefComponent<"div", StepperProps>;
 export default Stepper;

package/esm/core/Stepper/Stepper.js

@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
 import { StepperStep } from './StepperStep.js';
@@ -16,6 +17,12 @@ export const Stepper = React.forwardRef((props, ref) => {
     type = 'default',
     localization = defaultStepperLocalization,
     onStepClick,
+    stepProps,
+    trackContentProps,
+    circleProps,
+    nameProps,
+    labelProps,
+    labelCountProps,
     ...rest
   } = props;
   const boundedCurrentStep = Math.min(
@@ -28,8 +35,16 @@ export const Stepper = React.forwardRef((props, ref) => {
     React.createElement(
       'ol',
       null,
-      steps.map((s, index) =>
-        React.createElement(StepperStep, {
+      steps.map((s, index) => {
+        const thisStepProps = stepProps?.(index);
+        const thisTrackContentProps = trackContentProps?.(index);
+        const thisCircleProps = circleProps?.(index);
+        const thisNameProps = nameProps?.(index);
+        return React.createElement(StepperStep, {
+          stepProps: thisStepProps,
+          trackContentProps: thisTrackContentProps,
+          circleProps: thisCircleProps,
+          nameProps: thisNameProps,
           key: index,
           index: index,
           title: type === 'long' ? '' : s.name,
@@ -38,16 +53,27 @@ export const Stepper = React.forwardRef((props, ref) => {
           type: type,
           onClick: onStepClick,
           description: s.description,
-        }),
-      ),
+        });
+      }),
     ),
     type === 'long' &&
       React.createElement(
         Box,
-        { className: 'iui-stepper-steps-label' },
+        {
+          as: 'div',
+          ...labelProps,
+          className: cx('iui-stepper-steps-label', labelProps?.className),
+        },
         React.createElement(
           Box,
-          { as: 'span', className: 'iui-stepper-steps-label-count' },
+          {
+            as: 'span',
+            ...labelCountProps,
+            className: cx(
+              'iui-stepper-steps-label-count',
+              labelCountProps?.className,
+            ),
+          },
           localization.stepsCountLabel(boundedCurrentStep + 1, steps.length),
         ),
         steps[boundedCurrentStep].name,

package/esm/core/Stepper/StepperStep.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type StepperStepProps = {
     /**
@@ -28,5 +29,21 @@ export type StepperStepProps = {
      * A tooltip giving detailed description to this step.
      */
     description?: string;
+    /**
+     * Allows props to be passed for stepper step.
+     */
+    stepProps?: React.ComponentProps<'li'>;
+    /**
+     * Allows props to be passed for track content.
+     */
+    trackContentProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for stepper-step circle.
+     */
+    circleProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for stepper name.
+     */
+    nameProps?: React.ComponentProps<'span'>;
 };
 export declare const StepperStep: PolymorphicForwardRefComponent<"li", StepperStepProps>;