@fluentui/react-carousel 9.2.0 → 9.3.0

package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js

@@ -2,15 +2,14 @@ import * as React from 'react';
 import { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';
 import { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';
 import { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * A variant child element of CarouselNav, a singular image button that displays a
  * preview of card content and will set the carousels active value on click.
  */ export const CarouselNavImageButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useCarouselNavImageButton_unstable(props, ref);
     useCarouselNavImageButtonStyles_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('useCarouselNavImageButtonStyles_unstable')(state);
+    useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);
     return renderCarouselNavImageButton_unstable(state);
 });
 CarouselNavImageButton.displayName = 'CarouselNavImageButton';

package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNavImageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nimport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nimport { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';\nimport type { CarouselNavImageButtonProps } from './CarouselNavImageButton.types';\n\n/**\n * A variant child element of CarouselNav, a singular image button that displays a\n * preview of card content and will set the carousels active value on click.\n */\nexport const CarouselNavImageButton: ForwardRefComponent<CarouselNavImageButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useCarouselNavImageButton_unstable(props, ref);\n\n    useCarouselNavImageButtonStyles_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('useCarouselNavImageButtonStyles_unstable')(state);\n    return renderCarouselNavImageButton_unstable(state);\n  },\n);\n\nCarouselNavImageButton.displayName = 'CarouselNavImageButton';\n"],"names":["React","useCarouselNavImageButton_unstable","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","CarouselNavImageButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAGpG;;;CAGC,GACD,OAAO,MAAMC,uCAA2EJ,MAAMK,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQP,mCAAmCK,OAAOC;IAExDJ,yCAAyCK;IACzC,8HAA8H;IAC9H,wGAAwG;IACxG,kFAAkF;IAClF,OAAON,sCAAsCM;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nimport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nimport { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';\nimport type { CarouselNavImageButtonProps } from './CarouselNavImageButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A variant child element of CarouselNav, a singular image button that displays a\n * preview of card content and will set the carousels active value on click.\n */\nexport const CarouselNavImageButton: ForwardRefComponent<CarouselNavImageButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useCarouselNavImageButton_unstable(props, ref);\n\n    useCarouselNavImageButtonStyles_unstable(state);\n    useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);\n\n    return renderCarouselNavImageButton_unstable(state);\n  },\n);\n\nCarouselNavImageButton.displayName = 'CarouselNavImageButton';\n"],"names":["React","useCarouselNavImageButton_unstable","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCustomStyleHook_unstable","CarouselNavImageButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAEpG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQR,mCAAmCM,OAAOC;IAExDL,yCAAyCM;IACzCL,4BAA4B,4CAA4CK;IAExE,OAAOP,sCAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * Required: The image within the button\n   */\n  image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  selected?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAKE"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * Required: The image within the button\n   */\n  image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  selected?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAKE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselNavImageButton';\nexport * from './CarouselNavImageButton.types';\nexport * from './renderCarouselNavImageButton';\nexport * from './useCarouselNavImageButton';\nexport * from './useCarouselNavImageButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,2BAA2B;AACzC,cAAc,iCAAiC;AAC/C,cAAc,iCAAiC;AAC/C,cAAc,8BAA8B;AAC5C,cAAc,2CAA2C"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/index.ts"],"sourcesContent":["export * from './CarouselNavImageButton';\nexport * from './CarouselNavImageButton.types';\nexport * from './renderCarouselNavImageButton';\nexport * from './useCarouselNavImageButton';\nexport * from './useCarouselNavImageButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,2BAA2B;AACzC,cAAc,iCAAiC;AAC/C,cAAc,iCAAiC;AAC/C,cAAc,8BAA8B;AAC5C,cAAc,2CAA2C"}

package/lib/components/CarouselNavImageButton/renderCarouselNavImageButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarouselNavImageButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonState, CarouselNavImageButtonSlots } from './CarouselNavImageButton.types';\n\n/**\n * Render the final JSX of CarouselNavImageButton\n */\nexport const renderCarouselNavImageButton_unstable = (state: CarouselNavImageButtonState) => {\n  assertSlots<CarouselNavImageButtonSlots>(state);\n\n  return (\n    <state.root>\n      <state.image />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCarouselNavImageButton_unstable","state","root","image"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDF,YAAyCE;IAEzC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,KAAK;;AAGlB,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/renderCarouselNavImageButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonState, CarouselNavImageButtonSlots } from './CarouselNavImageButton.types';\n\n/**\n * Render the final JSX of CarouselNavImageButton\n */\nexport const renderCarouselNavImageButton_unstable = (state: CarouselNavImageButtonState) => {\n  assertSlots<CarouselNavImageButtonSlots>(state);\n\n  return (\n    <state.root>\n      <state.image />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCarouselNavImageButton_unstable","state","root","image"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDF,YAAyCE;IAEzC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,KAAK;;AAGlB,EAAE"}

package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarouselNavImageButton.ts"],"sourcesContent":["import { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavImageButtonProps, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\n\n/**\n * Create the state required to render CarouselNavImageButton.\n *\n * The returned state can be modified with hooks such as useCarouselNavImageButtonStyles_unstable,\n * before being passed to renderCarouselNavImageButton_unstable.\n *\n * @param props - props from this instance of CarouselNavImageButton\n * @param ref - reference to root HTMLButtonElement | HTMLAnchorElement of CarouselNavImageButton\n */\nexport const useCarouselNavImageButton_unstable = (\n  props: CarouselNavImageButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselNavImageButtonState => {\n  const { onClick, as = 'button' } = props;\n\n  const index = useCarouselNavIndexContext();\n  const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);\n  const selected = useCarouselContext(ctx => ctx.activeIndex === index);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n  const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByIndex(event, index);\n    }\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  const buttonRef = React.useRef<HTMLElement>();\n  const _carouselButton = slot.always<ARIAButtonSlotProps>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: useMergedRefs(ref, buttonRef),\n        role: 'tab',\n        type: 'button',\n        'aria-selected': selected,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      const controlList = data.groupIndexList[index];\n      const _controlledSlideIds = controlList\n        .map((slideIndex: number) => {\n          return data.slideNodes[slideIndex].id;\n        })\n        .join(' ');\n      if (buttonRef.current) {\n        buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);\n      }\n    });\n  }, [subscribeForValues, index]);\n\n  // Override onClick\n  _carouselButton.onClick = handleClick;\n\n  const image = slot.always(\n    getIntrinsicElementProps('img', {\n      'aria-hidden': true, // Hidden as button is responsible for navigation description\n      alt: '',\n      role: 'presentation',\n      ...props.image,\n    }),\n    { elementType: 'img' },\n  );\n\n  return {\n    components: {\n      root: 'button',\n      image: 'img',\n    },\n    root: _carouselButton,\n    image,\n    selected,\n  };\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","useTabsterAttributes","React","useCarouselNavIndexContext","useCarouselContext_unstable","useCarouselContext","useCarouselNavImageButton_unstable","props","ref","onClick","as","index","selectPageByIndex","ctx","selected","activeIndex","subscribeForValues","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","buttonRef","useRef","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAA2DA,kBAAkB,QAAQ,uBAAuB;AAC5G,SACEC,wBAAwB,EACxBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,yCAAyC;AACpF,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQR;IACd,MAAMS,oBAAoBP,mBAAmBQ,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,WAAWT,mBAAmBQ,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,qBAAqBX,mBAAmBQ,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CnB,iBAAiBoB,CAAAA;QACnET,oBAAAA,8BAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIvB,cAAcsB,MAAME,MAAM,GAAG;YAC1DR,kBAAkBM,OAAOP;QAC3B;IACF;IAEA,MAAMU,kBAAkBpB,qBAAqB;QAC3CqB,WAAW;YAAEC,WAAWT;QAAS;IACnC;IAEA,MAAMU,YAAYtB,MAAMuB,MAAM;IAC9B,MAAMC,kBAAkB7B,KAAK8B,MAAM,CACjChC,yBAAyBe,IAAIhB,mBAAmBa,MAAMG,EAAE,EAAEH,SAC1D;QACEqB,aAAa;QACbC,cAAc;YACZrB,KAAKR,cAAcQ,KAAKgB;YACxBM,MAAM;YACNC,MAAM;YACN,iBAAiBjB;YACjB,GAAGO,eAAe;QACpB;IACF;IAGFtB,0BAA0B;QACxB,OAAOiB,mBAAmBgB,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAACvB,MAAM;YAC9C,MAAMwB,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIhB,UAAUiB,OAAO,EAAE;gBACrBjB,UAAUiB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACnB;QAAoBL;KAAM;IAE9B,mBAAmB;IACnBe,gBAAgBjB,OAAO,GAAGQ;IAE1B,MAAM0B,QAAQ9C,KAAK8B,MAAM,CACvBhC,yBAAyB,OAAO;QAC9B,eAAe;QACfiD,KAAK;QACLd,MAAM;QACN,GAAGvB,MAAMoC,KAAK;IAChB,IACA;QAAEf,aAAa;IAAM;IAGvB,OAAO;QACLiB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMpB;QACNiB;QACA7B;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButton.ts"],"sourcesContent":["import { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavImageButtonProps, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\n\n/**\n * Create the state required to render CarouselNavImageButton.\n *\n * The returned state can be modified with hooks such as useCarouselNavImageButtonStyles_unstable,\n * before being passed to renderCarouselNavImageButton_unstable.\n *\n * @param props - props from this instance of CarouselNavImageButton\n * @param ref - reference to root HTMLButtonElement | HTMLAnchorElement of CarouselNavImageButton\n */\nexport const useCarouselNavImageButton_unstable = (\n  props: CarouselNavImageButtonProps,\n  ref: React.Ref<ARIAButtonElement>,\n): CarouselNavImageButtonState => {\n  const { onClick, as = 'button' } = props;\n\n  const index = useCarouselNavIndexContext();\n  const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);\n  const selected = useCarouselContext(ctx => ctx.activeIndex === index);\n  const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n  const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByIndex(event, index);\n    }\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  const buttonRef = React.useRef<HTMLElement>();\n  const _carouselButton = slot.always<ARIAButtonSlotProps>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: useMergedRefs(ref, buttonRef),\n        role: 'tab',\n        type: 'button',\n        'aria-selected': selected,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    return subscribeForValues(data => {\n      const controlList = data.groupIndexList[index];\n      const _controlledSlideIds = controlList\n        .map((slideIndex: number) => {\n          return data.slideNodes[slideIndex].id;\n        })\n        .join(' ');\n      if (buttonRef.current) {\n        buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);\n      }\n    });\n  }, [subscribeForValues, index]);\n\n  // Override onClick\n  _carouselButton.onClick = handleClick;\n\n  const image = slot.always(\n    getIntrinsicElementProps('img', {\n      'aria-hidden': true, // Hidden as button is responsible for navigation description\n      alt: '',\n      role: 'presentation',\n      ...props.image,\n    }),\n    { elementType: 'img' },\n  );\n\n  return {\n    components: {\n      root: 'button',\n      image: 'img',\n    },\n    root: _carouselButton,\n    image,\n    selected,\n  };\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","useTabsterAttributes","React","useCarouselNavIndexContext","useCarouselContext_unstable","useCarouselContext","useCarouselNavImageButton_unstable","props","ref","onClick","as","index","selectPageByIndex","ctx","selected","activeIndex","subscribeForValues","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","buttonRef","useRef","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAA2DA,kBAAkB,QAAQ,uBAAuB;AAC5G,SACEC,wBAAwB,EACxBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,yCAAyC;AACpF,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQR;IACd,MAAMS,oBAAoBP,mBAAmBQ,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,WAAWT,mBAAmBQ,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,qBAAqBX,mBAAmBQ,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CnB,iBAAiBoB,CAAAA;QACnET,oBAAAA,8BAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIvB,cAAcsB,MAAME,MAAM,GAAG;YAC1DR,kBAAkBM,OAAOP;QAC3B;IACF;IAEA,MAAMU,kBAAkBpB,qBAAqB;QAC3CqB,WAAW;YAAEC,WAAWT;QAAS;IACnC;IAEA,MAAMU,YAAYtB,MAAMuB,MAAM;IAC9B,MAAMC,kBAAkB7B,KAAK8B,MAAM,CACjChC,yBAAyBe,IAAIhB,mBAAmBa,MAAMG,EAAE,EAAEH,SAC1D;QACEqB,aAAa;QACbC,cAAc;YACZrB,KAAKR,cAAcQ,KAAKgB;YACxBM,MAAM;YACNC,MAAM;YACN,iBAAiBjB;YACjB,GAAGO,eAAe;QACpB;IACF;IAGFtB,0BAA0B;QACxB,OAAOiB,mBAAmBgB,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAACvB,MAAM;YAC9C,MAAMwB,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIhB,UAAUiB,OAAO,EAAE;gBACrBjB,UAAUiB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACnB;QAAoBL;KAAM;IAE9B,mBAAmB;IACnBe,gBAAgBjB,OAAO,GAAGQ;IAE1B,MAAM0B,QAAQ9C,KAAK8B,MAAM,CACvBhC,yBAAyB,OAAO;QAC9B,eAAe;QACfiD,KAAK;QACLd,MAAM;QACN,GAAGvB,MAAMoC,KAAK;IAChB,IACA;QAAEf,aAAa;IAAM;IAGvB,OAAO;QACLiB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMpB;QACNiB;QACA7B;IACF;AACF,EAAE"}

