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

package/esm/core/StatusMessage/StatusMessage.js

@@ -3,30 +3,37 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, StatusIconMap } from '../utils/index.js';
+import { Box, StatusIconMap, Icon } from '../utils/index.js';
+import cx from 'classnames';
 /**
- * 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 const StatusMessage = ({
-  startIcon: userStartIcon,
-  children,
-  status,
-}) => {
+export const StatusMessage = React.forwardRef((props, ref) => {
+  const {
+    children,
+    startIcon: userStartIcon,
+    status,
+    className,
+    iconProps,
+    contentProps,
+    ...rest
+  } = props;
   const icon = userStartIcon ?? (status && StatusIconMap[status]());
   return React.createElement(
-    React.Fragment,
-    null,
+    Box,
+    {
+      className: cx('iui-status-message', className),
+      'data-iui-status': status,
+      ref: ref,
+      ...rest,
+    },
     !!icon
-      ? React.createElement(
-          Box,
-          { as: 'span', className: 'iui-input-icon', 'aria-hidden': true },
-          icon,
-        )
+      ? React.createElement(Icon, { 'aria-hidden': true, ...iconProps }, icon)
       : null,
-    React.createElement(Box, { className: 'iui-message' }, children),
+    React.createElement(Box, { ...contentProps }, children),
   );
-};
+});
 export default StatusMessage;

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>;

package/esm/core/Stepper/StepperStep.js

@@ -17,6 +17,10 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     description,
     className,
     style,
+    stepProps,
+    trackContentProps,
+    circleProps,
+    nameProps,
     ...rest
   } = props;
   const isPast = currentStepNumber > index;
@@ -42,17 +46,17 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     Box,
     {
       as: 'li',
+      ...stepProps,
       className: cx(
         '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,
@@ -63,17 +67,32 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     },
     React.createElement(
       Box,
-      { className: 'iui-stepper-track-content' },
+      {
+        as: 'div',
+        ...trackContentProps,
+        className: cx(
+          'iui-stepper-track-content',
+          trackContentProps?.className,
+        ),
+      },
       React.createElement(
         Box,
-        { as: 'span', className: 'iui-stepper-circle' },
+        {
+          as: 'span',
+          ...circleProps,
+          className: cx('iui-stepper-circle', circleProps?.className),
+        },
         index + 1,
       ),
     ),
     type === 'default' &&
       React.createElement(
         Box,
-        { as: 'span', className: 'iui-stepper-step-name' },
+        {
+          as: 'span',
+          ...nameProps,
+          className: cx('iui-stepper-step-name', nameProps?.className),
+        },
         title,
       ),
   );

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

@@ -3,25 +3,28 @@
  * 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';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
 export const 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(
       Box,
-      { ref: ref },
+      { as: 'div', ...wrapperProps, ref: ref },
       React.createElement(
         Box,
-        { as: 'ol', className: 'iui-workflow-diagram', ...rest },
-        steps.map((s, index) =>
-          React.createElement(WorkflowDiagramStep, {
+        { as: 'ol', className: cx('iui-workflow-diagram', className), ...rest },
+        steps.map((s, index) => {
+          const thisContentProps = contentProps?.(index);
+          return React.createElement(WorkflowDiagramStep, {
+            contentProps: thisContentProps,
             key: index,
             title: s.name,
             description: s.description,
-          }),
-        ),
+          });
+        }),
       ),
     );
   },

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

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { Tooltip } from '../Tooltip/index.js';
 import { Box } from '../utils/index.js';
 export const WorkflowDiagramStep = (props) => {
-  const { title, description, className, style, ...rest } = props;
+  const { title, description, className, style, contentProps, ...rest } = props;
   const stepShape = React.createElement(
     Box,
     {
@@ -18,7 +18,11 @@ export const WorkflowDiagramStep = (props) => {
     },
     React.createElement(
       Box,
-      { as: 'span', className: 'iui-workflow-diagram-content' },
+      {
+        as: 'span',
+        ...contentProps,
+        className: cx('iui-workflow-diagram-content', contentProps?.className),
+      },
       title,
     ),
   );

package/esm/core/Table/SubRowExpander.js

@@ -15,8 +15,10 @@ export const SubRowExpander = (props) => {
       : React.createElement(
           IconButton,
           {
+            'aria-label': 'Toggle sub row',
+            'aria-expanded': cell.row.isExpanded ? 'true' : 'false',
             style: {
-              marginRight:
+              marginInlineEnd:
                 density === 'default' || density === undefined ? 8 : 4,
             },
             className: 'iui-table-row-expander',

package/esm/core/Table/Table.js

@@ -798,7 +798,6 @@ export const Table = (props) => {
               React.createElement(ProgressRadial, {
                 indeterminate: true,
                 size: 'small',
-                style: { float: 'none', marginLeft: 0 },
               }),
             ),
           ),

package/esm/core/Table/TableCell.js

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

package/esm/core/Table/TablePaginator.js

@@ -15,6 +15,7 @@ import {
   SvgChevronLeft,
   SvgChevronRight,
   Box,
+  ButtonBase,
 } from '../utils/index.js';
 const defaultLocalization = {
   pageSizeLabel: (size) => `${size} per page`,
@@ -86,11 +87,9 @@ export const TablePaginator = (props) => {
   const pageButton = React.useCallback(
     (index, tabIndex = index === focusedIndex ? 0 : -1) =>
       React.createElement(
-        Box,
+        ButtonBase,
         {
-          as: 'button',
           key: index,
-          type: 'button',
           className: cx('iui-table-paginator-page-button', {
             'iui-table-paginator-page-button-small': buttonSize === 'small',
           }),

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { LabeledInput } from '../../../LabeledInput/index.js';
 import type { PolymorphicForwardRefComponent } from '../../../utils/index.js';
-import { LabeledInput } from '../../../LabeledInput/index.js';
+import type { DatePickerLocalizedNames } from '../../../DatePicker/DatePicker.js';
 export type DatePickerInputProps = {
     date?: Date;
     onChange: (date?: Date) => void;
@@ -14,6 +15,10 @@ export type DatePickerInputProps = {
      * The 'to' date for the 'from' DatePickerInput or the 'from' date for the 'to' DatePickerInput
      */
     selectedDate?: Date;
