@fluentui/react-accordion 0.0.0-nightly0bc161458e20220126.1 → 0.0.0-nightly2170ed575f20220223.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +195 -31
- package/CHANGELOG.md +52 -14
- package/Spec.md +36 -4
- package/dist/react-accordion.d.ts +19 -15
- 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.js.map +1 -1
- package/lib/components/Accordion/Accordion.types.d.ts +7 -5
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/AccordionContext.js +0 -1
- package/lib/components/Accordion/AccordionContext.js.map +1 -1
- package/lib/components/Accordion/index.js.map +1 -1
- package/lib/components/Accordion/renderAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordion.js +13 -18
- 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.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.d.ts +12 -8
- package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib/components/AccordionHeader/index.js.map +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js +2 -2
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js +5 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- 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.js.map +1 -1
- package/lib/components/AccordionItem/index.js.map +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +5 -7
- 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.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.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.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Accordion.js.map +1 -1
- package/lib-commonjs/AccordionHeader.js.map +1 -1
- package/lib-commonjs/AccordionItem.js.map +1 -1
- package/lib-commonjs/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.types.d.ts +7 -5
- package/lib-commonjs/components/Accordion/Accordion.types.js.map +1 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js +0 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js.map +1 -1
- package/lib-commonjs/components/Accordion/index.js.map +1 -1
- package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.js +14 -18
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js +2 -2
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.d.ts +12 -8
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/index.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +2 -2
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js +5 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- 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.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/index.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +4 -6
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.d.ts +2 -2
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/index.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +0 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,SAAA,gBAAiD,KAAK,CAAC,UAAN,CAC5D,CAAC,KAAD,EAAQ,GAAR,KAAe;AACb,QAAM,KAAK,GAAG,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,GAA7B,CAAd;AACA,QAAM,aAAa,GAAG,2BAAA,CAAA,kCAAA,CAAmC,KAAnC,CAAtB;AAEA,EAAA,oBAAA,CAAA,2BAAA,CAA4B,KAA5B;AAEA,SAAO,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,aAAhC,CAAP;AACD,CAR2D,CAAjD;AAWb,OAAA,CAAA,SAAA,CAAU,WAAV,GAAwB,WAAxB","sourcesContent":["import * as React from 'react';\nimport { renderAccordion_unstable } from './renderAccordion';\nimport { useAccordion_unstable } from './useAccordion';\nimport { useAccordionContextValues_unstable } from './useAccordionContextValues';\nimport type { AccordionProps } from './Accordion.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAccordionStyles_unstable } from './useAccordionStyles';\n\n/**\n * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.\n */\nexport const Accordion: ForwardRefComponent<AccordionProps> = React.forwardRef<HTMLDivElement, AccordionProps>(\n (props, ref) => {\n const state = useAccordion_unstable(props, ref);\n const contextValues = useAccordionContextValues_unstable(state);\n\n useAccordionStyles_unstable(state);\n\n return renderAccordion_unstable(state, contextValues);\n },\n);\n\nAccordion.displayName = 'Accordion';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { ComponentProps, ComponentState,
|
|
2
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
3
|
import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
|
|
4
4
|
export declare type AccordionIndex = number | number[];
|
|
5
5
|
export declare type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
|
|
6
6
|
export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
|
|
7
|
-
|
|
7
|
+
declare type AccordionCommons = {
|
|
8
8
|
/**
|
|
9
|
-
* Indicates if keyboard navigation is available
|
|
9
|
+
* Indicates if keyboard navigation is available and gives two options,
|
|
10
|
+
* linear or circular navigation
|
|
10
11
|
*/
|
|
11
|
-
|
|
12
|
+
navigation?: 'linear' | 'circular';
|
|
12
13
|
/**
|
|
13
14
|
* Indicates if Accordion support multiple Panels opened at the same time
|
|
14
15
|
*/
|
|
@@ -33,7 +34,7 @@ export declare type AccordionContextValues = {
|
|
|
33
34
|
accordion: AccordionContextValue;
|
|
34
35
|
};
|
|
35
36
|
export declare type AccordionSlots = {
|
|
36
|
-
root:
|
|
37
|
+
root: Slot<'div'>;
|
|
37
38
|
};
|
|
38
39
|
export declare type AccordionToggleData = {
|
|
39
40
|
value: AccordionItemValue;
|
|
@@ -50,3 +51,4 @@ export declare type AccordionProps = ComponentProps<AccordionSlots> & Partial<Ac
|
|
|
50
51
|
onToggle?: AccordionToggleEventHandler;
|
|
51
52
|
};
|
|
52
53
|
export declare type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;
|
|
54
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/AccordionContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,gBAAmD,wBAAA,CAAA,aAAA,CAAqC;AACnG,EAAA,SAAS,EAAE,EADwF;AAEnG,EAAA,WAAW,EAAE,KAFsF;;AAGnG,EAAA,aAAa,GAAA;AACX;AACD;;AALkG,CAArC,CAAnD","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AccordionContextValue } from './Accordion.types';\n\nexport const AccordionContext: Context<AccordionContextValue> = createContext<AccordionContextValue>({\n openItems: [],\n collapsible: false,\n requestToggle() {\n /* noop */\n },\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles';\nexport * from './useAccordionContextValues';\nexport * from './AccordionContext';\n"],"sourceRoot":"../src/"}
|
|
@@ -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/"}
|
|
@@ -8,6 +8,8 @@ exports.useAccordion_unstable = void 0;
|
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
10
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
+
|
|
12
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
13
|
/**
|
|
12
14
|
* Returns the props and state required to render the component
|
|
13
15
|
* @param props - Accordion properties
|
|
@@ -22,36 +24,37 @@ const useAccordion_unstable = (props, ref) => {
|
|
|
22
24
|
multiple = false,
|
|
23
25
|
collapsible = false,
|
|
24
26
|
onToggle,
|
|
25
|
-
|
|
27
|
+
navigation
|
|
26
28
|
} = props;
|
|
27
29
|
const [openItems, setOpenItems] = react_utilities_1.useControllableState({
|
|
28
30
|
state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),
|
|
29
31
|
defaultState: () => initializeUncontrolledOpenItems({
|
|
30
|
-
collapsible,
|
|
31
32
|
defaultOpenItems,
|
|
32
33
|
multiple
|
|
33
34
|
}),
|
|
34
35
|
initialState: []
|
|
35
36
|
});
|
|
37
|
+
const arrowNavigationProps = react_tabster_1.useArrowNavigationGroup({
|
|
38
|
+
circular: navigation === 'circular'
|
|
39
|
+
});
|
|
36
40
|
const requestToggle = react_utilities_1.useEventCallback((event, data) => {
|
|
37
41
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
|
|
38
|
-
setOpenItems(previousOpenItems => {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
});
|
|
43
|
-
});
|
|
42
|
+
setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, {
|
|
43
|
+
collapsible,
|
|
44
|
+
multiple
|
|
45
|
+
}));
|
|
44
46
|
});
|
|
45
47
|
return {
|
|
46
48
|
multiple,
|
|
47
49
|
collapsible,
|
|
48
|
-
|
|
50
|
+
navigation,
|
|
49
51
|
openItems,
|
|
50
52
|
requestToggle,
|
|
51
53
|
components: {
|
|
52
54
|
root: 'div'
|
|
53
55
|
},
|
|
54
56
|
root: react_utilities_1.getNativeElementProps('div', { ...props,
|
|
57
|
+
...(navigation ? arrowNavigationProps : {}),
|
|
55
58
|
ref
|
|
56
59
|
})
|
|
57
60
|
};
|
|
@@ -64,8 +67,7 @@ exports.useAccordion_unstable = useAccordion_unstable;
|
|
|
64
67
|
|
|
65
68
|
function initializeUncontrolledOpenItems({
|
|
66
69
|
defaultOpenItems,
|
|
67
|
-
multiple
|
|
68
|
-
collapsible
|
|
70
|
+
multiple
|
|
69
71
|
}) {
|
|
70
72
|
if (defaultOpenItems !== undefined) {
|
|
71
73
|
if (Array.isArray(defaultOpenItems)) {
|
|
@@ -74,14 +76,8 @@ function initializeUncontrolledOpenItems({
|
|
|
74
76
|
|
|
75
77
|
return [defaultOpenItems];
|
|
76
78
|
}
|
|
77
|
-
/**
|
|
78
|
-
* TODO: since the dropping of descendants API due to performance issues,
|
|
79
|
-
* the default behavior of Accordion has been compromised and [0] makes no sense
|
|
80
|
-
* indexes are not used anymore to ensure the position of the element which should be opened by default
|
|
81
|
-
*/
|
|
82
|
-
|
|
83
79
|
|
|
84
|
-
return
|
|
80
|
+
return [];
|
|
85
81
|
}
|
|
86
82
|
/**
|
|
87
83
|
* Updates the list of open indexes based on an index that changes
|
|
@@ -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/"}
|
|
@@ -7,14 +7,14 @@ exports.useAccordionContextValues_unstable = void 0;
|
|
|
7
7
|
|
|
8
8
|
function useAccordionContextValues_unstable(state) {
|
|
9
9
|
const {
|
|
10
|
-
|
|
10
|
+
navigation,
|
|
11
11
|
openItems,
|
|
12
12
|
requestToggle,
|
|
13
13
|
collapsible
|
|
14
14
|
} = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
|
|
15
15
|
|
|
16
16
|
const accordion = {
|
|
17
|
-
|
|
17
|
+
navigation,
|
|
18
18
|
openItems,
|
|
19
19
|
requestToggle,
|
|
20
20
|
collapsible
|
|
@@ -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/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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 +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,5 +1,5 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState,
|
|
2
|
-
import type {
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
+
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
|
|
3
3
|
export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
|
|
4
4
|
export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
|
|
5
5
|
export declare type AccordionHeaderContextValue = {
|
|
@@ -12,21 +12,24 @@ export declare type AccordionHeaderContextValues = {
|
|
|
12
12
|
accordionHeader: AccordionHeaderContextValue;
|
|
13
13
|
};
|
|
14
14
|
export declare type AccordionHeaderSlots = {
|
|
15
|
-
|
|
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'>;
|
|
16
19
|
/**
|
|
17
20
|
* The component to be used as button in heading
|
|
18
21
|
*/
|
|
19
|
-
button:
|
|
22
|
+
button: NonNullable<Slot<ARIAButtonSlotProps>>;
|
|
20
23
|
/**
|
|
21
24
|
* Expand icon slot rendered before (or after) children content in heading
|
|
22
25
|
*/
|
|
23
|
-
expandIcon:
|
|
26
|
+
expandIcon: Slot<'span'>;
|
|
24
27
|
/**
|
|
25
28
|
* Expand icon slot rendered before (or after) children content in heading
|
|
26
29
|
*/
|
|
27
|
-
icon?:
|
|
30
|
+
icon?: Slot<'div'>;
|
|
28
31
|
};
|
|
29
|
-
|
|
32
|
+
declare type AccordionHeaderCommons = {
|
|
30
33
|
/**
|
|
31
34
|
* Size of spacing in the heading
|
|
32
35
|
*/
|
|
@@ -40,5 +43,6 @@ export declare type AccordionHeaderCommons = {
|
|
|
40
43
|
*/
|
|
41
44
|
inline: boolean;
|
|
42
45
|
};
|
|
43
|
-
export declare type AccordionHeaderProps = ComponentProps<AccordionHeaderSlots
|
|
46
|
+
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & Partial<AccordionHeaderCommons>;
|
|
44
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/"}
|
|
@@ -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/"}
|
|
@@ -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/"}
|
|
@@ -25,7 +25,7 @@ const renderAccordionHeader_unstable = (state, contextValues) => {
|
|
|
25
25
|
}, React.createElement(slots.root, { ...slotProps.root
|
|
26
26
|
}, React.createElement(slots.button, { ...slotProps.button
|
|
27
27
|
}, state.expandIconPosition === 'start' && React.createElement(slots.expandIcon, { ...slotProps.expandIcon
|
|
28
|
-
}), React.createElement(slots.icon, { ...slotProps.icon
|
|
28
|
+
}), slots.icon && React.createElement(slots.icon, { ...slotProps.icon
|
|
29
29
|
}), slotProps.root.children, state.expandIconPosition === 'end' && React.createElement(slots.expandIcon, { ...slotProps.expandIcon
|
|
30
30
|
}))));
|
|
31
31
|
};
|
|
@@ -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/"}
|
|
@@ -29,6 +29,7 @@ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-con
|
|
|
29
29
|
|
|
30
30
|
const useAccordionHeader_unstable = (props, ref) => {
|
|
31
31
|
const {
|
|
32
|
+
as,
|
|
32
33
|
icon,
|
|
33
34
|
button,
|
|
34
35
|
expandIcon,
|
|
@@ -81,9 +82,8 @@ const useAccordionHeader_unstable = (props, ref) => {
|
|
|
81
82
|
expandIcon: 'span',
|
|
82
83
|
icon: 'div'
|
|
83
84
|
},
|
|
84
|
-
root: react_utilities_1.getNativeElementProps('div', {
|
|
85
|
+
root: react_utilities_1.getNativeElementProps(as || 'div', {
|
|
85
86
|
ref,
|
|
86
|
-
role: 'heading',
|
|
87
87
|
...props
|
|
88
88
|
}),
|
|
89
89
|
icon: react_utilities_1.resolveShorthand(icon),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/useAccordionHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { 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 = useContextSelector(\n AccordionContext,\n ctx => !ctx.collapsible && ctx.openItems.length === 1 && open,\n );\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 = useARIAButton(button, {\n required: true,\n defaultProps: {\n disabled,\n disabledFocusable,\n 'aria-expanded': open,\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 transform={`rotate(${expandIconRotation})`} />,\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"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/useAccordionHeaderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAOA,SAAgB,wCAAhB,CAAyD,KAAzD,EAAoF;AAClF,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,kBAAZ;AAAgC,IAAA,IAAhC;AAAsC,IAAA;AAAtC,MAA+C,KAArD;AAEA,QAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CACtB,OAAO;AACL,IAAA,QADK;AAEL,IAAA,kBAFK;AAGL,IAAA,IAHK;AAIL,IAAA;AAJK,GAAP,CADsB,EAOtB,CAAC,QAAD,EAAW,kBAAX,EAA+B,IAA/B,EAAqC,IAArC,CAPsB,CAAxB;AAUA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD;;AAdD,OAAA,CAAA,wCAAA,GAAA,wCAAA","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"],"sourceRoot":"../src/"}
|
|
@@ -51,6 +51,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
51
51
|
"root": {
|
|
52
52
|
"sj55zd": "f19n0e5",
|
|
53
53
|
"De3pzq": "fxugw4r",
|
|
54
|
+
"B6of3ja": "f1hu3pq6",
|
|
55
|
+
"t21cq0": ["f11qmguv", "f1tyq0we"],
|
|
56
|
+
"jrapky": "f19f4twv",
|
|
57
|
+
"Frg6f3": ["f1tyq0we", "f11qmguv"],
|
|
54
58
|
"Bbmb7ep": ["f2i1086", "f1rlsnju"],
|
|
55
59
|
"Beyfa6y": ["f1rlsnju", "f2i1086"],
|
|
56
60
|
"B7oj6ja": ["f1stktl2", "f1127022"],
|
|
@@ -123,7 +127,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
123
127
|
"Frg6f3": ["f1oou7ox", "f1pxv85q"]
|
|
124
128
|
}
|
|
125
129
|
}, {
|
|
126
|
-
"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;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fgusgyc{text-align:unset;}", "[data-keyboard-nav] .fc85khu:focus{border-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fgtqheg:focus:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fq9bj62:focus:after{border-style:solid;}", "[data-keyboard-nav] .fy07e8r:focus:after{border-width:2px;}", "[data-keyboard-nav] .f1ha6shg:focus:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f4ltwxu:focus:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1284xzw:focus:after{top:-2px;}", "[data-keyboard-nav] .f14dru39:focus:after{bottom:-2px;}", "[data-keyboard-nav] .fvabyfg:focus:after{left:-2px;}", "[data-keyboard-nav] .f12y1wz2:focus:after{right:-2px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f2i1086{border-bottom-right-radius:2px;}", ".f1rlsnju{border-bottom-left-radius:2px;}", ".f1stktl2{border-top-right-radius:2px;}", ".f1127022{border-top-left-radius:2px;}", ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".f1wfwcyy{width:calc(100% - 22px);}", ".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;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".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;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1d2rq10{height:32px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fez10in{line-height:0;}", ".fe5j1ua{font-size:20px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".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;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f1oou7ox{margin-left:10px;}", ".f1pxv85q{margin-right:10px;}"],
|
|
130
|
+
"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;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fgusgyc{text-align:unset;}", "[data-keyboard-nav] .fc85khu:focus{border-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fgtqheg:focus:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fq9bj62:focus:after{border-style:solid;}", "[data-keyboard-nav] .fy07e8r:focus:after{border-width:2px;}", "[data-keyboard-nav] .f1ha6shg:focus:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f4ltwxu:focus:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1284xzw:focus:after{top:-2px;}", "[data-keyboard-nav] .f14dru39:focus:after{bottom:-2px;}", "[data-keyboard-nav] .fvabyfg:focus:after{left:-2px;}", "[data-keyboard-nav] .f12y1wz2:focus:after{right:-2px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f2i1086{border-bottom-right-radius:2px;}", ".f1rlsnju{border-bottom-left-radius:2px;}", ".f1stktl2{border-top-right-radius:2px;}", ".f1127022{border-top-left-radius:2px;}", ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".f1wfwcyy{width:calc(100% - 22px);}", ".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;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".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;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1d2rq10{height:32px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fez10in{line-height:0;}", ".fe5j1ua{font-size:20px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".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;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f1oou7ox{margin-left:10px;}", ".f1pxv85q{margin-right:10px;}"],
|
|
127
131
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
128
132
|
});
|
|
129
133
|
/** Applies style classnames to slots */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/useAccordionHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA+EA;;;AACO,MAAM,iCAAiC,GAAI,KAAD,IAAgC;AAC/E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,wBADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UAHF,EAIrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAJJ,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;AAQA,EAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CACvB,MAAM,CAAC,WADgB,EAEvB,MAAM,CAAC,MAFgB,EAGvB,MAAM,CAAC,cAHgB,EAIvB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,YAJA,EAKvB,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,WALV,EAMvB,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,WANV,EAOvB,KAAK,CAAC,IAAN,KAAe,aAAf,IAAgC,MAAM,CAAC,gBAPhB,EAQvB,KAAK,CAAC,MAAN,CAAa,SARU,CAAzB;;AAWA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,OAAA,CAAA,YAAA,CAC3B,MAAM,CAAC,UADoB,EAE3B,KAAK,CAAC,kBAAN,KAA6B,OAA7B,IAAwC,MAAM,CAAC,eAFpB,EAG3B,KAAK,CAAC,kBAAN,KAA6B,KAA7B,IAAsC,MAAM,CAAC,aAHlB,EAI3B,KAAK,CAAC,UAAN,CAAiB,SAJU,CAA7B;AAMD;;AACD,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,KAAK,CAAC,kBAAN,KAA6B,KAA7B,IAAsC,MAAM,CAAC,iBAFxB,EAGrB,KAAK,CAAC,IAAN,CAAW,SAHU,CAAvB;AAKD;;AACD,SAAO,KAAP;AACD,CArCM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AccordionHeaderState } from './AccordionHeader.types';\n\nexport const accordionHeaderClassName = 'fui-AccordionHeader';\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 userSelect: 'none',\n textAlign: 'unset',\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.margin(0),\n ...shorthands.borderRadius('2px'),\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: 'calc(100% - 22px)',\n ...shorthands.border('1px', 'solid', 'transparent'),\n paddingRight: '10px',\n paddingLeft: '10px',\n height: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n fontSize: tokens.fontSizeBase300,\n fontFamily: tokens.fontFamilyBase,\n },\n buttonSmall: {\n height: '32px',\n fontSize: tokens.fontSizeBase200,\n },\n buttonLarge: {\n fontSize: tokens.fontSizeBase400,\n },\n buttonExtraLarge: {\n fontSize: tokens.fontSizeBase500,\n },\n buttonInline: {\n display: 'inline-flex',\n },\n expandIcon: {\n lineHeight: '0',\n fontSize: '20px',\n },\n expandIconStart: {\n paddingRight: '8px',\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: '8px',\n },\n icon: {\n marginRight: '8px',\n fontSize: '20px',\n },\n iconExpandIconEnd: {\n marginLeft: '10px',\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 accordionHeaderClassName,\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 styles.resetButton,\n styles.button,\n styles.focusIndicator,\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 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(\n styles.icon,\n state.expandIconPosition === 'end' && styles.iconExpandIconEnd,\n state.icon.className,\n );\n }\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,+BAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpG,QAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,GAAjC,CAAd;AACA,QAAM,aAAa,GAAG,+BAAA,CAAA,sCAAA,CAAuC,KAAvC,CAAtB;AAEA,EAAA,wBAAA,CAAA,+BAAA,CAAgC,KAAhC;AAEA,SAAO,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,EAAoC,aAApC,CAAP;AACD,CAPqE,CAAzD;AASb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","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"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { ComponentProps, ComponentState,
|
|
2
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
3
|
export declare type AccordionItemContextValue = Omit<AccordionItemCommons, 'value'> & {
|
|
4
4
|
open: boolean;
|
|
5
5
|
onHeaderClick(ev: React.MouseEvent | React.KeyboardEvent): void;
|
|
@@ -8,9 +8,9 @@ export declare type AccordionItemContextValues = {
|
|
|
8
8
|
accordionItem: AccordionItemContextValue;
|
|
9
9
|
};
|
|
10
10
|
export declare type AccordionItemSlots = {
|
|
11
|
-
root:
|
|
11
|
+
root: Slot<'div'>;
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
declare type AccordionItemCommons = {
|
|
14
14
|
/**
|
|
15
15
|
* Disables opening/closing of panel
|
|
16
16
|
*/
|
|
@@ -23,3 +23,4 @@ export declare type AccordionItemCommons = {
|
|
|
23
23
|
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & Partial<AccordionItemCommons> & Pick<AccordionItemCommons, 'value'>;
|
|
24
24
|
export declare type AccordionItemValue = unknown;
|
|
25
25
|
export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemCommons & AccordionItemContextValue;
|
|
26
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/AccordionItemContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA,C,CAGA;;;AACa,OAAA,CAAA,oBAAA,gBAAuB,KAAK,CAAC,aAAN,CAA+C;AACjF,EAAA,aAAa,GAAA;AACX;AACD,GAHgF;;AAIjF,EAAA,IAAI,EAAE,KAJ2E;AAKjF,EAAA,QAAQ,EAAE;AALuE,CAA/C,CAAvB;;AAQN,MAAM,gCAAgC,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,OAAA,CAAA,oBAAjB,CAA/C;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import * as React from 'react';\nimport type { AccordionItemContextValue } from './AccordionItem.types';\n\n// No default value.\nexport const AccordionItemContext = React.createContext<AccordionItemContextValue>({\n onHeaderClick() {\n /** */\n },\n open: false,\n disabled: false,\n});\n\nexport const useAccordionItemContext_unstable = () => React.useContext(AccordionItemContext);\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AccordionItem';\nexport * from './AccordionItem.types';\nexport * from './renderAccordionItem';\nexport * from './useAccordionItem';\nexport * from './useAccordionItemContextValues';\nexport * from './AccordionItemContext';\nexport * from './useAccordionItemStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/renderAccordionItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,4BAA4B,GAAG,CAAC,KAAD,EAA4B,aAA5B,KAAyE;AACnH,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA6B,KAA7B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,sBAAA,CAAA,oBAAA,CAAqB,QAAtB,EAA8B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA9B,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,CADF,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AccordionItemContext } from './AccordionItemContext';\nimport type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionItem_unstable = (state: AccordionItemState, contextValues: AccordionItemContextValues) => {\n const { slots, slotProps } = getSlots<AccordionItemSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <AccordionItemContext.Provider value={contextValues.accordionItem}>\n {slotProps.root.children}\n </AccordionItemContext.Provider>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -26,10 +26,8 @@ const useAccordionItem_unstable = (props, ref) => {
|
|
|
26
26
|
value,
|
|
27
27
|
disabled = false
|
|
28
28
|
} = props;
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
groupper: {}
|
|
32
|
-
});
|
|
29
|
+
const navigation = react_context_selector_1.useContextSelector(AccordionContext_1.AccordionContext, ctx => ctx.navigation);
|
|
30
|
+
const focusableProps = react_tabster_1.useFocusableGroup();
|
|
33
31
|
const requestToggle = react_context_selector_1.useContextSelector(AccordionContext_1.AccordionContext, ctx => ctx.requestToggle);
|
|
34
32
|
const open = react_context_selector_1.useContextSelector(AccordionContext_1.AccordionContext, ctx => ctx.openItems.includes(value));
|
|
35
33
|
const onAccordionHeaderClick = React.useCallback(ev => requestToggle(ev, {
|
|
@@ -45,8 +43,8 @@ const useAccordionItem_unstable = (props, ref) => {
|
|
|
45
43
|
},
|
|
46
44
|
root: react_utilities_1.getNativeElementProps('div', {
|
|
47
45
|
ref: ref,
|
|
48
|
-
...
|
|
49
|
-
...
|
|
46
|
+
...props,
|
|
47
|
+
...(navigation && focusableProps)
|
|
50
48
|
})
|
|
51
49
|
};
|
|
52
50
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAIA;;;;AAIG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,QAAQ,GAAG;AAApB,MAA8B,KAApC;AACA,QAAM,UAAU,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,UAAhD,CAAnB;AACA,QAAM,cAAc,GAAG,eAAA,CAAA,iBAAA,EAAvB;AAEA,QAAM,aAAa,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,aAAhD,CAAtB;AACA,QAAM,IAAI,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,QAAd,CAAuB,KAAvB,CAA5C,CAAb;AACA,QAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAmB,EAAD,IAA8B,aAAa,CAAC,EAAD,EAAK;AAAE,IAAA;AAAF,GAAL,CAA7D,EAA8E,CAC3G,aAD2G,EAE3G,KAF2G,CAA9E,CAA/B;AAKA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,KAFK;AAGL,IAAA,QAHK;AAIL,IAAA,aAAa,EAAE,sBAJV;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KALP;AAQL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG,KAF8B;AAGjC,UAAI,UAAU,IAAI,cAAlB;AAHiC,KAA7B;AARD,GAAP;AAcD,CA7BM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false } = props;\n const navigation = useContextSelector(AccordionContext, ctx => ctx.navigation);\n const focusableProps = useFocusableGroup();\n\n const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);\n const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [\n requestToggle,\n value,\n ]);\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: ref,\n ...props,\n ...(navigation && focusableProps),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/useAccordionItemContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,sCAAhB,CAAuD,KAAvD,EAAgF;AAC9E,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,aAAZ;AAA2B,IAAA;AAA3B,MAAoC,KAA1C;AACA,QAAM,aAAa,GAAG,KAAK,CAAC,OAAN,CAAyC,OAAO;AAAE,IAAA,QAAF;AAAY,IAAA,aAAZ;AAA2B,IAAA;AAA3B,GAAP,CAAzC,EAAoF,CACxG,QADwG,EAExG,aAFwG,EAGxG,IAHwG,CAApF,CAAtB;AAMA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD;;AATD,OAAA,CAAA,sCAAA,GAAA,sCAAA","sourcesContent":["import * as React from 'react';\nimport type { AccordionItemContextValue, AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n const { disabled, onHeaderClick, open } = state;\n const accordionItem = React.useMemo<AccordionItemContextValue>(() => ({ disabled, onHeaderClick, open }), [\n disabled,\n onHeaderClick,\n open,\n ]);\n\n return { accordionItem };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/useAccordionItemStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;;AAEN,MAAM,+BAA+B,GAAI,KAAD,IAA8B;AAC3E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAb,EAAqC,KAAK,CAAC,IAAN,CAAW,SAAhD,CAAvB;AAEA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { AccordionItemState } from './AccordionItem.types';\n\nexport const accordionItemClassName = 'fui-AccordionItem';\n\nexport const useAccordionItemStyles_unstable = (state: AccordionItemState) => {\n state.root.className = mergeClasses(accordionItemClassName, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/AccordionPanel.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AAEA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AACA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAP;AACD,CALuE,CAA3D;AAOb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useAccordionPanel_unstable } from './useAccordionPanel';\nimport { renderAccordionPanel_unstable } from './renderAccordionPanel';\nimport { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles';\nimport type { AccordionPanelProps } from './AccordionPanel.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.\n */\nexport const AccordionPanel: ForwardRefComponent<AccordionPanelProps> = React.forwardRef((props, ref) => {\n const state = useAccordionPanel_unstable(props, ref);\n\n useAccordionPanelStyles_unstable(state);\n return renderAccordionPanel_unstable(state);\n});\n\nAccordionPanel.displayName = 'AccordionPanel';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState,
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
2
|
export declare type AccordionPanelSlots = {
|
|
3
|
-
root:
|
|
3
|
+
root: Slot<'div'>;
|
|
4
4
|
};
|
|
5
5
|
export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
|
|
6
6
|
export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AccordionPanel';\nexport * from './AccordionPanel.types';\nexport * from './renderAccordionPanel';\nexport * from './useAccordionPanel';\nexport * from './useAccordionPanelStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/renderAccordionPanel.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;AACA,SAAO,KAAK,CAAC,IAAN,GAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CAAb,GAAsF,IAA7F;AACD,CAHM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionPanel_unstable = (state: AccordionPanelState) => {\n const { slots, slotProps } = getSlots<AccordionPanelSlots>(state);\n return state.open ? <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root> : null;\n};\n"],"sourceRoot":"../src/"}
|