Update to new layer instead of deprecating slider

microsoft · Oct 31, 2024 · 35c83e6 · 35c83e6
1 parent 4550375
commit 35c83e6
Show file tree

Hide file tree

Showing 19 changed files with 183 additions and 203 deletions.
diff --git a/packages/react-components/react-carousel/library/etc/react-carousel.api.md b/packages/react-components/react-carousel/library/etc/react-carousel.api.md
@@ -220,7 +220,7 @@ export type CarouselProps = ComponentProps<CarouselSlots> & {
 // @public (undocumented)
 export const CarouselProvider: Provider<CarouselContextValue | undefined> & FC<ProviderProps<CarouselContextValue | undefined>>;
 
-// @public @deprecated
+// @public
 export const CarouselSlider: ForwardRefComponent<CarouselSliderProps>;
 
 // @public (undocumented)
@@ -254,14 +254,11 @@ export const CarouselViewport: ForwardRefComponent<CarouselViewportProps>;
 export const carouselViewportClassNames: SlotClassNames<CarouselViewportSlots>;
 
 // @public
-export type CarouselViewportProps = ComponentProps<CarouselViewportSlots> & {
-    cardFocus?: boolean;
-};
+export type CarouselViewportProps = ComponentProps<CarouselViewportSlots>;
 
 // @public (undocumented)
 export type CarouselViewportSlots = {
     root: Slot<'div'>;
-    slider?: NonNullable<Slot<'div'>>;
 };
 
 // @public

diff --git a/...es/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts b/...es/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts
@@ -66,7 +66,7 @@ export const useCarouselCard_unstable = (
     }
   }, [cardFocus]);
 
