@pingux/astro 1.32.0 → 1.32.1-alpha.4

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

@@ -34,6 +34,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -142,18 +144,6 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
-  /* istanbul ignore next */
-
-  var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
-    var newVal = key || selectedKey || '';
-
-    if (hasAddOption && selectedKey !== inputValue) {
-      newVal = inputValue;
-    }
-
-    if (onSelectionChange) onSelectionChange(newVal);
-  };
-
   var shouldShowAddOption = hasAddOption && inputValue && selectedKey !== inputValue;
   var addOption = "ADD: ".concat(inputValue);
 
@@ -172,6 +162,18 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var defaultItems = getItemsArr(initialDefaultItems);
   var items = getItemsArr(initialItems);
+  /* istanbul ignore next */
+
+  var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
+    var newVal = key || selectedKey || '';
+    var arrayOfValues = (0, _from["default"])(items || defaultItems);
+
+    if (hasAddOption && selectedKey !== inputValue && arrayOfValues[arrayOfValues.length - 1].key === key) {
+      newVal = inputValue;
+    }
+
+    if (onSelectionChange) onSelectionChange(newVal);
+  };
 
   var _useFilter = (0, _i18n.useFilter)({
     sensitivity: 'base'
@@ -186,7 +188,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }));
   (0, _react.useEffect)(function () {
     if (shouldShowAddOption) state.selectionManager.setFocusedKey(addOption);
-  }, [shouldShowAddOption, state, addOption]);
+  }, [shouldShowAddOption, inputValue, addOption, state.isOpen]);
 
   var _useComboBox = (0, _combobox.useComboBox)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     buttonRef: buttonRef,

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

@@ -158,6 +158,15 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   layout.isLoading = isLoading;
   var focusedKey = selectionManager.focusedKey;
   delete gridProps.onMouseDown;
