@itwin/itwinui-react 2.12.0 → 2.12.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.12.1
+
+### Patch Changes
+
+- [#1467](https://github.com/iTwin/iTwinUI/pull/1467): Fixed an issue in Carousel where latest `onSlideChange` callback was being ignored.
+
 ## 2.12.0
 
 ### Minor Changes
@@ -7,6 +13,7 @@
 - [#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.
@@ -567,4 +574,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/Carousel/Carousel.d.ts

@@ -58,7 +58,9 @@ export declare const Carousel: React.ForwardRefExoticComponent<{
     DotsList: React.ForwardRefExoticComponent<{
         length?: number | undefined;
         currentIndex?: number | undefined;
-        onSlideChange?: ((index: number) => void) | undefined;
+        onSlideChange?: ((index: number) => void) | undefined; /**
+         * Callback fired when the current slide changes.
+         */
     } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
     Dot: React.ForwardRefExoticComponent<{
         isActive?: boolean | undefined;

package/cjs/core/Carousel/Carousel.js

@@ -111,11 +111,11 @@ exports.Carousel = Object.assign(React.forwardRef((props, ref) => {
             }
         }
     };
-    const userOnSlideChange = React.useRef(onSlideChange);
+    const userOnSlideChange = (0, index_js_1.useLatestRef)(onSlideChange);
     React.useEffect(() => {
         var _a;
         (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
-    }, [currentIndex]);
+    }, [userOnSlideChange, currentIndex]);
     return (React.createElement("section", { "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className), ...rest, id: id },
         React.createElement(CarouselContext_js_1.CarouselContext.Provider, { value: {
                 currentIndex,

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

@@ -58,7 +58,9 @@ export declare const Carousel: React.ForwardRefExoticComponent<{
     DotsList: React.ForwardRefExoticComponent<{
         length?: number | undefined;
         currentIndex?: number | undefined;
-        onSlideChange?: ((index: number) => void) | undefined;
+        onSlideChange?: ((index: number) => void) | undefined; /**
+         * Callback fired when the current slide changes.
+         */
     } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
     Dot: React.ForwardRefExoticComponent<{
         isActive?: boolean | undefined;

package/esm/core/Carousel/Carousel.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { getRandomValue, useMergedRefs, useTheme } from '../utils/index.js';
+import { getRandomValue, useLatestRef, useMergedRefs, useTheme, } from '../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 import { CarouselSlider } from './CarouselSlider.js';
 import { CarouselSlide } from './CarouselSlide.js';
@@ -82,11 +82,11 @@ export const Carousel = Object.assign(React.forwardRef((props, ref) => {
             }
         }
     };
-    const userOnSlideChange = React.useRef(onSlideChange);
+    const userOnSlideChange = useLatestRef(onSlideChange);
     React.useEffect(() => {
         var _a;
         (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
-    }, [currentIndex]);
+    }, [userOnSlideChange, currentIndex]);
     return (React.createElement("section", { "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: cx('iui-carousel', className), ...rest, id: id },
         React.createElement(CarouselContext.Provider, { value: {
                 currentIndex,

package/package.json

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