@fluentui/react-accordion 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.11

package/Spec.md

@@ -37,9 +37,10 @@ The root level component serves context and common API between all children.
 export type AccordionProps = ComponentProps &
   React.HTMLAttributes<HTMLElement> & {
     /**
-     * Indicates if keyboard navigation is available
+     * Indicates if keyboard navigation is available and gives two options,
+     * linear or circular navigation
      */
-    navigable?: boolean;
+    navigation?: 'linear' | 'circular';
     /**
      * Indicates if Accordion support multiple Panels opened at the same time
      */
@@ -410,6 +411,37 @@ As a general rule, once the accordion is closed the focus should return to the h
 | Keyboard | Home       | Moves Focus | Moves focus to the first panel heading                      |
 | Keyboard | End        | Moves Focus | Moves focus to the last panel heading                       |
 
-## Accessibiltiy
+## Accessibility
 
-Accessibility behaviour is built into the spec as much as possible. This section addresses specific issues that don't fit well with the standard definition of the component.
+Accessibility behavior is built into the spec as much as possible. This section addresses specific issues that don't fit well with the standard definition of the component.
+
+### No heading level on `AccordionHeader` by default
+
+As described on [WAI-ARIA Roles, States, and Properties](https://www.w3.org/TR/wai-aria-practices/#wai-aria-roles-states-and-properties) documentation for accordion:
+
+> Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
+
+Every `AccordionHeader` should have as its root a semantic heading element: `h1`, `h2`, `h3`, `h4`, `h5` or `h6`. Alternatively `role="heading"` and a proper `aria-level` attribute. This behavior is not implemented by default on `AccordionHeader` as it's impossible to predict which heading level will be required by the user. Requiring manual addition of such ARIA requirement.
+
+```tsx
+{/* No heading level by default */}
+<AccordionHeader>This is a header</AccordionHeader>
+{/* Generated html */}
+<div>
+  <button>This is a header</button>
+</div>
+
+{/* as semantic heading */}
+<AccordionHeader as="h4">This is a header</AccordionHeader>
+{/* Generated html */}
+<h4>
+  <button>This is a header</button>
+</h4>
+
+{/* if no semantic heading can be used */}
+<AccordionHeader role="heading" aria-level="4">This is a header</AccordionHeader>
+{/* Generated html */}
+<div role="heading" aria-level="4">
+  <button>This is a header</button>
+</h4>
+```

package/dist/{react-accordion.d.ts → index.d.ts}

@@ -1,35 +1,23 @@
-import type { ARIAButtonShorthandProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import type { Context } from '@fluentui/react-context-selector';
+import { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import type { ObjectShorthandProps } from '@fluentui/react-utilities';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * Define a styled Accordion, using the `useAccordion` and `useAccordionStyles` hooks.
+ * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
  */
 export declare const Accordion: ForwardRefComponent<AccordionProps>;
 
-export declare type AccordionCommons = {
-    /**
-     * Indicates if keyboard navigation is available
-     */
-    navigable: boolean;
-    /**
-     * Indicates if Accordion support multiple Panels opened at the same time
-     */
-    multiple: boolean;
-    /**
-     * Indicates if Accordion support multiple Panels closed at the same time
-     */
-    collapsible: boolean;
-};
+export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
 
-export declare const AccordionContext: Context<AccordionContextValue>;
-
-export declare type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {
+export declare type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
     /**
      * The list of opened panels by index
      */
@@ -46,128 +34,112 @@ export declare type AccordionContextValues = {
 };
 
 /**
- * Define a styled AccordionHeader, using the `useAccordionHeader` and `useAccordionHeaderStyles` hooks.
+ * Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
+ * hooks.
  */
 export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 
-export declare type AccordionHeaderCommons = {
-    /**
-     * Size of spacing in the heading
-     */
-    size: AccordionHeaderSize;
-    /**
-     * The position of the expand  icon slot in heading
-     */
-    expandIconPosition: AccordionHeaderExpandIconPosition;
-    /**
-     * Indicates if the AccordionHeader should be rendered inline
-     */
-    inline: boolean;
-};
+export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
 
-export declare type AccordionHeaderContextValue = {
+export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
     disabled: boolean;
     open: boolean;
-    expandIconPosition: AccordionHeaderExpandIconPosition;
-    size: AccordionHeaderSize;
 };
 
 export declare type AccordionHeaderContextValues = {
     accordionHeader: AccordionHeaderContextValue;
 };
 
-export declare const AccordionHeaderExpandIcon: ForwardRefComponent<AccordionHeaderExpandIconProps>;
-
 export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
 
-export declare type AccordionHeaderExpandIconProps = IntrinsicShorthandProps<'span'>;
-
-export declare type AccordionHeaderProps = ComponentProps<AccordionHeaderSlots> & Partial<AccordionHeaderCommons>;
-
-/**
- * Const listing which props are shorthand props.
- */
-export declare const accordionHeaderShorthandProps: Array<keyof AccordionHeaderSlots>;
+export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
+    /**
+     * The position of the expand  icon slot in heading
+     */
+    expandIconPosition?: AccordionHeaderExpandIconPosition;
+    /**
+     * Indicates if the AccordionHeader should be rendered inline
+     */
+    inline?: boolean;
+    /**
+     * Size of spacing in the heading
+     */
+    size?: AccordionHeaderSize;
+};
 
 export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
 
 export declare type AccordionHeaderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    /**
+     * The element wrapping the button. By default this is a div, but can be a heading.
+     */
+    root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
     /**
      * The component to be used as button in heading
      */
-    button: ARIAButtonShorthandProps;
+    button: NonNullable<Slot<ARIAButtonSlotProps>>;
     /**
      * Expand icon slot rendered before (or after) children content in heading
      */
-    expandIcon: AccordionHeaderExpandIconProps;
+    expandIcon: Slot<'span'>;
     /**
      * Expand icon slot rendered before (or after) children content in heading
      */
-    icon?: IntrinsicShorthandProps<'div'>;
-    children: ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
+    icon?: Slot<'div'>;
 };
 
-export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & AccordionHeaderCommons & AccordionHeaderContextValue;
+export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
 
 export declare type AccordionIndex = number | number[];
 
 /**
- * Define a styled AccordionItem, using the `useAccordionItem` and `useAccordionItemStyles` hooks.
+ * Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
  */
 export declare const AccordionItem: ForwardRefComponent<AccordionItemProps>;
 
-export declare type AccordionItemCommons = {
-    /**
-     * Disables opening/closing of panel
-     */
-    disabled: boolean;
-    /**
-     * required value that identifies this item inside an Accordion component
-     */
-    value: AccordionItemValue;
-};
-
-export declare const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
+export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
 
-export declare type AccordionItemContextValue = Omit<AccordionItemCommons, 'value'> & {
-    open: boolean;
+export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
     onHeaderClick(ev: React_2.MouseEvent | React_2.KeyboardEvent): void;
+    open: boolean;
 };
 
 export declare type AccordionItemContextValues = {
     accordionItem: AccordionItemContextValue;
 };
 
-export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & Partial<AccordionItemCommons> & Pick<AccordionItemCommons, 'value'>;
+export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
+    /**
+     * Disables opening/closing of panel
+     */
+    disabled?: boolean;
+    /**
+     * required value that identifies this item inside an Accordion component
+     */
+    value: AccordionItemValue;
+};
 
-/**
- * Const listing which props are shorthand props.
- */
-export declare const accordionItemShorthandProps: Array<keyof AccordionItemSlots>;
+export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue>;
 
 export declare type AccordionItemSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
-export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemCommons & AccordionItemContextValue;
+export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
 
 export declare type AccordionItemValue = unknown;
 
 /**
- * Define a styled AccordionPanel, using the `useAccordionPanel` and `useAccordionPanelStyles` hooks.
+ * Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.
  */
 export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
 
-export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
+export declare const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots>;
 
-/**
- * Const listing which props are shorthand props.
- */
-export declare const accordionPanelShorthandProps: Array<keyof AccordionPanelSlots>;
+export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
 
 export declare type AccordionPanelSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
@@ -177,25 +149,38 @@ export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> &
     open: boolean;
 };
 
-export declare type AccordionProps = ComponentProps<AccordionSlots> & Partial<AccordionCommons> & {
-    /**
-     * Controls the state of the panel
-     */
-    openItems?: AccordionItemValue | AccordionItemValue[];
+export declare type AccordionProps = ComponentProps<AccordionSlots> & {
     /**
      * Default value for the uncontrolled state of the panel
      */
     defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
+    /**
+     * Indicates if Accordion support multiple Panels closed at the same time
+     */
+    collapsible?: boolean;
+    /**
+     * Indicates if Accordion support multiple Panels opened at the same time
+     */
+    multiple?: boolean;
+    /**
+     * Indicates if keyboard navigation is available and gives two options,
+     * linear or circular navigation
+     */
+    navigation?: 'linear' | 'circular';
     onToggle?: AccordionToggleEventHandler;
+    /**
+     * Controls the state of the panel
+     */
+    openItems?: AccordionItemValue | AccordionItemValue[];
 };
 
-export declare const accordionShorthandProps: Array<keyof AccordionSlots>;
+export declare const AccordionProvider: Provider<AccordionContextValue> & FC<ProviderProps<AccordionContextValue>>;
 
 export declare type AccordionSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
-export declare type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;
+export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
 
 export declare type AccordionToggleData = {
     value: AccordionItemValue;
@@ -208,63 +193,69 @@ export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent,
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordion: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;
+export declare const renderAccordion_unstable: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordionHeader: (state: AccordionHeaderState, contextValues: AccordionHeaderContextValues) => JSX.Element;
+export declare const renderAccordionHeader_unstable: (state: AccordionHeaderState, contextValues: AccordionHeaderContextValues) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordionItem: (state: AccordionItemState, contextValues: AccordionItemContextValues) => JSX.Element;
+export declare const renderAccordionItem_unstable: (state: AccordionItemState, contextValues: AccordionItemContextValues) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordionPanel: (state: AccordionPanelState) => JSX.Element | null;
+export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSX.Element | null;
 
 /**
  * Returns the props and state required to render the component
  * @param props - Accordion properties
  * @param ref - reference to root HTMLElement of Accordion
  */
-export declare const useAccordion: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
+export declare const useAccordion_unstable: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
+
+export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
 
-export declare function useAccordionContextValues(state: AccordionState): AccordionContextValues;
+export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
 
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionHeader properties
  * @param ref - reference to root HTMLElement of AccordionHeader
  */
-export declare const useAccordionHeader: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
+export declare const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
 
-export declare function useAccordionHeaderContextValues(state: AccordionHeaderState): AccordionHeaderContextValues;
+export declare function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues;
 
 /** Applies style classnames to slots */
-export declare const useAccordionHeaderStyles: (state: AccordionHeaderState) => AccordionHeaderState;
+export declare const useAccordionHeaderStyles_unstable: (state: AccordionHeaderState) => AccordionHeaderState;
 
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionItem properties
  * @param ref - reference to root HTMLElement of AccordionItem
  */
-export declare const useAccordionItem: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
+export declare const useAccordionItem_unstable: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
 
-export declare const useAccordionItemContext: () => AccordionItemContextValue;
+export declare const useAccordionItemContext_unstable: () => AccordionItemContextValue;
 
-export declare function useAccordionItemContextValues(state: AccordionItemState): AccordionItemContextValues;
+export declare function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues;
+
+export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState;
 
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionPanel properties
  * @param ref - reference to root HTMLElement of AccordionPanel
  */
-export declare const useAccordionPanel: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
+export declare const useAccordionPanel_unstable: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
 
 /** Applies style classnames to slots */
-export declare const useAccordionPanelStyles: (state: AccordionPanelState) => AccordionPanelState;
+export declare const useAccordionPanelStyles_unstable: (state: AccordionPanelState) => AccordionPanelState;
+
+export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState;
 
 export { }

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"Accordion.js","sourceRoot":"../src/","sources":["Accordion.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './components/Accordion/index';\n"]}

package/lib/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../src/AccordionHeader.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"AccordionHeader.js","sourceRoot":"../src/","sources":["AccordionHeader.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/AccordionHeader/index';\n"]}

package/lib/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
+{"version":3,"file":"AccordionItem.js","sourceRoot":"../src/","sources":["AccordionItem.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/AccordionItem/index';\n"]}

package/lib/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../src/AccordionPanel.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"AccordionPanel.js","sourceRoot":"../src/","sources":["AccordionPanel.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/AccordionPanel/index';\n"]}

