@atlaskit/navigation-system 0.166.0

package/dist/cjs/index.js

@@ -0,0 +1,327 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AppSwitcher", {
+  enumerable: true,
+  get: function get() {
+    return _appSwitcher.AppSwitcher;
+  }
+});
+Object.defineProperty(exports, "Aside", {
+  enumerable: true,
+  get: function get() {
+    return _aside.Aside;
+  }
+});
+Object.defineProperty(exports, "Banner", {
+  enumerable: true,
+  get: function get() {
+    return _banner.Banner;
+  }
+});
+Object.defineProperty(exports, "ButtonMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _buttonMenuItem.ButtonMenuItem;
+  }
+});
+Object.defineProperty(exports, "COLLAPSE_ELEM_BEFORE", {
+  enumerable: true,
+  get: function get() {
+    return _menuItemSignals.COLLAPSE_ELEM_BEFORE;
+  }
+});
+Object.defineProperty(exports, "ChatButton", {
+  enumerable: true,
+  get: function get() {
+    return _chatButton.ChatButton;
+  }
+});
+Object.defineProperty(exports, "ContainerAvatar", {
+  enumerable: true,
+  get: function get() {
+    return _containerAvatar.ContainerAvatar;
+  }
+});
+Object.defineProperty(exports, "CreateButton", {
+  enumerable: true,
+  get: function get() {
+    return _createButton.CreateButton;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _divider.Divider;
+  }
+});
+Object.defineProperty(exports, "EndItem", {
+  enumerable: true,
+  get: function get() {
+    return _endItem.EndItem;
+  }
+});
+Object.defineProperty(exports, "ExpandableMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _expandableMenuItem.ExpandableMenuItem;
+  }
+});
+Object.defineProperty(exports, "ExpandableMenuItemContent", {
+  enumerable: true,
+  get: function get() {
+    return _expandableMenuItemContent.ExpandableMenuItemContent;
+  }
+});
+Object.defineProperty(exports, "ExpandableMenuItemTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _expandableMenuItemTrigger.ExpandableMenuItemTrigger;
+  }
+});
+Object.defineProperty(exports, "FlyoutMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _flyoutMenuItem.FlyoutMenuItem;
+  }
+});
+Object.defineProperty(exports, "FlyoutMenuItemContent", {
+  enumerable: true,
+  get: function get() {
+    return _flyoutMenuItemContent.FlyoutMenuItemContent;
+  }
+});
+Object.defineProperty(exports, "FlyoutMenuItemTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _flyoutMenuItemTrigger.FlyoutMenuItemTrigger;
+  }
+});
+Object.defineProperty(exports, "Help", {
+  enumerable: true,
+  get: function get() {
+    return _help.Help;
+  }
+});
+Object.defineProperty(exports, "LinkMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _linkMenuItem.LinkMenuItem;
+  }
+});
+Object.defineProperty(exports, "LogIn", {
+  enumerable: true,
+  get: function get() {
+    return _logIn.LogIn;
+  }
+});
+Object.defineProperty(exports, "Main", {
+  enumerable: true,
+  get: function get() {
+    return _main.Main;
+  }
+});
+Object.defineProperty(exports, "MainStickyHeader", {
+  enumerable: true,
+  get: function get() {
+    return _mainStickyHeader.MainStickyHeader;
+  }
+});
+Object.defineProperty(exports, "MenuList", {
+  enumerable: true,
+  get: function get() {
+    return _menuList.MenuList;
+  }
+});
+Object.defineProperty(exports, "MenuListItem", {
+  enumerable: true,
+  get: function get() {
+    return _menuListItem.MenuListItem;
+  }
+});
+Object.defineProperty(exports, "MenuSection", {
+  enumerable: true,
+  get: function get() {
+    return _menuSection.MenuSection;
+  }
+});
+Object.defineProperty(exports, "MenuSectionHeading", {
+  enumerable: true,
+  get: function get() {
+    return _menuSectionHeading.MenuSectionHeading;
+  }
+});
+Object.defineProperty(exports, "NavLogo", {
+  enumerable: true,
+  get: function get() {
+    return _navLogo.NavLogo;
+  }
+});
+Object.defineProperty(exports, "Notifications", {
+  enumerable: true,
+  get: function get() {
+    return _notifications.Notifications;
+  }
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function get() {
+    return _panel.Panel;
+  }
+});
+Object.defineProperty(exports, "PanelSplitter", {
+  enumerable: true,
+  get: function get() {
+    return _panelSplitter.PanelSplitter;
+  }
+});
+Object.defineProperty(exports, "PanelSplitterProvider", {
+  enumerable: true,
+  get: function get() {
+    return _provider.PanelSplitterProvider;
+  }
+});
+Object.defineProperty(exports, "Profile", {
+  enumerable: true,
+  get: function get() {
+    return _profile.Profile;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function get() {
+    return _root.Root;
+  }
+});
+Object.defineProperty(exports, "Search", {
+  enumerable: true,
+  get: function get() {
+    return _search.Search;
+  }
+});
+Object.defineProperty(exports, "Settings", {
+  enumerable: true,
+  get: function get() {
+    return _settings.Settings;
+  }
+});
+Object.defineProperty(exports, "SideNav", {
+  enumerable: true,
+  get: function get() {
+    return _sideNav.SideNav;
+  }
+});
+Object.defineProperty(exports, "SideNavContent", {
+  enumerable: true,
+  get: function get() {
+    return _sideNavContent.SideNavContent;
+  }
+});
+Object.defineProperty(exports, "SideNavFooter", {
+  enumerable: true,
+  get: function get() {
+    return _sideNavFooter.SideNavFooter;
+  }
+});
+Object.defineProperty(exports, "SideNavHeader", {
+  enumerable: true,
+  get: function get() {
+    return _sideNavHeader.SideNavHeader;
+  }
+});
+Object.defineProperty(exports, "SideNavToggleButton", {
+  enumerable: true,
+  get: function get() {
+    return _toggleButton.SideNavToggleButton;
+  }
+});
+Object.defineProperty(exports, "TopLevelSpacer", {
+  enumerable: true,
+  get: function get() {
+    return _topLevelSpacer.TopLevelSpacer;
+  }
+});
+Object.defineProperty(exports, "TopNav", {
+  enumerable: true,
+  get: function get() {
+    return _topNav.TopNav;
+  }
+});
+Object.defineProperty(exports, "TopNavEnd", {
+  enumerable: true,
+  get: function get() {
+    return _topNavEnd.TopNavEnd;
+  }
+});
+Object.defineProperty(exports, "TopNavMiddle", {
+  enumerable: true,
+  get: function get() {
+    return _topNavMiddle.TopNavMiddle;
+  }
+});
+Object.defineProperty(exports, "TopNavStart", {
+  enumerable: true,
+  get: function get() {
+    return _topNavStart.TopNavStart;
+  }
+});
+Object.defineProperty(exports, "useIsExpanded", {
+  enumerable: true,
+  get: function get() {
+    return _expandableMenuItemContext.useIsExpanded;
+  }
+});
+Object.defineProperty(exports, "useToggleSideNav", {
+  enumerable: true,
+  get: function get() {
+    return _useToggleSideNav.useToggleSideNav;
+  }
+});
+var _expandableMenuItem = require("./ui/menu-item/expandable-menu-item/expandable-menu-item");
+var _expandableMenuItemTrigger = require("./ui/menu-item/expandable-menu-item/expandable-menu-item-trigger");
+var _expandableMenuItemContent = require("./ui/menu-item/expandable-menu-item/expandable-menu-item-content");
+var _expandableMenuItemContext = require("./ui/menu-item/expandable-menu-item/expandable-menu-item-context");
+var _flyoutMenuItem = require("./ui/menu-item/flyout-menu-item/flyout-menu-item");
+var _flyoutMenuItemContent = require("./ui/menu-item/flyout-menu-item/flyout-menu-item-content");
+var _flyoutMenuItemTrigger = require("./ui/menu-item/flyout-menu-item/flyout-menu-item-trigger");
+var _buttonMenuItem = require("./ui/menu-item/button-menu-item");
+var _linkMenuItem = require("./ui/menu-item/link-menu-item");
+var _menuItemSignals = require("./ui/menu-item/menu-item-signals");
+var _menuListItem = require("./ui/menu-item/menu-list-item");
+var _containerAvatar = require("./ui/menu-item/container-avatar");
+var _menuList = require("./ui/menu-item/menu-list");
+var _topLevelSpacer = require("./ui/menu-item/top-level-spacer");
+var _menuSection = require("./ui/menu-section/menu-section");
+var _menuSectionHeading = require("./ui/menu-section/menu-section-heading");
+var _divider = require("./ui/menu-section/divider");
+var _aside = require("./ui/page-layout/aside");
+var _banner = require("./ui/page-layout/banner");
+var _main = require("./ui/page-layout/main/main");
+var _panel = require("./ui/page-layout/panel");
+var _root = require("./ui/page-layout/root");
+var _sideNav = require("./ui/page-layout/side-nav/side-nav");
+var _topNav = require("./ui/page-layout/top-nav/top-nav");
+var _mainStickyHeader = require("./ui/page-layout/main/main-sticky-header");
+var _toggleButton = require("./ui/page-layout/side-nav/toggle-button");
+var _useToggleSideNav = require("./ui/page-layout/side-nav/use-toggle-side-nav");
+var _sideNavHeader = require("./ui/page-layout/side-nav/side-nav-header");
+var _sideNavContent = require("./ui/page-layout/side-nav/side-nav-content");
+var _sideNavFooter = require("./ui/page-layout/side-nav/side-nav-footer");
+var _panelSplitter = require("./ui/page-layout/panel-splitter/panel-splitter");
+var _provider = require("./ui/page-layout/panel-splitter/provider");
+var _topNavStart = require("./ui/page-layout/top-nav/top-nav-start");
+var _appSwitcher = require("./ui/top-nav-items/app-switcher");
+var _navLogo = require("./ui/top-nav-items/nav-logo");
+var _topNavMiddle = require("./ui/page-layout/top-nav/top-nav-middle");
+var _search = require("./ui/top-nav-items/search");
+var _chatButton = require("./ui/top-nav-items/chat-button");
+var _topNavEnd = require("./ui/page-layout/top-nav/top-nav-end");
+var _endItem = require("./ui/top-nav-items/end-item");
+var _createButton = require("./ui/top-nav-items/create-button");
+var _help = require("./ui/top-nav-items/help");
+var _notifications = require("./ui/top-nav-items/notifications");
+var _profile = require("./ui/top-nav-items/profile");
+var _settings = require("./ui/top-nav-items/settings");
+var _logIn = require("./ui/top-nav-items/log-in");

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _menuItem = require("./menu-item");
+var _menuListItem = require("./menu-list-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); }
+/**
+ * We intentionally do not support the `isSelected` prop (which other menu item components
+ * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
+ *  to and become in a selected state.
+ */
+
+/**
+ * __ButtonMenuItem__
+ *
+ * A menu item button. It should be used within a `ul`, as it renders a list item.
+ */
+var ButtonMenuItem = exports.ButtonMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var testId = _ref.testId,
+    actions = _ref.actions,
+    children = _ref.children,
+    description = _ref.description,
+    elemAfter = _ref.elemAfter,
+    isDisabled = _ref.isDisabled,
+    elemBefore = _ref.elemBefore,
+    actionsOnHover = _ref.actionsOnHover,
+    onClick = _ref.onClick,
+    interactionName = _ref.interactionName,
+    isContentTooltipDisabled = _ref.isContentTooltipDisabled,
+    visualContentRef = _ref.visualContentRef,
+    listItemRef = _ref.listItemRef,
+    isDragging = _ref.isDragging,
+    hasDragIndicator = _ref.hasDragIndicator,
+    dropIndicator = _ref.dropIndicator;
+  return /*#__PURE__*/_react.default.createElement(_menuListItem.MenuListItem, {
+    ref: listItemRef
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItemBase, {
+    testId: testId,
+    description: description,
+    elemAfter: elemAfter,
+    elemBefore: elemBefore,
+    isDisabled: isDisabled
+    /**
+     * Not passing `actions` and `actionsOnHover` to MenuItemBase when `isDisabled`,
+     * so they aren't rendered in the disabled state.
+     */,
+    actions: isDisabled ? undefined : actions,
+    actionsOnHover: isDisabled ? undefined : actionsOnHover,
+    onClick: onClick,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+});

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandableMenuItemIndentation = void 0;
+/**
+ * _Internally_ shared value for the menu item indentation. Used in:
+ * - Expandable menu item content, to add padding for each expandable level
+ * - The base menu item, to set the negative inset to extend the clickable area of nested menu items
+ * to the root level menu items.
+ *
+ * Internal to the package only. Should not be exported from the package.
+ *
+ * Note: We're unable to use a token() call here, as Compiled complains about function calls in imported
+ * values - it requires statically defined values only.
+ *
+ * @private
+ * @internal
+ */
+var expandableMenuItemIndentation = exports.expandableMenuItemIndentation = '12px';

package/dist/cjs/ui/menu-item/container-avatar.compiled.css

@@ -0,0 +1,4 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._1bsbgktf{width:20px}
+._4t3igktf{height:20px}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/ui/menu-item/container-avatar.js

@@ -0,0 +1,34 @@
+/* container-avatar.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerAvatar = void 0;
+require("./container-avatar.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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: "_2rkoiti9 _vchhusvi _4t3igktf _1bsbgktf"
+};
+/**
+ * __Container avatar__
+ *
+ * This component has been introduced specifically for the Nav4 sidebar because the existing Avatar component
+ * did not offer the correct sizes to align with the designs. It was necessary to create a new component rather than
+ * using the ADS image component because that did not allow the ability to set the border and radius and the desired
+ * presentation was not achievable through nesting within another styled component. At some point this component maybe
+ * removed if the Avatar component is updated to allow for the desired presentation.
+ *
+ * A container avatar to be used in sidebar navigation items.
+ */
+var ContainerAvatar = exports.ContainerAvatar = function ContainerAvatar(_ref) {
+  var src = _ref.src;
+  return /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: "",
+    className: (0, _runtime.ax)([styles.root])
+  });
+};

package/dist/cjs/ui/menu-item/drag-and-drop/drag-preview.compiled.css

@@ -0,0 +1,8 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._1ul9uuw1{min-width:200px}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._p12fgx0z{max-width:260px}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

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

@@ -0,0 +1,63 @@
+/* drag-preview.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragPreview = DragPreview;
+require("./drag-preview.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _expandableMenuItemLevelContext = require("../expandable-menu-item/expandable-menu-item-level-context");
+var _menuItem = require("../menu-item");
+var _menuItemSignals = require("../menu-item-signals");
+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); }
+// Using JavaScript for detecting Safari, as I could not find a reliable way to do it with CSS.
+function isSafari() {
+  if (process.env.NODE_ENV === 'test') {
+    return false;
+  }
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  var _navigator = navigator,
+    userAgent = _navigator.userAgent;
+  return userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
+}
+var dragPreviewStyles = {
+  root: "_2rkoglpi _189ee4h9 _1h6dmuej _1dqonqa1 _bfhkvuon _y4ti1b66 _p12fgx0z",
+  safariFix: "_1ul9uuw1"
+};
+
+/**
+ * A drag preview for sidebar menu items.
+ *
+ * The limited API corresponds with the limited amount of information we
+ * want to show in drag previews.
+ *
+ * If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
+ * There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
+ * need to maintain vertical side navigation vertical alignment in the drag preview.
+ *
+ * Please ensure the drag preview is pushed away from the users pointer
+ * (with `pointerOutsideOfPreview()` from Pragmatic drag and drop) by our
+ * standard amount (`{x: token('space.200'), y: token('space.100')`)
+ */
+function DragPreview(_ref) {
+  var elemBefore = _ref.elemBefore,
+    children = _ref.children;
+  return (
+    /*#__PURE__*/
+    // Resetting the expandable menu items to 0.
+    // This is to prevent our hidden element from pushing
+    // the drag preview further away from the users pointer
+    React.createElement(_expandableMenuItemLevelContext.ExpandableMenuItemLevelContext.Provider, {
+      value: 0
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([dragPreviewStyles.root, isSafari() && dragPreviewStyles.safariFix])
+    }, /*#__PURE__*/React.createElement(_menuItem.MenuItemBase, {
+      elemBefore: elemBefore !== null && elemBefore !== void 0 ? elemBefore : _menuItemSignals.COLLAPSE_ELEM_BEFORE
+    }, children)))
+  );
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DropIndicator", {
+  enumerable: true,
+  get: function get() {
+    return _listItem.DropIndicator;
+  }
+});
+var _listItem = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/list-item");

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GroupDropIndicator", {
+  enumerable: true,
+  get: function get() {
+    return _group.GroupDropIndicator;
+  }
+});
+var _group = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/group");

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "attachInstruction", {
+  enumerable: true,
+  get: function get() {
+    return _listItem.attachInstruction;
+  }
+});
+Object.defineProperty(exports, "extractInstruction", {
+  enumerable: true,
+  get: function get() {
+    return _listItem.extractInstruction;
+  }
+});
+var _listItem = require("@atlaskit/pragmatic-drag-and-drop-hitbox/list-item");