@pingux/astro 2.207.0-alpha.0 → 2.207.1-alpha.0

package/lib/cjs/components/Checkbox/CheckboxBase.js

@@ -31,13 +31,14 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var
   }, props));
 });
 var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
+  console.log('🚀 ~ IndeterminateCheckboxIcon ~ props:', props);
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": "checkbox-icon-title",
     "data-testid": "checkbox-icon-indeterminate"
-  }, (0, _lodash.omit)(props, 'id', 'aria-checked', 'data-testid')), (0, _react2.jsx)("title", {
+  }, (0, _lodash.omit)(props, 'id', 'aria-checked', 'data-testid', 'onFocus')), (0, _react2.jsx)("title", {
     id: "checkbox-icon-title"
   }, "Indeterminate Checkbox Icon"), (0, _react2.jsx)("rect", {
     x: "3.5",
@@ -75,7 +76,8 @@ var IndeterminateCheckbox = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     variant: "variants.box.indeterminateCheckboxIcon",
     mr: 2
   }, props, {
-    opacity: 1
+    opacity: 1,
+    tabIndex: -1
   })));
 });
 var CheckboxBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -16,6 +16,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
@@ -27,6 +28,7 @@ var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _react2 = require("@emotion/react");
+var _excluded = ["onKeyDown", "onKeyUp"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -56,16 +58,31 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: checkboxRef
     })),
     containerPressProps = _usePress.pressProps;
+  // usePress onKeyDown registers a global keyup listener and when isIndeterminate changes during
+  // a press, usePress creates a new state machine instance but old global keyup
+  // listener never fires cleanly and the state machine gets out of sync, causing
+  // subsequent Space presses to be ignored. The checkbox input already handles Space natively.
+  var _kd = containerPressProps.onKeyDown,
+    _ku = containerPressProps.onKeyUp,
+    safeContainerPressProps = (0, _objectWithoutProperties2["default"])(containerPressProps, _excluded);
+  var prevIsIndeterminate = (0, _react.useRef)(isIndeterminate);
   (0, _react.useEffect)(function () {
     if (checkboxRef.current && isIndeterminate) {
       checkboxRef.current.indeterminate = true;
     } else if (checkboxRef.current && !isIndeterminate) {
       checkboxRef.current.indeterminate = false;
+
+      // Restore focus to the new input when the transition  from indeterminate to default
+      // occurs and focus has landed on <body> (meaning it was on the old input before the swap).
+      if (prevIsIndeterminate.current && document.activeElement === document.body) {
+        checkboxRef.current.focus();
+      }
     }
+    prevIsIndeterminate.current = isIndeterminate;
   }, [isIndeterminate]);
   var _useCheckbox = (0, _reactAria.useCheckbox)(checkboxProps, state, checkboxRef),
     inputProps = _useCheckbox.inputProps;
-  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({}, containerPressProps), props), {}, {
+  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({}, safeContainerPressProps), props), {}, {
       statusClasses: {
         isIndeterminate: isIndeterminate
       },

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

@@ -12,6 +12,7 @@ var _Promise = require("@babel/runtime-corejs3/core-js-stable/promise");
 var _Symbol$iterator = require("@babel/runtime-corejs3/core-js-stable/symbol/iterator");
 var _reverseInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/reverse");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
@@ -335,4 +336,85 @@ test('indeterminate checkbox, clicking svg', /*#__PURE__*/(0, _asyncToGenerator2
         return _context8.stop();
     }
   }, _callee8);
