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

package/lib-commonjs/components/CarouselButton/useCarouselButton.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCarouselButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCarouselButton_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactbutton = require("@fluentui/react-button");
+const _reacticons = require("@fluentui/react-icons");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _CarouselContext = require("../CarouselContext");
+const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+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 } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const buttonRef = (0, _react.useRef)();
+    const circular = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.circular);
+    const containerRef = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.containerRef);
+    const selectPageByDirection = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByDirection);
+    const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
+    const resetAutoplay = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.resetAutoplay);
+    const isTrailing = (0, _CarouselContext.useCarouselContext_unstable)((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(`.${_useCarouselButtonStylesstyles.carouselButtonClassNames.root}`);
+            buttonRefs.forEach((_buttonRef)=>{
+                if (_buttonRef !== buttonRef.current) {
+                    _buttonRef.focus();
+                }
+            });
+        }
+        resetAutoplay();
+    };
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        return subscribeForValues((data)=>{
+            setTotalSlides(data.navItemsCount);
+        });
+    }, [
+        subscribeForValues
+    ]);
+    const nextArrowIcon = dir === 'ltr' ? /*#__PURE__*/ _react.createElement(_reacticons.ChevronRightRegular, null) : /*#__PURE__*/ _react.createElement(_reacticons.ChevronLeftRegular, null);
+    const prevArrowIcon = dir === 'ltr' ? /*#__PURE__*/ _react.createElement(_reacticons.ChevronLeftRegular, null) : /*#__PURE__*/ _react.createElement(_reacticons.ChevronRightRegular, null);
+    return {
+        navType,
+        // We lean on react-button class to handle styling and icon enhancements
+        ...(0, _reactbutton.useButton_unstable)({
+            icon: _reactutilities.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: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(handleClick, props.onClick))
+        }, (0, _reactutilities.useMergedRefs)(ref, buttonRef))
+    };
+};

