@fluentui/react-carousel 0.0.0-nightly-20241008-0405.1

package/lib/components/CarouselButton/useCarouselButton.js

@@ -0,0 +1,87 @@
+import { useButton_unstable } from '@fluentui/react-button';
+import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
+import { mergeCallbacks, useEventCallback, slot, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { carouselButtonClassNames } from './useCarouselButtonStyles.styles';
+import { useRef } from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * Create the state required to render CarouselButton.
+ *
+ * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,
+ * before being passed to renderCarouselButton_unstable.
+ *
+ * @param props - props from this instance of CarouselButton
+ * @param ref - reference to root HTMLDivElement of CarouselButton
+ */ export const useCarouselButton_unstable = (props, ref)=>{
+    const { navType = 'next' } = props;
+    // Locally tracks the total number of slides, will only update if this changes.
+    const [totalSlides, setTotalSlides] = React.useState(0);
+    const { dir } = useFluent();
+    const buttonRef = useRef();
+    const circular = useCarouselContext((ctx)=>ctx.circular);
+    const containerRef = useCarouselContext((ctx)=>ctx.containerRef);
+    const selectPageByDirection = useCarouselContext((ctx)=>ctx.selectPageByDirection);
+    const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
+    const resetAutoplay = useCarouselContext((ctx)=>ctx.resetAutoplay);
+    const isTrailing = useCarouselContext((ctx)=>{
+        if (circular) {
+            return false;
+        }
+        if (navType === 'prev') {
+            return ctx.activeIndex === 0;
+        }
+        return ctx.activeIndex === totalSlides - 1;
+    });
+    const handleClick = (event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const nextIndex = selectPageByDirection(event, navType);
+        let _trailing = false;
+        if (navType === 'prev') {
+            _trailing = nextIndex === 0;
+        } else {
+            _trailing = nextIndex === totalSlides - 1;
+        }
+        if (!circular && _trailing && (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
+            // Focus non-disabled element
+            const buttonRefs = containerRef.current.querySelectorAll(`.${carouselButtonClassNames.root}`);
+            buttonRefs.forEach((_buttonRef)=>{
+                if (_buttonRef !== buttonRef.current) {
+                    _buttonRef.focus();
+                }
+            });
+        }
+        resetAutoplay();
+    };
+    useIsomorphicLayoutEffect(()=>{
+        return subscribeForValues((data)=>{
+            setTotalSlides(data.navItemsCount);
+        });
+    }, [
+        subscribeForValues
+    ]);
+    const nextArrowIcon = dir === 'ltr' ? /*#__PURE__*/ React.createElement(ChevronRightRegular, null) : /*#__PURE__*/ React.createElement(ChevronLeftRegular, null);
+    const prevArrowIcon = dir === 'ltr' ? /*#__PURE__*/ React.createElement(ChevronLeftRegular, null) : /*#__PURE__*/ React.createElement(ChevronRightRegular, null);
+    return {
+        navType,
+        // We lean on react-button class to handle styling and icon enhancements
+        ...useButton_unstable({
+            icon: slot.optional(props.icon, {
+                defaultProps: {
+                    children: navType === 'next' ? nextArrowIcon : prevArrowIcon
+                },
+                renderByDefault: true,
+                elementType: 'span'
+            }),
+            disabled: isTrailing,
+            tabIndex: isTrailing ? -1 : 0,
+            'aria-disabled': isTrailing,
+            appearance: 'subtle',
+            ...props,
+            onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick))
+        }, useMergedRefs(ref, buttonRef))
+    };
+};

