@elyra/canvas 12.32.2 → 12.34.0

package/dist/toolbar-cdb38f4a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-cdb38f4a.js","sources":["../node_modules/lodash/_trimmedEndIndex.js","../node_modules/lodash/_baseTrim.js","../node_modules/lodash/toNumber.js","../node_modules/lodash/toFinite.js","../node_modules/lodash/toInteger.js","../src/toolbar/toolbar-utils.js","../src/toolbar/toolbar-action-sub-area.jsx","../src/toolbar/toolbar-action-item.jsx","../assets/images/zoom_to_fit.svg","../assets/images/arrange_horizontally.svg","../assets/images/arrange_vertically.svg","../assets/images/palette/palette_open.svg","../assets/images/palette/palette_close.svg","../assets/images/notification_counter_icon.svg","../src/toolbar/toolbar-overflow-menu.jsx","../src/toolbar/toolbar-overflow-item.jsx","../src/toolbar/toolbar-divider-item.jsx","../src/toolbar/toolbar.jsx"],"sourcesContent":["/** Used to match a single whitespace character. */\nvar reWhitespace = /\\s/;\n\n/**\n * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace\n * character of `string`.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {number} Returns the index of the last non-whitespace character.\n */\nfunction trimmedEndIndex(string) {\n  var index = string.length;\n\n  while (index-- && reWhitespace.test(string.charAt(index))) {}\n  return index;\n}\n\nmodule.exports = trimmedEndIndex;\n","var trimmedEndIndex = require('./_trimmedEndIndex');\n\n/** Used to match leading whitespace. */\nvar reTrimStart = /^\\s+/;\n\n/**\n * The base implementation of `_.trim`.\n *\n * @private\n * @param {string} string The string to trim.\n * @returns {string} Returns the trimmed string.\n */\nfunction baseTrim(string) {\n  return string\n    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')\n    : string;\n}\n\nmodule.exports = baseTrim;\n","var baseTrim = require('./_baseTrim'),\n    isObject = require('./isObject'),\n    isSymbol = require('./isSymbol');\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n  if (typeof value == 'number') {\n    return value;\n  }\n  if (isSymbol(value)) {\n    return NAN;\n  }\n  if (isObject(value)) {\n    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n    value = isObject(other) ? (other + '') : other;\n  }\n  if (typeof value != 'string') {\n    return value === 0 ? value : +value;\n  }\n  value = baseTrim(value);\n  var isBinary = reIsBinary.test(value);\n  return (isBinary || reIsOctal.test(value))\n    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n    : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n","var toNumber = require('./toNumber');\n\n/** Used as references for various `Number` constants. */\nvar INFINITY = 1 / 0,\n    MAX_INTEGER = 1.7976931348623157e+308;\n\n/**\n * Converts `value` to a finite number.\n *\n * @static\n * @memberOf _\n * @since 4.12.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted number.\n * @example\n *\n * _.toFinite(3.2);\n * // => 3.2\n *\n * _.toFinite(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toFinite(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toFinite('3.2');\n * // => 3.2\n */\nfunction toFinite(value) {\n  if (!value) {\n    return value === 0 ? value : 0;\n  }\n  value = toNumber(value);\n  if (value === INFINITY || value === -INFINITY) {\n    var sign = (value < 0 ? -1 : 1);\n    return sign * MAX_INTEGER;\n  }\n  return value === value ? value : 0;\n}\n\nmodule.exports = toFinite;\n","var toFinite = require('./toFinite');\n\n/**\n * Converts `value` to an integer.\n *\n * **Note:** This method is loosely based on\n * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted integer.\n * @example\n *\n * _.toInteger(3.2);\n * // => 3\n *\n * _.toInteger(Number.MIN_VALUE);\n * // => 0\n *\n * _.toInteger(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toInteger('3.2');\n * // => 3\n */\nfunction toInteger(value) {\n  var result = toFinite(value),\n      remainder = result % 1;\n\n  return result === result ? (remainder ? result - remainder : result) : 0;\n}\n\nmodule.exports = toInteger;\n","/*\n * Copyright 2017-2023 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport const genElementByClass = (className, containingDiv) => {\n\tconst elements = containingDiv.getElementsByClassName(className);\n\n\tif (elements && elements.length > 0) {\n\t\treturn elements[0];\n\t}\n\treturn null;\n};\n\nexport const genRectByClass = (className, containingDiv) => {\n\tconst element = genElementByClass(className, containingDiv);\n\n\tif (element) {\n\t\treturn element.getBoundingClientRect();\n\t}\n\treturn null;\n};\n","/*\n * Copyright 2023 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n*/\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { genElementByClass, genRectByClass } from \"./toolbar-utils.js\";\n\nclass ToolbarActionSubArea extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.onClick = this.onClick.bind(this);\n\t}\n\n\tcomponentDidMount() {\n\t\tif (this.props.containingDivId) {\n\t\t\tthis.adjustSubAreaPosition();\n\t\t}\n\t}\n\n\t// If we are given a closeSubArea function then call it. We will only have\n\t// such a function if the user has specified the closeSubAreaOnClick prop for\n\t// the parent action AND provided the user has not stopped event propogation.\n\tonClick() {\n\t\tif (this.props.closeSubArea) {\n\t\t\tthis.props.closeSubArea();\n\t\t}\n\t}\n\n\t// Adjust the position of the sub-area to make sure it doesn't extend\n\t// outside the containing divs boundary. We need to do this after the subarea\n\t// has been mounted so we can query its size and position.\n\tadjustSubAreaPosition() {\n\t\tconst containingDiv = document.getElementById(this.props.containingDivId);\n\t\tconst containingDivRect = containingDiv.getBoundingClientRect();\n\n\t\tconst classToGet = this.props.actionObj.subPanel ? \"subpanel\" : \"submenu\";\n\n\t\tconst thisArea = genElementByClass(classToGet, containingDiv);\n\t\tconst thisAreaRect = genRectByClass(classToGet, containingDiv);\n\n\t\tconst outsideBottom = thisAreaRect.bottom - containingDivRect.bottom;\n\t\tconst outsideRight = thisAreaRect.right - containingDivRect.right;\n\n\t\tif (this.props.expandDirection === \"vertical\") {\n\t\t\tif (outsideBottom > 0) {\n\t\t\t\tconst newTop = this.props.actionItemRect.top - thisAreaRect.height;\n\t\t\t\tthisArea.style.top = newTop + \"px\";\n\t\t\t}\n\n\t\t\tif (outsideRight > 0) {\n\t\t\t\tconst newLeft = this.props.actionItemRect.left - outsideRight - 2;\n\t\t\t\tthisArea.style.left = newLeft + \"px\";\n\t\t\t}\n\n\t\t} else {\n\t\t\tif (outsideBottom > 0) {\n\t\t\t\tconst newTop = thisAreaRect.top - outsideBottom - 2;\n\t\t\t\tthisArea.style.top = newTop + \"px\";\n\t\t\t}\n\n\t\t\tif (outsideRight > 0) {\n\t\t\t\tconst newLeft = this.props.actionItemRect.left - thisAreaRect.width;\n\t\t\t\tthisArea.style.left = newLeft + \"px\";\n\t\t\t}\n\t\t}\n\t}\n\n\tgenerateSubAreaStyle() {\n\t\tif (this.props.expandDirection === \"vertical\") {\n\t\t\treturn {\n\t\t\t\ttop: this.props.actionItemRect.bottom + 1,\n\t\t\t\tleft: this.props.actionItemRect.left\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\ttop: this.props.actionItemRect.top - 1,\n\t\t\tleft: this.props.actionItemRect.left + this.props.actionItemRect.width\n\t\t};\n\t}\n\n\trender() {\n\t\tconst style = this.generateSubAreaStyle();\n\n\t\tif (this.props.actionObj.subPanel) {\n\t\t\treturn (\n\t\t\t\t<div style={style} className={\"toolbar-popover-list subpanel\"} onClick={this.onClick}>\n\t\t\t\t\t{this.props.actionObj.subPanel}\n\t\t\t\t</div>\n\t\t\t);\n\t\t} else if (this.props.actionObj.subMenu) {\n\t\t\tconst subMenuItems = this.props.generateToolbarItems(this.props.actionObj.subMenu, true, false);\n\n\t\t\treturn (\n\t\t\t\t<div style={style} className={\"toolbar-popover-list submenu\"} onClick={this.onClick}>\n\t\t\t\t\t{subMenuItems}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t}\n}\n\nToolbarActionSubArea.propTypes = {\n\tactionObj: PropTypes.object.isRequired,\n\tgenerateToolbarItems: PropTypes.func.isRequired,\n\tcloseSubArea: PropTypes.func,\n\tactionItemRect: PropTypes.object.isRequired,\n\texpandDirection: PropTypes.string.isRequired,\n\tcontainingDivId: PropTypes.string\n};\n\nexport default ToolbarActionSubArea;\n","/*\n * Copyright 2017-2023 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport Tooltip from \"../tooltip/tooltip.jsx\";\nimport ArrangeHorizontally from \"./../../assets/images/arrange_horizontally.svg\";\nimport ArrangeVertically from \"./../../assets/images/arrange_vertically.svg\";\nimport ToggleNotificationPanel from \"./../../assets/images/notification_counter_icon.svg\";\nimport PaletteClose from \"./../../assets/images/palette/palette_close.svg\";\nimport PaletteOpen from \"./../../assets/images/palette/palette_open.svg\";\nimport ZoomToFit from \"./../../assets/images/zoom_to_fit.svg\";\n\nimport { Button } from \"carbon-components-react\";\nimport SVG from \"react-inlinesvg\";\nimport classNames from \"classnames\";\nimport ToolbarActionSubArea from \"./toolbar-action-sub-area.jsx\";\nimport { StopFilledAlt16, Play16, Undo16, Redo16, Chat16, ChatOff16, Result16,\n\tCut16, Copy16, Paste16, Edit16,\tColorPalette16, Maximize16, Minimize16,\n\tLaunch16, AddComment16, TrashCan16, ZoomIn16, ZoomOut16,\n\tChevronRight16, ChevronDown16, ChevronUp16 } from \"@carbon/icons-react\";\nimport { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO,\n\tTOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD,\n\tTOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, TOOLBAR_COLOR_BACKGROUND,\n\tTOOLBAR_DELETE_SELECTED_OBJECTS, TOOLBAR_DELETE_LINK,\n\tTOOLBAR_ZOOM_IN, TOOLBAR_ZOOM_OUT, TOOLBAR_ZOOM_FIT,\n\tTOOLBAR_ARRANGE_HORIZONALLY, TOOLBAR_ARRANGE_VERTICALLY,\n\tTOOLBAR_OPEN_PALETTE, TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL,\n\tTOOLBAR_SHOW_COMMENTS, TOOLBAR_HIDE_COMMENTS,\n\tTOOLBAR_EXPAND_SUPERNODE_IN_PLACE, TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE,\n\tTOOLBAR_EXPAND_SUPERNODE_FULL_PAGE, TOOLBAR_SET_NODE_LABEL_EDIT, TOOLBAR_SET_COMMENT_EDIT_MODE }\n\tfrom \"../common-canvas/constants/canvas-constants.js\";\n\nclass ToolbarActionItem extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tsubAreaDisplayed: false\n\t\t};\n\n\t\tthis.actionClickHandler = this.actionClickHandler.bind(this);\n\t\tthis.onMouseEnter = this.onMouseEnter.bind(this);\n\t\tthis.onMouseLeave = this.onMouseLeave.bind(this);\n\t\tthis.openSubArea = this.openSubArea.bind(this);\n\t\tthis.closeSubArea = this.closeSubArea.bind(this);\n\t\tthis.clickOutside = this.clickOutside.bind(this);\n\t}\n\n\tcomponentDidMount() {\n\t\tif (this.props.actionObj.getSubPanelCloseFn) {\n\t\t\tthis.props.actionObj.getSubPanelCloseFn(this.closeSubArea);\n\t\t}\n\t}\n\n\t// We must remove the eventListener in case this class is unmounted due\n\t// to the toolbar getting redrawn.\n\tcomponentWillUnmount() {\n\t\tdocument.removeEventListener(\"click\", this.clickOutside, false);\n\t}\n\n\tonMouseEnter(evt) {\n\t\tif ((this.props.actionObj.subMenu || this.props.actionObj.subPanel) && this.props.overflow) {\n\t\t\tthis.openSubArea();\n\t\t}\n\t}\n\n\tonMouseLeave(evt) {\n\t\tif ((this.props.actionObj.subMenu || this.props.actionObj.subPanel) && this.props.overflow) {\n\t\t\tthis.closeSubArea();\n\t\t}\n\t}\n\n\t// Returns a default icon, if there is one, for the action passed in.\n\t// It also may be set to disabled state.\n\tgetDefaultIcon(actionObj) {\n\t\tconst disabled = !actionObj.enable;\n\n\t\tswitch (actionObj.action) {\n\t\tcase (TOOLBAR_STOP):\n\t\t\treturn <StopFilledAlt16 disabled={disabled} />;\n\t\tcase (TOOLBAR_RUN):\n\t\t\treturn <Play16 disabled={disabled} />;\n\t\tcase (TOOLBAR_EXPAND_SUPERNODE_IN_PLACE):\n\t\t\treturn <Maximize16 disabled={disabled} />;\n\t\tcase (TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE):\n\t\t\treturn <Minimize16 disabled={disabled} />;\n\t\tcase (TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE):\n\t\t\treturn <Launch16 disabled={disabled} />;\n\t\tcase (TOOLBAR_UNDO):\n\t\t\treturn <Undo16 disabled={disabled} />;\n\t\tcase (TOOLBAR_REDO):\n\t\t\treturn <Redo16 disabled={disabled} />;\n\t\tcase (TOOLBAR_CLIPBOARD):\n\t\t\treturn <Result16 disabled={disabled} />;\n\t\tcase (TOOLBAR_CUT):\n\t\t\treturn <Cut16 disabled={disabled} />;\n\t\tcase (TOOLBAR_COPY):\n\t\t\treturn <Copy16 disabled={disabled} />;\n\t\tcase (TOOLBAR_PASTE):\n\t\t\treturn <Paste16 disabled={disabled} />;\n\t\tcase (TOOLBAR_CREATE_COMMENT):\n\t\tcase (TOOLBAR_CREATE_AUTO_COMMENT):\n\t\t\treturn <AddComment16 disabled={disabled} />;\n\t\tcase (TOOLBAR_SHOW_COMMENTS):\n\t\t\treturn <Chat16 disabled={disabled} />;\n\t\tcase (TOOLBAR_HIDE_COMMENTS):\n\t\t\treturn <ChatOff16 disabled={disabled} />;\n\t\tcase (TOOLBAR_COLOR_BACKGROUND):\n\t\t\treturn <ColorPalette16 disabled={disabled} />;\n\t\tcase (TOOLBAR_DELETE_LINK):\n\t\tcase (TOOLBAR_DELETE_SELECTED_OBJECTS):\n\t\t\treturn <TrashCan16 disabled={disabled} />;\n\t\tcase (TOOLBAR_SET_COMMENT_EDIT_MODE):\n\t\tcase (TOOLBAR_SET_NODE_LABEL_EDIT):\n\t\t\treturn <Edit16 disabled={disabled} />;\n\t\tcase (TOOLBAR_ZOOM_IN):\n\t\t\treturn <ZoomIn16 disabled={disabled} />;\n\t\tcase (TOOLBAR_ZOOM_OUT):\n\t\t\treturn <ZoomOut16 disabled={disabled} />;\n\n\t\tcase (TOOLBAR_ZOOM_FIT):\n\t\t\treturn <SVG src={ZoomToFit} disabled={disabled} />;\n\t\tcase (TOOLBAR_ARRANGE_HORIZONALLY):\n\t\t\treturn <SVG src={ArrangeHorizontally} disabled={disabled} />;\n\t\tcase (TOOLBAR_ARRANGE_VERTICALLY):\n\t\t\treturn <SVG src={ArrangeVertically} disabled={disabled} />;\n\t\tcase (TOOLBAR_OPEN_PALETTE):\n\t\t\treturn <SVG src={PaletteOpen} disabled={disabled} />;\n\t\tcase (TOOLBAR_CLOSE_PALETTE):\n\t\t\treturn <SVG src={PaletteClose} disabled={disabled} />;\n\t\tcase (TOOLBAR_TOGGLE_NOTIFICATION_PANEL):\n\t\t\treturn <SVG src={ToggleNotificationPanel} disabled={disabled} />;\n\n\t\tdefault:\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tgenerateLabel(label, disable, overflow, incLabelWithIcon) {\n\t\tlet className = \"toolbar-icon-label\";\n\t\tclassName += this.generateLabelType(overflow, incLabelWithIcon);\n\t\tclassName += disable ? \" disabled\" : \"\";\n\t\treturn (<div className={className}>{label}</div>);\n\t}\n\n\tgenerateLabelType(overflow, inLabelWithIcon) {\n\t\tif (overflow) {\n\t\t\treturn \" overflow\";\n\t\t} else if (inLabelWithIcon === \"before\") {\n\t\t\treturn \" before\";\n\t\t} else if (inLabelWithIcon === \"after\") {\n\t\t\treturn \" after\";\n\t\t}\n\t\treturn \"\";\n\t}\n\n\tgenerateIcon(actionObj) {\n\t\tlet icon = this.getDefaultIcon(actionObj);\n\n\t\t// Host application provided icon. This will override any default icon.\n\t\tif (actionObj.iconEnabled) {\n\t\t\tconst iconEnabled = actionObj.iconEnabled;\n\t\t\tconst iconDisabled = actionObj.iconDisabled || actionObj.iconEnabled;\n\t\t\tconst customIcon = actionObj.enable ? iconEnabled : iconDisabled;\n\t\t\tconst id = \"toolbar-icon-\" + this.props.instanceId + \" -\" + actionObj.action;\n\n\t\t\tif (typeof customIcon === \"string\") {\n\t\t\t\ticon = (<SVG id={id} src={customIcon} disabled={!actionObj.enable} />);\n\t\t\t} else {\n\t\t\t\ticon = customIcon;\n\t\t\t}\n\t\t}\n\n\t\tif (icon) {\n\t\t\treturn (\n\t\t\t\t<div className={\"toolbar-icon\"}>\n\t\t\t\t\t{icon}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t}\n\n\tclickOutside(evt) {\n\t\tif (this.state.subAreaDisplayed) {\n\t\t\tconst items = document.getElementsByClassName(this.generateActionName());\n\t\t\tconst isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;\n\n\t\t\tif (!isOver) {\n\t\t\t\tthis.closeSubArea();\n\t\t\t}\n\t\t}\n\t}\n\n\topenSubArea() {\n\t\tthis.setState({ subAreaDisplayed: true });\n\t}\n\n\tcloseSubArea() {\n\t\tthis.setState({ subAreaDisplayed: false });\n\t}\n\n\tactionClickHandler(evt) {\n\t\tif (this.props.actionObj.subMenu || this.props.actionObj.subPanel) {\n\t\t\tif (this.state.showExtendedMenu) {\n\t\t\t\tdocument.removeEventListener(\"click\", this.clickOutside, false);\n\t\t\t} else {\n\t\t\t\tdocument.addEventListener(\"click\", this.clickOutside, false);\n\t\t\t}\n\n\t\t\tif (this.props.setResizeHandler) {\n\t\t\t\tif (this.state.subAreaDisplayed) {\n\t\t\t\t\tthis.props.setResizeHandler(null);\n\t\t\t\t} else {\n\t\t\t\t\tthis.props.setResizeHandler(this.closeSubArea);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (!this.props.overflow) {\n\t\t\t\tthis.setState({ subAreaDisplayed: !this.state.subAreaDisplayed });\n\t\t\t}\n\t\t} else {\n\t\t\tthis.props.toolbarActionHandler(this.props.actionObj.action, evt);\n\t\t}\n\t}\n\n\tgenerateButton(actionObj) {\n\t\tlet labelBefore = null;\n\t\tlet labelAfter = null;\n\n\t\tif (this.props.overflow) {\n\t\t\tlabelAfter = this.generateLabel(actionObj.label, !actionObj.enable, true);\n\n\t\t} else if (actionObj.incLabelWithIcon === \"before\") {\n\t\t\tlabelBefore = this.generateLabel(actionObj.label, !actionObj.enable, false, actionObj.incLabelWithIcon);\n\n\t\t} else if (actionObj.incLabelWithIcon === \"after\") {\n\t\t\tlabelAfter = this.generateLabel(actionObj.label, !actionObj.enable, false, actionObj.incLabelWithIcon);\n\t\t}\n\n\t\tconst icon = this.generateIcon(actionObj);\n\t\tconst textContent = actionObj.textContent ? (<div className=\"toolbar-text-content\"> {actionObj.textContent} </div>) : null;\n\n\t\tconst itemContentClassName = classNames(\n\t\t\t\"toolbar-item-content\",\n\t\t\tactionObj.className ? actionObj.className : null,\n\t\t\t{ \"overflow\": this.props.overflow, \"disabled\": !actionObj.enable, \"default\": !actionObj.kind });\n\n\t\t// If no 'kind' is set, use ghost and then override colors using the \"default\" class in innerDivClassName.\n\t\tconst kind = actionObj.kind || \"ghost\";\n\n\t\tconst chevronIcon = this.generateChevronIcon(actionObj);\n\n\t\tlet buttonContent = (\n\t\t\t<div className={itemContentClassName}>\n\t\t\t\t{labelBefore}\n\t\t\t\t{icon}\n\t\t\t\t{labelAfter}\n\t\t\t\t{textContent}\n\t\t\t\t{chevronIcon}\n\t\t\t</div>\n\t\t);\n\n\t\tbuttonContent = this.wrapInTooltip(buttonContent);\n\n\t\t// Only specify an aria label for the button if a label is not displayed\n\t\t// with the button icon.\n\t\tconst ariaLabel = actionObj.incLabelWithIcon ? null : actionObj.label;\n\n\t\tbuttonContent = (\n\t\t\t<Button kind={kind}\n\t\t\t\tonClick={this.actionClickHandler}\n\t\t\t\tdisabled={!actionObj.enable}\n\t\t\t\tonFocus={this.props.onFocus}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tsize={this.props.size}\n\t\t\t>\n\t\t\t\t{buttonContent}\n\t\t\t</Button>\n\t\t);\n\n\t\treturn buttonContent;\n\t}\n\n\t// Returns a chevron icon if the action icon is displaying a sub-menu or\n\t// sub-panel. The chevron will:\n\t//  * point right if this action item is in a drop down menu\n\t//  * point down if this action item is displayed with text in the toolbar\n\t//    and the menu isn't displayed\n\t//  * point up if this action item is displayed with text in the toolbar\n\t//    and the menu is displayed\n\t//  * be a mini-chevron (small triangle in the bottom right of icon) if this\n\t//    action item isn't displayed with text.\n\tgenerateChevronIcon(actionObj) {\n\t\tif (actionObj.subMenu || actionObj.subPanel) {\n\t\t\tif (this.props.overflow) {\n\t\t\t\treturn (<ChevronRight16 />);\n\t\t\t}\n\t\t\tif (actionObj.incLabelWithIcon === \"before\" ||\n\t\t\t\t\tactionObj.incLabelWithIcon === \"after\") {\n\t\t\t\tconst chev = this.state.subAreaDisplayed ? (<ChevronUp16 />) : (<ChevronDown16 />);\n\t\t\t\treturn (<div className={\"toolbar-up-down-chevron\"}>{chev}</div>);\n\t\t\t}\n\t\t\treturn this.generateChevronMini();\n\t\t}\n\t\treturn null;\n\t}\n\n\t// Returns an svg to display the little triangle that appears in the bottom\n\t// right corner of icons that, when clicked, show a drop down menu.\n\tgenerateChevronMini() {\n\t\tconst path = this.props.size === \"sm\" ? \"M 29 29 L 29 23 23 29 Z\" : \"M 37 37 L 37 30 30 37 Z\";\n\t\treturn (\n\t\t\t<svg className=\"toolbar-tick-svg\">\n\t\t\t\t<path d={path} className=\"toolbar-tick-mark\" />\n\t\t\t</svg>\n\t\t);\n\t}\n\n\tgenerateActionName(actionObj) {\n\t\treturn this.props.actionObj.action + \"-action\";\n\t}\n\n\twrapInTooltip(content) {\n\t\tif (!this.props.overflow && (this.showLabelAsTip(this.props.actionObj) || this.props.actionObj.tooltip)) {\n\t\t\tconst actionName = this.generateActionName();\n\t\t\tconst tip = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;\n\t\t\tconst tooltipId = actionName + \"-\" + this.props.instanceId + \"-tooltip\";\n\t\t\tconst enableTooltip = this.props.actionObj.enable || this.props.actionObj.jsx; // JSX 'tools' don't have enable attr so always display a tooltip for them.\n\t\t\tconst direction = this.props.tooltipDirection ? this.props.tooltipDirection : \"bottom\";\n\n\t\t\treturn (\n\t\t\t\t<Tooltip id={tooltipId} tip={tip} disable={!enableTooltip} className=\"icon-tooltip\" direction={direction}>\n\t\t\t\t\t{content}\n\t\t\t\t</Tooltip>\n\t\t\t);\n\t\t}\n\t\treturn content;\n\t}\n\n\t// Returns true if the label should be shown as a tooltip or false if not.\n\t// We do not show the label as a tooltip if it is already shown in the\n\t// toolbar next to the icon (i.e. incLabelWithIcon is set to something).\n\tshowLabelAsTip(actionObj) {\n\t\tif (actionObj.label) {\n\t\t\tif (actionObj.incLabelWithIcon === \"before\" ||\n\t\t\t\t\tactionObj.incLabelWithIcon === \"after\") {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}\n\n\t// Returns a sub-area for a cascading menu item. The sub-area can be either a\n\t// sub-panel which is a div contaiing whatever the caller passes in within the\n\t// supPanel field  OR a sub-menu which is a list of options which is created\n\t// from the array of items the caller passes in the subMenu field.\n\tgenerateSubArea() {\n\t\tconst elements = document.getElementsByClassName(this.generateActionName());\n\t\tconst actionItemRect = elements && elements.length > 0 ? elements[0].getBoundingClientRect() : { top: 0, left: 0, width: 120 };\n\n\t\treturn (\n\t\t\t<ToolbarActionSubArea\n\t\t\t\tactionObj={this.props.actionObj}\n\t\t\t\tgenerateToolbarItems={this.props.generateToolbarItems}\n\t\t\t\tcloseSubArea={this.props.actionObj.closeSubAreaOnClick ? this.closeSubArea : null}\n\t\t\t\tactionItemRect={actionItemRect}\n\t\t\t\tcontainingDivId={this.props.containingDivId}\n\t\t\t\texpandDirection={this.props.overflow ? \"horizontal\" : \"vertical\" }\n\t\t\t/>\n\t\t);\n\t}\n\n\trender() {\n\t\tconst actionObj = this.props.actionObj;\n\t\tconst actionName = this.generateActionName();\n\t\tlet divContent = null;\n\n\t\tif (actionObj.jsx) {\n\t\t\tdivContent = this.wrapInTooltip(actionObj.jsx);\n\t\t} else {\n\t\t\tdivContent = this.generateButton(actionObj);\n\t\t}\n\n\t\tconst isToolbarItem = this.props.overflow ? null : true; // null wil make data-toolbar-item be removed\n\t\tconst kindAsClass = actionObj.kind ? actionObj.kind : \"default\";\n\n\t\tconst itemClassName = classNames(\n\t\t\t{ \"toolbar-overflow-menu-item\": this.props.overflow,\n\t\t\t\t\"toolbar-item\": !this.props.overflow && !actionObj.jsx,\n\t\t\t\t\"toolbar-jsx-item\": !this.props.overflow && actionObj.jsx,\n\t\t\t\t\"toolbar-overflow-jsx-item\": this.props.overflow && actionObj.jsx,\n\t\t\t\t\"toolbar-item-selected\": actionObj.isSelected },\n\t\t\tkindAsClass,\n\t\t\tactionName);\n\n\t\tconst subArea = this.state.subAreaDisplayed ? this.generateSubArea() : null;\n\n\t\treturn (\n\t\t\t<div className={itemClassName} data-toolbar-item={isToolbarItem} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>\n\t\t\t\t{divContent}\n\t\t\t\t{subArea}\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nToolbarActionItem.propTypes = {\n\tactionObj: PropTypes.shape({\n\t\taction: PropTypes.string.isRequired,\n\t\tlabel: PropTypes.oneOfType([\n\t\t\tPropTypes.string,\n\t\t\tPropTypes.object\n\t\t]),\n\t\tincLabelWithIcon: PropTypes.oneOf([\"no\", \"before\", \"after\"]),\n\t\tenable: PropTypes.bool,\n\t\ticonEnabled: PropTypes.oneOfType([\n\t\t\tPropTypes.string,\n\t\t\tPropTypes.object\n\t\t]),\n\t\ticonDisabled: PropTypes.oneOfType([\n\t\t\tPropTypes.string,\n\t\t\tPropTypes.object\n\t\t]),\n\t\tclassName: PropTypes.string,\n\t\ttextContent: PropTypes.string,\n\t\tisSelected: PropTypes.bool,\n\t\tkind: PropTypes.string,\n\t\tcloseSubAreaOnClick: PropTypes.bool,\n\t\tgetSubPanelCloseFn: PropTypes.func,\n\t\tsubMenu: PropTypes.array,\n\t\tsubPanel: PropTypes.object,\n\t\tjsx: PropTypes.object,\n\t\ttooltip: PropTypes.oneOfType([\n\t\t\tPropTypes.string,\n\t\t\tPropTypes.object,\n\t\t\tPropTypes.func\n\t\t])\n\t}),\n\ttooltipDirection: PropTypes.oneOf([\"top\", \"bottom\"]),\n\ttoolbarActionHandler: PropTypes.func.isRequired,\n\tgenerateToolbarItems: PropTypes.func.isRequired,\n\tsetResizeHandler: PropTypes.func,\n\tinstanceId: PropTypes.number.isRequired,\n\tcontainingDivId: PropTypes.string,\n\toverflow: PropTypes.bool,\n\tonFocus: PropTypes.func,\n\tsize: PropTypes.oneOf([\"md\", \"sm\"])\n};\n\nexport default ToolbarActionItem;\n","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22currentColor%22%3E%20%3Cpath%20d%3D%22M6%2C7.5h4v1H6Z%22%2F%3E%20%3Cpath%20d%3D%22M4%2C12h8a.94.94%2C0%2C0%2C0%2C1-1V5a.94.94%2C0%2C0%2C0-1-1H4A.94.94%2C0%2C0%2C0%2C3%2C5v6A.94.94%2C0%2C0%2C0%2C4%2C12ZM4%2C5h8v6H4Z%22%2F%3E%20%3Cpolygon%20points%3D%222%203.5%201%203.5%201%201%203.5%201%203.5%202%202%202%202%203.5%22%2F%3E%20%3Cpolygon%20points%3D%2215%203.5%2014%203.5%2014%202%2012.5%202%2012.5%201%2015%201%2015%203.5%22%2F%3E%20%3Cpolygon%20points%3D%2215%2015%2012.5%2015%2012.5%2014%2014%2014%2014%2012.5%2015%2012.5%2015%2015%22%2F%3E%20%3Cpolygon%20points%3D%223.5%2015%201%2015%201%2012.5%202%2012.5%202%2014%203.5%2014%203.5%2015%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Crect%20x%3D%221.5%22%20y%3D%222%22%20width%3D%2213%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221.5%22%20y%3D%2213%22%20width%3D%2213%22%20height%3D%221%22%2F%3E%3Cpath%20d%3D%22M7%2C10.5H2a.47.47%2C0%2C0%2C1-.5-.5V6A.47.47%2C0%2C0%2C1%2C2%2C5.5H7a.47.47%2C0%2C0%2C1%2C.5.5v4A.47.47%2C0%2C0%2C1%2C7%2C10.5Zm-4.5-1h4v-3h-4Z%22%2F%3E%3Cpath%20d%3D%22M14%2C10.5H9a.47.47%2C0%2C0%2C1-.5-.5V6A.47.47%2C0%2C0%2C1%2C9%2C5.5h5a.47.47%2C0%2C0%2C1%2C.5.5v4A.47.47%2C0%2C0%2C1%2C14%2C10.5Zm-4.5-1h4v-3h-4Z%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Crect%20x%3D%222%22%20y%3D%221.5%22%20width%3D%221%22%20height%3D%2213%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%221.5%22%20width%3D%221%22%20height%3D%2213%22%2F%3E%3Cpath%20d%3D%22M10.5%2C7.5h-5A.47.47%2C0%2C0%2C1%2C5%2C7V3a.47.47%2C0%2C0%2C1%2C.5-.5h5A.47.47%2C0%2C0%2C1%2C11%2C3V7A.47.47%2C0%2C0%2C1%2C10.5%2C7.5ZM6%2C6.5h4v-3H6Z%22%2F%3E%3Cpath%20d%3D%22M10.5%2C13.5h-5A.47.47%2C0%2C0%2C1%2C5%2C13V9a.47.47%2C0%2C0%2C1%2C.5-.5h5A.47.47%2C0%2C0%2C1%2C11%2C9v4A.47.47%2C0%2C0%2C1%2C10.5%2C13.5ZM6%2C12.5h4v-3H6Z%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22currentColor%22%3E%20%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M28%2C4H4A2%2C2%2C0%2C0%2C0%2C2%2C6V26a2%2C2%2C0%2C0%2C0%2C2%2C2H28a2%2C2%2C0%2C0%2C0%2C2-2V6A2%2C2%2C0%2C0%2C0%2C28%2C4Zm0%2C22H12V17.1h8.9l-2.5%2C2.5%2C1.5%2C1.5L25%2C16l-5.1-5.1-1.5%2C1.5%2C2.5%2C2.5H12V6H28Z%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22currentColor%22%3E%20%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M28%2C4H4A2%2C2%2C0%2C0%2C0%2C2%2C6V26a2%2C2%2C0%2C0%2C0%2C2%2C2H28a2%2C2%2C0%2C0%2C0%2C2-2V6A2%2C2%2C0%2C0%2C0%2C28%2C4Zm0%2C11H19.1l2.5-2.5L20.1%2C11%2C15%2C16l5.1%2C5.1%2C1.5-1.5-2.5-2.5H28V26H12V6H28Z%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22currentColor%22%3E%20%3Cpath%20d%3D%22M27%2C12V27H5V5H20V3H5A2%2C2%2C0%2C0%2C0%2C3%2C5V27a2%2C2%2C0%2C0%2C0%2C2%2C2H27a2%2C2%2C0%2C0%2C0%2C2-2V12Z%22%2F%3E%20%3Ccircle%20class%3D%22dot%22%20cx%3D%2226.5%22%20cy%3D%225.5%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E\"","/*\n * Copyright 2017-2023 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { genElementByClass, genRectByClass } from \"./toolbar-utils.js\";\n\nclass ToolbarOverflowMenu extends React.Component {\n\n\tcomponentDidMount() {\n\t\tif (this.props.containingDivId) {\n\t\t\tthis.setSubAreaStyle();\n\t\t}\n\t}\n\n\tsetSubAreaStyle() {\n\t\tconst containingDiv = document.getElementById(this.props.containingDivId);\n\t\tconst containingDivRect = containingDiv.getBoundingClientRect();\n\n\t\tconst mainMenu = genElementByClass(\"toolbar-popover-list\", containingDiv);\n\t\tconst mainMenuRect = genRectByClass(\"toolbar-popover-list\", containingDiv);\n\n\t\tif (mainMenuRect) {\n\t\t\tconst overflowButtonRect = genRectByClass(this.props.buttonClass, containingDiv);\n\n\t\t\tif (overflowButtonRect) {\n\t\t\t\tconst contextToolbaRect = genRectByClass(\"context-toolbar\", containingDiv);\n\n\t\t\t\tif (contextToolbaRect) {\n\t\t\t\t\tconst outsideRight = mainMenuRect.right - containingDivRect.right;\n\t\t\t\t\tif (outsideRight > 0) {\n\t\t\t\t\t\tconst overflowIconOffsetX = overflowButtonRect.left - contextToolbaRect.left;\n\t\t\t\t\t\tmainMenu.style.left = (overflowIconOffsetX - outsideRight - 2) + \"px\";\n\t\t\t\t\t}\n\n\t\t\t\t\tconst outsideBottom = mainMenuRect.bottom - containingDivRect.bottom;\n\t\t\t\t\tif (outsideBottom > 0) {\n\t\t\t\t\t\tmainMenu.style.top = -mainMenuRect.height + \"px\";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tlet overflowMenu = null;\n\t\tif (this.props.menuItems.length > 0) {\n\t\t\toverflowMenu = (\n\t\t\t\t<div className={\"toolbar-popover-list\"}>\n\t\t\t\t\t{this.props.menuItems}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\t\treturn overflowMenu;\n\t}\n}\n\nToolbarOverflowMenu.propTypes = {\n\tmenuItems: PropTypes.array.isRequired,\n\tcontainingDivId: PropTypes.string,\n\tbuttonClass: PropTypes.string\n};\n\nexport default ToolbarOverflowMenu;\n","/*\n * Copyright 2017-2023 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { v4 as uuid4 } from \"uuid\";\nimport { Button } from \"carbon-components-react\";\nimport { OverflowMenuVertical16 } from \"@carbon/icons-react\";\nimport ToolbarOverflowMenu from \"./toolbar-overflow-menu.jsx\";\n\nclass ToolbarOverflowItem extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tshowExtendedMenu: false\n\t\t};\n\t\tthis.uuid = uuid4();\n\t\tthis.toggleExtendedMenu = this.toggleExtendedMenu.bind(this);\n\t\tthis.clickOutside = this.clickOutside.bind(this);\n\t}\n\n\t// We must remove the eventListener in case this class is unmounted due\n\t// to the toolbar getting redrawn.\n\tcomponentWillUnmount() {\n\t\tdocument.removeEventListener(\"click\", this.clickOutside, false);\n\t}\n\n\tgenOverflowButtonClass() {\n\t\treturn \"toolbar-spacer toolbar-index-\" + this.props.index + \" toolbar-uuid-\" + this.uuid;\n\t}\n\n\ttoggleExtendedMenu() {\n\t\tif (this.state.showExtendedMenu) {\n\t\t\tdocument.removeEventListener(\"click\", this.clickOutside, false);\n\t\t} else {\n\t\t\tdocument.addEventListener(\"click\", this.clickOutside, false);\n\t\t}\n\n\t\tif (this.props.setResizeHandler) {\n\t\t\tif (this.state.showExtendedMenu) {\n\t\t\t\tthis.props.setResizeHandler(null);\n\t\t\t} else {\n\t\t\t\tthis.props.setResizeHandler(() => {\n\t\t\t\t\tthis.setState({ showExtendedMenu: false });\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\tthis.setState({ showExtendedMenu: !this.state.showExtendedMenu });\n\t}\n\n\tclickOutside(evt) {\n\t\tif (this.state.showExtendedMenu) {\n\t\t\tconst items = document.getElementsByClassName(\"toolbar-uuid-\" + this.uuid);\n\t\t\tconst isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;\n\n\t\t\tif (!isOver) {\n\t\t\t\tthis.setState({ showExtendedMenu: false });\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tif (this.props.setResizeHandler && !this.state.showExtendedMenu) {\n\t\t\tthis.props.setResizeHandler(null);\n\t\t}\n\n\t\tlet overflowMenu = null;\n\t\tif (this.state.showExtendedMenu) {\n\t\t\tconst menuItems = this.props.generateExtensionMenuItems(this.props.index);\n\t\t\toverflowMenu = (\n\t\t\t\t<ToolbarOverflowMenu\n\t\t\t\t\tmenuItems={menuItems}\n\t\t\t\t\tcontainingDivId={this.props.containingDivId}\n\t\t\t\t\tbuttonClass={\"toolbar-uuid-\" + this.uuid}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div className={this.genOverflowButtonClass()} >\n\t\t\t\t<div className={\"toolbar-overflow-item\"}>\n\t\t\t\t\t<Button kind=\"ghost\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\tonClick={this.toggleExtendedMenu}\n\t\t\t\t\t\tonFocus={this.props.onFocus}\n\t\t\t\t\t\taria-label={this.props.label}\n\t\t\t\t\t\tsize={this.props.size}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"toolbar-item-content default\">\n\t\t\t\t\t\t\t<div className=\"toolbar-icon\">\n\t\t\t\t\t\t\t\t<OverflowMenuVertical16 />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t\t{overflowMenu}\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nToolbarOverflowItem.propTypes = {\n\tindex: PropTypes.number.isRequired,\n\tgenerateExtensionMenuItems: PropTypes.func,\n\tsetResizeHandler: PropTypes.func,\n\tcontainingDivId: PropTypes.string,\n\tonFocus: PropTypes.func,\n\tlabel: PropTypes.string,\n\tsize: PropTypes.oneOf([\"md\", \"sm\"])\n};\n\nexport default ToolbarOverflowItem;\n","/*\n * Copyright 2017-2023 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nclass ToolbarDividerItem extends React.Component {\n\n\trender() {\n\t\tconst dividerClassName = this.props.overflow ? \"toolbar-divider-overflow\" : \"toolbar-divider\";\n\n\t\t// Add a space as content. When using display: inline-block the div needs\n\t\t// some content so it is displayed inline with the other elements of the\n\t\t// toolbar. With no content it is displayed above (!) the other elements.\n\t\treturn (\n\t\t\t<div className={dividerClassName} data-toolbar-item tabIndex={-1} aria-hidden >&nbsp;</div>\n\t\t);\n\t}\n}\n\nToolbarDividerItem.propTypes = {\n\toverflow: PropTypes.bool\n};\n\nexport default ToolbarDividerItem;\n","/*\n * Copyright 2017-2023 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport ReactResizeDetector from \"react-resize-detector\";\n\nimport ToolbarActionItem from \"./toolbar-action-item.jsx\";\nimport ToolbarOverflowItem from \"./toolbar-overflow-item.jsx\";\nimport ToolbarDividerItem from \"./toolbar-divider-item.jsx\";\n\nclass Toolbar extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.leftBar = [];\n\t\tthis.rightBar = [];\n\n\t\tthis.resizeHandler = null;\n\t\tthis.onFocus = this.onFocus.bind(this);\n\t\tthis.onToolbarResize = this.onToolbarResize.bind(this);\n\t\tthis.generateExtensionMenuItems = this.generateExtensionMenuItems.bind(this);\n\t\tthis.generateToolbarItems = this.generateToolbarItems.bind(this);\n\t\tthis.setResizeHandler = this.setResizeHandler.bind(this);\n\t}\n\n\t// When the toolbar is initially opened the tabindex for each element may not\n\t// be set correctly because of the time it takes to initially render the DOM.\n\t// Typically, this means the tabindex is not set correctly on whichever\n\t// overflow menu icon is displayed. Therefore, as the user moves the focus\n\t// to the first element in the toolbar (whose tabindex IS typically OK) we\n\t// set the tabindex for all elements again, this then sets the overflow\n\t// icon's tabindex correctly.\n\tonFocus() {\n\t\tthis.setLeftBarItemsTabIndex();\n\t\tthis.setRightBarItemsTabIndex();\n\t}\n\n\t// Prevents the inline-block elements of the left bar being scrolled to\n\t// reveal the wrapped elements, when the user tabs through the elements.\n\tonScroll(evt) {\n\t\tevt.currentTarget.scroll(0, 0);\n\t\tevt.preventDefault();\n\t}\n\n\t// Close the overflow menu, if it is open, when the toolbar is resized in\n\t// case a new menu needs to be displayed with the new toolbar width.\n\tonToolbarResize() {\n\t\tif (this.resizeHandler) {\n\t\t\tthis.resizeHandler();\n\t\t}\n\n\t\tthis.setLeftBarItemsTabIndex();\n\t\tthis.setRightBarItemsTabIndex();\n\t}\n\n\t// Allows the overflow item or action item to set a function that will be\n\t// called when the toolbar is resized. This function causes the menu that\n\t// is currently open to be closed.\n\tsetResizeHandler(resizeHandler) {\n\t\tthis.resizeHandler = resizeHandler;\n\t}\n\n\t// Sets the tabindex on all left bar items so tabbing works correctly. This\n\t// falls into two parts: 1. Set the tabindex for all overflow items to -1\n\t// except the overflow item that is displayed (if there is one). 2. Set the\n\t// tabindex of all hidden regular toolbar items to -1 and to 0 for all\n\t// displayed regular toolbar items.\n\t// Note: We detect the y coordinate of the 'top row' by using the top of\n\t// the first overflow icon. This is because the toolbar might be compressed\n\t// to the extent that the first overflow icon is the only item on the left\n\t// of the toolbar.\n\tsetLeftBarItemsTabIndex() {\n\t\tconst bar = this.getBar(\"left\");\n\t\tif (!bar) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst items = bar.querySelectorAll(\"[data-toolbar-item=true]\") || [];\n\t\tconst topRow = this.getTopOfFirstOverflowItem(bar);\n\t\tlet lastTopRowElement = -1;\n\n\t\tfor (let i = 0; i < items.length; i++) {\n\t\t\tconst itemRect = items[i].getBoundingClientRect();\n\n\t\t\tthis.setOverflowItemButtonTabIndex(i, -1, bar);\n\n\t\t\tif (itemRect.top === topRow) {\n\t\t\t\tlastTopRowElement = i;\n\t\t\t\tthis.setToolbarItemButtonTabIndex(items[i], 0);\n\t\t\t} else {\n\t\t\t\tthis.setToolbarItemButtonTabIndex(items[i], -1);\n\t\t\t}\n\t\t}\n\n\t\tif (lastTopRowElement < items.length) {\n\t\t\tthis.setOverflowItemButtonTabIndex(lastTopRowElement + 1, 0, bar);\n\t\t}\n\t}\n\n\t// Sets the tabindex on all right bar items so tabbing works correctly. This\n\t// involves setting the tabindex of all hidden regular toolbar items to -1\n\t// and to 0 for all displayed regular toolbar items.\n\tsetRightBarItemsTabIndex() {\n\t\tconst items = this.getRightBarItems();\n\t\tlet topRow = 0;\n\n\t\tfor (let i = 0; i < items.length; i++) {\n\t\t\tconst itemRect = items[i].getBoundingClientRect();\n\n\t\t\tif (i === 0) {\n\t\t\t\ttopRow = itemRect.top;\n\t\t\t}\n\n\t\t\tif (itemRect.top === topRow) {\n\t\t\t\tthis.setToolbarItemButtonTabIndex(items[i], 0);\n\t\t\t} else {\n\t\t\t\tthis.setToolbarItemButtonTabIndex(items[i], -1);\n\t\t\t}\n\t\t}\n\t}\n\n\tgetBar(side) {\n\t\tconst id = this.props.instanceId;\n\t\tconst part = document.querySelector(`.toolbar-div[instanceid='${id}'] > .toolbar-${side}-bar`) || [];\n\t\treturn part;\n\t}\n\n\tgetRightBarItems() {\n\t\tconst bar = this.getBar(\"right\");\n\t\tif (!bar) {\n\t\t\treturn [];\n\t\t}\n\t\treturn bar.querySelectorAll(\"[data-toolbar-item=true]\") || [];\n\t}\n\n\tgetTopOfFirstOverflowItem(bar) {\n\t\tconst firstOverflowItem = this.getOverflowItem(0, bar);\n\t\tif (firstOverflowItem) {\n\t\t\tconst rect = firstOverflowItem.getBoundingClientRect();\n\t\t\treturn rect.top;\n\t\t}\n\t\treturn 0;\n\t}\n\n\tgetOverflowItem(index, bar) {\n\t\tconst overflowClassName = \"toolbar-index-\" + index;\n\t\treturn bar.getElementsByClassName(overflowClassName)[0];\n\t}\n\n\tsetToolbarItemButtonTabIndex(item, tabIndex) {\n\t\tconst button = item.querySelector(\"button\");\n\t\tif (button) {\n\t\t\tbutton.setAttribute(\"tabindex\", tabIndex);\n\t\t}\n\t}\n\n\tsetOverflowItemButtonTabIndex(index, tabIndex, bar) {\n\t\tconst overflowItem = this.getOverflowItem(index, bar);\n\t\tif (overflowItem) {\n\t\t\tconst overflowButton = overflowItem.querySelector(\"button\");\n\t\t\tif (overflowButton) {\n\t\t\t\toverflowButton.setAttribute(\"tabindex\", tabIndex);\n\t\t\t}\n\t\t}\n\t}\n\n\tgenerateToolbarItems(actionDefinitions, overflow, withSpacer) {\n\t\tconst newItems = [];\n\n\t\tfor (let i = 0; i < actionDefinitions.length; i++) {\n\t\t\tconst actionObj = actionDefinitions[i];\n\t\t\tif (actionObj) {\n\t\t\t\tif (withSpacer && !actionObj.divider) {\n\t\t\t\t\tnewItems.push(this.generateOverflowIcon(i));\n\t\t\t\t}\n\t\t\t\tnewItems.push(this.generateToolbarItem(actionObj, i, overflow));\n\t\t\t}\n\t\t}\n\t\treturn newItems;\n\t}\n\n\tgenerateToolbarItem(actionObj, i, overflow) {\n\t\tlet jsx = null;\n\t\tif (actionObj) {\n\t\t\tif (actionObj.divider) {\n\t\t\t\tjsx = (\n\t\t\t\t\t<ToolbarDividerItem\n\t\t\t\t\t\tkey={\"toolbar-item-key-\" + i}\n\t\t\t\t\t\toverflow={overflow}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tjsx = (\n\t\t\t\t\t<ToolbarActionItem\n\t\t\t\t\t\tkey={\"toolbar-item-key-\" + i}\n\t\t\t\t\t\tactionObj={actionObj}\n\t\t\t\t\t\ttooltipDirection={this.props.tooltipDirection}\n\t\t\t\t\t\ttoolbarActionHandler={this.props.toolbarActionHandler}\n\t\t\t\t\t\tgenerateToolbarItems={this.generateToolbarItems}\n\t\t\t\t\t\tsetResizeHandler={this.setResizeHandler}\n\t\t\t\t\t\toverflow={overflow}\n\t\t\t\t\t\tinstanceId={this.props.instanceId}\n\t\t\t\t\t\tcontainingDivId={this.props.containingDivId}\n\t\t\t\t\t\tonFocus={this.onFocus}\n\t\t\t\t\t\tsize={this.props.size}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t\treturn jsx;\n\t}\n\n\tgenerateOverflowIcon(index) {\n\t\tconst label = this.props.additionalText ? this.props.additionalText.overflowMenuLabel : \"\";\n\t\tconst jsx = (\n\t\t\t<ToolbarOverflowItem\n\t\t\t\tkey={\"toolbar-overflow-item-key-\" + index}\n\t\t\t\tindex={index}\n\t\t\t\tgenerateExtensionMenuItems={this.generateExtensionMenuItems}\n\t\t\t\tsetResizeHandler={this.setResizeHandler}\n\t\t\t\tcontainingDivId={this.props.containingDivId}\n\t\t\t\tonFocus={this.onFocus}\n\t\t\t\tlabel={label}\n\t\t\t\tsize={this.props.size}\n\t\t\t/>\n\t\t);\n\n\t\treturn jsx;\n\t}\n\n\t// Generates an array of action definition elements that correspond to the\n\t// hidden DOM items on the left and right of the toolbar. For any left bar\n\t// items we can use the leftIndex passed in to split the leftBar defintion\n\t// array, however for the right side we need to loop through the DOM items\n\t// and discover which is hidden and which is displayed.\n\tgenerateExtensionMenuItems(leftIndex) {\n\t\tconst rightItems = this.generateRightOverflowItems();\n\t\trightItems.reverse();\n\n\t\tconst overflowMenuBarItems = this.leftBar.slice(leftIndex).concat(rightItems);\n\t\tconst extensionItems = this.generateToolbarItems(overflowMenuBarItems, true, false);\n\t\treturn extensionItems;\n\t}\n\n\t// Generates an array of right side defintion items that correspond to\n\t// right side DOM items that are hidden.\n\tgenerateRightOverflowItems() {\n\t\tconst newDefItems = [];\n\t\tconst items = this.getRightBarItems();\n\t\tlet topRow = 0;\n\n\t\tfor (let i = 0; i < items.length; i++) {\n\t\t\tconst rect = items[i].getBoundingClientRect();\n\n\t\t\tif (i === 0) {\n\t\t\t\ttopRow = rect.top;\n\t\t\t}\n\n\t\t\tif (rect.top !== topRow) {\n\t\t\t\tnewDefItems.push(this.rightBar[i]);\n\t\t\t}\n\t\t}\n\t\treturn newDefItems;\n\t}\n\n\trender() {\n\t\tthis.leftBar = this.props.config.leftBar || [];\n\t\tthis.rightBar = this.props.config.rightBar || [];\n\t\tthis.rightBar = [...this.rightBar].reverse() || [];\n\n\t\tconst leftItems = this.generateToolbarItems(this.leftBar, false, true);\n\t\tconst rightItems = this.generateToolbarItems(this.rightBar, false, false);\n\n\t\tconst toolbarSizeClass = this.props.size === \"sm\" ? \"toolbar-div toolbar-size-small\" : \"toolbar-div\";\n\t\tconst canvasToolbar = (\n\t\t\t<ReactResizeDetector handleWidth onResize={this.onToolbarResize}>\n\t\t\t\t<div className={toolbarSizeClass} instanceid={this.props.instanceId}>\n\t\t\t\t\t<div className=\"toolbar-left-bar\" onScroll={this.onScroll}>\n\t\t\t\t\t\t{leftItems}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"toolbar-right-bar\">\n\t\t\t\t\t\t{rightItems}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ReactResizeDetector>\n\t\t);\n\t\treturn canvasToolbar;\n\t}\n}\n\nToolbar.propTypes = {\n\tconfig: PropTypes.object.isRequired,\n\tinstanceId: PropTypes.number.isRequired,\n\tcontainingDivId: PropTypes.string,\n\ttoolbarActionHandler: PropTypes.func,\n\ttooltipDirection: PropTypes.string,\n\tadditionalText: PropTypes.object,\n\tsize: PropTypes.oneOf([\"md\", \"sm\"])\n};\n\nexport default Toolbar;\n"],"names":["reWhitespace","trimmedEndIndex","string","index","length","test","charAt","reTrimStart","baseTrim","slice","replace","isObject","require$$1","isSymbol","require$$2","reIsBadHex","reIsBinary","reIsOctal","freeParseInt","parseInt","toNumber_1","value","other","valueOf","isBinary","toNumber","require$$0","INFINITY","toFinite","toInteger_1","result","remainder","genElementByClass","className","containingDiv","elements","getElementsByClassName","genRectByClass","element","getBoundingClientRect","_React$Component","_inherits","ToolbarActionSubArea","_super","_createSuper","props","_this","_classCallCheck","call","onClick","bind","_assertThisInitialized","_createClass","key","this","containingDivId","adjustSubAreaPosition","closeSubArea","document","getElementById","containingDivRect","classToGet","actionObj","subPanel","thisArea","thisAreaRect","outsideBottom","bottom","outsideRight","right","expandDirection","newTop","actionItemRect","top","height","style","newLeft","left","width","generateSubAreaStyle","React","createElement","subMenu","subMenuItems","generateToolbarItems","Component","ToolbarActionItem","state","subAreaDisplayed","actionClickHandler","onMouseEnter","onMouseLeave","openSubArea","clickOutside","getSubPanelCloseFn","removeEventListener","evt","overflow","disabled","enable","action","TOOLBAR_STOP","StopFilledAlt16","TOOLBAR_RUN","Play16","TOOLBAR_EXPAND_SUPERNODE_IN_PLACE","Maximize16","TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE","Minimize16","TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE","Launch16","TOOLBAR_UNDO","Undo16","TOOLBAR_REDO","Redo16","TOOLBAR_CLIPBOARD","Result16","TOOLBAR_CUT","Cut16","TOOLBAR_COPY","Copy16","TOOLBAR_PASTE","Paste16","TOOLBAR_CREATE_COMMENT","TOOLBAR_CREATE_AUTO_COMMENT","AddComment16","TOOLBAR_SHOW_COMMENTS","Chat16","TOOLBAR_HIDE_COMMENTS","ChatOff16","TOOLBAR_COLOR_BACKGROUND","ColorPalette16","TOOLBAR_DELETE_LINK","TOOLBAR_DELETE_SELECTED_OBJECTS","TrashCan16","TOOLBAR_SET_COMMENT_EDIT_MODE","TOOLBAR_SET_NODE_LABEL_EDIT","Edit16","TOOLBAR_ZOOM_IN","ZoomIn16","TOOLBAR_ZOOM_OUT","ZoomOut16","TOOLBAR_ZOOM_FIT","SVG","src","TOOLBAR_ARRANGE_HORIZONALLY","TOOLBAR_ARRANGE_VERTICALLY","TOOLBAR_OPEN_PALETTE","TOOLBAR_CLOSE_PALETTE","TOOLBAR_TOGGLE_NOTIFICATION_PANEL","label","disable","incLabelWithIcon","generateLabelType","inLabelWithIcon","icon","getDefaultIcon","iconEnabled","iconDisabled","customIcon","id","instanceId","items","generateActionName","contains","target","setState","showExtendedMenu","addEventListener","setResizeHandler","toolbarActionHandler","labelBefore","labelAfter","generateLabel","generateIcon","textContent","itemContentClassName","classNames","default","kind","chevronIcon","generateChevronIcon","buttonContent","wrapInTooltip","ariaLabel","Button","onFocus","size","ChevronRight16","chev","ChevronUp16","ChevronDown16","generateChevronMini","path","d","content","showLabelAsTip","tooltip","actionName","tip","tooltipId","enableTooltip","jsx","direction","tooltipDirection","Tooltip","closeSubAreaOnClick","divContent","generateButton","isToolbarItem","kindAsClass","itemClassName","isSelected","subArea","generateSubArea","ToolbarOverflowMenu","apply","arguments","setSubAreaStyle","mainMenu","mainMenuRect","overflowButtonRect","buttonClass","contextToolbaRect","overflowIconOffsetX","overflowMenu","menuItems","ToolbarOverflowItem","uuid","uuid4","toggleExtendedMenu","_this2","generateExtensionMenuItems","genOverflowButtonClass","tabIndex","OverflowMenuVertical16","ToolbarDividerItem","dividerClassName","Toolbar","leftBar","rightBar","resizeHandler","onToolbarResize","setLeftBarItemsTabIndex","setRightBarItemsTabIndex","currentTarget","scroll","preventDefault","bar","getBar","querySelectorAll","topRow","getTopOfFirstOverflowItem","lastTopRowElement","i","itemRect","setOverflowItemButtonTabIndex","setToolbarItemButtonTabIndex","getRightBarItems","side","querySelector","concat","firstOverflowItem","getOverflowItem","overflowClassName","item","button","setAttribute","overflowItem","overflowButton","actionDefinitions","withSpacer","newItems","divider","push","generateOverflowIcon","generateToolbarItem","additionalText","overflowMenuLabel","leftIndex","rightItems","generateRightOverflowItems","reverse","overflowMenuBarItems","newDefItems","rect","config","_toConsumableArray","leftItems","toolbarSizeClass","ReactResizeDetector","handleWidth","onResize","instanceid","onScroll"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.32.2",
+  "version": "12.34.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",
@@ -105,8 +105,8 @@
     "carbon-components": "^10.50.0",
     "carbon-components-react": "^7.50.0",
     "carbon-icons": "^7.0.7",
-    "react": "^16.0.0 || ^18.0.0",
-    "react-dom": "^16.0.0 || ^18.0.0",
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-intl": "^5.0.0",
     "react-redux": "^7.0.0"
   },

