@azure/communication-react 1.28.0-alpha-202506120019 → 1.28.0-beta.2

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

@@ -1,12 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* eslint-disable react/prop-types */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 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';
 const animationDuration = AnimationVariables.durationValue2;
-const ZERO = { x: 0, y: 0 };
+const ZERO = {
+    x: 0,
+    y: 0
+};
 const DEFAULT_PROPS = {
     isOpen: false,
     isDarkOverlay: true,
@@ -53,7 +59,7 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
     const [modalRectangleTop, setModalRectangleTop] = React.useState();
     const [isModalMenuOpen, { setTrue: setModalMenuOpen, setFalse: setModalMenuClose }] = useBoolean(false);
     const [_, forceUpdate] = React.useState(0);
-    const forceUpdateCallback = React.useCallback(() => forceUpdate((prev) => prev + 1), []);
+    const forceUpdateCallback = React.useCallback(() => forceUpdate(prev => prev + 1), []);
     const internalState = useConst(() => ({
         onModalCloseTimer: 0,
         allowTouchBodyScroll,
@@ -105,8 +111,14 @@ 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 };
+                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),
@@ -143,8 +155,10 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
         setModalMenuClose();
         internalState.isInKeyboardMoveMode = false;
     }, [internalState, setModalMenuClose]);
-    const handleDrag = React.useCallback((ev, dragData) => {
-        setCoordinates((prevValue) => ({
+    const handleDrag = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (ev, dragData) => {
+        setCoordinates(prevValue => ({
             x: getClampedAxis('x', prevValue.x + dragData.delta.x),
             y: getClampedAxis('y', prevValue.y + dragData.delta.y)
         }));
@@ -182,32 +196,50 @@ 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();
@@ -276,24 +308,28 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
         internalState.events.dispose();
     });
     useComponentRef(props, focusTrapZone);
-    const modalContent = (React.createElement(FocusTrapZone, Object.assign({ 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, "data-ui-id": dataUiId }, ((_a = props.focusTrapZoneProps) !== null && _a !== void 0 ? _a : {})),
-        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, Object.assign({ 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, "data-ui-id": dataUiId }, (_a = props.focusTrapZoneProps) !== null && _a !== void 0 ? _a : {}),
+        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)));
+            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),
+    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) => {
@@ -364,9 +400,7 @@ class DraggableZone extends React.Component {
             }
             // 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
@@ -385,10 +419,7 @@ class DraggableZone extends React.Component {
             });
             // 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) => {
@@ -430,21 +461,26 @@ class DraggableZone extends React.Component {
                 });
             }
             // Remove event handlers
-            this._events.forEach((dispose) => dispose());
+            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);
@@ -487,15 +523,14 @@ 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;
         }
@@ -508,7 +543,7 @@ class DraggableZone extends React.Component {
         if (!element || element === document.body) {
             return false;
         }
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+        // eslint-disable-next-line @typescript-eslint/ban-types
         const matchesSelectorFn = element.matches || element.webkitMatchesSelector || element.msMatchesSelector; /* for IE */
         if (!matchesSelectorFn) {
             return false;
@@ -541,7 +576,10 @@ class DraggableZone extends React.Component {
         // for last position
         if (lastPosition === undefined) {
             return {
-                delta: { x: 0, y: 0 },
+                delta: {
+                    x: 0,
+                    y: 0
+                },
                 lastPosition: position,
                 position
             };
@@ -583,10 +621,7 @@ 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%',
@@ -597,22 +632,13 @@ 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,
@@ -626,20 +652,12 @@ 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',
@@ -648,18 +666,12 @@ 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',