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

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) => {
@@ -59,40 +69,53 @@ const DatePickerInput = React.forwardRef((props, forwardedRef) => {
     [onChange, parseInput],
   );
   return React.createElement(
-    index_js_1.Popover,
-    {
-      content: React.createElement(index_js_3.DatePicker, {
-        date: date,
-        onChange: onDateSelected,
-        setFocus: true,
-        isDateDisabled: isDateDisabled,
-      }),
-      placement: 'bottom',
-      visible: isVisible,
-      onClickOutside: (_, e) => {
-        if (!buttonRef.current?.contains(e.target)) {
-          close();
-        }
+    index_js_3.InputGrid,
+    { labelPlacement: 'inline', ...wrapperProps },
+    React.createElement(
+      index_js_4.Label,
+      {
+        as: 'label',
+        required: required,
+        disabled: disabled,
+        htmlFor: id,
+        ...labelProps,
       },
-      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,
+      label,
+    ),
+    React.createElement(
+      index_js_5.InputWithDecorations,
+      { ...inputWrapperProps },
+      React.createElement(index_js_5.InputWithDecorations.Input, {
+        id: id,
+        value: inputValue,
+        onChange: onInputChange,
+        required: required,
+        disabled: disabled,
+        ref: forwardedRef,
+        ...rest,
+      }),
+      React.createElement(
+        index_js_1.Popover,
         {
-          styleType: 'borderless',
-          onClick: () => setIsVisible((v) => !v),
-          ref: buttonRef,
+          content: React.createElement(index_js_2.DatePicker, {
+            date: date,
+            onChange: onDateSelected,
+            setFocus: true,
+            isDateDisabled: isDateDisabled,
+            localizedNames: localizedNames,
+          }),
+          placement: 'bottom-end',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
         },
-        React.createElement(index_js_1.SvgCalendar, null),
+        React.createElement(
+          index_js_5.InputWithDecorations.Button,
+          { 'aria-label': 'Date picker', ref: buttonRef },
+          React.createElement(index_js_1.SvgCalendar, null),
+        ),
       ),
-      ...rest,
-    }),
+    ),
   );
 });
 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/Table/filters/FilterToggle.js

@@ -42,7 +42,8 @@ const FilterToggle = (props) => {
           content: column.render('Filter', { close, setFilter, clearFilter }),
           placement: 'bottom-start',
           visible: isVisible,
-          onClickOutside: close,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
         },
         React.createElement(
           index_js_2.IconButton,
@@ -53,8 +54,8 @@ const FilterToggle = (props) => {
               'iui-table-filter-button',
               className,
             ),
+            'aria-label': 'Filter',
             onClick: (e) => {
-              setIsVisible((v) => !v);
               // Prevents from triggering sort
               e.stopPropagation();
             },

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

@@ -49,7 +49,7 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const [portalContainer, setPortalContainer] = (0,
-  index_js_1.useUncontrolledState)(portalContainerProp || null);
+  index_js_1.useControlledState)(null, portalContainerProp);
   const [parentTheme, rootRef] = useParentTheme();
   const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
   const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;

package/cjs/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>, {}>;
     /**