@fluentui/react-teaching-popover 9.6.20 → 9.7.0

package/lib/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButton.js

@@ -7,16 +7,14 @@ import { useEventCallback } from '@fluentui/react-utilities';
 import { useButton_unstable } from '@fluentui/react-button';
 import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';
 /**
- * Create the state required to render TeachingPopoverCarouselFooterButton.
- *
- * The returned state can be modified with hooks such as useTeachingPopoverCarouselFooterButtonStyles_unstable,
- * before being passed to renderTeachingPopoverCarouselFooterButton_unstable.
- *
+ * Base hook that builds TeachingPopoverCarouselFooterButton state for behavior and structure only.
+ * Does not read `appearance` from the popover context, does not derive the button's
+ * appearance from the navType/popoverAppearance combination, and does not call
+ * `useButton_unstable` (the styled hook does that with the right appearance).
  * @param props - props from this instance of TeachingPopoverCarouselFooterButton
  * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselFooterButton
- */ export const useTeachingPopoverCarouselFooterButton_unstable = (props, ref)=>{
+ */ export const useTeachingPopoverCarouselFooterButtonBase_unstable = (props, ref)=>{
     const { navType, altText } = props;
-    const popoverAppearance = usePopoverContext_unstable((context)=>context.appearance);
     const selectPageByDirection = useCarouselContext_unstable((c)=>c.selectPageByDirection);
     const values = useCarouselValues_unstable((snapshot)=>snapshot);
     const activeValue = useCarouselContext_unstable((c)=>c.value);
@@ -40,28 +38,18 @@ import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/
         activeValue,
         values
     ]);
-    let buttonAppearanceType;
-    if (navType === 'next') {
-        buttonAppearanceType = popoverAppearance === 'brand' ? undefined : 'primary';
-    } else {
-        buttonAppearanceType = popoverAppearance === 'brand' ? 'outline' : undefined;
-    }
     /* Handle altText on trailing step */ let buttonChild = props.children;
     if (isTrailing) {
         buttonChild = altText;
     }
     return {
-        ...useButton_unstable({
-            appearance: buttonAppearanceType,
-            ...props
-        }, ref),
         navType,
-        popoverAppearance,
         altText,
-        // Override useButton root slot
+        components: {
+            root: 'button'
+        },
         root: slot.always(getIntrinsicElementProps('button', {
             ref,
-            appearance: buttonAppearanceType,
             ...props,
             onClick: handleButtonClick,
             children: buttonChild
@@ -70,3 +58,32 @@ import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/
         })
     };
 };
+/**
+ * Create the state required to render TeachingPopoverCarouselFooterButton.
+ *
+ * The returned state can be modified with hooks such as useTeachingPopoverCarouselFooterButtonStyles_unstable,
+ * before being passed to renderTeachingPopoverCarouselFooterButton_unstable.
+ *
+ * @param props - props from this instance of TeachingPopoverCarouselFooterButton
+ * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselFooterButton
+ */ export const useTeachingPopoverCarouselFooterButton_unstable = (props, ref)=>{
+    const baseState = useTeachingPopoverCarouselFooterButtonBase_unstable(props, ref);
+    const popoverAppearance = usePopoverContext_unstable((context)=>context.appearance);
+    let buttonAppearanceType;
+    if (props.navType === 'next') {
+        buttonAppearanceType = popoverAppearance === 'brand' ? undefined : 'primary';
+    } else {
+        buttonAppearanceType = popoverAppearance === 'brand' ? 'outline' : undefined;
+    }
+    const buttonState = useButton_unstable({
+        appearance: buttonAppearanceType,
+        ...props
+    }, ref);
+    return {
+        ...buttonState,
+        navType: baseState.navType,
+        altText: baseState.altText,
+        root: baseState.root,
+        popoverAppearance
+    };
+};

