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

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

@@ -19,8 +19,10 @@ const SubRowExpander = (props) => {
       : React.createElement(
           index_js_2.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/cjs/core/Table/Table.js

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

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({

package/cjs/core/Table/TablePaginator.js

@@ -82,11 +82,9 @@ const TablePaginator = (props) => {
   const pageButton = React.useCallback(
     (index, tabIndex = index === focusedIndex ? 0 : -1) =>
       React.createElement(
-        index_js_4.Box,
+        index_js_4.ButtonBase,
         {
-          as: 'button',
           key: index,
-          type: 'button',
           className: (0, classnames_1.default)(
             'iui-table-paginator-page-button',
             {

package/cjs/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/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -7,17 +7,27 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../../../utils/index.js');
-const index_js_2 = require('../../../LabeledInput/index.js');
-const index_js_3 = require('../../../DatePicker/index.js');
-const index_js_4 = require('../../../Buttons/index.js');
+const index_js_2 = require('../../../DatePicker/index.js');
+const index_js_3 = require('../../../InputGrid/index.js');
+const index_js_4 = require('../../../Label/index.js');
+const index_js_5 = require('../../../InputWithDecorations/index.js');
 const DatePickerInput = React.forwardRef((props, forwardedRef) => {
+  const uid = (0, index_js_1.useId)();
   const {
     onChange,
     date,
     parseInput,
     formatDate,
+    label,
+    required,
+    disabled,
     isFromOrTo,
     selectedDate,
+    wrapperProps,
+    labelProps,
+    inputWrapperProps,
+    id = uid,
+    localizedNames,
     ...rest
   } = props;
   const isDateDisabled = (date) => {
@@ -61,11 +71,12 @@ const DatePickerInput = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     index_js_1.Popover,
     {
-      content: React.createElement(index_js_3.DatePicker, {
+      content: React.createElement(index_js_2.DatePicker, {
         date: date,
         onChange: onDateSelected,
         setFocus: true,
         isDateDisabled: isDateDisabled,
+        localizedNames: localizedNames,
       }),
       placement: 'bottom',
       visible: isVisible,
@@ -76,23 +87,40 @@ const DatePickerInput = React.forwardRef((props, forwardedRef) => {
       },
       appendTo: 'parent',
     },
-    React.createElement(index_js_2.LabeledInput, {
-      ref: forwardedRef,
-      displayStyle: 'inline',
-      value: inputValue,
-      onChange: onInputChange,
-      onClick: close,
-      svgIcon: React.createElement(
-        index_js_4.IconButton,
+    React.createElement(
+      index_js_3.InputGrid,
+      { labelPlacement: 'inline', ...wrapperProps },
+      React.createElement(
+        index_js_4.Label,
         {
-          styleType: 'borderless',
-          onClick: () => setIsVisible((v) => !v),
-          ref: buttonRef,
+          as: 'label',
+          required: required,
+          disabled: disabled,
+          htmlFor: id,
+          ...labelProps,
         },
-        React.createElement(index_js_1.SvgCalendar, null),
+        label,
       ),
-      ...rest,
-    }),
+      React.createElement(
+        index_js_5.InputWithDecorations,
+        { ...inputWrapperProps },
+        React.createElement(index_js_5.InputWithDecorations.Input, {
+          id: id,
+          value: inputValue,
+          onChange: onInputChange,
+          onClick: close,
+          required: required,
+          disabled: disabled,
+          ref: forwardedRef,
+          ...rest,
+        }),
+        React.createElement(
+          index_js_5.InputWithDecorations.Button,
+          { onClick: () => setIsVisible((v) => !v), ref: buttonRef },
+          React.createElement(index_js_1.SvgCalendar, null),
+        ),
+      ),
+    ),
   );
 });
 exports.default = DatePickerInput;

package/cjs/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/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -110,6 +110,7 @@ const DateRangeFilter = (props) => {
       placeholder: placeholder,
       selectedDate: to,
       isFromOrTo: 'from',
+      localizedNames: translatedStrings.datePicker,
     }),
     React.createElement(DatePickerInput_js_1.default, {
       label: translatedStrings.to,
@@ -121,6 +122,7 @@ const DateRangeFilter = (props) => {
       placeholder: placeholder,
       selectedDate: from,
       isFromOrTo: 'to',
+      localizedNames: translatedStrings.datePicker,
     }),
     React.createElement(FilterButtonBar_js_1.FilterButtonBar, {
       setFilter: () => setFilter([from, to]),

package/cjs/core/Tabs/Tab.js

@@ -28,9 +28,8 @@ exports.Tab = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.ButtonBase,
     {
-      as: 'button',
       className: (0, classnames_1.default)(
         'iui-tab',
         { 'iui-active': active },

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

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

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

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -44,11 +44,31 @@ type RootProps = {
 type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
+    /**
+     * The element used as the portal for floating elements (Tooltip, Toast, DropdownMenu, Dialog, etc).
+     *
+     * Defaults to a `<div>` rendered at the end of the ThemeProvider.
+     *
+     * When passing an element, it is recommended to use state.
+     *
+     * @example
+     * const [myPortal, setMyPortal] = React.useState(null);
+     *
+     * <div ref={setMyPortal} />
+     * <ThemeProvider
+     *   portalContainer={myPortal}
+     * >
+     *   ...
+     * </ThemeProvider>
+     */
+    portalContainer?: HTMLElement;
 };
 /**
- * This component provides global styles and applies theme to the entire tree
- * that it is wrapping around. The `theme` prop is optional and defaults to the
- * light theme.
+ * This component provides global state and applies theme to the entire tree
+ * that it is wrapping around.
+ *
+ * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
+ * and falls back to "light" theme if one is not found.
  *
  * If you want to theme the entire app, you should use this component at the root. You can also
  * use this component to apply a different theme to only a part of the tree.

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -7,14 +7,17 @@ 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 ReactDOM = tslib_1.__importStar(require('react-dom'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 const ThemeContext_js_1 = require('./ThemeContext.js');
 const Toaster_js_1 = require('../Toast/Toaster.js');
 /**
- * This component provides global styles and applies theme to the entire tree
- * that it is wrapping around. The `theme` prop is optional and defaults to the
- * light theme.
+ * This component provides global state and applies theme to the entire tree
+ * that it is wrapping around.
+ *
+ * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
+ * and falls back to "light" theme if one is not found.
  *
  * If you want to theme the entire app, you should use this component at the root. You can also
  * use this component to apply a different theme to only a part of the tree.
@@ -37,18 +40,22 @@ const Toaster_js_1 = require('../Toast/Toaster.js');
  *  <App />
  * </ThemeProvider>
  */
-exports.ThemeProvider = React.forwardRef((props, ref) => {
-  const { theme: themeProp, children, themeOptions, ...rest } = props;
-  const portalContainerRef = React.useRef(null);
-  const parentContext = React.useContext(ThemeContext_js_1.ThemeContext);
-  const theme =
-    themeProp === 'inherit' ? parentContext?.theme ?? 'light' : themeProp;
-  const shouldApplyBackground =
-    themeOptions?.applyBackground ??
-    (themeProp === 'inherit' ? false : !parentContext);
+exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
+  const {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions,
+    portalContainer: portalContainerProp,
+    ...rest
+  } = props;
+  const [portalContainer, setPortalContainer] = (0,
+  index_js_1.useControlledState)(null, portalContainerProp);
+  const [parentTheme, rootRef] = useParentTheme();
+  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+  const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
   const contextValue = React.useMemo(
-    () => ({ theme, themeOptions, portalContainerRef }),
-    [theme, themeOptions],
+    () => ({ theme, themeOptions, portalContainer }),
+    [theme, themeOptions, portalContainer],
   );
   return React.createElement(
     ThemeContext_js_1.ThemeContext.Provider,
@@ -59,23 +66,29 @@ exports.ThemeProvider = React.forwardRef((props, ref) => {
         theme: theme,
         shouldApplyBackground: shouldApplyBackground,
         themeOptions: themeOptions,
-        ref: ref,
+        ref: (0, index_js_1.useMergedRefs)(forwardedRef, rootRef),
         ...rest,
       },
       React.createElement(
         Toaster_js_1.ToastProvider,
         null,
         children,
-        React.createElement(
-          'div',
-          { ref: portalContainerRef },
-          React.createElement(Toaster_js_1.Toaster, null),
-        ),
+        portalContainerProp
+          ? ReactDOM.createPortal(
+              React.createElement(Toaster_js_1.Toaster, null),
+              portalContainerProp,
+            )
+          : React.createElement(
+              'div',
+              { ref: setPortalContainer },
+              React.createElement(Toaster_js_1.Toaster, null),
+            ),
       ),
     ),
   );
 });
 exports.default = exports.ThemeProvider;
+// ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
   const {
     theme,
@@ -85,8 +98,6 @@ const Root = React.forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
-  const ref = React.useRef(null);
-  const mergedRefs = (0, index_js_1.useMergedRefs)(ref, forwardedRef);
   const prefersDark = (0, index_js_1.useMediaQuery)(
     '(prefers-color-scheme: dark)',
   );
@@ -105,9 +116,31 @@ const Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      ref: mergedRefs,
+      ref: forwardedRef,
       ...rest,
     },
     children,
   );
 });
+// ----------------------------------------------------------------------------
+/**
+ * Returns theme from either parent context or by reading the closest
+ * data-iui-theme attribute if context is not found.
+ */
+const useParentTheme = () => {
+  const parentContext = React.useContext(ThemeContext_js_1.ThemeContext);
+  const rootRef = React.useRef(null);
+  const [parentThemeState, setParentTheme] = React.useState(
+    parentContext?.theme,
+  );
+  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    setParentTheme(
+      (old) =>
+        old ||
+        rootRef.current?.parentElement
+          ?.closest('[data-iui-theme]')
+          ?.getAttribute('data-iui-theme'),
+    );
+  }, []);
+  return [parentContext?.theme ?? parentThemeState, rootRef];
+};