Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1 @@
export { Accordion, accordionClassNames, renderAccordion_unstable, useAccordionContextValues_unstable, useAccordionStyles_unstable, useAccordion_unstable, useAccordionBase_unstable } from './components/Accordion/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Accordion.ts"],"sourcesContent":["export type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n AccordionBaseState,\n AccordionBaseProps,\n} from './components/Accordion/index';\nexport {\n Accordion,\n accordionClassNames,\n renderAccordion_unstable,\n useAccordionContextValues_unstable,\n useAccordionStyles_unstable,\n useAccordion_unstable,\n useAccordionBase_unstable,\n} from './components/Accordion/index';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","useAccordionBase_unstable"],"mappings":"AAYA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,EACrBC,yBAAyB,QACpB,+BAA+B"}

View File

@@ -0,0 +1 @@
export { AccordionHeader, accordionHeaderClassNames, renderAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './components/AccordionHeader/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AccordionHeader.ts"],"sourcesContent":["export type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n AccordionHeaderBaseState,\n AccordionHeaderBaseProps,\n} from './components/AccordionHeader/index';\nexport {\n AccordionHeader,\n accordionHeaderClassNames,\n renderAccordionHeader_unstable,\n useAccordionHeaderContextValues_unstable,\n useAccordionHeaderStyles_unstable,\n useAccordionHeader_unstable,\n useAccordionHeaderBase_unstable,\n} from './components/AccordionHeader/index';\n"],"names":["AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","useAccordionHeaderBase_unstable"],"mappings":"AAUA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,qCAAqC"}

View File

@@ -0,0 +1 @@
export { AccordionItem, accordionItemClassNames, renderAccordionItem_unstable, useAccordionItemContextValues_unstable, useAccordionItemStyles_unstable, useAccordionItem_unstable } from './components/AccordionItem/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AccordionItem.ts"],"sourcesContent":["export type {\n AccordionItemContextValues,\n AccordionItemProps,\n AccordionItemSlots,\n AccordionItemState,\n AccordionItemValue,\n} from './components/AccordionItem/index';\nexport {\n AccordionItem,\n accordionItemClassNames,\n renderAccordionItem_unstable,\n useAccordionItemContextValues_unstable,\n useAccordionItemStyles_unstable,\n useAccordionItem_unstable,\n} from './components/AccordionItem/index';\n"],"names":["AccordionItem","accordionItemClassNames","renderAccordionItem_unstable","useAccordionItemContextValues_unstable","useAccordionItemStyles_unstable","useAccordionItem_unstable"],"mappings":"AAOA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}

View File

@@ -0,0 +1 @@
export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable, useAccordionPanelStyles_unstable, useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './components/AccordionPanel/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AccordionPanel.ts"],"sourcesContent":["export type {\n AccordionPanelProps,\n AccordionPanelSlots,\n AccordionPanelState,\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n} from './components/AccordionPanel/index';\nexport {\n AccordionPanel,\n accordionPanelClassNames,\n renderAccordionPanel_unstable,\n useAccordionPanelStyles_unstable,\n useAccordionPanel_unstable,\n useAccordionPanelBase_unstable,\n} from './components/AccordionPanel/index';\n"],"names":["AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","useAccordionPanelBase_unstable"],"mappings":"AAOA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,oCAAoC"}

View File

@@ -0,0 +1,17 @@
'use client';
import * as React from 'react';
import { renderAccordion_unstable } from './renderAccordion';
import { useAccordion_unstable } from './useAccordion';
import { useAccordionContextValues_unstable } from './useAccordionContextValues';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useAccordionStyles_unstable } from './useAccordionStyles.styles';
/**
* Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
*/ export const Accordion = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useAccordion_unstable(props, ref);
const contextValues = useAccordionContextValues_unstable(state);
useAccordionStyles_unstable(state);
useCustomStyleHook_unstable('useAccordionStyles_unstable')(state);
return renderAccordion_unstable(state, contextValues);
});
Accordion.displayName = 'Accordion';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAccordion_unstable } from './renderAccordion';\nimport { useAccordion_unstable } from './useAccordion';\nimport { useAccordionContextValues_unstable } from './useAccordionContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAccordionStyles_unstable } from './useAccordionStyles.styles';\nimport type { AccordionProps } from './Accordion.types';\nimport type { ForwardRefComponent, JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.\n */\nexport const Accordion: ForwardRefComponent<AccordionProps> & (<TItem>(props: AccordionProps<TItem>) => JSXElement) =\n React.forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {\n const state = useAccordion_unstable(props, ref);\n const contextValues = useAccordionContextValues_unstable(state);\n\n useAccordionStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAccordionStyles_unstable')(state);\n\n return renderAccordion_unstable(state, contextValues);\n }) as ForwardRefComponent<AccordionProps> & (<TItem>(props: AccordionProps<TItem>) => JSXElement);\n\nAccordion.displayName = 'Accordion';\n"],"names":["React","renderAccordion_unstable","useAccordion_unstable","useAccordionContextValues_unstable","useCustomStyleHook_unstable","useAccordionStyles_unstable","Accordion","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,2BAA2B,QAAQ,8BAA8B;AAI1E;;CAEC,GACD,OAAO,MAAMC,0BACXN,MAAMO,UAAU,CAAiC,CAACC,OAAOC;IACvD,MAAMC,QAAQR,sBAAsBM,OAAOC;IAC3C,MAAME,gBAAgBR,mCAAmCO;IAEzDL,4BAA4BK;IAE5BN,4BAA4B,+BAA+BM;IAE3D,OAAOT,yBAAyBS,OAAOC;AACzC,GAAkG;AAEpGL,UAAUM,WAAW,GAAG"}

View File

@@ -0,0 +1 @@
import * as React from 'react';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Accordion/Accordion.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler<Value = AccordionItemValue> = (\n event: AccordionToggleEvent,\n data: AccordionToggleData<Value>,\n) => void;\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionToggleData<Value = AccordionItemValue> = {\n value: Value;\n openItems: Value[];\n};\n\nexport type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {\n /**\n * Default value for the uncontrolled state of the panel.\n */\n defaultOpenItems?: Value | Value[];\n\n /**\n * Indicates if Accordion support multiple Panels closed at the same time.\n */\n collapsible?: boolean;\n\n /**\n * Indicates if Accordion support multiple Panels opened at the same time.\n */\n multiple?: boolean;\n\n /**\n * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.\n * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.\n */\n navigation?: 'linear' | 'circular';\n\n /**\n * Callback to be called when the opened items change.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onToggle?: AccordionToggleEventHandler<Value>;\n\n /**\n * Controls the state of the panel.\n */\n openItems?: Value | Value[];\n};\n\nexport type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;\n\nexport type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n\nexport type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,5 @@
export { Accordion } from './Accordion';
export { renderAccordion_unstable } from './renderAccordion';
export { useAccordion_unstable, useAccordionBase_unstable } from './useAccordion';
export { accordionClassNames, useAccordionStyles_unstable } from './useAccordionStyles.styles';
export { useAccordionContextValues_unstable } from './useAccordionContextValues';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Accordion/index.ts"],"sourcesContent":["export { Accordion } from './Accordion';\nexport type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n AccordionBaseState,\n AccordionBaseProps,\n} from './Accordion.types';\nexport { renderAccordion_unstable } from './renderAccordion';\nexport { useAccordion_unstable, useAccordionBase_unstable } from './useAccordion';\nexport { accordionClassNames, useAccordionStyles_unstable } from './useAccordionStyles.styles';\nexport { useAccordionContextValues_unstable } from './useAccordionContextValues';\n"],"names":["Accordion","renderAccordion_unstable","useAccordion_unstable","useAccordionBase_unstable","accordionClassNames","useAccordionStyles_unstable","useAccordionContextValues_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAaxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,iBAAiB;AAClF,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B;AAC/F,SAASC,kCAAkC,QAAQ,8BAA8B"}

