@atlaskit/side-nav-items 1.0.0

package/dist/cjs/ui/menu-item/flyout-menu-item/close-button.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _new = require("@atlaskit/button/new");
+var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
+/**
+ * __Close button__
+ *
+ * The close button is to be used for flyout menu item headers to ensure that
+ * all users have an accessible and obvious way to close the flyout menu.
+ *
+ * Ensure that the close button renders first in the DOM to make sure that
+ * users will encounter all elements of the flyout menu, including everything
+ * within the flyout menu header. This can be done using a `Flex` primitive as
+ * the custom header's container with a flex direction of `row-reverse`.
+ */
+var CloseButton = exports.CloseButton = function CloseButton(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    testId: testId,
+    appearance: "subtle",
+    icon: _cross.default,
+    label: label,
+    onClick: onClick
+  });
+};

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-body.compiled.css

@@ -0,0 +1,11 @@
+._12l2x0bf{margin-inline-end:var(--ds-space-negative-100,-8px)}
+._18m91wug{overflow-y:auto}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._6rthx0bf{margin-block-end:var(--ds-space-negative-100,-8px)}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._ahbqx0bf{margin-inline-start:var(--ds-space-negative-100,-8px)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-body.js

@@ -0,0 +1,38 @@
+/* flyout-body.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutBody = void 0;
+require("./flyout-body.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var bodyStyles = {
+  root: "_1e0c1txw _2lx21bp4 _18m91wug _4t3i1osq _1bahv2br _ahbqx0bf _12l2x0bf _6rthx0bf _bozgu2gc _y4tiu2gc _85i5u2gc"
+};
+/**
+ * __Flyout menu item body__
+ *
+ * The main section of a flyout menu. This component is used to render the
+ * primary contents of the flyout menu. This component should be placed between
+ * FlyoutHeader and FlyoutFooter (if present), as is scrollable if the content
+ * exceeds the available space.
+ */
+var FlyoutBody = exports.FlyoutBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var children = props.children,
+    testId = props.testId,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onBlurCapture = props.onBlurCapture;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onBlurCapture: onBlurCapture,
+    role: "presentation",
+    className: (0, _runtime.ax)([bodyStyles.root])
+  }, children);
+});

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-footer.compiled.css

@@ -0,0 +1,5 @@
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1sw7nqa1{border-block-start-style:solid}
+._7myae4h9{border-block-start-width:var(--ds-border-width,1px)}
+._qgnu1l7x{border-block-start-color:var(--ds-border,#0b120e24)}

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-footer.js

@@ -0,0 +1,29 @@
+/* flyout-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutFooter = void 0;
+require("./flyout-footer.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var footerStyles = {
+  root: "_7myae4h9 _1sw7nqa1 _qgnu1l7x _1pfhu2gc _1q51u2gc"
+};
+/**
+ * __Flyout menu item footer__
+ *
+ * The footer section of a flyout menu. This component can display
+ * supplementary actions or information at the bottom of the flyout menu. This
+ * component should be placed after FlyoutBody within the FlyoutMenuItemContent.
+ */
+var FlyoutFooter = exports.FlyoutFooter = function FlyoutFooter(props) {
+  var children = props.children,
+    testId = props.testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([footerStyles.root])
+  }, children);
+};

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-header.compiled.css

@@ -0,0 +1,11 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._2lx21sbv{flex-direction:row-reverse}
+._4cvr1h6o{align-items:center}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-header.js

