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

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

@@ -0,0 +1,30 @@
+"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, {
+    CarouselNavIndexContextProvider: function() {
+        return CarouselNavIndexContextProvider;
+    },
+    carouselNavIndexContextDefaultValue: function() {
+        return carouselNavIndexContextDefaultValue;
+    },
+    useCarouselNavIndexContext: function() {
+        return useCarouselNavIndexContext;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const carouselNavIndexContext = /*#__PURE__*/ _react.createContext(undefined);
+const carouselNavIndexContextDefaultValue = 0;
+const useCarouselNavIndexContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = _react.useContext(carouselNavIndexContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavIndexContextDefaultValue;
+};
+const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;

package/lib-commonjs/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":["CarouselNavIndexContextProvider","carouselNavIndexContextDefaultValue","useCarouselNavIndexContext","carouselNavIndexContext","React","createContext","undefined","useContext","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,+BAAAA;eAAAA;;IALAC,mCAAAA;eAAAA;;IAEAC,0BAAAA;eAAAA;;;;iEANU;AAEvB,MAAMC,wCAA0BC,OAAMC,aAAa,CAAqBC;AAEjE,MAAML,sCAA8C;AAEpD,MAAMC,6BAA6B;QACxCE;WAAAA,CAAAA,oBAAAA,OAAMG,UAAU,CAACJ,wBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAA6CH;AAAkC;AAE1E,MAAMD,kCAAkCG,wBAAwBK,QAAQ"}

package/lib-commonjs/components/CarouselNav/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("./CarouselNav"), exports);
+_export_star._(require("./CarouselNav.types"), exports);
+_export_star._(require("./renderCarouselNav"), exports);
+_export_star._(require("./useCarouselNav"), exports);
+_export_star._(require("./useCarouselNavStyles.styles"), exports);

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderCarouselNav_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderCarouselNav_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _CarouselNavContext = require("./CarouselNavContext");
+const _CarouselNavIndexContext = require("./CarouselNavIndexContext");
+const renderCarouselNav_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    const { totalSlides, renderNavButton } = state;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselNavContext.CarouselNavContextProvider, {
+            value: contextValues.carouselNav,
+            children: new Array(totalSlides).fill(null).map((_, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselNavIndexContext.CarouselNavIndexContextProvider, {
+                    value: index,
+                    children: renderNavButton(index)
+                }, index))
+        })
+    });
+};

package/lib-commonjs/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":["renderCarouselNav_unstable","state","contextValues","assertSlots","totalSlides","renderNavButton","_jsx","root","CarouselNavContextProvider","value","carouselNav","Array","fill","map","_","index","CarouselNavIndexContextProvider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;4BAXb;gCAE4B;oCAG8C;yCAC1B;AAKzC,MAAMA,6BAA6B,CAACC,OAAyBC;IAClEC,IAAAA,2BAAAA,EAA8BF;IAE9B,MAAM,EAAEG,WAAW,EAAEC,eAAe,EAAE,GAAGJ;IAEzC,OAAA,WAAA,GACEK,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,8CAAAA,EAAAA;YAA2BC,OAAOP,cAAcQ,WAAW;sBACzD,IAAIC,MAAMP,aAAaQ,IAAI,CAAC,MAAMC,GAAG,CAAC,CAACC,GAAGC,QAAAA,WAAAA,GACzCT,IAAAA,eAAA,EAACU,wDAAAA,EAAAA;oBAA4CP,OAAOM;8BACjDV,gBAAgBU;mBADmBA;;;AAOhD"}

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCarouselNav_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCarouselNav_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 useCarouselNav_unstable = (props, ref)=>{
+    const { appearance } = props;
+    const focusableGroupAttr = (0, _reacttabster.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 = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        return subscribeForValues((data)=>{
+            setTotalSlides(data.navItemsCount);
+        });
+    }, [
+        subscribeForValues
+    ]);
+    return {
+        totalSlides,
+        appearance,
+        renderNavButton: props.children,
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            role: 'tablist',
+            ...props,
+            ...focusableGroupAttr,
+            children: null
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib-commonjs/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":["useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","useArrowNavigationGroup","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","React","useState","subscribeForValues","useCarouselContext","ctx","useIsomorphicLayoutEffect","data","navItemsCount","renderNavButton","children","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;8BAhB2B;gCACkC;iEACnD;iCAE2C;AAY3D,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;QACjDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;QAEqDR;IAArD,MAAM,CAACS,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACZ,CAAAA,qBAAAA,MAAMS,WAAW,AAAXA,MAAW,QAAjBT,uBAAAA,KAAAA,IAAAA,qBAAqB;IAC1E,MAAMa,qBAAqBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,kBAAkB;IAE3EG,IAAAA,yCAAAA,EAA0B;QACxB,OAAOH,mBAAmBI,CAAAA;YACxBP,eAAeO,KAAKC,aAAa;QACnC;IACF,GAAG;QAACL;KAAmB;IAEvB,OAAO;QACLJ;QACAP;QACAiB,iBAAiBnB,MAAMoB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BxB;YACAyB,MAAM;YACN,GAAG1B,KAAK;YACR,GAAGG,kBAAkB;YACrBiB,UAAU;QACZ,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}

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

