@fluentui/react-accordion 9.0.14 → 9.0.16
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 +87 -1
- package/CHANGELOG.md +27 -2
- package/lib/components/Accordion/Accordion.js +0 -1
- package/lib/components/Accordion/Accordion.js.map +1 -1
- package/lib/components/Accordion/AccordionContext.js +0 -2
- package/lib/components/Accordion/AccordionContext.js.map +1 -1
- package/lib/components/Accordion/renderAccordion.js +2 -2
- package/lib/components/Accordion/renderAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordion.js +2 -11
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordionContextValues.js +2 -2
- package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib/components/Accordion/useAccordionStyles.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.js +0 -1
- package/lib/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js +0 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js +10 -6
- package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js +4 -9
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js +130 -136
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.js +0 -1
- package/lib/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.js +0 -2
- package/lib/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.js +2 -2
- package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +0 -1
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.js +0 -1
- package/lib/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.js +2 -2
- package/lib/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js +0 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js +6 -9
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Accordion.js +0 -2
- package/lib-commonjs/Accordion.js.map +1 -1
- package/lib-commonjs/AccordionHeader.js +0 -2
- package/lib-commonjs/AccordionHeader.js.map +1 -1
- package/lib-commonjs/AccordionItem.js +0 -2
- package/lib-commonjs/AccordionItem.js.map +1 -1
- package/lib-commonjs/AccordionPanel.js +0 -2
- package/lib-commonjs/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.js +0 -7
- 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 +0 -6
- package/lib-commonjs/components/Accordion/AccordionContext.js.map +1 -1
- package/lib-commonjs/components/Accordion/index.js +0 -8
- package/lib-commonjs/components/Accordion/index.js.map +1 -1
- package/lib-commonjs/components/Accordion/renderAccordion.js +2 -7
- package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.js +2 -16
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js +2 -4
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionStyles.js +0 -4
- package/lib-commonjs/components/Accordion/useAccordionStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js +0 -7
- 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 +0 -5
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/index.js +0 -7
- package/lib-commonjs/components/AccordionHeader/index.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js +10 -11
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +4 -18
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js +0 -3
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js +130 -141
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.js +0 -7
- 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 +0 -6
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/index.js +0 -8
- package/lib-commonjs/components/AccordionItem/index.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js +2 -7
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +0 -6
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js +0 -3
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js +0 -4
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js +0 -6
- 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 +0 -6
- package/lib-commonjs/components/AccordionPanel/index.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js +2 -6
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +0 -7
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js +6 -13
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib-commonjs/index.js +0 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;AAGO,MAAMA,8BAA8B,GAAG,CAC5CC,KAA2B,EAC3BC,aAA2C,KACzC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAuBJ,KAAK,CAAC;EAElE,OACEK,oBAACC,+CAAsB,CAACC,QAAQ;IAACC,KAAK,EAAEP,aAAa,CAACQ;EAAe,GACnEJ,oBAACH,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,GAC5BL,oBAACH,KAAK,CAACS,MAAM;IAAA,GAAKR,SAAS,CAACQ;EAAM,GAC/BX,KAAK,CAACY,kBAAkB,KAAK,OAAO,IAAIP,oBAACH,KAAK,CAACW,UAAU;IAAA,GAAKV,SAAS,CAACU;EAAU,EAAI,EACtFX,KAAK,CAACY,IAAI,IAAIT,oBAACH,KAAK,CAACY,IAAI;IAAA,GAAKX,SAAS,CAACW;EAAI,EAAI,EAChDX,SAAS,CAACO,IAAI,CAACK,QAAQ,EACvBf,KAAK,CAACY,kBAAkB,KAAK,KAAK,IAAIP,oBAACH,KAAK,CAACW,UAAU;IAAA,GAAKV,SAAS,CAACU;EAAU,EAAI,CACxE,CACJ,CACmB;AAEtC,CAAC;AAlBYG,sCAA8B","names":["renderAccordionHeader_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","AccordionHeaderContext_1","Provider","value","accordionHeader","root","button","expandIconPosition","expandIcon","icon","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-accordion/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"]}
|
|
@@ -4,27 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useAccordionHeader_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
-
|
|
12
9
|
const index_1 = /*#__PURE__*/require("../AccordionItem/index");
|
|
13
|
-
|
|
14
10
|
const react_aria_1 = /*#__PURE__*/require("@fluentui/react-aria");
|
|
15
|
-
|
|
16
11
|
const AccordionContext_1 = /*#__PURE__*/require("../Accordion/AccordionContext");
|
|
17
|
-
|
|
18
12
|
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
19
|
-
|
|
20
13
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
21
14
|
/**
|
|
22
15
|
* Returns the props and state required to render the component
|
|
23
16
|
* @param props - AccordionHeader properties
|
|
24
17
|
* @param ref - reference to root HTMLElement of AccordionHeader
|
|
25
18
|
*/
|
|
26
|
-
|
|
27
|
-
|
|
28
19
|
const useAccordionHeader_unstable = (props, ref) => {
|
|
29
20
|
const {
|
|
30
21
|
as,
|
|
@@ -44,14 +35,12 @@ const useAccordionHeader_unstable = (props, ref) => {
|
|
|
44
35
|
* force disabled state on button if accordion isn't collapsible
|
|
45
36
|
* and this is the only item opened
|
|
46
37
|
*/
|
|
47
|
-
|
|
48
38
|
const disabledFocusable = AccordionContext_1.useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);
|
|
49
39
|
const {
|
|
50
40
|
dir
|
|
51
|
-
} = react_shared_contexts_1.useFluent_unstable();
|
|
52
|
-
|
|
41
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
|
42
|
+
// Calculate how to rotate the expand icon [>] (ChevronRightRegular)
|
|
53
43
|
let expandIconRotation;
|
|
54
|
-
|
|
55
44
|
if (expandIconPosition === 'end') {
|
|
56
45
|
// If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed
|
|
57
46
|
expandIconRotation = open ? -90 : 90;
|
|
@@ -59,7 +48,6 @@ const useAccordionHeader_unstable = (props, ref) => {
|
|
|
59
48
|
// Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed
|
|
60
49
|
expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
|
|
61
50
|
}
|
|
62
|
-
|
|
63
51
|
const buttonShorthand = react_aria_1.useARIAButtonShorthand(button, {
|
|
64
52
|
required: true,
|
|
65
53
|
defaultProps: {
|
|
@@ -97,12 +85,11 @@ const useAccordionHeader_unstable = (props, ref) => {
|
|
|
97
85
|
'aria-hidden': true
|
|
98
86
|
}
|
|
99
87
|
}),
|
|
100
|
-
button: {
|
|
88
|
+
button: {
|
|
89
|
+
...buttonShorthand,
|
|
101
90
|
onClick: react_utilities_1.useEventCallback(ev => {
|
|
102
91
|
var _a;
|
|
103
|
-
|
|
104
92
|
(_a = buttonShorthand.onClick) === null || _a === void 0 ? void 0 : _a.call(buttonShorthand, ev);
|
|
105
|
-
|
|
106
93
|
if (!ev.defaultPrevented) {
|
|
107
94
|
onAccordionHeaderClick(ev);
|
|
108
95
|
}
|
|
@@ -110,6 +97,5 @@ const useAccordionHeader_unstable = (props, ref) => {
|
|
|
110
97
|
}
|
|
111
98
|
};
|
|
112
99
|
};
|
|
113
|
-
|
|
114
100
|
exports.useAccordionHeader_unstable = useAccordionHeader_unstable;
|
|
115
101
|
//# sourceMappingURL=useAccordionHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;;;;;AAKO,MAAMA,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAM;IAAEC,EAAE;IAAEC,IAAI;IAAEC,MAAM;IAAEC,UAAU;IAAEC,MAAM,GAAG,KAAK;IAAEC,IAAI,GAAG,QAAQ;IAAEC,kBAAkB,GAAG;EAAO,CAAE,GAAGR,KAAK;EAC7G,MAAM;IAAES,aAAa,EAAEC,sBAAsB;IAAEC,QAAQ;IAAEC;EAAI,CAAE,GAAGC,wCAAgC,EAAE;EAEpG;;;;EAIA,MAAMC,iBAAiB,GAAGC,+CAA4B,CAACC,GAAG,IAAI,CAACA,GAAG,CAACC,WAAW,IAAID,GAAG,CAACE,SAAS,CAACC,MAAM,KAAK,CAAC,IAAIP,IAAI,CAAC;EAErH,MAAM;IAAEQ;EAAG,CAAE,GAAGC,0CAAS,EAAE;EAE3B;EACA,IAAIC,kBAAsC;EAC1C,IAAId,kBAAkB,KAAK,KAAK,EAAE;IAChC;IACAc,kBAAkB,GAAGV,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE;GACrC,MAAM;IACL;IACAU,kBAAkB,GAAGV,IAAI,GAAG,EAAE,GAAGQ,GAAG,KAAK,KAAK,GAAG,CAAC,GAAG,GAAG;;EAG1D,MAAMG,eAAe,GAAGC,mCAAsB,CAACpB,MAAM,EAAE;IACrDqB,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZf,QAAQ;MACRG,iBAAiB;MACjB,eAAe,EAAEF,IAAI;MACrBe,IAAI,EAAE;;GAET,CAAC;EAEF,OAAO;IACLhB,QAAQ;IACRC,IAAI;IACJL,IAAI;IACJD,MAAM;IACNE,kBAAkB;IAClBoB,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXzB,MAAM,EAAE,QAAQ;MAChBC,UAAU,EAAE,MAAM;MAClBF,IAAI,EAAE;KACP;IACD0B,IAAI,EAAEC,uCAAqB,CAAC5B,EAAE,IAAI,KAAK,EAAE;MACvCD,GAAG;MACH,GAAGD;KACJ,CAAC;IACFG,IAAI,EAAE2B,kCAAgB,CAAC3B,IAAI,CAAC;IAC5BE,UAAU,EAAEyB,kCAAgB,CAACzB,UAAU,EAAE;MACvCoB,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZK,QAAQ,EAAEC,oBAACC,iCAAmB;UAACC,KAAK,EAAE;YAAEC,SAAS,EAAE,UAAUb,kBAAkB;UAAM;QAAE,EAAI;QAC3F,aAAa,EAAE;;KAElB,CAAC;IACFlB,MAAM,EAAE;MACN,GAAGmB,eAAe;MAClBa,OAAO,EAAEN,kCAAgB,CACtBO,EAA8F,IAAI;;QACjG,qBAAe,CAACD,OAAO,+CAAvBb,eAAe,EAAWc,EAAE,CAAC;QAC7B,IAAI,CAACA,EAAE,CAACC,gBAAgB,EAAE;UACxB5B,sBAAsB,CAAC2B,EAAE,CAAC;;MAE9B,CAAC;;GAGN;AACH,CAAC;AAvEYE,mCAA2B","names":["useAccordionHeader_unstable","props","ref","as","icon","button","expandIcon","inline","size","expandIconPosition","onHeaderClick","onAccordionHeaderClick","disabled","open","index_1","disabledFocusable","AccordionContext_1","ctx","collapsible","openItems","length","dir","react_shared_contexts_1","expandIconRotation","buttonShorthand","react_aria_1","required","defaultProps","type","components","root","react_utilities_1","children","React","react_icons_1","style","transform","onClick","ev","defaultPrevented","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-accordion/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"]}
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useAccordionHeaderContextValues_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
function useAccordionHeaderContextValues_unstable(state) {
|
|
11
9
|
const {
|
|
12
10
|
disabled,
|
|
@@ -24,6 +22,5 @@ function useAccordionHeaderContextValues_unstable(state) {
|
|
|
24
22
|
accordionHeader
|
|
25
23
|
};
|
|
26
24
|
}
|
|
27
|
-
|
|
28
25
|
exports.useAccordionHeaderContextValues_unstable = useAccordionHeaderContextValues_unstable;
|
|
29
26
|
//# sourceMappingURL=useAccordionHeaderContextValues.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAOA,SAAgBA,wCAAwC,CAACC,KAA2B;EAClF,MAAM;IAAEC,QAAQ;IAAEC,kBAAkB;IAAEC,IAAI;IAAEC;EAAI,CAAE,GAAGJ,KAAK;EAE1D,MAAMK,eAAe,GAAGC,KAAK,CAACC,OAAO,CACnC,OAAO;IACLN,QAAQ;IACRC,kBAAkB;IAClBC,IAAI;IACJC;GACD,CAAC,EACF,CAACH,QAAQ,EAAEC,kBAAkB,EAAEC,IAAI,EAAEC,IAAI,CAAC,CAC3C;EAED,OAAO;IAAEC;EAAe,CAAE;AAC5B;AAdAG","names":["useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","React","useMemo","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-accordion/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"]}
|
|
@@ -4,187 +4,176 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useAccordionHeaderStyles_unstable = exports.accordionHeaderClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
-
|
|
10
8
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
|
-
|
|
12
9
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
13
|
-
|
|
14
10
|
exports.accordionHeaderClassNames = {
|
|
15
11
|
root: 'fui-AccordionHeader',
|
|
16
12
|
button: 'fui-AccordionHeader__button',
|
|
17
13
|
expandIcon: 'fui-AccordionHeader__expandIcon',
|
|
18
14
|
icon: 'fui-AccordionHeader__icon'
|
|
19
15
|
};
|
|
20
|
-
|
|
21
16
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
17
|
+
resetButton: {
|
|
18
|
+
B7ck84d: "f1e4lqlz",
|
|
19
|
+
De3pzq: "f1u2r49w",
|
|
20
|
+
sj55zd: "f1ym3bx4",
|
|
21
|
+
Bahqtrf: "f1mo0ibp",
|
|
22
|
+
Be2twd7: "fjoy568",
|
|
23
|
+
Bg96gwp: "fytdu2e",
|
|
24
|
+
B68tc82: "f1mtd64y",
|
|
25
|
+
Bmxbyg5: "f1y7q3j9",
|
|
26
|
+
z8tnut: "f1g0x7ka",
|
|
27
|
+
z189sj: ["fhxju0i", "f1cnd47f"],
|
|
28
|
+
Byoj8tv: "f1qch9an",
|
|
29
|
+
uwmqm3: ["f1cnd47f", "fhxju0i"],
|
|
30
|
+
Bv0vk6g: "f37px4s",
|
|
31
|
+
fsow6f: "fgusgyc"
|
|
37
32
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
33
|
+
focusIndicator: {
|
|
34
|
+
Brovlpu: "ftqa4ok",
|
|
35
|
+
B486eqv: "f2hkw1w",
|
|
36
|
+
B8q5s1w: "f8hki3x",
|
|
37
|
+
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
38
|
+
n8qw10: "f1bjia2o",
|
|
39
|
+
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
|
40
|
+
Bm4h7ae: "f15bsgw9",
|
|
41
|
+
B7ys5i9: "f14e48fq",
|
|
42
|
+
Busjfv9: "f18yb2kv",
|
|
43
|
+
Bhk32uz: "fd6o370",
|
|
44
|
+
Bf4ptjt: "fh1cnn4",
|
|
45
|
+
kclons: ["fy7oxxb", "f184ne2d"],
|
|
46
|
+
Bhdgwq3: "fpukqih",
|
|
47
|
+
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
|
48
|
+
Bqtpl0w: "frrh606",
|
|
49
|
+
clg4pj: ["f1v5zibi", "fo2hd23"],
|
|
50
|
+
hgwjuy: "ful5kiu",
|
|
51
|
+
Bonggc9: ["fo2hd23", "f1v5zibi"],
|
|
52
|
+
B1tsrr9: ["f1jqcqds", "ftffrms"],
|
|
53
|
+
Dah5zi: ["ftffrms", "f1jqcqds"],
|
|
54
|
+
Bkh64rk: ["f2e7qr6", "fsr1zz6"],
|
|
55
|
+
qqdqy8: ["fsr1zz6", "f2e7qr6"],
|
|
56
|
+
B6dhp37: "f1dvezut",
|
|
57
|
+
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
|
58
|
+
Boxcth7: "fjvm52t",
|
|
59
|
+
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
|
60
|
+
J0r882: "fdiulkx",
|
|
61
|
+
Bjwuhne: "f1yalx80",
|
|
62
|
+
Ghsupd: ["fq22d5a", "f1jw7pan"],
|
|
63
|
+
Bule8hv: ["f1jw7pan", "fq22d5a"]
|
|
69
64
|
},
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
65
|
+
root: {
|
|
66
|
+
sj55zd: "f19n0e5",
|
|
67
|
+
De3pzq: "f1c21dwh",
|
|
68
|
+
B6of3ja: "f1hu3pq6",
|
|
69
|
+
t21cq0: ["f11qmguv", "f1tyq0we"],
|
|
70
|
+
jrapky: "f19f4twv",
|
|
71
|
+
Frg6f3: ["f1tyq0we", "f11qmguv"],
|
|
72
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
73
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
74
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
75
|
+
Btl43ni: ["fyu767a", "f1jar5jt"]
|
|
81
76
|
},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
77
|
+
rootDisabled: {
|
|
78
|
+
Bcmaq0h: "fwrgwhw",
|
|
79
|
+
sj55zd: "f1s2aq7o"
|
|
85
80
|
},
|
|
86
|
-
|
|
87
|
-
|
|
81
|
+
rootInline: {
|
|
82
|
+
mc9l5x: "f14t3ns0"
|
|
88
83
|
},
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
84
|
+
button: {
|
|
85
|
+
qhf8xq: "f10pi13n",
|
|
86
|
+
a9b677: "fly5x3f",
|
|
87
|
+
B4j52fo: "f5ogflp",
|
|
88
|
+
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
89
|
+
Bn0qgzm: "f1f09k3d",
|
|
90
|
+
ibv6hh: ["finvdd3", "f1hqa2wf"],
|
|
91
|
+
icvyot: "fzkkow9",
|
|
92
|
+
vrafjx: ["fcdblym", "fjik90z"],
|
|
93
|
+
oivjwe: "fg706s2",
|
|
94
|
+
wvpqe5: ["fjik90z", "fcdblym"],
|
|
95
|
+
g2u3we: "f1p3nwhy",
|
|
96
|
+
h3c5rm: ["f11589ue", "f1pdflbu"],
|
|
97
|
+
B9xav0g: "f1q5o8ev",
|
|
98
|
+
zhjwy3: ["f1pdflbu", "f11589ue"],
|
|
99
|
+
z8tnut: "f1g0x7ka",
|
|
100
|
+
z189sj: ["fw5db7e", "f1uw59to"],
|
|
101
|
+
Byoj8tv: "f1qch9an",
|
|
102
|
+
uwmqm3: ["f1ng84yb", "f11gcy0p"],
|
|
103
|
+
Bqenvij: "f1ft4266",
|
|
104
|
+
mc9l5x: "f22iagw",
|
|
105
|
+
Bt984gj: "f122n59",
|
|
106
|
+
Bceei9c: "f1k6fduh",
|
|
107
|
+
Bahqtrf: "fk6fouc",
|
|
108
|
+
Be2twd7: "fkhj508",
|
|
109
|
+
Bhrd7zp: "figsok6",
|
|
110
|
+
Bg96gwp: "f1i3iumi",
|
|
111
|
+
B7ck84d: "f1ewtqcl"
|
|
117
112
|
},
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
113
|
+
buttonSmall: {
|
|
114
|
+
Bqenvij: "f1d2rq10",
|
|
115
|
+
Be2twd7: "fy9rknc"
|
|
121
116
|
},
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
117
|
+
buttonLarge: {
|
|
118
|
+
Bg96gwp: "faaz57k",
|
|
119
|
+
Be2twd7: "fod5ikn"
|
|
125
120
|
},
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
121
|
+
buttonExtraLarge: {
|
|
122
|
+
Bg96gwp: "f106mvju",
|
|
123
|
+
Be2twd7: "f1pp30po"
|
|
129
124
|
},
|
|
130
|
-
|
|
131
|
-
|
|
125
|
+
buttonInline: {
|
|
126
|
+
mc9l5x: "ftuwxu6"
|
|
132
127
|
},
|
|
133
|
-
|
|
134
|
-
|
|
128
|
+
buttonExpandIconEndNoIcon: {
|
|
129
|
+
uwmqm3: ["f1uw59to", "fw5db7e"]
|
|
135
130
|
},
|
|
136
|
-
|
|
137
|
-
|
|
131
|
+
buttonExpandIconEnd: {
|
|
132
|
+
z189sj: ["f11gcy0p", "f1ng84yb"]
|
|
138
133
|
},
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
134
|
+
expandIcon: {
|
|
135
|
+
Bqenvij: "f1l02sjl",
|
|
136
|
+
mc9l5x: "f22iagw",
|
|
137
|
+
Bt984gj: "f122n59",
|
|
138
|
+
Bg96gwp: "f106mvju",
|
|
139
|
+
Be2twd7: "f1pp30po"
|
|
145
140
|
},
|
|
146
|
-
|
|
147
|
-
|
|
141
|
+
expandIconStart: {
|
|
142
|
+
z189sj: ["f1vdfbxk", "f1f5gg8d"]
|
|
148
143
|
},
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
144
|
+
expandIconEnd: {
|
|
145
|
+
Bh6795r: "fqerorx",
|
|
146
|
+
Bnnss6s: "f1neuvcm",
|
|
147
|
+
xawz: "flqd7gy",
|
|
148
|
+
mc9l5x: "f22iagw",
|
|
149
|
+
Brf1p80: "f9c4gz4",
|
|
150
|
+
uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
|
|
156
151
|
},
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
152
|
+
icon: {
|
|
153
|
+
Bqenvij: "f1l02sjl",
|
|
154
|
+
mc9l5x: "f22iagw",
|
|
155
|
+
Bt984gj: "f122n59",
|
|
156
|
+
z189sj: ["f1vdfbxk", "f1f5gg8d"],
|
|
157
|
+
Bg96gwp: "f106mvju",
|
|
158
|
+
Be2twd7: "f1pp30po"
|
|
164
159
|
}
|
|
165
160
|
}, {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
161
|
+
d: [".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ft4266{height:44px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1d2rq10{height:32px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1l02sjl{height:100%;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".flqd7gy{-webkit-flex-basis:0%;-ms-flex-preferred-size:0%;flex-basis:0%;}", ".f9c4gz4{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}"],
|
|
162
|
+
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
163
|
+
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
169
164
|
});
|
|
170
165
|
/** Applies style classnames to slots */
|
|
171
|
-
|
|
172
|
-
|
|
173
166
|
const useAccordionHeaderStyles_unstable = state => {
|
|
174
167
|
const styles = useStyles();
|
|
175
168
|
state.root.className = react_1.mergeClasses(exports.accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
|
|
176
169
|
state.button.className = react_1.mergeClasses(exports.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);
|
|
177
|
-
|
|
178
170
|
if (state.expandIcon) {
|
|
179
171
|
state.expandIcon.className = react_1.mergeClasses(exports.accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);
|
|
180
172
|
}
|
|
181
|
-
|
|
182
173
|
if (state.icon) {
|
|
183
174
|
state.icon.className = react_1.mergeClasses(exports.accordionHeaderClassNames.icon, styles.icon, state.icon.className);
|
|
184
175
|
}
|
|
185
|
-
|
|
186
176
|
return state;
|
|
187
177
|
};
|
|
188
|
-
|
|
189
178
|
exports.useAccordionHeaderStyles_unstable = useAccordionHeaderStyles_unstable;
|
|
190
179
|
//# sourceMappingURL=useAccordionHeaderStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","button","expandIcon","icon","useStyles","react_1","useAccordionHeaderStyles_unstable","state","styles","className","inline","rootInline","disabled","rootDisabled","resetButton","focusIndicator","expandIconPosition","buttonExpandIconEndNoIcon","buttonExpandIconEnd","buttonInline","size","buttonSmall","buttonLarge","buttonExtraLarge","expandIconStart","expandIconEnd"],"sourceRoot":"../src/","sources":["packages/react-components/react-accordion/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 height: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box',\n },\n buttonSmall: {\n height: '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"]}
|
|
@@ -4,21 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.AccordionItem = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const useAccordionItem_1 = /*#__PURE__*/require("./useAccordionItem");
|
|
11
|
-
|
|
12
9
|
const useAccordionItemContextValues_1 = /*#__PURE__*/require("./useAccordionItemContextValues");
|
|
13
|
-
|
|
14
10
|
const renderAccordionItem_1 = /*#__PURE__*/require("./renderAccordionItem");
|
|
15
|
-
|
|
16
11
|
const useAccordionItemStyles_1 = /*#__PURE__*/require("./useAccordionItemStyles");
|
|
17
12
|
/**
|
|
18
13
|
* Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
|
|
19
14
|
*/
|
|
20
|
-
|
|
21
|
-
|
|
22
15
|
exports.AccordionItem = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
23
16
|
const state = useAccordionItem_1.useAccordionItem_unstable(props, ref);
|
|
24
17
|
const contextValues = useAccordionItemContextValues_1.useAccordionItemContextValues_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA;AAEA;;;AAGaA,qBAAa,gBAA4CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGC,4CAAyB,CAACH,KAAK,EAAEC,GAAG,CAAC;EACnD,MAAMG,aAAa,GAAGC,sEAAsC,CAACH,KAAK,CAAC;EAEnEI,wDAA+B,CAACJ,KAAK,CAAC;EAEtC,OAAOK,kDAA4B,CAACL,KAAK,EAAEE,aAAa,CAAC;AAC3D,CAAC,CAAC;AAEFP,qBAAa,CAACW,WAAW,GAAG,eAAe","names":["exports","React","forwardRef","props","ref","state","useAccordionItem_1","contextValues","useAccordionItemContextValues_1","useAccordionItemStyles_1","renderAccordionItem_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-accordion/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 type { AccordionItemProps } from './AccordionItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAccordionItemStyles_unstable } from './useAccordionItemStyles';\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 return renderAccordionItem_unstable(state, contextValues);\n});\n\nAccordionItem.displayName = 'AccordionItem';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|