package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js

@@ -81,5 +81,4 @@ export const useCarouselNavImageButtonStyles_unstable = state => {
     state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);
   }
   return state;
-};
-//# sourceMappingURL=useCarouselNavImageButtonStyles.styles.js.map
+};

package/lib/components/CarouselSlider/CarouselSlider.js

@@ -4,15 +4,14 @@ import { useCarouselSlider_unstable } from './useCarouselSlider';
 import { renderCarouselSlider_unstable } from './renderCarouselSlider';
 import { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';
 import { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * CarouselSlider component - The viewport window that CarouselCards are contained within.
  */ export const CarouselSlider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useCarouselSlider_unstable(props, ref);
     useCarouselSliderStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);
     const context = useCarouselSliderContextValues_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('useCarouselSliderStyles_unstable')(state);
     return renderCarouselSlider_unstable(state, context);
 });
 CarouselSlider.displayName = 'CarouselSlider';

package/lib/components/CarouselSlider/CarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useCarouselSlider_unstable } from './useCarouselSlider';\nimport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nimport { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\nimport type { CarouselSliderProps } from './CarouselSlider.types';\nimport { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';\n\n/**\n * CarouselSlider component - The viewport window that CarouselCards are contained within.\n */\nexport const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselSlider_unstable(props, ref);\n\n  useCarouselSliderStyles_unstable(state);\n\n  const context = useCarouselSliderContextValues_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('useCarouselSliderStyles_unstable')(state);\n  return renderCarouselSlider_unstable(state, context);\n});\n\nCarouselSlider.displayName = 'CarouselSlider';\n"],"names":["React","useCarouselSlider_unstable","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSliderContextValues_unstable","CarouselSlider","forwardRef","props","ref","state","context","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,uCAAuC,QAAQ,0BAA0B;AAElF;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IAEjC,MAAMC,UAAUN,wCAAwCK;IACxD,8HAA8H;IAC9H,wGAAwG;IACxG,0EAA0E;IAC1E,OAAOP,8BAA8BO,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useCarouselSlider_unstable } from './useCarouselSlider';\nimport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nimport { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\nimport type { CarouselSliderProps } from './CarouselSlider.types';\nimport { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselSlider component - The viewport window that CarouselCards are contained within.\n */\nexport const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselSlider_unstable(props, ref);\n\n  useCarouselSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);\n\n  const context = useCarouselSliderContextValues_unstable(state);\n  return renderCarouselSlider_unstable(state, context);\n});\n\nCarouselSlider.displayName = 'CarouselSlider';\n"],"names":["React","useCarouselSlider_unstable","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselSlider","forwardRef","props","ref","state","context","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,uCAAuC,QAAQ,0BAA0B;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IACjCL,4BAA4B,oCAAoCK;IAEhE,MAAMC,UAAUP,wCAAwCM;IACxD,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n  /**\n   * The root viewport/window of the carousel\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselSlider Props\n */\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n  /**\n   * cardFocus sets the carousel slider as a focus group,\n   * enabling left/right navigation of elements.\n   *\n   * This will also be passed into CarouselCards via context and set the appropriate focus attributes\n   *\n   * Defaults: false\n   */\n  cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC,GACD,WAAmG"}
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n  /**\n   * The root viewport/window of the carousel\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselSlider Props\n */\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n  /**\n   * cardFocus sets the carousel slider as a focus group,\n   * enabling left/right navigation of elements.\n   *\n   * This will also be passed into CarouselCards via context and set the appropriate focus attributes\n   *\n   * Defaults: false\n   */\n  cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC,GACD,WAAmG"}

package/lib/components/CarouselSlider/CarouselSliderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselSliderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue | undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n  cardFocus: false,\n};\n\nexport const useCarouselSliderContext = () =>\n  React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/**\n * Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n  carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n  const { cardFocus } = state;\n  const carouselSlider = React.useMemo(\n    () => ({\n      cardFocus,\n    }),\n    [cardFocus],\n  );\n\n  return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC;AAE1F,OAAO,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,oCAAjBD,+BAAAA,oBAA2CI;AAAgC,EAAE;AAE/E,OAAO,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AAS5E,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue | undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n  cardFocus: false,\n};\n\nexport const useCarouselSliderContext = () =>\n  React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/**\n * Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n  carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n  const { cardFocus } = state;\n  const carouselSlider = React.useMemo(\n    () => ({\n      cardFocus,\n    }),\n    [cardFocus],\n  );\n\n  return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC;AAE1F,OAAO,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,oCAAjBD,+BAAAA,oBAA2CI;AAAgC,EAAE;AAE/E,OAAO,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AAS5E,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselSlider';\nexport * from './CarouselSlider.types';\nexport * from './renderCarouselSlider';\nexport * from './useCarouselSlider';\nexport * from './useCarouselSliderStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC"}
+{"version":3,"sources":["../src/components/CarouselSlider/index.ts"],"sourcesContent":["export * from './CarouselSlider';\nexport * from './CarouselSlider.types';\nexport * from './renderCarouselSlider';\nexport * from './useCarouselSlider';\nexport * from './useCarouselSliderStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC"}

package/lib/components/CarouselSlider/renderCarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarouselSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';\nimport { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselSlider\n */\nexport const renderCarouselSlider_unstable = (\n  state: CarouselSliderState,\n  contextValues: CarouselSliderContextValues,\n) => {\n  assertSlots<CarouselSliderSlots>(state);\n\n  return (\n    <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n      <state.root />\n    </CarouselSliderContextProvider>\n  );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselSlider_unstable","state","contextValues","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,6BAA6B,QAAqC,0BAA0B;AAErG;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/CarouselSlider/renderCarouselSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';\nimport { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselSlider\n */\nexport const renderCarouselSlider_unstable = (\n  state: CarouselSliderState,\n  contextValues: CarouselSliderContextValues,\n) => {\n  assertSlots<CarouselSliderSlots>(state);\n\n  return (\n    <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n      <state.root />\n    </CarouselSliderContextProvider>\n  );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselSlider_unstable","state","contextValues","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,6BAA6B,QAAqC,0BAA0B;AAErG;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/CarouselSlider/useCarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarouselSlider.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselSlider.\n *\n * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n *\n * @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n  props: CarouselSliderProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n  const { cardFocus = false } = props;\n  const circular = useCarouselContext(ctx => ctx.circular);\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const focusProps = cardFocus ? focusableGroupAttr : {};\n\n  return {\n    cardFocus,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'group',\n        ...props,\n        ...focusProps,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselContext_unstable","useCarouselContext","useCarouselSlider_unstable","props","ref","cardFocus","circular","ctx","focusableGroupAttr","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWL,mBAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,qBAAqBT,wBAAwB;QACjDO;QACAG,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYG,qBAAqB,CAAC;IAErD,OAAO;QACLH;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselSlider.\n *\n * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n *\n * @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n  props: CarouselSliderProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n  const { cardFocus = false } = props;\n  const circular = useCarouselContext(ctx => ctx.circular);\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const focusProps = cardFocus ? focusableGroupAttr : {};\n\n  return {\n    cardFocus,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'group',\n        ...props,\n        ...focusProps,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselContext_unstable","useCarouselContext","useCarouselSlider_unstable","props","ref","cardFocus","circular","ctx","focusableGroupAttr","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWL,mBAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,qBAAqBT,wBAAwB;QACjDO;QACAG,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYG,qBAAqB,CAAC;IAErD,OAAO;QACLH;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js

@@ -22,5 +22,4 @@ export const useCarouselSliderStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, state.root.className);
   return state;
-};
-//# sourceMappingURL=useCarouselSliderStyles.styles.js.map
+};