@@ -0,0 +1,106 @@
+"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, {
+    carouselNavClassNames: function() {
+        return carouselNavClassNames;
+    },
+    useCarouselNavStyles_unstable: function() {
+        return useCarouselNavStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const carouselNavClassNames = {
+    root: 'fui-CarouselNav'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1063pyq",
+        Bt984gj: "f122n59",
+        Brf1p80: "f4d9j23",
+        Bkecrkj: "fc5wo7j",
+        Bfpq7zp: 0,
+        g9k6zt: 0,
+        Bn4voq9: 0,
+        giviqs: "f89hs3r",
+        Bw81rd7: 0,
+        kdpuga: 0,
+        dm238s: 0,
+        B6xbmo0: 0,
+        B3whbx2: "f2krc9w",
+        B8q5s1w: "f8hki3x",
+        Bci5o5g: [
+            "f1d2448m",
+            "ffh67wi"
+        ],
+        n8qw10: "f1bjia2o",
+        Bdrgwmp: [
+            "ffh67wi",
+            "f1d2448m"
+        ],
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1kijzfu",
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: "fkb7v5e",
+        De3pzq: "fkfdr9r"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1063pyq{flex-direction:row;}",
+        ".f122n59{align-items:center;}",
+        ".f4d9j23{justify-content:center;}",
+        ".fc5wo7j{pointer-events:all;}",
+        [
+            ".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
+        ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
+        ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
+        ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
+        [
+            ".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fkb7v5e{margin:auto var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}"
+    ]
+});
+const useCarouselNavStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(carouselNavClassNames.root, styles.root, state.root.className);
+    return state;
+}; //# sourceMappingURL=useCarouselNavStyles.styles.js.map

package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n    root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pointerEvents: 'all',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        }),\n        borderRadius: tokens.borderRadiusXLarge,\n        margin: `auto ${tokens.spacingHorizontalS}`,\n        backgroundColor: tokens.colorNeutralBackgroundAlpha\n    }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["carouselNavClassNames","useCarouselNavStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAwBIC,6BAA6B;eAA7BA;;;uBA3BoC;AAG9C,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA;AAmBX,MAAMlC,gCAAiCmC,CAAAA;IAC9C;IACA,MAAMC,SAASlC;IACfiC,MAAMlC,IAAI,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAACvC,sBAAsBE,IAAI,EAAEmC,OAAOnC,IAAI,EAAEkC,MAAMlC,IAAI,CAACoC,SAAS;IACjG,OAAOF;AACX"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselNavButton", {
+    enumerable: true,
+    get: function() {
+        return CarouselNavButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCarouselNavButton = require("./useCarouselNavButton");
+const _renderCarouselNavButton = require("./renderCarouselNavButton");
+const _useCarouselNavButtonStylesstyles = require("./useCarouselNavButtonStyles.styles");
+const CarouselNavButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCarouselNavButton.useCarouselNavButton_unstable)(props, ref);
+    (0, _useCarouselNavButtonStylesstyles.useCarouselNavButtonStyles_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('useCarouselNavButtonStyles_unstable')(state);
+    return (0, _renderCarouselNavButton.renderCarouselNavButton_unstable)(state);
+});
+CarouselNavButton.displayName = 'CarouselNavButton';