View File

@@ -0,0 +1,14 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { AccordionProvider } from '../../contexts/accordion';
/**
* Function that renders the final JSX of the component
*/ export const renderAccordion_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {
children: /*#__PURE__*/ _jsx(AccordionProvider, {
value: contextValues.accordion,
children: state.root.children
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Accordion/renderAccordion.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AccordionBaseState, AccordionSlots, AccordionContextValues } from './Accordion.types';\nimport { AccordionProvider } from '../../contexts/accordion';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordion_unstable = (\n state: AccordionBaseState,\n contextValues: AccordionContextValues,\n): JSXElement => {\n assertSlots<AccordionSlots>(state);\n\n return (\n <state.root>\n <AccordionProvider value={contextValues.accordion}>{state.root.children}</AccordionProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","AccordionProvider","renderAccordion_unstable","state","contextValues","root","value","accordion","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,SAASC,iBAAiB,QAAQ,2BAA2B;AAE7D;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEAJ,YAA4BG;IAE5B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAkBK,OAAOF,cAAcG,SAAS;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAG7E,EAAE"}

View File

@@ -0,0 +1,115 @@
'use client';
import * as React from 'react';
import { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
/**
* Returns the props and state required to render the component
* @param props - Accordion properties
* @param ref - reference to root HTMLElement of Accordion
*/ export const useAccordion_unstable = (props, ref)=>{
const { // eslint-disable-next-line @typescript-eslint/no-deprecated
navigation, ...baseProps } = props;
const state = useAccordionBase_unstable(baseProps, ref);
/** FIXME: deprecated will be removed after navigation prop is removed */ const arrowNavigationProps = useArrowNavigationGroup({
circular: navigation === 'circular',
tabbable: true
});
return {
navigation,
...state,
root: {
...state.root,
...navigation ? arrowNavigationProps : undefined
}
};
};
/**
* Returns the props and state required to render the component
* @param props - Accordion properties
* @param ref - reference to root HTMLElement of Accordion
*/ export const useAccordionBase_unstable = (props, ref)=>{
const { openItems: controlledOpenItems, defaultOpenItems, multiple = false, collapsible = false, onToggle, ...rest } = props;
const [openItems, setOpenItems] = useControllableState({
state: React.useMemo(()=>normalizeValues(controlledOpenItems), [
controlledOpenItems
]),
defaultState: defaultOpenItems && (()=>initializeUncontrolledOpenItems({
defaultOpenItems,
multiple
})),
initialState: []
});
const requestToggle = useEventCallback((data)=>{
const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);
onToggle === null || onToggle === void 0 ? void 0 : onToggle(data.event, {
value: data.value,
openItems: nextOpenItems
});
setOpenItems(nextOpenItems);
});
return {
collapsible,
multiple,
openItems,
requestToggle,
components: {
root: 'div'
},
root: slot.always({
ref: ref,
...rest
}, {
elementType: 'div'
})
};
};
/**
* Initial value for the uncontrolled case of the list of open indexes
*/ function initializeUncontrolledOpenItems({ defaultOpenItems, multiple }) {
if (defaultOpenItems !== undefined) {
if (Array.isArray(defaultOpenItems)) {
return multiple ? defaultOpenItems : [
defaultOpenItems[0]
];
}
return [
defaultOpenItems
];
}
return [];
}
/**
* Updates the list of open indexes based on an index that changes
* @param value - the index that will change
* @param previousOpenItems - list of current open indexes
* @param multiple - if Accordion support multiple Panels opened at the same time
* @param collapsible - if Accordion support multiple Panels closed at the same time
*/ function updateOpenItems(value, previousOpenItems, multiple, collapsible) {
if (multiple) {
if (previousOpenItems.includes(value)) {
if (previousOpenItems.length > 1 || collapsible) {
return previousOpenItems.filter((i)=>i !== value);
}
} else {
return [
...previousOpenItems,
value
].sort();
}
} else {
return previousOpenItems[0] === value && collapsible ? [] : [
value
];
}
return previousOpenItems;
}
/**
* Normalizes Accordion index into an array of indexes
*/ function normalizeValues(index) {
if (index === undefined) {
return undefined;
}
return Array.isArray(index) ? index : [
index
];
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,14 @@
export function useAccordionContextValues_unstable(state) {
const { navigation, openItems, requestToggle, multiple, collapsible } = state;
// This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
const accordion = {
navigation,
openItems,
requestToggle,
collapsible,
multiple
};
return {
accordion
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Accordion/useAccordionContextValues.ts"],"sourcesContent":["import type { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionContextValues, AccordionState } from './Accordion.types';\n\nexport function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues {\n const { navigation, openItems, requestToggle, multiple, 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 multiple,\n };\n\n return { accordion };\n}\n"],"names":["useAccordionContextValues_unstable","state","navigation","openItems","requestToggle","multiple","collapsible","accordion"],"mappings":"AAGA,OAAO,SAASA,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGL;IAExE,mGAAmG;IACnG,MAAMM,YAAmC;QACvCL;QACAC;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAU;AACrB"}

View File

@@ -0,0 +1,10 @@
import { mergeClasses } from '@griffel/react';
export const accordionClassNames = {
root: 'fui-Accordion'
};
export const useAccordionStyles_unstable = state => {
'use no memo';
state.root.className = mergeClasses(accordionClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["mergeClasses","accordionClassNames","root","useAccordionStyles_unstable","state","className"],"sources":["useAccordionStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const accordionClassNames = {\n root: 'fui-Accordion'\n};\nexport const useAccordionStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(accordionClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE;AACV,CAAC;AACD,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,mBAAmB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACnF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,9 @@
import { mergeClasses } from '@griffel/react';
export const accordionClassNames = {
root: 'fui-Accordion'
};
export const useAccordionStyles_unstable = (state)=>{
'use no memo';
state.root.className = mergeClasses(accordionClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Accordion/useAccordionStyles.styles.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): AccordionState => {\n 'use no memo';\n\n state.root.className = mergeClasses(accordionClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","accordionClassNames","root","useAccordionStyles_unstable","state","className"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAElF,OAAOD;AACT,EAAE"}

View File

@@ -0,0 +1,18 @@
'use client';
import * as React from 'react';
import { useAccordionHeader_unstable } from './useAccordionHeader';
import { renderAccordionHeader_unstable } from './renderAccordionHeader';
import { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';
/**
* Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
* hooks.
*/ export const AccordionHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useAccordionHeader_unstable(props, ref);
const contextValues = useAccordionHeaderContextValues_unstable(state);
useAccordionHeaderStyles_unstable(state);
useCustomStyleHook_unstable('useAccordionHeaderStyles_unstable')(state);
return renderAccordionHeader_unstable(state, contextValues);
});
AccordionHeader.displayName = 'AccordionHeader';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionHeader/AccordionHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAccordionHeader_unstable } from './useAccordionHeader';\nimport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nimport { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';\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"],"names":["React","useAccordionHeader_unstable","renderAccordionHeader_unstable","useAccordionHeaderStyles_unstable","useCustomStyleHook_unstable","useAccordionHeaderContextValues_unstable","AccordionHeader","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AACtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,wCAAwC,QAAQ,oCAAoC;AAI7F;;;CAGC,GACD,OAAO,MAAMC,gCAA6DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQT,4BAA4BO,OAAOC;IACjD,MAAME,gBAAgBN,yCAAyCK;IAE/DP,kCAAkCO;IAElCN,4BAA4B,qCAAqCM;IAEjE,OAAOR,+BAA+BQ,OAAOC;AAC/C,GAAG;AAEHL,gBAAgBM,WAAW,GAAG"}

View File

@@ -0,0 +1 @@
export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionHeader/AccordionHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { AccordionHeaderContextValue } from '../../contexts/accordionHeader';\n\nexport type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';\nexport type AccordionHeaderExpandIconPosition = 'start' | 'end';\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: NonNullable<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 AccordionHeaderBaseProps = Omit<AccordionHeaderProps, 'inline' | 'size'>;\n\nexport type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &\n Required<Pick<AccordionHeaderProps, 'inline'>> &\n AccordionHeaderContextValue;\n\nexport type AccordionHeaderBaseState = Omit<AccordionHeaderState, 'inline' | 'size'>;\n"],"names":[],"mappings":"AAqDA,WAAqF"}

View File

@@ -0,0 +1,5 @@
export { AccordionHeader } from './AccordionHeader';
export { renderAccordionHeader_unstable } from './renderAccordionHeader';
export { useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './useAccordionHeader';
export { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';
export { accordionHeaderClassNames, useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionHeader/index.ts"],"sourcesContent":["export { AccordionHeader } from './AccordionHeader';\nexport type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n AccordionHeaderBaseState,\n AccordionHeaderBaseProps,\n} from './AccordionHeader.types';\nexport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nexport { useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './useAccordionHeader';\nexport { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';\nexport { accordionHeaderClassNames, useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';\n"],"names":["AccordionHeader","renderAccordionHeader_unstable","useAccordionHeader_unstable","useAccordionHeaderBase_unstable","useAccordionHeaderContextValues_unstable","accordionHeaderClassNames","useAccordionHeaderStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAWpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,EAAEC,+BAA+B,QAAQ,uBAAuB;AACpG,SAASC,wCAAwC,QAAQ,oCAAoC;AAC7F,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}

View File

@@ -0,0 +1,21 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { AccordionHeaderProvider } from '../../contexts/accordionHeader';
/**
* Function that renders the final JSX of the component
*/ export const renderAccordionHeader_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(AccordionHeaderProvider, {
value: contextValues.accordionHeader,
children: /*#__PURE__*/ _jsx(state.root, {
children: /*#__PURE__*/ _jsxs(state.button, {
children: [
state.expandIconPosition === 'start' && state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
state.root.children,
state.expandIconPosition === 'end' && state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
]
})
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionHeader/renderAccordionHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n AccordionHeaderBaseState,\n AccordionHeaderSlots,\n AccordionHeaderContextValues,\n} from './AccordionHeader.types';\nimport { AccordionHeaderProvider } from '../../contexts/accordionHeader';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionHeader_unstable = (\n state: AccordionHeaderBaseState,\n contextValues: AccordionHeaderContextValues,\n): JSXElement => {\n assertSlots<AccordionHeaderSlots>(state);\n\n return (\n <AccordionHeaderProvider value={contextValues.accordionHeader}>\n <state.root>\n <state.button>\n {state.expandIconPosition === 'start' && state.expandIcon && <state.expandIcon />}\n {state.icon && <state.icon />}\n {state.root.children}\n {state.expandIconPosition === 'end' && state.expandIcon && <state.expandIcon />}\n </state.button>\n </state.root>\n </AccordionHeaderProvider>\n );\n};\n"],"names":["assertSlots","AccordionHeaderProvider","renderAccordionHeader_unstable","state","contextValues","value","accordionHeader","root","button","expandIconPosition","expandIcon","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEAJ,YAAkCG;IAElC,qBACE,KAACF;QAAwBI,OAAOD,cAAcE,eAAe;kBAC3D,cAAA,KAACH,MAAMI,IAAI;sBACT,cAAA,MAACJ,MAAMK,MAAM;;oBACVL,MAAMM,kBAAkB,KAAK,WAAWN,MAAMO,UAAU,kBAAI,KAACP,MAAMO,UAAU;oBAC7EP,MAAMQ,IAAI,kBAAI,KAACR,MAAMQ,IAAI;oBACzBR,MAAMI,IAAI,CAACK,QAAQ;oBACnBT,MAAMM,kBAAkB,KAAK,SAASN,MAAMO,UAAU,kBAAI,KAACP,MAAMO,UAAU;;;;;AAKtF,EAAE"}

View File

@@ -0,0 +1,106 @@
'use client';
import * as React from 'react';
import { useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';
import { useARIAButtonProps } from '@fluentui/react-aria';
import { useAccordionContext_unstable } from '../../contexts/accordion';
import { ChevronRightRegular } from '@fluentui/react-icons';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
import { motionTokens } from '@fluentui/react-motion';
/**
* Returns the props and state required to render the component
*
* @param props - AccordionHeader properties
* @param ref - reference to root HTMLElement of AccordionHeader
*/ export const useAccordionHeader_unstable = (props, ref)=>{
const { inline = false, size = 'medium', ...baseProps } = props;
const state = useAccordionHeaderBase_unstable(baseProps, ref);
const { dir } = useFluent();
// Calculate how to rotate the expand icon [>] (ChevronRightRegular)
let expandIconRotation;
if (state.expandIconPosition === 'end') {
// If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed
expandIconRotation = state.open ? -90 : 90;
} else {
// Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed
expandIconRotation = state.open ? 90 : dir !== 'rtl' ? 0 : 180;
}
if (state.expandIcon) {
var _state_expandIcon;
var _children;
(_children = (_state_expandIcon = state.expandIcon).children) !== null && _children !== void 0 ? _children : _state_expandIcon.children = /*#__PURE__*/ React.createElement(ChevronRightRegular, {
style: {
transform: `rotate(${expandIconRotation}deg)`,
transition: `transform ${motionTokens.durationNormal}ms ease-out`
}
});
}
return {
...state,
inline,
size
};
};
/**
* Base state hook for AccordionHeader, without design related features.
*
* @param props - AccordionHeader properties
* @param ref - reference to root HTMLElement of AccordionHeader
*/ export const useAccordionHeaderBase_unstable = (props, ref)=>{
const { icon, button, expandIcon, expandIconPosition = 'start', ...rest } = props;
const { value, disabled, open } = useAccordionItemContext_unstable();
const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
/**
* force disabled state on button if accordion isn't collapsible
* and this is the only item opened
*/ const disabledFocusable = useAccordionContext_unstable((ctx)=>!ctx.collapsible && ctx.openItems.length === 1 && open);
const buttonSlot = slot.always(button, {
elementType: 'button',
defaultProps: {
disabled,
disabledFocusable,
'aria-expanded': open,
type: 'button'
}
});
buttonSlot.onClick = useEventCallback((event)=>{
if (isResolvedShorthand(button)) {
var _button_onClick;
(_button_onClick = button.onClick) === null || _button_onClick === void 0 ? void 0 : _button_onClick.call(button, event);
}
if (!event.defaultPrevented) {
requestToggle({
value,
event
});
}
});
return {
disabled,
open,
expandIconPosition,
components: {
root: 'div',
button: 'button',
expandIcon: 'span',
icon: 'div'
},
root: slot.always({
ref: ref,
...rest
}, {
elementType: 'div'
}),
icon: slot.optional(icon, {
elementType: 'div'
}),
expandIcon: slot.optional(expandIcon, {
renderByDefault: true,
defaultProps: {
'aria-hidden': true
},
elementType: 'span'
}),
button: useARIAButtonProps(buttonSlot.as, buttonSlot)
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,19 @@
'use client';
import * as React from 'react';
export function useAccordionHeaderContextValues_unstable(state) {
const { disabled, expandIconPosition, open, size } = state;
const accordionHeader = React.useMemo(()=>({
disabled,
expandIconPosition,
open,
size
}), [
disabled,
expandIconPosition,
open,
size
]);
return {
accordionHeader
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionHeader/useAccordionHeaderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionHeaderState, AccordionHeaderContextValues } from './AccordionHeader.types';\nimport type { AccordionHeaderContextValue } from '../../contexts/accordionHeader';\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"],"names":["React","useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yCAAyCC,KAA2B;IAClF,MAAM,EAAEC,QAAQ,EAAEC,kBAAkB,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGJ;IAErD,MAAMK,kBAAkBP,MAAMQ,OAAO,CACnC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAUC;QAAoBC;QAAMC;KAAK;IAG5C,OAAO;QAAEC;IAAgB;AAC3B"}

View File

@@ -0,0 +1,208 @@
'use client';
import { shorthands, __styles, mergeClasses } from '@griffel/react';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const accordionHeaderClassNames = {
root: 'fui-AccordionHeader',
button: 'fui-AccordionHeader__button',
expandIcon: 'fui-AccordionHeader__expandIcon',
icon: 'fui-AccordionHeader__icon'
};
const useStyles = /*#__PURE__*/__styles({
resetButton: {
B7ck84d: "f1e4lqlz",
De3pzq: "f1u2r49w",
sj55zd: "f1ym3bx4",
Bahqtrf: "f1mo0ibp",
Be2twd7: "fjoy568",
Bg96gwp: "fytdu2e",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1gl81tg",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai",
Bv0vk6g: "f37px4s",
fsow6f: "fgusgyc"
},
focusIndicator: {
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
B8q5s1w: "f8hki3x",
Bci5o5g: ["f1d2448m", "ffh67wi"],
n8qw10: "f1bjia2o",
Bdrgwmp: ["ffh67wi", "f1d2448m"],
Bqhya38: "f1j6vpng",
Bwxa6fj: ["f1pniga2", "f1ffjurs"],
Bdhvstf: "f987i1v",
B7zbvrb: ["f1ffjurs", "f1pniga2"],
Bm4h7ae: "f15bsgw9",
B7ys5i9: "f14e48fq",
Busjfv9: "f18yb2kv",
Bhk32uz: "fd6o370",
f6g5ot: 0,
Boxcth7: 0,
Bhdgwq3: 0,
hgwjuy: 0,
Bshpdp8: 0,
Bsom6fd: 0,
Blkhhs4: 0,
Bonggc9: 0,
Ddfuxk: 0,
i03rao: 0,
kclons: 0,
clg4pj: 0,
Bpqj9nj: 0,
B6dhp37: 0,
Bf4ptjt: 0,
Bqtpl0w: 0,
i4rwgc: "ffwy5si",
Dah5zi: 0,
B1tsrr9: 0,
qqdqy8: 0,
Bkh64rk: 0,
e3fwne: "f3znvyf",
J0r882: "f57olzd",
Bule8hv: ["f4stah7", "fs1por5"],
Bjwuhne: "f480a47",
Ghsupd: ["fs1por5", "f4stah7"]
},
root: {
sj55zd: "f19n0e5",
De3pzq: "f1c21dwh",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1s184ao",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5"
},
rootDisabled: {
Bcmaq0h: "fwrgwhw",
sj55zd: "f1s2aq7o"
},
rootInline: {
mc9l5x: "f14t3ns0"
},
button: {
qhf8xq: "f10pi13n",
a9b677: "fly5x3f",
B4j52fo: "fre7gi1",
Bekrc4i: ["f1358rze", "f1rvrf73"],
Bn0qgzm: "fqdk4by",
ibv6hh: ["f1rvrf73", "f1358rze"],
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: ["f1rmphuq", "f26yw9j"],
sshi5w: "f5pgtk9",
mc9l5x: "f22iagw",
Bt984gj: "f122n59",
Bceei9c: "f1k6fduh",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi",
B7ck84d: "f1ewtqcl"
},
buttonSmall: {
sshi5w: "f1nxs5xn",
Be2twd7: "fy9rknc"
},
buttonLarge: {
Bg96gwp: "faaz57k",
Be2twd7: "fod5ikn"
},
buttonExtraLarge: {
Bg96gwp: "f106mvju",
Be2twd7: "f1pp30po"
},
buttonInline: {
mc9l5x: "ftuwxu6"
},
buttonExpandIconEndNoIcon: {
uwmqm3: ["f1uw59to", "fw5db7e"]
},
buttonExpandIconEnd: {
z189sj: ["f11gcy0p", "f1ng84yb"]
},
buttonDisabled: {
Bceei9c: "fdrzuqr"
},
expandIcon: {
Bqenvij: "f1l02sjl",
mc9l5x: "f22iagw",
Bt984gj: "f122n59",
Bg96gwp: "f106mvju",
Be2twd7: "f1pp30po"
},
expandIconStart: {
z189sj: ["f1vdfbxk", "f1f5gg8d"]
},
expandIconEnd: {
Bh6795r: "fqerorx",
Bnnss6s: "f1neuvcm",
xawz: "flqd7gy",
mc9l5x: "f22iagw",
Brf1p80: "f9c4gz4",
uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
},
icon: {
Bqenvij: "f1l02sjl",
mc9l5x: "f22iagw",
Bt984gj: "f122n59",
z189sj: ["f1vdfbxk", "f1f5gg8d"],
Bg96gwp: "f106mvju",
Be2twd7: "f1pp30po"
}
}, {
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;}", [".f1gl81tg{overflow:visible;}", {
p: -1
}], [".f1mk8lai{padding:0;}", {
p: -1
}], ".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;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
p: -2
}], [".f3znvyf[data-fui-focus-visible]::after{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".f1s184ao{margin:0;}", {
p: -1
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", [".f1rmphuq{padding:0 var(--spacingHorizontalM) 0 var(--spacingHorizontalMNudge);}", {
p: -1
}], [".f26yw9j{padding:0 var(--spacingHorizontalMNudge) 0 var(--spacingHorizontalM);}", {
p: -1
}], ".f5pgtk9{min-height:44px;}", ".f22iagw{display:flex;}", ".f122n59{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:inline-flex;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdrzuqr{cursor:not-allowed;}", ".f1l02sjl{height:100%;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fqerorx{flex-grow:1;}", ".f1neuvcm{flex-shrink:1;}", ".flqd7gy{flex-basis:0%;}", ".f9c4gz4{justify-content:flex-end;}"],
f: [".ftqa4ok:focus{outline-style:none;}"],
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
m: [["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ffjurs[data-fui-focus-visible]::after{border-left-color:Highlight;}.f1pniga2[data-fui-focus-visible]::after{border-right-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}]]
});
/** Applies style classnames to slots */
export const useAccordionHeaderStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
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.disabled && styles.buttonDisabled, state.button.className);
if (state.expandIcon) {
state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);
}
if (state.icon) {
state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,114 @@
'use client';
import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const accordionHeaderClassNames = {
root: 'fui-AccordionHeader',
button: 'fui-AccordionHeader__button',
expandIcon: 'fui-AccordionHeader__expandIcon',
icon: 'fui-AccordionHeader__icon'
};
const useStyles = makeStyles({
// TODO: this should be extracted to another package
resetButton: {
boxSizing: 'content-box',
backgroundColor: 'inherit',
color: 'inherit',
fontFamily: 'inherit',
fontSize: 'inherit',
lineHeight: 'normal',
overflow: 'visible',
padding: '0',
WebkitAppearance: 'button',
textAlign: 'unset'
},
focusIndicator: createFocusOutlineStyle(),
root: {
color: tokens.colorNeutralForeground1,
backgroundColor: tokens.colorTransparentBackground,
margin: '0',
borderRadius: tokens.borderRadiusMedium
},
rootDisabled: {
backgroundImage: 'none',
color: tokens.colorNeutralForegroundDisabled
},
rootInline: {
display: 'inline-block'
},
button: {
position: 'relative',
width: '100%',
...shorthands.borderWidth('0'),
padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,
minHeight: '44px',
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
...typographyStyles.body1,
boxSizing: 'border-box'
},
buttonSmall: {
minHeight: '32px',
fontSize: tokens.fontSizeBase200
},
buttonLarge: {
lineHeight: tokens.lineHeightBase400,
fontSize: tokens.fontSizeBase400
},
buttonExtraLarge: {
lineHeight: tokens.lineHeightBase500,
fontSize: tokens.fontSizeBase500
},
buttonInline: {
display: 'inline-flex'
},
buttonExpandIconEndNoIcon: {
paddingLeft: tokens.spacingHorizontalM
},
buttonExpandIconEnd: {
paddingRight: tokens.spacingHorizontalMNudge
},
buttonDisabled: {
cursor: 'not-allowed'
},
expandIcon: {
height: '100%',
display: 'flex',
alignItems: 'center',
lineHeight: tokens.lineHeightBase500,
fontSize: tokens.fontSizeBase500
},
expandIconStart: {
paddingRight: tokens.spacingHorizontalS
},
expandIconEnd: {
flexGrow: 1,
flexShrink: 1,
flexBasis: '0%',
display: 'flex',
justifyContent: 'flex-end',
paddingLeft: tokens.spacingHorizontalS
},
icon: {
height: '100%',
display: 'flex',
alignItems: 'center',
paddingRight: tokens.spacingHorizontalS,
lineHeight: tokens.lineHeightBase500,
fontSize: tokens.fontSizeBase500
}
});
/** Applies style classnames to slots */ export const useAccordionHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
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.disabled && styles.buttonDisabled, state.button.className);
if (state.expandIcon) {
state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);
}
if (state.icon) {
state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,17 @@
'use client';
import * as React from 'react';
import { useAccordionItem_unstable } from './useAccordionItem';
import { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues';
import { renderAccordionItem_unstable } from './renderAccordionItem';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useAccordionItemStyles_unstable } from './useAccordionItemStyles.styles';
/**
* Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
*/ export const AccordionItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useAccordionItem_unstable(props, ref);
const contextValues = useAccordionItemContextValues_unstable(state);
useAccordionItemStyles_unstable(state);
useCustomStyleHook_unstable('useAccordionItemStyles_unstable')(state);
return renderAccordionItem_unstable(state, contextValues);
});
AccordionItem.displayName = 'AccordionItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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.styles';\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"],"names":["React","useAccordionItem_unstable","useAccordionItemContextValues_unstable","renderAccordionItem_unstable","useCustomStyleHook_unstable","useAccordionItemStyles_unstable","AccordionItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,+BAA+B,QAAQ,kCAAkC;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQT,0BAA0BO,OAAOC;IAC/C,MAAME,gBAAgBT,uCAAuCQ;IAE7DL,gCAAgCK;IAEhCN,4BAA4B,mCAAmCM;IAE/D,OAAOP,6BAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

View File

@@ -0,0 +1 @@
export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionItem/AccordionItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport type AccordionItemContextValues<Value = AccordionItemValue> = {\n accordionItem: AccordionItemContextValue<Value>;\n};\n\nexport type AccordionItemSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionItemProps<Value = AccordionItemValue> = 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: Value;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> &\n AccordionItemContextValue<Value>;\n"],"names":[],"mappings":"AAwBA,WACmC"}

View File

@@ -0,0 +1,5 @@
export { AccordionItem } from './AccordionItem';
export { renderAccordionItem_unstable } from './renderAccordionItem';
export { useAccordionItem_unstable } from './useAccordionItem';
export { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues';
export { accordionItemClassNames, useAccordionItemStyles_unstable } from './useAccordionItemStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionItem/index.ts"],"sourcesContent":["export { AccordionItem } from './AccordionItem';\nexport type {\n AccordionItemContextValues,\n AccordionItemProps,\n AccordionItemSlots,\n AccordionItemState,\n AccordionItemValue,\n} from './AccordionItem.types';\nexport { renderAccordionItem_unstable } from './renderAccordionItem';\nexport { useAccordionItem_unstable } from './useAccordionItem';\nexport { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues';\nexport { accordionItemClassNames, useAccordionItemStyles_unstable } from './useAccordionItemStyles.styles';\n"],"names":["AccordionItem","renderAccordionItem_unstable","useAccordionItem_unstable","useAccordionItemContextValues_unstable","accordionItemClassNames","useAccordionItemStyles_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAQhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}

View File

@@ -0,0 +1,14 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { AccordionItemProvider } from '../../contexts/accordionItem';
/**
* Function that renders the final JSX of the component
*/ export const renderAccordionItem_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {
children: /*#__PURE__*/ _jsx(AccordionItemProvider, {
value: contextValues.accordionItem,
children: state.root.children
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionItem/renderAccordionItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types';\nimport { AccordionItemProvider } from '../../contexts/accordionItem';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionItem_unstable = (\n state: AccordionItemState,\n contextValues: AccordionItemContextValues,\n): JSXElement => {\n assertSlots<AccordionItemSlots>(state);\n\n return (\n <state.root>\n <AccordionItemProvider value={contextValues.accordionItem}>{state.root.children}</AccordionItemProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","AccordionItemProvider","renderAccordionItem_unstable","state","contextValues","root","value","accordionItem","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,SAASC,qBAAqB,QAAQ,+BAA+B;AAErE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAsBK,OAAOF,cAAcG,aAAa;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGrF,EAAE"}

View File

@@ -0,0 +1,33 @@
'use client';
import * as React from 'react';
import { slot, useEventCallback } from '@fluentui/react-utilities';
import { useAccordionContext_unstable } from '../../contexts/accordion';
/**
* Returns the props and state required to render the component
* @param props - AccordionItem properties
* @param ref - reference to root HTMLElement of AccordionItem
*/ export const useAccordionItem_unstable = (props, ref)=>{
const { value, disabled = false, ...rest } = props;
const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
const open = useAccordionContext_unstable((ctx)=>ctx.openItems.includes(value));
const onAccordionHeaderClick = useEventCallback((event)=>requestToggle({
event,
value
}));
return {
open,
value,
disabled,
onHeaderClick: onAccordionHeaderClick,
components: {
root: 'div'
},
root: slot.always({
disabled,
ref: ref,
...rest
}, {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\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, ...rest } = props;\n\n const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value }));\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n disabled,\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","slot","useEventCallback","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","rest","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","event","onHeaderClick","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGnE,SAASC,4BAA4B,QAAQ,2BAA2B;AAExE;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE7C,MAAMK,gBAAgBP,6BAA6BQ,CAAAA,MAAOA,IAAID,aAAa;IAC3E,MAAME,OAAOT,6BAA6BQ,CAAAA,MAAOA,IAAIE,SAAS,CAACC,QAAQ,CAACP;IACxE,MAAMQ,yBAAyBb,iBAAiB,CAACc,QAAgCN,cAAc;YAAEM;YAAOT;QAAM;IAE9G,OAAO;QACLK;QACAL;QACAC;QACAS,eAAeF;QACfG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,KAAKmB,MAAM,CACf;YACEZ;YACAF,KAAKA;YACL,GAAGG,IAAI;QACT,GACA;YAAEY,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,20 @@
'use client';
import * as React from 'react';
export function useAccordionItemContextValues_unstable(state) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
const { disabled, open, value, onHeaderClick } = state;
const accordionItem = React.useMemo(()=>({
disabled,
open,
value,
onHeaderClick
}), [
disabled,
open,
value,
onHeaderClick
]);
return {
accordionItem
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItemContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { disabled, open, value, onHeaderClick } = state;\n const accordionItem = React.useMemo<AccordionItemContextValue>(\n () => ({ disabled, open, value, onHeaderClick }),\n [disabled, open, value, onHeaderClick],\n );\n\n return { accordionItem };\n}\n"],"names":["React","useAccordionItemContextValues_unstable","state","disabled","open","value","onHeaderClick","accordionItem","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,uCAAuCC,KAAyB;IAC9E,4DAA4D;IAC5D,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGJ;IACjD,MAAMK,gBAAgBP,MAAMQ,OAAO,CACjC,IAAO,CAAA;YAAEL;YAAUC;YAAMC;YAAOC;QAAc,CAAA,GAC9C;QAACH;QAAUC;QAAMC;QAAOC;KAAc;IAGxC,OAAO;QAAEC;IAAc;AACzB"}

View File

@@ -0,0 +1,10 @@
import { mergeClasses } from '@griffel/react';
export const accordionItemClassNames = {
root: 'fui-AccordionItem'
};
export const useAccordionItemStyles_unstable = state => {
'use no memo';
state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["mergeClasses","accordionItemClassNames","root","useAccordionItemStyles_unstable","state","className"],"sources":["useAccordionItemStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const accordionItemClassNames = {\n root: 'fui-AccordionItem'\n};\nexport const useAccordionItemStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,uBAAuB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACvF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,9 @@
import { mergeClasses } from '@griffel/react';
export const accordionItemClassNames = {
root: 'fui-AccordionItem'
};
export const useAccordionItemStyles_unstable = (state)=>{
'use no memo';
state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItemStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';\n\nexport const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {\n root: 'fui-AccordionItem',\n};\n\nexport const useAccordionItemStyles_unstable = (state: AccordionItemState): AccordionItemState => {\n 'use no memo';\n\n state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","accordionItemClassNames","root","useAccordionItemStyles_unstable","state","className"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,wBAAwBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEtF,OAAOD;AACT,EAAE"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useAccordionPanel_unstable } from './useAccordionPanel';
import { renderAccordionPanel_unstable } from './renderAccordionPanel';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';
/**
* Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.
*/ export const AccordionPanel = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useAccordionPanel_unstable(props, ref);
useAccordionPanelStyles_unstable(state);
useCustomStyleHook_unstable('useAccordionPanelStyles_unstable')(state);
return renderAccordionPanel_unstable(state);
});
AccordionPanel.displayName = 'AccordionPanel';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAccordionPanel_unstable } from './useAccordionPanel';\nimport { renderAccordionPanel_unstable } from './renderAccordionPanel';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';\nimport type { AccordionPanelProps } from './AccordionPanel.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.\n */\nexport const AccordionPanel: ForwardRefComponent<AccordionPanelProps> = React.forwardRef((props, ref) => {\n const state = useAccordionPanel_unstable(props, ref);\n\n useAccordionPanelStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAccordionPanelStyles_unstable')(state);\n\n return renderAccordionPanel_unstable(state);\n});\n\nAccordionPanel.displayName = 'AccordionPanel';\n"],"names":["React","useAccordionPanel_unstable","renderAccordionPanel_unstable","useCustomStyleHook_unstable","useAccordionPanelStyles_unstable","AccordionPanel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gCAAgC,QAAQ,mCAAmC;AAIpF;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDJ,iCAAiCK;IAEjCN,4BAA4B,oCAAoCM;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

View File

@@ -0,0 +1 @@
export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionPanel/AccordionPanel.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: NonNullable<Slot<'div'>>;\n collapseMotion?: Slot<PresenceMotionSlotProps>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelBaseProps = ComponentProps<Omit<AccordionPanelSlots, 'collapseMotion'>>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n\nexport type AccordionPanelBaseState = ComponentState<Omit<AccordionPanelSlots, 'collapseMotion'>> &\n Pick<AccordionPanelState, 'open'>;\n"],"names":[],"mappings":"AAmBA,WACoC"}

View File

@@ -0,0 +1,4 @@
export { AccordionPanel } from './AccordionPanel';
export { renderAccordionPanel_unstable } from './renderAccordionPanel';
export { useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './useAccordionPanel';
export { accordionPanelClassNames, useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionPanel/index.ts"],"sourcesContent":["export { AccordionPanel } from './AccordionPanel';\nexport type {\n AccordionPanelProps,\n AccordionPanelSlots,\n AccordionPanelState,\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n} from './AccordionPanel.types';\nexport { renderAccordionPanel_unstable } from './renderAccordionPanel';\nexport { useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './useAccordionPanel';\nexport { accordionPanelClassNames, useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';\n"],"names":["AccordionPanel","renderAccordionPanel_unstable","useAccordionPanel_unstable","useAccordionPanelBase_unstable","accordionPanelClassNames","useAccordionPanelStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,sBAAsB;AACjG,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

View File

@@ -0,0 +1,10 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Function that renders the final JSX of the component
*/ export const renderAccordionPanel_unstable = (state)=>{
assertSlots(state);
return state.collapseMotion ? /*#__PURE__*/ _jsx(state.collapseMotion, {
children: /*#__PURE__*/ _jsx(state.root, {})
}) : /*#__PURE__*/ _jsx(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionPanel/renderAccordionPanel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\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): JSXElement => {\n assertSlots<AccordionPanelSlots>(state);\n return state.collapseMotion ? (\n <state.collapseMotion>\n <state.root />\n </state.collapseMotion>\n ) : (\n <state.root />\n );\n};\n"],"names":["assertSlots","renderAccordionPanel_unstable","state","collapseMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IACjC,OAAOA,MAAMC,cAAc,iBACzB,KAACD,MAAMC,cAAc;kBACnB,cAAA,KAACD,MAAME,IAAI;uBAGb,KAACF,MAAME,IAAI;AAEf,EAAE"}

View File

@@ -0,0 +1,61 @@
'use client';
import * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import { useTabsterAttributes } from '@fluentui/react-tabster';
import { presenceMotionSlot } from '@fluentui/react-motion';
import { Collapse } from '@fluentui/react-motion-components-preview';
import { useAccordionContext_unstable } from '../../contexts/accordion';
import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
/**
* Returns the props and state required to render the component
* @param props - AccordionPanel properties
* @param ref - reference to root HTMLElement of AccordionPanel
*/ export const useAccordionPanel_unstable = (props, ref)=>{
const { collapseMotion, ...baseProps } = props;
const state = useAccordionPanelBase_unstable(baseProps, ref);
const focusableProps = useTabsterAttributes({
focusable: {
excludeFromMover: true
}
});
const navigation = useAccordionContext_unstable((ctx)=>ctx.navigation);
return {
...state,
components: {
// eslint-disable-next-line @typescript-eslint/no-deprecated
...state.components,
collapseMotion: Collapse
},
root: {
...state.root,
...navigation && focusableProps
},
collapseMotion: presenceMotionSlot(props.collapseMotion, {
elementType: Collapse,
defaultProps: {
visible: state.open,
unmountOnExit: true
}
})
};
};
/**
* Base state hook for AccordionPanel, without design related features.
*
* @param props - AccordionPanelBaseProps properties
* @param ref - reference to root HTMLElement of AccordionPanel
*/ export const useAccordionPanelBase_unstable = (props, ref)=>{
const { open } = useAccordionItemContext_unstable();
return {
open,
components: {
root: 'div'
},
root: slot.always({
ref: ref,
...props
}, {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type {\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n AccordionPanelProps,\n AccordionPanelState,\n} from './AccordionPanel.types';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n props: AccordionPanelProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n const { collapseMotion, ...baseProps } = props;\n const state = useAccordionPanelBase_unstable(baseProps, ref);\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n collapseMotion: Collapse,\n },\n root: {\n ...state.root,\n ...(navigation && focusableProps),\n },\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: state.open,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Base state hook for AccordionPanel, without design related features.\n *\n * @param props - AccordionPanelBaseProps properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanelBase_unstable = (\n props: AccordionPanelBaseProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelBaseState => {\n const { open } = useAccordionItemContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","slot","useTabsterAttributes","presenceMotionSlot","Collapse","useAccordionContext_unstable","useAccordionItemContext_unstable","useAccordionPanel_unstable","props","ref","collapseMotion","baseProps","state","useAccordionPanelBase_unstable","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root","elementType","defaultProps","visible","open","unmountOnExit","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,QAAQ,QAAQ,4CAA4C;AACrE,SAASC,4BAA4B,QAAQ,2BAA2B;AAOxE,SAASC,gCAAgC,QAAQ,+BAA+B;AAEhF;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGC,WAAW,GAAGH;IACzC,MAAMI,QAAQC,+BAA+BF,WAAWF;IACxD,MAAMK,iBAAiBZ,qBAAqB;QAAEa,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,aAAaZ,6BAA6Ba,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACL,GAAGL,KAAK;QACRO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,MAAMO,UAAU;YACnBT,gBAAgBN;QAClB;QACAgB,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,GAAIH,cAAcH,cAAc;QAClC;QACAJ,gBAAgBP,mBAAmBK,MAAME,cAAc,EAAE;YACvDW,aAAajB;YACbkB,cAAc;gBACZC,SAASX,MAAMY,IAAI;gBACnBC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMZ,iCAAiC,CAC5CL,OACAC;IAEA,MAAM,EAAEe,IAAI,EAAE,GAAGlB;IAEjB,OAAO;QACLkB;QACAL,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnB,KAAKyB,MAAM,CACf;YACEjB,KAAKA;YACL,GAAGD,KAAK;QACV,GACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,31 @@
'use client';
import { __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const accordionPanelClassNames = {
root: 'fui-AccordionPanel'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__styles({
root: {
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1axvtxu"
}
}, {
d: [[".f1axvtxu{margin:0 var(--spacingHorizontalM);}", {
p: -1
}]]
});
/** Applies style classnames to slots */
export const useAccordionPanelStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","mergeClasses","tokens","accordionPanelClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useAccordionPanelStyles_unstable","state","styles","className"],"sources":["useAccordionPanelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const accordionPanelClassNames = {\n root: 'fui-AccordionPanel'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n margin: `0 ${tokens.spacingHorizontalM}`\n }\n});\n/** Applies style classnames to slots */ export const useAccordionPanelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAIrB,CAAC;AACF;AAAyC,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EAC9F,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,wBAAwB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,19 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const accordionPanelClassNames = {
root: 'fui-AccordionPanel'
};
/**
* Styles for the root slot
*/ const useStyles = makeStyles({
root: {
margin: `0 ${tokens.spacingHorizontalM}`
}
});
/** Applies style classnames to slots */ export const useAccordionPanelStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';\n\nexport const accordionPanelClassNames: SlotClassNames<Omit<AccordionPanelSlots, 'collapseMotion'>> = {\n root: 'fui-AccordionPanel',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n margin: `0 ${tokens.spacingHorizontalM}`,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionPanelStyles_unstable = (state: AccordionPanelState): AccordionPanelState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","accordionPanelClassNames","root","useStyles","margin","spacingHorizontalM","useAccordionPanelStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,2BAAwF;IACnGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,QAAQ,CAAC,EAAE,EAAEJ,OAAOK,kBAAkB,EAAE;IAC1C;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,GAAGV,aAAaE,yBAAyBC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEpG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,13 @@
'use client';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
const AccordionContext = createContext(undefined);
const accordionContextDefaultValue = {
openItems: [],
collapsible: false,
multiple: false,
navigation: undefined,
requestToggle () {
/* noop */ }
};
export const { Provider: AccordionProvider } = AccordionContext;
export const useAccordionContext_unstable = (selector)=>useContextSelector(AccordionContext, (ctx = accordionContextDefaultValue)=>selector(ctx));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/accordion.ts"],"sourcesContent":["'use client';\n\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { AccordionItemValue } from '../AccordionItem';\nimport { AccordionToggleData, AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionRequestToggleData<Value = AccordionItemValue> = { event: AccordionToggleEvent } & Pick<\n AccordionToggleData<Value>,\n 'value'\n>;\n\nexport type AccordionContextValue<Value = AccordionItemValue> = {\n /**\n * The list of opened panels by index\n */\n openItems: AccordionItemValue[];\n /**\n * Callback used by AccordionItem to request a change on it's own opened state\n * Should be used to toggle AccordionItem\n */\n requestToggle: (data: AccordionRequestToggleData<Value>) => void;\n collapsible: boolean;\n multiple: boolean;\n navigation: 'linear' | 'circular' | undefined;\n};\n\nconst AccordionContext = createContext<AccordionContextValue | undefined>(undefined) as Context<AccordionContextValue>;\n\nconst accordionContextDefaultValue: AccordionContextValue = {\n openItems: [],\n collapsible: false,\n multiple: false,\n navigation: undefined,\n requestToggle() {\n /* noop */\n },\n};\n\nexport const { Provider: AccordionProvider } = AccordionContext;\nexport const useAccordionContext_unstable = <T>(selector: ContextSelector<AccordionContextValue, T>): T =>\n useContextSelector(AccordionContext, (ctx = accordionContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AccordionContext","undefined","accordionContextDefaultValue","openItems","collapsible","multiple","navigation","requestToggle","Provider","AccordionProvider","useAccordionContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAmBC,kBAAkB,QAAQ,mCAAmC;AAyBtG,MAAMC,mBAAmBF,cAAiDG;AAE1E,MAAMC,+BAAsD;IAC1DC,WAAW,EAAE;IACbC,aAAa;IACbC,UAAU;IACVC,YAAYL;IACZM;IACE,QAAQ,GACV;AACF;AAEA,OAAO,MAAM,EAAEC,UAAUC,iBAAiB,EAAE,GAAGT,iBAAiB;AAChE,OAAO,MAAMU,+BAA+B,CAAIC,WAC9CZ,mBAAmBC,kBAAkB,CAACY,MAAMV,4BAA4B,GAAKS,SAASC,MAAM"}

View File

@@ -0,0 +1,14 @@
'use client';
import * as React from 'react';
const AccordionHeaderContext = React.createContext(undefined);
const accordionHeaderContextDefaultValue = {
open: false,
disabled: false,
size: 'medium',
expandIconPosition: 'start'
};
export const { Provider: AccordionHeaderProvider } = AccordionHeaderContext;
export const useAccordionHeaderContext_unstable = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(AccordionHeaderContext)) !== null && _React_useContext !== void 0 ? _React_useContext : accordionHeaderContextDefaultValue;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/accordionHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n AccordionHeaderExpandIconPosition,\n AccordionHeaderSize,\n} from '../components/AccordionHeader/AccordionHeader.types';\n\nexport type AccordionHeaderContextValue = {\n disabled: boolean;\n open: boolean;\n expandIconPosition: AccordionHeaderExpandIconPosition;\n size: AccordionHeaderSize;\n};\n\nconst AccordionHeaderContext = React.createContext<AccordionHeaderContextValue | undefined>(\n undefined,\n) as React.Context<AccordionHeaderContextValue>;\n\nconst accordionHeaderContextDefaultValue = {\n open: false,\n disabled: false,\n size: 'medium',\n expandIconPosition: 'start',\n};\n\nexport const { Provider: AccordionHeaderProvider } = AccordionHeaderContext;\n\nexport const useAccordionHeaderContext_unstable = (): AccordionHeaderContextValue =>\n React.useContext(AccordionHeaderContext) ?? accordionHeaderContextDefaultValue;\n"],"names":["React","AccordionHeaderContext","createContext","undefined","accordionHeaderContextDefaultValue","open","disabled","size","expandIconPosition","Provider","AccordionHeaderProvider","useAccordionHeaderContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAa/B,MAAMC,yBAAyBD,MAAME,aAAa,CAChDC;AAGF,MAAMC,qCAAqC;IACzCC,MAAM;IACNC,UAAU;IACVC,MAAM;IACNC,oBAAoB;AACtB;AAEA,OAAO,MAAM,EAAEC,UAAUC,uBAAuB,EAAE,GAAGT,uBAAuB;AAE5E,OAAO,MAAMU,qCAAqC;QAChDX;WAAAA,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,qCAAjBD,+BAAAA,oBAA4CI;EAAmC"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
const AccordionItemContext = React.createContext(undefined);
const accordionItemContextDefaultValue = {
open: false,
disabled: false,
value: undefined,
onHeaderClick () {
/* noop */ }
};
export const { Provider: AccordionItemProvider } = AccordionItemContext;
export const useAccordionItemContext_unstable = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(AccordionItemContext)) !== null && _React_useContext !== void 0 ? _React_useContext : accordionItemContextDefaultValue;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/accordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AccordionItemValue } from '../AccordionItem';\nimport { AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionItemContextValue<Value = AccordionItemValue> = {\n open: boolean;\n disabled: boolean;\n value: Value;\n /**\n * @deprecated - use `requestToggle` from AccordionContent instead\n */\n onHeaderClick(event: AccordionToggleEvent): void;\n};\n\nconst AccordionItemContext = React.createContext<AccordionItemContextValue<unknown> | undefined>(\n undefined,\n) as React.Context<AccordionItemContextValue<unknown>>;\n\nconst accordionItemContextDefaultValue: AccordionItemContextValue<unknown> = {\n open: false,\n disabled: false,\n value: undefined,\n onHeaderClick() {\n /* noop */\n },\n};\n\nexport const { Provider: AccordionItemProvider } = AccordionItemContext;\n\nexport const useAccordionItemContext_unstable = (): AccordionItemContextValue<unknown> => {\n return React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;\n};\n"],"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","open","disabled","value","onHeaderClick","Provider","AccordionItemProvider","useAccordionItemContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAc/B,MAAMC,uBAAuBD,MAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAAuE;IAC3EC,MAAM;IACNC,UAAU;IACVC,OAAOJ;IACPK;IACE,QAAQ,GACV;AACF;AAEA,OAAO,MAAM,EAAEC,UAAUC,qBAAqB,EAAE,GAAGT,qBAAqB;AAExE,OAAO,MAAMU,mCAAmC;QACvCX;IAAP,OAAOA,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,mCAAjBD,+BAAAA,oBAA0CI;AACnD,EAAE"}

7
node_modules/@fluentui/react-accordion/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1,7 @@
export { Accordion, accordionClassNames, renderAccordion_unstable, useAccordionContextValues_unstable, useAccordionStyles_unstable, useAccordion_unstable, useAccordionBase_unstable } from './Accordion';
export { AccordionItem, accordionItemClassNames, renderAccordionItem_unstable, useAccordionItemContextValues_unstable, useAccordionItemStyles_unstable, useAccordionItem_unstable } from './AccordionItem';
export { AccordionHeader, accordionHeaderClassNames, renderAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './AccordionHeader';
export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable, useAccordionPanelStyles_unstable, useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './AccordionPanel';
export { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';
export { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';
export { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Accordion,\n accordionClassNames,\n renderAccordion_unstable,\n useAccordionContextValues_unstable,\n useAccordionStyles_unstable,\n useAccordion_unstable,\n useAccordionBase_unstable,\n} from './Accordion';\nexport type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n AccordionBaseState,\n AccordionBaseProps,\n} from './Accordion';\nexport {\n AccordionItem,\n accordionItemClassNames,\n renderAccordionItem_unstable,\n useAccordionItemContextValues_unstable,\n useAccordionItemStyles_unstable,\n useAccordionItem_unstable,\n} from './AccordionItem';\nexport type {\n AccordionItemContextValues,\n AccordionItemProps,\n AccordionItemSlots,\n AccordionItemState,\n AccordionItemValue,\n} from './AccordionItem';\nexport {\n AccordionHeader,\n accordionHeaderClassNames,\n renderAccordionHeader_unstable,\n useAccordionHeaderContextValues_unstable,\n useAccordionHeaderStyles_unstable,\n useAccordionHeader_unstable,\n useAccordionHeaderBase_unstable,\n} from './AccordionHeader';\nexport type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n AccordionHeaderBaseState,\n AccordionHeaderBaseProps,\n} from './AccordionHeader';\nexport {\n AccordionPanel,\n accordionPanelClassNames,\n renderAccordionPanel_unstable,\n useAccordionPanelStyles_unstable,\n useAccordionPanel_unstable,\n useAccordionPanelBase_unstable,\n} from './AccordionPanel';\nexport type {\n AccordionPanelProps,\n AccordionPanelSlots,\n AccordionPanelState,\n AccordionPanelBaseState,\n AccordionPanelBaseProps,\n} from './AccordionPanel';\n\nexport { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';\n\nexport type { AccordionContextValue } from './contexts/accordion';\n\nexport { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';\n\nexport type { AccordionItemContextValue } from './contexts/accordionItem';\n\nexport { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';\n\nexport type { AccordionHeaderContextValue } from './contexts/accordionHeader';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","useAccordionBase_unstable","AccordionItem","accordionItemClassNames","renderAccordionItem_unstable","useAccordionItemContextValues_unstable","useAccordionItemStyles_unstable","useAccordionItem_unstable","AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","useAccordionHeaderBase_unstable","AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","useAccordionPanelBase_unstable","AccordionProvider","useAccordionContext_unstable","AccordionItemProvider","useAccordionItemContext_unstable","AccordionHeaderProvider","useAccordionHeaderContext_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,EACrBC,yBAAyB,QACpB,cAAc;AAarB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAQzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,oBAAoB;AAW3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,mBAAmB;AAS1B,SAASC,iBAAiB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAIvF,SAASC,qBAAqB,EAAEC,gCAAgC,QAAQ,2BAA2B;AAInG,SAASC,uBAAuB,EAAEC,kCAAkC,QAAQ,6BAA6B"}