@pingux/astro 2.221.6 → 2.234.1-alpha.0

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

@@ -0,0 +1,485 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
+var _Object$create = require("@babel/runtime-corejs3/core-js-stable/object/create");
+var _bindInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/bind");
+var _Object$getPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/get-prototype-of");
+var _Object$setPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/set-prototype-of");
+var _Symbol$asyncIterator = require("@babel/runtime-corejs3/core-js-stable/symbol/async-iterator");
+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 _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _react = _interopRequireDefault(require("react"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _jestAxe = require("jest-axe");
+var _index = require("../../index");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _ = require(".");
+var _react2 = require("@emotion/react");
+var _excluded = ["value", "label"];
+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 _context9, _context0; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty2(_context9 = ownKeys(Object(t), !0)).call(_context9, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_context0 = ownKeys(Object(t))).call(_context0, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 }; })(); }
+function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
+function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
+function _regeneratorAsync(n, e, r, t, o) { var a = _regeneratorAsyncGen(n, e, r, t, o); return a.next().then(function (n) { return n.done ? n.value : a.next(); }); }
+function _regeneratorAsyncGen(r, e, t, o, n) { return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || _Promise); }
+function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c = t[r](o), u = c.value; return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) { n("next", t, i, f); }, function (t) { n("throw", t, i, f); }) : e.resolve(u).then(function (t) { c.value = t, i(c); }, function (t) { return n("throw", t, i, f); }); } catch (t) { f(t); } } var r; this.next || (_regeneratorDefine2(_regeneratorAsyncIterator.prototype), _regeneratorDefine2(_regeneratorAsyncIterator.prototype, "function" == typeof _Symbol && _Symbol$asyncIterator || "@asyncIterator", function () { return this; })), _regeneratorDefine2(this, "_invoke", function (t, o, i) { function f() { return new e(function (e, r) { n(t, i, e, r); }); } return r = r ? r.then(f, f) : f(); }, !0); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof _Symbol ? _Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = _Object$create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: _bindInstanceProperty(d).call(d, e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = _Object$getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(c); function f(e) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = _Object$create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function _OverloadYield(e, d) { this.v = e, this.k = d; }
+var groupLabel = 'Pets';
+var values = ['dogs', 'cats', 'dragons'];
+var longLabel = 'A very long label that wraps within the available group width';
+var defaultItems = (0, _map["default"])(values).call(values, function (value) {
+  return {
+    value: value,
+    label: value
+  };
+});
+beforeEach(function () {
+  jest.useRealTimers();
+});
+afterEach(function () {
+  jest.useRealTimers();
+});
+var renderGroup = function renderGroup() {
+  var groupProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var itemConfigs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultItems;
+  var options = arguments.length > 2 ? arguments[2] : undefined;
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.CheckboxFieldGroup, (0, _extends2["default"])({
+    label: groupLabel
+  }, groupProps), (0, _map["default"])(itemConfigs).call(itemConfigs, function (_ref) {
+    var value = _ref.value,
+      label = _ref.label,
+      itemProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    return (0, _react2.jsx)(_.CheckboxFieldGroupItem, (0, _extends2["default"])({
+      key: value,
+      value: value,
+      label: label
+    }, itemProps));
+  })), options);
+};
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_.CheckboxFieldGroup, (0, _extends2["default"])({
+      label: groupLabel
+    }, props), (0, _react2.jsx)(_.CheckboxFieldGroupItem, {
+      value: values[0],
+      label: "Dogs"
+    }));
+  }
+});
+test.each([['default', {}], ['required', {
+  isRequired: true
+}], ['helper and error', {
+  helperText: 'Select at least one pet',
+  errorMessage: 'A pet selection is required',
+  isInvalid: true
+}], ['disabled', {
+  isDisabled: true
+}], ['read-only', {
+  isReadOnly: true
+}], ['horizontal', {
+  orientation: 'horizontal'
+}]])('has no accessibility violations for the %s state', /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_state, groupProps) {
+    var _renderGroup, container;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _renderGroup = renderGroup(groupProps), container = _renderGroup.container;
+          _context.t0 = expect;
+          _context.next = 4;
+          return (0, _jestAxe.axe)(container);
+        case 4:
+          _context.t1 = _context.sent;
+          (0, _context.t0)(_context.t1).toHaveNoViolations();
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function (_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}());
+test('renders a labelled group and individually labelled checkbox items', function () {
+  renderGroup();
+  var group = _testWrapper.screen.getByRole('group', {
+    name: groupLabel
+  });
+  var groupLabelElement = _testWrapper.screen.getByText(groupLabel);
+  expect(group).toHaveAttribute('aria-labelledby', groupLabelElement.id);
+  expect(_testWrapper.screen.getByRole('checkbox', {
+    name: 'dogs'
+  })).toBeInTheDocument();
+  expect(_testWrapper.screen.getByRole('checkbox', {
+    name: 'cats'
+  })).toBeInTheDocument();
+});
+test('toggles multiple items and reports the next selected array', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  var onChange, checkboxes;
+  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+    while (1) switch (_context2.prev = _context2.next) {
+      case 0:
+        onChange = jest.fn();
+        renderGroup({
+          onChange: onChange
+        });
+        checkboxes = _testWrapper.screen.getAllByRole('checkbox');
+        _context2.next = 5;
+        return _userEvent["default"].click(checkboxes[0]);
+      case 5:
+        _context2.next = 7;
+        return _userEvent["default"].click(checkboxes[1]);
+      case 7:
+        _context2.next = 9;
+        return _userEvent["default"].click(checkboxes[0]);
+      case 9:
+        expect(onChange).toHaveBeenNthCalledWith(1, [values[0]]);
+        expect(onChange).toHaveBeenNthCalledWith(2, [values[0], values[1]]);
+        expect(onChange).toHaveBeenNthCalledWith(3, [values[1]]);
+        expect(checkboxes[0]).not.toBeChecked();
+        expect(checkboxes[1]).toBeChecked();
+      case 14:
+      case "end":
+        return _context2.stop();
+    }
+  }, _callee2);
+})));
+test('supports controlled selection without changing until the value prop changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+  var onChange, checkboxes;
+  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+    while (1) switch (_context3.prev = _context3.next) {
+      case 0:
+        onChange = jest.fn();
+        renderGroup({
+          value: [values[0]],
+          onChange: onChange
+        });
+        checkboxes = _testWrapper.screen.getAllByRole('checkbox');
+        expect(checkboxes[0]).toBeChecked();
+        _context3.next = 6;
+        return _userEvent["default"].click(checkboxes[1]);
+      case 6:
+        expect(onChange).toHaveBeenCalledWith([values[0], values[1]]);
+        expect(checkboxes[0]).toBeChecked();
+        expect(checkboxes[1]).not.toBeChecked();
+      case 9:
+      case "end":
+        return _context3.stop();
+    }
+  }, _callee3);
+})));
+test('supports an uncontrolled default selection', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+  var checkboxes;
+  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+    while (1) switch (_context4.prev = _context4.next) {
+      case 0:
+        renderGroup({
+          defaultValue: [values[0]]
+        });
+        checkboxes = _testWrapper.screen.getAllByRole('checkbox');
+        expect(checkboxes[0]).toBeChecked();
+        _context4.next = 5;
+        return _userEvent["default"].click(checkboxes[1]);
+      case 5:
+        expect(checkboxes[0]).toBeChecked();
+        expect(checkboxes[1]).toBeChecked();
+      case 7:
+      case "end":
+        return _context4.stop();
+    }
+  }, _callee4);
+})));
+test('disabled group and items ignore clicks and Space without changing selection', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+  var groupOnChange, _renderGroup2, unmount, groupCheckboxes, groupItem, itemOnChange, _renderGroup3, container, itemCheckboxes, itemContainer;
+  return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+    while (1) switch (_context5.prev = _context5.next) {
+      case 0:
+        groupOnChange = jest.fn();
+        _renderGroup2 = renderGroup({
+          defaultValue: [values[0]],
+          isDisabled: true,
+          onChange: groupOnChange
+        }), unmount = _renderGroup2.unmount;
+        groupCheckboxes = _testWrapper.screen.getAllByRole('checkbox');
+        (0, _forEach["default"])(groupCheckboxes).call(groupCheckboxes, function (checkbox) {
+          return expect(checkbox).toBeDisabled();
+        });
+        groupItem = groupCheckboxes[0].closest('[data-pendo-id="CheckboxFieldGroupItem"]');
+        expect(groupItem).toHaveStyleRule('opacity', '0.65', {
+          target: '.is-disabled'
+        });
+        _context5.next = 8;
+        return _userEvent["default"].click(groupCheckboxes[0]);
+      case 8:
+        _context5.next = 10;
+        return _userEvent["default"].type(groupCheckboxes[0], '{space}');
+      case 10:
+        expect(groupCheckboxes[0]).toBeChecked();
+        expect(groupOnChange).not.toHaveBeenCalled();
+        unmount();
+        itemOnChange = jest.fn();
+        _renderGroup3 = renderGroup({
+          defaultValue: [values[1]],
+          onChange: itemOnChange
+        }, [defaultItems[0], _objectSpread(_objectSpread({}, defaultItems[1]), {}, {
+          isDisabled: true
+        })]), container = _renderGroup3.container;
+        itemCheckboxes = (0, _testWrapper.within)(container).getAllByRole('checkbox');
+        expect(itemCheckboxes[0]).toBeEnabled();
+        expect(itemCheckboxes[1]).toBeDisabled();
+        itemContainer = itemCheckboxes[1].closest('[data-pendo-id="CheckboxFieldGroupItem"]');
+        expect(itemContainer).toHaveStyleRule('opacity', '0.65', {
+          target: '.is-disabled'
+        });
+        // The base Astro theme resolves space.md to 15px; the rule is serialized on
+        // the label's emotion class as a `div` descendant rule.
+        expect(itemContainer.querySelector('label')).toHaveStyleRule('margin-right', '15px', {
+          target: 'div'
+        });
+        expect(itemCheckboxes[1]).toBeChecked();
+        _context5.next = 24;
+        return _userEvent["default"].click(itemCheckboxes[1]);
+      case 24:
+        _context5.next = 26;
+        return _userEvent["default"].type(itemCheckboxes[1], '{space}');
+      case 26:
+        expect(itemCheckboxes[1]).toBeChecked();
+        expect(itemOnChange).not.toHaveBeenCalled();
+      case 28:
+      case "end":
+        return _context5.stop();
+    }
+  }, _callee5);
+})));
+test('keeps a read-only group focusable without changing selection or invoking onChange', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var onChange, checkboxes, readOnlyItem;
+  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+    while (1) switch (_context6.prev = _context6.next) {
+      case 0:
+        onChange = jest.fn();
+        renderGroup({
+          isReadOnly: true,
+          onChange: onChange
+        });
+        checkboxes = _testWrapper.screen.getAllByRole('checkbox');
+        expect(_testWrapper.screen.getByRole('group', {
+          name: groupLabel
+        })).toBeInTheDocument();
+        expect(checkboxes[0]).toHaveAttribute('aria-readonly', 'true');
+        readOnlyItem = checkboxes[0].closest('[data-pendo-id="CheckboxFieldGroupItem"]');
+        expect(readOnlyItem).toHaveStyleRule('opacity', '0.65', {
+          target: '.is-read-only'
+        });
+        _context6.next = 9;
+        return _userEvent["default"].tab();
+      case 9:
+        expect(checkboxes[0]).toHaveFocus();
+        _context6.next = 12;
+        return _userEvent["default"].click(checkboxes[0]);
+      case 12:
+        _context6.next = 14;
+        return _userEvent["default"].type(checkboxes[0], '{space}');
+      case 14:
+        expect(checkboxes[0]).not.toBeChecked();
+        expect(onChange).not.toHaveBeenCalled();
+        _context6.next = 18;
+        return _userEvent["default"].tab();
+      case 18:
+        expect(checkboxes[1]).toHaveFocus();
+        _context6.next = 21;
+        return _userEvent["default"].tab({
+          shift: true
+        });
+      case 21:
+        expect(checkboxes[0]).toHaveFocus();
+      case 22:
+      case "end":
+        return _context6.stop();
+    }
+  }, _callee6);
+})));
+test('exposes required and invalid semantics and associates helper and error messages', function () {
+  var _group$getAttribute;
+  var helperText = 'Select at least one pet';
+  var errorMessage = 'A pet selection is required';
+  renderGroup({
+    helperText: helperText,
+    errorMessage: errorMessage,
+    isInvalid: true,
+    isRequired: true
+  });
+  var group = _testWrapper.screen.getByRole('group', {
+    name: new RegExp(groupLabel)
+  });
+  var helper = _testWrapper.screen.getByText(helperText);
+  var error = _testWrapper.screen.getByText(errorMessage);
+  var describedBy = ((_group$getAttribute = group.getAttribute('aria-describedby')) === null || _group$getAttribute === void 0 ? void 0 : _group$getAttribute.split(' ')) || [];
+  var checkboxes = _testWrapper.screen.getAllByRole('checkbox');
+  expect(checkboxes).toHaveLength(defaultItems.length);
+  (0, _forEach["default"])(checkboxes).call(checkboxes, function (checkbox) {
+    var _checkbox$getAttribut;
+    expect(checkbox).toBeRequired();
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+    expect((_checkbox$getAttribut = checkbox.getAttribute('aria-describedby')) === null || _checkbox$getAttribut === void 0 ? void 0 : _checkbox$getAttribut.split(' ')).toEqual(expect.arrayContaining([helper.id, error.id]));
+  });
+  expect(describedBy).toEqual(expect.arrayContaining([helper.id, error.id]));
+});
+test('associates item helper text with its checkbox', function () {
+  var _checkbox$getAttribut2;
+  var itemHelper = 'Dogs are friendly';
+  renderGroup({}, [_objectSpread(_objectSpread({}, defaultItems[0]), {}, {
+    helperText: itemHelper
+  })]);
+  var checkbox = _testWrapper.screen.getByRole('checkbox', {
+    name: values[0]
+  });
+  var helper = _testWrapper.screen.getByText(itemHelper);
+  expect((_checkbox$getAttribut2 = checkbox.getAttribute('aria-describedby')) === null || _checkbox$getAttribut2 === void 0 ? void 0 : _checkbox$getAttribut2.split(' ')).toContain(helper.id);
+});
+test('uses native validity for an empty required group and selected checkbox', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+  var form, checkboxes, initialFormValidity;
+  return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+    while (1) switch (_context7.prev = _context7.next) {
+      case 0:
+        (0, _testWrapper.render)((0, _react2.jsx)("form", {
+          "aria-label": "Pet form"
+        }, (0, _react2.jsx)(_.CheckboxFieldGroup, {
+          label: groupLabel,
+          isRequired: true,
+          validationBehavior: "native"
+        }, (0, _map["default"])(defaultItems).call(defaultItems, function (_ref9) {
+          var value = _ref9.value,
+            label = _ref9.label;
+          return (0, _react2.jsx)(_.CheckboxFieldGroupItem, {
+            key: value,
+            value: value,
+            label: label
+          });
+        }))));
+        form = _testWrapper.screen.getByRole('form', {
+          name: 'Pet form'
+        });
+        checkboxes = _testWrapper.screen.getAllByRole('checkbox'); // checkValidity dispatches native invalid events that update React Aria validation state.
+        initialFormValidity = false;
+        (0, _testWrapper.act)(function () {
+          initialFormValidity = form.checkValidity();
+        });
+        expect(initialFormValidity).toBe(false);
+        expect(checkboxes[0].validity.valid).toBe(false);
+
+        /* eslint-disable-next-line testing-library/no-unnecessary-act */
+        (0, _testWrapper.act)(function () {
+          _testWrapper.fireEvent.click(checkboxes[0]);
+        });
+        expect(checkboxes[0]).toBeChecked();
+        // React Aria applies native required to each item; only the selected input is valid.
+        expect(checkboxes[0].validity.valid).toBe(true);
+      case 10:
+      case "end":
+        return _context7.stop();
+    }
+  }, _callee7);
+})));
+test('supports horizontal and vertical layout classes and long labels', function () {
+  var _renderGroup4 = renderGroup({
+      orientation: 'vertical'
+    }),
+    container = _renderGroup4.container;
+  var verticalGroup = (0, _testWrapper.within)(container).getByRole('group', {
+    name: groupLabel
+  });
+  var verticalItems = verticalGroup.children[1];
+  expect(verticalGroup).not.toHaveClass('is-horizontal');
+  expect(verticalItems).not.toHaveClass('is-horizontal');
+  expect(verticalItems).toHaveStyleRule('flex-direction', 'column');
+  expect(verticalItems).toHaveStyleRule('gap', '5px');
+  var _render = (0, _testWrapper.render)((0, _react2.jsx)(_index.Box, {
+      "data-testid": "constrained-group-container",
+      sx: {
+        width: '100%',
+        maxWidth: '240px',
+        overflowX: 'hidden'
+      }
+    }, (0, _react2.jsx)(_.CheckboxFieldGroup, {
+      label: groupLabel,
+      orientation: "horizontal"
+    }, (0, _react2.jsx)(_.CheckboxFieldGroupItem, {
+      value: values[0],
+      label: longLabel
+    }), (0, _react2.jsx)(_.CheckboxFieldGroupItem, {
+      value: values[1],
+      label: values[1]
+    })))),
+    horizontalContainer = _render.container;
+  var horizontalGroup = (0, _testWrapper.within)(horizontalContainer).getByRole('group', {
+    name: groupLabel
+  });
+  var constrainedContainer = horizontalGroup.parentElement;
+  var horizontalItems = horizontalGroup.children[1];
+  var longLabelElement = (0, _testWrapper.within)(horizontalGroup).getByText(longLabel);
+  expect(constrainedContainer).toHaveStyleRule('width', '100%');
+  expect(constrainedContainer).toHaveStyleRule('max-width', '240px');
+  expect(constrainedContainer).toHaveStyleRule('overflow-x', 'hidden');
+  expect(horizontalGroup).toHaveClass('is-horizontal');
+  expect(horizontalGroup).toHaveStyleRule('width', '100%');
+  expect(horizontalItems).toBeInTheDocument();
+  expect(horizontalItems).toHaveClass('is-horizontal');
+  expect(horizontalItems).toHaveStyleRule('width', '100%');
+  expect(horizontalItems).toHaveStyleRule('flex-wrap', 'wrap', {
+    target: '.is-horizontal'
+  });
+  expect(longLabelElement).toHaveStyleRule('max-width', '100%');
+  expect(longLabelElement).toHaveStyleRule('flex-wrap', 'wrap');
+  expect(horizontalItems.scrollWidth).toBeLessThanOrEqual(horizontalItems.clientWidth);
+});
+test('supports keyboard Space toggling through the real checkbox input', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+  var checkbox;
+  return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+    while (1) switch (_context8.prev = _context8.next) {
+      case 0:
+        renderGroup();
+        checkbox = _testWrapper.screen.getAllByRole('checkbox')[0];
+        _context8.next = 4;
+        return _userEvent["default"].tab();
+      case 4:
+        expect(checkbox).toHaveFocus();
+        _context8.next = 7;
+        return _userEvent["default"].type(checkbox, '{space}');
+      case 7:
+        expect(checkbox).toBeChecked();
+      case 8:
+      case "end":
+        return _context8.stop();
+    }
+  }, _callee8);
+})));
+test('renders group and item contents inside the expected group subtree', function () {
+  var _renderGroup5 = renderGroup(),
+    container = _renderGroup5.container;
+  var group = (0, _testWrapper.within)(container).getByRole('group', {
+    name: groupLabel
+  });
+  expect((0, _testWrapper.within)(group).getAllByRole('checkbox')).toHaveLength(defaultItems.length);
+});