package/lib-commonjs/components/CarouselNavButton/CarouselNavButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavButton_unstable } from './useCarouselNavButton';\nimport { renderCarouselNavButton_unstable } from './renderCarouselNavButton';\nimport { useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';\nimport type { CarouselNavButtonProps } from './CarouselNavButton.types';\n\n/**\n * The child element of CarouselNav, a singular button that will set the carousels active value on click.\n */\nexport const CarouselNavButton: ForwardRefComponent<CarouselNavButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNavButton_unstable(props, ref);\n\n  useCarouselNavButtonStyles_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('useCarouselNavButtonStyles_unstable')(state);\n  return renderCarouselNavButton_unstable(state);\n});\n\nCarouselNavButton.displayName = 'CarouselNavButton';\n"],"names":["CarouselNavButton","React","forwardRef","props","ref","state","useCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","renderCarouselNavButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;sCAEuB;yCACG;kDACG;AAM7C,MAAMA,oBAAAA,WAAAA,GAAiEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQC,IAAAA,mDAAAA,EAA8BH,OAAOC;IAEnDG,IAAAA,qEAAAA,EAAoCF;IACpC,8HAA8H;IAC9H,wGAAwG;IACxG,6EAA6E;IAC7E,OAAOG,IAAAA,yDAAAA,EAAiCH;AAC1C;AAEAL,kBAAkBS,WAAW,GAAG"}

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

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

package/lib-commonjs/components/CarouselNavButton/CarouselNavButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselNavButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselNavState } from '../CarouselNav/CarouselNav.types';\n\nexport type CarouselNavButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselNavButton Props\n */\nexport type CarouselNavButtonProps = ComponentProps<CarouselNavButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavButton\n */\nexport type CarouselNavButtonState = ComponentState<CarouselNavButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  selected?: boolean;\n} & Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC"}

package/lib-commonjs/components/CarouselNavButton/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("./CarouselNavButton"), exports);
+_export_star._(require("./CarouselNavButton.types"), exports);
+_export_star._(require("./renderCarouselNavButton"), exports);
+_export_star._(require("./useCarouselNavButton"), exports);
+_export_star._(require("./useCarouselNavButtonStyles.styles"), exports);

package/lib-commonjs/components/CarouselNavButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselNavButton';\nexport * from './CarouselNavButton.types';\nexport * from './renderCarouselNavButton';\nexport * from './useCarouselNavButton';\nexport * from './useCarouselNavButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselNavButton/renderCarouselNavButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderCarouselNavButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderCarouselNavButton_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderCarouselNavButton_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    // TODO Add additional slots in the appropriate place
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+};

package/lib-commonjs/components/CarouselNavButton/renderCarouselNavButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderCarouselNavButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonState, CarouselNavButtonSlots } from './CarouselNavButton.types';\n\n/**\n * Render the final JSX of CarouselNavButton\n */\nexport const renderCarouselNavButton_unstable = (state: CarouselNavButtonState) => {\n  assertSlots<CarouselNavButtonSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["renderCarouselNavButton_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,mCAAmC,CAACC;IAC/CC,IAAAA,2BAAAA,EAAoCD;IAEpC,qDAAqD;IACrD,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}

package/lib-commonjs/components/CarouselNavButton/useCarouselNavButton.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCarouselNavButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCarouselNavButton_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactaria = require("@fluentui/react-aria");
+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 _CarouselNavContext = require("../CarouselNav/CarouselNavContext");
+const _CarouselNavIndexContext = require("../CarouselNav/CarouselNavIndexContext");
+const useCarouselNavButton_unstable = (props, ref)=>{
+    const { onClick, as = 'button' } = props;
+    const { appearance } = (0, _CarouselNavContext.useCarouselNavContext)();
+    const index = (0, _CarouselNavIndexContext.useCarouselNavIndexContext)();
+    const selectPageByIndex = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByIndex);
+    const selected = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.activeIndex === index);
+    const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
+    const resetAutoplay = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.resetAutoplay);
+    const handleClick = (0, _reactutilities.useEventCallback)((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && (0, _reactutilities.isHTMLElement)(event.target)) {
+            selectPageByIndex(event, index);
+        }
+        // Ensure any autoplay timers are extended/reset
+        resetAutoplay();
+    });
+    const defaultTabProps = (0, _reacttabster.useTabsterAttributes)({
+        focusable: {
+            isDefault: selected
+        }
+    });
+    const buttonRef = _react.useRef();
+    const _carouselButton = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(props.as, props)), {
+        elementType: 'button',
+        defaultProps: {
+            ref: (0, _reactutilities.useMergedRefs)(ref, buttonRef),
+            role: 'tab',
+            type: 'button',
+            'aria-selected': selected,
+            ...defaultTabProps
+        }
+    });
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        return subscribeForValues((data)=>{
+            const controlList = data.groupIndexList[index];
+            const _controlledSlideIds = controlList.map((slideIndex)=>{
+                return data.slideNodes[slideIndex].id;
+            }).join(' ');
+            if (buttonRef.current) {
+                buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);
+            }
+        });
+    }, [
+        index,
+        subscribeForValues
+    ]);
+    // Override onClick
+    _carouselButton.onClick = handleClick;
+    const state = {
+        selected,
+        appearance,
+        components: {
+            root: 'button'
+        },
+        root: _carouselButton
+    };
+    return state;
+};

