Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

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

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

@@ -0,0 +1 @@
export { Dialog, renderDialog_unstable, useDialogContextValues_unstable, useDialog_unstable } from './components/Dialog/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Dialog.ts"],"sourcesContent":["export type {\n DialogContextValues,\n DialogModalType,\n DialogOpenChangeData,\n DialogOpenChangeEvent,\n DialogOpenChangeEventHandler,\n DialogProps,\n DialogSlots,\n DialogState,\n InternalDialogSlots,\n} from './components/Dialog/index';\nexport {\n Dialog,\n renderDialog_unstable,\n useDialogContextValues_unstable,\n useDialog_unstable,\n} from './components/Dialog/index';\n"],"names":["Dialog","renderDialog_unstable","useDialogContextValues_unstable","useDialog_unstable"],"mappings":"AAWA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,+BAA+B,EAC/BC,kBAAkB,QACb,4BAA4B"}

View File

@@ -0,0 +1 @@
export { DialogActions, dialogActionsClassNames, renderDialogActions_unstable, useDialogActionsStyles_unstable, useDialogActions_unstable } from './components/DialogActions/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DialogActions.ts"],"sourcesContent":["export type {\n DialogActionsPosition,\n DialogActionsProps,\n DialogActionsSlots,\n DialogActionsState,\n} from './components/DialogActions/index';\nexport {\n DialogActions,\n dialogActionsClassNames,\n renderDialogActions_unstable,\n useDialogActionsStyles_unstable,\n useDialogActions_unstable,\n} from './components/DialogActions/index';\n"],"names":["DialogActions","dialogActionsClassNames","renderDialogActions_unstable","useDialogActionsStyles_unstable","useDialogActions_unstable"],"mappings":"AAMA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}

View File

@@ -0,0 +1 @@
export { DialogBody, dialogBodyClassNames, renderDialogBody_unstable, useDialogBodyStyles_unstable, useDialogBody_unstable } from './components/DialogBody/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DialogBody.ts"],"sourcesContent":["export type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './components/DialogBody/index';\nexport {\n DialogBody,\n dialogBodyClassNames,\n renderDialogBody_unstable,\n useDialogBodyStyles_unstable,\n useDialogBody_unstable,\n} from './components/DialogBody/index';\n"],"names":["DialogBody","dialogBodyClassNames","renderDialogBody_unstable","useDialogBodyStyles_unstable","useDialogBody_unstable"],"mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}

View File

@@ -0,0 +1 @@
export { DialogContent, dialogContentClassNames, renderDialogContent_unstable, useDialogContentStyles_unstable, useDialogContent_unstable } from './components/DialogContent/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DialogContent.ts"],"sourcesContent":["export type { DialogContentProps, DialogContentSlots, DialogContentState } from './components/DialogContent/index';\nexport {\n DialogContent,\n dialogContentClassNames,\n renderDialogContent_unstable,\n useDialogContentStyles_unstable,\n useDialogContent_unstable,\n} from './components/DialogContent/index';\n"],"names":["DialogContent","dialogContentClassNames","renderDialogContent_unstable","useDialogContentStyles_unstable","useDialogContent_unstable"],"mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}

View File

@@ -0,0 +1 @@
export { DialogSurface, dialogSurfaceClassNames, renderDialogSurface_unstable, useDialogSurfaceContextValues_unstable, useDialogSurfaceStyles_unstable, useDialogSurface_unstable } from './components/DialogSurface/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DialogSurface.ts"],"sourcesContent":["export type {\n DialogBackdropSlotProps,\n DialogSurfaceContextValues,\n DialogSurfaceElement,\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n} from './components/DialogSurface/index';\nexport {\n DialogSurface,\n dialogSurfaceClassNames,\n renderDialogSurface_unstable,\n useDialogSurfaceContextValues_unstable,\n useDialogSurfaceStyles_unstable,\n useDialogSurface_unstable,\n} from './components/DialogSurface/index';\n"],"names":["DialogSurface","dialogSurfaceClassNames","renderDialogSurface_unstable","useDialogSurfaceContextValues_unstable","useDialogSurfaceStyles_unstable","useDialogSurface_unstable"],"mappings":"AAQA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}

View File

@@ -0,0 +1 @@
export { DialogTitle, dialogTitleClassNames, renderDialogTitle_unstable, useDialogTitleInternalStyles, useDialogTitleStyles_unstable, useDialogTitle_unstable } from './components/DialogTitle/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DialogTitle.ts"],"sourcesContent":["export type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './components/DialogTitle/index';\nexport {\n DialogTitle,\n dialogTitleClassNames,\n renderDialogTitle_unstable,\n useDialogTitleInternalStyles,\n useDialogTitleStyles_unstable,\n useDialogTitle_unstable,\n} from './components/DialogTitle/index';\n"],"names":["DialogTitle","dialogTitleClassNames","renderDialogTitle_unstable","useDialogTitleInternalStyles","useDialogTitleStyles_unstable","useDialogTitle_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,4BAA4B,EAC5BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

View File

@@ -0,0 +1 @@
export { DialogTrigger, renderDialogTrigger_unstable, useDialogTrigger_unstable } from './components/DialogTrigger/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/DialogTrigger.ts"],"sourcesContent":["export type {\n DialogTriggerAction,\n DialogTriggerChildProps,\n DialogTriggerProps,\n DialogTriggerState,\n} from './components/DialogTrigger/index';\nexport {\n DialogTrigger,\n renderDialogTrigger_unstable,\n useDialogTrigger_unstable,\n} from './components/DialogTrigger/index';\n"],"names":["DialogTrigger","renderDialogTrigger_unstable","useDialogTrigger_unstable"],"mappings":"AAMA,SACEA,aAAa,EACbC,4BAA4B,EAC5BC,yBAAyB,QACpB,mCAAmC"}

View File