+    /**
+     * Months, short days and days localized names for DatePicker
+     */
+    localizedNames?: DatePickerLocalizedNames;
 } & Omit<React.ComponentProps<typeof LabeledInput>, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
 declare const DatePickerInput: PolymorphicForwardRefComponent<"input", DatePickerInputProps>;
 export default DatePickerInput;

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -3,18 +3,28 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, SvgCalendar, isBefore } from '../../../utils/index.js';
-import { LabeledInput } from '../../../LabeledInput/index.js';
+import { Popover, SvgCalendar, isBefore, useId } from '../../../utils/index.js';
 import { DatePicker } from '../../../DatePicker/index.js';
-import { IconButton } from '../../../Buttons/index.js';
+import { InputGrid } from '../../../InputGrid/index.js';
+import { Label } from '../../../Label/index.js';
+import { InputWithDecorations } from '../../../InputWithDecorations/index.js';
 const DatePickerInput = React.forwardRef((props, forwardedRef) => {
+  const uid = useId();
   const {
     onChange,
     date,
     parseInput,
     formatDate,
+    label,
+    required,
+    disabled,
     isFromOrTo,
     selectedDate,
+    wrapperProps,
+    labelProps,
+    inputWrapperProps,
+    id = uid,
+    localizedNames,
     ...rest
   } = props;
   const isDateDisabled = (date) => {
@@ -63,6 +73,7 @@ const DatePickerInput = React.forwardRef((props, forwardedRef) => {
         onChange: onDateSelected,
         setFocus: true,
         isDateDisabled: isDateDisabled,
+        localizedNames: localizedNames,
       }),
       placement: 'bottom',
       visible: isVisible,
@@ -73,23 +84,40 @@ const DatePickerInput = React.forwardRef((props, forwardedRef) => {
       },
       appendTo: 'parent',
     },
-    React.createElement(LabeledInput, {
-      ref: forwardedRef,
-      displayStyle: 'inline',
-      value: inputValue,
-      onChange: onInputChange,
-      onClick: close,
-      svgIcon: React.createElement(
-        IconButton,
+    React.createElement(
+      InputGrid,
+      { labelPlacement: 'inline', ...wrapperProps },
+      React.createElement(
+        Label,
         {
-          styleType: 'borderless',
-          onClick: () => setIsVisible((v) => !v),
-          ref: buttonRef,
+          as: 'label',
+          required: required,
+          disabled: disabled,
+          htmlFor: id,
+          ...labelProps,
         },
-        React.createElement(SvgCalendar, null),
+        label,
       ),
-      ...rest,
-    }),
+      React.createElement(
+        InputWithDecorations,
+        { ...inputWrapperProps },
+        React.createElement(InputWithDecorations.Input, {
+          id: id,
+          value: inputValue,
+          onChange: onInputChange,
+          onClick: close,
+          required: required,
+          disabled: disabled,
+          ref: forwardedRef,
+          ...rest,
+        }),
+        React.createElement(
+          InputWithDecorations.Button,
+          { onClick: () => setIsVisible((v) => !v), ref: buttonRef },
+          React.createElement(SvgCalendar, null),
+        ),
+      ),
+    ),
   );
 });
 export default DatePickerInput;

package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
+import type { DatePickerLocalizedNames } from '../../../DatePicker/DatePicker.js';
 export type DateRangeTranslation = {
     from: string;
     to: string;
+    datePicker?: DatePickerLocalizedNames;
 };
 export type DateRangeFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
     formatDate?: (date: Date) => string;

package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -104,6 +104,7 @@ export const DateRangeFilter = (props) => {
       placeholder: placeholder,
       selectedDate: to,
       isFromOrTo: 'from',
+      localizedNames: translatedStrings.datePicker,
     }),
     React.createElement(DatePickerInput, {
       label: translatedStrings.to,
@@ -115,6 +116,7 @@ export const DateRangeFilter = (props) => {
       placeholder: placeholder,
       selectedDate: from,
       isFromOrTo: 'to',
+      localizedNames: translatedStrings.datePicker,
     }),
     React.createElement(FilterButtonBar, {
       setFilter: () => setFilter([from, to]),

package/esm/core/Tabs/Tab.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
+import { Box, ButtonBase } from '../utils/index.js';
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -24,9 +24,8 @@ export const Tab = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return React.createElement(
-    Box,
+    ButtonBase,
     {
-      as: 'button',
       className: cx('iui-tab', { 'iui-active': active }, className),
       role: 'tab',
       tabIndex: -1,

package/esm/core/Textarea/Textarea.d.ts

@@ -1,9 +1,15 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+export type TextareaProps = {
+    /**
+     * Status of textarea.
+     */
+    status?: 'positive' | 'warning' | 'negative';
+};
 /**
  * Basic textarea component
  * @example
  * <Textarea placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-export declare const Textarea: PolymorphicForwardRefComponent<"textarea", {}>;
+export declare const Textarea: PolymorphicForwardRefComponent<"textarea", TextareaProps>;
 export default Textarea;

package/esm/core/Textarea/Textarea.js

@@ -2,25 +2,20 @@
  * 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 { useMergedRefs, Box } from '../utils/index.js';
+import { Input } from '../Input/index.js';
 /**
  * Basic textarea component
  * @example
  * <Textarea placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-export const Textarea = React.forwardRef((props, ref) => {
-  const { className, rows = 3, ...rest } = props;
-  const textAreaRef = React.useRef(null);
-  const refs = useMergedRefs(ref, textAreaRef);
-  return React.createElement(Box, {
+export const Textarea = React.forwardRef((props, forwardedRef) => {
+  return React.createElement(Input, {
     as: 'textarea',
-    className: cx('iui-input', className),
-    rows: rows,
-    ref: refs,
-    ...rest,
+    rows: 3,
+    ref: forwardedRef,
+    ...props,
   });
 });
 export default Textarea;

package/esm/core/ThemeProvider/ThemeContext.d.ts

@@ -3,5 +3,5 @@ import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;
     themeOptions?: ThemeOptions | undefined;
-    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
+    portalContainer?: HTMLElement | null | undefined;
 } | undefined>;