Initial commit

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/DialogSurface.js

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

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/DialogSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQT,0BAA0BO,OAAOC;IAC/C,MAAME,gBAAgBP,uCAAuCM;IAE7DP,gCAAgCO;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/DialogSurface.types.js

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

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/DialogSurface.types.js.map

@@ -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 } from '@fluentui/react-utilities';\n\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\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   */\n  backdrop?: Slot<'div'>;\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\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  };\n"],"names":[],"rangeMappings":";;","mappings":"AAqCA;;CAEC,GACD,WAaI"}

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/index.js

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

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\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"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAQhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,sCAAsC,QAAQ,kCAAkC"}

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/renderDialogSurface.js

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

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/renderDialogSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } 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 = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\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      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        <state.root />\n      </DialogSurfaceProvider>\n    </Portal>\n  );\n};\n"],"names":["Portal","assertSlots","DialogSurfaceProvider","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","backdropMotion","value","dialogSurface","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,iBAAiB;AAGvD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,qBACE,MAACJ;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,kBAClB,KAACJ,MAAMI,cAAc;0BACnB,cAAA,KAACJ,MAAMG,QAAQ;;0BAGrB,KAACL;gBAAsBO,OAAOJ,cAAcK,aAAa;0BACvD,cAAA,KAACN,MAAMO,IAAI;;;;AAInB,EAAE"}

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/useDialogSurface.js

@@ -0,0 +1,117 @@
+import { Escape } from '@fluentui/keyboard-keys';
+import { presenceMotionSlot } from '@fluentui/react-motion';
+import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useDialogContext_unstable } from '../../contexts';
+import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
+import { DialogBackdropMotion } from '../DialogBackdropMotion';
+import { useMotionForwardedRef } from '../MotionRefForwarder';
+/**
+ * Create the state required to render DialogSurface.
+ *
+ * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,
+ * before being passed to renderDialogSurface_unstable.
+ *
+ * @param props - props from this instance of DialogSurface
+ * @param ref - reference to root HTMLElement of DialogSurface
+ */ export const useDialogSurface_unstable = (props, ref)=>{
+    const contextRef = useMotionForwardedRef();
+    const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);
+    const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);
+    const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);
+    const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);
+    const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
+    const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
+    const open = useDialogContext_unstable((ctx)=>ctx.open);
+    const handledBackdropClick = useEventCallback((event)=>{
+        if (isResolvedShorthand(props.backdrop)) {
+            var _props_backdrop_onClick, _props_backdrop;
+            (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);
+        }
+        if (modalType === 'modal' && !event.isDefaultPrevented()) {
+            requestOpenChange({
+                event,
+                open: false,
+                type: 'backdropClick'
+            });
+        }
+    });
+    const handleKeyDown = useEventCallback((event)=>{
+        var _props_onKeyDown;
+        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+        if (event.key === Escape && !event.isDefaultPrevented()) {
+            requestOpenChange({
+                event,
+                open: false,
+                type: 'escapeKeyDown'
+            });
+            // stop propagation to avoid conflicting with other elements that listen for `Escape`
+            // e,g: nested Dialog, Popover, Menu and Tooltip
+            event.preventDefault();
+        }
+    });
+    const backdrop = slot.optional(props.backdrop, {
+        renderByDefault: modalType !== 'non-modal',
+        defaultProps: {
+            'aria-hidden': 'true'
+        },
+        elementType: 'div'
+    });
+    if (backdrop) {
+        backdrop.onClick = handledBackdropClick;
+    }
+    const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
+    useIsomorphicLayoutEffect(()=>{
+        if (isNestedDialog || modalType === 'non-modal') {
+            return;
+        }
+        disableBodyScroll();
+        return ()=>{
+            enableBodyScroll();
+        };
+    }, [
+        enableBodyScroll,
+        isNestedDialog,
+        disableBodyScroll,
+        modalType
+    ]);
+    return {
+        components: {
+            backdrop: 'div',
+            root: 'div',
+            // TODO: remove once React v18 slot API is modified
+            // This is a problem at the moment due to UnknownSlotProps assumption
+            // that `children` property is `ReactNode`, which in this case is not valid
+            // as PresenceComponentProps['children'] is `ReactElement`
+            backdropMotion: DialogBackdropMotion
+        },
+        open,
+        backdrop,
+        isNestedDialog,
+        mountNode: props.mountNode,
+        root: slot.always(getIntrinsicElementProps('div', {
+            tabIndex: -1,
+            'aria-modal': modalType !== 'non-modal',
+            role: modalType === 'alert' ? 'alertdialog' : 'dialog',
+            'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
+            ...props,
+            ...modalAttributes,
+            onKeyDown: handleKeyDown,
+            // FIXME:
+            // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: useMergedRefs(ref, contextRef, dialogRef)
+        }), {
+            elementType: 'div'
+        }),
+        backdropMotion: presenceMotionSlot(props.backdropMotion, {
+            elementType: DialogBackdropMotion,
+            defaultProps: {
+                appear: true,
+                visible: open
+            }
+        }),
+        // Deprecated properties
+        transitionStatus: undefined
+    };
+};

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/useDialogSurfaceContextValues.js

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

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/useDialogSurfaceContextValues.js.map

