@azure/communication-react 1.4.1-beta.1 → 1.4.1

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

@@ -5,13 +5,7 @@ import { DefaultButton, concatStyleSets, KeyCodes } from '@fluentui/react';
 import { controlButtonStyles } from './styles/ControlBar.styles';
 import { ControlButtonTooltip } from './ControlButtonTooltip';
 const DefaultRenderIcon = (props) => {
-    return (props === null || props === void 0 ? void 0 : props.checked)
-        ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon)
-            ? props === null || props === void 0 ? void 0 : props.onRenderOnIcon()
-            : null
-        : (props === null || props === void 0 ? void 0 : props.onRenderOffIcon)
-            ? props === null || props === void 0 ? void 0 : props.onRenderOffIcon()
-            : null;
+    return (props === null || props === void 0 ? void 0 : props.checked) ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon) ? props === null || props === void 0 ? void 0 : props.onRenderOnIcon() : null : (props === null || props === void 0 ? void 0 : props.onRenderOffIcon) ? props === null || props === void 0 ? void 0 : props.onRenderOffIcon() : null;
 };
 /**
  * Default button styled for the {@link ControlBar}.
@@ -24,13 +18,9 @@ export const ControlBarButton = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const componentStyles = concatStyleSets(controlButtonStyles, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     const labelText = (_d = (_b = props === null || props === void 0 ? void 0 : props.text) !== null && _b !== void 0 ? _b : (_c = props === null || props === void 0 ? void 0 : props.strings) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ((props === null || props === void 0 ? void 0 : props.checked) ? (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.onLabel : (_f = props === null || props === void 0 ? void 0 : props.strings) === null || _f === void 0 ? void 0 : _f.offLabel);
-    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled)
-        ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent
-        : (props === null || props === void 0 ? void 0 : props.checked)
-            ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
-            : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
+    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled) ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent : (props === null || props === void 0 ? void 0 : props.checked) ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
-    return (React.createElement(ControlButtonTooltip, { content: tooltipContent, id: tooltipId },
-        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down }), props.showLabel ? labelText : React.createElement(React.Fragment, null))));
+    return React.createElement(ControlButtonTooltip, { content: tooltipContent, id: tooltipId },
+        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down }), props.showLabel ? labelText : React.createElement(React.Fragment, null)));
 };
 //# sourceMappingURL=ControlBarButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport {\n  DefaultButton,\n  IButtonProps,\n  IRenderFunction,\n  concatStyleSets,\n  IButtonStyles,\n  KeyCodes\n} from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\n\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked\n    ? props?.onRenderOnIcon\n      ? props?.onRenderOnIcon()\n      : null\n    : props?.onRenderOffIcon\n    ? props?.onRenderOffIcon()\n    : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n\n  const labelText =\n    props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n\n  const tooltipContent =\n    props?.strings?.tooltipContent ??\n    (props?.disabled\n      ? props?.strings?.tooltipDisabledContent\n      : props?.checked\n      ? props?.strings?.tooltipOnContent\n      : props?.strings?.tooltipOffContent);\n\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n\n  return (\n    <ControlButtonTooltip content={tooltipContent} id={tooltipId}>\n      <DefaultButton\n        {...props}\n        styles={componentStyles}\n        onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined}\n        onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}\n        ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? tooltipContent ?? labelText}\n        allowDisabledFocus={props.allowDisabledFocus ?? true}\n        menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n      >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>\n  );\n};\n"]}
+{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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"}

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

@@ -2,11 +2,14 @@
 // Licensed under the MIT license.
 import React from 'react';
 import { TooltipHost, mergeStyleSets, useTheme } from '@fluentui/react';
-import { isDarkThemed } from '../theming/themeUtils';
-// The TooltipHost root uses display: inline by default.
+import { isDarkThemed } from '../theming/themeUtils'; // The TooltipHost root uses display: inline by default.
 // To prevent sizing issues or tooltip positioning issues, we override to inline-block.
 // For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
-const hostStyles = { root: { display: 'inline-block' } };
+const hostStyles = {
+    root: {
+        display: 'inline-block'
+    }
+};
 /**
  * Tooltip that should wrap control bar buttons.
  *
@@ -14,13 +17,19 @@ const hostStyles = { root: { display: 'inline-block' } };
  */
 export const ControlButtonTooltip = (props) => {
     const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
-    // Place callout with no gap between it and the button.
+    const calloutStyle = {
+        root: {
+            padding: 0
+        },
+        calloutMain: {
+            padding: '0.5rem'
+        }
+    }; // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return (React.createElement(TooltipHost, Object.assign({}, props, { "data-ui-id": props.id, calloutProps: Object.assign(Object.assign({}, calloutProps), props.calloutProps), styles: mergeStyleSets(hostStyles, props.styles) }), props.children));
+    return React.createElement(TooltipHost, Object.assign({}, props, { "data-ui-id": props.id, calloutProps: Object.assign(Object.assign({}, calloutProps), props.calloutProps), styles: mergeStyleSets(hostStyles, props.styles) }), props.children);
 };
 //# sourceMappingURL=ControlButtonTooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EAIX,cAAc,EACd,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,kBACG,KAAK,CAAC,EAAE,EACpB,YAAY,kCAAO,YAAY,GAAK,KAAK,CAAC,YAAY,GACtD,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAE/C,KAAK,CAAC,QAAQ,CACH,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport {\n  TooltipHost,\n  ITooltipHostStyles,\n  ITooltipHostProps,\n  ICalloutContentStyles,\n  mergeStyleSets,\n  useTheme\n} from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n\n/**\n * Tooltip that should wrap control bar buttons.\n *\n * @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost\n      {...props}\n      data-ui-id={props.id}\n      calloutProps={{ ...calloutProps, ...props.calloutProps }}\n      styles={mergeStyleSets(hostStyles, props.styles)}\n    >\n      {props.children}\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAgE,cAAc,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtI,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC,CAAC,wDAAwD;AAC9G,uFAAuF;AACvF,yHAAyH;AAEzH,MAAM,UAAU,GAAgC;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;KACxB;CACF,CAAC;AACF;;;;GAIG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC,CAAC,uDAAuD;IAE1D,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,oBAAK,KAAK,kBAAc,KAAK,CAAC,EAAE,EAAE,YAAY,kCAAO,YAAY,GAC/E,KAAK,CAAC,YAAY,GACpB,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAC9C,KAAK,CAAC,QAAQ,CACH,CAAC;AACnB,CAAC,CAAC"}

