Initial commit

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useCarouselCard_unstable } from './useCarouselCard';
+import { renderCarouselCard_unstable } from './renderCarouselCard';
+import { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The defining wrapper of a carousel's indexed content, they will take up the full
+ * viewport of CarouselSlider or div wrapper,
+ * users may place multiple items within this Card if desired, with consideration of viewport width.
+ *
+ * Clickable actions within the content area are available via mouse and tab as expected,
+ * non-active card content will be set to inert until moved to active card.
+ */ export const CarouselCard = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselCard_unstable(props, ref);
+    useCarouselCardStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);
+    return renderCarouselCard_unstable(state);
+});
+CarouselCard.displayName = 'CarouselCard';

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselCard_unstable } from './useCarouselCard';\nimport { renderCarouselCard_unstable } from './renderCarouselCard';\nimport { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\nimport type { CarouselCardProps } from './CarouselCard.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The defining wrapper of a carousel's indexed content, they will take up the full\n * viewport of CarouselSlider or div wrapper,\n * users may place multiple items within this Card if desired, with consideration of viewport width.\n *\n * Clickable actions within the content area are available via mouse and tab as expected,\n * non-active card content will be set to inert until moved to active card.\n */\nexport const CarouselCard: ForwardRefComponent<CarouselCardProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselCard_unstable(props, ref);\n\n  useCarouselCardStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);\n\n  return renderCarouselCard_unstable(state);\n});\n\nCarouselCard.displayName = 'CarouselCard';\n"],"names":["React","useCarouselCard_unstable","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCustomStyleHook_unstable","CarouselCard","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;;;CAOC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.types.js

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

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselCardSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselCard Props\n */\nexport type CarouselCardProps = ComponentProps<CarouselCardSlots> & {\n  /**\n   * Sets the card styling to be responsive based on content.\n   */\n  autoSize?: boolean;\n};\n\n/**\n * State used in rendering CarouselCard\n */\nexport type CarouselCardState = ComponentState<CarouselCardSlots> & Pick<CarouselCardProps, 'autoSize'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC,GACD,WAAwG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/index.js

