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

package/cjs/core/Slider/Slider.js

@@ -91,6 +91,12 @@ exports.Slider = React.forwardRef((props, ref) => {
     thumbProps,
     className,
     railContainerProps,
+    minProps,
+    maxProps,
+    railProps,
+    trackProps,
+    tickProps,
+    ticksProps,
     orientation = 'horizontal',
     ...rest
   } = props;
@@ -283,18 +289,33 @@ exports.Slider = React.forwardRef((props, ref) => {
     if (Array.isArray(tickLabels)) {
       return React.createElement(
         index_js_1.Box,
-        { className: 'iui-slider-ticks' },
+        {
+          as: 'div',
+          ...ticksProps,
+          className: (0, classnames_1.default)(
+            'iui-slider-ticks',
+            ticksProps?.className,
+          ),
+        },
         tickLabels.map((label, index) =>
           React.createElement(
             index_js_1.Box,
-            { as: 'span', key: index, className: 'iui-slider-tick' },
+            {
+              as: 'span',
+              ...tickProps,
+              key: index,
+              className: (0, classnames_1.default)(
+                '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) : {};
@@ -322,20 +343,39 @@ exports.Slider = React.forwardRef((props, ref) => {
     minValueLabel &&
       React.createElement(
         index_js_1.Box,
-        { as: 'span', className: 'iui-slider-min' },
+        {
+          as: 'span',
+          ...minProps,
+          className: (0, classnames_1.default)(
+            'iui-slider-min',
+            minProps?.className,
+          ),
+        },
         minValueLabel,
       ),
     React.createElement(
       index_js_1.Box,
       {
+        as: 'div',
         ref: containerRef,
-        className: (0, classnames_1.default)('iui-slider-container', {
-          'iui-grabbing': undefined !== activeThumbIndex,
-        }),
-        onPointerDown: handlePointerDownOnSlider,
         ...railContainerProps,
+        className: (0, classnames_1.default)(
+          'iui-slider-container',
+          {
+            'iui-grabbing': undefined !== activeThumbIndex,
+          },
+          railContainerProps?.className,
+        ),
+        onPointerDown: handlePointerDownOnSlider,
       },
-      React.createElement(index_js_1.Box, { className: 'iui-slider-rail' }),
+      React.createElement(index_js_1.Box, {
+        as: 'div',
+        ...railProps,
+        className: (0, classnames_1.default)(
+          'iui-slider-rail',
+          railProps?.className,
+        ),
+      }),
       currentValues.map((thumbValue, index) => {
         const [minVal, maxVal] = getAllowableThumbRange(index);
         const thisThumbProps = thumbProps?.(index);
@@ -363,13 +403,21 @@ exports.Slider = React.forwardRef((props, ref) => {
         sliderMax: max,
         values: currentValues,
         orientation: orientation,
+        ...trackProps,
       }),
       tickMarkArea,
     ),
     maxValueLabel &&
       React.createElement(
         index_js_1.Box,
-        { as: 'span', className: 'iui-slider-max' },
+        {
+          as: 'span',
+          ...maxProps,
+          className: (0, classnames_1.default)(
+            'iui-slider-max',
+            maxProps?.className,
+          ),
+        },
         maxValueLabel,
       ),
   );

package/cjs/core/Slider/Thumb.js

@@ -101,8 +101,8 @@ const Thumb = (props) => {
       style: {
         ...style,
         ...(orientation === 'horizontal'
-          ? { left: `${lowPercent}%` }
-          : { bottom: `${lowPercent}%` }),
+          ? { insetInlineStart: `${lowPercent}%` }
+          : { insetBlockEnd: `${lowPercent}%` }),
       },
       className: (0, classnames_1.default)(
         'iui-slider-thumb',

package/cjs/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/cjs/core/Slider/Track.js

@@ -7,6 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 function shouldDisplaySegment(segmentIndex, mode) {
   if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
@@ -41,7 +42,14 @@ function generateSegments(values, min, max) {
  * colorized is based on `trackDisplayMode`.
  */
 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),
   );
@@ -67,16 +75,19 @@ const Track = (props) => {
           { key: index },
           shouldDisplaySegment(index, trackDisplayMode)
             ? React.createElement(index_js_1.Box, {
-                className: 'iui-slider-track',
+                className: (0, classnames_1.default)(
+                  'iui-slider-track',
+                  className,
+                ),
                 style: {
                   ...(orientation === 'horizontal'
                     ? {
-                        left: `${lowPercent}%`,
-                        right: `${highPercent}%`,
+                        insetInlineStart: `${lowPercent}%`,
+                        insetInlineEnd: `${highPercent}%`,
                       }
                     : {
-                        top: `${highPercent}%`,
-                        bottom: `${lowPercent}%`,
+                        insetBlockStart: `${highPercent}%`,
+                        insetBlockEnd: `${lowPercent}%`,
                       }),
                 },
               })

package/cjs/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/cjs/core/Stepper/Stepper.js

@@ -6,6 +6,7 @@ const tslib_1 = require('tslib');
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const StepperStep_js_1 = require('./StepperStep.js');
@@ -20,6 +21,12 @@ exports.Stepper = React.forwardRef((props, ref) => {
     type = 'default',
     localization = defaultStepperLocalization,
     onStepClick,
+    stepProps,
+    trackContentProps,
+    circleProps,
+    nameProps,
+    labelProps,
+    labelCountProps,
     ...rest
   } = props;
   const boundedCurrentStep = Math.min(
@@ -32,8 +39,16 @@ exports.Stepper = React.forwardRef((props, ref) => {
     React.createElement(
       'ol',
       null,
-      steps.map((s, index) =>
-        React.createElement(StepperStep_js_1.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_js_1.StepperStep, {
+          stepProps: thisStepProps,
+          trackContentProps: thisTrackContentProps,
+          circleProps: thisCircleProps,
+          nameProps: thisNameProps,
           key: index,
           index: index,
           title: type === 'long' ? '' : s.name,
@@ -42,16 +57,30 @@ exports.Stepper = React.forwardRef((props, ref) => {
           type: type,
           onClick: onStepClick,
           description: s.description,
-        }),
-      ),
+        });
+      }),
     ),
     type === 'long' &&
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-stepper-steps-label' },
+        {
+          as: 'div',
+          ...labelProps,
+          className: (0, classnames_1.default)(
+            'iui-stepper-steps-label',
+            labelProps?.className,
+          ),
+        },
         React.createElement(
           index_js_1.Box,
-          { as: 'span', className: 'iui-stepper-steps-label-count' },
+          {
+            as: 'span',
+            ...labelCountProps,
+            className: (0, classnames_1.default)(
+              'iui-stepper-steps-label-count',
+              labelCountProps?.className,
+            ),
+          },
           localization.stepsCountLabel(boundedCurrentStep + 1, steps.length),
         ),
         steps[boundedCurrentStep].name,

package/cjs/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>;

package/cjs/core/Stepper/StepperStep.js

@@ -21,6 +21,10 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     description,
     className,
     style,
+    stepProps,
+    trackContentProps,
+    circleProps,
+    nameProps,
     ...rest
   } = props;
   const isPast = currentStepNumber > index;
@@ -46,17 +50,17 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     index_js_2.Box,
     {
       as: 'li',
+      ...stepProps,
       className: (0, classnames_1.default)(
         'iui-stepper-step',
-        {
-          'iui-current': isActive,
-          'iui-clickable': isClickable,
-        },
+        { 'iui-current': isActive, 'iui-clickable': isClickable },
         className,
+        stepProps?.className,
       ),
       style: {
-        width: type === 'default' ? `${100 / totalSteps}%` : undefined,
+        inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
         ...style,
+        ...stepProps?.style,
       },
       onClick: onCompletedClick,
       onKeyDown: onKeyDown,
@@ -67,17 +71,38 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     },
     React.createElement(
       index_js_2.Box,
-      { className: 'iui-stepper-track-content' },
+      {
+        as: 'div',
+        ...trackContentProps,
+        className: (0, classnames_1.default)(
+          'iui-stepper-track-content',
+          trackContentProps?.className,
+        ),
+      },
       React.createElement(
         index_js_2.Box,
-        { as: 'span', className: 'iui-stepper-circle' },
+        {
+          as: 'span',
+          ...circleProps,
+          className: (0, classnames_1.default)(
+            'iui-stepper-circle',
+            circleProps?.className,
+          ),
+        },
         index + 1,
       ),
     ),
     type === 'default' &&
       React.createElement(
         index_js_2.Box,
-        { as: 'span', className: 'iui-stepper-step-name' },
+        {
+          as: 'span',
+          ...nameProps,
+          className: (0, classnames_1.default)(
+            'iui-stepper-step-name',
+            nameProps?.className,
+          ),
+        },
         title,
       ),
   );

package/cjs/core/Stepper/WorkflowDiagram.d.ts

@@ -1,5 +1,15 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { StepperProps } from './Stepper.js';
-type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
+type WorkflowDiagramProps = Pick<StepperProps, 'steps'> & {
+    /**
+     *  Allows props to be passed for diagram.
+     */
+    contentProps?: (index: number) => React.ComponentProps<'span'>;
+    /**
+     *  Allows props to be passed for diagram wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+};
 export declare const WorkflowDiagram: PolymorphicForwardRefComponent<"ol", WorkflowDiagramProps>;
 export default WorkflowDiagram;

package/cjs/core/Stepper/WorkflowDiagram.js

@@ -7,25 +7,38 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 const WorkflowDiagramStep_js_1 = require('./WorkflowDiagramStep.js');
 exports.WorkflowDiagram = React.forwardRef(
   // TODO: Remove this ref cast. ref and rest props should be applied on the same element
   (props, ref) => {
-    const { steps, ...rest } = props;
+    const { steps, className, contentProps, wrapperProps, ...rest } = props;
     return React.createElement(
       index_js_1.Box,
-      { ref: ref },
+      { as: 'div', ...wrapperProps, ref: ref },
       React.createElement(
         index_js_1.Box,
-        { as: 'ol', className: 'iui-workflow-diagram', ...rest },
-        steps.map((s, index) =>
-          React.createElement(WorkflowDiagramStep_js_1.WorkflowDiagramStep, {
-            key: index,
-            title: s.name,
-            description: s.description,
-          }),
-        ),
+        {
+          as: 'ol',
+          className: (0, classnames_1.default)(
+            'iui-workflow-diagram',
+            className,
+          ),
+          ...rest,
+        },
+        steps.map((s, index) => {
+          const thisContentProps = contentProps?.(index);
+          return React.createElement(
+            WorkflowDiagramStep_js_1.WorkflowDiagramStep,
+            {
+              contentProps: thisContentProps,
+              key: index,
+              title: s.name,
+              description: s.description,
+            },
+          );
+        }),
       ),
     );
   },

package/cjs/core/Stepper/WorkflowDiagramStep.d.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { type CommonProps } from '../utils/index.js';
 import type { StepperStepProps } from './StepperStep.js';
-export type WorkflowDiagramStepProps = Pick<StepperStepProps, 'title' | 'description'> & Omit<CommonProps, 'title'>;
+export type WorkflowDiagramStepProps = {
+    /**
+     *  Allows props to be passed for diagram content.
+     */
+    contentProps?: React.ComponentProps<'span'>;
+} & Pick<StepperStepProps, 'title' | 'description'> & Omit<CommonProps, 'title'>;
 export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => React.JSX.Element;

package/cjs/core/Stepper/WorkflowDiagramStep.js

@@ -11,7 +11,7 @@ const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../Tooltip/index.js');
 const index_js_2 = require('../utils/index.js');
 const WorkflowDiagramStep = (props) => {
-  const { title, description, className, style, ...rest } = props;
+  const { title, description, className, style, contentProps, ...rest } = props;
   const stepShape = React.createElement(
     index_js_2.Box,
     {
@@ -25,7 +25,14 @@ const WorkflowDiagramStep = (props) => {
     },
     React.createElement(
       index_js_2.Box,
-      { as: 'span', className: 'iui-workflow-diagram-content' },
+      {
+        as: 'span',
+        ...contentProps,
+        className: (0, classnames_1.default)(
+          'iui-workflow-diagram-content',
+          contentProps?.className,
+        ),
+      },
       title,
     ),
   );

package/cjs/core/Table/SubRowExpander.js

@@ -20,7 +20,7 @@ const SubRowExpander = (props) => {
           index_js_2.IconButton,
           {
             style: {
-              marginRight:
+              marginInlineEnd:
                 density === 'default' || density === undefined ? 8 : 4,
             },
             className: 'iui-table-row-expander',

package/cjs/core/Table/Table.d.ts

@@ -190,6 +190,22 @@ export type TableProps<T extends Record<string, unknown> = Record<string, unknow
      * @default false
      */
     enableColumnReordering?: boolean;
+    /**
+     * Passes props to Table header wrapper.
+     */
+    headerWrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to Table header.
+     */
+    headerProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes custom props to Table body.
+     */
+    bodyProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes custom props to empty table.
+     */
+    emptyTableContentProps?: React.ComponentProps<'div'>;
     /**
      * Function that returns index of the row that you want to scroll to.
      *

package/cjs/core/Table/Table.js

@@ -117,6 +117,10 @@ const Table = (props) => {
     styleType = 'default',
     enableVirtualization = false,
     enableColumnReordering = false,
+    headerWrapperProps,
+    headerProps,
+    bodyProps,
+    emptyTableContentProps,
     ...rest
   } = props;
   (0, index_js_2.useGlobals)();
@@ -580,7 +584,7 @@ const Table = (props) => {
         return React.createElement(
           index_js_2.Box,
           {
-            className: 'iui-table-header-wrapper',
+            as: 'div',
             ref: headerRef,
             onScroll: () => {
               if (headerRef.current && bodyRef.current) {
@@ -589,10 +593,22 @@ const Table = (props) => {
               }
             },
             key: headerGroupProps.key,
+            ...headerWrapperProps,
+            className: (0, classnames_1.default)(
+              'iui-table-header-wrapper',
+              headerWrapperProps?.className,
+            ),
           },
           React.createElement(
             index_js_2.Box,
-            { className: 'iui-table-header' },
+            {
+              as: 'div',
+              ...headerProps,
+              className: (0, classnames_1.default)(
+                'iui-table-header',
+                headerProps?.className,
+              ),
+            },
             React.createElement(
               index_js_2.Box,
               { ...headerGroupProps },
@@ -712,10 +728,15 @@ const Table = (props) => {
       React.createElement(
         index_js_2.Box,
         {
+          ...bodyProps,
           ...getTableBodyProps({
-            className: (0, classnames_1.default)('iui-table-body', {
-              'iui-zebra-striping': styleType === 'zebra-rows',
-            }),
+            className: (0, classnames_1.default)(
+              'iui-table-body',
+              {
+                'iui-zebra-striping': styleType === 'zebra-rows',
+              },
+              bodyProps?.className,
+            ),
             style: { outline: 0 },
           }),
           ref: bodyRef,
@@ -745,7 +766,14 @@ const Table = (props) => {
           data.length === 0 &&
           React.createElement(
             index_js_2.Box,
-            { className: 'iui-table-empty' },
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: (0, classnames_1.default)(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
             React.createElement(index_js_1.ProgressRadial, {
               indeterminate: true,
             }),
@@ -764,7 +792,6 @@ const Table = (props) => {
               React.createElement(index_js_1.ProgressRadial, {
                 indeterminate: true,
                 size: 'small',
-                style: { float: 'none', marginLeft: 0 },
               }),
             ),
           ),
@@ -773,7 +800,14 @@ const Table = (props) => {
           !areFiltersSet &&
           React.createElement(
             index_js_2.Box,
-            { className: 'iui-table-empty' },
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: (0, classnames_1.default)(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
             React.createElement('div', null, emptyTableContent),
           ),
         !isLoading &&
@@ -781,7 +815,14 @@ const Table = (props) => {
           areFiltersSet &&
           React.createElement(
             index_js_2.Box,
-            { className: 'iui-table-empty' },
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: (0, classnames_1.default)(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
             React.createElement('div', null, emptyFilteredTableContent),
           ),
       ),

package/cjs/core/Table/TableCell.js

@@ -45,7 +45,7 @@ const TableCell = (props) => {
     }
     const multiplier = 26 + expanderMargin; // 26 = expander width
     return {
-      paddingLeft: cellPadding + dynamicMargin * multiplier,
+      paddingInlineStart: cellPadding + dynamicMargin * multiplier,
     };
   };
   const cellElementProps = cell.getCellProps({