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

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

@@ -0,0 +1,63 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavClassNames = {
+  root: 'fui-CarouselNav'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__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);}"]
+});
+/**
+ * Apply styling to the CarouselNav slots based on the state
+ */
+export const useCarouselNavStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useCarouselNavStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","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","useCarouselNavStyles_unstable","state","styles","className"],"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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,GAAGzC,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselNavButton/CarouselNavButton.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useCarouselNavButton_unstable } from './useCarouselNavButton';
+import { renderCarouselNavButton_unstable } from './renderCarouselNavButton';
+import { useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';
+/**
+ * The child element of CarouselNav, a singular button that will set the carousels active value on click.
+ */ export const CarouselNavButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselNavButton_unstable(props, ref);
+    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 renderCarouselNavButton_unstable(state);
+});
+CarouselNavButton.displayName = 'CarouselNavButton';

package/lib/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":["React","useCarouselNavButton_unstable","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","CarouselNavButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F;;CAEC,GACD,OAAO,MAAMC,kCAAiEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQP,8BAA8BK,OAAOC;IAEnDJ,oCAAoCK;IACpC,8HAA8H;IAC9H,wGAAwG;IACxG,6EAA6E;IAC7E,OAAON,iCAAiCM;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

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

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

package/lib/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,GACD,WAKyC"}

package/lib/components/CarouselNavButton/index.js

@@ -0,0 +1,5 @@
+export * from './CarouselNavButton';
+export * from './CarouselNavButton.types';
+export * from './renderCarouselNavButton';
+export * from './useCarouselNavButton';
+export * from './useCarouselNavButtonStyles.styles';

package/lib/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":"AAAA,cAAc,sBAAsB;AACpC,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,yBAAyB;AACvC,cAAc,sCAAsC"}

package/lib/components/CarouselNavButton/renderCarouselNavButton.js

@@ -0,0 +1,9 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CarouselNavButton
+ */ export const renderCarouselNavButton_unstable = (state)=>{
+    assertSlots(state);
+    // TODO Add additional slots in the appropriate place
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/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":["assertSlots","renderCarouselNavButton_unstable","state","root"],"rangeMappings":";;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qDAAqD;IACrD,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/CarouselNavButton/useCarouselNavButton.js

@@ -0,0 +1,73 @@
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { useTabsterAttributes } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { useCarouselNavContext } from '../CarouselNav/CarouselNavContext';
+import { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';
+/**
+ * Create the state required to render CarouselNavButton.
+ *
+ * The returned state can be modified with hooks such as useCarouselNavButtonStyles_unstable,
+ * before being passed to renderCarouselNavButton_unstable.
+ *
+ * @param props - props from this instance of CarouselNavButton
+ * @param ref - reference to root HTMLDivElement of CarouselNavButton
+ */ export const useCarouselNavButton_unstable = (props, ref)=>{
+    const { onClick, as = 'button' } = props;
+    const { appearance } = useCarouselNavContext();
+    const index = useCarouselNavIndexContext();
+    const selectPageByIndex = useCarouselContext((ctx)=>ctx.selectPageByIndex);
+    const selected = useCarouselContext((ctx)=>ctx.activeIndex === index);
+    const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
+    const resetAutoplay = useCarouselContext((ctx)=>ctx.resetAutoplay);
+    const handleClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && isHTMLElement(event.target)) {
+            selectPageByIndex(event, index);
+        }
+        // Ensure any autoplay timers are extended/reset
+        resetAutoplay();
+    });
+    const defaultTabProps = useTabsterAttributes({
+        focusable: {
+            isDefault: selected
+        }
+    });
+    const buttonRef = React.useRef();
+    const _carouselButton = slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
+        elementType: 'button',
+        defaultProps: {
+            ref: useMergedRefs(ref, buttonRef),
+            role: 'tab',
+            type: 'button',
+            'aria-selected': selected,
+            ...defaultTabProps
+        }
+    });
+    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/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":["useARIAButtonProps","useTabsterAttributes","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","useCarouselNavContext","useCarouselNavIndexContext","useCarouselNavButton_unstable","props","ref","onClick","as","appearance","index","selectPageByIndex","ctx","selected","activeIndex","subscribeForValues","resetAutoplay","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","buttonRef","useRef","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","state","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAA2DA,kBAAkB,QAAQ,uBAAuB;AAC5G,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SACEC,wBAAwB,EACxBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AACvF,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,0BAA0B,QAAQ,yCAAyC;AAGpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAM,EAAEI,UAAU,EAAE,GAAGP;IACvB,MAAMQ,QAAQP;IAEd,MAAMQ,oBAAoBV,mBAAmBW,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,WAAWZ,mBAAmBW,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,qBAAqBd,mBAAmBW,CAAAA,MAAOA,IAAIG,kBAAkB;IAC3E,MAAMC,gBAAgBf,mBAAmBW,CAAAA,MAAOA,IAAII,aAAa;IAEjE,MAAMC,cAA8CrB,iBAAiBsB,CAAAA;QACnEX,oBAAAA,8BAAAA,QAAUW;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIzB,cAAcwB,MAAME,MAAM,GAAG;YAC1DT,kBAAkBO,OAAOR;QAC3B;QAEA,gDAAgD;QAChDM;IACF;IAEA,MAAMK,kBAAkB7B,qBAAqB;QAC3C8B,WAAW;YAAEC,WAAWV;QAAS;IACnC;IAEA,MAAMW,YAAYzB,MAAM0B,MAAM;IAC9B,MAAMC,kBAAkB/B,KAAKgC,MAAM,CACjClC,yBAAyBe,IAAIjB,mBAAmBc,MAAMG,EAAE,EAAEH,SAC1D;QACEuB,aAAa;QACbC,cAAc;YACZvB,KAAKR,cAAcQ,KAAKkB;YACxBM,MAAM;YACNC,MAAM;YACN,iBAAiBlB;YACjB,GAAGQ,eAAe;QACpB;IACF;IAGFxB,0BAA0B;QACxB,OAAOkB,mBAAmBiB,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAACxB,MAAM;YAC9C,MAAMyB,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIhB,UAAUiB,OAAO,EAAE;gBACrBjB,UAAUiB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACzB;QAAOK;KAAmB;IAE9B,mBAAmB;IACnBW,gBAAgBnB,OAAO,GAAGU;IAE1B,MAAM0B,QAAgC;QACpC9B;QACAJ;QACAmC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnB;IACR;IAEA,OAAOiB;AACT,EAAE"}

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js