package/lib-commonjs/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":["useCarouselButton_unstable","props","ref","navType","totalSlides","setTotalSlides","React","useState","dir","useFluent","buttonRef","useRef","circular","useCarouselContext","ctx","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","carouselButtonClassNames","root","forEach","_buttonRef","focus","useIsomorphicLayoutEffect","data","navItemsCount","nextArrowIcon","createElement","ChevronRightRegular","ChevronLeftRegular","prevArrowIcon","useButton_unstable","icon","slot","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick","useEventCallback","mergeCallbacks","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;;6BA3BsB;4BACqB;gCAOjD;iEACgB;iCAE2C;+CAGzB;qCAEO;AAWzC,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGF;IAE7B,+EAA+E;IAC/E,MAAM,CAACG,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAAC;IAErD,MAAM,EAAEC,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAChB,MAAMC,YAAYC,IAAAA,aAAAA;IAClB,MAAMC,WAAWC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,QAAQ;IACvD,MAAMG,eAAeF,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,YAAY;IAC/D,MAAMC,wBAAwBH,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIE,qBAAqB;IACjF,MAAMC,qBAAqBJ,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIG,kBAAkB;IAC3E,MAAMC,gBAAgBL,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAII,aAAa;IAEjE,MAAMC,aAAaN,IAAAA,4CAAAA,EAAmBC,CAAAA;QACpC,IAAIF,UAAU;YACZ,OAAO;QACT;QAEA,IAAIT,YAAY,QAAQ;YACtB,OAAOW,IAAIM,WAAW,KAAK;QAC7B;QAEA,OAAON,IAAIM,WAAW,KAAKhB,cAAc;IAC3C;IAEA,MAAMiB,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,YAAYR,sBAAsBM,OAAOnB;QAE/C,IAAIsB,YAAY;QAChB,IAAItB,YAAY,QAAQ;YACtBsB,YAAYD,cAAc;QAC5B,OAAO;YACLC,YAAYD,cAAcpB,cAAc;QAC1C;QAEA,IAAI,CAACQ,YAAYa,aAAaV,CAAAA,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcW,OAAO,AAAPA,GAAS;YACnD,6BAA6B;YAC7B,MAAMC,aAA4CZ,aAAaW,OAAO,CAACE,gBAAgB,CACrF,CAAC,CAAC,EAAEC,uDAAAA,CAAyBC,IAAI,CAAC,CAAC;YAErCH,WAAWI,OAAO,CAACC,CAAAA;gBACjB,IAAIA,eAAetB,UAAUgB,OAAO,EAAE;oBACpCM,WAAWC,KAAK;gBAClB;YACF;QACF;QAEAf;IACF;IAEAgB,IAAAA,yCAAAA,EAA0B;QACxB,OAAOjB,mBAAmB,CAACkB;YACzB9B,eAAe8B,KAAKC,aAAa;QACnC;IACF,GAAG;QAACnB;KAAmB;IAEvB,MAAMoB,gBAAgB7B,QAAQ,QAAA,WAAA,GAAQF,OAAAgC,aAAA,CAACC,+BAAAA,EAAAA,QAAAA,WAAAA,GAAyBjC,OAAAgC,aAAA,CAACE,8BAAAA,EAAAA;IACjE,MAAMC,gBAAgBjC,QAAQ,QAAA,WAAA,GAAQF,OAAAgC,aAAA,CAACE,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwBlC,OAAAgC,aAAA,CAACC,+BAAAA,EAAAA;IAEhE,OAAO;QACLpC;QACA,wEAAwE;QACxE,GAAGuC,IAAAA,+BAAAA,EACD;YACEC,MAAMC,oBAAAA,CAAKC,QAAQ,CAAC5C,MAAM0C,IAAI,EAAE;gBAC9BG,cAAc;oBACZC,UAAU5C,YAAY,SAASkC,gBAAgBI;gBACjD;gBACAO,iBAAiB;gBACjBC,aAAa;YACf;YACAC,UAAU/B;YACVgC,UAAUhC,aAAa,CAAC,IAAI;YAC5B,iBAAiBA;YACjBiC,YAAY;YACZ,GAAGnD,KAAK;YACRoD,SAASC,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAelC,aAAapB,MAAMoD,OAAO;QACrE,GACAG,IAAAA,6BAAAA,EAActD,KAAKQ,WACpB;IACH;AACF"}

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    carouselButtonClassNames: function() {
+        return carouselButtonClassNames;
+    },
+    useCarouselButtonStyles_unstable: function() {
+        return useCarouselButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const carouselButtonClassNames = {
+    root: 'fui-CarouselButton',
+    icon: 'fui-CarouselButton__icon'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__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;}"
+    ]
+});
+const useCarouselButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state = {
+        ...state,
+        ...(0, _reactbutton.useButtonStyles_unstable)(state)
+    };
+    state.root.className = (0, _react.mergeClasses)(carouselButtonClassNames.root, styles.root, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(carouselButtonClassNames.icon, state.icon.className);
+    }
+    return state;
+}; //# sourceMappingURL=useCarouselButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["carouselButtonClassNames","useCarouselButtonStyles_unstable","root","icon","useStyles","__styles","B6of3ja","jrapky","sj55zd","De3pzq","Bkecrkj","eoavqd","d","h","state","styles","useButtonStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IAoBIC,gCAAgC;eAAhCA;;;uBAvBwB;6BACA;AAElC,MAAMD,2BAA2B;IACpCE,MAAM;IACNC,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,MAAA;QAAAI,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAcX,MAAMZ,mCAAoCa,CAAAA;IACjD;IACA,MAAMC,SAASX;IACfU,QAAQ;QACJ,GAAGA,KAAK;QACR,GAAGE,IAAAA,qCAAwB,EAACF,MAAK;IACrC;IACAA,MAAMZ,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,yBAAyBE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACe,SAAS;IACpG,IAAIH,MAAMX,IAAI,EAAE;QACZW,MAAMX,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,yBAAyBG,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAC3F;IACA,OAAOH;AACX"}