package/lib/components/CarouselButton/useCarouselButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCarouselButton.tsx"],"sourcesContent":["import { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useRef } from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render CarouselButton.\n *\n * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n *\n * @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n  props: CarouselButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n  const { navType = 'next' } = props;\n\n  // Locally tracks the total number of slides, will only update if this changes.\n  const [totalSlides, setTotalSlides] = React.useState(0);\n\n  const { dir } = useFluent();\n  const buttonRef = useRef<HTMLButtonElement>();\n  const circular = useCarouselContext(ctx => ctx.circular);\n  const containerRef = useCarouselContext(ctx => ctx.containerRef);\n  const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n  const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n  const isTrailing = useCarouselContext(ctx => {\n    if (circular) {\n      return false;\n    }\n\n    if (navType === 'prev') {\n      return ctx.activeIndex === 0;\n    }\n\n    return ctx.activeIndex === totalSlides - 1;\n  });\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    const nextIndex = selectPageByDirection(event, navType);\n\n    let _trailing = false;\n    if (navType === 'prev') {\n      _trailing = nextIndex === 0;\n    } else {\n      _trailing = nextIndex === totalSlides - 1;\n    }\n\n    if (!circular && _trailing && containerRef?.current) {\n      // Focus non-disabled element\n      const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n        `.${carouselButtonClassNames.root}`,\n      );\n      buttonRefs.forEach(_buttonRef => {\n        if (_buttonRef !== buttonRef.current) {\n          _buttonRef.focus();\n        }\n      });\n    }\n\n    resetAutoplay();\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues((data: CarouselUpdateData) => {\n      setTotalSlides(data.navItemsCount);\n    });\n  }, [subscribeForValues]);\n\n  const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n  const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n  return {\n    navType,\n    // We lean on react-button class to handle styling and icon enhancements\n    ...useButton_unstable(\n      {\n        icon: slot.optional(props.icon, {\n          defaultProps: {\n            children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n          },\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        disabled: isTrailing,\n        tabIndex: isTrailing ? -1 : 0,\n        'aria-disabled': isTrailing,\n        appearance: 'subtle',\n        ...props,\n        onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n      },\n      useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n    ),\n  };\n};\n"],"names":["useButton_unstable","ChevronLeftRegular","ChevronRightRegular","mergeCallbacks","useEventCallback","slot","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","carouselButtonClassNames","useRef","useFluent_unstable","useFluent","useCarouselButton_unstable","props","ref","navType","totalSlides","setTotalSlides","useState","dir","buttonRef","circular","ctx","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","root","forEach","_buttonRef","focus","data","navItemsCount","nextArrowIcon","prevArrowIcon","icon","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,wBAAwB;AAChF,SACEC,cAAc,EACdC,gBAAgB,EAChBC,IAAI,EACJC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF,SAASC,wBAAwB,QAAQ,mCAAmC;AAC5E,SAASC,MAAM,QAAQ,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGF;IAE7B,+EAA+E;IAC/E,MAAM,CAACG,aAAaC,eAAe,GAAGZ,MAAMa,QAAQ,CAAC;IAErD,MAAM,EAAEC,GAAG,EAAE,GAAGR;IAChB,MAAMS,YAAYX;IAClB,MAAMY,WAAWd,mBAAmBe,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,eAAehB,mBAAmBe,CAAAA,MAAOA,IAAIC,YAAY;IAC/D,MAAMC,wBAAwBjB,mBAAmBe,CAAAA,MAAOA,IAAIE,qBAAqB;IACjF,MAAMC,qBAAqBlB,mBAAmBe,CAAAA,MAAOA,IAAIG,kBAAkB;IAC3E,MAAMC,gBAAgBnB,mBAAmBe,CAAAA,MAAOA,IAAII,aAAa;IAEjE,MAAMC,aAAapB,mBAAmBe,CAAAA;QACpC,IAAID,UAAU;YACZ,OAAO;QACT;QAEA,IAAIN,YAAY,QAAQ;YACtB,OAAOO,IAAIM,WAAW,KAAK;QAC7B;QAEA,OAAON,IAAIM,WAAW,KAAKZ,cAAc;IAC3C;IAEA,MAAMa,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,YAAYR,sBAAsBM,OAAOf;QAE/C,IAAIkB,YAAY;QAChB,IAAIlB,YAAY,QAAQ;YACtBkB,YAAYD,cAAc;QAC5B,OAAO;YACLC,YAAYD,cAAchB,cAAc;QAC1C;QAEA,IAAI,CAACK,YAAYY,cAAaV,yBAAAA,mCAAAA,aAAcW,OAAO,GAAE;YACnD,6BAA6B;YAC7B,MAAMC,aAA4CZ,aAAaW,OAAO,CAACE,gBAAgB,CACrF,CAAC,CAAC,EAAE5B,yBAAyB6B,IAAI,CAAC,CAAC;YAErCF,WAAWG,OAAO,CAACC,CAAAA;gBACjB,IAAIA,eAAenB,UAAUc,OAAO,EAAE;oBACpCK,WAAWC,KAAK;gBAClB;YACF;QACF;QAEAd;IACF;IAEAvB,0BAA0B;QACxB,OAAOsB,mBAAmB,CAACgB;YACzBxB,eAAewB,KAAKC,aAAa;QACnC;IACF,GAAG;QAACjB;KAAmB;IAEvB,MAAMkB,gBAAgBxB,QAAQ,sBAAQ,oBAACpB,2CAAyB,oBAACD;IACjE,MAAM8C,gBAAgBzB,QAAQ,sBAAQ,oBAACrB,0CAAwB,oBAACC;IAEhE,OAAO;QACLgB;QACA,wEAAwE;QACxE,GAAGlB,mBACD;YACEgD,MAAM3C,KAAK4C,QAAQ,CAACjC,MAAMgC,IAAI,EAAE;gBAC9BE,cAAc;oBACZC,UAAUjC,YAAY,SAAS4B,gBAAgBC;gBACjD;gBACAK,iBAAiB;gBACjBC,aAAa;YACf;YACAC,UAAUxB;YACVyB,UAAUzB,aAAa,CAAC,IAAI;YAC5B,iBAAiBA;YACjB0B,YAAY;YACZ,GAAGxC,KAAK;YACRyC,SAASrD,iBAAiBD,eAAe6B,aAAahB,MAAMyC,OAAO;QACrE,GACAlD,cAAcU,KAAKM,WACpB;IACH;AACF,EAAE"}

package/lib/components/CarouselButton/useCarouselButtonStyles.styles.js

@@ -0,0 +1,41 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { useButtonStyles_unstable } from '@fluentui/react-button';
+import { tokens } from '@fluentui/react-theme';
+export const carouselButtonClassNames = {
+  root: 'fui-CarouselButton',
+  icon: 'fui-CarouselButton__icon'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    B6of3ja: "fgr6219",
+    jrapky: "f10jk5vf",
+    sj55zd: "fkfq4zb",
+    De3pzq: "fkfdr9r",
+    Bkecrkj: "fc5wo7j",
+    eoavqd: "f8491dx"
+  }
+}, {
+  d: [".fgr6219{margin-top:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}", ".fc5wo7j{pointer-events:all;}"],
+  h: [".f8491dx:hover{cursor:pointer;}"]
+});
+/**
+ * Apply styling to the CarouselButton slots based on the state
+ */
+export const useCarouselButtonStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state = {
+    ...state,
+    ...useButtonStyles_unstable(state)
+  };
+  state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useCarouselButtonStyles.styles.js.map