package/dist/dist-esm/react-components/src/components/{DevicePermissions/DevicePermissionDropdown.d.ts → DevicePermissionDropdown.d.ts}

@@ -40,10 +40,6 @@ export interface _DevicePermissionDropdownProps {
      * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }
      */
     askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;
-    /**
-     * Optional callback when component is clicked
-     */
-    onClick?: () => void;
     /**
      * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }
      */

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

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Dropdown, Stack, Text } from '@fluentui/react';
+import React from 'react';
+/**
+ * A dropdown to trigger device permission prompt
+ *
+ * @internal
+ */
+export const _DevicePermissionDropdown = (props) => {
+    const { icon, askDevicePermission, constrain, strings, options, styles } = props;
+    const onRenderPlaceholder = () => {
+        return React.createElement(Stack, { horizontal: true, verticalAlign: "center" },
+            icon,
+            React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText));
+    };
+    const onRenderCaretDown = () => {
+        return React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent);
+    };
+    return React.createElement(Dropdown, { placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
+            if (askDevicePermission) {
+                askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : {
+                    video: true,
+                    audio: true
+                });
+            }
+        }, options: options !== null && options !== void 0 ? options : [], styles: styles });
+};
+//# sourceMappingURL=DevicePermissionDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,MAAM,OAAO,CAAC;AA+D1B;;;;GAIG;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,IAAI,EACJ,mBAAmB,EACnB,SAAS,EACT,OAAO,EACP,OAAO,EACP,MAAM,EACP,GAAG,KAAK,CAAC;IAEV,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;YAC1C,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CACjC,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO,oBAAC,QAAQ,IAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE;YAC3K,IAAI,mBAAmB,EAAE;gBACvB,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI;oBAC/B,KAAK,EAAE,IAAI;oBACX,KAAK,EAAE,IAAI;iBACZ,CAAC,CAAC;aACJ;QACH,CAAC,EAAE,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAChD,CAAC,CAAC"}

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