package/lib-commonjs/components/CarouselCard/CarouselCard.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselCard", {
+    enumerable: true,
+    get: function() {
+        return CarouselCard;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCarouselCard = require("./useCarouselCard");
+const _renderCarouselCard = require("./renderCarouselCard");
+const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");
+const CarouselCard = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCarouselCard.useCarouselCard_unstable)(props, ref);
+    (0, _useCarouselCardStylesstyles.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 (0, _renderCarouselCard.renderCarouselCard_unstable)(state);
+});
+CarouselCard.displayName = 'CarouselCard';

package/lib-commonjs/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":["CarouselCard","React","forwardRef","props","ref","state","useCarouselCard_unstable","useCarouselCardStyles_unstable","renderCarouselCard_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;iCAEkB;oCACG;6CACG;AAWxC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAC/B,8HAA8H;IAC9H,wGAAwG;IACxG,wEAAwE;IACxE,OAAOG,IAAAA,+CAAAA,EAA4BH;AACrC;AAEAL,aAAaS,WAAW,GAAG"}

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

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering CarouselCard
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/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"}

package/lib-commonjs/components/CarouselCard/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./CarouselCard"), exports);
+_export_star._(require("./CarouselCard.types"), exports);
+_export_star._(require("./renderCarouselCard"), exports);
+_export_star._(require("./useCarouselCard"), exports);
+_export_star._(require("./useCarouselCardStyles.styles"), exports);

package/lib-commonjs/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":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselCard/renderCarouselCard.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderCarouselCard_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderCarouselCard_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderCarouselCard_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+};

package/lib-commonjs/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":["renderCarouselCard_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,8BAA8B,CAACC;IAC1CC,IAAAA,2BAAAA,EAA+BD;IAE/B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}

package/lib-commonjs/components/CarouselCard/useCarouselCard.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCarouselCard_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCarouselCard_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _CarouselContext = require("../CarouselContext");
+const _useEmblaCarousel = require("../useEmblaCarousel");
+const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");
+const _CarouselSliderContext = require("../CarouselSlider/CarouselSliderContext");
+const useCarouselCard_unstable = (props, ref)=>{
+    const { autoSize } = props;
+    const elementRef = _react.useRef(null);
+    const isMouseEvent = _react.useRef(false);
+    const selectPageByElement = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByElement);
+    const { cardFocus } = (0, _CarouselSliderContext.useCarouselSliderContext)();
+    const focusAttr = (0, _reacttabster.useFocusableGroup)({
+        tabBehavior: 'limited'
+    });
+    const focusAttrProps = cardFocus ? {
+        ...focusAttr,
+        tabIndex: 0
+    } : {};
+    // We attach a unique card id if user does not provide
+    const id = (0, _reactutilities.useId)(_useCarouselCardStylesstyles.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(_useEmblaCarousel.EMBLA_VISIBILITY_EVENT, listener);
+            return ()=>{
+                element.removeEventListener(_useEmblaCarousel.EMBLA_VISIBILITY_EVENT, listener);
+            };
+        }
+    }, [
+        cardFocus
+    ]);
+    const handleFocusCapture = _react.useCallback((e)=>{
+        if (!e.defaultPrevented && (0, _reactutilities.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 = (0, _reactutilities.mergeCallbacks)(props.onFocusCapture, handleFocusCapture);
+    const onMouseUp = (0, _reactutilities.mergeCallbacks)(props.onMouseUp, handleMouseUp);
+    const onMouseDown = (0, _reactutilities.mergeCallbacks)(props.onMouseDown, handleMouseDown);
+    const state = {
+        autoSize,
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref: (0, _reactutilities.useMergedRefs)(elementRef, ref),
+            role: 'tabpanel',
+            tabIndex: cardFocus ? 0 : undefined,
+            ...props,
+            id,
+            onFocusCapture,
+            onMouseDown,
+            onMouseUp,
+            ...focusAttrProps
+        }), {
+            elementType: 'div'
+        })
+    };
+    return state;
+};