package/lib/components/CarouselButton/useCarouselButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","tokens","carouselButtonClassNames","root","icon","useStyles","B6of3ja","jrapky","sj55zd","De3pzq","Bkecrkj","eoavqd","d","h","useCarouselButtonStyles_unstable","state","styles","className"],"sources":["useCarouselButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselButtonClassNames = {\n    root: 'fui-CarouselButton',\n    icon: 'fui-CarouselButton__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        marginTop: 'auto',\n        marginBottom: 'auto',\n        color: tokens.colorNeutralForeground2,\n        backgroundColor: tokens.colorNeutralBackgroundAlpha,\n        pointerEvents: 'all',\n        ':hover': {\n            cursor: 'pointer'\n        }\n    }\n});\n/**\n * Apply styling to the CarouselButton slots based on the state\n */ export const useCarouselButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state = {\n        ...state,\n        ...useButtonStyles_unstable(state)\n    };\n    state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,IAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAWrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BU,KAAK,GAAG;IACJ,GAAGA,KAAK;IACR,GAAGf,wBAAwB,CAACe,KAAK;EACrC,CAAC;EACDA,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACrG,IAAIF,KAAK,CAACX,IAAI,EAAE;IACZW,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGlB,YAAY,CAACG,wBAAwB,CAACE,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EAC5F;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselCard/CarouselCard.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useCarouselCard_unstable } from './useCarouselCard';
+import { renderCarouselCard_unstable } from './renderCarouselCard';
+import { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';
+/**
+ * The defining wrapper of a carousel's indexed content, they will take up the full
+ * viewport of CarouselSlider or div wrapper,
+ * users may place multiple items within this Card if desired, with consideration of viewport width.
+ *
+ * Clickable actions within the content area are available via mouse and tab as expected,
+ * non-active card content will be set to inert until moved to active card.
+ */ export const CarouselCard = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselCard_unstable(props, ref);
+    useCarouselCardStyles_unstable(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);
+    return renderCarouselCard_unstable(state);
+});
+CarouselCard.displayName = 'CarouselCard';

package/lib/components/CarouselCard/CarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselCard_unstable } from './useCarouselCard';\nimport { renderCarouselCard_unstable } from './renderCarouselCard';\nimport { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\nimport type { CarouselCardProps } from './CarouselCard.types';\n\n/**\n * The defining wrapper of a carousel's indexed content, they will take up the full\n * viewport of CarouselSlider or div wrapper,\n * users may place multiple items within this Card if desired, with consideration of viewport width.\n *\n * Clickable actions within the content area are available via mouse and tab as expected,\n * non-active card content will be set to inert until moved to active card.\n */\nexport const CarouselCard: ForwardRefComponent<CarouselCardProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselCard_unstable(props, ref);\n\n  useCarouselCardStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);\n  return renderCarouselCard_unstable(state);\n});\n\nCarouselCard.displayName = 'CarouselCard';\n"],"names":["React","useCarouselCard_unstable","renderCarouselCard_unstable","useCarouselCardStyles_unstable","CarouselCard","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;;;;;;CAOC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,8HAA8H;IAC9H,wGAAwG;IACxG,wEAAwE;IACxE,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/CarouselCard/CarouselCard.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering CarouselCard
+ */ export { };

package/lib/components/CarouselCard/CarouselCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselCard.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselCardSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselCard Props\n */\nexport type CarouselCardProps = ComponentProps<CarouselCardSlots> & {\n  /**\n   * Sets the card styling to be responsive based on content.\n   */\n  autoSize?: boolean;\n};\n\n/**\n * State used in rendering CarouselCard\n */\nexport type CarouselCardState = ComponentState<CarouselCardSlots> & Pick<CarouselCardProps, 'autoSize'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC,GACD,WAAwG"}

package/lib/components/CarouselCard/index.js

@@ -0,0 +1,5 @@
+export * from './CarouselCard';
+export * from './CarouselCard.types';
+export * from './renderCarouselCard';
+export * from './useCarouselCard';
+export * from './useCarouselCardStyles.styles';

package/lib/components/CarouselCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselCard';\nexport * from './CarouselCard.types';\nexport * from './renderCarouselCard';\nexport * from './useCarouselCard';\nexport * from './useCarouselCardStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}

