@pnp/spfx-controls-react 3.8.0-beta.2213602 → 3.8.0-beta.2213661

package/release/webpack-stats/sp-dev-fx-controls-react.stats.json

@@ -2,9 +2,9 @@
   "errors": [],
   "warnings": [],
   "version": "4.44.2",
-  "hash": "e800db6018ef4207b104",
-  "time": 18068,
-  "builtAt": 1650751133669,
+  "hash": "60032c1b7a14da65581b",
+  "time": 17804,
+  "builtAt": 1650752774873,
   "publicPath": "",
   "outputPath": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/dist",
   "assetsByChunkName": {
@@ -292,7 +292,7 @@
     },
     {
       "name": "controls-test-web-part.js",
-      "size": 17715504,
+      "size": 17715452,
       "chunks": [
         "controls-test-web-part"
       ],
@@ -305,7 +305,7 @@
     },
     {
       "name": "controls-test-web-part.js.map",
-      "size": 15964979,
+      "size": 15964859,
       "chunks": [
         "controls-test-web-part"
       ],
@@ -404,7 +404,7 @@
       "rendered": true,
       "initial": true,
       "entry": true,
-      "size": 12793136,
+      "size": 12793084,
       "names": [
         "controls-test-web-part"
       ],
@@ -412,7 +412,7 @@
         "controls-test-web-part.js",
         "controls-test-web-part.js.map"
       ],
-      "hash": "95ab291e06fb9bda24d5",
+      "hash": "ba3d37889558c9989103",
       "siblings": [],
       "parents": [],
       "children": [],
@@ -57944,9 +57944,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-embedded/es/index.js",
-          "issuerId": "SI3Q",
-          "issuerName": "./node_modules/fela-plugin-embedded/es/index.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-placeholder-prefixer/es/index.js",
+          "issuerId": "fFg5",
+          "issuerName": "./node_modules/fela-plugin-placeholder-prefixer/es/index.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -57984,9 +57984,9 @@
               "name": "./node_modules/@fluentui/react-northstar-fela-renderer/dist/es/createFelaRenderer.js"
             },
             {
-              "id": "SI3Q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-embedded/es/index.js",
-              "name": "./node_modules/fela-plugin-embedded/es/index.js"
+              "id": "fFg5",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-placeholder-prefixer/es/index.js",
+              "name": "./node_modules/fela-plugin-placeholder-prefixer/es/index.js"
             }
           ],
           "failed": false,
@@ -60538,9 +60538,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
-          "issuerId": "neCt",
-          "issuerName": "./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "issuerId": "bO7i",
+          "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -60593,24 +60593,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "OcOZ",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-              "name": "./node_modules/@popperjs/core/lib/popper.js"
-            },
-            {
-              "id": "HWy5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
-            },
-            {
-              "id": "thf+",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
-              "name": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js"
-            },
-            {
-              "id": "neCt",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
-              "name": "./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             }
           ],
           "failed": false,
@@ -76799,11 +76784,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -99832,7 +99812,7 @@
           "name": "./lib/controls/richText/RichTextPropertyPane.js",
           "index": 2796,
           "index2": 2799,
-          "size": 26032,
+          "size": 25980,
           "cacheable": true,
           "built": true,
           "optional": false,
@@ -99899,7 +99879,7 @@
           ],
           "optimizationBailout": [],
           "depth": 5,
