@pingux/astro 1.37.2-alpha.0 → 1.37.2-alpha.1

package/lib/cjs/components/NavBar/NavBar.js

@@ -26,8 +26,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _uuid = require("uuid");
-
 var _focus = require("@react-aria/focus");
 
 var _NavBarContext = require("../../context/NavBarContext");
@@ -70,17 +68,15 @@ var NavBar = function NavBar(props) {
       selectedKey = _useProgressiveState2[0],
       setSelectedKey = _useProgressiveState2[1];
 
-  var items = (0, _react.useMemo)(function () {
-    return (0, _isArray["default"])(children) ? (0, _map["default"])(children).call(children, function (child) {
-      return {
-        item: child,
-        key: (0, _uuid.v4)()
-      };
-    }) : [{
-      item: children,
-      key: (0, _uuid.v4)()
-    }];
-  }, []);
+  var items = (0, _isArray["default"])(children) ? (0, _map["default"])(children).call(children, function (child) {
+    return {
+      item: child,
+      key: child.key
+    };
+  }) : [{
+    item: children,
+    key: children.key
+  }];
   var contextValue = {
     selectedKey: selectedKey,
     setSelectedKey: setSelectedKeyProp || setSelectedKey,

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

@@ -432,7 +432,8 @@ var Controlled = function Controlled() {
     setSelectedKey: setSelectedKey,
     selectedKey: selectedKey
   }, (0, _react2.jsx)(_index.Box, {
-    padding: "md"
+    padding: "md",
+    key: "top-logo-parent"
   }, (0, _react2.jsx)(_index.Link, {
     "aria-label": "home link",
     href: "https://pingidentity.com",
@@ -440,10 +441,12 @@ var Controlled = function Controlled() {
   }, logo)), (0, _react2.jsx)(_index.Separator, {
     marginTop: "lg",
     marginBottom: "0px",
-    backgroundColor: "neutral.60"
+    backgroundColor: "neutral.60",
+    key: "top-separator"
   }), (0, _react2.jsx)(_index.Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
+    paddingBottom: "xl",
+    key: "first-section-container"
   }, (0, _react2.jsx)(_index.NavBarItem, {
     "data-id": "nav-bar-item",
     icon: _GlobeIcon["default"],

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

@@ -12,6 +12,8 @@ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -113,15 +115,18 @@ var getComponent = function getComponent() {
       height: '100%',
       maxHeight: '100%',
       overflowY: 'overlay !important'
-    }
+    },
+    key: "top-logo-parent"
   }, (0, _react2.jsx)(_.NavBarSection, {
     items: data,
     hasSeparator: true,
     "data-testid": DATA_ID,
-    "data-id": DATA_ID
+    "data-id": DATA_ID,
+    key: "first-section"
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: secondData,
-    title: "test_title"
+    title: "test_title",
+    key: "second-section"
   }), (0, _react2.jsx)(_.NavBarItem, {
     id: "Overview",
     key: "Overview",
@@ -132,15 +137,13 @@ var getComponent = function getComponent() {
 };
 
 var ControlledComponent = function ControlledComponent() {
+  var _context;
+
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       selectedKey = _useState2[0],
       setSelectedKey = _useState2[1];
 
-  var setKeys = function setKeys(e) {
-    setSelectedKey(e);
-  };
-
   var customData = [{
     icon: _GlobeIcon["default"],
     key: 'Environment',
@@ -153,16 +156,40 @@ var ControlledComponent = function ControlledComponent() {
       }
     }, "Click me for MFA Users"), (0, _react2.jsx)(_.NavBarItemButton, {
       key: "Earth Button Group",
-      id: "Earth Button Group"
+      id: "Earth Button Group",
+      "data-testid": "group-item"
     }, "Group")]
   }];
+
+  var _useState3 = (0, _react.useState)((0, _concat["default"])(_context = []).call(_context, customData)),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      thisData = _useState4[0],
+      setData = _useState4[1];
+
+  var testFunction = function testFunction() {
+    var _context2, _context3;
+
+    var newArray = (0, _concat["default"])(_context2 = []).call(_context2, customData);
+    newArray.pop();
+    setData((0, _concat["default"])(_context3 = []).call(_context3, newArray));
+  };
+
+  var setKeys = function setKeys(e) {
+    setSelectedKey(e);
+  };
+
   return (0, _react2.jsx)(_NavBar["default"], {
     setSelectedKey: setKeys,
     selectedKey: selectedKey
   }, (0, _react2.jsx)(_.Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
-  }, (0, _react2.jsx)(_.NavBarItem, {
+    paddingBottom: "xl",
+    key: "top-logo-parent"
+  }, (0, _react2.jsx)("button", {
+    key: "test-button",
+    "data-testid": "test-button",
+    onClick: testFunction
+  }, "click me!"), (0, _react2.jsx)(_.NavBarItem, {
     id: "Overview",
     key: "Overview",
     text: "Overview",
@@ -178,20 +205,23 @@ var ControlledComponent = function ControlledComponent() {
     title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), (0, _react2.jsx)(_.NavBarSection, {
-    items: customData,
+    items: thisData,
     "data-id": "third-nav-bar-section"
   })));
 };
 
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Link, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, {
+    key: "top-logo-parent"
+  }, (0, _react2.jsx)(_.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "home link",
     "data-testid": "navLink"
   }, "home")), (0, _react2.jsx)(_.Button, {
-    "data-testid": "navButton"
+    "data-testid": "navButton",
+    key: "nav-button"
   }, "test button")));
 };
 
