@pingux/astro 1.14.0 → 1.15.0-alpha.0

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -80,7 +80,8 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       sx: {
-        alignItems: 'center'
+        alignItems: 'center',
+        minHeight: 42
       },
       as: "li",
       key: "li-".concat(child.key)

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -105,6 +105,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       searchValue = _useState2[0],
       setSearchValue = _useState2[1];
 
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
   var breadcrumbsRef = (0, _react.useRef)();
 
   var overlayRef = _react["default"].useRef();
@@ -163,6 +168,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     var _selectedItemSet = (0, _slicedToArray2["default"])(selectedItemSet, 1),
         selectedItemKey = _selectedItemSet[0];
 
+    setSelectedKeys(selectedItemSet);
     onSelectionChange(selectedItemKey);
     handlePopoverClose();
   }, [handlePopoverClose, onSelectionChange]);
@@ -172,7 +178,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     items: items,
     filter: imperativeItemsFilter || filterNodesWithChildren,
     onSelectionChange: handleSelectionChange,
-    selectedKeys: [],
+    selectedKeys: selectedKeys,
     selectionMode: 'single',
     disallowEmptySelection: false
   };
@@ -243,11 +249,15 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     py: 10,
     px: 15
   }, emptySearchText);
+
+  var _selectedKeys = (0, _slicedToArray2["default"])(selectedKeys, 1),
+      selectedValue = _selectedKeys[0];
+
   var ItemsSelect = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, triggerProps, {
     onPress: handlePopoverOpen,
     ref: triggerRef,
     variant: "environmentBreadcrumb.current",
-    "aria-label": "".concat(typeof selectedItem === 'string' ? selectedItem : 'Selected Item')
+    "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
     icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
   })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -159,7 +159,7 @@ var Default = function Default(args) {
     setSelectedEnvironment(_objectSpread({}, envObj));
   };
 
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
     items: defaultEnvironments,
     name: "Globochem",
     selectedItem: envNode,
@@ -175,7 +175,7 @@ var Default = function Default(args) {
       variant: "boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
-  }));
+  });
 };
 
 exports.Default = Default;
@@ -257,7 +257,7 @@ var WithSections = function WithSections() {
     variant: "boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
     items: environments,
     name: "Globochem",
     selectedItem: envNode,
@@ -287,7 +287,7 @@ var WithSections = function WithSections() {
         bg: "neutral.40"
       }) : null));
     });
-  }));
+  });
 };
 
 exports.WithSections = WithSections;

package/lib/cjs/components/Messages/Messages.test.js

@@ -42,7 +42,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-jest.mock('@react-aria/live-announcer');
+jest.mock('@react-aria/live-announcer', function () {
+  return {
+    announce: jest.fn()
+  };
+});
+var mockAnnounce = _liveAnnouncer.announce;
 var testId = 'test-messages';
 var defaultProps = {
   'data-testid': testId
@@ -204,7 +209,7 @@ describe('announcements', function () {
       items: items
     });
     (0, _forEach["default"])(items).call(items, function (item) {
-      return expect(_liveAnnouncer.announce).toHaveBeenCalledWith(item.text, 'polite');
+      return expect(mockAnnounce).toHaveBeenCalledWith(item.text, 'polite');
     });
   });
   test('should announce on adding item', function () {
@@ -219,7 +224,7 @@ describe('announcements', function () {
     _userEvent["default"].click(button);
 
     expect(messages.childElementCount).toBe(1);
-    expect(_liveAnnouncer.announce).toHaveBeenCalledWith('New message 1', 'polite');
+    expect(mockAnnounce).toHaveBeenCalledWith('New message 1', 'polite');
   });
 });
 test('should render messages with messagesReducerStory', function () {

package/lib/cjs/styles/variants/buttons.js

@@ -537,11 +537,16 @@ var environmentBreadcrumb = {
     color: 'neutral.30',
     fontSize: 'md',
     fontWeight: 1,
-    '&.is-hovered, &.is-focused': {
+    padding: '4px',
+    '&.is-hovered': {
       color: 'active',
       textDecoration: 'none',
       boxShadow: 'none'
     },
+    '&.is-focused': {
+      borderRadius: '2px',
+      boxShadow: '0 0 0 1px #4462ED'
+    },
     '&.is-pressed': {
       color: 'accent.20',
       textDecoration: 'none'

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -46,7 +46,8 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(Box, {
       isRow: true,
       sx: {
-        alignItems: 'center'
+        alignItems: 'center',
+        minHeight: 42
       },
       as: "li",
       key: "li-".concat(child.key)

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -55,6 +55,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
       searchValue = _useState2[0],
       setSearchValue = _useState2[1];
 
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
   var breadcrumbsRef = useRef();
   var overlayRef = React.useRef();
   var triggerRef = React.useRef();
@@ -111,6 +116,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     var _selectedItemSet = _slicedToArray(selectedItemSet, 1),
         selectedItemKey = _selectedItemSet[0];
 
+    setSelectedKeys(selectedItemSet);
     onSelectionChange(selectedItemKey);
     handlePopoverClose();
   }, [handlePopoverClose, onSelectionChange]);
@@ -120,7 +126,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     items: items,
     filter: imperativeItemsFilter || filterNodesWithChildren,
     onSelectionChange: handleSelectionChange,
-    selectedKeys: [],
+    selectedKeys: selectedKeys,
     selectionMode: 'single',
     disallowEmptySelection: false
   };
@@ -192,11 +198,14 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     px: 15
   }, emptySearchText);
 
+  var _selectedKeys = _slicedToArray(selectedKeys, 1),
+      selectedValue = _selectedKeys[0];
+
   var ItemsSelect = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({}, triggerProps, {
     onPress: handlePopoverOpen,
     ref: triggerRef,
     variant: "environmentBreadcrumb.current",
-    "aria-label": "".concat(typeof selectedItem === 'string' ? selectedItem : 'Selected Item')
+    "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, ___EmotionJSX(Icon, {
     icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
   })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -21,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useState } from 'react';
 import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
-import { Item, Section, OverlayProvider, Chip, Box, Text } from '../../index';
+import { Item, Section, Chip, Box, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'EnvironmentBreadcrumb',
@@ -118,7 +118,7 @@ export var Default = function Default(args) {
     setSelectedEnvironment(_objectSpread({}, envObj));
   };
 
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+  return ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
     items: defaultEnvironments,
     name: "Globochem",
     selectedItem: envNode,
@@ -134,7 +134,7 @@ export var Default = function Default(args) {
       variant: "boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
-  }));
+  });
 };
 export var WithSections = function WithSections() {
   var _useState3 = useState(environmentsWithSections),
@@ -217,7 +217,7 @@ export var WithSections = function WithSections() {
     bg: "neutral.40"
   }) : null);
 
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, {
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
     items: environments,
     name: "Globochem",
     selectedItem: envNode,
@@ -247,7 +247,7 @@ export var WithSections = function WithSections() {
         bg: "neutral.40"
       }) : null));
     });