@@ -0,0 +1,196 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavButtonClassNames = {
+  root: 'fui-CarouselNavButton'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bceei9c: "f1k6fduh",
+    Bkecrkj: "fc5wo7j",
+    a9b677: "f1van5z7",
+    Bqenvij: "f1fkmctz",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1f5q0n8",
+    B7ck84d: "f1e4lqlz",
+    De3pzq: "f1c21dwh",
+    B4j52fo: "fre7gi1",
+    Bekrc4i: ["f1358rze", "f1rvrf73"],
+    Bn0qgzm: "fqdk4by",
+    ibv6hh: ["f1rvrf73", "f1358rze"],
+    Bsft5z2: "f13zj6fq",
+    ap17g6: "f2gz7yw",
+    li1rpt: "f1gw3sf2",
+    d9w3h3: 0,
+    B3778ie: 0,
+    B4j8arr: 0,
+    Bl18szs: 0,
+    Blrzh8d: "f1x820d0",
+    Bjuhk93: 0,
+    B1q35kw: 0,
+    Bw17bha: 0,
+    Bcgy8vk: 0,
+    Du69r6: 0,
+    Gp14am: 0,
+    vfts7: 0,
+    Bhxzhr1: 0,
+    G63luc: 0,
+    s924m2: 0,
+    Barhvk9: 0,
+    Ihftqj: 0,
+    wywymt: 0,
+    B0n5ga8: 0,
+    Bm2nyyq: 0,
+    xrcqlc: 0,
+    e1d83w: "fnwf5yv",
+    Dlnsje: "foue38v",
+    a2br6o: "fi4ui2s",
+    Bjyk6c5: "f1w4p7kh",
+    go7t6h: "fo5b2b9"
+  },
+  rootUnselected: {
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f71xx7",
+    Byu6kyc: 0,
+    n8qw10: 0,
+    Bbjhlyh: 0,
+    i2cumq: 0,
+    Bunx835: 0,
+    Bdrgwmp: 0,
+    mqozju: 0,
+    lbo84a: 0,
+    Bksnhdo: 0,
+    Bci5o5g: 0,
+    u5e7qz: 0,
+    Bn40d3w: 0,
+    B7b6zxw: 0,
+    B8q5s1w: 0,
+    B5gfjzb: 0,
+    Bbcte9g: 0,
+    Bqz3imu: "f1j9b7x8",
+    Bj9ihqo: 0,
+    Bl51kww: 0,
+    B3bvztg: 0,
+    Btyt4dx: 0,
+    Brhw1f9: "f1tdm9ui",
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f2krc9w",
+    Bp15pi3: "f4qmjcr",
+    Bay5ve9: "f1ry2q4s",
+    Bni0232: "f1e9f9ku"
+  },
+  rootSelected: {
+    a9b677: "f1eh74fx",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fwku66v",
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f71xx7",
+    Byu6kyc: 0,
+    n8qw10: 0,
+    Bbjhlyh: 0,
+    i2cumq: 0,
+    Bunx835: 0,
+    Bdrgwmp: 0,
+    mqozju: 0,
+    lbo84a: 0,
+    Bksnhdo: 0,
+    Bci5o5g: 0,
+    u5e7qz: 0,
+    Bn40d3w: 0,
+    B7b6zxw: 0,
+    B8q5s1w: 0,
+    B5gfjzb: 0,
+    Bbcte9g: 0,
+    Bqz3imu: "f1j9b7x8",
+    Bj9ihqo: 0,
+    Bl51kww: 0,
+    B3bvztg: 0,
+    Btyt4dx: 0,
+    Brhw1f9: "f1tdm9ui",
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f2krc9w",
+    a2br6o: "f1v6lwa2",
+    d9w3h3: 0,
+    B3778ie: 0,
+    B4j8arr: 0,
+    Bl18szs: 0,
+    Blrzh8d: "fgm6wgx",
+    Bay5ve9: "f1ry2q4s",
+    Bni0232: "f1gxfet"
+  },
+  brand: {
+    Bjyk6c5: "fwgxjcu",
+    Bp15pi3: "fjsqi2x",
+    Glksuk: "f1dsn91x",
+    Bay5ve9: "f9atwx8",
+    Blzl0y7: "fduhhxw",
+    Bni0232: "f1e9f9ku"
+  },
+  unselectedBrand: {
+    Bp15pi3: "f7x02et"
+  }
+}, {
+  d: [".f1k6fduh{cursor:pointer;}", ".fc5wo7j{pointer-events:all;}", ".f1van5z7{width:var(--spacingHorizontalS);}", ".f1fkmctz{height:var(--spacingVerticalS);}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1e4lqlz{box-sizing:content-box;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f13zj6fq::after{content:\"\";}", ".f2gz7yw::after{display:block;}", ".f1gw3sf2::after{box-sizing:border-box;}", [".f1x820d0::after{border-radius:50%;}", {
+    p: -1
+  }], [".fnwf5yv::after{border:none;}", {
+    p: -2
+  }], ".foue38v::after{height:var(--spacingVerticalS);}", ".fi4ui2s::after{width:var(--spacingHorizontalS);}", ".f1w4p7kh::after{background-color:var(--colorNeutralForeground1);}", ".fo5b2b9::after{color:var(--colorNeutralForeground1);}", [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
+    p: -1
+  }], [".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".f1tdm9ui[data-fui-focus-visible]{margin:calc(-1 * var(--strokeWidthThick));}", {
+    p: -1
+  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f4qmjcr::after{opacity:0.65;}", ".f1eh74fx{width:var(--spacingHorizontalL);}", [".fwku66v{padding:var(--spacingVerticalS) var(--spacingHorizontalXS);}", {
+    p: -1
+  }], [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
+    p: -1
+  }], [".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".f1tdm9ui[data-fui-focus-visible]{margin:calc(-1 * var(--strokeWidthThick));}", {
+    p: -1
+  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f1v6lwa2::after{width:var(--spacingHorizontalL);}", [".fgm6wgx::after{border-radius:4px;}", {
+    p: -1
+  }], ".fwgxjcu::after{background-color:var(--colorBrandBackground);}", ".fjsqi2x::after{opacity:1;}", ".f7x02et::after{opacity:0.6;}"],
+  h: [".f1ry2q4s:hover::after{opacity:0.75;}", ".f1dsn91x:hover::after{background-color:var(--colorBrandBackgroundHover);}", ".f9atwx8:hover::after{opacity:1;}"],
+  a: [".f1e9f9ku:active::after{opacity:1;}", ".f1gxfet:active::after{opacity:0.65;}", ".fduhhxw:active::after{background-color:var(--colorBrandBackgroundPressed);}"]
+});
+/**
+ * Apply styling to the CarouselNavButton slots based on the state
+ */
+export const useCarouselNavButtonStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    selected,
+    appearance
+  } = state;
+  state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useCarouselNavButtonStyles.styles.js.map

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n    root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        cursor: 'pointer',\n        pointerEvents: 'all',\n        width: tokens.spacingHorizontalS,\n        height: tokens.spacingVerticalS,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n        boxSizing: 'content-box',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderWidth(0),\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            boxSizing: 'border-box',\n            borderRadius: '50%',\n            border: 'none',\n            height: tokens.spacingVerticalS,\n            width: tokens.spacingHorizontalS,\n            backgroundColor: tokens.colorNeutralForeground1,\n            color: tokens.colorNeutralForeground1\n        }\n    },\n    rootUnselected: {\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        ...createCustomFocusIndicatorStyle({\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n            borderRadius: tokens.borderRadiusMedium\n        }),\n        '::after': {\n            opacity: 0.65\n        },\n        ':hover': {\n            '::after': {\n                opacity: 0.75\n            }\n        },\n        ':active': {\n            '::after': {\n                opacity: 1\n            }\n        }\n    },\n    rootSelected: {\n        width: tokens.spacingHorizontalL,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        ...createCustomFocusIndicatorStyle({\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n            borderRadius: tokens.borderRadiusMedium\n        }),\n        '::after': {\n            width: tokens.spacingHorizontalL,\n            borderRadius: '4px'\n        },\n        ':hover': {\n            '::after': {\n                opacity: 0.75\n            }\n        },\n        ':active': {\n            '::after': {\n                opacity: 0.65\n            }\n        }\n    },\n    brand: {\n        '::after': {\n            backgroundColor: tokens.colorBrandBackground,\n            opacity: 1\n        },\n        ':hover': {\n            '::after': {\n                backgroundColor: tokens.colorBrandBackgroundHover,\n                opacity: 1\n            }\n        },\n        ':active': {\n            '::after': {\n                backgroundColor: tokens.colorBrandBackgroundPressed,\n                opacity: 1\n            }\n        }\n    },\n    unselectedBrand: {\n        '::after': {\n            opacity: 0.6\n        }\n    }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { selected, appearance } = state;\n    state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CarouselNavContainer/CarouselNavContainer.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useCarouselNavContainer_unstable } from './useCarouselNavContainer';
+import { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';
+import { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';
+/**
+ * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls
+ */ export const CarouselNavContainer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselNavContainer_unstable(props, ref);
+    useCarouselNavContainerStyles_unstable(state);
+    /**
+   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
+   *
+   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
+   *      - uncomment this line
+   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
+   *      - verify that custom global style override works for your component
+   */ // useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);
+    return renderCarouselNavContainer_unstable(state);
+});
+CarouselNavContainer.displayName = 'CarouselNavContainer';

