@fluentui/react-accordion 9.2.0 → 9.3.1

package/lib/components/AccordionHeader/useAccordionHeader.js

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
-import { useAccordionItemContext_unstable } from '../AccordionItem/index';
+import { getNativeElementProps, isResolvedShorthand, useEventCallback, slot } from '@fluentui/react-utilities';
 import { useARIAButtonShorthand } from '@fluentui/react-aria';
-import { useAccordionContext_unstable } from '../Accordion/AccordionContext';
+import { useAccordionContext_unstable } from '../../contexts/accordion';
 import { ChevronRightRegular } from '@fluentui/react-icons';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionHeader properties
  * @param ref - reference to root HTMLElement of AccordionHeader
  */ export const useAccordionHeader_unstable = (props, ref)=>{
     const { as , icon , button , expandIcon , inline =false , size ='medium' , expandIconPosition ='start'  } = props;
-    const { onHeaderClick: onAccordionHeaderClick , disabled , open  } = useAccordionItemContext_unstable();
+    const { value , disabled , open  } = useAccordionItemContext_unstable();
+    const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
     /**
    * force disabled state on button if accordion isn't collapsible
    * and this is the only item opened
@@ -38,13 +39,17 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
             expandIcon: 'span',
             icon: 'div'
         },
-        root: getNativeElementProps(as || 'div', {
+        root: slot.always(getNativeElementProps(as || 'div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        icon: resolveShorthand(icon),
-        expandIcon: resolveShorthand(expandIcon, {
-            required: true,
+        icon: slot.optional(icon, {
+            elementType: 'div'
+        }),
+        expandIcon: slot.optional(expandIcon, {
+            renderByDefault: true,
             defaultProps: {
                 children: /*#__PURE__*/ React.createElement(ChevronRightRegular, {
                     style: {
@@ -52,9 +57,10 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
                     }
                 }),
                 'aria-hidden': true
-            }
+            },
+            elementType: 'span'
         }),
