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

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js

@@ -0,0 +1,104 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavContainerClassNames = {
+  root: 'fui-CarouselNavContainer',
+  next: 'fui-CarouselNavContainer__next',
+  prev: 'fui-CarouselNavContainer__prev',
+  autoplay: 'fui-CarouselNavContainer__autoplay'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    Brf1p80: "f4d9j23",
+    a9b677: "fly5x3f",
+    Bkecrkj: "f1aehjj5"
+  },
+  next: {},
+  prev: {},
+  autoplay: {},
+  inline: {
+    B6of3ja: "f1mevb6"
+  },
+  overlay: {
+    qhf8xq: "f1euv43f",
+    B5kzvoi: "f1bu4tuc",
+    B7ck84d: "f1ewtqcl"
+  },
+  overlayWide: {
+    B5kzvoi: "f1bu4tuc"
+  },
+  nextWide: {
+    Frg6f3: ["fcgxt0o", "f1ujusj6"]
+  },
+  prevWide: {
+    t21cq0: ["f1ujusj6", "fcgxt0o"]
+  },
+  nextOverlayWide: {
+    t21cq0: ["fkujibs", "f199hnxi"]
+  },
+  prevOverlayWide: {
+    Frg6f3: ["f199hnxi", "fkujibs"]
+  },
+  autoplayOverlayWide: {
+    Frg6f3: ["f199hnxi", "fkujibs"]
+  },
+  expanded: {
+    a9b677: "fly5x3f",
+    Bqenvij: "f1l02sjl",
+    Bt984gj: "fgs5rwf",
+    Brf1p80: "f4d9j23",
+    B5kzvoi: "f1yab3r1",
+    c7y7m3: "f1ok8cdc",
+    yx0ijg: "fcq6x80",
+    v4amzz: "f1gy9d85"
+  },
+  nextOverlayExpanded: {
+    qhf8xq: "f1euv43f",
+    j35jbq: ["f8b87gs", "fedtrts"],
+    Bhzewxz: "f1i1t8d1",
+    Bz10aip: "f188r07x"
+  },
+  prevOverlayExpanded: {
+    qhf8xq: "f1euv43f",
+    oyh7mz: ["fedtrts", "f8b87gs"],
+    Bhzewxz: "f1i1t8d1",
+    Bz10aip: "f188r07x"
+  },
+  autoplayExpanded: {
+    qhf8xq: "f1euv43f",
+    B5kzvoi: "f49tsn4",
+    oyh7mz: ["fedtrts", "f8b87gs"],
+    jrapky: "f18zxyen"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f4d9j23{justify-content:center;}", ".fly5x3f{width:100%;}", ".f1aehjj5{pointer-events:none;}", ".f1mevb6{margin-top:var(--spacingVerticalM);}", ".f1euv43f{position:absolute;}", ".f1bu4tuc{bottom:var(--spacingVerticalM);}", ".f1ewtqcl{box-sizing:border-box;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f1l02sjl{height:100%;}", ".fgs5rwf{align-items:flex-end;}", ".f1yab3r1{bottom:0;}", ".f1ok8cdc>div{position:relative;}", ".fcq6x80>div{bottom:var(--spacingVerticalL);}", ".f1gy9d85>div{margin-bottom:0;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".f1i1t8d1{top:50%;}", ".f188r07x{transform:translateY(-50%);}", ".f49tsn4{bottom:-var(--spacingHorizontalXS);}", ".f18zxyen{margin-bottom:var(--spacingVerticalM);}"]
+});
+/**
+ * Apply styling to the CarouselNavContainer slots based on the state
+ */
+export const useCarouselNavContainerStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    layout
+  } = state;
+  const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
+  const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);
+  if (state.next) {
+    state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
+  }
+  if (state.prev) {
+    state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);
+  }
+  if (state.autoplay) {
+    state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useCarouselNavContainerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n    root: 'fui-CarouselNavContainer',\n    next: 'fui-CarouselNavContainer__next',\n    prev: 'fui-CarouselNavContainer__prev',\n    autoplay: 'fui-CarouselNavContainer__autoplay'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        width: '100%',\n        pointerEvents: 'none'\n    },\n    next: {},\n    prev: {},\n    autoplay: {},\n    inline: {\n        marginTop: tokens.spacingVerticalM\n    },\n    overlay: {\n        position: 'absolute',\n        bottom: tokens.spacingVerticalM,\n        boxSizing: 'border-box'\n    },\n    overlayWide: {\n        bottom: tokens.spacingVerticalM\n    },\n    nextWide: {\n        marginLeft: 'auto'\n    },\n    prevWide: {\n        marginRight: 'auto'\n    },\n    nextOverlayWide: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    prevOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    autoplayOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    expanded: {\n        width: '100%',\n        height: '100%',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        bottom: 0,\n        '> div': {\n            position: 'relative',\n            bottom: tokens.spacingVerticalL,\n            marginBottom: 0\n        }\n    },\n    nextOverlayExpanded: {\n        position: 'absolute',\n        right: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    prevOverlayExpanded: {\n        position: 'absolute',\n        left: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    autoplayExpanded: {\n        position: 'absolute',\n        bottom: `-${tokens.spacingHorizontalXS}`,\n        left: tokens.spacingHorizontalM,\n        marginBottom: tokens.spacingVerticalM\n    }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n    'use no memo';\n    const { layout } = state;\n    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n    if (state.next) {\n        state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n    }\n    if (state.prev) {\n        state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n    }\n    if (state.autoplay) {\n        state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';
+import { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';
+import { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';
+/**
+ * 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);
+    return renderCarouselNavImageButton_unstable(state);
+});
+CarouselNavImageButton.displayName = 'CarouselNavImageButton';

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +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"}

package/lib/components/CarouselNavImageButton/index.js

@@ -0,0 +1,5 @@
+export * from './CarouselNavImageButton';
+export * from './CarouselNavImageButton.types';
+export * from './renderCarouselNavImageButton';
+export * from './useCarouselNavImageButton';
+export * from './useCarouselNavImageButtonStyles.styles';

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

@@ -0,0 +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"}

package/lib/components/CarouselNavImageButton/renderCarouselNavImageButton.js

@@ -0,0 +1,10 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CarouselNavImageButton
+ */ export const renderCarouselNavImageButton_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(state.image, {})
+    });
+};

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

@@ -0,0 +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"}

package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js

@@ -0,0 +1,76 @@
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import { useTabsterAttributes } from '@fluentui/react-tabster';
+import * as React from 'react';
+import { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+/**
+ * Create the state required to render CarouselNavImageButton.
+ *
+ * The returned state can be modified with hooks such as useCarouselNavImageButtonStyles_unstable,
+ * before being passed to renderCarouselNavImageButton_unstable.
+ *
+ * @param props - props from this instance of CarouselNavImageButton
+ * @param ref - reference to root HTMLButtonElement | HTMLAnchorElement of CarouselNavImageButton
+ */ export const useCarouselNavImageButton_unstable = (props, ref)=>{
+    const { onClick, as = 'button' } = props;
+    const index = useCarouselNavIndexContext();
+    const selectPageByIndex = useCarouselContext((ctx)=>ctx.selectPageByIndex);
+    const selected = useCarouselContext((ctx)=>ctx.activeIndex === index);
+    const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
+    const handleClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && isHTMLElement(event.target)) {
+            selectPageByIndex(event, index);
+        }
+    });
+    const defaultTabProps = useTabsterAttributes({
+        focusable: {
+            isDefault: selected
+        }
+    });
+    const buttonRef = React.useRef();
+    const _carouselButton = slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
+        elementType: 'button',
+        defaultProps: {
+            ref: useMergedRefs(ref, buttonRef),
+            role: 'tab',
+            type: 'button',
+            'aria-selected': selected,
+            ...defaultTabProps
+        }
+    });
+    useIsomorphicLayoutEffect(()=>{
+        return subscribeForValues((data)=>{
+            const controlList = data.groupIndexList[index];
+            const _controlledSlideIds = controlList.map((slideIndex)=>{
+                return data.slideNodes[slideIndex].id;
+            }).join(' ');
+            if (buttonRef.current) {
+                buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);
+            }
+        });
+    }, [
+        subscribeForValues,
+        index
+    ]);
+    // Override onClick
+    _carouselButton.onClick = handleClick;
+    const image = slot.always(getIntrinsicElementProps('img', {
+        'aria-hidden': true,
+        alt: '',
+        role: 'presentation',
+        ...props.image
+    }), {
+        elementType: 'img'
+    });
+    return {
+        components: {
+            root: 'button',
+            image: 'img'
+        },
+        root: _carouselButton,
+        image,
+        selected
+    };
+};

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

