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

1
node_modules/@fluentui/react-drawer/lib/Drawer.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Drawer, drawerClassNames, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './components/Drawer/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Drawer.ts"],"sourcesContent":["export type { DrawerProps, DrawerSlots, DrawerState } from './components/Drawer/index';\nexport {\n Drawer,\n drawerClassNames,\n renderDrawer_unstable,\n useDrawerStyles_unstable,\n useDrawer_unstable,\n} from './components/Drawer/index';\n"],"names":["Drawer","drawerClassNames","renderDrawer_unstable","useDrawerStyles_unstable","useDrawer_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}

View File

@@ -0,0 +1 @@
export { DrawerBody, drawerBodyClassNames, renderDrawerBody_unstable, useDrawerBodyStyles_unstable, useDrawerBody_unstable } from './components/DrawerBody/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DrawerBody.ts"],"sourcesContent":["export type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './components/DrawerBody/index';\nexport {\n DrawerBody,\n drawerBodyClassNames,\n renderDrawerBody_unstable,\n useDrawerBodyStyles_unstable,\n useDrawerBody_unstable,\n} from './components/DrawerBody/index';\n"],"names":["DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable"],"mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}

View File

@@ -0,0 +1 @@
export { DrawerFooter, drawerFooterClassNames, renderDrawerFooter_unstable, useDrawerFooterStyles_unstable, useDrawerFooter_unstable } from './components/DrawerFooter/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DrawerFooter.ts"],"sourcesContent":["export type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './components/DrawerFooter/index';\nexport {\n DrawerFooter,\n drawerFooterClassNames,\n renderDrawerFooter_unstable,\n useDrawerFooterStyles_unstable,\n useDrawerFooter_unstable,\n} from './components/DrawerFooter/index';\n"],"names":["DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":"AACA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}

View File

@@ -0,0 +1 @@
export { DrawerHeader, drawerHeaderClassNames, renderDrawerHeader_unstable, useDrawerHeaderStyles_unstable, useDrawerHeader_unstable } from './components/DrawerHeader/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DrawerHeader.ts"],"sourcesContent":["export type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './components/DrawerHeader/index';\nexport {\n DrawerHeader,\n drawerHeaderClassNames,\n renderDrawerHeader_unstable,\n useDrawerHeaderStyles_unstable,\n useDrawerHeader_unstable,\n} from './components/DrawerHeader/index';\n"],"names":["DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable"],"mappings":"AACA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}

View File

@@ -0,0 +1 @@
export { DrawerHeaderNavigation, drawerHeaderNavigationClassNames, renderDrawerHeaderNavigation_unstable, useDrawerHeaderNavigationStyles_unstable, useDrawerHeaderNavigation_unstable } from './components/DrawerHeaderNavigation/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DrawerHeaderNavigation.ts"],"sourcesContent":["export type {\n DrawerHeaderNavigationProps,\n DrawerHeaderNavigationSlots,\n DrawerHeaderNavigationState,\n} from './components/DrawerHeaderNavigation/index';\nexport {\n DrawerHeaderNavigation,\n drawerHeaderNavigationClassNames,\n renderDrawerHeaderNavigation_unstable,\n useDrawerHeaderNavigationStyles_unstable,\n useDrawerHeaderNavigation_unstable,\n} from './components/DrawerHeaderNavigation/index';\n"],"names":["DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable"],"mappings":"AAKA,SACEA,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,4CAA4C"}

View File

@@ -0,0 +1 @@
export { DrawerHeaderTitle, drawerHeaderTitleClassNames, renderDrawerHeaderTitle_unstable, useDrawerHeaderTitleStyles_unstable, useDrawerHeaderTitle_unstable } from './components/DrawerHeaderTitle/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DrawerHeaderTitle.ts"],"sourcesContent":["export type {\n DrawerHeaderTitleProps,\n DrawerHeaderTitleSlots,\n DrawerHeaderTitleState,\n} from './components/DrawerHeaderTitle/index';\nexport {\n DrawerHeaderTitle,\n drawerHeaderTitleClassNames,\n renderDrawerHeaderTitle_unstable,\n useDrawerHeaderTitleStyles_unstable,\n useDrawerHeaderTitle_unstable,\n} from './components/DrawerHeaderTitle/index';\n"],"names":["DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable"],"mappings":"AAKA,SACEA,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,uCAAuC"}

View File

@@ -0,0 +1 @@
export { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable } from './components/InlineDrawer/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/InlineDrawer.ts"],"sourcesContent":["export type {\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './components/InlineDrawer/index';\nexport {\n InlineDrawer,\n inlineDrawerClassNames,\n renderInlineDrawer_unstable,\n useInlineDrawerStyles_unstable,\n useInlineDrawer_unstable,\n} from './components/InlineDrawer/index';\n"],"names":["InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable"],"mappings":"AAMA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}

View File

@@ -0,0 +1 @@
export { OverlayDrawer, overlayDrawerClassNames, renderOverlayDrawer_unstable, useOverlayDrawerStyles_unstable, useOverlayDrawer_unstable } from './components/OverlayDrawer/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/OverlayDrawer.ts"],"sourcesContent":["export type {\n OverlayDrawerInternalSlots,\n OverlayDrawerProps,\n OverlayDrawerSlots,\n OverlayDrawerState,\n} from './components/OverlayDrawer/index';\nexport {\n OverlayDrawer,\n overlayDrawerClassNames,\n renderOverlayDrawer_unstable,\n useOverlayDrawerStyles_unstable,\n useOverlayDrawer_unstable,\n} from './components/OverlayDrawer/index';\n"],"names":["OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable"],"mappings":"AAMA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}

View File