-          "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport * as strings from 'ControlStrings';\nimport styles from './RichTextPropertyPane.module.scss';\nimport RteColorPicker from './RteColorPicker';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';\nimport { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';\nimport { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';\nimport { ThemeColorHelper } from '../../common/utilities/ThemeColorHelper';\nvar RichTextPropertyPane = /** @class */ (function (_super) {\n    __extends(RichTextPropertyPane, _super);\n    function RichTextPropertyPane(props) {\n        var _this = _super.call(this, props) || this;\n        /**\n         * On selection changed event handler\n         */\n        _this.onChangeSelection = function (range, oldRange, source) {\n            var quill = _this.props.editor;\n            if (quill === undefined || range === undefined) {\n                return;\n            }\n            if (range) {\n                var formats = quill.getFormat(range);\n                _this.setState({\n                    formats: formats\n                });\n            }\n        };\n        /**\n         * Render the actions group\n         */\n        _this.renderActionsGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.UndoTitle, id: \"undo-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleUndo, className: styles.propertyPaneButton, \"aria-describedby\": \"undo-propertyPaneButton\", iconProps: {\n                                    iconName: 'Undo',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.RedoTitle, id: \"redo-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleRedo, className: styles.propertyPaneButton, \"aria-describedby\": \"redo-propertyPaneButton\", iconProps: {\n                                    iconName: 'Redo',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ClearFormattingTitle, id: \"clearFormatting-button-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleClearFormatting, className: styles.propertyPaneButton, \"aria-describedby\": \"clearFormatting-button-propertyPaneButton\", iconProps: {\n                                    iconName: 'ClearFormatting',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render font styles group\n         */\n        _this.renderFontStylesGroup = function () {\n            var selectedHeader = _this.state.formats.header ? _this.state.formats.header : 0;\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(Dropdown, { label: strings.FontStyleTitle, ariaLabel: strings.FontStyleTitle, defaultSelectedKey: 0, selectedKey: selectedHeader, options: [\n                        { key: 0, text: strings.HeaderNormalText },\n                        { key: 2, text: strings.HeaderH2 },\n                        { key: 3, text: strings.HeaderH3 },\n                        { key: 4, text: strings.HeaderH4 },\n                        { key: 7, text: strings.HeaderBlockQuote }\n                    ], onChanged: _this.onChangeHeading })));\n        };\n        /**\n         * Render font size group\n         */\n        _this.renderFontSizesGroup = function () {\n            // get the selected header\n            var selectedSize = _this.state.formats.size ? _this.state.formats.size : 'large';\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(Dropdown, { label: strings.FontSizeTitle, ariaLabel: strings.FontSizeTitle, defaultSelectedKey: 'large', selectedKey: selectedSize, options: [\n                        { key: 'small', text: '12' },\n                        { key: 'medium', text: '14' },\n                        { key: 'mediumplus', text: '15' },\n                        { key: 'large', text: '17' },\n                        { key: 'xlarge', text: '21' },\n                        { key: 'xlargeplus', text: '24' },\n                        { key: 'xxlarge', text: '28' },\n                        { key: 'xxxlarge', text: '32' },\n                        { key: 'xxlargeplus', text: '36' },\n                        { key: 'super', text: '42' },\n                    ], onChanged: _this.onChangeSize })));\n        };\n        /**\n         * Render inline styles group\n         */\n        _this.renderInlineStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.BoldTitle, id: \"bold-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.bold, onClick: function () { return _this.applyFormat('bold', !_this.state.formats.bold); }, className: styles.propertyPaneButton, \"aria-describedby\": \"bold-propertyPaneButton\", iconProps: {\n                                    iconName: 'Bold',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ItalicTitle, id: \"italic-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.italic, onClick: function () { return _this.applyFormat('italic', !_this.state.formats.italic); }, className: styles.propertyPaneButton, \"aria-describedby\": \"italic-propertyPaneButton\", iconProps: {\n                                    iconName: 'Italic',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.UnderlineTitle, id: \"underline-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.underline, onClick: function () { return _this.applyFormat('underline', !_this.state.formats.underline); }, className: styles.propertyPaneButton, \"aria-describedby\": \"underline-propertyPaneButton\", iconProps: {\n                                    iconName: 'Underline',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.StrikethroughTitle, id: \"strikethrough-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.strike, onClick: function () { return _this.applyFormat('strike', !_this.state.formats.strike); }, className: styles.propertyPaneButton, \"aria-describedby\": \"strikethrough-propertyPaneButton\", iconProps: {\n                                    iconName: 'Strikethrough',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.SuperscriptTitle, id: \"superscript-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.script === 'super', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'super' ? '' : 'super'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"superscript-propertyPaneButton\", iconProps: {\n                                    iconName: 'Superscript',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.SubscriptTitle, id: \"subscript-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.script === 'sub', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'sub' ? '' : 'sub'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"subscript-propertyPaneButton\", iconProps: {\n                                    iconName: 'Subscript',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render color styles group\n         */\n        _this.renderColorStylesGroup = function () {\n            var color = _this.state.formats.color || ThemeColorHelper.GetThemeColor(styles.NeutralPrimary);\n            var backgroundColor = _this.state.formats.background || \"rgba(0, 0, 0, 0)\";\n            /**\n             * Add custom colors if passed as a property\n             */\n            var fontColorGroups = [\"themeColors\", \"standardColors\"];\n            if (_this.props.customColors)\n                fontColorGroups.push('customColors');\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(RteColorPicker, { colorPickerGroups: fontColorGroups, customColors: _this.props.customColors, buttonLabel: strings.FontColorLabel, id: \"fontColor-propertyPaneButton\", defaultButtonLabel: strings.AutomaticFontColor, fillThemeColor: true, previewColor: color, selectedColor: color, onColorChanged: _this.handleFillColorChanged, switchToDefaultColor: function () { return _this.handleFillColorChanged(undefined); } }),\n                        React.createElement(RteColorPicker, { buttonLabel: strings.HighlightColorLabel, colorPickerGroups: [\n                                \"highlightColors\"\n                            ], fillThemeColor: false, onColorChanged: _this.handleHighlightColorChanged, switchToDefaultColor: function () { return _this.handleHighlightColorChanged(undefined); }, previewColor: backgroundColor, defaultButtonLabel: strings.NoColorHighlightColor, selectedColor: backgroundColor, id: \"highlightColor-propertyPaneButton\" })))));\n        };\n        /**\n         * Render alignment style groups\n         */\n        _this.renderAlignmentStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.AlignLeft, id: \"left-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === undefined, onClick: function () { return _this.applyFormat('align', undefined); }, className: styles.propertyPaneButton, \"aria-describedby\": \"left-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignLeft',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignCenter, id: \"center-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'center', onClick: function () { return _this.applyFormat('align', 'center'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"center-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignCenter',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignRight, id: \"right-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'right', onClick: function () { return _this.applyFormat('align', 'right'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"right-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignRight',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignJustify, id: \"justify-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'justify', onClick: function () { return _this.applyFormat('align', 'justify'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"justify-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignJustify',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.IncreaseIndentTitle, id: \"increaseindent-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: function () { return _this.onChangeIndent(1); }, className: styles.propertyPaneButton, \"aria-describedby\": \"increaseindent-propertyPaneButton\", iconProps: {\n                                    iconName: 'IncreaseIndentLegacy',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.DecreaseIndentTitle, id: \"decreaseindent-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: function () { return _this.onChangeIndent(-1); }, className: styles.propertyPaneButton, \"aria-describedby\": \"decreaseindent-propertyPaneButton\", iconProps: {\n                                    iconName: 'DecreaseIndentLegacy',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render list styles group\n         */\n        _this.renderListStylesGroup = function () {\n            return React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.ListBullet, id: \"bullet-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.list === 'bullet', onClick: function () { return _this.applyFormat('list', 'bullet'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"bullet-propertyPaneButton\", iconProps: {\n                                    iconName: 'BulletedList',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ListNumbered, id: \"ordered-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.list === 'ordered', onClick: function () { return _this.applyFormat('list', 'ordered'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"ordered-propertyPaneButton\", iconProps: {\n                                    iconName: 'NumberedList',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })))));\n        };\n        /**\n         * Render hyperlink styles group\n         */\n        _this.renderHyperlinkStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.LinkTitle, id: \"link-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.link !== undefined, onClick: function () { return _this.props.onLink(); }, className: styles.propertyPaneButton, \"aria-describedby\": \"link-propertyPaneButton\", iconProps: {\n                                    iconName: 'Link',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.RemoveLinkLabel, id: \"unlink-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { disabled: _this.state.formats.link === undefined, onClick: function () { return _this.applyFormat('link', false); }, className: styles.propertyPaneButton, \"aria-describedby\": \"unlink-propertyPaneButton\", iconProps: {\n                                    iconName: 'RemoveLink',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Handle fill color change\n         */\n        _this.handleFillColorChanged = function (color) {\n            _this.applyFormat('color', color);\n        };\n        /**\n         * Handle the hightlight color change\n         */\n        _this.handleHighlightColorChanged = function (color) {\n            _this.applyFormat('background', color);\n        };\n        /**\n         * On heading change\n         */\n        _this.onChangeHeading = function (item) {\n            var newHeadingValue = item.key === 0 ? '' : item.key.toString();\n            _this.applyFormat(\"header\", newHeadingValue);\n        };\n        /**\n         * On indentation change.\n         */\n        _this.onChangeIndent = function (direction) {\n            var quill = _this.props.editor;\n            var current = +(quill.getFormat(quill.getSelection()).indent || 0);\n            _this.applyFormat(\"indent\", current + direction);\n        };\n        /**\n         * On size change\n         */\n        _this.onChangeSize = function (item) {\n            var newSizeValue = item.key === 0 ? '' : item.key.toString();\n            _this.applyFormat(\"size\", newSizeValue);\n        };\n        /**\n         * Handle the undo action\n         */\n        _this.handleUndo = function () {\n            var quill = _this.props.editor;\n            quill.getModule(\"history\").undo();\n            setTimeout(function () {\n                _this.onChangeSelection(quill.getSelection());\n            }, 100);\n        };\n        /**\n         * Handle the clear formatting action\n         */\n        _this.handleClearFormatting = function () {\n            var quill = _this.props.editor;\n            var range = quill.getSelection();\n            if (range) {\n                if (range.length > 0) {\n                    quill.removeFormat(range.index, range.length);\n                    setTimeout(function () {\n                        _this.onChangeSelection(quill.getSelection());\n                    }, 100);\n                }\n            }\n        };\n        /**\n         * Handle the redo action\n         */\n        _this.handleRedo = function () {\n            var quill = _this.props.editor;\n            quill.getModule(\"history\").redo();\n            setTimeout(function () {\n                _this.onChangeSelection(quill.getSelection());\n            }, 100);\n        };\n        /**\n         * Navigation render\n         */\n        _this.handleRenderNavigation = function () {\n            return (React.createElement(\"div\", { className: styles.formattingPaneTitle, \"aria-hidden\": \"true\" },\n                strings.FormattingPaneTitle,\n                React.createElement(IconButton, { onClick: function () { return _this.props.onClose(); }, className: styles.propertyPaneClose, iconProps: {\n                        iconName: 'Cancel'\n                    }, title: strings.CloseButton, ariaLabel: strings.CloseButton })));\n        };\n        _this.state = {\n            formats: {}\n        };\n        return _this;\n    }\n    /**\n     * componentDidUpdate lifecycle hook\n     *\n     * @param prevProps\n     * @param prevState\n     */\n    RichTextPropertyPane.prototype.componentDidUpdate = function (prevProps, prevState) {\n        // if we're just opening, sync the format choices with the current selection\n        if (!prevProps.isOpen && this.props.isOpen) {\n            var quill = this.props.editor;\n            if (quill === undefined) {\n                return;\n            }\n            var range = quill.getSelection();\n            this.onChangeSelection(range, undefined, undefined);\n        }\n    };\n    /**\n     * Default React render method\n     */\n    RichTextPropertyPane.prototype.render = function () {\n        return (React.createElement(Panel, { className: styles.richTextPropertyPane, isBlocking: false, isOpen: this.props.isOpen, type: PanelType.smallFixedFar, onDismiss: this.props.onClose, closeButtonAriaLabel: strings.CloseButton, onRenderNavigation: this.handleRenderNavigation, focusTrapZoneProps: {\n                forceFocusInsideTrap: false,\n                isClickableOutsideFocusTrap: true\n            } },\n            React.createElement(\"div\", null,\n                React.createElement(\"div\", null,\n                    React.createElement(\"div\", null,\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                            this.renderActionsGroup(),\n                            this.renderFontStylesGroup(),\n                            this.renderFontSizesGroup(),\n                            this.renderInlineStylesGroup(),\n                            this.renderColorStylesGroup())),\n                    React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupHeaderNoAccordion }, strings.ParagraphSectionTitle),\n                        this.renderAlignmentStylesGroup(),\n                        this.renderListStylesGroup()),\n                    React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupHeaderNoAccordion }, strings.HyperlinkSectionTitle),\n                        this.renderHyperlinkStylesGroup())))));\n    };\n    /**\n     * Apply the new format\n     *\n     * @param name\n     * @param value\n     */\n    RichTextPropertyPane.prototype.applyFormat = function (name, value) {\n        var _this = this;\n        var quill = this.props.editor;\n        quill.format(name, value);\n        setTimeout(function () {\n            _this.onChangeSelection(quill.getSelection());\n        }, 100);\n    };\n    return RichTextPropertyPane;\n}(React.Component));\nexport default RichTextPropertyPane;\n"
+          "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport * as strings from 'ControlStrings';\nimport styles from './RichTextPropertyPane.module.scss';\nimport RteColorPicker from './RteColorPicker';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';\nimport { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';\nimport { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';\nimport { ThemeColorHelper } from '../../common/utilities/ThemeColorHelper';\nvar RichTextPropertyPane = /** @class */ (function (_super) {\n    __extends(RichTextPropertyPane, _super);\n    function RichTextPropertyPane(props) {\n        var _this = _super.call(this, props) || this;\n        /**\n         * On selection changed event handler\n         */\n        _this.onChangeSelection = function (range, oldRange, source) {\n            var quill = _this.props.editor;\n            if (quill === undefined || range === undefined) {\n                return;\n            }\n            if (range) {\n                var formats = quill.getFormat(range);\n                _this.setState({\n                    formats: formats\n                });\n            }\n        };\n        /**\n         * Render the actions group\n         */\n        _this.renderActionsGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.UndoTitle, id: \"undo-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleUndo, className: styles.propertyPaneButton, \"aria-describedby\": \"undo-propertyPaneButton\", iconProps: {\n                                    iconName: 'Undo',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.RedoTitle, id: \"redo-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleRedo, className: styles.propertyPaneButton, \"aria-describedby\": \"redo-propertyPaneButton\", iconProps: {\n                                    iconName: 'Redo',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ClearFormattingTitle, id: \"clearFormatting-button-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleClearFormatting, className: styles.propertyPaneButton, \"aria-describedby\": \"clearFormatting-button-propertyPaneButton\", iconProps: {\n                                    iconName: 'ClearFormatting',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render font styles group\n         */\n        _this.renderFontStylesGroup = function () {\n            var selectedHeader = _this.state.formats.header ? _this.state.formats.header : 0;\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(Dropdown, { label: strings.FontStyleTitle, ariaLabel: strings.FontStyleTitle, selectedKey: selectedHeader, options: [\n                        { key: 0, text: strings.HeaderNormalText },\n                        { key: 2, text: strings.HeaderH2 },\n                        { key: 3, text: strings.HeaderH3 },\n                        { key: 4, text: strings.HeaderH4 },\n                        { key: 7, text: strings.HeaderBlockQuote }\n                    ], onChanged: _this.onChangeHeading })));\n        };\n        /**\n         * Render font size group\n         */\n        _this.renderFontSizesGroup = function () {\n            // get the selected header\n            var selectedSize = _this.state.formats.size ? _this.state.formats.size : 'large';\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(Dropdown, { label: strings.FontSizeTitle, ariaLabel: strings.FontSizeTitle, selectedKey: selectedSize, options: [\n                        { key: 'small', text: '12' },\n                        { key: 'medium', text: '14' },\n                        { key: 'mediumplus', text: '15' },\n                        { key: 'large', text: '17' },\n                        { key: 'xlarge', text: '21' },\n                        { key: 'xlargeplus', text: '24' },\n                        { key: 'xxlarge', text: '28' },\n                        { key: 'xxxlarge', text: '32' },\n                        { key: 'xxlargeplus', text: '36' },\n                        { key: 'super', text: '42' },\n                    ], onChanged: _this.onChangeSize })));\n        };\n        /**\n         * Render inline styles group\n         */\n        _this.renderInlineStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.BoldTitle, id: \"bold-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.bold, onClick: function () { return _this.applyFormat('bold', !_this.state.formats.bold); }, className: styles.propertyPaneButton, \"aria-describedby\": \"bold-propertyPaneButton\", iconProps: {\n                                    iconName: 'Bold',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ItalicTitle, id: \"italic-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.italic, onClick: function () { return _this.applyFormat('italic', !_this.state.formats.italic); }, className: styles.propertyPaneButton, \"aria-describedby\": \"italic-propertyPaneButton\", iconProps: {\n                                    iconName: 'Italic',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.UnderlineTitle, id: \"underline-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.underline, onClick: function () { return _this.applyFormat('underline', !_this.state.formats.underline); }, className: styles.propertyPaneButton, \"aria-describedby\": \"underline-propertyPaneButton\", iconProps: {\n                                    iconName: 'Underline',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.StrikethroughTitle, id: \"strikethrough-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.strike, onClick: function () { return _this.applyFormat('strike', !_this.state.formats.strike); }, className: styles.propertyPaneButton, \"aria-describedby\": \"strikethrough-propertyPaneButton\", iconProps: {\n                                    iconName: 'Strikethrough',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.SuperscriptTitle, id: \"superscript-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.script === 'super', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'super' ? '' : 'super'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"superscript-propertyPaneButton\", iconProps: {\n                                    iconName: 'Superscript',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.SubscriptTitle, id: \"subscript-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.script === 'sub', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'sub' ? '' : 'sub'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"subscript-propertyPaneButton\", iconProps: {\n                                    iconName: 'Subscript',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render color styles group\n         */\n        _this.renderColorStylesGroup = function () {\n            var color = _this.state.formats.color || ThemeColorHelper.GetThemeColor(styles.NeutralPrimary);\n            var backgroundColor = _this.state.formats.background || \"rgba(0, 0, 0, 0)\";\n            /**\n             * Add custom colors if passed as a property\n             */\n            var fontColorGroups = [\"themeColors\", \"standardColors\"];\n            if (_this.props.customColors)\n                fontColorGroups.push('customColors');\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(RteColorPicker, { colorPickerGroups: fontColorGroups, customColors: _this.props.customColors, buttonLabel: strings.FontColorLabel, id: \"fontColor-propertyPaneButton\", defaultButtonLabel: strings.AutomaticFontColor, fillThemeColor: true, previewColor: color, selectedColor: color, onColorChanged: _this.handleFillColorChanged, switchToDefaultColor: function () { return _this.handleFillColorChanged(undefined); } }),\n                        React.createElement(RteColorPicker, { buttonLabel: strings.HighlightColorLabel, colorPickerGroups: [\n                                \"highlightColors\"\n                            ], fillThemeColor: false, onColorChanged: _this.handleHighlightColorChanged, switchToDefaultColor: function () { return _this.handleHighlightColorChanged(undefined); }, previewColor: backgroundColor, defaultButtonLabel: strings.NoColorHighlightColor, selectedColor: backgroundColor, id: \"highlightColor-propertyPaneButton\" })))));\n        };\n        /**\n         * Render alignment style groups\n         */\n        _this.renderAlignmentStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.AlignLeft, id: \"left-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === undefined, onClick: function () { return _this.applyFormat('align', undefined); }, className: styles.propertyPaneButton, \"aria-describedby\": \"left-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignLeft',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignCenter, id: \"center-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'center', onClick: function () { return _this.applyFormat('align', 'center'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"center-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignCenter',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignRight, id: \"right-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'right', onClick: function () { return _this.applyFormat('align', 'right'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"right-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignRight',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignJustify, id: \"justify-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'justify', onClick: function () { return _this.applyFormat('align', 'justify'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"justify-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignJustify',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.IncreaseIndentTitle, id: \"increaseindent-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: function () { return _this.onChangeIndent(1); }, className: styles.propertyPaneButton, \"aria-describedby\": \"increaseindent-propertyPaneButton\", iconProps: {\n                                    iconName: 'IncreaseIndentLegacy',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.DecreaseIndentTitle, id: \"decreaseindent-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: function () { return _this.onChangeIndent(-1); }, className: styles.propertyPaneButton, \"aria-describedby\": \"decreaseindent-propertyPaneButton\", iconProps: {\n                                    iconName: 'DecreaseIndentLegacy',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render list styles group\n         */\n        _this.renderListStylesGroup = function () {\n            return React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.ListBullet, id: \"bullet-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.list === 'bullet', onClick: function () { return _this.applyFormat('list', 'bullet'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"bullet-propertyPaneButton\", iconProps: {\n                                    iconName: 'BulletedList',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ListNumbered, id: \"ordered-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.list === 'ordered', onClick: function () { return _this.applyFormat('list', 'ordered'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"ordered-propertyPaneButton\", iconProps: {\n                                    iconName: 'NumberedList',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })))));\n        };\n        /**\n         * Render hyperlink styles group\n         */\n        _this.renderHyperlinkStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.LinkTitle, id: \"link-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.link !== undefined, onClick: function () { return _this.props.onLink(); }, className: styles.propertyPaneButton, \"aria-describedby\": \"link-propertyPaneButton\", iconProps: {\n                                    iconName: 'Link',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.RemoveLinkLabel, id: \"unlink-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { disabled: _this.state.formats.link === undefined, onClick: function () { return _this.applyFormat('link', false); }, className: styles.propertyPaneButton, \"aria-describedby\": \"unlink-propertyPaneButton\", iconProps: {\n                                    iconName: 'RemoveLink',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Handle fill color change\n         */\n        _this.handleFillColorChanged = function (color) {\n            _this.applyFormat('color', color);\n        };\n        /**\n         * Handle the hightlight color change\n         */\n        _this.handleHighlightColorChanged = function (color) {\n            _this.applyFormat('background', color);\n        };\n        /**\n         * On heading change\n         */\n        _this.onChangeHeading = function (item) {\n            var newHeadingValue = item.key === 0 ? '' : item.key.toString();\n            _this.applyFormat(\"header\", newHeadingValue);\n        };\n        /**\n         * On indentation change.\n         */\n        _this.onChangeIndent = function (direction) {\n            var quill = _this.props.editor;\n            var current = +(quill.getFormat(quill.getSelection()).indent || 0);\n            _this.applyFormat(\"indent\", current + direction);\n        };\n        /**\n         * On size change\n         */\n        _this.onChangeSize = function (item) {\n            var newSizeValue = item.key === 0 ? '' : item.key.toString();\n            _this.applyFormat(\"size\", newSizeValue);\n        };\n        /**\n         * Handle the undo action\n         */\n        _this.handleUndo = function () {\n            var quill = _this.props.editor;\n            quill.getModule(\"history\").undo();\n            setTimeout(function () {\n                _this.onChangeSelection(quill.getSelection());\n            }, 100);\n        };\n        /**\n         * Handle the clear formatting action\n         */\n        _this.handleClearFormatting = function () {\n            var quill = _this.props.editor;\n            var range = quill.getSelection();\n            if (range) {\n                if (range.length > 0) {\n                    quill.removeFormat(range.index, range.length);\n                    setTimeout(function () {\n                        _this.onChangeSelection(quill.getSelection());\n                    }, 100);\n                }\n            }\n        };\n        /**\n         * Handle the redo action\n         */\n        _this.handleRedo = function () {\n            var quill = _this.props.editor;\n            quill.getModule(\"history\").redo();\n            setTimeout(function () {\n                _this.onChangeSelection(quill.getSelection());\n            }, 100);\n        };\n        /**\n         * Navigation render\n         */\n        _this.handleRenderNavigation = function () {\n            return (React.createElement(\"div\", { className: styles.formattingPaneTitle, \"aria-hidden\": \"true\" },\n                strings.FormattingPaneTitle,\n                React.createElement(IconButton, { onClick: function () { return _this.props.onClose(); }, className: styles.propertyPaneClose, iconProps: {\n                        iconName: 'Cancel'\n                    }, title: strings.CloseButton, ariaLabel: strings.CloseButton })));\n        };\n        _this.state = {\n            formats: {}\n        };\n        return _this;\n    }\n    /**\n     * componentDidUpdate lifecycle hook\n     *\n     * @param prevProps\n     * @param prevState\n     */\n    RichTextPropertyPane.prototype.componentDidUpdate = function (prevProps, prevState) {\n        // if we're just opening, sync the format choices with the current selection\n        if (!prevProps.isOpen && this.props.isOpen) {\n            var quill = this.props.editor;\n            if (quill === undefined) {\n                return;\n            }\n            var range = quill.getSelection();\n            this.onChangeSelection(range, undefined, undefined);\n        }\n    };\n    /**\n     * Default React render method\n     */\n    RichTextPropertyPane.prototype.render = function () {\n        return (React.createElement(Panel, { className: styles.richTextPropertyPane, isBlocking: false, isOpen: this.props.isOpen, type: PanelType.smallFixedFar, onDismiss: this.props.onClose, closeButtonAriaLabel: strings.CloseButton, onRenderNavigation: this.handleRenderNavigation, focusTrapZoneProps: {\n                forceFocusInsideTrap: false,\n                isClickableOutsideFocusTrap: true\n            } },\n            React.createElement(\"div\", null,\n                React.createElement(\"div\", null,\n                    React.createElement(\"div\", null,\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                            this.renderActionsGroup(),\n                            this.renderFontStylesGroup(),\n                            this.renderFontSizesGroup(),\n                            this.renderInlineStylesGroup(),\n                            this.renderColorStylesGroup())),\n                    React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupHeaderNoAccordion }, strings.ParagraphSectionTitle),\n                        this.renderAlignmentStylesGroup(),\n                        this.renderListStylesGroup()),\n                    React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupHeaderNoAccordion }, strings.HyperlinkSectionTitle),\n                        this.renderHyperlinkStylesGroup())))));\n    };\n    /**\n     * Apply the new format\n     *\n     * @param name\n     * @param value\n     */\n    RichTextPropertyPane.prototype.applyFormat = function (name, value) {\n        var _this = this;\n        var quill = this.props.editor;\n        quill.format(name, value);\n        setTimeout(function () {\n            _this.onChangeSelection(quill.getSelection());\n        }, 100);\n    };\n    return RichTextPropertyPane;\n}(React.Component));\nexport default RichTextPropertyPane;\n"
         },
         {
           "id": "C9Bz",
@@ -124815,9 +124795,9 @@
             "controls-test-web-part",
             "ootb-fields-field-customizer"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-          "issuerId": "uz3O",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+          "issuerId": "OQ9B",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
           "issuerPath": [
             {
               "id": "8shM",
@@ -124855,9 +124835,9 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/index.js"
             },
             {
-              "id": "uz3O",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js"
+              "id": "OQ9B",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js"
             }
           ],
           "failed": false,
@@ -133154,11 +133134,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -143142,9 +143117,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/eventListeners.js",
-          "issuerId": "rW7i",
-          "issuerName": "./node_modules/@popperjs/core/lib/modifiers/eventListeners.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/instanceOf.js",
+          "issuerId": "J2fa",
+          "issuerName": "./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -143197,14 +143172,14 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "HnbP",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/index.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/index.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             },
             {
-              "id": "rW7i",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/eventListeners.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/eventListeners.js"
+              "id": "J2fa",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/instanceOf.js",
+              "name": "./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js"
             }
           ],
           "failed": false,
@@ -150891,11 +150866,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -155755,9 +155725,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/applyStyles.js",
-          "issuerId": "CrRX",
-          "issuerName": "./node_modules/@popperjs/core/lib/modifiers/applyStyles.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "issuerId": "bO7i",
+          "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -155810,14 +155780,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "RdE5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper-lite.js",
-              "name": "./node_modules/@popperjs/core/lib/popper-lite.js"
-            },
-            {
-              "id": "CrRX",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/applyStyles.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/applyStyles.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             }
           ],
           "failed": false,
@@ -204270,11 +204235,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -227103,14 +227063,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "OcOZ",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-              "name": "./node_modules/@popperjs/core/lib/popper.js"
-            },
-            {
-              "id": "HWy5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             },
             {
               "id": "thf+",
@@ -269149,11 +269104,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -317238,11 +317188,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -372120,7 +372065,7 @@
           ],
           "optimizationBailout": [],
           "depth": 4,
-          "source": "export var version = \"3.8.0-beta.2213602\";\n"
+          "source": "export var version = \"3.8.0-beta.2213661\";\n"
         },
         {
           "id": "cLrF",
@@ -376066,11 +376011,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -391866,14 +391806,9 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
             {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
-            {
-              "id": "uNIk",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js"
+              "id": "jsqa",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js"
             },
             {
               "id": "v6wc",
@@ -392148,14 +392083,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "OcOZ",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-              "name": "./node_modules/@popperjs/core/lib/popper.js"
-            },
-            {
-              "id": "HWy5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             },
             {
               "id": "thf+",
@@ -401728,14 +401658,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "OcOZ",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-              "name": "./node_modules/@popperjs/core/lib/popper.js"
-            },
-            {
-              "id": "HWy5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             },
             {
               "id": "thf+",
@@ -404820,11 +404745,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -442295,9 +442215,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/arrow.js",
-          "issuerId": "CSm3",
-          "issuerName": "./node_modules/@popperjs/core/lib/modifiers/arrow.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
+          "issuerId": "thf+",
+          "issuerName": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -442350,14 +442270,14 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "HnbP",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/index.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/index.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             },
             {
-              "id": "CSm3",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/arrow.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/arrow.js"
+              "id": "thf+",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
+              "name": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js"
             }
           ],
           "failed": false,
@@ -449206,24 +449126,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "OcOZ",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-              "name": "./node_modules/@popperjs/core/lib/popper.js"
-            },
-            {
-              "id": "HWy5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
-            },
-            {
-              "id": "thf+",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
-              "name": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js"
-            },
-            {
-              "id": "neCt",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
-              "name": "./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             },
             {
               "id": "6hpt",
@@ -449800,14 +449705,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "OcOZ",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-              "name": "./node_modules/@popperjs/core/lib/popper.js"
-            },
-            {
-              "id": "HWy5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             },
             {
               "id": "thf+",
@@ -457763,9 +457663,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js",
-          "issuerId": "Pnnc",
-          "issuerName": "./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js",
+          "issuerId": "YSVz",
+          "issuerName": "./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -457818,29 +457718,19 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "OcOZ",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-              "name": "./node_modules/@popperjs/core/lib/popper.js"
-            },
-            {
-              "id": "HWy5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
-            },
-            {
-              "id": "thf+",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
-              "name": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             },
             {
-              "id": "neCt",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
-              "name": "./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js"
+              "id": "0RYX",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js",
+              "name": "./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js"
             },
             {
-              "id": "Pnnc",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js",
-              "name": "./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js"
+              "id": "YSVz",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js",
+              "name": "./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js"
             }
           ],
           "failed": false,
@@ -458248,11 +458138,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -491055,9 +490940,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/offset.js",
-          "issuerId": "mDVL",
-          "issuerName": "./node_modules/@popperjs/core/lib/modifiers/offset.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "issuerId": "bO7i",
+          "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -491110,14 +490995,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "HnbP",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/index.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/index.js"
-            },
-            {
-              "id": "mDVL",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/offset.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/offset.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             }
           ],
           "failed": false,
@@ -491318,9 +491198,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/computeStyles.js",
-          "issuerId": "fNrw",
-          "issuerName": "./node_modules/@popperjs/core/lib/modifiers/computeStyles.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "issuerId": "bO7i",
+          "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -491373,14 +491253,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "HnbP",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/index.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/index.js"
-            },
-            {
-              "id": "fNrw",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/computeStyles.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/computeStyles.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             }
           ],
           "failed": false,
@@ -492529,9 +492404,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "issuerId": "HWy5",
-          "issuerName": "./node_modules/@popperjs/core/lib/modifiers/hide.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "issuerId": "bO7i",
+          "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -492584,14 +492459,9 @@
               "name": "./node_modules/@popperjs/core/lib/index.js"
             },
             {
-              "id": "OcOZ",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-              "name": "./node_modules/@popperjs/core/lib/popper.js"
-            },
-            {
-              "id": "HWy5",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-              "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+              "id": "bO7i",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+              "name": "./node_modules/@popperjs/core/lib/createPopper.js"
             }
           ],
           "failed": false,