package/lib-commonjs/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":["useCarouselCard_unstable","props","ref","autoSize","elementRef","React","useRef","isMouseEvent","selectPageByElement","useCarouselContext","ctx","cardFocus","useCarouselSliderContext","focusAttr","useFocusableGroup","tabBehavior","focusAttrProps","tabIndex","id","useId","carouselCardClassNames","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","EMBLA_VISIBILITY_EVENT","removeEventListener","handleFocusCapture","useCallback","e","defaultPrevented","isHTMLElement","currentTarget","handleMouseDown","handleMouseUp","onFocusCapture","mergeCallbacks","onMouseUp","onMouseDown","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BaA;;;eAAAA;;;;8BA3BqB;gCAQ3B;iEACgB;iCAE2C;kCAE3B;6CAEA;uCACE;AAWlC,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGF;IACrB,MAAMG,aAAaC,OAAMC,MAAM,CAAiB;IAChD,MAAMC,eAAeF,OAAMC,MAAM,CAAU;IAC3C,MAAME,sBAAsBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,mBAAmB;IAC7E,MAAM,EAAEG,SAAS,EAAE,GAAGC,IAAAA,+CAAAA;IAEtB,MAAMC,YAAYC,IAAAA,+BAAAA,EAAkB;QAClCC,aAAa;IACf;IACA,MAAMC,iBAAiBL,YAAY;QAAE,GAAGE,SAAS;QAAEI,UAAU;IAAE,IAAI,CAAC;IAEpE,sDAAsD;IACtD,MAAMC,KAAKC,IAAAA,qBAAAA,EAAMC,mDAAAA,CAAuBC,IAAI,EAAEpB,MAAMiB,EAAE;IAEtDb,OAAMiB,SAAS,CAAC;QACd,MAAMC,UAAUnB,WAAWoB,OAAO;QAElC,IAAID,SAAS;YACX,MAAME,WAAW,CAACC;gBAChB,MAAMC,QAAQD;gBACd,4FAA4F;gBAC5F,IAAI,CAACf,WAAW;oBACd,MAAMiB,SAAS,CAACD,MAAME,MAAM,CAACC,SAAS;oBACtCP,QAAQQ,UAAU,GAAGH,OAAOI,QAAQ;oBACpCT,QAAQU,KAAK,GAAGL;gBAClB;YACF;YAEAL,QAAQW,gBAAgB,CAACC,wCAAAA,EAAwBV;YAEjD,OAAO;gBACLF,QAAQa,mBAAmB,CAACD,wCAAAA,EAAwBV;YACtD;QACF;IACF,GAAG;QAACd;KAAU;IAEd,MAAM0B,qBAAqBhC,OAAMiC,WAAW,CAC1C,CAACC;QACC,IAAI,CAACA,EAAEC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,EAAEG,aAAa,KAAK,CAACnC,aAAaiB,OAAO,EAAE;YAClFhB,oBAAoB+B,GAAGA,EAAEG,aAAa,EAAE;QAC1C;IACF,GACA;QAAClC;KAAoB;IAGvB,MAAMmC,kBAAkB,CAACJ;QACvB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;YACvBjC,aAAaiB,OAAO,GAAG;QACzB;IACF;IACA,MAAMoB,gBAAgB,CAACL;QACrB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;YACvBjC,aAAaiB,OAAO,GAAG;QACzB;IACF;IAEA,MAAMqB,iBAAiBC,IAAAA,8BAAAA,EAAe7C,MAAM4C,cAAc,EAAER;IAC5D,MAAMU,YAAYD,IAAAA,8BAAAA,EAAe7C,MAAM8C,SAAS,EAAEH;IAClD,MAAMI,cAAcF,IAAAA,8BAAAA,EAAe7C,MAAM+C,WAAW,EAAEL;IACtD,MAAMM,QAA2B;QAC/B9C;QACA+C,YAAY;YACV7B,MAAM;QACR;QACAA,MAAM8B,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BnD,KAAKoD,IAAAA,6BAAAA,EAAclD,YAAYF;YAC/BqD,MAAM;YACNtC,UAAUN,YAAY,IAAI6C;YAC1B,GAAGvD,KAAK;YACRiB;YACA2B;YACAG;YACAD;YACA,GAAG/B,cAAc;QACnB,IACA;YAAEyC,aAAa;QAAM;IAEzB;IAEA,OAAOR;AACT"}

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    carouselCardClassNames: function() {
+        return carouselCardClassNames;
+    },
+    useCarouselCardStyles_unstable: function() {
+        return useCarouselCardStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const carouselCardClassNames = {
+    root: 'fui-CarouselCard'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__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;}"
+    ]
+});
+const useCarouselCardStyles_unstable = (state)=>{
+    'use no memo';
+    const { autoSize } = state;
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(carouselCardClassNames.root, styles.root, autoSize && styles.autoSize, state.root.className);
+    return state;
+}; //# sourceMappingURL=useCarouselCardStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["carouselCardClassNames","useCarouselCardStyles_unstable","root","useStyles","__styles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,sBAAsB;eAAtBA;;IAmBIC,8BAA8B;eAA9BA;;;uBApBwB;AAClC,MAAMD,yBAAyB;IAClCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,MAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,UAAA;QAAAL,MAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAH,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA;AAcX,MAAMb,iCAAkCc,CAAAA;IAC/C;IACA,MAAM,EAAEL,QAAAA,EAAU,GAAGK;IACrB,MAAMC,SAASb;IACfY,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,uBAAuBE,IAAI,EAAEc,OAAOd,IAAI,EAAEQ,YAAYM,OAAON,QAAQ,EAAEK,MAAMb,IAAI,CAACe,SAAS;IAC/H,OAAOF;AACX"}

