@fluentui/react-accordion 0.0.0-nightly-20230526-0415.1 → 0.0.0-nightly-20230530-0415.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 +19 -19
- package/CHANGELOG.md +12 -12
- package/lib/Accordion.js +1 -0
- package/lib/Accordion.js.map +1 -1
- package/lib/AccordionHeader.js +1 -0
- package/lib/AccordionHeader.js.map +1 -1
- package/lib/AccordionItem.js +1 -0
- package/lib/AccordionItem.js.map +1 -1
- package/lib/AccordionPanel.js +1 -0
- package/lib/AccordionPanel.js.map +1 -1
- package/lib/components/Accordion/Accordion.js +7 -7
- package/lib/components/Accordion/Accordion.js.map +1 -1
- package/lib/components/Accordion/Accordion.types.js +1 -0
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/AccordionContext.js +7 -6
- package/lib/components/Accordion/AccordionContext.js.map +1 -1
- package/lib/components/Accordion/index.js +1 -0
- package/lib/components/Accordion/index.js.map +1 -1
- package/lib/components/Accordion/renderAccordion.js +7 -10
- package/lib/components/Accordion/renderAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordion.js +69 -69
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordionContextValues.js +12 -16
- package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.js +7 -7
- package/lib/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.js +2 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js +7 -6
- package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib/components/AccordionHeader/index.js +1 -0
- package/lib/components/AccordionHeader/index.js.map +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js +7 -10
- package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js +68 -83
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js +16 -15
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.styles.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.js +7 -7
- package/lib/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.types.js +1 -0
- package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.js +7 -6
- package/lib/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib/components/AccordionItem/index.js +1 -0
- package/lib/components/AccordionItem/index.js.map +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.js +7 -10
- package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +23 -23
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js +14 -13
- package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.js +6 -6
- package/lib/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.js +2 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib/components/AccordionPanel/index.js +1 -0
- package/lib/components/AccordionPanel/index.js.map +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.js +5 -8
- package/lib/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js +20 -22
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.styles.js.map +1 -1
- package/lib/index.js +1 -0
- 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.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.types.js.map +1 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js +1 -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.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js.map +1 -1
- 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.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +3 -3
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.js.map +1 -1
- 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.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js.map +1 -1
- 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.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -9
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export const AccordionHeaderContext =
|
|
2
|
+
export const AccordionHeaderContext = React.createContext(undefined);
|
|
3
3
|
const accordionHeaderContextDefaultValue = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
open: false,
|
|
5
|
+
disabled: false,
|
|
6
|
+
size: 'medium',
|
|
7
|
+
expandIconPosition: 'start'
|
|
8
8
|
};
|
|
9
9
|
var _React_useContext;
|
|
10
|
-
export const useAccordionHeaderContext = ()
|
|
10
|
+
export const useAccordionHeaderContext = ()=>(_React_useContext = React.useContext(AccordionHeaderContext)) !== null && _React_useContext !== void 0 ? _React_useContext : accordionHeaderContextDefaultValue;
|
|
11
|
+
|
|
11
12
|
//# sourceMappingURL=AccordionHeaderContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionHeader/AccordionHeaderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionHeaderContextValue } from './AccordionHeader.types';\n\nexport const AccordionHeaderContext = React.createContext<AccordionHeaderContextValue | undefined>(undefined);\n\nconst accordionHeaderContextDefaultValue = {\n open: false,\n disabled: false,\n size: 'medium',\n expandIconPosition: 'start',\n};\n\nexport const useAccordionHeaderContext = () =>\n React.useContext(AccordionHeaderContext) ?? accordionHeaderContextDefaultValue;\n"],"names":["React","AccordionHeaderContext","createContext","undefined","accordionHeaderContextDefaultValue","open","disabled","size","expandIconPosition","useAccordionHeaderContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,yBAAyBD,MAAME,aAAa,CAA0CC,WAAW;AAE9G,MAAMC,qCAAqC;IACzCC,MAAM,KAAK;IACXC,UAAU,KAAK;IACfC,MAAM;IACNC,oBAAoB;AACtB;IAGER;AADF,OAAO,MAAMS,4BAA4B,IACvCT,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,qCAAjBD,+BAAAA,oBAA4CI,kCAAkC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionHeader/index.ts"],"sourcesContent":["export * from './AccordionHeader';\nexport * from './AccordionHeader.types';\nexport * from './renderAccordionHeader';\nexport * from './useAccordionHeader';\nexport * from './useAccordionHeaderContextValues';\nexport * from './useAccordionHeaderStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,uBAAuB;AACrC,cAAc,oCAAoC;AAClD,cAAc,oCAAoC"}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
2
|
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
import { AccordionHeaderContext } from './AccordionHeaderContext';
|
|
4
4
|
/**
|
|
5
5
|
* Function that renders the final JSX of the component
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
slotProps
|
|
11
|
-
} = getSlotsNext(state);
|
|
12
|
-
return /*#__PURE__*/createElement(AccordionHeaderContext.Provider, {
|
|
13
|
-
value: contextValues.accordionHeader
|
|
14
|
-
}, /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.button, slotProps.button, state.expandIconPosition === 'start' && slots.expandIcon && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon), slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), slotProps.root.children, state.expandIconPosition === 'end' && slots.expandIcon && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon))));
|
|
6
|
+
*/ export const renderAccordionHeader_unstable = (state, contextValues)=>{
|
|
7
|
+
const { slots , slotProps } = getSlotsNext(state);
|
|
8
|
+
return /*#__PURE__*/ createElement(AccordionHeaderContext.Provider, {
|
|
9
|
+
value: contextValues.accordionHeader
|
|
10
|
+
}, /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.button, slotProps.button, state.expandIconPosition === 'start' && slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), slotProps.root.children, state.expandIconPosition === 'end' && slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon))));
|
|
15
11
|
};
|
|
12
|
+
|
|
16
13
|
//# sourceMappingURL=renderAccordionHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionHeader/renderAccordionHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AccordionHeaderContext } from './AccordionHeaderContext';\nimport type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionHeader_unstable = (\n state: AccordionHeaderState,\n contextValues: AccordionHeaderContextValues,\n) => {\n const { slots, slotProps } = getSlotsNext<AccordionHeaderSlots>(state);\n\n return (\n <AccordionHeaderContext.Provider value={contextValues.accordionHeader}>\n <slots.root {...slotProps.root}>\n <slots.button {...slotProps.button}>\n {state.expandIconPosition === 'start' && slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {state.expandIconPosition === 'end' && slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n </slots.root>\n </AccordionHeaderContext.Provider>\n );\n};\n"],"names":["createElement","getSlotsNext","AccordionHeaderContext","renderAccordionHeader_unstable","state","contextValues","slots","slotProps","Provider","value","accordionHeader","root","button","expandIconPosition","expandIcon","icon","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,sBAAsB,QAAQ,2BAA2B;AAGlE;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAmCG;IAEhE,qBACE,AAlBJ,cAkBKF,uBAAuBM,QAAQ;QAACC,OAAOJ,cAAcK,eAAe;qBACnE,AAnBN,cAmBOJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,gBAC5B,AApBR,cAoBSL,MAAMM,MAAM,EAAKL,UAAUK,MAAM,EAC/BR,MAAMS,kBAAkB,KAAK,WAAWP,MAAMQ,UAAU,kBAAI,AArBvE,cAqBwER,MAAMQ,UAAU,EAAKP,UAAUO,UAAU,GACtGR,MAAMS,IAAI,kBAAI,AAtBzB,cAsB0BT,MAAMS,IAAI,EAAKR,UAAUQ,IAAI,GAC5CR,UAAUI,IAAI,CAACK,QAAQ,EACvBZ,MAAMS,kBAAkB,KAAK,SAASP,MAAMQ,UAAU,kBAAI,AAxBrE,cAwBsER,MAAMQ,UAAU,EAAKP,UAAUO,UAAU;AAK/G,EAAE"}
|
|
@@ -9,89 +9,74 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
9
9
|
* Returns the props and state required to render the component
|
|
10
10
|
* @param props - AccordionHeader properties
|
|
11
11
|
* @param ref - reference to root HTMLElement of AccordionHeader
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
return {
|
|
46
|
-
disabled,
|
|
47
|
-
open,
|
|
48
|
-
size,
|
|
49
|
-
inline,
|
|
50
|
-
expandIconPosition,
|
|
51
|
-
components: {
|
|
52
|
-
root: 'div',
|
|
53
|
-
button: 'button',
|
|
54
|
-
expandIcon: 'span',
|
|
55
|
-
icon: 'div'
|
|
56
|
-
},
|
|
57
|
-
root: getNativeElementProps(as || 'div', {
|
|
58
|
-
ref,
|
|
59
|
-
...props
|
|
60
|
-
}),
|
|
61
|
-
icon: resolveShorthand(icon),
|
|
62
|
-
expandIcon: resolveShorthand(expandIcon, {
|
|
63
|
-
required: true,
|
|
64
|
-
defaultProps: {
|
|
65
|
-
children: /*#__PURE__*/React.createElement(ChevronRightRegular, {
|
|
66
|
-
style: {
|
|
67
|
-
transform: `rotate(${expandIconRotation}deg)`
|
|
68
|
-
}
|
|
12
|
+
*/ export const useAccordionHeader_unstable = (props, ref)=>{
|
|
13
|
+
const { as , icon , button , expandIcon , inline =false , size ='medium' , expandIconPosition ='start' } = props;
|
|
14
|
+
const { onHeaderClick: onAccordionHeaderClick , disabled , open } = useAccordionItemContext_unstable();
|
|
15
|
+
/**
|
|
16
|
+
* force disabled state on button if accordion isn't collapsible
|
|
17
|
+
* and this is the only item opened
|
|
18
|
+
*/ const disabledFocusable = useAccordionContext_unstable((ctx)=>!ctx.collapsible && ctx.openItems.length === 1 && open);
|
|
19
|
+
const { dir } = useFluent();
|
|
20
|
+
// Calculate how to rotate the expand icon [>] (ChevronRightRegular)
|
|
21
|
+
let expandIconRotation;
|
|
22
|
+
if (expandIconPosition === 'end') {
|
|
23
|
+
// If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed
|
|
24
|
+
expandIconRotation = open ? -90 : 90;
|
|
25
|
+
} else {
|
|
26
|
+
// Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed
|
|
27
|
+
expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
|
|
28
|
+
}
|
|
29
|
+
return {
|
|
30
|
+
disabled,
|
|
31
|
+
open,
|
|
32
|
+
size,
|
|
33
|
+
inline,
|
|
34
|
+
expandIconPosition,
|
|
35
|
+
components: {
|
|
36
|
+
root: 'div',
|
|
37
|
+
button: 'button',
|
|
38
|
+
expandIcon: 'span',
|
|
39
|
+
icon: 'div'
|
|
40
|
+
},
|
|
41
|
+
root: getNativeElementProps(as || 'div', {
|
|
42
|
+
ref,
|
|
43
|
+
...props
|
|
69
44
|
}),
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
45
|
+
icon: resolveShorthand(icon),
|
|
46
|
+
expandIcon: resolveShorthand(expandIcon, {
|
|
47
|
+
required: true,
|
|
48
|
+
defaultProps: {
|
|
49
|
+
children: /*#__PURE__*/ React.createElement(ChevronRightRegular, {
|
|
50
|
+
style: {
|
|
51
|
+
transform: `rotate(${expandIconRotation}deg)`
|
|
52
|
+
}
|
|
53
|
+
}),
|
|
54
|
+
'aria-hidden': true
|
|
55
|
+
}
|
|
56
|
+
}),
|
|
57
|
+
button: resolveShorthand({
|
|
58
|
+
...useARIAButtonShorthand(button, {
|
|
59
|
+
required: true,
|
|
60
|
+
defaultProps: {
|
|
61
|
+
disabled,
|
|
62
|
+
disabledFocusable,
|
|
63
|
+
'aria-expanded': open,
|
|
64
|
+
type: 'button'
|
|
65
|
+
}
|
|
66
|
+
}),
|
|
67
|
+
onClick: useEventCallback((ev)=>{
|
|
68
|
+
if (isResolvedShorthand(button)) {
|
|
69
|
+
var _button_onClick;
|
|
70
|
+
(_button_onClick = button.onClick) === null || _button_onClick === void 0 ? void 0 : _button_onClick.call(button, ev);
|
|
71
|
+
}
|
|
72
|
+
if (!ev.defaultPrevented) {
|
|
73
|
+
onAccordionHeaderClick(ev);
|
|
74
|
+
}
|
|
75
|
+
})
|
|
76
|
+
}, {
|
|
77
|
+
required: true
|
|
78
|
+
})
|
|
79
|
+
};
|
|
96
80
|
};
|
|
81
|
+
|
|
97
82
|
//# sourceMappingURL=useAccordionHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionHeader/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"}
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export function useAccordionHeaderContextValues_unstable(state) {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
const { disabled , expandIconPosition , open , size } = state;
|
|
4
|
+
const accordionHeader = React.useMemo(()=>({
|
|
5
|
+
disabled,
|
|
6
|
+
expandIconPosition,
|
|
7
|
+
open,
|
|
8
|
+
size
|
|
9
|
+
}), [
|
|
10
|
+
disabled,
|
|
11
|
+
expandIconPosition,
|
|
12
|
+
open,
|
|
13
|
+
size
|
|
14
|
+
]);
|
|
15
|
+
return {
|
|
16
|
+
accordionHeader
|
|
17
|
+
};
|
|
18
18
|
}
|
|
19
|
+
|
|
19
20
|
//# sourceMappingURL=useAccordionHeaderContextValues.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionHeader/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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["shorthands","__styles","mergeClasses","createFocusOutlineStyle","tokens","typographyStyles","accordionHeaderClassNames","root","button","expandIcon","icon","useStyles","resetButton","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","z8tnut","z189sj","Byoj8tv","uwmqm3","Bv0vk6g","fsow6f","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","B6of3ja","t21cq0","jrapky","Frg6f3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rootDisabled","Bcmaq0h","rootInline","mc9l5x","qhf8xq","a9b677","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","sshi5w","Bt984gj","Bceei9c","Bhrd7zp","buttonSmall","buttonLarge","buttonExtraLarge","buttonInline","buttonExpandIconEndNoIcon","buttonExpandIconEnd","Bqenvij","expandIconStart","expandIconEnd","Bh6795r","Bnnss6s","xawz","Brf1p80","d","f","i","useAccordionHeaderStyles_unstable","state","styles","className","inline","disabled","expandIconPosition","size"],"sources":["../../../src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon',\n};\n\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.margin(0),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n rootInline: {\n display: 'inline-block',\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.padding(0, tokens.spacingHorizontalM, 0, tokens.spacingHorizontalMNudge),\n minHeight: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box',\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: tokens.fontSizeBase200,\n },\n buttonLarge: {\n lineHeight: tokens.lineHeightBase400,\n fontSize: tokens.fontSizeBase400,\n },\n buttonExtraLarge: {\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n buttonInline: {\n display: 'inline-flex',\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: tokens.spacingHorizontalM,\n },\n buttonExpandIconEnd: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n expandIconStart: {\n paddingRight: tokens.spacingHorizontalS,\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: tokens.spacingHorizontalS,\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: tokens.spacingHorizontalS,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n accordionHeaderClassNames.root,\n styles.root,\n state.inline && styles.rootInline,\n state.disabled && styles.rootDisabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n accordionHeaderClassNames.button,\n styles.resetButton,\n styles.button,\n styles.focusIndicator,\n state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon,\n state.expandIconPosition === 'end' && styles.buttonExpandIconEnd,\n state.inline && styles.buttonInline,\n state.size === 'small' && styles.buttonSmall,\n state.size === 'large' && styles.buttonLarge,\n state.size === 'extra-large' && styles.buttonExtraLarge,\n state.button.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n accordionHeaderClassNames.expandIcon,\n styles.expandIcon,\n state.expandIconPosition === 'start' && styles.expandIconStart,\n state.expandIconPosition === 'end' && styles.expandIconEnd,\n state.expandIcon.className,\n );\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAAC,QAAA,EAAcC,YAAY,QAAQ;AACrD,SAASC,uBAAuB,QAAQ;AACxC,SAASC,MAAM,EAAEC,gBAAgB,QAAQ;AAIzC,OAAO,MAAMC,yBAAA,GAAkE;EAC7EC,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYV,QAAA;EAAAW,WAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAlD,IAAA;IAAAQ,MAAA;IAAAD,MAAA;IAAA4C,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;IAAApD,MAAA;EAAA;EAAAqD,UAAA;IAAAC,MAAA;EAAA;EAAA7D,MAAA;IAAA8D,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA9D,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA4D,MAAA;IAAAf,MAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAtE,OAAA;IAAAC,OAAA;IAAAsE,OAAA;IAAArE,OAAA;IAAAL,OAAA;EAAA;EAAA2E,WAAA;IAAAJ,MAAA;IAAAnE,OAAA;EAAA;EAAAwE,WAAA;IAAAvE,OAAA;IAAAD,OAAA;EAAA;EAAAyE,gBAAA;IAAAxE,OAAA;IAAAD,OAAA;EAAA;EAAA0E,YAAA;IAAAtB,MAAA;EAAA;EAAAuB,yBAAA;IAAApE,MAAA;EAAA;EAAAqE,mBAAA;IAAAvE,MAAA;EAAA;EAAAb,UAAA;IAAAqF,OAAA;IAAAzB,MAAA;IAAAgB,OAAA;IAAAnE,OAAA;IAAAD,OAAA;EAAA;EAAA8E,eAAA;IAAAzE,MAAA;EAAA;EAAA0E,aAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAA9B,MAAA;IAAA+B,OAAA;IAAA5E,MAAA;EAAA;EAAAd,IAAA;IAAAoF,OAAA;IAAAzB,MAAA;IAAAgB,OAAA;IAAA/D,MAAA;IAAAJ,OAAA;IAAAD,OAAA;EAAA;AAAA;EAAAoF,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,
|
|
1
|
+
{"version":3,"names":["shorthands","__styles","mergeClasses","createFocusOutlineStyle","tokens","typographyStyles","accordionHeaderClassNames","root","button","expandIcon","icon","useStyles","resetButton","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","z8tnut","z189sj","Byoj8tv","uwmqm3","Bv0vk6g","fsow6f","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","B6of3ja","t21cq0","jrapky","Frg6f3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rootDisabled","Bcmaq0h","rootInline","mc9l5x","qhf8xq","a9b677","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","sshi5w","Bt984gj","Bceei9c","Bhrd7zp","buttonSmall","buttonLarge","buttonExtraLarge","buttonInline","buttonExpandIconEndNoIcon","buttonExpandIconEnd","Bqenvij","expandIconStart","expandIconEnd","Bh6795r","Bnnss6s","xawz","Brf1p80","d","f","i","useAccordionHeaderStyles_unstable","state","styles","className","inline","disabled","expandIconPosition","size"],"sources":["../../../src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon',\n};\n\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.margin(0),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n rootInline: {\n display: 'inline-block',\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.padding(0, tokens.spacingHorizontalM, 0, tokens.spacingHorizontalMNudge),\n minHeight: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box',\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: tokens.fontSizeBase200,\n },\n buttonLarge: {\n lineHeight: tokens.lineHeightBase400,\n fontSize: tokens.fontSizeBase400,\n },\n buttonExtraLarge: {\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n buttonInline: {\n display: 'inline-flex',\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: tokens.spacingHorizontalM,\n },\n buttonExpandIconEnd: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n expandIconStart: {\n paddingRight: tokens.spacingHorizontalS,\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: tokens.spacingHorizontalS,\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: tokens.spacingHorizontalS,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n accordionHeaderClassNames.root,\n styles.root,\n state.inline && styles.rootInline,\n state.disabled && styles.rootDisabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n accordionHeaderClassNames.button,\n styles.resetButton,\n styles.button,\n styles.focusIndicator,\n state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon,\n state.expandIconPosition === 'end' && styles.buttonExpandIconEnd,\n state.inline && styles.buttonInline,\n state.size === 'small' && styles.buttonSmall,\n state.size === 'large' && styles.buttonLarge,\n state.size === 'extra-large' && styles.buttonExtraLarge,\n state.button.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n accordionHeaderClassNames.expandIcon,\n styles.expandIcon,\n state.expandIconPosition === 'start' && styles.expandIconStart,\n state.expandIconPosition === 'end' && styles.expandIconEnd,\n state.expandIcon.className,\n );\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -6,13 +6,13 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
|
6
6
|
import { useAccordionItemStyles_unstable } from './useAccordionItemStyles.styles';
|
|
7
7
|
/**
|
|
8
8
|
* Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return renderAccordionItem_unstable(state, contextValues);
|
|
9
|
+
*/ export const AccordionItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
10
|
+
const state = useAccordionItem_unstable(props, ref);
|
|
11
|
+
const contextValues = useAccordionItemContextValues_unstable(state);
|
|
12
|
+
useAccordionItemStyles_unstable(state);
|
|
13
|
+
useCustomStyleHook_unstable('useAccordionItemStyles_unstable')(state);
|
|
14
|
+
return renderAccordionItem_unstable(state, contextValues);
|
|
16
15
|
});
|
|
17
16
|
AccordionItem.displayName = 'AccordionItem';
|
|
17
|
+
|
|
18
18
|
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAccordionItem_unstable } from './useAccordionItem';\nimport { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues';\nimport { renderAccordionItem_unstable } from './renderAccordionItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAccordionItemStyles_unstable } from './useAccordionItemStyles.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.\n */\nexport const AccordionItem: ForwardRefComponent<AccordionItemProps> = React.forwardRef((props, ref) => {\n const state = useAccordionItem_unstable(props, ref);\n const contextValues = useAccordionItemContextValues_unstable(state);\n\n useAccordionItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAccordionItemStyles_unstable')(state);\n\n return renderAccordionItem_unstable(state, contextValues);\n});\n\nAccordionItem.displayName = 'AccordionItem';\n"],"names":["React","useAccordionItem_unstable","useAccordionItemContextValues_unstable","renderAccordionItem_unstable","useCustomStyleHook_unstable","useAccordionItemStyles_unstable","AccordionItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,+BAA+B,QAAQ,kCAAkC;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrG,MAAMC,QAAQT,0BAA0BO,OAAOC;IAC/C,MAAME,gBAAgBT,uCAAuCQ;IAE7DL,gCAAgCK;IAEhCN,4BAA4B,mCAAmCM;IAE/D,OAAOP,6BAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionItem/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"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export const AccordionItemContext =
|
|
2
|
+
export const AccordionItemContext = React.createContext(undefined);
|
|
3
3
|
const accordionItemContextDefaultValue = {
|
|
4
|
-
|
|
5
|
-
/** */},
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
onHeaderClick () {
|
|
5
|
+
/** */ },
|
|
6
|
+
open: false,
|
|
7
|
+
disabled: false
|
|
8
8
|
};
|
|
9
9
|
export const AccordionItemProvider = AccordionItemContext.Provider;
|
|
10
10
|
var _React_useContext;
|
|
11
|
-
export const useAccordionItemContext_unstable = ()
|
|
11
|
+
export const useAccordionItemContext_unstable = ()=>(_React_useContext = React.useContext(AccordionItemContext)) !== null && _React_useContext !== void 0 ? _React_useContext : accordionItemContextDefaultValue;
|
|
12
|
+
|
|
12
13
|
//# sourceMappingURL=AccordionItemContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionItem/AccordionItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionItemContextValue } from './AccordionItem.types';\n\nexport const AccordionItemContext = React.createContext<AccordionItemContextValue | undefined>(\n undefined,\n) as React.Context<AccordionItemContextValue>;\n\nconst accordionItemContextDefaultValue: AccordionItemContextValue = {\n onHeaderClick() {\n /** */\n },\n open: false,\n disabled: false,\n};\n\nexport const AccordionItemProvider = AccordionItemContext.Provider;\n\nexport const useAccordionItemContext_unstable = () =>\n React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;\n"],"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","onHeaderClick","open","disabled","AccordionItemProvider","Provider","useAccordionItemContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,uBAAuBD,MAAME,aAAa,CACrDC,WAC4C;AAE9C,MAAMC,mCAA8D;IAClEC,iBAAgB;IACd,IAAI,GACN;IACAC,MAAM,KAAK;IACXC,UAAU,KAAK;AACjB;AAEA,OAAO,MAAMC,wBAAwBP,qBAAqBQ,QAAQ,CAAC;IAGjET;AADF,OAAO,MAAMU,mCAAmC,IAC9CV,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,mCAAjBD,+BAAAA,oBAA0CI,gCAAgC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionItem/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"}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
2
|
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
import { AccordionItemContext } from './AccordionItemContext';
|
|
4
4
|
/**
|
|
5
5
|
* Function that renders the final JSX of the component
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
slotProps
|
|
11
|
-
} = getSlotsNext(state);
|
|
12
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(AccordionItemContext.Provider, {
|
|
13
|
-
value: contextValues.accordionItem
|
|
14
|
-
}, slotProps.root.children));
|
|
6
|
+
*/ export const renderAccordionItem_unstable = (state, contextValues)=>{
|
|
7
|
+
const { slots , slotProps } = getSlotsNext(state);
|
|
8
|
+
return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(AccordionItemContext.Provider, {
|
|
9
|
+
value: contextValues.accordionItem
|
|
10
|
+
}, slotProps.root.children));
|
|
15
11
|
};
|
|
12
|
+
|
|
16
13
|
//# sourceMappingURL=renderAccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionItem/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"}
|
|
@@ -5,28 +5,28 @@ import { useAccordionContext_unstable } from '../Accordion/AccordionContext';
|
|
|
5
5
|
* Returns the props and state required to render the component
|
|
6
6
|
* @param props - AccordionItem properties
|
|
7
7
|
* @param ref - reference to root HTMLElement of AccordionItem
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
value
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
};
|
|
8
|
+
*/ export const useAccordionItem_unstable = (props, ref)=>{
|
|
9
|
+
const { value , disabled =false } = props;
|
|
10
|
+
const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
|
|
11
|
+
const open = useAccordionContext_unstable((ctx)=>ctx.openItems.includes(value));
|
|
12
|
+
const onAccordionHeaderClick = React.useCallback((ev)=>requestToggle(ev, {
|
|
13
|
+
value
|
|
14
|
+
}), [
|
|
15
|
+
requestToggle,
|
|
16
|
+
value
|
|
17
|
+
]);
|
|
18
|
+
return {
|
|
19
|
+
open,
|
|
20
|
+
disabled,
|
|
21
|
+
onHeaderClick: onAccordionHeaderClick,
|
|
22
|
+
components: {
|
|
23
|
+
root: 'div'
|
|
24
|
+
},
|
|
25
|
+
root: getNativeElementProps('div', {
|
|
26
|
+
ref: ref,
|
|
27
|
+
...props
|
|
28
|
+
})
|
|
29
|
+
};
|
|
31
30
|
};
|
|
31
|
+
|
|
32
32
|
//# sourceMappingURL=useAccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/AccordionItem/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"}
|