@@ -498638,9 +498508,9 @@
             "controls-test-web-part",
             "ootb-fields-field-customizer"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "issuerId": "9z8q",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
+          "issuerId": "lkME",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -498671,11 +498541,6 @@
               "id": "lkME",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
-            },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
             }
           ],
           "failed": false,
@@ -501735,9 +501600,9 @@
             "controls-test-web-part",
             "ootb-fields-field-customizer"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-          "issuerId": "uNIk",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+          "issuerId": "jsqa",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -501770,14 +501635,9 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
             {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
-            {
-              "id": "uNIk",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js"
+              "id": "jsqa",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js"
             }
           ],
           "failed": false,
@@ -508256,11 +508116,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -543856,7 +543711,7 @@
         "ootb-fields-field-customizer.js",
         "ootb-fields-field-customizer.js.map"
       ],
-      "hash": "6133cf8f94de732ac9d6",
+      "hash": "a6c89795608b285f13fa",
       "siblings": [],
       "parents": [],
       "children": [],
@@ -555346,11 +555201,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -574129,9 +573979,9 @@
             "controls-test-web-part",
             "ootb-fields-field-customizer"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-          "issuerId": "uz3O",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+          "issuerId": "OQ9B",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
           "issuerPath": [
             {
               "id": "8shM",
@@ -574169,9 +574019,9 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/index.js"
             },
             {
-              "id": "uz3O",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js"
+              "id": "OQ9B",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js"
             }
           ],
           "failed": false,
