first commit

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.base.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { IPanel, IPanelProps } from './Panel.types';
+import type { JSXElement } from '@fluentui/utilities';
+declare enum PanelVisibilityState {
+    closed = 0,
+    animatingOpen = 1,
+    open = 2,
+    animatingClosed = 3
+}
+interface IPanelState {
+    isFooterSticky?: boolean;
+    id?: string;
+    visibility: PanelVisibilityState;
+}
+export declare class PanelBase extends React.Component<IPanelProps, IPanelState> implements IPanel {
+    static defaultProps: IPanelProps;
+    static contextType: React.Context<import("@fluentui/react-window-provider").WindowProviderProps>;
+    context: any;
+    private _async;
+    private _events;
+    private _panel;
+    private _classNames;
+    private _scrollableContent;
+    private _animationCallback;
+    private _hasCustomNavigation;
+    private _headerTextId;
+    private _allowTouchBodyScroll;
+    private _resizeObserver;
+    static getDerivedStateFromProps(nextProps: Readonly<IPanelProps>, prevState: Readonly<IPanelState>): Partial<IPanelState> | null;
+    constructor(props: IPanelProps);
+    componentDidMount(): void;
+    componentDidUpdate(previousProps: IPanelProps, previousState: IPanelState): void;
+    componentWillUnmount(): void;
+    render(): JSXElement | null;
+    open(): void;
+    close(): void;
+    dismiss: (ev?: React.SyntheticEvent<HTMLElement> | KeyboardEvent) => void;
+    /** isActive is true when panel is open or opening. */
+    get isActive(): boolean;
+    private _createResizeObserver;
+    private _allowScrollOnPanel;
+    private _shouldListenForOuterClick;
+    private _onRenderNavigation;
+    private _onRenderNavigationContent;
+    private _onRenderHeader;
+    private _onRenderBody;
+    private _onRenderFooter;
+    private _updateFooterPosition;
+    private _dismissOnOuterClick;
+    private _animateTo;
+    private _clearExistingAnimationTimer;
+    private _onPanelClick;
+    private _onTransitionComplete;
+}
+export {};

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.base.js