package/lib-commonjs/components/CarouselContext.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CarouselProvider: function() {
+        return CarouselProvider;
+    },
+    carouselContextDefaultValue: function() {
+        return carouselContextDefaultValue;
+    },
+    useCarouselContext_unstable: function() {
+        return useCarouselContext_unstable;
+    }
+});
+const _reactcontextselector = require("@fluentui/react-context-selector");
+const carouselContextDefaultValue = {
+    activeIndex: 0,
+    selectPageByElement: ()=>{
+        return 0;
+    },
+    selectPageByDirection: ()=>{
+        return 0;
+    },
+    selectPageByIndex: ()=>{
+    /** noop */ },
+    subscribeForValues: ()=>()=>{
+        /** noop */ },
+    enableAutoplay: ()=>{
+    /** noop */ },
+    resetAutoplay: ()=>{
+    /** noop */ },
+    circular: false,
+    containerRef: undefined
+};
+const CarouselContext = (0, _reactcontextselector.createContext)(undefined);
+const CarouselProvider = CarouselContext.Provider;
+const useCarouselContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(CarouselContext, (ctx = carouselContextDefaultValue)=>selector(ctx));

package/lib-commonjs/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":["CarouselProvider","carouselContextDefaultValue","useCarouselContext_unstable","activeIndex","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","undefined","CarouselContext","createContext","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6BaA,gBAAAA;eAAAA;;IA1BAC,2BAAAA;eAAAA;;IA4BAC,2BAAAA;eAAAA;;;sCA/BsD;AAG5D,MAAMD,8BAAoD;IAC/DE,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;AAEA,MAAMC,kBAAkBC,IAAAA,mCAAAA,EAAgDF;AAEjE,MAAMZ,mBAAmBa,gBAAgBE,QAAQ;AAEjD,MAAMb,8BAA8B,CAAIc,WAC7CC,IAAAA,wCAAAA,EAAmBJ,iBAAiB,CAACK,MAAMjB,2BAA2B,GAAKe,SAASE"}