@@ -576758,11 +576608,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -581438,11 +581283,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -607526,11 +607366,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -631173,11 +631008,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -640974,11 +640804,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -695443,7 +695268,7 @@
           ],
           "optimizationBailout": [],
           "depth": 4,
-          "source": "export var version = \"3.8.0-beta.2213602\";\n"
+          "source": "export var version = \"3.8.0-beta.2213661\";\n"
         },
         {
           "id": "cPD0",
@@ -695974,11 +695799,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -697847,14 +697667,9 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
             {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
-            {
-              "id": "uNIk",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js"
+              "id": "jsqa",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js"
             },
             {
               "id": "v6wc",
@@ -700071,11 +699886,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -710861,11 +710671,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -718954,9 +718759,9 @@
             "controls-test-web-part",
             "ootb-fields-field-customizer"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "issuerId": "9z8q",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
+          "issuerId": "lkME",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -718987,11 +718792,6 @@
               "id": "lkME",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
-            },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
             }
           ],
           "failed": false,
@@ -719549,9 +719349,9 @@
             "controls-test-web-part",
             "ootb-fields-field-customizer"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-          "issuerId": "uNIk",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+          "issuerId": "jsqa",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -719584,14 +719384,9 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
             {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
-            {
-              "id": "uNIk",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js"
+              "id": "jsqa",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js"
             }
           ],
           "failed": false,