@@ -0,0 +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"}

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

@@ -0,0 +1,85 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavImageButtonClassNames = {
+  root: 'fui-CarouselNavImageButton',
+  image: 'fui-CarouselNavImageButton__image'
+};
+const imageButtonSize = 40;
+const selectedImageButtonSize = 48;
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    B7ck84d: "f1e4lqlz",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1c5fvqg",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f186qr3g",
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fq9zq91",
+    a9b677: "feqmc2u",
+    Bqenvij: "fbhnoac",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    eoavqd: "f8491dx"
+  },
+  image: {
+    a9b677: "feqmc2u",
+    Bqenvij: "fbhnoac",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fq9zq91"
+  },
+  selected: {
+    a9b677: "f124akge",
+    Bqenvij: "ff2sm71"
+  }
+}, {
+  d: [".f1e4lqlz{box-sizing:content-box;}", [".f1c5fvqg{padding:0px;}", {
+    p: -1
+  }], [".f186qr3g{margin:0 var(--spacingHorizontalXS);}", {
+    p: -1
+  }], ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], ".f124akge{width:48px;}", ".ff2sm71{height:48px;}"],
+  h: [".f8491dx:hover{cursor:pointer;}"]
+});
+/**
+ * Apply styling to the CarouselNavImageButton slots based on the state
+ */
+export const useCarouselNavImageButtonStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    selected
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);
+  if (state.image) {
+    var _state_image;
+    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/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n    root: 'fui-CarouselNavImageButton',\n    image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxSizing: 'content-box',\n        padding: '0px',\n        margin: `0 ${tokens.spacingHorizontalXS}`,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        borderRadius: tokens.borderRadiusSmall,\n        width: imageButtonSize + 'px',\n        height: imageButtonSize + 'px',\n        overflow: 'hidden',\n        ':hover': {\n            cursor: 'pointer'\n        }\n    },\n    image: {\n        width: imageButtonSize + 'px',\n        height: imageButtonSize + 'px',\n        borderRadius: tokens.borderRadiusSmall\n    },\n    selected: {\n        width: selectedImageButtonSize + 'px',\n        height: selectedImageButtonSize + 'px'\n    }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const { selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n    if (state.image) {\n        var _state_image;\n        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);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE,4BAA4B;EAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,KAAA;IAAAwB,MAAA;IAAAC,OAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;IAAAN,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAM,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1BgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;EAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;IACb,IAAIsC,YAAY;IAChBH,KAAK,CAACnC,KAAK,CAACqC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;EAC/N;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselSlider/CarouselSlider.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useCarouselSlider_unstable } from './useCarouselSlider';
+import { renderCarouselSlider_unstable } from './renderCarouselSlider';
+import { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';
+import { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';
+/**
+ * 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);
+    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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +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\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & Pick<CarouselSliderProps, 'cardFocus'>;\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n"],"names":[],"rangeMappings":"","mappings":"AA6BA,WAAgF"}

package/lib/components/CarouselSlider/CarouselSliderContext.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+const carouselSliderContext = React.createContext(undefined);
+export const carouselSliderContextDefaultValue = {
+    cardFocus: false
+};
+export const useCarouselSliderContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(carouselSliderContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselSliderContextDefaultValue;
+};
+export const CarouselSliderContextProvider = carouselSliderContext.Provider;
+export function useCarouselSliderContextValues_unstable(state) {
+    const { cardFocus } = state;
+    const carouselSlider = React.useMemo(()=>({
+            cardFocus
+        }), [
+        cardFocus
+    ]);
+    return {
+        carouselSlider
+    };
+}

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

@@ -0,0 +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\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;IAEtB,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}

package/lib/components/CarouselSlider/index.js

@@ -0,0 +1,5 @@
+export * from './CarouselSlider';
+export * from './CarouselSlider.types';
+export * from './renderCarouselSlider';
+export * from './useCarouselSlider';
+export * from './useCarouselSliderStyles.styles';

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

@@ -0,0 +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"}

package/lib/components/CarouselSlider/renderCarouselSlider.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 './CarouselSliderContext';
+/**
+ * Render the final JSX of CarouselSlider
+ */ export const renderCarouselSlider_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(CarouselSliderContextProvider, {
+        value: contextValues.carouselSlider,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

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

@@ -0,0 +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"}

package/lib/components/CarouselSlider/useCarouselSlider.js

@@ -0,0 +1,36 @@
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+/**
+ * Create the state required to render CarouselSlider.
+ *
+ * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,
+ * before being passed to renderCarouselSlider_unstable.
+ *
+ * @param props - props from this instance of CarouselSlider
+ * @param ref - reference to root HTMLDivElement of CarouselSlider
+ */ export const useCarouselSlider_unstable = (props, ref)=>{
+    const { cardFocus = false } = props;
+    const focusableGroupAttr = useArrowNavigationGroup({
+        circular: false,
+        axis: 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+    const focusProps = cardFocus ? focusableGroupAttr : {};
+    return {
+        cardFocus,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role: 'group',
+            ...props,
+            ...focusProps
+        }), {
+            elementType: 'div'
+        })
+    };
+};

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

@@ -0,0 +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';\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 focusableGroupAttr = useArrowNavigationGroup({\n    circular: false, // We don't want circular focus here, it's confusing in carousel.\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","useCarouselSlider_unstable","props","ref","cardFocus","focusableGroupAttr","circular","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;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,qBAAqBL,wBAAwB;QACjDM,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaN,YAAYC,qBAAqB,CAAC;IAErD,OAAO;QACLD;QACAO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,KAAKe,MAAM,CACfhB,yBAAyB,OAAO;YAC9BM;YACAW,MAAM;YACN,GAAGZ,KAAK;YACR,GAAGQ,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

@@ -0,0 +1,26 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const carouselSliderClassNames = {
+  root: 'fui-CarouselSlider'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Eiaeu8: "f1115ve7"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1115ve7{overflow-anchor:none;}"]
+});
+/**
+ * Apply styling to the CarouselSlider slots based on the state
+ */
+export const useCarouselSliderStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useCarouselSliderStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","carouselSliderClassNames","root","useStyles","mc9l5x","Eiaeu8","d","useCarouselSliderStyles_unstable","state","styles","className"],"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselSliderClassNames = {\n    root: 'fui-CarouselSlider'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        overflowAnchor: 'none'\n    }\n});\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */ export const useCarouselSliderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,wBAAwB,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}