@azure/communication-react 1.3.0 → 1.3.2-alpha-202206300013.0

package/dist/dist-esm/react-components/src/components/MicrophoneButton.js

@@ -1,3 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,8 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
 import React, { useState, useCallback } from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
@@ -23,16 +23,24 @@ import { Announcer } from './Announcer';
  * @public
  */
 export const MicrophoneButton = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { onToggleMicrophone } = props;
     const localeStrings = useLocale().strings.microphoneButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const [announcerString, setAnnouncerString] = useState(undefined);
+    const isSplit = (_a = props.split) !== null && _a !== void 0 ? _a : props.enableDeviceSelectionMenu;
+    // The button should be disabled when there are no mics. However if the button is a split button, if there are
+    // no mics but there are speakers, then only the primary part of the button should be disabled to allow for
+    // speaker change.
+    const primaryDisabled = props.primaryDisabled || (isSplit && !((_b = props.microphones) === null || _b === void 0 ? void 0 : _b.length) ? true : undefined);
+    const disabled = props.disabled ||
+        (isSplit && !((_c = props.microphones) === null || _c === void 0 ? void 0 : _c.length) && !((_d = props.speakers) === null || _d === void 0 ? void 0 : _d.length)) ||
+        (!isSplit && props.microphones && ((_e = props.microphones) === null || _e === void 0 ? void 0 : _e.length) === 0);
     const onRenderMicOnIcon = () => {
-        return React.createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonMicOn" });
+        return React.createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOn" });
     };
     const onRenderMicOffIcon = () => {
-        return React.createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonMicOff" });
+        return React.createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOff" });
     };
     const isMicOn = props.checked;
     const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;
@@ -42,16 +50,19 @@ export const MicrophoneButton = (props) => {
     const onToggleClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
-                yield onToggleMicrophone(); // allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.
-                toggleAnnouncerString(!isMicOn); // eslint-disable-next-line no-empty
+                yield onToggleMicrophone();
+                // allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.
+                toggleAnnouncerString(!isMicOn);
+                // eslint-disable-next-line no-empty
+            }
+            finally {
             }
-            finally { }
         }
     }), [isMicOn, onToggleMicrophone, toggleAnnouncerString]);
-    return React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        React.createElement(ControlBarButton, Object.assign({}, props, { onClick: props.onToggleMicrophone ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderMicOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderMicOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'microphoneButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : (props.enableDeviceSelectionMenu ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings) : undefined), menuIconProps: ((_f = props.menuIconProps) !== null && _f !== void 0 ? _f : !props.enableDeviceSelectionMenu) ? {
-                hidden: true
-            } : undefined, split: (_g = props.split) !== null && _g !== void 0 ? _g : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined })));
+        React.createElement(ControlBarButton, Object.assign({}, props, { onClick: props.onToggleMicrophone ? onToggleClick : props.onClick, onRenderOnIcon: (_f = props.onRenderOnIcon) !== null && _f !== void 0 ? _f : onRenderMicOnIcon, onRenderOffIcon: (_g = props.onRenderOffIcon) !== null && _g !== void 0 ? _g : onRenderMicOffIcon, strings: strings, labelKey: (_h = props.labelKey) !== null && _h !== void 0 ? _h : 'microphoneButtonLabel', menuProps: (_j = props.menuProps) !== null && _j !== void 0 ? _j : (props.enableDeviceSelectionMenu
+                ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_k = props.styles) === null || _k === void 0 ? void 0 : _k.menuStyles }), strings)
+                : undefined), menuIconProps: ((_l = props.menuIconProps) !== null && _l !== void 0 ? _l : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_m = props.split) !== null && _m !== void 0 ? _m : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, disabled: disabled, primaryDisabled: primaryDisabled }))));
 };
 //# sourceMappingURL=MicrophoneButton.js.map