@@ -0,0 +1,54 @@
+/* flyout-header.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.FlyoutHeader = void 0;
+require("./flyout-header.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _closeButton = require("./close-button");
+var _flyoutMenuItemContext = require("./flyout-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 headerStyles = {
+  root: "_zulp12x7 _bozg1b66 _85i512x7 _1e0c1txw _2lx21bp4",
+  flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq _bozgv77o"
+};
+/**
+ * __FlyoutHeader__
+ *
+ * The header section of a flyout menu. This component displays the title, and
+ * close button, as well as any other provided actions relevant to the menu.
+ * This component should be placed first within the FlyoutMenuItemContent.
+ */
+var FlyoutHeader = exports.FlyoutHeader = function FlyoutHeader(props) {
+  var children = props.children,
+    testId = props.testId,
+    title = props.title,
+    closeButtonLabel = props.closeButtonLabel;
+  var id = (0, _flyoutMenuItemContext.useTitleId)();
+  var onCloseRef = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
+  var handleClose = (0, _react.useCallback)(function (event) {
+    var _onCloseRef$current;
+    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, event, 'close-button');
+  }, [onCloseRef]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([headerStyles.root])
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    xcss: headerStyles.flex
+  }, /*#__PURE__*/_react.default.createElement(_closeButton.CloseButton, {
+    label: closeButtonLabel,
+    onClick: handleClose,
+    testId: testId && "".concat(testId, "--close-button")
+  }), /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xsmall",
+    as: "h2",
+    id: id
+  }, title)), children);
+};

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

@@ -0,0 +1,8 @@
+._1e0c1txw{display:flex}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
+@media (min-width:48rem){._14b51kdj{width:25pc}}

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

