orcs-design-system 3.1.42 → 3.1.44

package/es/components/Select/index.js

@@ -54,6 +54,12 @@ var MultiValueRemove = function MultiValueRemove(props) {
     })
   }));
 };
+MultiValueRemove.propTypes = {
+  innerProps: PropTypes.shape({
+    // add innerProps validation here
+  }),
+  data: PropTypes.object.isRequired
+};
 var SELECT_TYPES = {
   creatable: CreatableSelect,
   async: AsyncSelect,

package/es/components/SideNav/NavItem.js

@@ -9,71 +9,42 @@ import { themeGet } from "@styled-system/theme-get";
 import PropTypes from "prop-types";
 import Icon from "../Icon";
 import Popover from "../Popover";
-var SideNavItemLink = styled("div").withConfig({
+var getSharedNavItemStyles = function getSharedNavItemStyles(props) {
+  var getThemeStyle = function getThemeStyle(style) {
+    return themeGet(style)(props);
+  };
+  return "\n  cursor: pointer;\n  padding: ".concat(getThemeStyle("space.s"), ";\n  text-decoration: none;\n  border-radius: ").concat(getThemeStyle("radii.2"), ";\n  width: 100%;\n  position: relative;\n  border: none;\n  path {\n    transition: ").concat(getThemeStyle("transition.transitionDefault"), ";\n    fill: ").concat(getThemeStyle("colors.greyDarker"), ";\n  }\n  font-family: ").concat(getThemeStyle("fonts.main"), ";\n  \n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: ").concat(getThemeStyle("transition.transitionDefault"), ";\n  background-color: transparent;\n  font-size: 1.4rem;\n  font-weight: ").concat(getThemeStyle("fontWeights.1"), "; \n\n  &:hover, &:focus {\n    color: ").concat(getThemeStyle("colors.primary"), ";\n    path {\n      fill: ").concat(getThemeStyle("colors.primary"), ";\n    }\n    \n  }\n  @media screen and (max-width: 900px) {\n    width: auto;\n    max-height:30px;\n    height: 30px;\n  }\n  &:focus {\n    outline: 0;\n    color: ").concat(getThemeStyle("colors.primary"), ";\n    path {\n      fill: ").concat(getThemeStyle("colors.primary"), ";\n    }\n  }");
+};
+var getActiveStyles = function getActiveStyles(props) {
+  var getThemeStyle = function getThemeStyle(style) {
+    return themeGet(style)(props);
+  };
+  if (!props.active) return "";
+  var primaryColor = getThemeStyle("colors.primary");
+  if (props["aria-expanded"]) {
+    return "\n    color: ".concat(primaryColor, ";\n\n    path {\n      fill: ").concat(primaryColor, ";\n    }\n    :after {\n      height: 100%;\n      position: absolute;\n      right: calc(-").concat(getThemeStyle("space.r"), " - 2px);\n      content: \"\";\n      border-right: 3px solid ").concat(primaryColor, ";\n      z-index: 5;\n    }\n\n    @media screen and (max-width: 900px) {\n      :after {\n        border-top: 3px solid ").concat(primaryColor, ";\n        border-right: none;\n        top: -").concat(getThemeStyle("space.r"), ";\n        right:0;\n        width: 100%;\n      }\n    }\n    ");
+  }
+  return "\n    background-color: ".concat(primaryColor, ";\n    path {\n      fill: ").concat(getThemeStyle("colors.white"), ";\n    }\n\n    &:hover, &:focus {\n      path {\n        fill: ").concat(getThemeStyle("colors.white"), ";\n      }\n    }\n    &:focus {\n      path {\n        fill: ").concat(getThemeStyle("colors.white"), ";\n      }\n    }\n");
+};
+var SideNavItemLink = styled.div.withConfig({
   displayName: "NavItem__SideNavItemLink",
   componentId: "sc-hkm2u8-0"
-})(function (props) {
-  return css({
-    "& > a": {
-      cursor: "pointer",
-      padding: "s",
-      textDecoration: "none",
-      borderRadius: themeGet("radii.2")(props),
-      width: "100%",
-      path: {
-        transition: themeGet("transition.transitionDefault")(props),
-        fill: themeGet("colors.greyDarker")(props)
-      },
-      fontFamily: themeGet("fonts.main")(props),
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      // width: "100%",
-      transition: themeGet("transition.transitionDefault")(props),
-      bg: "transparent",
-      fontSize: "1.4rem",
-      fontWeight: themeGet("fontWeights.1")(props),
-      "&:hover, &:focus": {
-        path: {
-          fill: themeGet("colors.primary")(props)
-        }
-      },
-      "@media screen and (max-width: 900px)": {
-        width: "auto"
-      },
-      "&:focus": {
-        outline: "0",
-        color: themeGet("colors.primary")(props),
-        path: {
-          fill: themeGet("colors.primary")(props)
-        }
-      }
-    }
-  });
+})(["& > a{", " ", "}"], function (props) {
+  return getSharedNavItemStyles(props);
 }, function (props) {
-  return props.active && css({
-    "& > a": {
-      bg: themeGet("colors.primary")(props),
-      path: {
-        fill: themeGet("colors.white")(props)
-      },
-      "&:hover, &:focus": {
-        path: {
-          fill: themeGet("colors.white")(props)
-        }
-      },
-      "&:focus": {
-        path: {
-          fill: themeGet("colors.white")(props)
-        }
-      }
-    }
-  });
+  return getActiveStyles(props);
+});
+var SideNavItem = styled("button").withConfig({
+  displayName: "NavItem__SideNavItem",
+  componentId: "sc-hkm2u8-1"
+})(["", " ", ""], function (props) {
+  return getSharedNavItemStyles(props);
+}, function (props) {
+  return getActiveStyles(props);
 });
 var BadgeNumber = styled("div").withConfig({
   displayName: "NavItem__BadgeNumber",
-  componentId: "sc-hkm2u8-1"
+  componentId: "sc-hkm2u8-2"
 })(function (props) {
   return css({
     position: "absolute",
@@ -93,7 +64,7 @@ var BadgeNumber = styled("div").withConfig({
 });
 var BadgeDot = styled("div").withConfig({
   displayName: "NavItem__BadgeDot",
-  componentId: "sc-hkm2u8-2"
+  componentId: "sc-hkm2u8-3"
 })(function (props) {
   return css({
     position: "absolute",
@@ -107,14 +78,16 @@ var BadgeDot = styled("div").withConfig({
 });
 var SideNavItemPopover = styled(Popover).withConfig({
   displayName: "NavItem__SideNavItemPopover",
-  componentId: "sc-hkm2u8-3"
+  componentId: "sc-hkm2u8-4"
 })(function (props) {
   return css({
-    width: "100%",
+    height: "30px",
     marginBottom: props.bottomAligned ? "0" : "s",
     marginTop: props.bottomAligned ? "s" : "0",
-    ":nth-child(1 of .bottom-aligned) ": {
-      marginTop: props.bottomAligned && "auto"
+    "@media screen and (min-width: 900px)": {
+      ":nth-child(1 of .bottom-aligned) ": {
+        marginTop: props.bottomAligned && "auto"
+      }
     },
     "&:hover,&:focus-within": {
       "& .popoverText": {
@@ -151,63 +124,15 @@ var SideNavItemPopover = styled(Popover).withConfig({
     }
   });
 });
-var SideNavItem = styled("button").withConfig({
-  displayName: "NavItem__SideNavItem",
-  componentId: "sc-hkm2u8-4"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    borderRadius: themeGet("radii.2")(props),
-    transition: themeGet("transition.transitionDefault")(props),
-    bg: "transparent",
-    cursor: "pointer",
-    border: "none",
-    padding: "s",
-    fontSize: "1.4rem",
-    fontWeight: themeGet("fontWeights.1")(props),
-    color: themeGet("colors.greyDarker")(props),
-    path: {
-      transition: themeGet("transition.transitionDefault")(props),
-      fill: themeGet("colors.greyDarker")(props)
-    },
-    "&:hover, &:focus": {
-      outline: "0",
-      color: themeGet("colors.primary")(props),
-      path: {
-        fill: themeGet("colors.primary")(props)
-      }
-    },
-    "@media screen and (max-width: 900px)": {
-      width: "auto"
-    }
-  });
-}, function (props) {
-  return props.active && css({
-    bg: themeGet("colors.primary")(props),
-    path: {
-      fill: themeGet("colors.white")(props)
-    },
-    "&:hover, &:focus": {
-      path: {
-        fill: themeGet("colors.white")(props)
-      }
-    }
-  });
-});
 var NavItem = function NavItem(_ref) {
   var item = _ref.item,
     Component = _ref.Component,
-    activeItem = _ref.activeItem,
+    isActive = _ref.isActive,
     handleItemClick = _ref.handleItemClick,
     navItemRefs = _ref.navItemRefs;
   // Use the ternary operator to render the appropriate component based on actionType
   var accessibilityProps = _objectSpread(_objectSpread({}, item.actionType === "component" && {
-    "aria-expanded": item.index === activeItem ? "true" : "false"
+    "aria-expanded": isActive ? "true" : "false"
   }), {}, {
     "aria-label": item.name
   });
@@ -216,11 +141,11 @@ var NavItem = function NavItem(_ref) {
     text: item.name,
     textAlign: "center",
     width: "124px",
-    active: item.index === activeItem,
+    active: isActive,
     bottomAligned: item.bottomAligned
   }, item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemLink, {
     key: item.index,
-    active: item.index === activeItem,
+    active: isActive,
     bottomAligned: item.bottomAligned,
     onClick: function onClick() {
       return handleItemClick(item);
@@ -234,7 +159,7 @@ var NavItem = function NavItem(_ref) {
     icon: ["far", item.iconName]
   }))) : /*#__PURE__*/React.createElement(SideNavItem, _extends({
     key: item.index,
-    active: item.index === activeItem,
+    active: isActive,
     onClick: function onClick() {
       return handleItemClick(item);
     },
@@ -250,7 +175,7 @@ var NavItem = function NavItem(_ref) {
 NavItem.propTypes = {
   item: PropTypes.object,
   Component: PropTypes.elementType,
-  activeItem: PropTypes.string,
+  isActive: PropTypes.bool,
   handleItemClick: PropTypes.func,
   navItemRefs: PropTypes.object
 };
@@ -273,10 +198,10 @@ NavItem.__docgenInfo = {
       },
       "required": false
     },
-    "activeItem": {
+    "isActive": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false
     },

package/es/components/SideNav/SideNav.stories.js

@@ -1,10 +1,15 @@
+/* eslint-disable react/prop-types */
 import React from "react";
-import PropTypes from "prop-types";
-import SideNav from ".";
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import SideNav from "./index";
+import { BrowserRouter as Router, Route, Link, useLocation, matchPath, Switch, Redirect, useParams } from "react-router-dom";
 import { H5, P } from "../Typography";
 import Box from "../Box";
-import Button from "../Button";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import Flex from "../Flex";
+import Spacer from "../Spacer/index";
+import Card from "../Card/index";
+library.add(far);
 export default {
   title: "Components/SideNav",
   decorators: [function (storyFn) {
@@ -14,121 +19,168 @@ export default {
   }],
   component: SideNav
 };
-var LinkComponent = function LinkComponent(_ref) {
-  var children = _ref.children,
-    item = _ref.item;
-  return /*#__PURE__*/React.createElement(Link, {
-    to: "/",
-    "aria-label": item.name
-  }, children);
+var makeLinkComponent = function makeLinkComponent(path) {
+  return function (_ref) {
+    var children = _ref.children,
+      item = _ref.item;
+    return /*#__PURE__*/React.createElement(Link, {
+      to: path,
+      "aria-label": item.name
+    }, children);
+  };
 };
-LinkComponent.propTypes = {
-  item: PropTypes.object,
-  children: PropTypes.node
+var makePanelComponent = function makePanelComponent(name, children) {
+  return function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
+      fontWeight: "bold",
+      mb: "r"
+    }, name), /*#__PURE__*/React.createElement(P, null, name, " content"), children);
+  };
 };
-var Notifications = function Notifications() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
-    fontWeight: "bold",
-    mb: "r"
-  }, "Notifications"), /*#__PURE__*/React.createElement(P, null, "Notifications content"));
+var Teams = function Teams() {
+  var params = useParams();
+  return /*#__PURE__*/React.createElement("div", null, "Team ", params.teamId, " route");
 };
-var BrowseTeams = function BrowseTeams() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
-    fontWeight: "bold",
-    mb: "r"
-  }, "Browse teams"), /*#__PURE__*/React.createElement(P, null, "Browse teams content"));
+var PageCard = function PageCard(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Spacer, {
+    px: "r"
+  }, /*#__PURE__*/React.createElement(Card, null, children));
 };
-var Calendar = function Calendar() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
-    fontWeight: "bold",
-    mb: "r"
-  }, "Calendar"), /*#__PURE__*/React.createElement(P, null, "Calendar content"));
-};
-var Settings = function Settings() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
-    fontWeight: "bold",
-    mb: "r"
-  }, "Settings"), /*#__PURE__*/React.createElement(P, null, "Settings content"));
-};
-var Announcements = function Announcements() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
-    fontWeight: "bold",
-    mb: "r"
-  }, "Announcements"), /*#__PURE__*/React.createElement(P, {
-    mb: "r"
-  }, "Announcements content"), /*#__PURE__*/React.createElement(Button, {
-    small: true,
-    variant: "ghost"
-  }, "Read more"));
-};
-var items = [{
-  iconName: "user",
-  name: "My profile",
-  component: LinkComponent,
-  actionType: "link" // Use 'link' for a React Router link
-}, {
-  iconName: "bell",
-  name: "Notifications",
-  badgeNumber: "3",
-  // Specify a badgeNumber if you want to have a count on this item
-  component: Notifications,
-  actionType: "component" // Use 'component' for a component
-}, {
-  iconName: "chart-bar",
-  name: "Browse teams",
-  large: true,
-  // Specify large if you want the expanded sidebar to be wider
-  component: BrowseTeams,
-  actionType: "component" // Use 'component' for a component
-}, {
-  iconName: "cog",
-  name: "Settings",
-  hide: true,
-  // Specify hide if you want to hide this item
-  bottomAligned: true,
-  component: Settings,
-  actionType: "component" // Use 'component' for a component
-}, {
-  iconName: "calendar-alt",
-  name: "Calendar",
-  pageSpecific: true,
-  // Specify pageSpecific if you want this item to appear below a divider line separating common nav items from page/route specific items
-  component: Calendar,
-  actionType: "component" // Use 'component' for a component
-}, {
-  iconName: "star",
-  name: "Announcements",
-  badgeDot: true,
-  // Specify if you want to have a blue notification dot on this item
-  bottomAligned: true,
-  // Specify bottomAligned if this item should appear at bottom of SideNav
-  component: Announcements,
-  actionType: "component" // Use 'component' for a component
-}, {
-  iconName: "times-circle",
-  name: "Logout",
-  bottomAligned: true,
-  // Specify bottomAligned if this item should appear at bottom of SideNav
-  onClick: function onClick() {
-    return alert("Logout function");
-  },
-  // Specify the onClick function for the button
-  actionType: "button" // Use 'button' for a button with onClick event
-}
-// Add more items as needed...
-];
-export var sidebarNavigation = function sidebarNavigation() {
-  return /*#__PURE__*/React.createElement(Router, null, /*#__PURE__*/React.createElement(Route, {
-    exact: true,
-    path: "/"
-  }), /*#__PURE__*/React.createElement(SideNav, {
+var SideBarWithConfig = function SideBarWithConfig() {
+  var location = useLocation();
+  var items = [{
+    iconName: "building",
+    name: "Home",
+    component: makeLinkComponent("/"),
+    actionType: "link",
+    isActive: matchPath(location.pathname, {
+      path: "/",
+      exact: true
+    })
+  }, {
+    iconName: "user",
+    name: "My profile",
+    component: makeLinkComponent("/profile"),
+    actionType: "link",
+    isActive: matchPath(location.pathname, {
+      path: "/profile"
+    })
+  }, {
+    iconName: "id-card",
+    name: "Search Page",
+    component: makeLinkComponent("/search"),
+    actionType: "link",
+    isActive: matchPath(location.pathname, {
+      path: "/search"
+    })
+  }, {
+    iconName: "snowflake",
+    name: "Filter",
+    hide: !matchPath(location.pathname, {
+      path: "/search"
+    }),
+    // Specify hide if you want to hide this item
+    component: makePanelComponent("Filter"),
+    actionType: "component",
+    // Use 'component' for a component
+    pageSpecific: matchPath(location.pathname, {
+      path: "/search"
+    }),
+    isExpandedByDefault: true
+  }, {
+    iconName: "sun",
+    name: "People",
+    hide: !matchPath(location.pathname, {
+      path: "/profile"
+    }),
+    // Specify hide if you want to hide this item
+    component: makePanelComponent("People"),
+    actionType: "component",
+    // Use 'component' for a component
+    pageSpecific: matchPath(location.pathname, {
+      path: "/profile"
+    }),
+    isExpandedByDefault: true
+  }, {
+    iconName: "bell",
+    name: "Notifications",
+    badgeNumber: "3",
+    // Specify a badgeNumber if you want to have a count on this item
+    component: makePanelComponent("Notifications"),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "chart-bar",
+    name: "Browse teams",
+    large: true,
+    // Specify large if you want the expanded sidebar to be wider
+    component: makePanelComponent("BrowseTeams", /*#__PURE__*/React.createElement(Flex, {
+      flexDirection: "column"
+    }, ["Team 1", "Team 2", "Team 3"].map(function (team) {
+      return /*#__PURE__*/React.createElement(Link, {
+        to: "/teams/".concat(team),
+        key: team
+      }, team);
+    }))),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "cog",
+    name: "Settings",
+    hide: true,
+    // Specify hide if you want to hide this item
+    bottomAligned: true,
+    component: makePanelComponent("Settings"),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "calendar-alt",
+    name: "Calendar",
+    pageSpecific: true,
+    // Specify pageSpecific if you want this item to appear below a divider line separating common nav items from page/route specific items
+    component: makePanelComponent("Calendar"),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "star",
+    name: "Announcements",
+    badgeDot: true,
+    // Specify if you want to have a blue notification dot on this item
+    bottomAligned: true,
+    // Specify bottomAligned if this item should appear at bottom of SideNav
+    component: makePanelComponent("Announcements"),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "times-circle",
+    name: "Logout",
+    bottomAligned: true,
+    // Specify bottomAligned if this item should appear at bottom of SideNav
+    onClick: function onClick() {
+      return alert("Logout function");
+    },
+    // Specify the onClick function for the button
+    actionType: "button" // Use 'button' for a button with onClick event
+  }
+  // Add more items as needed...
+  ];
+  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(SideNav, {
     items: items,
     sideNavHeight: "500px"
-  }));
+  }), /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
+    exact: true,
+    path: "/"
+  }, /*#__PURE__*/React.createElement(PageCard, null, /*#__PURE__*/React.createElement("div", null, "Home"))), /*#__PURE__*/React.createElement(Route, {
+    path: "/profile"
+  }, /*#__PURE__*/React.createElement(PageCard, null, /*#__PURE__*/React.createElement("div", null, "Profile route"))), /*#__PURE__*/React.createElement(Route, {
+    path: "/teams/:teamId"
+  }, /*#__PURE__*/React.createElement(PageCard, null, /*#__PURE__*/React.createElement(Teams, null))), /*#__PURE__*/React.createElement(Redirect, {
+    from: "/iframe.html",
+    to: "/"
+  })));
+};
+export var SidebarNavigation = function SidebarNavigation() {
+  return /*#__PURE__*/React.createElement(Router, null, /*#__PURE__*/React.createElement(SideBarWithConfig, null));
 };