package/src/common-canvas/cc-central-items.jsx

@@ -17,6 +17,8 @@
 import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
+import Palette from "../palette/palette.jsx";
+import CommonCanvasTooltip from "./cc-tooltip.jsx";
 import CanvasContents from "./cc-contents.jsx";
 import CommonCanvasToolbar from "./cc-toolbar.jsx";
 import CommonCanvasRightFlyout from "./cc-right-flyout.jsx";
@@ -31,42 +33,84 @@ class CommonCanvasCentralItems extends React.Component {
 		this.logger = new Logger("CC-CentralItems");
 	}
 
+	// Prevent the default behavior (which is to show a plus-sign pointer) as
+	// an object is being dragged over the common canvas components.
+	// Note: this is overriden by the canvas area itself to allow external objects
+	// to be dragged over it.
+	onDragOver(evt) {
+		evt.preventDefault();
+	}
+
+	// Prevent an object being dropped on the common canvas causing a file
+	// download event (which is the default!). Note: this is overriden by the
+	// canvas area itself to allow external objects to be dropped on it.
+	onDrop(evt) {
+		evt.preventDefault();
+	}
+
+	generateClass() {
+		let className = "common-canvas";
+
+		className += (
+			!this.props.enableEditingActions
+				? " config-editing-actions-false"
+				: "");
+
+		className += (
+			this.props.enableParentClass
+				? " " + this.props.enableParentClass
+				: "");
+
+		return className;
+	}
+
 	render() {
 		this.logger.log("render");
 
+		const tip = (<CommonCanvasTooltip canvasController={this.props.canvasController} />);
+		const palette = (<Palette canvasController={this.props.canvasController} containingDivId={this.props.containingDivId} />);
 		const rightFlyout = (<CommonCanvasRightFlyout />);
 		const canvasToolbar = (<CommonCanvasToolbar canvasController={this.props.canvasController} />);
-		const notificationPanel = (<NotificationPanel canvasController={this.props.canvasController} />);
 		const canvasContents = (<CanvasContents canvasController={this.props.canvasController} />);
 		const bottomPanel = (<CanvasBottomPanel canvasController={this.props.canvasController} containingDivId={this.props.containingDivId} />);
 		const topPanel = (<CanvasTopPanel canvasController={this.props.canvasController} containingDivId={this.props.containingDivId} />);
+		const notificationPanel = (<NotificationPanel canvasController={this.props.canvasController} />);
 
-		let centralItems = null;
+		let rightSideItems = null;
 		if (this.props.enableRightFlyoutUnderToolbar) {
-			centralItems = (
-				<div className="common-canvas-right-side-items-under-toolbar">
+			const templateRows = this.props.toolbarIsOpen ? "auto 1fr" : "1fr";
+			const templateCols = this.props.rightFlyoutIsOpen ? "1fr auto" : "1fr";
+			let templateRows2 = this.props.topPanelIsOpen ? "auto 1fr" : "1fr";
+			templateRows2 += this.props.bottomPanelIsOpen ? " auto" : "";
+
+			rightSideItems = (
+				<div className="common-canvas-right-side-items-under-toolbar" style={{ gridTemplateRows: templateRows }}>
 					{canvasToolbar}
-					<div id={this.props.containingDivId} className="common-canvas-items-container-under-toolbar">
-						<div className="common-canvas-with-bottom-panel">
-							{canvasContents}
+					<div id={this.props.containingDivId} className="common-canvas-items-container-under-toolbar" style={{ gridTemplateColumns: templateCols }}>
+						<div className="common-canvas-with-top-and-bottom-panel" style={{ gridTemplateRows: templateRows2 }}>
 							{topPanel}
+							{canvasContents}
 							{bottomPanel}
 						</div>
-						<div>
-							{rightFlyout}
-						</div>
-						{notificationPanel}
+						{rightFlyout}
 					</div>
+					{notificationPanel}
 				</div>
 			);
 
 		} else {
-			centralItems = (
+			let templateRows = "";
+			templateRows += this.props.toolbarIsOpen ? "auto" : "";
+			templateRows += this.props.topPanelIsOpen ? " auto" : "";
+			templateRows += " 1fr"; // For canvas contents
+			templateRows += this.props.bottomPanelIsOpen ? " auto" : "";
+
+			rightSideItems = (
 				<div className="common-canvas-right-side-items">
-					<div id={this.props.containingDivId} className="common-canvas-items-container">
+					<div id={this.props.containingDivId} className="common-canvas-items-container" style={{ gridTemplateRows: templateRows }}>
 						{canvasToolbar}
-						{canvasContents}
 						{topPanel}
+						{canvasContents}
 						{bottomPanel}
 						{notificationPanel}
 					</div>
@@ -75,7 +119,15 @@ class CommonCanvasCentralItems extends React.Component {
 			);
 		}
 
-		return centralItems;
+		const divClassName = this.generateClass();
+
+		return (
+			<div className={divClassName} onDragOver={this.onDragOver} onDrop={this.onDrop}>
+				{palette}
+				{rightSideItems}
+				{tip}
+			</div>
+		);
 	}
 }
 
@@ -85,11 +137,23 @@ CommonCanvasCentralItems.propTypes = {
 	containingDivId: PropTypes.string.isRequired,
 
 	// Provided by Redux
-	enableRightFlyoutUnderToolbar: PropTypes.bool
+	enableParentClass: PropTypes.string,
+	enableEditingActions: PropTypes.bool,
+	enableRightFlyoutUnderToolbar: PropTypes.bool,
+	toolbarIsOpen: PropTypes.bool,
+	topPanelIsOpen: PropTypes.bool,
+	bottomPanelIsOpen: PropTypes.bool,
+	rightFlyoutIsOpen: PropTypes.bool
 };
 
 const mapStateToProps = (state, ownProps) => ({
-	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar
+	enableParentClass: state.canvasconfig.enableParentClass,
+	enableEditingActions: state.canvasconfig.enableEditingActions,
+	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar,
+	toolbarIsOpen: (state.canvasconfig.enableToolbarLayout !== "None"),
+	topPanelIsOpen: state.toppanel.isOpen,
+	bottomPanelIsOpen: state.bottompanel.isOpen,
+	rightFlyoutIsOpen: state.rightflyout.isOpen
 });
 
 export default connect(mapStateToProps)(CommonCanvasCentralItems);

package/src/common-canvas/cc-contents.jsx

@@ -536,39 +536,23 @@ class CanvasContents extends React.Component {
 		const dropZoneCanvas = this.getDropZone();
 		const svgCanvasDiv = this.getSVGCanvasDiv();
 
-		const mainClassName = this.props.canvasConfig.enableRightFlyoutUnderToolbar
-			? "common-canvas-main"
-			: null;
-
-		let dropDivClassName = this.props.canvasConfig.enableRightFlyoutUnderToolbar
-			? "common-canvas-drop-div-under-toolbar"
-			: "common-canvas-drop-div";
-
-		dropDivClassName = this.props.canvasConfig.enableToolbarLayout === "None"
-			? dropDivClassName + " common-canvas-toolbar-none"
-			: dropDivClassName;
-
-		dropDivClassName = this.props.bottomPanelIsOpen
-			? dropDivClassName + " common-canvas-bottom-panel-is-open"
-			: dropDivClassName;
-
 		return (
-			<main aria-label={this.getLabel("canvas.label")} role="main" className={mainClassName}>
+			<main aria-label={this.getLabel("canvas.label")} role="main">
 				<ReactResizeDetector handleWidth handleHeight onResize={this.refreshOnSizeChange}>
 					<div
 						id={this.mainCanvasDivId}
-						className={dropDivClassName}
+						className="common-canvas-drop-div"
 						onDrop={this.drop}
 						onDragOver={this.dragOver}
 						onDragEnter={this.dragEnter}
 						onDragLeave={this.dragLeave}
 					>
+						{stateTag}
 						{emptyCanvas}
 						{svgCanvasDiv}
 						{contextMenu}
 						{textToolbar}
 						{dropZoneCanvas}
-						{stateTag}
 					</div>
 				</ReactResizeDetector>
 			</main>

package/src/common-canvas/cc-right-flyout.jsx

@@ -28,7 +28,7 @@ class CommonCanvasRightFlyout extends React.Component {
 	render() {
 		this.logger.log("render");
 
-		let rightFlyout = (<div className="right-flyout-panel" />);
+		let rightFlyout = null;
 
 		if (this.props.content && this.props.isOpen) {
 			const rfClass = this.props.enableRightFlyoutUnderToolbar

package/src/common-canvas/common-canvas.jsx

@@ -18,8 +18,6 @@ import React from "react";
 import { Provider } from "react-redux";
 import { injectIntl } from "react-intl";
 import PropTypes from "prop-types";
-import Palette from "../palette/palette.jsx";
-import CommonCanvasTooltip from "./cc-tooltip.jsx";
 import CommonCanvasCentralItems from "./cc-central-items.jsx";
 import Logger from "../logging/canvas-logger.js";
 
@@ -43,21 +41,6 @@ class CommonCanvas extends React.Component {
 		this.initializeController(this.props);
 	}
 
-	// Prevent the default behavior (which is to show a plus-sign pointer) as
-	// an object is being dragged over the common canvas components.
-	// Note: this is overriden by the canvas area itself to allow external objects
-	// to be dragged over it.
-	onDragOver(evt) {
-		evt.preventDefault();
-	}
-
-	// Prevent an object being dropped on the common canvas causing a file
-	// download event (which is the default!). Note: this is overriden by the
-	// canvas area itself to allow external objects to be dropped on it.
-	onDrop(evt) {
-		evt.preventDefault();
-	}
-
 	initializeController(props) {
 		this.logger.logStartTimer("initializeController");
 		props.canvasController.setCanvasConfig(props.config);
@@ -87,44 +70,12 @@ class CommonCanvas extends React.Component {
 		this.logger.logEndTimer("initializeController");
 	}
 
-	generateClass() {
-		let className = "common-canvas";
-
-		className += (
-			!this.isEditingAllowed()
-				? " config-editing-actions-false"
-				: "");
-
-		className += (
-			this.props.config && this.props.config.enableParentClass
-				? " " + this.props.config.enableParentClass
-				: "");
-
-		return className;
-	}
-
-	isEditingAllowed() {
-		return this.props.config &&
-			(typeof this.props.config.enableEditingActions === "undefined" ||
-				this.props.config.enableEditingActions === true);
-	}
-
 	render() {
 		this.logger.log("render");
 
-		const tip = (<CommonCanvasTooltip canvasController={this.props.canvasController} />);
-		const palette = (<Palette canvasController={this.props.canvasController} containingDivId={this.containingDivId} />);
-		const centralItems = (<CommonCanvasCentralItems canvasController={this.props.canvasController} containingDivId={this.containingDivId} />);
-
-		const className = this.generateClass();
-
 		return (
 			<Provider store={this.props.canvasController.getStore()}>
-				<div className={className} onDragOver={this.onDragOver} onDrop={this.onDrop}>
-					{palette}
-					{centralItems}
-					{tip}
-				</div>
+				<CommonCanvasCentralItems canvasController={this.props.canvasController} containingDivId={this.containingDivId} />
 			</Provider>
 		);
 	}

package/src/common-canvas/common-canvas.scss

@@ -40,6 +40,9 @@ $panel-border-color: $ui-03;
 	height: 100%;
 	position: relative;
 	width: 100%;
+	display: grid;
+	grid-template-columns: 1fr;
+	/* grid-template-rows is set dynamically in cc-central-items */
 }
 
 .common-canvas-right-side-items {
@@ -47,37 +50,14 @@ $panel-border-color: $ui-03;
 	display: flex;
 }
 
-.common-canvas-main {
-	width: 100%;
-	height: 100%;
-}
-
-.common-canvas-with-bottom-panel {
-	width: 100%;
-	position: relative;
-
-	.top-panel {
-		top: 0;
-	}
-}
-
 .common-canvas-drop-div {
-	height: calc(100% - #{$toolbar-button-height});
+	height: 100%;
 	width: 100%;
 	min-width: inherit;
-	position: absolute;
 	cursor: default;
-	top: $toolbar-button-height;
 	overflow: hidden;
+	position: relative; // This allows the State Tag to have positio: absolute
 
-	&.common-canvas-toolbar-none {
-		height: 100%;
-		top: 0;
-	}
-
-	&.common-canvas-toolbar-none.common-canvas-bottom-panel-is-open {
-		top: 0;
-	}
 }
 
 .right-flyout-panel {
@@ -90,11 +70,11 @@ $panel-border-color: $ui-03;
 .bottom-panel {
 	display: flex;
 	flex-direction: column;
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
 	border-top: $panel-border-width solid $panel-border-color;
+	// Make sure the bottom panel appear above the empty canvas content
+	// (when displayed) in the flow editor div.
+	z-index: 1;
+
 }
 
 .bottom-panel-drag {
@@ -119,15 +99,7 @@ $panel-border-color: $ui-03;
 .top-panel {
 	display: flex;
 	flex-direction: column;
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: $toolbar-button-height;
 	border-bottom: $panel-border-width solid $panel-border-color;
-
-	&.common-canvas-toolbar-none {
-		top: 0;
-	}
 }
 
 .common-canvas-toolbar {
@@ -208,23 +180,28 @@ $panel-border-color: $ui-03;
  * enableRightFlyoutUnderToolbar is true. */
 
 .common-canvas-right-side-items-under-toolbar {
+	display: grid;
+	/* grid-template-rows is set dynamically in cc-central-items */
+	grid-template-columns: 1fr;
 	width: 100%;
 }
 
 .common-canvas-items-container-under-toolbar {
-	height: calc(100% - #{$toolbar-button-height});
+	height: 100%;
 	width: 100%;
-	display: flex;
+	display: grid;
+	grid-template-rows: 1fr auto;
+	/* grid-template-columns is set dynamically in cc-central-items */
 }
 
-.common-canvas-drop-div-under-toolbar {
-	height: 100%;
+.common-canvas-with-top-and-bottom-panel {
 	width: 100%;
-	position: relative; // Needed to allow textarea (for commnt editing) to be positiond OK.
-	cursor: default;
-	overflow: hidden;
+	display: grid;
+	/* grid-template-rows is set dynamically in cc-central-items */
+	grid-template-columns: 1fr;
 }
 
+
 /* Styles for empty canvas objects */
 
 .empty-canvas {
@@ -310,8 +287,9 @@ $panel-border-color: $ui-03;
 	@include carbon--type-style("productive-heading-01");
 	color: $inverse-01;
 	background-color: $background-inverse;
+	width: fit-content;
 	height: 40px;
-	position: absolute;
+	position: absolute; /* Positioned relative to the common-canvas-drop-div */
 	left: 50%;
 	top: 16px;
 	transform: translate(-50%, 0%);

package/src/common-canvas/svg-canvas-d3.js

@@ -72,7 +72,8 @@ export default class SVGCanvasD3 {
 			this.logger.logStartTimer("set canvas info");
 
 			this.canvasInfo = this.cloneCanvasInfo(canvasInfo);
-			this.renderer.setCanvasInfoRenderer(this.canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout);
+			this.config = this.cloneConfig(config);
+			this.renderer.setCanvasInfoRenderer(this.canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout, this.config);
 
 			this.logger.logEndTimer("set canvas info", true);
 		}