@atlaskit/breadcrumbs/dist/cjs/components/breadcrumbs-skeleton.js

Breadcrumbs are a navigation system used to show a user's location in a site or app.

/* breadcrumbs-skeleton.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BreadcrumbsSkeleton;
require("./breadcrumbs-skeleton.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireDefault(require("react"));
var _breadcrumbsSkeletonItem = _interopRequireDefault(require("./breadcrumbs-skeleton-item"));
var _breadcrumbsSkeletonContext = require("./internal/breadcrumbs-skeleton-context");
var styles = {
  nav: "_p12f1osq",
  list: "_1e0c1txw _4cvr1h6o _1n261g80 _2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"
};
var defaultItems = [/*#__PURE__*/_react.default.createElement(_breadcrumbsSkeletonItem.default, {
  key: "home",
  width: 64
}), /*#__PURE__*/_react.default.createElement(_breadcrumbsSkeletonItem.default, {
  key: "parent",
  width: 96
}), /*#__PURE__*/_react.default.createElement(_breadcrumbsSkeletonItem.default, {
  key: "current",
  width: 80
})];

/**
 * __BreadcrumbsSkeleton__
 *
 * A placeholder skeleton for breadcrumbs while navigation data is loading.
 */
function BreadcrumbsSkeleton(_ref) {
  var children = _ref.children,
    _ref$isShimmering = _ref.isShimmering,
    isShimmering = _ref$isShimmering === void 0 ? true : _ref$isShimmering,
    _ref$label = _ref.label,
    label = _ref$label === void 0 ? 'Loading breadcrumbs' : _ref$label,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    testId = _ref.testId;
  var renderedChildren = _react.default.Children.count(children) > 0 ? children : defaultItems;
  return /*#__PURE__*/_react.default.createElement(_breadcrumbsSkeletonContext.BreadcrumbsSkeletonContext.Provider, {
    value: {
      isShimmering: isShimmering,
      size: size
    }
  }, /*#__PURE__*/_react.default.createElement("nav", {
    "aria-busy": "true",
    "aria-label": label,
    className: (0, _runtime.ax)([styles.nav])
  }, /*#__PURE__*/_react.default.createElement("ol", {
    "aria-hidden": "true",
    "data-testid": testId,
    className: (0, _runtime.ax)([styles.list])
  }, renderedChildren)));
}