orcs-design-system 3.1.36 → 3.1.37

package/es/components/Divider/index.js

@@ -6,7 +6,10 @@ import styled, { ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout, color } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
+import shouldForwardProp from "@styled-system/should-forward-prop";
 var Item = styled.div.withConfig({
+  shouldForwardProp: shouldForwardProp
+}).withConfig({
   displayName: "Divider__Item",
   componentId: "sc-106mlj-0"
 })(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, function (props) {

package/es/components/SideNav/NavItem.js

@@ -113,6 +113,9 @@ var SideNavItemPopover = styled(Popover).withConfig({
     width: "100%",
     marginBottom: props.bottomAligned ? "0" : "s",
     marginTop: props.bottomAligned ? "s" : "0",
+    ":nth-child(1 of .bottom-aligned) ": {
+      marginTop: props.bottomAligned && "auto"
+    },
     "&:hover,&:focus-within": {
       "& .popoverText": {
         opacity: "1",
@@ -208,13 +211,14 @@ var NavItem = function NavItem(_ref) {
   }), {}, {
     "aria-label": item.name
   });
-  return item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemPopover, {
+  return /*#__PURE__*/React.createElement(SideNavItemPopover, {
+    className: item.bottomAligned && "bottom-aligned",
     text: item.name,
     textAlign: "center",
     width: "124px",
     active: item.index === activeItem,
     bottomAligned: item.bottomAligned
-  }, /*#__PURE__*/React.createElement(SideNavItemLink, {
+  }, item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemLink, {
     key: item.index,
     active: item.index === activeItem,
     bottomAligned: item.bottomAligned,
@@ -228,13 +232,7 @@ var NavItem = function NavItem(_ref) {
     item: item
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["far", item.iconName]
-  })))) : /*#__PURE__*/React.createElement(SideNavItemPopover, {
-    text: item.name,
-    textAlign: "center",
-    width: "124px",
-    active: item.index === activeItem,
-    bottomAligned: item.bottomAligned
-  }, /*#__PURE__*/React.createElement(SideNavItem, _extends({
+  }))) : /*#__PURE__*/React.createElement(SideNavItem, _extends({
     key: item.index,
     active: item.index === activeItem,
     onClick: function onClick() {

package/es/components/SideNav/index.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -10,7 +11,6 @@ import PropTypes from "prop-types";
 import Icon from "../Icon";
 import Popover from "../Popover";
 import Divider from "../Divider";
-import Box from "../Box";
 import NavItem from "./NavItem";
 var SideNavWrapper = styled("div").withConfig({
   displayName: "SideNav__SideNavWrapper",
@@ -112,25 +112,9 @@ var PanelControl = styled("button").withConfig({
     border: "none"
   });
 });
-var BottomAlignedNavItems = styled("div").withConfig({
-  displayName: "SideNav__BottomAlignedNavItems",
-  componentId: "sc-1heo0i9-4"
-})(function () {
-  return css({
-    marginTop: "auto",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    width: "100%",
-    "@media screen and (max-width: 900px)": {
-      width: "auto"
-    }
-  });
-});
 var SideNavExpanded = styled("div").withConfig({
   displayName: "SideNav__SideNavExpanded",
-  componentId: "sc-1heo0i9-5"
+  componentId: "sc-1heo0i9-4"
 })(function (props) {
   return css({
     position: "relative",
@@ -181,7 +165,9 @@ var SideNav = function SideNav(_ref) {
       onButtonClick && onButtonClick(item);
       itemIndex === expandedItem && navItemRefs.current && navItemRefs.current[itemIndex] && navItemRefs.current[itemIndex].focus();
     }
-    setActiveItem(itemIndex === activeItem ? null : itemIndex);
+    if (actionType !== "button") {
+      setActiveItem(itemIndex === activeItem ? null : itemIndex);
+    }
   };
 
   // Split items into two arrays based on the bottomAligned prop
@@ -231,14 +217,13 @@ var SideNav = function SideNav(_ref) {
   var handleBlur = function handleBlur(item) {
     handleItemClick(item);
   };
-  return /*#__PURE__*/React.createElement(SideNavWrapper, {
-    sideNavHeight: sideNavHeight
-  }, /*#__PURE__*/React.createElement(SideNavItems, null, topAlignedItems.map(function (item) {
+  var orderedItems = [].concat(_toConsumableArray(topAlignedItems), _toConsumableArray(pageSpecificItems), _toConsumableArray(bottomAlignedItems));
+  var renderItem = function renderItem(item, index) {
     if (item.hide) {
       return null;
     }
     var Component = item.component;
-    return /*#__PURE__*/React.createElement(NavItem, {
+    var Item = /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
       Component: Component,
@@ -246,58 +231,19 @@ var SideNav = function SideNav(_ref) {
       handleItemClick: handleItemClick,
       navItemRefs: navItemRefs
     });
-  }), pageSpecificItems.length > 0 &&
-  /*#__PURE__*/
-  // Render the special-container only if there are bottom-aligned items
-  React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    width: "100%",
-    display: ["none", "none", "none", "block"]
-  }, /*#__PURE__*/React.createElement(Divider, {
-    light: true,
-    mt: "s",
-    mb: "r"
-  })), pageSpecificItems.map(function (item) {
-    if (item.hide) {
-      return null;
+    if (item.pageSpecific && !orderedItems[index - 1].pageSpecific) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+        light: true,
+        mt: "s",
+        mb: "r",
+        display: ["none", "none", "none", "block"]
+      }), Item);
     }
-    var Component = item.component;
-    return /*#__PURE__*/React.createElement(NavItem, {
-      key: item.index,
-      item: item,
-      Component: Component,
-      activeItem: activeItem,
-      handleItemClick: handleItemClick,
-      navItemRefs: navItemRefs
-    });
-  })), bottomAlignedItems.length > 0 && (
-  // Render the special-container only if there are bottom-aligned items
-  isGreaterThan900 ? /*#__PURE__*/React.createElement(BottomAlignedNavItems, null, bottomAlignedItems.map(function (item) {
-    if (item.hide) {
-      return null;
-    }
-    var Component = item.component;
-    return /*#__PURE__*/React.createElement(NavItem, {
-      key: item.index,
-      item: item,
-      Component: Component,
-      activeItem: activeItem,
-      handleItemClick: handleItemClick,
-      navItemRefs: navItemRefs
-    });
-  })) : bottomAlignedItems.map(function (item) {
-    if (item.hide) {
-      return null;
-    }
-    var Component = item.component;
-    return /*#__PURE__*/React.createElement(NavItem, {
-      key: item.index,
-      item: item,
-      Component: Component,
-      activeItem: activeItem,
-      handleItemClick: handleItemClick,
-      navItemRefs: navItemRefs
-    });
-  }))), expandedItem !== null && allItems[expandedItem] && allItems[expandedItem].component ? /*#__PURE__*/React.createElement(SideNavExpanded, {
+    return Item;
+  };
+  return /*#__PURE__*/React.createElement(SideNavWrapper, {
+    sideNavHeight: sideNavHeight
+  }, /*#__PURE__*/React.createElement(SideNavItems, null, orderedItems.map(renderItem)), expandedItem !== null && allItems[expandedItem] && allItems[expandedItem].component ? /*#__PURE__*/React.createElement(SideNavExpanded, {
     ref: expandedRef,
     tabIndex: "0",
     sideNavHeight: sideNavHeight,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.36",
+  "version": "3.1.37",
   "engines": {
     "node": "18.17.1"
   },