package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MicrophoneButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MicrophoneButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MicrophoneButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MicrophoneButton.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClone.d.ts","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ModalClone/ModalClone.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAmP,WAAW,EAA0J,MAAM,iBAAiB,CAAC;AAGvb,gBAAgB;AAEhB,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,eAAe,CAAC,EAAE,aAAa,CAAC;CACjC;AAED,gBAAgB;AAEhB,oBAAY,aAAa,GAAG;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AA06BF,gBAAgB;AAGhB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAGpE,CAAC"}
+{"version":3,"file":"ModalClone.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ModalClone/ModalClone.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAeL,WAAW,EAcZ,MAAM,iBAAiB,CAAC;AAKzB,gBAAgB;AAChB,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,eAAe,CAAC,EAAE,aAAa,CAAC;CACjC;AAGD,gBAAgB;AAChB,oBAAY,aAAa,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAg+BrD,gBAAgB;AAChB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAOpE,CAAC"}

package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.js

@@ -8,12 +8,9 @@
 import * as React from 'react';
 import { useBoolean, useMergedRefs, useConst, useSetTimeout, useId, useUnmount } from '@fluentui/react-hooks';
 import { allowOverscrollOnElement, allowScrollOnElement, AnimationVariables, classNamesFunction, DirectionalHint, elementContains, EventGroup, FocusTrapZone, getGlobalClassNames, getPropsWithDefaults, Icon, KeyCodes, Layer, memoizeFunction, mergeStyles, on, Overlay, Popup, ResponsiveMode, styled, useResponsiveMode, ZIndexes } from '@fluentui/react';
-import { useWindow } from '@fluentui/react-window-provider'; // @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)
+import { useWindow } from '@fluentui/react-window-provider';
 const animationDuration = AnimationVariables.durationValue2;
-const ZERO = {
-    x: 0,
-    y: 0
-};
+const ZERO = { x: 0, y: 0 };
 const DEFAULT_PROPS = {
     isOpen: false,
     isDarkOverlay: true,
@@ -85,7 +82,8 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
         windowInnerHeight: win === null || win === void 0 ? void 0 : win.innerHeight,
         isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector
     });
-    const mergedLayerProps = Object.assign(Object.assign({ eventBubblingEnabled: false }, layerProps), { onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount, insertFirst: isModeless, className: classNames.layer }); // Allow the user to scroll within the modal but not on the body
+    const mergedLayerProps = Object.assign(Object.assign({ eventBubblingEnabled: false }, layerProps), { onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount, insertFirst: isModeless, className: classNames.layer });
+    // Allow the user to scroll within the modal but not on the body
     const allowScrollOnModal = React.useCallback((elt) => {
         if (elt) {
             if (internalState.allowTouchBodyScroll) {
@@ -109,14 +107,9 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
             }
             if (keepInBounds) {
                 // x/y are unavailable in IE, so use the equivalent left/top
-                internalState.minPosition = minDragPosition !== null && minDragPosition !== void 0 ? minDragPosition : {
-                    x: -modalRectangle.left,
-                    y: -modalRectangle.top
-                };
-                internalState.maxPosition = maxDragPosition !== null && maxDragPosition !== void 0 ? maxDragPosition : {
-                    x: modalRectangle.left,
-                    y: modalRectangle.top
-                }; // Make sure the initial co-ordinates are within clamp bounds.
+                internalState.minPosition = minDragPosition !== null && minDragPosition !== void 0 ? minDragPosition : { x: -modalRectangle.left, y: -modalRectangle.top };
+                internalState.maxPosition = maxDragPosition !== null && maxDragPosition !== void 0 ? maxDragPosition : { x: modalRectangle.left, y: modalRectangle.top };
+                // Make sure the initial co-ordinates are within clamp bounds.
                 setCoordinates({
                     x: getClampedAxis('x', coordinates.x),
                     y: getClampedAxis('y', coordinates.y)
@@ -152,9 +145,10 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
         setModalMenuClose();
         internalState.isInKeyboardMoveMode = false;
     }, [internalState, setModalMenuClose]);
-    const handleDrag = React.useCallback(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleDrag = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (ev, dragData) => {
-        setCoordinates(prevValue => ({
+        setCoordinates((prevValue) => ({
             x: getClampedAxis('x', prevValue.x + dragData.delta.x),
             y: getClampedAxis('y', prevValue.y + dragData.delta.y)
         }));
@@ -190,49 +184,32 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
                     /* eslint-disable no-fallthrough */
                     case KeyCodes.escape:
                         setCoordinates(internalState.lastSetCoordinates);
-                    case KeyCodes.enter:
-                        {
-                            // TODO: determine if fallthrough was intentional
-                            /* eslint-enable no-fallthrough */
-                            internalState.lastSetCoordinates = ZERO; // setIsInKeyboardMoveMode(false);
-                            break;
-                        }
-                    case KeyCodes.up:
-                        {
-                            setCoordinates(prevValue => ({
-                                x: prevValue.x,
-                                y: getClampedAxis('y', prevValue.y - delta)
-                            }));
-                            break;
-                        }
-                    case KeyCodes.down:
-                        {
-                            setCoordinates(prevValue => ({
-                                x: prevValue.x,
-                                y: getClampedAxis('y', prevValue.y + delta)
-                            }));
-                            break;
-                        }
-                    case KeyCodes.left:
-                        {
-                            setCoordinates(prevValue => ({
-                                x: getClampedAxis('x', prevValue.x - delta),
-                                y: prevValue.y
-                            }));
-                            break;
-                        }
-                    case KeyCodes.right:
-                        {
-                            setCoordinates(prevValue => ({
-                                x: getClampedAxis('x', prevValue.x + delta),
-                                y: prevValue.y
-                            }));
-                            break;
-                        }
-                    default:
-                        {
-                            handledEvent = false;
-                        }
+                    case KeyCodes.enter: {
+                        // TODO: determine if fallthrough was intentional
+                        /* eslint-enable no-fallthrough */
+                        internalState.lastSetCoordinates = ZERO;
+                        // setIsInKeyboardMoveMode(false);
+                        break;
+                    }
+                    case KeyCodes.up: {
+                        setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta) }));
+                        break;
+                    }
+                    case KeyCodes.down: {
+                        setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta) }));
+                        break;
+                    }
+                    case KeyCodes.left: {
+                        setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x - delta), y: prevValue.y }));
+                        break;
+                    }
+                    case KeyCodes.right: {
+                        setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x + delta), y: prevValue.y }));
+                        break;
+                    }
+                    default: {
+                        handledEvent = false;
+                    }
                 }
                 if (handledEvent) {
                     ev.preventDefault();
@@ -243,13 +220,9 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
         internalState.lastSetCoordinates = coordinates;
         setModalMenuClose();
         internalState.isInKeyboardMoveMode = true;
-        internalState.events.on(win, 'keydown', handleKeyDown, true
-        /* useCapture */
-        );
+        internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);
         internalState.disposeOnKeyDown = () => {
-            internalState.events.off(win, 'keydown', handleKeyDown, true
-            /* useCapture */
-            );
+            internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);
             internalState.disposeOnKeyDown = undefined;
         };
     };
