@fluentui/react-carousel 9.1.0 → 9.3.0

package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarouselStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselClassNames = {\n    root: 'fui-Carousel'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        paddingTop: tokens.strokeWidthThick,\n        overflow: 'hidden',\n        overflowAnchor: 'none',\n        position: 'relative'\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["carouselClassNames","useCarouselStyles_unstable","root","useStyles","__styles","z8tnut","B68tc82","Bmxbyg5","Bpg54ce","Eiaeu8","qhf8xq","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,kBAAkB;eAAlBA;;IAeIC,0BAA0B;eAA1BA;;;uBAjBwB;AAElC,MAAMD,qBAAqB;IAC9BE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA;AAUX,MAAMX,6BAA8BY,CAAAA;IAC3C;IACA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,mBAAmBE,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAC9F,OAAOF;AACX"}
+{"version":3,"sources":["useCarouselStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselClassNames = {\n    root: 'fui-Carousel'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n        overflowX: 'hidden',\n        overflowAnchor: 'none',\n        position: 'relative'\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["carouselClassNames","useCarouselStyles_unstable","root","useStyles","__styles","B68tc82","Eiaeu8","qhf8xq","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,kBAAkB;eAAlBA;;IAeIC,0BAA0B;eAA1BA;;;uBAhBwB;AAClC,MAAMD,qBAAqB;IAC9BE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAUX,MAAMP,6BAA8BQ,CAAAA;IAC3C;IACA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACZ,mBAAmBE,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAC9F,OAAOF;AACX"}

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

@@ -13,12 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselAutoplayButton = require("./useCarouselAutoplayButton");
 const _renderCarouselAutoplayButton = require("./renderCarouselAutoplayButton");
 const _useCarouselAutoplayButtonStylesstyles = require("./useCarouselAutoplayButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const CarouselAutoplayButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarouselAutoplayButton.useCarouselAutoplayButton_unstable)(props, ref);
     (0, _useCarouselAutoplayButtonStylesstyles.useCarouselAutoplayButtonStyles_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('useCarouselAutoplayButtonStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselAutoplayButtonStyles_unstable')(state);
     return (0, _renderCarouselAutoplayButton.renderCarouselAutoplayButton_unstable)(state);
 });
 CarouselAutoplayButton.displayName = 'CarouselAutoplayButton';

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselAutoplayButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nimport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nimport { useCarouselAutoplayButtonStyles_unstable } from './useCarouselAutoplayButtonStyles.styles';\nimport type { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';\n\n/**\n * If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the\n * CarouselAutoplayButton which must be present for auto-play to be enabled.\n *\n * If CarouselAutoplayButton is present, auto-play will default to true on mount.\n */\nexport const CarouselAutoplayButton: ForwardRefComponent<CarouselAutoplayButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useCarouselAutoplayButton_unstable(props, ref);\n\n    useCarouselAutoplayButtonStyles_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('useCarouselAutoplayButtonStyles_unstable')(state);\n    return renderCarouselAutoplayButton_unstable(state);\n  },\n);\n\nCarouselAutoplayButton.displayName = 'CarouselAutoplayButton';\n"],"names":["CarouselAutoplayButton","React","forwardRef","props","ref","state","useCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","renderCarouselAutoplayButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;2CAE4B;8CACG;uDACG;AASlD,MAAMA,yBAAAA,WAAAA,GAA2EC,OAAMC,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,6DAAAA,EAAmCH,OAAOC;IAExDG,IAAAA,+EAAAA,EAAyCF;IACzC,8HAA8H;IAC9H,wGAAwG;IACxG,kFAAkF;IAClF,OAAOG,IAAAA,mEAAAA,EAAsCH;AAC/C;AAGFL,uBAAuBS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nimport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nimport { useCarouselAutoplayButtonStyles_unstable } from './useCarouselAutoplayButtonStyles.styles';\nimport type { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the\n * CarouselAutoplayButton which must be present for auto-play to be enabled.\n *\n * If CarouselAutoplayButton is present, auto-play will default to true on mount.\n */\nexport const CarouselAutoplayButton: ForwardRefComponent<CarouselAutoplayButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useCarouselAutoplayButton_unstable(props, ref);\n\n    useCarouselAutoplayButtonStyles_unstable(state);\n    useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')(state);\n\n    return renderCarouselAutoplayButton_unstable(state);\n  },\n);\n\nCarouselAutoplayButton.displayName = 'CarouselAutoplayButton';\n"],"names":["CarouselAutoplayButton","React","forwardRef","props","ref","state","useCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCustomStyleHook_unstable","renderCarouselAutoplayButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;2CAE4B;8CACG;uDACG;qCAEb;AAQrC,MAAMA,yBAAAA,WAAAA,GAA2EC,OAAMC,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,6DAAAA,EAAmCH,OAAOC;IAExDG,IAAAA,+EAAAA,EAAyCF;IACzCG,IAAAA,gDAAAA,EAA4B,4CAA4CH;IAExE,OAAOI,IAAAA,mEAAAA,EAAsCJ;AAC/C;AAGFL,uBAAuBU,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselAutoplayButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselAutoplayButtonSlots = ButtonSlots & {\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\nexport type CarouselAutoplayChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The updated autoplay value.\n   */\n  checked: boolean;\n};\n\nexport type CarouselAutoplayAriaLabelFunction = (autoplay: boolean) => string;\n\n/**\n * CarouselAutoplayButton Props\n */\nexport type CarouselAutoplayButtonProps = ToggleButtonProps &\n  ComponentProps<CarouselAutoplayButtonSlots> & {\n    /**\n     * Callback that informs the user when internal autoplay value has changed\n     */\n    onCheckedChange?: EventHandler<CarouselAutoplayChangeData>;\n  };\n\n/**\n * State used in rendering CarouselAutoplayButton\n */\nexport type CarouselAutoplayButtonState = ToggleButtonState & ComponentState<CarouselAutoplayButtonSlots>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAGuB"}
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselAutoplayButtonSlots = ButtonSlots & {\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\nexport type CarouselAutoplayChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The updated autoplay value.\n   */\n  checked: boolean;\n};\n\nexport type CarouselAutoplayAriaLabelFunction = (autoplay: boolean) => string;\n\n/**\n * CarouselAutoplayButton Props\n */\nexport type CarouselAutoplayButtonProps = ToggleButtonProps &\n  ComponentProps<CarouselAutoplayButtonSlots> & {\n    /**\n     * Callback that informs the user when internal autoplay value has changed\n     */\n    onCheckedChange?: EventHandler<CarouselAutoplayChangeData>;\n  };\n\n/**\n * State used in rendering CarouselAutoplayButton\n */\nexport type CarouselAutoplayButtonState = ToggleButtonState & ComponentState<CarouselAutoplayButtonSlots>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAGuB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselAutoplayButton';\nexport * from './CarouselAutoplayButton.types';\nexport * from './renderCarouselAutoplayButton';\nexport * from './useCarouselAutoplayButton';\nexport * from './useCarouselAutoplayButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/index.ts"],"sourcesContent":["export * from './CarouselAutoplayButton';\nexport * from './CarouselAutoplayButton.types';\nexport * from './renderCarouselAutoplayButton';\nexport * from './useCarouselAutoplayButton';\nexport * from './useCarouselAutoplayButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarouselAutoplayButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonState, CarouselAutoplayButtonSlots } from './CarouselAutoplayButton.types';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of CarouselAutoplayButton\n */\nexport const renderCarouselAutoplayButton_unstable = (state: CarouselAutoplayButtonState) => {\n  assertSlots<CarouselAutoplayButtonSlots>(state);\n\n  // We render the underlying react-button with injected carousel functionality\n  return renderToggleButton_unstable(state);\n};\n"],"names":["renderCarouselAutoplayButton_unstable","state","assertSlots","renderToggleButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;gCATb;6BAI4C;AAKrC,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,6EAA6E;IAC7E,OAAOE,IAAAA,wCAAAA,EAA4BF;AACrC"}
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx"],"sourcesContent":["import { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonState, CarouselAutoplayButtonSlots } from './CarouselAutoplayButton.types';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of CarouselAutoplayButton\n */\nexport const renderCarouselAutoplayButton_unstable = (state: CarouselAutoplayButtonState) => {\n  assertSlots<CarouselAutoplayButtonSlots>(state);\n\n  // We render the underlying react-button with injected carousel functionality\n  return renderToggleButton_unstable(state);\n};\n"],"names":["renderCarouselAutoplayButton_unstable","state","assertSlots","renderToggleButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;gCAPe;6BAEgB;AAKrC,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,6EAA6E;IAC7E,OAAOE,IAAAA,wCAAAA,EAA4BF;AACrC"}

package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarouselAutoplayButton.tsx"],"sourcesContent":["import type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport {\n  mergeCallbacks,\n  slot,\n  useControllableState,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n  props: CarouselAutoplayButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n  const { onCheckedChange, checked, defaultChecked } = props;\n\n  const [autoplay, setAutoplay] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n  const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n  React.useEffect(() => {\n    return () => {\n      // We disable autoplay if the button gets unmounted.\n      enableAutoplay(false);\n    };\n  }, [enableAutoplay]);\n\n  useIsomorphicLayoutEffect(() => {\n    // Enable/disable autoplay on state change\n    enableAutoplay(autoplay);\n  }, [autoplay, enableAutoplay]);\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    const newValue = !autoplay;\n\n    setAutoplay(newValue);\n    onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n  };\n\n  return {\n    // We lean on react-button class to handle styling and icon enhancements\n    ...useToggleButton_unstable(\n      {\n        icon: slot.optional(props.icon, {\n          defaultProps: {\n            children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n          },\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        ...props,\n        checked: autoplay,\n        onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n      },\n      ref as React.Ref<HTMLButtonElement>,\n    ),\n  };\n};\n"],"names":["useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","autoplay","setAutoplay","useControllableState","state","defaultState","initialState","enableAutoplay","useCarouselContext","ctx","React","useEffect","useIsomorphicLayoutEffect","handleClick","event","isDefaultPrevented","newValue","type","useToggleButton_unstable","icon","slot","optional","defaultProps","children","createElement","PauseCircleRegular","PlayCircleRegular","renderByDefault","elementType","onClick","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBaA;;;eAAAA;;;;6BAvB4B;4BACa;gCAO/C;iEACgB;iCAG2C;AAW3D,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGJ;IAErD,MAAM,CAACK,UAAUC,YAAY,GAAGC,IAAAA,oCAAAA,EAAqB;QACnDC,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,iBAAiBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,cAAc;IAEnEG,OAAMC,SAAS,CAAC;QACd,OAAO;YACL,oDAAoD;YACpDJ,eAAe;QACjB;IACF,GAAG;QAACA;KAAe;IAEnBK,IAAAA,yCAAAA,EAA0B;QACxB,0CAA0C;QAC1CL,eAAeN;IACjB,GAAG;QAACA;QAAUM;KAAe;IAE7B,MAAMM,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACf;QAElBC,YAAYc;QACZlB,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBgB,OAAO;YAAEA;YAAOG,MAAM;YAASlB,SAASiB;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,GAAGE,IAAAA,qCAAAA,EACD;YACEC,MAAMC,oBAAAA,CAAKC,QAAQ,CAACzB,MAAMuB,IAAI,EAAE;gBAC9BG,cAAc;oBACZC,UAAUtB,WAAAA,WAAAA,GAAWS,OAAAc,aAAA,CAACC,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwBf,OAAAc,aAAA,CAACE,6BAAAA,EAAAA;gBACjD;gBACAC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGhC,KAAK;YACRG,SAASE;YACT4B,SAASC,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAelB,aAAajB,MAAMiC,OAAO;QACrE,GACAhC,IACD;IACH;AACF"}
+{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["import type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport {\n  mergeCallbacks,\n  slot,\n  useControllableState,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n  props: CarouselAutoplayButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n  const { onCheckedChange, checked, defaultChecked } = props;\n\n  const [autoplay, setAutoplay] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n  const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n  React.useEffect(() => {\n    return () => {\n      // We disable autoplay if the button gets unmounted.\n      enableAutoplay(false);\n    };\n  }, [enableAutoplay]);\n\n  useIsomorphicLayoutEffect(() => {\n    // Enable/disable autoplay on state change\n    enableAutoplay(autoplay);\n  }, [autoplay, enableAutoplay]);\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    const newValue = !autoplay;\n\n    setAutoplay(newValue);\n    onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n  };\n\n  return {\n    // We lean on react-button class to handle styling and icon enhancements\n    ...useToggleButton_unstable(\n      {\n        icon: slot.optional(props.icon, {\n          defaultProps: {\n            children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n          },\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        ...props,\n        checked: autoplay,\n        onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n      },\n      ref as React.Ref<HTMLButtonElement>,\n    ),\n  };\n};\n"],"names":["useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","autoplay","setAutoplay","useControllableState","state","defaultState","initialState","enableAutoplay","useCarouselContext","ctx","React","useEffect","useIsomorphicLayoutEffect","handleClick","event","isDefaultPrevented","newValue","type","useToggleButton_unstable","icon","slot","optional","defaultProps","children","createElement","PauseCircleRegular","PlayCircleRegular","renderByDefault","elementType","onClick","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBaA;;;eAAAA;;;;6BAvB4B;4BACa;gCAO/C;iEACgB;iCAG2C;AAW3D,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGJ;IAErD,MAAM,CAACK,UAAUC,YAAY,GAAGC,IAAAA,oCAAAA,EAAqB;QACnDC,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,iBAAiBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,cAAc;IAEnEG,OAAMC,SAAS,CAAC;QACd,OAAO;YACL,oDAAoD;YACpDJ,eAAe;QACjB;IACF,GAAG;QAACA;KAAe;IAEnBK,IAAAA,yCAAAA,EAA0B;QACxB,0CAA0C;QAC1CL,eAAeN;IACjB,GAAG;QAACA;QAAUM;KAAe;IAE7B,MAAMM,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACf;QAElBC,YAAYc;QACZlB,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBgB,OAAO;YAAEA;YAAOG,MAAM;YAASlB,SAASiB;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,GAAGE,IAAAA,qCAAAA,EACD;YACEC,MAAMC,oBAAAA,CAAKC,QAAQ,CAACzB,MAAMuB,IAAI,EAAE;gBAC9BG,cAAc;oBACZC,UAAUtB,WAAAA,WAAAA,GAAWS,OAAAc,aAAA,CAACC,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwBf,OAAAc,aAAA,CAACE,6BAAAA,EAAAA;gBACjD;gBACAC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGhC,KAAK;YACRG,SAASE;YACT4B,SAASC,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAelB,aAAajB,MAAMiC,OAAO;QACrE,GACAhC,IACD;IACH;AACF"}

package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js

@@ -68,4 +68,4 @@ const useCarouselAutoplayButtonStyles_unstable = (state)=>{
         state.icon.className = (0, _react.mergeClasses)(carouselAutoplayButtonClassNames.icon, state.icon.className);
     }
     return state;
-}; //# sourceMappingURL=useCarouselAutoplayButtonStyles.styles.js.map
+};

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

@@ -13,12 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselButton = require("./useCarouselButton");
 const _renderCarouselButton = require("./renderCarouselButton");
 const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const CarouselButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarouselButton.useCarouselButton_unstable)(props, ref);
     (0, _useCarouselButtonStylesstyles.useCarouselButtonStyles_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('useCarouselButtonStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselButtonStyles_unstable')(state);
     return (0, _renderCarouselButton.renderCarouselButton_unstable)(state);
 });
 CarouselButton.displayName = 'CarouselButton';

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselButton_unstable } from './useCarouselButton';\nimport { renderCarouselButton_unstable } from './renderCarouselButton';\nimport { useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\nimport type { CarouselButtonProps } from './CarouselButton.types';\n\n/**\n * A default navigation button that will set value to the next/previous page,\n * driven by it's type 'next' or 'previous'.\n */\nexport const CarouselButton: ForwardRefComponent<CarouselButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselButton_unstable(props, ref);\n\n  useCarouselButtonStyles_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('useCarouselButtonStyles_unstable')(state);\n\n  return renderCarouselButton_unstable(state);\n});\n\nCarouselButton.displayName = 'CarouselButton';\n"],"names":["CarouselButton","React","forwardRef","props","ref","state","useCarouselButton_unstable","useCarouselButtonStyles_unstable","renderCarouselButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;mCAEoB;sCACG;+CACG;AAO1C,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IACjC,8HAA8H;IAC9H,wGAAwG;IACxG,0EAA0E;IAE1E,OAAOG,IAAAA,mDAAAA,EAA8BH;AACvC;AAEAL,eAAeS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CarouselButton/CarouselButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselButton_unstable } from './useCarouselButton';\nimport { renderCarouselButton_unstable } from './renderCarouselButton';\nimport { useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\nimport type { CarouselButtonProps } from './CarouselButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A default navigation button that will set value to the next/previous page,\n * driven by it's type 'next' or 'previous'.\n */\nexport const CarouselButton: ForwardRefComponent<CarouselButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselButton_unstable(props, ref);\n\n  useCarouselButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state);\n\n  return renderCarouselButton_unstable(state);\n});\n\nCarouselButton.displayName = 'CarouselButton';\n"],"names":["CarouselButton","React","forwardRef","props","ref","state","useCarouselButton_unstable","useCarouselButtonStyles_unstable","useCustomStyleHook_unstable","renderCarouselButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;mCAEoB;sCACG;+CACG;qCAEL;AAMrC,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IACjCG,IAAAA,gDAAAA,EAA4B,oCAAoCH;IAEhE,OAAOI,IAAAA,mDAAAA,EAA8BJ;AACvC;AAEAL,eAAeU,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\nexport type CarouselButtonSlots = ButtonSlots & {\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselButton Props\n */\nexport type CarouselButtonProps = Partial<ButtonProps> &\n  ComponentProps<CarouselButtonSlots> & {\n    /**\n     * Dictates whether button will be of type go next or go previous\n     * Default: 'next'\n     */\n    navType?: 'prev' | 'next';\n  };\n\n/**\n * State used in rendering CarouselButton\n */\nexport type CarouselButtonState = ButtonState &\n  ComponentState<CarouselButtonSlots> &\n  Required<Pick<CarouselButtonProps, 'navType'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC"}
+{"version":3,"sources":["../src/components/CarouselButton/CarouselButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\nexport type CarouselButtonSlots = ButtonSlots & {\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselButton Props\n */\nexport type CarouselButtonProps = Partial<ButtonProps> &\n  ComponentProps<CarouselButtonSlots> & {\n    /**\n     * Dictates whether button will be of type go next or go previous\n     * Default: 'next'\n     */\n    navType?: 'prev' | 'next';\n  };\n\n/**\n * State used in rendering CarouselButton\n */\nexport type CarouselButtonState = ButtonState &\n  ComponentState<CarouselButtonSlots> &\n  Required<Pick<CarouselButtonProps, 'navType'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselButton';\nexport * from './CarouselButton.types';\nexport * from './renderCarouselButton';\nexport * from './useCarouselButton';\nexport * from './useCarouselButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/CarouselButton/index.ts"],"sourcesContent":["export * from './CarouselButton';\nexport * from './CarouselButton.types';\nexport * from './renderCarouselButton';\nexport * from './useCarouselButton';\nexport * from './useCarouselButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselButton/renderCarouselButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarouselButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselButtonState, CarouselButtonSlots } from './CarouselButton.types';\nimport { renderButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of CarouselButton\n */\nexport const renderCarouselButton_unstable = (state: CarouselButtonState) => {\n  assertSlots<CarouselButtonSlots>(state);\n\n  // We render the underlying react-button with injected carousel functionality\n  return renderButton_unstable(state);\n};\n"],"names":["renderCarouselButton_unstable","state","assertSlots","renderButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;gCATb;6BAIsC;AAK/B,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,2BAAAA,EAAiCD;IAEjC,6EAA6E;IAC7E,OAAOE,IAAAA,kCAAAA,EAAsBF;AAC/B"}
+{"version":3,"sources":["../src/components/CarouselButton/renderCarouselButton.tsx"],"sourcesContent":["import { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselButtonState, CarouselButtonSlots } from './CarouselButton.types';\nimport { renderButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of CarouselButton\n */\nexport const renderCarouselButton_unstable = (state: CarouselButtonState) => {\n  assertSlots<CarouselButtonSlots>(state);\n\n  // We render the underlying react-button with injected carousel functionality\n  return renderButton_unstable(state);\n};\n"],"names":["renderCarouselButton_unstable","state","assertSlots","renderButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;gCAPe;6BAEU;AAK/B,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,2BAAAA,EAAiCD;IAEjC,6EAA6E;IAC7E,OAAOE,IAAAA,kCAAAA,EAAsBF;AAC/B"}

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

@@ -1 +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":"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"}
+{"version":3,"sources":["../src/components/CarouselButton/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":"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"}

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

@@ -57,4 +57,4 @@ const useCarouselButtonStyles_unstable = (state)=>{
         state.icon.className = (0, _react.mergeClasses)(carouselButtonClassNames.icon, state.icon.className);
     }
     return state;
-}; //# sourceMappingURL=useCarouselButtonStyles.styles.js.map
+};

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

@@ -13,12 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselCard = require("./useCarouselCard");
 const _renderCarouselCard = require("./renderCarouselCard");
 const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 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);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselCardStyles_unstable')(state);
     return (0, _renderCarouselCard.renderCarouselCard_unstable)(state);
 });
 CarouselCard.displayName = 'CarouselCard';

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselCard/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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);\n\n  return renderCarouselCard_unstable(state);\n});\n\nCarouselCard.displayName = 'CarouselCard';\n"],"names":["CarouselCard","React","forwardRef","props","ref","state","useCarouselCard_unstable","useCarouselCardStyles_unstable","useCustomStyleHook_unstable","renderCarouselCard_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;iCAEkB;oCACG;6CACG;qCAEH;AAUrC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAC/BG,IAAAA,gDAAAA,EAA4B,kCAAkCH;IAE9D,OAAOI,IAAAA,+CAAAA,EAA4BJ;AACrC;AAEAL,aAAaU,WAAW,GAAG"}

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselCard/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.map

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselCard/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.map

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselCard/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