@@ -722377,11 +722172,6 @@
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
               "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
             },
-            {
-              "id": "9z8q",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-            },
             {
               "id": "uNIk",
               "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -791719,9 +791509,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-embedded/es/index.js",
-      "issuerId": "SI3Q",
-      "issuerName": "./node_modules/fela-plugin-embedded/es/index.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-placeholder-prefixer/es/index.js",
+      "issuerId": "fFg5",
+      "issuerName": "./node_modules/fela-plugin-placeholder-prefixer/es/index.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -791759,9 +791549,9 @@
           "name": "./node_modules/@fluentui/react-northstar-fela-renderer/dist/es/createFelaRenderer.js"
         },
         {
-          "id": "SI3Q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-embedded/es/index.js",
-          "name": "./node_modules/fela-plugin-embedded/es/index.js"
+          "id": "fFg5",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-placeholder-prefixer/es/index.js",
+          "name": "./node_modules/fela-plugin-placeholder-prefixer/es/index.js"
         }
       ],
       "failed": false,
@@ -794313,9 +794103,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
-      "issuerId": "neCt",
-      "issuerName": "./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+      "issuerId": "bO7i",
+      "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -794368,24 +794158,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "OcOZ",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-          "name": "./node_modules/@popperjs/core/lib/popper.js"
-        },
-        {
-          "id": "HWy5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
-        },
-        {
-          "id": "thf+",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
-          "name": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js"
-        },
-        {
-          "id": "neCt",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
-          "name": "./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         }
       ],
       "failed": false,
@@ -810574,11 +810349,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -833698,7 +833468,7 @@
       "name": "./lib/controls/richText/RichTextPropertyPane.js",
       "index": 2796,
       "index2": 2799,
-      "size": 26032,
+      "size": 25980,
       "cacheable": true,
       "built": true,
       "optional": false,
@@ -833765,7 +833535,7 @@
       ],
       "optimizationBailout": [],
       "depth": 5,
