@atlaskit/side-nav-items 1.0.0

package/dist/cjs/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js

@@ -0,0 +1,202 @@
+/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuItemDragAndDrop = useMenuItemDragAndDrop;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactDom = require("react-dom");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _pointerOutsideOfPreview = require("@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview");
+var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var _dragPreview = require("./drag-preview");
+var _dropIndicator = require("./drop-indicator");
+var _hitbox = require("./hitbox");
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var idle = {
+  type: 'idle'
+};
+/**
+ * A convenience helper for setting up drag and drop for menu items
+ *
+ * - Don't include the `draggable` property if you don't want the menu item to be a draggable
+ * - Don't include the `dropTarget` property if you don't want the menu item to be a drop target
+ */
+function useMenuItemDragAndDrop(_ref) {
+  var draggableArgs = _ref.draggable,
+    dropTargetArgs = _ref.dropTarget;
+  var draggableAnchorRef = (0, _react.useRef)(null);
+  var draggableButtonRef = (0, _react.useRef)(null);
+  var dropTargetRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(idle),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    internalState = _useState2[0],
+    setInternalState = _useState2[1];
+  var getDraggableElement = (0, _react.useCallback)(function () {
+    var _ref2, _draggableAnchorRef$c;
+    return (_ref2 = (_draggableAnchorRef$c = draggableAnchorRef.current) !== null && _draggableAnchorRef$c !== void 0 ? _draggableAnchorRef$c : draggableButtonRef.current) !== null && _ref2 !== void 0 ? _ref2 : null;
+  }, []);
+
+  // Set up draggable
+  (0, _react.useEffect)(function () {
+    // Don't set up a draggable if there are no draggable args
+    if (!draggableArgs) {
+      return;
+    }
+    var element = getDraggableElement();
+    (0, _tinyInvariant.default)(element, "draggableAnchorRef or draggableButtonRef not set");
+    return (0, _adapter.draggable)({
+      element: element,
+      getInitialData: draggableArgs.getInitialData,
+      canDrag: draggableArgs.canDrag,
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage,
+          source = _ref3.source,
+          location = _ref3.location;
+        (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
+          nativeSetDragImage: nativeSetDragImage,
+          getOffset: (0, _pointerOutsideOfPreview.pointerOutsideOfPreview)({
+            x: "var(--ds-space-200, 16px)",
+            y: "var(--ds-space-100, 8px)"
+          }),
+          render: function render(_ref4) {
+            var container = _ref4.container;
+            var args = {
+              dragHandle: source.dragHandle,
+              element: source.element,
+              input: location.current.input
+            };
+            setInternalState({
+              type: 'preview',
+              container: container,
+              ui: draggableArgs.getDragPreviewPieces(args)
+            });
+          }
+        });
+      },
+      onDragStart: function onDragStart() {
+        setInternalState({
+          type: 'dragging'
+        });
+      },
+      onDrop: function onDrop() {
+        setInternalState(idle);
+      }
+    });
+  }, [draggableArgs, getDraggableElement]);
+
+  // Set up drop target
+  (0, _react.useEffect)(function () {
+    if (!dropTargetArgs) {
+      return;
+    }
+
+    // Don't need to provide a draggable element to have a drop target.
+    // Using this element in our `canDrop` check
+    var draggableElement = getDraggableElement();
+    var dropTarget = dropTargetRef.current;
+    (0, _tinyInvariant.default)(dropTarget, "dropTargetRef was not set");
+    return (0, _adapter.dropTargetForElements)({
+      element: dropTarget,
+      // cannot drop on self
+      canDrop: function canDrop(args) {
+        // cannot drop on self
+        if (args.source.element === draggableElement) {
+          return false;
+        }
+        if (dropTargetArgs.canDrop) {
+          return dropTargetArgs.canDrop(args);
+        }
+        return true;
+      },
+      // menu items are always sticky, and the GroupDropIndicator should clear stickiness
+      getIsSticky: function getIsSticky() {
+        return true;
+      },
+      getData: function getData(args) {
+        var _dropTargetArgs$getDa, _dropTargetArgs$getDa2;
+        var data = (_dropTargetArgs$getDa = (_dropTargetArgs$getDa2 = dropTargetArgs.getData) === null || _dropTargetArgs$getDa2 === void 0 ? void 0 : _dropTargetArgs$getDa2.call(dropTargetArgs, args)) !== null && _dropTargetArgs$getDa !== void 0 ? _dropTargetArgs$getDa : {};
+        var operations = dropTargetArgs.getOperations(args);
+        return (0, _hitbox.attachInstruction)(data, {
+          input: args.input,
+          element: args.element,
+          operations: operations
+        });
+      },
+      onDragStart: function onDragStart(_ref5) {
+        var self = _ref5.self;
+        var instruction = (0, _hitbox.extractInstruction)(self.data);
+        setInternalState({
+          type: 'is-over',
+          instruction: instruction
+        });
+      },
+      onDrag: function onDrag(_ref6) {
+        var self = _ref6.self;
+        var instruction = (0, _hitbox.extractInstruction)(self.data);
+        setInternalState(function (current) {
+          var _current$instruction, _current$instruction2;
+          if (current.type === 'is-over' && (instruction === null || instruction === void 0 ? void 0 : instruction.operation) === ((_current$instruction = current.instruction) === null || _current$instruction === void 0 ? void 0 : _current$instruction.operation) && (instruction === null || instruction === void 0 ? void 0 : instruction.blocked) === ((_current$instruction2 = current.instruction) === null || _current$instruction2 === void 0 ? void 0 : _current$instruction2.blocked)) {
+            return current;
+          }
+          return {
+            type: 'is-over',
+            instruction: instruction
+          };
+        });
+      },
+      onDragLeave: function onDragLeave() {
+        setInternalState(idle);
+      },
+      onDrop: function onDrop() {
+        setInternalState(idle);
+      },
+      onDragEnter: function onDragEnter(_ref7) {
+        var self = _ref7.self;
+        var instruction = (0, _hitbox.extractInstruction)(self.data);
+        setInternalState({
+          type: 'is-over',
+          instruction: instruction
+        });
+      }
+    });
+  }, [dropTargetArgs, getDraggableElement]);
+  var dragPreview = function () {
+    if (internalState.type !== 'preview') {
+      return null;
+    }
+    return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(_dragPreview.DragPreview, {
+      elemBefore: internalState.ui.elemBefore
+    }, internalState.ui.content), internalState.container);
+  }();
+  var dropIndicator = internalState.type === 'is-over' && internalState.instruction && /*#__PURE__*/React.createElement(_dropIndicator.DropIndicator, {
+    instruction: internalState.instruction
+  });
+  var state = (0, _react.useMemo)(function () {
+    if (internalState.type === 'preview') {
+      return {
+        type: 'preview'
+      };
+    }
+    // returning a new object to avoid modification of our `internalState` object
+    return _objectSpread({}, internalState);
+  }, [internalState]);
+  return {
+    state: state,
+    draggableButtonRef: draggableButtonRef,
+    dropTargetRef: dropTargetRef,
+    draggableAnchorRef: draggableAnchorRef,
+    dragPreview: dragPreview,
+    dropIndicator: dropIndicator
+  };
+}