package/lib/components/CarouselNavContainer/CarouselNavContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselNavContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nimport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nimport { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';\nimport type { CarouselNavContainerProps } from './CarouselNavContainer.types';\n\n/**\n * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls\n */\nexport const CarouselNavContainer: ForwardRefComponent<CarouselNavContainerProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNavContainer_unstable(props, ref);\n\n  useCarouselNavContainerStyles_unstable(state);\n\n  /**\n   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md\n   *\n   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),\n   *      - uncomment this line\n   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}\n   *      - verify that custom global style override works for your component\n   */\n  // useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);\n\n  return renderCarouselNavContainer_unstable(state);\n});\n\nCarouselNavContainer.displayName = 'CarouselNavContainer';\n"],"names":["React","useCarouselNavContainer_unstable","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","CarouselNavContainer","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,yCAAyC;AAGhG;;CAEC,GACD,OAAO,MAAMC,qCAAuEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQP,iCAAiCK,OAAOC;IAEtDJ,uCAAuCK;IAEvC;;;;;;;GAOC,GACD,gFAAgF;IAEhF,OAAON,oCAAoCM;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}

package/lib/components/CarouselNavContainer/CarouselNavContainer.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  prev?: Slot<CarouselButtonProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n  /**\n   * Default: 'inline'\n   * Defines the nav container layout:\n   *\n   * 'inline' - Default controls inline with carousel view\n   *\n   *  inline-wide - Similar to inline but places nav buttons on far left/right\n   *\n   * 'overlay' - Controls overlaid on bottom of carousel viewport,\n   *\n   * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n   *\n   * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n   */\n  layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n  Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgCA;;CAEC,GACD,WAC4C"}

package/lib/components/CarouselNavContainer/index.js

@@ -0,0 +1,5 @@
+export * from './CarouselNavContainer';
+export * from './CarouselNavContainer.types';
+export * from './renderCarouselNavContainer';
+export * from './useCarouselNavContainer';
+export * from './useCarouselNavContainerStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselNavContainer';\nexport * from './CarouselNavContainer.types';\nexport * from './renderCarouselNavContainer';\nexport * from './useCarouselNavContainer';\nexport * from './useCarouselNavContainerStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,+BAA+B;AAC7C,cAAc,+BAA+B;AAC7C,cAAc,4BAA4B;AAC1C,cAAc,yCAAyC"}

package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js

@@ -0,0 +1,15 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CarouselNavContainer
+ */ export const renderCarouselNavContainer_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.autoplay && /*#__PURE__*/ _jsx(state.autoplay, {}),
+            state.prev && /*#__PURE__*/ _jsx(state.prev, {}),
+            state.root.children,
+            state.next && /*#__PURE__*/ _jsx(state.next, {})
+        ]
+    });
+};

