@pingux/astro 1.37.1 → 1.37.2-alpha.1

package/lib/cjs/components/DataTable/DataTable.styles.js

@@ -41,7 +41,7 @@ var tableCell = _objectSpread(_objectSpread({}, _text.text.tableData), {}, {
   '&.is-key-focused': {
     outline: '1px',
     outlineStyle: 'solid',
-    outlineColor: 'accent.50',
+    outlineColor: 'focus',
     outlineOffset: '-1px',
     backgroundColor: 'white'
   },
@@ -73,14 +73,17 @@ var tableRow = {
   borderBottomStyle: 'solid !important',
   backgroundColor: 'accent.99',
   borderBottomColor: 'neutral.80',
+  borderTop: '1px solid transparent',
+  borderLeft: '1px solid transparent',
+  borderRight: '1px solid transparent',
   '&:hover': {
     backgroundColor: 'white'
   },
   '&.is-row-focus-visible': {
     border: '1px solid',
-    borderColor: 'accent.50',
+    borderColor: 'focus',
     borderBottom: '1px',
-    borderBottomColor: 'accent.50',
+    borderBottomColor: 'focus',
     backgroundColor: 'white'
   }
 };
@@ -116,7 +119,7 @@ var tableHeadCell = _objectSpread(_objectSpread({}, _text.text.label), {}, {
   '&.is-key-focused': {
     outline: '1px',
     outlineStyle: 'solid',
-    outlineColor: 'accent.50 !important',
+    outlineColor: '#D033FF !important',
     outlineOffset: '-1px',
     backgroundColor: 'accent.99 !important'
   },

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/cjs/components/SearchField/SearchField.js

@@ -119,7 +119,9 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: searchRef,
     pl: 40,
     pr: 40
-  }, fieldControlProps)), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+  }, fieldControlProps, {
+    variant: "forms.input.search"
+  })), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: icon,
     variant: "forms.search.icon",
     size: 22

package/lib/cjs/recipes/Slider.stories.js

@@ -46,6 +46,8 @@ var _i18n = require("@react-aria/i18n");
 
 var _index = require("../index");
 
+var _buttons = require("../styles/variants/buttons");
+
 var _react2 = require("@emotion/react");
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -233,9 +235,7 @@ var Thumb = function Thumb(props) {
       left: "".concat(state.getThumbPercent(index) * 100, "%")
     })
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, thumbProps, {
-    sx: _objectSpread(_objectSpread({}, sx.thumb), {}, {
-      outline: isFocusVisible ? '5px solid rgba(41,150,204,0.5)' : 'none'
-    })
+    sx: _objectSpread(_objectSpread({}, sx.thumb), isFocusVisible && _buttons.defaultFocus)
   }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)("input", (0, _extends2["default"])({
     ref: inputRef
   }, (0, _utils.mergeProps)(inputProps, focusProps))))));

package/lib/cjs/styles/colors.js

@@ -116,9 +116,10 @@ var decorativeDark = (0, _map["default"])(decorative).call(decorative, function
 exports.decorativeDark = decorativeDark;
 var decorativeLight = (0, _map["default"])(decorative).call(decorative, function (color) {
   return (0, _chromaJs["default"])(color).brighten(2).hex();
-});
+}); // export const focus = chroma(accent[50]).alpha(0.75).hex();
+
 exports.decorativeLight = decorativeLight;
-var focus = (0, _chromaJs["default"])(accent[50]).alpha(0.75).hex(); // COMPONENT COLORS
+var focus = (0, _chromaJs["default"])('#D033FF').hex(); // COMPONENT COLORS
 
 exports.focus = focus;
 var button = {
@@ -127,7 +128,8 @@ var button = {
   label: active,
   hoverBorder: accent,
   hoverLabel: accent,
-  hoverBackground: accent[95]
+  hoverBackground: accent[95],
+  focus: focus
 };
 exports.button = button;
 var line = {

package/lib/cjs/styles/forms/checkbox.js

@@ -15,8 +15,10 @@ var checkbox = {
     bg: 'transparent'
   },
   'input ~ &.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus'
+    boxShadow: 'none',
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px'
   }
 };
 exports.checkbox = checkbox;

