@atlaskit/editor-toolbar 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-toolbar
 
+## 0.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.6.1
+
+### Patch Changes
+
+- [`36e649e4988d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36e649e4988d3) -
+  [ux] ED-29072 close all menus on nested menu item clicked
+- Updated dependencies
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -388,6 +388,12 @@ Object.defineProperty(exports, "ToolbarDropdownMenu", {
     return _ToolbarDropdownMenu.ToolbarDropdownMenu;
   }
 });
+Object.defineProperty(exports, "ToolbarDropdownMenuProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarDropdownMenuContext.ToolbarDropdownMenuProvider;
+  }
+});
 Object.defineProperty(exports, "ToolbarKeyboardShortcutHint", {
   enumerable: true,
   get: function get() {

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -13,6 +13,7 @@ var _css = require("@atlaskit/css");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
@@ -56,8 +57,14 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     href = _ref2.href,
     target = _ref2.target,
     rel = _ref2.rel;
+  var parentContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenuNew)();
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    onClick: onClick,
+    onClick: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? function (e) {
+      if (!hasNestedDropdownMenu) {
+        parentContext === null || parentContext === void 0 || parentContext.closeMenu();
+      }
+      onClick === null || onClick === void 0 || onClick(e);
+    } : onClick,
     elemBefore: elemBefore,
     elemAfter: elemAfter,
     isSelected: isSelected,

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -31,23 +31,20 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
     label = _ref.label;
   var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
     onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
-  var _useToolbarDropdownMe = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)(),
-    closeMenu = _useToolbarDropdownMe.closeMenu,
-    isOpen = _useToolbarDropdownMe.isOpen,
-    openMenu = _useToolbarDropdownMe.openMenu;
+  var menuContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)();
   var handleOpenChange = (0, _react.useCallback)(function (args) {
     onDropdownOpenChanged(args);
     if (!args.isOpen) {
-      closeMenu();
+      menuContext === null || menuContext === void 0 || menuContext.closeMenu();
     }
-  }, [closeMenu, onDropdownOpenChanged]);
+  }, [menuContext, onDropdownOpenChanged]);
   var handleClick = (0, _react.useCallback)(function () {
-    if (!isOpen) {
-      openMenu();
+    if (!(menuContext !== null && menuContext !== void 0 && menuContext.isOpen)) {
+      menuContext === null || menuContext === void 0 || menuContext.openMenu();
     } else {
-      closeMenu();
+      menuContext === null || menuContext === void 0 || menuContext.closeMenu();
     }
-  }, [closeMenu, openMenu, isOpen]);
+  }, [menuContext]);
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
@@ -69,7 +66,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
       });
     },
     onOpenChange: handleOpenChange,
-    isOpen: isOpen
+    isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
   }, children);
 };
 var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
@@ -82,12 +79,23 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
     hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
     _ref2$enableMaxHeight = _ref2.enableMaxHeight,
     enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight;
-  return /*#__PURE__*/_react.default.createElement(_ToolbarDropdownMenuContext.ToolbarDropdownMenuProvider, null, /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
-    iconBefore: iconBefore,
-    isDisabled: isDisabled,
-    testId: testId,
-    label: label
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: (0, _react2.cx)(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
-  }, children)));
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+    return /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: (0, _react2.cx)(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
+    }, children));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_ToolbarDropdownMenuContext.ToolbarDropdownMenuProvider, null, /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)([hasSectionMargin && styles.sectionMargin, (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
+    }, children)));
+  }
 };

package/dist/cjs/ui/ToolbarDropdownMenuContext.js

@@ -5,18 +5,26 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useToolbarDropdownMenu = exports.ToolbarDropdownMenuProvider = void 0;
+exports.useToolbarDropdownMenuOld = exports.useToolbarDropdownMenuNew = exports.useToolbarDropdownMenu = exports.ToolbarDropdownMenuProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var ToolbarDropdownMenuContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-var useToolbarDropdownMenu = exports.useToolbarDropdownMenu = function useToolbarDropdownMenu() {
+var useToolbarDropdownMenuOld = exports.useToolbarDropdownMenuOld = function useToolbarDropdownMenuOld() {
   var context = (0, _react.useContext)(ToolbarDropdownMenuContext);
   if (!context) {
     throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
   }
   return context;
 };
+var useToolbarDropdownMenuNew = exports.useToolbarDropdownMenuNew = function useToolbarDropdownMenuNew() {
+  return (0, _react.useContext)(ToolbarDropdownMenuContext);
+};
+var useToolbarDropdownMenu = exports.useToolbarDropdownMenu = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true);
+}, useToolbarDropdownMenuNew, useToolbarDropdownMenuOld);
 var ToolbarDropdownMenuProvider = exports.ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
   var children = _ref.children;
   var _useState = (0, _react.useState)(false),

package/dist/es2019/index.js

@@ -10,7 +10,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
-export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider } from './ui/ToolbarDropdownMenuContext';
 export { ResponsiveContainer } from './ui/ResponsiveContainer';
 export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -6,6 +6,7 @@ import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useToolbarDropdownMenuNew } from './ToolbarDropdownMenuContext';
 const styles = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
@@ -48,8 +49,14 @@ export const ToolbarDropdownItem = ({
   target,
   rel
 }) => {
+  const parentContext = useToolbarDropdownMenuNew();
   return /*#__PURE__*/React.createElement(DropdownItem, {
-    onClick: onClick,
+    onClick: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? e => {
+      if (!hasNestedDropdownMenu) {
+        parentContext === null || parentContext === void 0 ? void 0 : parentContext.closeMenu();
+      }
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    } : onClick,
     elemBefore: elemBefore,
     elemAfter: elemAfter,
     isSelected: isSelected,

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -24,24 +24,20 @@ const ToolbarDropdownMenuContent = ({
   const {
     onDropdownOpenChanged
   } = useToolbarUI();
-  const {
-    closeMenu,
-    isOpen,
-    openMenu
-  } = useToolbarDropdownMenu();
+  const menuContext = useToolbarDropdownMenu();
   const handleOpenChange = useCallback(args => {
     onDropdownOpenChanged(args);
     if (!args.isOpen) {
-      closeMenu();
+      menuContext === null || menuContext === void 0 ? void 0 : menuContext.closeMenu();
     }
-  }, [closeMenu, onDropdownOpenChanged]);
+  }, [menuContext, onDropdownOpenChanged]);
   const handleClick = useCallback(() => {
-    if (!isOpen) {
-      openMenu();
+    if (!(menuContext !== null && menuContext !== void 0 && menuContext.isOpen)) {
+      menuContext === null || menuContext === void 0 ? void 0 : menuContext.openMenu();
     } else {
-      closeMenu();
+      menuContext === null || menuContext === void 0 ? void 0 : menuContext.closeMenu();
     }
-  }, [closeMenu, openMenu, isOpen]);
+  }, [menuContext]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: triggerProps => /*#__PURE__*/React.createElement(ToolbarButton, {
       ref: triggerProps.triggerRef,
@@ -61,7 +57,7 @@ const ToolbarDropdownMenuContent = ({
       label: label
     }),
     onOpenChange: handleOpenChange,
-    isOpen: isOpen
+    isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
   }, children);
 };
 export const ToolbarDropdownMenu = ({
@@ -73,12 +69,23 @@ export const ToolbarDropdownMenu = ({
   hasSectionMargin = true,
   enableMaxHeight = false
 }) => {
-  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
-    iconBefore: iconBefore,
-    isDisabled: isDisabled,
-    testId: testId,
-    label: label
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
-  }, children)));
+  if (expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
+    }, children));
+  } else {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([hasSectionMargin && styles.sectionMargin, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
+    }, children)));
+  }
 };

package/dist/es2019/ui/ToolbarDropdownMenuContext.js

@@ -1,12 +1,18 @@
 import React, { createContext, useContext, useState } from 'react';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const ToolbarDropdownMenuContext = /*#__PURE__*/createContext(undefined);
-export const useToolbarDropdownMenu = () => {
+export const useToolbarDropdownMenuOld = () => {
   const context = useContext(ToolbarDropdownMenuContext);
   if (!context) {
     throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
   }
   return context;
 };
+export const useToolbarDropdownMenuNew = () => {
+  return useContext(ToolbarDropdownMenuContext);
+};
+export const useToolbarDropdownMenu = conditionalHooksFactory(() => expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true), useToolbarDropdownMenuNew, useToolbarDropdownMenuOld);
 export const ToolbarDropdownMenuProvider = ({
   children
 }) => {

package/dist/esm/index.js

@@ -10,7 +10,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
-export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider } from './ui/ToolbarDropdownMenuContext';
 export { ResponsiveContainer } from './ui/ResponsiveContainer';
 export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -6,6 +6,7 @@ import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useToolbarDropdownMenuNew } from './ToolbarDropdownMenuContext';
 var styles = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
@@ -48,8 +49,14 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     href = _ref2.href,
     target = _ref2.target,
     rel = _ref2.rel;
+  var parentContext = useToolbarDropdownMenuNew();
   return /*#__PURE__*/React.createElement(DropdownItem, {
-    onClick: onClick,
+    onClick: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? function (e) {
+      if (!hasNestedDropdownMenu) {
+        parentContext === null || parentContext === void 0 || parentContext.closeMenu();
+      }
+      onClick === null || onClick === void 0 || onClick(e);
+    } : onClick,
     elemBefore: elemBefore,
     elemAfter: elemAfter,
     isSelected: isSelected,

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -22,23 +22,20 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
     label = _ref.label;
   var _useToolbarUI = useToolbarUI(),
     onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
-  var _useToolbarDropdownMe = useToolbarDropdownMenu(),
-    closeMenu = _useToolbarDropdownMe.closeMenu,
-    isOpen = _useToolbarDropdownMe.isOpen,
-    openMenu = _useToolbarDropdownMe.openMenu;
+  var menuContext = useToolbarDropdownMenu();
   var handleOpenChange = useCallback(function (args) {
     onDropdownOpenChanged(args);
     if (!args.isOpen) {
-      closeMenu();
+      menuContext === null || menuContext === void 0 || menuContext.closeMenu();
     }
-  }, [closeMenu, onDropdownOpenChanged]);
+  }, [menuContext, onDropdownOpenChanged]);
   var handleClick = useCallback(function () {
-    if (!isOpen) {
-      openMenu();
+    if (!(menuContext !== null && menuContext !== void 0 && menuContext.isOpen)) {
+      menuContext === null || menuContext === void 0 || menuContext.openMenu();
     } else {
-      closeMenu();
+      menuContext === null || menuContext === void 0 || menuContext.closeMenu();
     }
-  }, [closeMenu, openMenu, isOpen]);
+  }, [menuContext]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -60,7 +57,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
       });
     },
     onOpenChange: handleOpenChange,
-    isOpen: isOpen
+    isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
   }, children);
 };
 export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
@@ -73,12 +70,23 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
     hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
     _ref2$enableMaxHeight = _ref2.enableMaxHeight,
     enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight;
-  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
-    iconBefore: iconBefore,
-    isDisabled: isDisabled,
-    testId: testId,
-    label: label
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
-  }, children)));
+  if (expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
+    }, children));
+  } else {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([hasSectionMargin && styles.sectionMargin, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
+    }, children)));
+  }
 };

package/dist/esm/ui/ToolbarDropdownMenuContext.js

@@ -1,13 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { createContext, useContext, useState } from 'react';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var ToolbarDropdownMenuContext = /*#__PURE__*/createContext(undefined);
-export var useToolbarDropdownMenu = function useToolbarDropdownMenu() {
+export var useToolbarDropdownMenuOld = function useToolbarDropdownMenuOld() {
   var context = useContext(ToolbarDropdownMenuContext);
   if (!context) {
     throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
   }
   return context;
 };
+export var useToolbarDropdownMenuNew = function useToolbarDropdownMenuNew() {
+  return useContext(ToolbarDropdownMenuContext);
+};
+export var useToolbarDropdownMenu = conditionalHooksFactory(function () {
+  return expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true);
+}, useToolbarDropdownMenuNew, useToolbarDropdownMenuOld);
 export var ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
   var children = _ref.children;
   var _useState = useState(false),

package/dist/types/index.d.ts

@@ -9,7 +9,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
-export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
 export { ResponsiveContainer } from './ui/ResponsiveContainer';
 export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';

package/dist/types/ui/ToolbarDropdownMenuContext.d.ts

@@ -4,7 +4,9 @@ interface ToolbarDropdownMenuContextValue {
     isOpen: boolean;
     openMenu: () => void;
 }
-export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
+export declare const useToolbarDropdownMenuOld: () => ToolbarDropdownMenuContextValue;
+export declare const useToolbarDropdownMenuNew: () => ToolbarDropdownMenuContextValue | undefined;
+export declare const useToolbarDropdownMenu: (...args: never[]) => ToolbarDropdownMenuContextValue | undefined;
 interface ToolbarDropdownMenuProviderProps {
     children: React.ReactNode;
 }

package/dist/types-ts4.5/index.d.ts

@@ -9,7 +9,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
-export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
 export { ResponsiveContainer } from './ui/ResponsiveContainer';
 export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';

package/dist/types-ts4.5/ui/ToolbarDropdownMenuContext.d.ts

@@ -4,7 +4,9 @@ interface ToolbarDropdownMenuContextValue {
     isOpen: boolean;
     openMenu: () => void;
 }
-export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
+export declare const useToolbarDropdownMenuOld: () => ToolbarDropdownMenuContextValue;
+export declare const useToolbarDropdownMenuNew: () => ToolbarDropdownMenuContextValue | undefined;
+export declare const useToolbarDropdownMenu: (...args: never[]) => ToolbarDropdownMenuContextValue | undefined;
 interface ToolbarDropdownMenuProviderProps {
     children: React.ReactNode;
 }

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.6.0",
+	"version": "0.6.2",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -28,9 +28,10 @@
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/logo": "^19.7.0",
+		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.12.0",
-		"@atlaskit/tmp-editor-statsig": "^11.11.0",
+		"@atlaskit/tmp-editor-statsig": "^12.0.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",