@@ -39,11 +39,18 @@ export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowe
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.cameraMenuTitle,
-                items: cameras.map((camera) => ({
+                items: cameras.map(camera => ({
                     key: camera.id,
                     text: camera.name,
                     title: camera.name,
-                    iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },
+                    iconProps: {
+                        iconName: 'OptionsCamera',
+                        styles: {
+                            root: {
+                                lineHeight: 0
+                            }
+                        }
+                    },
                     itemProps: {
                         styles: menuItemStyles
                     },
@@ -71,11 +78,18 @@ export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowe
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: sectionPropsTitle,
-                items: microphones.map((microphone) => ({
+                items: microphones.map(microphone => ({
                     key: microphone.id,
                     text: microphone.name,
                     title: microphone.name,
-                    iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },
+                    iconProps: {
+                        iconName: iconName,
+                        styles: {
+                            root: {
+                                lineHeight: 0
+                            }
+                        }
+                    },
                     itemProps: {
                         styles: menuItemStyles
                     },
@@ -97,11 +111,18 @@ export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowe
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.speakerMenuTitle,
-                items: speakers.map((speaker) => ({
+                items: speakers.map(speaker => ({
                     key: speaker.id,
                     text: speaker.name,
                     title: speaker.name,
-                    iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },
+                    iconProps: {
+                        iconName: 'OptionsSpeaker',
+                        styles: {
+                            root: {
+                                lineHeight: 0
+                            }
+                        }
+                    },
                     itemProps: {
                         styles: menuItemStyles
                     },
@@ -138,6 +159,8 @@ export const DevicesButton = (props) => {
     const onRenderOptionsIcon = () => {
         return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonOptions" });
     };
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: devicesButtonMenu, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderOptionsIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'devicesButtonLabel' })));
+    return React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: devicesButtonMenu, menuIconProps: {
+            hidden: true
+        }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderOptionsIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'devicesButtonLabel' }));
 };
 //# sourceMappingURL=DevicesButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'sectionCamera',\n      title: strings.cameraMenuTooltip,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: cameras.map((camera) => ({\n          key: camera.id,\n          text: camera.name,\n          title: camera.name,\n          iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: camera.id === selectedCamera?.id,\n          onClick: () => {\n            if (camera.id !== selectedCamera?.id) {\n              onSelectCamera(camera);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n    const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;\n    const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';\n\n    defaultMenuProps.items.push({\n      key: key,\n      title: title,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: sectionPropsTitle,\n        items: microphones.map((microphone) => ({\n          key: microphone.id,\n          text: microphone.name,\n          title: microphone.name,\n          iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: microphone.id === selectedMicrophone?.id,\n          onClick: () => {\n            if (microphone.id !== selectedMicrophone?.id) {\n              onSelectMicrophone(microphone);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'sectionSpeaker',\n      title: strings.speakerMenuTooltip,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: speakers.map((speaker) => ({\n          key: speaker.id,\n          text: speaker.name,\n          title: speaker.name,\n          iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: speaker.id === selectedSpeaker?.id,\n          onClick: () => {\n            if (speaker.id !== selectedSpeaker?.id) {\n              onSelectSpeaker(speaker);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,3 @@
-// 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) {
@@ -9,43 +7,50 @@ 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, { useEffect, useCallback } from 'react';
 import { IconButton } from '@fluentui/react';
 import { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, TextField, useTheme } from '@fluentui/react';
 import { useState } from 'react';
-/* @conditional-compile-remove(dialpad) */
-import { useLocale } from '../../localization';
 import { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';
 import { formatPhoneNumber } from '../utils/formatPhoneNumber';
 import useLongPress from '../utils/useLongPress';
-const dialPadButtonsDefault = [
-    [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],
-    [
-        { digit: '4', letter: 'GHI' },
-        { digit: '5', letter: 'JKL' },
-        { digit: '6', letter: 'MNO' }
-    ],
-    [
-        { digit: '7', letter: 'PQRS' },
-        { digit: '8', letter: 'TUV' },
-        { digit: '9', letter: 'WXYZ' }
-    ],
-    [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]
-];
-const DtmfTones = [
-    'Num1',
-    'Num2',
-    'Num3',
-    'Num4',
-    'Num5',
-    'Num6',
-    'Num7',
-    'Num8',
-    'Num9',
-    'Star',
-    'Num0',
-    'Pound'
-];
+const dialPadButtonsDefault = [[{
+            digit: '1'
+        }, {
+            digit: '2',
+            letter: 'ABC'
+        }, {
+            digit: '3',
+            letter: 'DEF'
+        }], [{
+            digit: '4',
+            letter: 'GHI'
+        }, {
+            digit: '5',
+            letter: 'JKL'
+        }, {
+            digit: '6',
+            letter: 'MNO'
+        }], [{
+            digit: '7',
+            letter: 'PQRS'
+        }, {
+            digit: '8',
+            letter: 'TUV'
+        }, {
+            digit: '9',
+            letter: 'WXYZ'
+        }], [{
+            digit: '*'
+        }, {
+            digit: '0',
+            letter: '+'
+        }, {
+            digit: '#'
+        }]];
+const DtmfTones = ['Num1', 'Num2', 'Num3', 'Num4', 'Num5', 'Num6', 'Num7', 'Num8', 'Num9', 'Star', 'Num0', 'Pound'];
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
@@ -57,10 +62,10 @@ const DialpadButton = (props) => {
         onLongPress(digit, index);
     }), [digit, index, onLongPress]);
     const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);
-    return (React.createElement(DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: concatStyleSets(buttonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, handlers),
+    return React.createElement(DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: concatStyleSets(buttonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, handlers),
         React.createElement(Stack, null,
             React.createElement(Text, { className: mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
-            React.createElement(Text, { className: mergeStyles(letterStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.letter) }, (_d = props.letter) !== null && _d !== void 0 ? _d : ' '))));
+            React.createElement(Text, { className: mergeStyles(letterStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.letter) }, (_d = props.letter) !== null && _d !== void 0 ? _d : ' ')));
 };
 const DialpadContainer = (props) => {
     var _a, _b;
@@ -97,8 +102,7 @@ const DialpadContainer = (props) => {
         if (onClickDialpadButton) {
             onClickDialpadButton(input, index);
         }
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const setText = (input) => {
         // remove non-valid characters from input: letters,special characters excluding +, *,#
         const plainInput = sanitizeInput(input);
@@ -108,17 +112,17 @@ const DialpadContainer = (props) => {
         const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);
         setText(modifiedInput);
     };
-    return (React.createElement("div", { className: mergeStyles(containerStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer" },
-        React.createElement(TextField, { styles: concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue), 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onChange: (e) => {
+    return React.createElement("div", { className: mergeStyles(containerStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer" },
+        React.createElement(TextField, { styles: concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue), onChange: (e) => {
                 setText(e.target.value);
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
-                return (React.createElement(React.Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React.createElement(IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
+                return React.createElement(React.Fragment, null, showDeleteButton && plainTextValue.length !== 0 && React.createElement(IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: {
+                        iconName: 'BackSpace'
+                    } }));
             } }),
         React.createElement(FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
-            return (React.createElement(Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch" }, rows.map((button, columnIndex) => (React.createElement(DialpadButton, { key: `button_${columnIndex}`, 
+            return React.createElement(Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch" }, rows.map((button, columnIndex) => React.createElement(DialpadButton, { key: `button_${columnIndex}`, 
                 /* row index = 0
                 columnIndex: (0,1,2) => (0,1,2)
                 row index = 1
@@ -136,8 +140,8 @@ const DialpadContainer = (props) => {
                 then use this index to locate the corresponding dtmf tones
                 DtmfTones[index]
                 */
-                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile })))));
-        }))));
+                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile })));
+        })));
 };
 /**
  * A component to allow users to enter phone number through clicking on dialpad/using keyboard
@@ -146,11 +150,7 @@ const DialpadContainer = (props) => {
  * @beta
  */
 export const Dialpad = (props) => {
-    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const localeStrings = useLocale().strings.dialpad;
     const dialpadLocaleStringsTrampoline = () => {
-        /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-        return localeStrings;
         // Even though the component strings type doesn't have `DialpadStrings` in stable build,
         // the string values exist. So unsafe cast for stable build.
         return '';

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

@@ -1 +1 @@
-{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useCallback } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n  concatStyleSets,\n  DefaultButton,\n  FocusZone,\n  mergeStyles,\n  Stack,\n  Text,\n  TextField,\n  useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n  buttonStyles,\n  containerStyles,\n  iconButtonStyles,\n  digitStyles,\n  letterStyles,\n  textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n  root?: IStyle;\n  button?: IButtonStyles;\n  textField?: Partial<ITextFieldStyles>;\n  digit?: IStyle;\n  letter?: IStyle;\n  deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n  | 'A'\n  | 'B'\n  | 'C'\n  | 'D'\n  | 'Flash'\n  | 'Num0'\n  | 'Num1'\n  | 'Num2'\n  | 'Num3'\n  | 'Num4'\n  | 'Num5'\n  | 'Num6'\n  | 'Num7'\n  | 'Num8'\n  | 'Num9'\n  | 'Pound'\n  | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**  function to send dtmf tones on button click */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior*/\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** set dialpad textfield content */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text*/\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  isMobile?: boolean;\n  styles?: DialpadStyles;\n}\n\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: string;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n  [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n  [\n    { digit: '4', letter: 'GHI' },\n    { digit: '5', letter: 'JKL' },\n    { digit: '6', letter: 'MNO' }\n  ],\n  [\n    { digit: '7', letter: 'PQRS' },\n    { digit: '8', letter: 'TUV' },\n    { digit: '9', letter: 'WXYZ' }\n  ],\n  [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n  'Num1',\n  'Num2',\n  'Num3',\n  'Num4',\n  'Num5',\n  'Num6',\n  'Num7',\n  'Num8',\n  'Num9',\n  'Star',\n  'Num0',\n  'Pound'\n];\n\nconst DialpadButton = (props: {\n  digit: string;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n  isMobile?: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const { digit, index, onClick, onLongPress, isMobile = false } = props;\n\n  const clickFunction = useCallback(async () => {\n    onClick(digit, index);\n  }, [digit, index, onClick]);\n\n  const longPressFunction = useCallback(async () => {\n    onLongPress(digit, index);\n  }, [digit, index, onLongPress]);\n\n  const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);\n  return (\n    <DefaultButton\n      data-test-id={`dialpad-button-${props.index}`}\n      styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n      {...handlers}\n    >\n      <Stack>\n        <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n        <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n      </Stack>\n    </DefaultButton>\n  );\n};\n\nconst DialpadContainer = (props: {\n  strings: DialpadStrings;\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** Pass in custom content to dialpad textfield */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text */\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  isMobile?: boolean;\n  styles?: DialpadStyles;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const {\n    onSendDtmfTone,\n    onClickDialpadButton,\n    textFieldValue,\n    onChange,\n    showDeleteButton = true,\n    isMobile = false\n  } = props;\n\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(plainTextValue);\n    }\n  }, [plainTextValue, onChange]);\n\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\n\n  const onClickDialpad = (input: string, index: number): void => {\n    setText(plainTextValue + input);\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  const onLongPressDialpad = (input: string, index: number): void => {\n    if (input === '0' && index === 10) {\n      setText(plainTextValue + '+');\n    } else {\n      setText(plainTextValue + input);\n    }\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setText = (input: string): void => {\n    // remove non-valid characters from input: letters,special characters excluding +, *,#\n    const plainInput = sanitizeInput(input);\n    setPlainTextValue(plainInput);\n  };\n\n  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n\n  return (\n    <div\n      className={mergeStyles(containerStyles(theme), props.styles?.root)}\n      data-test-id=\"dialpadContainer\"\n      data-ui-id=\"dialpadContainer\"\n    >\n      <TextField\n        styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n        value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        onChange={(e: any) => {\n          setText(e.target.value);\n        }}\n        placeholder={props.strings.placeholderText}\n        data-test-id=\"dialpad-input\"\n        onRenderSuffix={(): JSX.Element => (\n          <>\n            {showDeleteButton && plainTextValue.length !== 0 && (\n              <IconButton\n                ariaLabel={props.strings.deleteButtonAriaLabel}\n                onClick={deleteNumbers}\n                styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n                iconProps={{ iconName: 'DialpadBackspace' }}\n              />\n            )}\n          </>\n        )}\n      />\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n          return (\n            <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n              {rows.map((button, columnIndex) => (\n                <DialpadButton\n                  key={`button_${columnIndex}`}\n                  /* row index = 0\n                  columnIndex: (0,1,2) => (0,1,2)\n                  row index = 1\n                  columnIndex: (0,1,2)=> (3,4,5)\n                  row index = 2\n                  columnIndex: (0,1,2)=> (6,7,8)\n                  row index = 3\n                  columnIndex: (0,1,2)=> (9,10,11)\n                  columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n                  dialpad index:\n                  0 1 2\n                  3 4 5\n                  6 7 8\n                  9 10 11\n                  then use this index to locate the corresponding dtmf tones\n                  DtmfTones[index]\n                  */\n                  index={columnIndex + rowIndex * rows.length}\n                  digit={button.digit}\n                  letter={button.letter}\n                  styles={props.styles}\n                  onClick={onClickDialpad}\n                  onLongPress={onLongPressDialpad}\n                  isMobile={isMobile}\n                />\n              ))}\n            </Stack>\n          );\n        })}\n      </FocusZone>\n    </div>\n  );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  const localeStrings = useLocale().strings.dialpad;\n\n  const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n    return localeStrings;\n    // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n    // the string values exist. So unsafe cast for stable build.\n    return '' as unknown as DialpadStrings;\n  };\n  const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n  return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerContentContainer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerContentContainer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAU,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAGtC,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC;IAClD,MAAM,UAAU,GAAG,WAAW,CAAC,eAAe,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC;IAEnG,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU,IAAG,KAAK,CAAC,QAAQ,CAAS,CAAC;AAChE,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,eAAuB,EAAE,YAAoB,EAAU,EAAE,CAAC,iBACjF,UAAU,EAAE,eAAe,EAE3B,oBAAoB,EAAE,YAAY,EAClC,mBAAmB,EAAE,YAAY,IAE9B,eAAe,CAAC,WAAW,EAC9B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { AnimationStyles, IStyle, mergeStyles, Stack, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * Container that holds the content of the drawer\n *\n * @private\n */\nexport const DrawerContentContainer = (props: {\n  children: React.ReactNode;\n  styles?: BaseCustomStyles;\n}): JSX.Element => {\n  const theme = useTheme();\n  const backgroundColor = theme.palette.white;\n  const borderRadius = theme.effects.roundedCorner4;\n  const rootStyles = mergeStyles(containerStyles(backgroundColor, borderRadius), props.styles?.root);\n\n  return <Stack className={rootStyles}>{props.children}</Stack>;\n};\n\nconst containerStyles = (backgroundColor: string, borderRadius: string): IStyle => ({\n  background: backgroundColor,\n\n  borderTopRightRadius: borderRadius,\n  borderTopLeftRadius: borderRadius,\n\n  ...AnimationStyles.slideUpIn10\n});\n"]}
+{"version":3,"file":"DrawerContentContainer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerContentContainer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAU,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AAEH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAGtC,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC;IAClD,MAAM,UAAU,GAAG,WAAW,CAAC,eAAe,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC;IACnG,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU,IAAG,KAAK,CAAC,QAAQ,CAAS,CAAC;AAChE,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,eAAuB,EAAE,YAAoB,EAAU,EAAE,CAAC,iBACjF,UAAU,EAAE,eAAe,EAC3B,oBAAoB,EAAE,YAAY,EAClC,mBAAmB,EAAE,YAAY,IAC9B,eAAe,CAAC,WAAW,EAC9B,CAAC"}

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

@@ -9,7 +9,11 @@ import React from 'react';
  * @private
  */
 export const DrawerLightDismiss = (props) => {
-    return (React.createElement(Stack, { className: mergeStyles(lightDismissContainerStyles, props.styles), grow: true, onClick: () => props.onDismiss() }));
+    return React.createElement(Stack, { className: mergeStyles(lightDismissContainerStyles, props.styles), grow: true, onClick: () => props.onDismiss() });
+};
+const lightDismissContainerStyles = {
+    root: {
+        height: '100%'
+    }
 };
-const lightDismissContainerStyles = { root: { height: '100%' } };
 //# sourceMappingURL=DrawerLightDismiss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerLightDismiss.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerLightDismiss.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA2D,EAAe,EAAE;IAC7G,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,2BAA2B,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,GAAI,CACpH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAiB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * An element that fills the space the DrawerContentContainer does not take up.\n * This is the element that enables the light dismiss feature.\n *\n * @private\n */\nexport const DrawerLightDismiss = (props: { onDismiss: () => void; styles?: BaseCustomStyles }): JSX.Element => {\n  return (\n    <Stack className={mergeStyles(lightDismissContainerStyles, props.styles)} grow onClick={() => props.onDismiss()} />\n  );\n};\n\nconst lightDismissContainerStyles: IStackStyles = { root: { height: '100%' } };\n"]}
+{"version":3,"file":"DrawerLightDismiss.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerLightDismiss.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAgB,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAGlC,EAAe,EAAE;IAChB,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,2BAA2B,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,GAAI,CAAC;AAC7H,CAAC,CAAC;AACF,MAAM,2BAA2B,GAAiB;IAChD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC"}

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

@@ -15,17 +15,15 @@ export const _DrawerMenu = (props) => {
     // This component breaks from a pure component pattern in order to internally support sub menus.
     // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.
     // To track this state we store a list of the keys clicked up until this point.
-    const [selectedKeyPath, setSelectedKeyPath] = useState([]);
-    // Get the menu items that should be rendered
+    const [selectedKeyPath, setSelectedKeyPath] = useState([]); // Get the menu items that should be rendered
     const menuItemsToRender = useMemo(() => {
         var _a;
         let items = props.items;
         for (const subMenuKey of selectedKeyPath) {
-            items = (_a = items === null || items === void 0 ? void 0 : items.find((item) => item.itemKey === subMenuKey)) === null || _a === void 0 ? void 0 : _a.subMenuProps;
+            items = (_a = items === null || items === void 0 ? void 0 : items.find(item => item.itemKey === subMenuKey)) === null || _a === void 0 ? void 0 : _a.subMenuProps;
         }
         return items;
-    }, [props.items, selectedKeyPath]);
-    // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure
+    }, [props.items, selectedKeyPath]); // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure
     // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.
     const onItemClick = useCallback((item, ev, itemKey) => {
         var _a;
@@ -33,8 +31,7 @@ export const _DrawerMenu = (props) => {
             setSelectedKeyPath([...selectedKeyPath, item.itemKey]);
         }
         (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, ev, itemKey);
-    }, [selectedKeyPath]);
-    // Ensure the first item has a border radius that matches the DrawerSurface
+    }, [selectedKeyPath]); // Ensure the first item has a border radius that matches the DrawerSurface
     const borderRadius = useTheme().effects.roundedCorner4;
     const firstItemStyle = menuItemsToRender && ((_a = menuItemsToRender[0]) === null || _a === void 0 ? void 0 : _a.styles);
     const modifiedFirstItemStyle = useMemo(() => merge(firstItemStyle !== null && firstItemStyle !== void 0 ? firstItemStyle : {}, {
@@ -43,13 +40,13 @@ 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 },
+    return React.createElement(_DrawerSurface, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss },
         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) => {
+            menuItemsToRender.slice(0, 1).map(item => React.createElement(DrawerMenuItem, Object.assign({}, item, { key: '0', styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);
-                } })))), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
-            menuItemsToRender.slice(1).map((item, i) => (React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${i + 1}`, onItemClick: (ev, itemKey) => {
+                } }))), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
+            menuItemsToRender.slice(1).map((item, i) => React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${i + 1}`, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);
-                } })))))));
+                } })))));
 };
 //# sourceMappingURL=DrawerMenu.js.map