@fluentui/react-accordion 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4
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 +481 -24
- package/CHANGELOG.md +111 -14
- package/Spec.md +36 -4
- package/dist/react-accordion.d.ts +50 -56
- package/lib/Accordion.js.map +1 -1
- package/lib/AccordionHeader.js.map +1 -1
- package/lib/AccordionItem.js.map +1 -1
- package/lib/AccordionPanel.js.map +1 -1
- package/lib/components/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/Accordion.js +10 -8
- package/lib/components/Accordion/Accordion.js.map +1 -1
- package/lib/components/Accordion/Accordion.types.d.ts +7 -5
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/AccordionContext.js +4 -3
- package/lib/components/Accordion/AccordionContext.js.map +1 -1
- package/lib/components/Accordion/index.d.ts +1 -0
- package/lib/components/Accordion/index.js +1 -0
- package/lib/components/Accordion/index.js.map +1 -1
- package/lib/components/Accordion/renderAccordion.d.ts +1 -1
- package/lib/components/Accordion/renderAccordion.js +7 -7
- package/lib/components/Accordion/renderAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordion.d.ts +2 -3
- package/lib/components/Accordion/useAccordion.js +48 -63
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordionContextValues.d.ts +1 -1
- package/lib/components/Accordion/useAccordionContextValues.js +13 -11
- package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib/components/Accordion/useAccordionStyles.d.ts +3 -0
- package/lib/components/Accordion/useAccordionStyles.js +7 -0
- package/lib/components/Accordion/useAccordionStyles.js.map +1 -0
- package/lib/components/AccordionHeader/AccordionHeader.d.ts +2 -1
- package/lib/components/AccordionHeader/AccordionHeader.js +11 -10
- package/lib/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.d.ts +12 -11
- package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js +2 -4
- package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib/components/AccordionHeader/index.d.ts +0 -1
- package/lib/components/AccordionHeader/index.js +0 -1
- package/lib/components/AccordionHeader/index.js.map +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.d.ts +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js +11 -8
- package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.d.ts +2 -6
- package/lib/components/AccordionHeader/useAccordionHeader.js +53 -48
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js +14 -14
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.d.ts +2 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js +43 -52
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.d.ts +1 -1
- package/lib/components/AccordionItem/AccordionItem.js +10 -8
- package/lib/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.types.d.ts +4 -3
- package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.d.ts +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.js +4 -5
- package/lib/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib/components/AccordionItem/index.d.ts +1 -0
- package/lib/components/AccordionItem/index.js +1 -0
- package/lib/components/AccordionItem/index.js.map +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.d.ts +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.js +7 -8
- package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.d.ts +2 -6
- package/lib/components/AccordionItem/useAccordionItem.js +24 -34
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.d.ts +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js +12 -12
- package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemStyles.d.ts +3 -0
- package/lib/components/AccordionItem/useAccordionItemStyles.js +7 -0
- package/lib/components/AccordionItem/useAccordionItemStyles.js.map +1 -0
- package/lib/components/AccordionPanel/AccordionPanel.d.ts +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.js +8 -8
- package/lib/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.d.ts +2 -2
- package/lib/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib/components/AccordionPanel/index.js.map +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.d.ts +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.js +7 -8
- package/lib/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.d.ts +2 -6
- package/lib/components/AccordionPanel/useAccordionPanel.js +13 -14
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.d.ts +2 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js +6 -5
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Accordion.js +1 -1
- package/lib-commonjs/Accordion.js.map +1 -1
- package/lib-commonjs/AccordionHeader.js +1 -1
- package/lib-commonjs/AccordionHeader.js.map +1 -1
- package/lib-commonjs/AccordionItem.js +1 -1
- package/lib-commonjs/AccordionItem.js.map +1 -1
- package/lib-commonjs/AccordionPanel.js +1 -1
- package/lib-commonjs/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.d.ts +1 -1
- package/lib-commonjs/components/Accordion/Accordion.js +12 -9
- package/lib-commonjs/components/Accordion/Accordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.types.d.ts +7 -5
- package/lib-commonjs/components/Accordion/Accordion.types.js.map +1 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js +4 -3
- package/lib-commonjs/components/Accordion/AccordionContext.js.map +1 -1
- package/lib-commonjs/components/Accordion/index.d.ts +1 -0
- package/lib-commonjs/components/Accordion/index.js +3 -1
- package/lib-commonjs/components/Accordion/index.js.map +1 -1
- package/lib-commonjs/components/Accordion/renderAccordion.d.ts +1 -1
- package/lib-commonjs/components/Accordion/renderAccordion.js +12 -13
- package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.d.ts +2 -3
- package/lib-commonjs/components/Accordion/useAccordion.js +53 -68
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.d.ts +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js +15 -13
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionStyles.d.ts +3 -0
- package/lib-commonjs/components/Accordion/useAccordionStyles.js +18 -0
- package/lib-commonjs/components/Accordion/useAccordionStyles.js.map +1 -0
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.d.ts +2 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js +12 -11
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.d.ts +12 -11
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js +2 -4
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/index.d.ts +0 -1
- package/lib-commonjs/components/AccordionHeader/index.js +1 -3
- package/lib-commonjs/components/AccordionHeader/index.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.d.ts +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js +16 -15
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.d.ts +2 -6
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +60 -54
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js +17 -17
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.d.ts +2 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js +50 -57
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.js +12 -9
- package/lib-commonjs/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.d.ts +4 -3
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js +6 -7
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/index.d.ts +1 -0
- package/lib-commonjs/components/AccordionItem/index.js +3 -1
- package/lib-commonjs/components/AccordionItem/index.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js +12 -15
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.d.ts +2 -6
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +31 -42
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.d.ts +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js +15 -15
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.d.ts +3 -0
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js +18 -0
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js.map +1 -0
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.d.ts +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js +9 -9
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.d.ts +2 -2
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/index.js +1 -1
- package/lib-commonjs/components/AccordionPanel/index.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.d.ts +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js +11 -14
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.d.ts +2 -6
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +17 -19
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.d.ts +2 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js +9 -8
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +17 -19
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -12
- package/lib/common/isConformant.js.map +0 -1
- package/lib/components/AccordionHeader/AccordionHeaderExpandIcon.d.ts +0 -3
- package/lib/components/AccordionHeader/AccordionHeaderExpandIcon.js +0 -42
- package/lib/components/AccordionHeader/AccordionHeaderExpandIcon.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -23
- package/lib-commonjs/common/isConformant.js.map +0 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderExpandIcon.d.ts +0 -3
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderExpandIcon.js +0 -52
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderExpandIcon.js.map +0 -1
|
@@ -2,4 +2,4 @@ import type { AccordionState, AccordionContextValues } from './Accordion.types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Function that renders the final JSX of the component
|
|
4
4
|
*/
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const renderAccordion_unstable: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;
|
|
@@ -3,29 +3,28 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.renderAccordion_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var AccordionContext_1 = /*#__PURE__*/require("./AccordionContext");
|
|
12
|
+
const AccordionContext_1 = /*#__PURE__*/require("./AccordionContext");
|
|
15
13
|
/**
|
|
16
14
|
* Function that renders the final JSX of the component
|
|
17
15
|
*/
|
|
18
16
|
|
|
19
17
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return React.createElement(slots.root,
|
|
18
|
+
const renderAccordion_unstable = (state, contextValues) => {
|
|
19
|
+
const {
|
|
20
|
+
slots,
|
|
21
|
+
slotProps
|
|
22
|
+
} = react_utilities_1.getSlots(state);
|
|
23
|
+
return React.createElement(slots.root, { ...slotProps.root
|
|
24
|
+
}, React.createElement(AccordionContext_1.AccordionContext.Provider, {
|
|
26
25
|
value: contextValues.accordion
|
|
27
26
|
}, slotProps.root.children));
|
|
28
27
|
};
|
|
29
28
|
|
|
30
|
-
exports.
|
|
29
|
+
exports.renderAccordion_unstable = renderAccordion_unstable;
|
|
31
30
|
//# sourceMappingURL=renderAccordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/renderAccordion.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AACvG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAyB,KAAzB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,kBAAA,CAAA,gBAAA,CAAiB,QAAlB,EAA0B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA1B,EAA4D,SAAS,CAAC,IAAV,CAAe,QAA3E,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport { AccordionContext } from './AccordionContext';\nimport type { AccordionState, AccordionSlots, AccordionContextValues } from './Accordion.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordion_unstable = (state: AccordionState, contextValues: AccordionContextValues) => {\n const { slots, slotProps } = getSlots<AccordionSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <AccordionContext.Provider value={contextValues.accordion}>{slotProps.root.children}</AccordionContext.Provider>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { AccordionProps,
|
|
3
|
-
export declare const accordionShorthandProps: Array<keyof AccordionSlots>;
|
|
2
|
+
import type { AccordionProps, AccordionState } from './Accordion.types';
|
|
4
3
|
/**
|
|
5
4
|
* Returns the props and state required to render the component
|
|
6
5
|
* @param props - Accordion properties
|
|
7
6
|
* @param ref - reference to root HTMLElement of Accordion
|
|
8
7
|
*/
|
|
9
|
-
export declare const
|
|
8
|
+
export declare const useAccordion_unstable: (props: AccordionProps, ref: React.Ref<HTMLElement>) => AccordionState;
|
|
@@ -3,79 +3,72 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useAccordion_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
exports.accordionShorthandProps = ['root'];
|
|
12
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
15
13
|
/**
|
|
16
14
|
* Returns the props and state required to render the component
|
|
17
15
|
* @param props - Accordion properties
|
|
18
16
|
* @param ref - reference to root HTMLElement of Accordion
|
|
19
17
|
*/
|
|
20
18
|
|
|
21
|
-
var useAccordion = function (props, ref) {
|
|
22
|
-
var controlledOpenItems = props.openItems,
|
|
23
|
-
defaultOpenItems = props.defaultOpenItems,
|
|
24
|
-
_a = props.multiple,
|
|
25
|
-
multiple = _a === void 0 ? false : _a,
|
|
26
|
-
_b = props.collapsible,
|
|
27
|
-
collapsible = _b === void 0 ? false : _b,
|
|
28
|
-
onToggle = props.onToggle,
|
|
29
|
-
_c = props.navigable,
|
|
30
|
-
navigable = _c === void 0 ? false : _c;
|
|
31
|
-
|
|
32
|
-
var _d = react_utilities_1.useControllableState({
|
|
33
|
-
state: React.useMemo(function () {
|
|
34
|
-
return normalizeValues(controlledOpenItems);
|
|
35
|
-
}, [controlledOpenItems]),
|
|
36
|
-
defaultState: function () {
|
|
37
|
-
return initializeUncontrolledOpenItems({
|
|
38
|
-
collapsible: collapsible,
|
|
39
|
-
defaultOpenItems: defaultOpenItems,
|
|
40
|
-
multiple: multiple
|
|
41
|
-
});
|
|
42
|
-
},
|
|
43
|
-
initialState: []
|
|
44
|
-
}),
|
|
45
|
-
openItems = _d[0],
|
|
46
|
-
setOpenItems = _d[1];
|
|
47
19
|
|
|
48
|
-
|
|
20
|
+
const useAccordion_unstable = (props, ref) => {
|
|
21
|
+
const {
|
|
22
|
+
openItems: controlledOpenItems,
|
|
23
|
+
defaultOpenItems,
|
|
24
|
+
multiple = false,
|
|
25
|
+
collapsible = false,
|
|
26
|
+
onToggle,
|
|
27
|
+
navigation
|
|
28
|
+
} = props;
|
|
29
|
+
const [openItems, setOpenItems] = react_utilities_1.useControllableState({
|
|
30
|
+
state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),
|
|
31
|
+
defaultState: () => initializeUncontrolledOpenItems({
|
|
32
|
+
defaultOpenItems,
|
|
33
|
+
multiple
|
|
34
|
+
}),
|
|
35
|
+
initialState: []
|
|
36
|
+
});
|
|
37
|
+
const arrowNavigationProps = react_tabster_1.useArrowNavigationGroup({
|
|
38
|
+
circular: navigation === 'circular'
|
|
39
|
+
});
|
|
40
|
+
const requestToggle = react_utilities_1.useEventCallback((event, data) => {
|
|
49
41
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
|
|
50
|
-
setOpenItems(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
});
|
|
55
|
-
});
|
|
42
|
+
setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, {
|
|
43
|
+
collapsible,
|
|
44
|
+
multiple
|
|
45
|
+
}));
|
|
56
46
|
});
|
|
57
47
|
return {
|
|
58
|
-
multiple
|
|
59
|
-
collapsible
|
|
60
|
-
|
|
61
|
-
openItems
|
|
62
|
-
requestToggle
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
48
|
+
multiple,
|
|
49
|
+
collapsible,
|
|
50
|
+
navigation,
|
|
51
|
+
openItems,
|
|
52
|
+
requestToggle,
|
|
53
|
+
components: {
|
|
54
|
+
root: 'div'
|
|
55
|
+
},
|
|
56
|
+
root: react_utilities_1.getNativeElementProps('div', { ...props,
|
|
57
|
+
...(navigation ? arrowNavigationProps : {}),
|
|
58
|
+
ref
|
|
59
|
+
})
|
|
66
60
|
};
|
|
67
61
|
};
|
|
68
62
|
|
|
69
|
-
exports.
|
|
63
|
+
exports.useAccordion_unstable = useAccordion_unstable;
|
|
70
64
|
/**
|
|
71
65
|
* Initial value for the uncontrolled case of the list of open indexes
|
|
72
66
|
*/
|
|
73
67
|
|
|
74
|
-
function initializeUncontrolledOpenItems(
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
68
|
+
function initializeUncontrolledOpenItems({
|
|
69
|
+
defaultOpenItems,
|
|
70
|
+
multiple
|
|
71
|
+
}) {
|
|
79
72
|
if (defaultOpenItems !== undefined) {
|
|
80
73
|
if (Array.isArray(defaultOpenItems)) {
|
|
81
74
|
return multiple ? defaultOpenItems : [defaultOpenItems[0]];
|
|
@@ -83,14 +76,8 @@ function initializeUncontrolledOpenItems(_a) {
|
|
|
83
76
|
|
|
84
77
|
return [defaultOpenItems];
|
|
85
78
|
}
|
|
86
|
-
/**
|
|
87
|
-
* TODO: since the dropping of descendants API due to performance issues,
|
|
88
|
-
* the default behavior of Accordion has been compromised and [0] makes no sense
|
|
89
|
-
* indexes are not used anymore to ensure the position of the element which should be opened by default
|
|
90
|
-
*/
|
|
91
79
|
|
|
92
|
-
|
|
93
|
-
return collapsible ? [] : [0];
|
|
80
|
+
return [];
|
|
94
81
|
}
|
|
95
82
|
/**
|
|
96
83
|
* Updates the list of open indexes based on an index that changes
|
|
@@ -100,19 +87,17 @@ function initializeUncontrolledOpenItems(_a) {
|
|
|
100
87
|
*/
|
|
101
88
|
|
|
102
89
|
|
|
103
|
-
function updateOpenItems(value, previousOpenItems,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
90
|
+
function updateOpenItems(value, previousOpenItems, {
|
|
91
|
+
multiple,
|
|
92
|
+
collapsible
|
|
93
|
+
}) {
|
|
107
94
|
if (multiple) {
|
|
108
95
|
if (previousOpenItems.includes(value)) {
|
|
109
96
|
if (previousOpenItems.length > 1 || collapsible) {
|
|
110
|
-
return previousOpenItems.filter(
|
|
111
|
-
return i !== value;
|
|
112
|
-
});
|
|
97
|
+
return previousOpenItems.filter(i => i !== value);
|
|
113
98
|
}
|
|
114
99
|
} else {
|
|
115
|
-
return
|
|
100
|
+
return [...previousOpenItems, value].sort();
|
|
116
101
|
}
|
|
117
102
|
} else {
|
|
118
103
|
return previousOpenItems[0] === value && collapsible ? [] : [value];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/useAccordion.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionProps, AccordionState, AccordionToggleData, AccordionToggleEvent } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = (props: AccordionProps, ref: React.Ref<HTMLElement>): AccordionState => {\n const {\n openItems: controlledOpenItems,\n defaultOpenItems,\n multiple = false,\n collapsible = false,\n onToggle,\n navigation,\n } = props;\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n defaultState: () => initializeUncontrolledOpenItems({ defaultOpenItems, multiple }),\n initialState: [],\n });\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: navigation === 'circular',\n });\n\n const requestToggle = useEventCallback((event: AccordionToggleEvent, data: AccordionToggleData) => {\n onToggle?.(event, data);\n setOpenItems(previousOpenItems =>\n updateOpenItems(data.value, previousOpenItems, {\n collapsible,\n multiple,\n }),\n );\n });\n\n return {\n multiple,\n collapsible,\n navigation,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ...props,\n ...(navigation ? arrowNavigationProps : {}),\n ref,\n }),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps, 'defaultOpenItems' | 'multiple'>): AccordionItemValue[] {\n if (defaultOpenItems !== undefined) {\n if (Array.isArray(defaultOpenItems)) {\n return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n }\n return [defaultOpenItems];\n }\n return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param param2 - {multiple, collapsible}\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n { multiple, collapsible }: Pick<AccordionState, 'multiple' | 'collapsible'>,\n) {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n if (previousOpenItems.length > 1 || collapsible) {\n return previousOpenItems.filter(i => i !== value);\n }\n } else {\n return [...previousOpenItems, value].sort();\n }\n } else {\n return previousOpenItems[0] === value && collapsible ? [] : [value];\n }\n return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues(index?: AccordionItemValue | AccordionItemValue[]): AccordionItemValue[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { AccordionContextValues, AccordionState } from './Accordion.types';
|
|
2
|
-
export declare function
|
|
2
|
+
export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
|
|
@@ -3,24 +3,26 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useAccordionContextValues_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
function useAccordionContextValues_unstable(state) {
|
|
9
|
+
const {
|
|
10
|
+
navigation,
|
|
11
|
+
openItems,
|
|
12
|
+
requestToggle,
|
|
13
|
+
collapsible
|
|
14
|
+
} = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
openItems
|
|
17
|
-
requestToggle
|
|
18
|
-
collapsible
|
|
16
|
+
const accordion = {
|
|
17
|
+
navigation,
|
|
18
|
+
openItems,
|
|
19
|
+
requestToggle,
|
|
20
|
+
collapsible
|
|
19
21
|
};
|
|
20
22
|
return {
|
|
21
|
-
accordion
|
|
23
|
+
accordion
|
|
22
24
|
};
|
|
23
25
|
}
|
|
24
26
|
|
|
25
|
-
exports.
|
|
27
|
+
exports.useAccordionContextValues_unstable = useAccordionContextValues_unstable;
|
|
26
28
|
//# sourceMappingURL=useAccordionContextValues.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/useAccordionContextValues.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,kCAAhB,CAAmD,KAAnD,EAAwE;AACtE,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,SAAd;AAAyB,IAAA,aAAzB;AAAwC,IAAA;AAAxC,MAAwD,KAA9D,CADsE,CAGtE;;AACA,QAAM,SAAS,GAA0B;AACvC,IAAA,UADuC;AAEvC,IAAA,SAFuC;AAGvC,IAAA,aAHuC;AAIvC,IAAA;AAJuC,GAAzC;AAOA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD;;AAZD,OAAA,CAAA,kCAAA,GAAA,kCAAA","sourcesContent":["import type { AccordionContextValue, AccordionContextValues, AccordionState } from './Accordion.types';\n\nexport function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues {\n const { navigation, openItems, requestToggle, collapsible } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const accordion: AccordionContextValue = {\n navigation,\n openItems,\n requestToggle,\n collapsible,\n };\n\n return { accordion };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useAccordionStyles_unstable = exports.accordionClassName = void 0;
|
|
7
|
+
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
|
|
10
|
+
exports.accordionClassName = 'fui-Accordion';
|
|
11
|
+
|
|
12
|
+
const useAccordionStyles_unstable = state => {
|
|
13
|
+
state.root.className = react_1.mergeClasses(exports.accordionClassName, state.root.className);
|
|
14
|
+
return state;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
exports.useAccordionStyles_unstable = useAccordionStyles_unstable;
|
|
18
|
+
//# sourceMappingURL=useAccordionStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/Accordion/useAccordionStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,kBAAA,GAAqB,eAArB;;AAEN,MAAM,2BAA2B,GAAI,KAAD,IAA0B;AACnE,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAb,EAAiC,KAAK,CAAC,IAAN,CAAW,SAA5C,CAAvB;AAEA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { AccordionState } from './Accordion.types';\n\nexport const accordionClassName = 'fui-Accordion';\n\nexport const useAccordionStyles_unstable = (state: AccordionState) => {\n state.root.className = mergeClasses(accordionClassName, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { AccordionHeaderProps } from './AccordionHeader.types';
|
|
2
2
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
|
-
* Define a styled AccordionHeader, using the `
|
|
4
|
+
* Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
|
|
5
|
+
* hooks.
|
|
5
6
|
*/
|
|
6
7
|
export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
|
|
@@ -5,25 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.AccordionHeader = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const useAccordionHeader_1 = /*#__PURE__*/require("./useAccordionHeader");
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
const renderAccordionHeader_1 = /*#__PURE__*/require("./renderAccordionHeader");
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const useAccordionHeaderStyles_1 = /*#__PURE__*/require("./useAccordionHeaderStyles");
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
const useAccordionHeaderContextValues_1 = /*#__PURE__*/require("./useAccordionHeaderContextValues");
|
|
17
17
|
/**
|
|
18
|
-
* Define a styled AccordionHeader, using the `
|
|
18
|
+
* Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
|
|
19
|
+
* hooks.
|
|
19
20
|
*/
|
|
20
21
|
|
|
21
22
|
|
|
22
|
-
exports.AccordionHeader = /*#__PURE__*/React.forwardRef(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
useAccordionHeaderStyles_1.
|
|
26
|
-
return renderAccordionHeader_1.
|
|
23
|
+
exports.AccordionHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
24
|
+
const state = useAccordionHeader_1.useAccordionHeader_unstable(props, ref);
|
|
25
|
+
const contextValues = useAccordionHeaderContextValues_1.useAccordionHeaderContextValues_unstable(state);
|
|
26
|
+
useAccordionHeaderStyles_1.useAccordionHeaderStyles_unstable(state);
|
|
27
|
+
return renderAccordionHeader_1.renderAccordionHeader_unstable(state, contextValues);
|
|
27
28
|
});
|
|
28
29
|
exports.AccordionHeader.displayName = 'AccordionHeader';
|
|
29
30
|
//# sourceMappingURL=AccordionHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,iCAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxG,QAAM,KAAK,GAAG,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,EAAmC,GAAnC,CAAd;AACA,QAAM,aAAa,GAAG,iCAAA,CAAA,wCAAA,CAAyC,KAAzC,CAAtB;AAEA,EAAA,0BAAA,CAAA,iCAAA,CAAkC,KAAlC;AAEA,SAAO,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,EAAsC,aAAtC,CAAP;AACD,CAPyE,CAA7D;AASb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { useAccordionHeader_unstable } from './useAccordionHeader';\nimport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nimport { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles';\nimport { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';\nimport type { AccordionHeaderProps } from './AccordionHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`\n * hooks.\n */\nexport const AccordionHeader: ForwardRefComponent<AccordionHeaderProps> = React.forwardRef((props, ref) => {\n const state = useAccordionHeader_unstable(props, ref);\n const contextValues = useAccordionHeaderContextValues_unstable(state);\n\n useAccordionHeaderStyles_unstable(state);\n\n return renderAccordionHeader_unstable(state, contextValues);\n});\n\nAccordionHeader.displayName = 'AccordionHeader';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type {
|
|
3
|
-
import type { AccordionHeaderExpandIconProps } from './AccordionHeaderExpandIcon';
|
|
4
|
-
import type { ARIAButtonShorthandProps } from '@fluentui/react-aria';
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
+
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
|
|
5
3
|
export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
|
|
6
4
|
export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
|
|
7
5
|
export declare type AccordionHeaderContextValue = {
|
|
@@ -14,22 +12,24 @@ export declare type AccordionHeaderContextValues = {
|
|
|
14
12
|
accordionHeader: AccordionHeaderContextValue;
|
|
15
13
|
};
|
|
16
14
|
export declare type AccordionHeaderSlots = {
|
|
17
|
-
|
|
15
|
+
/**
|
|
16
|
+
* The element wrapping the button. By default this is a div, but can be a heading.
|
|
17
|
+
*/
|
|
18
|
+
root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
|
|
18
19
|
/**
|
|
19
20
|
* The component to be used as button in heading
|
|
20
21
|
*/
|
|
21
|
-
button:
|
|
22
|
+
button: NonNullable<Slot<ARIAButtonSlotProps>>;
|
|
22
23
|
/**
|
|
23
24
|
* Expand icon slot rendered before (or after) children content in heading
|
|
24
25
|
*/
|
|
25
|
-
expandIcon:
|
|
26
|
+
expandIcon: Slot<'span'>;
|
|
26
27
|
/**
|
|
27
28
|
* Expand icon slot rendered before (or after) children content in heading
|
|
28
29
|
*/
|
|
29
|
-
icon?:
|
|
30
|
-
children: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
|
|
30
|
+
icon?: Slot<'div'>;
|
|
31
31
|
};
|
|
32
|
-
|
|
32
|
+
declare type AccordionHeaderCommons = {
|
|
33
33
|
/**
|
|
34
34
|
* Size of spacing in the heading
|
|
35
35
|
*/
|
|
@@ -43,5 +43,6 @@ export declare type AccordionHeaderCommons = {
|
|
|
43
43
|
*/
|
|
44
44
|
inline: boolean;
|
|
45
45
|
};
|
|
46
|
-
export declare type AccordionHeaderProps = ComponentProps<AccordionHeaderSlots
|
|
46
|
+
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & Partial<AccordionHeaderCommons>;
|
|
47
47
|
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & AccordionHeaderCommons & AccordionHeaderContextValue;
|
|
48
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useAccordionHeaderContext = exports.AccordionHeaderContext = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
10
|
exports.AccordionHeaderContext = /*#__PURE__*/React.createContext({
|
|
11
11
|
open: false,
|
|
@@ -14,9 +14,7 @@ exports.AccordionHeaderContext = /*#__PURE__*/React.createContext({
|
|
|
14
14
|
expandIconPosition: 'start'
|
|
15
15
|
});
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
return React.useContext(exports.AccordionHeaderContext);
|
|
19
|
-
};
|
|
17
|
+
const useAccordionHeaderContext = () => React.useContext(exports.AccordionHeaderContext);
|
|
20
18
|
|
|
21
19
|
exports.useAccordionHeaderContext = useAccordionHeaderContext;
|
|
22
20
|
//# sourceMappingURL=AccordionHeaderContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/AccordionHeaderContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGa,OAAA,CAAA,sBAAA,gBAAyB,KAAK,CAAC,aAAN,CAAiD;AACrF,EAAA,IAAI,EAAE,KAD+E;AAErF,EAAA,QAAQ,EAAE,KAF2E;AAGrF,EAAA,IAAI,EAAE,QAH+E;AAIrF,EAAA,kBAAkB,EAAE;AAJiE,CAAjD,CAAzB;;AAON,MAAM,yBAAyB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,OAAA,CAAA,sBAAjB,CAAxC;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport type { AccordionHeaderContextValue } from './AccordionHeader.types';\n\nexport const AccordionHeaderContext = React.createContext<AccordionHeaderContextValue>({\n open: false,\n disabled: false,\n size: 'medium',\n expandIconPosition: 'start',\n});\n\nexport const useAccordionHeaderContext = () => React.useContext(AccordionHeaderContext);\n"],"sourceRoot":"../src/"}
|
|
@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
8
|
|
|
9
9
|
tslib_1.__exportStar(require("./AccordionHeader"), exports);
|
|
10
10
|
|
|
11
|
-
tslib_1.__exportStar(require("./AccordionHeaderExpandIcon"), exports);
|
|
12
|
-
|
|
13
11
|
tslib_1.__exportStar(require("./AccordionHeader.types"), exports);
|
|
14
12
|
|
|
15
13
|
tslib_1.__exportStar(require("./renderAccordionHeader"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AccordionHeader';\nexport * from './AccordionHeader.types';\nexport * from './renderAccordionHeader';\nexport * from './useAccordionHeader';\nexport * from './useAccordionHeaderContextValues';\nexport * from './useAccordionHeaderStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -2,4 +2,4 @@ import type { AccordionHeaderState, AccordionHeaderContextValues } from './Accor
|
|
|
2
2
|
/**
|
|
3
3
|
* Function that renders the final JSX of the component
|
|
4
4
|
*/
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const renderAccordionHeader_unstable: (state: AccordionHeaderState, contextValues: AccordionHeaderContextValues) => JSX.Element;
|
|
@@ -3,31 +3,32 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.renderAccordionHeader_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var useAccordionHeader_1 = /*#__PURE__*/require("./useAccordionHeader");
|
|
15
|
-
|
|
16
|
-
var AccordionHeaderContext_1 = /*#__PURE__*/require("./AccordionHeaderContext");
|
|
12
|
+
const AccordionHeaderContext_1 = /*#__PURE__*/require("./AccordionHeaderContext");
|
|
17
13
|
/**
|
|
18
14
|
* Function that renders the final JSX of the component
|
|
19
15
|
*/
|
|
20
16
|
|
|
21
17
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
const renderAccordionHeader_unstable = (state, contextValues) => {
|
|
19
|
+
const {
|
|
20
|
+
slots,
|
|
21
|
+
slotProps
|
|
22
|
+
} = react_utilities_1.getSlots(state);
|
|
27
23
|
return React.createElement(AccordionHeaderContext_1.AccordionHeaderContext.Provider, {
|
|
28
24
|
value: contextValues.accordionHeader
|
|
29
|
-
}, React.createElement(slots.root,
|
|
25
|
+
}, React.createElement(slots.root, { ...slotProps.root
|
|
26
|
+
}, React.createElement(slots.button, { ...slotProps.button
|
|
27
|
+
}, state.expandIconPosition === 'start' && React.createElement(slots.expandIcon, { ...slotProps.expandIcon
|
|
28
|
+
}), slots.icon && React.createElement(slots.icon, { ...slotProps.icon
|
|
29
|
+
}), slotProps.root.children, state.expandIconPosition === 'end' && React.createElement(slots.expandIcon, { ...slotProps.expandIcon
|
|
30
|
+
}))));
|
|
30
31
|
};
|
|
31
32
|
|
|
32
|
-
exports.
|
|
33
|
+
exports.renderAccordionHeader_unstable = renderAccordionHeader_unstable;
|
|
33
34
|
//# sourceMappingURL=renderAccordionHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/renderAccordionHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,aAF4C,KAG1C;AACF,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA+B,KAA/B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,wBAAA,CAAA,sBAAA,CAAuB,QAAxB,EAAgC;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAhC,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,EACG,KAAK,CAAC,kBAAN,KAA6B,OAA7B,IAAwC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAD3C,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,kBAAN,KAA6B,KAA7B,IAAsC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAJzC,CADF,CADF,CADF;AAYD,CAlBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","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"],"sourceRoot":"../src/"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { AccordionHeaderProps, AccordionHeaderState
|
|
3
|
-
/**
|
|
4
|
-
* Const listing which props are shorthand props.
|
|
5
|
-
*/
|
|
6
|
-
export declare const accordionHeaderShorthandProps: Array<keyof AccordionHeaderSlots>;
|
|
2
|
+
import type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';
|
|
7
3
|
/**
|
|
8
4
|
* Returns the props and state required to render the component
|
|
9
5
|
* @param props - AccordionHeader properties
|
|
10
6
|
* @param ref - reference to root HTMLElement of AccordionHeader
|
|
11
7
|
*/
|
|
12
|
-
export declare const
|
|
8
|
+
export declare const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React.Ref<HTMLElement>) => AccordionHeaderState;
|