@azure/communication-react 1.5.1-alpha-202305250013 → 1.5.1-alpha-202305270013

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.js

@@ -43,7 +43,7 @@ export const _DrawerMenu = (props) => {
             borderTopLeftRadius: borderRadius
         }
     }), [firstItemStyle, borderRadius]);
-    return (React.createElement(_DrawerSurface, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
+    return (React.createElement(_DrawerSurface, { disableMaxHeight: props.disableMaxHeight, styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
         React.createElement(Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
             menuItemsToRender.slice(0, 1).map((item) => (React.createElement(DrawerMenuItem, Object.assign({}, item, { key: '0', styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer menu\n   */\n  heading?: string;\n\n  styles?: _DrawerMenuStyles;\n}\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find((item) => item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback(\n    (\n      item: _DrawerMenuItemProps,\n      ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined,\n      itemKey?: string | undefined\n    ): void => {\n      if (item.subMenuProps) {\n        setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n      }\n\n      item.onItemClick?.(ev, itemKey);\n    },\n    [selectedKeyPath]\n  );\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(\n    () =>\n      merge(firstItemStyle ?? {}, {\n        root: {\n          borderTopRightRadius: borderRadius,\n          borderTopLeftRadius: borderRadius\n        }\n      }),\n    [firstItemStyle, borderRadius]\n  );\n\n  return (\n    <_DrawerSurface\n      styles={props.styles?.drawerSurfaceStyles}\n      onLightDismiss={props.onLightDismiss}\n      heading={props.heading}\n    >\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map((item) => (\n          <DrawerMenuItem\n            {...item}\n            key={'0'}\n            styles={modifiedFirstItemStyle}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n        {menuItemsToRender?.slice(1).map((item, i) => (\n          <DrawerMenuItem\n            {...item}\n            key={`${i + 1}`}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n      </Stack>\n    </_DrawerSurface>\n  );\n};\n"]}
+{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer menu\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n\n  styles?: _DrawerMenuStyles;\n}\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find((item) => item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback(\n    (\n      item: _DrawerMenuItemProps,\n      ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined,\n      itemKey?: string | undefined\n    ): void => {\n      if (item.subMenuProps) {\n        setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n      }\n\n      item.onItemClick?.(ev, itemKey);\n    },\n    [selectedKeyPath]\n  );\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(\n    () =>\n      merge(firstItemStyle ?? {}, {\n        root: {\n          borderTopRightRadius: borderRadius,\n          borderTopLeftRadius: borderRadius\n        }\n      }),\n    [firstItemStyle, borderRadius]\n  );\n\n  return (\n    <_DrawerSurface\n      disableMaxHeight={props.disableMaxHeight}\n      styles={props.styles?.drawerSurfaceStyles}\n      onLightDismiss={props.onLightDismiss}\n      heading={props.heading}\n    >\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map((item) => (\n          <DrawerMenuItem\n            {...item}\n            key={'0'}\n            styles={modifiedFirstItemStyle}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n        {menuItemsToRender?.slice(1).map((item, i) => (\n          <DrawerMenuItem\n            {...item}\n            key={`${i + 1}`}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n      </Stack>\n    </_DrawerSurface>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/Drawer/DrawerSurface.d.ts

@@ -29,6 +29,11 @@ export interface _DrawerSurfaceProps {
      * String to show in heading of drawer surface
      */
     heading?: string;
+    /**
+     * By default, maxHeight value is set to 75%.
+     * Set value to true for no default maxHeight to be applied on drawerSurface
+     */
+    disableMaxHeight?: boolean;
     /** Styles for the {@link DrawerSurface} */
     styles?: _DrawerSurfaceStyles;
 }

package/dist/dist-esm/react-components/src/components/Drawer/DrawerSurface.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { FocusTrapZone, mergeStyles, Stack } from '@fluentui/react';
+import { FocusTrapZone, mergeStyles, mergeStyleSets, Stack } from '@fluentui/react';
 import React from 'react';
 import { DrawerContentContainer } from './DrawerContentContainer';
 import { DrawerLightDismiss } from './DrawerLightDismiss';
@@ -11,10 +11,13 @@ import { DrawerLightDismiss } from './DrawerLightDismiss';
  * @internal
  */
 export const _DrawerSurface = (props) => {
-    var _a, _b, _c;
-    const rootStyles = mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
+    var _a, _b, _c, _d;
+    const rootStyles = props.disableMaxHeight
+        ? mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root)
+        : mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root);
+    const containerStyles = mergeStyleSets(drawerContentContainerStyles, (_c = props.styles) === null || _c === void 0 ? void 0 : _c.drawerContentContainer);
     return (React.createElement(Stack, { className: rootStyles },
-        React.createElement(DrawerLightDismiss, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.lightDismissRoot, onDismiss: props.onLightDismiss }),
+        React.createElement(DrawerLightDismiss, { styles: (_d = props.styles) === null || _d === void 0 ? void 0 : _d.lightDismissRoot, onDismiss: props.onLightDismiss }),
         React.createElement(FocusTrapZone, { onKeyDown: (e) => {
                 if (e.key === 'Escape' || e.key === 'Esc') {
                     props.onLightDismiss && props.onLightDismiss();
@@ -23,11 +26,26 @@ export const _DrawerSurface = (props) => {
             // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
             // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
             isClickableOutsideFocusTrap: true },
-            React.createElement(DrawerContentContainer, { styles: (_c = props.styles) === null || _c === void 0 ? void 0 : _c.drawerContentContainer, heading: props.heading }, props.children))));
+            React.createElement(DrawerContentContainer, { styles: containerStyles, heading: props.heading }, props.children))));
 };
 const drawerSurfaceStyles = {
     width: '100%',
     height: '100%',
     background: 'rgba(0,0,0,0.4)'
 };
+const focusTrapZoneStyles = {
+    // Targets FocusTrapZone in drawer.
+    // Setting percentage to Height to transform a container does not work unless the
+    // direct parent container also has a Height set other than 'auto'.
+    '> div:nth-child(2)': {
+        maxHeight: '75%',
+        overflow: 'auto'
+    }
+};
+const drawerContentContainerStyles = {
+    root: {
+        // Needed to fill max height from parent, drawerSurfaceStyles
+        height: '100%'
+    }
+};
 //# sourceMappingURL=DrawerSurface.js.map

package/dist/dist-esm/react-components/src/components/Drawer/DrawerSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerSurface.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerSurface.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAuC1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,UAAU,GAAG,WAAW,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU;QAC1B,oBAAC,kBAAkB,IAAC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;QAC/F,oBAAC,aAAa,IACZ,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;oBACzC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;iBAChD;YACH,CAAC;YACD,2GAA2G;YAC3G,8GAA8G;YAC9G,2BAA2B,EAAE,IAAI;YAEjC,oBAAC,sBAAsB,IAAC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,sBAAsB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACzF,KAAK,CAAC,QAAQ,CACQ,CACX,CACV,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,iBAAiB;CAC9B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { FocusTrapZone, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerContentContainer } from './DrawerContentContainer';\nimport { DrawerLightDismiss } from './DrawerLightDismiss';\n\n/**\n * Styles for the {@link _DrawerSurface}.\n *\n * @internal\n */\nexport interface _DrawerSurfaceStyles extends BaseCustomStyles {\n  /** Styles for the root of the container of the {@link DrawerSurface} content. */\n  drawerContentRoot?: BaseCustomStyles;\n  /** Styles for the container of the {@link DrawerSurface} content. */\n  drawerContentContainer?: BaseCustomStyles;\n  /** Styles for the light dismiss element of the {@link DrawerSurface}. */\n  lightDismissRoot?: BaseCustomStyles;\n}\n\n/**\n * Props for {@link DrawerSurface} component.\n *\n * @internal\n */\nexport interface _DrawerSurfaceProps {\n  /** Content of the Drawer */\n  children: React.ReactNode;\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer surface\n   */\n  heading?: string;\n\n  /** Styles for the {@link DrawerSurface} */\n  styles?: _DrawerSurfaceStyles;\n}\n\n/**\n * A `Drawer` can be used to reveal lightweight views inside your application.\n * They appear from the bottom of the screen upwards and are light-dismissed.\n *\n * @internal\n */\nexport const _DrawerSurface = (props: _DrawerSurfaceProps): JSX.Element => {\n  const rootStyles = mergeStyles(drawerSurfaceStyles, props.styles?.root);\n\n  return (\n    <Stack className={rootStyles}>\n      <DrawerLightDismiss styles={props.styles?.lightDismissRoot} onDismiss={props.onLightDismiss} />\n      <FocusTrapZone\n        onKeyDown={(e) => {\n          if (e.key === 'Escape' || e.key === 'Esc') {\n            props.onLightDismiss && props.onLightDismiss();\n          }\n        }}\n        // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.\n        // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.\n        isClickableOutsideFocusTrap={true}\n      >\n        <DrawerContentContainer styles={props.styles?.drawerContentContainer} heading={props.heading}>\n          {props.children}\n        </DrawerContentContainer>\n      </FocusTrapZone>\n    </Stack>\n  );\n};\n\nconst drawerSurfaceStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  background: 'rgba(0,0,0,0.4)'\n};\n"]}
+{"version":3,"file":"DrawerSurface.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerSurface.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAU,WAAW,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC5F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA6C1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB;QACvC,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACtD,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,cAAc,CAAC,4BAA4B,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,sBAAsB,CAAC,CAAC;IAE3G,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU;QAC1B,oBAAC,kBAAkB,IAAC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;QAC/F,oBAAC,aAAa,IACZ,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;oBACzC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;iBAChD;YACH,CAAC;YACD,2GAA2G;YAC3G,8GAA8G;YAC9G,2BAA2B,EAAE,IAAI;YAEjC,oBAAC,sBAAsB,IAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACpE,KAAK,CAAC,QAAQ,CACQ,CACX,CACV,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,iBAAiB;CAC9B,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,mCAAmC;IACnC,iFAAiF;IACjF,mEAAmE;IACnE,oBAAoB,EAAE;QACpB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,4BAA4B,GAAqB;IACrD,IAAI,EAAE;QACJ,6DAA6D;QAC7D,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { FocusTrapZone, IStyle, mergeStyles, mergeStyleSets, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerContentContainer } from './DrawerContentContainer';\nimport { DrawerLightDismiss } from './DrawerLightDismiss';\n\n/**\n * Styles for the {@link _DrawerSurface}.\n *\n * @internal\n */\nexport interface _DrawerSurfaceStyles extends BaseCustomStyles {\n  /** Styles for the root of the container of the {@link DrawerSurface} content. */\n  drawerContentRoot?: BaseCustomStyles;\n  /** Styles for the container of the {@link DrawerSurface} content. */\n  drawerContentContainer?: BaseCustomStyles;\n  /** Styles for the light dismiss element of the {@link DrawerSurface}. */\n  lightDismissRoot?: BaseCustomStyles;\n}\n\n/**\n * Props for {@link DrawerSurface} component.\n *\n * @internal\n */\nexport interface _DrawerSurfaceProps {\n  /** Content of the Drawer */\n  children: React.ReactNode;\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer surface\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n\n  /** Styles for the {@link DrawerSurface} */\n  styles?: _DrawerSurfaceStyles;\n}\n\n/**\n * A `Drawer` can be used to reveal lightweight views inside your application.\n * They appear from the bottom of the screen upwards and are light-dismissed.\n *\n * @internal\n */\nexport const _DrawerSurface = (props: _DrawerSurfaceProps): JSX.Element => {\n  const rootStyles = props.disableMaxHeight\n    ? mergeStyles(drawerSurfaceStyles, props.styles?.root)\n    : mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, props.styles?.root);\n  const containerStyles = mergeStyleSets(drawerContentContainerStyles, props.styles?.drawerContentContainer);\n\n  return (\n    <Stack className={rootStyles}>\n      <DrawerLightDismiss styles={props.styles?.lightDismissRoot} onDismiss={props.onLightDismiss} />\n      <FocusTrapZone\n        onKeyDown={(e) => {\n          if (e.key === 'Escape' || e.key === 'Esc') {\n            props.onLightDismiss && props.onLightDismiss();\n          }\n        }}\n        // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.\n        // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.\n        isClickableOutsideFocusTrap={true}\n      >\n        <DrawerContentContainer styles={containerStyles} heading={props.heading}>\n          {props.children}\n        </DrawerContentContainer>\n      </FocusTrapZone>\n    </Stack>\n  );\n};\n\nconst drawerSurfaceStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  background: 'rgba(0,0,0,0.4)'\n};\n\nconst focusTrapZoneStyles: IStyle = {\n  // Targets FocusTrapZone in drawer.\n  // Setting percentage to Height to transform a container does not work unless the\n  // direct parent container also has a Height set other than 'auto'.\n  '> div:nth-child(2)': {\n    maxHeight: '75%',\n    overflow: 'auto'\n  }\n};\n\nconst drawerContentContainerStyles: BaseCustomStyles = {\n  root: {\n    // Needed to fill max height from parent, drawerSurfaceStyles\n    height: '100%'\n  }\n};\n"]}

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

@@ -56,9 +56,17 @@ export const InputBoxComponent = (props) => {
     // Index of the previous selection end in the text field
     const [selectionEndValue, setSelectionEndValue] = useState(null);
     /* @conditional-compile-remove(mention) */
-    // Boolean value to check if onMouseDown event should be handled during select as selection range for onMouseDown event is not updated yet and the selection range for mouse click/taps will be updated in onSelect event if needed.
+    // Boolean value to check if onMouseDown event should be handled during select as selection range
+    // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be
+    // updated in onSelect event if needed.
     const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = useState(true);
     /* @conditional-compile-remove(mention) */
+    // Point of start of touch/mouse selection
+    const [interactionStartPoint, setInteractionStartPoint] = useState();
+    /* @conditional-compile-remove(mention) */
+    // Target selection from mouse movement
+    const [targetSelection, setTargetSelection] = useState();
+    /* @conditional-compile-remove(mention) */
     // Caret position in the text field
     const [caretPosition, setCaretPosition] = useState(undefined);
     /* @conditional-compile-remove(mention) */
@@ -227,10 +235,6 @@ export const InputBoxComponent = (props) => {
     /* @conditional-compile-remove(mention) */
     const debouncedQueryUpdate = useDebouncedCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (query === undefined) {
-            updateMentionSuggestions([]);
-            return;
-        }
         const suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
         if (suggestions.length === 0) {
             setActiveSuggestionIndex(undefined);
@@ -320,33 +324,54 @@ export const InputBoxComponent = (props) => {
     }, [setSelectionStartValue, setSelectionEndValue]);
     /* @conditional-compile-remove(mention) */
     const handleOnSelect = useCallback((event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue) => {
-        var _a, _b, _c;
-        /* @conditional-compile-remove(mention) */
-        if (shouldHandleOnMouseDownDuringSelect && event.currentTarget.selectionStart !== null) {
-            // on select was triggered by mouse down
-            const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
-            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                // handle mention click
-                if (event.currentTarget.selectionDirection === null) {
-                    event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex);
+        if (shouldHandleOnMouseDownDuringSelect) {
+            if (targetSelection !== undefined) {
+                setSelectionStartValue(targetSelection.start);
+                setSelectionEndValue(targetSelection.end);
+                event.currentTarget.setSelectionRange(targetSelection.start, targetSelection.end);
+                setTargetSelection(undefined);
+            }
+            else if (event.currentTarget.selectionStart !== null) {
+                // on select was triggered by mouse down/up with no movement
+                const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
+                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                    // handle mention click
+                    // Get range of word that was clicked on
+                    const selectionRange = rangeOfWordInSelection({
+                        textInput: inputTextValue,
+                        selectionStart: event.currentTarget.selectionStart,
+                        selectionEnd: event.currentTarget.selectionEnd,
+                        tag: mentionTag
+                    });
+                    if (event.currentTarget.selectionDirection === null) {
+                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end);
+                    }
+                    else {
+                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end, event.currentTarget.selectionDirection);
+                    }
+                    setSelectionStartValue(selectionRange.start);
+                    setSelectionEndValue(selectionRange.end);
                 }
                 else {
-                    event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex, event.currentTarget.selectionDirection);
+                    setSelectionStartValue(event.currentTarget.selectionStart);
+                    setSelectionEndValue(event.currentTarget.selectionEnd);
                 }
-                setSelectionStartValue(mentionTag.plainTextBeginIndex);
-                setSelectionEndValue((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex);
-            }
-            else {
-                setSelectionStartValue(event.currentTarget.selectionStart);
-                setSelectionEndValue(event.currentTarget.selectionEnd);
             }
         }
         else {
             // selection was changed by keyboard
             updateSelectionIndexesWithMentionIfNeeded(event, inputTextValue, selectionStartValue, selectionEndValue, tags);
         }
-        // don't set setShouldHandleOnMouseDownDuringSelect(false) here as setSelectionRange could trigger additional calls of onSelect event and they may not be handled correctly (because of setSelectionRange calls or rerender)
-    }, [updateSelectionIndexesWithMentionIfNeeded]);
+        // don't set setShouldHandleOnMouseDownDuringSelect(false) here as setSelectionRange
+        // could trigger additional calls of onSelect event and they may not be handled correctly
+        // (because of setSelectionRange calls or rerender)
+    }, [
+        updateSelectionIndexesWithMentionIfNeeded,
+        targetSelection,
+        setTargetSelection,
+        setSelectionStartValue,
+        setSelectionEndValue
+    ]);
     /* @conditional-compile-remove(mention) */
     const handleOnChange = useCallback((event, tagsValue, htmlTextValue, inputTextValue, currentTriggerStartIndex, previousSelectionStart, previousSelectionEnd, currentSelectionStart, currentSelectionEnd, updatedValue) => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
@@ -405,7 +430,7 @@ export const InputBoxComponent = (props) => {
                     setCurrentTriggerStartIndex(tagIndex);
                 }
                 if (tagIndex === -1) {
-                    yield debouncedQueryUpdate(undefined);
+                    updateMentionSuggestions([]);
                 }
                 else {
                     // In the middle of a @mention lookup
@@ -455,12 +480,44 @@ export const InputBoxComponent = (props) => {
             }
         }
         onChange && onChange(event, result);
-    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, debouncedQueryUpdate]);
+    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
     const getInputFieldTextValue = () => {
         /* @conditional-compile-remove(mention) */
         return inputTextValue;
         return textValue;
     };
+    /* @conditional-compile-remove(mention) */
+    // Adjust the selection range based on a mouse / touch interaction
+    const handleOnMove = useCallback((event) => {
+        var _a;
+        let targetStart = event.currentTarget.selectionStart;
+        let targetEnd = event.currentTarget.selectionEnd;
+        // Should we do anything?
+        if (interactionStartPoint !== undefined &&
+            // And did selection change?
+            targetStart !== null &&
+            (targetStart !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.start) || targetEnd !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.end))) {
+            const direction = event.clientX > interactionStartPoint.x ? 'forward' : 'backward';
+            const mentionTag = findMentionTagForSelection(tagsValue, direction === 'backward'
+                ? event.currentTarget.selectionStart
+                : (_a = event.currentTarget.selectionEnd) !== null && _a !== void 0 ? _a : event.currentTarget.selectionStart);
+            let updateCurrentTarget = false;
+            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                targetStart = Math.min(mentionTag.plainTextBeginIndex, targetStart);
+                if (mentionTag.plainTextEndIndex !== undefined && targetEnd !== null) {
+                    targetEnd = Math.max(mentionTag.plainTextEndIndex, targetEnd);
+                }
+                updateCurrentTarget = true;
+                setShouldHandleOnMouseDownDuringSelect(false);
+            }
+            // Update selection range
+            setTargetSelection({ start: targetStart, end: targetEnd });
+            if (updateCurrentTarget) {
+                // Only set the control, if the values are updated
+                event.currentTarget.setSelectionRange(targetStart, targetEnd, direction);
+            }
+        }
+    }, [setTargetSelection, targetSelection, setShouldHandleOnMouseDownDuringSelect, interactionStartPoint, tagsValue]);
     return (React.createElement(Stack, { className: mergedRootStyle },
         React.createElement("div", { className: mergedTextContainerStyle },
             /* @conditional-compile-remove(mention) */ mentionSuggestions.length > 0 && (React.createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
@@ -493,8 +550,9 @@ export const InputBoxComponent = (props) => {
                     handleOnSelect(e, inputTextValue, tagsValue, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue);
                 }, 
                 /* @conditional-compile-remove(mention) */
-                onMouseDown: () => {
-                    // as events order is onMouseDown -> onSelect -> onClick
+                onMouseDown: (e) => {
+                    setInteractionStartPoint({ x: e.clientX, y: e.clientY });
+                    // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick
                     // onClick and onMouseDown can't handle clicking on mention event because
                     // onMouseDown doesn't have correct selectionRange yet and
                     // onClick already has wrong range as it's called after onSelect that updates the selection range
@@ -502,11 +560,27 @@ export const InputBoxComponent = (props) => {
                     setShouldHandleOnMouseDownDuringSelect(true);
                 }, 
                 /* @conditional-compile-remove(mention) */
-                onTouchStart: () => {
+                onMouseMove: handleOnMove, 
+                /* @conditional-compile-remove(mention) */
+                onMouseUp: () => {
+                    setInteractionStartPoint(undefined);
+                }, 
+                /* @conditional-compile-remove(mention) */
+                onTouchStart: (e) => {
+                    setInteractionStartPoint({
+                        x: e.targetTouches.item(0).clientX,
+                        y: e.targetTouches.item(0).clientY
+                    });
                     // see onMouseDown for more details
                     setShouldHandleOnMouseDownDuringSelect(true);
                 }, 
                 /* @conditional-compile-remove(mention) */
+                onTouchMove: handleOnMove, 
+                /* @conditional-compile-remove(mention) */
+                onTouchEnd: () => {
+                    setInteractionStartPoint(undefined);
+                }, 
+                /* @conditional-compile-remove(mention) */
                 onBlur: () => {
                     // setup all flags to default values when text field loses focus
                     setShouldHandleOnMouseDownDuringSelect(false);
@@ -592,6 +666,31 @@ const findMentionTagForSelection = (tags, selection) => {
     return mentionTag;
 };
 /* @conditional-compile-remove(mention) */
+const rangeOfWordInSelection = ({ textInput, selectionStart, selectionEnd, tag }) => {
+    var _a;
+    if (tag.plainTextBeginIndex === undefined) {
+        return { start: selectionStart, end: selectionEnd === null ? selectionStart : selectionEnd };
+    }
+    // Look at start word index and optionally end word index.
+    // Select combination of the two and return the range.
+    let start = selectionStart;
+    let end = selectionEnd === null ? selectionStart : selectionEnd;
+    const firstWordStartIndex = textInput.lastIndexOf(' ', selectionStart);
+    if (firstWordStartIndex === tag.plainTextBeginIndex) {
+        start = firstWordStartIndex;
+    }
+    else {
+        start = Math.max(firstWordStartIndex + 1, tag.plainTextBeginIndex);
+    }
+    const firstWordEndIndex = textInput.indexOf(' ', selectionStart);
+    end = Math.max(firstWordEndIndex + 1, (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : firstWordEndIndex + 1);
+    if (selectionEnd !== null && tag.plainTextEndIndex !== undefined) {
+        const lastWordEndIndex = textInput.indexOf(' ', selectionEnd);
+        end = Math.max(lastWordEndIndex > -1 ? lastWordEndIndex : tag.plainTextEndIndex, selectionEnd);
+    }
+    return { start, end };
+};
+/* @conditional-compile-remove(mention) */
 /**
  * Find a new the selection index.
  *