@pingux/astro 1.32.0-alpha.1 → 1.32.0-alpha.3

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

@@ -164,8 +164,10 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: textAreaRef,
     rows: rows
   }, fieldControlProps, {
-    sx: (slots === null || slots === void 0 ? void 0 : slots.inContainer) && {
+    sx: slots !== null && slots !== void 0 && slots.inContainer ? {
       paddingRight: '35px'
+    } : {
+      overflow: 'hidden'
     }
   })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && (0, _react2.jsx)(_.Box, {
     variant: "boxes.textFieldInContainerSlot",

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

@@ -132,8 +132,10 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: textAreaRef,
     rows: rows
   }, fieldControlProps, {
-    sx: (slots === null || slots === void 0 ? void 0 : slots.inContainer) && {
+    sx: slots !== null && slots !== void 0 && slots.inContainer ? {
       paddingRight: '35px'
+    } : {
+      overflow: 'hidden'
     }
   })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && ___EmotionJSX(Box, {
     variant: "boxes.textFieldInContainerSlot",

package/package.json

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