package/lib/components/Accordion/Accordion.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { renderAccordion } from './renderAccordion';
-import { useAccordion } from './useAccordion';
-import { useAccordionContextValues } from './useAccordionContextValues';
+import { renderAccordion_unstable } from './renderAccordion';
+import { useAccordion_unstable } from './useAccordion';
+import { useAccordionContextValues_unstable } from './useAccordionContextValues';
+import { useAccordionStyles_unstable } from './useAccordionStyles';
 /**
- * Define a styled Accordion, using the `useAccordion` and `useAccordionStyles` hooks.
+ * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
  */
 
-export var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useAccordion(props, ref);
-  var contextValues = useAccordionContextValues(state);
-  return renderAccordion(state, contextValues);
+export const Accordion = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAccordion_unstable(props, ref);
+  const contextValues = useAccordionContextValues_unstable(state);
+  useAccordionStyles_unstable(state);
+  return renderAccordion_unstable(state, contextValues);
 });
 Accordion.displayName = 'Accordion';
 //# sourceMappingURL=Accordion.js.map

package/lib/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,yBAAT,QAA0C,6BAA1C;AAIA;;AAEG;;AACH,OAAO,IAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAC5D,UAAC,KAAD,EAAQ,GAAR,EAAW;AACT,MAAM,KAAK,GAAG,YAAY,CAAC,KAAD,EAAQ,GAAR,CAA1B;AACA,MAAM,aAAa,GAAG,yBAAyB,CAAC,KAAD,CAA/C;AAEA,SAAO,eAAe,CAAC,KAAD,EAAQ,aAAR,CAAtB;AACD,CAN2D,CAAvD;AASP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourceRoot":""}
+{"version":3,"sources":["components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAGA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAC5D,CAAC,KAAD,EAAQ,GAAR,KAAe;AACb,QAAM,KAAK,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAAnC;AACA,QAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;AAEA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AAEA,SAAO,wBAAwB,CAAC,KAAD,EAAQ,aAAR,CAA/B;AACD,CAR2D,CAAvD;AAWP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourcesContent":["import * as React from 'react';\nimport { renderAccordion_unstable } from './renderAccordion';\nimport { useAccordion_unstable } from './useAccordion';\nimport { useAccordionContextValues_unstable } from './useAccordionContextValues';\nimport type { AccordionProps } from './Accordion.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAccordionStyles_unstable } from './useAccordionStyles';\n\n/**\n * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.\n */\nexport const Accordion: ForwardRefComponent<AccordionProps> = React.forwardRef<HTMLDivElement, AccordionProps>(\n  (props, ref) => {\n    const state = useAccordion_unstable(props, ref);\n    const contextValues = useAccordionContextValues_unstable(state);\n\n    useAccordionStyles_unstable(state);\n\n    return renderAccordion_unstable(state, contextValues);\n  },\n);\n\nAccordion.displayName = 'Accordion';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.types.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Accordion.types.js","sourceRoot":"../src/","sources":["components/Accordion/Accordion.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n\nexport type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> &\n  Pick<AccordionProps, 'navigation'> & {\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: (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n  };\n\nexport type AccordionContextValues = {\n  accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n  root: Slot<'div'>;\n};\n\nexport type AccordionToggleData = {\n  value: AccordionItemValue;\n};\n\nexport type AccordionProps = ComponentProps<AccordionSlots> & {\n  /**\n   * Default value for the uncontrolled state of the panel\n   */\n  defaultOpenItems?: AccordionItemValue | AccordionItemValue[];\n\n  /**\n   * Indicates if Accordion support multiple Panels closed at the same time\n   */\n  collapsible?: boolean;\n\n  /**\n   * Indicates if Accordion support multiple Panels opened at the same time\n   */\n  multiple?: boolean;\n\n  /**\n   * Indicates if keyboard navigation is available and gives two options,\n   * linear or circular navigation\n   */\n  navigation?: 'linear' | 'circular';\n\n  onToggle?: AccordionToggleEventHandler;\n\n  /**\n   * Controls the state of the panel\n   */\n  openItems?: AccordionItemValue | AccordionItemValue[];\n};\n\nexport type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;\n"]}

package/lib/components/Accordion/AccordionContext.js

@@ -1,10 +1,13 @@
-import { createContext } from '@fluentui/react-context-selector';
-export var AccordionContext = /*#__PURE__*/createContext({
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const AccordionContext = /*#__PURE__*/createContext({
   openItems: [],
-  navigable: false,
   collapsible: false,
-  requestToggle: function () {
+
+  requestToggle() {
     /* noop */
   }
+
 });
+export const AccordionProvider = AccordionContext.Provider;
+export const useAccordionContext_unstable = selector => useContextSelector(AccordionContext, selector);
 //# sourceMappingURL=AccordionContext.js.map

package/lib/components/Accordion/AccordionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,IAAM,gBAAgB,gBAAmC,aAAa,CAAwB;AACnG,EAAA,SAAS,EAAE,EADwF;AAEnG,EAAA,SAAS,EAAE,KAFwF;AAGnG,EAAA,WAAW,EAAE,KAHsF;AAInG,EAAA,aAAa,EAAA,YAAA;AACX;AACD;AANkG,CAAxB,CAAtE","sourceRoot":""}
+{"version":3,"sources":["components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAIA,OAAO,MAAM,gBAAgB,gBAAmC,aAAa,CAAwB;AACnG,EAAA,SAAS,EAAE,EADwF;AAEnG,EAAA,WAAW,EAAE,KAFsF;;AAGnG,EAAA,aAAa,GAAA;AACX;AACD;;AALkG,CAAxB,CAAtE;AAQP,OAAO,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,QAA3C;AACP,OAAO,MAAM,4BAA4B,GAAO,QAAJ,IAC1C,kBAAkB,CAAC,gBAAD,EAAmB,QAAnB,CADb","sourcesContent":["import { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AccordionContextValue } from './Accordion.types';\n\nexport const AccordionContext: Context<AccordionContextValue> = createContext<AccordionContextValue>({\n  openItems: [],\n  collapsible: false,\n  requestToggle() {\n    /* noop */\n  },\n});\n\nexport const AccordionProvider = AccordionContext.Provider;\nexport const useAccordionContext_unstable = <T>(selector: ContextSelector<AccordionContextValue, T>): T =>\n  useContextSelector(AccordionContext, selector);\n"],"sourceRoot":"../src/"}

package/lib/components/Accordion/index.js

@@ -2,6 +2,7 @@ export * from './Accordion';
 export * from './Accordion.types';
 export * from './renderAccordion';
 export * from './useAccordion';
+export * from './useAccordionStyles';
 export * from './useAccordionContextValues';
 export * from './AccordionContext';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles';\nexport * from './useAccordionContextValues';\nexport * from './AccordionContext';\n"]}

package/lib/components/Accordion/renderAccordion.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 import { AccordionContext } from './AccordionContext';
@@ -6,12 +5,13 @@ import { AccordionContext } from './AccordionContext';
  * Function that renders the final JSX of the component
  */
 
-export var renderAccordion = function (state, contextValues) {
-  var _a = getSlots(state),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(AccordionContext.Provider, {
+export const renderAccordion_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(AccordionContext.Provider, {
     value: contextValues.accordion
   }, slotProps.root.children));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Accordion/renderAccordion.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA;;AAEG;;AACH,OAAO,IAAM,eAAe,GAAG,UAAC,KAAD,EAAwB,aAAxB,EAA6D;AACpF,MAAA,EAAA,GAAuB,QAAQ,CAAiB,KAAjB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,gBAAgB,CAAC,QAAlB,EAA0B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA1B,EAA4D,SAAS,CAAC,IAAV,CAAe,QAA3E,CADF,CADF;AAKD,CARM","sourceRoot":""}
+{"version":3,"sources":["components/Accordion/renderAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AACvG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAiB,KAAjB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,gBAAgB,CAAC,QAAlB,EAA0B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA1B,EAA4D,SAAS,CAAC,IAAV,CAAe,QAA3E,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport { AccordionContext } from './AccordionContext';\nimport type { AccordionState, AccordionSlots, AccordionContextValues } from './Accordion.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordion_unstable = (state: AccordionState, contextValues: AccordionContextValues) => {\n  const { slots, slotProps } = getSlots<AccordionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <AccordionContext.Provider value={contextValues.accordion}>{slotProps.root.children}</AccordionContext.Provider>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}