-  const handleFocusCapture = React.useCallback(
+  const handleFocus = React.useCallback(
     (e: React.FocusEvent) => {
       if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {
         // We want to prevent any browser scroll intervention for 'offscreen' focus
@@ -88,7 +88,7 @@ export const useCarouselCard_unstable = (
     }
   };
 
-  const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);
+  const onFocus = mergeCallbacks(props.onFocus, handleFocus);
   const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);
   const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);
   const state: CarouselCardState = {
@@ -103,7 +103,7 @@ export const useCarouselCard_unstable = (
         tabIndex: cardFocus ? 0 : undefined,
         ...props,
         id,
-        onFocusCapture,
+        onFocus,
         onMouseDown,
         onMouseUp,
         ...focusAttrProps,

diff --git a/...t-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.test.tsx b/...t-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.test.tsx
@@ -5,13 +5,11 @@ import { CarouselSlider } from './CarouselSlider';
 
 describe('CarouselSlider', () => {
   isConformant({
-    // eslint-disable-next-line deprecation/deprecation
     Component: CarouselSlider,
     displayName: 'CarouselSlider',
   });
 
   it('renders a default state', () => {
-    // eslint-disable-next-line deprecation/deprecation
     const result = render(<CarouselSlider>Default CarouselSlider</CarouselSlider>);
     expect(result.container).toMatchSnapshot();
   });

diff --git a/.../react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.tsx b/.../react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.tsx
@@ -9,9 +9,6 @@ import { useCarouselSliderContextValues_unstable } from './CarouselSliderContext
 
 /**
  * CarouselSlider component - The viewport window that CarouselCards are contained within.
- *
- * @deprecated use CarouselViewport instead
- * @see CarouselViewport
  */
 export const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {
   const state = useCarouselSlider_unstable(props, ref);
@@ -25,5 +22,4 @@ export const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.fo
   return renderCarouselSlider_unstable(state, context);
 });
 
-// eslint-disable-next-line deprecation/deprecation
 CarouselSlider.displayName = 'CarouselSlider';
diff --git a/...ts/react-carousel/library/src/components/CarouselSlider/useCarouselSliderStyles.styles.ts b/...ts/react-carousel/library/src/components/CarouselSlider/useCarouselSliderStyles.styles.ts
@@ -22,7 +22,6 @@ const useStyles = makeStyles({
  */
 export const useCarouselSliderStyles_unstable = (state: CarouselSliderState): CarouselSliderState => {
   'use no memo';
-  const { cardFocus } = state;
 
   const styles = useStyles();
 

diff --git a/...mponents/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts b/...mponents/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts
@@ -6,27 +6,12 @@ export type CarouselViewportSlots = {
    * The viewport outer container, defining the size of the carousels visible and interactable area
    */
   root: Slot<'div'>;
-
-  /**
-   * The slider used for animating carousel movement
-   */
-  slider?: NonNullable<Slot<'div'>>;
 };
 
 /**
  * CarouselViewport Props
  */
-export type CarouselViewportProps = ComponentProps<CarouselViewportSlots> & {
-  /**
-   * cardFocus sets the carousel slider as a focus group,
-   * enabling left/right navigation of elements.
-   *
-   * This will also be passed into CarouselCards via context and set the appropriate focus attributes
-   *
-   * Defaults: false
-   */
-  cardFocus?: boolean;
-};
+export type CarouselViewportProps = ComponentProps<CarouselViewportSlots>;
 
 /**
  * State used in rendering CarouselViewport

diff --git a/...ponents/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx b/...ponents/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx
@@ -16,9 +16,7 @@ export const renderCarouselViewport_unstable = (
 
   return (
     <CarouselSliderContextProvider value={contextValues.carouselSlider}>
-      <state.root>
-        <state.slider />
-      </state.root>
+      <state.root />
     </CarouselSliderContextProvider>
   );
 };
diff --git a/...-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewport.ts b/...-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewport.ts
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
 import type { CarouselViewportProps, CarouselViewportState } from './CarouselViewport.types';
 import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 
 /**
  * Create the state required to render CarouselViewport.
@@ -17,45 +16,19 @@ export const useCarouselViewport_unstable = (
   props: CarouselViewportProps,
   ref: React.Ref<HTMLDivElement>,
 ): CarouselViewportState => {
-  const { cardFocus = false } = props;
-  const circular = useCarouselContext(ctx => ctx.circular);
   const viewportRef = useCarouselContext(ctx => ctx.viewportRef);
-  const focusableGroupAttr = useArrowNavigationGroup({
-    circular,
-    axis: 'horizontal',
-    memorizeCurrent: false,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_hasDefault: true,
-  });
-
-  const focusProps = cardFocus ? focusableGroupAttr : {};
-
-  const slider: CarouselViewportState['slider'] = slot.always(props.slider, {
-    defaultProps: {
-      role: 'group',
-      children: props.children,
-      ...focusProps,
-    },
-    elementType: 'div',
-  });
-
-  const mergedViewportRef = useMergedRefs(ref, viewportRef);
 
   return {
-    slider,
-    cardFocus,
     components: {
       root: 'div',
-      slider: 'div',
     },
     root: slot.always(
       getIntrinsicElementProps('div', {
-        ref: mergedViewportRef,
+        ref: useMergedRefs(ref, viewportRef),
         role: 'presentation',
         // Draggable ensures dragging is supported (even if not enabled)
         draggable: true,
         ...props,
-        children: null,
       }),
       { elementType: 'div' },
     ),

diff --git a/...eact-carousel/library/src/components/CarouselViewport/useCarouselViewportStyles.styles.ts b/...eact-carousel/library/src/components/CarouselViewport/useCarouselViewportStyles.styles.ts
@@ -4,7 +4,6 @@ import type { CarouselViewportSlots, CarouselViewportState } from './CarouselVie
 
 export const carouselViewportClassNames: SlotClassNames<CarouselViewportSlots> = {
   root: 'fui-CarouselViewport',
-  slider: 'fui-CarouselViewport__slider',
 };
 
 /**
@@ -29,7 +28,6 @@ export const useCarouselViewportStyles_unstable = (state: CarouselViewportState)
 
   const styles = useStyles();
   state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);
-  state.slider.className = mergeClasses(carouselViewportClassNames.slider, styles.slider, state.slider.className);
 
   return state;
 };
diff --git a/packages/react-components/react-carousel/library/src/index.ts b/packages/react-components/react-carousel/library/src/index.ts
@@ -63,7 +63,6 @@ export {
   useCarouselNavImageButton_unstable,
 } from './CarouselNavImageButton';
 export {
-  // eslint-disable-next-line deprecation/deprecation
   CarouselSlider,
   carouselSliderClassNames,
   renderCarouselSlider_unstable,

diff --git a/...ages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx b/...ages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx
@@ -8,6 +8,7 @@ import {
   Option,
   Switch,
   Field,
+  CarouselSlider,
 } from '@fluentui/react-components';
 import { MoreHorizontalRegular, DocumentLinkRegular } from '@fluentui/react-icons';
 import {
@@ -199,10 +200,12 @@ export const AlignmentAndWhitespace = () => {
 
       <div className={classes.card}>
         <Carousel align={alignment} className={classes.carousel} whitespace={whitespace} announcement={getAnnouncement}>
-          <CarouselViewport cardFocus={true}>
-            {POSTS.map((post, index) => (
-              <ActionCard {...post} key={post.name} index={index} />
-            ))}
+          <CarouselViewport>
+            <CarouselSlider cardFocus>
+              {POSTS.map((post, index) => (
+                <ActionCard {...post} key={post.name} index={index} />
+              ))}
+            </CarouselSlider>
           </CarouselViewport>
           <CarouselNavContainer
             layout="inline"

diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx
@@ -1,4 +1,13 @@
-import { Button, Field, Image, makeStyles, Switch, tokens, typographyStyles } from '@fluentui/react-components';
+import {
+  Button,
+  CarouselSlider,
+  Field,
+  Image,
+  makeStyles,
+  Switch,
+  tokens,
+  typographyStyles,
+} from '@fluentui/react-components';
 import {
   Carousel,
   CarouselAnnouncerFunction,
@@ -148,11 +157,13 @@ export const Autoplay = () => {
       <div className={classes.card}>
         <Carousel groupSize={1} circular announcement={getAnnouncement}>
           <CarouselViewport>
-            {IMAGES.map((imageSrc, index) => (
-              <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
-                Card {index + 1}
-              </BannerCard>
-            ))}
+            <CarouselSlider>
+              {IMAGES.map((imageSrc, index) => (
+                <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
+                  Card {index + 1}
+                </BannerCard>
+              ))}
+            </CarouselSlider>
           </CarouselViewport>
           <CarouselNavContainer
             layout="inline"

diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
@@ -8,6 +8,7 @@ import {
   Tooltip,
   Toolbar,
   ToolbarButton,
+  CarouselSlider,
 } from '@fluentui/react-components';
 import {
   Carousel,
@@ -134,21 +135,23 @@ export const Controlled = () => {
         </Tooltip>
 
         <CarouselViewport className={classes.viewport}>
-          <CarouselCard aria-label="1 of 5">
-            <WireframeContent index={0} />
-          </CarouselCard>
-          <CarouselCard aria-label="2 of 5">
-            <WireframeContent index={1} />
-          </CarouselCard>
-          <CarouselCard aria-label="3 of 5">
-            <WireframeContent index={2} />
-          </CarouselCard>
-          <CarouselCard aria-label="4 of 5">
-            <WireframeContent index={3} />
-          </CarouselCard>
-          <CarouselCard aria-label="5 of 5">
-            <WireframeContent index={4} />
-          </CarouselCard>
+          <CarouselSlider>
+            <CarouselCard aria-label="1 of 5">
+              <WireframeContent index={0} />
+            </CarouselCard>
+            <CarouselCard aria-label="2 of 5">
+              <WireframeContent index={1} />
+            </CarouselCard>
+            <CarouselCard aria-label="3 of 5">
+              <WireframeContent index={2} />
+            </CarouselCard>
+            <CarouselCard aria-label="4 of 5">
+              <WireframeContent index={3} />
+            </CarouselCard>
+            <CarouselCard aria-label="5 of 5">
+              <WireframeContent index={4} />
+            </CarouselCard>
+          </CarouselSlider>
         </CarouselViewport>
 
         <Tooltip content="Go To Next Page" relationship="label">

diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx
@@ -7,6 +7,7 @@ import {
   CarouselNavContainer,
   CarouselViewport,
   CarouselAnnouncerFunction,
+  CarouselSlider,
 } from '@fluentui/react-components';
 import * as React from 'react';
 
@@ -79,11 +80,13 @@ const getAnnouncement: CarouselAnnouncerFunction = (index: number, totalSlides:
 export const Default = () => (
   <Carousel groupSize={1} circular announcement={getAnnouncement}>
     <CarouselViewport>
-      {IMAGES.map((imageSrc, index) => (
-        <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
-          Card {index + 1}
-        </BannerCard>
-      ))}
+      <CarouselSlider>
+        {IMAGES.map((imageSrc, index) => (
+          <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
+            Card {index + 1}
+          </BannerCard>
+        ))}
+      </CarouselSlider>
     </CarouselViewport>
     <CarouselNavContainer
       layout="inline"