@@ -0,0 +1,17 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useDrawerContextValue } from '../../contexts/drawerContext';
import { useDrawer_unstable } from './useDrawer';
import { renderDrawer_unstable } from './renderDrawer';
import { useDrawerStyles_unstable } from './useDrawerStyles.styles';
/**
* Drawer contains supplementary content and are used for complex creation, edit, or management experiences.
*/ export const Drawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDrawer_unstable(props, ref);
const contextValue = useDrawerContextValue();
useDrawerStyles_unstable(state);
useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);
return renderDrawer_unstable(state, contextValue);
});
Drawer.displayName = 'Drawer';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\nimport type { DrawerProps } from './Drawer.types';\n\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const Drawer: ForwardRefComponent<DrawerProps> = React.forwardRef((props, ref) => {\n const state = useDrawer_unstable(props, ref);\n const contextValue = useDrawerContextValue();\n\n useDrawerStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n\n return renderDrawer_unstable(state, contextValue);\n});\n\nDrawer.displayName = 'Drawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useDrawer_unstable","renderDrawer_unstable","useDrawerStyles_unstable","Drawer","forwardRef","props","ref","state","contextValue","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAErE,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE;;CAEC,GACD,OAAO,MAAMC,uBAA2CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IACxC,MAAME,eAAeT;IAErBG,yBAAyBK;IACzBT,4BAA4B,4BAA4BS;IAExD,OAAON,sBAAsBM,OAAOC;AACtC,GAAG;AAEHL,OAAOM,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering Drawer
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Drawer/Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\n\nimport type { OverlayDrawerProps, OverlayDrawerSlots } from '../OverlayDrawer';\nimport type { InlineDrawerProps, InlineDrawerSlots } from '../InlineDrawer';\n\nexport type DrawerSlots = Pick<OverlayDrawerSlots, 'root'> | Pick<InlineDrawerSlots, 'root'>;\n\n/**\n * Drawer Props\n */\nexport type DrawerProps = ComponentProps<DrawerSlots> & {\n /**\n * Type of the drawer.\n *\n * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.\n * - 'inline' - Drawer is stacked with the content\n *\n * @default overlay\n */\n type?: 'inline' | 'overlay';\n} & (OverlayDrawerProps | InlineDrawerProps);\n\n/**\n * State used in rendering Drawer\n */\nexport type DrawerState = ComponentState<DrawerSlots>;\n"],"names":[],"mappings":"AAsBA;;CAEC,GACD,WAAsD"}

View File

@@ -0,0 +1,4 @@
export { Drawer } from './Drawer';
export { renderDrawer_unstable } from './renderDrawer';
export { useDrawer_unstable } from './useDrawer';
export { drawerClassNames, useDrawerStyles_unstable } from './useDrawerStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Drawer/index.ts"],"sourcesContent":["export { Drawer } from './Drawer';\nexport type { DrawerProps, DrawerSlots, DrawerState } from './Drawer.types';\nexport { renderDrawer_unstable } from './renderDrawer';\nexport { useDrawer_unstable } from './useDrawer';\nexport { drawerClassNames, useDrawerStyles_unstable } from './useDrawerStyles.styles';\n"],"names":["Drawer","renderDrawer_unstable","useDrawer_unstable","drawerClassNames","useDrawerStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

View File