@@ -0,0 +1,17 @@
'use client';
import * as React from 'react';
import { useDialog_unstable } from './useDialog';
import { renderDialog_unstable } from './renderDialog';
import { useDialogContextValues_unstable } from './useDialogContextValues';
/**
* The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
* It provides context down the hierarchy to `children` compound components to allow functionality.
* This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`
* and a `DialogSurface` (or some component that will eventually render one of those compound components)
* in this specific order
*/ export const Dialog = /*#__PURE__*/ React.memo((props)=>{
const state = useDialog_unstable(props);
const contextValues = useDialogContextValues_unstable(state);
return renderDialog_unstable(state, contextValues);
});
Dialog.displayName = 'Dialog';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\n/**\n * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\n * It provides context down the hierarchy to `children` compound components to allow functionality.\n * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\n * and a `DialogSurface` (or some component that will eventually render one of those compound components)\n * in this specific order\n */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n const state = useDialog_unstable(props);\n const contextValues = useDialogContextValues_unstable(state);\n\n return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"names":["React","useDialog_unstable","renderDialog_unstable","useDialogContextValues_unstable","Dialog","memo","props","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,SAASC,+BAA+B,QAAQ,2BAA2B;AAE3E;;;;;;CAMC,GACD,OAAO,MAAMC,uBAAgCJ,MAAMK,IAAI,CAACC,CAAAA;IACtD,MAAMC,QAAQN,mBAAmBK;IACjC,MAAME,gBAAgBL,gCAAgCI;IAEtD,OAAOL,sBAAsBK,OAAOC;AACtC,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dialog/Dialog.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types';\n\nexport type DialogSlots = {\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>;\n};\n\nexport type InternalDialogSlots = {\n surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\n\nexport type DialogOpenChangeEvent = DialogOpenChangeData['event'];\n\nexport type DialogOpenChangeData =\n | {\n type: 'escapeKeyDown';\n open: boolean;\n event: React.KeyboardEvent<DialogSurfaceElement>;\n }\n | {\n type: 'backdropClick';\n open: boolean;\n event: React.MouseEvent<DialogSurfaceElement>;\n }\n | {\n type: 'triggerClick';\n open: boolean;\n event: React.MouseEvent<DialogSurfaceElement>;\n };\n\nexport type DialogModalType = 'modal' | 'non-modal' | 'alert';\n\n/**\n * Callback fired when the component changes value from open state.\n *\n * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event\n */\nexport type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;\n\nexport type DialogContextValues = {\n dialog: DialogContextValue;\n /**\n * dialogSurface context is provided by Dialog as false\n * to ensure components inside Dialog but outside DialogSurface will consume this as false\n */\n dialogSurface: DialogSurfaceContextValue;\n};\n\nexport type DialogProps = ComponentProps<Partial<DialogSlots>> & {\n /**\n * Dialog variations.\n *\n * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\n * The tab sequence is kept within the dialog and moving the focus outside\n * the dialog will imply closing it. This is the default type of the component.\n *\n * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\n * and users can interact with the rest of the page.\n * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n *\n * `alert`: is a special type of modal dialogs that interrupts the user's workflow\n * to communicate an important message or ask for a decision.\n * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\n * and it cannot be dismissed through the dimmed background.\n *\n * @default modal\n */\n modalType?: DialogModalType;\n /**\n * Controls the open state of the dialog\n * @default false\n */\n open?: boolean;\n /**\n * Default value for the uncontrolled open state of the dialog.\n * @default false\n */\n defaultOpen?: boolean;\n /**\n * Callback fired when the component changes value from open state.\n *\n * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: DialogOpenChangeEventHandler;\n /**\n * Can contain two children including `DialogTrigger` and `DialogSurface`.\n * Alternatively can only contain `DialogSurface` if using trigger outside dialog, or controlling state.\n */\n children: [JSXElement, JSXElement] | JSXElement;\n /**\n * Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n * where the focus trap involves setting outside elements inert.\n *\n * @default false\n */\n inertTrapFocus?: boolean;\n /**\n * Decides whether the dialog should be removed from the DOM tree when it is closed.\n * This can be useful when dealing with components that may contain state that should not\n * be reset when the dialog is closed.\n *\n * @default true\n */\n unmountOnClose?: boolean;\n};\n\nexport type DialogState = ComponentState<InternalDialogSlots> &\n DialogContextValue & {\n content: React.ReactNode;\n trigger: React.ReactNode;\n };\n"],"names":[],"mappings":"AAuHA,WAII"}

View File

@@ -0,0 +1,4 @@
export { Dialog } from './Dialog';
export { renderDialog_unstable } from './renderDialog';
export { useDialog_unstable } from './useDialog';
export { useDialogContextValues_unstable } from './useDialogContextValues';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dialog/index.ts"],"sourcesContent":["export { Dialog } from './Dialog';\nexport type {\n DialogContextValues,\n DialogModalType,\n DialogOpenChangeData,\n DialogOpenChangeEvent,\n DialogOpenChangeEventHandler,\n DialogProps,\n DialogSlots,\n DialogState,\n InternalDialogSlots,\n} from './Dialog.types';\nexport { renderDialog_unstable } from './renderDialog';\nexport { useDialog_unstable } from './useDialog';\nexport { useDialogContextValues_unstable } from './useDialogContextValues';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAYlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,+BAA+B,QAAQ,2BAA2B"}

View File