+})));
+test('controlled indeterminate checkbox retains focus and toggles correctly across keyboard Space presses', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+  var onChange, IndeterminateParent, input, input2;
+  return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+    while (1) switch (_context9.prev = _context9.next) {
+      case 0:
+        onChange = jest.fn();
+        IndeterminateParent = function IndeterminateParent() {
+          var _React$useState = _react["default"].useState(true),
+            _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+            isIndeterminate = _React$useState2[0],
+            setIsIndeterminate = _React$useState2[1];
+          var _React$useState3 = _react["default"].useState(false),
+            _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+            isSelected = _React$useState4[0],
+            setIsSelected = _React$useState4[1];
+          var handleChange = function handleChange(selected) {
+            onChange(selected);
+            setIsIndeterminate(false);
+            setIsSelected(selected);
+          };
+          return (0, _react2.jsx)(_["default"], {
+            label: testLabel,
+            isIndeterminate: isIndeterminate,
+            isSelected: isSelected,
+            onChange: handleChange
+          });
+        };
+        (0, _testWrapper.render)((0, _react2.jsx)(IndeterminateParent, null));
+
+        // Initial: indeterminate
+        expect(_testWrapper.screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed');
+
+        // First Space: focus the input, then simulate Space press
+        input = _testWrapper.screen.getByRole('checkbox');
+        (0, _testWrapper.act)(function () {
+          input.focus();
+        });
+        expect(input).toHaveFocus();
+
+        // Simulate keyboard Space: keydown triggers native change on checkbox, then keyup
+        _testWrapper.fireEvent.keyDown(input, {
+          key: ' ',
+          code: 'Space',
+          charCode: 32
+        });
+        _testWrapper.fireEvent.click(input); // keyboard Space on checkbox fires a click event in browsers
+        _testWrapper.fireEvent.keyUp(input, {
+          key: ' ',
+          code: 'Space',
+          charCode: 32
+        });
+        expect(onChange).toHaveBeenNthCalledWith(1, true);
+        // Re-query after re-render: isIndeterminate=false now
+        expect(_testWrapper.screen.getByRole('checkbox')).not.toHaveAttribute('aria-checked', 'mixed');
+        expect(_testWrapper.screen.getByRole('checkbox')).toBeChecked();
+
+        // After the indeterminate->checked transition, the input should still have focus
+        // (the old IndeterminateCheckbox input was unmounted, so focus may be lost)
+        expect(_testWrapper.screen.getByRole('checkbox')).toHaveFocus();
+
+        // Second Space: checked -> unchecked
+        input2 = _testWrapper.screen.getByRole('checkbox');
+        _testWrapper.fireEvent.keyDown(input2, {
+          key: ' ',
+          code: 'Space',
+          charCode: 32
+        });
+        _testWrapper.fireEvent.click(input2);
+        _testWrapper.fireEvent.keyUp(input2, {
+          key: ' ',
+          code: 'Space',
+          charCode: 32
+        });
+        expect(onChange).toHaveBeenNthCalledWith(2, false);
+        expect(_testWrapper.screen.getByRole('checkbox')).not.toBeChecked();
+      case 20:
+      case "end":
+        return _context9.stop();
+    }
+  }, _callee9);
 })));

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -93,16 +93,10 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: MenuDown,
-    title: {
-      name: 'Menu Down Icon'
-    },
     sx: _objectSpread(_objectSpread({}, state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null), iconPropsSx)
   }, restIconProps, {
-    title: {
-      name: ''
-    },
     color: isOnyx ? 'font.link' : 'active',
     size: linkSelectFieldIcon,
     "aria-hidden": "true"

package/lib/components/Checkbox/CheckboxBase.js

@@ -21,13 +21,14 @@ var DefaultCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
 });
 var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
+  console.log('🚀 ~ IndeterminateCheckboxIcon ~ props:', props);
   return ___EmotionJSX("svg", _extends({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": "checkbox-icon-title",
     "data-testid": "checkbox-icon-indeterminate"
-  }, omit(props, 'id', 'aria-checked', 'data-testid')), ___EmotionJSX("title", {
+  }, omit(props, 'id', 'aria-checked', 'data-testid', 'onFocus')), ___EmotionJSX("title", {
     id: "checkbox-icon-title"
   }, "Indeterminate Checkbox Icon"), ___EmotionJSX("rect", {
     x: "3.5",
@@ -65,7 +66,8 @@ var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "variants.box.indeterminateCheckboxIcon",
     mr: 2
   }, props, {
-    opacity: 1
+    opacity: 1,
+    tabIndex: -1
   })));
 });
 var CheckboxBase = /*#__PURE__*/forwardRef(function (props, ref) {

package/lib/components/CheckboxField/CheckboxField.js

@@ -7,10 +7,12 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["onKeyDown", "onKeyUp"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { forwardRef, useEffect, useMemo } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { mergeProps, useCheckbox } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { usePress } from '@react-aria/interactions';
@@ -46,16 +48,31 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: checkboxRef
     })),
     containerPressProps = _usePress.pressProps;
+  // usePress onKeyDown registers a global keyup listener and when isIndeterminate changes during
+  // a press, usePress creates a new state machine instance but old global keyup
+  // listener never fires cleanly and the state machine gets out of sync, causing
+  // subsequent Space presses to be ignored. The checkbox input already handles Space natively.
+  var _kd = containerPressProps.onKeyDown,
+    _ku = containerPressProps.onKeyUp,
+    safeContainerPressProps = _objectWithoutProperties(containerPressProps, _excluded);
+  var prevIsIndeterminate = useRef(isIndeterminate);
   useEffect(function () {
     if (checkboxRef.current && isIndeterminate) {
       checkboxRef.current.indeterminate = true;
     } else if (checkboxRef.current && !isIndeterminate) {
       checkboxRef.current.indeterminate = false;
+
+      // Restore focus to the new input when the transition  from indeterminate to default
+      // occurs and focus has landed on <body> (meaning it was on the old input before the swap).
+      if (prevIsIndeterminate.current && document.activeElement === document.body) {
+        checkboxRef.current.focus();
+      }
     }
+    prevIsIndeterminate.current = isIndeterminate;
   }, [isIndeterminate]);
   var _useCheckbox = useCheckbox(checkboxProps, state, checkboxRef),
     inputProps = _useCheckbox.inputProps;
