@fluentui/react-accordion 0.0.0-nightly-20230316-0427.1 → 0.0.0-nightly-20230317-1454.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/.swcrc +39 -0
- package/CHANGELOG.json +50 -17
- package/CHANGELOG.md +23 -11
- package/lib/Accordion.js +1 -1
- package/lib/Accordion.js.map +1 -1
- package/lib/AccordionHeader.js +1 -1
- package/lib/AccordionHeader.js.map +1 -1
- package/lib/AccordionItem.js +1 -1
- package/lib/AccordionItem.js.map +1 -1
- package/lib/AccordionPanel.js +1 -1
- 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 -1
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/AccordionContext.js +2 -3
- package/lib/components/Accordion/AccordionContext.js.map +1 -1
- package/lib/components/Accordion/index.js +7 -7
- package/lib/components/Accordion/index.js.map +1 -1
- package/lib/components/Accordion/renderAccordion.js +4 -6
- package/lib/components/Accordion/renderAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordion.js +7 -7
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib/components/Accordion/useAccordionStyles.js +2 -2
- package/lib/components/Accordion/useAccordionStyles.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.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js +4 -7
- package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib/components/AccordionHeader/index.js +6 -6
- package/lib/components/AccordionHeader/index.js.map +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js +4 -14
- package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js +23 -24
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js +9 -9
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.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 -1
- package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.js +3 -7
- package/lib/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib/components/AccordionItem/index.js +7 -7
- package/lib/components/AccordionItem/index.js.map +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.js +4 -6
- package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +5 -5
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemStyles.js +2 -2
- package/lib/components/AccordionItem/useAccordionItemStyles.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.map +1 -1
- package/lib/components/AccordionPanel/index.js +5 -5
- package/lib/components/AccordionPanel/index.js.map +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.js +3 -5
- package/lib/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js +7 -6
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js +3 -3
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib/index.js +4 -4
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Accordion.js +5 -4
- package/lib-commonjs/Accordion.js.map +1 -1
- package/lib-commonjs/AccordionHeader.js +5 -4
- package/lib-commonjs/AccordionHeader.js.map +1 -1
- package/lib-commonjs/AccordionItem.js +5 -4
- package/lib-commonjs/AccordionItem.js.map +1 -1
- package/lib-commonjs/AccordionPanel.js +5 -4
- package/lib-commonjs/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.js +21 -22
- package/lib-commonjs/components/Accordion/Accordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.types.js +5 -2
- package/lib-commonjs/components/Accordion/Accordion.types.js.map +1 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js +21 -13
- package/lib-commonjs/components/Accordion/AccordionContext.js.map +1 -1
- package/lib-commonjs/components/Accordion/index.js +11 -10
- package/lib-commonjs/components/Accordion/index.js.map +1 -1
- package/lib-commonjs/components/Accordion/renderAccordion.js +16 -21
- package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.js +79 -81
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js +18 -21
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionStyles.js +19 -11
- package/lib-commonjs/components/Accordion/useAccordionStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js +21 -23
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.js +3 -2
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js +20 -14
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/index.js +10 -9
- package/lib-commonjs/components/AccordionHeader/index.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js +16 -29
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +76 -94
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js +24 -21
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js +383 -172
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.js +21 -22
- package/lib-commonjs/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.js +5 -2
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js +22 -16
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/index.js +11 -10
- package/lib-commonjs/components/AccordionItem/index.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js +16 -21
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +33 -35
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js +22 -19
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js +19 -11
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js +19 -20
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js +3 -2
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/index.js +9 -8
- package/lib-commonjs/components/AccordionPanel/index.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js +13 -18
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +32 -35
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js +39 -23
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib-commonjs/index.js +43 -170
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -10
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
1
|
+
export * from "./AccordionHeader";
|
|
2
|
+
export * from "./AccordionHeader.types";
|
|
3
|
+
export * from "./renderAccordionHeader";
|
|
4
|
+
export * from "./useAccordionHeader";
|
|
5
|
+
export * from "./useAccordionHeaderContextValues";
|
|
6
|
+
export * from "./useAccordionHeaderStyles";
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"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';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { getSlots } from
|
|
3
|
-
import { AccordionHeaderContext } from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { getSlots } from "@fluentui/react-utilities";
|
|
3
|
+
import { AccordionHeaderContext } from "./AccordionHeaderContext";
|
|
4
4
|
/**
|
|
5
5
|
* Function that renders the final JSX of the component
|
|
6
6
|
*/
|
|
@@ -11,16 +11,6 @@ export const renderAccordionHeader_unstable = (state, contextValues) => {
|
|
|
11
11
|
} = getSlots(state);
|
|
12
12
|
return /*#__PURE__*/React.createElement(AccordionHeaderContext.Provider, {
|
|
13
13
|
value: contextValues.accordionHeader
|
|
14
|
-
}, /*#__PURE__*/React.createElement(slots.root,
|
|
15
|
-
...slotProps.root
|
|
16
|
-
}, /*#__PURE__*/React.createElement(slots.button, {
|
|
17
|
-
...slotProps.button
|
|
18
|
-
}, state.expandIconPosition === 'start' && /*#__PURE__*/React.createElement(slots.expandIcon, {
|
|
19
|
-
...slotProps.expandIcon
|
|
20
|
-
}), slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
|
|
21
|
-
...slotProps.icon
|
|
22
|
-
}), slotProps.root.children, state.expandIconPosition === 'end' && /*#__PURE__*/React.createElement(slots.expandIcon, {
|
|
23
|
-
...slotProps.expandIcon
|
|
24
|
-
}))));
|
|
14
|
+
}, /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.button, slotProps.button, state.expandIconPosition === "start" && /*#__PURE__*/React.createElement(slots.expandIcon, slotProps.expandIcon), slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), slotProps.root.children, state.expandIconPosition === "end" && /*#__PURE__*/React.createElement(slots.expandIcon, slotProps.expandIcon))));
|
|
25
15
|
};
|
|
26
16
|
//# sourceMappingURL=renderAccordionHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getSlots","AccordionHeaderContext","renderAccordionHeader_unstable","state","contextValues","slots","slotProps","createElement","Provider","value","accordionHeader","root","button","expandIconPosition","expandIcon","icon","children"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getSlots","AccordionHeaderContext","renderAccordionHeader_unstable","state","contextValues","slots","slotProps","createElement","Provider","value","accordionHeader","root","button","expandIconPosition","expandIcon","icon","children"],"sources":["../../../src/components/AccordionHeader/renderAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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 {...slotProps.expandIcon} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {state.expandIconPosition === 'end' && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n </slots.root>\n </AccordionHeaderContext.Provider>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,sBAAsB,QAAQ;AAGvC;;;AAGA,OAAO,MAAMC,8BAAA,GAAiCA,CAC5CC,KAAA,EACAC,aAAA,KACG;EACH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAA+BG,KAAA;EAE5D,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,sBAAA,CAAuBO,QAAQ;IAACC,KAAA,EAAOL,aAAA,CAAcM;kBACpDX,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI,eAC5BZ,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMO,MAAM,EAAKN,SAAA,CAAUM,MAAM,EAC/BT,KAAA,CAAMU,kBAAkB,KAAK,wBAAWd,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMS,UAAU,EAAKR,SAAA,CAAUQ,UAAU,GAClFT,KAAA,CAAMU,IAAI,iBAAIhB,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMU,IAAI,EAAKT,SAAA,CAAUS,IAAI,GAC5CT,SAAA,CAAUK,IAAI,CAACK,QAAQ,EACvBb,KAAA,CAAMU,kBAAkB,KAAK,sBAASd,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMS,UAAU,EAAKR,SAAA,CAAUQ,UAAU;AAK3F"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { getNativeElementProps, resolveShorthand, useEventCallback } from
|
|
3
|
-
import { useAccordionItemContext_unstable } from
|
|
4
|
-
import { useARIAButtonShorthand } from
|
|
5
|
-
import { useAccordionContext_unstable } from
|
|
6
|
-
import { ChevronRightRegular } from
|
|
7
|
-
import { useFluent_unstable as useFluent } from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { getNativeElementProps, resolveShorthand, useEventCallback } from "@fluentui/react-utilities";
|
|
3
|
+
import { useAccordionItemContext_unstable } from "../AccordionItem/index";
|
|
4
|
+
import { useARIAButtonShorthand } from "@fluentui/react-aria";
|
|
5
|
+
import { useAccordionContext_unstable } from "../Accordion/AccordionContext";
|
|
6
|
+
import { ChevronRightRegular } from "@fluentui/react-icons";
|
|
7
|
+
import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
|
|
8
8
|
/**
|
|
9
9
|
* Returns the props and state required to render the component
|
|
10
10
|
* @param props - AccordionHeader properties
|
|
@@ -17,8 +17,8 @@ export const useAccordionHeader_unstable = (props, ref) => {
|
|
|
17
17
|
button,
|
|
18
18
|
expandIcon,
|
|
19
19
|
inline = false,
|
|
20
|
-
size =
|
|
21
|
-
expandIconPosition =
|
|
20
|
+
size = "medium",
|
|
21
|
+
expandIconPosition = "start"
|
|
22
22
|
} = props;
|
|
23
23
|
const {
|
|
24
24
|
onHeaderClick: onAccordionHeaderClick,
|
|
@@ -26,29 +26,29 @@ export const useAccordionHeader_unstable = (props, ref) => {
|
|
|
26
26
|
open
|
|
27
27
|
} = useAccordionItemContext_unstable();
|
|
28
28
|
/**
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
* force disabled state on button if accordion isn't collapsible
|
|
30
|
+
* and this is the only item opened
|
|
31
|
+
*/
|
|
32
32
|
const disabledFocusable = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);
|
|
33
33
|
const {
|
|
34
34
|
dir
|
|
35
35
|
} = useFluent();
|
|
36
36
|
// Calculate how to rotate the expand icon [>] (ChevronRightRegular)
|
|
37
37
|
let expandIconRotation;
|
|
38
|
-
if (expandIconPosition ===
|
|
38
|
+
if (expandIconPosition === "end") {
|
|
39
39
|
// If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed
|
|
40
40
|
expandIconRotation = open ? -90 : 90;
|
|
41
41
|
} else {
|
|
42
42
|
// Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed
|
|
43
|
-
expandIconRotation = open ? 90 : dir !==
|
|
43
|
+
expandIconRotation = open ? 90 : dir !== "rtl" ? 0 : 180;
|
|
44
44
|
}
|
|
45
45
|
const buttonShorthand = useARIAButtonShorthand(button, {
|
|
46
46
|
required: true,
|
|
47
47
|
defaultProps: {
|
|
48
48
|
disabled,
|
|
49
49
|
disabledFocusable,
|
|
50
|
-
|
|
51
|
-
type:
|
|
50
|
+
"aria-expanded": open,
|
|
51
|
+
type: "button"
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
54
|
return {
|
|
@@ -58,12 +58,12 @@ export const useAccordionHeader_unstable = (props, ref) => {
|
|
|
58
58
|
inline,
|
|
59
59
|
expandIconPosition,
|
|
60
60
|
components: {
|
|
61
|
-
root:
|
|
62
|
-
button:
|
|
63
|
-
expandIcon:
|
|
64
|
-
icon:
|
|
61
|
+
root: "div",
|
|
62
|
+
button: "button",
|
|
63
|
+
expandIcon: "span",
|
|
64
|
+
icon: "div"
|
|
65
65
|
},
|
|
66
|
-
root: getNativeElementProps(as ||
|
|
66
|
+
root: getNativeElementProps(as || "div", {
|
|
67
67
|
ref,
|
|
68
68
|
...props
|
|
69
69
|
}),
|
|
@@ -76,14 +76,13 @@ export const useAccordionHeader_unstable = (props, ref) => {
|
|
|
76
76
|
transform: `rotate(${expandIconRotation}deg)`
|
|
77
77
|
}
|
|
78
78
|
}),
|
|
79
|
-
|
|
79
|
+
"aria-hidden": true
|
|
80
80
|
}
|
|
81
81
|
}),
|
|
82
82
|
button: {
|
|
83
83
|
...buttonShorthand,
|
|
84
84
|
onClick: useEventCallback(ev => {
|
|
85
|
-
|
|
86
|
-
(_a = buttonShorthand.onClick) === null || _a === void 0 ? void 0 : _a.call(buttonShorthand, ev);
|
|
85
|
+
buttonShorthand.onClick?.(ev);
|
|
87
86
|
if (!ev.defaultPrevented) {
|
|
88
87
|
onAccordionHeaderClick(ev);
|
|
89
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","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","buttonShorthand","required","defaultProps","type","components","root","children","createElement","style","transform","onClick","ev","
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","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","buttonShorthand","required","defaultProps","type","components","root","children","createElement","style","transform","onClick","ev","defaultPrevented"],"sources":["../../../src/components/AccordionHeader/useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { 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 const buttonShorthand = useARIAButtonShorthand(button, {\n required: true,\n defaultProps: {\n disabled,\n disabledFocusable,\n 'aria-expanded': open,\n type: 'button',\n },\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: {\n ...buttonShorthand,\n onClick: useEventCallback(\n (ev: React.MouseEvent<HTMLButtonElement & HTMLDivElement & HTMLSpanElement & HTMLAnchorElement>) => {\n buttonShorthand.onClick?.(ev);\n if (!ev.defaultPrevented) {\n onAccordionHeaderClick(ev);\n }\n },\n ),\n },\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ;AAC1E,SAASC,gCAAgC,QAAQ;AACjD,SAASC,sBAAsB,QAAQ;AAEvC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,mBAAmB,QAAQ;AACpC,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAEhD;;;;;AAKA,OAAO,MAAMC,2BAAA,GAA8BA,CACzCC,KAAA,EACAC,GAAA,KACyB;EACzB,MAAM;IAAEC,EAAA;IAAIC,IAAA;IAAMC,MAAA;IAAQC,UAAA;IAAYC,MAAA,GAAS,KAAK;IAAEC,IAAA,GAAO;IAAUC,kBAAA,GAAqB;EAAO,CAAE,GAAGR,KAAA;EACxG,MAAM;IAAES,aAAA,EAAeC,sBAAA;IAAwBC,QAAA;IAAUC;EAAI,CAAE,GAAGnB,gCAAA;EAElE;;;;EAIA,MAAMoB,iBAAA,GAAoBlB,4BAAA,CAA6BmB,GAAA,IAAO,CAACA,GAAA,CAAIC,WAAW,IAAID,GAAA,CAAIE,SAAS,CAACC,MAAM,KAAK,KAAKL,IAAA;EAEhH,MAAM;IAAEM;EAAG,CAAE,GAAGpB,SAAA;EAEhB;EACA,IAAIqB,kBAAA;EACJ,IAAIX,kBAAA,KAAuB,OAAO;IAChC;IACAW,kBAAA,GAAqBP,IAAA,GAAO,CAAC,KAAK,EAAE;EACtC,OAAO;IACL;IACAO,kBAAA,GAAqBP,IAAA,GAAO,KAAKM,GAAA,KAAQ,QAAQ,IAAI,GAAG;EAC1D;EAEA,MAAME,eAAA,GAAkB1B,sBAAA,CAAuBU,MAAA,EAAQ;IACrDiB,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZX,QAAA;MACAE,iBAAA;MACA,iBAAiBD,IAAA;MACjBW,IAAA,EAAM;IACR;EACF;EAEA,OAAO;IACLZ,QAAA;IACAC,IAAA;IACAL,IAAA;IACAD,MAAA;IACAE,kBAAA;IACAgB,UAAA,EAAY;MACVC,IAAA,EAAM;MACNrB,MAAA,EAAQ;MACRC,UAAA,EAAY;MACZF,IAAA,EAAM;IACR;IACAsB,IAAA,EAAMnC,qBAAA,CAAsBY,EAAA,IAAM,OAAO;MACvCD,GAAA;MACA,GAAGD;IACL;IACAG,IAAA,EAAMZ,gBAAA,CAAiBY,IAAA;IACvBE,UAAA,EAAYd,gBAAA,CAAiBc,UAAA,EAAY;MACvCgB,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZI,QAAA,eAAUrC,KAAA,CAAAsC,aAAA,CAAC/B,mBAAA;UAAoBgC,KAAA,EAAO;YAAEC,SAAA,EAAY,UAASV,kBAAmB;UAAM;;QACtF,eAAe;MACjB;IACF;IACAf,MAAA,EAAQ;MACN,GAAGgB,eAAe;MAClBU,OAAA,EAAStC,gBAAA,CACNuC,EAAA,IAAmG;QAClGX,eAAA,CAAgBU,OAAO,GAAGC,EAAA;QAC1B,IAAI,CAACA,EAAA,CAAGC,gBAAgB,EAAE;UACxBtB,sBAAA,CAAuBqB,EAAA;QACzB;MACF;IAEJ;EACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","useMemo"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","useMemo"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAOvB,OAAO,SAASC,yCAAyCC,KAA2B,EAAgC;EAClH,MAAM;IAAEC,QAAA;IAAUC,kBAAA;IAAoBC,IAAA;IAAMC;EAAI,CAAE,GAAGJ,KAAA;EAErD,MAAMK,eAAA,GAAkBP,KAAA,CAAMQ,OAAO,CACnC,OAAO;IACLL,QAAA;IACAC,kBAAA;IACAC,IAAA;IACAC;EACF,IACA,CAACH,QAAA,EAAUC,kBAAA,EAAoBC,IAAA,EAAMC,IAAA,CAAK;EAG5C,OAAO;IAAEC;EAAgB;AAC3B"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { shorthands, __styles, mergeClasses } from
|
|
2
|
-
import { createFocusOutlineStyle } from
|
|
3
|
-
import { tokens, typographyStyles } from
|
|
1
|
+
import { shorthands, __styles, mergeClasses } from "@griffel/react";
|
|
2
|
+
import { createFocusOutlineStyle } from "@fluentui/react-tabster";
|
|
3
|
+
import { tokens, typographyStyles } from "@fluentui/react-theme";
|
|
4
4
|
export const accordionHeaderClassNames = {
|
|
5
|
-
root:
|
|
6
|
-
button:
|
|
7
|
-
expandIcon:
|
|
8
|
-
icon:
|
|
5
|
+
root: "fui-AccordionHeader",
|
|
6
|
+
button: "fui-AccordionHeader__button",
|
|
7
|
+
expandIcon: "fui-AccordionHeader__expandIcon",
|
|
8
|
+
icon: "fui-AccordionHeader__icon"
|
|
9
9
|
};
|
|
10
10
|
const useStyles = /*#__PURE__*/__styles({
|
|
11
11
|
resetButton: {
|
|
@@ -160,9 +160,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
160
160
|
export const useAccordionHeaderStyles_unstable = state => {
|
|
161
161
|
const styles = useStyles();
|
|
162
162
|
state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
|
|
163
|
-
state.button.className = mergeClasses(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition ===
|
|
163
|
+
state.button.className = mergeClasses(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition === "end" && !state.icon && styles.buttonExpandIconEndNoIcon, state.expandIconPosition === "end" && styles.buttonExpandIconEnd, state.inline && styles.buttonInline, state.size === "small" && styles.buttonSmall, state.size === "large" && styles.buttonLarge, state.size === "extra-large" && styles.buttonExtraLarge, state.button.className);
|
|
164
164
|
if (state.expandIcon) {
|
|
165
|
-
state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition ===
|
|
165
|
+
state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === "start" && styles.expandIconStart, state.expandIconPosition === "end" && styles.expandIconEnd, state.expandIcon.className);
|
|
166
166
|
}
|
|
167
167
|
if (state.icon) {
|
|
168
168
|
state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);
|
|
@@ -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":["
|
|
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.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,EAuFlB;AAEA;AACA,OAAO,MAAMC,iCAAA,GAAqCC,KAAA,IAAgC;EAChF,MAAMC,MAAA,GAAS/F,SAAA;EACf8F,KAAA,CAAMlG,IAAI,CAACoG,SAAS,GAAGzG,YAAA,CACrBI,yBAAA,CAA0BC,IAAI,EAC9BmG,MAAA,CAAOnG,IAAI,EACXkG,KAAA,CAAMG,MAAM,IAAIF,MAAA,CAAOtC,UAAU,EACjCqC,KAAA,CAAMI,QAAQ,IAAIH,MAAA,CAAOxC,YAAY,EACrCuC,KAAA,CAAMlG,IAAI,CAACoG,SAAS;EAGtBF,KAAA,CAAMjG,MAAM,CAACmG,SAAS,GAAGzG,YAAA,CACvBI,yBAAA,CAA0BE,MAAM,EAChCkG,MAAA,CAAO9F,WAAW,EAClB8F,MAAA,CAAOlG,MAAM,EACbkG,MAAA,CAAO/E,cAAc,EACrB8E,KAAA,CAAMK,kBAAkB,KAAK,SAAS,CAACL,KAAA,CAAM/F,IAAI,IAAIgG,MAAA,CAAOd,yBAAyB,EACrFa,KAAA,CAAMK,kBAAkB,KAAK,SAASJ,MAAA,CAAOb,mBAAmB,EAChEY,KAAA,CAAMG,MAAM,IAAIF,MAAA,CAAOf,YAAY,EACnCc,KAAA,CAAMM,IAAI,KAAK,WAAWL,MAAA,CAAOlB,WAAW,EAC5CiB,KAAA,CAAMM,IAAI,KAAK,WAAWL,MAAA,CAAOjB,WAAW,EAC5CgB,KAAA,CAAMM,IAAI,KAAK,iBAAiBL,MAAA,CAAOhB,gBAAgB,EACvDe,KAAA,CAAMjG,MAAM,CAACmG,SAAS;EAGxB,IAAIF,KAAA,CAAMhG,UAAU,EAAE;IACpBgG,KAAA,CAAMhG,UAAU,CAACkG,SAAS,GAAGzG,YAAA,CAC3BI,yBAAA,CAA0BG,UAAU,EACpCiG,MAAA,CAAOjG,UAAU,EACjBgG,KAAA,CAAMK,kBAAkB,KAAK,WAAWJ,MAAA,CAAOX,eAAe,EAC9DU,KAAA,CAAMK,kBAAkB,KAAK,SAASJ,MAAA,CAAOV,aAAa,EAC1DS,KAAA,CAAMhG,UAAU,CAACkG,SAAS;EAE9B;EACA,IAAIF,KAAA,CAAM/F,IAAI,EAAE;IACd+F,KAAA,CAAM/F,IAAI,CAACiG,SAAS,GAAGzG,YAAA,CAAaI,yBAAA,CAA0BI,IAAI,EAAEgG,MAAA,CAAOhG,IAAI,EAAE+F,KAAA,CAAM/F,IAAI,CAACiG,SAAS;EACvG;EACA,OAAOF,KAAA;AACT"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { useAccordionItem_unstable } from
|
|
3
|
-
import { useAccordionItemContextValues_unstable } from
|
|
4
|
-
import { renderAccordionItem_unstable } from
|
|
5
|
-
import { useCustomStyleHooks_unstable } from
|
|
6
|
-
import { useAccordionItemStyles_unstable } from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useAccordionItem_unstable } from "./useAccordionItem";
|
|
3
|
+
import { useAccordionItemContextValues_unstable } from "./useAccordionItemContextValues";
|
|
4
|
+
import { renderAccordionItem_unstable } from "./renderAccordionItem";
|
|
5
|
+
import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
|
|
6
|
+
import { useAccordionItemStyles_unstable } from "./useAccordionItemStyles";
|
|
7
7
|
/**
|
|
8
8
|
* Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
|
|
9
9
|
*/
|
|
@@ -17,5 +17,5 @@ export const AccordionItem = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
17
17
|
useCustomStyles(state);
|
|
18
18
|
return renderAccordionItem_unstable(state, contextValues);
|
|
19
19
|
});
|
|
20
|
-
AccordionItem.displayName =
|
|
20
|
+
AccordionItem.displayName = "AccordionItem";
|
|
21
21
|
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useAccordionItem_unstable","useAccordionItemContextValues_unstable","renderAccordionItem_unstable","useCustomStyleHooks_unstable","useAccordionItemStyles_unstable","AccordionItem","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useAccordionItem_unstable","useAccordionItemContextValues_unstable","renderAccordionItem_unstable","useCustomStyleHooks_unstable","useAccordionItemStyles_unstable","AccordionItem","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAccordionItemStyles_unstable } from './useAccordionItemStyles';\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 const { useAccordionItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderAccordionItem_unstable(state, contextValues);\n});\n\nAccordionItem.displayName = 'AccordionItem';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sCAAsC,QAAQ;AACvD,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAIhD;;;AAGA,OAAO,MAAMC,aAAA,gBAAyDN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQT,yBAAA,CAA0BO,KAAA,EAAOC,GAAA;EAC/C,MAAME,aAAA,GAAgBT,sCAAA,CAAuCQ,KAAA;EAE7DL,+BAAA,CAAgCK,KAAA;EAEhC,MAAM;IAAEL,+BAAA,EAAiCO;EAAe,CAAE,GAAGR,4BAAA;EAC7DQ,eAAA,CAAgBF,KAAA;EAEhB,OAAOP,4BAAA,CAA6BO,KAAA,EAAOC,aAAA;AAC7C;AAEAL,aAAA,CAAcO,WAAW,GAAG"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
2
|
//# sourceMappingURL=AccordionItem.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React"],"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: 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
import * as React from
|
|
1
|
+
import * as React from "react";
|
|
2
2
|
export const AccordionItemContext = /*#__PURE__*/React.createContext(undefined);
|
|
3
3
|
const accordionItemContextDefaultValue = {
|
|
4
4
|
onHeaderClick() {
|
|
5
|
-
/** */
|
|
6
|
-
},
|
|
5
|
+
/** */},
|
|
7
6
|
open: false,
|
|
8
7
|
disabled: false
|
|
9
8
|
};
|
|
10
9
|
export const AccordionItemProvider = AccordionItemContext.Provider;
|
|
11
|
-
export const useAccordionItemContext_unstable = () =>
|
|
12
|
-
var _a;
|
|
13
|
-
return (_a = React.useContext(AccordionItemContext)) !== null && _a !== void 0 ? _a : accordionItemContextDefaultValue;
|
|
14
|
-
};
|
|
10
|
+
export const useAccordionItemContext_unstable = () => React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;
|
|
15
11
|
//# sourceMappingURL=AccordionItemContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","onHeaderClick","open","disabled","AccordionItemProvider","Provider","useAccordionItemContext_unstable","
|
|
1
|
+
{"version":3,"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","onHeaderClick","open","disabled","AccordionItemProvider","Provider","useAccordionItemContext_unstable","useContext"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,OAAO,MAAMC,oBAAA,gBAAuBD,KAAA,CAAME,aAAa,CACrDC,SAAA;AAGF,MAAMC,gCAAA,GAA8D;EAClEC,cAAA,EAAgB;IACd,OACF;EACAC,IAAA,EAAM,KAAK;EACXC,QAAA,EAAU;AACZ;AAEA,OAAO,MAAMC,qBAAA,GAAwBP,oBAAA,CAAqBQ,QAAQ;AAElE,OAAO,MAAMC,gCAAA,GAAmCA,CAAA,KAC9CV,KAAA,CAAMW,UAAU,CAACV,oBAAA,KAAyBG,gCAAA"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
1
|
+
export * from "./AccordionItem";
|
|
2
|
+
export * from "./AccordionItem.types";
|
|
3
|
+
export * from "./renderAccordionItem";
|
|
4
|
+
export * from "./useAccordionItem";
|
|
5
|
+
export * from "./useAccordionItemContextValues";
|
|
6
|
+
export * from "./AccordionItemContext";
|
|
7
|
+
export * from "./useAccordionItemStyles";
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"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';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { getSlots } from
|
|
3
|
-
import { AccordionItemContext } from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { getSlots } from "@fluentui/react-utilities";
|
|
3
|
+
import { AccordionItemContext } from "./AccordionItemContext";
|
|
4
4
|
/**
|
|
5
5
|
* Function that renders the final JSX of the component
|
|
6
6
|
*/
|
|
@@ -9,9 +9,7 @@ export const renderAccordionItem_unstable = (state, contextValues) => {
|
|
|
9
9
|
slots,
|
|
10
10
|
slotProps
|
|
11
11
|
} = getSlots(state);
|
|
12
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
|
13
|
-
...slotProps.root
|
|
14
|
-
}, /*#__PURE__*/React.createElement(AccordionItemContext.Provider, {
|
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(AccordionItemContext.Provider, {
|
|
15
13
|
value: contextValues.accordionItem
|
|
16
14
|
}, slotProps.root.children));
|
|
17
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getSlots","AccordionItemContext","renderAccordionItem_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","accordionItem","children"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getSlots","AccordionItemContext","renderAccordionItem_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","accordionItem","children"],"sources":["../../../src/components/AccordionItem/renderAccordionItem.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,oBAAoB,QAAQ;AAGrC;;;AAGA,OAAO,MAAMC,4BAAA,GAA+BA,CAACC,KAAA,EAA2BC,aAAA,KAA8C;EACpH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAA6BG,KAAA;EAE1D,oBACEJ,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BT,KAAA,CAAAQ,aAAA,CAACN,oBAAA,CAAqBQ,QAAQ;IAACC,KAAA,EAAON,aAAA,CAAcO;KACjDL,SAAA,CAAUE,IAAI,CAACI,QAAQ;AAIhC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { getNativeElementProps } from
|
|
3
|
-
import { useAccordionContext_unstable } from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { getNativeElementProps } from "@fluentui/react-utilities";
|
|
3
|
+
import { useAccordionContext_unstable } from "../Accordion/AccordionContext";
|
|
4
4
|
/**
|
|
5
5
|
* Returns the props and state required to render the component
|
|
6
6
|
* @param props - AccordionItem properties
|
|
@@ -21,9 +21,9 @@ export const useAccordionItem_unstable = (props, ref) => {
|
|
|
21
21
|
disabled,
|
|
22
22
|
onHeaderClick: onAccordionHeaderClick,
|
|
23
23
|
components: {
|
|
24
|
-
root:
|
|
24
|
+
root: "div"
|
|
25
25
|
},
|
|
26
|
-
root: getNativeElementProps(
|
|
26
|
+
root: getNativeElementProps("div", {
|
|
27
27
|
ref: ref,
|
|
28
28
|
...props
|
|
29
29
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","useCallback","ev","onHeaderClick","components","root"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","useCallback","ev","onHeaderClick","components","root"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,4BAA4B,QAAQ;AAI7C;;;;;AAKA,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,KAAA,EACAC,GAAA,KACuB;EACvB,MAAM;IAAEC,KAAA;IAAOC,QAAA,GAAW;EAAK,CAAE,GAAGH,KAAA;EAEpC,MAAMI,aAAA,GAAgBN,4BAAA,CAA6BO,GAAA,IAAOA,GAAA,CAAID,aAAa;EAC3E,MAAME,IAAA,GAAOR,4BAAA,CAA6BO,GAAA,IAAOA,GAAA,CAAIE,SAAS,CAACC,QAAQ,CAACN,KAAA;EACxE,MAAMO,sBAAA,GAAyBb,KAAA,CAAMc,WAAW,CAC7CC,EAAA,IAA6BP,aAAA,CAAcO,EAAA,EAAI;IAAET;EAAM,IACxD,CAACE,aAAA,EAAeF,KAAA,CAAM;EAGxB,OAAO;IACLI,IAAA;IACAH,QAAA;IACAS,aAAA,EAAeH,sBAAA;IACfI,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAMjB,qBAAA,CAAsB,OAAO;MACjCI,GAAA,EAAKA,GAAA;MACL,GAAGD;IACL;EACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useAccordionItemContextValues_unstable","state","disabled","onHeaderClick","open","accordionItem","useMemo"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useAccordionItemContextValues_unstable","state","disabled","onHeaderClick","open","accordionItem","useMemo"],"sources":["../../../src/components/AccordionItem/useAccordionItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionItemContextValue, AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n const { disabled, onHeaderClick, open } = state;\n const accordionItem = React.useMemo<AccordionItemContextValue>(\n () => ({ disabled, onHeaderClick, open }),\n [disabled, onHeaderClick, open],\n );\n\n return { accordionItem };\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,OAAO,SAASC,uCAAuCC,KAAyB,EAA8B;EAC5G,MAAM;IAAEC,QAAA;IAAUC,aAAA;IAAeC;EAAI,CAAE,GAAGH,KAAA;EAC1C,MAAMI,aAAA,GAAgBN,KAAA,CAAMO,OAAO,CACjC,OAAO;IAAEJ,QAAA;IAAUC,aAAA;IAAeC;EAAK,IACvC,CAACF,QAAA,EAAUC,aAAA,EAAeC,IAAA,CAAK;EAGjC,OAAO;IAAEC;EAAc;AACzB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { mergeClasses } from
|
|
1
|
+
import { mergeClasses } from "@griffel/react";
|
|
2
2
|
export const accordionItemClassNames = {
|
|
3
|
-
root:
|
|
3
|
+
root: "fui-AccordionItem"
|
|
4
4
|
};
|
|
5
5
|
export const useAccordionItemStyles_unstable = state => {
|
|
6
6
|
state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","accordionItemClassNames","root","useAccordionItemStyles_unstable","state","className"],"sources":["
|
|
1
|
+
{"version":3,"names":["mergeClasses","accordionItemClassNames","root","useAccordionItemStyles_unstable","state","className"],"sources":["../../../src/components/AccordionItem/useAccordionItemStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';\n\nexport const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {\n root: 'fui-AccordionItem',\n};\n\nexport const useAccordionItemStyles_unstable = (state: AccordionItemState) => {\n state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);\n\n return state;\n};\n"],"mappings":"AACA,SAASA,YAAY,QAAQ;AAG7B,OAAO,MAAMC,uBAAA,GAA8D;EACzEC,IAAA,EAAM;AACR;AAEA,OAAO,MAAMC,+BAAA,GAAmCC,KAAA,IAA8B;EAC5EA,KAAA,CAAMF,IAAI,CAACG,SAAS,GAAGL,YAAA,CAAaC,uBAAA,CAAwBC,IAAI,EAAEE,KAAA,CAAMF,IAAI,CAACG,SAAS;EAEtF,OAAOD,KAAA;AACT"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { useAccordionPanel_unstable } from
|
|
3
|
-
import { renderAccordionPanel_unstable } from
|
|
4
|
-
import { useCustomStyleHooks_unstable } from
|
|
5
|
-
import { useAccordionPanelStyles_unstable } from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useAccordionPanel_unstable } from "./useAccordionPanel";
|
|
3
|
+
import { renderAccordionPanel_unstable } from "./renderAccordionPanel";
|
|
4
|
+
import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
|
|
5
|
+
import { useAccordionPanelStyles_unstable } from "./useAccordionPanelStyles";
|
|
6
6
|
/**
|
|
7
7
|
* Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.
|
|
8
8
|
*/
|
|
@@ -15,5 +15,5 @@ export const AccordionPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
15
15
|
useCustomStyles(state);
|
|
16
16
|
return renderAccordionPanel_unstable(state);
|
|
17
17
|
});
|
|
18
|
-
AccordionPanel.displayName =
|
|
18
|
+
AccordionPanel.displayName = "AccordionPanel";
|
|
19
19
|
//# sourceMappingURL=AccordionPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useAccordionPanel_unstable","renderAccordionPanel_unstable","useCustomStyleHooks_unstable","useAccordionPanelStyles_unstable","AccordionPanel","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useAccordionPanel_unstable","renderAccordionPanel_unstable","useCustomStyleHooks_unstable","useAccordionPanelStyles_unstable","AccordionPanel","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAccordionPanel_unstable } from './useAccordionPanel';\nimport { renderAccordionPanel_unstable } from './renderAccordionPanel';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n const { useAccordionPanelStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderAccordionPanel_unstable(state);\n});\n\nAccordionPanel.displayName = 'AccordionPanel';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,gCAAgC,QAAQ;AAIjD;;;AAGA,OAAO,MAAMC,cAAA,gBAA2DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvG,MAAMC,KAAA,GAAQR,0BAAA,CAA2BM,KAAA,EAAOC,GAAA;EAEhDJ,gCAAA,CAAiCK,KAAA;EAEjC,MAAM;IAAEL,gCAAA,EAAkCM;EAAe,CAAE,GAAGP,4BAAA;EAC9DO,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,6BAAA,CAA8BO,KAAA;AACvC;AAEAJ,cAAA,CAAeM,WAAW,GAAG"}
|