package/lib/cjs/styles/forms/input.js

@@ -30,6 +30,8 @@ var _text = require("../variants/text");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
+var _buttons = require("../variants/buttons");
+
 var _input$container;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -60,8 +62,9 @@ var input = _objectSpread(_objectSpread({}, _text.text.inputValue), {}, {
   width: '100%',
   outline: 'none',
   '&.is-focused': {
-    borderColor: 'accent.80',
-    boxShadow: 'focus'
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
   },
   '.is-float-label &': {
     height: '45px'
@@ -93,6 +96,12 @@ input.large = _objectSpread(_objectSpread({}, input), {}, {
   lineHeight: '2em',
   height: '4em'
 });
+input.search = _objectSpread(_objectSpread({}, input), {}, {
+  '&.is-focused': {
+    outline: 'none',
+    borderColor: 'focus'
+  }
+});
 input.small = _objectSpread(_objectSpread({}, input), {}, {
   height: '28px',
   pb: '2px',
@@ -211,9 +220,13 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
     lineHeight: '100%',
     p: 5,
     '&.is-focused': {
-      boxShadow: 'none'
+      boxShadow: 'none',
+      outline: 'none'
     }
-  }
+  },
+  '&.is-focused': _objectSpread({
+    boxShadow: 'none'
+  }, _buttons.defaultFocus)
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'

package/lib/cjs/styles/forms/radio.js

@@ -1,13 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports.radioField = exports.radio = void 0;
-// Styles for default radio and variants go here.
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _buttons = require("../variants/buttons");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 // Default radio
 var radio = {
   width: 20,
@@ -18,10 +42,7 @@ var radio = {
   'input:focus ~ &': {
     bg: 'transparent'
   },
-  'input ~ &.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus'
-  }
+  'input ~ &.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline)
 };
 exports.radio = radio;
 var radioField = {

package/lib/cjs/styles/forms/select.js

@@ -30,6 +30,8 @@ var _input = require("./input");
 
 var _variants = require("../variants");
 
+var _buttons = require("../variants/buttons");
+
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -42,9 +44,7 @@ var activeFloatLabel = {
 var select = _objectSpread(_objectSpread({}, _input.input), {}, {
   display: 'flex',
   alignItems: 'center',
-  '&.is-focused': {
-    boxShadow: 'focus'
-  },
+  '&.is-focused': _objectSpread({}, _buttons.defaultFocus),
   '.is-float-label &': _objectSpread({
     height: '45px'
   }, activeFloatLabel)

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

@@ -1,37 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _buttons = require("../variants/buttons");
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -73,9 +48,12 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': _objectSpread(_objectSpread({}, _buttons.defaultFocus), {}, {
+  border: '1px solid transparent',
+  '&.is-focused': {
+    border: '1px solid',
+    borderColor: 'focus',
     zIndex: '10'
-  }),
+  },
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

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

@@ -77,7 +77,8 @@ var listItem = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     bg: 'white'
   }
-});
+}); // the transparent border is included so that the content does not shift on hover.
+
 
 var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   padding: '0px 15px 0px 25px',
@@ -93,17 +94,18 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
     bg: 'white',
     cursor: 'pointer'
   },
-  '&.is-focused': {
-    boxShadow: 'inset 0 0 5px #5873bdbf'
-  },
   '&.has-separator': {
     borderBottom: '1px solid',
     borderBottomColor: 'line.hairline'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
   }
 });
 
 var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
   minHeight: '75px',
+  height: '76px',
   '&.has-inset-separator': {
     '&:after': {
       content: '""',
@@ -113,6 +115,17 @@ var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
       bottom: 0,
       borderBottom: '1px solid',
       borderBottomColor: 'line.hairline'
+    },
+    '&.is-focused': {
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 'calc(100% - 43px)',
+        right: 0,
+        bottom: 0,
+        borderBottom: '1px solid',
+        borderBottomColor: 'focus'
+      }
     }
   }
 });