@fluentui/react-accordion 0.0.0-nightlyf1be0a972820211214.1 → 0.0.0-nightlyf3017f159620220222.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +245 -25
- package/CHANGELOG.md +58 -14
- package/Spec.md +36 -4
- package/dist/react-accordion.d.ts +40 -58
- package/lib/Accordion.js.map +1 -1
- package/lib/AccordionHeader.js.map +1 -1
- package/lib/AccordionItem.js.map +1 -1
- package/lib/AccordionPanel.js.map +1 -1
- package/lib/components/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/Accordion.js +9 -9
- package/lib/components/Accordion/Accordion.js.map +1 -1
- package/lib/components/Accordion/Accordion.types.d.ts +7 -5
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/AccordionContext.js +0 -1
- package/lib/components/Accordion/AccordionContext.js.map +1 -1
- package/lib/components/Accordion/index.js.map +1 -1
- package/lib/components/Accordion/renderAccordion.d.ts +1 -1
- package/lib/components/Accordion/renderAccordion.js +1 -1
- package/lib/components/Accordion/renderAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordion.d.ts +2 -3
- package/lib/components/Accordion/useAccordion.js +17 -20
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordionContextValues.d.ts +1 -1
- package/lib/components/Accordion/useAccordionContextValues.js +3 -3
- package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib/components/Accordion/useAccordionStyles.d.ts +1 -1
- package/lib/components/Accordion/useAccordionStyles.js +2 -2
- package/lib/components/Accordion/useAccordionStyles.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.d.ts +2 -1
- package/lib/components/AccordionHeader/AccordionHeader.js +10 -9
- package/lib/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.d.ts +12 -11
- package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib/components/AccordionHeader/index.d.ts +0 -1
- package/lib/components/AccordionHeader/index.js +0 -1
- package/lib/components/AccordionHeader/index.js.map +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.d.ts +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js +4 -6
- package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.d.ts +2 -6
- package/lib/components/AccordionHeader/useAccordionHeader.js +28 -19
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.d.ts +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js +27 -45
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.d.ts +1 -1
- package/lib/components/AccordionItem/AccordionItem.js +9 -9
- package/lib/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.types.d.ts +4 -3
- package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.d.ts +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.js +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib/components/AccordionItem/index.js.map +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.d.ts +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.js +2 -3
- package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.d.ts +2 -6
- package/lib/components/AccordionItem/useAccordionItem.js +9 -13
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.d.ts +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemStyles.d.ts +1 -1
- package/lib/components/AccordionItem/useAccordionItemStyles.js +2 -2
- package/lib/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.d.ts +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.js +7 -7
- package/lib/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.d.ts +2 -2
- package/lib/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib/components/AccordionPanel/index.js.map +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.d.ts +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.js +2 -3
- package/lib/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.d.ts +2 -6
- package/lib/components/AccordionPanel/useAccordionPanel.js +6 -9
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.d.ts +1 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js +2 -2
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Accordion.js.map +1 -1
- package/lib-commonjs/AccordionHeader.js.map +1 -1
- package/lib-commonjs/AccordionItem.js.map +1 -1
- package/lib-commonjs/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.d.ts +1 -1
- package/lib-commonjs/components/Accordion/Accordion.js +5 -5
- package/lib-commonjs/components/Accordion/Accordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.types.d.ts +7 -5
- package/lib-commonjs/components/Accordion/Accordion.types.js.map +1 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js +0 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js.map +1 -1
- package/lib-commonjs/components/Accordion/index.js.map +1 -1
- package/lib-commonjs/components/Accordion/renderAccordion.d.ts +1 -1
- package/lib-commonjs/components/Accordion/renderAccordion.js +3 -3
- package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.d.ts +2 -3
- package/lib-commonjs/components/Accordion/useAccordion.js +20 -22
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.d.ts +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js +5 -5
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionStyles.d.ts +1 -1
- package/lib-commonjs/components/Accordion/useAccordionStyles.js +5 -5
- package/lib-commonjs/components/Accordion/useAccordionStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.d.ts +2 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js +6 -5
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.d.ts +12 -11
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/index.d.ts +0 -1
- package/lib-commonjs/components/AccordionHeader/index.js +0 -2
- package/lib-commonjs/components/AccordionHeader/index.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.d.ts +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js +6 -9
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.d.ts +2 -6
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +31 -20
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js +3 -3
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.d.ts +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js +34 -51
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.js +5 -5
- package/lib-commonjs/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.d.ts +4 -3
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js +3 -3
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/index.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js +4 -6
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.d.ts +2 -6
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +11 -15
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js +3 -3
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js +5 -5
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.d.ts +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js +4 -4
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.d.ts +2 -2
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/index.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.d.ts +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js +4 -6
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.d.ts +2 -6
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +8 -11
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.d.ts +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js +6 -6
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +15 -17
- package/lib/components/AccordionHeader/AccordionHeaderExpandIcon.d.ts +0 -3
- package/lib/components/AccordionHeader/AccordionHeaderExpandIcon.js +0 -41
- package/lib/components/AccordionHeader/AccordionHeaderExpandIcon.js.map +0 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderExpandIcon.d.ts +0 -3
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderExpandIcon.js +0 -50
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderExpandIcon.js.map +0 -1
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getSlots } from '@fluentui/react-utilities';
|
|
3
|
-
import { accordionItemShorthandProps } from './useAccordionItem';
|
|
4
3
|
import { AccordionItemContext } from './AccordionItemContext';
|
|
5
4
|
/**
|
|
6
5
|
* Function that renders the final JSX of the component
|
|
7
6
|
*/
|
|
8
7
|
|
|
9
|
-
export const
|
|
8
|
+
export const renderAccordionItem_unstable = (state, contextValues) => {
|
|
10
9
|
const {
|
|
11
10
|
slots,
|
|
12
11
|
slotProps
|
|
13
|
-
} = getSlots(state
|
|
12
|
+
} = getSlots(state);
|
|
14
13
|
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
15
14
|
}, /*#__PURE__*/React.createElement(AccordionItemContext.Provider, {
|
|
16
15
|
value: contextValues.accordionItem
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/renderAccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAGA;;AAEG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAAC,KAAD,EAA4B,aAA5B,KAAyE;AACnH,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAqB,KAArB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,oBAAoB,CAAC,QAAtB,EAA8B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA9B,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,CADF,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"],"sourceRoot":"../src/"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { AccordionItemProps, AccordionItemState
|
|
3
|
-
/**
|
|
4
|
-
* Const listing which props are shorthand props.
|
|
5
|
-
*/
|
|
6
|
-
export declare const accordionItemShorthandProps: Array<keyof AccordionItemSlots>;
|
|
2
|
+
import type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';
|
|
7
3
|
/**
|
|
8
4
|
* Returns the props and state required to render the component
|
|
9
5
|
* @param props - AccordionItem properties
|
|
10
6
|
* @param ref - reference to root HTMLElement of AccordionItem
|
|
11
7
|
*/
|
|
12
|
-
export declare const
|
|
8
|
+
export declare const useAccordionItem_unstable: (props: AccordionItemProps, ref: React.Ref<HTMLElement>) => AccordionItemState;
|
|
@@ -1,28 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
3
|
-
import {
|
|
3
|
+
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
4
4
|
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
5
5
|
import { AccordionContext } from '../Accordion/AccordionContext';
|
|
6
|
-
/**
|
|
7
|
-
* Const listing which props are shorthand props.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
export const accordionItemShorthandProps = ['root'];
|
|
11
6
|
/**
|
|
12
7
|
* Returns the props and state required to render the component
|
|
13
8
|
* @param props - AccordionItem properties
|
|
14
9
|
* @param ref - reference to root HTMLElement of AccordionItem
|
|
15
10
|
*/
|
|
16
11
|
|
|
17
|
-
export const
|
|
12
|
+
export const useAccordionItem_unstable = (props, ref) => {
|
|
18
13
|
const {
|
|
19
14
|
value,
|
|
20
15
|
disabled = false
|
|
21
16
|
} = props;
|
|
22
|
-
const
|
|
23
|
-
const
|
|
24
|
-
groupper: {}
|
|
25
|
-
});
|
|
17
|
+
const navigation = useContextSelector(AccordionContext, ctx => ctx.navigation);
|
|
18
|
+
const focusableProps = useFocusableGroup();
|
|
26
19
|
const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);
|
|
27
20
|
const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));
|
|
28
21
|
const onAccordionHeaderClick = React.useCallback(ev => requestToggle(ev, {
|
|
@@ -33,10 +26,13 @@ export const useAccordionItem = (props, ref) => {
|
|
|
33
26
|
value,
|
|
34
27
|
disabled,
|
|
35
28
|
onHeaderClick: onAccordionHeaderClick,
|
|
29
|
+
components: {
|
|
30
|
+
root: 'div'
|
|
31
|
+
},
|
|
36
32
|
root: getNativeElementProps('div', {
|
|
37
33
|
ref: ref,
|
|
38
|
-
...
|
|
39
|
-
...
|
|
34
|
+
...props,
|
|
35
|
+
...(navigation && focusableProps)
|
|
40
36
|
})
|
|
41
37
|
};
|
|
42
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,iBAAT,QAAkC,yBAAlC;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,gBAAT,QAAiC,+BAAjC;AAIA;;;;AAIG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,QAAQ,GAAG;AAApB,MAA8B,KAApC;AACA,QAAM,UAAU,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,UAA9B,CAArC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM,aAAa,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,aAA9B,CAAxC;AACA,QAAM,IAAI,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,QAAd,CAAuB,KAAvB,CAA1B,CAA/B;AACA,QAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAmB,EAAD,IAA8B,aAAa,CAAC,EAAD,EAAK;AAAE,IAAA;AAAF,GAAL,CAA7D,EAA8E,CAC3G,aAD2G,EAE3G,KAF2G,CAA9E,CAA/B;AAKA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,KAFK;AAGL,IAAA,QAHK;AAIL,IAAA,aAAa,EAAE,sBAJV;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KALP;AAQL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG,KAF8B;AAGjC,UAAI,UAAU,IAAI,cAAlB;AAHiC,KAAR;AARtB,GAAP;AAcD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } 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 const navigation = useContextSelector(AccordionContext, ctx => ctx.navigation);\n const focusableProps = useFocusableGroup();\n\n const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);\n const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [\n requestToggle,\n value,\n ]);\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: ref,\n ...props,\n ...(navigation && focusableProps),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';
|
|
2
|
-
export declare function
|
|
2
|
+
export declare function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/useAccordionItemContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,sCAAV,CAAiD,KAAjD,EAA0E;AAC9E,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,aAAZ;AAA2B,IAAA;AAA3B,MAAoC,KAA1C;AACA,QAAM,aAAa,GAAG,KAAK,CAAC,OAAN,CAAyC,OAAO;AAAE,IAAA,QAAF;AAAY,IAAA,aAAZ;AAA2B,IAAA;AAA3B,GAAP,CAAzC,EAAoF,CACxG,QADwG,EAExG,aAFwG,EAGxG,IAHwG,CAApF,CAAtB;AAMA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","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>(() => ({ disabled, onHeaderClick, open }), [\n disabled,\n onHeaderClick,\n open,\n ]);\n\n return { accordionItem };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { AccordionItemState } from './AccordionItem.types';
|
|
2
2
|
export declare const accordionItemClassName = "fui-AccordionItem";
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { mergeClasses } from '@
|
|
1
|
+
import { mergeClasses } from '@griffel/react';
|
|
2
2
|
export const accordionItemClassName = 'fui-AccordionItem';
|
|
3
|
-
export const
|
|
3
|
+
export const useAccordionItemStyles_unstable = state => {
|
|
4
4
|
state.root.className = mergeClasses(accordionItemClassName, state.root.className);
|
|
5
5
|
return state;
|
|
6
6
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/useAccordionItemStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AAEP,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAA8B;AAC3E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,sBAAD,EAAyB,KAAK,CAAC,IAAN,CAAW,SAApC,CAAnC;AAEA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { AccordionItemState } from './AccordionItem.types';\n\nexport const accordionItemClassName = 'fui-AccordionItem';\n\nexport const useAccordionItemStyles_unstable = (state: AccordionItemState) => {\n state.root.className = mergeClasses(accordionItemClassName, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { AccordionPanelProps } from './AccordionPanel.types';
|
|
2
2
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
|
-
* Define a styled AccordionPanel, using the `
|
|
4
|
+
* Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.
|
|
5
5
|
*/
|
|
6
6
|
export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { useAccordionPanel_unstable } from './useAccordionPanel';
|
|
3
|
+
import { renderAccordionPanel_unstable } from './renderAccordionPanel';
|
|
4
|
+
import { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles';
|
|
5
5
|
/**
|
|
6
|
-
* Define a styled AccordionPanel, using the `
|
|
6
|
+
* Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
export const AccordionPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
|
-
const state =
|
|
11
|
-
|
|
12
|
-
return
|
|
10
|
+
const state = useAccordionPanel_unstable(props, ref);
|
|
11
|
+
useAccordionPanelStyles_unstable(state);
|
|
12
|
+
return renderAccordionPanel_unstable(state);
|
|
13
13
|
});
|
|
14
14
|
AccordionPanel.displayName = 'AccordionPanel';
|
|
15
15
|
//# sourceMappingURL=AccordionPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/AccordionPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AACA,SAAO,6BAA6B,CAAC,KAAD,CAApC;AACD,CALuE,CAAjE;AAOP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useAccordionPanel_unstable } from './useAccordionPanel';\nimport { renderAccordionPanel_unstable } from './renderAccordionPanel';\nimport { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles';\nimport type { AccordionPanelProps } from './AccordionPanel.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.\n */\nexport const AccordionPanel: ForwardRefComponent<AccordionPanelProps> = React.forwardRef((props, ref) => {\n const state = useAccordionPanel_unstable(props, ref);\n\n useAccordionPanelStyles_unstable(state);\n return renderAccordionPanel_unstable(state);\n});\n\nAccordionPanel.displayName = 'AccordionPanel';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState,
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
2
|
export declare type AccordionPanelSlots = {
|
|
3
|
-
root:
|
|
3
|
+
root: Slot<'div'>;
|
|
4
4
|
};
|
|
5
5
|
export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
|
|
6
6
|
export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"AccordionPanel.types.js","sourceRoot":"../src/","sources":["components/AccordionPanel/AccordionPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n /**\n * Internal open state, provided by context\n */\n open: boolean;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/AccordionPanel/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './AccordionPanel';\nexport * from './AccordionPanel.types';\nexport * from './renderAccordionPanel';\nexport * from './useAccordionPanel';\nexport * from './useAccordionPanelStyles';\n"]}
|
|
@@ -2,4 +2,4 @@ import type { AccordionPanelState } from './AccordionPanel.types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Function that renders the final JSX of the component
|
|
4
4
|
*/
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSX.Element | null;
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getSlots } from '@fluentui/react-utilities';
|
|
3
|
-
import { accordionPanelShorthandProps } from './useAccordionPanel';
|
|
4
3
|
/**
|
|
5
4
|
* Function that renders the final JSX of the component
|
|
6
5
|
*/
|
|
7
6
|
|
|
8
|
-
export const
|
|
7
|
+
export const renderAccordionPanel_unstable = state => {
|
|
9
8
|
const {
|
|
10
9
|
slots,
|
|
11
10
|
slotProps
|
|
12
|
-
} = getSlots(state
|
|
11
|
+
} = getSlots(state);
|
|
13
12
|
return state.open ? /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
14
13
|
}, slotProps.root.children) : null;
|
|
15
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/renderAccordionPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AACA,SAAO,KAAK,CAAC,IAAN,gBAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CAAb,GAAsF,IAA7F;AACD,CAHM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<AccordionPanelSlots>(state);\n return state.open ? <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root> : null;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { AccordionPanelProps,
|
|
3
|
-
/**
|
|
4
|
-
* Const listing which props are shorthand props.
|
|
5
|
-
*/
|
|
6
|
-
export declare const accordionPanelShorthandProps: Array<keyof AccordionPanelSlots>;
|
|
2
|
+
import type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';
|
|
7
3
|
/**
|
|
8
4
|
* Returns the props and state required to render the component
|
|
9
5
|
* @param props - AccordionPanel properties
|
|
10
6
|
* @param ref - reference to root HTMLElement of AccordionPanel
|
|
11
7
|
*/
|
|
12
|
-
export declare const
|
|
8
|
+
export declare const useAccordionPanel_unstable: (props: AccordionPanelProps, ref: React.Ref<HTMLElement>) => AccordionPanelState;
|
|
@@ -1,25 +1,22 @@
|
|
|
1
1
|
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
2
|
-
import {
|
|
3
|
-
/**
|
|
4
|
-
* Const listing which props are shorthand props.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
export const accordionPanelShorthandProps = ['root'];
|
|
2
|
+
import { useAccordionItemContext_unstable } from '../AccordionItem/index';
|
|
8
3
|
/**
|
|
9
4
|
* Returns the props and state required to render the component
|
|
10
5
|
* @param props - AccordionPanel properties
|
|
11
6
|
* @param ref - reference to root HTMLElement of AccordionPanel
|
|
12
7
|
*/
|
|
13
8
|
|
|
14
|
-
export const
|
|
9
|
+
export const useAccordionPanel_unstable = (props, ref) => {
|
|
15
10
|
const {
|
|
16
11
|
open
|
|
17
|
-
} =
|
|
12
|
+
} = useAccordionItemContext_unstable();
|
|
18
13
|
return {
|
|
19
14
|
open,
|
|
15
|
+
components: {
|
|
16
|
+
root: 'div'
|
|
17
|
+
},
|
|
20
18
|
root: getNativeElementProps('div', {
|
|
21
19
|
ref,
|
|
22
|
-
role: 'region',
|
|
23
20
|
...props
|
|
24
21
|
})
|
|
25
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/useAccordionPanel.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,gCAAT,QAAiD,wBAAjD;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM;AAAE,IAAA;AAAF,MAAW,gCAAgC,EAAjD;AACA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAFP;AAKL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR;AALtB,GAAP;AAUD,CAfM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\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 return {\n open,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { AccordionPanelState } from './AccordionPanel.types';
|
|
2
2
|
export declare const accordionPanelClassName = "fui-AccordionPanel";
|
|
3
3
|
/** Applies style classnames to slots */
|
|
4
|
-
export declare const
|
|
4
|
+
export declare const useAccordionPanelStyles_unstable: (state: AccordionPanelState) => AccordionPanelState;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses } from '@
|
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
export const accordionPanelClassName = 'fui-AccordionPanel';
|
|
3
3
|
/**
|
|
4
4
|
* Styles for the root slot
|
|
@@ -15,7 +15,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
15
15
|
/** Applies style classnames to slots */
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
export const
|
|
18
|
+
export const useAccordionPanelStyles_unstable = state => {
|
|
19
19
|
const styles = useStyles();
|
|
20
20
|
state.root.className = mergeClasses(accordionPanelClassName, styles.root, state.root.className);
|
|
21
21
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/useAccordionPanelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAOA;;;AACA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAD,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;AAEA,SAAO,KAAP;AACD,CALM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { AccordionPanelState } from './AccordionPanel.types';\n\nexport const accordionPanelClassName = 'fui-AccordionPanel';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n marginRight: '12px',\n marginLeft: '12px',\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionPanelStyles_unstable = (state: AccordionPanelState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(accordionPanelClassName, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Accordion';\nexport * from './AccordionItem';\nexport * from './AccordionHeader';\nexport * from './AccordionPanel';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Accordion.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,8BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Accordion/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["AccordionHeader.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/AccordionHeader/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["AccordionItem.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/AccordionItem/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["AccordionPanel.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/AccordionPanel/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { AccordionProps } from './Accordion.types';
|
|
2
2
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
|
-
* Define a styled Accordion, using the `
|
|
4
|
+
* Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
|
|
5
5
|
*/
|
|
6
6
|
export declare const Accordion: ForwardRefComponent<AccordionProps>;
|
|
@@ -15,15 +15,15 @@ const useAccordionContextValues_1 = /*#__PURE__*/require("./useAccordionContextV
|
|
|
15
15
|
|
|
16
16
|
const useAccordionStyles_1 = /*#__PURE__*/require("./useAccordionStyles");
|
|
17
17
|
/**
|
|
18
|
-
* Define a styled Accordion, using the `
|
|
18
|
+
* Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
exports.Accordion = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
23
|
-
const state = useAccordion_1.
|
|
24
|
-
const contextValues = useAccordionContextValues_1.
|
|
25
|
-
useAccordionStyles_1.
|
|
26
|
-
return renderAccordion_1.
|
|
23
|
+
const state = useAccordion_1.useAccordion_unstable(props, ref);
|
|
24
|
+
const contextValues = useAccordionContextValues_1.useAccordionContextValues_unstable(state);
|
|
25
|
+
useAccordionStyles_1.useAccordionStyles_unstable(state);
|
|
26
|
+
return renderAccordion_1.renderAccordion_unstable(state, contextValues);
|
|
27
27
|
});
|
|
28
28
|
exports.Accordion.displayName = 'Accordion';
|
|
29
29
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,SAAA,gBAAiD,KAAK,CAAC,UAAN,CAC5D,CAAC,KAAD,EAAQ,GAAR,KAAe;AACb,QAAM,KAAK,GAAG,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,GAA7B,CAAd;AACA,QAAM,aAAa,GAAG,2BAAA,CAAA,kCAAA,CAAmC,KAAnC,CAAtB;AAEA,EAAA,oBAAA,CAAA,2BAAA,CAA4B,KAA5B;AAEA,SAAO,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,aAAhC,CAAP;AACD,CAR2D,CAAjD;AAWb,OAAA,CAAA,SAAA,CAAU,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/"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { ComponentProps, ComponentState,
|
|
2
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
3
|
import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
|
|
4
4
|
export declare type AccordionIndex = number | number[];
|
|
5
5
|
export declare type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
|
|
6
6
|
export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
|
|
7
|
-
|
|
7
|
+
declare type AccordionCommons = {
|
|
8
8
|
/**
|
|
9
|
-
* Indicates if keyboard navigation is available
|
|
9
|
+
* Indicates if keyboard navigation is available and gives two options,
|
|
10
|
+
* linear or circular navigation
|
|
10
11
|
*/
|
|
11
|
-
|
|
12
|
+
navigation?: 'linear' | 'circular';
|
|
12
13
|
/**
|
|
13
14
|
* Indicates if Accordion support multiple Panels opened at the same time
|
|
14
15
|
*/
|
|
@@ -33,7 +34,7 @@ export declare type AccordionContextValues = {
|
|
|
33
34
|
accordion: AccordionContextValue;
|
|
34
35
|
};
|
|
35
36
|
export declare type AccordionSlots = {
|
|
36
|
-
root:
|
|
37
|
+
root: Slot<'div'>;
|
|
37
38
|
};
|
|
38
39
|
export declare type AccordionToggleData = {
|
|
39
40
|
value: AccordionItemValue;
|
|
@@ -50,3 +51,4 @@ export declare type AccordionProps = ComponentProps<AccordionSlots> & Partial<Ac
|
|
|
50
51
|
onToggle?: AccordionToggleEventHandler;
|
|
51
52
|
};
|
|
52
53
|
export declare type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;
|
|
54
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/AccordionContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,gBAAmD,wBAAA,CAAA,aAAA,CAAqC;AACnG,EAAA,SAAS,EAAE,EADwF;AAEnG,EAAA,WAAW,EAAE,KAFsF;;AAGnG,EAAA,aAAa,GAAA;AACX;AACD;;AALkG,CAArC,CAAnD","sourcesContent":["import { createContext } 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"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles';\nexport * from './useAccordionContextValues';\nexport * from './AccordionContext';\n"],"sourceRoot":"../src/"}
|
|
@@ -2,4 +2,4 @@ import type { AccordionState, AccordionContextValues } from './Accordion.types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Function that renders the final JSX of the component
|
|
4
4
|
*/
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const renderAccordion_unstable: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.renderAccordion_unstable = void 0;
|
|
7
7
|
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
@@ -15,7 +15,7 @@ const AccordionContext_1 = /*#__PURE__*/require("./AccordionContext");
|
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
const
|
|
18
|
+
const renderAccordion_unstable = (state, contextValues) => {
|
|
19
19
|
const {
|
|
20
20
|
slots,
|
|
21
21
|
slotProps
|
|
@@ -26,5 +26,5 @@ const renderAccordion = (state, contextValues) => {
|
|
|
26
26
|
}, slotProps.root.children));
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
exports.
|
|
29
|
+
exports.renderAccordion_unstable = renderAccordion_unstable;
|
|
30
30
|
//# sourceMappingURL=renderAccordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/renderAccordion.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AACvG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAyB,KAAzB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,kBAAA,CAAA,gBAAA,CAAiB,QAAlB,EAA0B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA1B,EAA4D,SAAS,CAAC,IAAV,CAAe,QAA3E,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","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/"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { AccordionProps,
|
|
3
|
-
export declare const accordionShorthandProps: Array<keyof AccordionSlots>;
|
|
2
|
+
import type { AccordionProps, AccordionState } from './Accordion.types';
|
|
4
3
|
/**
|
|
5
4
|
* Returns the props and state required to render the component
|
|
6
5
|
* @param props - Accordion properties
|
|
7
6
|
* @param ref - reference to root HTMLElement of Accordion
|
|
8
7
|
*/
|
|
9
|
-
export declare const
|
|
8
|
+
export declare const useAccordion_unstable: (props: AccordionProps, ref: React.Ref<HTMLElement>) => AccordionState;
|