package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n  assertSlots<CarouselNavContainerSlots>(state);\n\n  return (\n    <state.root>\n      {state.autoplay && <state.autoplay />}\n      {state.prev && <state.prev />}\n      {state.root.children}\n      {state.next && <state.next />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCarouselNavContainer_unstable","state","root","autoplay","prev","children","next"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClDF,YAAuCE;IAEvC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;;;AAGhC,EAAE"}

package/lib/components/CarouselNavContainer/useCarouselNavContainer.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
+import { CarouselButton } from '../CarouselButton/CarouselButton';
+/**
+ * Create the state required to render CarouselNavContainer.
+ *
+ * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,
+ * before being passed to renderCarouselNavContainer_unstable.
+ *
+ * @param props - props from this instance of CarouselNavContainer
+ * @param ref - reference to root HTMLDivElement of CarouselNavContainer
+ */ export const useCarouselNavContainer_unstable = (props, ref)=>{
+    const { layout } = props;
+    const next = slot.optional(props.next, {
+        defaultProps: {
+            navType: 'next'
+        },
+        elementType: CarouselButton,
+        renderByDefault: true
+    });
+    const prev = slot.optional(props.prev, {
+        defaultProps: {
+            navType: 'prev'
+        },
+        elementType: CarouselButton,
+        renderByDefault: true
+    });
+    const autoplay = slot.optional(props.autoplay, {
+        renderByDefault: false,
+        elementType: CarouselAutoplayButton
+    });
+    return {
+        layout,
+        components: {
+            root: 'div',
+            next: CarouselButton,
+            prev: CarouselButton,
+            autoplay: CarouselAutoplayButton
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        next,
+        prev,
+        autoplay
+    };
+};

package/lib/components/CarouselNavContainer/useCarouselNavContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n  props: CarouselNavContainerProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n  const { layout } = props;\n  const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n    defaultProps: {\n      navType: 'next',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n    defaultProps: {\n      navType: 'prev',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n    renderByDefault: false,\n    elementType: CarouselAutoplayButton,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: CarouselButton,\n      prev: CarouselButton,\n      autoplay: CarouselAutoplayButton,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    next,\n    prev,\n    autoplay,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","components","root","always"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,sBAAsB,QAAQ,mDAAmD;AAC1F,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CP,KAAKQ,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cb,KAAKQ,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAME,WAAkDd,KAAKQ,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFF,iBAAiB;QACjBD,aAAaV;IACf;IAEA,OAAO;QACLK;QACAS,YAAY;YACVC,MAAM;YACNT,MAAML;YACNW,MAAMX;YACNY,UAAUb;QACZ;QACAe,MAAMhB,KAAKiB,MAAM,CACflB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;IACF;AACF,EAAE"}