@pingux/astro 1.16.1-alpha.0 → 1.17.0-alpha.10

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

@@ -32,6 +32,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/
 
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -62,7 +66,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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 _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var items = [{
   name: 'Aardvark',
@@ -121,6 +125,54 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   });
 };
 
+var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
+  var _useState3 = (0, _react.useState)(items),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      options = _useState4[0],
+      setOptions = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectedKey = _useState8[0],
+      setSelectedKey = _useState8[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
+      var name = _ref2.name;
+      return name === key;
+    })) {
+      var _context;
+
+      setOptions((0, _concat["default"])(_context = []).call(_context, options, [{
+        key: key,
+        name: key
+      }]));
+    }
+
+    setInputValue(key);
+    setSelectedKey(key);
+  };
+
+  return (0, _react2.jsx)(_index.ComboBoxField, {
+    label: "Example label",
+    defaultItems: options,
+    inputValue: inputValue,
+    selectedKey: selectedKey,
+    onInputChange: setInputValue,
+    onSelectionChange: onSelectionChange,
+    hasAddOption: true
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  });
+};
+
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
     return 1000;
@@ -474,43 +526,43 @@ test('should use default contains filtering', function () {
 });
 test('should be able to use controlled filtering', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
   var options, input;
-  return _regenerator["default"].wrap(function _callee$(_context) {
+  return _regenerator["default"].wrap(function _callee$(_context2) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context2.prev = _context2.next) {
         case 0:
           (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithCustomFilter, null));
           input = _testWrapper.screen.queryByRole('combobox'); // Should list all without filterable input
 
           _userEvent["default"].type(input, '{arrowdown}');
 
-          _context.next = 5;
+          _context2.next = 5;
           return _testWrapper.screen.findAllByRole('option');
 
         case 5:
-          options = _context.sent;
+          options = _context2.sent;
           expect(options).toHaveLength(items.length); // Should only list the second option
 
           _userEvent["default"].type(input, 'k');
 
-          _context.next = 10;
+          _context2.next = 10;
           return _testWrapper.screen.findAllByRole('option');
 
         case 10:
-          options = _context.sent;
+          options = _context2.sent;
           expect(options[0]).toHaveTextContent(items[1].name);
 
         case 12:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
     }
   }, _callee);
 })));
 test('should be able to use custom default filtering', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
   var options, defaultFilter, input;
-  return _regenerator["default"].wrap(function _callee2$(_context2) {
+  return _regenerator["default"].wrap(function _callee2$(_context3) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           defaultFilter = function defaultFilter(option, inputValue) {
             return (0, _startsWith["default"])(option).call(option, inputValue);
@@ -523,34 +575,34 @@ test('should be able to use custom default filtering', /*#__PURE__*/(0, _asyncTo
 
           _userEvent["default"].type(input, '{arrowdown}');
 
-          _context2.next = 6;
+          _context3.next = 6;
           return _testWrapper.screen.findAllByRole('option');
 
         case 6:
-          options = _context2.sent;
+          options = _context3.sent;
           expect(options).toHaveLength(items.length); // Should only list the second option
 
           _userEvent["default"].type(input, 'K');
 
-          _context2.next = 11;
+          _context3.next = 11;
           return _testWrapper.screen.findAllByRole('option');
 
         case 11:
-          options = _context2.sent;
+          options = _context3.sent;
           expect(options[0]).toHaveTextContent(items[1].name);
 
         case 13:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
     }
   }, _callee2);
 })));
 test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
   var newItems, input, options;
