@atlaskit/side-nav-items 1.0.0

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

@@ -0,0 +1,51 @@
+import { createContext, useContext } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+/**
+ * __Is open context__
+ *
+ * A context for storing the isOpen value of the FlyoutMenuItem.
+ */
+export var IsOpenContext = /*#__PURE__*/createContext(false);
+
+/**
+ * __Set is open context__
+ *
+ * A context for storing a function that sets isOpen value of the FlyoutMenuItem.
+ */
+export var SetIsOpenContext = /*#__PURE__*/createContext(noop);
+export var useFlyoutMenuOpen = function useFlyoutMenuOpen() {
+  return useContext(IsOpenContext);
+};
+export var useSetFlyoutMenuOpen = function useSetFlyoutMenuOpen() {
+  return 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.
+ */
+export var OnCloseContext = /*#__PURE__*/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.
+ */
+export var TitleIdContext = /*#__PURE__*/createContext(undefined);
+export var useTitleId = function useTitleId() {
+  return useContext(TitleIdContext);
+};
+
+/**
+ * __Title id provider__
+ *
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export var TitleIdContextProvider = TitleIdContext.Provider;

package/dist/esm/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/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js

@@ -0,0 +1,59 @@
+/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-menu-item-trigger.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { PopupTrigger } from '@atlaskit/popup/experimental';
+import { MenuItemBase } from '../menu-item';
+var elemAfterStyles = {
+  root: "_18zr12x7 _1tz3r0mg"
+};
+/**
+ * __FlyoutMenuItemTrigger__
+ *
+ * The button that toggles the flyout menu.
+ */
+export var FlyoutMenuItemTrigger = /*#__PURE__*/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(PopupTrigger, null, function (_ref2) {
+    var ref = _ref2.ref,
+      ariaControls = _ref2['aria-controls'],
+      ariaExpanded = _ref2['aria-expanded'],
+      ariaHasPopup = _ref2['aria-haspopup'];
+    return /*#__PURE__*/React.createElement(MenuItemBase, {
+      testId: testId,
+      ref: mergeRefs([ref, forwardedRef]),
+      visualContentRef: visualContentRef,
+      elemBefore: elemBefore,
+      elemAfter: /*#__PURE__*/React.createElement("div", {
+        className: ax([elemAfterStyles.root])
+      }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+        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/esm/ui/menu-item/flyout-menu-item/flyout-menu-item.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { forwardRef, useEffect } from 'react';
+import useControlled from '@atlaskit/ds-lib/use-controlled';
+import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Popup } from '@atlaskit/popup/experimental';
+import { MenuListItem } from '../menu-list-item';
+import { IsOpenContext, SetIsOpenContext } from './flyout-menu-item-context';
+/**
+ * __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>
+ * ```
+ */
+export var FlyoutMenuItem = /*#__PURE__*/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 = useControlled(isOpenControlled, function () {
+      return isDefaultOpen;
+    }),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    isOpen = _useControlled2[0],
+    setIsOpen = _useControlled2[1];
+  var previousIsOpen = usePreviousValue(isOpen);
+  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.createElement(IsOpenContext.Provider, {
+    value: isOpen
+  }, /*#__PURE__*/React.createElement(SetIsOpenContext.Provider, {
+    value: setIsOpen
+  }, /*#__PURE__*/React.createElement(MenuListItem, {
+    ref: forwardedRef
+  }, /*#__PURE__*/React.createElement(Popup, {
+    id: id,
+    isOpen: isOpen,
+    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
+  }, children))));
+});

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

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

package/dist/esm/ui/menu-item/link-menu-item.js

@@ -0,0 +1,72 @@
+/* link-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./link-menu-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useMemo, useRef } from 'react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { ListItem } from './list-item';
+import { MenuItemBase } from './menu-item';
+import { useScrollMenuItemIntoView } from './use-scroll-menu-item-into-view';
+var listItemStyles = {
+  root: "_10m98stt"
+};
+var LinkMenuItemNoRef = function LinkMenuItemNoRef(_ref, forwardedRef) {
+  var testId = _ref.testId,
+    actions = _ref.actions,
+    children = _ref.children,
+    description = _ref.description,
+    elemAfter = _ref.elemAfter,
+    elemBefore = _ref.elemBefore,
+    href = _ref.href,
+    target = _ref.target,
+    actionsOnHover = _ref.actionsOnHover,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    interactionName = _ref.interactionName,
+    isContentTooltipDisabled = _ref.isContentTooltipDisabled,
+    visualContentRef = _ref.visualContentRef,
+    listItemRef = _ref.listItemRef,
+    isDragging = _ref.isDragging,
+    hasDragIndicator = _ref.hasDragIndicator,
+    dropIndicator = _ref.dropIndicator;
+  var itemRef = useRef(null);
+  useScrollMenuItemIntoView({
+    elementRef: itemRef,
+    isSelected: isSelected !== null && isSelected !== void 0 ? isSelected : false
+  });
+  var ref = useMemo(function () {
+    return mergeRefs([itemRef, listItemRef !== null && listItemRef !== void 0 ? listItemRef : null]);
+  }, [itemRef, listItemRef]);
+  return /*#__PURE__*/React.createElement(ListItem, {
+    ref: ref,
+    xcss: listItemStyles.root
+  }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    testId: testId,
+    description: description,
+    actions: actions,
+    elemAfter: elemAfter
+    // TODO Always use "open in new window" icon when `openInNewWindow` prop is true
+    ,
+    elemBefore: elemBefore,
+    href: href,
+    target: target,
+    actionsOnHover: actionsOnHover,
+    isSelected: isSelected,
+    onClick: onClick,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+};
+
+/**
+ * LinkMenuItem
+ *
+ * A menu item link. It should be used within a `ul`.
+ */
+export var LinkMenuItem = forwardRefWithGeneric(LinkMenuItemNoRef);

package/dist/esm/ui/menu-item/list-item.js

@@ -0,0 +1,22 @@
+/* list-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+function _ListItem(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "listitem",
+    ref: ref,
+    className: xcss,
+    "data-testid": testId
+  }, children);
+}
+
+/**
+ * __List item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+export var ListItem = /*#__PURE__*/forwardRef(_ListItem);

package/dist/esm/ui/menu-item/list.js

@@ -0,0 +1,32 @@
+/* list.tsx generated by @compiled/babel-plugin v0.38.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+function _List(_ref, forwardedRef) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss;
+  return (
+    /*#__PURE__*/
+    /**
+     * We are using `role="list"` instead of a `ul` element to enable more flexible
+     * composition. By using ARIA roles we can validly have elements between a list
+     * and list items, as long as those in-between elements have no semantics.
+     */
+    React.createElement("div", {
+      role: "list",
+      ref: forwardedRef,
+      className: xcss,
+      "data-testid": testId
+    }, children)
+  );
+}
+
+/**
+ * __List__
+ *
+ * A an element with the role of `list` for semantically grouping list items.
+ *
+ * This is the internal primitive used by other external components in the navigation system.
+ */
+export var List = /*#__PURE__*/forwardRef(_List);

package/dist/esm/ui/menu-item/menu-item-signals.js

@@ -0,0 +1,5 @@
+/**
+ * A symbol to collapse the `elemBefore` slot.
+ * This should be placed in the `elemBefore` prop of supported menu items.
+ */
+export var COLLAPSE_ELEM_BEFORE = Symbol('collapse-elem-before');

package/dist/esm/ui/menu-item/menu-item.compiled.css

@@ -0,0 +1,101 @@
+
+._1r04ze3t{inset:var(--ds-space-0,0)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._nd5l16dh{grid-area:elem-after}
+._nd5l17zh{grid-area:elem-before}
+._nd5l19l3{grid-area:interactive}
+._nd5lbc26{grid-area:actions}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpv77o{gap:var(--ds-space-025,2px)}
+._1ii7kb7n{grid-row:1}
+._yyhyjvu9{grid-column:1/-1}
+._14iu13ro:active:not(:disabled){background-color:var(--ds-surface-pressed,#dddee1)}
+._14iunozp:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#8fb8f6)}
+._152t1ssb{inset-block-start:50%}
+._18m915vq{overflow-y:hidden}
+._18ukglyw:not(:has(button,a)){pointer-events:none}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1bsbty16{width:var(--actions-on-hover-width)}
+._1bsbyh40{width:2px}
+._1cykglyw{--drag-handle-display:none}
+._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1e0c11p5{display:grid}
+._1e0c13yo{display:var(--elem-after-display)}
+._1e0c1txw{display:flex}
+._1ifmglyw{-webkit-touch-callout:none}
+._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
+._1o9zidpf{flex-shrink:0}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
+._1reo15vq{overflow-x:hidden}
+._1swv19i6:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f0f1f2)}
+._1swvufnl:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1ul91c9m{min-width:1ch}
+._1ul9t9kd{min-width:72px}
+._1yyu1j28{--notch-color:transparent}
+._1yyujmqp{--notch-color:var(--ds-background-selected-bold,#1868db)}
+._2lx21bp4{flex-direction:column}
+._2z05hkll{grid-template-rows:1fr}
+._2z05nbh3{grid-template-rows:subgrid}
+._4cvr1h6o{align-items:center}
+._4t3i1crf{height:9pt}
+._4t3i1tcg{height:24px}
+._4t3i1wto{height:3rem}
+._4t3iviql{height:2rem}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._91ju1txw{--elem-after-display:flex}
+._91juglyw{--elem-after-display:none}
+._ae4v1h6o{align-content:center}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
+._bfhk1j28{background-color:transparent}
+._bfhk1o0g{background-color:var(--notch-color)}
+._bfhkn7od{background-color:unset}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._db80idpf{--actions-on-hover-padding:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
+._pmxp1wug{--actions-on-hover-width:auto}
+._pmxpidpf{--actions-on-hover-width:0}
+._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._t9ec1i34{transform:translateY(-50%)}
+._tzy41ou4{opacity:.4}
+._tzy4pnc3{opacity:var(--actions-on-hover-opacity)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._uomdidpf{--actions-on-hover-opacity:0}
+._uomdkb7n{--actions-on-hover-opacity:1}
+._vchh1ntv{box-sizing:content-box}
+._vchhusvi{box-sizing:border-box}
+._y3gnv2br{text-align:start}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tidria{padding-inline-end:var(--actions-on-hover-padding)}
+._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
+._yv0enbh3{grid-template-columns:subgrid}
+._12s918uv:focus-within{overflow-y:initial}
+._1guo18uv:focus-within{overflow-x:initial}
+._1mfcglyw:focus-within{--elem-after-display:none}
+._91nl1wug:focus-within{--actions-on-hover-width:auto}
+._iy5o1b66:focus-within{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}._11om6b4r:hover{animation-name:k1xyysw3}
+._1sjuglyw:hover{--elem-after-display:none}
+._1uy01amc:hover{animation-delay:.8s}
+._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
+._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
+._7psyru3m:hover{animation-duration:0s}
+._bir2q7pw:hover{animation-fill-mode:forwards}
+._g4kikb7n:hover{--actions-on-hover-opacity:1}
+._irr319i6:hover{background-color:var(--ds-surface-hovered,#f0f1f2)}
+._irr3n7od:hover{background-color:unset}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._x0kw1txw:hover{--drag-handle-display:flex}
+._ynyi1wug:hover{--actions-on-hover-width:auto}
+@keyframes k1xyysw3{to{cursor:grab}}