@@ -272,57 +245,56 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
             }
         };
         if (!internalState.disposeOnKeyUp) {
-            internalState.events.on(win, 'keyup', handleKeyUp, true
-            /* useCapture */
-            );
+            internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);
             internalState.disposeOnKeyUp = () => {
-                internalState.events.off(win, 'keyup', handleKeyUp, true
-                /* useCapture */
-                );
+                internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);
                 internalState.disposeOnKeyUp = undefined;
             };
         }
     };
     React.useEffect(() => {
-        clearTimeout(internalState.onModalCloseTimer); // Opening the dialog
+        clearTimeout(internalState.onModalCloseTimer);
+        // Opening the dialog
         if (isOpen) {
             // This must be done after the modal content has rendered
             requestAnimationFrame(() => setTimeout(registerInitialModalPosition, 0));
-            setIsModalOpen(true); // Add a keyUp handler for all key up events once the dialog is open.
+            setIsModalOpen(true);
+            // Add a keyUp handler for all key up events once the dialog is open.
             if (dragOptions) {
                 registerForKeyUp();
             }
             internalState.hasBeenOpened = true;
             setIsVisible(true);
-        } // Closing the dialog
+        }
+        // Closing the dialog
         if (!isOpen && isModalOpen) {
             internalState.onModalCloseTimer = setTimeout(handleModalClose, parseFloat(animationDuration) * 1000);
             setIsVisible(false);
-        } // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isModalOpen or isOpen mutates or if min/max drag bounds are updated.
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isModalOpen or isOpen mutates or if min/max drag bounds are updated.
     }, [isModalOpen, isOpen, minDragPosition, maxDragPosition]);
     useUnmount(() => {
         internalState.events.dispose();
     });
     useComponentRef(props, focusTrapZone);