-      "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport * as strings from 'ControlStrings';\nimport styles from './RichTextPropertyPane.module.scss';\nimport RteColorPicker from './RteColorPicker';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';\nimport { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';\nimport { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';\nimport { ThemeColorHelper } from '../../common/utilities/ThemeColorHelper';\nvar RichTextPropertyPane = /** @class */ (function (_super) {\n    __extends(RichTextPropertyPane, _super);\n    function RichTextPropertyPane(props) {\n        var _this = _super.call(this, props) || this;\n        /**\n         * On selection changed event handler\n         */\n        _this.onChangeSelection = function (range, oldRange, source) {\n            var quill = _this.props.editor;\n            if (quill === undefined || range === undefined) {\n                return;\n            }\n            if (range) {\n                var formats = quill.getFormat(range);\n                _this.setState({\n                    formats: formats\n                });\n            }\n        };\n        /**\n         * Render the actions group\n         */\n        _this.renderActionsGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.UndoTitle, id: \"undo-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleUndo, className: styles.propertyPaneButton, \"aria-describedby\": \"undo-propertyPaneButton\", iconProps: {\n                                    iconName: 'Undo',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.RedoTitle, id: \"redo-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleRedo, className: styles.propertyPaneButton, \"aria-describedby\": \"redo-propertyPaneButton\", iconProps: {\n                                    iconName: 'Redo',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ClearFormattingTitle, id: \"clearFormatting-button-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleClearFormatting, className: styles.propertyPaneButton, \"aria-describedby\": \"clearFormatting-button-propertyPaneButton\", iconProps: {\n                                    iconName: 'ClearFormatting',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render font styles group\n         */\n        _this.renderFontStylesGroup = function () {\n            var selectedHeader = _this.state.formats.header ? _this.state.formats.header : 0;\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(Dropdown, { label: strings.FontStyleTitle, ariaLabel: strings.FontStyleTitle, defaultSelectedKey: 0, selectedKey: selectedHeader, options: [\n                        { key: 0, text: strings.HeaderNormalText },\n                        { key: 2, text: strings.HeaderH2 },\n                        { key: 3, text: strings.HeaderH3 },\n                        { key: 4, text: strings.HeaderH4 },\n                        { key: 7, text: strings.HeaderBlockQuote }\n                    ], onChanged: _this.onChangeHeading })));\n        };\n        /**\n         * Render font size group\n         */\n        _this.renderFontSizesGroup = function () {\n            // get the selected header\n            var selectedSize = _this.state.formats.size ? _this.state.formats.size : 'large';\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(Dropdown, { label: strings.FontSizeTitle, ariaLabel: strings.FontSizeTitle, defaultSelectedKey: 'large', selectedKey: selectedSize, options: [\n                        { key: 'small', text: '12' },\n                        { key: 'medium', text: '14' },\n                        { key: 'mediumplus', text: '15' },\n                        { key: 'large', text: '17' },\n                        { key: 'xlarge', text: '21' },\n                        { key: 'xlargeplus', text: '24' },\n                        { key: 'xxlarge', text: '28' },\n                        { key: 'xxxlarge', text: '32' },\n                        { key: 'xxlargeplus', text: '36' },\n                        { key: 'super', text: '42' },\n                    ], onChanged: _this.onChangeSize })));\n        };\n        /**\n         * Render inline styles group\n         */\n        _this.renderInlineStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.BoldTitle, id: \"bold-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.bold, onClick: function () { return _this.applyFormat('bold', !_this.state.formats.bold); }, className: styles.propertyPaneButton, \"aria-describedby\": \"bold-propertyPaneButton\", iconProps: {\n                                    iconName: 'Bold',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ItalicTitle, id: \"italic-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.italic, onClick: function () { return _this.applyFormat('italic', !_this.state.formats.italic); }, className: styles.propertyPaneButton, \"aria-describedby\": \"italic-propertyPaneButton\", iconProps: {\n                                    iconName: 'Italic',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.UnderlineTitle, id: \"underline-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.underline, onClick: function () { return _this.applyFormat('underline', !_this.state.formats.underline); }, className: styles.propertyPaneButton, \"aria-describedby\": \"underline-propertyPaneButton\", iconProps: {\n                                    iconName: 'Underline',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.StrikethroughTitle, id: \"strikethrough-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.strike, onClick: function () { return _this.applyFormat('strike', !_this.state.formats.strike); }, className: styles.propertyPaneButton, \"aria-describedby\": \"strikethrough-propertyPaneButton\", iconProps: {\n                                    iconName: 'Strikethrough',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.SuperscriptTitle, id: \"superscript-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.script === 'super', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'super' ? '' : 'super'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"superscript-propertyPaneButton\", iconProps: {\n                                    iconName: 'Superscript',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.SubscriptTitle, id: \"subscript-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.script === 'sub', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'sub' ? '' : 'sub'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"subscript-propertyPaneButton\", iconProps: {\n                                    iconName: 'Subscript',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render color styles group\n         */\n        _this.renderColorStylesGroup = function () {\n            var color = _this.state.formats.color || ThemeColorHelper.GetThemeColor(styles.NeutralPrimary);\n            var backgroundColor = _this.state.formats.background || \"rgba(0, 0, 0, 0)\";\n            /**\n             * Add custom colors if passed as a property\n             */\n            var fontColorGroups = [\"themeColors\", \"standardColors\"];\n            if (_this.props.customColors)\n                fontColorGroups.push('customColors');\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(RteColorPicker, { colorPickerGroups: fontColorGroups, customColors: _this.props.customColors, buttonLabel: strings.FontColorLabel, id: \"fontColor-propertyPaneButton\", defaultButtonLabel: strings.AutomaticFontColor, fillThemeColor: true, previewColor: color, selectedColor: color, onColorChanged: _this.handleFillColorChanged, switchToDefaultColor: function () { return _this.handleFillColorChanged(undefined); } }),\n                        React.createElement(RteColorPicker, { buttonLabel: strings.HighlightColorLabel, colorPickerGroups: [\n                                \"highlightColors\"\n                            ], fillThemeColor: false, onColorChanged: _this.handleHighlightColorChanged, switchToDefaultColor: function () { return _this.handleHighlightColorChanged(undefined); }, previewColor: backgroundColor, defaultButtonLabel: strings.NoColorHighlightColor, selectedColor: backgroundColor, id: \"highlightColor-propertyPaneButton\" })))));\n        };\n        /**\n         * Render alignment style groups\n         */\n        _this.renderAlignmentStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.AlignLeft, id: \"left-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === undefined, onClick: function () { return _this.applyFormat('align', undefined); }, className: styles.propertyPaneButton, \"aria-describedby\": \"left-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignLeft',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignCenter, id: \"center-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'center', onClick: function () { return _this.applyFormat('align', 'center'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"center-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignCenter',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignRight, id: \"right-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'right', onClick: function () { return _this.applyFormat('align', 'right'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"right-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignRight',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignJustify, id: \"justify-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'justify', onClick: function () { return _this.applyFormat('align', 'justify'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"justify-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignJustify',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.IncreaseIndentTitle, id: \"increaseindent-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: function () { return _this.onChangeIndent(1); }, className: styles.propertyPaneButton, \"aria-describedby\": \"increaseindent-propertyPaneButton\", iconProps: {\n                                    iconName: 'IncreaseIndentLegacy',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.DecreaseIndentTitle, id: \"decreaseindent-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: function () { return _this.onChangeIndent(-1); }, className: styles.propertyPaneButton, \"aria-describedby\": \"decreaseindent-propertyPaneButton\", iconProps: {\n                                    iconName: 'DecreaseIndentLegacy',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render list styles group\n         */\n        _this.renderListStylesGroup = function () {\n            return React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.ListBullet, id: \"bullet-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.list === 'bullet', onClick: function () { return _this.applyFormat('list', 'bullet'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"bullet-propertyPaneButton\", iconProps: {\n                                    iconName: 'BulletedList',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ListNumbered, id: \"ordered-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.list === 'ordered', onClick: function () { return _this.applyFormat('list', 'ordered'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"ordered-propertyPaneButton\", iconProps: {\n                                    iconName: 'NumberedList',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })))));\n        };\n        /**\n         * Render hyperlink styles group\n         */\n        _this.renderHyperlinkStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.LinkTitle, id: \"link-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.link !== undefined, onClick: function () { return _this.props.onLink(); }, className: styles.propertyPaneButton, \"aria-describedby\": \"link-propertyPaneButton\", iconProps: {\n                                    iconName: 'Link',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.RemoveLinkLabel, id: \"unlink-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { disabled: _this.state.formats.link === undefined, onClick: function () { return _this.applyFormat('link', false); }, className: styles.propertyPaneButton, \"aria-describedby\": \"unlink-propertyPaneButton\", iconProps: {\n                                    iconName: 'RemoveLink',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Handle fill color change\n         */\n        _this.handleFillColorChanged = function (color) {\n            _this.applyFormat('color', color);\n        };\n        /**\n         * Handle the hightlight color change\n         */\n        _this.handleHighlightColorChanged = function (color) {\n            _this.applyFormat('background', color);\n        };\n        /**\n         * On heading change\n         */\n        _this.onChangeHeading = function (item) {\n            var newHeadingValue = item.key === 0 ? '' : item.key.toString();\n            _this.applyFormat(\"header\", newHeadingValue);\n        };\n        /**\n         * On indentation change.\n         */\n        _this.onChangeIndent = function (direction) {\n            var quill = _this.props.editor;\n            var current = +(quill.getFormat(quill.getSelection()).indent || 0);\n            _this.applyFormat(\"indent\", current + direction);\n        };\n        /**\n         * On size change\n         */\n        _this.onChangeSize = function (item) {\n            var newSizeValue = item.key === 0 ? '' : item.key.toString();\n            _this.applyFormat(\"size\", newSizeValue);\n        };\n        /**\n         * Handle the undo action\n         */\n        _this.handleUndo = function () {\n            var quill = _this.props.editor;\n            quill.getModule(\"history\").undo();\n            setTimeout(function () {\n                _this.onChangeSelection(quill.getSelection());\n            }, 100);\n        };\n        /**\n         * Handle the clear formatting action\n         */\n        _this.handleClearFormatting = function () {\n            var quill = _this.props.editor;\n            var range = quill.getSelection();\n            if (range) {\n                if (range.length > 0) {\n                    quill.removeFormat(range.index, range.length);\n                    setTimeout(function () {\n                        _this.onChangeSelection(quill.getSelection());\n                    }, 100);\n                }\n            }\n        };\n        /**\n         * Handle the redo action\n         */\n        _this.handleRedo = function () {\n            var quill = _this.props.editor;\n            quill.getModule(\"history\").redo();\n            setTimeout(function () {\n                _this.onChangeSelection(quill.getSelection());\n            }, 100);\n        };\n        /**\n         * Navigation render\n         */\n        _this.handleRenderNavigation = function () {\n            return (React.createElement(\"div\", { className: styles.formattingPaneTitle, \"aria-hidden\": \"true\" },\n                strings.FormattingPaneTitle,\n                React.createElement(IconButton, { onClick: function () { return _this.props.onClose(); }, className: styles.propertyPaneClose, iconProps: {\n                        iconName: 'Cancel'\n                    }, title: strings.CloseButton, ariaLabel: strings.CloseButton })));\n        };\n        _this.state = {\n            formats: {}\n        };\n        return _this;\n    }\n    /**\n     * componentDidUpdate lifecycle hook\n     *\n     * @param prevProps\n     * @param prevState\n     */\n    RichTextPropertyPane.prototype.componentDidUpdate = function (prevProps, prevState) {\n        // if we're just opening, sync the format choices with the current selection\n        if (!prevProps.isOpen && this.props.isOpen) {\n            var quill = this.props.editor;\n            if (quill === undefined) {\n                return;\n            }\n            var range = quill.getSelection();\n            this.onChangeSelection(range, undefined, undefined);\n        }\n    };\n    /**\n     * Default React render method\n     */\n    RichTextPropertyPane.prototype.render = function () {\n        return (React.createElement(Panel, { className: styles.richTextPropertyPane, isBlocking: false, isOpen: this.props.isOpen, type: PanelType.smallFixedFar, onDismiss: this.props.onClose, closeButtonAriaLabel: strings.CloseButton, onRenderNavigation: this.handleRenderNavigation, focusTrapZoneProps: {\n                forceFocusInsideTrap: false,\n                isClickableOutsideFocusTrap: true\n            } },\n            React.createElement(\"div\", null,\n                React.createElement(\"div\", null,\n                    React.createElement(\"div\", null,\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                            this.renderActionsGroup(),\n                            this.renderFontStylesGroup(),\n                            this.renderFontSizesGroup(),\n                            this.renderInlineStylesGroup(),\n                            this.renderColorStylesGroup())),\n                    React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupHeaderNoAccordion }, strings.ParagraphSectionTitle),\n                        this.renderAlignmentStylesGroup(),\n                        this.renderListStylesGroup()),\n                    React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupHeaderNoAccordion }, strings.HyperlinkSectionTitle),\n                        this.renderHyperlinkStylesGroup())))));\n    };\n    /**\n     * Apply the new format\n     *\n     * @param name\n     * @param value\n     */\n    RichTextPropertyPane.prototype.applyFormat = function (name, value) {\n        var _this = this;\n        var quill = this.props.editor;\n        quill.format(name, value);\n        setTimeout(function () {\n            _this.onChangeSelection(quill.getSelection());\n        }, 100);\n    };\n    return RichTextPropertyPane;\n}(React.Component));\nexport default RichTextPropertyPane;\n"
+      "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport * as strings from 'ControlStrings';\nimport styles from './RichTextPropertyPane.module.scss';\nimport RteColorPicker from './RteColorPicker';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';\nimport { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';\nimport { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';\nimport { ThemeColorHelper } from '../../common/utilities/ThemeColorHelper';\nvar RichTextPropertyPane = /** @class */ (function (_super) {\n    __extends(RichTextPropertyPane, _super);\n    function RichTextPropertyPane(props) {\n        var _this = _super.call(this, props) || this;\n        /**\n         * On selection changed event handler\n         */\n        _this.onChangeSelection = function (range, oldRange, source) {\n            var quill = _this.props.editor;\n            if (quill === undefined || range === undefined) {\n                return;\n            }\n            if (range) {\n                var formats = quill.getFormat(range);\n                _this.setState({\n                    formats: formats\n                });\n            }\n        };\n        /**\n         * Render the actions group\n         */\n        _this.renderActionsGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.UndoTitle, id: \"undo-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleUndo, className: styles.propertyPaneButton, \"aria-describedby\": \"undo-propertyPaneButton\", iconProps: {\n                                    iconName: 'Undo',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.RedoTitle, id: \"redo-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleRedo, className: styles.propertyPaneButton, \"aria-describedby\": \"redo-propertyPaneButton\", iconProps: {\n                                    iconName: 'Redo',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ClearFormattingTitle, id: \"clearFormatting-button-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: _this.handleClearFormatting, className: styles.propertyPaneButton, \"aria-describedby\": \"clearFormatting-button-propertyPaneButton\", iconProps: {\n                                    iconName: 'ClearFormatting',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render font styles group\n         */\n        _this.renderFontStylesGroup = function () {\n            var selectedHeader = _this.state.formats.header ? _this.state.formats.header : 0;\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(Dropdown, { label: strings.FontStyleTitle, ariaLabel: strings.FontStyleTitle, selectedKey: selectedHeader, options: [\n                        { key: 0, text: strings.HeaderNormalText },\n                        { key: 2, text: strings.HeaderH2 },\n                        { key: 3, text: strings.HeaderH3 },\n                        { key: 4, text: strings.HeaderH4 },\n                        { key: 7, text: strings.HeaderBlockQuote }\n                    ], onChanged: _this.onChangeHeading })));\n        };\n        /**\n         * Render font size group\n         */\n        _this.renderFontSizesGroup = function () {\n            // get the selected header\n            var selectedSize = _this.state.formats.size ? _this.state.formats.size : 'large';\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(Dropdown, { label: strings.FontSizeTitle, ariaLabel: strings.FontSizeTitle, selectedKey: selectedSize, options: [\n                        { key: 'small', text: '12' },\n                        { key: 'medium', text: '14' },\n                        { key: 'mediumplus', text: '15' },\n                        { key: 'large', text: '17' },\n                        { key: 'xlarge', text: '21' },\n                        { key: 'xlargeplus', text: '24' },\n                        { key: 'xxlarge', text: '28' },\n                        { key: 'xxxlarge', text: '32' },\n                        { key: 'xxlargeplus', text: '36' },\n                        { key: 'super', text: '42' },\n                    ], onChanged: _this.onChangeSize })));\n        };\n        /**\n         * Render inline styles group\n         */\n        _this.renderInlineStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.BoldTitle, id: \"bold-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.bold, onClick: function () { return _this.applyFormat('bold', !_this.state.formats.bold); }, className: styles.propertyPaneButton, \"aria-describedby\": \"bold-propertyPaneButton\", iconProps: {\n                                    iconName: 'Bold',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ItalicTitle, id: \"italic-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.italic, onClick: function () { return _this.applyFormat('italic', !_this.state.formats.italic); }, className: styles.propertyPaneButton, \"aria-describedby\": \"italic-propertyPaneButton\", iconProps: {\n                                    iconName: 'Italic',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.UnderlineTitle, id: \"underline-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.underline, onClick: function () { return _this.applyFormat('underline', !_this.state.formats.underline); }, className: styles.propertyPaneButton, \"aria-describedby\": \"underline-propertyPaneButton\", iconProps: {\n                                    iconName: 'Underline',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.StrikethroughTitle, id: \"strikethrough-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.strike, onClick: function () { return _this.applyFormat('strike', !_this.state.formats.strike); }, className: styles.propertyPaneButton, \"aria-describedby\": \"strikethrough-propertyPaneButton\", iconProps: {\n                                    iconName: 'Strikethrough',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.SuperscriptTitle, id: \"superscript-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.script === 'super', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'super' ? '' : 'super'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"superscript-propertyPaneButton\", iconProps: {\n                                    iconName: 'Superscript',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.SubscriptTitle, id: \"subscript-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.script === 'sub', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'sub' ? '' : 'sub'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"subscript-propertyPaneButton\", iconProps: {\n                                    iconName: 'Subscript',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render color styles group\n         */\n        _this.renderColorStylesGroup = function () {\n            var color = _this.state.formats.color || ThemeColorHelper.GetThemeColor(styles.NeutralPrimary);\n            var backgroundColor = _this.state.formats.background || \"rgba(0, 0, 0, 0)\";\n            /**\n             * Add custom colors if passed as a property\n             */\n            var fontColorGroups = [\"themeColors\", \"standardColors\"];\n            if (_this.props.customColors)\n                fontColorGroups.push('customColors');\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(RteColorPicker, { colorPickerGroups: fontColorGroups, customColors: _this.props.customColors, buttonLabel: strings.FontColorLabel, id: \"fontColor-propertyPaneButton\", defaultButtonLabel: strings.AutomaticFontColor, fillThemeColor: true, previewColor: color, selectedColor: color, onColorChanged: _this.handleFillColorChanged, switchToDefaultColor: function () { return _this.handleFillColorChanged(undefined); } }),\n                        React.createElement(RteColorPicker, { buttonLabel: strings.HighlightColorLabel, colorPickerGroups: [\n                                \"highlightColors\"\n                            ], fillThemeColor: false, onColorChanged: _this.handleHighlightColorChanged, switchToDefaultColor: function () { return _this.handleHighlightColorChanged(undefined); }, previewColor: backgroundColor, defaultButtonLabel: strings.NoColorHighlightColor, selectedColor: backgroundColor, id: \"highlightColor-propertyPaneButton\" })))));\n        };\n        /**\n         * Render alignment style groups\n         */\n        _this.renderAlignmentStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.AlignLeft, id: \"left-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === undefined, onClick: function () { return _this.applyFormat('align', undefined); }, className: styles.propertyPaneButton, \"aria-describedby\": \"left-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignLeft',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignCenter, id: \"center-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'center', onClick: function () { return _this.applyFormat('align', 'center'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"center-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignCenter',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignRight, id: \"right-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'right', onClick: function () { return _this.applyFormat('align', 'right'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"right-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignRight',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.AlignJustify, id: \"justify-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.align === 'justify', onClick: function () { return _this.applyFormat('align', 'justify'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"justify-propertyPaneButton\", iconProps: {\n                                    iconName: 'AlignJustify',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.IncreaseIndentTitle, id: \"increaseindent-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: function () { return _this.onChangeIndent(1); }, className: styles.propertyPaneButton, \"aria-describedby\": \"increaseindent-propertyPaneButton\", iconProps: {\n                                    iconName: 'IncreaseIndentLegacy',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.DecreaseIndentTitle, id: \"decreaseindent-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { onClick: function () { return _this.onChangeIndent(-1); }, className: styles.propertyPaneButton, \"aria-describedby\": \"decreaseindent-propertyPaneButton\", iconProps: {\n                                    iconName: 'DecreaseIndentLegacy',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Render list styles group\n         */\n        _this.renderListStylesGroup = function () {\n            return React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.ListBullet, id: \"bullet-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.list === 'bullet', onClick: function () { return _this.applyFormat('list', 'bullet'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"bullet-propertyPaneButton\", iconProps: {\n                                    iconName: 'BulletedList',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.ListNumbered, id: \"ordered-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.list === 'ordered', onClick: function () { return _this.applyFormat('list', 'ordered'); }, className: styles.propertyPaneButton, \"aria-describedby\": \"ordered-propertyPaneButton\", iconProps: {\n                                    iconName: 'NumberedList',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })))));\n        };\n        /**\n         * Render hyperlink styles group\n         */\n        _this.renderHyperlinkStylesGroup = function () {\n            return (React.createElement(\"div\", { className: styles.propertyPaneGroupField },\n                React.createElement(\"div\", { className: \"ms-CustomFieldHost\" },\n                    React.createElement(\"div\", { className: styles.controlsInOneRow },\n                        React.createElement(TooltipHost, { content: strings.LinkTitle, id: \"link-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { checked: _this.state.formats.link !== undefined, onClick: function () { return _this.props.onLink(); }, className: styles.propertyPaneButton, \"aria-describedby\": \"link-propertyPaneButton\", iconProps: {\n                                    iconName: 'Link',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } })),\n                        React.createElement(TooltipHost, { content: strings.RemoveLinkLabel, id: \"unlink-propertyPaneButton\", calloutProps: { gapSpace: 0 } },\n                            React.createElement(IconButton, { disabled: _this.state.formats.link === undefined, onClick: function () { return _this.applyFormat('link', false); }, className: styles.propertyPaneButton, \"aria-describedby\": \"unlink-propertyPaneButton\", iconProps: {\n                                    iconName: 'RemoveLink',\n                                    style: {\n                                        fontSize: '20px'\n                                    }\n                                } }))))));\n        };\n        /**\n         * Handle fill color change\n         */\n        _this.handleFillColorChanged = function (color) {\n            _this.applyFormat('color', color);\n        };\n        /**\n         * Handle the hightlight color change\n         */\n        _this.handleHighlightColorChanged = function (color) {\n            _this.applyFormat('background', color);\n        };\n        /**\n         * On heading change\n         */\n        _this.onChangeHeading = function (item) {\n            var newHeadingValue = item.key === 0 ? '' : item.key.toString();\n            _this.applyFormat(\"header\", newHeadingValue);\n        };\n        /**\n         * On indentation change.\n         */\n        _this.onChangeIndent = function (direction) {\n            var quill = _this.props.editor;\n            var current = +(quill.getFormat(quill.getSelection()).indent || 0);\n            _this.applyFormat(\"indent\", current + direction);\n        };\n        /**\n         * On size change\n         */\n        _this.onChangeSize = function (item) {\n            var newSizeValue = item.key === 0 ? '' : item.key.toString();\n            _this.applyFormat(\"size\", newSizeValue);\n        };\n        /**\n         * Handle the undo action\n         */\n        _this.handleUndo = function () {\n            var quill = _this.props.editor;\n            quill.getModule(\"history\").undo();\n            setTimeout(function () {\n                _this.onChangeSelection(quill.getSelection());\n            }, 100);\n        };\n        /**\n         * Handle the clear formatting action\n         */\n        _this.handleClearFormatting = function () {\n            var quill = _this.props.editor;\n            var range = quill.getSelection();\n            if (range) {\n                if (range.length > 0) {\n                    quill.removeFormat(range.index, range.length);\n                    setTimeout(function () {\n                        _this.onChangeSelection(quill.getSelection());\n                    }, 100);\n                }\n            }\n        };\n        /**\n         * Handle the redo action\n         */\n        _this.handleRedo = function () {\n            var quill = _this.props.editor;\n            quill.getModule(\"history\").redo();\n            setTimeout(function () {\n                _this.onChangeSelection(quill.getSelection());\n            }, 100);\n        };\n        /**\n         * Navigation render\n         */\n        _this.handleRenderNavigation = function () {\n            return (React.createElement(\"div\", { className: styles.formattingPaneTitle, \"aria-hidden\": \"true\" },\n                strings.FormattingPaneTitle,\n                React.createElement(IconButton, { onClick: function () { return _this.props.onClose(); }, className: styles.propertyPaneClose, iconProps: {\n                        iconName: 'Cancel'\n                    }, title: strings.CloseButton, ariaLabel: strings.CloseButton })));\n        };\n        _this.state = {\n            formats: {}\n        };\n        return _this;\n    }\n    /**\n     * componentDidUpdate lifecycle hook\n     *\n     * @param prevProps\n     * @param prevState\n     */\n    RichTextPropertyPane.prototype.componentDidUpdate = function (prevProps, prevState) {\n        // if we're just opening, sync the format choices with the current selection\n        if (!prevProps.isOpen && this.props.isOpen) {\n            var quill = this.props.editor;\n            if (quill === undefined) {\n                return;\n            }\n            var range = quill.getSelection();\n            this.onChangeSelection(range, undefined, undefined);\n        }\n    };\n    /**\n     * Default React render method\n     */\n    RichTextPropertyPane.prototype.render = function () {\n        return (React.createElement(Panel, { className: styles.richTextPropertyPane, isBlocking: false, isOpen: this.props.isOpen, type: PanelType.smallFixedFar, onDismiss: this.props.onClose, closeButtonAriaLabel: strings.CloseButton, onRenderNavigation: this.handleRenderNavigation, focusTrapZoneProps: {\n                forceFocusInsideTrap: false,\n                isClickableOutsideFocusTrap: true\n            } },\n            React.createElement(\"div\", null,\n                React.createElement(\"div\", null,\n                    React.createElement(\"div\", null,\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                            this.renderActionsGroup(),\n                            this.renderFontStylesGroup(),\n                            this.renderFontSizesGroup(),\n                            this.renderInlineStylesGroup(),\n                            this.renderColorStylesGroup())),\n                    React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupHeaderNoAccordion }, strings.ParagraphSectionTitle),\n                        this.renderAlignmentStylesGroup(),\n                        this.renderListStylesGroup()),\n                    React.createElement(\"div\", { className: styles.propertyPaneGroupContent },\n                        React.createElement(\"div\", { className: styles.propertyPaneGroupHeaderNoAccordion }, strings.HyperlinkSectionTitle),\n                        this.renderHyperlinkStylesGroup())))));\n    };\n    /**\n     * Apply the new format\n     *\n     * @param name\n     * @param value\n     */\n    RichTextPropertyPane.prototype.applyFormat = function (name, value) {\n        var _this = this;\n        var quill = this.props.editor;\n        quill.format(name, value);\n        setTimeout(function () {\n            _this.onChangeSelection(quill.getSelection());\n        }, 100);\n    };\n    return RichTextPropertyPane;\n}(React.Component));\nexport default RichTextPropertyPane;\n"
     },
     {
       "id": "C9Bz",
@@ -858681,9 +858451,9 @@
         "controls-test-web-part",
         "ootb-fields-field-customizer"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-      "issuerId": "uz3O",
-      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+      "issuerId": "OQ9B",
+      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
       "issuerPath": [
         {
           "id": "8shM",
@@ -858721,9 +858491,9 @@
           "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/index.js"
         },
         {
-          "id": "uz3O",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js"
+          "id": "OQ9B",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+          "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js"
         }
       ],
       "failed": false,
@@ -867020,11 +866790,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -877008,9 +876773,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/eventListeners.js",
-      "issuerId": "rW7i",
-      "issuerName": "./node_modules/@popperjs/core/lib/modifiers/eventListeners.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/instanceOf.js",
+      "issuerId": "J2fa",
+      "issuerName": "./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -877063,14 +876828,14 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "HnbP",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/index.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/index.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         },
         {
-          "id": "rW7i",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/eventListeners.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/eventListeners.js"
+          "id": "J2fa",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/instanceOf.js",
+          "name": "./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js"
         }
       ],
       "failed": false,
@@ -884781,11 +884546,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -889645,9 +889405,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/applyStyles.js",
-      "issuerId": "CrRX",
-      "issuerName": "./node_modules/@popperjs/core/lib/modifiers/applyStyles.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+      "issuerId": "bO7i",
+      "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -889700,14 +889460,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "RdE5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper-lite.js",
-          "name": "./node_modules/@popperjs/core/lib/popper-lite.js"
-        },
-        {
-          "id": "CrRX",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/applyStyles.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/applyStyles.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         }
       ],
       "failed": false,
@@ -938160,11 +937915,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -961047,14 +960797,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "OcOZ",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-          "name": "./node_modules/@popperjs/core/lib/popper.js"
-        },
-        {
-          "id": "HWy5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         },
         {
           "id": "thf+",
@@ -1003093,11 +1002838,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -1051182,11 +1050922,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -1106064,7 +1105799,7 @@
       ],
       "optimizationBailout": [],
       "depth": 4,
-      "source": "export var version = \"3.8.0-beta.2213602\";\n"
+      "source": "export var version = \"3.8.0-beta.2213661\";\n"
     },
     {
       "id": "cLrF",
@@ -1110010,11 +1109745,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -1125810,14 +1125540,9 @@
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
         {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
-        {
-          "id": "uNIk",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js"
+          "id": "jsqa",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js"
         },
         {
           "id": "v6wc",
@@ -1126092,14 +1125817,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "OcOZ",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-          "name": "./node_modules/@popperjs/core/lib/popper.js"
-        },
-        {
-          "id": "HWy5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         },
         {
           "id": "thf+",
@@ -1135672,14 +1135392,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "OcOZ",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-          "name": "./node_modules/@popperjs/core/lib/popper.js"
-        },
-        {
-          "id": "HWy5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         },
         {
           "id": "thf+",
@@ -1138764,11 +1138479,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -1176239,9 +1175949,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/arrow.js",
-      "issuerId": "CSm3",
-      "issuerName": "./node_modules/@popperjs/core/lib/modifiers/arrow.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
+      "issuerId": "thf+",
+      "issuerName": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1176294,14 +1176004,14 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "HnbP",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/index.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/index.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         },
         {
-          "id": "CSm3",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/arrow.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/arrow.js"
+          "id": "thf+",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
+          "name": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js"
         }
       ],
       "failed": false,
@@ -1183150,24 +1182860,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "OcOZ",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-          "name": "./node_modules/@popperjs/core/lib/popper.js"
-        },
-        {
-          "id": "HWy5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
-        },
-        {
-          "id": "thf+",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
-          "name": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js"
-        },
-        {
-          "id": "neCt",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
-          "name": "./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         },
         {
           "id": "6hpt",
@@ -1183744,14 +1183439,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "OcOZ",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-          "name": "./node_modules/@popperjs/core/lib/popper.js"
-        },
-        {
-          "id": "HWy5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         },
         {
           "id": "thf+",
@@ -1191707,9 +1191397,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js",
-      "issuerId": "Pnnc",
-      "issuerName": "./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js",
+      "issuerId": "YSVz",
+      "issuerName": "./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1191762,29 +1191452,19 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "OcOZ",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-          "name": "./node_modules/@popperjs/core/lib/popper.js"
-        },
-        {
-          "id": "HWy5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
-        },
-        {
-          "id": "thf+",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/utils/detectOverflow.js",
-          "name": "./node_modules/@popperjs/core/lib/utils/detectOverflow.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         },
         {
-          "id": "neCt",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js",
-          "name": "./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js"
+          "id": "0RYX",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js",
+          "name": "./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js"
         },
         {
-          "id": "Pnnc",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js",
-          "name": "./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js"
+          "id": "YSVz",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js",
+          "name": "./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js"
         }
       ],
       "failed": false,
@@ -1192252,11 +1191932,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
@@ -1225059,9 +1224734,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/offset.js",
-      "issuerId": "mDVL",
-      "issuerName": "./node_modules/@popperjs/core/lib/modifiers/offset.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+      "issuerId": "bO7i",
+      "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1225114,14 +1224789,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "HnbP",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/index.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/index.js"
-        },
-        {
-          "id": "mDVL",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/offset.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/offset.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         }
       ],
       "failed": false,
@@ -1225322,9 +1224992,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/computeStyles.js",
-      "issuerId": "fNrw",
-      "issuerName": "./node_modules/@popperjs/core/lib/modifiers/computeStyles.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+      "issuerId": "bO7i",
+      "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1225377,14 +1225047,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "HnbP",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/index.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/index.js"
-        },
-        {
-          "id": "fNrw",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/computeStyles.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/computeStyles.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         }
       ],
       "failed": false,