@@ -0,0 +1,308 @@
+define(["require", "exports", "tslib", "react", "../../Button", "../../Layer", "../../Overlay", "../../Popup", "../../Utilities", "../FocusTrapZone/index", "./Panel.types", "@fluentui/react-window-provider", "../../utilities/dom"], function (require, exports, tslib_1, React, Button_1, Layer_1, Overlay_1, Popup_1, Utilities_1, index_1, Panel_types_1, react_window_provider_1, dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PanelBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var COMPONENT_NAME = 'Panel';
+    var PanelVisibilityState;
+    (function (PanelVisibilityState) {
+        PanelVisibilityState[PanelVisibilityState["closed"] = 0] = "closed";
+        PanelVisibilityState[PanelVisibilityState["animatingOpen"] = 1] = "animatingOpen";
+        PanelVisibilityState[PanelVisibilityState["open"] = 2] = "open";
+        PanelVisibilityState[PanelVisibilityState["animatingClosed"] = 3] = "animatingClosed";
+    })(PanelVisibilityState || (PanelVisibilityState = {}));
+    var PanelBase = /** @class */ (function (_super) {
+        tslib_1.__extends(PanelBase, _super);
+        function PanelBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._panel = React.createRef();
+            _this._animationCallback = null;
+            _this._hasCustomNavigation = !!(_this.props.onRenderNavigation || _this.props.onRenderNavigationContent);
+            _this.dismiss = function (ev) {
+                if (_this.props.onDismiss && _this.isActive) {
+                    _this.props.onDismiss(ev);
+                }
+                if (!ev || (ev && !ev.defaultPrevented)) {
+                    _this.close();
+                }
+            };
+            // Allow the user to scroll within the panel but not on the body
+            _this._allowScrollOnPanel = function (elt) {
+                var _a;
+                _this._resizeObserver = _this._createResizeObserver(function (entries) {
+                    if (entries.length > 0 && entries[0].target === elt) {
+                        _this._updateFooterPosition();
+                    }
+                });
+                if (elt) {
+                    (_a = _this._resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(elt);
+                    if (_this._allowTouchBodyScroll) {
+                        (0, Utilities_1.allowOverscrollOnElement)(elt, _this._events);
+                    }
+                    else {
+                        (0, Utilities_1.allowScrollOnElement)(elt, _this._events);
+                    }
+                }
+                else {
+                    _this._events.off(_this._scrollableContent);
+                }
+                _this._scrollableContent = elt;
+            };
+            _this._onRenderNavigation = function (props) {
+                if (!_this.props.onRenderNavigationContent && !_this.props.onRenderNavigation && !_this.props.hasCloseButton) {
+                    return null;
+                }
+                var _a = _this.props.onRenderNavigationContent, onRenderNavigationContent = _a === void 0 ? _this._onRenderNavigationContent : _a;
+                return (React.createElement("div", { className: _this._classNames.navigation }, onRenderNavigationContent(props, _this._onRenderNavigationContent)));
+            };
+            _this._onRenderNavigationContent = function (props) {
+                var _a;
+                var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton, _b = props.onRenderHeader, onRenderHeader = _b === void 0 ? _this._onRenderHeader : _b;
+                if (hasCloseButton) {
+                    var iconButtonStyles = (_a = _this._classNames.subComponentStyles) === null || _a === void 0 ? void 0 : _a.closeButton();
+                    return (React.createElement(React.Fragment, null,
+                        !_this._hasCustomNavigation && onRenderHeader(_this.props, _this._onRenderHeader, _this._headerTextId),
+                        React.createElement(Button_1.IconButton, { styles: iconButtonStyles, className: _this._classNames.closeButton, onClick: _this._onPanelClick, ariaLabel: closeButtonAriaLabel, title: closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } })));
+                }
+                return null;
+            };
+            _this._onRenderHeader = function (props, defaultRender, headerTextId) {
+                var headerText = props.headerText, _a = props.headerTextProps, headerTextProps = _a === void 0 ? {} : _a;
+                if (headerText) {
+                    return (React.createElement("div", { className: _this._classNames.header },
+                        React.createElement("div", tslib_1.__assign({ id: headerTextId, role: "heading", "aria-level": 1 }, headerTextProps, { className: (0, Utilities_1.css)(_this._classNames.headerText, headerTextProps.className) }), headerText)));
+                }
+                return null;
+            };
+            _this._onRenderBody = function (props) {
+                return React.createElement("div", { className: _this._classNames.content }, props.children);
+            };
+            _this._onRenderFooter = function (props) {
+                var _a = _this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;
+                if (onRenderFooterContent) {
+                    return (React.createElement("div", { className: _this._classNames.footer },
+                        React.createElement("div", { className: _this._classNames.footerInner }, onRenderFooterContent())));
+                }
+                return null;
+            };
+            _this._animateTo = function (newVisibilityState) {
+                if (newVisibilityState === PanelVisibilityState.open && _this.props.onOpen) {
+                    _this.props.onOpen();
+                }
+                _this._animationCallback = _this._async.setTimeout(function () {
+                    _this.setState({ visibility: newVisibilityState });
+                    _this._onTransitionComplete(newVisibilityState);
+                }, 200);
+            };
+            _this._clearExistingAnimationTimer = function () {
+                if (_this._animationCallback !== null) {
+                    _this._async.clearTimeout(_this._animationCallback);
+                }
+            };
+            _this._onPanelClick = function (ev) {
+                _this.dismiss(ev);
+            };
+            _this._onTransitionComplete = function (newVisibilityState) {
+                _this._updateFooterPosition();
+                if (newVisibilityState === PanelVisibilityState.open && _this.props.onOpened) {
+                    _this.props.onOpened();
+                }
+                if (newVisibilityState === PanelVisibilityState.closed && _this.props.onDismissed) {
+                    _this.props.onDismissed();
+                }
+            };
+            var _a = _this.props.allowTouchBodyScroll, allowTouchBodyScroll = _a === void 0 ? false : _a;
+            _this._allowTouchBodyScroll = allowTouchBodyScroll;
+            (0, Utilities_1.initializeComponentRef)(_this);
+            (0, Utilities_1.warnDeprecations)(COMPONENT_NAME, props, {
+                ignoreExternalFocusing: 'focusTrapZoneProps',
+                forceFocusInsideTrap: 'focusTrapZoneProps',
+                firstFocusableSelector: 'focusTrapZoneProps',
+            });
+            _this.state = {
+                isFooterSticky: false,
+                // intentionally ignore props so animation takes place during componentDidMount
+                visibility: PanelVisibilityState.closed,
+                id: (0, Utilities_1.getId)('Panel'),
+            };
+            return _this;
+        }
+        PanelBase.getDerivedStateFromProps = function (nextProps, prevState) {
+            if (nextProps.isOpen === undefined) {
+                return null; // no state update
+            }
+            if (nextProps.isOpen &&
+                (prevState.visibility === PanelVisibilityState.closed ||
+                    prevState.visibility === PanelVisibilityState.animatingClosed)) {
+                return { visibility: PanelVisibilityState.animatingOpen };
+            }
+            if (!nextProps.isOpen &&
+                (prevState.visibility === PanelVisibilityState.open ||
+                    prevState.visibility === PanelVisibilityState.animatingOpen)) {
+                return { visibility: PanelVisibilityState.animatingClosed };
+            }
+            return null;
+        };
+        PanelBase.prototype.componentDidMount = function () {
+            this._async = new Utilities_1.Async(this);
+            this._events = new Utilities_1.EventGroup(this);
+            var win = (0, dom_1.getWindowEx)(this.context);
+            var doc = (0, dom_1.getDocumentEx)(this.context);
+            this._events.on(win, 'resize', this._updateFooterPosition);
+            if (this._shouldListenForOuterClick(this.props)) {
+                this._events.on(doc === null || doc === void 0 ? void 0 : doc.body, 'mousedown', this._dismissOnOuterClick, true);
+            }
+            if (this.props.isOpen) {
+                this.setState({ visibility: PanelVisibilityState.animatingOpen });
+            }
+        };
+        PanelBase.prototype.componentDidUpdate = function (previousProps, previousState) {
+            var shouldListenOnOuterClick = this._shouldListenForOuterClick(this.props);
+            var previousShouldListenOnOuterClick = this._shouldListenForOuterClick(previousProps);
+            if (this.state.visibility !== previousState.visibility) {
+                this._clearExistingAnimationTimer();
+                if (this.state.visibility === PanelVisibilityState.animatingOpen) {
+                    this._animateTo(PanelVisibilityState.open);
+                }
+                else if (this.state.visibility === PanelVisibilityState.animatingClosed) {
+                    this._animateTo(PanelVisibilityState.closed);
+                }
+            }
+            var doc = (0, dom_1.getDocumentEx)(this.context);
+            if (shouldListenOnOuterClick && !previousShouldListenOnOuterClick) {
+                this._events.on(doc === null || doc === void 0 ? void 0 : doc.body, 'mousedown', this._dismissOnOuterClick, true);
+            }
+            else if (!shouldListenOnOuterClick && previousShouldListenOnOuterClick) {
+                this._events.off(doc === null || doc === void 0 ? void 0 : doc.body, 'mousedown', this._dismissOnOuterClick, true);
+            }
+        };
+        PanelBase.prototype.componentWillUnmount = function () {
+            var _a;
+            this._async.dispose();
+            this._events.dispose();
+            (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+        PanelBase.prototype.render = function () {
+            var _a = this.props, _b = _a.className, className = _b === void 0 ? '' : _b, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, 
+            /* eslint-disable @typescript-eslint/no-deprecated */
+            firstFocusableSelector = _a.firstFocusableSelector, focusTrapZoneProps = _a.focusTrapZoneProps, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, _c = _a.headerClassName, headerClassName = _c === void 0 ? '' : _c, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isFooterAtBottom = _a.isFooterAtBottom, isLightDismiss = _a.isLightDismiss, isHiddenOnDismiss = _a.isHiddenOnDismiss, layerProps = _a.layerProps, overlayProps = _a.overlayProps, popupProps = _a.popupProps, type = _a.type, styles = _a.styles, theme = _a.theme, customWidth = _a.customWidth, _d = _a.onLightDismissClick, onLightDismissClick = _d === void 0 ? this._onPanelClick : _d, _e = _a.onRenderNavigation, onRenderNavigation = _e === void 0 ? this._onRenderNavigation : _e, _f = _a.onRenderHeader, onRenderHeader = _f === void 0 ? this._onRenderHeader : _f, _g = _a.onRenderBody, onRenderBody = _g === void 0 ? this._onRenderBody : _g, _h = _a.onRenderFooter, onRenderFooter = _h === void 0 ? this._onRenderFooter : _h;
+            var _j = this.state, isFooterSticky = _j.isFooterSticky, visibility = _j.visibility, id = _j.id;
+            var isLeft = type === Panel_types_1.PanelType.smallFixedNear || type === Panel_types_1.PanelType.customNear ? true : false;
+            var isRTL = (0, Utilities_1.getRTL)(theme);
+            var isOnRightSide = isRTL ? isLeft : !isLeft;
+            var customWidthStyles = type === Panel_types_1.PanelType.custom || type === Panel_types_1.PanelType.customNear ? { width: customWidth } : {};
+            var nativeProps = (0, Utilities_1.getNativeProps)(this.props, Utilities_1.divProperties);
+            var isOpen = this.isActive;
+            var isAnimating = visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;
+            this._headerTextId = headerText && id + '-headerText';
+            if (!isOpen && !isAnimating && !isHiddenOnDismiss) {
+                return null;
+            }
+            this._classNames = getClassNames(styles, {
+                theme: theme,
+                className: className,
+                focusTrapZoneClassName: focusTrapZoneProps ? focusTrapZoneProps.className : undefined,
+                hasCloseButton: hasCloseButton,
+                headerClassName: headerClassName,
+                isAnimating: isAnimating,
+                isFooterSticky: isFooterSticky,
+                isFooterAtBottom: isFooterAtBottom,
+                isOnRightSide: isOnRightSide,
+                isOpen: isOpen,
+                isHiddenOnDismiss: isHiddenOnDismiss,
+                type: type,
+                hasCustomNavigation: this._hasCustomNavigation,
+            });
+            var _k = this, _classNames = _k._classNames, _allowTouchBodyScroll = _k._allowTouchBodyScroll;
+            var overlay;
+            if (isBlocking && isOpen) {
+                overlay = (React.createElement(Overlay_1.Overlay, tslib_1.__assign({ className: _classNames.overlay, isDarkThemed: false, onClick: isLightDismiss ? onLightDismissClick : undefined, allowTouchBodyScroll: _allowTouchBodyScroll }, overlayProps)));
+            }
+            return (React.createElement(Layer_1.Layer, tslib_1.__assign({}, layerProps),
+                React.createElement(Popup_1.Popup, tslib_1.__assign({ role: "dialog", "aria-modal": isBlocking ? 'true' : undefined, ariaLabelledBy: this._headerTextId ? this._headerTextId : undefined, onDismiss: this.dismiss, className: _classNames.hiddenPanel, enableAriaHiddenSiblings: isOpen ? true : false }, popupProps),
+                    React.createElement("div", tslib_1.__assign({ "aria-hidden": !isOpen && isAnimating }, nativeProps, { ref: this._panel, className: _classNames.root }),
+                        overlay,
+                        React.createElement(index_1.FocusTrapZone, tslib_1.__assign({ ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: !isBlocking || (isHiddenOnDismiss && !isOpen) ? false : forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector, isClickableOutsideFocusTrap: true }, focusTrapZoneProps, { className: _classNames.main, style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss }),
+                            React.createElement("div", { className: _classNames.contentInner },
+                                React.createElement("div", { ref: this._allowScrollOnPanel, className: _classNames.scrollableContent, "data-is-scrollable": true },
+                                    React.createElement("div", { className: _classNames.commands, "data-is-visible": true }, onRenderNavigation(this.props, this._onRenderNavigation)),
+                                    (this._hasCustomNavigation || !hasCloseButton) &&
+                                        onRenderHeader(this.props, this._onRenderHeader, this._headerTextId),
+                                    onRenderBody(this.props, this._onRenderBody),
+                                    onRenderFooter(this.props, this._onRenderFooter))))))));
+        };
+        PanelBase.prototype.open = function () {
+            if (this.props.isOpen !== undefined) {
+                return;
+            }
+            if (this.isActive) {
+                return;
+            }
+            this.setState({ visibility: PanelVisibilityState.animatingOpen });
+        };
+        PanelBase.prototype.close = function () {
+            if (this.props.isOpen !== undefined) {
+                return;
+            }
+            if (!this.isActive) {
+                return;
+            }
+            this.setState({ visibility: PanelVisibilityState.animatingClosed });
+        };
+        Object.defineProperty(PanelBase.prototype, "isActive", {
+            /** isActive is true when panel is open or opening. */
+            get: function () {
+                return (this.state.visibility === PanelVisibilityState.open ||
+                    this.state.visibility === PanelVisibilityState.animatingOpen);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PanelBase.prototype._createResizeObserver = function (callback) {
+            var _a;
+            var doc = (0, dom_1.getDocumentEx)(this.context);
+            var resizeObserver = null;
+            if ((_a = doc === null || doc === void 0 ? void 0 : doc.defaultView) === null || _a === void 0 ? void 0 : _a.ResizeObserver) {
+                resizeObserver = new doc.defaultView.ResizeObserver(callback);
+            }
+            return resizeObserver;
+        };
+        PanelBase.prototype._shouldListenForOuterClick = function (props) {
+            return !!props.isBlocking && !!props.isOpen;
+        };
+        PanelBase.prototype._updateFooterPosition = function () {
+            var scrollableContent = this._scrollableContent;
+            if (scrollableContent) {
+                var height = scrollableContent.clientHeight;
+                var innerHeight_1 = scrollableContent.scrollHeight;
+                this.setState({
+                    isFooterSticky: height < innerHeight_1 ? true : false,
+                });
+            }
+        };
+        PanelBase.prototype._dismissOnOuterClick = function (ev) {
+            var panel = this._panel.current;
+            if (this.isActive && panel && !ev.defaultPrevented) {
+                if (!(0, Utilities_1.elementContains)(panel, ev.target)) {
+                    if (this.props.onOuterClick) {
+                        this.props.onOuterClick(ev);
+                    }
+                    else {
+                        this.dismiss(ev);
+                    }
+                }
+            }
+        };
+        PanelBase.defaultProps = {
+            isHiddenOnDismiss: false,
+            isOpen: undefined,
+            isBlocking: true,
+            hasCloseButton: true,
+            type: Panel_types_1.PanelType.smallFixedFar,
+        };
+        PanelBase.contextType = react_window_provider_1.WindowContext;
+        return PanelBase;
+    }(React.Component));
+    exports.PanelBase = PanelBase;
+});
+//# sourceMappingURL=Panel.base.js.map

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IPanelProps } from './Panel.types';
+/**
+ * Panel description
+ */
+export declare const Panel: React.FunctionComponent<IPanelProps>;

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.js

@@ -0,0 +1,12 @@
+define(["require", "exports", "../../Utilities", "./Panel.base", "./Panel.styles"], function (require, exports, Utilities_1, Panel_base_1, Panel_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Panel = void 0;
+    /**
+     * Panel description
+     */
+    exports.Panel = (0, Utilities_1.styled)(Panel_base_1.PanelBase, Panel_styles_1.getStyles, undefined, {
+        scope: 'Panel',
+    });
+});
+//# sourceMappingURL=Panel.js.map

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"../src/","sources":["components/Panel/Panel.ts"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,KAAK,GAAyC,IAAA,kBAAM,EAC/D,sBAAS,EACT,wBAAS,EACT,SAAS,EACT;QACE,KAAK,EAAE,OAAO;KACf,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { PanelBase } from './Panel.base';\nimport { getStyles } from './Panel.styles';\nimport type { IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types';\n\n/**\n * Panel description\n */\nexport const Panel: React.FunctionComponent<IPanelProps> = styled<IPanelProps, IPanelStyleProps, IPanelStyles>(\n  PanelBase,\n  getStyles,\n  undefined,\n  {\n    scope: 'Panel',\n  },\n);\n"]}

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IPanelStyleProps, IPanelStyles } from './Panel.types';
+export declare const getStyles: (props: IPanelStyleProps) => IPanelStyles;

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.styles.js

@@ -0,0 +1,339 @@
+define(["require", "exports", "tslib", "./Panel.types", "../../Styling"], function (require, exports, tslib_1, Panel_types_1, Styling_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var GlobalClassNames = {
+        root: 'ms-Panel',
+        main: 'ms-Panel-main',
+        commands: 'ms-Panel-commands',
+        contentInner: 'ms-Panel-contentInner',
+        scrollableContent: 'ms-Panel-scrollableContent',
+        navigation: 'ms-Panel-navigation',
+        closeButton: 'ms-Panel-closeButton ms-PanelAction-close',
+        header: 'ms-Panel-header',
+        headerText: 'ms-Panel-headerText',
+        content: 'ms-Panel-content',
+        footer: 'ms-Panel-footer',
+        footerInner: 'ms-Panel-footerInner',
+        isOpen: 'is-open',
+        hasCloseButton: 'ms-Panel--hasCloseButton',
+        smallFluid: 'ms-Panel--smFluid',
+        smallFixedNear: 'ms-Panel--smLeft',
+        smallFixedFar: 'ms-Panel--sm',
+        medium: 'ms-Panel--md',
+        large: 'ms-Panel--lg',
+        largeFixed: 'ms-Panel--fixed',
+        extraLarge: 'ms-Panel--xl',
+        custom: 'ms-Panel--custom',
+        customNear: 'ms-Panel--customLeft',
+    };
+    var panelWidth = {
+        full: '100%',
+        auto: 'auto',
+        xs: 272,
+        sm: 340,
+        md1: 592,
+        md2: 644,
+        lg: 940,
+    };
+    var panelMargin = {
+        auto: 'auto',
+        none: 0,
+        md: 48,
+        lg: 428,
+        xl: 176,
+    };
+    // Following consts are used below in `getPanelBreakpoints()` function to provide
+    // necessary fallbacks for different types of Panel in different breakpoints.
+    var smallPanelSelectors = (_a = {},
+        _a["@media (min-width: ".concat(Styling_1.ScreenWidthMinMedium, "px)")] = {
+            width: panelWidth.sm,
+        },
+        _a);
+    var mediumPanelSelectors = (_b = {},
+        _b["@media (min-width: ".concat(Styling_1.ScreenWidthMinLarge, "px)")] = {
+            width: panelWidth.md1,
+        },
+        _b["@media (min-width: ".concat(Styling_1.ScreenWidthMinXLarge, "px)")] = {
+            width: panelWidth.md2,
+        },
+        _b);
+    var largePanelSelectors = (_c = {},
+        _c["@media (min-width: ".concat(Styling_1.ScreenWidthMinUhfMobile, "px)")] = {
+            left: panelMargin.md,
+            width: panelWidth.auto,
+        },
+        _c["@media (min-width: ".concat(Styling_1.ScreenWidthMinXXLarge, "px)")] = {
+            left: panelMargin.lg,
+        },
+        _c);
+    var largeFixedPanelSelectors = (_d = {},
+        _d["@media (min-width: ".concat(Styling_1.ScreenWidthMinXXLarge, "px)")] = {
+            left: panelMargin.auto,
+            width: panelWidth.lg,
+        },
+        _d);
+    var extraLargePanelSelectors = (_e = {},
+        _e["@media (min-width: ".concat(Styling_1.ScreenWidthMinXXLarge, "px)")] = {
+            left: panelMargin.xl,
+        },
+        _e);
+    // Make sure Panels have fallbacks to different breakpoints by reusing same selectors.
+    // This is done in the effort to follow design redlines.
+    var getPanelBreakpoints = function (type) {
+        var selectors;
+        // Panel types `smallFluid`, `smallFixedNear`, `custom` and `customNear`
+        // are not checked in here because they render the same in all the breakpoints
+        // and have the checks done separately in the `getStyles` function below.
+        switch (type) {
+            case Panel_types_1.PanelType.smallFixedFar:
+                selectors = tslib_1.__assign({}, smallPanelSelectors);
+                break;
+            case Panel_types_1.PanelType.medium:
+                selectors = tslib_1.__assign(tslib_1.__assign({}, smallPanelSelectors), mediumPanelSelectors);
+                break;
+            case Panel_types_1.PanelType.large:
+                selectors = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors);
+                break;
+            case Panel_types_1.PanelType.largeFixed:
+                selectors = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors), largeFixedPanelSelectors);
+                break;
+            case Panel_types_1.PanelType.extraLarge:
+                selectors = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors), extraLargePanelSelectors);
+                break;
+            default:
+                break;
+        }
+        return selectors;
+    };
+    var commandBarHeight = '44px';
+    var sharedPaddingStyles = {
+        paddingLeft: '24px',
+        paddingRight: '24px',
+    };
+    var getStyles = function (props) {
+        var _a, _b, _c, _d;
+        var className = props.className, focusTrapZoneClassName = props.focusTrapZoneClassName, hasCloseButton = props.hasCloseButton, headerClassName = props.headerClassName, isAnimating = props.isAnimating, isFooterSticky = props.isFooterSticky, isFooterAtBottom = props.isFooterAtBottom, isOnRightSide = props.isOnRightSide, isOpen = props.isOpen, isHiddenOnDismiss = props.isHiddenOnDismiss, hasCustomNavigation = props.hasCustomNavigation, theme = props.theme, _e = props.type, type = _e === void 0 ? Panel_types_1.PanelType.smallFixedFar : _e;
+        var effects = theme.effects, fonts = theme.fonts, semanticColors = theme.semanticColors;
+        var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
+        var isCustomPanel = type === Panel_types_1.PanelType.custom || type === Panel_types_1.PanelType.customNear;
+        return {
+            root: [
+                classNames.root,
+                theme.fonts.medium,
+                isOpen && classNames.isOpen,
+                hasCloseButton && classNames.hasCloseButton,
+                {
+                    pointerEvents: 'none',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                },
+                isCustomPanel && isOnRightSide && classNames.custom,
+                isCustomPanel && !isOnRightSide && classNames.customNear,
+                className,
+            ],
+            overlay: [
+                {
+                    pointerEvents: 'auto',
+                    cursor: 'pointer',
+                },
+                isOpen && isAnimating && Styling_1.AnimationClassNames.fadeIn100,
+                !isOpen && isAnimating && Styling_1.AnimationClassNames.fadeOut100,
+            ],
+            hiddenPanel: [
+                !isOpen &&
+                    !isAnimating &&
+                    isHiddenOnDismiss && {
+                    visibility: 'hidden',
+                },
+            ],
+            main: [
+                classNames.main,
+                {
+                    backgroundColor: semanticColors.bodyBackground,
+                    boxShadow: effects.elevation64,
+                    pointerEvents: 'auto',
+                    position: 'absolute',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    overflowX: 'hidden',
+                    overflowY: 'auto',
+                    WebkitOverflowScrolling: 'touch',
+                    bottom: 0,
+                    top: 0,
+                    // left, right, width are overridden depending on the type of the Panel and the screen breakpoint.
+                    left: panelMargin.auto,
+                    right: panelMargin.none,
+                    width: panelWidth.full,
+                    selectors: tslib_1.__assign((_a = {}, _a[Styling_1.HighContrastSelector] = {
+                        borderLeft: "3px solid ".concat(semanticColors.variantBorder),
+                        borderRight: "3px solid ".concat(semanticColors.variantBorder),
+                    }, _a), getPanelBreakpoints(type)),
+                },
+                type === Panel_types_1.PanelType.smallFluid && {
+                    left: panelMargin.none,
+                },
+                type === Panel_types_1.PanelType.smallFixedNear && {
+                    left: panelMargin.none,
+                    right: panelMargin.auto,
+                    width: panelWidth.xs,
+                },
+                type === Panel_types_1.PanelType.customNear && {
+                    right: 'auto',
+                    left: 0,
+                },
+                isCustomPanel && {
+                    maxWidth: '100vw',
+                },
+                isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideRightIn40,
+                isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideLeftIn40,
+                !isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideLeftOut40,
+                !isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideRightOut40,
+                focusTrapZoneClassName,
+            ],
+            commands: [
+                classNames.commands,
+                {
+                    // Ensures that the sticky header always has a background to prevent overlaps on scroll.
+                    backgroundColor: semanticColors.bodyBackground,
+                    paddingTop: 18,
+                    selectors: (_b = {},
+                        _b["@media (min-height: ".concat(Styling_1.ScreenWidthMinMedium, "px)")] = {
+                            position: 'sticky',
+                            top: 0,
+                            zIndex: 1,
+                        },
+                        _b),
+                },
+                hasCustomNavigation && {
+                    paddingTop: 'inherit',
+                },
+            ],
+            navigation: [
+                classNames.navigation,
+                {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                },
+                hasCustomNavigation && {
+                    height: commandBarHeight,
+                },
+            ],
+            contentInner: [
+                classNames.contentInner,
+                {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    overflowY: 'hidden',
+                },
+            ],
+            header: [
+                classNames.header,
+                sharedPaddingStyles,
+                {
+                    alignSelf: 'flex-start',
+                },
+                hasCloseButton &&
+                    !hasCustomNavigation && {
+                    flexGrow: 1,
+                },
+                hasCustomNavigation && {
+                    // Ensure that title doesn't shrink if screen is too small
+                    flexShrink: 0,
+                },
+            ],
+            headerText: [
+                classNames.headerText,
+                fonts.xLarge,
+                {
+                    color: semanticColors.bodyText,
+                    lineHeight: '27px',
+                    overflowWrap: 'break-word',
+                    wordWrap: 'break-word',
+                    wordBreak: 'break-word',
+                    hyphens: 'auto',
+                },
+                headerClassName,
+            ],
+            scrollableContent: [
+                classNames.scrollableContent,
+                {
+                    overflowY: 'auto',
+                },
+                isFooterAtBottom && {
+                    flexGrow: 1,
+                    display: 'inherit',
+                    flexDirection: 'inherit',
+                },
+            ],
+            content: [
+                classNames.content,
+                sharedPaddingStyles,
+                {
+                    paddingBottom: 20,
+                },
+                isFooterAtBottom && {
+                    selectors: (_c = {},
+                        _c["@media (min-height: ".concat(Styling_1.ScreenWidthMinMedium, "px)")] = {
+                            flexGrow: 1,
+                        },
+                        _c),
+                },
+            ],
+            footer: [
+                classNames.footer,
+                {
+                    // Ensure that footer doesn't shrink if screen is too small
+                    flexShrink: 0,
+                    borderTop: '1px solid transparent',
+                    transition: "opacity ".concat(Styling_1.AnimationVariables.durationValue3, " ").concat(Styling_1.AnimationVariables.easeFunction2),
+                    selectors: (_d = {},
+                        _d["@media (min-height: ".concat(Styling_1.ScreenWidthMinMedium, "px)")] = {
+                            position: 'sticky',
+                            bottom: 0,
+                        },
+                        _d),
+                },
+                isFooterSticky && {
+                    backgroundColor: semanticColors.bodyBackground,
+                    borderTopColor: semanticColors.variantBorder,
+                },
+            ],
+            footerInner: [
+                classNames.footerInner,
+                sharedPaddingStyles,
+                {
+                    paddingBottom: 16,
+                    paddingTop: 16,
+                },
+            ],
+            subComponentStyles: {
+                closeButton: {
+                    root: [
+                        classNames.closeButton,
+                        {
+                            marginRight: 14,
+                            color: theme.palette.neutralSecondary,
+                            fontSize: Styling_1.IconFontSizes.large,
+                        },
+                        hasCustomNavigation && {
+                            marginRight: 0,
+                            height: 'auto',
+                            width: '44px',
+                        },
+                    ],
+                    rootHovered: {
+                        color: theme.palette.neutralPrimary,
+                    },
+                },
+            },
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=Panel.styles.js.map

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.types.d.ts

@@ -0,0 +1,435 @@
+import * as React from 'react';
+import { PanelBase } from './Panel.base';
+import type { IFocusTrapZoneProps } from '../../FocusTrapZone';
+import type { ILayerProps } from '../../Layer';
+import type { IOverlayProps } from '../../Overlay';
+import type { IStyle, ITheme } from '../../Styling';
+import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
+import type { IButtonStyles } from '../../Button';
+import type { IPopupProps } from '../../Popup';
+import type { JSXElement } from '@fluentui/utilities';
+/**
+ * {@docCategory Panel}
+ */
+export interface IPanel {
+    /**
+     * Forces the panel to open.
+     */
+    open: () => void;
+    /**
+     * Forces the panel to dismiss.
+     */
+    dismiss: (ev?: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
+}
+/**
+ * {@docCategory Panel}
+ */
+export interface IPanelProps extends React.HTMLAttributes<PanelBase> {
+    /**
+     * Optional callback to access the IPanel interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IPanel>;
+    /**
+     * Whether the panel is displayed.
+     * If true, will cause panel to stay open even if dismissed.
+     * If false, will cause panel to stay hidden.
+     * If undefined, will allow the panel to control its own visibility through open/dismiss methods.
+     * @defaultvalue undefined
+     */
+    isOpen?: boolean;
+    /**
+     * Has the close button visible.
+     * @defaultvalue true
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Whether the panel can be light dismissed.
+     * @defaultvalue false
+     */
+    isLightDismiss?: boolean;
+    /**
+     * Whether the panel is hidden on dismiss, instead of destroyed in the DOM.
+     * Protects the contents from being destroyed when the panel is dismissed.
+     * @defaultvalue false
+     */
+    isHiddenOnDismiss?: boolean;
+    /**
+     * Whether the panel uses a modal overlay or not
+     * @defaultvalue true
+     */
+    isBlocking?: boolean;
+    /**
+     * Determines if content should stretch to fill available space putting footer at the bottom of the page
+     * @defaultvalue false
+     */
+    isFooterAtBottom?: boolean;
+    /**
+     * Header text for the Panel.
+     * @defaultvalue ""
+     */
+    headerText?: string;
+    /**
+     * The props for header text container.
+     */
+    headerTextProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * A callback function for when the Panel is opened, before the animation completes.
+     */
+    onOpen?: () => void;
+    /**
+     * A callback function for when the Panel is opened, after the animation completes.
+     */
+    onOpened?: () => void;
+    /**
+     * A callback function for when the panel is closed, before the animation completes.
+     * If the panel should NOT be dismissed based on some keyboard event, then simply call ev.preventDefault() on it
+     */
+    onDismiss?: (ev?: React.SyntheticEvent<HTMLElement> | KeyboardEvent) => void;
+    /**
+     * A callback function which is called **after** the Panel is dismissed and the animation is complete.
+     * (If you need to update the Panel's `isOpen` prop in response to a dismiss event, use `onDismiss` instead.)
+     */
+    onDismissed?: () => void;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles>;
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme?: ITheme;
+    /**
+     * Additional css class to apply to the Panel
+     * @defaultvalue undefined
+     */
+    className?: string;
+    /**
+     * Type of the panel.
+     * @defaultvalue PanelType.smallFixedFar
+     */
+    type?: PanelType;
+    /**
+     * Custom panel width, used only when `type` is set to `PanelType.custom`.
+     */
+    customWidth?: string;
+    /**
+     * Aria label on close button
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Optional parameter to provider the class name for header text
+     */
+    headerClassName?: string;
+    /**
+     * Sets the HTMLElement to focus on when exiting the FocusTrapZone.
+     * @defaultvalue The `element.target` that triggered the Panel.
+     */
+    elementToFocusOnDismiss?: HTMLElement;
+    /**
+     * Indicates if this Panel will ignore keeping track of HTMLElement that activated the Zone.
+     * @defaultvalue false
+     * @deprecated Use `focusTrapZoneProps`.
+     */
+    ignoreExternalFocusing?: boolean;
+    /**
+     * Indicates whether Panel should force focus inside the focus trap zone.
+     * If not explicitly specified, behavior aligns with FocusTrapZone's default behavior.
+     * @deprecated Use `focusTrapZoneProps`.
+     */
+    forceFocusInsideTrap?: boolean;
+    /**
+     * Indicates the selector for first focusable item.
+     * @deprecated Use `focusTrapZoneProps`.
+     */
+    firstFocusableSelector?: string;
+    /**
+     * Optional props to pass to the FocusTrapZone component to manage focus in the panel.
+     */
+    focusTrapZoneProps?: IFocusTrapZoneProps;
+    /**
+     * Optional props to pass to the Layer component hosting the panel.
+     */
+    layerProps?: ILayerProps;
+    /**
+     * Optional props to pass to the Overlay component that the panel uses.
+     */
+    overlayProps?: IOverlayProps;
+    /**
+     * Optional props to pass the Popup component that the panel uses.
+     */
+    popupProps?: IPopupProps;
+    /**
+     * Optional custom function to handle clicks outside the panel in lightdismiss mode
+     */
+    onLightDismissClick?: () => void;
+    /**
+     * Optional custom function to handle clicks outside this component
+     */
+    onOuterClick?: (ev?: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional custom renderer navigation region. Replaces the region that contains the close button.
+     */
+    onRenderNavigation?: IRenderFunction<IPanelProps>;
+    /**
+     * Optional custom renderer for content in the navigation region. Replaces current close button.
+     */
+    onRenderNavigationContent?: IRenderFunction<IPanelProps>;
+    /**
+     * Optional custom renderer for header region. Replaces current title
+     */
+    onRenderHeader?: IPanelHeaderRenderer;
+    /**
+     * Optional custom renderer for body region. Replaces any children passed into the component.
+     */
+    onRenderBody?: IRenderFunction<IPanelProps>;
+    /**
+     * Optional custom renderer for footer region. Replaces sticky footer.
+     */
+    onRenderFooter?: IRenderFunction<IPanelProps>;
+    /**
+     * Custom renderer for content in the sticky footer
+     */
+    onRenderFooterContent?: IRenderFunction<IPanelProps>;
+    /**
+     * @deprecated Not used.
+     */
+    componentId?: string;
+    /**
+     * Allow body scroll on content and overlay on touch devices. Changing after mounting has no effect.
+     * @defaultvalue false
+     */
+    allowTouchBodyScroll?: boolean;
+}
+/**
+ * Renderer function which takes an additional parameter, the ID to use for the element containing
+ * the panel's title. This allows the `aria-labelledby` for the panel popup to work correctly.
+ * Note that if `headerTextId` is provided, it **must** be used on an element, or screen readers
+ * will be confused by the reference to a nonexistent ID.
+ * {@docCategory Panel}
+ */
+export interface IPanelHeaderRenderer extends IRenderFunction<IPanelProps> {
+    /**
+     * @param props - Props given to the panel
+     * @param defaultRender - Default header renderer. If using this renderer in code that does not
+     * assign `headerTextId` to an element elsewhere, it **must** be passed to this function.
+     * @param headerTextId - If provided, this **must** be used as the ID of an element containing the
+     * panel's title, because the panel popup uses this ID as its aria-labelledby.
+     */
+    (props?: IPanelProps, defaultRender?: IPanelHeaderRenderer, headerTextId?: string | undefined): JSXElement | null;
+}
+/**
+ * {@docCategory Panel}
+ */
+export declare enum PanelType {
+    /**
+     * Renders the Panel with a `fluid` (full screen) width.
+     * Recommended for use on small screen breakpoints.
+     * - Small (320-479): full screen width, 16px left/right padding
+     * - Medium (480-639): full screen width, 16px left/right padding
+     * - Large (640-1023): full screen width, 32px left/right padding
+     * - XLarge (1024-1365): full screen width, 32px left/right padding
+     * - XXLarge (1366-up): full screen width, 40px left/right padding
+     */
+    smallFluid = 0,
+    /**
+     * Renders the Panel in fixed-width `small` size, anchored to the far side (right in LTR mode).
+     * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+     * - Medium (480-639): 340px width, 16px left/right padding
+     * - Large (640-1023): 340px width, 32px left/right padding
+     * - XLarge (1024-1365): 340px width, 32px left/right padding
+     * - XXLarge (1366-up): 340px width, 40px left/right padding
+     */
+    smallFixedFar = 1,
+    /**
+     * Renders the Panel in fixed-width `small` size, anchored to the near side (left in LTR mode).
+     * - Small (320-479): 272px width, 16px left/right padding
+     * - Medium (480-639): 272px width, 16px left/right padding
+     * - Large (640-1023): 272px width, 32px left/right padding
+     * - XLarge (1024-1365): 272px width, 32px left/right padding
+     * - XXLarge (1366-up): 272px width, 40px left/right padding
+     */
+    smallFixedNear = 2,
+    /**
+     * Renders the Panel in `medium` size, anchored to the far side (right in LTR mode).
+     * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+     * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
+     * - Large (640-1023): 592px width, 32px left/right padding
+     * - XLarge (1024-1365): 644px width, 32px left/right padding
+     * - XXLarge (1366-up): 644px width, 40px left/right padding
+     */
+    medium = 3,
+    /**
+     * Renders the Panel in `large` size, anchored to the far side (right in LTR mode).
+     * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+     * - Medium (480-639):  adapts to `PanelType.smallFixedFar` at this breakpoint
+     * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
+     * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding
+     * - XXLarge (1366-up): 428px fixed left margin, fluid width, 40px left/right padding
+     */
+    large = 4,
+    /**
+     * Renders the Panel in `large` size, anchored to the far side (right in LTR mode), with a fixed width at
+     * XX-Large breakpoint.
+     * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+     * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
+     * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
+     * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding
+     * - XXLarge (1366-up): 940px width, 40px left/right padding
+     */
+    largeFixed = 5,
+    /**
+     * Renders the Panel in `extra large` size, anchored to the far side (right in LTR mode).
+     * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+     * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
+     * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
+     * - XLarge (1024-1365): adapts to `PanelType.large` at this breakpoint
+     * - XXLarge (1366-1919): 176px fixed left margin, fluid width, 40px left/right padding
+     * - XXXLarge (1920-up): 176px fixed left margin, fluid width, 40px left/right padding
+     */
+    extraLarge = 6,
+    /**
+     * Renders the Panel in `custom` size using `customWidth`, anchored to the far side (right in LTR mode).
+     * - Has a fixed width provided by the `customWidth` prop
+     * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel
+     * taking up 100% of the viewport width
+     */
+    custom = 7,
+    /**
+     * Renders the Panel in `custom` size using `customWidth`, anchored to the near side (left in LTR mode).
+     * - Has a fixed width provided by the `customWidth` prop
+     * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel
+     * taking up 100% of the viewport width
+     */
+    customNear = 8
+}
+/**
+ * {@docCategory Panel}
+ */
+export interface IPanelStyleProps {
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme: ITheme;
+    /**
+     * Accept custom classNames
+     */
+    className?: string;
+    /**
+     * Is Panel open
+     */
+    isOpen?: boolean;
+    /**
+     * Is animation currently running
+     */
+    isAnimating?: boolean;
+    /**
+     * Is panel on right side
+     */
+    isOnRightSide?: boolean;
+    /**
+     * Is panel hidden on dismiss
+     */
+    isHiddenOnDismiss?: boolean;
+    /**
+     * Classname for FocusTrapZone element
+     */
+    focusTrapZoneClassName?: string;
+    /**
+     * Determines if content should stretch to fill available space putting footer at the bottom of the page
+     */
+    isFooterAtBottom?: boolean;
+    /**
+     * Based on state value setting footer to sticky or not
+     */
+    isFooterSticky?: boolean;
+    /**
+     * Panel has close button
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Type of the panel.
+     */
+    type?: PanelType;
+    /**
+     * Optional parameter to provider the class name for header text
+     */
+    headerClassName?: string;
+    /**
+     * Determines where the header is rendered based on whether the user
+     * has passed in a custom onRenderNavigation or onRenderNavigationContent render callback
+     */
+    hasCustomNavigation?: boolean;
+}
+export interface IPanelSubComponentStyles {
+    /**
+     * Styling for close button child component.
+     */
+    closeButton: Partial<IButtonStyles>;
+}
+/**
+ * {@docCategory Panel}
+ */
+export interface IPanelStyles {
+    /**
+     * Style for the root element.
+     */
+    root: IStyle;
+    /**
+     * Style for the overlay element.
+     */
+    overlay: IStyle;
+    /**
+     * Style for the hidden element.
+     */
+    hiddenPanel: IStyle;
+    /**
+     * Style for the main section element.
+     */
+    main: IStyle;
+    /**
+     * Style for the navigation container element.
+     */
+    commands: IStyle;
+    /**
+     * Style for the Body and Footer container element.
+     */
+    contentInner: IStyle;
+    /**
+     * Style for the scrollable content area container element.
+     */
+    scrollableContent: IStyle;
+    /**
+     * Style for the close button container element.
+     */
+    navigation: IStyle;
+    /**
+     * Style for the close button IconButton element.
+     * @deprecated Use `subComponentStyles.closeButton` instead.
+     */
+    closeButton?: IStyle;
+    /**
+     * Style for the header container div element.
+     */
+    header: IStyle;
+    /**
+     * Style for the header text div element.
+     */
+    headerText: IStyle;
+    /**
+     * Style for the body div element.
+     */
+    content: IStyle;
+    /**
+     * Style for the footer div element.
+     */
+    footer: IStyle;
+    /**
+     * Style for the inner footer div element.
+     */
+    footerInner: IStyle;
+    /**
+     * Styling for subcomponents.
+     */
+    subComponentStyles: IPanelSubComponentStyles;
+}

node_modules/@fluentui/react/lib-amd/components/Panel/Panel.types.js

@@ -0,0 +1,92 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PanelType = void 0;
+    /**
+     * {@docCategory Panel}
+     */
+    var PanelType;
+    (function (PanelType) {
+        /**
+         * Renders the Panel with a `fluid` (full screen) width.
+         * Recommended for use on small screen breakpoints.
+         * - Small (320-479): full screen width, 16px left/right padding
+         * - Medium (480-639): full screen width, 16px left/right padding
+         * - Large (640-1023): full screen width, 32px left/right padding
+         * - XLarge (1024-1365): full screen width, 32px left/right padding
+         * - XXLarge (1366-up): full screen width, 40px left/right padding
+         */
+        PanelType[PanelType["smallFluid"] = 0] = "smallFluid";
+        /**
+         * Renders the Panel in fixed-width `small` size, anchored to the far side (right in LTR mode).
+         * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+         * - Medium (480-639): 340px width, 16px left/right padding
+         * - Large (640-1023): 340px width, 32px left/right padding
+         * - XLarge (1024-1365): 340px width, 32px left/right padding
+         * - XXLarge (1366-up): 340px width, 40px left/right padding
+         */
+        PanelType[PanelType["smallFixedFar"] = 1] = "smallFixedFar";
+        /**
+         * Renders the Panel in fixed-width `small` size, anchored to the near side (left in LTR mode).
+         * - Small (320-479): 272px width, 16px left/right padding
+         * - Medium (480-639): 272px width, 16px left/right padding
+         * - Large (640-1023): 272px width, 32px left/right padding
+         * - XLarge (1024-1365): 272px width, 32px left/right padding
+         * - XXLarge (1366-up): 272px width, 40px left/right padding
+         */
+        PanelType[PanelType["smallFixedNear"] = 2] = "smallFixedNear";
+        /**
+         * Renders the Panel in `medium` size, anchored to the far side (right in LTR mode).
+         * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+         * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
+         * - Large (640-1023): 592px width, 32px left/right padding
+         * - XLarge (1024-1365): 644px width, 32px left/right padding
+         * - XXLarge (1366-up): 644px width, 40px left/right padding
+         */
+        PanelType[PanelType["medium"] = 3] = "medium";
+        /**
+         * Renders the Panel in `large` size, anchored to the far side (right in LTR mode).
+         * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+         * - Medium (480-639):  adapts to `PanelType.smallFixedFar` at this breakpoint
+         * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
+         * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding
+         * - XXLarge (1366-up): 428px fixed left margin, fluid width, 40px left/right padding
+         */
+        PanelType[PanelType["large"] = 4] = "large";
+        /**
+         * Renders the Panel in `large` size, anchored to the far side (right in LTR mode), with a fixed width at
+         * XX-Large breakpoint.
+         * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+         * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
+         * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
+         * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding
+         * - XXLarge (1366-up): 940px width, 40px left/right padding
+         */
+        PanelType[PanelType["largeFixed"] = 5] = "largeFixed";
+        /**
+         * Renders the Panel in `extra large` size, anchored to the far side (right in LTR mode).
+         * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
+         * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
+         * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
+         * - XLarge (1024-1365): adapts to `PanelType.large` at this breakpoint
+         * - XXLarge (1366-1919): 176px fixed left margin, fluid width, 40px left/right padding
+         * - XXXLarge (1920-up): 176px fixed left margin, fluid width, 40px left/right padding
+         */
+        PanelType[PanelType["extraLarge"] = 6] = "extraLarge";
+        /**
+         * Renders the Panel in `custom` size using `customWidth`, anchored to the far side (right in LTR mode).
+         * - Has a fixed width provided by the `customWidth` prop
+         * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel
+         * taking up 100% of the viewport width
+         */
+        PanelType[PanelType["custom"] = 7] = "custom";
+        /**
+         * Renders the Panel in `custom` size using `customWidth`, anchored to the near side (left in LTR mode).
+         * - Has a fixed width provided by the `customWidth` prop
+         * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel
+         * taking up 100% of the viewport width
+         */
+        PanelType[PanelType["customNear"] = 8] = "customNear";
+    })(PanelType || (exports.PanelType = PanelType = {}));
+});
+//# sourceMappingURL=Panel.types.js.map

node_modules/@fluentui/react/lib-amd/components/Panel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Panel';
+export * from './Panel.base';
+export * from './Panel.types';

node_modules/@fluentui/react/lib-amd/components/Panel/index.js

@@ -0,0 +1,8 @@
+define(["require", "exports", "tslib", "./Panel", "./Panel.base", "./Panel.types"], function (require, exports, tslib_1, Panel_1, Panel_base_1, Panel_types_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Panel_1, exports);
+    tslib_1.__exportStar(Panel_base_1, exports);
+    tslib_1.__exportStar(Panel_types_1, exports);
+});
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib-amd/components/Panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Panel/index.ts"],"names":[],"mappings":";;;IAAA,uCAAwB;IACxB,4CAA6B;IAC7B,6CAA8B","sourcesContent":["export * from './Panel';\nexport * from './Panel.base';\nexport * from './Panel.types';\n"]}