package/lib/components/CarouselViewport/CarouselViewport.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useCarouselViewport_unstable } from './useCarouselViewport';
+import { renderCarouselViewport_unstable } from './renderCarouselViewport';
+import { useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';
+import { useCarouselSliderContextValues_unstable } from '../CarouselSlider/CarouselSliderContext';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * CarouselViewport component - TODO: add more docs
+ */ export const CarouselViewport = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselViewport_unstable(props, ref);
+    useCarouselViewportStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselViewportStyles_unstable')(state);
+    const context = useCarouselSliderContextValues_unstable(state);
+    return renderCarouselViewport_unstable(state, context);
+});
+CarouselViewport.displayName = 'CarouselViewport';

package/lib/components/CarouselViewport/CarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselViewport_unstable } from './useCarouselViewport';\nimport { renderCarouselViewport_unstable } from './renderCarouselViewport';\nimport { useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';\nimport type { CarouselViewportProps } from './CarouselViewport.types';\nimport { useCarouselSliderContextValues_unstable } from '../CarouselSlider/CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselViewport component - TODO: add more docs\n */\nexport const CarouselViewport: ForwardRefComponent<CarouselViewportProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselViewport_unstable(props, ref);\n\n  useCarouselViewportStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselViewportStyles_unstable')(state);\n\n  const context = useCarouselSliderContextValues_unstable(state);\n\n  return renderCarouselViewport_unstable(state, context);\n});\n\nCarouselViewport.displayName = 'CarouselViewport';\n"],"names":["React","useCarouselViewport_unstable","renderCarouselViewport_unstable","useCarouselViewportStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselViewport","forwardRef","props","ref","state","context","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAExF,SAASC,uCAAuC,QAAQ,0CAA0C;AAClG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,iCAA+DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQT,6BAA6BO,OAAOC;IAElDN,mCAAmCO;IACnCL,4BAA4B,sCAAsCK;IAElE,MAAMC,UAAUP,wCAAwCM;IAExD,OAAOR,gCAAgCQ,OAAOC;AAChD,GAAG;AAEHL,iBAAiBM,WAAW,GAAG"}

package/lib/components/CarouselViewport/CarouselViewport.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselSliderContextValue } from '../CarouselSlider/CarouselSlider.types';\n\nexport type CarouselViewportSlots = {\n  /**\n   * The viewport outer container, defining the size of the carousels visible and interactable area\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselViewport Props\n */\nexport type CarouselViewportProps = ComponentProps<CarouselViewportSlots>;\n\n/**\n * State used in rendering CarouselViewport\n */\nexport type CarouselViewportState = ComponentState<Required<CarouselViewportSlots>> & CarouselSliderContextValue;\n"],"names":[],"rangeMappings":";;","mappings":"AAeA;;CAEC,GACD,WAAiH"}

package/lib/components/CarouselViewport/index.js

@@ -0,0 +1,5 @@
+export * from './CarouselViewport';
+export * from './CarouselViewport.types';
+export * from './renderCarouselViewport';
+export * from './useCarouselViewport';
+export * from './useCarouselViewportStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/index.ts"],"sourcesContent":["export * from './CarouselViewport';\nexport * from './CarouselViewport.types';\nexport * from './renderCarouselViewport';\nexport * from './useCarouselViewport';\nexport * from './useCarouselViewportStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,2BAA2B;AACzC,cAAc,wBAAwB;AACtC,cAAc,qCAAqC"}

package/lib/components/CarouselViewport/renderCarouselViewport.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';
+/**
+ * Render the final JSX of CarouselViewport
+ */ export const renderCarouselViewport_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(CarouselSliderContextProvider, {
+        value: contextValues.carouselSlider,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

package/lib/components/CarouselViewport/renderCarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/renderCarouselViewport.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselViewportState, CarouselViewportSlots } from './CarouselViewport.types';\nimport { CarouselSliderContextValues, CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselViewport\n */\nexport const renderCarouselViewport_unstable = (\n  state: CarouselViewportState,\n  contextValues: CarouselSliderContextValues,\n) => {\n  assertSlots<CarouselViewportSlots>(state);\n\n  return (\n    <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n      <state.root />\n    </CarouselSliderContextProvider>\n  );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselViewport_unstable","state","contextValues","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAAsCC,6BAA6B,QAAQ,0CAA0C;AAErH;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEAJ,YAAmCG;IAEnC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/CarouselViewport/useCarouselViewport.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+/**
+ * Create the state required to render CarouselViewport.
+ *
+ * The returned state can be modified with hooks such as useCarouselViewportStyles_unstable,
+ * before being passed to renderCarouselViewport_unstable.
+ *
+ * @param props - props from this instance of CarouselViewport
+ * @param ref - reference to root HTMLDivElement of CarouselViewport
+ */ export const useCarouselViewport_unstable = (props, ref)=>{
+    const viewportRef = useCarouselContext((ctx)=>ctx.viewportRef);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(ref, viewportRef),
+            role: 'presentation',
+            // Draggable ensures dragging is supported (even if not enabled)
+            draggable: true,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib/components/CarouselViewport/useCarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/useCarouselViewport.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CarouselViewportProps, CarouselViewportState } from './CarouselViewport.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselViewport.\n *\n * The returned state can be modified with hooks such as useCarouselViewportStyles_unstable,\n * before being passed to renderCarouselViewport_unstable.\n *\n * @param props - props from this instance of CarouselViewport\n * @param ref - reference to root HTMLDivElement of CarouselViewport\n */\nexport const useCarouselViewport_unstable = (\n  props: CarouselViewportProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselViewportState => {\n  const viewportRef = useCarouselContext(ctx => ctx.viewportRef);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, viewportRef),\n        role: 'presentation',\n        // Draggable ensures dragging is supported (even if not enabled)\n        draggable: true,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useCarouselContext_unstable","useCarouselContext","useCarouselViewport_unstable","props","ref","viewportRef","ctx","components","root","always","role","draggable","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAE1F,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,cAAcJ,mBAAmBK,CAAAA,MAAOA,IAAID,WAAW;IAE7D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9BO,KAAKL,cAAcK,KAAKC;YACxBK,MAAM;YACN,gEAAgE;YAChEC,WAAW;YACX,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js

@@ -0,0 +1,25 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const carouselViewportClassNames = {
+  root: 'fui-CarouselViewport'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    B2u0y6b: "f6dzj5z",
+    a9b677: "f14z66ap"
+  }
+}, {
+  d: [".f6dzj5z{max-width:100%;}", ".f14z66ap{width:auto;}"]
+});
+/**
+ * Apply styling to the CarouselViewport slots based on the state
+ */
+export const useCarouselViewportStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);
+  return state;
+};