-  var _useField = useField(_objectSpread(_objectSpread(_objectSpread({}, containerPressProps), props), {}, {
+  var _useField = useField(_objectSpread(_objectSpread(_objectSpread({}, safeContainerPressProps), props), {}, {
       statusClasses: {
         isIndeterminate: isIndeterminate
       },

package/lib/components/CheckboxField/CheckboxField.test.js

@@ -9,6 +9,7 @@ import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Symbol$iterator from "@babel/runtime-corejs3/core-js-stable/symbol/iterator";
 import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
 import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
@@ -23,7 +24,7 @@ function _OverloadYield(e, d) { this.v = e, this.k = d; }
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import CheckboxField from '.';
@@ -332,4 +333,85 @@ test('indeterminate checkbox, clicking svg', /*#__PURE__*/_asyncToGenerator(/*#_
         return _context8.stop();
     }
   }, _callee8);
+})));
+test('controlled indeterminate checkbox retains focus and toggles correctly across keyboard Space presses', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+  var onChange, IndeterminateParent, input, input2;
+  return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+    while (1) switch (_context9.prev = _context9.next) {
+      case 0:
+        onChange = jest.fn();
+        IndeterminateParent = function IndeterminateParent() {
+          var _React$useState = React.useState(true),
+            _React$useState2 = _slicedToArray(_React$useState, 2),
+            isIndeterminate = _React$useState2[0],
+            setIsIndeterminate = _React$useState2[1];
+          var _React$useState3 = React.useState(false),
+            _React$useState4 = _slicedToArray(_React$useState3, 2),
+            isSelected = _React$useState4[0],
+            setIsSelected = _React$useState4[1];
+          var handleChange = function handleChange(selected) {
+            onChange(selected);
+            setIsIndeterminate(false);
+            setIsSelected(selected);
+          };
+          return ___EmotionJSX(CheckboxField, {
+            label: testLabel,
+            isIndeterminate: isIndeterminate,
+            isSelected: isSelected,
+            onChange: handleChange
+          });
+        };
+        render(___EmotionJSX(IndeterminateParent, null));
+
+        // Initial: indeterminate
+        expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed');
+
+        // First Space: focus the input, then simulate Space press
+        input = screen.getByRole('checkbox');
+        act(function () {
+          input.focus();
+        });
+        expect(input).toHaveFocus();
+
+        // Simulate keyboard Space: keydown triggers native change on checkbox, then keyup
+        fireEvent.keyDown(input, {
+          key: ' ',
+          code: 'Space',
+          charCode: 32
+        });
+        fireEvent.click(input); // keyboard Space on checkbox fires a click event in browsers
+        fireEvent.keyUp(input, {
+          key: ' ',
+          code: 'Space',
+          charCode: 32
+        });
+        expect(onChange).toHaveBeenNthCalledWith(1, true);
+        // Re-query after re-render: isIndeterminate=false now
+        expect(screen.getByRole('checkbox')).not.toHaveAttribute('aria-checked', 'mixed');
+        expect(screen.getByRole('checkbox')).toBeChecked();
+
+        // After the indeterminate->checked transition, the input should still have focus
+        // (the old IndeterminateCheckbox input was unmounted, so focus may be lost)
+        expect(screen.getByRole('checkbox')).toHaveFocus();
+
+        // Second Space: checked -> unchecked
+        input2 = screen.getByRole('checkbox');
+        fireEvent.keyDown(input2, {
+          key: ' ',
+          code: 'Space',
+          charCode: 32
+        });
+        fireEvent.click(input2);
+        fireEvent.keyUp(input2, {
+          key: ' ',
+          code: 'Space',
+          charCode: 32
+        });
+        expect(onChange).toHaveBeenNthCalledWith(2, false);
+        expect(screen.getByRole('checkbox')).not.toBeChecked();
+      case 20:
+      case "end":
+        return _context9.stop();
+    }
+  }, _callee9);
 })));

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -83,16 +83,10 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.select.arrow"
   }, ___EmotionJSX(Icon, _extends({
     icon: MenuDown,
-    title: {
-      name: 'Menu Down Icon'
-    },
     sx: _objectSpread(_objectSpread({}, state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null), iconPropsSx)
   }, restIconProps, {
-    title: {
-      name: ''
-    },
     color: isOnyx ? 'font.link' : 'active',
     size: linkSelectFieldIcon,
     "aria-hidden": "true"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.207.0-alpha.0",
+  "version": "2.207.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",