package/lib/components/CarouselCard/renderCarouselCard.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CarouselCard
+ */ export const renderCarouselCard_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/components/CarouselCard/renderCarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderCarouselCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselCardState, CarouselCardSlots } from './CarouselCard.types';\n\n/**\n * Render the final JSX of CarouselCard\n */\nexport const renderCarouselCard_unstable = (state: CarouselCardState) => {\n  assertSlots<CarouselCardSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselCard_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/CarouselCard/useCarouselCard.js

@@ -0,0 +1,91 @@
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, isHTMLElement, mergeCallbacks, slot, useMergedRefs, useId } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';
+import { carouselCardClassNames } from './useCarouselCardStyles.styles';
+import { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';
+/**
+ * Create the state required to render CarouselCard.
+ *
+ * The returned state can be modified with hooks such as useCarouselCardStyles_unstable,
+ * before being passed to renderCarouselCard_unstable.
+ *
+ * @param props - props from this instance of CarouselCard
+ * @param ref - reference to root HTMLDivElement of CarouselCard
+ */ export const useCarouselCard_unstable = (props, ref)=>{
+    const { autoSize } = props;
+    const elementRef = React.useRef(null);
+    const isMouseEvent = React.useRef(false);
+    const selectPageByElement = useCarouselContext((ctx)=>ctx.selectPageByElement);
+    const { cardFocus } = useCarouselSliderContext();
+    const focusAttr = useFocusableGroup({
+        tabBehavior: 'limited'
+    });
+    const focusAttrProps = cardFocus ? {
+        ...focusAttr,
+        tabIndex: 0
+    } : {};
+    // We attach a unique card id if user does not provide
+    const id = useId(carouselCardClassNames.root, props.id);
+    React.useEffect(()=>{
+        const element = elementRef.current;
+        if (element) {
+            const listener = (_e)=>{
+                const event = _e;
+                // When there is no tab index present, only current cards should be visible to accessibility
+                if (!cardFocus) {
+                    const hidden = !event.detail.isVisible;
+                    element.ariaHidden = hidden.toString();
+                    element.inert = hidden;
+                }
+            };
+            element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);
+            return ()=>{
+                element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);
+            };
+        }
+    }, [
+        cardFocus
+    ]);
+    const handleFocusCapture = React.useCallback((e)=>{
+        if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {
+            selectPageByElement(e, e.currentTarget, true);
+        }
+    }, [
+        selectPageByElement
+    ]);
+    const handleMouseDown = (e)=>{
+        if (!e.defaultPrevented) {
+            isMouseEvent.current = true;
+        }
+    };
+    const handleMouseUp = (e)=>{
+        if (!e.defaultPrevented) {
+            isMouseEvent.current = false;
+        }
+    };
+    const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);
+    const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);
+    const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);
+    const state = {
+        autoSize,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(elementRef, ref),
+            role: 'tabpanel',
+            tabIndex: cardFocus ? 0 : undefined,
+            ...props,
+            id,
+            onFocusCapture,
+            onMouseDown,
+            onMouseUp,
+            ...focusAttrProps
+        }), {
+            elementType: 'div'
+        })
+    };
+    return state;
+};