@@ -0,0 +1,4 @@
+export { CarouselCard } from './CarouselCard';
+export { renderCarouselCard_unstable } from './renderCarouselCard';
+export { useCarouselCard_unstable } from './useCarouselCard';
+export { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/index.ts"],"sourcesContent":["export { CarouselCard } from './CarouselCard';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\nexport { renderCarouselCard_unstable } from './renderCarouselCard';\nexport { useCarouselCard_unstable } from './useCarouselCard';\nexport { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\n"],"names":["CarouselCard","renderCarouselCard_unstable","useCarouselCard_unstable","carouselCardClassNames","useCarouselCardStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/renderCarouselCard.js

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

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/renderCarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/renderCarouselCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselCardState, CarouselCardSlots } from './CarouselCard.types';\n\n/**\n * Render the final JSX of CarouselCard\n */\nexport const renderCarouselCard_unstable = (state: CarouselCardState) => {\n  assertSlots<CarouselCardSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselCard_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCard.js

@@ -0,0 +1,98 @@
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, isHTMLElement, mergeCallbacks, slot, useMergedRefs, useId } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';
+import { carouselCardClassNames } from './useCarouselCardStyles.styles';
+import { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';
+/**
+ * Create the state required to render CarouselCard.
+ *
+ * The returned state can be modified with hooks such as useCarouselCardStyles_unstable,
+ * before being passed to renderCarouselCard_unstable.
+ *
+ * @param props - props from this instance of CarouselCard
+ * @param ref - reference to root HTMLDivElement of CarouselCard
+ */ export const useCarouselCard_unstable = (props, ref)=>{
+    const { autoSize } = props;
+    const elementRef = React.useRef(null);
+    const isMouseEvent = React.useRef(false);
+    const selectPageByElement = useCarouselContext((ctx)=>ctx.selectPageByElement);
+    const containerRef = useCarouselContext((ctx)=>ctx.containerRef);
+    const { cardFocus } = useCarouselSliderContext();
+    const focusAttr = useFocusableGroup({
+        tabBehavior: 'limited'
+    });
+    const focusAttrProps = cardFocus ? {
+        ...focusAttr,
+        tabIndex: 0
+    } : {};
+    // We attach a unique card id if user does not provide
+    const id = useId(carouselCardClassNames.root, props.id);
+    React.useEffect(()=>{
+        const element = elementRef.current;
+        if (element) {
+            const listener = (_e)=>{
+                const event = _e;
+                // When there is no tab index present, only current cards should be visible to accessibility
+                if (!cardFocus) {
+                    const hidden = !event.detail.isVisible;
+                    element.ariaHidden = hidden.toString();
+                    element.inert = hidden;
+                }
+            };
+            element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);
+            return ()=>{
+                element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);
+            };
+        }
+    }, [
+        cardFocus
+    ]);
+    const handleFocus = React.useCallback((e)=>{
+        if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {
+            var // We want to prevent any browser scroll intervention for 'offscreen' focus
+            _containerRef_current;
+            containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.scrollTo(0, 0);
+            selectPageByElement(e, e.currentTarget, false);
+        }
+        // Mouse focus event has been consumed
+        isMouseEvent.current = false;
+    }, [
+        selectPageByElement,
+        containerRef
+    ]);
+    const handlePointerDown = (e)=>{
+        if (!e.defaultPrevented) {
+            isMouseEvent.current = true;
+        }
+    };
+    const handlePointerUp = (e)=>{
+        if (!e.defaultPrevented) {
+            isMouseEvent.current = false;
+        }
+    };
+    const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);
+    const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);
+    const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);
+    const state = {
+        autoSize,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(elementRef, ref),
+            role: 'tabpanel',
+            tabIndex: cardFocus ? 0 : undefined,
+            ...props,
+            id,
+            onFocusCapture,
+            onPointerUp,
+            onPointerDown,
+            ...focusAttrProps
+        }), {
+            elementType: 'div'
+        })
+    };
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.js

@@ -0,0 +1,44 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const carouselCardClassNames = {
+  root: 'fui-CarouselCard'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fg68ejw",
+    B2u0y6b: "f6dzj5z"
+  },
+  autoSize: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fd9q35j",
+    Bf4jedk: "fy77jfu",
+    a9b677: "f14z66ap",
+    B2u0y6b: "f6dzj5z"
+  }
+}, {
+  d: [[".fg68ejw{flex:0 0 100%;}", {
+    p: -1
+  }], ".f6dzj5z{max-width:100%;}", [".fd9q35j{flex:0 0 auto;}", {
+    p: -1
+  }], ".fy77jfu{min-width:0;}", ".f14z66ap{width:auto;}"]
+});
+/**
+ * Apply styling to the CarouselCard slots based on the state
+ */
+export const useCarouselCardStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    autoSize
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, autoSize && styles.autoSize, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","carouselCardClassNames","root","useStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","d","p","useCarouselCardStyles_unstable","state","styles","className"],"sources":["useCarouselCardStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselCardClassNames = {\n    root: 'fui-CarouselCard'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flex: '0 0 100%',\n        maxWidth: '100%'\n    },\n    autoSize: {\n        flex: '0 0 auto' /* Adapt slide size to its content */ ,\n        minWidth: 0,\n        width: 'auto',\n        maxWidth: '100%'\n    }\n});\n/**\n * Apply styling to the CarouselCard slots based on the state\n */ export const useCarouselCardStyles_unstable = (state)=>{\n    'use no memo';\n    const { autoSize } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, autoSize && styles.autoSize, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAL,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAWrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEN;EAAS,CAAC,GAAGM,KAAK;EAC1B,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEO,QAAQ,IAAIO,MAAM,CAACP,QAAQ,EAAEM,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EAChI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}