package/dist/cjs/ui/menu-item/drag-handle/drag-handle.compiled.css

@@ -0,0 +1,9 @@
+._152tidpf{inset-block-start:0}
+._1bah1h6o{justify-content:center}
+._1e02idpf{inset-inline-start:0}
+._1e0c1i3c{display:var(--drag-handle-display,none)}
+._2lx21bp4{flex-direction:column}
+._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
+._kqswstnw{position:absolute}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

package/dist/cjs/ui/menu-item/drag-handle/drag-handle.js

@@ -0,0 +1,28 @@
+/* drag-handle.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DragHandle;
+require("./drag-handle.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
+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 = {
+  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _1e02idpf _ahbqxmi2"
+};
+
+// Using default export to play well with React.lazy
+function DragHandle() {
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: (0, _runtime.ax)([styles.root])
+  }, /*#__PURE__*/React.createElement(_dragHandleVertical.default, {
+    label: "",
+    size: "small"
+  }));
+}

package/dist/cjs/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LazyDragHandle = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+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" != (0, _typeof2.default)(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); } // Using `lazy` so that only consumers who want drag and drop
+// need to include code for the drag handle.
+/**
+ * Exposing this for use by custom components
+ */
+var LazyDragHandle = exports.LazyDragHandle = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+    './drag-handle'));
+  });
+});

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-content.compiled.css

@@ -0,0 +1,2 @@
+._1e0cglyw{display:none}
+._bozg1crf{padding-inline-start:9pt}

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js

