Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Drawer", {
enumerable: true,
get: function() {
return Drawer;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _drawerContext = require("../../contexts/drawerContext");
const _useDrawer = require("./useDrawer");
const _renderDrawer = require("./renderDrawer");
const _useDrawerStylesstyles = require("./useDrawerStyles.styles");
const Drawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDrawer.useDrawer_unstable)(props, ref);
const contextValue = (0, _drawerContext.useDrawerContextValue)();
(0, _useDrawerStylesstyles.useDrawerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerStyles_unstable')(state);
return (0, _renderDrawer.renderDrawer_unstable)(state, contextValue);
});
Drawer.displayName = 'Drawer';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * 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":["Drawer","React","forwardRef","props","ref","state","useDrawer_unstable","contextValue","useDrawerContextValue","useDrawerStyles_unstable","useCustomStyleHook_unstable","renderDrawer_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;qCAEqB;+BAEN;2BAEH;8BACG;uCACG;AAMlC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IACxC,MAAMG,eAAeC,IAAAA,oCAAAA;IAErBC,IAAAA,+CAAAA,EAAyBJ;IACzBK,IAAAA,gDAAAA,EAA4B,4BAA4BL;IAExD,OAAOM,IAAAA,mCAAAA,EAAsBN,OAAOE;AACtC;AAEAP,OAAOY,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering Drawer
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Drawer: function() {
return _Drawer.Drawer;
},
drawerClassNames: function() {
return _useDrawerStylesstyles.drawerClassNames;
},
renderDrawer_unstable: function() {
return _renderDrawer.renderDrawer_unstable;
},
useDrawerStyles_unstable: function() {
return _useDrawerStylesstyles.useDrawerStyles_unstable;
},
useDrawer_unstable: function() {
return _useDrawer.useDrawer_unstable;
}
});
const _Drawer = require("./Drawer");
const _renderDrawer = require("./renderDrawer");
const _useDrawer = require("./useDrawer");
const _useDrawerStylesstyles = require("./useDrawerStyles.styles");
@@ -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","drawerClassNames","renderDrawer_unstable","useDrawerStyles_unstable","useDrawer_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAINC,gBAAgB;eAAhBA,uCAAgB;;IAFhBC,qBAAqB;eAArBA,mCAAqB;;IAEHC,wBAAwB;eAAxBA,+CAAwB;;IAD1CC,kBAAkB;eAAlBA,6BAAkB;;;wBAHJ;8BAEe;2BACH;uCACwB"}
@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDrawer_unstable", {
enumerable: true,
get: function() {
return renderDrawer_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _drawerContext = require("../../contexts/drawerContext");
const renderDrawer_unstable = (state, contextValue)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
value: contextValue,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};
@@ -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 { 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) => {\n assertSlots<DrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.root />\n </DrawerProvider>\n );\n};\n"],"names":["renderDrawer_unstable","state","contextValue","assertSlots","_jsx","DrawerProvider","value","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;+BACuB;AAO5C,MAAMA,wBAAwB,CAACC,OAAoBC;IACxDC,IAAAA,2BAAAA,EAAyBF;IAEzB,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,6BAAAA,EAAAA;QAAeC,OAAOJ;kBACrB,WAAA,GAAAE,IAAAA,eAAA,EAACH,MAAMM,IAAI,EAAA,CAAA;;AAGjB"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDrawer_unstable", {
enumerable: true,
get: function() {
return useDrawer_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _OverlayDrawer = require("../OverlayDrawer");
const _InlineDrawer = require("../InlineDrawer");
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.InlineDrawer : _OverlayDrawer.OverlayDrawer;
const root = _reactutilities.slot.always({
ref,
...props
}, {
elementType
});
return {
components: {
root: elementType
},
root
};
};
@@ -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":["useDrawer_unstable","props","ref","elementType","type","InlineDrawer","OverlayDrawer","root","slot","always","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACF;+BAGkC;8BACF;AAW9C,MAAMA,qBAAqB,CAACC,OAAoBC;IACrD,iGAAiG;IACjG,MAAMC,cAAeF,MAAMG,IAAI,KAAK,WAAWC,0BAAAA,GAAeC,4BAAAA;IAG9D,MAAMC,OAA+CC,oBAAAA,CAAKC,MAAM,CAAC;QAAEP;QAAK,GAAGD,KAAK;IAAC,GAAG;QAAEE;IAAY;IAElG,OAAO;QACLO,YAAY;YAAEH,MAAMJ;QAAY;QAChCI;IACF;AACF"}
@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
drawerClassNames: function() {
return drawerClassNames;
},
useDrawerStyles_unstable: function() {
return useDrawerStyles_unstable;
}
});
const _react = require("@griffel/react");
const drawerClassNames = {
root: 'fui-Drawer'
};
const useDrawerStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(drawerClassNames.root, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"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"],"names":["drawerClassNames","useDrawerStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,gBAAgB;eAAhBA;;IAKIC,wBAAwB;eAAxBA;;;uBANY;AACtB,MAAMD,mBAAmB;IAC5BE,MAAM;AACV;AAGW,MAAMD,2BAA4BE,CAAAA;IACzC;IACAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAY,EAACL,iBAAiBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAC/E,OAAOD;AACX"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DrawerBody", {
enumerable: true,
get: function() {
return DrawerBody;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useDrawerBody = require("./useDrawerBody");
const _renderDrawerBody = require("./renderDrawerBody");
const _useDrawerBodyStylesstyles = require("./useDrawerBodyStyles.styles");
const DrawerBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDrawerBody.useDrawerBody_unstable)(props, ref);
(0, _useDrawerBodyStylesstyles.useDrawerBodyStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerBodyStyles_unstable')(state);
return (0, _renderDrawerBody.renderDrawerBody_unstable)(state);
});
DrawerBody.displayName = 'DrawerBody';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerBody/DrawerBody.tsx"],"sourcesContent":["import * 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":["DrawerBody","React","forwardRef","props","ref","state","useDrawerBody_unstable","useDrawerBodyStyles_unstable","useCustomStyleHook_unstable","renderDrawerBody_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;+BAEL;kCACG;2CACG;AAMtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7BG,IAAAA,gDAAAA,EAA4B,gCAAgCH;IAE5D,OAAOI,IAAAA,2CAAAA,EAA0BJ;AACnC;AAEAL,WAAWU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering DrawerBody
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":";;","mappings":"AAWA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DrawerBody: function() {
return _DrawerBody.DrawerBody;
},
drawerBodyClassNames: function() {
return _useDrawerBodyStylesstyles.drawerBodyClassNames;
},
renderDrawerBody_unstable: function() {
return _renderDrawerBody.renderDrawerBody_unstable;
},
useDrawerBodyStyles_unstable: function() {
return _useDrawerBodyStylesstyles.useDrawerBodyStyles_unstable;
},
useDrawerBody_unstable: function() {
return _useDrawerBody.useDrawerBody_unstable;
}
});
const _DrawerBody = require("./DrawerBody");
const _renderDrawerBody = require("./renderDrawerBody");
const _useDrawerBody = require("./useDrawerBody");
const _useDrawerBodyStylesstyles = require("./useDrawerBodyStyles.styles");
@@ -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","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,UAAU;eAAVA,sBAAU;;IAIVC,oBAAoB;eAApBA,+CAAoB;;IAFpBC,yBAAyB;eAAzBA,2CAAyB;;IAEHC,4BAA4B;eAA5BA,uDAA4B;;IADlDC,sBAAsB;eAAtBA,qCAAsB;;;4BAHJ;kCAEe;+BACH;2CAC4B"}
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDrawerBody_unstable", {
enumerable: true,
get: function() {
return renderDrawerBody_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDrawerBody_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};
@@ -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';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState) => {\n assertSlots<DrawerBodySlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderDrawerBody_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;AAOrB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAE7B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
@@ -0,0 +1,87 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDrawerBody_unstable", {
enumerable: true,
get: function() {
return useDrawerBody_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _drawerContext = require("../../contexts/drawerContext");
/**
* @internal
*
* Get the current scroll state of the DrawerBody.
*
* @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';
};
const useDrawerBody_unstable = (props, ref)=>{
const { setScrollState } = (0, _drawerContext.useDrawerContext_unstable)();
const scrollRef = _react.useRef(null);
const [setAnimationFrame, cancelAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
const updateScrollState = _react.useCallback(()=>{
if (!scrollRef.current) {
return;
}
setScrollState(getScrollState(scrollRef.current));
}, [
setScrollState
]);
const onScroll = _react.useCallback(()=>{
cancelAnimationFrame();
setAnimationFrame(()=>updateScrollState());
}, [
cancelAnimationFrame,
setAnimationFrame,
updateScrollState
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
cancelAnimationFrame();
setAnimationFrame(()=>updateScrollState());
/* update scroll state when children changes */ return ()=>cancelAnimationFrame();
}, [
props.children,
cancelAnimationFrame,
updateScrollState,
setAnimationFrame
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
cancelAnimationFrame();
setAnimationFrame(()=>updateScrollState());
return ()=>cancelAnimationFrame();
}, [
cancelAnimationFrame,
updateScrollState,
setAnimationFrame
]);
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: (0, _reactutilities.useMergedRefs)(ref, scrollRef),
...props,
onScroll: (0, _reactutilities.mergeCallbacks)(props.onScroll, onScroll)
}), {
elementType: 'div'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * @internal\n *\n * Get the current scroll state of the DrawerBody.\n *\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelAnimationFrame();\n setAnimationFrame(() => updateScrollState());\n }, [cancelAnimationFrame, setAnimationFrame, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n cancelAnimationFrame();\n setAnimationFrame(() => updateScrollState());\n /* update scroll state when children changes */\n return () => cancelAnimationFrame();\n }, [props.children, cancelAnimationFrame, updateScrollState, setAnimationFrame]);\n\n useIsomorphicLayoutEffect(() => {\n cancelAnimationFrame();\n setAnimationFrame(() => updateScrollState());\n\n return () => cancelAnimationFrame();\n }, [cancelAnimationFrame, updateScrollState, setAnimationFrame]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs<HTMLDivElement>(ref as React.Ref<HTMLDivElement>, scrollRef),\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useDrawerBody_unstable","getScrollState","scrollTop","scrollHeight","clientHeight","props","ref","setScrollState","useDrawerContext_unstable","scrollRef","React","useRef","setAnimationFrame","cancelAnimationFrame","useAnimationFrame","updateScrollState","useCallback","current","onScroll","useIsomorphicLayoutEffect","children","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","mergeCallbacks","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+CaA;;;eAAAA;;;;iEA/CU;gCAQhB;+BAEmC;AAK1C;;;;;;CAMC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAWO,MAAMH,yBAAyB,CAACK,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,wCAAAA;IAE3B,MAAMC,YAAYC,OAAMC,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,IAAAA,iCAAAA;IAElD,MAAMC,oBAAoBL,OAAMM,WAAW,CAAC;QAC1C,IAAI,CAACP,UAAUQ,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeN,eAAeQ,UAAUQ,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAWR,OAAMM,WAAW,CAAC;QACjCH;QACAD,kBAAkB,IAAMG;IAC1B,GAAG;QAACF;QAAsBD;QAAmBG;KAAkB;IAE/DI,IAAAA,yCAAAA,EAA0B;QACxBN;QACAD,kBAAkB,IAAMG;QACxB,6CAA6C,GAC7C,OAAO,IAAMF;IACf,GAAG;QAACR,MAAMe,QAAQ;QAAEP;QAAsBE;QAAmBH;KAAkB;IAE/EO,IAAAA,yCAAAA,EAA0B;QACxBN;QACAD,kBAAkB,IAAMG;QAExB,OAAO,IAAMF;IACf,GAAG;QAACA;QAAsBE;QAAmBH;KAAkB;IAE/D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FnB,KAAKoB,IAAAA,6BAAAA,EAA8BpB,KAAkCG;YACrE,GAAGJ,KAAK;YACRa,UAAUS,IAAAA,8BAAAA,EAAetB,MAAMa,QAAQ,EAAEA;QAC3C,IACA;YAAEU,aAAa;QAAM;IAEzB;AACF"}
@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
drawerBodyClassNames: function() {
return drawerBodyClassNames;
},
useDrawerBodyStyles_unstable: function() {
return useDrawerBodyStyles_unstable;
}
});
const _react = require("@griffel/react");
const drawerBodyClassNames = {
root: 'fui-DrawerBody'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__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);}"
]);
const useDrawerBodyStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(drawerBodyClassNames.root, styles, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { 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"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAqBIC,4BAA4B;eAA5BA;;;uBAvB6B;AAEvC,MAAMD,uBAAuB;IAChCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;IAAA;CAarB;AAGU,MAAMH,+BAAgCI,CAAAA;IAC7C;IACA,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,qBAAqBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC3F,OAAOF;AACX"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DrawerFooter", {
enumerable: true,
get: function() {
return DrawerFooter;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useDrawerFooter = require("./useDrawerFooter");
const _renderDrawerFooter = require("./renderDrawerFooter");
const _useDrawerFooterStylesstyles = require("./useDrawerFooterStyles.styles");
const DrawerFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDrawerFooter.useDrawerFooter_unstable)(props, ref);
(0, _useDrawerFooterStylesstyles.useDrawerFooterStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerFooterStyles_unstable')(state);
return (0, _renderDrawerFooter.renderDrawerFooter_unstable)(state);
});
DrawerFooter.displayName = 'DrawerFooter';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerFooter/DrawerFooter.tsx"],"sourcesContent":["import * 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":["DrawerFooter","React","forwardRef","props","ref","state","useDrawerFooter_unstable","useDrawerFooterStyles_unstable","useCustomStyleHook_unstable","renderDrawerFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;iCAEH;oCACG;6CACG;AAMxC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAC/BG,IAAAA,gDAAAA,EAA4B,kCAAkCH;IAE9D,OAAOI,IAAAA,+CAAAA,EAA4BJ;AACrC;AAEAL,aAAaU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering DrawerFooter
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":";;","mappings":"AAYA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DrawerFooter: function() {
return _DrawerFooter.DrawerFooter;
},
drawerFooterClassNames: function() {
return _useDrawerFooterStylesstyles.drawerFooterClassNames;
},
renderDrawerFooter_unstable: function() {
return _renderDrawerFooter.renderDrawerFooter_unstable;
},
useDrawerFooterStyles_unstable: function() {
return _useDrawerFooterStylesstyles.useDrawerFooterStyles_unstable;
},
useDrawerFooter_unstable: function() {
return _useDrawerFooter.useDrawerFooter_unstable;
}
});
const _DrawerFooter = require("./DrawerFooter");
const _renderDrawerFooter = require("./renderDrawerFooter");
const _useDrawerFooter = require("./useDrawerFooter");
const _useDrawerFooterStylesstyles = require("./useDrawerFooterStyles.styles");
@@ -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","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,YAAY;eAAZA,0BAAY;;IAIZC,sBAAsB;eAAtBA,mDAAsB;;IAFtBC,2BAA2B;eAA3BA,+CAA2B;;IAEHC,8BAA8B;eAA9BA,2DAA8B;;IADtDC,wBAAwB;eAAxBA,yCAAwB;;;8BAHJ;oCAEe;iCACH;6CAC8B"}
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDrawerFooter_unstable", {
enumerable: true,
get: function() {
return renderDrawerFooter_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDrawerFooter_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};
@@ -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';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Render the final JSX of DrawerFooter\n */\nexport const renderDrawerFooter_unstable = (state: DrawerFooterState) => {\n assertSlots<DrawerFooterSlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderDrawerFooter_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;AAOrB,MAAMA,8BAA8B,CAACC;IAC1CC,IAAAA,2BAAAA,EAA+BD;IAE/B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDrawerFooter_unstable", {
enumerable: true,
get: function() {
return useDrawerFooter_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _drawerContext = require("../../contexts/drawerContext");
const useDrawerFooter_unstable = (props, ref)=>{
const { scrollState } = (0, _drawerContext.useDrawerContext_unstable)();
return {
components: {
root: 'footer'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('footer', {
ref,
role: 'none',
...props
}), {
elementType: 'footer'
}),
scrollState
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooter.ts"],"sourcesContent":["import * 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":["useDrawerFooter_unstable","props","ref","scrollState","useDrawerContext_unstable","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACwB;+BAGL;AAWnC,MAAMA,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGC,IAAAA,wCAAAA;IAExB,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCP;YACAQ,MAAM;YACN,GAAGT,KAAK;QACV,IACA;YAAEU,aAAa;QAAS;QAG1BR;IACF;AACF"}
@@ -0,0 +1,76 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
drawerFooterClassNames: function() {
return drawerFooterClassNames;
},
useDrawerFooterStyles_unstable: function() {
return useDrawerFooterStyles_unstable;
}
});
const _react = require("@griffel/react");
const drawerFooterClassNames = {
root: 'fui-DrawerFooter'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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;}"
]
});
const useDrawerFooterStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const rootStyles = useDrawerFooterStyles();
state.root.className = (0, _react.mergeClasses)(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
'middle',
'top'
].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { 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"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","__resetStyles","useDrawerFooterStyles","__styles","separator","Baz25je","Brfgrao","mdwyqc","Fbdkly","vz82u","cmx5o7","h7gv66","B8bqphf","wjn42g","Ftih45","Bciustq","separatorVisible","d","state","styles","rootStyles","className","mergeClasses","scrollState","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,sBAAsB;eAAtBA;;IAgCIC,8BAA8B;eAA9BA;;;uBAnCyC;AAGnD,MAAMD,yBAAyB;IAClCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAWrB;AACD,MAAMC,wBAAqB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,WAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,OAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,kBAAA;QAAAP,OAAA;IAAA;AAAA,GAAA;IAAAQ,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAenB,MAAMnB,iCAAkCoB,CAAAA;IAC/C;IACA,MAAMC,SAASnB;IACf,MAAMoB,aAAalB;IACnBgB,MAAMnB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,uBAAuBE,IAAI,EAAEoB,QAAQD,MAAMK,WAAW,KAAK,UAAUH,WAAWhB,SAAS,EAAE;QAC3H;QACA;KACH,CAACoB,QAAQ,CAACN,MAAMK,WAAW,KAAKH,WAAWJ,gBAAgB,EAAEE,MAAMnB,IAAI,CAACsB,SAAS;IAClF,OAAOH;AACX"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DrawerHeader", {
enumerable: true,
get: function() {
return DrawerHeader;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useDrawerHeader = require("./useDrawerHeader");
const _renderDrawerHeader = require("./renderDrawerHeader");
const _useDrawerHeaderStylesstyles = require("./useDrawerHeaderStyles.styles");
const DrawerHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDrawerHeader.useDrawerHeader_unstable)(props, ref);
(0, _useDrawerHeaderStylesstyles.useDrawerHeaderStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerHeaderStyles_unstable')(state);
return (0, _renderDrawerHeader.renderDrawerHeader_unstable)(state);
});
DrawerHeader.displayName = 'DrawerHeader';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeader/DrawerHeader.tsx"],"sourcesContent":["import * 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":["DrawerHeader","React","forwardRef","props","ref","state","useDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useCustomStyleHook_unstable","renderDrawerHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;iCAEH;oCACG;6CACG;AAMxC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAC/BG,IAAAA,gDAAAA,EAA4B,kCAAkCH;IAE9D,OAAOI,IAAAA,+CAAAA,EAA4BJ;AACrC;AAEAL,aAAaU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering DrawerHeader
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DrawerHeader: function() {
return _DrawerHeader.DrawerHeader;
},
drawerHeaderClassNames: function() {
return _useDrawerHeaderStylesstyles.drawerHeaderClassNames;
},
renderDrawerHeader_unstable: function() {
return _renderDrawerHeader.renderDrawerHeader_unstable;
},
useDrawerHeaderStyles_unstable: function() {
return _useDrawerHeaderStylesstyles.useDrawerHeaderStyles_unstable;
},
useDrawerHeader_unstable: function() {
return _useDrawerHeader.useDrawerHeader_unstable;
}
});
const _DrawerHeader = require("./DrawerHeader");
const _renderDrawerHeader = require("./renderDrawerHeader");
const _useDrawerHeader = require("./useDrawerHeader");
const _useDrawerHeaderStylesstyles = require("./useDrawerHeaderStyles.styles");
@@ -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","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,YAAY;eAAZA,0BAAY;;IAIZC,sBAAsB;eAAtBA,mDAAsB;;IAFtBC,2BAA2B;eAA3BA,+CAA2B;;IAEHC,8BAA8B;eAA9BA,2DAA8B;;IADtDC,wBAAwB;eAAxBA,yCAAwB;;;8BAHJ;oCAEe;iCACH;6CAC8B"}
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDrawerHeader_unstable", {
enumerable: true,
get: function() {
return renderDrawerHeader_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDrawerHeader_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};
@@ -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';\n\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState) => {\n assertSlots<DrawerHeaderSlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderDrawerHeader_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;AAOrB,MAAMA,8BAA8B,CAACC;IAC1CC,IAAAA,2BAAAA,EAA+BD;IAE/B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDrawerHeader_unstable", {
enumerable: true,
get: function() {
return useDrawerHeader_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _drawerContext = require("../../contexts/drawerContext");
const useDrawerHeader_unstable = (props, ref)=>{
const { scrollState } = (0, _drawerContext.useDrawerContext_unstable)();
return {
components: {
root: 'header'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('header', {
ref,
role: 'none',
...props
}), {
elementType: 'header'
}),
scrollState
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeader.ts"],"sourcesContent":["import * 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":["useDrawerHeader_unstable","props","ref","scrollState","useDrawerContext_unstable","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACwB;+BAEL;AAanC,MAAMA,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGC,IAAAA,wCAAAA;IAExB,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCP;YACAQ,MAAM;YACN,GAAGT,KAAK;QACV,IACA;YAAEU,aAAa;QAAS;QAG1BR;IACF;AACF"}
@@ -0,0 +1,76 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
drawerHeaderClassNames: function() {
return drawerHeaderClassNames;
},
useDrawerHeaderStyles_unstable: function() {
return useDrawerHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const drawerHeaderClassNames = {
root: 'fui-DrawerHeader'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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;}"
]
});
const useDrawerHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const rootStyles = useDrawerHeaderStyles();
state.root.className = (0, _react.mergeClasses)(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
'middle',
'bottom'
].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { 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"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","__resetStyles","useDrawerHeaderStyles","__styles","separator","Dlnsje","E3zdtr","B1piin3","Eqx8gd","Bp15pi3","Bjyk6c5","F2fol1","Ba2ppi3","B1dyfl9","Bsft5z2","By385i5","separatorVisible","d","state","styles","rootStyles","className","mergeClasses","scrollState","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,sBAAsB;eAAtBA;;IAgCIC,8BAA8B;eAA9BA;;;uBAnCyC;AAGnD,MAAMD,yBAAyB;IAClCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAWrB;AACD,MAAMC,wBAAqB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,WAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,kBAAA;QAAAP,SAAA;IAAA;AAAA,GAAA;IAAAQ,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAenB,MAAMnB,iCAAkCoB,CAAAA;IAC/C;IACA,MAAMC,SAASnB;IACf,MAAMoB,aAAalB;IACnBgB,MAAMnB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,uBAAuBE,IAAI,EAAEoB,QAAQD,MAAMK,WAAW,KAAK,UAAUH,WAAWhB,SAAS,EAAE;QAC3H;QACA;KACH,CAACoB,QAAQ,CAACN,MAAMK,WAAW,KAAKH,WAAWJ,gBAAgB,EAAEE,MAAMnB,IAAI,CAACsB,SAAS;IAClF,OAAOH;AACX"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DrawerHeaderNavigation", {
enumerable: true,
get: function() {
return DrawerHeaderNavigation;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useDrawerHeaderNavigation = require("./useDrawerHeaderNavigation");
const _renderDrawerHeaderNavigation = require("./renderDrawerHeaderNavigation");
const _useDrawerHeaderNavigationStylesstyles = require("./useDrawerHeaderNavigationStyles.styles");
const DrawerHeaderNavigation = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDrawerHeaderNavigation.useDrawerHeaderNavigation_unstable)(props, ref);
(0, _useDrawerHeaderNavigationStylesstyles.useDrawerHeaderNavigationStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerHeaderNavigationStyles_unstable')(state);
return (0, _renderDrawerHeaderNavigation.renderDrawerHeaderNavigation_unstable)(state);
});
DrawerHeaderNavigation.displayName = 'DrawerHeaderNavigation';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.tsx"],"sourcesContent":["import * 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":["DrawerHeaderNavigation","React","forwardRef","props","ref","state","useDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useCustomStyleHook_unstable","renderDrawerHeaderNavigation_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;2CAEO;8CACG;uDACG;AAMlD,MAAMA,yBAAAA,WAAAA,GAA2EC,OAAMC,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,6DAAAA,EAAmCH,OAAOC;IAExDG,IAAAA,+EAAAA,EAAyCF;IACzCG,IAAAA,gDAAAA,EAA4B,4CAA4CH;IAExE,OAAOI,IAAAA,mEAAAA,EAAsCJ;AAC/C;AAGFL,uBAAuBU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering DrawerHeaderNavigation
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":";;","mappings":"AAWA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DrawerHeaderNavigation: function() {
return _DrawerHeaderNavigation.DrawerHeaderNavigation;
},
drawerHeaderNavigationClassNames: function() {
return _useDrawerHeaderNavigationStylesstyles.drawerHeaderNavigationClassNames;
},
renderDrawerHeaderNavigation_unstable: function() {
return _renderDrawerHeaderNavigation.renderDrawerHeaderNavigation_unstable;
},
useDrawerHeaderNavigationStyles_unstable: function() {
return _useDrawerHeaderNavigationStylesstyles.useDrawerHeaderNavigationStyles_unstable;
},
useDrawerHeaderNavigation_unstable: function() {
return _useDrawerHeaderNavigation.useDrawerHeaderNavigation_unstable;
}
});
const _DrawerHeaderNavigation = require("./DrawerHeaderNavigation");
const _renderDrawerHeaderNavigation = require("./renderDrawerHeaderNavigation");
const _useDrawerHeaderNavigation = require("./useDrawerHeaderNavigation");
const _useDrawerHeaderNavigationStylesstyles = require("./useDrawerHeaderNavigationStyles.styles");
@@ -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","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,sBAAsB;eAAtBA,8CAAsB;;IAS7BC,gCAAgC;eAAhCA,uEAAgC;;IAHzBC,qCAAqC;eAArCA,mEAAqC;;IAI5CC,wCAAwC;eAAxCA,+EAAwC;;IAHjCC,kCAAkC;eAAlCA,6DAAkC;;;wCAPJ;8CAMe;2CACH;uDAI5C"}
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDrawerHeaderNavigation_unstable", {
enumerable: true,
get: function() {
return renderDrawerHeaderNavigation_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDrawerHeaderNavigation_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};
@@ -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';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Render the final JSX of DrawerHeaderNavigation\n */\nexport const renderDrawerHeaderNavigation_unstable = (state: DrawerHeaderNavigationState) => {\n assertSlots<DrawerHeaderNavigationSlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderDrawerHeaderNavigation_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;AAOrB,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDrawerHeaderNavigation_unstable", {
enumerable: true,
get: function() {
return useDrawerHeaderNavigation_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useDrawerHeaderNavigation_unstable = (props, ref)=>{
return {
components: {
root: 'nav'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('nav', {
ref,
...props
}), {
elementType: 'nav'
})
};
};
@@ -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":["useDrawerHeaderNavigation_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACwB;AAaxC,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BL;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
drawerHeaderNavigationClassNames: function() {
return drawerHeaderNavigationClassNames;
},
useDrawerHeaderNavigationStyles_unstable: function() {
return useDrawerHeaderNavigationStyles_unstable;
}
});
const _react = require("@griffel/react");
const drawerHeaderNavigationClassNames = {
root: 'fui-DrawerHeaderNavigation'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1ig4pwh", null, [
".r1ig4pwh{margin:calc(var(--spacingVerticalS) * -1) calc(var(--spacingHorizontalL) * -1);}"
]);
const useDrawerHeaderNavigationStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(drawerHeaderNavigationClassNames.root, styles, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { 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"],"names":["drawerHeaderNavigationClassNames","useDrawerHeaderNavigationStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,gCAAgC;eAAhCA;;IAUIC,wCAAwC;eAAxCA;;;uBAZ6B;AAEvC,MAAMD,mCAAmC;IAC5CE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAErB;AAGU,MAAMH,2CAA4CI,CAAAA;IACzD;IACA,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,iCAAiCE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IACvG,OAAOF;AACX"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DrawerHeaderTitle", {
enumerable: true,
get: function() {
return DrawerHeaderTitle;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useDrawerHeaderTitle = require("./useDrawerHeaderTitle");
const _renderDrawerHeaderTitle = require("./renderDrawerHeaderTitle");
const _useDrawerHeaderTitleStylesstyles = require("./useDrawerHeaderTitleStyles.styles");
const DrawerHeaderTitle = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDrawerHeaderTitle.useDrawerHeaderTitle_unstable)(props, ref);
(0, _useDrawerHeaderTitleStylesstyles.useDrawerHeaderTitleStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerHeaderTitleStyles_unstable')(state);
return (0, _renderDrawerHeaderTitle.renderDrawerHeaderTitle_unstable)(state);
});
DrawerHeaderTitle.displayName = 'DrawerHeaderTitle';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderTitle/DrawerHeaderTitle.tsx"],"sourcesContent":["import * 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":["DrawerHeaderTitle","React","forwardRef","props","ref","state","useDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useCustomStyleHook_unstable","renderDrawerHeaderTitle_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;sCAEE;yCACG;kDACG;AAM7C,MAAMA,oBAAAA,WAAAA,GAAiEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQC,IAAAA,mDAAAA,EAA8BH,OAAOC;IAEnDG,IAAAA,qEAAAA,EAAoCF;IACpCG,IAAAA,gDAAAA,EAA4B,uCAAuCH;IAEnE,OAAOI,IAAAA,yDAAAA,EAAiCJ;AAC1C;AAEAL,kBAAkBU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering DrawerHeaderTitle
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DrawerHeaderTitle: function() {
return _DrawerHeaderTitle.DrawerHeaderTitle;
},
drawerHeaderTitleClassNames: function() {
return _useDrawerHeaderTitleStylesstyles.drawerHeaderTitleClassNames;
},
renderDrawerHeaderTitle_unstable: function() {
return _renderDrawerHeaderTitle.renderDrawerHeaderTitle_unstable;
},
useDrawerHeaderTitleStyles_unstable: function() {
return _useDrawerHeaderTitleStylesstyles.useDrawerHeaderTitleStyles_unstable;
},
useDrawerHeaderTitle_unstable: function() {
return _useDrawerHeaderTitle.useDrawerHeaderTitle_unstable;
}
});
const _DrawerHeaderTitle = require("./DrawerHeaderTitle");
const _renderDrawerHeaderTitle = require("./renderDrawerHeaderTitle");
const _useDrawerHeaderTitle = require("./useDrawerHeaderTitle");
const _useDrawerHeaderTitleStylesstyles = require("./useDrawerHeaderTitleStyles.styles");
@@ -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","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,iBAAiB;eAAjBA,oCAAiB;;IAIjBC,2BAA2B;eAA3BA,6DAA2B;;IAF3BC,gCAAgC;eAAhCA,yDAAgC;;IAEHC,mCAAmC;eAAnCA,qEAAmC;;IADhEC,6BAA6B;eAA7BA,mDAA6B;;;mCAHJ;yCAEe;sCACH;kDACmC"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDrawerHeaderTitle_unstable", {
enumerable: true,
get: function() {
return renderDrawerHeaderTitle_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDrawerHeaderTitle_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.heading && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.heading, {}),
state.action && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.action, {})
]
});
};
@@ -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';\n\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\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":["renderDrawerHeaderTitle_unstable","state","assertSlots","_jsxs","root","heading","_jsx","action"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;AAOrB,MAAMA,mCAAmC,CAACC;IAC/CC,IAAAA,2BAAAA,EAAoCD;IAEpC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,OAAO,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,OAAO,EAAA,CAAA;YAC/BJ,MAAMM,MAAM,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,MAAM,EAAA,CAAA;;;AAGpC"}
@@ -0,0 +1,42 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDrawerHeaderTitle_unstable", {
enumerable: true,
get: function() {
return useDrawerHeaderTitle_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactdialog = require("@fluentui/react-dialog");
const useDrawerHeaderTitle_unstable = (props, ref)=>{
const { children, heading } = props;
const headingId = (0, _reactdialog.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
return {
components: {
root: 'div',
heading: 'h2',
action: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...props
}), {
elementType: 'div'
}),
heading: _reactutilities.slot.optional(heading, {
defaultProps: {
id: headingId,
children
},
renderByDefault: true,
elementType: 'h2'
}),
action: _reactutilities.slot.optional(props.action, {
elementType: 'div'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts"],"sourcesContent":["import * 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":["useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","useDialogContext_unstable","ctx","dialogTitleId","components","root","action","slot","always","getIntrinsicElementProps","elementType","optional","defaultProps","id","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACwB;6BACL;AAanC,MAAMA,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYC,IAAAA,sCAAAA,EAA0BC,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNN,SAAS;YACTO,QAAQ;QACV;QAEAD,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BZ;YACA,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAM;QAEvBX,SAASQ,oBAAAA,CAAKI,QAAQ,CAACZ,SAAS;YAC9Ba,cAAc;gBACZC,IAAIb;gBACJF;YACF;YACAgB,iBAAiB;YACjBJ,aAAa;QACf;QACAJ,QAAQC,oBAAAA,CAAKI,QAAQ,CAACf,MAAMU,MAAM,EAAE;YAClCI,aAAa;QACf;IACF;AACF"}
@@ -0,0 +1,71 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
drawerHeaderTitleClassNames: function() {
return drawerHeaderTitleClassNames;
},
useDrawerHeaderTitleStyles_unstable: function() {
return useDrawerHeaderTitleStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactdialog = require("@fluentui/react-dialog");
const drawerHeaderTitleClassNames = {
root: 'fui-DrawerHeaderTitle',
heading: 'fui-DrawerHeaderTitle__heading',
action: 'fui-DrawerHeaderTitle__action'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__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);}"
]
});
const useDrawerHeaderTitleStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { heading: root = {}, action, components } = state;
(0, _reactdialog.useDialogTitleStyles_unstable)({
components: {
root: components.heading,
action: components.action
},
root,
action
});
state.root.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
if (state.heading) {
state.heading.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.heading, state.heading.className);
}
if (state.action) {
state.action.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { 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, 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"],"names":["drawerHeaderTitleClassNames","useDrawerHeaderTitleStyles_unstable","root","heading","action","useStyles","__styles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","state","styles","components","useDialogTitleStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,2BAA2B;eAA3BA;;IAoBIC,mCAAmC;eAAnCA;;;uBAvBwB;6BACK;AAEvC,MAAMD,8BAA8B;IACvCE,MAAM;IACNC,SAAS;IACTC,QAAQ;AACZ;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAJ,MAAA;QAAAK,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAN,QAAA;QAAAO,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAaX,MAAMX,sCAAuCY,CAAAA;IACpD;IACA,MAAMC,SAAST;IACf,MAAM,EAAEF,SAASD,OAAO,CAAC,CAAC,EAAEE,MAAM,EAAEW,UAAAA,EAAY,GAAGF;IACnDG,IAAAA,0CAA6B,EAAC;QAC1BD,YAAY;YACRb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAAA;QACvB;QACAF;QACAE;IACJ;IACAS,MAAMX,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BE,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACe,SAAS;IACvG,IAAIJ,MAAMV,OAAO,EAAE;QACfU,MAAMV,OAAO,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BG,OAAO,EAAEU,MAAMV,OAAO,CAACc,SAAS;IACvG;IACA,IAAIJ,MAAMT,MAAM,EAAE;QACdS,MAAMT,MAAM,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BI,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACa,SAAS;IACnH;IACA,OAAOJ;AACX"}
@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "InlineDrawer", {
enumerable: true,
get: function() {
return InlineDrawer;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _drawerContext = require("../../contexts/drawerContext");
const _useInlineDrawer = require("./useInlineDrawer");
const _renderInlineDrawer = require("./renderInlineDrawer");
const _useInlineDrawerStylesstyles = require("./useInlineDrawerStyles.styles");
const InlineDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useInlineDrawer.useInlineDrawer_unstable)(props, ref);
const contextValue = (0, _drawerContext.useDrawerContextValue)();
(0, _useInlineDrawerStylesstyles.useInlineDrawerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerInlineStyles_unstable')(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useInlineDrawerStyles_unstable')(state);
return (0, _renderInlineDrawer.renderInlineDrawer_unstable)(state, contextValue);
});
InlineDrawer.displayName = 'InlineDrawer';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.tsx"],"sourcesContent":["import * 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 type { InlineDrawerProps } from './InlineDrawer.types';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n\n/**\n * InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */\nexport const InlineDrawer: ForwardRefComponent<InlineDrawerProps> = React.forwardRef((props, ref) => {\n const state = useInlineDrawer_unstable(props, ref);\n const contextValue = useDrawerContextValue();\n\n useInlineDrawerStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n\n return renderInlineDrawer_unstable(state, contextValue);\n});\n\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["InlineDrawer","React","forwardRef","props","ref","state","useInlineDrawer_unstable","contextValue","useDrawerContextValue","useInlineDrawerStyles_unstable","useCustomStyleHook_unstable","renderInlineDrawer_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;qCAEqB;+BAEN;iCAGG;oCACG;6CACG;AAMxC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAC9C,MAAMG,eAAeC,IAAAA,oCAAAA;IAErBC,IAAAA,2DAAAA,EAA+BJ;IAC/BK,IAAAA,gDAAAA,EAA4B,kCAAkCL;IAC9DK,IAAAA,gDAAAA,EAA4B,kCAAkCL;IAE9D,OAAOM,IAAAA,+CAAAA,EAA4BN,OAAOE;AAC5C;AAEAP,aAAaY,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering InlineDrawer
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;\n\nexport type InlineDrawerSlots = {\n root: Slot<'div', 'aside'>;\n surfaceMotion?: Slot<SurfaceMotionSlotProps>;\n};\n\n/**\n * InlineDrawer Props\n */\nexport type InlineDrawerProps = ComponentProps<InlineDrawerSlots> &\n DrawerBaseProps & {\n /**\n * Whether the drawer has a separator line.\n *\n * @default false\n */\n separator?: boolean;\n };\n\n/**\n * State used in rendering InlineDrawer\n */\nexport type InlineDrawerState = Required<\n ComponentState<NonNullable<InlineDrawerSlots>> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'>\n>;\n"],"names":[],"rangeMappings":";;","mappings":"AA0BA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
InlineDrawer: function() {
return _InlineDrawer.InlineDrawer;
},
inlineDrawerClassNames: function() {
return _useInlineDrawerStylesstyles.inlineDrawerClassNames;
},
renderInlineDrawer_unstable: function() {
return _renderInlineDrawer.renderInlineDrawer_unstable;
},
useInlineDrawerStyles_unstable: function() {
return _useInlineDrawerStylesstyles.useInlineDrawerStyles_unstable;
},
useInlineDrawer_unstable: function() {
return _useInlineDrawer.useInlineDrawer_unstable;
}
});
const _InlineDrawer = require("./InlineDrawer");
const _renderInlineDrawer = require("./renderInlineDrawer");
const _useInlineDrawer = require("./useInlineDrawer");
const _useInlineDrawerStylesstyles = require("./useInlineDrawerStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/InlineDrawer/index.ts"],"sourcesContent":["export { InlineDrawer } from './InlineDrawer';\nexport type {\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\nexport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nexport { useInlineDrawer_unstable } from './useInlineDrawer';\nexport { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n"],"names":["InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,YAAY;eAAZA,0BAAY;;IASZC,sBAAsB;eAAtBA,mDAAsB;;IAFtBC,2BAA2B;eAA3BA,+CAA2B;;IAEHC,8BAA8B;eAA9BA,2DAA8B;;IADtDC,wBAAwB;eAAxBA,yCAAwB;;;8BARJ;oCAOe;iCACH;6CAC8B"}
@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderInlineDrawer_unstable", {
enumerable: true,
get: function() {
return renderInlineDrawer_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _drawerContext = require("../../contexts/drawerContext");
const renderInlineDrawer_unstable = (state, contextValue)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
value: contextValue,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue) => {\n assertSlots<InlineDrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.surfaceMotion>\n <state.root />\n </state.surfaceMotion>\n </DrawerProvider>\n );\n};\n"],"names":["renderInlineDrawer_unstable","state","contextValue","assertSlots","_jsx","DrawerProvider","value","surfaceMotion","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAC4B;+BACuB;AAO5C,MAAMA,8BAA8B,CAACC,OAA0BC;IACpEC,IAAAA,2BAAAA,EAA+BF;IAE/B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,6BAAAA,EAAAA;QAAeC,OAAOJ;kBACrB,WAAA,GAAAE,IAAAA,eAAA,EAACH,MAAMM,aAAa,EAAA;sBAClB,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;;AAInB"}
@@ -0,0 +1,60 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useInlineDrawer_unstable", {
enumerable: true,
get: function() {
return useInlineDrawer_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactmotion = require("@fluentui/react-motion");
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _drawerMotions = require("../../shared/drawerMotions");
const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
const STATIC_MOTION = {
active: true,
canRender: true,
ref: /*#__PURE__*/ _react.createRef(),
type: 'idle'
};
const useInlineDrawer_unstable = (props, ref)=>{
const { size, position, open } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
const { separator = false, surfaceMotion } = props;
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const state = {
components: {
root: 'div',
// casting from internal type that has required properties
// to external type that only has optional properties
// converting to unknown first as both Function component signatures are not compatible
surfaceMotion: _drawerMotions.InlineDrawerMotion
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
...props,
ref
}), {
elementType: 'div'
}),
open,
position,
size,
separator,
surfaceMotion: (0, _reactmotion.presenceMotionSlot)(surfaceMotion, {
elementType: _drawerMotions.InlineDrawerMotion,
defaultProps: {
position,
size,
dir,
visible: open,
unmountOnExit: true
}
}),
// Deprecated props
motion: STATIC_MOTION
};
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion } = props;\n const { dir } = useFluent();\n\n const state: InlineDrawerState = {\n components: {\n root: 'div',\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n size,\n separator,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n unmountOnExit: true,\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n };\n\n return state;\n};\n"],"names":["useInlineDrawer_unstable","STATIC_MOTION","active","canRender","ref","React","createRef","type","props","size","position","open","useDrawerDefaultProps","separator","surfaceMotion","dir","useFluent","state","components","root","InlineDrawerMotion","slot","always","getIntrinsicElementProps","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;iEAzBU;6BACY;gCACY;qCACC;+BAEY;uCACtB;AAGtC,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKC,OAAMC,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMP,2BAA2B,CAACQ,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,IAAAA,4CAAAA,EAAsBJ;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,MAAMC,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFL,eAAeM,iCAAAA;QACjB;QAEAD,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,GAAGf,KAAK;YACRJ;QACF,IACA;YAAEoB,aAAa;QAAM;QAGvBb;QACAD;QACAD;QACAI;QACAC,eAAeW,IAAAA,+BAAAA,EAAuCX,eAAe;YACnEU,aAAaJ,iCAAAA;YACbM,cAAc;gBACZhB;gBACAD;gBACAM;gBACAY,SAAShB;gBACTiB,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,QAAQ5B;IACV;IAEA,OAAOgB;AACT"}
@@ -0,0 +1,120 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
inlineDrawerClassNames: function() {
return inlineDrawerClassNames;
},
useInlineDrawerStyles_unstable: function() {
return useInlineDrawerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
const inlineDrawerClassNames = {
root: 'fui-InlineDrawer'
};
const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rkjj3x6", null, [
".rkjj3x6{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}"
]);
/**
* Styles for the root slot
*/ const borderValue = `1px solid ${_reacttheme.tokens.colorNeutralBackground3}`;
const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
separatorStart: {
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
u1mtju: [
"f1cxmi7i",
"f1j970fk"
]
},
separatorEnd: {
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
B4g9neb: [
"f1j970fk",
"f1cxmi7i"
]
},
separatorBottom: {
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
i8vvqc: "f1n3kblk"
},
start: {},
end: {},
bottom: {
a9b677: "fly5x3f",
Bqenvij: "fub80nq"
}
}, {
d: [
[
".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}",
{
p: -1
}
],
[
".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}",
{
p: -1
}
],
[
".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}",
{
p: -1
}
],
[
".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}",
{
p: -1
}
],
[
".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}",
{
p: -1
}
],
".fly5x3f{width:100%;}",
".fub80nq{height:var(--fui-Drawer--size);}"
]
});
function getSeparatorClass(state, classNames) {
if (!state.separator) {
return undefined;
}
switch(state.position){
case 'start':
return classNames.separatorStart;
case 'end':
return classNames.separatorEnd;
case 'bottom':
return classNames.separatorBottom;
default:
return undefined;
}
}
const useInlineDrawerStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useDrawerResetStyles();
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
const rootStyles = useDrawerRootStyles();
state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n /* Separator */ separatorStart: {\n borderRight: borderValue\n },\n separatorEnd: {\n borderLeft: borderValue\n },\n separatorBottom: {\n borderTop: borderValue\n },\n /* Positioning */ start: {},\n end: {},\n bottom: {\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`\n }\n});\nfunction getSeparatorClass(state, classNames) {\n if (!state.separator) {\n return undefined;\n }\n switch(state.position){\n case 'start':\n return classNames.separatorStart;\n case 'end':\n return classNames.separatorEnd;\n case 'bottom':\n return classNames.separatorBottom;\n default:\n return undefined;\n }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);\n return state;\n};\n"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","__resetStyles","borderValue","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","end","bottom","a9b677","Bqenvij","d","p","getSeparatorClass","state","classNames","separator","undefined","position","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,sBAAsB;eAAtBA;;IA4CIC,8BAA8B;eAA9BA;;;uBA/CyC;4BACnC;2CACqD;AACrE,MAAMD,yBAAyB;IAClCE,MAAM;AACV;AACA,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAG5B;AACD;;CAEA,GAAI,MAAMC,cAAc,CAAA,UAAA,EAAaC,kBAAM,CAACC,uBAAuB,CAAA,CAAE;AACrE,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,gBAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,cAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,iBAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA,CAAA;IAAAC,KAAA,CAAA;IAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA;AAiB5B,SAASC,kBAAkBC,KAAK,EAAEC,UAAU;IACxC,IAAI,CAACD,MAAME,SAAS,EAAE;QAClB,OAAOC;IACX;IACA,OAAOH,MAAMI,QAAQ;QACjB,KAAK;YACD,OAAOH,WAAWxB,cAAc;QACpC,KAAK;YACD,OAAOwB,WAAWnB,YAAY;QAClC,KAAK;YACD,OAAOmB,WAAWd,eAAe;QACrC;YACI,OAAOgB;IACf;AACJ;AAGW,MAAMnC,iCAAkCgC,CAAAA;IAC/C;IACA,MAAMK,cAAcnC;IACpB,MAAMoC,iBAAiBC,IAAAA,kDAAuB,EAACP;IAC/C,MAAMQ,aAAajC;IACnByB,MAAM/B,IAAI,CAACwC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,uBAAuBE,IAAI,EAAEoC,aAAaC,gBAAgBP,kBAAkBC,OAAOQ,aAAaA,UAAU,CAACR,MAAMI,QAAQ,CAAC,EAAEJ,MAAM/B,IAAI,CAACwC,SAAS;IACpL,OAAOT;AACX"}
@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "OverlayDrawer", {
enumerable: true,
get: function() {
return OverlayDrawer;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _drawerContext = require("../../contexts/drawerContext");
const _useOverlayDrawer = require("./useOverlayDrawer");
const _renderOverlayDrawer = require("./renderOverlayDrawer");
const _useOverlayDrawerStylesstyles = require("./useOverlayDrawerStyles.styles");
const OverlayDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useOverlayDrawer.useOverlayDrawer_unstable)(props, ref);
const contextValue = (0, _drawerContext.useDrawerContextValue)();
(0, _useOverlayDrawerStylesstyles.useOverlayDrawerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerOverlayStyles_unstable')(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOverlayDrawerStyles_unstable')(state);
return (0, _renderOverlayDrawer.renderOverlayDrawer_unstable)(state, contextValue);
});
OverlayDrawer.displayName = 'OverlayDrawer';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawer.tsx"],"sourcesContent":["import * 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 { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\nimport type { OverlayDrawerProps } from './OverlayDrawer.types';\n\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps> = React.forwardRef((props, ref) => {\n const state = useOverlayDrawer_unstable(props, ref);\n const contextValue = useDrawerContextValue();\n\n useOverlayDrawerStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n\n return renderOverlayDrawer_unstable(state, contextValue);\n});\n\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["OverlayDrawer","React","forwardRef","props","ref","state","useOverlayDrawer_unstable","contextValue","useDrawerContextValue","useOverlayDrawerStyles_unstable","useCustomStyleHook_unstable","renderOverlayDrawer_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;qCAEqB;+BAEN;kCAEI;qCACG;8CACG;AAMzC,MAAMA,gBAAAA,WAAAA,GAAyDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQC,IAAAA,2CAAAA,EAA0BH,OAAOC;IAC/C,MAAMG,eAAeC,IAAAA,oCAAAA;IAErBC,IAAAA,6DAAAA,EAAgCJ;IAChCK,IAAAA,gDAAAA,EAA4B,mCAAmCL;IAC/DK,IAAAA,gDAAAA,EAA4B,mCAAmCL;IAE/D,OAAOM,IAAAA,iDAAAA,EAA6BN,OAAOE;AAC7C;AAEAP,cAAcY,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering OverlayDrawer
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n /**\n * Slot for the root element.\n */\n root: Slot<OverlayDrawerSurfaceProps>;\n /**\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n *\n */\n backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\n /**\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n *\n */\n surfaceMotion?: Slot<PresenceMotionSlotProps<DrawerMotionParams>>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = Pick<OverlayDrawerSlots, 'root'> & {\n /**\n * Slot for the dialog component that wraps the drawer.\n */\n dialog: NonNullable<Slot<DialogProps>>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> &\n DrawerBaseProps & {\n /**\n * @deprecated OverlayDrawer can work only as a controlled component\n * and does not support uncontrolled mode i.e. defaultOpen prop\n */\n defaultOpen?: boolean;\n };\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> &\n Required<DrawerBaseState> &\n Pick<OverlayDrawerProps, 'mountNode'> & {\n hasMountNodeElement: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAmDA;;CAEC"}
@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "OverlayDrawerSurface", {
enumerable: true,
get: function() {
return OverlayDrawerSurface;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactdialog = require("@fluentui/react-dialog");
const _useOverlayDrawerSurfaceStylesstyles = require("./useOverlayDrawerSurfaceStyles.styles");
const OverlayDrawerSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const dialogSurfaceState = (0, _reactdialog.useDialogSurface_unstable)({
...props,
/**
* Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
* We need to cast the ref to a `div` element type to not break Dialog's ref type.
*
* FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.
*/ as: props.as
}, ref);
const dialogSurfaceContextValues = (0, _reactdialog.useDialogSurfaceContextValues_unstable)(dialogSurfaceState);
(0, _useOverlayDrawerSurfaceStylesstyles.useOverlayDrawerSurfaceStyles_unstable)(dialogSurfaceState);
return (0, _reactdialog.renderDialogSurface_unstable)(dialogSurfaceState, dialogSurfaceContextValues);
});
OverlayDrawerSurface.displayName = 'OverlayDrawerSurface';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n useDialogSurface_unstable,\n useDialogSurfaceContextValues_unstable,\n renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';\n\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */\nexport const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps> = React.forwardRef((props, ref) => {\n const dialogSurfaceState = useDialogSurface_unstable(\n {\n ...props,\n /**\n * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n *\n * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.\n */\n as: props.as as 'div',\n },\n ref,\n );\n const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n\n return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["OverlayDrawerSurface","React","forwardRef","props","ref","dialogSurfaceState","useDialogSurface_unstable","as","dialogSurfaceContextValues","useDialogSurfaceContextValues_unstable","useOverlayDrawerSurfaceStyles_unstable","renderDialogSurface_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;6BAMhB;qDAEgD;AAOhD,MAAMA,uBAAAA,WAAAA,GAAuEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,qBAAqBC,IAAAA,sCAAAA,EACzB;QACE,GAAGH,KAAK;QACR;;;;;OAKC,GACDI,IAAIJ,MAAMI,EAAE;IACd,GACAH;IAEF,MAAMI,6BAA6BC,IAAAA,mDAAAA,EAAuCJ;IAE1EK,IAAAA,2EAAAA,EAAuCL;IAEvC,OAAOM,IAAAA,yCAAAA,EAA6BN,oBAAoBG;AAC1D;AAEAR,qBAAqBY,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* OverlayDrawerSurface Props
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, Slot } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = Partial<Pick<DialogSurfaceSlots, 'backdrop' | 'backdropMotion'>> & {\n root: Slot<'div', 'aside'>;\n};\n\n/**\n * OverlayDrawerSurface Props\n */\nexport type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots> &\n Pick<DialogSurfaceProps, 'mountNode'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAUA;;CAEC"}
@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "OverlayDrawerSurface", {
enumerable: true,
get: function() {
return _OverlayDrawerSurface.OverlayDrawerSurface;
}
});
const _OverlayDrawerSurface = require("./OverlayDrawerSurface");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/index.ts"],"sourcesContent":["export { OverlayDrawerSurface } from './OverlayDrawerSurface';\nexport type { OverlayDrawerSurfaceProps, OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface.types';\n"],"names":["OverlayDrawerSurface"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BAASA;;;eAAAA,0CAAoB;;;sCAAQ"}
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOverlayDrawerSurfaceStyles_unstable", {
enumerable: true,
get: function() {
return useOverlayDrawerSurfaceStyles_unstable;
}
});
const _react = require("@griffel/react");
/**
* Styles for the backdrop slot
*/ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rmnljus", null, [
".rmnljus{inset:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}"
]);
const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
nested: {
De3pzq: "f1c21dwh"
}
}, {
d: [
".f1c21dwh{background-color:var(--colorTransparentBackground);}"
]
});
const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
'use no memo';
const backdropResetStyles = useBackdropResetStyles();
const backdropStyles = useBackdropStyles();
if (state.backdrop) {
state.backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n }\n return state;\n};\n"],"names":["useOverlayDrawerSurfaceStyles_unstable","useBackdropResetStyles","__resetStyles","useBackdropStyles","__styles","nested","De3pzq","d","state","backdropResetStyles","backdropStyles","backdrop","className","mergeClasses","isNestedDialog"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBiBA;;;eAAAA;;;uBAhByC;AAE1D;;CAEA,GAAI,MAAMC,yBAAsB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIlC;AACD,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAOf,MAAMP,yCAA0CQ,CAAAA;IACvD;IACA,MAAMC,sBAAsBR;IAC5B,MAAMS,iBAAiBP;IACvB,IAAIK,MAAMG,QAAQ,EAAE;QAChBH,MAAMG,QAAQ,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,qBAAqBD,MAAMM,cAAc,IAAIJ,eAAeL,MAAM,EAAEG,MAAMG,QAAQ,CAACC,SAAS;IACxI;IACA,OAAOJ;AACX"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
OverlayDrawer: function() {
return _OverlayDrawer.OverlayDrawer;
},
overlayDrawerClassNames: function() {
return _useOverlayDrawerStylesstyles.overlayDrawerClassNames;
},
renderOverlayDrawer_unstable: function() {
return _renderOverlayDrawer.renderOverlayDrawer_unstable;
},
useOverlayDrawerStyles_unstable: function() {
return _useOverlayDrawerStylesstyles.useOverlayDrawerStyles_unstable;
},
useOverlayDrawer_unstable: function() {
return _useOverlayDrawer.useOverlayDrawer_unstable;
}
});
const _OverlayDrawer = require("./OverlayDrawer");
const _renderOverlayDrawer = require("./renderOverlayDrawer");
const _useOverlayDrawer = require("./useOverlayDrawer");
const _useOverlayDrawerStylesstyles = require("./useOverlayDrawerStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverlayDrawer/index.ts"],"sourcesContent":["export { OverlayDrawer } from './OverlayDrawer';\nexport type {\n OverlayDrawerInternalSlots,\n OverlayDrawerProps,\n OverlayDrawerSlots,\n OverlayDrawerState,\n} from './OverlayDrawer.types';\nexport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nexport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nexport { overlayDrawerClassNames, useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\n"],"names":["OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IASbC,uBAAuB;eAAvBA,qDAAuB;;IAFvBC,4BAA4B;eAA5BA,iDAA4B;;IAEHC,+BAA+B;eAA/BA,6DAA+B;;IADxDC,yBAAyB;eAAzBA,2CAAyB;;;+BARJ;qCAOe;kCACH;8CAC+B"}
@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderOverlayDrawer_unstable", {
enumerable: true,
get: function() {
return renderOverlayDrawer_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _drawerContext = require("../../contexts/drawerContext");
const renderOverlayDrawer_unstable = (state, contextValue)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
value: contextValue,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dialog, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState, contextValue: DrawerContextValue) => {\n assertSlots<OverlayDrawerInternalSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.dialog>\n <state.root />\n </state.dialog>\n </DrawerProvider>\n );\n};\n"],"names":["renderOverlayDrawer_unstable","state","contextValue","assertSlots","_jsx","DrawerProvider","value","dialog","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAC4B;+BACuB;AAO5C,MAAMA,+BAA+B,CAACC,OAA2BC;IACtEC,IAAAA,2BAAAA,EAAwCF;IAExC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,6BAAAA,EAAAA;QAAeC,OAAOJ;kBACrB,WAAA,GAAAE,IAAAA,eAAA,EAACH,MAAMM,MAAM,EAAA;sBACX,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;;AAInB"}

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