@fluentui/react-carousel 9.2.0 → 9.3.1

package/lib-commonjs/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":["CarouselNavImageButton","React","forwardRef","props","ref","state","useCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","renderCarouselNavImageButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2CAE4B;8CACG;uDACG;AAOlD,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/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":["CarouselNavImageButton","React","forwardRef","props","ref","state","useCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCustomStyleHook_unstable","renderCarouselNavImageButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;2CAE4B;8CACG;uDACG;qCAEb;AAMrC,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/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"}
+{"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"}

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

package/lib-commonjs/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":["renderCarouselNavImageButton_unstable","state","assertSlots","_jsx","root","image"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACF,MAAMI,KAAK,EAAA,CAAA;;AAGlB"}
+{"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":["renderCarouselNavImageButton_unstable","state","assertSlots","_jsx","root","image"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACF,MAAMI,KAAK,EAAA,CAAA;;AAGlB"}

package/lib-commonjs/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":["useCarouselNavImageButton_unstable","props","ref","onClick","as","index","useCarouselNavIndexContext","selectPageByIndex","useCarouselContext","ctx","selected","activeIndex","subscribeForValues","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","buttonRef","React","useRef","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","useMergedRefs","role","type","useIsomorphicLayoutEffect","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;2BAzBwE;gCAQ9E;8BAC8B;iEACd;yCAEoB;iCACuB;AAY3D,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQC,IAAAA,mDAAAA;IACd,MAAMC,oBAAoBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,iBAAiB;IACzE,MAAMG,WAAWF,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIE,WAAW,KAAKN;IAC/D,MAAMO,qBAAqBJ,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACnEZ,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUY;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1DX,kBAAkBQ,OAAOV;QAC3B;IACF;IAEA,MAAMc,kBAAkBC,IAAAA,kCAAAA,EAAqB;QAC3CC,WAAW;YAAEC,WAAWZ;QAAS;IACnC;IAEA,MAAMa,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,kBAAkBC,oBAAAA,CAAKC,MAAM,CACjCC,IAAAA,wCAAAA,EAAyBzB,IAAI0B,IAAAA,6BAAAA,EAAmB7B,MAAMG,EAAE,EAAEH,SAC1D;QACE8B,aAAa;QACbC,cAAc;YACZ9B,KAAK+B,IAAAA,6BAAAA,EAAc/B,KAAKqB;YACxBW,MAAM;YACNC,MAAM;YACN,iBAAiBzB;YACjB,GAAGS,eAAe;QACpB;IACF;IAGFiB,IAAAA,yCAAAA,EAA0B;QACxB,OAAOxB,mBAAmByB,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAAClC,MAAM;YAC9C,MAAMmC,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAItB,UAAUuB,OAAO,EAAE;gBACrBvB,UAAUuB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAAC5B;QAAoBP;KAAM;IAE9B,mBAAmB;IACnBqB,gBAAgBvB,OAAO,GAAGU;IAE1B,MAAMmC,QAAQrB,oBAAAA,CAAKC,MAAM,CACvBC,IAAAA,wCAAAA,EAAyB,OAAO;QAC9B,eAAe;QACfoB,KAAK;QACLf,MAAM;QACN,GAAGjC,MAAM+C,KAAK;IAChB,IACA;QAAEjB,aAAa;IAAM;IAGvB,OAAO;QACLmB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMzB;QACNsB;QACAtC;IACF;AACF"}
+{"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":["useCarouselNavImageButton_unstable","props","ref","onClick","as","index","useCarouselNavIndexContext","selectPageByIndex","useCarouselContext","ctx","selected","activeIndex","subscribeForValues","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","buttonRef","React","useRef","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","useMergedRefs","role","type","useIsomorphicLayoutEffect","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;2BAzBwE;gCAQ9E;8BAC8B;iEACd;yCAEoB;iCACuB;AAY3D,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQC,IAAAA,mDAAAA;IACd,MAAMC,oBAAoBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,iBAAiB;IACzE,MAAMG,WAAWF,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIE,WAAW,KAAKN;IAC/D,MAAMO,qBAAqBJ,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACnEZ,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUY;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1DX,kBAAkBQ,OAAOV;QAC3B;IACF;IAEA,MAAMc,kBAAkBC,IAAAA,kCAAAA,EAAqB;QAC3CC,WAAW;YAAEC,WAAWZ;QAAS;IACnC;IAEA,MAAMa,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,kBAAkBC,oBAAAA,CAAKC,MAAM,CACjCC,IAAAA,wCAAAA,EAAyBzB,IAAI0B,IAAAA,6BAAAA,EAAmB7B,MAAMG,EAAE,EAAEH,SAC1D;QACE8B,aAAa;QACbC,cAAc;YACZ9B,KAAK+B,IAAAA,6BAAAA,EAAc/B,KAAKqB;YACxBW,MAAM;YACNC,MAAM;YACN,iBAAiBzB;YACjB,GAAGS,eAAe;QACpB;IACF;IAGFiB,IAAAA,yCAAAA,EAA0B;QACxB,OAAOxB,mBAAmByB,CAAAA;YACxB,MAAMC,cAAcD,KAAKE,cAAc,CAAClC,MAAM;YAC9C,MAAMmC,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAItB,UAAUuB,OAAO,EAAE;gBACrBvB,UAAUuB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAAC5B;QAAoBP;KAAM;IAE9B,mBAAmB;IACnBqB,gBAAgBvB,OAAO,GAAGU;IAE1B,MAAMmC,QAAQrB,oBAAAA,CAAKC,MAAM,CACvBC,IAAAA,wCAAAA,EAAyB,OAAO;QAC9B,eAAe;QACfoB,KAAK;QACLf,MAAM;QACN,GAAGjC,MAAM+C,KAAK;IAChB,IACA;QAAEjB,aAAa;IAAM;IAGvB,OAAO;QACLmB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMzB;QACNsB;QACAtC;IACF;AACF"}

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

@@ -129,4 +129,4 @@ const useCarouselNavImageButtonStyles_unstable = (state)=>{
         state.image.className = (0, _react.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-commonjs/components/CarouselSlider/CarouselSlider.js

@@ -14,13 +14,12 @@ const _useCarouselSlider = require("./useCarouselSlider");
 const _renderCarouselSlider = require("./renderCarouselSlider");
 const _useCarouselSliderStylesstyles = require("./useCarouselSliderStyles.styles");
 const _CarouselSliderContext = require("./CarouselSliderContext");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const CarouselSlider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarouselSlider.useCarouselSlider_unstable)(props, ref);
     (0, _useCarouselSliderStylesstyles.useCarouselSliderStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselSliderStyles_unstable')(state);
     const context = (0, _CarouselSliderContext.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 (0, _renderCarouselSlider.renderCarouselSlider_unstable)(state, context);
 });
 CarouselSlider.displayName = 'CarouselSlider';

package/lib-commonjs/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":["CarouselSlider","React","forwardRef","props","ref","state","useCarouselSlider_unstable","useCarouselSliderStyles_unstable","context","useCarouselSliderContextValues_unstable","renderCarouselSlider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;mCAGoB;sCACG;+CACG;uCAEO;AAKjD,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IAEjC,MAAMG,UAAUC,IAAAA,8DAAAA,EAAwCJ;IACxD,8HAA8H;IAC9H,wGAAwG;IACxG,0EAA0E;IAC1E,OAAOK,IAAAA,mDAAAA,EAA8BL,OAAOG;AAC9C;AAEAR,eAAeW,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":["CarouselSlider","React","forwardRef","props","ref","state","useCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCustomStyleHook_unstable","context","useCarouselSliderContextValues_unstable","renderCarouselSlider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;mCAGoB;sCACG;+CACG;uCAEO;qCACZ;AAKrC,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,MAAMI,UAAUC,IAAAA,8DAAAA,EAAwCL;IACxD,OAAOM,IAAAA,mDAAAA,EAA8BN,OAAOI;AAC9C;AAEAT,eAAeY,WAAW,GAAG"}

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

package/lib-commonjs/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":["CarouselSliderContextProvider","carouselSliderContextDefaultValue","useCarouselSliderContext","useCarouselSliderContextValues_unstable","carouselSliderContext","React","createContext","undefined","cardFocus","useContext","Provider","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,6BAAAA;eAAAA;;IAPAC,iCAAAA;eAAAA;;IAIAC,wBAAAA;eAAAA;;IAYGC,uCAAAA;eAAAA;;;;iEArBO;AAGvB,MAAMC,sCAAwBC,OAAMC,aAAa,CAAyCC;AAEnF,MAAMN,oCAAgE;IAC3EO,WAAW;AACb;AAEO,MAAMN,2BAA2B;QACtCG;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,sBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAA2CJ;AAAgC;AAEtE,MAAMD,gCAAgCI,sBAAsBM,QAAQ;AASpE,SAASP,wCAAwCQ,KAA0B;IAChF,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,iBAAiBP,OAAMQ,OAAO,CAClC,IAAO,CAAA;YACLL;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEI;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":["CarouselSliderContextProvider","carouselSliderContextDefaultValue","useCarouselSliderContext","useCarouselSliderContextValues_unstable","carouselSliderContext","React","createContext","undefined","cardFocus","useContext","Provider","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,6BAAAA;eAAAA;;IAPAC,iCAAAA;eAAAA;;IAIAC,wBAAAA;eAAAA;;IAYGC,uCAAAA;eAAAA;;;;iEArBO;AAGvB,MAAMC,sCAAwBC,OAAMC,aAAa,CAAyCC;AAEnF,MAAMN,oCAAgE;IAC3EO,WAAW;AACb;AAEO,MAAMN,2BAA2B;QACtCG;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,sBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAA2CJ;AAAgC;AAEtE,MAAMD,gCAAgCI,sBAAsBM,QAAQ;AASpE,SAASP,wCAAwCQ,KAA0B;IAChF,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,iBAAiBP,OAAMQ,OAAO,CAClC,IAAO,CAAA;YACLL;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEI;IAAe;AAC1B"}

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

package/lib-commonjs/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":["renderCarouselSlider_unstable","state","contextValues","assertSlots","_jsx","CarouselSliderContextProvider","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;uCAE+C;AAKpE,MAAMA,gCAAgC,CAC3CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAiCF;IAEjC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,oDAAAA,EAAAA;QAA8BC,OAAOJ,cAAcK,cAAc;kBAChE,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
+{"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":["renderCarouselSlider_unstable","state","contextValues","assertSlots","_jsx","CarouselSliderContextProvider","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;uCAE+C;AAKpE,MAAMA,gCAAgC,CAC3CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAiCF;IAEjC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,oDAAAA,EAAAA;QAA8BC,OAAOJ,cAAcK,cAAc;kBAChE,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}

package/lib-commonjs/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":["useCarouselSlider_unstable","props","ref","cardFocus","circular","useCarouselContext","ctx","focusableGroupAttr","useArrowNavigationGroup","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;gCAhBkC;iEACxB;8BAGiB;iCAC0B;AAW3D,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,QAAQ;IACvD,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;QACjDJ;QACAK,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaT,YAAYI,qBAAqB,CAAC;IAErD,OAAO;QACLJ;QACAU,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9Bf;YACAgB,MAAM;YACN,GAAGjB,KAAK;YACR,GAAGW,UAAU;QACf,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
+{"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":["useCarouselSlider_unstable","props","ref","cardFocus","circular","useCarouselContext","ctx","focusableGroupAttr","useArrowNavigationGroup","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;gCAhBkC;iEACxB;8BAGiB;iCAC0B;AAW3D,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,QAAQ;IACvD,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;QACjDJ;QACAK,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaT,YAAYI,qBAAqB,CAAC;IAErD,OAAO;QACLJ;QACAU,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9Bf;YACAgB,MAAM;YACN,GAAGjB,KAAK;YACR,GAAGW,UAAU;QACf,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselViewport", {
+    enumerable: true,
+    get: function() {
+        return CarouselViewport;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCarouselViewport = require("./useCarouselViewport");
+const _renderCarouselViewport = require("./renderCarouselViewport");
+const _useCarouselViewportStylesstyles = require("./useCarouselViewportStyles.styles");
+const _CarouselSliderContext = require("../CarouselSlider/CarouselSliderContext");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const CarouselViewport = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCarouselViewport.useCarouselViewport_unstable)(props, ref);
+    (0, _useCarouselViewportStylesstyles.useCarouselViewportStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselViewportStyles_unstable')(state);
+    const context = (0, _CarouselSliderContext.useCarouselSliderContextValues_unstable)(state);
+    return (0, _renderCarouselViewport.renderCarouselViewport_unstable)(state, context);
+});
+CarouselViewport.displayName = 'CarouselViewport';

package/lib-commonjs/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":["CarouselViewport","React","forwardRef","props","ref","state","useCarouselViewport_unstable","useCarouselViewportStyles_unstable","useCustomStyleHook_unstable","context","useCarouselSliderContextValues_unstable","renderCarouselViewport_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEsB;wCACG;iDACG;uCAEK;qCACZ;AAKrC,MAAMA,mBAAAA,WAAAA,GAA+DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQC,IAAAA,iDAAAA,EAA6BH,OAAOC;IAElDG,IAAAA,mEAAAA,EAAmCF;IACnCG,IAAAA,gDAAAA,EAA4B,sCAAsCH;IAElE,MAAMI,UAAUC,IAAAA,8DAAAA,EAAwCL;IAExD,OAAOM,IAAAA,uDAAAA,EAAgCN,OAAOI;AAChD;AAEAT,iBAAiBY,WAAW,GAAG"}

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

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

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

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

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

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

package/lib-commonjs/components/CarouselViewport/renderCarouselViewport.js

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

package/lib-commonjs/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":["renderCarouselViewport_unstable","state","contextValues","assertSlots","_jsx","CarouselSliderContextProvider","value","carouselSlider","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;uCAE+C;AAKpE,MAAMA,kCAAkC,CAC7CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAmCF;IAEnC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,oDAAAA,EAAAA;QAA8BC,OAAOJ,cAAcK,cAAc;kBAChE,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}

package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCarouselViewport_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCarouselViewport_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _CarouselContext = require("../CarouselContext");
+const useCarouselViewport_unstable = (props, ref)=>{
+    const viewportRef = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.viewportRef);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref: (0, _reactutilities.useMergedRefs)(ref, viewportRef),
+            role: 'presentation',
+            // Draggable ensures dragging is supported (even if not enabled)
+            draggable: true,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib-commonjs/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":["useCarouselViewport_unstable","props","ref","viewportRef","useCarouselContext","ctx","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","draggable","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACuC;iCAEI;AAW3D,MAAMA,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,cAAcC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,WAAW;IAE7D,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BR,KAAKS,IAAAA,6BAAAA,EAAcT,KAAKC;YACxBS,MAAM;YACN,gEAAgE;YAChEC,WAAW;YACX,GAAGZ,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF"}

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    carouselViewportClassNames: function() {
+        return carouselViewportClassNames;
+    },
+    useCarouselViewportStyles_unstable: function() {
+        return useCarouselViewportStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const carouselViewportClassNames = {
+    root: 'fui-CarouselViewport'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        B2u0y6b: "f6dzj5z",
+        a9b677: "f14z66ap"
+    }
+}, {
+    d: [
+        ".f6dzj5z{max-width:100%;}",
+        ".f14z66ap{width:auto;}"
+    ]
+});
+const useCarouselViewportStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(carouselViewportClassNames.root, styles.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["carouselViewportClassNames","useCarouselViewportStyles_unstable","root","useStyles","__styles","B2u0y6b","a9b677","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,0BAA0B;eAA1BA;;IAaIC,kCAAkC;eAAlCA;;;uBAdwB;AAClC,MAAMD,6BAA6B;IACtCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAQX,MAAMN,qCAAsCO,CAAAA;IACnD;IACA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGC,IAAAA,mBAAY,EAACX,2BAA2BE,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IACtG,OAAOF;AACX"}

package/lib-commonjs/components/pointerEvents.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "pointerEventPlugin", {
+    enumerable: true,
+    get: function() {
+        return pointerEventPlugin;
+    }
+});
+const _Carousel = require("../Carousel");
+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(_Carousel.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-commonjs/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":["pointerEventPlugin","options","emblaApi","pointerEvent","documentDownListener","event","targetDocument","containerNode","ownerDocument","target","targetNode","classList","contains","carouselClassNames","root","removeEventListener","pointerUpListener","addEventListener","clearPointerEvent","undefined","selectListener","newIndex","selectedScrollSnap","onSelectViaDrag","init","emblaApiInstance","optionsHandler","on","destroy","off","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASgBA;;;eAAAA;;;0BARmB;AAQ5B,SAASA,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,CAACC,4BAAAA,CAAmBC,IAAI,KAAKZ,SAASK,aAAa,GAAGK,QAAQ,CAACF,aAAa;gBAC3GP,eAAeE;YACjB;QACF;QAEAC,eAAeS,mBAAmB,CAAC,aAAaX;QAChDE,eAAeS,mBAAmB,CAAC,eAAeX;IACpD;IAEA,SAASY;QACP,MAAMV,iBAAiBJ,SAASK,aAAa,GAAGC,aAAa;QAE7DF,eAAeW,gBAAgB,CAAC,aAAab;QAC7CE,eAAeW,gBAAgB,CAAC,eAAeb;IACjD;IAEA,SAASc;QACPf,eAAegB;QACfH;IACF;IAEA,SAASI;QACP,IAAIjB,cAAc;gBACCD;YAAjB,MAAMmB,WAAWnB,CAAAA,+BAAAA,SAASoB,kBAAkB,EAAA,MAAA,QAA3BpB,iCAAAA,KAAAA,IAAAA,+BAAiC;YAElDD,QAAQsB,eAAe,CAACpB,cAAckB;QACxC;QACAH;IACF;IAEA,SAASM,KAAKC,gBAAmC,EAAEC,cAAkC;QACnFxB,WAAWuB;QAEX,4DAA4D;QAC5D,MAAMnB,iBAAiBJ,SAASK,aAAa,GAAGC,aAAa;QAC7DF,eAAeW,gBAAgB,CAAC,aAAab;QAC7CE,eAAeW,gBAAgB,CAAC,eAAeb;QAE/CF,SAASyB,EAAE,CAAC,aAAaX;QACzBd,SAASyB,EAAE,CAAC,UAAUP;QACtB,8EAA8E;QAC9ElB,SAASyB,EAAE,CAAC,UAAUT;IACxB;IAEA,SAASU;QACP,MAAMtB,iBAAiBJ,SAASK,aAAa,GAAGC,aAAa;QAC7DF,eAAeS,mBAAmB,CAAC,aAAaX;QAChDE,eAAeS,mBAAmB,CAAC,eAAeX;QAClDF,SAAS2B,GAAG,CAAC,aAAab;QAC1Bd,SAAS2B,GAAG,CAAC,UAAUT;QACvBlB,SAAS2B,GAAG,CAAC,UAAUX;IACzB;IAEA,OAAO;QACLY,MAAM;QACN7B;QACAuB;QACAI;IACF;AACF"}

package/lib-commonjs/components/useEmblaCarousel.js

@@ -28,6 +28,7 @@ const _useCarouselCardStylesstyles = require("./CarouselCard/useCarouselCardStyl
 const _useCarouselSliderStylesstyles = require("./CarouselSlider/useCarouselSliderStyles.styles");
 const _emblacarouselautoplay = /*#__PURE__*/ _interop_require_default._(require("embla-carousel-autoplay"));
 const _emblacarouselfade = /*#__PURE__*/ _interop_require_default._(require("embla-carousel-fade"));
+const _pointerEvents = require("./pointerEvents");
 const sliderClassname = `.${_useCarouselSliderStylesstyles.carouselSliderClassNames.root}`;
 const DEFAULT_EMBLA_OPTIONS = {
     containScroll: 'trimSnaps',
@@ -50,12 +51,19 @@ function setTabsterDefault(element, isDefault) {
     }
 }
 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] = (0, _reactutilities.useControllableState)({
         defaultState: options.defaultActiveIndex,
         state: options.activeIndex,
         initialState: 0
     });
+    const onDragEvent = (0, _reactutilities.useEventCallback)((event, index)=>{
+        onDragIndexChange === null || onDragIndexChange === void 0 ? void 0 : onDragIndexChange(event, {
+            event,
+            type: 'drag',
+            index
+        });
+    });
     const emblaOptions = _react.useRef({
         align,
         direction,
@@ -91,20 +99,23 @@ 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((0, _emblacarouselfade.default)());
         }
+        if (watchDrag) {
+            plugins.push((0, _pointerEvents.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());
@@ -114,6 +125,26 @@ function useEmblaCarousel(options) {
             listeners.current.delete(listener);
         };
     }, []);
+    const handleReinit = (0, _reactutilities.useEventCallback)(()=>{
+        var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3;
+        var _emblaApi_current_slideNodes;
+        const nodes = (_emblaApi_current_slideNodes = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.slideNodes()) !== null && _emblaApi_current_slideNodes !== void 0 ? _emblaApi_current_slideNodes : [];
+        var _emblaApi_current_internalEngine_slideRegistry;
+        const groupIndexList = (_emblaApi_current_internalEngine_slideRegistry = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.internalEngine().slideRegistry) !== null && _emblaApi_current_internalEngine_slideRegistry !== void 0 ? _emblaApi_current_internalEngine_slideRegistry : [];
+        const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;
+        var _emblaApi_current_selectedScrollSnap;
+        const data = {
+            navItemsCount,
+            activeIndex: (_emblaApi_current_selectedScrollSnap = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0,
+            groupIndexList,
+            slideNodes: nodes
+        };
+        (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.scrollTo(activeIndex, false);
+        for (const listener of listeners.current){
+            listener(data);
+        }
+    });
+    const viewportRef = _react.useRef(null);
     const containerRef = _react.useMemo(()=>{
         let currentElement = null;
         const handleIndexChange = ()=>{
@@ -129,24 +160,6 @@ function useEmblaCarousel(options) {
             });
             setActiveIndex(newIndex);
         };
-        const handleReinit = ()=>{
-            var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
-            var _emblaApi_current_slideNodes;
-            const nodes = (_emblaApi_current_slideNodes = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.slideNodes()) !== null && _emblaApi_current_slideNodes !== void 0 ? _emblaApi_current_slideNodes : [];
-            var _emblaApi_current_internalEngine_slideRegistry;
-            const groupIndexList = (_emblaApi_current_internalEngine_slideRegistry = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.internalEngine().slideRegistry) !== null && _emblaApi_current_internalEngine_slideRegistry !== void 0 ? _emblaApi_current_internalEngine_slideRegistry : [];
-            const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;
-            var _emblaApi_current_selectedScrollSnap;
-            const data = {
-                navItemsCount,
-                activeIndex: (_emblaApi_current_selectedScrollSnap = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0,
-                groupIndexList,
-                slideNodes: nodes
-            };
-            for (const listener of listeners.current){
-                listener(data);
-            }
-        };
         const handleVisibilityChange = ()=>{
             var _emblaApi_current, _emblaApi_current1;
             const cardElements = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.slideNodes();
@@ -171,10 +184,13 @@ 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 = (0, _emblacarousel.default)(newElement, {
+                    currentElement = wrapperElement;
+                    emblaApi.current = (0, _emblacarousel.default)(wrapperElement, {
                         ...DEFAULT_EMBLA_OPTIONS,
                         ...emblaOptions.current
                     }, plugins);
@@ -186,7 +202,8 @@ function useEmblaCarousel(options) {
         };
     }, [
         getPlugins,
-        setActiveIndex
+        setActiveIndex,
+        handleReinit
     ]);
     const carouselApi = _react.useMemo(()=>({
             scrollToElement: (element, jump)=>{
@@ -221,12 +238,17 @@ function useEmblaCarousel(options) {
             }
         }), []);
     _react.useEffect(()=>{
-        var _emblaApi_current;
+        var _emblaApi_current, _emblaApi_current_slideNodes, _emblaApi_current1;
         var _emblaApi_current_selectedScrollSnap;
+        // Scroll to controlled values on update
+        // If active index is out of bounds, re-init will handle instead
         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;
-        if (activeIndex !== currentActiveIndex) {
-            var _emblaApi_current1;
-            (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.scrollTo(activeIndex);
+        var _emblaApi_current_slideNodes_length;
+        const slideLength = (_emblaApi_current_slideNodes_length = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : (_emblaApi_current_slideNodes = _emblaApi_current1.slideNodes()) === null || _emblaApi_current_slideNodes === void 0 ? void 0 : _emblaApi_current_slideNodes.length) !== null && _emblaApi_current_slideNodes_length !== void 0 ? _emblaApi_current_slideNodes_length : 0;
+        emblaOptions.current.startIndex = activeIndex;
+        if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {
+            var _emblaApi_current2;
+            (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.scrollTo(activeIndex);
         }
     }, [
         activeIndex
@@ -235,6 +257,7 @@ function useEmblaCarousel(options) {
         var _emblaApi_current;
         const plugins = getPlugins();
         emblaOptions.current = {
+            startIndex: emblaOptions.current.startIndex,
             align,
             direction,
             loop,
@@ -258,6 +281,7 @@ function useEmblaCarousel(options) {
     return {
         activeIndex,
         carouselApi,
+        viewportRef,
         containerRef,
         subscribeForValues,
         enableAutoplay,