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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 3.0.0-dev.6
+
+### Major Changes
+
+- [#1409](https://github.com/iTwin/iTwinUI/pull/1409): `RadioTile`'s `className` and `style` props will now be applied on the `<input>` element instead of the wrapper. Added `wrapperProps`, `iconProps`, `labelProps`, `subLabelProps` to individually customize each part of the component.
+
+### Minor Changes
+
+- [#1457](https://github.com/iTwin/iTwinUI/pull/1457): Added `htmlName` prop to the `HeaderButton` subcomponent which handles the native `name` attribute in `<button>`.
+- [#1437](https://github.com/iTwin/iTwinUI/pull/1437): Added headerWrapperProps, headerProps, bodyProps, and emptyTableContentProps to make each part of the Table component more customizable.
+- [#1412](https://github.com/iTwin/iTwinUI/pull/1412): All styles have been wrapped inside a cascade layer named `itwinui`.
+- [#1419](https://github.com/iTwin/iTwinUI/pull/1419): Added `htmlSize` prop to the `Input` component which handles the native `size` attribute in `<input>`.
+
+### Patch Changes
+
+- [#1420](https://github.com/iTwin/iTwinUI/pull/1420): RadioTile DOM has been simplified to remove a content wrapper `div`.
+
 ## 3.0.0-dev.5
 
 ### Major Changes
@@ -103,6 +120,41 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.12.0
+
+### Minor Changes
+
+- [#1415](https://github.com/iTwin/iTwinUI/pull/1415): The styling strategy has changed so there will now be a single stylesheet included at runtime, instead of separate css imports inside every component. All the styles are also wrapped in a cascade layer named `itwinui`. This behavior can be customized using the `includeCss` prop in `ThemeProvider`.
+
+  **Important note**: The dependencies on `@itwin/itwinui-css` and `@itwin/itwinui-variables` have been removed, so these packages _don't_ need to be installed if you are only using components from `@itwin/itwinui-react`.
+
+- [#1422](https://github.com/iTwin/iTwinUI/pull/1422): Changed `all: revert` to `all: revert-layer` so that only styles from the v1 layer are reverted, thus avoiding issues with inadvertently removing browser default styles.
+- [#1443](https://github.com/iTwin/iTwinUI/pull/1443): `DropdownButton` now supports `styleType='high-visibility'` to make it blue. This should be used sparingly, as a default or borderless dropdown button is the better choice in most cases.
+- [#1454](https://github.com/iTwin/iTwinUI/pull/1454): Added `disabled` prop to `ExpandableBlock` to disable intersction with it.
+- [#1441](https://github.com/iTwin/iTwinUI/pull/1441): Added `placement` prop to `Dialog` to allow placing it at one of the corners.
+
+## 2.11.11
+
+### Patch Changes
+
+- [#1448](https://github.com/iTwin/iTwinUI/pull/1448): Fix resizable Dialog bug where Dialog jumped around the screen when resized on right side.
+
+## 2.11.10
+
+### Patch Changes
+
+- [#1424](https://github.com/iTwin/iTwinUI/pull/1424), [#1427](https://github.com/iTwin/iTwinUI/pull/1427): Fixed a few different resizing issues in Dialog.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.5
+
+## 2.11.9
+
+### Patch Changes
+
+- [#1421](https://github.com/iTwin/iTwinUI/pull/1421): Fixed an issue in Table where column reordering and editable cells were not working when v2 Table was used within a v1 app.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.4
+
 ## 2.11.8
 
 ### Patch Changes
@@ -636,4 +688,4 @@ If you're interested in more details about every signle change, check out a full
 
 ## 1.X
 
-For any changes prior to 2.0.0, check out the [1.X changelog](https://github.com/iTwin/iTwinUI-react/blob/v1/packages/iTwinUI-react/CHANGELOG.md).
+For any changes prior to 2.0.0, check out the [1.X changelog](https://github.com/iTwin/iTwinUI/blob/legacy/v1-react/packages/iTwinUI-react/CHANGELOG.md).

package/cjs/core/Buttons/DropdownButton/DropdownButton.d.ts

@@ -14,7 +14,7 @@ export type DropdownButtonProps = {
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: 'default' | 'borderless';
+    styleType?: 'default' | 'borderless' | 'high-visibility';
     /**
      * Props for the `DropdownMenu` which extends `PopoverProps`.
      */

package/cjs/core/Dialog/DialogContent.d.ts

@@ -1,3 +1,4 @@
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example
@@ -5,5 +6,5 @@
  *   My dialog content
  * </Dialog.Content>
  */
-export declare const DialogContent: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
+export declare const DialogContent: PolymorphicForwardRefComponent<"div", {}>;
 export default DialogContent;

package/cjs/core/Dialog/DialogContent.js

@@ -1,10 +1,13 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
 exports.DialogContent = void 0;
+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 React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
@@ -13,5 +16,26 @@ const index_js_1 = require('../utils/index.js');
  *   My dialog content
  * </Dialog.Content>
  */
-exports.DialogContent = index_js_1.polymorphic.div('iui-dialog-content');
+exports.DialogContent = React.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const contentRef = React.useRef(null);
+  React.useEffect(() => {
+    // firefox hack for adding data-iui-flex in absence of :has
+    if (!(0, index_js_1.supportsHas)()) {
+      const dialog = contentRef.current?.closest('[role=dialog]');
+      if (dialog instanceof HTMLElement) {
+        dialog.dataset.iuiFlex = 'true';
+      }
+    }
+  }, []);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-dialog-content', className),
+      ref: (0, index_js_1.useMergedRefs)(contentRef, ref),
+      ...rest,
+    },
+    children,
+  );
+});
 exports.default = exports.DialogContent;

package/cjs/core/Dialog/DialogMain.js

@@ -155,7 +155,6 @@ exports.DialogMain = React.forwardRef((props, ref) => {
       'data-iui-placement': placement,
       style: {
         transform,
-        overflow: 'unset',
         ...style,
         ...propStyle,
       },

package/cjs/core/Header/HeaderButton.d.ts

@@ -16,6 +16,10 @@ type HeaderButtonProps = {
      * @default false
      */
     isActive?: boolean;
+    /**
+     * Modify the native `name` attribute of the `<button>` element.
+     */
+    htmlName?: string;
 } & Partial<Pick<DropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
 /**
  * Header button that handles slim state of the `Header` it's in.

package/cjs/core/Header/HeaderButton.js

@@ -25,6 +25,7 @@ exports.HeaderButton = React.forwardRef((props, ref) => {
   const {
     name,
     description,
+    htmlName,
     isActive = false,
     startIcon,
     menuItems,
@@ -63,6 +64,7 @@ exports.HeaderButton = React.forwardRef((props, ref) => {
     ),
     ref: ref,
     disabled: disabled,
+    name: htmlName,
     ...(!!menuItems && { menuItems }),
     ...rest,
   }; // eslint-disable-line @typescript-eslint/no-explicit-any

package/cjs/core/Input/Input.d.ts

@@ -4,6 +4,11 @@ export type InputProps = {
      * Modify size of the input.
      */
     size?: 'small' | 'large';
+    /**
+     * Modify the native `size` attribute of the `<input>` element.
+     * The `width` or `inline-size` property must be unset in order to use this prop.
+     */
+    htmlSize?: number;
 };
 /**
  * Basic input component

package/cjs/core/Input/Input.js

@@ -17,13 +17,14 @@ const index_js_1 = require('../utils/index.js');
  * <Input size='small' />
  */
 exports.Input = React.forwardRef((props, ref) => {
-  const { size, className, ...rest } = props;
+  const { size, htmlSize, className, ...rest } = props;
   const inputRef = React.useRef(null);
   const refs = (0, index_js_1.useMergedRefs)(inputRef, ref);
   return React.createElement(index_js_1.Box, {
     as: 'input',
     className: (0, classnames_1.default)('iui-input', className),
     'data-iui-size': size,
+    size: htmlSize,
     ref: refs,
     ...rest,
   });

package/cjs/core/Radio/Radio.d.ts

@@ -9,6 +9,14 @@ type RadioProps = {
      * Status of the radio.
      */
     status?: 'positive' | 'warning' | 'negative';
+    /**
+     * Passes props to Radio label.
+     */
+    labelProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to Radio wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'label'>;
 };
 /**
  * Basic radio input component

package/cjs/core/Radio/Radio.js

@@ -20,16 +20,22 @@ const index_js_1 = require('../utils/index.js');
  * <Radio status='negative' label='Negative' />
  */
 exports.Radio = React.forwardRef((props, ref) => {
-  const { className, disabled = false, label, status, style, ...rest } = props;
+  const {
+    className,
+    disabled = false,
+    label,
+    status,
+    labelProps,
+    wrapperProps,
+    style,
+    ...rest
+  } = props;
   const inputElementRef = React.useRef(null);
   const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
   const radio = React.createElement(index_js_1.Box, {
     as: 'input',
-    className: (0, classnames_1.default)(
-      'iui-radio',
-      className && { [className]: !label },
-    ),
-    style: !label ? style : undefined,
+    className: (0, classnames_1.default)('iui-radio', className),
+    style: style,
     disabled: disabled,
     type: 'radio',
     ref: refs,
@@ -41,18 +47,25 @@ exports.Radio = React.forwardRef((props, ref) => {
         index_js_1.Box,
         {
           as: 'label',
+          ...wrapperProps,
           className: (0, classnames_1.default)(
             'iui-radio-wrapper',
             { 'iui-disabled': disabled, [`iui-${status}`]: !!status },
-            className,
+            wrapperProps?.className,
           ),
-          style: style,
         },
         radio,
         label &&
           React.createElement(
             index_js_1.Box,
-            { as: 'span', className: 'iui-radio-label' },
+            {
+              as: 'span',
+              ...labelProps,
+              className: (0, classnames_1.default)(
+                'iui-radio-label',
+                labelProps?.className,
+              ),
+            },
             label,
           ),
       );

package/cjs/core/RadioTiles/RadioTile.d.ts

@@ -13,6 +13,22 @@ type RadioTileProps = {
      * Additional description, if needed.
      */
     description?: React.ReactNode;
+    /**
+     * Passes props to tile wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes props to tile icon.
+     */
+    iconProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to tile label.
+     */
+    labelProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to tile sublabel.
+     */
+    subLabelProps?: React.ComponentProps<'div'>;
 };
 /**
  * RadioTile component to be used in RadioTileGroup component

package/cjs/core/RadioTiles/RadioTile.js

@@ -15,45 +15,79 @@ const index_js_1 = require('../utils/index.js');
  * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
  */
 exports.RadioTile = React.forwardRef((props, ref) => {
-  const { icon, label, description, className, style, ...rest } = props;
+  const {
+    icon,
+    label,
+    description,
+    className,
+    wrapperProps,
+    iconProps,
+    labelProps,
+    subLabelProps,
+    style,
+    ...rest
+  } = props;
   const inputElementRef = React.useRef(null);
   const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
   return React.createElement(
     index_js_1.Box,
     {
       as: 'label',
-      className: (0, classnames_1.default)('iui-radio-tile', className),
-      style: style,
+      'data-iui-disabled': props.disabled ? 'true' : undefined,
+      ...wrapperProps,
+      className: (0, classnames_1.default)(
+        'iui-radio-tile',
+        wrapperProps?.className,
+      ),
     },
     React.createElement(index_js_1.Box, {
       as: 'input',
-      className: 'iui-radio-tile-input',
-      type: 'radio',
       ref: refs,
+      className: (0, classnames_1.default)('iui-radio-tile-input', className),
+      style: style,
+      type: 'radio',
       ...rest,
     }),
-    React.createElement(
-      index_js_1.Box,
-      { className: 'iui-radio-tile-content' },
-      icon &&
-        React.createElement(
-          index_js_1.Box,
-          { as: 'span', className: 'iui-radio-tile-icon', 'aria-hidden': true },
-          icon,
-        ),
-      label &&
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-radio-tile-label' },
-          label,
-        ),
-      description &&
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-radio-tile-sublabel' },
-          description,
-        ),
-    ),
+    icon &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...iconProps,
+          className: (0, classnames_1.default)(
+            'iui-radio-tile-icon',
+            iconProps?.className,
+          ),
+        },
+        icon,
+      ),
+    label &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...labelProps,
+          className: (0, classnames_1.default)(
+            'iui-radio-tile-label',
+            labelProps?.className,
+          ),
+        },
+        label,
+      ),
+    description &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...subLabelProps,
+          className: (0, classnames_1.default)(
+            'iui-radio-tile-sublabel',
+            subLabelProps?.className,
+          ),
+        },
+        description,
+      ),
   );
 });
 exports.default = exports.RadioTile;

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,
             }),
@@ -773,7 +801,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 +816,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/utils/components/Resizer.js

@@ -37,7 +37,10 @@ const Resizer = (props) => {
     let height = `${initialHeight}px`;
     let translateX = initialTranslateX;
     let translateY = initialTranslateY;
-    const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+    let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+    if (Number.isNaN(minWidth)) {
+      minWidth = 380;
+    }
     const minHeight = parseFloat(
       getComputedStyle(elementRef.current).minHeight,
     );
@@ -105,6 +108,8 @@ const Resizer = (props) => {
         }
         case 'right': {
           width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+          height = elementRef.current.style.height = `${initialHeight}px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
         }
         case 'bottom-right': {
@@ -112,12 +117,14 @@ const Resizer = (props) => {
           height = elementRef.current.style.height = `${
             initialHeight - diffY
           }px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
         }
         case 'bottom': {
           height = elementRef.current.style.height = `${
             initialHeight - diffY
           }px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
         }
         case 'bottom-left': {
@@ -138,6 +145,7 @@ const Resizer = (props) => {
             break;
           }
           width = elementRef.current.style.width = `${newWidth}px`;
+          height = elementRef.current.style.height = `${initialHeight}px`;
           translateX = initialTranslateX - diffX;
           elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
@@ -172,8 +180,8 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
-        left: -4,
+        top: 0,
+        left: 0,
         width: 12,
         height: 12,
         cursor: 'nw-resize',
@@ -184,7 +192,7 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
+        top: 0,
         left: 8,
         right: 8,
         height: 8,
@@ -196,8 +204,8 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
-        right: -4,
+        top: 0,
+        right: 0,
         width: 12,
         height: 12,
         cursor: 'ne-resize',
@@ -209,7 +217,7 @@ const Resizer = (props) => {
       style: {
         position: 'absolute',
         top: 8,
-        right: -4,
+        right: 0,
         bottom: 8,
         width: 8,
         cursor: 'e-resize',
@@ -220,8 +228,8 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
-        right: -4,
+        bottom: 0,
+        right: 0,
         width: 12,
         height: 12,
         cursor: 'se-resize',
@@ -232,7 +240,7 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
+        bottom: 0,
         left: 8,
         right: 8,
         height: 8,
@@ -244,8 +252,8 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
-        left: -4,
+        bottom: 0,
+        left: 0,
         width: 12,
         height: 12,
         cursor: 'sw-resize',
@@ -257,7 +265,7 @@ const Resizer = (props) => {
       style: {
         position: 'absolute',
         top: 8,
-        left: -4,
+        left: 0,
         bottom: 8,
         width: 8,
         cursor: 'w-resize',