@@ -534,4 +564,17 @@ test('when a child is selected, and the parent is collapsed, the parent has the
   var parentDiv = _testWrapper.screen.queryByTestId('Overview');
 
   expect(parentDiv).toHaveClass('is-selected');
+});
+test('controlled version: items can be updated.', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ControlledComponent, null));
+
+  var button = _testWrapper.screen.getByTestId('test-button');
+
+  var thisitem = _testWrapper.screen.getByTestId('Environment title that is so long, it wraps');
+
+  expect(thisitem).toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByTestId('Environment title that is so long, it wraps')).not.toBeInTheDocument();
 });

package/lib/components/NavBar/NavBar.js

@@ -1,9 +1,8 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as uuid } from 'uuid';
 import { FocusScope, useFocusManager } from '@react-aria/focus';
 import { NavBarContext } from '../../context/NavBarContext';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -38,17 +37,15 @@ var NavBar = function NavBar(props) {
       selectedKey = _useProgressiveState2[0],
       setSelectedKey = _useProgressiveState2[1];
 
-  var items = useMemo(function () {
-    return _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
-      return {
-        item: child,
-        key: uuid()
-      };
-    }) : [{
-      item: children,
-      key: uuid()
-    }];
-  }, []);
+  var items = _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
+    return {
+      item: child,
+      key: child.key
+    };
+  }) : [{
+    item: children,
+    key: children.key
+  }];
   var contextValue = {
     selectedKey: selectedKey,
     setSelectedKey: setSelectedKeyProp || setSelectedKey,

package/lib/components/NavBar/NavBar.stories.js

@@ -393,7 +393,8 @@ export var Controlled = function Controlled() {
     setSelectedKey: setSelectedKey,
     selectedKey: selectedKey
   }, ___EmotionJSX(Box, {
-    padding: "md"
+    padding: "md",
+    key: "top-logo-parent"
   }, ___EmotionJSX(Link, {
     "aria-label": "home link",
     href: "https://pingidentity.com",
@@ -401,10 +402,12 @@ export var Controlled = function Controlled() {
   }, logo)), ___EmotionJSX(Separator, {
     marginTop: "lg",
     marginBottom: "0px",
-    backgroundColor: "neutral.60"
+    backgroundColor: "neutral.60",
+    key: "top-separator"
   }), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
+    paddingBottom: "xl",
+    key: "first-section-container"
   }, ___EmotionJSX(NavBarItem, {
     "data-id": "nav-bar-item",
     icon: GlobeIcon,

package/lib/components/NavBar/NavBar.test.js

@@ -1,4 +1,5 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import userEvent from '@testing-library/user-event';
@@ -80,15 +81,18 @@ var getComponent = function getComponent() {
       height: '100%',
       maxHeight: '100%',
       overflowY: 'overlay !important'
-    }
+    },
+    key: "top-logo-parent"
   }, ___EmotionJSX(NavBarSection, {
     items: data,
     hasSeparator: true,
     "data-testid": DATA_ID,
-    "data-id": DATA_ID
+    "data-id": DATA_ID,
+    key: "first-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
-    title: "test_title"
+    title: "test_title",
+    key: "second-section"
   }), ___EmotionJSX(NavBarItem, {
     id: "Overview",
     key: "Overview",
@@ -99,15 +103,13 @@ var getComponent = function getComponent() {
 };
 
 var ControlledComponent = function ControlledComponent() {
+  var _context;
+
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       selectedKey = _useState2[0],
       setSelectedKey = _useState2[1];
 
-  var setKeys = function setKeys(e) {
-    setSelectedKey(e);
-  };
-
   var customData = [{
     icon: GlobeIcon,
     key: 'Environment',
@@ -120,16 +122,41 @@ var ControlledComponent = function ControlledComponent() {
       }
     }, "Click me for MFA Users"), ___EmotionJSX(NavBarItemButton, {
       key: "Earth Button Group",
-      id: "Earth Button Group"
+      id: "Earth Button Group",
+      "data-testid": "group-item"
     }, "Group")]
   }];
+
+  var _useState3 = useState(_concatInstanceProperty(_context = []).call(_context, customData)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      thisData = _useState4[0],
+      setData = _useState4[1];
+
+  var testFunction = function testFunction() {
+    var _context2, _context3;
+
+    var newArray = _concatInstanceProperty(_context2 = []).call(_context2, customData);
+
+    newArray.pop();
+    setData(_concatInstanceProperty(_context3 = []).call(_context3, newArray));
+  };
+
+  var setKeys = function setKeys(e) {
+    setSelectedKey(e);
+  };
+
   return ___EmotionJSX(NavBar, {
     setSelectedKey: setKeys,
     selectedKey: selectedKey
   }, ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
-  }, ___EmotionJSX(NavBarItem, {
+    paddingBottom: "xl",
+    key: "top-logo-parent"
+  }, ___EmotionJSX("button", {
+    key: "test-button",
+    "data-testid": "test-button",
+    onClick: testFunction
+  }, "click me!"), ___EmotionJSX(NavBarItem, {
     id: "Overview",
     key: "Overview",
     text: "Overview",
@@ -145,20 +172,23 @@ var ControlledComponent = function ControlledComponent() {
     title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
-    items: customData,
+    items: thisData,
     "data-id": "third-nav-bar-section"
   })));
 };
 
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
+  return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, {
+    key: "top-logo-parent"
+  }, ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "home link",
     "data-testid": "navLink"
   }, "home")), ___EmotionJSX(Button, {
-    "data-testid": "navButton"
+    "data-testid": "navButton",
+    key: "nav-button"
   }, "test button")));
 };
 
@@ -428,4 +458,12 @@ test('when a child is selected, and the parent is collapsed, the parent has the
   userEvent.click(parent);
   var parentDiv = screen.queryByTestId('Overview');
   expect(parentDiv).toHaveClass('is-selected');
+});
+test('controlled version: items can be updated.', function () {
+  render(___EmotionJSX(ControlledComponent, null));
+  var button = screen.getByTestId('test-button');
+  var thisitem = screen.getByTestId('Environment title that is so long, it wraps');
+  expect(thisitem).toBeInTheDocument();
+  userEvent.click(button);
+  expect(screen.queryByTestId('Environment title that is so long, it wraps')).not.toBeInTheDocument();
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.37.2-alpha.0",
+  "version": "1.37.2-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",