package/lib/cjs/components/CheckboxFieldGroup/CheckboxFieldGroupItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CheckboxFieldGroupItemProps } from '../../types/checkboxFieldGroup';
+declare const CheckboxFieldGroupItem: React.ForwardRefExoticComponent<CheckboxFieldGroupItemProps & React.RefAttributes<HTMLInputElement>>;
+export default CheckboxFieldGroupItem;

package/lib/cjs/components/CheckboxFieldGroup/CheckboxFieldGroupItem.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _uuid = require("uuid");
+var _ = require("../..");
+var _CheckboxFieldGroupContext = require("../../context/CheckboxFieldGroupContext");
+var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _react2 = require("@emotion/react");
+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 = _filterInstanceProperty2(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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var displayName = 'CheckboxFieldGroupItem';
+var CheckboxFieldGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context;
+  var checkBoxProps = props.checkBoxProps,
+    _props$controlProps = props.controlProps,
+    controlProps = _props$controlProps === void 0 ? {} : _props$controlProps,
+    hasAutoFocus = props.hasAutoFocus,
+    helperText = props.helperText,
+    isIndeterminate = props.isIndeterminate,
+    label = props.label,
+    _props$status = props.status,
+    status = _props$status === void 0 ? _statuses["default"].DEFAULT : _props$status;
+  var state = (0, _react.useContext)(_CheckboxFieldGroupContext.CheckboxFieldGroupContext);
+  if (!state) {
+    throw new Error("".concat(displayName, " must be rendered inside CheckboxFieldGroup"));
+  }
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  var checkboxRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var helperTextId = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
+  var previousIndeterminate = (0, _react.useRef)(isIndeterminate);
+  var checkboxGroupItemProps = _objectSpread(_objectSpread({}, props), {}, {
+    children: label,
+    autoFocus: hasAutoFocus || controlProps.hasAutoFocus,
+    isIndeterminate: isIndeterminate,
+    // The hook combines this item-level value with the group's disabled/read-only state.
+    isDisabled: props.isDisabled
+  }, controlProps);
+  var _useCheckboxGroupItem = (0, _reactAria.useCheckboxGroupItem)(checkboxGroupItemProps, state, checkboxRef),
+    checkboxLabelProps = _useCheckboxGroupItem.labelProps,
+    inputProps = _useCheckboxGroupItem.inputProps;
+  var itemIsDisabled = !!props.isDisabled || state.isDisabled;
+  var itemIsReadOnly = !!props.isReadOnly || state.isReadOnly;
+  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, props), {}, {
+      // React Aria combines item and group state in the hook result. Pass those
+      // effective values to useField as well so its status classes and visual
+      // control/label state match the native input attributes.
+      isDisabled: itemIsDisabled,
+      isReadOnly: itemIsReadOnly,
+      controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps),
+      statusClasses: {
+        isDisabled: itemIsDisabled,
+        isReadOnly: itemIsReadOnly,
+        isIndeterminate: isIndeterminate,
+        isChecked: inputProps.checked
+      }
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldLabelProps = _useField.fieldLabelProps;
+  (0, _react.useEffect)(function () {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = !!isIndeterminate;
+      // Retain focus when the visual state changes and the browser has moved focus to body.
+      if (!isIndeterminate && previousIndeterminate.current && document.activeElement === document.body) {
+        checkboxRef.current.focus();
+      }
+    }
+    previousIndeterminate.current = isIndeterminate;
+  }, [checkboxRef, isIndeterminate]);
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.checkboxFieldGroup.item"
+  }, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+    variant: "forms.label.checkboxFieldGroupItem"
+  }, fieldLabelProps, checkboxLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
+    ref: checkboxRef
+  }, (0, _reactAria.mergeProps)(fieldControlInputProps, inputProps, checkBoxProps || {}), {
+    "aria-describedby": (0, _filter["default"])(_context = [inputProps['aria-describedby'], helperText ? helperTextId : undefined]).call(_context, Boolean).join(' ') || undefined,
+    "aria-checked": isIndeterminate ? 'mixed' : inputProps.checked,
+    isIndeterminate: isIndeterminate
+  })), label)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+    status: status,
+    id: helperTextId
+  }, helperText));
+});
+CheckboxFieldGroupItem.displayName = displayName;
+var _default = exports["default"] = CheckboxFieldGroupItem;

package/lib/cjs/components/CheckboxFieldGroup/checkboxFieldGroupAttributes.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxFieldGroupArgTypes: any;
+export declare const checkboxFieldGroupItemArgTypes: any;