package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","carouselViewportClassNames","root","useStyles","B2u0y6b","a9b677","d","useCarouselViewportStyles_unstable","state","styles","className"],"sources":["useCarouselViewportStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselViewportClassNames = {\n    root: 'fui-CarouselViewport'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        maxWidth: '100%',\n        width: 'auto'\n    }\n});\n/**\n * Apply styling to the CarouselViewport slots based on the state\n */ export const useCarouselViewportStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,0BAA0B,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACvG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/pointerEvents.js

@@ -0,0 +1,58 @@
+import { carouselClassNames } from '../Carousel';
+export function pointerEventPlugin(options) {
+    let emblaApi;
+    let pointerEvent;
+    function documentDownListener(event) {
+        const targetDocument = emblaApi.containerNode().ownerDocument;
+        if (event.target) {
+            const targetNode = event.target;
+            if (targetNode.classList.contains(carouselClassNames.root) || emblaApi.containerNode().contains(targetNode)) {
+                pointerEvent = event;
+            }
+        }
+        targetDocument.removeEventListener('mousedown', documentDownListener);
+        targetDocument.removeEventListener('pointerdown', documentDownListener);
+    }
+    function pointerUpListener() {
+        const targetDocument = emblaApi.containerNode().ownerDocument;
+        targetDocument.addEventListener('mousedown', documentDownListener);
+        targetDocument.addEventListener('pointerdown', documentDownListener);
+    }
+    function clearPointerEvent() {
+        pointerEvent = undefined;
+        pointerUpListener();
+    }
+    function selectListener() {
+        if (pointerEvent) {
+            var _emblaApi_selectedScrollSnap;
+            const newIndex = (_emblaApi_selectedScrollSnap = emblaApi.selectedScrollSnap()) !== null && _emblaApi_selectedScrollSnap !== void 0 ? _emblaApi_selectedScrollSnap : 0;
+            options.onSelectViaDrag(pointerEvent, newIndex);
+        }
+        clearPointerEvent();
+    }
+    function init(emblaApiInstance, optionsHandler) {
+        emblaApi = emblaApiInstance;
+        // Initialize the listener for first mouse/pointerDown event
+        const targetDocument = emblaApi.containerNode().ownerDocument;
+        targetDocument.addEventListener('mousedown', documentDownListener);
+        targetDocument.addEventListener('pointerdown', documentDownListener);
+        emblaApi.on('pointerUp', pointerUpListener);
+        emblaApi.on('select', selectListener);
+        // Settle is used to clear pointer in cases where active index does not change
+        emblaApi.on('settle', clearPointerEvent);
+    }
+    function destroy() {
+        const targetDocument = emblaApi.containerNode().ownerDocument;
+        targetDocument.removeEventListener('mousedown', documentDownListener);
+        targetDocument.removeEventListener('pointerdown', documentDownListener);
+        emblaApi.off('pointerUp', pointerUpListener);
+        emblaApi.off('select', selectListener);
+        emblaApi.off('settle', clearPointerEvent);
+    }
+    return {
+        name: 'pointerEvent',
+        options,
+        init,
+        destroy
+    };
+}