@@ -0,0 +1,223 @@
+/* flyout-menu-item-content.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.FlyoutMenuItemContent = void 0;
+require("./flyout-menu-item-content.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experimental = require("@atlaskit/popup/experimental");
+var _flyoutMenuItemContext = require("./flyout-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); }
+/**
+ * The vertical offset in px to ensure the flyout container does not exceed the bounds of
+ * the window. This matches the padding of the content container, and it's position within
+ * the viewport.
+ *
+ * - FlyoutMenuItemContent: paddingBlock: token('space.100'); – 8px top, 8px bottom
+ * - Position: 5px top, 5px bottom
+ *
+ * Total vertical padding:
+ * 		(8px [content top] + 8px [content bottom]) +
+ * 		(5px [position top] + 5px [position bottom]) = 26px
+ */
+var FLYOUT_MENU_VERTICAL_OFFSET_PX = 26;
+
+/**
+ * The maximum height of the flyout menu in pixels, following the Confluence standard maximum
+ * height of 760px.
+ */
+var FLYOUT_MENU_MAX_HEIGHT_PX = 760;
+var flyoutMenuItemContentStyles = {
+  root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
+};
+var flyoutMenuItemContentContainerStyles = {
+  container: "_1e0c1txw _4t3i1osq _2lx21bp4"
+};
+/**
+ * __FlyoutMenuItemContent__
+ *
+ * The content that appears when the flyout menu is open.
+ */
+var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    containerTestId = _ref.containerTestId,
+    onClose = _ref.onClose,
+    autoFocus = _ref.autoFocus,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? FLYOUT_MENU_MAX_HEIGHT_PX : _ref$maxHeight;
+  var setIsOpen = (0, _react.useContext)(_flyoutMenuItemContext.SetIsOpenContext);
+  var onCloseRef = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  // The source of the close is not accessible to the consumer, it is determined within the
+  // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
+  // or FlyoutHeader (close-button).
+  var handleClose = (0, _react.useCallback)(function (event, source) {
+    if ((0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button")) {
+      // Use the passed source if provided, otherwise determine from event
+      var determinedSource = source || 'other';
+      if (!source) {
+        if (event instanceof KeyboardEvent) {
+          var keyboardEvent = event;
+          if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
+            determinedSource = 'escape-key';
+          }
+        } else if (event instanceof MouseEvent) {
+          if (event && 'type' in event && event.type === 'click') {
+            determinedSource = 'outside-click';
+          }
+        }
+      }
+
+      // When flyout menu is closed, fire analytics event
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'sideNav',
+        actionSubject: 'flyoutMenu',
+        action: 'closed',
+        attributes: {
+          closeSource: determinedSource
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
+    }
+    onClose === null || onClose === void 0 || onClose();
+    setIsOpen(false);
+  }, [setIsOpen, onClose, createAnalyticsEvent]);
+
+  // Register handleClose in the ref to allow the FlyoutMenuItemTrigger to access it
+  (0, _react.useEffect)(function () {
+    onCloseRef.current = handleClose;
+  }, [handleClose, onCloseRef]);
+  var titleId = (0, _react.useId)();
+  var computedMaxHeight = (0, _react.useMemo)(function () {
+    return "min(\n\t\t\tcalc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px),\n\t\t\t").concat(maxHeight, "px\n\t\t)");
+  }, [maxHeight]);
+  return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
+    appearance: "UNSAFE_modal-below-sm",
+    onClose: handleClose,
+    placement: "right-start"
+    // Using a capture event listener so that we are more resilient against
+    // code that stops events. We _really_ want to close the flyout whenever
+    // user user clicks outside the flyout content
+    ,
+    shouldUseCaptureOnOutsideClick: true,
+    shouldFitViewport: true,
+    testId: containerTestId,
+    xcss: flyoutMenuItemContentStyles.root,
+    autoFocus: autoFocus,
+    role: (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
+    titleId: (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
+    /**
+     * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
+     *
+     * This allows makers to use popups with `shouldRenderToParent` inside the flyout.
+     *
+     * Without this, the `transform` makes the flyout the containing element for fixed positioning.
+     * Because the flyout is also a scroll container then any nested, layered element is unable to
+     * escape the flyout.
+     *
+     * Disabling the `transform` is the simplest way to resolve this layering issue,
+     * and should have negligible performance impacts, because the flyout menus should rarely
+     * need to be repositioned.
+     */,
+    shouldDisableGpuAcceleration: true,
+    shouldRenderToParent: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')
+  }, function (_ref2) {
+    var update = _ref2.update;
+    return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {
+      ref: forwardedRef,
+      update: update
+    }, (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
+      value: titleId
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        maxHeight: computedMaxHeight
+      },
+      "data-testid": containerTestId ? "".concat(containerTestId, "--container") : undefined,
+      className: (0, _runtime.ax)([flyoutMenuItemContentContainerStyles.container])
+    }, children)) : children);
+  });
+});
+function createResizeObserver(update) {
+  return new ResizeObserver(update);
+}
+
+/**
+ * Will call the Popper.js `update()` method to recalculate positioning, when the flyout menu changes size.
+ * This is the size of the scroll container, NOT the scroll content.
+ *
+ * We could potentially bake this into `@atlaskit/popup` or `@atlaskit/popper` but there are a few
+ * reasons to keep it scoped to flyout menus for now:
+ *
+ * 1. It's easier to unwind
+ * 2. We've only had bug reports for flyout menus
+ * 3. Popup exposes the `update` function so consumers can already do this themselves if necessary
+ * 4. Flyout menus are a lot more restricted to other popups, it might not make sense more generally
+ */
+var UpdatePopperOnContentResize = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, forwardedRef) {
+  var update = _ref3.update,
+    children = _ref3.children;
+  /**
+   * Storing our `update` function in a ref so that we have a stable reference to it.
+   * We need this because our `ResizeObserver` callback cannot be changed after creating it.
+   */
+  var updateRef = (0, _react.useRef)(update);
+  (0, _react.useEffect)(function () {
+    updateRef.current = update;
+  }, [update]);
+
+  /**
+   * Stable function that calls the latest `update` function by calling it through the stable ref.
+   */
+  var triggerUpdate = (0, _react.useCallback)(function () {
+    var _updateRef$current;
+    (_updateRef$current = updateRef.current) === null || _updateRef$current === void 0 || _updateRef$current.call(updateRef);
+  }, []);
+  var _useState = (0, _react.useState)(function () {
+      return createResizeObserver(triggerUpdate);
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    resizeObserver = _useState2[0];
+
+  /**
+   * This is a callback ref that will update which `HTMLElement` we are observing,
+   * if or when the underlying `HTMLElement` changes or unmounts.
+   */
+  var observeCallbackRef = (0, _react.useCallback)(function (element) {
+    /**
+     * Unobserves all observed elements.
+     * Allows us to cleanup without needing to store a reference to the previous element.
+     */
+    resizeObserver.disconnect();
+    if (!element) {
+      return;
+    }
+    resizeObserver.observe(element);
+  }, [resizeObserver]);
+
+  /**
+   * We need to memoize the ref otherwise `triggerUpdate` is repeatedly called.
+   *
+   * This stems from ResizeObserver firing once after calling `.observe()` even if there
+   * was no resize.
+   *
+   * Without memoizing the ref, the update causes a rerender, which causes the ref to
+   * get recreated, which triggers an update and so on in a loop.
+   */
+  var ref = (0, _react.useMemo)(function () {
+    return (0, _mergeRefs.default)([forwardedRef, observeCallbackRef]);
+  }, [forwardedRef, observeCallbackRef]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, children);
+});

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTitleId = exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.TitleIdContextProvider = exports.TitleIdContext = exports.SetIsOpenContext = exports.OnCloseContext = exports.IsOpenContext = void 0;
+var _react = require("react");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+/**
+ * __Is open context__
+ *
+ * A context for storing the isOpen value of the FlyoutMenuItem.
+ */
+var IsOpenContext = exports.IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
+
+/**
+ * __Set is open context__
+ *
+ * A context for storing a function that sets isOpen value of the FlyoutMenuItem.
+ */
+var SetIsOpenContext = exports.SetIsOpenContext = /*#__PURE__*/(0, _react.createContext)(_noop.default);
+var useFlyoutMenuOpen = exports.useFlyoutMenuOpen = function useFlyoutMenuOpen() {
+  return (0, _react.useContext)(IsOpenContext);
+};
+var useSetFlyoutMenuOpen = exports.useSetFlyoutMenuOpen = function useSetFlyoutMenuOpen() {
+  return (0, _react.useContext)(SetIsOpenContext);
+};
+
+/**
+ * __On close context__
+ *
+ * A context for storing a ref to the onClose handler with source information.This
+ * is used by FlyoutMenuItemContent, FlyoutMenuItemTrigger and FlyoutHeader to store
+ * the on close function and source information for closing the flyout menu.
+ */
+var OnCloseContext = exports.OnCloseContext = /*#__PURE__*/(0, _react.createContext)({
+  current: null
+});
+
+/**
+ * __Title id context__
+ *
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+var TitleIdContext = exports.TitleIdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useTitleId = exports.useTitleId = function useTitleId() {
+  return (0, _react.useContext)(TitleIdContext);
+};
+
+/**
+ * __Title id provider__
+ *
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+var TitleIdContextProvider = exports.TitleIdContextProvider = TitleIdContext.Provider;

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

@@ -0,0 +1,2 @@
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

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

@@ -0,0 +1,68 @@
+/* flyout-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.FlyoutMenuItemTrigger = void 0;
+require("./flyout-menu-item-trigger.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _experimental = require("@atlaskit/popup/experimental");
+var _menuItem = require("../menu-item");
+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 elemAfterStyles = {
+  root: "_18zr12x7 _1tz3r0mg"
+};
+/**
+ * __FlyoutMenuItemTrigger__
+ *
+ * The button that toggles the flyout menu.
+ */
+var FlyoutMenuItemTrigger = exports.FlyoutMenuItemTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    elemBefore = _ref.elemBefore,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    interactionName = _ref.interactionName,
+    testId = _ref.testId,
+    isContentTooltipDisabled = _ref.isContentTooltipDisabled,
+    visualContentRef = _ref.visualContentRef,
+    isDragging = _ref.isDragging,
+    hasDragIndicator = _ref.hasDragIndicator,
+    dropIndicator = _ref.dropIndicator;
+  return /*#__PURE__*/React.createElement(_experimental.PopupTrigger, null, function (_ref2) {
+    var ref = _ref2.ref,
+      ariaControls = _ref2['aria-controls'],
+      ariaExpanded = _ref2['aria-expanded'],
+      ariaHasPopup = _ref2['aria-haspopup'];
+    return /*#__PURE__*/React.createElement(_menuItem.MenuItemBase, {
+      testId: testId,
+      ref: (0, _mergeRefs.default)([ref, forwardedRef]),
+      visualContentRef: visualContentRef,
+      elemBefore: elemBefore,
+      elemAfter: /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([elemAfterStyles.root])
+      }, /*#__PURE__*/React.createElement(_chevronRight.default, {
+        label: "",
+        color: "currentColor",
+        size: "small"
+      })),
+      onClick: onClick,
+      ariaControls: ariaControls,
+      ariaExpanded: ariaExpanded,
+      ariaHasPopup: ariaHasPopup,
+      interactionName: interactionName,
+      isContentTooltipDisabled: isContentTooltipDisabled,
+      isSelected: isSelected,
+      isDragging: isDragging,
+      hasDragIndicator: hasDragIndicator,
+      dropIndicator: dropIndicator
+    }, children);
+  });
+});

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutMenuItem = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
+var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experimental = require("@atlaskit/popup/experimental");
+var _menuListItem = require("../menu-list-item");
+var _flyoutMenuItemContext = require("./flyout-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); }
+/**
+ * __FlyoutMenuItem__
+ *
+ * Displays content in a flyout menu, triggered by a button.
+ *
+ * The top-level component that contains the trigger and content of a flyout menu.
+ *
+ * Usage example:
+ * ```tsx
+ * <FlyoutMenuItem>
+ *   <FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+ *   <FlyoutMenuItemContent>
+ *     <MenuList>
+ *       <ButtonMenuItem>Item 1</ButtonMenuItem>
+ *       <ButtonMenuItem>Item 2</ButtonMenuItem>
+ *     </MenuList>
+ *   </FlyoutMenuItemContent>
+ * </FlyoutMenuItem>
+ * ```
+ */
+var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    id = _ref.id,
+    isOpenControlled = _ref.isOpen,
+    _ref$isDefaultOpen = _ref.isDefaultOpen,
+    isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
+    onOpenChange = _ref.onOpenChange;
+  var _useControlled = (0, _useControlled3.default)(isOpenControlled, function () {
+      return isDefaultOpen;
+    }),
+    _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+    isOpen = _useControlled2[0],
+    setIsOpen = _useControlled2[1];
+  var previousIsOpen = (0, _usePreviousValue.default)(isOpen);
+  (0, _react.useEffect)(function () {
+    if (previousIsOpen === undefined || previousIsOpen === isOpen) {
+      /**
+       * The previous value is `undefined` on initialization, so if it is `undefined` then the value hasn't changed.
+       *
+       * The previous value can be equal to the current one if the component re-renders due to something else changing.
+       *
+       * In both cases the value hasn't changed and we don't want to notify consumers.
+       */
+      return;
+    }
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
+  }, [isOpen, onOpenChange, previousIsOpen]);
+  return /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.IsOpenContext.Provider, {
+    value: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.SetIsOpenContext.Provider, {
+    value: setIsOpen
+  }, /*#__PURE__*/_react.default.createElement(_menuListItem.MenuListItem, {
+    ref: forwardedRef
+  }, /*#__PURE__*/_react.default.createElement(_experimental.Popup, {
+    id: id,
+    isOpen: isOpen,
+    role: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
+  }, children))));
+});

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

@@ -0,0 +1 @@
+._10m98stt{scroll-margin-inline:750pt}