package/lib-commonjs/components/CarouselContext.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/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":[],"rangeMappings":";;;;;","mappings":";;;;;iEACuB"}

package/lib-commonjs/components/CarouselNav/CarouselNav.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselNav", {
+    enumerable: true,
+    get: function() {
+        return CarouselNav;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _CarouselNavContext = require("./CarouselNavContext");
+const _renderCarouselNav = require("./renderCarouselNav");
+const _useCarouselNav = require("./useCarouselNav");
+const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles");
+const CarouselNav = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCarouselNav.useCarouselNav_unstable)(props, ref);
+    const contextValues = (0, _CarouselNavContext.useCarouselNavContextValues_unstable)(state);
+    (0, _useCarouselNavStylesstyles.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 (0, _renderCarouselNav.renderCarouselNav_unstable)(state, contextValues);
+});
+CarouselNav.displayName = 'CarouselNav';

package/lib-commonjs/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":["CarouselNav","React","forwardRef","props","ref","state","useCarouselNav_unstable","contextValues","useCarouselNavContextValues_unstable","useCarouselNavStyles_unstable","renderCarouselNav_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAdU;oCAG8B;mCACV;gCACH;4CACM;AAQvC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAC7C,MAAMG,gBAAgBC,IAAAA,wDAAAA,EAAqCH;IAE3DI,IAAAA,yDAAAA,EAA8BJ;IAC9B,8HAA8H;IAC9H,wGAAwG;IACxG,uEAAuE;IAEvE,OAAOK,IAAAA,6CAAAA,EAA2BL,OAAOE;AAC3C;AAEAP,YAAYW,WAAW,GAAG"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/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":[],"rangeMappings":";;;;;","mappings":";;;;;iEACuB"}

package/lib-commonjs/components/CarouselNav/CarouselNavContext.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CarouselNavContextProvider: function() {
+        return CarouselNavContextProvider;
+    },
+    carouselNavContextDefaultValue: function() {
+        return carouselNavContextDefaultValue;
+    },
+    useCarouselNavContext: function() {
+        return useCarouselNavContext;
+    },
+    useCarouselNavContextValues_unstable: function() {
+        return useCarouselNavContextValues_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const carouselNavContext = /*#__PURE__*/ _react.createContext(undefined);
+const carouselNavContextDefaultValue = {
+    appearance: undefined
+};
+const useCarouselNavContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = _react.useContext(carouselNavContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavContextDefaultValue;
+};
+const CarouselNavContextProvider = carouselNavContext.Provider;
+function useCarouselNavContextValues_unstable(state) {
+    const { appearance } = state;
+    const carouselNav = _react.useMemo(()=>({
+            appearance
+        }), [
+        appearance
+    ]);
+    return {
+        carouselNav
+    };
+}

package/lib-commonjs/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":["CarouselNavContextProvider","carouselNavContextDefaultValue","useCarouselNavContext","useCarouselNavContextValues_unstable","carouselNavContext","React","createContext","undefined","appearance","useContext","Provider","state","carouselNav","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,0BAAAA;eAAAA;;IANAC,8BAAAA;eAAAA;;IAIAC,qBAAAA;eAAAA;;IAWGC,oCAAAA;eAAAA;;;;iEApBO;AAGvB,MAAMC,mCAAqBC,OAAMC,aAAa,CAAsCC;AAE7E,MAAMN,iCAA0D;IACrEO,YAAYD;AACd;AAEO,MAAML,wBAAwB;QAAMG;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,mBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAwCJ;AAA6B;AAEzG,MAAMD,6BAA6BI,mBAAmBM,QAAQ;AAS9D,SAASP,qCAAqCQ,KAAuB;IAC1E,MAAM,EAAEH,UAAU,EAAE,GAAGG;IACvB,MAAMC,cAAcP,OAAMQ,OAAO,CAAC,IAAO,CAAA;YAAEL;QAAW,CAAA,GAAI;QAACA;KAAW;IAEtE,OAAO;QAAEI;IAAY;AACvB"}