@@ -0,0 +1,12 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { DrawerProvider } from '../../contexts/drawerContext';
/**
* Render the final JSX of Drawer
*/ export const renderDrawer_unstable = (state, contextValue)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(DrawerProvider, {
value: contextValue,
children: /*#__PURE__*/ _jsx(state.root, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Drawer/renderDrawer.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 { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<DrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.root />\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDJ,YAAyBG;IAEzB,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,IAAI;;AAGjB,EAAE"}

View File

@@ -0,0 +1,28 @@
import * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import { OverlayDrawer } from '../OverlayDrawer';
import { InlineDrawer } from '../InlineDrawer';
/**
* Create the state required to render Drawer.
*
* The returned state can be modified with hooks such as useDrawerStyles_unstable,
* before being passed to renderDrawer_unstable.
*
* @param props - props from this instance of Drawer
* @param ref - reference to root HTMLElement of Drawer
*/ export const useDrawer_unstable = (props, ref)=>{
// casting here to convert a union of functions to a single function with the union of parameters
const elementType = props.type === 'inline' ? InlineDrawer : OverlayDrawer;
const root = slot.always({
ref,
...props
}, {
elementType
});
return {
components: {
root: elementType
},
root
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { OverlayDrawer, type OverlayDrawerProps } from '../OverlayDrawer';\nimport { InlineDrawer, type InlineDrawerProps } from '../InlineDrawer';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n // casting here to convert a union of functions to a single function with the union of parameters\n const elementType = (props.type === 'inline' ? InlineDrawer : OverlayDrawer) as React.FC<\n InlineDrawerProps | OverlayDrawerProps\n >;\n const root: InlineDrawerProps | OverlayDrawerProps = slot.always({ ref, ...props }, { elementType });\n\n return {\n components: { root: elementType },\n root,\n };\n};\n"],"names":["React","slot","OverlayDrawer","InlineDrawer","useDrawer_unstable","props","ref","elementType","type","root","always","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAiC,mBAAmB;AAC1E,SAASC,YAAY,QAAgC,kBAAkB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,iGAAiG;IACjG,MAAMC,cAAeF,MAAMG,IAAI,KAAK,WAAWL,eAAeD;IAG9D,MAAMO,OAA+CR,KAAKS,MAAM,CAAC;QAAEJ;QAAK,GAAGD,KAAK;IAAC,GAAG;QAAEE;IAAY;IAElG,OAAO;QACLI,YAAY;YAAEF,MAAMF;QAAY;QAChCE;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,13 @@
import { mergeClasses } from '@griffel/react';
export const drawerClassNames = {
root: 'fui-Drawer'
};
/**
* Apply styling to the Drawer slots based on the state
*/
export const useDrawerStyles_unstable = state => {
'use no memo';
state.root.className = mergeClasses(drawerClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["mergeClasses","drawerClassNames","root","useDrawerStyles_unstable","state","className"],"sources":["useDrawerStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const drawerClassNames = {\n root: 'fui-Drawer'\n};\n/**\n * Apply styling to the Drawer slots based on the state\n */ export const useDrawerStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjD,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EAChF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,11 @@
import { mergeClasses } from '@griffel/react';
export const drawerClassNames = {
root: 'fui-Drawer'
};
/**
* Apply styling to the Drawer slots based on the state
*/ export const useDrawerStyles_unstable = (state)=>{
'use no memo';
state.root.className = mergeClasses(drawerClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Drawer/useDrawerStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerSlots, DrawerState } from './Drawer.types';\n\nexport const drawerClassNames: SlotClassNames<Omit<DrawerSlots, 'surfaceMotion'>> = {\n root: 'fui-Drawer',\n};\n\n/**\n * Apply styling to the Drawer slots based on the state\n */\nexport const useDrawerStyles_unstable = (state: DrawerState): DrawerState => {\n 'use no memo';\n\n state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","drawerClassNames","root","useDrawerStyles_unstable","state","className"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAK9C,OAAO,MAAMC,mBAAuE;IAClFC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvC;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,iBAAiBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE/E,OAAOD;AACT,EAAE"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useDrawerBody_unstable } from './useDrawerBody';
import { renderDrawerBody_unstable } from './renderDrawerBody';
import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';
/**
* DrawerBody provides with a container for the main content of a Drawer.
*/ export const DrawerBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDrawerBody_unstable(props, ref);
useDrawerBodyStyles_unstable(state);
useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);
return renderDrawerBody_unstable(state);
});
DrawerBody.displayName = 'DrawerBody';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerBody/DrawerBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerBody_unstable } from './useDrawerBody';\nimport { renderDrawerBody_unstable } from './renderDrawerBody';\nimport { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\nimport type { DrawerBodyProps } from './DrawerBody.types';\n\n/**\n * DrawerBody provides with a container for the main content of a Drawer.\n */\nexport const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef((props, ref) => {\n const state = useDrawerBody_unstable(props, ref);\n\n useDrawerBodyStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);\n\n return renderDrawerBody_unstable(state);\n});\n\nDrawerBody.displayName = 'DrawerBody';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerBody_unstable","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","DrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering DrawerBody
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerBody/DrawerBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DrawerBodySlots = {\n root: Slot<'div'>;\n};\n\n/**\n * DrawerBody Props\n */\nexport type DrawerBodyProps = ComponentProps<DrawerBodySlots>;\n\n/**\n * State used in rendering DrawerBody\n */\nexport type DrawerBodyState = ComponentState<DrawerBodySlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAA8D"}

View File

@@ -0,0 +1,4 @@
export { DrawerBody } from './DrawerBody';
export { renderDrawerBody_unstable } from './renderDrawerBody';
export { useDrawerBody_unstable } from './useDrawerBody';
export { drawerBodyClassNames, useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerBody/index.ts"],"sourcesContent":["export { DrawerBody } from './DrawerBody';\nexport type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\nexport { renderDrawerBody_unstable } from './renderDrawerBody';\nexport { useDrawerBody_unstable } from './useDrawerBody';\nexport { drawerBodyClassNames, useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\n"],"names":["DrawerBody","renderDrawerBody_unstable","useDrawerBody_unstable","drawerBodyClassNames","useDrawerBodyStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

View File

@@ -0,0 +1,8 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of DrawerBody
*/ export const renderDrawerBody_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerBody/renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState): JSXElement => {\n assertSlots<DrawerBodySlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerBody_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,89 @@
'use client';
import * as React from 'react';
import { mergeCallbacks, slot, useAnimationFrame, useMergedRefs, useIsomorphicLayoutEffect, getIntrinsicElementProps } from '@fluentui/react-utilities';
import { useDrawerContext_unstable } from '../../contexts/drawerContext';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
/**
* Get the current scroll state of the DrawerBody.
*
* @internal
* @param element - HTMLElement to check scroll state of
*/ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{
if (scrollHeight <= clientHeight) {
return 'none';
}
if (scrollTop === 0) {
return 'top';
}
if (scrollTop + clientHeight === scrollHeight) {
return 'bottom';
}
return 'middle';
};
/**
* Create the state required to render DrawerBody.
*
* The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,
* before being passed to renderDrawerBody_unstable.
*
* @param props - props from this instance of DrawerBody
* @param ref - reference to root HTMLElement of DrawerBody
*/ export const useDrawerBody_unstable = (props, ref)=>{
const { targetDocument } = useFluent();
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
const { setScrollState } = useDrawerContext_unstable();
const scrollRef = React.useRef(null);
const mergedRef = useMergedRefs(ref, scrollRef);
const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();
const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();
const updateScrollState = React.useCallback(()=>{
if (!scrollRef.current) {
return;
}
setScrollState(getScrollState(scrollRef.current));
}, [
setScrollState
]);
const onScroll = React.useCallback(()=>{
cancelScrollAnimationFrame();
setScrollAnimationFrame(updateScrollState);
}, [
cancelScrollAnimationFrame,
setScrollAnimationFrame,
updateScrollState
]);
// Update scroll state on children change
useIsomorphicLayoutEffect(updateScrollState, [
props.children,
updateScrollState
]);
// Update scroll state on mount and when resize occurs
useIsomorphicLayoutEffect(()=>{
if (!scrollRef.current || !(win === null || win === void 0 ? void 0 : win.ResizeObserver)) {
return;
}
const observer = new win.ResizeObserver(()=>setResizeAnimationFrame(updateScrollState));
observer.observe(scrollRef.current);
return ()=>{
observer.disconnect();
cancelResizeAnimationFrame();
};
}, [
setResizeAnimationFrame,
cancelResizeAnimationFrame,
updateScrollState,
win
]);
return {
components: {
root: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
ref: mergedRef,
...props,
onScroll: mergeCallbacks(props.onScroll, onScroll)
}), {
elementType: 'div'
})
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,21 @@
'use client';
import { __resetStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const drawerBodyClassNames = {
root: 'fui-DrawerBody'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__resetStyles("ri6rvx7", null, [".ri6rvx7{padding:0 var(--spacingHorizontalXXL);flex:1;align-self:stretch;position:relative;z-index:1;overflow:auto;}", ".ri6rvx7:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".ri6rvx7:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]);
/**
* Apply styling to the DrawerBody slots based on the state
*/
export const useDrawerBodyStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n },\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,wSAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,30 @@
'use client';
import { makeResetStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const drawerBodyClassNames = {
root: 'fui-DrawerBody'
};
/**
* Styles for the root slot
*/ const useStyles = makeResetStyles({
padding: `0 ${tokens.spacingHorizontalXXL}`,
flex: 1,
alignSelf: 'stretch',
position: 'relative',
zIndex: 1,
overflow: 'auto',
':last-child': {
paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`
},
':first-child': {
paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`
}
});
/**
* Apply styling to the DrawerBody slots based on the state
*/ export const useDrawerBodyStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerBody/useDrawerBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\nexport const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {\n root: 'fui-DrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n});\n\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","padding","spacingHorizontalXXL","flex","alignSelf","position","zIndex","overflow","paddingBottom","paddingTop","useDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,SAAS,CAAC,EAAE,EAAEJ,OAAOK,oBAAoB,EAAE;IAC3CC,MAAM;IACNC,WAAW;IACXC,UAAU;IACVC,QAAQ;IACRC,UAAU;IAEV,eAAe;QACbC,eAAe,CAAC,KAAK,EAAEX,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC7D;IAEA,gBAAgB;QACdO,YAAY,CAAC,KAAK,EAAEZ,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC1D;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASZ;IAEfW,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,qBAAqBC,IAAI,EAAEa,QAAQD,MAAMZ,IAAI,CAACc,SAAS;IAE3F,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useDrawerFooter_unstable } from './useDrawerFooter';
import { renderDrawerFooter_unstable } from './renderDrawerFooter';
import { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';
/**
* DrawerFooter provides a structured footer for the drawer component.
*/ export const DrawerFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDrawerFooter_unstable(props, ref);
useDrawerFooterStyles_unstable(state);
useCustomStyleHook_unstable('useDrawerFooterStyles_unstable')(state);
return renderDrawerFooter_unstable(state);
});
DrawerFooter.displayName = 'DrawerFooter';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerFooter/DrawerFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerFooter_unstable } from './useDrawerFooter';\nimport { renderDrawerFooter_unstable } from './renderDrawerFooter';\nimport { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';\nimport type { DrawerFooterProps } from './DrawerFooter.types';\n\n/**\n * DrawerFooter provides a structured footer for the drawer component.\n */\nexport const DrawerFooter: ForwardRefComponent<DrawerFooterProps> = React.forwardRef((props, ref) => {\n const state = useDrawerFooter_unstable(props, ref);\n\n useDrawerFooterStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerFooterStyles_unstable')(state);\n\n return renderDrawerFooter_unstable(state);\n});\n\nDrawerFooter.displayName = 'DrawerFooter';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerFooter_unstable","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","DrawerFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering DrawerFooter
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerFooter/DrawerFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerFooterSlots = {\n root: Slot<'footer'>;\n};\n\n/**\n * DrawerFooter Props\n */\nexport type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;\n\n/**\n * State used in rendering DrawerFooter\n */\nexport type DrawerFooterState = ComponentState<DrawerFooterSlots> & {\n scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAEE"}

View File

@@ -0,0 +1,4 @@
export { DrawerFooter } from './DrawerFooter';
export { renderDrawerFooter_unstable } from './renderDrawerFooter';
export { useDrawerFooter_unstable } from './useDrawerFooter';
export { drawerFooterClassNames, useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerFooter/index.ts"],"sourcesContent":["export { DrawerFooter } from './DrawerFooter';\nexport type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\nexport { renderDrawerFooter_unstable } from './renderDrawerFooter';\nexport { useDrawerFooter_unstable } from './useDrawerFooter';\nexport { drawerFooterClassNames, useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';\n"],"names":["DrawerFooter","renderDrawerFooter_unstable","useDrawerFooter_unstable","drawerFooterClassNames","useDrawerFooterStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

View File

@@ -0,0 +1,8 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of DrawerFooter
*/ export const renderDrawerFooter_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerFooter/renderDrawerFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Render the final JSX of DrawerFooter\n */\nexport const renderDrawerFooter_unstable = (state: DrawerFooterState): JSXElement => {\n assertSlots<DrawerFooterSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerFooter_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,28 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useDrawerContext_unstable } from '../../contexts/drawerContext';
/**
* Create the state required to render DrawerFooter.
*
* The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,
* before being passed to renderDrawerFooter_unstable.
*
* @param props - props from this instance of DrawerFooter
* @param ref - reference to root HTMLElement of DrawerFooter
*/ export const useDrawerFooter_unstable = (props, ref)=>{
const { scrollState } = useDrawerContext_unstable();
return {
components: {
root: 'footer'
},
root: slot.always(getIntrinsicElementProps('footer', {
ref,
role: 'none',
...props
}), {
elementType: 'footer'
}),
scrollState
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooter.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n const { scrollState } = useDrawerContext_unstable();\n\n return {\n components: {\n root: 'footer',\n },\n\n root: slot.always(\n getIntrinsicElementProps('footer', {\n ref,\n role: 'none', // until header and footer elements can be scoped to a dialog, this is needed\n ...props,\n }),\n { elementType: 'footer' },\n ),\n\n scrollState,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerFooter_unstable","props","ref","scrollState","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E,SAASC,yBAAyB,QAAQ,+BAA+B;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGJ;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,UAAU;YACjCK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAS;QAG1BL;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,43 @@
'use client';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';
export const drawerFooterClassNames = {
root: 'fui-DrawerFooter'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__resetStyles("r1snvl2j", null, [".r1snvl2j{width:100%;max-width:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;position:relative;z-index:2;}"]);
const useDrawerFooterStyles = /*#__PURE__*/__styles({
separator: {
Baz25je: "f16b62f1",
Brfgrao: "f1j7ml58",
mdwyqc: ["f1f351id", "f1fzr1x6"],
Fbdkly: ["f1fzr1x6", "f1f351id"],
vz82u: "f1dhznln",
cmx5o7: "f1p5zmk",
h7gv66: "f1ljjo4k",
B8bqphf: "ffd2d9j",
wjn42g: "ffdt3s5",
Ftih45: "f1wl9k8s",
Bciustq: "ffi060y"
},
separatorVisible: {
vz82u: "f1b3qyzu"
}
}, {
d: [".f16b62f1::before{height:1px;}", ".f1j7ml58::before{position:absolute;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".f1dhznln::before{opacity:0;}", ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}", ".f1ljjo4k::before{transition-duration:var(--durationNormal);}", ".ffd2d9j::before{transition-property:opacity;}", ".ffdt3s5::before{transition-timing-function:var(--curveEasyEase);}", ".f1wl9k8s::before{content:\"\";}", ".ffi060y::before{top:0;}", ".f1b3qyzu::before{opacity:1;}"]
});
/**
* Apply styling to the DrawerFooter slots based on the state
*/
export const useDrawerFooterStyles_unstable = state => {
'use no memo';
const styles = useStyles();
const rootStyles = useDrawerFooterStyles();
state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Baz25je","Brfgrao","mdwyqc","Fbdkly","vz82u","cmx5o7","h7gv66","B8bqphf","wjn42g","Ftih45","Bciustq","separatorVisible","d","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0\n }\n },\n separatorVisible: {\n '::before': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'top'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,oSAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,KAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1CgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,KAAK,CACR,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,46 @@
'use client';
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';
export const drawerFooterClassNames = {
root: 'fui-DrawerFooter'
};
/**
* Styles for the root slot
*/ const useStyles = makeResetStyles({
width: '100%',
maxWidth: '100%',
padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
columnGap: tokens.spacingHorizontalS,
boxSizing: 'border-box',
position: 'relative',
zIndex: 2
});
const useDrawerFooterStyles = makeStyles({
separator: {
'::before': {
...drawerSeparatorStyles,
top: 0
}
},
separatorVisible: {
'::before': {
opacity: 1
}
}
});
/**
* Apply styling to the DrawerFooter slots based on the state
*/ export const useDrawerFooterStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const rootStyles = useDrawerFooterStyles();
state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
'middle',
'top'
].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\nexport const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {\n root: 'fui-DrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0,\n },\n },\n\n separatorVisible: {\n '::before': {\n opacity: 1,\n },\n },\n});\n\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {\n 'use no memo';\n\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n\n state.root.className = mergeClasses(\n drawerFooterClassNames.root,\n styles,\n state.scrollState !== 'none' && rootStyles.separator,\n ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalL","spacingHorizontalXXL","spacingVerticalXXL","display","justifyContent","alignItems","columnGap","spacingHorizontalS","boxSizing","position","zIndex","useDrawerFooterStyles","separator","top","separatorVisible","opacity","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,OAAOQ,gBAAgB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,kBAAkB,EAAE;IACjGC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,WAAWd,OAAOe,kBAAkB;IACpCC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,YAAY;YACV,GAAGnB,qBAAqB;YACxBoB,KAAK;QACP;IACF;IAEAC,kBAAkB;QAChB,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnBM,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAM,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC5EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useDrawerHeader_unstable } from './useDrawerHeader';
import { renderDrawerHeader_unstable } from './renderDrawerHeader';
import { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';
/**
* DrawerHeader provides a structured header for the drawer component.
*/ export const DrawerHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDrawerHeader_unstable(props, ref);
useDrawerHeaderStyles_unstable(state);
useCustomStyleHook_unstable('useDrawerHeaderStyles_unstable')(state);
return renderDrawerHeader_unstable(state);
});
DrawerHeader.displayName = 'DrawerHeader';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeader/DrawerHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerHeader_unstable } from './useDrawerHeader';\nimport { renderDrawerHeader_unstable } from './renderDrawerHeader';\nimport { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';\nimport type { DrawerHeaderProps } from './DrawerHeader.types';\n\n/**\n * DrawerHeader provides a structured header for the drawer component.\n */\nexport const DrawerHeader: ForwardRefComponent<DrawerHeaderProps> = React.forwardRef((props, ref) => {\n const state = useDrawerHeader_unstable(props, ref);\n\n useDrawerHeaderStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerHeaderStyles_unstable')(state);\n\n return renderDrawerHeader_unstable(state);\n});\n\nDrawerHeader.displayName = 'DrawerHeader';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerHeader_unstable","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","DrawerHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering DrawerHeader
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeader/DrawerHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerHeaderSlots = {\n /**\n * The root of the DrawerHeader.\n */\n root: Slot<'header'>;\n};\n\n/**\n * DrawerHeader Props\n */\nexport type DrawerHeaderProps = ComponentProps<DrawerHeaderSlots>;\n\n/**\n * State used in rendering DrawerHeader\n */\nexport type DrawerHeaderState = ComponentState<DrawerHeaderSlots> & {\n scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAEE"}

View File

@@ -0,0 +1,4 @@
export { DrawerHeader } from './DrawerHeader';
export { renderDrawerHeader_unstable } from './renderDrawerHeader';
export { useDrawerHeader_unstable } from './useDrawerHeader';
export { drawerHeaderClassNames, useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeader/index.ts"],"sourcesContent":["export { DrawerHeader } from './DrawerHeader';\nexport type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\nexport { renderDrawerHeader_unstable } from './renderDrawerHeader';\nexport { useDrawerHeader_unstable } from './useDrawerHeader';\nexport { drawerHeaderClassNames, useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';\n"],"names":["DrawerHeader","renderDrawerHeader_unstable","useDrawerHeader_unstable","drawerHeaderClassNames","useDrawerHeaderStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

View File

@@ -0,0 +1,8 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of DrawerHeader
*/ export const renderDrawerHeader_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeader/renderDrawerHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState): JSXElement => {\n assertSlots<DrawerHeaderSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeader_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,28 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useDrawerContext_unstable } from '../../contexts/drawerContext';
/**
* Create the state required to render DrawerHeader.
*
* The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,
* before being passed to renderDrawerHeader_unstable.
*
* @param props - props from this instance of DrawerHeader
* @param ref - reference to root HTMLElement of DrawerHeader
*/ export const useDrawerHeader_unstable = (props, ref)=>{
const { scrollState } = useDrawerContext_unstable();
return {
components: {
root: 'header'
},
root: slot.always(getIntrinsicElementProps('header', {
ref,
role: 'none',
...props
}), {
elementType: 'header'
}),
scrollState
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n const { scrollState } = useDrawerContext_unstable();\n\n return {\n components: {\n root: 'header',\n },\n\n root: slot.always(\n getIntrinsicElementProps('header', {\n ref,\n role: 'none', // until header and footer elements can be scoped to a dialog, this is needed\n ...props,\n }),\n { elementType: 'header' },\n ),\n\n scrollState,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerHeader_unstable","props","ref","scrollState","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGJ;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,UAAU;YACjCK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAS;QAG1BL;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,43 @@
'use client';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';
export const drawerHeaderClassNames = {
root: 'fui-DrawerHeader'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__resetStyles("r3ovn4i", null, [".r3ovn4i{width:100%;max-width:100%;padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;position:relative;z-index:2;}"]);
const useDrawerHeaderStyles = /*#__PURE__*/__styles({
separator: {
Dlnsje: "fxnjyrl",
E3zdtr: "f1mdlcz9",
B1piin3: ["f15yvnhg", "f1n6gb5g"],
Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
Bp15pi3: "f1564nw5",
Bjyk6c5: "fdlpgxj",
F2fol1: "f15cmg8x",
Ba2ppi3: "f3f8dgl",
B1dyfl9: "fjvo4va",
Bsft5z2: "f13zj6fq",
By385i5: "fo72kxq"
},
separatorVisible: {
Bp15pi3: "fjsqi2x"
}
}, {
d: [".fxnjyrl::after{height:1px;}", ".f1mdlcz9::after{position:absolute;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".f1564nw5::after{opacity:0;}", ".fdlpgxj::after{background-color:var(--colorNeutralStroke1);}", ".f15cmg8x::after{transition-duration:var(--durationNormal);}", ".f3f8dgl::after{transition-property:opacity;}", ".fjvo4va::after{transition-timing-function:var(--curveEasyEase);}", ".f13zj6fq::after{content:\"\";}", ".fo72kxq::after{bottom:0;}", ".fjsqi2x::after{opacity:1;}"]
});
/**
* Apply styling to the DrawerHeader slots based on the state
*/
export const useDrawerHeaderStyles_unstable = state => {
'use no memo';
const styles = useStyles();
const rootStyles = useDrawerHeaderStyles();
state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","Dlnsje","E3zdtr","B1piin3","Eqx8gd","Bp15pi3","Bjyk6c5","F2fol1","Ba2ppi3","B1dyfl9","Bsft5z2","By385i5","separatorVisible","d","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0\n }\n },\n separatorVisible: {\n '::after': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'bottom'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sRAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1CgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,QAAQ,CACX,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,46 @@
'use client';
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';
export const drawerHeaderClassNames = {
root: 'fui-DrawerHeader'
};
/**
* Styles for the root slot
*/ const useStyles = makeResetStyles({
width: '100%',
maxWidth: '100%',
padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,
gap: tokens.spacingHorizontalS,
alignSelf: 'stretch',
display: 'flex',
flexDirection: 'column',
boxSizing: 'border-box',
position: 'relative',
zIndex: 2
});
const useDrawerHeaderStyles = makeStyles({
separator: {
'::after': {
...drawerSeparatorStyles,
bottom: 0
}
},
separatorVisible: {
'::after': {
opacity: 1
}
}
});
/**
* Apply styling to the DrawerHeader slots based on the state
*/ export const useDrawerHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const rootStyles = useDrawerHeaderStyles();
state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
'middle',
'bottom'
].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\n\nexport const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {\n root: 'fui-DrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0,\n },\n },\n\n separatorVisible: {\n '::after': {\n opacity: 1,\n },\n },\n});\n\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {\n 'use no memo';\n\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n\n state.root.className = mergeClasses(\n drawerHeaderClassNames.root,\n styles,\n state.scrollState !== 'none' && rootStyles.separator,\n ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalXXL","spacingHorizontalXXL","spacingVerticalS","gap","spacingHorizontalS","alignSelf","display","flexDirection","boxSizing","position","zIndex","useDrawerHeaderStyles","separator","bottom","separatorVisible","opacity","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,OAAOQ,kBAAkB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,gBAAgB,EAAE;IACjGC,KAAKX,OAAOY,kBAAkB;IAC9BC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,WAAW;YACT,GAAGnB,qBAAqB;YACxBoB,QAAQ;QACV;IACF;IAEAC,kBAAkB;QAChB,WAAW;YACTC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnBM,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAS,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC/EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useDrawerHeaderNavigation_unstable } from './useDrawerHeaderNavigation';
import { renderDrawerHeaderNavigation_unstable } from './renderDrawerHeaderNavigation';
import { useDrawerHeaderNavigationStyles_unstable } from './useDrawerHeaderNavigationStyles.styles';
/**
* DrawerHeaderNavigation provides a header navigation area for the Drawer.
*/ export const DrawerHeaderNavigation = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDrawerHeaderNavigation_unstable(props, ref);
useDrawerHeaderNavigationStyles_unstable(state);
useCustomStyleHook_unstable('useDrawerHeaderNavigationStyles_unstable')(state);
return renderDrawerHeaderNavigation_unstable(state);
});
DrawerHeaderNavigation.displayName = 'DrawerHeaderNavigation';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerHeaderNavigation_unstable } from './useDrawerHeaderNavigation';\nimport { renderDrawerHeaderNavigation_unstable } from './renderDrawerHeaderNavigation';\nimport { useDrawerHeaderNavigationStyles_unstable } from './useDrawerHeaderNavigationStyles.styles';\nimport type { DrawerHeaderNavigationProps } from './DrawerHeaderNavigation.types';\n\n/**\n * DrawerHeaderNavigation provides a header navigation area for the Drawer.\n */\nexport const DrawerHeaderNavigation: ForwardRefComponent<DrawerHeaderNavigationProps> = React.forwardRef(\n (props, ref) => {\n const state = useDrawerHeaderNavigation_unstable(props, ref);\n\n useDrawerHeaderNavigationStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerHeaderNavigationStyles_unstable')(state);\n\n return renderDrawerHeaderNavigation_unstable(state);\n },\n);\n\nDrawerHeaderNavigation.displayName = 'DrawerHeaderNavigation';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerHeaderNavigation_unstable","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","DrawerHeaderNavigation","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAGpG;;CAEC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQP,mCAAmCK,OAAOC;IAExDJ,yCAAyCK;IACzCR,4BAA4B,4CAA4CQ;IAExE,OAAON,sCAAsCM;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering DrawerHeaderNavigation
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DrawerHeaderNavigationSlots = {\n root: Slot<'nav'>;\n};\n\n/**\n * DrawerHeaderNavigation Props\n */\nexport type DrawerHeaderNavigationProps = ComponentProps<DrawerHeaderNavigationSlots>;\n\n/**\n * State used in rendering DrawerHeaderNavigation\n */\nexport type DrawerHeaderNavigationState = ComponentState<DrawerHeaderNavigationSlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAAsF"}

View File

@@ -0,0 +1,4 @@
export { DrawerHeaderNavigation } from './DrawerHeaderNavigation';
export { renderDrawerHeaderNavigation_unstable } from './renderDrawerHeaderNavigation';
export { useDrawerHeaderNavigation_unstable } from './useDrawerHeaderNavigation';
export { drawerHeaderNavigationClassNames, useDrawerHeaderNavigationStyles_unstable } from './useDrawerHeaderNavigationStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/index.ts"],"sourcesContent":["export { DrawerHeaderNavigation } from './DrawerHeaderNavigation';\nexport type {\n DrawerHeaderNavigationProps,\n DrawerHeaderNavigationSlots,\n DrawerHeaderNavigationState,\n} from './DrawerHeaderNavigation.types';\nexport { renderDrawerHeaderNavigation_unstable } from './renderDrawerHeaderNavigation';\nexport { useDrawerHeaderNavigation_unstable } from './useDrawerHeaderNavigation';\nexport {\n drawerHeaderNavigationClassNames,\n useDrawerHeaderNavigationStyles_unstable,\n} from './useDrawerHeaderNavigationStyles.styles';\n"],"names":["DrawerHeaderNavigation","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigation_unstable","drawerHeaderNavigationClassNames","useDrawerHeaderNavigationStyles_unstable"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,2BAA2B;AAMlE,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SACEC,gCAAgC,EAChCC,wCAAwC,QACnC,2CAA2C"}

View File

@@ -0,0 +1,8 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of DrawerHeaderNavigation
*/ export const renderDrawerHeaderNavigation_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Render the final JSX of DrawerHeaderNavigation\n */\nexport const renderDrawerHeaderNavigation_unstable = (state: DrawerHeaderNavigationState): JSXElement => {\n assertSlots<DrawerHeaderNavigationSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeaderNavigation_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDF,YAAyCE;IAEzC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,23 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Create the state required to render DrawerHeaderNavigation.
*
* The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,
* before being passed to renderDrawerHeaderNavigation_unstable.
*
* @param props - props from this instance of DrawerHeaderNavigation
* @param ref - reference to root HTMLElement of DrawerHeaderNavigation
*/ export const useDrawerHeaderNavigation_unstable = (props, ref)=>{
return {
components: {
root: 'nav'
},
root: slot.always(getIntrinsicElementProps('nav', {
ref,
...props
}), {
elementType: 'nav'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n props: DrawerHeaderNavigationProps,\n ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n return {\n components: {\n root: 'nav',\n },\n\n root: slot.always(\n getIntrinsicElementProps('nav', {\n ref,\n ...props,\n }),\n { elementType: 'nav' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerHeaderNavigation_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,21 @@
'use client';
import { __resetStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const drawerHeaderNavigationClassNames = {
root: 'fui-DrawerHeaderNavigation'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__resetStyles("r1ig4pwh", null, [".r1ig4pwh{margin:calc(var(--spacingVerticalS) * -1) calc(var(--spacingHorizontalL) * -1);}"]);
/**
* Apply styling to the DrawerHeaderNavigation slots based on the state
*/
export const useDrawerHeaderNavigationStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`\n});\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,iHAErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,19 @@
'use client';
import { makeResetStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const drawerHeaderNavigationClassNames = {
root: 'fui-DrawerHeaderNavigation'
};
/**
* Styles for the root slot
*/ const useStyles = makeResetStyles({
margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`
});
/**
* Apply styling to the DrawerHeaderNavigation slots based on the state
*/ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\nexport const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots> = {\n root: 'fui-DrawerHeaderNavigation',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`,\n});\n\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = (\n state: DrawerHeaderNavigationState,\n): DrawerHeaderNavigationState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","margin","spacingVerticalS","spacingHorizontalL","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,QAAQ,CAAC,KAAK,EAAEJ,OAAOK,gBAAgB,CAAC,YAAY,EAAEL,OAAOM,kBAAkB,CAAC,MAAM,CAAC;AACzF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAASN;IAEfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,iCAAiCC,IAAI,EAAEO,QAAQD,MAAMN,IAAI,CAACQ,SAAS;IAEvG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';
import { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';
import { useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';
/**
* DrawerHeader provides a structured header for the drawer component.
*/ export const DrawerHeaderTitle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDrawerHeaderTitle_unstable(props, ref);
useDrawerHeaderTitleStyles_unstable(state);
useCustomStyleHook_unstable('useDrawerHeaderTitleStyles_unstable')(state);
return renderDrawerHeaderTitle_unstable(state);
});
DrawerHeaderTitle.displayName = 'DrawerHeaderTitle';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderTitle/DrawerHeaderTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';\nimport { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';\nimport { useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';\nimport type { DrawerHeaderTitleProps } from './DrawerHeaderTitle.types';\n\n/**\n * DrawerHeader provides a structured header for the drawer component.\n */\nexport const DrawerHeaderTitle: ForwardRefComponent<DrawerHeaderTitleProps> = React.forwardRef((props, ref) => {\n const state = useDrawerHeaderTitle_unstable(props, ref);\n\n useDrawerHeaderTitleStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerHeaderTitleStyles_unstable')(state);\n\n return renderDrawerHeaderTitle_unstable(state);\n});\n\nDrawerHeaderTitle.displayName = 'DrawerHeaderTitle';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerHeaderTitle_unstable","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","DrawerHeaderTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F;;CAEC,GACD,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQP,8BAA8BK,OAAOC;IAEnDJ,oCAAoCK;IACpCR,4BAA4B,uCAAuCQ;IAEnE,OAAON,iCAAiCM;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering DrawerHeaderTitle
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderTitle/DrawerHeaderTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DrawerHeaderTitleSlots = {\n root: Slot<'div'>;\n\n /**\n * By default this is a h2, but can be any heading or div.\n * If `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n */\n heading?: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n\n /**\n * Action slot for the close button\n */\n action?: Slot<'div'>;\n};\n\n/**\n * DrawerHeaderTitle Props\n */\nexport type DrawerHeaderTitleProps = ComponentProps<DrawerHeaderTitleSlots>;\n\n/**\n * State used in rendering DrawerHeaderTitle\n */\nexport type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;\n"],"names":[],"mappings":"AAsBA;;CAEC,GACD,WAA4E"}

View File

@@ -0,0 +1,4 @@
export { DrawerHeaderTitle } from './DrawerHeaderTitle';
export { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';
export { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';
export { drawerHeaderTitleClassNames, useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderTitle/index.ts"],"sourcesContent":["export { DrawerHeaderTitle } from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nexport { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';\nexport { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';\nexport { drawerHeaderTitleClassNames, useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';\n"],"names":["DrawerHeaderTitle","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitle_unstable","drawerHeaderTitleClassNames","useDrawerHeaderTitleStyles_unstable"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,2BAA2B,EAAEC,mCAAmC,QAAQ,sCAAsC"}

View File

@@ -0,0 +1,13 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of DrawerHeaderTitle
*/ export const renderDrawerHeaderTitle_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.heading && /*#__PURE__*/ _jsx(state.heading, {}),
state.action && /*#__PURE__*/ _jsx(state.action, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState): JSXElement => {\n assertSlots<DrawerHeaderTitleSlots>(state);\n\n return (\n <state.root>\n {state.heading && <state.heading />}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderDrawerHeaderTitle_unstable","state","root","heading","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,OAAO,kBAAI,KAACF,MAAME,OAAO;YAC/BF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}

View File

@@ -0,0 +1,40 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useDialogContext_unstable } from '@fluentui/react-dialog';
/**
* Create the state required to render DrawerHeaderTitle.
*
* The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,
* before being passed to renderDrawerHeaderTitle_unstable.
*
* @param props - props from this instance of DrawerHeaderTitle
* @param ref - reference to root HTMLElement of DrawerHeaderTitle
*/ export const useDrawerHeaderTitle_unstable = (props, ref)=>{
const { children, heading } = props;
const headingId = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
return {
components: {
root: 'div',
heading: 'h2',
action: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
ref,
...props
}), {
elementType: 'div'
}),
heading: slot.optional(heading, {
defaultProps: {
id: headingId,
children
},
renderByDefault: true,
elementType: 'h2'
}),
action: slot.optional(props.action, {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n props: DrawerHeaderTitleProps,\n ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n const { children, heading } = props;\n const headingId = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n return {\n components: {\n root: 'div',\n heading: 'h2',\n action: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n heading: slot.optional(heading, {\n defaultProps: {\n id: headingId,\n children,\n },\n renderByDefault: true,\n elementType: 'h2',\n }),\n action: slot.optional(props.action, {\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","ctx","dialogTitleId","components","root","action","always","elementType","optional","defaultProps","id","renderByDefault"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYN,0BAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,KAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,KAAKe,QAAQ,CAACZ,MAAMS,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,60 @@
'use client';
import { __styles, mergeClasses } from '@griffel/react';
import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';
import { tokens } from '@fluentui/react-theme';
export const drawerHeaderTitleClassNames = {
root: 'fui-DrawerHeaderTitle',
heading: 'fui-DrawerHeaderTitle__heading',
action: 'fui-DrawerHeaderTitle__action'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__styles({
root: {
mc9l5x: "f22iagw",
Brf1p80: "f1869bpl",
Bt984gj: "f122n59",
i8kkvl: "fsnqrgy"
},
action: {
t21cq0: ["faqnl2i", "fd75udd"]
}
}, {
d: [".f22iagw{display:flex;}", ".f1869bpl{justify-content:space-between;}", ".f122n59{align-items:center;}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}", ".faqnl2i{margin-right:calc(var(--spacingHorizontalS) * -1);}", ".fd75udd{margin-left:calc(var(--spacingHorizontalS) * -1);}"]
});
/**
* Apply styling to the DrawerHeaderTitle slots based on the state
*/
export const useDrawerHeaderTitleStyles_unstable = state => {
'use no memo';
const styles = useStyles();
const {
heading: root = {},
action,
// We should not use components to pass along the base element type of a slot
// but there's no way to retrieve the element type of a slot from the slot definition
// right now without using SLOT_ELEMENT_TYPE_SYMBOL
// TODO: create a method to retrieve the element type of a slot
// eslint-disable-next-line @typescript-eslint/no-deprecated
components
} = state;
useDialogTitleStyles_unstable({
components: {
root: components.heading,
action: components.action
},
root,
action
});
state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
if (state.heading) {
state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);
}
if (state.action) {
state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS\n },\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot\n // but there's no way to retrieve the element type of a slot from the slot definition\n // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n // TODO: create a method to retrieve the element type of a slot\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components } = state;\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action\n },\n root,\n action\n });\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n if (state.heading) {\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n if (state.action) {\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAEE,MAAM;IAAE;IACpC;IACA;IACA;IACA;IACAW;EAAW,CAAC,GAAGF,KAAK;EACpBd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACFS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACdS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,50 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';
import { tokens } from '@fluentui/react-theme';
export const drawerHeaderTitleClassNames = {
root: 'fui-DrawerHeaderTitle',
heading: 'fui-DrawerHeaderTitle__heading',
action: 'fui-DrawerHeaderTitle__action'
};
/**
* Styles for the root slot
*/ const useStyles = makeStyles({
root: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
columnGap: tokens.spacingHorizontalS
},
action: {
marginRight: `calc(${tokens.spacingHorizontalS} * -1)`
}
});
/**
* Apply styling to the DrawerHeaderTitle slots based on the state
*/ export const useDrawerHeaderTitleStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot
// but there's no way to retrieve the element type of a slot from the slot definition
// right now without using SLOT_ELEMENT_TYPE_SYMBOL
// TODO: create a method to retrieve the element type of a slot
// eslint-disable-next-line @typescript-eslint/no-deprecated
components } = state;
useDialogTitleStyles_unstable({
components: {
root: components.heading,
action: components.action
},
root,
action
});
state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
if (state.heading) {
state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);
}
if (state.action) {
state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\nexport const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n },\n\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} * -1)`,\n },\n});\n\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleState): DrawerHeaderTitleState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const {\n heading: root = {},\n action,\n // We should not use components to pass along the base element type of a slot\n // but there's no way to retrieve the element type of a slot from the slot definition\n // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n // TODO: create a method to retrieve the element type of a slot\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components,\n } = state;\n\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action,\n },\n root,\n action,\n });\n\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n\n if (state.heading) {\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n\n if (state.action) {\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","display","justifyContent","alignItems","columnGap","spacingHorizontalS","marginRight","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BK,MAAM;QACJI,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,WAAWT,OAAOU,kBAAkB;IACtC;IAEAN,QAAQ;QACNO,aAAa,CAAC,KAAK,EAAEX,OAAOU,kBAAkB,CAAC,MAAM,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAAST;IAEf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EACN,6EAA6E;IAC7E,qFAAqF;IACrF,mDAAmD;IACnD,+DAA+D;IAC/D,4DAA4D;IAC5DW,UAAU,EACX,GAAGF;IAEJd,8BAA8B;QAC5BgB,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;IAEAS,MAAMX,IAAI,CAACc,SAAS,GAAGlB,aAAaG,4BAA4BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAEvG,IAAIH,MAAMV,OAAO,EAAE;QACjBU,MAAMV,OAAO,CAACa,SAAS,GAAGlB,aAAaG,4BAA4BE,OAAO,EAAEU,MAAMV,OAAO,CAACa,SAAS;IACrG;IAEA,IAAIH,MAAMT,MAAM,EAAE;QAChBS,MAAMT,MAAM,CAACY,SAAS,GAAGlB,aAAaG,4BAA4BG,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACY,SAAS;IACjH;IAEA,OAAOH;AACT,EAAE"}

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