-sidebarNavigation.storyName = "Sidebar Navigation";
-sidebarNavigation.__docgenInfo = {
+SidebarNavigation.storyName = "Sidebar Navigation";
+SidebarNavigation.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "sidebarNavigation"
+  "displayName": "SidebarNavigation"
 };

package/es/components/SideNav/index.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useRef, useState, useEffect } from "react";
@@ -12,11 +12,12 @@ import Icon from "../Icon";
 import Popover from "../Popover";
 import Divider from "../Divider";
 import NavItem from "./NavItem";
+var SMALL_SCREEN_BREAKPOINT = 900;
 var SideNavWrapper = styled("div").withConfig({
   displayName: "SideNav__SideNavWrapper",
   componentId: "sc-1heo0i9-0"
 })(function (props) {
-  return css({
+  return css(_defineProperty({
     bg: themeGet("colors.white")(props),
     color: themeGet("colors.greyDarkest")(props),
     minHeight: props.sideNavHeight,
@@ -28,28 +29,27 @@ var SideNavWrapper = styled("div").withConfig({
     boxShadow: themeGet("shadows.boxDefault")(props),
     display: "flex",
     alignItems: "stretch",
-    alignContent: "stretch",
-    "@media screen and (max-width: 900px)": {
-      borderRadius: "0",
-      width: "100%",
-      height: "auto",
-      minWidth: "auto",
-      maxWidth: "initial",
-      minHeight: "initial",
-      maxHeight: themeGet("appScale.sidebarMobileHeight")(props),
-      position: "fixed",
-      bottom: "0",
-      left: "0",
-      zIndex: "6",
-      flexDirection: "column-reverse"
-    }
-  });
+    alignContent: "stretch"
+  }, "@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)"), {
+    borderRadius: "0",
+    width: "100%",
+    height: "auto",
+    minWidth: "auto",
+    maxWidth: "initial",
+    minHeight: "initial",
+    maxHeight: themeGet("appScale.sidebarMobileHeight")(props),
+    position: "fixed",
+    bottom: "0",
+    left: "0",
+    zIndex: "6",
+    flexDirection: "column-reverse"
+  }));
 });
 var SideNavItems = styled("div").withConfig({
   displayName: "SideNav__SideNavItems",
   componentId: "sc-1heo0i9-1"
 })(function (props) {
-  return css({
+  return css(_defineProperty({
     minWidth: themeGet("appScale.navBarSize")(props),
     minHeight: "inherit",
     height: "100%",
@@ -59,20 +59,19 @@ var SideNavItems = styled("div").withConfig({
     alignItems: "center",
     justifyContent: "flex-start",
     textAlign: "center",
-    "@media screen and (max-width: 900px)": {
-      height: themeGet("appScale.navBarSize")(props),
-      flexDirection: "row",
-      minHeight: "initial",
-      minWidth: "initial",
-      justifyContent: "space-around"
-    }
-  });
+    position: "relative"
+  }, "@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)"), {
+    height: "calc(".concat(themeGet("space.r")(props), " * 2 + 30px)"),
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center"
+  }));
 });
 var PanelControlTooltip = styled(Popover).withConfig({
   displayName: "SideNav__PanelControlTooltip",
   componentId: "sc-1heo0i9-2"
 })(function (props) {
-  return css({
+  return css(_defineProperty(_defineProperty({
     alignSelf: "center",
     position: props.hideExpandedControl ? "absolute" : "relative",
     right: props.hideExpandedControl ? "r" : "initial",
@@ -85,14 +84,12 @@ var PanelControlTooltip = styled(Popover).withConfig({
     justifyContent: "center",
     "&:focus": {
       outline: "0"
-    },
-    "@media screen and (max-width: 900px)": {
-      border: "none"
-    },
-    "& .popoverText": {
-      marginTop: props.hideExpandedControl ? "0" : "s"
     }
-  });
+  }, "@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)"), {
+    border: "none"
+  }), "& .popoverText", {
+    marginTop: props.hideExpandedControl ? "0" : "s"
+  }));
 });
 var PanelControl = styled("button").withConfig({
   displayName: "SideNav__PanelControl",
@@ -116,7 +113,7 @@ var SideNavExpanded = styled("div").withConfig({
   displayName: "SideNav__SideNavExpanded",
   componentId: "sc-1heo0i9-4"
 })(function (props) {
-  return css({
+  return css(_defineProperty({
     position: "relative",
     display: props.active ? "block" : "none",
     minWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
@@ -127,16 +124,15 @@ var SideNavExpanded = styled("div").withConfig({
     borderLeft: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
     "&:focus": {
       outline: "0"
-    },
-    "@media screen and (max-width: 900px)": {
-      width: "100%",
-      minWidth: "initial",
-      maxWidth: "initial",
-      borderLeft: "none",
-      borderBottom: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
-      height: "calc(" + themeGet("appScale.sidebarMobileHeight")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")"
     }
-  });
+  }, "@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)"), {
+    width: "100%",
+    minWidth: "initial",
+    maxWidth: "initial",
+    borderLeft: "none",
+    borderBottom: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
+    height: "calc(" + themeGet("appScale.sidebarMobileHeight")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")"
+  }));
 });
 var SideNav = function SideNav(_ref) {
   var items = _ref.items,
@@ -145,14 +141,18 @@ var SideNav = function SideNav(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     expandedItem = _useState2[0],
     setExpandedItem = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeItem = _useState4[0],
-    setActiveItem = _useState4[1];
 
   // Initialize a ref for SideNavExpanded
   var expandedRef = useRef(null);
   var navItemRefs = useRef({});
+  var firstExpandedItemByDefault = items.findIndex(function (item) {
+    return item.isExpandedByDefault && !item.hide;
+  });
+  useEffect(function () {
+    if (firstExpandedItemByDefault >= 0) {
+      setExpandedItem(firstExpandedItemByDefault);
+    }
+  }, [firstExpandedItemByDefault]);
   var handleItemClick = function handleItemClick(item) {
     var itemIndex = item.index,
       actionType = item.actionType,
@@ -163,10 +163,6 @@ var SideNav = function SideNav(_ref) {
     } else {
       setExpandedItem(itemIndex === expandedItem ? null : itemIndex);
       onButtonClick && onButtonClick(item);
-      itemIndex === expandedItem && navItemRefs.current && navItemRefs.current[itemIndex] && navItemRefs.current[itemIndex].focus();
-    }
-    if (actionType !== "button") {
-      setActiveItem(itemIndex === activeItem ? null : itemIndex);
     }
   };
 
@@ -185,12 +181,13 @@ var SideNav = function SideNav(_ref) {
   var bottomAlignedItems = allItems.filter(function (item) {
     return item.bottomAligned;
   });
-  var _useState5 = useState(window.innerWidth > 900),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isGreaterThan900 = _useState6[0],
-    setIsGreaterThan900 = _useState6[1];
+  var _useState3 = useState(window.innerWidth),
+    _useState4 = _slicedToArray(_useState3, 2),
+    windowWidth = _useState4[0],
+    setWindowWidth = _useState4[1];
+  var isSmallScreen = windowWidth < SMALL_SCREEN_BREAKPOINT;
   var handleResize = function handleResize() {
-    setIsGreaterThan900(window.innerWidth > 900);
+    setWindowWidth(window.innerWidth);
   };
   var debounceResize = function debounceResize() {
     return setTimeout(handleResize, 300);
@@ -227,7 +224,7 @@ var SideNav = function SideNav(_ref) {
       key: item.index,
       item: item,
       Component: Component,
-      activeItem: activeItem,
+      isActive: item.actionType === "link" ? item.isActive : expandedItem == item.index,
       handleItemClick: handleItemClick,
       navItemRefs: navItemRefs
     });
@@ -243,40 +240,46 @@ var SideNav = function SideNav(_ref) {
   };
   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,
-    active: expandedItem === activeItem,
-    large: allItems[expandedItem] && allItems[expandedItem].large
-  }, allItems[expandedItem].component(), /*#__PURE__*/React.createElement(PanelControlTooltip, {
-    width: "80px",
-    textAlign: "center",
-    hideExpandedControl: true,
-    direction: "left",
-    text: "Hide panel"
-  }, /*#__PURE__*/React.createElement(PanelControl, {
-    onClick: function onClick() {
-      return handleItemClick(allItems[expandedItem]);
-    },
-    "aria-label": "toggle panel",
-    onBlur: function onBlur() {
-      return handleBlur(allItems[expandedItem]);
-    }
-  }, isGreaterThan900 === true ? /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-left"]
-  }) : /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-down"]
-  })))) : null);
+  }, /*#__PURE__*/React.createElement(SideNavItems, null, orderedItems.map(renderItem)), allItems.map(function (item, index) {
+    if (item.actionType !== "component") return null;
+    if (index !== expandedItem || item.hide) return null;
+    return /*#__PURE__*/React.createElement(SideNavExpanded, {
+      key: item.name,
+      ref: expandedRef,
+      tabIndex: "0",
+      sideNavHeight: sideNavHeight,
+      active: expandedItem,
+      large: item.large
+    }, item.component(), /*#__PURE__*/React.createElement(PanelControlTooltip, {
+      width: "80px",
+      textAlign: "center",
+      hideExpandedControl: true,
+      direction: "left",
+      text: "Hide panel"
+    }, /*#__PURE__*/React.createElement(PanelControl, {
+      onClick: function onClick() {
+        return handleItemClick(item);
+      },
+      "aria-label": "toggle panel",
+      onBlur: function onBlur() {
+        return handleBlur(item);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: ["fas", isSmallScreen ? "chevron-down" : "chevron-left"]
+    }))));
+  }));
 };
 SideNav.propTypes = {
   sideNavHeight: PropTypes.string.isRequired,
   // Used to specify the height of the sideNav
+  initiallyExpandedItemIndex: PropTypes.number,
+  // Used to specify the index of the item that should be expanded by default
   items: PropTypes.arrayOf(PropTypes.shape({
     iconName: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     badgeNumber: PropTypes.string,
     badgeDot: PropTypes.bool,
+    hide: PropTypes.bool,
     large: PropTypes.bool,
     bottomAligned: PropTypes.bool,
     actionType: PropTypes.oneOf(["component", "link", "button"]).isRequired,
@@ -298,6 +301,13 @@ SideNav.__docgenInfo = {
       },
       "required": true
     },
+    "initiallyExpandedItemIndex": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
     "items": {
       "description": "",
       "type": {
@@ -321,6 +331,10 @@ SideNav.__docgenInfo = {
               "name": "bool",
               "required": false
             },
+            "hide": {
+              "name": "bool",
+              "required": false
+            },
             "large": {
               "name": "bool",
               "required": false

package/es/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useRef, useEffect } from "react";
+var usePrevious = function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};
+export default usePrevious;

package/package.json

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