orcs-design-system 3.5.11 → 3.5.13

package/es/components/Header/Header.stories.js

@@ -73,6 +73,7 @@ export const defaultHeader = () => /*#__PURE__*/_jsx(Header, {
   searchComponent: /*#__PURE__*/_jsx(TextInput, {
     fullWidth: true,
     id: "search",
+    ariaLabel: "Type to search",
     height: "100%",
     type: "text",
     placeholder: "Search for...",
@@ -93,6 +94,7 @@ export const headerWithExtras = () => /*#__PURE__*/_jsx(Header, {
   searchComponent: /*#__PURE__*/_jsx(TextInput, {
     fullWidth: true,
     id: "search",
+    ariaLabel: "Type to search",
     height: "100%",
     type: "text",
     placeholder: "Search for...",

package/es/components/Header/Header.styles.js

@@ -123,12 +123,11 @@ export const IconContainer = /*#__PURE__*/styled(Flex).withConfig({
   background: themeGet("colors.greyDark")(props),
   transition: themeGet("transition.transitionDefault")(props)
 }));
-export const UserMenuContent = /*#__PURE__*/styled(Box).withConfig({
+export const UserMenuContent = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "UserMenuContent",
   componentId: "sc-xs8ba0-8"
 })(props => css({
   position: "absolute",
-  gap: "s",
   top: "calc(100% + 8px)",
   right: "0",
   zIndex: themeGet("zIndices.2")(props),

package/es/components/Header/UserMenu.js

@@ -1,3 +1,6 @@
+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, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import Avatar from "../Avatar";
@@ -50,13 +53,14 @@ const UserMenu = _ref => {
         justifyContent: "center",
         borderRadius: "50%",
         p: "2px",
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, _objectSpread({
           icon: ["fas", "chevron-down"],
-          rotation: isOpen ? 180 : 0,
           color: "white",
           size: "xs",
           mt: isOpen ? "0" : "1px"
-        })
+        }, isOpen && {
+          rotation: "180"
+        }))
       })]
     }), /*#__PURE__*/_jsxs(UserMenuContent, {
       p: "s",
@@ -67,7 +71,7 @@ const UserMenu = _ref => {
       maxHeight: "430px",
       border: "solid 1px",
       borderRadius: "2",
-      display: "flex",
+      gap: "s",
       flexDirection: "column",
       alignItems: "flex-start",
       justifyContent: "flex-start",

package/es/components/TreeNav/index.js

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 /* eslint-disable */
 import React from "react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { css } from "@styled-system/css";
 import PropTypes from "prop-types";
 import { themeGet } from "@styled-system/theme-get";
@@ -85,17 +85,26 @@ Node.propTypes = {
   isLeaf: PropTypes.bool,
   data: PropTypes.array
 };
+const parsePx = v => {
+  if (v == null) return null;
+  const n = parseFloat(String(v));
+  return Number.isNaN(n) ? null : n;
+};
 const TreeNav = _ref2 => {
+  var _theme$appScale, _theme$appScale2;
   let {
       data
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded);
+  const theme = /*#__PURE__*/useTheme();
+  const rowHeight = parsePx(theme === null || theme === void 0 || (_theme$appScale = theme.appScale) === null || _theme$appScale === void 0 ? void 0 : _theme$appScale.treeRowHeight);
+  const indent = parsePx(theme === null || theme === void 0 || (_theme$appScale2 = theme.appScale) === null || _theme$appScale2 === void 0 ? void 0 : _theme$appScale2.treeIndent);
   return /*#__PURE__*/_jsx(Tree, _objectSpread(_objectSpread({
     initialData: data
   }, props), {}, {
     overscanCount: 5,
-    rowHeight: 32,
-    indent: 14,
+    rowHeight: rowHeight,
+    indent: indent,
     children: Node
   }));
 };

package/es/systemThemeCollapsed.js

@@ -224,7 +224,9 @@ export const appScale = {
   mobileNavMenuWidth: "250px",
   inputHeightDefault: "32px",
   inputHeightLarge: "52px",
-  tabsHeight: "32px"
+  tabsHeight: "32px",
+  treeRowHeight: "32px",
+  treeIndent: "14px"
 };
 export const avatarScale = {
   avatarSmall: "34px",

package/es/systemtheme.js

@@ -226,7 +226,9 @@ export const appScale = {
   mobileNavMenuWidth: "250px",
   inputHeightDefault: "32px",
   inputHeightLarge: "52px",
-  tabsHeight: "32px"
+  tabsHeight: "32px",
+  treeRowHeight: "32px",
+  treeIndent: "14px"
 };
 export const avatarScale = {
   avatarSmall: "34px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.5.11",
+  "version": "3.5.13",
   "engines": {
     "node": ">=20.0.0"
   },