package/lib/components/CarouselCard/useCarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCarouselCard.ts"],"sourcesContent":["import { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  mergeCallbacks,\n  slot,\n  useMergedRefs,\n  useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/**\n * Create the state required to render CarouselCard.\n *\n * The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n *\n * @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n  props: CarouselCardProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n  const { autoSize } = props;\n  const elementRef = React.useRef<HTMLDivElement>(null);\n  const isMouseEvent = React.useRef<boolean>(false);\n  const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n  const { cardFocus } = useCarouselSliderContext();\n\n  const focusAttr = useFocusableGroup({\n    tabBehavior: 'limited',\n  });\n  const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n  // We attach a unique card id if user does not provide\n  const id = useId(carouselCardClassNames.root, props.id);\n\n  React.useEffect(() => {\n    const element = elementRef.current;\n\n    if (element) {\n      const listener = (_e: Event) => {\n        const event = _e as CarouselVisibilityChangeEvent;\n        // When there is no tab index present, only current cards should be visible to accessibility\n        if (!cardFocus) {\n          const hidden = !event.detail.isVisible;\n          element.ariaHidden = hidden.toString();\n          element.inert = hidden;\n        }\n      };\n\n      element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n      return () => {\n        element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n      };\n    }\n  }, [cardFocus]);\n\n  const handleFocusCapture = React.useCallback(\n    (e: React.FocusEvent) => {\n      if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n        selectPageByElement(e, e.currentTarget, true);\n      }\n    },\n    [selectPageByElement],\n  );\n\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!e.defaultPrevented) {\n      isMouseEvent.current = true;\n    }\n  };\n  const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!e.defaultPrevented) {\n      isMouseEvent.current = false;\n    }\n  };\n\n  const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);\n  const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);\n  const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);\n  const state: CarouselCardState = {\n    autoSize,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(elementRef, ref),\n        role: 'tabpanel',\n        tabIndex: cardFocus ? 0 : undefined,\n        ...props,\n        id,\n        onFocusCapture,\n        onMouseDown,\n        onMouseUp,\n        ...focusAttrProps,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n\n  return state;\n};\n"],"names":["useFocusableGroup","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useMergedRefs","useId","React","useCarouselContext_unstable","useCarouselContext","EMBLA_VISIBILITY_EVENT","carouselCardClassNames","useCarouselSliderContext","useCarouselCard_unstable","props","ref","autoSize","elementRef","useRef","isMouseEvent","selectPageByElement","ctx","cardFocus","focusAttr","tabBehavior","focusAttrProps","tabIndex","id","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","removeEventListener","handleFocusCapture","useCallback","e","defaultPrevented","currentTarget","handleMouseDown","handleMouseUp","onFocusCapture","onMouseUp","onMouseDown","state","components","always","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,iBAAiB,QAAQ,0BAA0B;AAC5D,SACEC,wBAAwB,EACxBC,aAAa,EACbC,cAAc,EACdC,IAAI,EACJC,aAAa,EACbC,KAAK,QACA,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF,SAASC,sBAAsB,QAAQ,sBAAsB;AAE7D,SAASC,sBAAsB,QAAQ,iCAAiC;AACxE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGF;IACrB,MAAMG,aAAaV,MAAMW,MAAM,CAAiB;IAChD,MAAMC,eAAeZ,MAAMW,MAAM,CAAU;IAC3C,MAAME,sBAAsBX,mBAAmBY,CAAAA,MAAOA,IAAID,mBAAmB;IAC7E,MAAM,EAAEE,SAAS,EAAE,GAAGV;IAEtB,MAAMW,YAAYvB,kBAAkB;QAClCwB,aAAa;IACf;IACA,MAAMC,iBAAiBH,YAAY;QAAE,GAAGC,SAAS;QAAEG,UAAU;IAAE,IAAI,CAAC;IAEpE,sDAAsD;IACtD,MAAMC,KAAKrB,MAAMK,uBAAuBiB,IAAI,EAAEd,MAAMa,EAAE;IAEtDpB,MAAMsB,SAAS,CAAC;QACd,MAAMC,UAAUb,WAAWc,OAAO;QAElC,IAAID,SAAS;YACX,MAAME,WAAW,CAACC;gBAChB,MAAMC,QAAQD;gBACd,4FAA4F;gBAC5F,IAAI,CAACX,WAAW;oBACd,MAAMa,SAAS,CAACD,MAAME,MAAM,CAACC,SAAS;oBACtCP,QAAQQ,UAAU,GAAGH,OAAOI,QAAQ;oBACpCT,QAAQU,KAAK,GAAGL;gBAClB;YACF;YAEAL,QAAQW,gBAAgB,CAAC/B,wBAAwBsB;YAEjD,OAAO;gBACLF,QAAQY,mBAAmB,CAAChC,wBAAwBsB;YACtD;QACF;IACF,GAAG;QAACV;KAAU;IAEd,MAAMqB,qBAAqBpC,MAAMqC,WAAW,CAC1C,CAACC;QACC,IAAI,CAACA,EAAEC,gBAAgB,IAAI5C,cAAc2C,EAAEE,aAAa,KAAK,CAAC5B,aAAaY,OAAO,EAAE;YAClFX,oBAAoByB,GAAGA,EAAEE,aAAa,EAAE;QAC1C;IACF,GACA;QAAC3B;KAAoB;IAGvB,MAAM4B,kBAAkB,CAACH;QACvB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;YACvB3B,aAAaY,OAAO,GAAG;QACzB;IACF;IACA,MAAMkB,gBAAgB,CAACJ;QACrB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;YACvB3B,aAAaY,OAAO,GAAG;QACzB;IACF;IAEA,MAAMmB,iBAAiB/C,eAAeW,MAAMoC,cAAc,EAAEP;IAC5D,MAAMQ,YAAYhD,eAAeW,MAAMqC,SAAS,EAAEF;IAClD,MAAMG,cAAcjD,eAAeW,MAAMsC,WAAW,EAAEJ;IACtD,MAAMK,QAA2B;QAC/BrC;QACAsC,YAAY;YACV1B,MAAM;QACR;QACAA,MAAMxB,KAAKmD,MAAM,CACftD,yBAAyB,OAAO;YAC9Bc,KAAKV,cAAcY,YAAYF;YAC/ByC,MAAM;YACN9B,UAAUJ,YAAY,IAAImC;YAC1B,GAAG3C,KAAK;YACRa;YACAuB;YACAE;YACAD;YACA,GAAG1B,cAAc;QACnB,IACA;YAAEiC,aAAa;QAAM;IAEzB;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/CarouselCard/useCarouselCardStyles.styles.js

@@ -0,0 +1,45 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const carouselCardClassNames = {
+  root: 'fui-CarouselCard'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fg68ejw",
+    B2u0y6b: "f6dzj5z"
+  },
+  autoSize: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fd9q35j",
+    Bf4jedk: "fy77jfu",
+    a9b677: "f14z66ap",
+    B2u0y6b: "f6dzj5z"
+  }
+}, {
+  d: [[".fg68ejw{flex:0 0 100%;}", {
+    p: -1
+  }], ".f6dzj5z{max-width:100%;}", [".fd9q35j{flex:0 0 auto;}", {
+    p: -1
+  }], ".fy77jfu{min-width:0;}", ".f14z66ap{width:auto;}"]
+});
+/**
+ * Apply styling to the CarouselCard slots based on the state
+ */
+export const useCarouselCardStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    autoSize
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, autoSize && styles.autoSize, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useCarouselCardStyles.styles.js.map

package/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","carouselCardClassNames","root","useStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","d","p","useCarouselCardStyles_unstable","state","styles","className"],"sources":["useCarouselCardStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselCardClassNames = {\n    root: 'fui-CarouselCard'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flex: '0 0 100%',\n        maxWidth: '100%'\n    },\n    autoSize: {\n        flex: '0 0 auto' /* Adapt slide size to its content */ ,\n        minWidth: 0,\n        width: 'auto',\n        maxWidth: '100%'\n    }\n});\n/**\n * Apply styling to the CarouselCard slots based on the state\n */ export const useCarouselCardStyles_unstable = (state)=>{\n    'use no memo';\n    const { autoSize } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, autoSize && styles.autoSize, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAL,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAWrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEN;EAAS,CAAC,GAAGM,KAAK;EAC1B,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEO,QAAQ,IAAIO,MAAM,CAACP,QAAQ,EAAEM,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EAChI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselContext.js

@@ -0,0 +1,23 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const carouselContextDefaultValue = {
+    activeIndex: 0,
+    selectPageByElement: ()=>{
+        return 0;
+    },
+    selectPageByDirection: ()=>{
+        return 0;
+    },
+    selectPageByIndex: ()=>{
+    /** noop */ },
+    subscribeForValues: ()=>()=>{
+        /** noop */ },
+    enableAutoplay: ()=>{
+    /** noop */ },
+    resetAutoplay: ()=>{
+    /** noop */ },
+    circular: false,
+    containerRef: undefined
+};
+const CarouselContext = createContext(undefined);
+export const CarouselProvider = CarouselContext.Provider;
+export const useCarouselContext_unstable = (selector)=>useContextSelector(CarouselContext, (ctx = carouselContextDefaultValue)=>selector(ctx));

package/lib/components/CarouselContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselContext.ts"],"sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { CarouselContextValue } from './CarouselContext.types';\n\nexport const carouselContextDefaultValue: CarouselContextValue = {\n  activeIndex: 0,\n  selectPageByElement: () => {\n    return 0;\n  },\n  selectPageByDirection: () => {\n    return 0;\n  },\n  selectPageByIndex: () => {\n    /** noop */\n  },\n  subscribeForValues: () => () => {\n    /** noop */\n  },\n  enableAutoplay: () => {\n    /** noop */\n  },\n  resetAutoplay: () => {\n    /** noop */\n  },\n  circular: false,\n  containerRef: undefined,\n};\n\nconst CarouselContext = createContext<CarouselContextValue | undefined>(undefined);\n\nexport const CarouselProvider = CarouselContext.Provider;\n\nexport const useCarouselContext_unstable = <T>(selector: ContextSelector<CarouselContextValue, T>): T =>\n  useContextSelector(CarouselContext, (ctx = carouselContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","carouselContextDefaultValue","activeIndex","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","undefined","CarouselContext","CarouselProvider","Provider","useCarouselContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAGtG,OAAO,MAAMC,8BAAoD;IAC/DC,aAAa;IACbC,qBAAqB;QACnB,OAAO;IACT;IACAC,uBAAuB;QACrB,OAAO;IACT;IACAC,mBAAmB;IACjB,SAAS,GACX;IACAC,oBAAoB,IAAM;QACxB,SAAS,GACX;IACAC,gBAAgB;IACd,SAAS,GACX;IACAC,eAAe;IACb,SAAS,GACX;IACAC,UAAU;IACVC,cAAcC;AAChB,EAAE;AAEF,MAAMC,kBAAkBb,cAAgDY;AAExE,OAAO,MAAME,mBAAmBD,gBAAgBE,QAAQ,CAAC;AAEzD,OAAO,MAAMC,8BAA8B,CAAIC,WAC7ChB,mBAAmBY,iBAAiB,CAACK,MAAMhB,2BAA2B,GAAKe,SAASC,MAAM"}

package/lib/components/CarouselContext.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/CarouselContext.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselContext.types.ts"],"sourcesContent":["import type { EventData } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselUpdateData } from '../Carousel';\n\nexport type CarouselIndexChangeData = EventData<\n  'click' | 'focus',\n  React.FocusEvent | React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n> & {\n  /**\n   * The index to be set after event has occurred.\n   */\n  index: number;\n};\n\nexport type CarouselContextValue = {\n  activeIndex: number;\n  circular: boolean;\n  selectPageByElement: (event: React.FocusEvent, element: HTMLElement, jump?: boolean) => number;\n  selectPageByDirection: (\n    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n    direction: 'next' | 'prev',\n  ) => number;\n  selectPageByIndex: (\n    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n    value: number,\n    jump?: boolean,\n  ) => void;\n  subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void;\n  enableAutoplay: (autoplay: boolean) => void;\n  resetAutoplay: () => void;\n  containerRef?: React.RefObject<HTMLDivElement>;\n};\n\n/**\n * Context shared between Carousel and its children components\n */\nexport type CarouselContextValues = {\n  carousel: CarouselContextValue;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/components/CarouselNav/CarouselNav.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useCarouselNavContextValues_unstable } from './CarouselNavContext';
+import { renderCarouselNav_unstable } from './renderCarouselNav';
+import { useCarouselNav_unstable } from './useCarouselNav';
+import { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';
+/**
+ * Used to jump to a card based on index, using arrow navigation via Tabster.
+ *
+ * The children of this component will be wrapped in a context to
+ * provide the appropriate value based on their index position.
+ */ export const CarouselNav = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselNav_unstable(props, ref);
+    const contextValues = useCarouselNavContextValues_unstable(state);
+    useCarouselNavStyles_unstable(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);
+    return renderCarouselNav_unstable(state, contextValues);
+});
+CarouselNav.displayName = 'CarouselNav';

package/lib/components/CarouselNav/CarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselNav.tsx"],"sourcesContent":["import type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './CarouselNavContext';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNav_unstable(props, ref);\n  const contextValues = useCarouselNavContextValues_unstable(state);\n\n  useCarouselNavStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n  return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oCAAoC,QAAQ,uBAAuB;AAC5E,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQN,wBAAwBI,OAAOC;IAC7C,MAAME,gBAAgBT,qCAAqCQ;IAE3DL,8BAA8BK;IAC9B,8HAA8H;IAC9H,wGAAwG;IACxG,uEAAuE;IAEvE,OAAOP,2BAA2BO,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

package/lib/components/CarouselNav/CarouselNav.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/CarouselNav/CarouselNav.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselNav.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselNavSlots = {\n  /**\n   * The element wrapping the carousel pagination. By default, this is a div.\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (index: number) => React.ReactNode;\n\nexport type CarouselNavState = ComponentState<CarouselNavSlots> & {\n  /**\n   * Enables an alternate brand style when set to 'brand'\n   */\n  appearance?: 'brand';\n\n  /**\n   * The function that will render nav items based on total slides and their index.\n   */\n  renderNavButton: NavButtonRenderFunction;\n\n  /**\n   * The total number of slides available.\n   * Users may override if using the component without a Carousel wrapper or implementing custom functionality.\n   */\n  totalSlides: number;\n};\n\nexport type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {\n  children: NavButtonRenderFunction;\n} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;\n\nexport type CarouselNavContextValue = Pick<CarouselNavState, 'appearance'>;\n"],"names":["React"],"rangeMappings":"","mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/components/CarouselNav/CarouselNavContext.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+const carouselNavContext = React.createContext(undefined);
+export const carouselNavContextDefaultValue = {
+    appearance: undefined
+};
+export const useCarouselNavContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(carouselNavContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavContextDefaultValue;
+};
+export const CarouselNavContextProvider = carouselNavContext.Provider;
+export function useCarouselNavContextValues_unstable(state) {
+    const { appearance } = state;
+    const carouselNav = React.useMemo(()=>({
+            appearance
+        }), [
+        appearance
+    ]);
+    return {
+        carouselNav
+    };
+}

package/lib/components/CarouselNav/CarouselNavContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselNavContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { CarouselNavContextValue, CarouselNavState } from './CarouselNav.types';\n\nconst carouselNavContext = React.createContext<CarouselNavContextValue | undefined>(undefined);\n\nexport const carouselNavContextDefaultValue: CarouselNavContextValue = {\n  appearance: undefined,\n};\n\nexport const useCarouselNavContext = () => React.useContext(carouselNavContext) ?? carouselNavContextDefaultValue;\n\nexport const CarouselNavContextProvider = carouselNavContext.Provider;\n\n/**\n * Context shared between CarouselNav and its children components\n */\nexport type CarouselNavContextValues = {\n  carouselNav: CarouselNavContextValue;\n};\n\nexport function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {\n  const { appearance } = state;\n  const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);\n\n  return { carouselNav };\n}\n"],"names":["React","carouselNavContext","createContext","undefined","carouselNavContextDefaultValue","appearance","useCarouselNavContext","useContext","CarouselNavContextProvider","Provider","useCarouselNavContextValues_unstable","state","carouselNav","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,qBAAqBD,MAAME,aAAa,CAAsCC;AAEpF,OAAO,MAAMC,iCAA0D;IACrEC,YAAYF;AACd,EAAE;AAEF,OAAO,MAAMG,wBAAwB;QAAMN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,iCAAjBD,+BAAAA,oBAAwCI;AAA6B,EAAE;AAElH,OAAO,MAAMI,6BAA6BP,mBAAmBQ,QAAQ,CAAC;AAStE,OAAO,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEN,UAAU,EAAE,GAAGM;IACvB,MAAMC,cAAcZ,MAAMa,OAAO,CAAC,IAAO,CAAA;YAAER;QAAW,CAAA,GAAI;QAACA;KAAW;IAEtE,OAAO;QAAEO;IAAY;AACvB"}

