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

3394
node_modules/@fluentui/react-accordion/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-accordion/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-accordion
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

3
node_modules/@fluentui/react-accordion/README.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
# @fluentui/react-accordion
**React Accordion components for [Fluent UI React](https://react.fluentui.dev)**

322
node_modules/@fluentui/react-accordion/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,322 @@
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
*/
export declare const Accordion: ForwardRefComponent<AccordionProps> & (<TItem>(props: AccordionProps<TItem>) => JSXElement);
export declare type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;
export declare type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;
export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
export declare type AccordionContextValue<Value = AccordionItemValue> = {
/**
* The list of opened panels by index
*/
openItems: AccordionItemValue[];
/**
* Callback used by AccordionItem to request a change on it's own opened state
* Should be used to toggle AccordionItem
*/
requestToggle: (data: AccordionRequestToggleData<Value>) => void;
collapsible: boolean;
multiple: boolean;
navigation: 'linear' | 'circular' | undefined;
};
export declare type AccordionContextValues = {
accordion: AccordionContextValue;
};
/**
* Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
* hooks.
*/
export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
export declare type AccordionHeaderBaseProps = Omit<AccordionHeaderProps, 'inline' | 'size'>;
export declare type AccordionHeaderBaseState = Omit<AccordionHeaderState, 'inline' | 'size'>;
export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
export declare type AccordionHeaderContextValue = {
disabled: boolean;
open: boolean;
expandIconPosition: AccordionHeaderExpandIconPosition;
size: AccordionHeaderSize;
};
export declare type AccordionHeaderContextValues = {
accordionHeader: AccordionHeaderContextValue;
};
export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
/**
* The position of the expand icon slot in heading.
*/
expandIconPosition?: AccordionHeaderExpandIconPosition;
/**
* Indicates if the AccordionHeader should be rendered inline.
*/
inline?: boolean;
/**
* Size of spacing in the heading.
*/
size?: AccordionHeaderSize;
};
export declare const AccordionHeaderProvider: React_2.Provider<AccordionHeaderContextValue>;
export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
export declare type AccordionHeaderSlots = {
/**
* The element wrapping the button. By default this is a div, but can be a heading.
*/
root: NonNullable<Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>>;
/**
* The component to be used as button in heading
*/
button: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
/**
* Expand icon slot rendered before (or after) children content in heading.
*/
expandIcon?: Slot<'span'>;
/**
* Expand icon slot rendered before (or after) children content in heading.
*/
icon?: Slot<'div'>;
};
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
export declare type AccordionIndex = number | number[];
/**
* Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.
*/
export declare const AccordionItem: ForwardRefComponent<AccordionItemProps>;
export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
export declare type AccordionItemContextValue<Value = AccordionItemValue> = {
open: boolean;
disabled: boolean;
value: Value;
/**
* @deprecated - use `requestToggle` from AccordionContent instead
*/
onHeaderClick(event: AccordionToggleEvent): void;
};
export declare type AccordionItemContextValues<Value = AccordionItemValue> = {
accordionItem: AccordionItemContextValue<Value>;
};
export declare type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {
/**
* Disables opening/closing of panel.
*/
disabled?: boolean;
/**
* Required value that identifies this item inside an Accordion component.
*/
value: Value;
};
export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue<unknown>>;
export declare type AccordionItemSlots = {
root: NonNullable<Slot<'div'>>;
};
export declare type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> & AccordionItemContextValue<Value>;
export declare type AccordionItemValue = unknown;
/**
* Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.
*/
export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
export declare type AccordionPanelBaseProps = ComponentProps<Omit<AccordionPanelSlots, 'collapseMotion'>>;
export declare type AccordionPanelBaseState = ComponentState<Omit<AccordionPanelSlots, 'collapseMotion'>> & Pick<AccordionPanelState, 'open'>;
export declare const accordionPanelClassNames: SlotClassNames<Omit<AccordionPanelSlots, 'collapseMotion'>>;
export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
export declare type AccordionPanelSlots = {
root: NonNullable<Slot<'div'>>;
collapseMotion?: Slot<PresenceMotionSlotProps>;
};
export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
/**
* Internal open state, provided by context.
*/
open: boolean;
};
export declare type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {
/**
* Default value for the uncontrolled state of the panel.
*/
defaultOpenItems?: Value | Value[];
/**
* Indicates if Accordion support multiple Panels closed at the same time.
*/
collapsible?: boolean;
/**
* Indicates if Accordion support multiple Panels opened at the same time.
*/
multiple?: boolean;
/**
* @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.
* Indicates if keyboard navigation is available and gives two options, linear or circular navigation.
*/
navigation?: 'linear' | 'circular';
/**
* Callback to be called when the opened items change.
*/
onToggle?: AccordionToggleEventHandler<Value>;
/**
* Controls the state of the panel.
*/
openItems?: Value | Value[];
};
export declare const AccordionProvider: Provider<AccordionContextValue<unknown>> & FC<ProviderProps<AccordionContextValue<unknown>>>;
declare type AccordionRequestToggleData<Value = AccordionItemValue> = {
event: AccordionToggleEvent;
} & Pick<AccordionToggleData<Value>, 'value'>;
export declare type AccordionSlots = {
root: NonNullable<Slot<'div'>>;
};
export declare type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;
export declare type AccordionToggleData<Value = AccordionItemValue> = {
value: Value;
openItems: Value[];
};
export declare type AccordionToggleEvent<E = HTMLElement> = React_2.MouseEvent<E> | React_2.KeyboardEvent<E>;
export declare type AccordionToggleEventHandler<Value = AccordionItemValue> = (event: AccordionToggleEvent, data: AccordionToggleData<Value>) => void;
/**
* Function that renders the final JSX of the component
*/
export declare const renderAccordion_unstable: (state: AccordionBaseState, contextValues: AccordionContextValues) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderAccordionHeader_unstable: (state: AccordionHeaderBaseState, contextValues: AccordionHeaderContextValues) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderAccordionItem_unstable: (state: AccordionItemState, contextValues: AccordionItemContextValues) => JSXElement;
/**
* Function that renders the final JSX of the component
*/
export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSXElement;
/**
* Returns the props and state required to render the component
* @param props - Accordion properties
* @param ref - reference to root HTMLElement of Accordion
*/
export declare const useAccordion_unstable: <Value = unknown>(props: AccordionProps<Value>, ref: React_2.Ref<HTMLElement>) => AccordionState<Value>;
/**
* Returns the props and state required to render the component
* @param props - Accordion properties
* @param ref - reference to root HTMLElement of Accordion
*/
export declare const useAccordionBase_unstable: <Value = unknown>(props: AccordionBaseProps<Value>, ref: React_2.Ref<HTMLElement>) => AccordionBaseState<Value>;
export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
/**
* Returns the props and state required to render the component
*
* @param props - AccordionHeader properties
* @param ref - reference to root HTMLElement of AccordionHeader
*/
export declare const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
/**
* Base state hook for AccordionHeader, without design related features.
*
* @param props - AccordionHeader properties
* @param ref - reference to root HTMLElement of AccordionHeader
*/
export declare const useAccordionHeaderBase_unstable: (props: AccordionHeaderBaseProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderBaseState;
export declare const useAccordionHeaderContext_unstable: () => AccordionHeaderContextValue;
export declare function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues;
/** Applies style classnames to slots */
export declare const useAccordionHeaderStyles_unstable: (state: AccordionHeaderState) => AccordionHeaderState;
/**
* Returns the props and state required to render the component
* @param props - AccordionItem properties
* @param ref - reference to root HTMLElement of AccordionItem
*/
export declare const useAccordionItem_unstable: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
export declare const useAccordionItemContext_unstable: () => AccordionItemContextValue<unknown>;
export declare function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues;
export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState;
/**
* Returns the props and state required to render the component
* @param props - AccordionPanel properties
* @param ref - reference to root HTMLElement of AccordionPanel
*/
export declare const useAccordionPanel_unstable: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
/**
* Base state hook for AccordionPanel, without design related features.
*
* @param props - AccordionPanelBaseProps properties
* @param ref - reference to root HTMLElement of AccordionPanel
*/
export declare const useAccordionPanelBase_unstable: (props: AccordionPanelBaseProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelBaseState;
/** Applies style classnames to slots */
export declare const useAccordionPanelStyles_unstable: (state: AccordionPanelState) => AccordionPanelState;
export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState;
export { }

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Accordion: function() {
return _index.Accordion;
},
accordionClassNames: function() {
return _index.accordionClassNames;
},
renderAccordion_unstable: function() {
return _index.renderAccordion_unstable;
},
useAccordionBase_unstable: function() {
return _index.useAccordionBase_unstable;
},
useAccordionContextValues_unstable: function() {
return _index.useAccordionContextValues_unstable;
},
useAccordionStyles_unstable: function() {
return _index.useAccordionStyles_unstable;
},
useAccordion_unstable: function() {
return _index.useAccordion_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAaEA,gBAAS;;;eACTC,0BAAmB;;;eACnBC,+BAAwB;;;eAIxBI,gCAAyB;;;eAHzBH,yCAAkC;;;eAClCC,kCAA2B;;;eAC3BC,4BAAqB;;;uBAEhB,+BAA+B"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionHeader: function() {
return _index.AccordionHeader;
},
accordionHeaderClassNames: function() {
return _index.accordionHeaderClassNames;
},
renderAccordionHeader_unstable: function() {
return _index.renderAccordionHeader_unstable;
},
useAccordionHeaderBase_unstable: function() {
return _index.useAccordionHeaderBase_unstable;
},
useAccordionHeaderContextValues_unstable: function() {
return _index.useAccordionHeaderContextValues_unstable;
},
useAccordionHeaderStyles_unstable: function() {
return _index.useAccordionHeaderStyles_unstable;
},
useAccordionHeader_unstable: function() {
return _index.useAccordionHeader_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAWEA,sBAAe;;;eACfC,gCAAyB;;;eACzBC,qCAA8B;;;eAI9BI,sCAA+B;;;eAH/BH,+CAAwC;;;eACxCC,wCAAiC;;;eACjCC,kCAA2B;;;uBAEtB,qCAAqC"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionItem: function() {
return _index.AccordionItem;
},
accordionItemClassNames: function() {
return _index.accordionItemClassNames;
},
renderAccordionItem_unstable: function() {
return _index.renderAccordionItem_unstable;
},
useAccordionItemContextValues_unstable: function() {
return _index.useAccordionItemContextValues_unstable;
},
useAccordionItemStyles_unstable: function() {
return _index.useAccordionItemStyles_unstable;
},
useAccordionItem_unstable: function() {
return _index.useAccordionItem_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAQEA,oBAAa;;;eACbC,8BAAuB;;;eACvBC,mCAA4B;;;eAC5BC,6CAAsC;;;eACtCC,sCAA+B;;;eAC/BC,gCAAyB;;;uBACpB,mCAAmC"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionPanel: function() {
return _index.AccordionPanel;
},
accordionPanelClassNames: function() {
return _index.accordionPanelClassNames;
},
renderAccordionPanel_unstable: function() {
return _index.renderAccordionPanel_unstable;
},
useAccordionPanelBase_unstable: function() {
return _index.useAccordionPanelBase_unstable;
},
useAccordionPanelStyles_unstable: function() {
return _index.useAccordionPanelStyles_unstable;
},
useAccordionPanel_unstable: function() {
return _index.useAccordionPanel_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAQEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;eAG7BG,qCAA8B;;;eAF9BF,uCAAgC;;;eAChCC,iCAA0B;;;uBAErB,oCAAoC"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Accordion", {
enumerable: true,
get: function() {
return Accordion;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderAccordion = require("./renderAccordion");
const _useAccordion = require("./useAccordion");
const _useAccordionContextValues = require("./useAccordionContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAccordionStylesstyles = require("./useAccordionStyles.styles");
const Accordion = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useAccordion.useAccordion_unstable)(props, ref);
const contextValues = (0, _useAccordionContextValues.useAccordionContextValues_unstable)(state);
(0, _useAccordionStylesstyles.useAccordionStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAccordionStyles_unstable')(state);
return (0, _renderAccordion.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;;;;;;;;;;;;iEAEuB,QAAQ;iCACU,oBAAoB;8BACvB,iBAAiB;2CACJ,8BAA8B;qCACrC,kCAAkC;0CAClC,8BAA8B;AAOnE,MAAMM,YAAAA,WAAAA,GACXN,OAAMO,UAAU,CAAiC,CAACC,OAAOC;IACvD,MAAMC,YAAQR,mCAAAA,EAAsBM,OAAOC;IAC3C,MAAME,oBAAgBR,6DAAAA,EAAmCO;QAEzDL,qDAAAA,EAA4BK;QAE5BN,gDAAAA,EAA4B,+BAA+BM;IAE3D,WAAOT,yCAAAA,EAAyBS,OAAOC;AACzC,GAAkG;AAEpGL,UAAUM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("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":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Accordion: function() {
return _Accordion.Accordion;
},
accordionClassNames: function() {
return _useAccordionStylesstyles.accordionClassNames;
},
renderAccordion_unstable: function() {
return _renderAccordion.renderAccordion_unstable;
},
useAccordionBase_unstable: function() {
return _useAccordion.useAccordionBase_unstable;
},
useAccordionContextValues_unstable: function() {
return _useAccordionContextValues.useAccordionContextValues_unstable;
},
useAccordionStyles_unstable: function() {
return _useAccordionStylesstyles.useAccordionStyles_unstable;
},
useAccordion_unstable: function() {
return _useAccordion.useAccordion_unstable;
}
});
const _Accordion = require("./Accordion");
const _renderAccordion = require("./renderAccordion");
const _useAccordion = require("./useAccordion");
const _useAccordionStylesstyles = require("./useAccordionStyles.styles");
const _useAccordionContextValues = require("./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":";;;;;;;;;;;IAASA;mCAAS;;IAeTI;4DAAmB;;;eAFnBH,yCAAwB;;;eACDE,uCAAyB;;;eAEhDG,6DAAkC;;;eADbD,qDAA2B;;;eADhDH,mCAAqB;;;2BAdJ,cAAc;iCAaC,oBAAoB;8BACI,iBAAiB;0CACjB,8BAA8B;2CAC5C,8BAA8B"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAccordion_unstable", {
enumerable: true,
get: function() {
return renderAccordion_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _accordion = require("../../contexts/accordion");
const renderAccordion_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_accordion.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":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;2BAItB,2BAA2B;AAKtD,iCAAiC,CACtCC,OACAC;QAEAJ,2BAAAA,EAA4BG;IAE5B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACJ,4BAAAA,EAAAA;YAAkBK,OAAOF,cAAcG,SAAS;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAG7E,EAAE"}

View File

@@ -0,0 +1,125 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useAccordionBase_unstable: function() {
return useAccordionBase_unstable;
},
useAccordion_unstable: function() {
return useAccordion_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const useAccordion_unstable = (props, ref)=>{
const { navigation, ...baseProps } = props;
const state = useAccordionBase_unstable(baseProps, ref);
/** FIXME: deprecated will be removed after navigation prop is removed */ const arrowNavigationProps = (0, _reacttabster.useArrowNavigationGroup)({
circular: navigation === 'circular',
tabbable: true
});
return {
navigation,
...state,
root: {
...state.root,
...navigation ? arrowNavigationProps : undefined
}
};
};
const useAccordionBase_unstable = (props, ref)=>{
const { openItems: controlledOpenItems, defaultOpenItems, multiple = false, collapsible = false, onToggle, ...rest } = props;
const [openItems, setOpenItems] = (0, _reactutilities.useControllableState)({
state: _react.useMemo(()=>normalizeValues(controlledOpenItems), [
controlledOpenItems
]),
defaultState: defaultOpenItems && (()=>initializeUncontrolledOpenItems({
defaultOpenItems,
multiple
})),
initialState: []
});
const requestToggle = (0, _reactutilities.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: _reactutilities.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,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAccordionContextValues_unstable", {
enumerable: true,
get: function() {
return useAccordionContextValues_unstable;
}
});
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":";;;;+BAGgBA;;;;;;AAAT,4CAA4CC,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,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
accordionClassNames: function() {
return accordionClassNames;
},
useAccordionStyles_unstable: function() {
return useAccordionStyles_unstable;
}
});
const _react = require("@griffel/react");
const accordionClassNames = {
root: 'fui-Accordion'
};
const useAccordionStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(accordionClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"names":["mergeClasses","accordionClassNames","root","useAccordionStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,mBAAmB;;;+BAGQ;;;;uBAJX,gBAAgB;AACtC,4BAA4B;IAC/BC,IAAI,EAAE;AACV,CAAC;AACM,MAAMC,8BAA+BC,KAAK,IAAG;IAChD,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,mBAAmB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACnF,OAAOD,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
accordionClassNames: function() {
return accordionClassNames;
},
useAccordionStyles_unstable: function() {
return useAccordionStyles_unstable;
}
});
const _react = require("@griffel/react");
const accordionClassNames = {
root: 'fui-Accordion'
};
const useAccordionStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.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":";;;;;;;;;;;IAIaC,mBAAAA;;;+BAIAE;;;;uBAPgB,iBAAiB;AAGvC,4BAA4D;IACjED,MAAM;AACR,EAAE;AAEK,MAAMC,8BAA8B,CAACC;IAC1C;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAElF,OAAOD;AACT,EAAE"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AccordionHeader", {
enumerable: true,
get: function() {
return AccordionHeader;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useAccordionHeader = require("./useAccordionHeader");
const _renderAccordionHeader = require("./renderAccordionHeader");
const _useAccordionHeaderStylesstyles = require("./useAccordionHeaderStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAccordionHeaderContextValues = require("./useAccordionHeaderContextValues");
const AccordionHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useAccordionHeader.useAccordionHeader_unstable)(props, ref);
const contextValues = (0, _useAccordionHeaderContextValues.useAccordionHeaderContextValues_unstable)(state);
(0, _useAccordionHeaderStylesstyles.useAccordionHeaderStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAccordionHeaderStyles_unstable')(state);
return (0, _renderAccordionHeader.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;;;;;;;;;;;;iEAEuB,QAAQ;oCACa,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;qCAC1C,kCAAkC;iDACrB,oCAAoC;AAQtF,MAAMM,kBAAAA,WAAAA,GAA6DN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQT,+CAAAA,EAA4BO,OAAOC;IACjD,MAAME,oBAAgBN,yEAAAA,EAAyCK;QAE/DP,iEAAAA,EAAkCO;QAElCN,gDAAAA,EAA4B,qCAAqCM;IAEjE,WAAOR,qDAAAA,EAA+BQ,OAAOC;AAC/C,GAAG;AAEHL,gBAAgBM,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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":""}

View File

@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionHeader: function() {
return _AccordionHeader.AccordionHeader;
},
accordionHeaderClassNames: function() {
return _useAccordionHeaderStylesstyles.accordionHeaderClassNames;
},
renderAccordionHeader_unstable: function() {
return _renderAccordionHeader.renderAccordionHeader_unstable;
},
useAccordionHeaderBase_unstable: function() {
return _useAccordionHeader.useAccordionHeaderBase_unstable;
},
useAccordionHeaderContextValues_unstable: function() {
return _useAccordionHeaderContextValues.useAccordionHeaderContextValues_unstable;
},
useAccordionHeaderStyles_unstable: function() {
return _useAccordionHeaderStylesstyles.useAccordionHeaderStyles_unstable;
},
useAccordionHeader_unstable: function() {
return _useAccordionHeader.useAccordionHeader_unstable;
}
});
const _AccordionHeader = require("./AccordionHeader");
const _renderAccordionHeader = require("./renderAccordionHeader");
const _useAccordionHeader = require("./useAccordionHeader");
const _useAccordionHeaderContextValues = require("./useAccordionHeaderContextValues");
const _useAccordionHeaderStylesstyles = require("./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":";;;;;;;;;;;IAASA;+CAAe;;IAcfK;wEAAyB;;;eAHzBJ,qDAA8B;;;eACDE,mDAA+B;;;eAC5DC,yEAAwC;;;eACbE,iEAAiC;;;eAF5DJ,+CAA2B;;;iCAZJ,oBAAoB;uCAWL,0BAA0B;oCACI,uBAAuB;iDAC3C,oCAAoC;gDAChB,oCAAoC"}

View File

@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAccordionHeader_unstable", {
enumerable: true,
get: function() {
return renderAccordionHeader_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _accordionHeader = require("../../contexts/accordionHeader");
const renderAccordionHeader_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_accordionHeader.AccordionHeaderProvider, {
value: contextValues.accordionHeader,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.button, {
children: [
state.expandIconPosition === 'start' && state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.root.children,
state.expandIconPosition === 'end' && state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.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":";;;;+BAeaE;;;;;;4BAdb,iCAAiD;gCAErB,4BAA4B;iCAOhB,iCAAiC;AAKlE,uCAAuC,CAC5CC,OACAC;QAEAJ,2BAAAA,EAAkCG;IAElC,OAAA,WAAA,OACE,eAAA,EAACF,wCAAAA,EAAAA;QAAwBI,OAAOD,cAAcE,eAAe;kBAC3D,WAAA,GAAA,mBAAA,EAACH,MAAMI,IAAI,EAAA;sBACT,WAAA,OAAA,gBAAA,EAACJ,MAAMK,MAAM,EAAA;;oBACVL,MAAMM,kBAAkB,KAAK,WAAWN,MAAMO,UAAU,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,UAAU,EAAA,CAAA;oBAC7EP,MAAMQ,IAAI,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,IAAI,EAAA,CAAA;oBACzBR,MAAMI,IAAI,CAACK,QAAQ;oBACnBT,MAAMM,kBAAkB,KAAK,SAASN,MAAMO,UAAU,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,UAAU,EAAA,CAAA;;;;;AAKtF,EAAE"}

View File

@@ -0,0 +1,115 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useAccordionHeaderBase_unstable: function() {
return useAccordionHeaderBase_unstable;
},
useAccordionHeader_unstable: function() {
return useAccordionHeader_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactaria = require("@fluentui/react-aria");
const _accordion = require("../../contexts/accordion");
const _reacticons = require("@fluentui/react-icons");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _accordionItem = require("../../contexts/accordionItem");
const _reactmotion = require("@fluentui/react-motion");
const useAccordionHeader_unstable = (props, ref)=>{
const { inline = false, size = 'medium', ...baseProps } = props;
const state = useAccordionHeaderBase_unstable(baseProps, ref);
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
// 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(_reacticons.ChevronRightRegular, {
style: {
transform: `rotate(${expandIconRotation}deg)`,
transition: `transform ${_reactmotion.motionTokens.durationNormal}ms ease-out`
}
});
}
return {
...state,
inline,
size
};
};
const useAccordionHeaderBase_unstable = (props, ref)=>{
const { icon, button, expandIcon, expandIconPosition = 'start', ...rest } = props;
const { value, disabled, open } = (0, _accordionItem.useAccordionItemContext_unstable)();
const requestToggle = (0, _accordion.useAccordionContext_unstable)((ctx)=>ctx.requestToggle);
/**
* force disabled state on button if accordion isn't collapsible
* and this is the only item opened
*/ const disabledFocusable = (0, _accordion.useAccordionContext_unstable)((ctx)=>!ctx.collapsible && ctx.openItems.length === 1 && open);
const buttonSlot = _reactutilities.slot.always(button, {
elementType: 'button',
defaultProps: {
disabled,
disabledFocusable,
'aria-expanded': open,
type: 'button'
}
});
buttonSlot.onClick = (0, _reactutilities.useEventCallback)((event)=>{
if ((0, _reactutilities.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: _reactutilities.slot.always({
ref: ref,
...rest
}, {
elementType: 'div'
}),
icon: _reactutilities.slot.optional(icon, {
elementType: 'div'
}),
expandIcon: _reactutilities.slot.optional(expandIcon, {
renderByDefault: true,
defaultProps: {
'aria-hidden': true
},
elementType: 'span'
}),
button: (0, _reactaria.useARIAButtonProps)(buttonSlot.as, buttonSlot)
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,30 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAccordionHeaderContextValues_unstable", {
enumerable: true,
get: function() {
return useAccordionHeaderContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
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;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,SAASC,yCAAyCC,KAA2B;IAClF,MAAM,EAAEC,QAAQ,EAAEC,kBAAkB,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGJ;IAErD,MAAMK,kBAAkBP,OAAMQ,OAAO,CACnC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QAACH;QAAUC;QAAoBC;QAAMC;KAAK;IAG5C,OAAO;QAAEC;IAAgB;AAC3B"}

View File

@@ -0,0 +1,372 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
accordionHeaderClassNames: function() {
return accordionHeaderClassNames;
},
useAccordionHeaderStyles_unstable: function() {
return useAccordionHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const accordionHeaderClassNames = {
root: 'fui-AccordionHeader',
button: 'fui-AccordionHeader__button',
expandIcon: 'fui-AccordionHeader__expandIcon',
icon: 'fui-AccordionHeader__icon'
};
const useStyles = /*#__PURE__*/ (0, _react.__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)"
}
]
]
});
const useAccordionHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
state.button.className = (0, _react.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 = (0, _react.mergeClasses)(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);
}
if (state.icon) {
state.icon.className = (0, _react.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,132 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
accordionHeaderClassNames: function() {
return accordionHeaderClassNames;
},
useAccordionHeaderStyles_unstable: function() {
return useAccordionHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const accordionHeaderClassNames = {
root: 'fui-AccordionHeader',
button: 'fui-AccordionHeader__button',
expandIcon: 'fui-AccordionHeader__expandIcon',
icon: 'fui-AccordionHeader__icon'
};
const useStyles = (0, _react.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: (0, _reacttabster.createFocusOutlineStyle)(),
root: {
color: _reacttheme.tokens.colorNeutralForeground1,
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
margin: '0',
borderRadius: _reacttheme.tokens.borderRadiusMedium
},
rootDisabled: {
backgroundImage: 'none',
color: _reacttheme.tokens.colorNeutralForegroundDisabled
},
rootInline: {
display: 'inline-block'
},
button: {
position: 'relative',
width: '100%',
..._react.shorthands.borderWidth('0'),
padding: `0 ${_reacttheme.tokens.spacingHorizontalM} 0 ${_reacttheme.tokens.spacingHorizontalMNudge}`,
minHeight: '44px',
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
..._reacttheme.typographyStyles.body1,
boxSizing: 'border-box'
},
buttonSmall: {
minHeight: '32px',
fontSize: _reacttheme.tokens.fontSizeBase200
},
buttonLarge: {
lineHeight: _reacttheme.tokens.lineHeightBase400,
fontSize: _reacttheme.tokens.fontSizeBase400
},
buttonExtraLarge: {
lineHeight: _reacttheme.tokens.lineHeightBase500,
fontSize: _reacttheme.tokens.fontSizeBase500
},
buttonInline: {
display: 'inline-flex'
},
buttonExpandIconEndNoIcon: {
paddingLeft: _reacttheme.tokens.spacingHorizontalM
},
buttonExpandIconEnd: {
paddingRight: _reacttheme.tokens.spacingHorizontalMNudge
},
buttonDisabled: {
cursor: 'not-allowed'
},
expandIcon: {
height: '100%',
display: 'flex',
alignItems: 'center',
lineHeight: _reacttheme.tokens.lineHeightBase500,
fontSize: _reacttheme.tokens.fontSizeBase500
},
expandIconStart: {
paddingRight: _reacttheme.tokens.spacingHorizontalS
},
expandIconEnd: {
flexGrow: 1,
flexShrink: 1,
flexBasis: '0%',
display: 'flex',
justifyContent: 'flex-end',
paddingLeft: _reacttheme.tokens.spacingHorizontalS
},
icon: {
height: '100%',
display: 'flex',
alignItems: 'center',
paddingRight: _reacttheme.tokens.spacingHorizontalS,
lineHeight: _reacttheme.tokens.lineHeightBase500,
fontSize: _reacttheme.tokens.fontSizeBase500
}
});
const useAccordionHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
state.button.className = (0, _react.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 = (0, _react.mergeClasses)(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);
}
if (state.icon) {
state.icon.className = (0, _react.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,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AccordionItem", {
enumerable: true,
get: function() {
return AccordionItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useAccordionItem = require("./useAccordionItem");
const _useAccordionItemContextValues = require("./useAccordionItemContextValues");
const _renderAccordionItem = require("./renderAccordionItem");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAccordionItemStylesstyles = require("./useAccordionItemStyles.styles");
const AccordionItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useAccordionItem.useAccordionItem_unstable)(props, ref);
const contextValues = (0, _useAccordionItemContextValues.useAccordionItemContextValues_unstable)(state);
(0, _useAccordionItemStylesstyles.useAccordionItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAccordionItemStyles_unstable')(state);
return (0, _renderAccordionItem.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;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;+CACR,kCAAkC;qCAC5C,wBAAwB;qCACzB,kCAAkC;8CAC9B,kCAAkC;AAO3E,MAAMM,gBAAAA,WAAAA,GAAyDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQT,2CAAAA,EAA0BO,OAAOC;IAC/C,MAAME,oBAAgBT,qEAAAA,EAAuCQ;QAE7DL,6DAAAA,EAAgCK;QAEhCN,gDAAAA,EAA4B,mCAAmCM;IAE/D,WAAOP,iDAAAA,EAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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":""}

View File

@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionItem: function() {
return _AccordionItem.AccordionItem;
},
accordionItemClassNames: function() {
return _useAccordionItemStylesstyles.accordionItemClassNames;
},
renderAccordionItem_unstable: function() {
return _renderAccordionItem.renderAccordionItem_unstable;
},
useAccordionItemContextValues_unstable: function() {
return _useAccordionItemContextValues.useAccordionItemContextValues_unstable;
},
useAccordionItemStyles_unstable: function() {
return _useAccordionItemStylesstyles.useAccordionItemStyles_unstable;
},
useAccordionItem_unstable: function() {
return _useAccordionItem.useAccordionItem_unstable;
}
});
const _AccordionItem = require("./AccordionItem");
const _renderAccordionItem = require("./renderAccordionItem");
const _useAccordionItem = require("./useAccordionItem");
const _useAccordionItemContextValues = require("./useAccordionItemContextValues");
const _useAccordionItemStylesstyles = require("./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":";;;;;;;;;;;;eAASA,4BAAa;;;eAWbI,qDAAuB;;;eAHvBH,iDAA4B;;;eAE5BE,qEAAsC;;;eACbE,6DAA+B;;;eAFxDH,2CAAyB;;;+BATJ,kBAAkB;qCAQH,wBAAwB;kCAC3B,qBAAqB;+CACR,kCAAkC;8CAChB,kCAAkC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAccordionItem_unstable", {
enumerable: true,
get: function() {
return renderAccordionItem_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _accordionItem = require("../../contexts/accordionItem");
const renderAccordionItem_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_accordionItem.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":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;+BAIlB,+BAA+B;AAK9D,qCAAqC,CAC1CC,OACAC;QAEAJ,2BAAAA,EAAgCG;IAEhC,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACJ,oCAAAA,EAAAA;YAAsBK,OAAOF,cAAcG,aAAa;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGrF,EAAE"}

View File

@@ -0,0 +1,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAccordionItem_unstable", {
enumerable: true,
get: function() {
return useAccordionItem_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _accordion = require("../../contexts/accordion");
const useAccordionItem_unstable = (props, ref)=>{
const { value, disabled = false, ...rest } = props;
const requestToggle = (0, _accordion.useAccordionContext_unstable)((ctx)=>ctx.requestToggle);
const open = (0, _accordion.useAccordionContext_unstable)((ctx)=>ctx.openItems.includes(value));
const onAccordionHeaderClick = (0, _reactutilities.useEventCallback)((event)=>requestToggle({
event,
value
}));
return {
open,
value,
disabled,
onHeaderClick: onAccordionHeaderClick,
components: {
root: 'div'
},
root: _reactutilities.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;;;;;+BAaaI;;;;;;;iEAXU,QAAQ;gCACQ,4BAA4B;2BAGtB,2BAA2B;AAOjE,kCAAkC,CACvCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE7C,MAAMK,oBAAgBP,uCAAAA,EAA6BQ,CAAAA,MAAOA,IAAID,aAAa;IAC3E,MAAME,WAAOT,uCAAAA,EAA6BQ,CAAAA,MAAOA,IAAIE,SAAS,CAACC,QAAQ,CAACP;IACxE,MAAMQ,yBAAyBb,oCAAAA,EAAiB,CAACc,QAAgCN,cAAc;YAAEM;YAAOT;QAAM;IAE9G,OAAO;QACLK;QACAL;QACAC;QACAS,eAAeF;QACfG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,oBAAAA,CAAKmB,MAAM,CACf;YACEZ;YACAF,KAAKA;YACL,GAAGG,IAAI;QACT,GACA;YAAEY,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,31 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAccordionItemContextValues_unstable", {
enumerable: true,
get: function() {
return useAccordionItemContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
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;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,SAASC,uCAAuCC,KAAyB;IAC9E,4DAA4D;IAC5D,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGJ;IACjD,MAAMK,gBAAgBP,OAAMQ,OAAO,CACjC,IAAO,CAAA;YAAEL;YAAUC;YAAMC;YAAOC;SAAc,CAAA,EAC9C;QAACH;QAAUC;QAAMC;QAAOC;KAAc;IAGxC,OAAO;QAAEC;IAAc;AACzB"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
accordionItemClassNames: function() {
return accordionItemClassNames;
},
useAccordionItemStyles_unstable: function() {
return useAccordionItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const accordionItemClassNames = {
root: 'fui-AccordionItem'
};
const useAccordionItemStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(accordionItemClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"names":["mergeClasses","accordionItemClassNames","root","useAccordionItemStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,uBAAuB;;;mCAGQ;;;;uBAJf,gBAAgB;AACtC,gCAAgC;IACnCC,IAAI,EAAE;AACV,CAAC;AACM,MAAMC,kCAAmCC,KAAK,IAAG;IACpD,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,uBAAuB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACvF,OAAOD,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
accordionItemClassNames: function() {
return accordionItemClassNames;
},
useAccordionItemStyles_unstable: function() {
return useAccordionItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const accordionItemClassNames = {
root: 'fui-AccordionItem'
};
const useAccordionItemStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.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":";;;;;;;;;;;IAIaC,uBAAAA;;;mCAIAE;;;;uBAPgB,iBAAiB;AAGvC,gCAAoE;IACzED,MAAM;AACR,EAAE;AAEK,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,wBAAwBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEtF,OAAOD;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AccordionPanel", {
enumerable: true,
get: function() {
return AccordionPanel;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useAccordionPanel = require("./useAccordionPanel");
const _renderAccordionPanel = require("./renderAccordionPanel");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAccordionPanelStylesstyles = require("./useAccordionPanelStyles.styles");
const AccordionPanel = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useAccordionPanel.useAccordionPanel_unstable)(props, ref);
(0, _useAccordionPanelStylesstyles.useAccordionPanelStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAccordionPanelStyles_unstable')(state);
return (0, _renderAccordionPanel.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;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;qCAC3B,kCAAkC;+CAC7B,mCAAmC;AAO7E,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDJ,+DAAAA,EAAiCK;QAEjCN,gDAAAA,EAA4B,oCAAoCM;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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":""}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionPanel: function() {
return _AccordionPanel.AccordionPanel;
},
accordionPanelClassNames: function() {
return _useAccordionPanelStylesstyles.accordionPanelClassNames;
},
renderAccordionPanel_unstable: function() {
return _renderAccordionPanel.renderAccordionPanel_unstable;
},
useAccordionPanelBase_unstable: function() {
return _useAccordionPanel.useAccordionPanelBase_unstable;
},
useAccordionPanelStyles_unstable: function() {
return _useAccordionPanelStylesstyles.useAccordionPanelStyles_unstable;
},
useAccordionPanel_unstable: function() {
return _useAccordionPanel.useAccordionPanel_unstable;
}
});
const _AccordionPanel = require("./AccordionPanel");
const _renderAccordionPanel = require("./renderAccordionPanel");
const _useAccordionPanel = require("./useAccordionPanel");
const _useAccordionPanelStylesstyles = require("./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":";;;;;;;;;;;;eAASA,8BAAc;;;eAUdI,uDAAwB;;;eAFxBH,mDAA6B;;;eACDE,iDAA8B;;;eAChCE,+DAAgC;;;eAD1DH,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCACI,sBAAsB;+CACtB,mCAAmC"}

View File

@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAccordionPanel_unstable", {
enumerable: true,
get: function() {
return renderAccordionPanel_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderAccordionPanel_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return state.collapseMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.collapseMotion, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
}) : /*#__PURE__*/ (0, _jsxruntime.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":";;;;+BAWaC;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;AAQjD,sCAAsC,CAACC;QAC5CF,2BAAAA,EAAiCE;IACjC,OAAOA,MAAMC,cAAc,GAAA,WAAA,OACzB,eAAA,EAACD,MAAMC,cAAc,EAAA;kBACnB,WAAA,OAAA,eAAA,EAACD,MAAME,IAAI,EAAA,CAAA;2BAGb,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;AAEf,EAAE"}

View File

@@ -0,0 +1,71 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useAccordionPanelBase_unstable: function() {
return useAccordionPanelBase_unstable;
},
useAccordionPanel_unstable: function() {
return useAccordionPanel_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const _reactmotion = require("@fluentui/react-motion");
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
const _accordion = require("../../contexts/accordion");
const _accordionItem = require("../../contexts/accordionItem");
const useAccordionPanel_unstable = (props, ref)=>{
const { collapseMotion, ...baseProps } = props;
const state = useAccordionPanelBase_unstable(baseProps, ref);
const focusableProps = (0, _reacttabster.useTabsterAttributes)({
focusable: {
excludeFromMover: true
}
});
const navigation = (0, _accordion.useAccordionContext_unstable)((ctx)=>ctx.navigation);
return {
...state,
components: {
// eslint-disable-next-line @typescript-eslint/no-deprecated
...state.components,
collapseMotion: _reactmotioncomponentspreview.Collapse
},
root: {
...state.root,
...navigation && focusableProps
},
collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
elementType: _reactmotioncomponentspreview.Collapse,
defaultProps: {
visible: state.open,
unmountOnExit: true
}
})
};
};
const useAccordionPanelBase_unstable = (props, ref)=>{
const { open } = (0, _accordionItem.useAccordionItemContext_unstable)();
return {
open,
components: {
root: 'div'
},
root: _reactutilities.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;;;;;;;;;;;;IAyDaa,8BAAAA;;;IApCAN,0BAAAA;;;;;iEAnBU,QAAQ;gCACV,4BAA4B;8BACZ,0BAA0B;6BAC5B,yBAAyB;8CACnC,4CAA4C;2BACxB,2BAA2B;+BAOvB,+BAA+B;AAOzE,mCAAmC,CACxCC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGC,WAAW,GAAGH;IACzC,MAAMI,QAAQC,+BAA+BF,WAAWF;IACxD,MAAMK,qBAAiBZ,kCAAAA,EAAqB;QAAEa,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,iBAAaZ,uCAAAA,EAA6Ba,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACL,GAAGL,KAAK;QACRO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,MAAMO,UAAU;YACnBT,gBAAgBN,sCAAAA;QAClB;QACAgB,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,GAAIH,cAAcH,cAAc;QAClC;QACAJ,oBAAgBP,+BAAAA,EAAmBK,MAAME,cAAc,EAAE;YACvDW,aAAajB,sCAAAA;YACbkB,cAAc;gBACZC,SAASX,MAAMY,IAAI;gBACnBC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAQK,uCAAuC,CAC5CjB,OACAC;IAEA,MAAM,EAAEe,IAAI,EAAE,OAAGlB,+CAAAA;IAEjB,OAAO;QACLkB;QACAL,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnB,oBAAAA,CAAKyB,MAAM,CACf;YACEjB,KAAKA;YACL,GAAGD,KAAK;QACV,GACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,49 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
accordionPanelClassNames: function() {
return accordionPanelClassNames;
},
useAccordionPanelStyles_unstable: function() {
return useAccordionPanelStyles_unstable;
}
});
const _react = require("@griffel/react");
const accordionPanelClassNames = {
root: 'fui-AccordionPanel'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1axvtxu"
}
}, {
d: [
[
".f1axvtxu{margin:0 var(--spacingHorizontalM);}",
{
p: -1
}
]
]
});
const useAccordionPanelStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(accordionPanelClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"names":["__styles","mergeClasses","tokens","accordionPanelClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useAccordionPanelStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,wBAAwB;;;oCAUiD;eAAhCU;;;uBAZb,gBAAgB;AAElD,iCAAiC;IACpCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAIrB,CAAC;AAC8C,0CAA0CE,KAAK,IAAG;IAC9F,aAAa;IACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,wBAAwB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IACrG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,37 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
accordionPanelClassNames: function() {
return accordionPanelClassNames;
},
useAccordionPanelStyles_unstable: function() {
return useAccordionPanelStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const accordionPanelClassNames = {
root: 'fui-AccordionPanel'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
margin: `0 ${_reacttheme.tokens.spacingHorizontalM}`
}
});
const useAccordionPanelStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.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;;;;;;;;;;;;IAQaG,wBAAAA;;;oCAcAK;;;;uBAnB4B,iBAAiB;4BACnC,wBAAwB;AAIxC,iCAA8F;IACnGJ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,qBAAAA,EAAW;IAC3BI,MAAM;QACJE,QAAQ,CAAC,EAAE,EAAEJ,kBAAAA,CAAOK,kBAAkB,EAAE;IAC1C;AACF;AAGO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,OAAGV,mBAAAA,EAAaE,yBAAyBC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEpG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,31 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionProvider: function() {
return AccordionProvider;
},
useAccordionContext_unstable: function() {
return useAccordionContext_unstable;
}
});
const _reactcontextselector = require("@fluentui/react-context-selector");
const AccordionContext = (0, _reactcontextselector.createContext)(undefined);
const accordionContextDefaultValue = {
openItems: [],
collapsible: false,
multiple: false,
navigation: undefined,
requestToggle () {
/* noop */ }
};
const { Provider: AccordionProvider } = AccordionContext;
const useAccordionContext_unstable = (selector)=>(0, _reactcontextselector.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;;;;;;;;;;;;qBAuC0C;;;gCAC7BY;;;;sCAtCsD,mCAAmC;AAyBtG,MAAMV,uBAAmBF,mCAAAA,EAAiDG;AAE1E,MAAMC,+BAAsD;IAC1DC,WAAW,EAAE;IACbC,aAAa;IACbC,UAAU;IACVC,YAAYL;IACZM;IACE,QAAQ,GACV;AACF;AAEO,MAAM,EAAEC,UAAUC,mBAAmB,GAAGT,iBAAiB;AACzD,MAAMU,+BAA+B,CAAIC,eAC9CZ,wCAAAA,EAAmBC,kBAAkB,CAACY,MAAMV,4BAA4B,GAAKS,SAASC,MAAM"}

View File

@@ -0,0 +1,33 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionHeaderProvider: function() {
return AccordionHeaderProvider;
},
useAccordionHeaderContext_unstable: function() {
return useAccordionHeaderContext_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const AccordionHeaderContext = /*#__PURE__*/ _react.createContext(undefined);
const accordionHeaderContextDefaultValue = {
open: false,
disabled: false,
size: 'medium',
expandIconPosition: 'start'
};
const { Provider: AccordionHeaderProvider } = AccordionHeaderContext;
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;;;;;;;;;;;;IA0ByBU;;;sCAEZC;;;;;iEA1BU,QAAQ;AAa/B,MAAMV,uCAAyBD,OAAME,aAAa,CAChDC;AAGF,MAAMC,qCAAqC;IACzCC,MAAM;IACNC,UAAU;IACVC,MAAM;IACNC,oBAAoB;AACtB;AAEO,MAAM,EAAEC,iCAAiC,EAAE,GAAGR,uBAAuB;AAErE,MAAMU,qCAAqC;QAChDX;WAAAA,CAAAA,oBAAAA,OAAMY,UAAU,CAACX,uBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA4CI;EAAmC"}

View File

@@ -0,0 +1,34 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AccordionItemProvider: function() {
return AccordionItemProvider;
},
useAccordionItemContext_unstable: function() {
return useAccordionItemContext_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const AccordionItemContext = /*#__PURE__*/ _react.createContext(undefined);
const accordionItemContextDefaultValue = {
open: false,
disabled: false,
value: undefined,
onHeaderClick () {
/* noop */ }
};
const { Provider: AccordionItemProvider } = AccordionItemContext;
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;;;;;;;;;;;;IA6ByBU;;;oCAEZC;;;;;iEA7BU,QAAQ;AAc/B,MAAMV,qCAAuBD,OAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAAuE;IAC3EC,MAAM;IACNC,UAAU;IACVC,OAAOJ;IACPK;IACE,QAAQ,GACV;AACF;AAEO,MAAM,EAAEC,+BAA+B,EAAE,GAAGR,qBAAqB;AAEjE,MAAMU,mCAAmC;QACvCX;IAAP,OAAOA,CAAAA,oBAAAA,OAAMY,UAAU,CAACX,qBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA0CI;AACnD,EAAE"}

View File

@@ -0,0 +1,115 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Accordion: function() {
return _Accordion.Accordion;
},
AccordionHeader: function() {
return _AccordionHeader.AccordionHeader;
},
AccordionHeaderProvider: function() {
return _accordionHeader.AccordionHeaderProvider;
},
AccordionItem: function() {
return _AccordionItem.AccordionItem;
},
AccordionItemProvider: function() {
return _accordionItem.AccordionItemProvider;
},
AccordionPanel: function() {
return _AccordionPanel.AccordionPanel;
},
AccordionProvider: function() {
return _accordion.AccordionProvider;
},
accordionClassNames: function() {
return _Accordion.accordionClassNames;
},
accordionHeaderClassNames: function() {
return _AccordionHeader.accordionHeaderClassNames;
},
accordionItemClassNames: function() {
return _AccordionItem.accordionItemClassNames;
},
accordionPanelClassNames: function() {
return _AccordionPanel.accordionPanelClassNames;
},
renderAccordionHeader_unstable: function() {
return _AccordionHeader.renderAccordionHeader_unstable;
},
renderAccordionItem_unstable: function() {
return _AccordionItem.renderAccordionItem_unstable;
},
renderAccordionPanel_unstable: function() {
return _AccordionPanel.renderAccordionPanel_unstable;
},
renderAccordion_unstable: function() {
return _Accordion.renderAccordion_unstable;
},
useAccordionBase_unstable: function() {
return _Accordion.useAccordionBase_unstable;
},
useAccordionContextValues_unstable: function() {
return _Accordion.useAccordionContextValues_unstable;
},
useAccordionContext_unstable: function() {
return _accordion.useAccordionContext_unstable;
},
useAccordionHeaderBase_unstable: function() {
return _AccordionHeader.useAccordionHeaderBase_unstable;
},
useAccordionHeaderContextValues_unstable: function() {
return _AccordionHeader.useAccordionHeaderContextValues_unstable;
},
useAccordionHeaderContext_unstable: function() {
return _accordionHeader.useAccordionHeaderContext_unstable;
},
useAccordionHeaderStyles_unstable: function() {
return _AccordionHeader.useAccordionHeaderStyles_unstable;
},
useAccordionHeader_unstable: function() {
return _AccordionHeader.useAccordionHeader_unstable;
},
useAccordionItemContextValues_unstable: function() {
return _AccordionItem.useAccordionItemContextValues_unstable;
},
useAccordionItemContext_unstable: function() {
return _accordionItem.useAccordionItemContext_unstable;
},
useAccordionItemStyles_unstable: function() {
return _AccordionItem.useAccordionItemStyles_unstable;
},
useAccordionItem_unstable: function() {
return _AccordionItem.useAccordionItem_unstable;
},
useAccordionPanelBase_unstable: function() {
return _AccordionPanel.useAccordionPanelBase_unstable;
},
useAccordionPanelStyles_unstable: function() {
return _AccordionPanel.useAccordionPanelStyles_unstable;
},
useAccordionPanel_unstable: function() {
return _AccordionPanel.useAccordionPanel_unstable;
},
useAccordionStyles_unstable: function() {
return _Accordion.useAccordionStyles_unstable;
},
useAccordion_unstable: function() {
return _Accordion.useAccordion_unstable;
}
});
const _Accordion = require("./Accordion");
const _AccordionItem = require("./AccordionItem");
const _AccordionHeader = require("./AccordionHeader");
const _AccordionPanel = require("./AccordionPanel");
const _accordion = require("./contexts/accordion");
const _accordionItem = require("./contexts/accordionItem");
const _accordionHeader = require("./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":";;;;;;;;;;;IACEA;mCAAS;;mBAoCM;eAAfa;;IA0COiB,uBAAuB;;;IAzD9BvB;2CAAa;;;eAqDNqB,oCAAqB;;;eAnB5BR,8BAAc;;qBAeU;eAAjBM;;;eArEPzB,8BAAmB;;;eAoCnBa,0CAAyB;;;eAfzBN,sCAAuB;;;eAkCvBa,wCAAwB;;;eAlBxBN,+CAA8B;;;eAf9BN,2CAA4B;;IAkC5Ba,6BAA6B;;;;eAvD7BpB,mCAAwB;;;eAIxBI,oCAAyB;;;eAHzBH,6CAAkC;;;eAmERwB,uCAA4B;;;eA5BtDR,gDAA+B;;;eAH/BH,yDAAwC;;;eAuCRe,mDAAkC;;;eAtClEd,kDAAiC;;;eACjCC,4CAA2B;;IAjB3BR,sCAAsC;;;;eAkDRmB,+CAAgC;;;eAjD9DlB,8CAA+B;;;eAC/BC,wCAAyB;;;eAkCzBa,8CAA8B;;IAF9BF;+DAAgC;;;eAChCC,0CAA0B;;;eAvD1BpB,sCAA2B;;;eAC3BC,gCAAqB;;;2BAEhB,cAAc;+BAoBd,kBAAkB;iCAgBlB,oBAAoB;gCAkBpB,mBAAmB;2BASsC,uBAAuB;+BAIf,2BAA2B;iCAIvB,6BAA6B"}

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

Some files were not shown because too many files have changed in this diff Show More