-  return _regenerator["default"].wrap(function _callee3$(_context3) {
+  return _regenerator["default"].wrap(function _callee3$(_context4) {
     while (1) {
-      switch (_context3.prev = _context3.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
           newItems = (0, _map["default"])(items).call(items, function (item) {
             return _objectSpread(_objectSpread({}, item), {}, {
@@ -564,11 +616,11 @@ test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGe
 
           _userEvent["default"].click(input);
 
-          _context3.next = 6;
+          _context4.next = 6;
           return _testWrapper.screen.findAllByRole('option');
 
         case 6:
-          options = _context3.sent;
+          options = _context4.sent;
 
           _userEvent["default"].click(options[0]);
 
@@ -580,7 +632,7 @@ test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGe
 
         case 11:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
     }
   }, _callee3);
@@ -951,25 +1003,71 @@ test('onSelectionChange works properly with custom value', function () {
 
   expect(onSelectionChange).toHaveBeenCalledWith('');
 });
+test('add option shows when "hasAddOption" is provided', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithAddOption, null));
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue('');
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+  var inputValue = 'New value';
+
+  _userEvent["default"].type(input, inputValue);
+
+  expect(input).toHaveValue(inputValue);
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  var option = _testWrapper.screen.queryByRole('option');
+
+  expect(option).toBeInTheDocument();
+  expect(option).toHaveClass('is-focused');
+  expect(option).toHaveTextContent("ADD: ".concat(inputValue));
+});
+test('if "hasAddOption" is provided, then custom value is added to listbox on blur', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithAddOption, null));
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var inputValue = 'New value';
+
+  _userEvent["default"].type(input, inputValue);
+
+  expect(input).toHaveValue(inputValue); // blur input
+
+  _userEvent["default"].tab();
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(input);
+
+  expect(input).toHaveValue(inputValue);
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(options[options.length - 1]).toHaveTextContent(inputValue);
+});
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
   var _getComponent6, container, results;
 
-  return _regenerator["default"].wrap(function _callee4$(_context4) {
+  return _regenerator["default"].wrap(function _callee4$(_context5) {
     while (1) {
-      switch (_context4.prev = _context4.next) {
+      switch (_context5.prev = _context5.next) {
         case 0:
           jest.useRealTimers();
           _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context4.next = 4;
+          _context5.next = 4;
           return (0, _jestAxe.axe)(container);
 
         case 4:
-          results = _context4.sent;
+          results = _context5.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context4.stop();
+          return _context5.stop();
       }
     }
   }, _callee4);

package/lib/cjs/components/Image/Image.js

@@ -56,7 +56,7 @@ var _colors = require("../../styles/colors");
 
 var _templateObject;
 
-var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "sx"];
+var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "alt", "sx"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -77,6 +77,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fallbackTimeout = props.fallbackTimeout,
       isDisabled = props.isDisabled,
       src = props.src,
+      alt = props.alt,
       sx = props.sx,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
@@ -122,6 +123,8 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return imgRef.current;
   });
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  var ariaLabel = props['aria-label'] || alt;
+  (0, _hooks.useAriaLabelWarning)('Image', ariaLabel);
 
   var _useHover = (0, _interactions.useHover)(props),
       hoverProps = _useHover.hoverProps,
@@ -178,7 +181,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var themeUiImage = (0, _react2.jsx)(_themeUi.Image, (0, _extends2["default"])({
     className: classNames,
     ref: imgRef,
-    alt: "Image",
+    alt: alt,
     role: "img",
     src: imgSrc,
     sx: sx
@@ -212,7 +215,15 @@ Image.propTypes = {
   fallbackImage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
 
   /**  Time in milliseconds that component should wait for a response from src address. */
-  fallbackTimeout: _propTypes["default"].number
+  fallbackTimeout: _propTypes["default"].number,
+
+  /** Descriptive text for an image. This is *highly* recommended in most cases.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt).
+   * */
+  alt: _propTypes["default"].string,
+
+  /** Defines a string value that labels the current element. */
+  'aria-label': _propTypes["default"].string
 };
 Image.defaultProps = {
   isDisabled: false,

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

@@ -67,7 +67,9 @@ exports["default"] = _default;
 
 var Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, _ref);
-  return (0, _react2.jsx)(_["default"], args);
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
+    alt: "Ping identity square logo"
+  }));
 };
 
 exports.Default = Default;
@@ -75,7 +77,8 @@ exports.Default = Default;
 var Avatar = function Avatar() {
   return (0, _react2.jsx)(_["default"], {
     src: _imageConstants.pingImg,
-    variant: "images.avatar"
+    variant: "images.avatar",
+    alt: "Ping identity round avatar"
   });
 };
 
@@ -89,7 +92,8 @@ var CustomSizeAndRadius = function CustomSizeAndRadius() {
       height: '70px',
       borderRadius: 8,
       bg: 'neutral.90'
-    }
+    },
+    alt: "Terry Crews in a red suite"
   });
 };
 
@@ -98,7 +102,8 @@ exports.CustomSizeAndRadius = CustomSizeAndRadius;
 var Disabled = function Disabled() {
   return (0, _react2.jsx)(_["default"], {
     src: _imageConstants.pingImg,
-    isDisabled: true
+    isDisabled: true,
+    alt: "Ping identity square logo"
   });
 };
 
@@ -111,7 +116,8 @@ var FallbackImage = function FallbackImage() {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 
@@ -125,7 +131,8 @@ var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 
@@ -140,7 +147,8 @@ var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 
@@ -169,7 +177,8 @@ var UpdatingImageSrc = function UpdatingImageSrc() {
       width: '200px',
       height: '200px',
       mt: '25px'
-    }
+    },
+    alt: image === _imageConstants.pingImg ? 'Ping identity square logo' : 'Terry Crews in a red suite'
   }));
 };
 

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

@@ -101,6 +101,15 @@ test('image shows disabled status', function () {
 
   expect(img).toHaveClass('is-disabled');
 });
+test('image with alt text', function () {
+  getComponent({
+    alt: 'Test'
+  });
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(_testWrapper.screen.getByAltText('Test')).toBeInTheDocument();
+});
 test('image source is able to be changed', function () {
   var src2 = 'second-src';
 

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

@@ -65,6 +65,11 @@ test('link shows focus status', function () {
 
   expect(link).toHaveFocus();
   expect(link).toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(link).not.toHaveFocus();
+  expect(link).not.toHaveClass('is-focused');
 });
 test('link shows disabled status', function () {
   // Needs href to have a tabindex

package/lib/cjs/components/ListView/ListView.js

@@ -198,6 +198,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   layout.isLoading = isLoading;
   var focusedItem = gridCollection.getFirstKey();
+  delete gridProps.onMouseDown;
   return (0, _react2.jsx)(_ListViewContext.ListViewContext.Provider, {
     value: {
       state: state,