@atlaskit/atlassian-navigation/dist/cjs/components/AtlassianNavigation/skeleton.js

A horizontal navigation component for Atlassian apps.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NavigationSkeleton = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _skeleton = require("../IconButton/skeleton");
var _skeleton2 = require("../PrimaryItemsContainer/skeleton");
var _skeleton3 = require("../ProductHome/skeleton");
var _skeleton4 = require("../Profile/skeleton");
var _skeleton5 = require("../Search/skeleton");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var containerStyles = (0, _react2.css)({
  display: 'flex',
  boxSizing: 'border-box',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  height: _constants.HORIZONTAL_GLOBAL_NAV_HEIGHT,
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'space-between',
  flexShrink: 0,
  borderBlockEnd: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
  paddingInlineEnd: "var(--ds-space-150, 12px)",
  paddingInlineStart: "var(--ds-space-150, 12px)"
});
var leftStyles = (0, _react2.css)({
  display: 'flex',
  minWidth: 0,
  height: 'inherit',
  alignItems: 'center',
  flexGrow: 1,
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& > *': {
    flexShrink: 0
  }
});
var rightStyles = (0, _react2.css)({
  display: 'flex',
  alignItems: 'center',
  flexShrink: 0,
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& > *': {
    flexShrink: 0,
    marginInlineEnd: "var(--ds-space-050, 4px)"
  }
});

/**
 * __Navigation skeleton__
 *
 * Use loading skeletons to reduce the perceived loading time of heavier
 * full-page experiences. This should only be used when the whole navigation is
 * delayed; if there are only certain dynamically loaded navigation items that
 * slow down the page, you should look into using
 * [skeleton buttons](https://atlassian.design/components/atlassian-navigation/examples#skeleton-button)
 * instead.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#skeleton-loader)
 * - [Code](https://atlassian.design/components/{packageName}/code)
 *
 * @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */
var NavigationSkeleton = exports.NavigationSkeleton = function NavigationSkeleton(_ref) {
  var _ref$primaryItemsCoun = _ref.primaryItemsCount,
    primaryItemsCount = _ref$primaryItemsCoun === void 0 ? 4 : _ref$primaryItemsCoun,
    _ref$secondaryItemsCo = _ref.secondaryItemsCount,
    secondaryItemsCount = _ref$secondaryItemsCo === void 0 ? 4 : _ref$secondaryItemsCo,
    _ref$theme = _ref.theme,
    theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
    _ref$showSiteName = _ref.showSiteName,
    showSiteName = _ref$showSiteName === void 0 ? false : _ref$showSiteName,
    _ref$shouldShowSearch = _ref.shouldShowSearch,
    shouldShowSearch = _ref$shouldShowSearch === void 0 ? true : _ref$shouldShowSearch,
    testId = _ref.testId;
  return (0, _react2.jsx)(_theme.ThemeProvider, {
    value: theme
  }, (0, _react2.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    style: theme.mode.navigation,
    css: containerStyles,
    "data-testid": testId
  }, (0, _react2.jsx)("div", {
    css: leftStyles
  }, (0, _react2.jsx)(_skeleton.IconButtonSkeleton, {
    marginLeft: 0,
    marginRight: 5,
    size: 26
  }), (0, _react2.jsx)(_skeleton3.ProductHomeSkeleton, {
    showSiteName: showSiteName
  }), (0, _react2.jsx)(_skeleton2.PrimaryItemsContainerSkeleton, {
    count: primaryItemsCount
  })), (0, _react2.jsx)("div", {
    css: rightStyles
  }, shouldShowSearch && (0, _react2.jsx)(_skeleton5.SearchSkeleton, null), Array.from({
    length: secondaryItemsCount
  }, function (_, index) {
    return (0, _react2.jsx)(_skeleton.IconButtonSkeleton, {
      key: index,
      marginLeft: 0,
      marginRight: 4,
      size: 26
    });
  }), (0, _react2.jsx)(_skeleton4.ProfileSkeleton, null))));
};