@itwin/itwinui-react 2.8.0 → 2.8.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2.8.2
+
+### Patch Changes
+
+- [#1197](https://github.com/iTwin/iTwinUI/pull/1197): Reverted animation class change that broke Dialog.
+
+## 2.8.1
+
+### Patch Changes
+
+- [#1195](https://github.com/iTwin/iTwinUI/pull/1195): Fixed an issue with missing css in LabeledSelect.
+
 ## 2.8.0
 
 ### Minor Changes

package/cjs/core/Carousel/CarouselDotsList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/carousel.css';
 /**
- * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
+ * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
  * any props or `children`.
  *

package/cjs/core/Carousel/CarouselDotsList.js

@@ -15,7 +15,7 @@ const utils_1 = require("../utils");
 const CarouselDot_1 = require("./CarouselDot");
 require("@itwin/itwinui-css/css/carousel.css");
 /**
- * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
+ * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
  * any props or `children`.
  *

package/cjs/core/Dialog/DialogMain.js

@@ -115,6 +115,7 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
     const content = (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
+            'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
             transform,
@@ -132,7 +133,6 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: {
             enter: 'iui-dialog-animation-enter',
             enterActive: 'iui-dialog-animation-enter-active',
-            enterDone: 'iui-dialog-visible',
         }, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {

package/cjs/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SelectProps } from '../Select/Select';
-import { LabeledInputProps } from '../LabeledInput';
-import '@itwin/itwinui-css/css/select.css';
+import type { SelectProps } from '../Select/Select';
+import type { LabeledInputProps } from '../LabeledInput';
+import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledSelectProps<T> = {
     /**
      * Label of the select.

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -11,7 +11,7 @@ exports.LabeledSelect = void 0;
 const react_1 = __importDefault(require("react"));
 const Select_1 = require("../Select");
 const utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/select.css");
+require("@itwin/itwinui-css/css/input.css");
 /**
  * Labeled select component to select value from options.
  * @example

package/cjs/core/utils/components/InputContainer.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/utils.css';
 export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     as?: T;
     label?: React.ReactNode;

package/cjs/core/utils/components/InputContainer.js

@@ -10,6 +10,7 @@ exports.InputContainer = void 0;
  *--------------------------------------------------------------------------------------------*/
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+require("@itwin/itwinui-css/css/utils.css");
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private

package/esm/core/Carousel/CarouselDotsList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/carousel.css';
 /**
- * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
+ * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
  * any props or `children`.
  *

package/esm/core/Carousel/CarouselDotsList.js

@@ -9,7 +9,7 @@ import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, useTheme,
 import { CarouselDot } from './CarouselDot';
 import '@itwin/itwinui-css/css/carousel.css';
 /**
- * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
+ * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
  * any props or `children`.
  *

package/esm/core/Dialog/DialogMain.js

@@ -109,6 +109,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
     const content = (React.createElement("div", { className: cx('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
+            'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
             transform,
@@ -126,7 +127,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
     return (React.createElement(CSSTransition, { in: isOpen, classNames: {
             enter: 'iui-dialog-animation-enter',
             enterActive: 'iui-dialog-animation-enter-active',
-            enterDone: 'iui-dialog-visible',
         }, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SelectProps } from '../Select/Select';
-import { LabeledInputProps } from '../LabeledInput';
-import '@itwin/itwinui-css/css/select.css';
+import type { SelectProps } from '../Select/Select';
+import type { LabeledInputProps } from '../LabeledInput';
+import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledSelectProps<T> = {
     /**
      * Label of the select.

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import { Select } from '../Select';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
-import '@itwin/itwinui-css/css/select.css';
+import '@itwin/itwinui-css/css/input.css';
 /**
  * Labeled select component to select value from options.
  * @example

package/esm/core/utils/components/InputContainer.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/utils.css';
 export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     as?: T;
     label?: React.ReactNode;

package/esm/core/utils/components/InputContainer.js

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
+import '@itwin/itwinui-css/css/utils.css';
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",