@atlaskit/side-nav-items 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/side-nav-items
 
+## 1.4.0
+
+### Minor Changes
+
+- [`ea028d2a58383`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea028d2a58383) -
+  Implemented the SkeletonMenuItem and SkeletonMenuSectionHeading components to match the
+  corresponding components they represent.
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/cjs/entry-points/skeleton.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SkeletonMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _skeletonMenuItem.SkeletonMenuItem;
+  }
+});
+Object.defineProperty(exports, "SkeletonMenuSectionHeading", {
+  enumerable: true,
+  get: function get() {
+    return _skeletonMenuSectionHeading.SkeletonMenuSectionHeading;
+  }
+});
+var _skeletonMenuItem = require("../ui/skeleton/skeleton-menu-item");
+var _skeletonMenuSectionHeading = require("../ui/skeleton/skeleton-menu-section-heading");

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

@@ -0,0 +1,24 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._1bah1h6o{justify-content:center}
+._1bsb1wqb{width:60px}
+._1bsb53f4{width:75pt}
+._1bsbgktf{width:20px}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3ifvz7{height:1cap}
+._4t3igktf{height:20px}
+._4t3iu7e1{height:1lh}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}

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

@@ -0,0 +1,61 @@
+/* skeleton-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonMenuItem = void 0;
+require("./skeleton-menu-item.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _compiled = require("@atlaskit/primitives/compiled");
+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 containerStyles = {
+  root: "_4t3i1tcg _bozg1b66 _y4ti1b66 _1q511b66 _85i51b66 _1e0c1txw _4cvr1h6o",
+  text: "_bozg1b66 _y4ti1b66",
+  item: "_11c8fhey _4t3iu7e1 _1e0c1txw _4cvr1h6o",
+  hasDescription: "_4t3i1ylp",
+  description: "_11c8wadc _4t3iu7e1 _1e0c1txw _4cvr1h6o",
+  elemBefore: "_bozgv77o _y4tiv77o _1q51v77o _85i5v77o _1e0c1txw _4cvr1h6o _1bah1h6o"
+};
+var skeletonStyles = {
+  item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ifvz7",
+  elemBefore: "_2rko12b0 _bfhkizff _1bsbgktf _4t3igktf",
+  description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
+};
+/**
+ * __Skeleton menu item__
+ *
+ * A skeleton menu item is used to display a loading state for a side nav menu item.
+ * This component can have an icon element skeleton, and a description skeleton included.
+ */
+var SkeletonMenuItem = exports.SkeletonMenuItem = function SkeletonMenuItem(props) {
+  var _props$hasDescription = props.hasDescription,
+    hasDescription = _props$hasDescription === void 0 ? false : _props$hasDescription,
+    _props$hasElemBefore = props.hasElemBefore,
+    hasElemBefore = _props$hasElemBefore === void 0 ? false : _props$hasElemBefore,
+    testId = props.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([containerStyles.root, hasDescription && containerStyles.hasDescription])
+  }, /*#__PURE__*/React.createElement(_compiled.Flex, {
+    alignItems: "center"
+  }, hasElemBefore && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([containerStyles.elemBefore])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([skeletonStyles.elemBefore])
+  })), /*#__PURE__*/React.createElement(_compiled.Flex, {
+    xcss: containerStyles.text,
+    gap: "space.025",
+    direction: "column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([containerStyles.item])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([skeletonStyles.item])
+  })), hasDescription && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([containerStyles.description])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([skeletonStyles.description])
+  })))));
+};

package/dist/cjs/ui/skeleton/skeleton-menu-section-heading.compiled.css

@@ -0,0 +1,13 @@
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._1bsb1wqb{width:60px}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1tke1tcg{min-height:24px}
+._4cvr1h6o{align-items:center}
+._4t3ifvz7{height:1cap}
+._4t3iu7e1{height:1lh}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

package/dist/cjs/ui/skeleton/skeleton-menu-section-heading.js