package/lib-commonjs/components/CarouselNavButton/useCarouselNavButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCarouselNavButton.ts"],"sourcesContent":["import { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport { useCarouselNavContext } from '../CarouselNav/CarouselNavContext';\nimport { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';\nimport type { CarouselNavButtonProps, CarouselNavButtonState } from './CarouselNavButton.types';\n\n/**\n * Create the state required to render CarouselNavButton.\n *\n * The returned state can be modified with hooks such as useCarouselNavButtonStyles_unstable,\n * before being passed to renderCarouselNavButton_unstable.\n *\n * @param props - props from this instance of CarouselNavButton\n * @param ref - reference to root HTMLDivElement of CarouselNavButton\n */\nexport const useCarouselNavButton_unstable = (\n  props: CarouselNavButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselNavButtonState => {\n  const { onClick, as = 'button' } = props;\n\n  const { appearance } = useCarouselNavContext();\n  const index = useCarouselNavIndexContext();\n\n  const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);\n  const selected = useCarouselContext(ctx => ctx.activeIndex === index);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n  const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n  const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByIndex(event, index);\n    }\n\n    // Ensure any autoplay timers are extended/reset\n    resetAutoplay();\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  const buttonRef = React.useRef<HTMLElement>();\n  const _carouselButton = slot.always<ARIAButtonSlotProps>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: useMergedRefs(ref, buttonRef),\n        role: 'tab',\n        type: 'button',\n        'aria-selected': selected,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      const controlList = data.groupIndexList[index];\n      const _controlledSlideIds = controlList\n        .map((slideIndex: number) => {\n          return data.slideNodes[slideIndex].id;\n        })\n        .join(' ');\n      if (buttonRef.current) {\n        buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);\n      }\n    });\n  }, [index, subscribeForValues]);\n\n  // Override onClick\n  _carouselButton.onClick = handleClick;\n\n  const state: CarouselNavButtonState = {\n    selected,\n    appearance,\n    components: {\n      root: 'button',\n    },\n    root: _carouselButton,\n  };\n\n  return state;\n};\n"],"names":["useCarouselNavButton_unstable","props","ref","onClick","as","appearance","useCarouselNavContext","index","useCarouselNavIndexContext","selectPageByIndex","useCarouselContext","ctx","selected","activeIndex","subscribeForValues","resetAutoplay","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","buttonRef","React","useRef","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","useMergedRefs","role","type","useIsomorphicLayoutEffect","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","state","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BaA;;;eAAAA;;;;2BA1BwE;8BAChD;gCAQ9B;iEACgB;iCAE2C;oCAC5B;yCACK;AAYpC,MAAMA,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAM,EAAEI,UAAU,EAAE,GAAGC,IAAAA,yCAAAA;IACvB,MAAMC,QAAQC,IAAAA,mDAAAA;IAEd,MAAMC,oBAAoBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,iBAAiB;IACzE,MAAMG,WAAWF,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIE,WAAW,KAAKN;IAC/D,MAAMO,qBAAqBJ,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIG,kBAAkB;IAC3E,MAAMC,gBAAgBL,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAII,aAAa;IAEjE,MAAMC,cAA8CC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACnEf,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1DZ,kBAAkBS,OAAOX;QAC3B;QAEA,gDAAgD;QAChDQ;IACF;IAEA,MAAMO,kBAAkBC,IAAAA,kCAAAA,EAAqB;QAC3CC,WAAW;YAAEC,WAAWb;QAAS;IACnC;IAEA,MAAMc,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,kBAAkBC,oBAAAA,CAAKC,MAAM,CACjCC,IAAAA,wCAAAA,EAAyB5B,IAAI6B,IAAAA,6BAAAA,EAAmBhC,MAAMG,EAAE,EAAEH,SAC1D;QACEiC,aAAa;QACbC,cAAc;YACZjC,KAAKkC,IAAAA,6BAAAA,EAAclC,KAAKwB;YACxBW,MAAM;YACNC,MAAM;YACN,iBAAiB1B;YACjB,GAAGU,eAAe;QACpB;IACF;IAGFiB,IAAAA,yCAAAA,EAA0B;QACxB,OAAOzB,mBAAmB0B,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAACnC,MAAM;YAC9C,MAAMoC,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAItB,UAAUuB,OAAO,EAAE;gBACrBvB,UAAUuB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACpC;QAAOO;KAAmB;IAE9B,mBAAmB;IACnBe,gBAAgB1B,OAAO,GAAGa;IAE1B,MAAMmC,QAAgC;QACpCvC;QACAP;QACA+C,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxB;IACR;IAEA,OAAOsB;AACT"}