@@ -21,6 +21,7 @@ const useCarouselCard_unstable = (props, ref)=>{
     const elementRef = _react.useRef(null);
     const isMouseEvent = _react.useRef(false);
     const selectPageByElement = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByElement);
+    const containerRef = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.containerRef);
     const { cardFocus } = (0, _CarouselSliderContext.useCarouselSliderContext)();
     const focusAttr = (0, _reacttabster.useFocusableGroup)({
         tabBehavior: 'limited'
@@ -51,26 +52,31 @@ const useCarouselCard_unstable = (props, ref)=>{
     }, [
         cardFocus
     ]);
-    const handleFocusCapture = _react.useCallback((e)=>{
+    const handleFocus = _react.useCallback((e)=>{
         if (!e.defaultPrevented && (0, _reactutilities.isHTMLElement)(e.currentTarget) && !isMouseEvent.current) {
-            selectPageByElement(e, e.currentTarget, true);
+            var _containerRef_current;
+            containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.scrollTo(0, 0);
+            selectPageByElement(e, e.currentTarget, false);
         }
+        // Mouse focus event has been consumed
+        isMouseEvent.current = false;
     }, [
-        selectPageByElement
+        selectPageByElement,
+        containerRef
     ]);
-    const handleMouseDown = (e)=>{
+    const handlePointerDown = (e)=>{
         if (!e.defaultPrevented) {
             isMouseEvent.current = true;
         }
     };
-    const handleMouseUp = (e)=>{
+    const handlePointerUp = (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 onFocusCapture = (0, _reactutilities.mergeCallbacks)(props.onFocusCapture, handleFocus);
+    const onPointerUp = (0, _reactutilities.mergeCallbacks)(props.onPointerUp, handlePointerUp);
+    const onPointerDown = (0, _reactutilities.mergeCallbacks)(props.onPointerDown, handlePointerDown);
     const state = {
         autoSize,
         components: {
@@ -83,8 +89,8 @@ const useCarouselCard_unstable = (props, ref)=>{
             ...props,
             id,
             onFocusCapture,
-            onMouseDown,
-            onMouseUp,
+            onPointerUp,
+            onPointerDown,
             ...focusAttrProps
         }), {
             elementType: 'div'

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselCard/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 containerRef = useCarouselContext(ctx => ctx.containerRef);\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 handleFocus = React.useCallback(\n    (e: React.FocusEvent) => {\n      if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n        // We want to prevent any browser scroll intervention for 'offscreen' focus\n        containerRef?.current?.scrollTo(0, 0);\n        selectPageByElement(e, e.currentTarget, false);\n      }\n      // Mouse focus event has been consumed\n      isMouseEvent.current = false;\n    },\n    [selectPageByElement, containerRef],\n  );\n\n  const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!e.defaultPrevented) {\n      isMouseEvent.current = true;\n    }\n  };\n\n  const handlePointerUp = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!e.defaultPrevented) {\n      isMouseEvent.current = false;\n    }\n  };\n\n  const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);\n  const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);\n  const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);\n\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        onPointerUp,\n        onPointerDown,\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","containerRef","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","handleFocus","useCallback","e","defaultPrevented","isHTMLElement","currentTarget","scrollTo","handlePointerDown","handlePointerUp","onFocusCapture","mergeCallbacks","onPointerUp","onPointerDown","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -64,4 +64,4 @@ const useCarouselCardStyles_unstable = (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/CarouselContext.js

@@ -37,7 +37,8 @@ const carouselContextDefaultValue = {
     resetAutoplay: ()=>{
     /** noop */ },
     circular: false,
-    containerRef: undefined
+    containerRef: undefined,
+    viewportRef: undefined
 };
 const CarouselContext = (0, _reactcontextselector.createContext)(undefined);
 const CarouselProvider = CarouselContext.Provider;

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/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  viewportRef: 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","viewportRef","CarouselContext","createContext","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8BaA,gBAAAA;eAAAA;;IA3BAC,2BAAAA;eAAAA;;IA6BAC,2BAAAA;eAAAA;;;sCAhCsD;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;IACdC,aAAaD;AACf;AAEA,MAAME,kBAAkBC,IAAAA,mCAAAA,EAAgDH;AAEjE,MAAMZ,mBAAmBc,gBAAgBE,QAAQ;AAEjD,MAAMd,8BAA8B,CAAIe,WAC7CC,IAAAA,wCAAAA,EAAmBJ,iBAAiB,CAACK,MAAMlB,2BAA2B,GAAKgB,SAASE"}

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/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 = (\n  | EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>>\n  | EventData<'focus', React.FocusEvent>\n  | EventData<'drag', PointerEvent | MouseEvent>\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  // Container with controls passed to carousel engine\n  containerRef?: React.RefObject<HTMLDivElement>;\n  // Viewport without controls used for interactive functionality (draggable, pause autoplay etc.)\n  viewportRef?: 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

@@ -14,13 +14,12 @@ const _CarouselNavContext = require("./CarouselNavContext");
 const _renderCarouselNav = require("./renderCarouselNav");
 const _useCarouselNav = require("./useCarouselNav");
 const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 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);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselNavStyles_unstable')(state);
     return (0, _renderCarouselNav.renderCarouselNav_unstable)(state, contextValues);
 });
 CarouselNav.displayName = 'CarouselNav';

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNav/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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  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","useCustomStyleHook_unstable","renderCarouselNav_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAfU;oCAG8B;mCACV;gCACH;4CACM;qCACF;AAQrC,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;IAC9BK,IAAAA,gDAAAA,EAA4B,iCAAiCL;IAE7D,OAAOM,IAAAA,6CAAAA,EAA2BN,OAAOE;AAC3C;AAEAP,YAAYY,WAAW,GAAG"}

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNav/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.map

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNav/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"}

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNav/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.map

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNav/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.map

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNav/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.map

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNav/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

@@ -103,4 +103,4 @@ const useCarouselNavStyles_unstable = (state)=>{
     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/CarouselNavButton/CarouselNavButton.js

@@ -13,12 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselNavButton = require("./useCarouselNavButton");
 const _renderCarouselNavButton = require("./renderCarouselNavButton");
 const _useCarouselNavButtonStylesstyles = require("./useCarouselNavButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 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);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselNavButtonStyles_unstable')(state);
     return (0, _renderCarouselNavButton.renderCarouselNavButton_unstable)(state);
 });
 CarouselNavButton.displayName = 'CarouselNavButton';

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNavButton/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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  useCustomStyleHook_unstable('useCarouselNavButtonStyles_unstable')(state);\n\n  return renderCarouselNavButton_unstable(state);\n});\n\nCarouselNavButton.displayName = 'CarouselNavButton';\n"],"names":["CarouselNavButton","React","forwardRef","props","ref","state","useCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCustomStyleHook_unstable","renderCarouselNavButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;sCAEuB;yCACG;kDACG;qCAER;AAKrC,MAAMA,oBAAAA,WAAAA,GAAiEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQC,IAAAA,mDAAAA,EAA8BH,OAAOC;IAEnDG,IAAAA,qEAAAA,EAAoCF;IACpCG,IAAAA,gDAAAA,EAA4B,uCAAuCH;IAEnE,OAAOI,IAAAA,yDAAAA,EAAiCJ;AAC1C;AAEAL,kBAAkBU,WAAW,GAAG"}

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNavButton/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.map

@@ -1 +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"}
+{"version":3,"sources":["../src/components/CarouselNavButton/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"}