@@ -0,0 +1,37 @@
+/* skeleton-menu-section-heading.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonMenuSectionHeading = void 0;
+require("./skeleton-menu-section-heading.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 containerStyles = {
+  root: "_1tke1tcg _bozg12x7 _y4ti1b66 _1q511b66 _85i51b66 _1e0c1txw _4cvr1h6o",
+  item: "_11c8i4vh _4t3iu7e1 _1e0c1txw _4cvr1h6o"
+};
+var skeletonStyles = {
+  item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
+};
+/**
+ * __Skeleton menu section heading__
+ * 
+ * A skeleton menu section heading is used to display a loading state for a side nav menu
+ * section heading.
+ *
+ */
+var SkeletonMenuSectionHeading = exports.SkeletonMenuSectionHeading = function SkeletonMenuSectionHeading(props) {
+  var testId = props.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([containerStyles.root])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([containerStyles.item])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([skeletonStyles.item])
+  })));
+};

package/dist/es2019/entry-points/skeleton.js

@@ -0,0 +1,2 @@
+export { SkeletonMenuItem } from '../ui/skeleton/skeleton-menu-item';
+export { SkeletonMenuSectionHeading } from '../ui/skeleton/skeleton-menu-section-heading';

package/dist/es2019/ui/skeleton/skeleton-menu-item.compiled.css

@@ -0,0 +1,24 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._1bah1h6o{justify-content:center}
+._1bsb1wqb{width:60px}
+._1bsb53f4{width:75pt}
+._1bsbgktf{width:20px}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3ifvz7{height:1cap}
+._4t3igktf{height:20px}
+._4t3iu7e1{height:1lh}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}

package/dist/es2019/ui/skeleton/skeleton-menu-item.js

@@ -0,0 +1,53 @@
+/* skeleton-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./skeleton-menu-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Flex } from '@atlaskit/primitives/compiled';
+const containerStyles = {
+  root: "_4t3i1tcg _bozg1b66 _y4ti1b66 _1q511b66 _85i51b66 _1e0c1txw _4cvr1h6o",
+  text: "_bozg1b66 _y4ti1b66",
+  item: "_11c8fhey _4t3iu7e1 _1e0c1txw _4cvr1h6o",
+  hasDescription: "_4t3i1ylp",
+  description: "_11c8wadc _4t3iu7e1 _1e0c1txw _4cvr1h6o",
+  elemBefore: "_bozgv77o _y4tiv77o _1q51v77o _85i5v77o _1e0c1txw _4cvr1h6o _1bah1h6o"
+};
+const skeletonStyles = {
+  item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ifvz7",
+  elemBefore: "_2rko12b0 _bfhkizff _1bsbgktf _4t3igktf",
+  description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
+};
+/**
+ * __Skeleton menu item__
+ *
+ * A skeleton menu item is used to display a loading state for a side nav menu item.
+ * This component can have an icon element skeleton, and a description skeleton included.
+ */
+export const SkeletonMenuItem = props => {
+  const {
+    hasDescription = false,
+    hasElemBefore = false,
+    testId
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([containerStyles.root, hasDescription && containerStyles.hasDescription])
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center"
+  }, hasElemBefore && /*#__PURE__*/React.createElement("div", {
+    className: ax([containerStyles.elemBefore])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([skeletonStyles.elemBefore])
+  })), /*#__PURE__*/React.createElement(Flex, {
+    xcss: containerStyles.text,
+    gap: "space.025",
+    direction: "column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([containerStyles.item])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([skeletonStyles.item])
+  })), hasDescription && /*#__PURE__*/React.createElement("div", {
+    className: ax([containerStyles.description])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([skeletonStyles.description])
+  })))));
+};

package/dist/es2019/ui/skeleton/skeleton-menu-section-heading.compiled.css

@@ -0,0 +1,13 @@
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._1bsb1wqb{width:60px}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1tke1tcg{min-height:24px}
+._4cvr1h6o{align-items:center}
+._4t3ifvz7{height:1cap}
+._4t3iu7e1{height:1lh}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

package/dist/es2019/ui/skeleton/skeleton-menu-section-heading.js

