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

2554
node_modules/@fluentui/react-dialog/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

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

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

45
node_modules/@fluentui/react-dialog/README.md generated vendored Normal file
View File

@@ -0,0 +1,45 @@
# @fluentui/react-dialog
**React Dialog components for [Fluent UI React](https://react.fluentui.dev)**
To import React Dialog components:
```jsx
import * as React from 'react';
import {
Button,
Dialog,
DialogTrigger,
DialogSurface,
DialogTitle,
DialogBody,
DialogActions,
DialogContent,
} from '@fluentui/react-components';
export const DialogExample = () => {
return (
<Dialog>
<DialogTrigger>
<Button>Open dialog</Button>
</DialogTrigger>
<DialogSurface>
<DialogBody>
<DialogTitle>Dialog title</DialogTitle>
<DialogContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque
est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
cumque eaque?
</DialogContent>
<DialogActions>
<DialogTrigger>
<Button appearance="secondary">Close</Button>
</DialogTrigger>
<Button appearance="primary">Do Something</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
);
};
```

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

@@ -0,0 +1,545 @@
import { ARIAButtonResultProps } from '@fluentui/react-aria';
import { ARIAButtonType } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TriggerProps } from '@fluentui/react-utilities';
import { useModalAttributes } from '@fluentui/react-tabster';
/**
* 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 declare const Dialog: React_2.FC<DialogProps>;
export declare const DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = "4px";
export declare const DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR = "@media screen and (max-width: 480px)";
export declare const DIALOG_MEDIA_QUERY_SHORT_SCREEN = "@media screen and (max-height: 359px)";
/**
* `DialogActions` is a container for the actions of the dialog.
* Apart from styling, this component does not have other behavior.
*/
export declare const DialogActions: ForwardRefComponent<DialogActionsProps>;
export declare const dialogActionsClassNames: SlotClassNames<DialogActionsSlots>;
export declare type DialogActionsPosition = 'start' | 'end';
/**
* DialogActions Props
*/
export declare type DialogActionsProps = ComponentProps<DialogActionsSlots> & {
/**
* defines the position on the dialog grid of the actions
* @default 'end'
*/
position?: DialogActionsPosition;
/**
* Makes the actions expand the entire width of the DialogBody
* @default false
*/
fluid?: boolean;
};
export declare type DialogActionsSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering DialogActions
*/
export declare type DialogActionsState = ComponentState<DialogActionsSlots> & Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;
export declare type DialogBackdropContextValue = boolean;
export declare const DialogBackdropProvider: React_2.Provider<boolean | undefined>;
/**
* Custom slot props for the backdrop slot.
*/
export declare type DialogBackdropSlotProps = ExtractSlotProps<Slot<'div'> & {
/**
* Controls the backdrop appearance.
* - 'dimmed': Shows a dimmed backdrop (default for standalone dialogs)
* - 'transparent': Shows a transparent backdrop (default for nested dialogs)
*/
appearance?: 'dimmed' | 'transparent';
}>;
/**
* The `DialogBody` is a container where the content of the dialog is rendered.
* Apart from styling, this component does not have other behavior.
*/
export declare const DialogBody: ForwardRefComponent<DialogBodyProps>;
export declare const dialogBodyClassNames: SlotClassNames<DialogBodySlots>;
/**
* DialogBody Props
*/
export declare type DialogBodyProps = ComponentProps<DialogBodySlots> & {};
export declare type DialogBodySlots = {
root: Slot<'div'>;
};
/**
* State used in rendering DialogBody
*/
export declare type DialogBodyState = ComponentState<DialogBodySlots>;
/**
* The `DialogContent` is a container where the content of the dialog is rendered.
* Apart from styling, this component does not have other behavior.
*/
export declare const DialogContent: ForwardRefComponent<DialogContentProps>;
export declare const dialogContentClassNames: SlotClassNames<DialogContentSlots>;
/**
* DialogContent Props
*/
export declare type DialogContentProps = ComponentProps<DialogContentSlots>;
export declare type DialogContentSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering DialogContent
*/
export declare type DialogContentState = ComponentState<DialogContentSlots>;
export declare type DialogContextValue = {
open: boolean;
inertTrapFocus: boolean;
dialogTitleId?: string;
isNestedDialog: boolean;
dialogRef: React_2.Ref<DialogSurfaceElement | null>;
unmountOnClose?: boolean;
modalType: DialogModalType;
/**
* Requests dialog main component to update it's internal open state
*/
requestOpenChange: (data: DialogOpenChangeData) => void;
} & Partial<ReturnType<typeof useModalAttributes>>;
export declare type DialogContextValues = {
dialog: DialogContextValue;
/**
* dialogSurface context is provided by Dialog as false
* to ensure components inside Dialog but outside DialogSurface will consume this as false
*/
dialogSurface: DialogSurfaceContextValue;
};
export declare type DialogModalType = 'modal' | 'non-modal' | 'alert';
export declare type DialogOpenChangeData = {
type: 'escapeKeyDown';
open: boolean;
event: React_2.KeyboardEvent<DialogSurfaceElement>;
} | {
type: 'backdropClick';
open: boolean;
event: React_2.MouseEvent<DialogSurfaceElement>;
} | {
type: 'triggerClick';
open: boolean;
event: React_2.MouseEvent<DialogSurfaceElement>;
};
export declare type DialogOpenChangeEvent = DialogOpenChangeData['event'];
/**
* Callback fired when the component changes value from open state.
*
* @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`
* @param data - A data object with relevant information,
* such as open value and type of interaction that created the event
*/
export declare type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;
export declare type DialogProps = ComponentProps<Partial<DialogSlots>> & {
/**
* Dialog variations.
*
* `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.
* The tab sequence is kept within the dialog and moving the focus outside
* the dialog will imply closing it. This is the default type of the component.
*
* `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out
* and users can interact with the rest of the page.
* This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.
*
* `alert`: is a special type of modal dialogs that interrupts the user's workflow
* to communicate an important message or ask for a decision.
* Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,
* and it cannot be dismissed through the dimmed background.
*
* @default modal
*/
modalType?: DialogModalType;
/**
* Controls the open state of the dialog
* @default false
*/
open?: boolean;
/**
* Default value for the uncontrolled open state of the dialog.
* @default false
*/
defaultOpen?: boolean;
/**
* Callback fired when the component changes value from open state.
*
* @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`
* @param data - A data object with relevant information,
* such as open value and type of interaction that created the event
*/
onOpenChange?: DialogOpenChangeEventHandler;
/**
* Can contain two children including `DialogTrigger` and `DialogSurface`.
* Alternatively can only contain `DialogSurface` if using trigger outside dialog, or controlling state.
*/
children: [JSXElement, JSXElement] | JSXElement;
/**
* Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
* where the focus trap involves setting outside elements inert.
*
* @default false
*/
inertTrapFocus?: boolean;
/**
* Decides whether the dialog should be removed from the DOM tree when it is closed.
* This can be useful when dealing with components that may contain state that should not
* be reset when the dialog is closed.
*
* @default true
*/
unmountOnClose?: boolean;
};
export declare const DialogProvider: React_2.Provider<DialogContextValue | undefined> & React_2.FC<React_2.ProviderProps<DialogContextValue | undefined>>;
export declare type DialogSlots = {
/**
* For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
*
*/
surfaceMotion: Slot<PresenceMotionSlotProps>;
};
export declare type DialogState = ComponentState<InternalDialogSlots> & DialogContextValue & {
content: React_2.ReactNode;
trigger: React_2.ReactNode;
};
/**
* DialogSurface component represents the visual part of a `Dialog` as a whole,
* it contains everything that should be visible.
*/
export declare const DialogSurface: ForwardRefComponent<DialogSurfaceProps>;
export declare const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>>;
export declare type DialogSurfaceContextValue = boolean;
export declare type DialogSurfaceContextValues = {
dialogSurface: DialogSurfaceContextValue;
};
/**
* Union between all possible semantic element that represent a DialogSurface
*/
export declare type DialogSurfaceElement = HTMLElement;
/**
* DialogSurface Props
*/
export declare type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;
export declare const DialogSurfaceProvider: React_2.Provider<boolean | undefined>;
export declare type DialogSurfaceSlots = {
/**
* Dimmed background of dialog.
* The default backdrop is rendered as a `<div>` with styling.
* This slot expects a `<div>` element which will replace the default backdrop.
* The backdrop should have `aria-hidden="true"`.
*
* Accepts an `appearance` prop to control backdrop visibility:
* - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.
* - `'transparent'`: Always shows a transparent backdrop.
*
* @example
* ```tsx
* <DialogSurface backdrop={{ appearance: 'dimmed' }} />
* ```
*/
backdrop?: Slot<DialogBackdropSlotProps>;
root: Slot<'div'>;
/**
* For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
*
*/
backdropMotion: Slot<PresenceMotionSlotProps>;
};
/**
* State used in rendering DialogSurface
*/
export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<DialogContextValue, 'isNestedDialog'> & Pick<PortalProps, 'mountNode'> & {
open?: boolean;
unmountOnClose?: boolean;
/**
* Whether the backdrop should be treated as nested (transparent).
* When inside an OverlayDrawer, this is `false` even though `isNestedDialog` may be `true`,
* preventing the false-positive transparent backdrop.
*/
treatBackdropAsNested: boolean;
/**
* Transition status for animation.
* In test environment, this is always `undefined`.
*
* @deprecated Will be always `undefined`.
*/
transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
backdropAppearance?: DialogBackdropSlotProps['appearance'];
};
/**
* 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 declare const DialogTitle: ForwardRefComponent<DialogTitleProps>;
export declare const dialogTitleClassNames: SlotClassNames<DialogTitleSlots>;
/**
* DialogTitle Props
*/
export declare type DialogTitleProps = ComponentProps<DialogTitleSlots>;
export declare type DialogTitleSlots = {
/**
* By default this is a h2, but can be any heading or div,
* if `div` is provided do not forget to also provide proper `role="heading"` and `aria-level` attributes
*/
root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
/**
* By default a Dialog with modalType='non-modal' will have a close button action
*/
action?: Slot<'div'>;
};
/**
* State used in rendering DialogTitle
*/
export declare type DialogTitleState = ComponentState<DialogTitleSlots>;
/**
* A non-visual component that wraps its child
* and configures them to be the trigger that will open or close a `Dialog`.
* This component should only accept one child.
*
* This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`
* Besides being a trigger that opens/close a dialog through context this component doesn't do much,
* making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.
*/
export declare const DialogTrigger: React_2.FC<DialogTriggerProps>;
export declare type DialogTriggerAction = 'open' | 'close';
/**
* Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog
*/
export declare type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
'aria-haspopup'?: 'dialog';
}>;
export declare type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {
/**
* Explicitly declare if the trigger is responsible for opening or
* closing a Dialog visibility state.
*
* If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default
*
* If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default
*/
action?: DialogTriggerAction;
/**
* Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.
* @default false
*/
disableButtonEnhancement?: boolean;
};
export declare type DialogTriggerState = {
children: React_2.ReactElement | null;
};
declare type InternalDialogSlots = {
surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;
};
/**
* Render the final JSX of Dialog
*/
export declare const renderDialog_unstable: (state: DialogState, contextValues: DialogContextValues) => JSXElement;
/**
* Render the final JSX of DialogActions
*/
export declare const renderDialogActions_unstable: (state: DialogActionsState) => JSXElement;
/**
* Render the final JSX of DialogBody
*/
export declare const renderDialogBody_unstable: (state: DialogBodyState) => JSXElement;
/**
* Render the final JSX of DialogContent
*/
export declare const renderDialogContent_unstable: (state: DialogContentState) => JSXElement;
/**
* Render the final JSX of DialogSurface
*/
export declare const renderDialogSurface_unstable: (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => JSXElement;
/**
* Render the final JSX of DialogTitle
*/
export declare const renderDialogTitle_unstable: (state: DialogTitleState) => JSXElement;
/**
* Render the final JSX of MenuTrigger
*
* Only renders children
*/
export declare const renderDialogTrigger_unstable: (state: DialogTriggerState) => JSXElement | null;
/**
* 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 declare const useDialog_unstable: (props: DialogProps) => DialogState;
/**
* 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 declare const useDialogActions_unstable: (props: DialogActionsProps, ref: React_2.Ref<HTMLElement>) => DialogActionsState;
/**
* Apply styling to the DialogActions slots based on the state
*/
export declare const useDialogActionsStyles_unstable: (state: DialogActionsState) => DialogActionsState;
export declare const useDialogBackdropContext_unstable: () => DialogBackdropContextValue | undefined;
/**
* 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 declare const useDialogBody_unstable: (props: DialogBodyProps, ref: React_2.Ref<HTMLElement>) => DialogBodyState;
/**
* Apply styling to the DialogBody slots based on the state
*/
export declare const useDialogBodyStyles_unstable: (state: DialogBodyState) => DialogBodyState;
/**
* 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 declare const useDialogContent_unstable: (props: DialogContentProps, ref: React_2.Ref<HTMLElement>) => DialogContentState;
/**
* Apply styling to the DialogContent slots based on the state
*/
export declare const useDialogContentStyles_unstable: (state: DialogContentState) => DialogContentState;
export declare const useDialogContext_unstable: <T>(selector: ContextSelector<DialogContextValue, T>) => T;
export declare function useDialogContextValues_unstable(state: DialogState): DialogContextValues;
/**
* 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 declare const useDialogSurface_unstable: (props: DialogSurfaceProps, ref: React_2.Ref<DialogSurfaceElement>) => DialogSurfaceState;
export declare const useDialogSurfaceContext_unstable: () => DialogSurfaceContextValue;
export declare function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues;
/**
* Apply styling to the DialogSurface slots based on the state
*/
export declare const useDialogSurfaceStyles_unstable: (state: DialogSurfaceState) => DialogSurfaceState;
/**
* 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 declare const useDialogTitle_unstable: (props: DialogTitleProps, ref: React_2.Ref<HTMLDivElement>) => DialogTitleState;
/**
* Apply styling to the DialogTitle slots based on the state
*/
export declare const useDialogTitleStyles_unstable: (state: DialogTitleState) => DialogTitleState;
/**
* Create the state required to render DialogTrigger.
* Clones the only child component and adds necessary event handling behaviours to open a popup Dialog
*
* @param props - props from this instance of DialogTrigger
*/
export declare const useDialogTrigger_unstable: (props: DialogTriggerProps) => DialogTriggerState;
export { }

View File

@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Dialog: function() {
return _index.Dialog;
},
renderDialog_unstable: function() {
return _index.renderDialog_unstable;
},
useDialogContextValues_unstable: function() {
return _index.useDialogContextValues_unstable;
},
useDialog_unstable: function() {
return _index.useDialog_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAYEA,aAAM;;;eACNC,4BAAqB;;;eACrBC,sCAA+B;;;eAC/BC,yBAAkB;;;uBACb,4BAA4B"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogActions: function() {
return _index.DialogActions;
},
dialogActionsClassNames: function() {
return _index.dialogActionsClassNames;
},
renderDialogActions_unstable: function() {
return _index.renderDialogActions_unstable;
},
useDialogActionsStyles_unstable: function() {
return _index.useDialogActionsStyles_unstable;
},
useDialogActions_unstable: function() {
return _index.useDialogActions_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAOEA,oBAAa;;;eACbC,8BAAuB;;;eACvBC,mCAA4B;;;eAC5BC,sCAA+B;;;eAC/BC,gCAAyB;;;uBACpB,mCAAmC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogBody: function() {
return _index.DialogBody;
},
dialogBodyClassNames: function() {
return _index.dialogBodyClassNames;
},
renderDialogBody_unstable: function() {
return _index.renderDialogBody_unstable;
},
useDialogBodyStyles_unstable: function() {
return _index.useDialogBodyStyles_unstable;
},
useDialogBody_unstable: function() {
return _index.useDialogBody_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAEEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eACzBC,mCAA4B;;;eAC5BC,6BAAsB;;;uBACjB,gCAAgC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogContent: function() {
return _index.DialogContent;
},
dialogContentClassNames: function() {
return _index.dialogContentClassNames;
},
renderDialogContent_unstable: function() {
return _index.renderDialogContent_unstable;
},
useDialogContentStyles_unstable: function() {
return _index.useDialogContentStyles_unstable;
},
useDialogContent_unstable: function() {
return _index.useDialogContent_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAEEA,oBAAa;;;eACbC,8BAAuB;;;eACvBC,mCAA4B;;;eAC5BC,sCAA+B;;;eAC/BC,gCAAyB;;;uBACpB,mCAAmC"}

View File

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

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogTitle: function() {
return _index.DialogTitle;
},
dialogTitleClassNames: function() {
return _index.dialogTitleClassNames;
},
renderDialogTitle_unstable: function() {
return _index.renderDialogTitle_unstable;
},
useDialogTitleInternalStyles: function() {
return _index.useDialogTitleInternalStyles;
},
useDialogTitleStyles_unstable: function() {
return _index.useDialogTitleStyles_unstable;
},
useDialogTitle_unstable: function() {
return _index.useDialogTitle_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,mCAA4B;;;eAC5BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogTrigger: function() {
return _index.DialogTrigger;
},
renderDialogTrigger_unstable: function() {
return _index.renderDialogTrigger_unstable;
},
useDialogTrigger_unstable: function() {
return _index.useDialogTrigger_unstable;
}
});
const _index = require("./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":";;;;;;;;;;;;eAOEA,oBAAa;;;eACbC,mCAA4B;;;eAC5BC,gCAAyB;;;uBACpB,mCAAmC"}

View File

@@ -0,0 +1,22 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Dialog", {
enumerable: true,
get: function() {
return Dialog;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useDialog = require("./useDialog");
const _renderDialog = require("./renderDialog");
const _useDialogContextValues = require("./useDialogContextValues");
const Dialog = /*#__PURE__*/ _react.memo((props)=>{
const state = (0, _useDialog.useDialog_unstable)(props);
const contextValues = (0, _useDialogContextValues.useDialogContextValues_unstable)(state);
return (0, _renderDialog.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;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;wCAEP,2BAA2B;AASpE,MAAMI,SAAAA,WAAAA,GAAgCJ,OAAMK,IAAI,CAACC,CAAAA;IACtD,MAAMC,YAAQN,6BAAAA,EAAmBK;IACjC,MAAME,oBAAgBL,uDAAAA,EAAgCI;IAEtD,WAAOL,mCAAAA,EAAsBK,OAAOC;AACtC,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/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":""}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Dialog: function() {
return _Dialog.Dialog;
},
renderDialog_unstable: function() {
return _renderDialog.renderDialog_unstable;
},
useDialogContextValues_unstable: function() {
return _useDialogContextValues.useDialogContextValues_unstable;
},
useDialog_unstable: function() {
return _useDialog.useDialog_unstable;
}
});
const _Dialog = require("./Dialog");
const _renderDialog = require("./renderDialog");
const _useDialog = require("./useDialog");
const _useDialogContextValues = require("./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":";;;;;;;;;;;;eAASA,cAAM;;;eAYNC,mCAAqB;;;eAErBE,uDAA+B;;;eAD/BD,6BAAkB;;;wBAbJ,WAAW;8BAYI,iBAAiB;2BACpB,cAAc;wCACD,2BAA2B"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDialog_unstable", {
enumerable: true,
get: function() {
return renderDialog_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactmotion = require("@fluentui/react-motion");
const _contexts = require("../../contexts");
const renderDialog_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_contexts.DialogProvider, {
value: contextValues.dialog,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_contexts.DialogSurfaceProvider, {
value: contextValues.dialogSurface,
children: [
state.trigger,
state.content && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.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":";;;;+BAcaK;;;;;;;4BAbb,iCAAiD;gCAErB,4BAA4B;iEAEjC,QAAQ;6BAEI,yBAAyB;0BACN,iBAAiB;AAMhE,8BAA8B,CAACC,OAAoBC;QACxDP,2BAAAA,EAAiCM;IAEjC,OAAA,WAAA,OACE,eAAA,EAACH,wBAAAA,EAAAA;QAAeK,OAAOD,cAAcE,MAAM;kBACzC,WAAA,OAAA,gBAAA,EAACL,+BAAAA,EAAAA;YAAsBI,OAAOD,cAAcG,aAAa;;gBACtDJ,MAAMK,OAAO;gBACbL,MAAMM,OAAO,IAAA,WAAA,OACZ,eAAA,EAACN,MAAMO,aAAa,EAAA;8BAClB,WAAA,OAAA,eAAA,EAACX,+BAAAA,EAAAA;kCAGEI,MAAMM,OAAO;;;;;;AAO5B,EAAE"}

View File

@@ -0,0 +1,99 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDialog_unstable", {
enumerable: true,
get: function() {
return useDialog_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactcontextselector = require("@fluentui/react-context-selector");
const _reacttabster = require("@fluentui/react-tabster");
const _reactmotion = require("@fluentui/react-motion");
const _reactutilities = require("@fluentui/react-utilities");
const _utils = require("../../utils");
const _contexts = require("../../contexts");
const _DialogSurfaceMotion = require("../DialogSurfaceMotion");
const useDialog_unstable = (props)=>{
const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false, unmountOnClose = true } = props;
const dialogTitleId = (0, _reactutilities.useId)('dialog-title-');
const [trigger, content] = childrenToTriggerAndContent(children);
const [open, setOpen] = (0, _reactutilities.useControllableState)({
state: props.open,
defaultState: props.defaultOpen,
initialState: false
});
const requestOpenChange = (0, _reactutilities.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 = (0, _utils.useFocusFirstElement)(open, modalType);
const { modalAttributes, triggerAttributes } = (0, _reacttabster.useModalAttributes)({
trapFocus: modalType !== 'non-modal',
legacyTrapFocus: !inertTrapFocus
});
const isNestedDialog = (0, _reactcontextselector.useHasParentContext)(_contexts.DialogContext);
return {
components: {
surfaceMotion: _DialogSurfaceMotion.DialogSurfaceMotion
},
inertTrapFocus,
open,
modalType,
content,
trigger,
requestOpenChange,
dialogTitleId,
isNestedDialog,
unmountOnClose,
dialogRef,
modalAttributes,
triggerAttributes,
surfaceMotion: (0, _reactmotion.presenceMotionSlot)(props.surfaceMotion, {
elementType: _DialogSurfaceMotion.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,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDialogContextValues_unstable", {
enumerable: true,
get: function() {
return useDialogContextValues_unstable;
}
});
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":";;;;+BAGgBA;;;;;;AAAT,yCAAyCC,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,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogActions", {
enumerable: true,
get: function() {
return DialogActions;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useDialogActions = require("./useDialogActions");
const _renderDialogActions = require("./renderDialogActions");
const _useDialogActionsStylesstyles = require("./useDialogActionsStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const DialogActions = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDialogActions.useDialogActions_unstable)(props, ref);
(0, _useDialogActionsStylesstyles.useDialogActionsStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDialogActionsStyles_unstable')(state);
return (0, _renderDialogActions.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;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;qCAGtC,kCAAkC;AAMvE,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQR,2CAAAA,EAA0BM,OAAOC;QAE/CL,6DAAAA,EAAgCM;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOP,iDAAAA,EAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering DialogActions
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogActions: function() {
return _DialogActions.DialogActions;
},
dialogActionsClassNames: function() {
return _useDialogActionsStylesstyles.dialogActionsClassNames;
},
renderDialogActions_unstable: function() {
return _renderDialogActions.renderDialogActions_unstable;
},
useDialogActionsStyles_unstable: function() {
return _useDialogActionsStylesstyles.useDialogActionsStyles_unstable;
},
useDialogActions_unstable: function() {
return _useDialogActions.useDialogActions_unstable;
}
});
const _DialogActions = require("./DialogActions");
const _renderDialogActions = require("./renderDialogActions");
const _useDialogActions = require("./useDialogActions");
const _useDialogActionsStylesstyles = require("./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":";;;;;;;;;;;;eAASA,4BAAa;;;eASbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAEHG,6DAA+B;;;eADxDF,2CAAyB;;;+BARJ,kBAAkB;qCAOH,wBAAwB;kCAC3B,qBAAqB;8CACU,kCAAkC"}

View File

@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDialogActions_unstable", {
enumerable: true,
get: function() {
return renderDialogActions_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDialogActions_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
// TODO Add additional slots in the appropriate place
return /*#__PURE__*/ (0, _jsxruntime.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":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,+BAA+B,CAACC;QAC3CF,2BAAAA,EAAgCE;IAEhC,qDAAqD;IACrD,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDialogActions_unstable", {
enumerable: true,
get: function() {
return useDialogActions_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useDialogActions_unstable = (props, ref)=>{
const { position = 'end', fluid = false } = props;
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: 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":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,kCAAkC,CACvCC,OACAC;IAEA,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAE,GAAGH;IAC5C,OAAO;QACLI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,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,105 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dialogActionsClassNames: function() {
return dialogActionsClassNames;
},
useDialogActionsStyles_unstable: function() {
return useDialogActionsStyles_unstable;
}
});
const _react = require("@griffel/react");
const dialogActionsClassNames = {
root: 'fui-DialogActions'
};
/**
* Styles for the root slot
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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)"
}
]
]
});
const useDialogActionsStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
const styles = useStyles();
state.root.className = (0, _react.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":["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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,uBAAuB;;;IA+CnBmB,+BAA+B;;;;uBAjDU,gBAAgB;AAEnE,gCAAgC;IACnClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,eAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAK,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,UAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAR,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAS,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA2BjB,CAAC;AAGS,wCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1Be,KAAK,CAACnB,IAAI,CAACsB,SAAS,OAAG1B,mBAAY,EAACG,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;IAC5U,OAAOH,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,73 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dialogActionsClassNames: function() {
return dialogActionsClassNames;
},
useDialogActionsStyles_unstable: function() {
return useDialogActionsStyles_unstable;
}
});
const _react = require("@griffel/react");
const _constants = require("../../contexts/constants");
const dialogActionsClassNames = {
root: 'fui-DialogActions'
};
/**
* Styles for the root slot
*/ const useResetStyles = (0, _react.makeResetStyles)({
gap: _constants.DIALOG_GAP,
height: 'fit-content',
boxSizing: 'border-box',
display: 'flex',
gridRowStart: 3,
gridRowEnd: 3,
[_constants.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
flexDirection: 'column',
justifySelf: 'stretch'
}
});
const useStyles = (0, _react.makeStyles)({
gridPositionEnd: {
justifySelf: 'end',
gridColumnStart: 2,
gridColumnEnd: 4,
[_constants.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
gridColumnStart: 1,
gridRowStart: 4,
gridRowEnd: 'auto'
}
},
gridPositionStart: {
justifySelf: 'start',
gridColumnStart: 1,
gridColumnEnd: 2,
[_constants.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
gridColumnEnd: 4,
gridRowStart: 3,
gridRowEnd: 'auto'
}
},
fluidStart: {
gridColumnEnd: 4
},
fluidEnd: {
gridColumnStart: 1
}
});
const useDialogActionsStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
const styles = useStyles();
state.root.className = (0, _react.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;;;;;;;;;;;;IAOaK,uBAAAA;;;mCAoDAkB;eAAAA;;;uBAzD6C,iBAAiB;2BAGR,2BAA2B;AAEvF,gCAAoE;IACzEjB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBP,sBAAAA,EAAgB;IACrCQ,KAAKL,qBAAAA;IACLM,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,YAAY;IACZ,CAACT,iDAAAA,CAAuC,EAAE;QACxCU,eAAe;QACfC,aAAa;IACf;AACF;AAEA,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BgB,iBAAiB;QACfF,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,iDAAAA,CAAuC,EAAE;YACxCc,iBAAiB;YACjBN,cAAc;YACdC,YAAY;QACd;IACF;IACAO,mBAAmB;QACjBL,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,iDAAAA,CAAuC,EAAE;YACxCe,eAAe;YACfP,cAAc;YACdC,YAAY;QACd;IACF;IACAQ,YAAY;QACVF,eAAe;IACjB;IACAG,UAAU;QACRJ,iBAAiB;IACnB;AACF;AAKO,wCAAwC,CAACM;IAC9C;IAEA,MAAMC,cAAclB;IACpB,MAAMmB,SAASV;IACfQ,MAAMlB,IAAI,CAACqB,SAAS,OAAGzB,mBAAAA,EACrBG,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,12 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogBackdropMotion", {
enumerable: true,
get: function() {
return DialogBackdropMotion;
}
});
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
const DialogBackdropMotion = _reactmotioncomponentspreview.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":";;;;;;;;;;8CAA4B,4CAA4C;AAEjE,MAAMC,uBAAuBD,yCAAAA,CAAY"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogBody", {
enumerable: true,
get: function() {
return DialogBody;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useDialogBody = require("./useDialogBody");
const _renderDialogBody = require("./renderDialogBody");
const _useDialogBodyStylesstyles = require("./useDialogBodyStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const DialogBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDialogBody.useDialogBody_unstable)(props, ref);
(0, _useDialogBodyStylesstyles.useDialogBodyStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDialogBodyStyles_unstable')(state);
return (0, _renderDialogBody.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;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAMvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering DialogBody
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogBody: function() {
return _DialogBody.DialogBody;
},
dialogBodyClassNames: function() {
return _useDialogBodyStylesstyles.dialogBodyClassNames;
},
renderDialogBody_unstable: function() {
return _renderDialogBody.renderDialogBody_unstable;
},
useDialogBodyStyles_unstable: function() {
return _useDialogBodyStylesstyles.useDialogBodyStyles_unstable;
},
useDialogBody_unstable: function() {
return _useDialogBody.useDialogBody_unstable;
}
});
const _DialogBody = require("./DialogBody");
const _renderDialogBody = require("./renderDialogBody");
const _useDialogBody = require("./useDialogBody");
const _useDialogBodyStylesstyles = require("./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":";;;;;;;;;;;;eAASA,sBAAU;;;eAIVG,+CAAoB;;;eAFpBF,2CAAyB;;;eAEHG,uDAA4B;;;eADlDF,qCAAsB;;;4BAHJ,eAAe;kCAEA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B"}

View File

@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDialogBody_unstable", {
enumerable: true,
get: function() {
return renderDialogBody_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDialogBody_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
// TODO Add additional slots in the appropriate place
return /*#__PURE__*/ (0, _jsxruntime.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":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,4BAA4B,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,qDAAqD;IACrD,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDialogBody_unstable", {
enumerable: true,
get: function() {
return useDialogBody_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useDialogBody_unstable = (props, ref)=>{
var _props_as;
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.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":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,+BAA+B,CAACC,OAAwBC;QAMhCD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,oBAAAA,CAAKM,MAAM,KACfP,wCAAAA,EAAyBG,aAAAA,MAAMK,EAAAA,AAAE,MAAA,QAARL,cAAAA,KAAAA,IAAAA,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,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dialogBodyClassNames: function() {
return dialogBodyClassNames;
},
useDialogBodyStyles_unstable: function() {
return useDialogBodyStyles_unstable;
}
});
const _react = require("@griffel/react");
const dialogBodyClassNames = {
root: 'fui-DialogBody'
};
/**
* Styles for the root slot
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__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;}}"
]
});
const useDialogBodyStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, resetStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCM,oBAAoB;;;gCA0BY;;;;uBA5BC,gBAAgB;AAEvD,6BAA6B;IAChCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAAS,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAkB1B,CAAC;AAGS,MAAMC,gCAAgCC,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;IACpCI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGb,mBAAY,EAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IACjG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,51 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dialogBodyClassNames: function() {
return dialogBodyClassNames;
},
useDialogBodyStyles_unstable: function() {
return useDialogBodyStyles_unstable;
}
});
const _react = require("@griffel/react");
const _contexts = require("../../contexts");
const dialogBodyClassNames = {
root: 'fui-DialogBody'
};
/**
* Styles for the root slot
*/ const useResetStyles = (0, _react.makeResetStyles)({
overflow: 'unset',
gap: _contexts.DIALOG_GAP,
display: 'grid',
maxHeight: [
`calc(100vh - 2 * ${_contexts.SURFACE_PADDING})`,
`calc(100dvh - 2 * ${_contexts.SURFACE_PADDING})`
],
boxSizing: 'border-box',
gridTemplateRows: 'auto 1fr',
gridTemplateColumns: '1fr 1fr auto',
[_contexts.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
maxWidth: '100vw',
gridTemplateRows: 'auto 1fr auto'
},
[_contexts.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
maxHeight: 'unset'
}
});
const useDialogBodyStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
state.root.className = (0, _react.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;;;;;;;;;;;;IAYaM,oBAAAA;;;gCA6BAW;;;;uBAvCiC,iBAAiB;0BAQxD,iBAAiB;AAEjB,6BAA8D;IACnEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBR,sBAAAA,EAAgB;IACrCS,UAAU;IACVC,KAAKR,oBAAAA;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,yBAAAA,CAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,yBAAAA,CAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,gDAAAA,CAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMK,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,cAAcX;IAEpBU,MAAMX,IAAI,CAACa,SAAS,OAAGnB,mBAAAA,EAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogContent", {
enumerable: true,
get: function() {
return DialogContent;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useDialogContent = require("./useDialogContent");
const _renderDialogContent = require("./renderDialogContent");
const _useDialogContentStylesstyles = require("./useDialogContentStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const DialogContent = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDialogContent.useDialogContent_unstable)(props, ref);
(0, _useDialogContentStylesstyles.useDialogContentStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDialogContentStyles_unstable')(state);
return (0, _renderDialogContent.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;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;qCAGtC,kCAAkC;AAMvE,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQR,2CAAAA,EAA0BM,OAAOC;QAE/CL,6DAAAA,EAAgCM;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOP,iDAAAA,EAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering DialogContent
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogContent: function() {
return _DialogContent.DialogContent;
},
dialogContentClassNames: function() {
return _useDialogContentStylesstyles.dialogContentClassNames;
},
renderDialogContent_unstable: function() {
return _renderDialogContent.renderDialogContent_unstable;
},
useDialogContentStyles_unstable: function() {
return _useDialogContentStylesstyles.useDialogContentStyles_unstable;
},
useDialogContent_unstable: function() {
return _useDialogContent.useDialogContent_unstable;
}
});
const _DialogContent = require("./DialogContent");
const _renderDialogContent = require("./renderDialogContent");
const _useDialogContent = require("./useDialogContent");
const _useDialogContentStylesstyles = require("./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":";;;;;;;;;;;;eAASA,4BAAa;;;eAIbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAEHG,6DAA+B;;;eADxDF,2CAAyB;;;+BAHJ,kBAAkB;qCAEH,wBAAwB;kCAC3B,qBAAqB;8CACU,kCAAkC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDialogContent_unstable", {
enumerable: true,
get: function() {
return renderDialogContent_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDialogContent_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.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":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,+BAA+B,CAACC;QAC3CF,2BAAAA,EAAgCE;IAEhC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDialogContent_unstable", {
enumerable: true,
get: function() {
return useDialogContent_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useDialogContent_unstable = (props, ref)=>{
var _props_as;
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.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":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,kCAAkC,CACvCC,OACAC;QAO6BD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,oBAAAA,CAAKM,MAAM,KACfP,wCAAAA,EAAyBG,aAAAA,MAAMK,EAAAA,AAAE,MAAA,QAARL,cAAAA,KAAAA,IAAAA,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,39 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dialogContentClassNames: function() {
return dialogContentClassNames;
},
useDialogContentStyles_unstable: function() {
return useDialogContentStyles_unstable;
}
});
const _react = require("@griffel/react");
const dialogContentClassNames = {
root: 'fui-DialogContent'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__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;}}"
]
});
const useDialogContentStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"names":["__resetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;2BAIwB;;;mCAsBY;;;;uBAzBF,gBAAgB;AAGvD,MAAMK,0BAA0B;IACnCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAcrB,CAAC;AAGS,MAAMC,mCAAmCC,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;IAC1BI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGZ,mBAAY,EAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,48 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dialogContentClassNames: function() {
return dialogContentClassNames;
},
useDialogContentStyles_unstable: function() {
return useDialogContentStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _contexts = require("../../contexts");
const dialogContentClassNames = {
root: 'fui-DialogContent'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeResetStyles)({
padding: _reacttheme.tokens.strokeWidthThick,
margin: `calc(${_reacttheme.tokens.strokeWidthThick} * -1)`,
..._reacttheme.typographyStyles.body1,
overflowY: 'auto',
minHeight: '32px',
boxSizing: 'border-box',
gridRowStart: 2,
gridRowEnd: 2,
gridColumnStart: 1,
gridColumnEnd: 4,
[_contexts.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
overflowY: 'unset'
}
});
const useDialogContentStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.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;;;;;;;;;;;;IAQaK,uBAAAA;;;mCA2BAc;;;;uBAjCiC,iBAAiB;4BAGtB,wBAAwB;0BACjB,iBAAiB;AAE1D,gCAAoE;IACzEb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,SAASN,kBAAAA,CAAOO,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAER,kBAAAA,CAAOO,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGN,4BAAAA,CAAiBQ,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACd,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMO,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EAAaI,wBAAwBC,IAAI,EAAEe,QAAQD,MAAMd,IAAI,CAACgB,SAAS;IAC9F,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogSurface", {
enumerable: true,
get: function() {
return DialogSurface;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useDialogSurface = require("./useDialogSurface");
const _renderDialogSurface = require("./renderDialogSurface");
const _useDialogSurfaceStylesstyles = require("./useDialogSurfaceStyles.styles");
const _useDialogSurfaceContextValues = require("./useDialogSurfaceContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const DialogSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDialogSurface.useDialogSurface_unstable)(props, ref);
const contextValues = (0, _useDialogSurfaceContextValues.useDialogSurfaceContextValues_unstable)(state);
(0, _useDialogSurfaceStylesstyles.useDialogSurfaceStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDialogSurfaceStyles_unstable')(state);
return (0, _renderDialogSurface.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;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;+CAG3B,kCAAkC;qCAC7C,kCAAkC;AAMvE,MAAMM,gBAAAA,WAAAA,GAAyDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQT,2CAAAA,EAA0BO,OAAOC;IAC/C,MAAME,oBAAgBP,qEAAAA,EAAuCM;QAE7DP,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,iDAAAA,EAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering DialogSurface
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogSurface: function() {
return _DialogSurface.DialogSurface;
},
dialogSurfaceClassNames: function() {
return _useDialogSurfaceStylesstyles.dialogSurfaceClassNames;
},
renderDialogSurface_unstable: function() {
return _renderDialogSurface.renderDialogSurface_unstable;
},
useDialogSurfaceContextValues_unstable: function() {
return _useDialogSurfaceContextValues.useDialogSurfaceContextValues_unstable;
},
useDialogSurfaceStyles_unstable: function() {
return _useDialogSurfaceStylesstyles.useDialogSurfaceStyles_unstable;
},
useDialogSurface_unstable: function() {
return _useDialogSurface.useDialogSurface_unstable;
}
});
const _DialogSurface = require("./DialogSurface");
const _renderDialogSurface = require("./renderDialogSurface");
const _useDialogSurface = require("./useDialogSurface");
const _useDialogSurfaceStylesstyles = require("./useDialogSurfaceStyles.styles");
const _useDialogSurfaceContextValues = require("./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":";;;;;;;;;;;;eAASA,4BAAa;;;eAWbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAG5BI,qEAAsC;;;eADbD,6DAA+B;;;eADxDF,2CAAyB;;;+BAVJ,kBAAkB;qCASH,wBAAwB;kCAC3B,qBAAqB;8CACU,kCAAkC;+CACpD,kCAAkC"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDialogSurface_unstable", {
enumerable: true,
get: function() {
return renderDialogSurface_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactmotion = require("@fluentui/react-motion");
const _reactportal = require("@fluentui/react-portal");
const _reactutilities = require("@fluentui/react-utilities");
const _contexts = require("../../contexts");
const renderDialogSurface_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactportal.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__*/ (0, _jsxruntime.jsx)(state.backdropMotion, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.backdrop, {})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarderReset, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_contexts.DialogSurfaceProvider, {
value: contextValues.dialogSurface,
children: /*#__PURE__*/ (0, _jsxruntime.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":";;;;+BAcaI;;;;;;4BAbb,iCAAiD;6BAET,yBAAyB;6BAC1C,yBAAyB;gCACpB,4BAA4B;0BAGlB,iBAAiB;AAMhD,qCAAqC,CAC1CC,OACAC;QAEAJ,2BAAAA,EAAgCG;IAEhC,OAAA,WAAA,OACE,gBAAA,EAACJ,mBAAAA,EAAAA;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,IAAA,WAAA,OAClB,eAAA,EAACJ,MAAMI,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACJ,MAAMG,QAAQ,EAAA,CAAA;;8BAGrB,eAAA,EAACR,oCAAAA,EAAAA;0BACC,WAAA,OAAA,eAAA,EAACG,+BAAAA,EAAAA;oBAAsBO,OAAOJ,cAAcK,aAAa;8BACvD,WAAA,OAAA,eAAA,EAACN,MAAMO,IAAI,EAAA,CAAA;;;;;AAKrB,EAAE"}

View File

@@ -0,0 +1,129 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDialogSurface_unstable", {
enumerable: true,
get: function() {
return useDialogSurface_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _reactmotion = require("@fluentui/react-motion");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _contexts = require("../../contexts");
const _useDisableBodyScroll = require("../../utils/useDisableBodyScroll");
const _DialogBackdropMotion = require("../DialogBackdropMotion");
const useDialogSurface_unstable = (props, ref)=>{
const contextRef = (0, _reactmotion.useMotionForwardedRef)();
const modalType = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalType);
const isNestedDialog = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
const backdropOverride = (0, _contexts.useDialogBackdropContext_unstable)();
const treatBackdropAsNested = backdropOverride !== null && backdropOverride !== void 0 ? backdropOverride : isNestedDialog;
const modalAttributes = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalAttributes);
const dialogRef = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogRef);
const requestOpenChange = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
const dialogTitleID = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
const open = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.open);
const unmountOnClose = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.unmountOnClose);
const handledBackdropClick = (0, _reactutilities.useEventCallback)((event)=>{
if ((0, _reactutilities.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 = (0, _reactutilities.useEventCallback)((event)=>{
var _props_onKeyDown;
(_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
if (event.key === _keyboardkeys.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 = _reactutilities.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 } = (0, _useDisableBodyScroll.useDisableBodyScroll)();
(0, _reactutilities.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.DialogBackdropMotion
},
open,
backdrop,
isNestedDialog,
treatBackdropAsNested,
backdropAppearance,
unmountOnClose,
mountNode: props.mountNode,
root: _reactutilities.slot.always((0, _reactutilities.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: (0, _reactutilities.useMergedRefs)(ref, contextRef, dialogRef)
}), {
elementType: 'div'
}),
backdropMotion: (0, _reactmotion.presenceMotionSlot)(props.backdropMotion, {
elementType: _DialogBackdropMotion.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,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDialogSurfaceContextValues_unstable", {
enumerable: true,
get: function() {
return useDialogSurfaceContextValues_unstable;
}
});
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":";;;;;;;;;;AAGO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAMC,gBAA2C;IAEjD,OAAO;QAAEA;IAAc;AACzB"}

View File

@@ -0,0 +1,78 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dialogSurfaceClassNames: function() {
return dialogSurfaceClassNames;
},
useDialogSurfaceStyles_unstable: function() {
return useDialogSurfaceStyles_unstable;
}
});
const _react = require("@griffel/react");
const dialogSurfaceClassNames = {
root: 'fui-DialogSurface',
backdrop: 'fui-DialogSurface__backdrop'
};
/**
* Styles for the root slot
*/ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__resetStyles)("r1e18s3l", null, [
".r1e18s3l{inset:0px;background-color:var(--colorBackgroundOverlay);position:fixed;}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
nestedDialogBackdrop: {
De3pzq: "f1c21dwh"
},
dialogHidden: {
Bkecrkj: "f1aehjj5"
}
}, {
d: [
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
".f1aehjj5{pointer-events:none;}"
]
});
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 = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
if (backdrop) {
backdrop.className = (0, _react.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,94 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dialogSurfaceClassNames: function() {
return dialogSurfaceClassNames;
},
useDialogSurfaceStyles_unstable: function() {
return useDialogSurfaceStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const _contexts = require("../../contexts");
const dialogSurfaceClassNames = {
root: 'fui-DialogSurface',
backdrop: 'fui-DialogSurface__backdrop'
};
/**
* Styles for the root slot
*/ const useRootBaseStyle = (0, _react.makeResetStyles)({
...(0, _reacttabster.createFocusOutlineStyle)(),
inset: 0,
padding: _contexts.SURFACE_PADDING,
margin: 'auto',
borderStyle: 'none',
overflow: 'unset',
border: `${_contexts.SURFACE_BORDER_WIDTH} solid ${_reacttheme.tokens.colorTransparentStroke}`,
borderRadius: _reacttheme.tokens.borderRadiusXLarge,
display: 'block',
userSelect: 'unset',
visibility: 'unset',
position: 'fixed',
height: 'fit-content',
maxWidth: '600px',
maxHeight: [
'100vh',
'100dvh'
],
boxSizing: 'border-box',
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
color: _reacttheme.tokens.colorNeutralForeground1,
// Same styles as DialogSurfaceMotion last keyframe,
// to ensure dialog will be properly styled when surfaceMotion is opted-out
boxShadow: _reacttheme.tokens.shadow64,
[_contexts.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
maxWidth: '100vw'
},
[_contexts.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(${_contexts.SURFACE_PADDING} - ${_contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
borderRightWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
borderTopWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
borderBottomWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET
}
});
const useBackdropBaseStyle = (0, _react.makeResetStyles)({
inset: '0px',
backgroundColor: _reacttheme.tokens.colorBackgroundOverlay,
position: 'fixed'
});
const useStyles = (0, _react.makeStyles)({
nestedDialogBackdrop: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground
},
dialogHidden: {
pointerEvents: 'none'
}
});
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 = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
if (backdrop) {
backdrop.className = (0, _react.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,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogSurfaceMotion", {
enumerable: true,
get: function() {
return DialogSurfaceMotion;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
const DialogSurfaceMotion = (0, _reactmotion.createPresenceComponentVariant)(_reactmotioncomponentspreview.Scale, {
outScale: 0.85,
easing: _reactmotion.motionTokens.curveDecelerateMid,
duration: _reactmotion.motionTokens.durationGentle,
exitEasing: _reactmotion.motionTokens.curveAccelerateMin,
exitDuration: _reactmotion.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":";;;;+BAGaG;;;;;;6BAHgD,yBAAyB;8CAChE,4CAA4C;AAE3D,gCAA4BH,2CAAAA,EAA+BE,mCAAAA,EAAO;IACvEE,UAAU;IACVC,QAAQJ,yBAAAA,CAAaK,kBAAkB;IACvCC,UAAUN,yBAAAA,CAAaO,cAAc;IACrCC,YAAYR,yBAAAA,CAAaS,kBAAkB;IAC3CC,cAAcV,yBAAAA,CAAaO,cAAc;AAC3C,GAAG"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogTitle", {
enumerable: true,
get: function() {
return DialogTitle;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useDialogTitle = require("./useDialogTitle");
const _renderDialogTitle = require("./renderDialogTitle");
const _useDialogTitleStylesstyles = require("./useDialogTitleStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const DialogTitle = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDialogTitle.useDialogTitle_unstable)(props, ref);
(0, _useDialogTitleStylesstyles.useDialogTitleStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDialogTitleStyles_unstable')(state);
return (0, _renderDialogTitle.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;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAMvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering DialogTitle
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DialogTitle: function() {
return _DialogTitle.DialogTitle;
},
dialogTitleClassNames: function() {
return _useDialogTitleStylesstyles.dialogTitleClassNames;
},
renderDialogTitle_unstable: function() {
return _renderDialogTitle.renderDialogTitle_unstable;
},
useDialogTitleInternalStyles: function() {
return _useDialogTitleStylesstyles.useDialogTitleInternalStyles;
},
useDialogTitleStyles_unstable: function() {
return _useDialogTitleStylesstyles.useDialogTitleStyles_unstable;
},
useDialogTitle_unstable: function() {
return _useDialogTitle.useDialogTitle_unstable;
}
});
const _DialogTitle = require("./DialogTitle");
const _renderDialogTitle = require("./renderDialogTitle");
const _useDialogTitle = require("./useDialogTitle");
const _useDialogTitleStylesstyles = require("./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":";;;;;;;;;;;;eAASA,wBAAW;;;eAKlBG,iDAAqB;;;eAHdF,6CAA0B;;;eAIjCG,wDAA4B;;;eAC5BC,yDAA6B;;;eAJtBH,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CAKpD,gCAAgC"}

View File

@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDialogTitle_unstable", {
enumerable: true,
get: function() {
return renderDialogTitle_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderDialogTitle_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: state.root.children
}),
state.action && /*#__PURE__*/ (0, _jsxruntime.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":";;;;+BAUaC;;;;;;4BATb,UAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;8BACE,eAAA,EAACA,MAAMC,IAAI,EAAA;0BAAED,MAAMC,IAAI,CAACC,QAAQ;;YAC/BF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}

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