-        button: resolveShorthand({
+        button: slot.always({
             ...useARIAButtonShorthand(button, {
                 required: true,
                 defaultProps: {
@@ -64,17 +70,20 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
                     type: 'button'
                 }
             }),
-            onClick: useEventCallback((ev)=>{
+            onClick: useEventCallback((event)=>{
                 if (isResolvedShorthand(button)) {
                     var _button_onClick;
-                    (_button_onClick = button.onClick) === null || _button_onClick === void 0 ? void 0 : _button_onClick.call(button, ev);
+                    (_button_onClick = button.onClick) === null || _button_onClick === void 0 ? void 0 : _button_onClick.call(button, event);
                 }
-                if (!ev.defaultPrevented) {
-                    onAccordionHeaderClick(ev);
+                if (!event.defaultPrevented) {
+                    requestToggle({
+                        value,
+                        event
+                    });
                 }
             })
         }, {
-            required: true
+            elementType: 'button'
         })
     };
 };

package/lib/components/AccordionHeader/useAccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useAccordionContext_unstable } from '../Accordion/AccordionContext';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeader_unstable = (\n  props: AccordionHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n  const { as, icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;\n  const { onHeaderClick: onAccordionHeaderClick, disabled, open } = useAccordionItemContext_unstable();\n\n  /**\n   * force disabled state on button if accordion isn't collapsible\n   * and this is the only item opened\n   */\n  const disabledFocusable = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);\n\n  const { dir } = useFluent();\n\n  // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n  let expandIconRotation: 0 | 90 | -90 | 180;\n  if (expandIconPosition === 'end') {\n    // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n    expandIconRotation = open ? -90 : 90;\n  } else {\n    // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n    expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  }\n\n  return {\n    disabled,\n    open,\n    size,\n    inline,\n    expandIconPosition,\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      icon: 'div',\n    },\n    root: getNativeElementProps(as || 'div', {\n      ref,\n      ...props,\n    }),\n    icon: resolveShorthand(icon),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronRightRegular style={{ transform: `rotate(${expandIconRotation}deg)` }} />,\n        'aria-hidden': true,\n      },\n    }),\n    button: resolveShorthand<ARIAButtonSlotProps<'a'>>(\n      {\n        ...useARIAButtonShorthand(button, {\n          required: true,\n          defaultProps: {\n            disabled,\n            disabledFocusable,\n            'aria-expanded': open,\n            type: 'button',\n          },\n        }),\n        onClick: useEventCallback(ev => {\n          if (isResolvedShorthand(button)) {\n            button.onClick?.(ev);\n          }\n          if (!ev.defaultPrevented) {\n            onAccordionHeaderClick(ev);\n          }\n        }),\n      },\n      { required: true },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useEventCallback","useAccordionItemContext_unstable","useARIAButtonShorthand","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionHeader_unstable","props","ref","as","icon","button","expandIcon","inline","size","expandIconPosition","onHeaderClick","onAccordionHeaderClick","disabled","open","disabledFocusable","ctx","collapsible","openItems","length","dir","expandIconRotation","components","root","required","defaultProps","children","style","transform","type","onClick","ev","defaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,gCAAgC,QAAQ,yBAAyB;AAC1E,SAA8BC,sBAAsB,QAAQ,uBAAuB;AAEnF,SAASC,4BAA4B,QAAQ,gCAAgC;AAC7E,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;CAIC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,GAAE,EAAEC,KAAI,EAAEC,OAAM,EAAEC,WAAU,EAAEC,QAAS,KAAK,CAAA,EAAEC,MAAO,SAAQ,EAAEC,oBAAqB,QAAO,EAAE,GAAGR;IACxG,MAAM,EAAES,eAAeC,uBAAsB,EAAEC,SAAQ,EAAEC,KAAI,EAAE,GAAGnB;IAElE;;;GAGC,GACD,MAAMoB,oBAAoBlB,6BAA6BmB,CAAAA,MAAO,CAACA,IAAIC,WAAW,IAAID,IAAIE,SAAS,CAACC,MAAM,KAAK,KAAKL;IAEhH,MAAM,EAAEM,IAAG,EAAE,GAAGpB;IAEhB,oEAAoE;IACpE,IAAIqB;IACJ,IAAIX,uBAAuB,OAAO;QAChC,8FAA8F;QAC9FW,qBAAqBP,OAAO,CAAC,KAAK,EAAE;IACtC,OAAO;QACL,mGAAmG;QACnGO,qBAAqBP,OAAO,KAAKM,QAAQ,QAAQ,IAAI,GAAG;IAC1D,CAAC;IAED,OAAO;QACLP;QACAC;QACAL;QACAD;QACAE;QACAY,YAAY;YACVC,MAAM;YACNjB,QAAQ;YACRC,YAAY;YACZF,MAAM;QACR;QACAkB,MAAMhC,sBAAsBa,MAAM,OAAO;YACvCD;YACA,GAAGD,KAAK;QACV;QACAG,MAAMZ,iBAAiBY;QACvBE,YAAYd,iBAAiBc,YAAY;YACvCiB,UAAU,IAAI;YACdC,cAAc;gBACZC,wBAAU,oBAAC5B;oBAAoB6B,OAAO;wBAAEC,WAAW,CAAC,OAAO,EAAEP,mBAAmB,IAAI,CAAC;oBAAC;;gBACtF,eAAe,IAAI;YACrB;QACF;QACAf,QAAQb,iBACN;YACE,GAAGG,uBAAuBU,QAAQ;gBAChCkB,UAAU,IAAI;gBACdC,cAAc;oBACZZ;oBACAE;oBACA,iBAAiBD;oBACjBe,MAAM;gBACR;YACF,EAAE;YACFC,SAASpC,iBAAiBqC,CAAAA,KAAM;gBAC9B,IAAIvC,oBAAoBc,SAAS;wBAC/BA;oBAAAA,CAAAA,kBAAAA,OAAOwB,OAAO,cAAdxB,6BAAAA,KAAAA,IAAAA,gBAAAA,KAAAA,QAAiByB;gBACnB,CAAC;gBACD,IAAI,CAACA,GAAGC,gBAAgB,EAAE;oBACxBpB,uBAAuBmB;gBACzB,CAAC;YACH;QACF,GACA;YAAEP,UAAU,IAAI;QAAC;IAErB;AACF,EAAE"}
+{"version":3,"sources":["useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeader_unstable = (\n  props: AccordionHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n  const { as, icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;\n  const { value, disabled, open } = useAccordionItemContext_unstable();\n  const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n\n  /**\n   * force disabled state on button if accordion isn't collapsible\n   * and this is the only item opened\n   */\n  const disabledFocusable = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);\n\n  const { dir } = useFluent();\n\n  // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n  let expandIconRotation: 0 | 90 | -90 | 180;\n  if (expandIconPosition === 'end') {\n    // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n    expandIconRotation = open ? -90 : 90;\n  } else {\n    // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n    expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  }\n\n  return {\n    disabled,\n    open,\n    size,\n    inline,\n    expandIconPosition,\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      icon: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps(as || 'div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(icon, { elementType: 'div' }),\n    expandIcon: slot.optional(expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronRightRegular style={{ transform: `rotate(${expandIconRotation}deg)` }} />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    button: slot.always<ARIAButtonSlotProps<'a'>>(\n      {\n        ...useARIAButtonShorthand(button, {\n          required: true,\n          defaultProps: {\n            disabled,\n            disabledFocusable,\n            'aria-expanded': open,\n            type: 'button',\n          },\n        }),\n        onClick: useEventCallback(event => {\n          if (isResolvedShorthand(button)) {\n            button.onClick?.(event);\n          }\n          if (!event.defaultPrevented) {\n            requestToggle({ value, event });\n          }\n        }),\n      },\n      { elementType: 'button' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","useEventCallback","slot","useARIAButtonShorthand","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionItemContext_unstable","useAccordionHeader_unstable","props","ref","as","icon","button","expandIcon","inline","size","expandIconPosition","value","disabled","open","requestToggle","ctx","disabledFocusable","collapsible","openItems","length","dir","expandIconRotation","components","root","always","elementType","optional","renderByDefault","defaultProps","children","style","transform","required","type","onClick","event","defaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC/G,SAA8BC,sBAAsB,QAAQ,uBAAuB;AAEnF,SAASC,4BAA4B,QAAQ,2BAA2B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gCAAgC,QAAQ,+BAA+B;AAEhF;;;;CAIC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,GAAE,EAAEC,KAAI,EAAEC,OAAM,EAAEC,WAAU,EAAEC,QAAS,KAAK,CAAA,EAAEC,MAAO,SAAQ,EAAEC,oBAAqB,QAAO,EAAE,GAAGR;IACxG,MAAM,EAAES,MAAK,EAAEC,SAAQ,EAAEC,KAAI,EAAE,GAAGb;IAClC,MAAMc,gBAAgBlB,6BAA6BmB,CAAAA,MAAOA,IAAID,aAAa;IAE3E;;;GAGC,GACD,MAAME,oBAAoBpB,6BAA6BmB,CAAAA,MAAO,CAACA,IAAIE,WAAW,IAAIF,IAAIG,SAAS,CAACC,MAAM,KAAK,KAAKN;IAEhH,MAAM,EAAEO,IAAG,EAAE,GAAGrB;IAEhB,oEAAoE;IACpE,IAAIsB;IACJ,IAAIX,uBAAuB,OAAO;QAChC,8FAA8F;QAC9FW,qBAAqBR,OAAO,CAAC,KAAK,EAAE;IACtC,OAAO;QACL,mGAAmG;QACnGQ,qBAAqBR,OAAO,KAAKO,QAAQ,QAAQ,IAAI,GAAG;IAC1D,CAAC;IAED,OAAO;QACLR;QACAC;QACAJ;QACAD;QACAE;QACAY,YAAY;YACVC,MAAM;YACNjB,QAAQ;YACRC,YAAY;YACZF,MAAM;QACR;QACAkB,MAAM7B,KAAK8B,MAAM,CACfjC,sBAAsBa,MAAM,OAAO;YACjCD;YACA,GAAGD,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;QAEvBpB,MAAMX,KAAKgC,QAAQ,CAACrB,MAAM;YAAEoB,aAAa;QAAM;QAC/ClB,YAAYb,KAAKgC,QAAQ,CAACnB,YAAY;YACpCoB,iBAAiB,IAAI;YACrBC,cAAc;gBACZC,wBAAU,oBAAChC;oBAAoBiC,OAAO;wBAAEC,WAAW,CAAC,OAAO,EAAEV,mBAAmB,IAAI,CAAC;oBAAC;;gBACtF,eAAe,IAAI;YACrB;YACAI,aAAa;QACf;QACAnB,QAAQZ,KAAK8B,MAAM,CACjB;YACE,GAAG7B,uBAAuBW,QAAQ;gBAChC0B,UAAU,IAAI;gBACdJ,cAAc;oBACZhB;oBACAI;oBACA,iBAAiBH;oBACjBoB,MAAM;gBACR;YACF,EAAE;YACFC,SAASzC,iBAAiB0C,CAAAA,QAAS;gBACjC,IAAI3C,oBAAoBc,SAAS;wBAC/BA;oBAAAA,CAAAA,kBAAAA,OAAO4B,OAAO,cAAd5B,6BAAAA,KAAAA,IAAAA,gBAAAA,KAAAA,QAAiB6B;gBACnB,CAAC;gBACD,IAAI,CAACA,MAAMC,gBAAgB,EAAE;oBAC3BtB,cAAc;wBAAEH;wBAAOwB;oBAAM;gBAC/B,CAAC;YACH;QACF,GACA;YAAEV,aAAa;QAAS;IAE5B;AACF,EAAE"}

package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAccordionHeaderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  AccordionHeaderContextValue,\n  AccordionHeaderState,\n  AccordionHeaderContextValues,\n} from './AccordionHeader.types';\n\nexport function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues {\n  const { disabled, expandIconPosition, open, size } = state;\n\n  const accordionHeader = React.useMemo<AccordionHeaderContextValue>(\n    () => ({\n      disabled,\n      expandIconPosition,\n      open,\n      size,\n    }),\n    [disabled, expandIconPosition, open, size],\n  );\n\n  return { accordionHeader };\n}\n"],"names":["React","useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,SAASC,yCAAyCC,KAA2B,EAAgC;IAClH,MAAM,EAAEC,SAAQ,EAAEC,mBAAkB,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGJ;IAErD,MAAMK,kBAAkBP,MAAMQ,OAAO,CACnC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAUC;QAAoBC;QAAMC;KAAK;IAG5C,OAAO;QAAEC;IAAgB;AAC3B,CAAC"}
+{"version":3,"sources":["useAccordionHeaderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionHeaderState, AccordionHeaderContextValues } from './AccordionHeader.types';\nimport type { AccordionHeaderContextValue } from '../../contexts/accordionHeader';\n\nexport function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues {\n  const { disabled, expandIconPosition, open, size } = state;\n\n  const accordionHeader = React.useMemo<AccordionHeaderContextValue>(\n    () => ({\n      disabled,\n      expandIconPosition,\n      open,\n      size,\n    }),\n    [disabled, expandIconPosition, open, size],\n  );\n\n  return { accordionHeader };\n}\n"],"names":["React","useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yCAAyCC,KAA2B,EAAgC;IAClH,MAAM,EAAEC,SAAQ,EAAEC,mBAAkB,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGJ;IAErD,MAAMK,kBAAkBP,MAAMQ,OAAO,CACnC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAUC;QAAoBC;QAAMC;KAAK;IAG5C,OAAO;QAAEC;IAAgB;AAC3B,CAAC"}

package/lib/components/AccordionHeader/useAccordionHeaderStyles.styles.js

@@ -152,7 +152,7 @@ const useStyles = /*#__PURE__*/__styles({
     Be2twd7: "f1pp30po"
   }
 }, {
-  d: [".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f5pgtk9{min-height:44px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1nxs5xn{min-height:32px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1l02sjl{height:100%;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".flqd7gy{-webkit-flex-basis:0%;-ms-flex-preferred-size:0%;flex-basis:0%;}", ".f9c4gz4{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}"],
+  d: [".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f5pgtk9{min-height:44px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1nxs5xn{min-height:32px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".ftuwxu6{display:inline-flex;}", ".f1l02sjl{height:100%;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fqerorx{flex-grow:1;}", ".f1neuvcm{flex-shrink:1;}", ".flqd7gy{flex-basis:0%;}", ".f9c4gz4{justify-content:flex-end;}"],
   f: [".ftqa4ok:focus{outline-style:none;}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"]
 });

package/lib/components/AccordionItem/AccordionItem.types.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["AccordionItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {\n  onHeaderClick(ev: React.MouseEvent | React.KeyboardEvent): void;\n  open: boolean;\n};\n\nexport type AccordionItemContextValues = {\n  accordionItem: AccordionItemContextValue;\n};\n\nexport type AccordionItemSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionItemProps = ComponentProps<AccordionItemSlots> & {\n  /**\n   * Disables opening/closing of panel.\n   */\n  disabled?: boolean;\n  /**\n   * Required value that identifies this item inside an Accordion component.\n   */\n  value: AccordionItemValue;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["AccordionItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport type AccordionItemContextValues<Value = AccordionItemValue> = {\n  accordionItem: AccordionItemContextValue<Value>;\n};\n\nexport type AccordionItemSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {\n  /**\n   * Disables opening/closing of panel.\n   */\n  disabled?: boolean;\n  /**\n   * Required value that identifies this item inside an Accordion component.\n   */\n  value: Value;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> &\n  AccordionItemContextValue<Value>;\n"],"names":[],"mappings":"AAAA,WAyBmC"}

package/lib/components/AccordionItem/index.js

@@ -3,5 +3,4 @@ export * from './AccordionItem.types';
 export * from './renderAccordionItem';
 export * from './useAccordionItem';
 export * from './useAccordionItemContextValues';
-export * from './AccordionItemContext';
 export * from './useAccordionItemStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AccordionItem';\nexport * from './AccordionItem.types';\nexport * from './renderAccordionItem';\nexport * from './useAccordionItem';\nexport * from './useAccordionItemContextValues';\nexport * from './AccordionItemContext';\nexport * from './useAccordionItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC;AAChD,cAAc,yBAAyB;AACvC,cAAc,kCAAkC"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AccordionItem';\nexport * from './AccordionItem.types';\nexport * from './renderAccordionItem';\nexport * from './useAccordionItem';\nexport * from './useAccordionItemContextValues';\nexport * from './useAccordionItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC;AAChD,cAAc,kCAAkC"}

package/lib/components/AccordionItem/renderAccordionItem.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
-import { AccordionItemContext } from './AccordionItemContext';
+import { assertSlots } from '@fluentui/react-utilities';
+import { AccordionItemProvider } from '../../contexts/accordionItem';
 /**
  * Function that renders the final JSX of the component
  */ export const renderAccordionItem_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(AccordionItemContext.Provider, {
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(AccordionItemProvider, {
         value: contextValues.accordionItem
-    }, slotProps.root.children));
+    }, state.root.children));
 };

package/lib/components/AccordionItem/renderAccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAccordionItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AccordionItemContext } from './AccordionItemContext';\nimport type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionItem_unstable = (state: AccordionItemState, contextValues: AccordionItemContextValues) => {\n  const { slots, slotProps } = getSlotsNext<AccordionItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <AccordionItemContext.Provider value={contextValues.accordionItem}>\n        {slotProps.root.children}\n      </AccordionItemContext.Provider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AccordionItemContext","renderAccordionItem_unstable","state","contextValues","slots","slotProps","root","Provider","value","accordionItem","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,oBAAoB,QAAQ,yBAAyB;AAG9D;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC,gBAA8C;IACpH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAiCG;IAE9D,qBACE,AAfJ,cAeKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAhBN,cAgBON,qBAAqBO,QAAQ;QAACC,OAAOL,cAAcM,aAAa;OAC9DJ,UAAUC,IAAI,CAACI,QAAQ;AAIhC,EAAE"}
+{"version":3,"sources":["renderAccordionItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types';\nimport { AccordionItemProvider } from '../../contexts/accordionItem';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionItem_unstable = (state: AccordionItemState, contextValues: AccordionItemContextValues) => {\n  assertSlots<AccordionItemSlots>(state);\n\n  return (\n    <state.root>\n      <AccordionItemProvider value={contextValues.accordionItem}>{state.root.children}</AccordionItemProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","AccordionItemProvider","renderAccordionItem_unstable","state","contextValues","root","value","accordionItem","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,+BAA+B;AAErE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC,gBAA8C;IACpHJ,YAAgCG;IAEhC,qBACE,AAfJ,cAeKA,MAAME,IAAI,sBACT,AAhBN,cAgBOJ;QAAsBK,OAAOF,cAAcG,aAAa;OAAGJ,MAAME,IAAI,CAACG,QAAQ;AAGrF,EAAE"}

package/lib/components/AccordionItem/useAccordionItem.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
-import { useAccordionContext_unstable } from '../Accordion/AccordionContext';
+import { getNativeElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
+import { useAccordionContext_unstable } from '../../contexts/accordion';
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionItem properties
@@ -9,22 +9,23 @@ import { useAccordionContext_unstable } from '../Accordion/AccordionContext';
     const { value , disabled =false  } = props;
     const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
     const open = useAccordionContext_unstable((ctx)=>ctx.openItems.includes(value));
-    const onAccordionHeaderClick = React.useCallback((ev)=>requestToggle(ev, {
+    const onAccordionHeaderClick = useEventCallback((event)=>requestToggle({
+            event,
             value
-        }), [
-        requestToggle,
-        value
-    ]);
+        }));
     return {
         open,
+        value,
         disabled,
         onHeaderClick: onAccordionHeaderClick,
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
-            ref: ref,
+        root: slot.always(getNativeElementProps('div', {
+            ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/AccordionItem/useAccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAccordionItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useAccordionContext_unstable } from '../Accordion/AccordionContext';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n  props: AccordionItemProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n  const { value, disabled = false } = props;\n\n  const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n  const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n  const onAccordionHeaderClick = React.useCallback(\n    (ev: AccordionToggleEvent) => requestToggle(ev, { value }),\n    [requestToggle, value],\n  );\n\n  return {\n    open,\n    disabled,\n    onHeaderClick: onAccordionHeaderClick,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","useCallback","ev","onHeaderClick","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,4BAA4B,QAAQ,gCAAgC;AAI7E;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,MAAK,EAAEC,UAAW,KAAK,CAAA,EAAE,GAAGH;IAEpC,MAAMI,gBAAgBN,6BAA6BO,CAAAA,MAAOA,IAAID,aAAa;IAC3E,MAAME,OAAOR,6BAA6BO,CAAAA,MAAOA,IAAIE,SAAS,CAACC,QAAQ,CAACN;IACxE,MAAMO,yBAAyBb,MAAMc,WAAW,CAC9C,CAACC,KAA6BP,cAAcO,IAAI;YAAET;QAAM,IACxD;QAACE;QAAeF;KAAM;IAGxB,OAAO;QACLI;QACAH;QACAS,eAAeH;QACfI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,sBAAsB,OAAO;YACjCI,KAAKA;YACL,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAccordionItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n  props: AccordionItemProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n  const { value, disabled = false } = props;\n\n  const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n  const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n  const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value }));\n\n  return {\n    open,\n    value,\n    disabled,\n    onHeaderClick: onAccordionHeaderClick,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(getNativeElementProps('div', { ref, ...props }), { elementType: 'div' }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useEventCallback","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","event","onHeaderClick","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAG1F,SAASC,4BAA4B,QAAQ,2BAA2B;AAExE;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,MAAK,EAAEC,UAAW,KAAK,CAAA,EAAE,GAAGH;IAEpC,MAAMI,gBAAgBN,6BAA6BO,CAAAA,MAAOA,IAAID,aAAa;IAC3E,MAAME,OAAOR,6BAA6BO,CAAAA,MAAOA,IAAIE,SAAS,CAACC,QAAQ,CAACN;IACxE,MAAMO,yBAAyBZ,iBAAiB,CAACa,QAAgCN,cAAc;YAAEM;YAAOR;QAAM;IAE9G,OAAO;QACLI;QACAJ;QACAC;QACAQ,eAAeF;QACfG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CAACnB,sBAAsB,OAAO;YAAEM;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEe,aAAa;QAAM;IAC1F;AACF,EAAE"}

package/lib/components/AccordionItem/useAccordionItemContextValues.js

@@ -1,14 +1,17 @@
 import * as React from 'react';
 export function useAccordionItemContextValues_unstable(state) {
-    const { disabled , onHeaderClick , open  } = state;
+    // eslint-disable-next-line deprecation/deprecation
+    const { disabled , open , value , onHeaderClick  } = state;
     const accordionItem = React.useMemo(()=>({
             disabled,
-            onHeaderClick,
-            open
+            open,
+            value,
+            onHeaderClick
         }), [
         disabled,
-        onHeaderClick,
-        open
+        open,
+        value,
+        onHeaderClick
     ]);
     return {
         accordionItem

package/lib/components/AccordionItem/useAccordionItemContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAccordionItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionItemContextValue, AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n  const { disabled, onHeaderClick, open } = state;\n  const accordionItem = React.useMemo<AccordionItemContextValue>(\n    () => ({ disabled, onHeaderClick, open }),\n    [disabled, onHeaderClick, open],\n  );\n\n  return { accordionItem };\n}\n"],"names":["React","useAccordionItemContextValues_unstable","state","disabled","onHeaderClick","open","accordionItem","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,uCAAuCC,KAAyB,EAA8B;IAC5G,MAAM,EAAEC,SAAQ,EAAEC,cAAa,EAAEC,KAAI,EAAE,GAAGH;IAC1C,MAAMI,gBAAgBN,MAAMO,OAAO,CACjC,IAAO,CAAA;YAAEJ;YAAUC;YAAeC;QAAK,CAAA,GACvC;QAACF;QAAUC;QAAeC;KAAK;IAGjC,OAAO;QAAEC;IAAc;AACzB,CAAC"}
+{"version":3,"sources":["useAccordionItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n  // eslint-disable-next-line deprecation/deprecation\n  const { disabled, open, value, onHeaderClick } = state;\n  const accordionItem = React.useMemo<AccordionItemContextValue>(\n    () => ({ disabled, open, value, onHeaderClick }),\n    [disabled, open, value, onHeaderClick],\n  );\n\n  return { accordionItem };\n}\n"],"names":["React","useAccordionItemContextValues_unstable","state","disabled","open","value","onHeaderClick","accordionItem","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,uCAAuCC,KAAyB,EAA8B;IAC5G,mDAAmD;IACnD,MAAM,EAAEC,SAAQ,EAAEC,KAAI,EAAEC,MAAK,EAAEC,cAAa,EAAE,GAAGJ;IACjD,MAAMK,gBAAgBP,MAAMQ,OAAO,CACjC,IAAO,CAAA;YAAEL;YAAUC;YAAMC;YAAOC;QAAc,CAAA,GAC9C;QAACH;QAAUC;QAAMC;QAAOC;KAAc;IAGxC,OAAO;QAAEC;IAAc;AACzB,CAAC"}

package/lib/components/AccordionPanel/renderAccordionPanel.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Function that renders the final JSX of the component
  */ export const renderAccordionPanel_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return state.open ? /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children) : null;
+    assertSlots(state);
+    return state.open ? /*#__PURE__*/ createElement(state.root, null, state.root.children) : null;
 };

package/lib/components/AccordionPanel/renderAccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAccordionPanel.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionPanel_unstable = (state: AccordionPanelState) => {\n  const { slots, slotProps } = getSlotsNext<AccordionPanelSlots>(state);\n  return state.open ? <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root> : null;\n};\n"],"names":["createElement","getSlotsNext","renderAccordionPanel_unstable","state","slots","slotProps","open","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAkCE;IAC/D,OAAOA,MAAMG,IAAI,iBAAG,AAZtB,cAYuBF,MAAMG,IAAI,EAAKF,UAAUE,IAAI,EAAGF,UAAUE,IAAI,CAACC,QAAQ,IAAiB,IAAI;AACnG,EAAE"}
+{"version":3,"sources":["renderAccordionPanel.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionPanel_unstable = (state: AccordionPanelState) => {\n  assertSlots<AccordionPanelSlots>(state);\n  return state.open ? <state.root>{state.root.children}</state.root> : null;\n};\n"],"names":["createElement","assertSlots","renderAccordionPanel_unstable","state","open","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3EF,YAAiCE;IACjC,OAAOA,MAAMC,IAAI,iBAAG,AAZtB,cAYuBD,MAAME,IAAI,QAAEF,MAAME,IAAI,CAACC,QAAQ,IAAiB,IAAI;AAC3E,EAAE"}

package/lib/components/AccordionPanel/useAccordionPanel.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
-import { useAccordionItemContext_unstable } from '../AccordionItem/index';
-import { useAccordionContext_unstable } from '../Accordion/AccordionContext';
+import { useAccordionContext_unstable } from '../../contexts/accordion';
+import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionPanel properties
@@ -20,10 +20,12 @@ import { useAccordionContext_unstable } from '../Accordion/AccordionContext';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props,
             ...navigation && focusableProps
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/AccordionPanel/useAccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAccordionPanel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { useAccordionContext_unstable } from '../Accordion/AccordionContext';\nimport type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n  props: AccordionPanelProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n  const { open } = useAccordionItemContext_unstable();\n  const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n  const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n      ...(navigation && focusableProps),\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useTabsterAttributes","useAccordionItemContext_unstable","useAccordionContext_unstable","useAccordionPanel_unstable","props","ref","open","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,gCAAgC,QAAQ,yBAAyB;AAC1E,SAASC,4BAA4B,QAAQ,gCAAgC;AAG7E;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,KAAI,EAAE,GAAGL;IACjB,MAAMM,iBAAiBP,qBAAqB;QAAEQ,WAAW;YAAEC,kBAAkB,IAAI;QAAC;IAAE;IACpF,MAAMC,aAAaR,6BAA6BS,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACLJ;QACAM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,sBAAsB,OAAO;YACjCM;YACA,GAAGD,KAAK;YACR,GAAIM,cAAcH,cAAc;QAClC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAccordionPanel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n  props: AccordionPanelProps,\n  ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n  const { open } = useAccordionItemContext_unstable();\n  const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n  const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n        ...(navigation && focusableProps),\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useTabsterAttributes","useAccordionContext_unstable","useAccordionItemContext_unstable","useAccordionPanel_unstable","props","ref","open","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,4BAA4B,QAAQ,2BAA2B;AAExE,SAASC,gCAAgC,QAAQ,+BAA+B;AAEhF;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,KAAI,EAAE,GAAGJ;IACjB,MAAMK,iBAAiBP,qBAAqB;QAAEQ,WAAW;YAAEC,kBAAkB,IAAI;QAAC;IAAE;IACpF,MAAMC,aAAaT,6BAA6BU,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACLJ;QACAM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,KAAKe,MAAM,CACfhB,sBAAsB,OAAO;YAC3BO;YACA,GAAGD,KAAK;YACR,GAAIM,cAAcH,cAAc;QAClC,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/{components/Accordion/AccordionContext.js → contexts/accordion.js}

@@ -1,10 +1,12 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-export const AccordionContext = createContext(undefined);
+const AccordionContext = createContext(undefined);
 const accordionContextDefaultValue = {
     openItems: [],
     collapsible: false,
+    multiple: false,
+    navigation: undefined,
     requestToggle () {
     /* noop */ }
 };
-export const AccordionProvider = AccordionContext.Provider;
+export const { Provider: AccordionProvider  } = AccordionContext;
 export const useAccordionContext_unstable = (selector)=>useContextSelector(AccordionContext, (ctx = accordionContextDefaultValue)=>selector(ctx));

package/lib/contexts/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["accordion.ts"],"sourcesContent":["import { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { AccordionItemValue } from '../AccordionItem';\nimport { AccordionToggleData, AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionRequestToggleData<Value = AccordionItemValue> = { event: AccordionToggleEvent } & Pick<\n  AccordionToggleData<Value>,\n  'value'\n>;\n\nexport type AccordionContextValue<Value = AccordionItemValue> = {\n  /**\n   * The list of opened panels by index\n   */\n  openItems: AccordionItemValue[];\n  /**\n   * Callback used by AccordionItem to request a change on it's own opened state\n   * Should be used to toggle AccordionItem\n   */\n  requestToggle: (data: AccordionRequestToggleData<Value>) => void;\n  collapsible: boolean;\n  multiple: boolean;\n  navigation: 'linear' | 'circular' | undefined;\n};\n\nconst AccordionContext = createContext<AccordionContextValue | undefined>(undefined) as Context<AccordionContextValue>;\n\nconst accordionContextDefaultValue: AccordionContextValue = {\n  openItems: [],\n  collapsible: false,\n  multiple: false,\n  navigation: undefined,\n  requestToggle() {\n    /* noop */\n  },\n};\n\nexport const { Provider: AccordionProvider } = AccordionContext;\nexport const useAccordionContext_unstable = <T>(selector: ContextSelector<AccordionContextValue, T>): T =>\n  useContextSelector(AccordionContext, (ctx = accordionContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AccordionContext","undefined","accordionContextDefaultValue","openItems","collapsible","multiple","navigation","requestToggle","Provider","AccordionProvider","useAccordionContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAmBC,kBAAkB,QAAQ,mCAAmC;AAyBtG,MAAMC,mBAAmBF,cAAiDG;AAE1E,MAAMC,+BAAsD;IAC1DC,WAAW,EAAE;IACbC,aAAa,KAAK;IAClBC,UAAU,KAAK;IACfC,YAAYL;IACZM,iBAAgB;IACd,QAAQ,GACV;AACF;AAEA,OAAO,MAAM,EAAEC,UAAUC,kBAAiB,EAAE,GAAGT,iBAAiB;AAChE,OAAO,MAAMU,+BAA+B,CAAIC,WAC9CZ,mBAAmBC,kBAAkB,CAACY,MAAMV,4BAA4B,GAAKS,SAASC,MAAM"}

package/lib/contexts/accordionHeader.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+const AccordionHeaderContext = React.createContext(undefined);
+const accordionHeaderContextDefaultValue = {
+    open: false,
+    disabled: false,
+    size: 'medium',
+    expandIconPosition: 'start'
+};
+export const { Provider: AccordionHeaderProvider  } = AccordionHeaderContext;
+var _React_useContext;
+export const useAccordionHeaderContext_unstable = ()=>(_React_useContext = React.useContext(AccordionHeaderContext)) !== null && _React_useContext !== void 0 ? _React_useContext : accordionHeaderContextDefaultValue;

package/lib/contexts/accordionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["accordionHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderSize,\n} from '../components/AccordionHeader/AccordionHeader.types';\n\nexport type AccordionHeaderContextValue = {\n  disabled: boolean;\n  open: boolean;\n  expandIconPosition: AccordionHeaderExpandIconPosition;\n  size: AccordionHeaderSize;\n};\n\nconst AccordionHeaderContext = React.createContext<AccordionHeaderContextValue | undefined>(\n  undefined,\n) as React.Context<AccordionHeaderContextValue>;\n\nconst accordionHeaderContextDefaultValue = {\n  open: false,\n  disabled: false,\n  size: 'medium',\n  expandIconPosition: 'start',\n};\n\nexport const { Provider: AccordionHeaderProvider } = AccordionHeaderContext;\n\nexport const useAccordionHeaderContext_unstable = () =>\n  React.useContext(AccordionHeaderContext) ?? accordionHeaderContextDefaultValue;\n"],"names":["React","AccordionHeaderContext","createContext","undefined","accordionHeaderContextDefaultValue","open","disabled","size","expandIconPosition","Provider","AccordionHeaderProvider","useAccordionHeaderContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAa/B,MAAMC,yBAAyBD,MAAME,aAAa,CAChDC;AAGF,MAAMC,qCAAqC;IACzCC,MAAM,KAAK;IACXC,UAAU,KAAK;IACfC,MAAM;IACNC,oBAAoB;AACtB;AAEA,OAAO,MAAM,EAAEC,UAAUC,wBAAuB,EAAE,GAAGT,uBAAuB;IAG1ED;AADF,OAAO,MAAMW,qCAAqC,IAChDX,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,qCAAjBD,+BAAAA,oBAA4CI,kCAAkC,CAAC"}

package/lib/{components/AccordionItem/AccordionItemContext.js → contexts/accordionItem.js}

@@ -1,11 +1,12 @@
 import * as React from 'react';
-export const AccordionItemContext = React.createContext(undefined);
+const AccordionItemContext = React.createContext(undefined);
 const accordionItemContextDefaultValue = {
-    onHeaderClick () {
-    /** */ },
     open: false,
-    disabled: false
+    disabled: false,
+    value: undefined,
+    onHeaderClick () {
+    /* noop */ }
 };
-export const AccordionItemProvider = AccordionItemContext.Provider;
+export const { Provider: AccordionItemProvider  } = AccordionItemContext;
 var _React_useContext;
 export const useAccordionItemContext_unstable = ()=>(_React_useContext = React.useContext(AccordionItemContext)) !== null && _React_useContext !== void 0 ? _React_useContext : accordionItemContextDefaultValue;

package/lib/contexts/accordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["accordionItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { AccordionItemValue } from '../AccordionItem';\nimport { AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionItemContextValue<Value = AccordionItemValue> = {\n  open: boolean;\n  disabled: boolean;\n  value: Value;\n  /**\n   * @deprecated - use `requestToggle` from AccordionContent instead\n   */\n  onHeaderClick(event: AccordionToggleEvent): void;\n};\n\nconst AccordionItemContext = React.createContext<AccordionItemContextValue<unknown> | undefined>(\n  undefined,\n) as React.Context<AccordionItemContextValue<unknown>>;\n\nconst accordionItemContextDefaultValue: AccordionItemContextValue<unknown> = {\n  open: false,\n  disabled: false,\n  value: undefined,\n  onHeaderClick() {\n    /* noop */\n  },\n};\n\nexport const { Provider: AccordionItemProvider } = AccordionItemContext;\n\nexport const useAccordionItemContext_unstable = () =>\n  React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;\n"],"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","open","disabled","value","onHeaderClick","Provider","AccordionItemProvider","useAccordionItemContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAc/B,MAAMC,uBAAuBD,MAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAAuE;IAC3EC,MAAM,KAAK;IACXC,UAAU,KAAK;IACfC,OAAOJ;IACPK,iBAAgB;IACd,QAAQ,GACV;AACF;AAEA,OAAO,MAAM,EAAEC,UAAUC,sBAAqB,EAAE,GAAGT,qBAAqB;IAGtED;AADF,OAAO,MAAMW,mCAAmC,IAC9CX,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,mCAAjBD,+BAAAA,oBAA0CI,gCAAgC,CAAC"}

package/lib/index.js

@@ -1,4 +1,7 @@
-export { Accordion, AccordionProvider, accordionClassNames, renderAccordion_unstable, useAccordionContext_unstable, useAccordionContextValues_unstable, useAccordionStyles_unstable, useAccordion_unstable } from './Accordion';
-export { AccordionItem, AccordionItemProvider, accordionItemClassNames, renderAccordionItem_unstable, useAccordionItemContextValues_unstable, useAccordionItemContext_unstable, useAccordionItemStyles_unstable, useAccordionItem_unstable } from './AccordionItem';
-export { AccordionHeader, accordionHeaderClassNames, AccordionHeaderContextProvider, renderAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionHeader_unstable, useAccordionHeaderContext as useAccordionHeaderContext_unstable } from './AccordionHeader';
+export { Accordion, accordionClassNames, renderAccordion_unstable, useAccordionContextValues_unstable, useAccordionStyles_unstable, useAccordion_unstable } from './Accordion';
+export { AccordionItem, accordionItemClassNames, renderAccordionItem_unstable, useAccordionItemContextValues_unstable, useAccordionItemStyles_unstable, useAccordionItem_unstable } from './AccordionItem';
+export { AccordionHeader, accordionHeaderClassNames, renderAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionHeader_unstable } from './AccordionHeader';
 export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable, useAccordionPanelStyles_unstable, useAccordionPanel_unstable } from './AccordionPanel';
+export { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';
+export { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';
+export { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Accordion,\n  AccordionProvider,\n  accordionClassNames,\n  renderAccordion_unstable,\n  useAccordionContext_unstable,\n  useAccordionContextValues_unstable,\n  useAccordionStyles_unstable,\n  useAccordion_unstable,\n} from './Accordion';\nexport type {\n  AccordionContextValue,\n  AccordionContextValues,\n  AccordionIndex,\n  AccordionProps,\n  AccordionSlots,\n  AccordionState,\n  AccordionToggleData,\n  AccordionToggleEvent,\n  AccordionToggleEventHandler,\n} from './Accordion';\nexport {\n  AccordionItem,\n  AccordionItemProvider,\n  accordionItemClassNames,\n  renderAccordionItem_unstable,\n  useAccordionItemContextValues_unstable,\n  useAccordionItemContext_unstable,\n  useAccordionItemStyles_unstable,\n  useAccordionItem_unstable,\n} from './AccordionItem';\nexport type {\n  AccordionItemContextValue,\n  AccordionItemContextValues,\n  AccordionItemProps,\n  AccordionItemSlots,\n  AccordionItemState,\n  AccordionItemValue,\n} from './AccordionItem';\nexport {\n  AccordionHeader,\n  accordionHeaderClassNames,\n  AccordionHeaderContextProvider,\n  renderAccordionHeader_unstable,\n  useAccordionHeaderContextValues_unstable,\n  useAccordionHeaderStyles_unstable,\n  useAccordionHeader_unstable,\n  useAccordionHeaderContext as useAccordionHeaderContext_unstable,\n} from './AccordionHeader';\nexport type {\n  AccordionHeaderContextValue,\n  AccordionHeaderContextValues,\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderProps,\n  AccordionHeaderSize,\n  AccordionHeaderSlots,\n  AccordionHeaderState,\n} from './AccordionHeader';\nexport {\n  AccordionPanel,\n  accordionPanelClassNames,\n  renderAccordionPanel_unstable,\n  useAccordionPanelStyles_unstable,\n  useAccordionPanel_unstable,\n} from './AccordionPanel';\nexport type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel';\n"],"names":["Accordion","AccordionProvider","accordionClassNames","renderAccordion_unstable","useAccordionContext_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","AccordionItem","AccordionItemProvider","accordionItemClassNames","renderAccordionItem_unstable","useAccordionItemContextValues_unstable","useAccordionItemContext_unstable","useAccordionItemStyles_unstable","useAccordionItem_unstable","AccordionHeader","accordionHeaderClassNames","AccordionHeaderContextProvider","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","useAccordionHeaderContext","useAccordionHeaderContext_unstable","AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,iBAAiB,EACjBC,mBAAmB,EACnBC,wBAAwB,EACxBC,4BAA4B,EAC5BC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAYrB,SACEC,aAAa,EACbC,qBAAqB,EACrBC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,gCAAgC,EAChCC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AASzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,EAC3BC,6BAA6BC,kCAAkC,QAC1D,oBAAoB;AAU3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Accordion,\n  accordionClassNames,\n  renderAccordion_unstable,\n  useAccordionContextValues_unstable,\n  useAccordionStyles_unstable,\n  useAccordion_unstable,\n} from './Accordion';\nexport type {\n  AccordionContextValues,\n  AccordionIndex,\n  AccordionProps,\n  AccordionSlots,\n  AccordionState,\n  AccordionToggleData,\n  AccordionToggleEvent,\n  AccordionToggleEventHandler,\n} from './Accordion';\nexport {\n  AccordionItem,\n  accordionItemClassNames,\n  renderAccordionItem_unstable,\n  useAccordionItemContextValues_unstable,\n  useAccordionItemStyles_unstable,\n  useAccordionItem_unstable,\n} from './AccordionItem';\nexport type {\n  AccordionItemContextValues,\n  AccordionItemProps,\n  AccordionItemSlots,\n  AccordionItemState,\n  AccordionItemValue,\n} from './AccordionItem';\nexport {\n  AccordionHeader,\n  accordionHeaderClassNames,\n  renderAccordionHeader_unstable,\n  useAccordionHeaderContextValues_unstable,\n  useAccordionHeaderStyles_unstable,\n  useAccordionHeader_unstable,\n} from './AccordionHeader';\nexport type {\n  AccordionHeaderContextValues,\n  AccordionHeaderExpandIconPosition,\n  AccordionHeaderProps,\n  AccordionHeaderSize,\n  AccordionHeaderSlots,\n  AccordionHeaderState,\n} from './AccordionHeader';\nexport {\n  AccordionPanel,\n  accordionPanelClassNames,\n  renderAccordionPanel_unstable,\n  useAccordionPanelStyles_unstable,\n  useAccordionPanel_unstable,\n} from './AccordionPanel';\nexport type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel';\n\nexport { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';\n\nexport type { AccordionContextValue } from './contexts/accordion';\n\nexport { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';\n\nexport type { AccordionItemContextValue } from './contexts/accordionItem';\n\nexport { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';\n\nexport type { AccordionHeaderContextValue } from './contexts/accordionHeader';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","AccordionItem","accordionItemClassNames","renderAccordionItem_unstable","useAccordionItemContextValues_unstable","useAccordionItemStyles_unstable","useAccordionItem_unstable","AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","AccordionProvider","useAccordionContext_unstable","AccordionItemProvider","useAccordionItemContext_unstable","AccordionHeaderProvider","useAccordionHeaderContext_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAWrB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAQzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAS3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SAASC,iBAAiB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAIvF,SAASC,qBAAqB,EAAEC,gCAAgC,QAAQ,2BAA2B;AAInG,SAASC,uBAAuB,EAAEC,kCAAkC,QAAQ,6BAA6B"}

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

@@ -9,4 +9,3 @@ _exportStar(require("./renderAccordion"), exports);
 _exportStar(require("./useAccordion"), exports);
 _exportStar(require("./useAccordionStyles.styles"), exports);
 _exportStar(require("./useAccordionContextValues"), exports);
-_exportStar(require("./AccordionContext"), exports);

package/lib-commonjs/components/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles.styles';\nexport * from './useAccordionContextValues';\nexport * from './AccordionContext';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles.styles';\nexport * from './useAccordionContextValues';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA"}

package/lib-commonjs/components/Accordion/renderAccordion.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "renderAccordion_unstable", {
 });
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
-const _accordionContext = require("./AccordionContext");
+const _accordion = require("../../contexts/accordion");
 const renderAccordion_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_accordionContext.AccordionContext.Provider, {
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_accordion.AccordionProvider, {
         value: contextValues.accordion
-    }, slotProps.root.children));
+    }, state.root.children));
 };

package/lib-commonjs/components/Accordion/renderAccordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAccordion.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AccordionContext } from './AccordionContext';\n/**\n * Function that renders the final JSX of the component\n */ export const renderAccordion_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(AccordionContext.Provider, {\n        value: contextValues.accordion\n    }, slotProps.root.children));\n};\n"],"names":["renderAccordion_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","AccordionContext","Provider","value","accordion","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;kCACI;AAGtB,MAAMA,2BAA2B,CAACC,OAAOC,gBAAgB;IAChE,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,kCAAgB,CAACC,QAAQ,EAAE;QAClHC,OAAOR,cAAcS,SAAS;IAClC,GAAGP,UAAUG,IAAI,CAACK,QAAQ;AAC9B"}
+{"version":3,"sources":["renderAccordion.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { AccordionProvider } from '../../contexts/accordion';\n/**\n * Function that renders the final JSX of the component\n */ export const renderAccordion_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(AccordionProvider, {\n        value: contextValues.accordion\n    }, state.root.children));\n};\n"],"names":["renderAccordion_unstable","state","contextValues","assertSlots","createElement","root","AccordionProvider","value","accordion","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;2BACM;AAGvB,MAAMA,2BAA2B,CAACC,OAAOC,gBAAgB;IAChEC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,4BAAiB,EAAE;QAChGC,OAAOL,cAAcM,SAAS;IAClC,GAAGP,MAAMI,IAAI,CAACI,QAAQ;AAC1B"}

package/lib-commonjs/components/Accordion/useAccordion.js

@@ -26,22 +26,29 @@ const useAccordion_unstable = (props, ref)=>{
         circular: navigation === 'circular',
         tabbable: true
     });
-    const requestToggle = (0, _reactUtilities.useEventCallback)((event, data)=>{
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
-        setOpenItems((previousOpenItems)=>updateOpenItems(data.value, previousOpenItems, multiple, collapsible));
+    const requestToggle = (0, _reactUtilities.useEventCallback)((data)=>{
+        const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(data.event, {
+            value: data.value,
+            openItems: nextOpenItems
+        });
+        setOpenItems(nextOpenItems);
     });
     return {
         collapsible,
+        multiple,
         navigation,
         openItems,
         requestToggle,
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ...props,
-            ...navigation ? arrowNavigationProps : {},
+            ...navigation ? arrowNavigationProps : undefined,
             ref
+        }), {
+            elementType: 'div'
         })
     };
 };