package/lib/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselFooterButtonProps,\n  TeachingPopoverCarouselFooterButtonState,\n} from './TeachingPopoverCarouselFooterButton.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\n\n/**\n * Create the state required to render TeachingPopoverCarouselFooterButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselFooterButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselFooterButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselFooterButton\n * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselFooterButton\n */\nexport const useTeachingPopoverCarouselFooterButton_unstable = (\n  props: TeachingPopoverCarouselFooterButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselFooterButtonState => {\n  const { navType, altText } = props;\n\n  const popoverAppearance = usePopoverContext_unstable(context => context.appearance);\n  const selectPageByDirection = useCarouselContext_unstable(c => c.selectPageByDirection);\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n  const activeValue = useCarouselContext_unstable(c => c.value);\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    selectPageByDirection(event, navType);\n  };\n\n  const handleButtonClick = useEventCallback(mergeCallbacks(handleClick, props.onClick));\n\n  const isTrailing = React.useMemo(() => {\n    if (!activeValue) {\n      return false;\n    }\n\n    if (navType === 'prev') {\n      return values.indexOf(activeValue) === 0;\n    }\n\n    return values.indexOf(activeValue) === values.length - 1;\n  }, [navType, activeValue, values]);\n\n  let buttonAppearanceType: 'primary' | 'outline' | undefined;\n\n  if (navType === 'next') {\n    buttonAppearanceType = popoverAppearance === 'brand' ? undefined : 'primary';\n  } else {\n    buttonAppearanceType = popoverAppearance === 'brand' ? 'outline' : undefined;\n  }\n\n  /* Handle altText on trailing step */\n  let buttonChild = props.children;\n  if (isTrailing) {\n    buttonChild = altText;\n  }\n\n  return {\n    ...useButton_unstable({ appearance: buttonAppearanceType, ...props }, ref),\n    navType,\n    popoverAppearance,\n    altText,\n    // Override useButton root slot\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        appearance: buttonAppearanceType,\n        ...props,\n        onClick: handleButtonClick,\n        children: buttonChild,\n      }),\n      { elementType: 'button' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","usePopoverContext_unstable","useCarouselContext_unstable","useEventCallback","useButton_unstable","useCarouselValues_unstable","useTeachingPopoverCarouselFooterButton_unstable","props","ref","navType","altText","popoverAppearance","context","appearance","selectPageByDirection","c","values","snapshot","activeValue","value","handleClick","event","isDefaultPrevented","handleButtonClick","onClick","isTrailing","useMemo","indexOf","length","buttonAppearanceType","undefined","buttonChild","children","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,4BAA4B;AAK3F,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,2BAA2B,QAAQ,sDAAsD;AAClG,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,0BAA0B,QAAQ,wDAAwD;AAEnG;;;;;;;;CAQC,GACD,OAAO,MAAMC,kDAAkD,CAC7DC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAE7B,MAAMI,oBAAoBV,2BAA2BW,CAAAA,UAAWA,QAAQC,UAAU;IAClF,MAAMC,wBAAwBZ,4BAA4Ba,CAAAA,IAAKA,EAAED,qBAAqB;IACtF,MAAME,SAASX,2BAA2BY,CAAAA,WAAYA;IACtD,MAAMC,cAAchB,4BAA4Ba,CAAAA,IAAKA,EAAEI,KAAK;IAE5D,MAAMC,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEAR,sBAAsBO,OAAOZ;IAC/B;IAEA,MAAMc,oBAAoBpB,iBAAiBJ,eAAeqB,aAAab,MAAMiB,OAAO;IAEpF,MAAMC,aAAa5B,MAAM6B,OAAO,CAAC;QAC/B,IAAI,CAACR,aAAa;YAChB,OAAO;QACT;QAEA,IAAIT,YAAY,QAAQ;YACtB,OAAOO,OAAOW,OAAO,CAACT,iBAAiB;QACzC;QAEA,OAAOF,OAAOW,OAAO,CAACT,iBAAiBF,OAAOY,MAAM,GAAG;IACzD,GAAG;QAACnB;QAASS;QAAaF;KAAO;IAEjC,IAAIa;IAEJ,IAAIpB,YAAY,QAAQ;QACtBoB,uBAAuBlB,sBAAsB,UAAUmB,YAAY;IACrE,OAAO;QACLD,uBAAuBlB,sBAAsB,UAAU,YAAYmB;IACrE;IAEA,mCAAmC,GACnC,IAAIC,cAAcxB,MAAMyB,QAAQ;IAChC,IAAIP,YAAY;QACdM,cAAcrB;IAChB;IAEA,OAAO;QACL,GAAGN,mBAAmB;YAAES,YAAYgB;YAAsB,GAAGtB,KAAK;QAAC,GAAGC,IAAI;QAC1EC;QACAE;QACAD;QACA,+BAA+B;QAC/BuB,MAAMjC,KAAKkC,MAAM,CACfpC,yBAAyB,UAAU;YACjCU;YACAK,YAAYgB;YACZ,GAAGtB,KAAK;YACRiB,SAASD;YACTS,UAAUD;QACZ,IACA;YAAEI,aAAa;QAAS;IAE5B;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselFooterButtonBaseProps,\n  TeachingPopoverCarouselFooterButtonBaseState,\n  TeachingPopoverCarouselFooterButtonProps,\n  TeachingPopoverCarouselFooterButtonState,\n} from './TeachingPopoverCarouselFooterButton.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\n\n/**\n * Base hook that builds TeachingPopoverCarouselFooterButton state for behavior and structure only.\n * Does not read `appearance` from the popover context, does not derive the button's\n * appearance from the navType/popoverAppearance combination, and does not call\n * `useButton_unstable` (the styled hook does that with the right appearance).\n * @param props - props from this instance of TeachingPopoverCarouselFooterButton\n * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselFooterButton\n */\nexport const useTeachingPopoverCarouselFooterButtonBase_unstable = (\n  props: TeachingPopoverCarouselFooterButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselFooterButtonBaseState => {\n  const { navType, altText } = props;\n\n  const selectPageByDirection = useCarouselContext_unstable(c => c.selectPageByDirection);\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n  const activeValue = useCarouselContext_unstable(c => c.value);\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    selectPageByDirection(event, navType);\n  };\n\n  const handleButtonClick = useEventCallback(mergeCallbacks(handleClick, props.onClick));\n\n  const isTrailing = React.useMemo(() => {\n    if (!activeValue) {\n      return false;\n    }\n\n    if (navType === 'prev') {\n      return values.indexOf(activeValue) === 0;\n    }\n\n    return values.indexOf(activeValue) === values.length - 1;\n  }, [navType, activeValue, values]);\n\n  /* Handle altText on trailing step */\n  let buttonChild = props.children;\n  if (isTrailing) {\n    buttonChild = altText;\n  }\n\n  return {\n    navType,\n    altText,\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        onClick: handleButtonClick,\n        children: buttonChild,\n      }),\n      { elementType: 'button' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render TeachingPopoverCarouselFooterButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselFooterButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselFooterButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselFooterButton\n * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselFooterButton\n */\nexport const useTeachingPopoverCarouselFooterButton_unstable = (\n  props: TeachingPopoverCarouselFooterButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselFooterButtonState => {\n  const baseState = useTeachingPopoverCarouselFooterButtonBase_unstable(props, ref);\n  const popoverAppearance = usePopoverContext_unstable(context => context.appearance);\n\n  let buttonAppearanceType: 'primary' | 'outline' | undefined;\n\n  if (props.navType === 'next') {\n    buttonAppearanceType = popoverAppearance === 'brand' ? undefined : 'primary';\n  } else {\n    buttonAppearanceType = popoverAppearance === 'brand' ? 'outline' : undefined;\n  }\n\n  const buttonState = useButton_unstable({ appearance: buttonAppearanceType, ...props }, ref);\n\n  return {\n    ...buttonState,\n    navType: baseState.navType,\n    altText: baseState.altText,\n    root: baseState.root,\n    popoverAppearance,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","usePopoverContext_unstable","useCarouselContext_unstable","useEventCallback","useButton_unstable","useCarouselValues_unstable","useTeachingPopoverCarouselFooterButtonBase_unstable","props","ref","navType","altText","selectPageByDirection","c","values","snapshot","activeValue","value","handleClick","event","isDefaultPrevented","handleButtonClick","onClick","isTrailing","useMemo","indexOf","length","buttonChild","children","components","root","always","elementType","useTeachingPopoverCarouselFooterButton_unstable","baseState","popoverAppearance","context","appearance","buttonAppearanceType","undefined","buttonState"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,4BAA4B;AAO3F,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,2BAA2B,QAAQ,sDAAsD;AAClG,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,0BAA0B,QAAQ,wDAAwD;AAEnG;;;;;;;CAOC,GACD,OAAO,MAAMC,sDAAsD,CACjEC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAE7B,MAAMI,wBAAwBT,4BAA4BU,CAAAA,IAAKA,EAAED,qBAAqB;IACtF,MAAME,SAASR,2BAA2BS,CAAAA,WAAYA;IACtD,MAAMC,cAAcb,4BAA4BU,CAAAA,IAAKA,EAAEI,KAAK;IAE5D,MAAMC,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEAR,sBAAsBO,OAAOT;IAC/B;IAEA,MAAMW,oBAAoBjB,iBAAiBJ,eAAekB,aAAaV,MAAMc,OAAO;IAEpF,MAAMC,aAAazB,MAAM0B,OAAO,CAAC;QAC/B,IAAI,CAACR,aAAa;YAChB,OAAO;QACT;QAEA,IAAIN,YAAY,QAAQ;YACtB,OAAOI,OAAOW,OAAO,CAACT,iBAAiB;QACzC;QAEA,OAAOF,OAAOW,OAAO,CAACT,iBAAiBF,OAAOY,MAAM,GAAG;IACzD,GAAG;QAAChB;QAASM;QAAaF;KAAO;IAEjC,mCAAmC,GACnC,IAAIa,cAAcnB,MAAMoB,QAAQ;IAChC,IAAIL,YAAY;QACdI,cAAchB;IAChB;IAEA,OAAO;QACLD;QACAC;QACAkB,YAAY;YACVC,MAAM;QACR;QACAA,MAAM7B,KAAK8B,MAAM,CACfhC,yBAAyB,UAAU;YACjCU;YACA,GAAGD,KAAK;YACRc,SAASD;YACTO,UAAUD;QACZ,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMC,kDAAkD,CAC7DzB,OACAC;IAEA,MAAMyB,YAAY3B,oDAAoDC,OAAOC;IAC7E,MAAM0B,oBAAoBjC,2BAA2BkC,CAAAA,UAAWA,QAAQC,UAAU;IAElF,IAAIC;IAEJ,IAAI9B,MAAME,OAAO,KAAK,QAAQ;QAC5B4B,uBAAuBH,sBAAsB,UAAUI,YAAY;IACrE,OAAO;QACLD,uBAAuBH,sBAAsB,UAAU,YAAYI;IACrE;IAEA,MAAMC,cAAcnC,mBAAmB;QAAEgC,YAAYC;QAAsB,GAAG9B,KAAK;IAAC,GAAGC;IAEvF,OAAO;QACL,GAAG+B,WAAW;QACd9B,SAASwB,UAAUxB,OAAO;QAC1BC,SAASuB,UAAUvB,OAAO;QAC1BmB,MAAMI,UAAUJ,IAAI;QACpBK;IACF;AACF,EAAE"}

package/lib/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselNavSlots = {\n  /**\n   * The element wrapping the carousel pagination. By default this is a div,\n   * it may contain icons or text depending on TeachingPopoverCarouselNavStyle\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (value: string) => React.ReactNode;\n\nexport type TeachingPopoverCarouselNavState = ComponentState<TeachingPopoverCarouselNavSlots> & {\n  values: string[];\n\n  renderNavButton: NavButtonRenderFunction;\n};\n\nexport type TeachingPopoverCarouselNavProps = Omit<\n  ComponentProps<Partial<TeachingPopoverCarouselNavSlots>>,\n  'children'\n> & {\n  children: NavButtonRenderFunction;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselNavSlots = {\n  /**\n   * The element wrapping the carousel pagination. By default this is a div,\n   * it may contain icons or text depending on TeachingPopoverCarouselNavStyle\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (value: string) => React.ReactNode;\n\nexport type TeachingPopoverCarouselNavState = ComponentState<TeachingPopoverCarouselNavSlots> & {\n  values: string[];\n\n  renderNavButton: NavButtonRenderFunction;\n};\n\nexport type TeachingPopoverCarouselNavProps = Omit<\n  ComponentProps<Partial<TeachingPopoverCarouselNavSlots>>,\n  'children'\n> & {\n  children: NavButtonRenderFunction;\n};\n\nexport type TeachingPopoverCarouselNavBaseProps = TeachingPopoverCarouselNavProps;\n\nexport type TeachingPopoverCarouselNavBaseState = TeachingPopoverCarouselNavState;\n"],"names":[],"mappings":"AA4BA,WAAkF"}

package/lib/components/TeachingPopoverCarouselNav/index.js

@@ -1,4 +1,4 @@
 export { TeachingPopoverCarouselNav } from './TeachingPopoverCarouselNav';
 export { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';
-export { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';
+export { useTeachingPopoverCarouselNav_unstable, useTeachingPopoverCarouselNavBase_unstable } from './useTeachingPopoverCarouselNav';
 export { teachingPopoverCarouselNavClassNames, useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopoverCarouselNavStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselNav } from './TeachingPopoverCarouselNav';\nexport type {\n  NavButtonRenderFunction,\n  TeachingPopoverCarouselNavProps,\n  TeachingPopoverCarouselNavSlots,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nexport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nexport { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';\nexport {\n  teachingPopoverCarouselNavClassNames,\n  useTeachingPopoverCarouselNavStyles_unstable,\n} from './useTeachingPopoverCarouselNavStyles.styles';\n"],"names":["TeachingPopoverCarouselNav","renderTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNav_unstable","teachingPopoverCarouselNavClassNames","useTeachingPopoverCarouselNavStyles_unstable"],"mappings":"AAAA,SAASA,0BAA0B,QAAQ,+BAA+B;AAO1E,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SACEC,oCAAoC,EACpCC,4CAA4C,QACvC,+CAA+C"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselNav } from './TeachingPopoverCarouselNav';\nexport type {\n  NavButtonRenderFunction,\n  TeachingPopoverCarouselNavBaseProps,\n  TeachingPopoverCarouselNavBaseState,\n  TeachingPopoverCarouselNavProps,\n  TeachingPopoverCarouselNavSlots,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nexport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nexport {\n  useTeachingPopoverCarouselNav_unstable,\n  useTeachingPopoverCarouselNavBase_unstable,\n} from './useTeachingPopoverCarouselNav';\nexport {\n  teachingPopoverCarouselNavClassNames,\n  useTeachingPopoverCarouselNavStyles_unstable,\n} from './useTeachingPopoverCarouselNavStyles.styles';\n"],"names":["TeachingPopoverCarouselNav","renderTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNavBase_unstable","teachingPopoverCarouselNavClassNames","useTeachingPopoverCarouselNavStyles_unstable"],"mappings":"AAAA,SAASA,0BAA0B,QAAQ,+BAA+B;AAS1E,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SACEC,sCAAsC,EACtCC,0CAA0C,QACrC,kCAAkC;AACzC,SACEC,oCAAoC,EACpCC,4CAA4C,QACvC,+CAA+C"}

package/lib/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverCarouselNavState } from './TeachingPopoverCarouselNav.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TeachingPopoverCarouselNavSlots } from './TeachingPopoverCarouselNav.types';\nimport { ValueIdContextProvider } from './valueIdContext';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselNav\n */\nexport const renderTeachingPopoverCarouselNav_unstable = (state: TeachingPopoverCarouselNavState): JSXElement => {\n  assertSlots<TeachingPopoverCarouselNavSlots>(state);\n\n  const { values, renderNavButton } = state;\n\n  return (\n    <state.root>\n      {values.map(value => (\n        <ValueIdContextProvider value={value} key={value}>\n          {renderNavButton(value)}\n        </ValueIdContextProvider>\n      ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","ValueIdContextProvider","renderTeachingPopoverCarouselNav_unstable","state","values","renderNavButton","root","map","value"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CAACC;IACxDH,YAA6CG;IAE7C,MAAM,EAAEC,MAAM,EAAEC,eAAe,EAAE,GAAGF;IAEpC,qBACE,KAACA,MAAMG,IAAI;kBACRF,OAAOG,GAAG,CAACC,CAAAA,sBACV,KAACP;gBAAuBO,OAAOA;0BAC5BH,gBAAgBG;eADwBA;;AAMnD,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverCarouselNavState } from './TeachingPopoverCarouselNav.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselNavSlots } from './TeachingPopoverCarouselNav.types';\nimport { ValueIdContextProvider } from './valueIdContext';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselNav\n */\nexport const renderTeachingPopoverCarouselNav_unstable = (state: TeachingPopoverCarouselNavState): JSXElement => {\n  assertSlots<TeachingPopoverCarouselNavSlots>(state);\n\n  const { values, renderNavButton } = state;\n\n  return (\n    <state.root>\n      {values.map(value => (\n        <ValueIdContextProvider value={value} key={value}>\n          {renderNavButton(value)}\n        </ValueIdContextProvider>\n      ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","ValueIdContextProvider","renderTeachingPopoverCarouselNav_unstable","state","values","renderNavButton","root","map","value"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CAACC;IACxDH,YAA6CG;IAE7C,MAAM,EAAEC,MAAM,EAAEC,eAAe,EAAE,GAAGF;IAEpC,qBACE,KAACA,MAAMG,IAAI;kBACRF,OAAOG,GAAG,CAACC,CAAAA,sBACV,KAACP;gBAAuBO,OAAOA;0BAC5BH,gBAAgBG;eADwBA;;AAMnD,EAAE"}

package/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.js

@@ -1,20 +1,13 @@
 'use client';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import * as React from 'react';
 import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';
 /**
- * Returns the props and state required to render the component
+ * Base hook that builds TeachingPopoverCarouselNav state for behavior and structure only.
+ * Does not call `useArrowNavigationGroup` from `@fluentui/react-tabster`.
  * @param props - TeachingPopoverCarouselNav properties
  * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNav
- */ export const useTeachingPopoverCarouselNav_unstable = (props, ref)=>{
-    const focusableGroupAttr = useArrowNavigationGroup({
-        circular: false,
-        axis: 'horizontal',
-        memorizeCurrent: false,
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        unstable_hasDefault: true
-    });
+ */ export const useTeachingPopoverCarouselNavBase_unstable = (props, ref)=>{
     const values = useCarouselValues_unstable((snapshot)=>snapshot);
     return {
         values,
@@ -27,10 +20,30 @@ import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/
             role: 'tablist',
             tabIndex: 0,
             ...props,
-            ...focusableGroupAttr,
             children: null
         }), {
             elementType: 'div'
         })
     };
 };
+/**
+ * Returns the props and state required to render the component
+ * @param props - TeachingPopoverCarouselNav properties
+ * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNav
+ */ export const useTeachingPopoverCarouselNav_unstable = (props, ref)=>{
+    const state = useTeachingPopoverCarouselNavBase_unstable(props, ref);
+    const focusableGroupAttr = useArrowNavigationGroup({
+        circular: false,
+        axis: 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+    return {
+        ...state,
+        root: {
+            ...state.root,
+            ...focusableGroupAttr
+        }
+    };
+};

package/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type {\n  TeachingPopoverCarouselNavProps,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverCarouselNav properties\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNav\n */\nexport const useTeachingPopoverCarouselNav_unstable = (\n  props: TeachingPopoverCarouselNavProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselNavState => {\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular: false,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n\n  return {\n    values,\n    renderNavButton: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'tablist',\n        tabIndex: 0,\n        ...props,\n        ...focusableGroupAttr,\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","React","useCarouselValues_unstable","useTeachingPopoverCarouselNav_unstable","props","ref","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","values","snapshot","renderNavButton","children","components","root","always","role","tabIndex","elementType"],"mappings":"AAAA;AAEA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAM/B,SAASC,0BAA0B,QAAQ,wDAAwD;AAEnG;;;;CAIC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAMC,qBAAqBR,wBAAwB;QACjDS,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IACA,MAAMC,SAAST,2BAA2BU,CAAAA,WAAYA;IAEtD,OAAO;QACLD;QACAE,iBAAiBT,MAAMU,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMhB,KAAKiB,MAAM,CACflB,yBAAyB,OAAO;YAC9BM;YACAa,MAAM;YACNC,UAAU;YACV,GAAGf,KAAK;YACR,GAAGE,kBAAkB;YACrBQ,UAAU;QACZ,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport type {\n  TeachingPopoverCarouselNavBaseProps,\n  TeachingPopoverCarouselNavBaseState,\n  TeachingPopoverCarouselNavProps,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\n\n/**\n * Base hook that builds TeachingPopoverCarouselNav state for behavior and structure only.\n * Does not call `useArrowNavigationGroup` from `@fluentui/react-tabster`.\n * @param props - TeachingPopoverCarouselNav properties\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNav\n */\nexport const useTeachingPopoverCarouselNavBase_unstable = (\n  props: TeachingPopoverCarouselNavBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselNavBaseState => {\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n\n  return {\n    values,\n    renderNavButton: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'tablist',\n        tabIndex: 0,\n        ...props,\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverCarouselNav properties\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNav\n */\nexport const useTeachingPopoverCarouselNav_unstable = (\n  props: TeachingPopoverCarouselNavProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselNavState => {\n  const state = useTeachingPopoverCarouselNavBase_unstable(props, ref);\n\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular: false,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  return {\n    ...state,\n    root: {\n      ...state.root,\n      ...focusableGroupAttr,\n    },\n  };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useCarouselValues_unstable","useTeachingPopoverCarouselNavBase_unstable","props","ref","values","snapshot","renderNavButton","children","components","root","always","role","tabIndex","elementType","useTeachingPopoverCarouselNav_unstable","state","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault"],"mappings":"AAAA;AAEA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAS3E,SAASC,0BAA0B,QAAQ,wDAAwD;AAEnG;;;;;CAKC,GACD,OAAO,MAAMC,6CAA6C,CACxDC,OACAC;IAEA,MAAMC,SAASJ,2BAA2BK,CAAAA,WAAYA;IAEtD,OAAO;QACLD;QACAE,iBAAiBJ,MAAMK,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACNC,UAAU;YACV,GAAGV,KAAK;YACRK,UAAU;QACZ,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAMC,yCAAyC,CACpDZ,OACAC;IAEA,MAAMY,QAAQd,2CAA2CC,OAAOC;IAEhE,MAAMa,qBAAqBnB,wBAAwB;QACjDoB,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,OAAO;QACL,GAAGL,KAAK;QACRN,MAAM;YACJ,GAAGM,MAAMN,IAAI;YACb,GAAGO,kBAAkB;QACvB;IACF;AACF,EAAE"}

package/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.js

@@ -39,6 +39,7 @@ export const useTeachingPopoverCarouselNavStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);
   return state;
 };

package/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","teachingPopoverCarouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Bt984gj","Brf1p80","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","d","p","useTeachingPopoverCarouselNavStyles_unstable","state","styles","className"],"sources":["useTeachingPopoverCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverCarouselNavClassNames = {\n    root: 'fui-TeachingPopoverCarouselNav'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        columnGap: tokens.spacingHorizontalXS,\n        alignItems: 'center',\n        justifyContent: 'center',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        })\n    }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oCAAoC,GAAG;EAChDC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAajB,CAAC;AACF;AAAyC,OAAO,MAAMC,4CAA4C,GAAIC,KAAK,IAAG;EAC1G,aAAa;;EACb,MAAMC,MAAM,GAAGvB,SAAS,CAAC,CAAC;EAC1BsB,KAAK,CAACvB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,oCAAoC,CAACC,IAAI,EAAEwB,MAAM,CAACxB,IAAI,EAAEuB,KAAK,CAACvB,IAAI,CAACyB,SAAS,CAAC;EACjH,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","teachingPopoverCarouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Bt984gj","Brf1p80","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","d","p","useTeachingPopoverCarouselNavStyles_unstable","state","styles","className"],"sources":["useTeachingPopoverCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverCarouselNavClassNames = {\n    root: 'fui-TeachingPopoverCarouselNav'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        columnGap: tokens.spacingHorizontalXS,\n        alignItems: 'center',\n        justifyContent: 'center',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        })\n    }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oCAAoC,GAAG;EAChDC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAajB,CAAC;AACF;AAAyC,OAAO,MAAMC,4CAA4C,GAAIC,KAAK,IAAG;EAC1G,aAAa;;EACb,MAAMC,MAAM,GAAGvB,SAAS,CAAC,CAAC;EAC1B;EACAsB,KAAK,CAACvB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,oCAAoC,CAACC,IAAI,EAAEwB,MAAM,CAACxB,IAAI,EAAEuB,KAAK,CAACvB,IAAI,CAACyB,SAAS,CAAC;EACjH,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.raw.js

@@ -22,6 +22,7 @@ const useStyles = makeStyles({
 /** Applies style classnames to slots */ export const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type {\n  TeachingPopoverCarouselNavSlots,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const teachingPopoverCarouselNavClassNames: SlotClassNames<TeachingPopoverCarouselNavSlots> = {\n  root: 'fui-TeachingPopoverCarouselNav',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    columnGap: tokens.spacingHorizontalXS,\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselNavStyles_unstable = (\n  state: TeachingPopoverCarouselNavState,\n): TeachingPopoverCarouselNavState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","teachingPopoverCarouselNavClassNames","root","useStyles","display","flexDirection","columnGap","spacingHorizontalXS","alignItems","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","useTeachingPopoverCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAMtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,WAAWN,OAAOO,mBAAmB;QACrCC,YAAY;QACZC,gBAAgB;QAChB,GAAGV,gCAAgC;YACjCW,SAAS,GAAGV,OAAOW,gBAAgB,CAAC,OAAO,EAAEX,OAAOY,iBAAiB,EAAE;YACvEC,cAAcb,OAAOc,kBAAkB;YACvC,GAAGhB,WAAWiB,WAAW,CAAC,cAAc;QAC1C,EAAE;IACJ;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAMC,SAASf;IAEfc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,qCAAqCC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IAEhH,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type {\n  TeachingPopoverCarouselNavSlots,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const teachingPopoverCarouselNavClassNames: SlotClassNames<TeachingPopoverCarouselNavSlots> = {\n  root: 'fui-TeachingPopoverCarouselNav',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    columnGap: tokens.spacingHorizontalXS,\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselNavStyles_unstable = (\n  state: TeachingPopoverCarouselNavState,\n): TeachingPopoverCarouselNavState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","teachingPopoverCarouselNavClassNames","root","useStyles","display","flexDirection","columnGap","spacingHorizontalXS","alignItems","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","useTeachingPopoverCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAMtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,WAAWN,OAAOO,mBAAmB;QACrCC,YAAY;QACZC,gBAAgB;QAChB,GAAGV,gCAAgC;YACjCW,SAAS,GAAGV,OAAOW,gBAAgB,CAAC,OAAO,EAAEX,OAAOY,iBAAiB,EAAE;YACvEC,cAAcb,OAAOc,kBAAkB;YACvC,GAAGhB,WAAWiB,WAAW,CAAC,cAAc;QAC1C,EAAE;IACJ;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAMC,SAASf;IAEf,oDAAoD;IACpDc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,qCAAqCC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IAEhH,OAAOF;AACT,EAAE"}

package/lib/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.js

@@ -1,3 +1 @@
-/**
- * TeachingPopoverCarouselNavButton State
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { PopoverContextValue } from '@fluentui/react-popover';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselNavButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * TeachingPopoverCarouselNavButton Props\n */\nexport type TeachingPopoverCarouselNavButtonProps = ComponentProps<TeachingPopoverCarouselNavButtonSlots>;\n\n/**\n * TeachingPopoverCarouselNavButton State\n */\nexport type TeachingPopoverCarouselNavButtonState = ComponentState<TeachingPopoverCarouselNavButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  isSelected?: boolean;\n} & Pick<PopoverContextValue, 'appearance'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAK4C"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { PopoverContextValue } from '@fluentui/react-popover';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselNavButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * TeachingPopoverCarouselNavButton Props\n */\nexport type TeachingPopoverCarouselNavButtonProps = ComponentProps<TeachingPopoverCarouselNavButtonSlots>;\n\n/**\n * TeachingPopoverCarouselNavButton State\n */\nexport type TeachingPopoverCarouselNavButtonState = ComponentState<TeachingPopoverCarouselNavButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  isSelected?: boolean;\n} & Pick<PopoverContextValue, 'appearance'>;\n\nexport type TeachingPopoverCarouselNavButtonBaseProps = TeachingPopoverCarouselNavButtonProps;\n\nexport type TeachingPopoverCarouselNavButtonBaseState = Omit<TeachingPopoverCarouselNavButtonState, 'appearance'>;\n"],"names":[],"mappings":"AA4BA,WAAkH"}

package/lib/components/TeachingPopoverCarouselNavButton/index.js

@@ -1,4 +1,4 @@
 export { TeachingPopoverCarouselNavButton } from './TeachingPopoverCarouselNavButton';
 export { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';
-export { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';
+export { useTeachingPopoverCarouselNavButton_unstable, useTeachingPopoverCarouselNavButtonBase_unstable } from './useTeachingPopoverCarouselNavButton';
 export { teachingPopoverCarouselNavButtonClassNames, useTeachingPopoverCarouselNavButtonStyles_unstable } from './useTeachingPopoverCarouselNavButtonStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselNavButton } from './TeachingPopoverCarouselNavButton';\nexport type {\n  TeachingPopoverCarouselNavButtonProps,\n  TeachingPopoverCarouselNavButtonSlots,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nexport { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';\nexport { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';\nexport {\n  teachingPopoverCarouselNavButtonClassNames,\n  useTeachingPopoverCarouselNavButtonStyles_unstable,\n} from './useTeachingPopoverCarouselNavButtonStyles.styles';\n"],"names":["TeachingPopoverCarouselNavButton","renderTeachingPopoverCarouselNavButton_unstable","useTeachingPopoverCarouselNavButton_unstable","teachingPopoverCarouselNavButtonClassNames","useTeachingPopoverCarouselNavButtonStyles_unstable"],"mappings":"AAAA,SAASA,gCAAgC,QAAQ,qCAAqC;AAMtF,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SACEC,0CAA0C,EAC1CC,kDAAkD,QAC7C,qDAAqD"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselNavButton } from './TeachingPopoverCarouselNavButton';\nexport type {\n  TeachingPopoverCarouselNavButtonBaseProps,\n  TeachingPopoverCarouselNavButtonBaseState,\n  TeachingPopoverCarouselNavButtonProps,\n  TeachingPopoverCarouselNavButtonSlots,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nexport { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';\nexport {\n  useTeachingPopoverCarouselNavButton_unstable,\n  useTeachingPopoverCarouselNavButtonBase_unstable,\n} from './useTeachingPopoverCarouselNavButton';\nexport {\n  teachingPopoverCarouselNavButtonClassNames,\n  useTeachingPopoverCarouselNavButtonStyles_unstable,\n} from './useTeachingPopoverCarouselNavButtonStyles.styles';\n"],"names":["TeachingPopoverCarouselNavButton","renderTeachingPopoverCarouselNavButton_unstable","useTeachingPopoverCarouselNavButton_unstable","useTeachingPopoverCarouselNavButtonBase_unstable","teachingPopoverCarouselNavButtonClassNames","useTeachingPopoverCarouselNavButtonStyles_unstable"],"mappings":"AAAA,SAASA,gCAAgC,QAAQ,qCAAqC;AAQtF,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SACEC,4CAA4C,EAC5CC,gDAAgD,QAC3C,wCAAwC;AAC/C,SACEC,0CAA0C,EAC1CC,kDAAkD,QAC7C,qDAAqD"}

package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { usePopoverContext_unstable } from '@fluentui/react-popover';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
@@ -7,17 +6,13 @@ import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from
 import { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';
 import { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';
 /**
- * Create the state required to render TeachingPopoverCarouselNavButton.
- *
- * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,
- * before being passed to renderTeachingPopoverCarouselNavButton_unstable.
- *
+ * Base hook that builds TeachingPopoverCarouselNavButton state for behavior and structure only.
+ * Does not call `useTabsterAttributes` and does not read `appearance` from popover context.
  * @param props - props from this instance of TeachingPopoverCarouselNavButton
  * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton
- */ export const useTeachingPopoverCarouselNavButton_unstable = (props, ref)=>{
+ */ export const useTeachingPopoverCarouselNavButtonBase_unstable = (props, ref)=>{
     const { onClick, as = 'a' } = props;
     const value = useValueIdContext();
-    const appearance = usePopoverContext_unstable((context)=>context.appearance);
     const selectPageByValue = useCarouselContext_unstable((c)=>c.selectPageByValue);
     const isSelected = useCarouselContext_unstable((c)=>c.value === value);
     const handleClick = useEventCallback((event)=>{
@@ -26,29 +21,48 @@ import { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext'
             selectPageByValue(event, value);
         }
     });
-    const defaultTabProps = useTabsterAttributes({
-        focusable: {
-            isDefault: isSelected
-        }
-    });
     const _carouselButton = slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
         elementType: 'button',
         defaultProps: {
             ref: ref,
             role: 'tab',
             type: 'button',
-            'aria-selected': `${!!isSelected}`,
-            ...defaultTabProps
+            'aria-selected': `${!!isSelected}`
         }
     });
     _carouselButton.onClick = handleClick;
-    const state = {
+    return {
         isSelected,
-        appearance,
         components: {
             root: 'button'
         },
         root: _carouselButton
     };
-    return state;
+};
+/**
+ * Create the state required to render TeachingPopoverCarouselNavButton.
+ *
+ * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,
+ * before being passed to renderTeachingPopoverCarouselNavButton_unstable.
+ *
+ * @param props - props from this instance of TeachingPopoverCarouselNavButton
+ * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton
+ */ export const useTeachingPopoverCarouselNavButton_unstable = (props, ref)=>{
+    const baseState = useTeachingPopoverCarouselNavButtonBase_unstable(props, ref);
+    const appearance = usePopoverContext_unstable((context)=>context.appearance);
+    const defaultTabProps = useTabsterAttributes({
+        focusable: {
+            isDefault: baseState.isSelected
+        }
+    });
+    return {
+        ...baseState,
+        // tabster attrs act as defaults: base's root keys win over them, matching the
+        // previous `defaultProps` merging behavior in slot.always.
+        root: {
+            ...defaultTabProps,
+            ...baseState.root
+        },
+        appearance
+    };
 };

package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';\n\nimport type {\n  TeachingPopoverCarouselNavButtonProps,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselNavButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselNavButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselNavButton\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton\n */\nexport const useTeachingPopoverCarouselNavButton_unstable = (\n  props: TeachingPopoverCarouselNavButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselNavButtonState => {\n  const { onClick, as = 'a' } = props;\n\n  const value = useValueIdContext();\n\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const selectPageByValue = useCarouselContext_unstable(c => c.selectPageByValue);\n  const isSelected = useCarouselContext_unstable(c => c.value === value);\n\n  const handleClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByValue(event, value);\n    }\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: isSelected },\n  });\n\n  const _carouselButton = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        role: 'tab',\n        type: 'button',\n        'aria-selected': `${!!isSelected}`,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  _carouselButton.onClick = handleClick;\n\n  const state: TeachingPopoverCarouselNavButtonState = {\n    isSelected,\n    appearance,\n    components: {\n      root: 'button',\n    },\n    root: _carouselButton,\n  };\n\n  return state;\n};\n"],"names":["React","useARIAButtonProps","usePopoverContext_unstable","useTabsterAttributes","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useCarouselContext_unstable","useValueIdContext","useTeachingPopoverCarouselNavButton_unstable","props","ref","onClick","as","value","appearance","context","selectPageByValue","c","isSelected","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","_carouselButton","always","elementType","defaultProps","role","type","state","components","root"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAM5G,SAASC,2BAA2B,QAAQ,sDAAsD;AAClG,SAASC,iBAAiB,QAAQ,+CAA+C;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,GAAG,EAAE,GAAGH;IAE9B,MAAMI,QAAQN;IAEd,MAAMO,aAAad,2BAA2Be,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,oBAAoBV,4BAA4BW,CAAAA,IAAKA,EAAED,iBAAiB;IAC9E,MAAME,aAAaZ,4BAA4BW,CAAAA,IAAKA,EAAEJ,KAAK,KAAKA;IAEhE,MAAMM,cAAmDd,iBAAiBe,CAAAA;QACxET,oBAAAA,8BAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIlB,cAAciB,MAAME,MAAM,GAAG;YAC1DN,kBAAkBI,OAAOP;QAC3B;IACF;IAEA,MAAMU,kBAAkBtB,qBAAqB;QAC3CuB,WAAW;YAAEC,WAAWP;QAAW;IACrC;IAEA,MAAMQ,kBAAkBtB,KAAKuB,MAAM,CACjCzB,yBAAyBU,IAAIb,mBAAmBU,MAAMG,EAAE,EAAEH,SAC1D;QACEmB,aAAa;QACbC,cAAc;YACZnB,KAAKA;YACLoB,MAAM;YACNC,MAAM;YACN,iBAAiB,GAAG,CAAC,CAACb,YAAY;YAClC,GAAGK,eAAe;QACpB;IACF;IAGFG,gBAAgBf,OAAO,GAAGQ;IAE1B,MAAMa,QAA+C;QACnDd;QACAJ;QACAmB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR;IACR;IAEA,OAAOM;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';\n\nimport type {\n  TeachingPopoverCarouselNavButtonBaseProps,\n  TeachingPopoverCarouselNavButtonBaseState,\n  TeachingPopoverCarouselNavButtonProps,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';\n\n/**\n * Base hook that builds TeachingPopoverCarouselNavButton state for behavior and structure only.\n * Does not call `useTabsterAttributes` and does not read `appearance` from popover context.\n * @param props - props from this instance of TeachingPopoverCarouselNavButton\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton\n */\nexport const useTeachingPopoverCarouselNavButtonBase_unstable = (\n  props: TeachingPopoverCarouselNavButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselNavButtonBaseState => {\n  const { onClick, as = 'a' } = props;\n\n  const value = useValueIdContext();\n\n  const selectPageByValue = useCarouselContext_unstable(c => c.selectPageByValue);\n  const isSelected = useCarouselContext_unstable(c => c.value === value);\n\n  const handleClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByValue(event, value);\n    }\n  });\n\n  const _carouselButton = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        role: 'tab',\n        type: 'button',\n        'aria-selected': `${!!isSelected}`,\n      },\n    },\n  );\n\n  _carouselButton.onClick = handleClick;\n\n  return {\n    isSelected,\n    components: {\n      root: 'button',\n    },\n    root: _carouselButton,\n  };\n};\n\n/**\n * Create the state required to render TeachingPopoverCarouselNavButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselNavButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselNavButton\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton\n */\nexport const useTeachingPopoverCarouselNavButton_unstable = (\n  props: TeachingPopoverCarouselNavButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselNavButtonState => {\n  const baseState = useTeachingPopoverCarouselNavButtonBase_unstable(props, ref);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: baseState.isSelected },\n  });\n\n  return {\n    ...baseState,\n    // tabster attrs act as defaults: base's root keys win over them, matching the\n    // previous `defaultProps` merging behavior in slot.always.\n    root: {\n      ...defaultTabProps,\n      ...baseState.root,\n    },\n    appearance,\n  };\n};\n"],"names":["useARIAButtonProps","usePopoverContext_unstable","useTabsterAttributes","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useCarouselContext_unstable","useValueIdContext","useTeachingPopoverCarouselNavButtonBase_unstable","props","ref","onClick","as","value","selectPageByValue","c","isSelected","handleClick","event","defaultPrevented","target","_carouselButton","always","elementType","defaultProps","role","type","components","root","useTeachingPopoverCarouselNavButton_unstable","baseState","appearance","context","defaultTabProps","focusable","isDefault"],"mappings":"AAAA;AAIA,SAASA,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAQ5G,SAASC,2BAA2B,QAAQ,sDAAsD;AAClG,SAASC,iBAAiB,QAAQ,+CAA+C;AAEjF;;;;;CAKC,GACD,OAAO,MAAMC,mDAAmD,CAC9DC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,GAAG,EAAE,GAAGH;IAE9B,MAAMI,QAAQN;IAEd,MAAMO,oBAAoBR,4BAA4BS,CAAAA,IAAKA,EAAED,iBAAiB;IAC9E,MAAME,aAAaV,4BAA4BS,CAAAA,IAAKA,EAAEF,KAAK,KAAKA;IAEhE,MAAMI,cAAmDZ,iBAAiBa,CAAAA;QACxEP,oBAAAA,8BAAAA,QAAUO;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIhB,cAAce,MAAME,MAAM,GAAG;YAC1DN,kBAAkBI,OAAOL;QAC3B;IACF;IAEA,MAAMQ,kBAAkBjB,KAAKkB,MAAM,CACjCpB,yBAAyBU,IAAIb,mBAAmBU,MAAMG,EAAE,EAAEH,SAC1D;QACEc,aAAa;QACbC,cAAc;YACZd,KAAKA;YACLe,MAAM;YACNC,MAAM;YACN,iBAAiB,GAAG,CAAC,CAACV,YAAY;QACpC;IACF;IAGFK,gBAAgBV,OAAO,GAAGM;IAE1B,OAAO;QACLD;QACAW,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP;IACR;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMQ,+CAA+C,CAC1DpB,OACAC;IAEA,MAAMoB,YAAYtB,iDAAiDC,OAAOC;IAC1E,MAAMqB,aAAa/B,2BAA2BgC,CAAAA,UAAWA,QAAQD,UAAU;IAE3E,MAAME,kBAAkBhC,qBAAqB;QAC3CiC,WAAW;YAAEC,WAAWL,UAAUd,UAAU;QAAC;IAC/C;IAEA,OAAO;QACL,GAAGc,SAAS;QACZ,8EAA8E;QAC9E,2DAA2D;QAC3DF,MAAM;YACJ,GAAGK,eAAe;YAClB,GAAGH,UAAUF,IAAI;QACnB;QACAG;IACF;AACF,EAAE"}

package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.js

@@ -166,6 +166,7 @@ export const useTeachingPopoverCarouselNavButtonStyles_unstable = state => {
     isSelected
   } = state;
   const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);
   return state;
 };

package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","teachingPopoverCarouselNavButtonClassNames","root","useStyles","mc9l5x","Bceei9c","B7ck84d","Bqenvij","a9b677","De3pzq","rootUnselected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","o2ey54","C3llkk","rootSelected","By8wz76","rootBrand","rootBrandUnselected","d","p","t","m","useTeachingPopoverCarouselNavButtonStyles_unstable","state","styles","appearance","isSelected","brandStyles","className"],"sources":["useTeachingPopoverCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const teachingPopoverCarouselNavButtonClassNames = {\n    root: 'fui-TeachingPopoverCarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        cursor: 'pointer',\n        boxSizing: 'border-box',\n        height: '8px',\n        width: '8px',\n        backgroundColor: tokens.colorBrandBackground\n    },\n    rootUnselected: {\n        border: 'none',\n        borderRadius: '50%',\n        padding: '0px',\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        }),\n        backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,\n        '@supports not (color: color-mix(in lch, white, black))': {\n            // This will also affect the focus border, but only in older unsupported browsers\n            opacity: 0.3,\n            backgroundColor: tokens.colorBrandBackground\n        }\n    },\n    rootSelected: {\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        width: '16px',\n        border: 'none',\n        borderRadius: '4px',\n        padding: '0px',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        }),\n        '@media (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rootBrand: {\n        backgroundColor: tokens.colorNeutralForegroundOnBrand\n    },\n    rootBrandUnselected: {\n        backgroundColor: `color-mix(in srgb, ${tokens.colorNeutralForegroundOnBrand} 30%, transparent)`,\n        '@supports not (color: color-mix(in lch, white, black))': {\n            // This will also affect the focus border, but only in older unsupported browsers\n            opacity: 0.3,\n            backgroundColor: tokens.colorBrandBackground\n        }\n    }\n});\n/**\n * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state\n */ export const useTeachingPopoverCarouselNavButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance, isSelected } = state;\n    const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;\n    state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","teachingPopoverCarouselNavButtonClassNames","root","useStyles","mc9l5x","Bceei9c","B7ck84d","Bqenvij","a9b677","De3pzq","rootUnselected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","o2ey54","C3llkk","rootSelected","By8wz76","rootBrand","rootBrandUnselected","d","p","t","m","useTeachingPopoverCarouselNavButtonStyles_unstable","state","styles","appearance","isSelected","brandStyles","className"],"sources":["useTeachingPopoverCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const teachingPopoverCarouselNavButtonClassNames = {\n    root: 'fui-TeachingPopoverCarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        cursor: 'pointer',\n        boxSizing: 'border-box',\n        height: '8px',\n        width: '8px',\n        backgroundColor: tokens.colorBrandBackground\n    },\n    rootUnselected: {\n        border: 'none',\n        borderRadius: '50%',\n        padding: '0px',\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        }),\n        backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,\n        '@supports not (color: color-mix(in lch, white, black))': {\n            // This will also affect the focus border, but only in older unsupported browsers\n            opacity: 0.3,\n            backgroundColor: tokens.colorBrandBackground\n        }\n    },\n    rootSelected: {\n        outline: `${tokens.strokeWidthThin} solid transparent`,\n        width: '16px',\n        border: 'none',\n        borderRadius: '4px',\n        padding: '0px',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        }),\n        '@media (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rootBrand: {\n        backgroundColor: tokens.colorNeutralForegroundOnBrand\n    },\n    rootBrandUnselected: {\n        backgroundColor: `color-mix(in srgb, ${tokens.colorNeutralForegroundOnBrand} 30%, transparent)`,\n        '@supports not (color: color-mix(in lch, white, black))': {\n            // This will also affect the focus border, but only in older unsupported browsers\n            opacity: 0.3,\n            backgroundColor: tokens.colorBrandBackground\n        }\n    }\n});\n/**\n * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state\n */ export const useTeachingPopoverCarouselNavButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance, isSelected } = state;\n    const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.raw.js

@@ -67,6 +67,7 @@ export const teachingPopoverCarouselNavButtonClassNames = {
     const styles = useStyles();
     const { appearance, isSelected } = state;
     const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);
     return state;
 };

package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselNavButtonSlots,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const teachingPopoverCarouselNavButtonClassNames: SlotClassNames<TeachingPopoverCarouselNavButtonSlots> = {\n  root: 'fui-TeachingPopoverCarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    cursor: 'pointer',\n    boxSizing: 'border-box',\n    height: '8px',\n    width: '8px',\n    backgroundColor: tokens.colorBrandBackground,\n  },\n  rootUnselected: {\n    border: 'none',\n    borderRadius: '50%',\n    padding: '0px',\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,\n    '@supports not (color: color-mix(in lch, white, black))': {\n      // This will also affect the focus border, but only in older unsupported browsers\n      opacity: 0.3,\n      backgroundColor: tokens.colorBrandBackground,\n    },\n  },\n  rootSelected: {\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    width: '16px',\n    border: 'none',\n    borderRadius: '4px',\n    padding: '0px',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rootBrand: {\n    backgroundColor: tokens.colorNeutralForegroundOnBrand,\n  },\n  rootBrandUnselected: {\n    backgroundColor: `color-mix(in srgb, ${tokens.colorNeutralForegroundOnBrand} 30%, transparent)`,\n    '@supports not (color: color-mix(in lch, white, black))': {\n      // This will also affect the focus border, but only in older unsupported browsers\n      opacity: 0.3,\n      backgroundColor: tokens.colorBrandBackground,\n    },\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state\n */\nexport const useTeachingPopoverCarouselNavButtonStyles_unstable = (\n  state: TeachingPopoverCarouselNavButtonState,\n): TeachingPopoverCarouselNavButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance, isSelected } = state;\n\n  const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;\n\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselNavButtonClassNames.root,\n    styles.root,\n    isSelected ? styles.rootSelected : styles.rootUnselected,\n    appearance === 'brand' && brandStyles,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","teachingPopoverCarouselNavButtonClassNames","root","useStyles","display","cursor","boxSizing","height","width","backgroundColor","colorBrandBackground","rootUnselected","border","borderRadius","padding","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","borderRadiusMedium","borderColor","opacity","rootSelected","rootBrand","colorNeutralForegroundOnBrand","rootBrandUnselected","useTeachingPopoverCarouselNavButtonStyles_unstable","state","styles","appearance","isSelected","brandStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAMtE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,OAAO,MAAMC,6CAAoG;IAC/GC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,QAAQ;QACRC,WAAW;QACXC,QAAQ;QACRC,OAAO;QACPC,iBAAiBV,OAAOW,oBAAoB;IAC9C;IACAC,gBAAgB;QACdC,QAAQ;QACRC,cAAc;QACdC,SAAS;QACTC,SAAS,GAAGhB,OAAOiB,eAAe,CAAC,kBAAkB,CAAC;QACtD,GAAGhB,gCAAgC;YACjCe,SAAS,GAAGhB,OAAOkB,gBAAgB,CAAC,OAAO,EAAElB,OAAOmB,iBAAiB,EAAE;YACvEL,cAAcd,OAAOoB,kBAAkB;YACvC,GAAGrB,WAAWsB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFX,iBAAiB,CAAC,mBAAmB,EAAEV,OAAOW,oBAAoB,CAAC,kBAAkB,CAAC;QACtF,0DAA0D;YACxD,iFAAiF;YACjFW,SAAS;YACTZ,iBAAiBV,OAAOW,oBAAoB;QAC9C;IACF;IACAY,cAAc;QACZP,SAAS,GAAGhB,OAAOiB,eAAe,CAAC,kBAAkB,CAAC;QACtDR,OAAO;QACPI,QAAQ;QACRC,cAAc;QACdC,SAAS;QACT,GAAGd,gCAAgC;YACjCe,SAAS,GAAGhB,OAAOkB,gBAAgB,CAAC,OAAO,EAAElB,OAAOmB,iBAAiB,EAAE;YACvEL,cAAcd,OAAOoB,kBAAkB;YACvC,GAAGrB,WAAWsB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACF,kCAAkC;YAChCX,iBAAiB;QACnB;IACF;IACAc,WAAW;QACTd,iBAAiBV,OAAOyB,6BAA6B;IACvD;IACAC,qBAAqB;QACnBhB,iBAAiB,CAAC,mBAAmB,EAAEV,OAAOyB,6BAA6B,CAAC,kBAAkB,CAAC;QAC/F,0DAA0D;YACxD,iFAAiF;YACjFH,SAAS;YACTZ,iBAAiBV,OAAOW,oBAAoB;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMgB,qDAAqD,CAChEC;IAEA;IAEA,MAAMC,SAASzB;IACf,MAAM,EAAE0B,UAAU,EAAEC,UAAU,EAAE,GAAGH;IAEnC,MAAMI,cAAcD,aAAaF,OAAOL,SAAS,GAAGK,OAAOH,mBAAmB;IAE9EE,MAAMzB,IAAI,CAAC8B,SAAS,GAAGnC,aACrBI,2CAA2CC,IAAI,EAC/C0B,OAAO1B,IAAI,EACX4B,aAAaF,OAAON,YAAY,GAAGM,OAAOjB,cAAc,EACxDkB,eAAe,WAAWE,aAC1BJ,MAAMzB,IAAI,CAAC8B,SAAS;IAGtB,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselNavButtonSlots,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const teachingPopoverCarouselNavButtonClassNames: SlotClassNames<TeachingPopoverCarouselNavButtonSlots> = {\n  root: 'fui-TeachingPopoverCarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    cursor: 'pointer',\n    boxSizing: 'border-box',\n    height: '8px',\n    width: '8px',\n    backgroundColor: tokens.colorBrandBackground,\n  },\n  rootUnselected: {\n    border: 'none',\n    borderRadius: '50%',\n    padding: '0px',\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,\n    '@supports not (color: color-mix(in lch, white, black))': {\n      // This will also affect the focus border, but only in older unsupported browsers\n      opacity: 0.3,\n      backgroundColor: tokens.colorBrandBackground,\n    },\n  },\n  rootSelected: {\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    width: '16px',\n    border: 'none',\n    borderRadius: '4px',\n    padding: '0px',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rootBrand: {\n    backgroundColor: tokens.colorNeutralForegroundOnBrand,\n  },\n  rootBrandUnselected: {\n    backgroundColor: `color-mix(in srgb, ${tokens.colorNeutralForegroundOnBrand} 30%, transparent)`,\n    '@supports not (color: color-mix(in lch, white, black))': {\n      // This will also affect the focus border, but only in older unsupported browsers\n      opacity: 0.3,\n      backgroundColor: tokens.colorBrandBackground,\n    },\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state\n */\nexport const useTeachingPopoverCarouselNavButtonStyles_unstable = (\n  state: TeachingPopoverCarouselNavButtonState,\n): TeachingPopoverCarouselNavButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance, isSelected } = state;\n\n  const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselNavButtonClassNames.root,\n    styles.root,\n    isSelected ? styles.rootSelected : styles.rootUnselected,\n    appearance === 'brand' && brandStyles,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","teachingPopoverCarouselNavButtonClassNames","root","useStyles","display","cursor","boxSizing","height","width","backgroundColor","colorBrandBackground","rootUnselected","border","borderRadius","padding","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","borderRadiusMedium","borderColor","opacity","rootSelected","rootBrand","colorNeutralForegroundOnBrand","rootBrandUnselected","useTeachingPopoverCarouselNavButtonStyles_unstable","state","styles","appearance","isSelected","brandStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAMtE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,OAAO,MAAMC,6CAAoG;IAC/GC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,QAAQ;QACRC,WAAW;QACXC,QAAQ;QACRC,OAAO;QACPC,iBAAiBV,OAAOW,oBAAoB;IAC9C;IACAC,gBAAgB;QACdC,QAAQ;QACRC,cAAc;QACdC,SAAS;QACTC,SAAS,GAAGhB,OAAOiB,eAAe,CAAC,kBAAkB,CAAC;QACtD,GAAGhB,gCAAgC;YACjCe,SAAS,GAAGhB,OAAOkB,gBAAgB,CAAC,OAAO,EAAElB,OAAOmB,iBAAiB,EAAE;YACvEL,cAAcd,OAAOoB,kBAAkB;YACvC,GAAGrB,WAAWsB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFX,iBAAiB,CAAC,mBAAmB,EAAEV,OAAOW,oBAAoB,CAAC,kBAAkB,CAAC;QACtF,0DAA0D;YACxD,iFAAiF;YACjFW,SAAS;YACTZ,iBAAiBV,OAAOW,oBAAoB;QAC9C;IACF;IACAY,cAAc;QACZP,SAAS,GAAGhB,OAAOiB,eAAe,CAAC,kBAAkB,CAAC;QACtDR,OAAO;QACPI,QAAQ;QACRC,cAAc;QACdC,SAAS;QACT,GAAGd,gCAAgC;YACjCe,SAAS,GAAGhB,OAAOkB,gBAAgB,CAAC,OAAO,EAAElB,OAAOmB,iBAAiB,EAAE;YACvEL,cAAcd,OAAOoB,kBAAkB;YACvC,GAAGrB,WAAWsB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACF,kCAAkC;YAChCX,iBAAiB;QACnB;IACF;IACAc,WAAW;QACTd,iBAAiBV,OAAOyB,6BAA6B;IACvD;IACAC,qBAAqB;QACnBhB,iBAAiB,CAAC,mBAAmB,EAAEV,OAAOyB,6BAA6B,CAAC,kBAAkB,CAAC;QAC/F,0DAA0D;YACxD,iFAAiF;YACjFH,SAAS;YACTZ,iBAAiBV,OAAOW,oBAAoB;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMgB,qDAAqD,CAChEC;IAEA;IAEA,MAAMC,SAASzB;IACf,MAAM,EAAE0B,UAAU,EAAEC,UAAU,EAAE,GAAGH;IAEnC,MAAMI,cAAcD,aAAaF,OAAOL,SAAS,GAAGK,OAAOH,mBAAmB;IAE9E,oDAAoD;IACpDE,MAAMzB,IAAI,CAAC8B,SAAS,GAAGnC,aACrBI,2CAA2CC,IAAI,EAC/C0B,OAAO1B,IAAI,EACX4B,aAAaF,OAAON,YAAY,GAAGM,OAAOjB,cAAc,EACxDkB,eAAe,WAAWE,aAC1BJ,MAAMzB,IAAI,CAAC8B,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.js

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering TeachingPopoverCarouselPageCount
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselPageCountSlots = {\n  root: Slot<'div'>;\n};\n\nexport type TeachingPopoverCarouselPageCountRenderFunction = (\n  currentPage: number,\n  totalPages: number,\n) => React.ReactNode;\n\n/**\n * TeachingPopoverCarouselPageCount Props\n */\nexport type TeachingPopoverCarouselPageCountProps = Omit<\n  ComponentProps<Partial<TeachingPopoverCarouselPageCountSlots>>,\n  'children'\n> & {\n  children: TeachingPopoverCarouselPageCountRenderFunction;\n};\n\n/**\n * State used in rendering TeachingPopoverCarouselPageCount\n */\nexport type TeachingPopoverCarouselPageCountState = ComponentState<TeachingPopoverCarouselPageCountSlots> & {\n  currentIndex: number;\n\n  totalPages: number;\n\n  renderPageCount: TeachingPopoverCarouselPageCountRenderFunction;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselPageCountSlots = {\n  root: Slot<'div'>;\n};\n\nexport type TeachingPopoverCarouselPageCountRenderFunction = (\n  currentPage: number,\n  totalPages: number,\n) => React.ReactNode;\n\n/**\n * TeachingPopoverCarouselPageCount Props\n */\nexport type TeachingPopoverCarouselPageCountProps = Omit<\n  ComponentProps<Partial<TeachingPopoverCarouselPageCountSlots>>,\n  'children'\n> & {\n  children: TeachingPopoverCarouselPageCountRenderFunction;\n};\n\n/**\n * State used in rendering TeachingPopoverCarouselPageCount\n */\nexport type TeachingPopoverCarouselPageCountState = ComponentState<TeachingPopoverCarouselPageCountSlots> & {\n  currentIndex: number;\n\n  totalPages: number;\n\n  renderPageCount: TeachingPopoverCarouselPageCountRenderFunction;\n};\n"],"names":[],"mappings":"AAsBA;;CAEC,GACD,WAME"}

package/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';
 import { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';

package/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselPageCountProps,\n  TeachingPopoverCarouselPageCountState,\n} from './TeachingPopoverCarouselPageCount.types';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselPageCount.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselPageCountStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselPageCount_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselPageCount\n * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselPageCount\n */\nexport const useTeachingPopoverCarouselPageCount_unstable = (\n  props: TeachingPopoverCarouselPageCountProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselPageCountState => {\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n\n  const selectedValue = useCarouselContext_unstable(c => c.value) ?? values[0];\n  const currentIndex = values.indexOf(selectedValue);\n  const totalPages = values.length;\n\n  return {\n    currentIndex,\n    totalPages,\n    renderPageCount: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        children: props.children(currentIndex + 1, totalPages),\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useCarouselValues_unstable","useCarouselContext_unstable","useTeachingPopoverCarouselPageCount_unstable","props","ref","values","snapshot","selectedValue","c","value","currentIndex","indexOf","totalPages","length","renderPageCount","children","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAK3E,SAASC,0BAA0B,QAAQ,wDAAwD;AACnG,SAASC,2BAA2B,QAAQ,sDAAsD;AAElG;;;;;;;;CAQC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC,OACAC;IAEA,MAAMC,SAASL,2BAA2BM,CAAAA,WAAYA;QAEhCL;IAAtB,MAAMM,gBAAgBN,CAAAA,+BAAAA,4BAA4BO,CAAAA,IAAKA,EAAEC,KAAK,eAAxCR,0CAAAA,+BAA6CI,MAAM,CAAC,EAAE;IAC5E,MAAMK,eAAeL,OAAOM,OAAO,CAACJ;IACpC,MAAMK,aAAaP,OAAOQ,MAAM;IAEhC,OAAO;QACLH;QACAE;QACAE,iBAAiBX,MAAMY,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,KAAKmB,MAAM,CACfpB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRY,UAAUZ,MAAMY,QAAQ,CAACL,eAAe,GAAGE;QAC7C,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselPageCountProps,\n  TeachingPopoverCarouselPageCountState,\n} from './TeachingPopoverCarouselPageCount.types';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselPageCount.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselPageCountStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselPageCount_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselPageCount\n * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselPageCount\n */\nexport const useTeachingPopoverCarouselPageCount_unstable = (\n  props: TeachingPopoverCarouselPageCountProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselPageCountState => {\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n\n  const selectedValue = useCarouselContext_unstable(c => c.value) ?? values[0];\n  const currentIndex = values.indexOf(selectedValue);\n  const totalPages = values.length;\n\n  return {\n    currentIndex,\n    totalPages,\n    renderPageCount: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        children: props.children(currentIndex + 1, totalPages),\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useCarouselValues_unstable","useCarouselContext_unstable","useTeachingPopoverCarouselPageCount_unstable","props","ref","values","snapshot","selectedValue","c","value","currentIndex","indexOf","totalPages","length","renderPageCount","children","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAK3E,SAASC,0BAA0B,QAAQ,wDAAwD;AACnG,SAASC,2BAA2B,QAAQ,sDAAsD;AAElG;;;;;;;;CAQC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC,OACAC;IAEA,MAAMC,SAASL,2BAA2BM,CAAAA,WAAYA;QAEhCL;IAAtB,MAAMM,gBAAgBN,CAAAA,+BAAAA,4BAA4BO,CAAAA,IAAKA,EAAEC,KAAK,eAAxCR,0CAAAA,+BAA6CI,MAAM,CAAC,EAAE;IAC5E,MAAMK,eAAeL,OAAOM,OAAO,CAACJ;IACpC,MAAMK,aAAaP,OAAOQ,MAAM;IAEhC,OAAO;QACLH;QACAE;QACAE,iBAAiBX,MAAMY,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,KAAKmB,MAAM,CACfpB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRY,UAAUZ,MAAMY,QAAQ,CAACL,eAAe,GAAGE;QAC7C,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.js

@@ -23,6 +23,7 @@ export const useTeachingPopoverCarouselPageCountStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(teachingPopoverCarouselPageCountClassNames.root, styles.root, state.root.className);
   return state;
 };