-    const modalContent = React.createElement(FocusTrapZone, { disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined },
-        dragOptions && internalState.isInKeyboardMoveMode && React.createElement("div", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? React.createElement(Icon, Object.assign({}, dragOptions.keyboardMoveIconProps)) : React.createElement(Icon, { iconName: "move", className: classNames.keyboardMoveIcon })),
+    const modalContent = (React.createElement(FocusTrapZone, { disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined },
+        dragOptions && internalState.isInKeyboardMoveMode && (React.createElement("div", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? (React.createElement(Icon, Object.assign({}, dragOptions.keyboardMoveIconProps))) : (React.createElement(Icon, { iconName: "move", className: classNames.keyboardMoveIcon })))),
         React.createElement("div", { ref: allowScrollOnModal, className: classNames.scrollableContent, "data-is-scrollable": true },
-            dragOptions && isModalMenuOpen && React.createElement(dragOptions.menu, { items: [{
-                        key: 'move',
-                        text: dragOptions.moveMenuItemText,
-                        onClick: handleEnterKeyboardMoveMode
-                    }, {
-                        key: 'close',
-                        text: dragOptions.closeMenuItemText,
-                        onClick: handleModalClose
-                    }], onDismiss: setModalMenuClose, alignTargetEdge: true, coverTarget: true, directionalHint: DirectionalHint.topLeftEdge, directionalHintFixed: true, shouldFocusOnMount: true, target: internalState.scrollableContent }),
-            children));
-    return ( // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    isModalOpen && modalResponsiveMode >= (responsiveMode || ResponsiveMode.small) && React.createElement(Layer, Object.assign({ ref: mergedRef }, mergedLayerProps),
-        React.createElement(Popup, { role: isAlertRole ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, shouldRestoreFocus: !ignoreExternalFocusing, "aria-modal": !isModeless },
+            dragOptions && isModalMenuOpen && (React.createElement(dragOptions.menu, { items: [
+                    { key: 'move', text: dragOptions.moveMenuItemText, onClick: handleEnterKeyboardMoveMode },
+                    { key: 'close', text: dragOptions.closeMenuItemText, onClick: handleModalClose }
+                ], onDismiss: setModalMenuClose, alignTargetEdge: true, coverTarget: true, directionalHint: DirectionalHint.topLeftEdge, directionalHintFixed: true, shouldFocusOnMount: true, target: internalState.scrollableContent })),
+            children)));
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (isModalOpen && modalResponsiveMode >= (responsiveMode || ResponsiveMode.small) && (React.createElement(Layer, Object.assign({ ref: mergedRef }, mergedLayerProps),
+        React.createElement(Popup, { role: isAlertRole ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, 
+            // onDismiss={onDismiss}
+            shouldRestoreFocus: !ignoreExternalFocusing, "aria-modal": !isModeless },
             React.createElement("div", { className: classNames.root, role: !isModeless ? 'document' : undefined },
-                !isModeless && React.createElement(Overlay, Object.assign({ "aria-hidden": true, isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: allowTouchBodyScroll }, overlay)),
-                dragOptions ? React.createElement(DraggableZone, { handleSelector: dragOptions.dragHandleSelector || `#${focusTrapZoneId}`, preventDragSelector: "button", onStart: handleDragStart, onDragChange: handleDrag, onStop: handleDragStop, position: coordinates }, modalContent) : modalContent))) || null);
+                !isModeless && (React.createElement(Overlay, Object.assign({ "aria-hidden": true, isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: allowTouchBodyScroll }, overlay))),
+                dragOptions ? (React.createElement(DraggableZone, { handleSelector: dragOptions.dragHandleSelector || `#${focusTrapZoneId}`, preventDragSelector: "button", onStart: handleDragStart, onDragChange: handleDrag, onStop: handleDragStop, position: coordinates }, modalContent)) : (modalContent)))))) ||
+        null);
 });
 ModalBase.displayName = 'ModalBase';
 const getDraggableZoneClassNames = memoizeFunction((className, isDragging) => {
@@ -348,7 +320,7 @@ const eventMapping = {
         move: 'mousemove',
         stop: 'mouseup'
     }
-}; // These are needed so that we can generalize the events
+};
 class DraggableZone extends React.Component {
     constructor(props) {
         super(props);
@@ -390,11 +362,15 @@ class DraggableZone extends React.Component {
             // Only handle left click for dragging
             if (typeof event.button === 'number' && event.button !== 0) {
                 return false;
-            } // If the target doesn't match the handleSelector OR
+            }
+            // If the target doesn't match the handleSelector OR
             // if the target does match the preventDragSelector, bail out
-            if (this.props.handleSelector && !this._matchesSelector(event.target, this.props.handleSelector) || this.props.preventDragSelector && this._matchesSelector(event.target, this.props.preventDragSelector)) {
+            if ((this.props.handleSelector && !this._matchesSelector(event.target, this.props.handleSelector)) ||
+                (this.props.preventDragSelector &&
+                    this._matchesSelector(event.target, this.props.preventDragSelector))) {
                 return;
-            } // Remember the touch identifier if this is a touch event so we can
+            }
+            // Remember the touch identifier if this is a touch event so we can
             // distinguish between individual touches in multitouch scenarios
             // by remembering which touch point we were given
             this._touchId = this._getTouchId(event);
@@ -407,13 +383,13 @@ class DraggableZone extends React.Component {
             this.setState({
                 isDragging: true,
                 lastPosition: position
-            }); // hook up the appropriate mouse/touch events to the body to ensure
+            });
+            // hook up the appropriate mouse/touch events to the body to ensure
             // smooth dragging
-            this._events = [on(document.body, this._currentEventType.move, this._onDrag, true
-                /* use capture phase */
-                ), on(document.body, this._currentEventType.stop, this._onDragStop, true
-                /* use capture phase */
-                )];
+            this._events = [
+                on(document.body, this._currentEventType.move, this._onDrag, true /* use capture phase */),
+                on(document.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */)
+            ];
             return;
         };
         this._onDrag = (event) => {
@@ -424,7 +400,8 @@ class DraggableZone extends React.Component {
             const position = this._getControlPosition(event);
             if (!position) {
                 return;
-            } // create the updated drag data from the position data
+            }
+            // create the updated drag data from the position data
             const updatedData = this._createUpdatedDragData(this._createDragDataFromPosition(position));
             const updatedPosition = updatedData.position;
             this.props.onDragChange && this.props.onDragChange(event, updatedData);
@@ -441,7 +418,8 @@ class DraggableZone extends React.Component {
             if (!position) {
                 return;
             }
-            const baseDragData = this._createDragDataFromPosition(position); // Set dragging to false and reset the lastPosition
+            const baseDragData = this._createDragDataFromPosition(position);
+            // Set dragging to false and reset the lastPosition
             this.setState({
                 isDragging: false,
                 lastPosition: undefined
@@ -451,27 +429,23 @@ class DraggableZone extends React.Component {
                 this.setState({
                     position: this.props.position
                 });
-            } // Remove event handlers
-            this._events.forEach(dispose => dispose());
+            }
+            // Remove event handlers
+            this._events.forEach((dispose) => dispose());
         };
         this.state = {
             isDragging: false,
-            position: this.props.position || {
-                x: 0,
-                y: 0
-            },
+            position: this.props.position || { x: 0, y: 0 },
             lastPosition: undefined
         };
     }
     componentDidUpdate(prevProps) {
         if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {
-            this.setState({
-                position: this.props.position
-            });
+            this.setState({ position: this.props.position });
         }
     }
     componentWillUnmount() {
-        this._events.forEach(dispose => dispose());
+        this._events.forEach((dispose) => dispose());
     }
     render() {
         const child = React.Children.only(this.props.children);
@@ -498,7 +472,8 @@ class DraggableZone extends React.Component {
      * @param event - The event to get offsets from
      */
     _getControlPosition(event) {
-        const touchObj = this._getActiveTouch(event); // did we get the right touch?
+        const touchObj = this._getActiveTouch(event);
+        // did we get the right touch?
         if (this._touchId !== undefined && !touchObj) {
             return undefined;
         }
@@ -513,14 +488,15 @@ class DraggableZone extends React.Component {
      * @param event - The event used to get the TouchList for the active touch point
      */
     _getActiveTouch(event) {
-        return event.targetTouches && this._findTouchInTouchList(event.targetTouches) || event.changedTouches && this._findTouchInTouchList(event.changedTouches);
+        return ((event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||
+            (event.changedTouches && this._findTouchInTouchList(event.changedTouches)));
     }
     /**
      * Get the initial touch identifier associated with the given event
      * @param event - The event that contains the TouchList
      */
     _getTouchId(event) {
-        const touch = event.targetTouches && event.targetTouches[0] || event.changedTouches && event.changedTouches[0];
+        const touch = (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);
         if (touch) {
             return touch.identifier;
         }
@@ -532,9 +508,9 @@ class DraggableZone extends React.Component {
     _matchesSelector(element, selector) {
         if (!element || element === document.body) {
             return false;
-        } // eslint-disable-next-line @typescript-eslint/ban-types
-        const matchesSelectorFn = element.matches || element.webkitMatchesSelector || element.msMatchesSelector;
-        /* for IE */
+        }
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        const matchesSelectorFn = element.matches || element.webkitMatchesSelector || element.msMatchesSelector; /* for IE */
         if (!matchesSelectorFn) {
             return false;
         }
@@ -560,14 +536,12 @@ class DraggableZone extends React.Component {
      * @param position The new position as part of the drag
      */
     _createDragDataFromPosition(position) {
-        const { lastPosition } = this.state; // If we have no lastPosition, use the given position
+        const { lastPosition } = this.state;
+        // If we have no lastPosition, use the given position
         // for last position
         if (lastPosition === undefined) {
             return {
-                delta: {
-                    x: 0,
-                    y: 0
-                },
+                delta: { x: 0, y: 0 },
                 lastPosition: position,
                 position
             };
@@ -609,7 +583,10 @@ const getStyles = (props) => {
     const { palette, effects, fonts } = theme;
     const classNames = getGlobalClassNames(globalClassNames, theme);
     return {
-        root: [classNames.root, fonts.medium, {
+        root: [
+            classNames.root,
+            fonts.medium,
+            {
                 backgroundColor: 'transparent',
                 position: isModeless ? 'absolute' : 'fixed',
                 height: '100%',
@@ -620,13 +597,22 @@ const getStyles = (props) => {
                 opacity: 0,
                 pointerEvents: 'none',
                 transition: `opacity ${animationDuration}`
-            }, topOffsetFixed && typeof modalRectangleTop === 'number' && hasBeenOpened && {
+            },
+            topOffsetFixed &&
+                typeof modalRectangleTop === 'number' &&
+                hasBeenOpened && {
                 alignItems: 'flex-start'
-            }, isOpen && classNames.isOpen, isVisible && {
+            },
+            isOpen && classNames.isOpen,
+            isVisible && {
                 opacity: 1,
                 pointerEvents: 'auto'
-            }, className],
-        main: [classNames.main, {
+            },
+            className
+        ],
+        main: [
+            classNames.main,
+            {
                 boxShadow: effects.elevation64,
                 borderRadius: effects.roundedCorner2,
                 backgroundColor: palette.white,
@@ -640,12 +626,20 @@ const getStyles = (props) => {
                 minWidth: '288px',
                 overflowY: 'auto',
                 zIndex: isModeless ? ZIndexes.Layer : undefined
-            }, topOffsetFixed && typeof modalRectangleTop === 'number' && hasBeenOpened && {
+            },
+            topOffsetFixed &&
+                typeof modalRectangleTop === 'number' &&
+                hasBeenOpened && {
                 top: modalRectangleTop
-            }, isDefaultDragHandle && {
+            },
+            isDefaultDragHandle && {
                 cursor: 'move'
-            }, containerClassName],
-        scrollableContent: [classNames.scrollableContent, {
+            },
+            containerClassName
+        ],
+        scrollableContent: [
+            classNames.scrollableContent,
+            {
                 overflowY: 'auto',
                 flexGrow: 1,
                 maxHeight: '100vh',
@@ -654,12 +648,18 @@ const getStyles = (props) => {
                         maxHeight: windowInnerHeight
                     }
                 }
-            }, scrollableContentClassName],
-        layer: isModeless && [layerClassName, classNames.layer, {
+            },
+            scrollableContentClassName
+        ],
+        layer: isModeless && [
+            layerClassName,
+            classNames.layer,
+            {
                 position: 'static',
                 width: 'unset',
                 height: 'unset'
-            }],
+            }
+        ],
         keyboardMoveIconContainer: {
             position: 'absolute',
             display: 'flex',