package/lib/components/CarouselNav/CarouselNavIndexContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+const carouselNavIndexContext = React.createContext(undefined);
+export const carouselNavIndexContextDefaultValue = 0;
+export const useCarouselNavIndexContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(carouselNavIndexContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavIndexContextDefaultValue;
+};
+export const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;

package/lib/components/CarouselNav/CarouselNavIndexContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselNavIndexContext.ts"],"sourcesContent":["import * as React from 'react';\n\nconst carouselNavIndexContext = React.createContext<number | undefined>(undefined);\n\nexport const carouselNavIndexContextDefaultValue: number = 0;\n\nexport const useCarouselNavIndexContext = () =>\n  React.useContext(carouselNavIndexContext) ?? carouselNavIndexContextDefaultValue;\n\nexport const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;\n"],"names":["React","carouselNavIndexContext","createContext","undefined","carouselNavIndexContextDefaultValue","useCarouselNavIndexContext","useContext","CarouselNavIndexContextProvider","Provider"],"rangeMappings":";;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0BAA0BD,MAAME,aAAa,CAAqBC;AAExE,OAAO,MAAMC,sCAA8C,EAAE;AAE7D,OAAO,MAAMC,6BAA6B;QACxCL;WAAAA,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,sCAAjBD,+BAAAA,oBAA6CI;AAAkC,EAAE;AAEnF,OAAO,MAAMG,kCAAkCN,wBAAwBO,QAAQ,CAAC"}