package/lib/components/pointerEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/pointerEvents.ts"],"sourcesContent":["import type { CreatePluginType, EmblaCarouselType, OptionsHandlerType } from 'embla-carousel';\nimport { carouselClassNames } from '../Carousel';\n\nexport type PointerEventPluginOptions = {\n  onSelectViaDrag: (event: PointerEvent | MouseEvent, index: number) => void;\n};\n\nexport type PointerEventPlugin = CreatePluginType<{}, PointerEventPluginOptions>;\n\nexport function pointerEventPlugin(options: PointerEventPluginOptions): PointerEventPlugin {\n  let emblaApi: EmblaCarouselType;\n  let pointerEvent: PointerEvent | MouseEvent | undefined;\n\n  function documentDownListener(event: PointerEvent | MouseEvent) {\n    const targetDocument = emblaApi.containerNode().ownerDocument;\n\n    if (event.target) {\n      const targetNode = event.target as Element;\n      if (targetNode.classList.contains(carouselClassNames.root) || emblaApi.containerNode().contains(targetNode)) {\n        pointerEvent = event;\n      }\n    }\n\n    targetDocument.removeEventListener('mousedown', documentDownListener);\n    targetDocument.removeEventListener('pointerdown', documentDownListener);\n  }\n\n  function pointerUpListener() {\n    const targetDocument = emblaApi.containerNode().ownerDocument;\n\n    targetDocument.addEventListener('mousedown', documentDownListener);\n    targetDocument.addEventListener('pointerdown', documentDownListener);\n  }\n\n  function clearPointerEvent() {\n    pointerEvent = undefined;\n    pointerUpListener();\n  }\n\n  function selectListener() {\n    if (pointerEvent) {\n      const newIndex = emblaApi.selectedScrollSnap() ?? 0;\n\n      options.onSelectViaDrag(pointerEvent, newIndex);\n    }\n    clearPointerEvent();\n  }\n\n  function init(emblaApiInstance: EmblaCarouselType, optionsHandler: OptionsHandlerType): void {\n    emblaApi = emblaApiInstance;\n\n    // Initialize the listener for first mouse/pointerDown event\n    const targetDocument = emblaApi.containerNode().ownerDocument;\n    targetDocument.addEventListener('mousedown', documentDownListener);\n    targetDocument.addEventListener('pointerdown', documentDownListener);\n\n    emblaApi.on('pointerUp', pointerUpListener);\n    emblaApi.on('select', selectListener);\n    // Settle is used to clear pointer in cases where active index does not change\n    emblaApi.on('settle', clearPointerEvent);\n  }\n\n  function destroy(): void {\n    const targetDocument = emblaApi.containerNode().ownerDocument;\n    targetDocument.removeEventListener('mousedown', documentDownListener);\n    targetDocument.removeEventListener('pointerdown', documentDownListener);\n    emblaApi.off('pointerUp', pointerUpListener);\n    emblaApi.off('select', selectListener);\n    emblaApi.off('settle', clearPointerEvent);\n  }\n\n  return {\n    name: 'pointerEvent',\n    options,\n    init,\n    destroy,\n  };\n}\n"],"names":["carouselClassNames","pointerEventPlugin","options","emblaApi","pointerEvent","documentDownListener","event","targetDocument","containerNode","ownerDocument","target","targetNode","classList","contains","root","removeEventListener","pointerUpListener","addEventListener","clearPointerEvent","undefined","selectListener","newIndex","selectedScrollSnap","onSelectViaDrag","init","emblaApiInstance","optionsHandler","on","destroy","off","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,kBAAkB,QAAQ,cAAc;AAQjD,OAAO,SAASC,mBAAmBC,OAAkC;IACnE,IAAIC;IACJ,IAAIC;IAEJ,SAASC,qBAAqBC,KAAgC;QAC5D,MAAMC,iBAAiBJ,SAASK,aAAa,GAAGC,aAAa;QAE7D,IAAIH,MAAMI,MAAM,EAAE;YAChB,MAAMC,aAAaL,MAAMI,MAAM;YAC/B,IAAIC,WAAWC,SAAS,CAACC,QAAQ,CAACb,mBAAmBc,IAAI,KAAKX,SAASK,aAAa,GAAGK,QAAQ,CAACF,aAAa;gBAC3GP,eAAeE;YACjB;QACF;QAEAC,eAAeQ,mBAAmB,CAAC,aAAaV;QAChDE,eAAeQ,mBAAmB,CAAC,eAAeV;IACpD;IAEA,SAASW;QACP,MAAMT,iBAAiBJ,SAASK,aAAa,GAAGC,aAAa;QAE7DF,eAAeU,gBAAgB,CAAC,aAAaZ;QAC7CE,eAAeU,gBAAgB,CAAC,eAAeZ;IACjD;IAEA,SAASa;QACPd,eAAee;QACfH;IACF;IAEA,SAASI;QACP,IAAIhB,cAAc;gBACCD;YAAjB,MAAMkB,WAAWlB,CAAAA,+BAAAA,SAASmB,kBAAkB,gBAA3BnB,0CAAAA,+BAAiC;YAElDD,QAAQqB,eAAe,CAACnB,cAAciB;QACxC;QACAH;IACF;IAEA,SAASM,KAAKC,gBAAmC,EAAEC,cAAkC;QACnFvB,WAAWsB;QAEX,4DAA4D;QAC5D,MAAMlB,iBAAiBJ,SAASK,aAAa,GAAGC,aAAa;QAC7DF,eAAeU,gBAAgB,CAAC,aAAaZ;QAC7CE,eAAeU,gBAAgB,CAAC,eAAeZ;QAE/CF,SAASwB,EAAE,CAAC,aAAaX;QACzBb,SAASwB,EAAE,CAAC,UAAUP;QACtB,8EAA8E;QAC9EjB,SAASwB,EAAE,CAAC,UAAUT;IACxB;IAEA,SAASU;QACP,MAAMrB,iBAAiBJ,SAASK,aAAa,GAAGC,aAAa;QAC7DF,eAAeQ,mBAAmB,CAAC,aAAaV;QAChDE,eAAeQ,mBAAmB,CAAC,eAAeV;QAClDF,SAAS0B,GAAG,CAAC,aAAab;QAC1Bb,SAAS0B,GAAG,CAAC,UAAUT;QACvBjB,SAAS0B,GAAG,CAAC,UAAUX;IACzB;IAEA,OAAO;QACLY,MAAM;QACN5B;QACAsB;QACAI;IACF;AACF"}

package/lib/components/useEmblaCarousel.js

@@ -1,10 +1,11 @@
-import { useControllableState } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback } from '@fluentui/react-utilities';
 import EmblaCarousel from 'embla-carousel';
 import * as React from 'react';
 import { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';
 import { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';
 import Autoplay from 'embla-carousel-autoplay';
 import Fade from 'embla-carousel-fade';
+import { pointerEventPlugin } from './pointerEvents';
 const sliderClassname = `.${carouselSliderClassNames.root}`;
 const DEFAULT_EMBLA_OPTIONS = {
     containScroll: 'trimSnaps',
@@ -27,12 +28,19 @@ export function setTabsterDefault(element, isDefault) {
     }
 }
 export function useEmblaCarousel(options) {
-    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;
+    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion, onDragIndexChange } = options;
     const [activeIndex, setActiveIndex] = useControllableState({
         defaultState: options.defaultActiveIndex,
         state: options.activeIndex,
         initialState: 0
     });
+    const onDragEvent = useEventCallback((event, index)=>{
+        onDragIndexChange === null || onDragIndexChange === void 0 ? void 0 : onDragIndexChange(event, {
+            event,
+            type: 'drag',
+            index
+        });
+    });
     const emblaOptions = React.useRef({
         align,
         direction,
@@ -68,20 +76,23 @@ export function useEmblaCarousel(options) {
                 playOnInit: autoplayRef.current,
                 stopOnInteraction: !autoplayRef.current,
                 stopOnMouseEnter: true,
-                stopOnFocusIn: true,
-                rootNode: (emblaRoot)=>{
-                    var _emblaRoot_querySelector;
-                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                }
+                stopOnFocusIn: true
             })
         ];
         // Optionally add Fade plugin
         if (motion === 'fade') {
             plugins.push(Fade());
         }
+        if (watchDrag) {
+            plugins.push(pointerEventPlugin({
+                onSelectViaDrag: onDragEvent
+            }));
+        }
         return plugins;
     }, [
-        motion
+        motion,
+        onDragEvent,
+        watchDrag
     ]);
     // Listeners contains callbacks for UI elements that may require state update based on embla changes
     const listeners = React.useRef(new Set());
@@ -91,6 +102,7 @@ export function useEmblaCarousel(options) {
             listeners.current.delete(listener);
         };
     }, []);