@@ -1226533,9 +1226198,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-      "issuerId": "HWy5",
-      "issuerName": "./node_modules/@popperjs/core/lib/modifiers/hide.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+      "issuerId": "bO7i",
+      "issuerName": "./node_modules/@popperjs/core/lib/createPopper.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1226588,14 +1226253,9 @@
           "name": "./node_modules/@popperjs/core/lib/index.js"
         },
         {
-          "id": "OcOZ",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/popper.js",
-          "name": "./node_modules/@popperjs/core/lib/popper.js"
-        },
-        {
-          "id": "HWy5",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/modifiers/hide.js",
-          "name": "./node_modules/@popperjs/core/lib/modifiers/hide.js"
+          "id": "bO7i",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@popperjs/core/lib/createPopper.js",
+          "name": "./node_modules/@popperjs/core/lib/createPopper.js"
         }
       ],
       "failed": false,
@@ -1232642,9 +1232302,9 @@
         "controls-test-web-part",
         "ootb-fields-field-customizer"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-      "issuerId": "9z8q",
-      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
+      "issuerId": "lkME",
+      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1232675,11 +1232335,6 @@
           "id": "lkME",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
-        },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
         }
       ],
       "failed": false,
@@ -1235739,9 +1235394,9 @@
         "controls-test-web-part",
         "ootb-fields-field-customizer"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-      "issuerId": "uNIk",
-      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+      "issuerId": "jsqa",
+      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1235774,14 +1235429,9 @@
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
         {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
-        {
-          "id": "uNIk",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js"
+          "id": "jsqa",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js",
+          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenuItem.js"
         }
       ],
       "failed": false,
@@ -1242260,11 +1241910,6 @@
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js",
           "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/index.js"
         },
-        {
-          "id": "9z8q",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.js"
-        },
         {
           "id": "uNIk",
           "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.base.js",