package/lib/components/CarouselNav/index.js

@@ -0,0 +1,5 @@
+export * from './CarouselNav';
+export * from './CarouselNav.types';
+export * from './renderCarouselNav';
+export * from './useCarouselNav';
+export * from './useCarouselNavStyles.styles';

package/lib/components/CarouselNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselNav';\nexport * from './CarouselNav.types';\nexport * from './renderCarouselNav';\nexport * from './useCarouselNav';\nexport * from './useCarouselNavStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

package/lib/components/CarouselNav/renderCarouselNav.js

@@ -0,0 +1,19 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { CarouselNavContextProvider } from './CarouselNavContext';
+import { CarouselNavIndexContextProvider } from './CarouselNavIndexContext';
+/**
+ * Render the final JSX of CarouselNav
+ */ export const renderCarouselNav_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    const { totalSlides, renderNavButton } = state;
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(CarouselNavContextProvider, {
+            value: contextValues.carouselNav,
+            children: new Array(totalSlides).fill(null).map((_, index)=>/*#__PURE__*/ _jsx(CarouselNavIndexContextProvider, {
+                    value: index,
+                    children: renderNavButton(index)
+                }, index))
+        })
+    });
+};

package/lib/components/CarouselNav/renderCarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { CarouselNavState, CarouselNavSlots } from './CarouselNav.types';\nimport { CarouselNavContextProvider, type CarouselNavContextValues } from './CarouselNavContext';\nimport { CarouselNavIndexContextProvider } from './CarouselNavIndexContext';\n\n/**\n * Render the final JSX of CarouselNav\n */\nexport const renderCarouselNav_unstable = (state: CarouselNavState, contextValues: CarouselNavContextValues) => {\n  assertSlots<CarouselNavSlots>(state);\n\n  const { totalSlides, renderNavButton } = state;\n\n  return (\n    <state.root>\n      <CarouselNavContextProvider value={contextValues.carouselNav}>\n        {new Array(totalSlides).fill(null).map((_, index) => (\n          <CarouselNavIndexContextProvider key={index} value={index}>\n            {renderNavButton(index)}\n          </CarouselNavIndexContextProvider>\n        ))}\n      </CarouselNavContextProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","CarouselNavContextProvider","CarouselNavIndexContextProvider","renderCarouselNav_unstable","state","contextValues","totalSlides","renderNavButton","root","value","carouselNav","Array","fill","map","_","index"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,0BAA0B,QAAuC,uBAAuB;AACjG,SAASC,+BAA+B,QAAQ,4BAA4B;AAE5E;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC;IAClEL,YAA8BI;IAE9B,MAAM,EAAEE,WAAW,EAAEC,eAAe,EAAE,GAAGH;IAEzC,qBACE,KAACA,MAAMI,IAAI;kBACT,cAAA,KAACP;YAA2BQ,OAAOJ,cAAcK,WAAW;sBACzD,IAAIC,MAAML,aAAaM,IAAI,CAAC,MAAMC,GAAG,CAAC,CAACC,GAAGC,sBACzC,KAACb;oBAA4CO,OAAOM;8BACjDR,gBAAgBQ;mBADmBA;;;AAOhD,EAAE"}

package/lib/components/CarouselNav/useCarouselNav.js

@@ -0,0 +1,49 @@
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+/**
+ * Create the state required to render CarouselNav.
+ *
+ * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,
+ * before being passed to renderCarouselNav_unstable.
+ *
+ * @param props - props from this instance of CarouselNav
+ * @param ref - reference to root HTMLDivElement of CarouselNav
+ */ export const useCarouselNav_unstable = (props, ref)=>{
+    const { appearance } = props;
+    const focusableGroupAttr = useArrowNavigationGroup({
+        circular: false,
+        axis: 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+    var _props_totalSlides;
+    const [totalSlides, setTotalSlides] = React.useState((_props_totalSlides = props.totalSlides) !== null && _props_totalSlides !== void 0 ? _props_totalSlides : 0);
+    const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
+    useIsomorphicLayoutEffect(()=>{
+        return subscribeForValues((data)=>{
+            setTotalSlides(data.navItemsCount);
+        });
+    }, [
+        subscribeForValues
+    ]);
+    return {
+        totalSlides,
+        appearance,
+        renderNavButton: props.children,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role: 'tablist',
+            ...props,
+            ...focusableGroupAttr,
+            children: null
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib/components/CarouselNav/useCarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCarouselNav.ts"],"sourcesContent":["import { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n  const { appearance } = props;\n\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular: false,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const [totalSlides, setTotalSlides] = React.useState(props.totalSlides ?? 0);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      setTotalSlides(data.navItemsCount);\n    });\n  }, [subscribeForValues]);\n\n  return {\n    totalSlides,\n    appearance,\n    renderNavButton: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'tablist',\n        ...props,\n        ...focusableGroupAttr,\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","React","useCarouselContext_unstable","useCarouselContext","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","useState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,yBAAyB,QAAQ,4BAA4B;AACtG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,qBAAqBX,wBAAwB;QACjDY,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;QAEqDP;IAArD,MAAM,CAACQ,aAAaC,eAAe,GAAGb,MAAMc,QAAQ,CAACV,CAAAA,qBAAAA,MAAMQ,WAAW,cAAjBR,gCAAAA,qBAAqB;IAC1E,MAAMW,qBAAqBb,mBAAmBc,CAAAA,MAAOA,IAAID,kBAAkB;IAE3EhB,0BAA0B;QACxB,OAAOgB,mBAAmBE,CAAAA;YACxBJ,eAAeI,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;KAAmB;IAEvB,OAAO;QACLH;QACAN;QACAa,iBAAiBf,MAAMgB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAyB,OAAO;YAC9BQ;YACAmB,MAAM;YACN,GAAGpB,KAAK;YACR,GAAGG,kBAAkB;YACrBa,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}