@fluentui/react-accordion 0.0.0-nightly-20230426-0420.1 → 0.0.0-nightly-20230428-0419.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +19 -19
- package/CHANGELOG.md +12 -12
- package/package.json +9 -9
- package/dist/index.d.ts +0 -265
- package/lib/Accordion.js +0 -2
- package/lib/Accordion.js.map +0 -1
- package/lib/AccordionHeader.js +0 -2
- package/lib/AccordionHeader.js.map +0 -1
- package/lib/AccordionItem.js +0 -2
- package/lib/AccordionItem.js.map +0 -1
- package/lib/AccordionPanel.js +0 -2
- package/lib/AccordionPanel.js.map +0 -1
- package/lib/components/Accordion/Accordion.js +0 -18
- package/lib/components/Accordion/Accordion.js.map +0 -1
- package/lib/components/Accordion/Accordion.types.js +0 -2
- package/lib/components/Accordion/Accordion.types.js.map +0 -1
- package/lib/components/Accordion/AccordionContext.js +0 -11
- package/lib/components/Accordion/AccordionContext.js.map +0 -1
- package/lib/components/Accordion/index.js +0 -8
- package/lib/components/Accordion/index.js.map +0 -1
- package/lib/components/Accordion/renderAccordion.js +0 -16
- package/lib/components/Accordion/renderAccordion.js.map +0 -1
- package/lib/components/Accordion/useAccordion.js +0 -94
- package/lib/components/Accordion/useAccordion.js.map +0 -1
- package/lib/components/Accordion/useAccordionContextValues.js +0 -19
- package/lib/components/Accordion/useAccordionContextValues.js.map +0 -1
- package/lib/components/Accordion/useAccordionStyles.js +0 -9
- package/lib/components/Accordion/useAccordionStyles.js.map +0 -1
- package/lib/components/AccordionHeader/AccordionHeader.js +0 -19
- package/lib/components/AccordionHeader/AccordionHeader.js.map +0 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.js +0 -2
- package/lib/components/AccordionHeader/AccordionHeader.types.js.map +0 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js +0 -11
- package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +0 -1
- package/lib/components/AccordionHeader/index.js +0 -7
- package/lib/components/AccordionHeader/index.js.map +0 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js +0 -16
- package/lib/components/AccordionHeader/renderAccordionHeader.js.map +0 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js +0 -94
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +0 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js +0 -19
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +0 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js +0 -172
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js.map +0 -1
- package/lib/components/AccordionItem/AccordionItem.js +0 -18
- package/lib/components/AccordionItem/AccordionItem.js.map +0 -1
- package/lib/components/AccordionItem/AccordionItem.types.js +0 -2
- package/lib/components/AccordionItem/AccordionItem.types.js.map +0 -1
- package/lib/components/AccordionItem/AccordionItemContext.js +0 -12
- package/lib/components/AccordionItem/AccordionItemContext.js.map +0 -1
- package/lib/components/AccordionItem/index.js +0 -8
- package/lib/components/AccordionItem/index.js.map +0 -1
- package/lib/components/AccordionItem/renderAccordionItem.js +0 -16
- package/lib/components/AccordionItem/renderAccordionItem.js.map +0 -1
- package/lib/components/AccordionItem/useAccordionItem.js +0 -32
- package/lib/components/AccordionItem/useAccordionItem.js.map +0 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js +0 -17
- package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +0 -1
- package/lib/components/AccordionItem/useAccordionItemStyles.js +0 -9
- package/lib/components/AccordionItem/useAccordionItemStyles.js.map +0 -1
- package/lib/components/AccordionPanel/AccordionPanel.js +0 -16
- package/lib/components/AccordionPanel/AccordionPanel.js.map +0 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.js +0 -2
- package/lib/components/AccordionPanel/AccordionPanel.types.js.map +0 -1
- package/lib/components/AccordionPanel/index.js +0 -6
- package/lib/components/AccordionPanel/index.js.map +0 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.js +0 -13
- package/lib/components/AccordionPanel/renderAccordionPanel.js.map +0 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js +0 -33
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +0 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js +0 -25
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js.map +0 -1
- package/lib/index.js +0 -5
- package/lib/index.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","useControllableState","useEventCallback","useArrowNavigationGroup","useAccordion_unstable","props","ref","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","navigation","setOpenItems","state","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","arrowNavigationProps","circular","tabbable","requestToggle","event","data","previousOpenItems","updateOpenItems","value","components","root","undefined","Array","isArray","includes","length","filter","i","sort","index"],"sources":["../../../src/components/Accordion/useAccordion.ts"],"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 tabbable: true,\n });\n\n const requestToggle = useEventCallback((event: AccordionToggleEvent, data: AccordionToggleData) => {\n onToggle?.(event, data);\n setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));\n });\n\n return {\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 multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n multiple: boolean,\n collapsible: boolean,\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ;AAG9E,SAASC,uBAAuB,QAAQ;AAExC;;;;;AAKA,OAAO,MAAMC,qBAAA,GAAwBA,CAACC,KAAA,EAAuBC,GAAA,KAAgD;EAC3G,MAAM;IACJC,SAAA,EAAWC,mBAAA;IACXC,gBAAA;IACAC,QAAA,GAAW,KAAK;IAChBC,WAAA,GAAc,KAAK;IACnBC,QAAA;IACAC;EAAU,CACX,GAAGR,KAAA;EACJ,MAAM,CAACE,SAAA,EAAWO,YAAA,CAAa,GAAGb,oBAAA,CAAqB;IACrDc,KAAA,EAAOhB,KAAA,CAAMiB,OAAO,CAAC,MAAMC,eAAA,CAAgBT,mBAAA,GAAsB,CAACA,mBAAA,CAAoB;IACtFU,YAAA,EAAcA,CAAA,KAAMC,+BAAA,CAAgC;MAAEV,gBAAA;MAAkBC;IAAS;IACjFU,YAAA,EAAc;EAChB;EAEA,MAAMC,oBAAA,GAAuBlB,uBAAA,CAAwB;IACnDmB,QAAA,EAAUT,UAAA,KAAe;IACzBU,QAAA,EAAU;EACZ;EAEA,MAAMC,aAAA,GAAgBtB,gBAAA,CAAiB,CAACuB,KAAA,EAA6BC,IAAA,KAA8B;IACjGd,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAWa,KAAA,EAAOC,IAAA;IAClBZ,YAAA,CAAaa,iBAAA,IAAqBC,eAAA,CAAgBF,IAAA,CAAKG,KAAK,EAAEF,iBAAA,EAAmBjB,QAAA,EAAUC,WAAA;EAC7F;EAEA,OAAO;IACLA,WAAA;IACAE,UAAA;IACAN,SAAA;IACAiB,aAAA;IACAM,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAM/B,qBAAA,CAAsB,OAAO;MACjC,GAAGK,KAAK;MACR,IAAIQ,UAAA,GAAaQ,oBAAA,GAAuB,CAAC,CAAC;MAC1Cf;IACF;EACF;AACF;AAEA;;;AAGA,SAASa,gCAAgC;EACvCV,gBAAA;EACAC;AAAQ,CAC8C,EAAwB;EAC9E,IAAID,gBAAA,KAAqBuB,SAAA,EAAW;IAClC,IAAIC,KAAA,CAAMC,OAAO,CAACzB,gBAAA,GAAmB;MACnC,OAAOC,QAAA,GAAWD,gBAAA,GAAmB,CAACA,gBAAgB,CAAC,EAAE,CAAC;IAC5D;IACA,OAAO,CAACA,gBAAA,CAAiB;EAC3B;EACA,OAAO,EAAE;AACX;AAEA;;;;;;;AAOA,SAASmB,gBACPC,KAAyB,EACzBF,iBAAuC,EACvCjB,QAAiB,EACjBC,WAAoB,EACpB;EACA,IAAID,QAAA,EAAU;IACZ,IAAIiB,iBAAA,CAAkBQ,QAAQ,CAACN,KAAA,GAAQ;MACrC,IAAIF,iBAAA,CAAkBS,MAAM,GAAG,KAAKzB,WAAA,EAAa;QAC/C,OAAOgB,iBAAA,CAAkBU,MAAM,CAACC,CAAA,IAAKA,CAAA,KAAMT,KAAA;MAC7C;IACF,OAAO;MACL,OAAO,C,GAAIF,iBAAA,EAAmBE,KAAA,CAAM,CAACU,IAAI;IAC3C;EACF,OAAO;IACL,OAAOZ,iBAAiB,CAAC,EAAE,KAAKE,KAAA,IAASlB,WAAA,GAAc,EAAE,GAAG,CAACkB,KAAA,CAAM;EACrE;EACA,OAAOF,iBAAA;AACT;AAEA;;;AAGA,SAASV,gBAAgBuB,KAAiD,EAAoC;EAC5G,IAAIA,KAAA,KAAUR,SAAA,EAAW;IACvB,OAAOA,SAAA;EACT;EACA,OAAOC,KAAA,CAAMC,OAAO,CAACM,KAAA,IAASA,KAAA,GAAQ,CAACA,KAAA,CAAM;AAC/C"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export function useAccordionContextValues_unstable(state) {
|
|
2
|
-
const {
|
|
3
|
-
navigation,
|
|
4
|
-
openItems,
|
|
5
|
-
requestToggle,
|
|
6
|
-
collapsible
|
|
7
|
-
} = state;
|
|
8
|
-
// This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
|
|
9
|
-
const accordion = {
|
|
10
|
-
navigation,
|
|
11
|
-
openItems,
|
|
12
|
-
requestToggle,
|
|
13
|
-
collapsible
|
|
14
|
-
};
|
|
15
|
-
return {
|
|
16
|
-
accordion
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
//# sourceMappingURL=useAccordionContextValues.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useAccordionContextValues_unstable","state","navigation","openItems","requestToggle","collapsible","accordion"],"sources":["../../../src/components/Accordion/useAccordionContextValues.ts"],"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"],"mappings":"AAEA,OAAO,SAASA,mCAAmCC,KAAqB,EAA0B;EAChG,MAAM;IAAEC,UAAA;IAAYC,SAAA;IAAWC,aAAA;IAAeC;EAAW,CAAE,GAAGJ,KAAA;EAE9D;EACA,MAAMK,SAAA,GAAmC;IACvCJ,UAAA;IACAC,SAAA;IACAC,aAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAU;AACrB"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { mergeClasses } from '@griffel/react';
|
|
2
|
-
export const accordionClassNames = {
|
|
3
|
-
root: 'fui-Accordion'
|
|
4
|
-
};
|
|
5
|
-
export const useAccordionStyles_unstable = state => {
|
|
6
|
-
state.root.className = mergeClasses(accordionClassNames.root, state.root.className);
|
|
7
|
-
return state;
|
|
8
|
-
};
|
|
9
|
-
//# sourceMappingURL=useAccordionStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","accordionClassNames","root","useAccordionStyles_unstable","state","className"],"sources":["../../../src/components/Accordion/useAccordionStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionSlots, AccordionState } from './Accordion.types';\n\nexport const accordionClassNames: SlotClassNames<AccordionSlots> = {\n root: 'fui-Accordion',\n};\n\nexport const useAccordionStyles_unstable = (state: AccordionState) => {\n state.root.className = mergeClasses(accordionClassNames.root, state.root.className);\n\n return state;\n};\n"],"mappings":"AACA,SAASA,YAAY,QAAQ;AAG7B,OAAO,MAAMC,mBAAA,GAAsD;EACjEC,IAAA,EAAM;AACR;AAEA,OAAO,MAAMC,2BAAA,GAA+BC,KAAA,IAA0B;EACpEA,KAAA,CAAMF,IAAI,CAACG,SAAS,GAAGL,YAAA,CAAaC,mBAAA,CAAoBC,IAAI,EAAEE,KAAA,CAAMF,IAAI,CAACG,SAAS;EAElF,OAAOD,KAAA;AACT"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useAccordionHeader_unstable } from './useAccordionHeader';
|
|
3
|
-
import { renderAccordionHeader_unstable } from './renderAccordionHeader';
|
|
4
|
-
import { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles';
|
|
5
|
-
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
6
|
-
import { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';
|
|
7
|
-
/**
|
|
8
|
-
* Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
|
|
9
|
-
* hooks.
|
|
10
|
-
*/
|
|
11
|
-
export const AccordionHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
12
|
-
const state = useAccordionHeader_unstable(props, ref);
|
|
13
|
-
const contextValues = useAccordionHeaderContextValues_unstable(state);
|
|
14
|
-
useAccordionHeaderStyles_unstable(state);
|
|
15
|
-
useCustomStyleHook_unstable('useAccordionHeaderStyles_unstable')(state);
|
|
16
|
-
return renderAccordionHeader_unstable(state, contextValues);
|
|
17
|
-
});
|
|
18
|
-
AccordionHeader.displayName = 'AccordionHeader';
|
|
19
|
-
//# sourceMappingURL=AccordionHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useAccordionHeader_unstable","renderAccordionHeader_unstable","useAccordionHeaderStyles_unstable","useCustomStyleHook_unstable","useAccordionHeaderContextValues_unstable","AccordionHeader","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/AccordionHeader/AccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAccordionHeader_unstable } from './useAccordionHeader';\nimport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nimport { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('useAccordionHeaderStyles_unstable')(state);\n\n return renderAccordionHeader_unstable(state, contextValues);\n});\n\nAccordionHeader.displayName = 'AccordionHeader';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,iCAAiC,QAAQ;AAClD,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,wCAAwC,QAAQ;AAIzD;;;;AAIA,OAAO,MAAMC,eAAA,gBAA6DN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzG,MAAMC,KAAA,GAAQT,2BAAA,CAA4BO,KAAA,EAAOC,GAAA;EACjD,MAAME,aAAA,GAAgBN,wCAAA,CAAyCK,KAAA;EAE/DP,iCAAA,CAAkCO,KAAA;EAElCN,2BAAA,CAA4B,qCAAqCM,KAAA;EAEjE,OAAOR,8BAAA,CAA+BQ,KAAA,EAAOC,aAAA;AAC/C;AAEAL,eAAA,CAAgBM,WAAW,GAAG"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/AccordionHeader/AccordionHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\n\nexport type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';\nexport type AccordionHeaderExpandIconPosition = 'start' | 'end';\n\nexport type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {\n disabled: boolean;\n open: boolean;\n};\n\nexport type AccordionHeaderContextValues = {\n accordionHeader: AccordionHeaderContextValue;\n};\n\nexport type AccordionHeaderSlots = {\n /**\n * The element wrapping the button. By default this is a div, but can be a heading.\n */\n root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n /**\n * The component to be used as button in heading\n */\n button: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n /**\n * Expand icon slot rendered before (or after) children content in heading.\n */\n expandIcon: Slot<'span'>;\n /**\n * Expand icon slot rendered before (or after) children content in heading.\n */\n icon?: Slot<'div'>;\n};\n\nexport type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {\n /**\n * The position of the expand icon slot in heading.\n */\n expandIconPosition?: AccordionHeaderExpandIconPosition;\n\n /**\n * Indicates if the AccordionHeader should be rendered inline.\n */\n inline?: boolean;\n\n /**\n * Size of spacing in the heading.\n */\n size?: AccordionHeaderSize;\n};\n\nexport type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &\n Required<Pick<AccordionHeaderProps, 'inline'>> &\n AccordionHeaderContextValue;\n"],"mappings":"AAAA"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export const AccordionHeaderContext = /*#__PURE__*/React.createContext(undefined);
|
|
3
|
-
const accordionHeaderContextDefaultValue = {
|
|
4
|
-
open: false,
|
|
5
|
-
disabled: false,
|
|
6
|
-
size: 'medium',
|
|
7
|
-
expandIconPosition: 'start'
|
|
8
|
-
};
|
|
9
|
-
var _React_useContext;
|
|
10
|
-
export const useAccordionHeaderContext = () => (_React_useContext = React.useContext(AccordionHeaderContext)) !== null && _React_useContext !== void 0 ? _React_useContext : accordionHeaderContextDefaultValue;
|
|
11
|
-
//# sourceMappingURL=AccordionHeaderContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","AccordionHeaderContext","createContext","undefined","accordionHeaderContextDefaultValue","open","disabled","size","expandIconPosition","_React_useContext","useAccordionHeaderContext","useContext"],"sources":["../../../src/components/AccordionHeader/AccordionHeaderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionHeaderContextValue } from './AccordionHeader.types';\n\nexport const AccordionHeaderContext = React.createContext<AccordionHeaderContextValue | undefined>(undefined);\n\nconst accordionHeaderContextDefaultValue = {\n open: false,\n disabled: false,\n size: 'medium',\n expandIconPosition: 'start',\n};\n\nexport const useAccordionHeaderContext = () =>\n React.useContext(AccordionHeaderContext) ?? accordionHeaderContextDefaultValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,OAAO,MAAMC,sBAAA,gBAAyBD,KAAA,CAAME,aAAa,CAA0CC,SAAA;AAEnG,MAAMC,kCAAA,GAAqC;EACzCC,IAAA,EAAM,KAAK;EACXC,QAAA,EAAU,KAAK;EACfC,IAAA,EAAM;EACNC,kBAAA,EAAoB;AACtB;IAGEC,iBAAA;AADF,OAAO,MAAMC,yBAAA,GAA4BA,CAAA,KACvC,CAAAD,iBAAA,GAAAT,KAAA,CAAMW,UAAU,CAACV,sBAAA,eAAjBQ,iBAAA,cAAAA,iBAAA,GAA4CL,kCAAkC"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export * from './AccordionHeader';
|
|
2
|
-
export * from './AccordionHeader.types';
|
|
3
|
-
export * from './renderAccordionHeader';
|
|
4
|
-
export * from './useAccordionHeader';
|
|
5
|
-
export * from './useAccordionHeaderContextValues';
|
|
6
|
-
export * from './useAccordionHeaderStyles';
|
|
7
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/AccordionHeader/index.ts"],"sourcesContent":["export * from './AccordionHeader';\nexport * from './AccordionHeader.types';\nexport * from './renderAccordionHeader';\nexport * from './useAccordionHeader';\nexport * from './useAccordionHeaderContextValues';\nexport * from './useAccordionHeaderStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
-
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
|
-
import { AccordionHeaderContext } from './AccordionHeaderContext';
|
|
4
|
-
/**
|
|
5
|
-
* Function that renders the final JSX of the component
|
|
6
|
-
*/
|
|
7
|
-
export const renderAccordionHeader_unstable = (state, contextValues) => {
|
|
8
|
-
const {
|
|
9
|
-
slots,
|
|
10
|
-
slotProps
|
|
11
|
-
} = getSlotsNext(state);
|
|
12
|
-
return /*#__PURE__*/createElement(AccordionHeaderContext.Provider, {
|
|
13
|
-
value: contextValues.accordionHeader
|
|
14
|
-
}, /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.button, slotProps.button, state.expandIconPosition === 'start' && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon), slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), slotProps.root.children, state.expandIconPosition === 'end' && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon))));
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=renderAccordionHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["createElement","getSlotsNext","AccordionHeaderContext","renderAccordionHeader_unstable","state","contextValues","slots","slotProps","Provider","value","accordionHeader","root","button","expandIconPosition","expandIcon","icon","children"],"sources":["../../../src/components/AccordionHeader/renderAccordionHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AccordionHeaderContext } from './AccordionHeaderContext';\nimport type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionHeader_unstable = (\n state: AccordionHeaderState,\n contextValues: AccordionHeaderContextValues,\n) => {\n const { slots, slotProps } = getSlotsNext<AccordionHeaderSlots>(state);\n\n return (\n <AccordionHeaderContext.Provider value={contextValues.accordionHeader}>\n <slots.root {...slotProps.root}>\n <slots.button {...slotProps.button}>\n {state.expandIconPosition === 'start' && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {state.expandIconPosition === 'end' && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n </slots.root>\n </AccordionHeaderContext.Provider>\n );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,sBAAsB,QAAQ;AAGvC;;;AAGA,OAAO,MAAMC,8BAAA,GAAiCA,CAC5CC,KAAA,EACAC,aAAA,KACG;EACH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAAmCG,KAAA;EAEhE,oBACEJ,aAlBJ,CAkBKE,sBAAA,CAAuBM,QAAQ;IAACC,KAAA,EAAOJ,aAAA,CAAcK;kBACpDV,aAnBN,CAmBOM,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,eAC5BX,aApBR,CAoBSM,KAAA,CAAMM,MAAM,EAAKL,SAAA,CAAUK,MAAM,EAC/BR,KAAA,CAAMS,kBAAkB,KAAK,wBAAWb,aArBnD,CAqBoDM,KAAA,CAAMQ,UAAU,EAAKP,SAAA,CAAUO,UAAU,GAClFR,KAAA,CAAMS,IAAI,iBAAIf,aAtBzB,CAsB0BM,KAAA,CAAMS,IAAI,EAAKR,SAAA,CAAUQ,IAAI,GAC5CR,SAAA,CAAUI,IAAI,CAACK,QAAQ,EACvBZ,KAAA,CAAMS,kBAAkB,KAAK,sBAASb,aAxBjD,CAwBkDM,KAAA,CAAMQ,UAAU,EAAKP,SAAA,CAAUO,UAAU;AAK3F"}
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
|
|
3
|
-
import { useAccordionItemContext_unstable } from '../AccordionItem/index';
|
|
4
|
-
import { useARIAButtonShorthand } from '@fluentui/react-aria';
|
|
5
|
-
import { useAccordionContext_unstable } from '../Accordion/AccordionContext';
|
|
6
|
-
import { ChevronRightRegular } from '@fluentui/react-icons';
|
|
7
|
-
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
8
|
-
/**
|
|
9
|
-
* Returns the props and state required to render the component
|
|
10
|
-
* @param props - AccordionHeader properties
|
|
11
|
-
* @param ref - reference to root HTMLElement of AccordionHeader
|
|
12
|
-
*/
|
|
13
|
-
export const useAccordionHeader_unstable = (props, ref) => {
|
|
14
|
-
const {
|
|
15
|
-
as,
|
|
16
|
-
icon,
|
|
17
|
-
button,
|
|
18
|
-
expandIcon,
|
|
19
|
-
inline = false,
|
|
20
|
-
size = 'medium',
|
|
21
|
-
expandIconPosition = 'start'
|
|
22
|
-
} = props;
|
|
23
|
-
const {
|
|
24
|
-
onHeaderClick: onAccordionHeaderClick,
|
|
25
|
-
disabled,
|
|
26
|
-
open
|
|
27
|
-
} = useAccordionItemContext_unstable();
|
|
28
|
-
/**
|
|
29
|
-
* force disabled state on button if accordion isn't collapsible
|
|
30
|
-
* and this is the only item opened
|
|
31
|
-
*/
|
|
32
|
-
const disabledFocusable = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);
|
|
33
|
-
const {
|
|
34
|
-
dir
|
|
35
|
-
} = useFluent();
|
|
36
|
-
// Calculate how to rotate the expand icon [>] (ChevronRightRegular)
|
|
37
|
-
let expandIconRotation;
|
|
38
|
-
if (expandIconPosition === 'end') {
|
|
39
|
-
// If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed
|
|
40
|
-
expandIconRotation = open ? -90 : 90;
|
|
41
|
-
} else {
|
|
42
|
-
// Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed
|
|
43
|
-
expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
|
|
44
|
-
}
|
|
45
|
-
const buttonShorthand = useARIAButtonShorthand(button, {
|
|
46
|
-
required: true,
|
|
47
|
-
defaultProps: {
|
|
48
|
-
disabled,
|
|
49
|
-
disabledFocusable,
|
|
50
|
-
'aria-expanded': open,
|
|
51
|
-
type: 'button'
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
return {
|
|
55
|
-
disabled,
|
|
56
|
-
open,
|
|
57
|
-
size,
|
|
58
|
-
inline,
|
|
59
|
-
expandIconPosition,
|
|
60
|
-
components: {
|
|
61
|
-
root: 'div',
|
|
62
|
-
button: 'button',
|
|
63
|
-
expandIcon: 'span',
|
|
64
|
-
icon: 'div'
|
|
65
|
-
},
|
|
66
|
-
root: getNativeElementProps(as || 'div', {
|
|
67
|
-
ref,
|
|
68
|
-
...props
|
|
69
|
-
}),
|
|
70
|
-
icon: resolveShorthand(icon),
|
|
71
|
-
expandIcon: resolveShorthand(expandIcon, {
|
|
72
|
-
required: true,
|
|
73
|
-
defaultProps: {
|
|
74
|
-
children: /*#__PURE__*/React.createElement(ChevronRightRegular, {
|
|
75
|
-
style: {
|
|
76
|
-
transform: `rotate(${expandIconRotation}deg)`
|
|
77
|
-
}
|
|
78
|
-
}),
|
|
79
|
-
'aria-hidden': true
|
|
80
|
-
}
|
|
81
|
-
}),
|
|
82
|
-
button: {
|
|
83
|
-
...buttonShorthand,
|
|
84
|
-
onClick: useEventCallback(ev => {
|
|
85
|
-
var _buttonShorthand_onClick;
|
|
86
|
-
(_buttonShorthand_onClick = buttonShorthand.onClick) === null || _buttonShorthand_onClick === void 0 ? void 0 : _buttonShorthand_onClick.call(buttonShorthand, ev);
|
|
87
|
-
if (!ev.defaultPrevented) {
|
|
88
|
-
onAccordionHeaderClick(ev);
|
|
89
|
-
}
|
|
90
|
-
})
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
};
|
|
94
|
-
//# sourceMappingURL=useAccordionHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useAccordionItemContext_unstable","useARIAButtonShorthand","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionHeader_unstable","props","ref","as","icon","button","expandIcon","inline","size","expandIconPosition","onHeaderClick","onAccordionHeaderClick","disabled","open","disabledFocusable","ctx","collapsible","openItems","length","dir","expandIconRotation","buttonShorthand","required","defaultProps","type","components","root","children","createElement","style","transform","onClick","ev","_buttonShorthand_onClick","call","defaultPrevented"],"sources":["../../../src/components/AccordionHeader/useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useAccordionContext_unstable } from '../Accordion/AccordionContext';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeader_unstable = (\n props: AccordionHeaderProps,\n ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n const { as, icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;\n const { onHeaderClick: onAccordionHeaderClick, disabled, open } = useAccordionItemContext_unstable();\n\n /**\n * force disabled state on button if accordion isn't collapsible\n * and this is the only item opened\n */\n const disabledFocusable = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);\n\n const { dir } = useFluent();\n\n // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n let expandIconRotation: 0 | 90 | -90 | 180;\n if (expandIconPosition === 'end') {\n // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n expandIconRotation = open ? -90 : 90;\n } else {\n // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n }\n\n const buttonShorthand = useARIAButtonShorthand(button, {\n required: true,\n defaultProps: {\n disabled,\n disabledFocusable,\n 'aria-expanded': open,\n type: 'button',\n },\n });\n\n return {\n disabled,\n open,\n size,\n inline,\n expandIconPosition,\n components: {\n root: 'div',\n button: 'button',\n expandIcon: 'span',\n icon: 'div',\n },\n root: getNativeElementProps(as || 'div', {\n ref,\n ...props,\n }),\n icon: resolveShorthand(icon),\n expandIcon: resolveShorthand(expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronRightRegular style={{ transform: `rotate(${expandIconRotation}deg)` }} />,\n 'aria-hidden': true,\n },\n }),\n button: {\n ...buttonShorthand,\n onClick: useEventCallback(\n (ev: React.MouseEvent<HTMLButtonElement & HTMLDivElement & HTMLSpanElement & HTMLAnchorElement>) => {\n buttonShorthand.onClick?.(ev);\n if (!ev.defaultPrevented) {\n onAccordionHeaderClick(ev);\n }\n },\n ),\n },\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ;AAC1E,SAASC,gCAAgC,QAAQ;AACjD,SAASC,sBAAsB,QAAQ;AAEvC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,mBAAmB,QAAQ;AACpC,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAEhD;;;;;AAKA,OAAO,MAAMC,2BAAA,GAA8BA,CACzCC,KAAA,EACAC,GAAA,KACyB;EACzB,MAAM;IAAEC,EAAA;IAAIC,IAAA;IAAMC,MAAA;IAAQC,UAAA;IAAYC,MAAA,GAAS,KAAK;IAAEC,IAAA,GAAO;IAAUC,kBAAA,GAAqB;EAAO,CAAE,GAAGR,KAAA;EACxG,MAAM;IAAES,aAAA,EAAeC,sBAAA;IAAwBC,QAAA;IAAUC;EAAI,CAAE,GAAGnB,gCAAA;EAElE;;;;EAIA,MAAMoB,iBAAA,GAAoBlB,4BAAA,CAA6BmB,GAAA,IAAO,CAACA,GAAA,CAAIC,WAAW,IAAID,GAAA,CAAIE,SAAS,CAACC,MAAM,KAAK,KAAKL,IAAA;EAEhH,MAAM;IAAEM;EAAG,CAAE,GAAGpB,SAAA;EAEhB;EACA,IAAIqB,kBAAA;EACJ,IAAIX,kBAAA,KAAuB,OAAO;IAChC;IACAW,kBAAA,GAAqBP,IAAA,GAAO,CAAC,KAAK,EAAE;EACtC,OAAO;IACL;IACAO,kBAAA,GAAqBP,IAAA,GAAO,KAAKM,GAAA,KAAQ,QAAQ,IAAI,GAAG;EAC1D;EAEA,MAAME,eAAA,GAAkB1B,sBAAA,CAAuBU,MAAA,EAAQ;IACrDiB,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZX,QAAA;MACAE,iBAAA;MACA,iBAAiBD,IAAA;MACjBW,IAAA,EAAM;IACR;EACF;EAEA,OAAO;IACLZ,QAAA;IACAC,IAAA;IACAL,IAAA;IACAD,MAAA;IACAE,kBAAA;IACAgB,UAAA,EAAY;MACVC,IAAA,EAAM;MACNrB,MAAA,EAAQ;MACRC,UAAA,EAAY;MACZF,IAAA,EAAM;IACR;IACAsB,IAAA,EAAMnC,qBAAA,CAAsBY,EAAA,IAAM,OAAO;MACvCD,GAAA;MACA,GAAGD;IACL;IACAG,IAAA,EAAMZ,gBAAA,CAAiBY,IAAA;IACvBE,UAAA,EAAYd,gBAAA,CAAiBc,UAAA,EAAY;MACvCgB,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZI,QAAA,eAAUrC,KAAA,CAAAsC,aAAA,CAAC/B,mBAAA;UAAoBgC,KAAA,EAAO;YAAEC,SAAA,EAAY,UAASV,kBAAmB;UAAM;;QACtF,eAAe;MACjB;IACF;IACAf,MAAA,EAAQ;MACN,GAAGgB,eAAe;MAClBU,OAAA,EAAStC,gBAAA,CACNuC,EAAA,IAAmG;YAClGC,wBAAA;QAAA,CAAAA,wBAAA,GAAAZ,eAAA,CAAgBU,OAAO,cAAvBE,wBAAA,uBAAAA,wBAAA,CAAAC,IAAA,CAAAb,eAAA,EAA0BW,EAAA;QAC1B,IAAI,CAACA,EAAA,CAAGG,gBAAgB,EAAE;UACxBxB,sBAAA,CAAuBqB,EAAA;QACzB;MACF;IAEJ;EACF;AACF"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export function useAccordionHeaderContextValues_unstable(state) {
|
|
3
|
-
const {
|
|
4
|
-
disabled,
|
|
5
|
-
expandIconPosition,
|
|
6
|
-
open,
|
|
7
|
-
size
|
|
8
|
-
} = state;
|
|
9
|
-
const accordionHeader = React.useMemo(() => ({
|
|
10
|
-
disabled,
|
|
11
|
-
expandIconPosition,
|
|
12
|
-
open,
|
|
13
|
-
size
|
|
14
|
-
}), [disabled, expandIconPosition, open, size]);
|
|
15
|
-
return {
|
|
16
|
-
accordionHeader
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
//# sourceMappingURL=useAccordionHeaderContextValues.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","useMemo"],"sources":["../../../src/components/AccordionHeader/useAccordionHeaderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n AccordionHeaderContextValue,\n AccordionHeaderState,\n AccordionHeaderContextValues,\n} from './AccordionHeader.types';\n\nexport function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues {\n const { disabled, expandIconPosition, open, size } = state;\n\n const accordionHeader = React.useMemo<AccordionHeaderContextValue>(\n () => ({\n disabled,\n expandIconPosition,\n open,\n size,\n }),\n [disabled, expandIconPosition, open, size],\n );\n\n return { accordionHeader };\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAOvB,OAAO,SAASC,yCAAyCC,KAA2B,EAAgC;EAClH,MAAM;IAAEC,QAAA;IAAUC,kBAAA;IAAoBC,IAAA;IAAMC;EAAI,CAAE,GAAGJ,KAAA;EAErD,MAAMK,eAAA,GAAkBP,KAAA,CAAMQ,OAAO,CACnC,OAAO;IACLL,QAAA;IACAC,kBAAA;IACAC,IAAA;IACAC;EACF,IACA,CAACH,QAAA,EAAUC,kBAAA,EAAoBC,IAAA,EAAMC,IAAA,CAAK;EAG5C,OAAO;IAAEC;EAAgB;AAC3B"}
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
|
2
|
-
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
3
|
-
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
4
|
-
export const accordionHeaderClassNames = {
|
|
5
|
-
root: 'fui-AccordionHeader',
|
|
6
|
-
button: 'fui-AccordionHeader__button',
|
|
7
|
-
expandIcon: 'fui-AccordionHeader__expandIcon',
|
|
8
|
-
icon: 'fui-AccordionHeader__icon'
|
|
9
|
-
};
|
|
10
|
-
const useStyles = /*#__PURE__*/__styles({
|
|
11
|
-
resetButton: {
|
|
12
|
-
B7ck84d: "f1e4lqlz",
|
|
13
|
-
De3pzq: "f1u2r49w",
|
|
14
|
-
sj55zd: "f1ym3bx4",
|
|
15
|
-
Bahqtrf: "f1mo0ibp",
|
|
16
|
-
Be2twd7: "fjoy568",
|
|
17
|
-
Bg96gwp: "fytdu2e",
|
|
18
|
-
B68tc82: "f1mtd64y",
|
|
19
|
-
Bmxbyg5: "f1y7q3j9",
|
|
20
|
-
z8tnut: "f1g0x7ka",
|
|
21
|
-
z189sj: ["fhxju0i", "f1cnd47f"],
|
|
22
|
-
Byoj8tv: "f1qch9an",
|
|
23
|
-
uwmqm3: ["f1cnd47f", "fhxju0i"],
|
|
24
|
-
Bv0vk6g: "f37px4s",
|
|
25
|
-
fsow6f: "fgusgyc"
|
|
26
|
-
},
|
|
27
|
-
focusIndicator: {
|
|
28
|
-
Brovlpu: "ftqa4ok",
|
|
29
|
-
B486eqv: "f2hkw1w",
|
|
30
|
-
B8q5s1w: "f8hki3x",
|
|
31
|
-
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
32
|
-
n8qw10: "f1bjia2o",
|
|
33
|
-
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
|
34
|
-
Bm4h7ae: "f15bsgw9",
|
|
35
|
-
B7ys5i9: "f14e48fq",
|
|
36
|
-
Busjfv9: "f18yb2kv",
|
|
37
|
-
Bhk32uz: "fd6o370",
|
|
38
|
-
Bf4ptjt: "fh1cnn4",
|
|
39
|
-
kclons: ["fy7oxxb", "f184ne2d"],
|
|
40
|
-
Bhdgwq3: "fpukqih",
|
|
41
|
-
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
|
42
|
-
Bqtpl0w: "frrh606",
|
|
43
|
-
clg4pj: ["f1v5zibi", "fo2hd23"],
|
|
44
|
-
hgwjuy: "ful5kiu",
|
|
45
|
-
Bonggc9: ["fo2hd23", "f1v5zibi"],
|
|
46
|
-
B1tsrr9: ["f1jqcqds", "ftffrms"],
|
|
47
|
-
Dah5zi: ["ftffrms", "f1jqcqds"],
|
|
48
|
-
Bkh64rk: ["f2e7qr6", "fsr1zz6"],
|
|
49
|
-
qqdqy8: ["fsr1zz6", "f2e7qr6"],
|
|
50
|
-
B6dhp37: "f1dvezut",
|
|
51
|
-
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
|
52
|
-
Boxcth7: "fjvm52t",
|
|
53
|
-
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
|
54
|
-
J0r882: "fdiulkx",
|
|
55
|
-
Bjwuhne: "f1yalx80",
|
|
56
|
-
Ghsupd: ["fq22d5a", "f1jw7pan"],
|
|
57
|
-
Bule8hv: ["f1jw7pan", "fq22d5a"]
|
|
58
|
-
},
|
|
59
|
-
root: {
|
|
60
|
-
sj55zd: "f19n0e5",
|
|
61
|
-
De3pzq: "f1c21dwh",
|
|
62
|
-
B6of3ja: "f1hu3pq6",
|
|
63
|
-
t21cq0: ["f11qmguv", "f1tyq0we"],
|
|
64
|
-
jrapky: "f19f4twv",
|
|
65
|
-
Frg6f3: ["f1tyq0we", "f11qmguv"],
|
|
66
|
-
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
67
|
-
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
68
|
-
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
69
|
-
Btl43ni: ["fyu767a", "f1jar5jt"]
|
|
70
|
-
},
|
|
71
|
-
rootDisabled: {
|
|
72
|
-
Bcmaq0h: "fwrgwhw",
|
|
73
|
-
sj55zd: "f1s2aq7o"
|
|
74
|
-
},
|
|
75
|
-
rootInline: {
|
|
76
|
-
mc9l5x: "f14t3ns0"
|
|
77
|
-
},
|
|
78
|
-
button: {
|
|
79
|
-
qhf8xq: "f10pi13n",
|
|
80
|
-
a9b677: "fly5x3f",
|
|
81
|
-
B4j52fo: "f5ogflp",
|
|
82
|
-
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
83
|
-
Bn0qgzm: "f1f09k3d",
|
|
84
|
-
ibv6hh: ["finvdd3", "f1hqa2wf"],
|
|
85
|
-
icvyot: "fzkkow9",
|
|
86
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
87
|
-
oivjwe: "fg706s2",
|
|
88
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
89
|
-
g2u3we: "f1p3nwhy",
|
|
90
|
-
h3c5rm: ["f11589ue", "f1pdflbu"],
|
|
91
|
-
B9xav0g: "f1q5o8ev",
|
|
92
|
-
zhjwy3: ["f1pdflbu", "f11589ue"],
|
|
93
|
-
z8tnut: "f1g0x7ka",
|
|
94
|
-
z189sj: ["fw5db7e", "f1uw59to"],
|
|
95
|
-
Byoj8tv: "f1qch9an",
|
|
96
|
-
uwmqm3: ["f1ng84yb", "f11gcy0p"],
|
|
97
|
-
sshi5w: "f5pgtk9",
|
|
98
|
-
mc9l5x: "f22iagw",
|
|
99
|
-
Bt984gj: "f122n59",
|
|
100
|
-
Bceei9c: "f1k6fduh",
|
|
101
|
-
Bahqtrf: "fk6fouc",
|
|
102
|
-
Be2twd7: "fkhj508",
|
|
103
|
-
Bhrd7zp: "figsok6",
|
|
104
|
-
Bg96gwp: "f1i3iumi",
|
|
105
|
-
B7ck84d: "f1ewtqcl"
|
|
106
|
-
},
|
|
107
|
-
buttonSmall: {
|
|
108
|
-
sshi5w: "f1nxs5xn",
|
|
109
|
-
Be2twd7: "fy9rknc"
|
|
110
|
-
},
|
|
111
|
-
buttonLarge: {
|
|
112
|
-
Bg96gwp: "faaz57k",
|
|
113
|
-
Be2twd7: "fod5ikn"
|
|
114
|
-
},
|
|
115
|
-
buttonExtraLarge: {
|
|
116
|
-
Bg96gwp: "f106mvju",
|
|
117
|
-
Be2twd7: "f1pp30po"
|
|
118
|
-
},
|
|
119
|
-
buttonInline: {
|
|
120
|
-
mc9l5x: "ftuwxu6"
|
|
121
|
-
},
|
|
122
|
-
buttonExpandIconEndNoIcon: {
|
|
123
|
-
uwmqm3: ["f1uw59to", "fw5db7e"]
|
|
124
|
-
},
|
|
125
|
-
buttonExpandIconEnd: {
|
|
126
|
-
z189sj: ["f11gcy0p", "f1ng84yb"]
|
|
127
|
-
},
|
|
128
|
-
expandIcon: {
|
|
129
|
-
Bqenvij: "f1l02sjl",
|
|
130
|
-
mc9l5x: "f22iagw",
|
|
131
|
-
Bt984gj: "f122n59",
|
|
132
|
-
Bg96gwp: "f106mvju",
|
|
133
|
-
Be2twd7: "f1pp30po"
|
|
134
|
-
},
|
|
135
|
-
expandIconStart: {
|
|
136
|
-
z189sj: ["f1vdfbxk", "f1f5gg8d"]
|
|
137
|
-
},
|
|
138
|
-
expandIconEnd: {
|
|
139
|
-
Bh6795r: "fqerorx",
|
|
140
|
-
Bnnss6s: "f1neuvcm",
|
|
141
|
-
xawz: "flqd7gy",
|
|
142
|
-
mc9l5x: "f22iagw",
|
|
143
|
-
Brf1p80: "f9c4gz4",
|
|
144
|
-
uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
|
|
145
|
-
},
|
|
146
|
-
icon: {
|
|
147
|
-
Bqenvij: "f1l02sjl",
|
|
148
|
-
mc9l5x: "f22iagw",
|
|
149
|
-
Bt984gj: "f122n59",
|
|
150
|
-
z189sj: ["f1vdfbxk", "f1f5gg8d"],
|
|
151
|
-
Bg96gwp: "f106mvju",
|
|
152
|
-
Be2twd7: "f1pp30po"
|
|
153
|
-
}
|
|
154
|
-
}, {
|
|
155
|
-
d: [".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f5pgtk9{min-height:44px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1nxs5xn{min-height:32px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1l02sjl{height:100%;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".flqd7gy{-webkit-flex-basis:0%;-ms-flex-preferred-size:0%;flex-basis:0%;}", ".f9c4gz4{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}"],
|
|
156
|
-
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
157
|
-
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
158
|
-
});
|
|
159
|
-
/** Applies style classnames to slots */
|
|
160
|
-
export const useAccordionHeaderStyles_unstable = state => {
|
|
161
|
-
const styles = useStyles();
|
|
162
|
-
state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
|
|
163
|
-
state.button.className = mergeClasses(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon, state.expandIconPosition === 'end' && styles.buttonExpandIconEnd, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, state.button.className);
|
|
164
|
-
if (state.expandIcon) {
|
|
165
|
-
state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);
|
|
166
|
-
}
|
|
167
|
-
if (state.icon) {
|
|
168
|
-
state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);
|
|
169
|
-
}
|
|
170
|
-
return state;
|
|
171
|
-
};
|
|
172
|
-
//# sourceMappingURL=useAccordionHeaderStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["shorthands","__styles","mergeClasses","createFocusOutlineStyle","tokens","typographyStyles","accordionHeaderClassNames","root","button","expandIcon","icon","useStyles","resetButton","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","z8tnut","z189sj","Byoj8tv","uwmqm3","Bv0vk6g","fsow6f","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","B6of3ja","t21cq0","jrapky","Frg6f3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rootDisabled","Bcmaq0h","rootInline","mc9l5x","qhf8xq","a9b677","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","sshi5w","Bt984gj","Bceei9c","Bhrd7zp","buttonSmall","buttonLarge","buttonExtraLarge","buttonInline","buttonExpandIconEndNoIcon","buttonExpandIconEnd","Bqenvij","expandIconStart","expandIconEnd","Bh6795r","Bnnss6s","xawz","Brf1p80","d","f","i","useAccordionHeaderStyles_unstable","state","styles","className","inline","disabled","expandIconPosition","size"],"sources":["../../../src/components/AccordionHeader/useAccordionHeaderStyles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon',\n};\n\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.margin(0),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n rootInline: {\n display: 'inline-block',\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.padding(0, tokens.spacingHorizontalM, 0, tokens.spacingHorizontalMNudge),\n minHeight: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box',\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: tokens.fontSizeBase200,\n },\n buttonLarge: {\n lineHeight: tokens.lineHeightBase400,\n fontSize: tokens.fontSizeBase400,\n },\n buttonExtraLarge: {\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n buttonInline: {\n display: 'inline-flex',\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: tokens.spacingHorizontalM,\n },\n buttonExpandIconEnd: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n expandIconStart: {\n paddingRight: tokens.spacingHorizontalS,\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: tokens.spacingHorizontalS,\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: tokens.spacingHorizontalS,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n accordionHeaderClassNames.root,\n styles.root,\n state.inline && styles.rootInline,\n state.disabled && styles.rootDisabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n accordionHeaderClassNames.button,\n styles.resetButton,\n styles.button,\n styles.focusIndicator,\n state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon,\n state.expandIconPosition === 'end' && styles.buttonExpandIconEnd,\n state.inline && styles.buttonInline,\n state.size === 'small' && styles.buttonSmall,\n state.size === 'large' && styles.buttonLarge,\n state.size === 'extra-large' && styles.buttonExtraLarge,\n state.button.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n accordionHeaderClassNames.expandIcon,\n styles.expandIcon,\n state.expandIconPosition === 'start' && styles.expandIconStart,\n state.expandIconPosition === 'end' && styles.expandIconEnd,\n state.expandIcon.className,\n );\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useAccordionItem_unstable } from './useAccordionItem';
|
|
3
|
-
import { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues';
|
|
4
|
-
import { renderAccordionItem_unstable } from './renderAccordionItem';
|
|
5
|
-
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
6
|
-
import { useAccordionItemStyles_unstable } from './useAccordionItemStyles';
|
|
7
|
-
/**
|
|
8
|
-
* Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
|
|
9
|
-
*/
|
|
10
|
-
export const AccordionItem = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
11
|
-
const state = useAccordionItem_unstable(props, ref);
|
|
12
|
-
const contextValues = useAccordionItemContextValues_unstable(state);
|
|
13
|
-
useAccordionItemStyles_unstable(state);
|
|
14
|
-
useCustomStyleHook_unstable('useAccordionItemStyles_unstable')(state);
|
|
15
|
-
return renderAccordionItem_unstable(state, contextValues);
|
|
16
|
-
});
|
|
17
|
-
AccordionItem.displayName = 'AccordionItem';
|
|
18
|
-
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useAccordionItem_unstable","useAccordionItemContextValues_unstable","renderAccordionItem_unstable","useCustomStyleHook_unstable","useAccordionItemStyles_unstable","AccordionItem","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAccordionItem_unstable } from './useAccordionItem';\nimport { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues';\nimport { renderAccordionItem_unstable } from './renderAccordionItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAccordionItemStyles_unstable } from './useAccordionItemStyles';\nimport type { AccordionItemProps } from './AccordionItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.\n */\nexport const AccordionItem: ForwardRefComponent<AccordionItemProps> = React.forwardRef((props, ref) => {\n const state = useAccordionItem_unstable(props, ref);\n const contextValues = useAccordionItemContextValues_unstable(state);\n\n useAccordionItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAccordionItemStyles_unstable')(state);\n\n return renderAccordionItem_unstable(state, contextValues);\n});\n\nAccordionItem.displayName = 'AccordionItem';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sCAAsC,QAAQ;AACvD,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,+BAA+B,QAAQ;AAIhD;;;AAGA,OAAO,MAAMC,aAAA,gBAAyDN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQT,yBAAA,CAA0BO,KAAA,EAAOC,GAAA;EAC/C,MAAME,aAAA,GAAgBT,sCAAA,CAAuCQ,KAAA;EAE7DL,+BAAA,CAAgCK,KAAA;EAEhCN,2BAAA,CAA4B,mCAAmCM,KAAA;EAE/D,OAAOP,4BAAA,CAA6BO,KAAA,EAAOC,aAAA;AAC7C;AAEAL,aAAA,CAAcM,WAAW,GAAG"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React"],"sources":["../../../src/components/AccordionItem/AccordionItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {\n onHeaderClick(ev: React.MouseEvent | React.KeyboardEvent): void;\n open: boolean;\n};\n\nexport type AccordionItemContextValues = {\n accordionItem: AccordionItemContextValue;\n};\n\nexport type AccordionItemSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionItemProps = ComponentProps<AccordionItemSlots> & {\n /**\n * Disables opening/closing of panel.\n */\n disabled?: boolean;\n /**\n * Required value that identifies this item inside an Accordion component.\n */\n value: AccordionItemValue;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export const AccordionItemContext = /*#__PURE__*/React.createContext(undefined);
|
|
3
|
-
const accordionItemContextDefaultValue = {
|
|
4
|
-
onHeaderClick() {
|
|
5
|
-
/** */},
|
|
6
|
-
open: false,
|
|
7
|
-
disabled: false
|
|
8
|
-
};
|
|
9
|
-
export const AccordionItemProvider = AccordionItemContext.Provider;
|
|
10
|
-
var _React_useContext;
|
|
11
|
-
export const useAccordionItemContext_unstable = () => (_React_useContext = React.useContext(AccordionItemContext)) !== null && _React_useContext !== void 0 ? _React_useContext : accordionItemContextDefaultValue;
|
|
12
|
-
//# sourceMappingURL=AccordionItemContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","onHeaderClick","open","disabled","AccordionItemProvider","Provider","_React_useContext","useAccordionItemContext_unstable","useContext"],"sources":["../../../src/components/AccordionItem/AccordionItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionItemContextValue } from './AccordionItem.types';\n\nexport const AccordionItemContext = React.createContext<AccordionItemContextValue | undefined>(\n undefined,\n) as React.Context<AccordionItemContextValue>;\n\nconst accordionItemContextDefaultValue: AccordionItemContextValue = {\n onHeaderClick() {\n /** */\n },\n open: false,\n disabled: false,\n};\n\nexport const AccordionItemProvider = AccordionItemContext.Provider;\n\nexport const useAccordionItemContext_unstable = () =>\n React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,OAAO,MAAMC,oBAAA,gBAAuBD,KAAA,CAAME,aAAa,CACrDC,SAAA;AAGF,MAAMC,gCAAA,GAA8D;EAClEC,cAAA,EAAgB;IACd,OACF;EACAC,IAAA,EAAM,KAAK;EACXC,QAAA,EAAU;AACZ;AAEA,OAAO,MAAMC,qBAAA,GAAwBP,oBAAA,CAAqBQ,QAAQ;IAGhEC,iBAAA;AADF,OAAO,MAAMC,gCAAA,GAAmCA,CAAA,KAC9C,CAAAD,iBAAA,GAAAV,KAAA,CAAMY,UAAU,CAACX,oBAAA,eAAjBS,iBAAA,cAAAA,iBAAA,GAA0CN,gCAAgC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export * from './AccordionItem';
|
|
2
|
-
export * from './AccordionItem.types';
|
|
3
|
-
export * from './renderAccordionItem';
|
|
4
|
-
export * from './useAccordionItem';
|
|
5
|
-
export * from './useAccordionItemContextValues';
|
|
6
|
-
export * from './AccordionItemContext';
|
|
7
|
-
export * from './useAccordionItemStyles';
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/AccordionItem/index.ts"],"sourcesContent":["export * from './AccordionItem';\nexport * from './AccordionItem.types';\nexport * from './renderAccordionItem';\nexport * from './useAccordionItem';\nexport * from './useAccordionItemContextValues';\nexport * from './AccordionItemContext';\nexport * from './useAccordionItemStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
-
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
|
-
import { AccordionItemContext } from './AccordionItemContext';
|
|
4
|
-
/**
|
|
5
|
-
* Function that renders the final JSX of the component
|
|
6
|
-
*/
|
|
7
|
-
export const renderAccordionItem_unstable = (state, contextValues) => {
|
|
8
|
-
const {
|
|
9
|
-
slots,
|
|
10
|
-
slotProps
|
|
11
|
-
} = getSlotsNext(state);
|
|
12
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(AccordionItemContext.Provider, {
|
|
13
|
-
value: contextValues.accordionItem
|
|
14
|
-
}, slotProps.root.children));
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=renderAccordionItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["createElement","getSlotsNext","AccordionItemContext","renderAccordionItem_unstable","state","contextValues","slots","slotProps","root","Provider","value","accordionItem","children"],"sources":["../../../src/components/AccordionItem/renderAccordionItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AccordionItemContext } from './AccordionItemContext';\nimport type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionItem_unstable = (state: AccordionItemState, contextValues: AccordionItemContextValues) => {\n const { slots, slotProps } = getSlotsNext<AccordionItemSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <AccordionItemContext.Provider value={contextValues.accordionItem}>\n {slotProps.root.children}\n </AccordionItemContext.Provider>\n </slots.root>\n );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,oBAAoB,QAAQ;AAGrC;;;AAGA,OAAO,MAAMC,4BAAA,GAA+BA,CAACC,KAAA,EAA2BC,aAAA,KAA8C;EACpH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAAiCG,KAAA;EAE9D,oBACEJ,aAfJ,CAeKM,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,eAC5BR,aAhBN,CAgBOE,oBAAA,CAAqBO,QAAQ;IAACC,KAAA,EAAOL,aAAA,CAAcM;KACjDJ,SAAA,CAAUC,IAAI,CAACI,QAAQ;AAIhC"}
|