@@ -0,0 +1,31 @@
+/* skeleton-menu-section-heading.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./skeleton-menu-section-heading.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const containerStyles = {
+  root: "_1tke1tcg _bozg12x7 _y4ti1b66 _1q511b66 _85i51b66 _1e0c1txw _4cvr1h6o",
+  item: "_11c8i4vh _4t3iu7e1 _1e0c1txw _4cvr1h6o"
+};
+const skeletonStyles = {
+  item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
+};
+/**
+ * __Skeleton menu section heading__
+ * 
+ * A skeleton menu section heading is used to display a loading state for a side nav menu
+ * section heading.
+ *
+ */
+export const SkeletonMenuSectionHeading = props => {
+  const {
+    testId
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([containerStyles.root])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([containerStyles.item])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([skeletonStyles.item])
+  })));
+};

package/dist/esm/entry-points/skeleton.js

@@ -0,0 +1,2 @@
+export { SkeletonMenuItem } from '../ui/skeleton/skeleton-menu-item';
+export { SkeletonMenuSectionHeading } from '../ui/skeleton/skeleton-menu-section-heading';

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

@@ -0,0 +1,24 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._1bah1h6o{justify-content:center}
+._1bsb1wqb{width:60px}
+._1bsb53f4{width:75pt}
+._1bsbgktf{width:20px}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3ifvz7{height:1cap}
+._4t3igktf{height:20px}
+._4t3iu7e1{height:1lh}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}

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

@@ -0,0 +1,53 @@
+/* skeleton-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./skeleton-menu-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Flex } from '@atlaskit/primitives/compiled';
+var containerStyles = {
+  root: "_4t3i1tcg _bozg1b66 _y4ti1b66 _1q511b66 _85i51b66 _1e0c1txw _4cvr1h6o",
+  text: "_bozg1b66 _y4ti1b66",
+  item: "_11c8fhey _4t3iu7e1 _1e0c1txw _4cvr1h6o",
+  hasDescription: "_4t3i1ylp",
+  description: "_11c8wadc _4t3iu7e1 _1e0c1txw _4cvr1h6o",
+  elemBefore: "_bozgv77o _y4tiv77o _1q51v77o _85i5v77o _1e0c1txw _4cvr1h6o _1bah1h6o"
+};
+var skeletonStyles = {
+  item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ifvz7",
+  elemBefore: "_2rko12b0 _bfhkizff _1bsbgktf _4t3igktf",
+  description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
+};
+/**
+ * __Skeleton menu item__
+ *
+ * A skeleton menu item is used to display a loading state for a side nav menu item.
+ * This component can have an icon element skeleton, and a description skeleton included.
+ */
+export var SkeletonMenuItem = function SkeletonMenuItem(props) {
+  var _props$hasDescription = props.hasDescription,
+    hasDescription = _props$hasDescription === void 0 ? false : _props$hasDescription,
+    _props$hasElemBefore = props.hasElemBefore,
+    hasElemBefore = _props$hasElemBefore === void 0 ? false : _props$hasElemBefore,
+    testId = props.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([containerStyles.root, hasDescription && containerStyles.hasDescription])
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center"
+  }, hasElemBefore && /*#__PURE__*/React.createElement("div", {
+    className: ax([containerStyles.elemBefore])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([skeletonStyles.elemBefore])
+  })), /*#__PURE__*/React.createElement(Flex, {
+    xcss: containerStyles.text,
+    gap: "space.025",
+    direction: "column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([containerStyles.item])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([skeletonStyles.item])
+  })), hasDescription && /*#__PURE__*/React.createElement("div", {
+    className: ax([containerStyles.description])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([skeletonStyles.description])
+  })))));
+};

package/dist/esm/ui/skeleton/skeleton-menu-section-heading.compiled.css

