+ );
+}
+
+CarouselLayoutCore.displayName = 'CarouselLayoutCore';
+
+function CarouselLayout(props: CarouselLayoutProps) {
+ const [{ clearTimeout, setTimeout }] = usePonyfill();
+
+ const ponyfill = useMemo(() => Object.freeze({ clearTimeout, setTimeout }), [clearTimeout, setTimeout]);
+
+ return (
+
+
+
+ );
+}
+
+CarouselLayout.displayName = 'CarouselLayout';
+
+export default memo(CarouselLayout);
+export { carouselLayoutPropsSchema, type CarouselLayoutProps };
diff --git a/packages/component/src/Styles/StyleSet/CarouselFlipper.ts b/packages/component/src/Styles/StyleSet/CarouselFlipper.ts
index 184d21f200..de655948e9 100644
--- a/packages/component/src/Styles/StyleSet/CarouselFlipper.ts
+++ b/packages/component/src/Styles/StyleSet/CarouselFlipper.ts
@@ -2,7 +2,7 @@ import { StrictStyleOptions } from 'botframework-webchat-api';
/**
* @deprecated Not used for rendering since 4.19.0 (PR #5668), customizing it has no effect.
- * The live styles are in `packages/component/src/Activity/CarouselLayout.module.css`.
+ * The live styles are in `packages/component/src/Activity/CarouselFlipper.module.css`.
* This style set will be removed on or after 2028-10-16.
*/
export default function CarouselFlipper({
diff --git a/packages/component/src/Styles/createStyleSet.ts b/packages/component/src/Styles/createStyleSet.ts
index 1ffd81555e..5a63d2db37 100644
--- a/packages/component/src/Styles/createStyleSet.ts
+++ b/packages/component/src/Styles/createStyleSet.ts
@@ -100,7 +100,7 @@ export default function createStyleSet(styleOptions: StyleOptions) {
carouselFilmStripAttachment: createCarouselFilmStripAttachment(strictStyleOptions),
/**
* @deprecated Not used for rendering since 4.19.0 (PR #5668), customizing it has no effect.
- * The live styles are in `packages/component/src/Activity/CarouselLayout.module.css`.
+ * The live styles are in `packages/component/src/Activity/CarouselFlipper.module.css`.
* This style set will be removed on or after 2028-10-16.
*/
carouselFlipper: createCarouselFlipper(strictStyleOptions),
diff --git a/packages/test/page-object/src/globals/pageConditions/carouselSettled.js b/packages/test/page-object/src/globals/pageConditions/carouselSettled.js
index 5ef1ade641..7e1e8a4ce0 100644
--- a/packages/test/page-object/src/globals/pageConditions/carouselSettled.js
+++ b/packages/test/page-object/src/globals/pageConditions/carouselSettled.js
@@ -13,8 +13,8 @@ export default function carouselSettled(carouselLayout) {
return became(
'carousel stopped scrolling and all flippers are hidden',
() =>
- !carouselLayout.querySelector('.react-film__main--scrolling') &&
- Array.from(carouselLayout.querySelectorAll('.react-film__flipper')).every(isFlipperHidden),
+ !carouselLayout.querySelector('.carousel-layout__main--scrolling') &&
+ Array.from(carouselLayout.querySelectorAll('.carousel-flipper')).every(isFlipperHidden),
5000
);
}
diff --git a/packages/test/page-object/src/globals/testHelpers/index.js b/packages/test/page-object/src/globals/testHelpers/index.js
index cd7d23b028..8521b86016 100644
--- a/packages/test/page-object/src/globals/testHelpers/index.js
+++ b/packages/test/page-object/src/globals/testHelpers/index.js
@@ -19,6 +19,7 @@ import getFocusedAccessibilityNode from './getFocusedAccessibilityNode';
import getRenderedColor from './getRenderedColor';
import isCardInView from './isCardInView';
import isFlipperHidden from './isFlipperHidden';
+import isFlipperShown from './isFlipperShown';
import iterateAsyncIterable from './iterateAsyncIterable';
import preloadImages from './preloadImages';
import shareObservable from './shareObservable';
@@ -47,6 +48,7 @@ export {
getRenderedColor,
isCardInView,
isFlipperHidden,
+ isFlipperShown,
iterateAsyncIterable,
preloadImages,
shareObservable,
diff --git a/packages/test/page-object/src/globals/testHelpers/isFlipperHidden.js b/packages/test/page-object/src/globals/testHelpers/isFlipperHidden.js
index 261e52b3c0..00458afbff 100644
--- a/packages/test/page-object/src/globals/testHelpers/isFlipperHidden.js
+++ b/packages/test/page-object/src/globals/testHelpers/isFlipperHidden.js
@@ -4,11 +4,11 @@
* The flipper is hidden when its body has slid out of the flipper button: 1 second after scrolling stops, the body slides
* out in 300 milliseconds.
*
- * @param {Element} flipper - The flipper button (`.react-film__flipper`).
+ * @param {Element} flipper - The flipper button (`.carousel-flipper`).
* @returns {boolean} `true` if the flipper is hidden, otherwise `false`.
*/
export default function isFlipperHidden(flipper) {
- const bodyRect = flipper.querySelector('.react-film__flipper__body').getBoundingClientRect();
+ const bodyRect = flipper.querySelector('.carousel-flipper__body').getBoundingClientRect();
const buttonRect = flipper.getBoundingClientRect();
return bodyRect.right <= buttonRect.left || bodyRect.left >= buttonRect.right;
diff --git a/packages/test/page-object/src/globals/testHelpers/isFlipperShown.js b/packages/test/page-object/src/globals/testHelpers/isFlipperShown.js
new file mode 100644
index 0000000000..e808ef2f8a
--- /dev/null
+++ b/packages/test/page-object/src/globals/testHelpers/isFlipperShown.js
@@ -0,0 +1,15 @@
+/**
+ * Checks whether a flipper of a carousel has slid in completely: its body is centered in the flipper button.
+ *
+ * A flipper slides in within 300 milliseconds, when the pointer is over the carousel, the carousel is scrolling, or the
+ * flipper has focus.
+ *
+ * @param {Element} flipper - The flipper button (`.carousel-flipper`).
+ * @returns {boolean} `true` if the flipper has slid in completely, otherwise `false`.
+ */
+export default function isFlipperShown(flipper) {
+ const bodyRect = flipper.querySelector('.carousel-flipper__body').getBoundingClientRect();
+ const buttonRect = flipper.getBoundingClientRect();
+
+ return Math.abs(bodyRect.left + bodyRect.right - buttonRect.left - buttonRect.right) < 1;
+}