+
+  var onFocus = function onFocus(e) {
+    gridProps.onFocus(e);
+
+    if (others.onFocus) {
+      others.onFocus(e);
+    }
+  };
+
   return (0, _react2.jsx)(_ListViewContext.ListViewContext.Provider, {
     value: {
       state: state
@@ -173,7 +182,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isLoading: isLoading,
     collection: collection,
     transitionDuration: 0
-  }, others), function (type, item) {
+  }, others, {
+    onFocus: onFocus
+  }), function (type, item) {
     if (type === 'item') {
       return (0, _react2.jsx)(_ListViewItem["default"], {
         item: item

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

@@ -323,4 +323,35 @@ test('selectionMode "multiple" allows to select more than one item', /*#__PURE__
       }
     }
   }, _callee6);
+})));
+test('when user navigates with tab and arrows keys, onFocus is called and the is-focused class is applied', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+  var onFocus, listView, options;
+  return _regenerator["default"].wrap(function _callee7$(_context7) {
+    while (1) {
+      switch (_context7.prev = _context7.next) {
+        case 0:
+          onFocus = jest.fn();
+          getComponent({
+            onFocus: onFocus
+          });
+          listView = _testWrapper.screen.getByTestId(testId);
+
+          _userEvent["default"].tab();
+
+          expect(onFocus).toHaveBeenCalled();
+
+          _userEvent["default"].type(listView, '{arrowdown}', {
+            skipClick: true
+          });
+
+          options = _testWrapper.screen.getAllByRole('gridcell');
+          expect(options[1]).toHaveClass('is-focused');
+          expect(onFocus).toHaveBeenCalled();
+
+        case 9:
+        case "end":
+          return _context7.stop();
+      }
+    }
+  }, _callee7);
 })));

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

@@ -160,6 +160,9 @@ var sx = {
     },
     '& > [role="presentation"]': {
       height: '0px'
+    },
+    '&.is-selected': {
+      mb: '4px'
     }
   })
 };

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

@@ -83,7 +83,7 @@ var stepBase = {
 };
 var step = {
   active: _objectSpread({
-    backgroundColor: 'accent.95',
+    backgroundColor: 'accent.99',
     borderColor: 'active',
     color: 'active'
   }, stepBase),

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -9,6 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
@@ -94,18 +95,6 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-  /* istanbul ignore next */
-
-  var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
-    var newVal = key || selectedKey || '';
-
-    if (hasAddOption && selectedKey !== inputValue) {
-      newVal = inputValue;
-    }
-
-    if (onSelectionChange) onSelectionChange(newVal);
-  };
-
   var shouldShowAddOption = hasAddOption && inputValue && selectedKey !== inputValue;
   var addOption = "ADD: ".concat(inputValue);
 
@@ -124,6 +113,19 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var defaultItems = getItemsArr(initialDefaultItems);
   var items = getItemsArr(initialItems);
+  /* istanbul ignore next */
+
+  var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
+    var newVal = key || selectedKey || '';
+
+    var arrayOfValues = _Array$from(items || defaultItems);
+
+    if (hasAddOption && selectedKey !== inputValue && arrayOfValues[arrayOfValues.length - 1].key === key) {
+      newVal = inputValue;
+    }
+
+    if (onSelectionChange) onSelectionChange(newVal);
+  };
 
   var _useFilter = useFilter({
     sensitivity: 'base'
@@ -138,7 +140,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
   useEffect(function () {
     if (shouldShowAddOption) state.selectionManager.setFocusedKey(addOption);
-  }, [shouldShowAddOption, state, addOption]);
+  }, [shouldShowAddOption, inputValue, addOption, state.isOpen]);
 
   var _useComboBox = useComboBox(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     buttonRef: buttonRef,

package/lib/components/ListView/ListView.js

@@ -112,6 +112,15 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   layout.isLoading = isLoading;
   var focusedKey = selectionManager.focusedKey;
   delete gridProps.onMouseDown;
+
+  var onFocus = function onFocus(e) {
+    gridProps.onFocus(e);
+
+    if (others.onFocus) {
+      others.onFocus(e);
+    }
+  };
+
   return ___EmotionJSX(ListViewContext.Provider, {
     value: {
       state: state
@@ -127,7 +136,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     isLoading: isLoading,
     collection: collection,
     transitionDuration: 0
-  }, others), function (type, item) {
+  }, others, {
+    onFocus: onFocus
+  }), function (type, item) {
     if (type === 'item') {
       return ___EmotionJSX(ListViewItem, {
         item: item

package/lib/components/ListView/ListView.test.js

@@ -282,4 +282,31 @@ test('selectionMode "multiple" allows to select more than one item', /*#__PURE__
       }
     }
   }, _callee6);
+})));
+test('when user navigates with tab and arrows keys, onFocus is called and the is-focused class is applied', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+  var onFocus, listView, options;
+  return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+    while (1) {
+      switch (_context7.prev = _context7.next) {
+        case 0:
+          onFocus = jest.fn();
+          getComponent({
+            onFocus: onFocus
+          });
+          listView = screen.getByTestId(testId);
+          userEvent.tab();
+          expect(onFocus).toHaveBeenCalled();
+          userEvent.type(listView, '{arrowdown}', {
+            skipClick: true
+          });
+          options = screen.getAllByRole('gridcell');
+          expect(options[1]).toHaveClass('is-focused');
+          expect(onFocus).toHaveBeenCalled();
+
+        case 9:
+        case "end":
+          return _context7.stop();
+      }
+    }
+  }, _callee7);
 })));

package/lib/recipes/LogoTabs.stories.js

@@ -125,6 +125,9 @@ var sx = {
     },
     '& > [role="presentation"]': {
       height: '0px'
+    },
+    '&.is-selected': {
+      mb: '4px'
     }
   })
 };

package/lib/styles/variants/stepper.js

@@ -65,7 +65,7 @@ var stepBase = {
 };
 var step = {
   active: _objectSpread({
-    backgroundColor: 'accent.95',
+    backgroundColor: 'accent.99',
     borderColor: 'active',
     color: 'active'
   }, stepBase),

package/package.json

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