@@ -0,0 +1,13 @@
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._1bsb1wqb{width:60px}
+._1e0c1txw{display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1tke1tcg{min-height:24px}
+._4cvr1h6o{align-items:center}
+._4t3ifvz7{height:1cap}
+._4t3iu7e1{height:1lh}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

package/dist/esm/ui/skeleton/skeleton-menu-section-heading.js

@@ -0,0 +1,29 @@
+/* skeleton-menu-section-heading.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./skeleton-menu-section-heading.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var containerStyles = {
+  root: "_1tke1tcg _bozg12x7 _y4ti1b66 _1q511b66 _85i51b66 _1e0c1txw _4cvr1h6o",
+  item: "_11c8i4vh _4t3iu7e1 _1e0c1txw _4cvr1h6o"
+};
+var skeletonStyles = {
+  item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
+};
+/**
+ * __Skeleton menu section heading__
+ * 
+ * A skeleton menu section heading is used to display a loading state for a side nav menu
+ * section heading.
+ *
+ */
+export var SkeletonMenuSectionHeading = function SkeletonMenuSectionHeading(props) {
+  var testId = props.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([containerStyles.root])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([containerStyles.item])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([skeletonStyles.item])
+  })));
+};

package/dist/types/entry-points/skeleton.d.ts

@@ -0,0 +1,2 @@
+export { SkeletonMenuItem, type SkeletonMenuItemProps } from '../ui/skeleton/skeleton-menu-item';
+export { SkeletonMenuSectionHeading, type SkeletonMenuSectionHeadingProps } from '../ui/skeleton/skeleton-menu-section-heading';

package/dist/types/ui/skeleton/skeleton-menu-item.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export interface SkeletonMenuItemProps {
+    /**
+     * Whether to render a description skeleton.
+     */
+    hasDescription?: boolean;
+    /**
+     * Whether to render an icon element skeleton.
+     */
+    hasElemBefore?: boolean;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Skeleton menu item__
+ *
+ * A skeleton menu item is used to display a loading state for a side nav menu item.
+ * This component can have an icon element skeleton, and a description skeleton included.
+ */
+export declare const SkeletonMenuItem: (props: SkeletonMenuItemProps) => JSX.Element;

package/dist/types/ui/skeleton/skeleton-menu-section-heading.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export interface SkeletonMenuSectionHeadingProps {
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Skeleton menu section heading__
+ *
+ * A skeleton menu section heading is used to display a loading state for a side nav menu
+ * section heading.
+ *
+ */
+export declare const SkeletonMenuSectionHeading: (props: SkeletonMenuSectionHeadingProps) => JSX.Element;

package/dist/types-ts4.5/entry-points/skeleton.d.ts

@@ -0,0 +1,2 @@
+export { SkeletonMenuItem, type SkeletonMenuItemProps } from '../ui/skeleton/skeleton-menu-item';
+export { SkeletonMenuSectionHeading, type SkeletonMenuSectionHeadingProps } from '../ui/skeleton/skeleton-menu-section-heading';

package/dist/types-ts4.5/ui/skeleton/skeleton-menu-item.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export interface SkeletonMenuItemProps {
+    /**
+     * Whether to render a description skeleton.
+     */
+    hasDescription?: boolean;
+    /**
+     * Whether to render an icon element skeleton.
+     */
+    hasElemBefore?: boolean;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Skeleton menu item__
+ *
+ * A skeleton menu item is used to display a loading state for a side nav menu item.
+ * This component can have an icon element skeleton, and a description skeleton included.
+ */
+export declare const SkeletonMenuItem: (props: SkeletonMenuItemProps) => JSX.Element;

package/dist/types-ts4.5/ui/skeleton/skeleton-menu-section-heading.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export interface SkeletonMenuSectionHeadingProps {
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Skeleton menu section heading__
+ *
+ * A skeleton menu section heading is used to display a loading state for a side nav menu
+ * section heading.
+ *
+ */
+export declare const SkeletonMenuSectionHeading: (props: SkeletonMenuSectionHeadingProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-nav-items",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "Menu items and elements for the navigation side nav area.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -58,7 +58,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/app-provider": "^3.3.0",
 		"@atlaskit/lozenge": "^13.3.0",
-		"@atlaskit/navigation-system": "^5.31.0",
+		"@atlaskit/navigation-system": "^5.32.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.8.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",

package/skeleton/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/side-nav-items/skeleton",
+  "main": "../dist/cjs/entry-points/skeleton.js",
+  "module": "../dist/esm/entry-points/skeleton.js",
+  "module:es2019": "../dist/es2019/entry-points/skeleton.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/skeleton.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/skeleton.d.ts"
+      ]
+    }
+  }
+}