+    const viewportRef = React.useRef(null);
     const containerRef = React.useMemo(()=>{
         let currentElement = null;
         const handleIndexChange = ()=>{
@@ -148,10 +160,13 @@ export function useEmblaCarousel(options) {
                     (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.off('reInit', handleReinit);
                     (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.destroy();
                 }
-                if (newElement) {
+                var _viewportRef_current;
+                // Use direct viewport if available, else fallback to container (includes Carousel controls).
+                const wrapperElement = (_viewportRef_current = viewportRef.current) !== null && _viewportRef_current !== void 0 ? _viewportRef_current : newElement;
+                if (wrapperElement) {
                     var _emblaApi_current4, _emblaApi_current5, _emblaApi_current6;
-                    currentElement = newElement;
-                    emblaApi.current = EmblaCarousel(newElement, {
+                    currentElement = wrapperElement;
+                    emblaApi.current = EmblaCarousel(wrapperElement, {
                         ...DEFAULT_EMBLA_OPTIONS,
                         ...emblaOptions.current
                     }, plugins);
@@ -200,7 +215,9 @@ export function useEmblaCarousel(options) {
     React.useEffect(()=>{
         var _emblaApi_current;
         var _emblaApi_current_selectedScrollSnap;
+        // Scroll to controlled values on update
         const currentActiveIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
+        emblaOptions.current.startIndex = activeIndex;
         if (activeIndex !== currentActiveIndex) {
             var _emblaApi_current1;
             (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.scrollTo(activeIndex);
@@ -212,6 +229,7 @@ export function useEmblaCarousel(options) {
         var _emblaApi_current;
         const plugins = getPlugins();
         emblaOptions.current = {
+            startIndex: emblaOptions.current.startIndex,
             align,
             direction,
             loop,
@@ -235,6 +253,7 @@ export function useEmblaCarousel(options) {
     return {
         activeIndex,
         carouselApi,
+        viewportRef,
         containerRef,
         subscribeForValues,
         enableAutoplay,