@@ -0,0 +1,24 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import * as React from 'react';
import { MotionRefForwarder } from '@fluentui/react-motion';
import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
/**
* Render the final JSX of Dialog
*/ export const renderDialog_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(DialogProvider, {
value: contextValues.dialog,
children: /*#__PURE__*/ _jsxs(DialogSurfaceProvider, {
value: contextValues.dialogSurface,
children: [
state.trigger,
state.content && /*#__PURE__*/ _jsx(state.surfaceMotion, {
children: /*#__PURE__*/ _jsx(MotionRefForwarder, {
children: state.content
})
})
]
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues, InternalDialogSlots } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues): JSXElement => {\n assertSlots<InternalDialogSlots>(state);\n\n return (\n <DialogProvider value={contextValues.dialog}>\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n {state.trigger}\n {state.content && (\n <state.surfaceMotion>\n <MotionRefForwarder>\n {/* Casting here as content should be equivalent to <DialogSurface/> */}\n {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n {state.content as React.ReactElement}\n </MotionRefForwarder>\n </state.surfaceMotion>\n )}\n </DialogSurfaceProvider>\n </DialogProvider>\n );\n};\n"],"names":["assertSlots","React","MotionRefForwarder","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","value","dialog","dialogSurface","trigger","content","surfaceMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,YAAYC,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,iBAAiB;AAGvE;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDP,YAAiCM;IAEjC,qBACE,KAACH;QAAeK,OAAOD,cAAcE,MAAM;kBACzC,cAAA,MAACL;YAAsBI,OAAOD,cAAcG,aAAa;;gBACtDJ,MAAMK,OAAO;gBACbL,MAAMM,OAAO,kBACZ,KAACN,MAAMO,aAAa;8BAClB,cAAA,KAACX;kCAGEI,MAAMM,OAAO;;;;;;AAO5B,EAAE"}

View File

@@ -0,0 +1,95 @@
'use client';
import * as React from 'react';
import { useHasParentContext } from '@fluentui/react-context-selector';
import { useModalAttributes } from '@fluentui/react-tabster';
import { presenceMotionSlot } from '@fluentui/react-motion';
import { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';
import { useFocusFirstElement } from '../../utils';
import { DialogContext } from '../../contexts';
import { DialogSurfaceMotion } from '../DialogSurfaceMotion';
/**
* Create the state required to render Dialog.
*
* The returned state can be modified with hooks such as useDialogStyles_unstable,
* before being passed to renderDialog_unstable.
*
* @param props - props from this instance of Dialog
*/ export const useDialog_unstable = (props)=>{
const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false, unmountOnClose = true } = props;
const dialogTitleId = useId('dialog-title-');
const [trigger, content] = childrenToTriggerAndContent(children);
const [open, setOpen] = useControllableState({
state: props.open,
defaultState: props.defaultOpen,
initialState: false
});
const requestOpenChange = useEventCallback((data)=>{
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);
// if user prevents default then do not change state value
// otherwise updates state value and trigger reference to the element that caused the opening
if (!data.event.isDefaultPrevented()) {
setOpen(data.open);
}
});
const dialogRef = useFocusFirstElement(open, modalType);
const { modalAttributes, triggerAttributes } = useModalAttributes({
trapFocus: modalType !== 'non-modal',
legacyTrapFocus: !inertTrapFocus
});
const isNestedDialog = useHasParentContext(DialogContext);
return {
components: {
surfaceMotion: DialogSurfaceMotion
},
inertTrapFocus,
open,
modalType,
content,
trigger,
requestOpenChange,
dialogTitleId,
isNestedDialog,
unmountOnClose,
dialogRef,
modalAttributes,
triggerAttributes,
surfaceMotion: presenceMotionSlot(props.surfaceMotion, {
elementType: DialogSurfaceMotion,
defaultProps: {
visible: open,
appear: unmountOnClose,
unmountOnExit: unmountOnClose
}
})
};
};
/**
* Extracts trigger and content from children
*/ function childrenToTriggerAndContent(children) {
const childrenArray = React.Children.toArray(children);
if (process.env.NODE_ENV !== 'production') {
if (childrenArray.length !== 1 && childrenArray.length !== 2) {
// eslint-disable-next-line no-console
console.warn(`@fluentui/react-dialog [useDialog]:
Dialog must contain at least one child <DialogSurface/>,
and at most two children <DialogTrigger/> <DialogSurface/> (in this order).`);
}
}
switch(childrenArray.length){
// case where there's a trigger followed by content
case 2:
return childrenArray;
// case where there's only content
case 1:
return [
undefined,
childrenArray[0]
];
// unknown case
default:
return [
undefined,
undefined
];
}
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,23 @@
export function useDialogContextValues_unstable(state) {
const { modalType, open, dialogRef, dialogTitleId, isNestedDialog, inertTrapFocus, requestOpenChange, modalAttributes, triggerAttributes, unmountOnClose } = state;
/**
* This context is created with "@fluentui/react-context-selector",
* there is no sense to memoize it
*/ const dialog = {
open,
modalType,
dialogRef,
dialogTitleId,
isNestedDialog,
inertTrapFocus,
modalAttributes,
triggerAttributes,
unmountOnClose,
requestOpenChange
};
const dialogSurface = false;
return {
dialog,
dialogSurface
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dialog/useDialogContextValues.ts"],"sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n const {\n modalType,\n open,\n dialogRef,\n dialogTitleId,\n isNestedDialog,\n inertTrapFocus,\n requestOpenChange,\n modalAttributes,\n triggerAttributes,\n unmountOnClose,\n } = state;\n\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const dialog: DialogContextValue = {\n open,\n modalType,\n dialogRef,\n dialogTitleId,\n isNestedDialog,\n inertTrapFocus,\n modalAttributes,\n triggerAttributes,\n unmountOnClose,\n requestOpenChange,\n };\n\n const dialogSurface: DialogSurfaceContextValue = false;\n\n return { dialog, dialogSurface };\n}\n"],"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","modalAttributes","triggerAttributes","unmountOnClose","dialog","dialogSurface"],"mappings":"AAGA,OAAO,SAASA,gCAAgCC,KAAkB;IAChE,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,iBAAiB,EACjBC,cAAc,EACf,GAAGV;IAEJ;;;GAGC,GACD,MAAMW,SAA6B;QACjCT;QACAD;QACAE;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAH;IACF;IAEA,MAAMK,gBAA2C;IAEjD,OAAO;QAAED;QAAQC;IAAc;AACjC"}

View File

@@ -0,0 +1,16 @@
'use client';
import * as React from 'react';
import { useDialogActions_unstable } from './useDialogActions';
import { renderDialogActions_unstable } from './renderDialogActions';
import { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* `DialogActions` is a container for the actions of the dialog.
* Apart from styling, this component does not have other behavior.
*/ export const DialogActions = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDialogActions_unstable(props, ref);
useDialogActionsStyles_unstable(state);
useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state);
return renderDialogActions_unstable(state);
});
DialogActions.displayName = 'DialogActions';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogActions/DialogActions.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';\nimport type { DialogActionsProps } from './DialogActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions: ForwardRefComponent<DialogActionsProps> = React.forwardRef((props, ref) => {\n const state = useDialogActions_unstable(props, ref);\n\n useDialogActionsStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state);\n\n return renderDialogActions_unstable(state);\n});\n\nDialogActions.displayName = 'DialogActions';\n"],"names":["React","useDialogActions_unstable","renderDialogActions_unstable","useDialogActionsStyles_unstable","useCustomStyleHook_unstable","DialogActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogActions/DialogActions.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogActionsSlots = {\n root: Slot<'div'>;\n};\n\nexport type DialogActionsPosition = 'start' | 'end';\n\n/**\n * DialogActions Props\n */\nexport type DialogActionsProps = ComponentProps<DialogActionsSlots> & {\n /**\n * defines the position on the dialog grid of the actions\n * @default 'end'\n */\n position?: DialogActionsPosition;\n\n /**\n * Makes the actions expand the entire width of the DialogBody\n * @default false\n */\n fluid?: boolean;\n};\n\n/**\n * State used in rendering DialogActions\n */\nexport type DialogActionsState = ComponentState<DialogActionsSlots> &\n Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WAC2D"}

View File

@@ -0,0 +1,4 @@
export { DialogActions } from './DialogActions';
export { renderDialogActions_unstable } from './renderDialogActions';
export { useDialogActions_unstable } from './useDialogActions';
export { dialogActionsClassNames, useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogActions/index.ts"],"sourcesContent":["export { DialogActions } from './DialogActions';\nexport type {\n DialogActionsPosition,\n DialogActionsProps,\n DialogActionsSlots,\n DialogActionsState,\n} from './DialogActions.types';\nexport { renderDialogActions_unstable } from './renderDialogActions';\nexport { useDialogActions_unstable } from './useDialogActions';\nexport { dialogActionsClassNames, useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';\n"],"names":["DialogActions","renderDialogActions_unstable","useDialogActions_unstable","dialogActionsClassNames","useDialogActionsStyles_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAOhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}

View File

@@ -0,0 +1,9 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of DialogActions
*/ export const renderDialogActions_unstable = (state)=>{
assertSlots(state);
// TODO Add additional slots in the appropriate place
return /*#__PURE__*/ _jsx(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogActions/renderDialogActions.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState): JSXElement => {\n assertSlots<DialogActionsSlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogActions_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qDAAqD;IACrD,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,29 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Create the state required to render DialogActions.
*
* The returned state can be modified with hooks such as useDialogActionsStyles_unstable,
* before being passed to renderDialogActions_unstable.
*
* @param props - props from this instance of DialogActions
* @param ref - reference to root HTMLElement of DialogActions
*/ export const useDialogActions_unstable = (props, ref)=>{
const { position = 'end', fluid = false } = props;
return {
components: {
root: 'div'
},
root: slot.always(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: ref,
...props
}), {
elementType: 'div'
}),
position,
fluid
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogActions/useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n props: DialogActionsProps,\n ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n const { position = 'end', fluid = false } = props;\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('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: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n position,\n fluid,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogActions_unstable","props","ref","position","fluid","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAE,GAAGH;IAC5C,OAAO;QACLI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL;QACAC;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,62 @@
'use client';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
export const dialogActionsClassNames = {
root: 'fui-DialogActions'
};
/**
* Styles for the root slot
*/
const useResetStyles = /*#__PURE__*/__resetStyles("rhfpeu0", null, {
r: [".rhfpeu0{gap:8px;height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}"],
s: ["@media screen and (max-width: 480px){.rhfpeu0{flex-direction:column;justify-self:stretch;}}"]
});
const useStyles = /*#__PURE__*/__styles({
gridPositionEnd: {
Bdqf98w: "f1a7i8kp",
Br312pm: "fd46tj4",
Bw0ie65: "fsyjsko",
Btsd7tp: "f1n00o3b",
ufxxby: "f1mvsp37",
Bq5p579: "flbz1vp"
},
gridPositionStart: {
Bdqf98w: "fsxvdwy",
Br312pm: "fwpfdsa",
Bw0ie65: "f1e2fz10",
Ew0qkd: "f119phc2",
ufxxby: "f1j719yo",
Bq5p579: "flbz1vp"
},
fluidStart: {
Bw0ie65: "fsyjsko"
},
fluidEnd: {
Br312pm: "fwpfdsa"
}
}, {
d: [".f1a7i8kp{justify-self:end;}", ".fd46tj4{grid-column-start:2;}", ".fsyjsko{grid-column-end:4;}", ".fsxvdwy{justify-self:start;}", ".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}"],
m: [["@media screen and (max-width: 480px){.f1n00o3b{grid-column-start:1;}}", {
m: "screen and (max-width: 480px)"
}], ["@media screen and (max-width: 480px){.f1mvsp37{grid-row-start:4;}}", {
m: "screen and (max-width: 480px)"
}], ["@media screen and (max-width: 480px){.flbz1vp{grid-row-end:auto;}}", {
m: "screen and (max-width: 480px)"
}], ["@media screen and (max-width: 480px){.f119phc2{grid-column-end:4;}}", {
m: "screen and (max-width: 480px)"
}], ["@media screen and (max-width: 480px){.f1j719yo{grid-row-start:3;}}", {
m: "screen and (max-width: 480px)"
}]]
});
/**
* Apply styling to the DialogActions slots based on the state
*/
export const useDialogActionsStyles_unstable = state => {
'use no memo';
const resetStyles = useResetStyles();
const styles = useStyles();
state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","Btsd7tp","ufxxby","Bq5p579","gridPositionStart","Ew0qkd","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/**\n * Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,UAAU,EAAEC,sCAAsC,QAAQ,0BAA0B;AAC7F,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,eAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,UAAA;IAAAN,OAAA;EAAA;EAAAO,QAAA;IAAAR,OAAA;EAAA;AAAA;EAAAS,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC5U,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,57 @@
'use client';
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
export const dialogActionsClassNames = {
root: 'fui-DialogActions'
};
/**
* Styles for the root slot
*/ const useResetStyles = makeResetStyles({
gap: DIALOG_GAP,
height: 'fit-content',
boxSizing: 'border-box',
display: 'flex',
gridRowStart: 3,
gridRowEnd: 3,
[DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
flexDirection: 'column',
justifySelf: 'stretch'
}
});
const useStyles = makeStyles({
gridPositionEnd: {
justifySelf: 'end',
gridColumnStart: 2,
gridColumnEnd: 4,
[DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
gridColumnStart: 1,
gridRowStart: 4,
gridRowEnd: 'auto'
}
},
gridPositionStart: {
justifySelf: 'start',
gridColumnStart: 1,
gridColumnEnd: 2,
[DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
gridColumnEnd: 4,
gridRowStart: 3,
gridRowEnd: 'auto'
}
},
fluidStart: {
gridColumnEnd: 4
},
fluidEnd: {
gridColumnStart: 1
}
});
/**
* Apply styling to the DialogActions slots based on the state
*/ export const useDialogActionsStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
const styles = useStyles();
state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n});\n\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto',\n },\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto',\n },\n },\n fluidStart: {\n gridColumnEnd: 4,\n },\n fluidEnd: {\n gridColumnStart: 1,\n },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n resetStyles,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","gap","height","boxSizing","display","gridRowStart","gridRowEnd","flexDirection","justifySelf","useStyles","gridPositionEnd","gridColumnStart","gridColumnEnd","gridPositionStart","fluidStart","fluidEnd","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,UAAU,EAAEC,sCAAsC,QAAQ,2BAA2B;AAE9F,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBP,gBAAgB;IACrCQ,KAAKL;IACLM,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,YAAY;IACZ,CAACT,uCAAuC,EAAE;QACxCU,eAAe;QACfC,aAAa;IACf;AACF;AAEA,MAAMC,YAAYf,WAAW;IAC3BgB,iBAAiB;QACfF,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,uCAAuC,EAAE;YACxCc,iBAAiB;YACjBN,cAAc;YACdC,YAAY;QACd;IACF;IACAO,mBAAmB;QACjBL,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,uCAAuC,EAAE;YACxCe,eAAe;YACfP,cAAc;YACdC,YAAY;QACd;IACF;IACAQ,YAAY;QACVF,eAAe;IACjB;IACAG,UAAU;QACRJ,iBAAiB;IACnB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,cAAclB;IACpB,MAAMmB,SAASV;IACfQ,MAAMlB,IAAI,CAACqB,SAAS,GAAGzB,aACrBG,wBAAwBC,IAAI,EAC5BmB,aACAD,MAAMI,QAAQ,KAAK,WAAWF,OAAON,iBAAiB,EACtDI,MAAMI,QAAQ,KAAK,SAASF,OAAOT,eAAe,EAClDO,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,WAAWF,OAAOL,UAAU,EAC9DG,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,SAASF,OAAOJ,QAAQ,EAC1DE,MAAMlB,IAAI,CAACqB,SAAS;IAEtB,OAAOH;AACT,EAAE"}

View File

@@ -0,0 +1,2 @@
import { FadeRelaxed } from '@fluentui/react-motion-components-preview';
export const DialogBackdropMotion = FadeRelaxed;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogBackdropMotion.ts"],"sourcesContent":["import { FadeRelaxed } from '@fluentui/react-motion-components-preview';\n\nexport const DialogBackdropMotion = FadeRelaxed;\n"],"names":["FadeRelaxed","DialogBackdropMotion"],"mappings":"AAAA,SAASA,WAAW,QAAQ,4CAA4C;AAExE,OAAO,MAAMC,uBAAuBD,YAAY"}

View File

@@ -0,0 +1,16 @@
'use client';
import * as React from 'react';
import { useDialogBody_unstable } from './useDialogBody';
import { renderDialogBody_unstable } from './renderDialogBody';
import { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* The `DialogBody` is a container where the content of the dialog is rendered.
* Apart from styling, this component does not have other behavior.
*/ export const DialogBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDialogBody_unstable(props, ref);
useDialogBodyStyles_unstable(state);
useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state);
return renderDialogBody_unstable(state);
});
DialogBody.displayName = 'DialogBody';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogBody/DialogBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n const state = useDialogBody_unstable(props, ref);\n\n useDialogBodyStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state);\n\n return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"names":["React","useDialogBody_unstable","renderDialogBody_unstable","useDialogBodyStyles_unstable","useCustomStyleHook_unstable","DialogBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

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

View File

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

View File

@@ -0,0 +1,4 @@
export { DialogBody } from './DialogBody';
export { renderDialogBody_unstable } from './renderDialogBody';
export { useDialogBody_unstable } from './useDialogBody';
export { dialogBodyClassNames, useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogBody/index.ts"],"sourcesContent":["export { DialogBody } from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody.types';\nexport { renderDialogBody_unstable } from './renderDialogBody';\nexport { useDialogBody_unstable } from './useDialogBody';\nexport { dialogBodyClassNames, useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';\n"],"names":["DialogBody","renderDialogBody_unstable","useDialogBody_unstable","dialogBodyClassNames","useDialogBodyStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

View File

@@ -0,0 +1,9 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of DialogBody
*/ export const renderDialogBody_unstable = (state)=>{
assertSlots(state);
// TODO Add additional slots in the appropriate place
return /*#__PURE__*/ _jsx(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogBody/renderDialogBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState): JSXElement => {\n assertSlots<DialogBodySlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogBody_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qDAAqD;IACrD,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,27 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Create the state required to render DialogBody.
*
* The returned state can be modified with hooks such as useDialogBodyStyles_unstable,
* before being passed to renderDialogBody_unstable.
*
* @param props - props from this instance of DialogBody
* @param ref - reference to root HTMLElement of DialogBody
*/ export const useDialogBody_unstable = (props, ref)=>{
var _props_as;
return {
components: {
root: 'div'
},
root: slot.always(getIntrinsicElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : '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: ref,
...props
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogBody/useDialogBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogBodyProps, DialogBodyState } from './DialogBody.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps(props.as ?? '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: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogBody_unstable","props","ref","components","root","always","as","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;QAMhCD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyBG,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAY,OAAO;YAC1C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
import { __resetStyles, mergeClasses } from '@griffel/react';
import { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';
export const dialogBodyClassNames = {
root: 'fui-DialogBody'
};
/**
* Styles for the root slot
*/
const useResetStyles = /*#__PURE__*/__resetStyles("rhwx3p8", null, {
r: [".rhwx3p8{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);max-height:calc(100dvh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"],
s: ["@media screen and (max-width: 480px){.rhwx3p8{max-width:100vw;grid-template-rows:auto 1fr auto;}}", "@media screen and (max-height: 359px){.rhwx3p8{max-height:unset;}}"]
});
/**
* Apply styling to the DialogBody slots based on the state
*/
export const useDialogBodyStyles_unstable = state => {
'use no memo';
const resetStyles = useResetStyles();
state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [\n `calc(100vh - 2 * ${SURFACE_PADDING})`,\n `calc(100dvh - 2 * ${SURFACE_PADDING})`\n ],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset'\n }\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,UAAU,EAAEC,sCAAsC,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;AACrI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,CAkB1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;EACpCI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGb,YAAY,CAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,35 @@
'use client';
import { makeResetStyles, mergeClasses } from '@griffel/react';
import { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';
export const dialogBodyClassNames = {
root: 'fui-DialogBody'
};
/**
* Styles for the root slot
*/ const useResetStyles = makeResetStyles({
overflow: 'unset',
gap: DIALOG_GAP,
display: 'grid',
maxHeight: [
`calc(100vh - 2 * ${SURFACE_PADDING})`,
`calc(100dvh - 2 * ${SURFACE_PADDING})`
],
boxSizing: 'border-box',
gridTemplateRows: 'auto 1fr',
gridTemplateColumns: '1fr 1fr auto',
[DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
maxWidth: '100vw',
gridTemplateRows: 'auto 1fr auto'
},
[DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
maxHeight: 'unset'
}
});
/**
* Apply styling to the DialogBody slots based on the state
*/ export const useDialogBodyStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [`calc(100vh - 2 * ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset',\n },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SACEC,UAAU,EACVC,sCAAsC,EACtCC,+BAA+B,EAC/BC,eAAe,QACV,iBAAiB;AAExB,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBR,gBAAgB;IACrCS,UAAU;IACVC,KAAKR;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,gBAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,gBAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,uCAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,gCAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,cAAcX;IAEpBU,MAAMX,IAAI,CAACa,SAAS,GAAGnB,aAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,16 @@
'use client';
import * as React from 'react';
import { useDialogContent_unstable } from './useDialogContent';
import { renderDialogContent_unstable } from './renderDialogContent';
import { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* The `DialogContent` is a container where the content of the dialog is rendered.
* Apart from styling, this component does not have other behavior.
*/ export const DialogContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDialogContent_unstable(props, ref);
useDialogContentStyles_unstable(state);
useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);
return renderDialogContent_unstable(state);
});
DialogContent.displayName = 'DialogContent';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogContent/DialogContent.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent: ForwardRefComponent<DialogContentProps> = React.forwardRef((props, ref) => {\n const state = useDialogContent_unstable(props, ref);\n\n useDialogContentStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);\n\n return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"names":["React","useDialogContent_unstable","renderDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyleHook_unstable","DialogContent","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

View File

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

View File

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

View File

@@ -0,0 +1,4 @@
export { DialogContent } from './DialogContent';
export { renderDialogContent_unstable } from './renderDialogContent';
export { useDialogContent_unstable } from './useDialogContent';
export { dialogContentClassNames, useDialogContentStyles_unstable } from './useDialogContentStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogContent/index.ts"],"sourcesContent":["export { DialogContent } from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent.types';\nexport { renderDialogContent_unstable } from './renderDialogContent';\nexport { useDialogContent_unstable } from './useDialogContent';\nexport { dialogContentClassNames, useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\n"],"names":["DialogContent","renderDialogContent_unstable","useDialogContent_unstable","dialogContentClassNames","useDialogContentStyles_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogContent/renderDialogContent.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState): JSXElement => {\n assertSlots<DialogContentSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogContent_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,27 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Create the state required to render DialogBody.
*
* The returned state can be modified with hooks such as useDialogBodyStyles_unstable,
* before being passed to renderDialogBody_unstable.
*
* @param props - props from this instance of DialogBody
* @param ref - reference to root HTMLElement of DialogBody
*/ export const useDialogContent_unstable = (props, ref)=>{
var _props_as;
return {
components: {
root: 'div'
},
root: slot.always(getIntrinsicElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : '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: ref,
...props
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogContent/useDialogContent.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { DialogContentProps, DialogContentState } from './DialogContent.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogContent_unstable = (\n props: DialogContentProps,\n ref: React.Ref<HTMLElement>,\n): DialogContentState => {\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps(props.as ?? '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: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContent_unstable","props","ref","components","root","always","as","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;QAO6BD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyBG,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAY,OAAO;YAC1C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,25 @@
'use client';
import { __resetStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';
export const dialogContentClassNames = {
root: 'fui-DialogContent'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__resetStyles("r1v5zwsm", null, {
r: [".r1v5zwsm{padding:var(--strokeWidthThick);margin:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}"],
s: ["@media screen and (max-height: 359px){.r1v5zwsm{overflow-y:unset;}}"]
});
/**
* Apply styling to the DialogContent slots based on the state
*/
export const useDialogContentStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} * -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/**\n * Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,+BAA+B,QAAQ,gBAAgB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAcrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1BI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,32 @@
'use client';
import { makeResetStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';
export const dialogContentClassNames = {
root: 'fui-DialogContent'
};
/**
* Styles for the root slot
*/ const useStyles = makeResetStyles({
padding: tokens.strokeWidthThick,
margin: `calc(${tokens.strokeWidthThick} * -1)`,
...typographyStyles.body1,
overflowY: 'auto',
minHeight: '32px',
boxSizing: 'border-box',
gridRowStart: 2,
gridRowEnd: 2,
gridColumnStart: 1,
gridColumnEnd: 4,
[DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
overflowY: 'unset'
}
});
/**
* Apply styling to the DialogContent slots based on the state
*/ export const useDialogContentStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} * -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset',\n },\n});\n\n/**\n * Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","padding","strokeWidthThick","margin","body1","overflowY","minHeight","boxSizing","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,+BAA+B,QAAQ,iBAAiB;AAEjE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,SAASN,OAAOO,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAER,OAAOO,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGN,iBAAiBQ,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACd,gCAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aAAaI,wBAAwBC,IAAI,EAAEe,QAAQD,MAAMd,IAAI,CAACgB,SAAS;IAC9F,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,18 @@
'use client';
import * as React from 'react';
import { useDialogSurface_unstable } from './useDialogSurface';
import { renderDialogSurface_unstable } from './renderDialogSurface';
import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';
import { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* DialogSurface component represents the visual part of a `Dialog` as a whole,
* it contains everything that should be visible.
*/ export const DialogSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDialogSurface_unstable(props, ref);
const contextValues = useDialogSurfaceContextValues_unstable(state);
useDialogSurfaceStyles_unstable(state);
useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);
return renderDialogSurface_unstable(state, contextValues);
});
DialogSurface.displayName = 'DialogSurface';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n const state = useDialogSurface_unstable(props, ref);\n const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n useDialogSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);\n\n return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQT,0BAA0BO,OAAOC;IAC/C,MAAME,gBAAgBP,uCAAuCM;IAE7DP,gCAAgCO;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot, ExtractSlotProps } from '@fluentui/react-utilities';\n\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\n/**\n * Custom slot props for the backdrop slot.\n */\nexport type DialogBackdropSlotProps = ExtractSlotProps<\n Slot<'div'> & {\n /**\n * Controls the backdrop appearance.\n * - 'dimmed': Shows a dimmed backdrop (default for standalone dialogs)\n * - 'transparent': Shows a transparent backdrop (default for nested dialogs)\n */\n appearance?: 'dimmed' | 'transparent';\n }\n>;\n\nexport type DialogSurfaceSlots = {\n /**\n * Dimmed background of dialog.\n * The default backdrop is rendered as a `<div>` with styling.\n * This slot expects a `<div>` element which will replace the default backdrop.\n * The backdrop should have `aria-hidden=\"true\"`.\n *\n * Accepts an `appearance` prop to control backdrop visibility:\n * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n * - `'transparent'`: Always shows a transparent backdrop.\n *\n * @example\n * ```tsx\n * <DialogSurface backdrop={{ appearance: 'dimmed' }} />\n * ```\n */\n backdrop?: Slot<DialogBackdropSlotProps>;\n root: Slot<'div'>;\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>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n Pick<DialogContextValue, 'isNestedDialog'> &\n Pick<PortalProps, 'mountNode'> & {\n open?: boolean;\n unmountOnClose?: boolean;\n /**\n * Whether the backdrop should be treated as nested (transparent).\n * When inside an OverlayDrawer, this is `false` even though `isNestedDialog` may be `true`,\n * preventing the false-positive transparent backdrop.\n */\n treatBackdropAsNested: boolean;\n /**\n * Transition status for animation.\n * In test environment, this is always `undefined`.\n *\n * @deprecated Will be always `undefined`.\n */\n transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n backdropAppearance?: DialogBackdropSlotProps['appearance'];\n };\n"],"names":[],"mappings":"AA2DA;;CAEC,GACD,WAoBI"}

View File

@@ -0,0 +1,5 @@
export { DialogSurface } from './DialogSurface';
export { renderDialogSurface_unstable } from './renderDialogSurface';
export { useDialogSurface_unstable } from './useDialogSurface';
export { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';
export { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n DialogBackdropSlotProps,\n DialogSurfaceContextValues,\n DialogSurfaceElement,\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAShD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,sCAAsC,QAAQ,kCAAkC"}

View File

@@ -0,0 +1,26 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { MotionRefForwarderReset } from '@fluentui/react-motion';
import { Portal } from '@fluentui/react-portal';
import { assertSlots } from '@fluentui/react-utilities';
import { DialogSurfaceProvider } from '../../contexts';
/**
* Render the final JSX of DialogSurface
*/ export const renderDialogSurface_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(Portal, {
mountNode: state.mountNode,
children: [
state.backdrop && // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable
// FIXME: this should be resolved by properly splitting props and state slots declaration
state.backdropMotion && /*#__PURE__*/ _jsx(state.backdropMotion, {
children: /*#__PURE__*/ _jsx(state.backdrop, {})
}),
/*#__PURE__*/ _jsx(MotionRefForwarderReset, {
children: /*#__PURE__*/ _jsx(DialogSurfaceProvider, {
value: contextValues.dialogSurface,
children: /*#__PURE__*/ _jsx(state.root, {})
})
})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MotionRefForwarderReset } from '@fluentui/react-motion';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (\n state: DialogSurfaceState,\n contextValues: DialogSurfaceContextValues,\n): JSXElement => {\n assertSlots<DialogSurfaceSlots>(state);\n\n return (\n <Portal mountNode={state.mountNode}>\n {state.backdrop &&\n // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable\n // FIXME: this should be resolved by properly splitting props and state slots declaration\n state.backdropMotion && (\n <state.backdropMotion>\n <state.backdrop />\n </state.backdropMotion>\n )}\n <MotionRefForwarderReset>\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n <state.root />\n </DialogSurfaceProvider>\n </MotionRefForwarderReset>\n </Portal>\n );\n};\n"],"names":["MotionRefForwarderReset","Portal","assertSlots","DialogSurfaceProvider","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","backdropMotion","value","dialogSurface","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,iBAAiB;AAGvD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,MAACJ;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,kBAClB,KAACJ,MAAMI,cAAc;0BACnB,cAAA,KAACJ,MAAMG,QAAQ;;0BAGrB,KAACR;0BACC,cAAA,KAACG;oBAAsBO,OAAOJ,cAAcK,aAAa;8BACvD,cAAA,KAACN,MAAMO,IAAI;;;;;AAKrB,EAAE"}

View File

@@ -0,0 +1,127 @@
'use client';
import { Escape } from '@fluentui/keyboard-keys';
import { presenceMotionSlot } from '@fluentui/react-motion';
import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';
import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
import { DialogBackdropMotion } from '../DialogBackdropMotion';
import { useMotionForwardedRef } from '@fluentui/react-motion';
/**
* Create the state required to render DialogSurface.
*
* The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,
* before being passed to renderDialogSurface_unstable.
*
* @param props - props from this instance of DialogSurface
* @param ref - reference to root HTMLElement of DialogSurface
*/ export const useDialogSurface_unstable = (props, ref)=>{
const contextRef = useMotionForwardedRef();
const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);
const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);
const backdropOverride = useDialogBackdropContext_unstable();
const treatBackdropAsNested = backdropOverride !== null && backdropOverride !== void 0 ? backdropOverride : isNestedDialog;
const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);
const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);
const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
const open = useDialogContext_unstable((ctx)=>ctx.open);
const unmountOnClose = useDialogContext_unstable((ctx)=>ctx.unmountOnClose);
const handledBackdropClick = useEventCallback((event)=>{
if (isResolvedShorthand(props.backdrop)) {
var _props_backdrop_onClick, _props_backdrop;
(_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);
}
if (modalType === 'modal' && !event.isDefaultPrevented()) {
requestOpenChange({
event,
open: false,
type: 'backdropClick'
});
}
});
const handleKeyDown = useEventCallback((event)=>{
var _props_onKeyDown;
(_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
if (event.key === Escape && !event.isDefaultPrevented()) {
requestOpenChange({
event,
open: false,
type: 'escapeKeyDown'
});
// stop propagation to avoid conflicting with other elements that listen for `Escape`
// e,g: nested Dialog, Popover, Menu and Tooltip
event.preventDefault();
}
});
const backdrop = slot.optional(props.backdrop, {
renderByDefault: modalType !== 'non-modal',
defaultProps: {
'aria-hidden': 'true'
},
elementType: 'div'
});
const backdropAppearance = backdrop === null || backdrop === void 0 ? void 0 : backdrop.appearance;
if (backdrop) {
backdrop.onClick = handledBackdropClick;
// remove backdrop.appearance so it is not passed to the DOM
delete backdrop.appearance;
}
const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
useIsomorphicLayoutEffect(()=>{
if (!open) {
enableBodyScroll();
return;
}
if (isNestedDialog || modalType === 'non-modal') {
return;
}
disableBodyScroll();
return ()=>enableBodyScroll();
}, [
open,
modalType,
isNestedDialog,
disableBodyScroll,
enableBodyScroll
]);
return {
components: {
backdrop: 'div',
root: 'div',
backdropMotion: DialogBackdropMotion
},
open,
backdrop,
isNestedDialog,
treatBackdropAsNested,
backdropAppearance,
unmountOnClose,
mountNode: props.mountNode,
root: slot.always(getIntrinsicElementProps('div', {
tabIndex: -1,
role: modalType === 'alert' ? 'alertdialog' : 'dialog',
'aria-modal': modalType !== 'non-modal',
'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
'aria-hidden': !unmountOnClose && !open ? true : undefined,
...props,
...modalAttributes,
onKeyDown: handleKeyDown,
// FIXME:
// `DialogSurfaceElement` 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: useMergedRefs(ref, contextRef, dialogRef)
}), {
elementType: 'div'
}),
backdropMotion: presenceMotionSlot(props.backdropMotion, {
elementType: DialogBackdropMotion,
defaultProps: {
appear: unmountOnClose,
visible: open
}
}),
// Deprecated properties
transitionStatus: undefined
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,6 @@
export function useDialogSurfaceContextValues_unstable(state) {
const dialogSurface = true;
return {
dialogSurface
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceContextValues.ts"],"sourcesContent":["import type { DialogSurfaceContextValues, DialogSurfaceState } from './DialogSurface.types';\nimport type { DialogSurfaceContextValue } from '../../contexts';\n\nexport function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues {\n const dialogSurface: DialogSurfaceContextValue = true;\n\n return { dialogSurface };\n}\n"],"names":["useDialogSurfaceContextValues_unstable","state","dialogSurface"],"mappings":"AAGA,OAAO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAMC,gBAA2C;IAEjD,OAAO;QAAEA;IAAc;AACzB"}

View File

@@ -0,0 +1,53 @@
'use client';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
export const dialogSurfaceClassNames = {
root: 'fui-DialogSurface',
backdrop: 'fui-DialogSurface__backdrop'
};
/**
* Styles for the root slot
*/
const useRootBaseStyle = /*#__PURE__*/__resetStyles("r1u3t6p6", "r5coedp", {
r: [".r1u3t6p6{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;max-height:100dvh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow64);}", ".r1u3t6p6:focus{outline-style:none;}", ".r1u3t6p6:focus-visible{outline-style:none;}", ".r1u3t6p6[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1u3t6p6[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r5coedp{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;max-height:100dvh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow64);}", ".r5coedp:focus{outline-style:none;}", ".r5coedp:focus-visible{outline-style:none;}", ".r5coedp[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r5coedp[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
s: ["@media (forced-colors: active){.r1u3t6p6[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media screen and (max-width: 480px){.r1u3t6p6{max-width:100vw;}}", "@media screen and (max-height: 359px){.r1u3t6p6{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.r5coedp[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@media screen and (max-width: 480px){.r5coedp{max-width:100vw;}}", "@media screen and (max-height: 359px){.r5coedp{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"]
});
const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("r1e18s3l", null, [".r1e18s3l{inset:0px;background-color:var(--colorBackgroundOverlay);position:fixed;}"]);
const useStyles = /*#__PURE__*/__styles({
nestedDialogBackdrop: {
De3pzq: "f1c21dwh"
},
dialogHidden: {
Bkecrkj: "f1aehjj5"
}
}, {
d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1aehjj5{pointer-events:none;}"]
});
/**
* Apply styling to the DialogSurface slots based on the state
*/
export const useDialogSurfaceStyles_unstable = state => {
'use no memo';
const {
root,
backdrop,
open,
unmountOnClose,
treatBackdropAsNested,
backdropAppearance
} = state;
const rootBaseStyle = useRootBaseStyle();
const backdropBaseStyle = useBackdropBaseStyle();
const styles = useStyles();
const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
const mountedAndClosed = !unmountOnClose && !open;
root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
if (backdrop) {
backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,78 @@
'use client';
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
export const dialogSurfaceClassNames = {
root: 'fui-DialogSurface',
backdrop: 'fui-DialogSurface__backdrop'
};
/**
* Styles for the root slot
*/ const useRootBaseStyle = makeResetStyles({
...createFocusOutlineStyle(),
inset: 0,
padding: SURFACE_PADDING,
margin: 'auto',
borderStyle: 'none',
overflow: 'unset',
border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,
borderRadius: tokens.borderRadiusXLarge,
display: 'block',
userSelect: 'unset',
visibility: 'unset',
position: 'fixed',
height: 'fit-content',
maxWidth: '600px',
maxHeight: [
'100vh',
'100dvh'
],
boxSizing: 'border-box',
backgroundColor: tokens.colorNeutralBackground1,
color: tokens.colorNeutralForeground1,
// Same styles as DialogSurfaceMotion last keyframe,
// to ensure dialog will be properly styled when surfaceMotion is opted-out
boxShadow: tokens.shadow64,
[DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
maxWidth: '100vw'
},
[DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
overflowY: 'auto',
// We need to offset the scrollbar by adding transparent borders otherwise
// it conflicts with the border radius.
paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET
}
});
const useBackdropBaseStyle = makeResetStyles({
inset: '0px',
backgroundColor: tokens.colorBackgroundOverlay,
position: 'fixed'
});
const useStyles = makeStyles({
nestedDialogBackdrop: {
backgroundColor: tokens.colorTransparentBackground
},
dialogHidden: {
pointerEvents: 'none'
}
});
/**
* Apply styling to the DialogSurface slots based on the state
*/ export const useDialogSurfaceStyles_unstable = (state)=>{
'use no memo';
const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;
const rootBaseStyle = useRootBaseStyle();
const backdropBaseStyle = useBackdropBaseStyle();
const styles = useStyles();
const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
const mountedAndClosed = !unmountOnClose && !open;
root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
if (backdrop) {
backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,9 @@
import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';
import { Scale } from '@fluentui/react-motion-components-preview';
export const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {
outScale: 0.85,
easing: motionTokens.curveDecelerateMid,
duration: motionTokens.durationGentle,
exitEasing: motionTokens.curveAccelerateMin,
exitDuration: motionTokens.durationGentle
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';\nimport { Scale } from '@fluentui/react-motion-components-preview';\n\nexport const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {\n outScale: 0.85,\n easing: motionTokens.curveDecelerateMid,\n duration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMin,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["createPresenceComponentVariant","motionTokens","Scale","DialogSurfaceMotion","outScale","easing","curveDecelerateMid","duration","durationGentle","exitEasing","curveAccelerateMin","exitDuration"],"mappings":"AAAA,SAASA,8BAA8B,EAAEC,YAAY,QAAQ,yBAAyB;AACtF,SAASC,KAAK,QAAQ,4CAA4C;AAElE,OAAO,MAAMC,sBAAsBH,+BAA+BE,OAAO;IACvEE,UAAU;IACVC,QAAQJ,aAAaK,kBAAkB;IACvCC,UAAUN,aAAaO,cAAc;IACrCC,YAAYR,aAAaS,kBAAkB;IAC3CC,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}

View File

@@ -0,0 +1,16 @@
'use client';
import * as React from 'react';
import { useDialogTitle_unstable } from './useDialogTitle';
import { renderDialogTitle_unstable } from './renderDialogTitle';
import { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* The `DialogTitle` component expects to have a title/header
* and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.
*/ export const DialogTitle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useDialogTitle_unstable(props, ref);
useDialogTitleStyles_unstable(state);
useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state);
return renderDialogTitle_unstable(state);
});
DialogTitle.displayName = 'DialogTitle';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n const state = useDialogTitle_unstable(props, ref);\n\n useDialogTitleStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state);\n\n return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHook_unstable","DialogTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogTitle/DialogTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\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 root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n /**\n * By default a Dialog with modalType='non-modal' will have a close button action\n */\n action?: Slot<'div'>;\n};\n\n/**\n * DialogTitle Props\n */\nexport type DialogTitleProps = ComponentProps<DialogTitleSlots>;\n\n/**\n * State used in rendering DialogTitle\n */\nexport type DialogTitleState = ComponentState<DialogTitleSlots>;\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAAgE"}

View File

@@ -0,0 +1,4 @@
export { DialogTitle } from './DialogTitle';
export { renderDialogTitle_unstable } from './renderDialogTitle';
export { useDialogTitle_unstable } from './useDialogTitle';
export { dialogTitleClassNames, useDialogTitleInternalStyles, useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogTitle/index.ts"],"sourcesContent":["export { DialogTitle } from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nexport { renderDialogTitle_unstable } from './renderDialogTitle';\nexport { useDialogTitle_unstable } from './useDialogTitle';\nexport {\n dialogTitleClassNames,\n useDialogTitleInternalStyles,\n useDialogTitleStyles_unstable,\n} from './useDialogTitleStyles.styles';\n"],"names":["DialogTitle","renderDialogTitle_unstable","useDialogTitle_unstable","dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SACEC,qBAAqB,EACrBC,4BAA4B,EAC5BC,6BAA6B,QACxB,gCAAgC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogTitle/renderDialogTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState): JSXElement => {\n assertSlots<DialogTitleSlots>(state);\n\n return (\n <>\n <state.root>{state.root.children}</state.root>\n {state.action && <state.action />}\n </>\n );\n};\n"],"names":["assertSlots","renderDialogTitle_unstable","state","root","children","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE;;0BACE,KAACA,MAAMC,IAAI;0BAAED,MAAMC,IAAI,CAACC,QAAQ;;YAC/BF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}

View File

@@ -0,0 +1,48 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useDialogContext_unstable } from '../../contexts/dialogContext';
import { Dismiss20Regular } from '@fluentui/react-icons';
import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
/**
* Create the state required to render DialogTitle.
*
* The returned state can be modified with hooks such as useDialogTitleStyles_unstable,
* before being passed to renderDialogTitle_unstable.
*
* @param props - props from this instance of DialogTitle
* @param ref - reference to root HTMLElement of DialogTitle
*/ export const useDialogTitle_unstable = (props, ref)=>{
const { action } = props;
const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);
const internalStyles = useDialogTitleInternalStyles();
return {
components: {
root: 'h2',
action: 'div'
},
root: slot.always(getIntrinsicElementProps('h2', {
ref,
id: useDialogContext_unstable((ctx)=>ctx.dialogTitleId),
...props
}), {
elementType: 'h2'
}),
action: slot.optional(action, {
renderByDefault: modalType === 'non-modal',
defaultProps: {
children: /*#__PURE__*/ React.createElement(DialogTrigger, {
disableButtonEnhancement: true,
action: "close"
}, /*#__PURE__*/ React.createElement("button", {
type: "button",
className: internalStyles,
// TODO: find a better way to add internal labels
"aria-label": "close"
}, /*#__PURE__*/ React.createElement(Dismiss20Regular, null)))
},
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {\n const { action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: 'h2',\n action: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('h2', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n ...props,\n }),\n { elementType: 'h2' },\n ),\n action: slot.optional(action, {\n renderByDefault: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger disableButtonEnhancement action=\"close\">\n <button\n type=\"button\"\n className={internalStyles}\n // TODO: find a better way to add internal labels\n aria-label=\"close\"\n >\n <Dismiss20Regular />\n </button>\n </DialogTrigger>\n ),\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","Dismiss20Regular","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","action","modalType","ctx","internalStyles","components","root","always","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,+BAA+B;AACzE,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,4BAA4B,QAAQ,gCAAgC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,YAAYR,0BAA0BS,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBP;IAEvB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMb,KAAKc,MAAM,CACff,yBAAyB,MAAM;YAC7BQ;YACAQ,IAAId,0BAA0BS,CAAAA,MAAOA,IAAIM,aAAa;YACtD,GAAGV,KAAK;QACV,IACA;YAAEW,aAAa;QAAK;QAEtBT,QAAQR,KAAKkB,QAAQ,CAACV,QAAQ;YAC5BW,iBAAiBV,cAAc;YAC/BW,cAAc;gBACZC,wBACE,oBAAClB;oBAAcmB,0BAAAA;oBAAyBd,QAAO;iCAC7C,oBAACe;oBACCC,MAAK;oBACLC,WAAWd;oBACX,iDAAiD;oBACjDe,cAAW;iCAEX,oBAACxB;YAIT;YACAe,aAAa;QACf;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,47 @@
'use client';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { typographyStyles } from '@fluentui/react-theme';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
export const dialogTitleClassNames = {
root: 'fui-DialogTitle',
action: 'fui-DialogTitle__action'
};
/**
* Styles for the root slot
*/
const useRootResetStyles = /*#__PURE__*/__resetStyles("rxjm636", null, [".rxjm636{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}"]);
const useStyles = /*#__PURE__*/__styles({
rootWithoutAction: {
Bw0ie65: "fsyjsko"
}
}, {
d: [".fsyjsko{grid-column-end:4;}"]
});
/**
* Styles for the action slot
*/
const useActionResetStyles = /*#__PURE__*/__resetStyles("r13kcrze", null, [".r13kcrze{grid-row-start:1;grid-row-end:1;grid-column-start:3;justify-self:end;align-self:start;}"]);
/**
* Styles to be applied on internal elements used by default action on non-modal Dialog
* @internal
*/
export const useDialogTitleInternalStyles = /*#__PURE__*/__resetStyles("r2avt6e", "roj2bbc", {
r: [".r2avt6e{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".r2avt6e:focus{outline-style:none;}", ".r2avt6e:focus-visible{outline-style:none;}", ".r2avt6e[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r2avt6e[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".roj2bbc{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".roj2bbc:focus{outline-style:none;}", ".roj2bbc:focus-visible{outline-style:none;}", ".roj2bbc[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".roj2bbc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
s: ["@media (forced-colors: active){.r2avt6e[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.roj2bbc[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
});
/**
* Apply styling to the DialogTitle slots based on the state
*/
export const useDialogTitleStyles_unstable = state => {
'use no memo';
const rootResetStyles = useRootResetStyles();
const actionResetStyles = useActionResetStyles();
const styles = useStyles();
state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);
if (state.action) {
state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","r","s","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/**\n * Styles for the action slot\n */ const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */ export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/**\n * Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n 'use no memo';\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGR,aAAA,6PAO9B,CAAC;AACF,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,iBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,wHAMhC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,gBAAGd,aAAA;EAAAe,CAAA;EAAAC,CAAA;AAAA,CAe/C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACZ,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;EACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;IACdW,KAAK,CAACX,MAAM,CAACe,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;EAClH;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

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