@@ -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"],"rangeMappings":";;;;;","mappings":"AAGA,OAAO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAMC,gBAA2C;IAEjD,OAAO;QAAEA;IAAc;AACzB"}

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js

@@ -0,0 +1,43 @@
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
+export const dialogSurfaceClassNames = {
+  root: 'fui-DialogSurface',
+  backdrop: 'fui-DialogSurface__backdrop'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootBaseStyle = /*#__PURE__*/__resetStyles("rsmdyd3", "rup8wml", {
+  r: [".rsmdyd3{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;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow64);}", ".rsmdyd3:focus{outline-style:none;}", ".rsmdyd3:focus-visible{outline-style:none;}", ".rsmdyd3[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rsmdyd3[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);}", ".rup8wml{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;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow64);}", ".rup8wml:focus{outline-style:none;}", ".rup8wml:focus-visible{outline-style:none;}", ".rup8wml[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rup8wml[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){.rsmdyd3[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){.rsmdyd3{max-width:100vw;}}", "@media screen and (max-height: 359px){.rsmdyd3{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.rup8wml[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){.rup8wml{max-width:100vw;}}", "@media screen and (max-height: 359px){.rup8wml{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"]
+});
+const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("rsptlh5", null, [".rsptlh5{inset:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}"]);
+const useBackdropStyles = /*#__PURE__*/__styles({
+  nestedDialogBackdrop: {
+    De3pzq: "f1c21dwh"
+  }
+}, {
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}"]
+});
+/**
+ * Apply styling to the DialogSurface slots based on the state
+ */
+export const useDialogSurfaceStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    isNestedDialog,
+    root,
+    backdrop
+  } = state;
+  const rootBaseStyle = useRootBaseStyle();
+  const backdropBaseStyle = useBackdropBaseStyle();
+  const backdropStyles = useBackdropStyles();
+  root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);
+  if (backdrop) {
+    backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdrop.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-dialog/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","d","useDialogSurfaceStyles_unstable","state","isNestedDialog","rootBaseStyle","backdropBaseStyle","backdropStyles","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n    root: 'fui-DialogSurface',\n    backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    inset: 0,\n    padding: SURFACE_PADDING,\n    margin: 'auto',\n    borderStyle: 'none',\n    overflow: 'unset',\n    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    // Same styles as DialogSurfaceMotion last keyframe,\n    // to ensure dialog will be properly styled when surfaceMotion is opted-out\n    boxShadow: tokens.shadow64,\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    },\n    [MEDIA_QUERY_SHORT_SCREEN]: {\n        overflowY: 'auto',\n        // We need to offset the scrollbar by adding transparent borders otherwise\n        // it conflicts with the border radius.\n        paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n        borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n    }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n    inset: '0px',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    position: 'fixed'\n});\nconst useBackdropStyles = makeStyles({\n    nestedDialogBackdrop: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const { isNestedDialog, root, backdrop } = state;\n    const rootBaseStyle = useRootBaseStyle();\n    const backdropBaseStyle = useBackdropBaseStyle();\n    const backdropStyles = useBackdropStyles();\n    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kCAAkC,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACrK,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAkC5B,CAAC;AACF,MAAMC,oBAAoB,gBAAGhB,aAAA,6FAI5B,CAAC;AACF,MAAMiB,iBAAiB,gBAAGhB,QAAA;EAAAiB,oBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAM;IAAEC,cAAc;IAAEZ,IAAI;IAAEC;EAAS,CAAC,GAAGU,KAAK;EAChD,MAAME,aAAa,GAAGX,gBAAgB,CAAC,CAAC;EACxC,MAAMY,iBAAiB,GAAGT,oBAAoB,CAAC,CAAC;EAChD,MAAMU,cAAc,GAAGT,iBAAiB,CAAC,CAAC;EAC1CN,IAAI,CAACgB,SAAS,GAAGzB,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEa,aAAa,EAAEb,IAAI,CAACgB,SAAS,CAAC;EAC1F,IAAIf,QAAQ,EAAE;IACVA,QAAQ,CAACe,SAAS,GAAGzB,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEa,iBAAiB,EAAEF,cAAc,IAAIG,cAAc,CAACR,oBAAoB,EAAEN,QAAQ,CAACe,SAAS,CAAC;EACrK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}