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

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;
@@ -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.js

@@ -44,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);

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

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;

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/Table/SubRowExpander.js

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

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

@@ -10,7 +10,7 @@ import {
   useMergedRefs,
   Box,
   useIsomorphicLayoutEffect,
-  useUncontrolledState,
+  useControlledState,
 } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
@@ -50,8 +50,9 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     portalContainer: portalContainerProp,
     ...rest
   } = props;
-  const [portalContainer, setPortalContainer] = useUncontrolledState(
-    portalContainerProp || null,
+  const [portalContainer, setPortalContainer] = useControlledState(
+    null,
+    portalContainerProp,
   );
   const [parentTheme, rootRef] = useParentTheme();
   const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;

package/esm/core/Tile/Tile.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
-type TileOwnProps = {
+type TileWrapperOwnProps = {
     /**
      * Status of the tile.
      */
@@ -46,12 +46,119 @@ type TileNameOwnProps = {
 };
 type TileMoreOptionsOwnProps = {
     buttonProps?: React.ComponentPropsWithoutRef<typeof IconButton>;
-    children?: React.ReactElement[];
+    children?: React.ReactNode[];
+};
+type TileLegacyProps = {
+    /**
+     * Name or title of the tile.
+     */
+    name: React.ReactNode;
+    /**
+     * Description text of the tile.
+     * Gets truncated if it can't fit in the tile.
+     */
+    description?: React.ReactNode;
+    /**
+     * Metadata section located below description.
+     * @example
+     * <Tile
+     *  // ...
+     *  metadata='basic metadata'
+     *  // or
+     *  metadata={<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
+     *  // or
+     *  metadata={<>
+     *    <SvgTag2 />
+     *    <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
+     *  </>}
+     * />
+     */
+    metadata?: React.ReactNode;
+    /**
+     * Thumbnail image url, a custom component or an svg.
+     * @example
+     * <Tile
+     *  // ...
+     *  thumbnail='/url/to/image.jpg'
+     *  // or
+     *  thumbnail={<Avatar image={<img src='icon.png' />} />}
+     *  // or
+     *  thumbnail={<SvgImodelHollow />}
+     * />
+     */
+    thumbnail?: string | React.ReactNode;
+    /**
+     * `Badge` shown on the bottom right of thumbnail.
+     */
+    badge?: React.ReactNode;
+    /**
+     * Icon shown on top left of the tile. Also known as "type indicator".
+     * Recommended to use an invisible `IconButton`.
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon shown on top right of the tile. Also known as "quick action".
+     * Recommended to use an invisible `IconButton`.
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Upto two buttons shown at the bottom of the tile.
+     */
+    buttons?: [React.ReactNode?, React.ReactNode?];
+    /**
+     * Dropdown menu containing `MenuItem`s.
+     */
+    moreOptions?: React.ReactNode[];
+    /**
+     * Status of the tile.
+     */
+    status?: 'positive' | 'warning' | 'negative';
+    /**
+     * Whether the tile is selected or in "active" state.
+     * Gets highlighted and shows a checkmark icon near tile name.
+     */
+    isSelected?: boolean;
+    /**
+     * Whether the tile is "new". Tile name becomes bold and gets a new status icon.
+     */
+    isNew?: boolean;
+    /**
+     * Default tile variant or the folder layout.
+     * @default 'default'
+     */
+    variant?: 'default' | 'folder';
+    /**
+     * Any custom nodes that will be appended to the tile's main content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the tile is expected to be interactable (i.e. `onClick`).
+     * It becomes focusable and gets on hover styling.
+     */
+    isActionable?: boolean;
+    /**
+     * Display a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Flag whether the tile is disabled.
+     *
+     * Note: This only affects the tile. You need to manually disable
+     * the buttons and other interactive elements inside the tile.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Adds onClick to the TileAction component.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
 };
 /**
  * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents
  * @example
- * <Tile>
+ * <Tile.Wrapper>
  *    <Tile.ThumbnailArea>
  *      <Tile.ThumbnailPicture/>
  *      <Tile.Badge/>
@@ -61,23 +168,40 @@ type TileMoreOptionsOwnProps = {
  *    <Tile.Name>
  *      <Tile.NameIcon/>
  *      <Tile.NameLabel/>
- *    <Tile.Name/>
+ *    </Tile.Name>
  *    <Tile.ContentArea>
  *      <Tile.Description />
  *      <Tile.Metadata/>
  *      <Tile.MoreOptions/>
  *    </Tile.ContentArea>
  *    <Tile.Buttons/>
- * </Tile>
+ * </Tile.Wrapper>
+ *
+ * @example
+ *  <Tile
+ *  name='Tile name'
+ *  description='Tile description that takes upto 3 lines'
+ *  metadata={<TagContainer><Tag variant='basic'>Tag 1</Tag></TagContainer>}
+ *  thumbnail='/url/to/image.jpg'
+ *  badge={<Badge backgroundColor='blue'>Badge label</Badge>}
+ *  buttons={[<Button>Button 1</Button>, <Button>Button 2</Button>]}
+ *  moreOptions={[<MenuItem>Item 1</MenuItem>, <MenuItem>Item 2</MenuItem>]}
+ *  leftIcon={<IconButton><SvgInfo /></IconButton>}
+ *  rightIcon={<IconButton><SvgStar /></IconButton>}
+ *  isSelected={true}
+ *  isNew={false}
+ * />
  */
-export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> & {
+export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps> & {
+    /**
+     * Wrapper subcomponent for fully customisable Tile.
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", TileWrapperOwnProps>;
     /**
      * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
      * @example
      * <Tile.ThumbnailArea>
      *    <Tile.ThumbnailPicture/>
-     *    // or
-     *    <Tile.ThumbnailAvatar/>
      *    <Tile.QuickAction/>
      *    <Tile.TypeIndicator/>
      *    <Tile.BadgeContainer/>
@@ -87,14 +211,14 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> &
     /**
      * Thumbnail image url, a custom component or an svg for thumbnail avatar.
      * @example
-     * <Tile>
+     * <Tile.Wrapper>
      *  // ...
      *  <Tile.ThumbnailArea>
      *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
      *  </Tile.ThumbnailArea>
-     * </Tile>
+     * </Tile.Wrapper>
      * or
-     * <Tile>
+     * <Tile.Wrapper>
      *  // ...
      *  <Tile.ThumbnailArea>
      *    <Tile.ThumbnailPicture>
@@ -139,11 +263,11 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> &
     /**
      * `NameIcon` next to name of the tile. Goes under <Tile.Name>
      * @example
-     * <Tile>
+     * <Tile.Wrapper>
      *  <Tile.Name>
      *    <Tile.NameIcon/>
      *  </Tile.Name>
-     * <Tile/>
+     * </Tile.Wrapper>
      */
     NameIcon: PolymorphicForwardRefComponent<"div", {}>;
     NameLabel: PolymorphicForwardRefComponent<"span", {}>;
@@ -161,13 +285,13 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> &
     /**
      * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
      * @example
-     * <Tile>
+     * <Tile.Wrapper>
      *  <Tile.ContentArea>
      *    <Tile.Description/>
      *    <Tile.Metadata/>
      *    <Tile.MoreOptions/>
      *  </Tile.ContentArea>
-     * </Tile>
+     * </Tile.Wrapper>
      */
     ContentArea: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
     /**