@@ -0,0 +1,50 @@
+/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableMenuItemContent = void 0;
+require("./expandable-menu-item-content.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _react2 = require("@compiled/react");
+var _constants = require("../constants");
+var _list = require("../list");
+var _expandableMenuItemContext = require("./expandable-menu-item-context");
+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 = {
+  content: "_bozg1crf",
+  collapsedContent: "_1e0cglyw"
+};
+/**
+ * __ExpandableMenuItemContent__
+ *
+ * The expandable and collapsable section of the expandable menu item. It should contain the nested menu items.
+ */
+var ExpandableMenuItemContent = exports.ExpandableMenuItemContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var children = _ref.children;
+  var isExpanded = (0, _expandableMenuItemContext.useIsExpanded)();
+  var level = (0, _expandableMenuItemContext.useLevel)();
+  var hasExpanded = (0, _react.useRef)(false);
+  var areAllAncestorsExpanded = (0, _expandableMenuItemContext.useAreAllAncestorsExpanded)();
+  if (!isExpanded && !hasExpanded.current) {
+    return null;
+  }
+  hasExpanded.current = true;
+  return /*#__PURE__*/React.createElement(_expandableMenuItemContext.LevelContext.Provider, {
+    value: level + 1
+  }, /*#__PURE__*/React.createElement(_expandableMenuItemContext.AreAllAncestorsExpandedContext.Provider, {
+    value:
+    /**
+     * By combining the current ancestor and with the current menu item's state, all nested menu items will know if their
+     * ancestor menu items are all expanded.
+     */
+    areAllAncestorsExpanded && isExpanded
+  }, /*#__PURE__*/React.createElement(_list.List, {
+    ref: forwardedRef,
+    xcss: (0, _react2.cx)(styles.content, !isExpanded && styles.collapsedContent)
+  }, children)));
+});

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-context.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSetIsExpanded = exports.useOnExpansionToggle = exports.useLevel = exports.useIsExpanded = exports.useAreAllAncestorsExpanded = exports.SetIsExpandedContext = exports.OnExpansionToggleContext = exports.LevelContext = exports.IsExpandedContext = exports.AreAllAncestorsExpandedContext = void 0;
+var _react = require("react");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _expandableMenuItemLevelContext = require("./expandable-menu-item-level-context");
+/**
+ * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
+ * shown within the menu item tree.
+ */
+var AreAllAncestorsExpandedContext = exports.AreAllAncestorsExpandedContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * A context for storing the isExpanded value of the ExpandableMenuItem.
+ */
+var IsExpandedContext = exports.IsExpandedContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * A context for storing a function that sets isExpanded value of the ExpandableMenuItem.
+ */
+var SetIsExpandedContext = exports.SetIsExpandedContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * A context for storing a function that triggers when isExpanded value of the ExpandableMenuItem is changed.
+ */
+var OnExpansionToggleContext = exports.OnExpansionToggleContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+var LevelContext = exports.LevelContext = _expandableMenuItemLevelContext.ExpandableMenuItemLevelContext;
+var useIsExpanded = exports.useIsExpanded = function useIsExpanded() {
+  var context = (0, _react.useContext)(IsExpandedContext);
+  (0, _tinyInvariant.default)(context !== null, 'useIsExpanded must be used within an ExpandableMenuItem');
+  return context;
+};
+var useSetIsExpanded = exports.useSetIsExpanded = function useSetIsExpanded() {
+  var context = (0, _react.useContext)(SetIsExpandedContext);
+  (0, _tinyInvariant.default)(context !== null, 'useSetIsExpanded must be used within an ExpandableMenuItem');
+  return context;
+};
+var useOnExpansionToggle = exports.useOnExpansionToggle = function useOnExpansionToggle() {
+  return (0, _react.useContext)(OnExpansionToggleContext);
+};
+var useLevel = exports.useLevel = function useLevel() {
+  return (0, _react.useContext)(LevelContext);
+};
+
+/**
+ * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
+ * shown within the menu item tree.
+ *
+ * It works by combining (using &&) all the expansion states of the current menu item's ancestors.
+ *
+ * Using `true` as the fallback for cases when the menu item does not have ancestors.
+ */
+var useAreAllAncestorsExpanded = exports.useAreAllAncestorsExpanded = function useAreAllAncestorsExpanded() {
+  var _useContext;
+  return (_useContext = (0, _react.useContext)(AreAllAncestorsExpandedContext)) !== null && _useContext !== void 0 ? _useContext : true;
+};

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableMenuItemLevelContext = void 0;
+var _react = require("react");
+// Note: this context value is in a seperate file as it is consumed
+// by our drag and drop drag preview
+
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+var ExpandableMenuItemLevelContext = exports.ExpandableMenuItemLevelContext = /*#__PURE__*/(0, _react.createContext)(0);

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -0,0 +1,14 @@
+._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
+._165n1bgi{--expandable-provided-elembefore-display:contents}
+._165nglyw{--expandable-provided-elembefore-display:none}
+._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
+._1e0ciw0t{display:var(--expandable-chevron-display)}
+._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
+._1mmi1txw{--expandable-chevron-display:flex}
+._1mmiglyw{--expandable-chevron-display:none}
+._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
+._syazxl6c{color:var(--ds-icon-selected,#1868db)}
+._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
+._1vnl1txw:hover{--expandable-chevron-display:flex}
+._p8btglyw:hover{--expandable-provided-elembefore-display:none}

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -0,0 +1,150 @@
+/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableMenuItemTrigger = void 0;
+require("./expandable-menu-item-trigger.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = require("@atlaskit/button/new");
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _menuItem = require("../menu-item");
+var _useScrollMenuItemIntoView = require("../use-scroll-menu-item-into-view");
+var _expandableMenuItemContext = require("./expandable-menu-item-context");
+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); }
+// Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
+var chevronDisplayCssVar = '--expandable-chevron-display';
+var providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
+var wrapperStyles = {
+  root: "_1mmi1txw _165nglyw",
+  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
+};
+var iconStyles = {
+  chevron: "_1e0ciw0t _1tz3r0mg",
+  providedElemBefore: "_1e0c1xb2",
+  providedElemBeforeSelected: "_syazxl6c"
+};
+var ExpandableMenuItemIcon = function ExpandableMenuItemIcon(_ref) {
+  var iconProps = _ref.iconProps,
+    isExpanded = _ref.isExpanded,
+    isSelected = _ref.isSelected,
+    providedElemBefore = _ref.providedElemBefore;
+  var ChevronIcon = isExpanded ? _chevronDown.default : _chevronRight.default;
+  var chevronElem = /*#__PURE__*/_react.default.createElement(ChevronIcon, (0, _extends2.default)({}, iconProps, {
+    label: "",
+    color: isSelected ? "var(--ds-icon-selected, #1868DB)" : undefined,
+    size: "small"
+  }));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([iconStyles.chevron])
+  }, chevronElem), providedElemBefore && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([iconStyles.providedElemBefore, isSelected && iconStyles.providedElemBeforeSelected])
+  }, providedElemBefore));
+};
+/**
+ * __ExpandableMenuItemTrigger__
+ *
+ * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
+ */
+var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = (0, _forwardRefWithGeneric.default)(function (_ref2, forwardedRef) {
+  var actions = _ref2.actions,
+    isSelected = _ref2.isSelected,
+    href = _ref2.href,
+    providedElemBefore = _ref2.elemBefore,
+    elemAfter = _ref2.elemAfter,
+    actionsOnHover = _ref2.actionsOnHover,
+    onClick = _ref2.onClick,
+    children = _ref2.children,
+    testId = _ref2.testId,
+    interactionName = _ref2.interactionName,
+    isContentTooltipDisabled = _ref2.isContentTooltipDisabled,
+    visualContentRef = _ref2.visualContentRef,
+    isDragging = _ref2.isDragging,
+    hasDragIndicator = _ref2.hasDragIndicator,
+    dropIndicator = _ref2.dropIndicator;
+  var id = (0, _react.useId)();
+  var onExpansionToggle = (0, _expandableMenuItemContext.useOnExpansionToggle)();
+  var isExpanded = (0, _expandableMenuItemContext.useIsExpanded)();
+  var setIsExpanded = (0, _expandableMenuItemContext.useSetIsExpanded)();
+  var itemRef = (0, _react.useRef)(null);
+  var handleIconClick = (0, _react.useCallback)(function () {
+    onExpansionToggle === null || onExpansionToggle === void 0 || onExpansionToggle(!isExpanded);
+    setIsExpanded(!isExpanded);
+  }, [isExpanded, onExpansionToggle, setIsExpanded]);
+  var handleMenuContentClick = (0, _react.useCallback)(function (event, analyticsEvent) {
+    var newValue = !isExpanded;
+    onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
+      isExpanded: newValue
+    });
+    onExpansionToggle === null || onExpansionToggle === void 0 || onExpansionToggle(newValue);
+    setIsExpanded(newValue);
+  }, [onClick, onExpansionToggle, isExpanded, setIsExpanded]);
+  var isSelectable = typeof href !== 'undefined';
+  (0, _useScrollMenuItemIntoView.useScrollMenuItemIntoView)({
+    elementRef: itemRef,
+    isSelected: Boolean(isSelectable && isSelected)
+  });
+
+  // Wrapped in an IconButton if the expandable menu item trigger is selectable
+  var elemBefore = isSelectable ? /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(ExpandableMenuItemIcon, {
+        iconProps: iconProps,
+        isExpanded: isExpanded,
+        isSelected: isSelected,
+        providedElemBefore: providedElemBefore
+      });
+    },
+    "aria-expanded": isExpanded
+    // We are labelling the icon button using the containing menu item's content, to provide context to
+    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+    // `aria-expanded` attribute to indicate the expanded state of the menu item.
+    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+    ,
+    "aria-labelledby": id
+    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
+    // `aria-labelledby`, which will be used instead.
+    ,
+    label: "",
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: handleIconClick,
+    interactionName: interactionName,
+    testId: testId ? "".concat(testId, "--elem-before-button") : undefined
+  }) : /*#__PURE__*/_react.default.createElement(ExpandableMenuItemIcon, {
+    isExpanded: isExpanded,
+    isSelected: isSelected,
+    providedElemBefore: providedElemBefore
+  });
+
+  // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: itemRef,
+    className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItemBase, {
+    id: id,
+    actions: actions,
+    actionsOnHover: actionsOnHover,
+    elemBefore: elemBefore,
+    ariaExpanded: isExpanded,
+    elemAfter: elemAfter,
+    href: href,
+    isSelected: isSelected,
+    onClick: handleMenuContentClick,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    testId: testId,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+});

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item.js