-  }));
+  });
 };
 export var OrgLevel = function OrgLevel() {
   return ___EmotionJSX(EnvironmentBreadcrumb, {

package/lib/components/Messages/Messages.test.js

@@ -12,7 +12,12 @@ import { render, screen } from '../../utils/testUtils/testWrapper';
 import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
 import Button from '../Button';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-jest.mock('@react-aria/live-announcer');
+jest.mock('@react-aria/live-announcer', function () {
+  return {
+    announce: jest.fn()
+  };
+});
+var mockAnnounce = announce;
 var testId = 'test-messages';
 var defaultProps = {
   'data-testid': testId
@@ -161,7 +166,7 @@ describe('announcements', function () {
     });
 
     _forEachInstanceProperty(items).call(items, function (item) {
-      return expect(announce).toHaveBeenCalledWith(item.text, 'polite');
+      return expect(mockAnnounce).toHaveBeenCalledWith(item.text, 'polite');
     });
   });
   test('should announce on adding item', function () {
@@ -171,7 +176,7 @@ describe('announcements', function () {
     var button = screen.getByText('Click me!');
     userEvent.click(button);
     expect(messages.childElementCount).toBe(1);
-    expect(announce).toHaveBeenCalledWith('New message 1', 'polite');
+    expect(mockAnnounce).toHaveBeenCalledWith('New message 1', 'polite');
   });
 });
 test('should render messages with messagesReducerStory', function () {

package/lib/styles/variants/buttons.js

@@ -517,11 +517,16 @@ var environmentBreadcrumb = {
     color: 'neutral.30',
     fontSize: 'md',
     fontWeight: 1,
-    '&.is-hovered, &.is-focused': {
+    padding: '4px',
+    '&.is-hovered': {
       color: 'active',
       textDecoration: 'none',
       boxShadow: 'none'
     },
+    '&.is-focused': {
+      borderRadius: '2px',
+      boxShadow: '0 0 0 1px #4462ED'
+    },
     '&.is-pressed': {
       color: 'accent.20',
       textDecoration: 'none'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.14.0",
+  "version": "1.15.0-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -74,7 +74,7 @@
     "@emotion/jest": "^11.5.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
-    "@react-aria/accordion": "3.0.0-alpha.1",
+    "@react-aria/accordion": "3.0.0-alpha.7",
     "@react-aria/breadcrumbs": "^3.1.4",
     "@react-aria/button": "^3.2.1",
     "@react-aria/checkbox": "^3.2.0",
@@ -90,7 +90,7 @@
     "@react-aria/listbox": "^3.3.0",
     "@react-aria/live-announcer": "^3.0.0",
     "@react-aria/menu": "^3.1.4",
-    "@react-aria/numberfield": "3.1.0",
+    "@react-aria/numberfield": "~3.1.6",
     "@react-aria/overlays": "^3.7.0",
     "@react-aria/progress": "^3.1.1",
     "@react-aria/radio": "^3.1.1",
@@ -107,7 +107,7 @@
     "@react-aria/visually-hidden": "3.2.1",
     "@react-spectrum/provider": "^3.2.1",
     "@react-spectrum/utils": "3.6.1",
-    "@react-stately/collections": "^3.2.1",
+    "@react-stately/collections": "~3.3.8",
     "@react-stately/color": "^3.0.0-beta.2",
     "@react-stately/combobox": "^3.0.0",
     "@react-stately/data": "^3.4.0",
@@ -115,7 +115,7 @@
     "@react-stately/layout": "^3.2.1",
     "@react-stately/list": "^3.2.1",
     "@react-stately/menu": "^3.2.1",
-    "@react-stately/numberfield": "3.0.2",
+    "@react-stately/numberfield": "~3.0.7",
     "@react-stately/overlays": "^3.1.1",
     "@react-stately/radio": "^3.2.0",
     "@react-stately/searchfield": "^3.1.1",
@@ -125,7 +125,7 @@
     "@react-stately/toggle": "^3.2.0",
     "@react-stately/tooltip": "^3.0.4",
     "@react-stately/tree": "^3.1.2",
-    "@react-stately/utils": "^3.2.1",
+    "@react-stately/utils": "~3.4.1",
     "@rebass/forms": "^4.0.6",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/props": "^5.1.5",