@@ -0,0 +1,69 @@
+/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableMenuItem = void 0;
+require("./expandable-menu-item.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
+var _menuListItem = require("../menu-list-item");
+var _expandableMenuItemContext = require("./expandable-menu-item-context");
+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 relativeStyles = {
+  root: "_kqswh2mm"
+};
+
+/**
+ * __ExpandableMenuItem__
+ *
+ * A composable component for nested menu items that can be revealed and hidden by interacting witih the parent menu item.
+ *
+ * Follows the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+ *
+ * Should be used with `ExpandableMenuItemTrigger` as the parent menu item, and children menu items should be wrapped in a `ExpandableMenuItemContent`.
+ *
+ * Usage example:
+ * ```jsx
+ * <ExpandableMenuItem>
+ *   <ExpandableMenuItemTrigger>Parent menu item</ExpandableMenuItemTrigger>
+ *   <ExpandableMenuItemContent>
+ *     <ButtonMenuItem>Item 1</ButtonMenuItem>
+ *     <ButtonMenuItem>Item 2</ButtonMenuItem>
+ *   </ExpandableMenuItemContent>
+ * </ExpandableMenuItem>
+ * ```
+ */
+var ExpandableMenuItem = exports.ExpandableMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var isExpandedControlled = _ref.isExpanded,
+    _ref$isDefaultExpande = _ref.isDefaultExpanded,
+    isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
+    onExpansionToggle = _ref.onExpansionToggle,
+    children = _ref.children,
+    dropIndicator = _ref.dropIndicator,
+    testId = _ref.testId;
+  var _useControlled = (0, _useControlled3.default)(isExpandedControlled, function () {
+      return isDefaultExpanded;
+    }),
+    _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+    isExpanded = _useControlled2[0],
+    setIsExpanded = _useControlled2[1];
+  return /*#__PURE__*/React.createElement(_expandableMenuItemContext.IsExpandedContext.Provider, {
+    value: isExpanded
+  }, /*#__PURE__*/React.createElement(_expandableMenuItemContext.SetIsExpandedContext.Provider, {
+    value: setIsExpanded
+  }, /*#__PURE__*/React.createElement(_expandableMenuItemContext.OnExpansionToggleContext.Provider, {
+    value: onExpansionToggle !== null && onExpansionToggle !== void 0 ? onExpansionToggle : null
+  }, /*#__PURE__*/React.createElement(_menuListItem.MenuListItem, {
+    ref: forwardedRef,
+    testId: testId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([dropIndicator && relativeStyles.root])
+  }, children, dropIndicator)))));
+});