@pingux/astro 2.93.0-alpha.2 → 2.93.0-alpha.4

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

@@ -40,8 +40,9 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "checkbox-icon-title"
-  }, (0, _lodash.omit)(props, 'id', 'aria-checked')), (0, _react2.jsx)("title", {
+    "aria-labelledby": "checkbox-icon-title",
+    "data-testid": "checkbox-icon-indeterminate"
+  }, (0, _lodash.omit)(props, 'id', 'aria-checked', 'data-testid')), (0, _react2.jsx)("title", {
     id: "checkbox-icon-title"
   }, "Indeterminate Checkbox Icon"), (0, _react2.jsx)("rect", {
     x: "3.5",

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

@@ -34,6 +34,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var displayName = 'CheckboxField';
 var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var label = props.label,
+    checkBoxProps = props.checkBoxProps,
     _props$controlProps = props.controlProps,
     controlProps = _props$controlProps === void 0 ? {} : _props$controlProps,
     hasAutoFocus = props.hasAutoFocus,
@@ -84,7 +85,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlInputProps)), label)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, (0, _reactAria.mergeProps)(fieldControlInputProps, checkBoxProps))), label)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     sx: {
       pt: 7

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

@@ -57,6 +57,24 @@ test('checkbox interaction', function () {
   expect(input).not.toBeChecked();
   expect(onChange).toHaveBeenNthCalledWith(2, false);
 });
+test('checkbox interaction on svg', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange,
+    checkBoxProps: {
+      'data-testid': 'checkbox-icon'
+    }
+  });
+  var input = _testWrapper.screen.getByRole('checkbox');
+  var svg = _testWrapper.screen.getByTestId('checkbox-icon');
+  expect(onChange).not.toHaveBeenCalled();
+  _userEvent["default"].click(svg);
+  expect(input).toBeChecked();
+  expect(onChange).toHaveBeenNthCalledWith(1, true);
+  _userEvent["default"].click(svg);
+  expect(input).not.toBeChecked();
+  expect(onChange).toHaveBeenNthCalledWith(2, false);
+});
 test('isSelected for controlled checkbox', function () {
   getComponent({
     isSelected: true
@@ -68,6 +86,21 @@ test('isSelected for controlled checkbox', function () {
   _userEvent["default"].click(input);
   expect(input).toBeChecked();
 });
+test('isSelected for controlled checkbox, clicking svg', function () {
+  getComponent({
+    isSelected: true,
+    checkBoxProps: {
+      'data-testid': 'checkbox-icon'
+    }
+  });
+  var input = _testWrapper.screen.getByRole('checkbox');
+  var svg = _testWrapper.screen.getByTestId('checkbox-icon');
+  expect(input).toBeChecked();
+
+  // Ensure it is controlled.
+  _userEvent["default"].click(svg);
+  expect(input).toBeChecked();
+});
 test('defaultValue for uncontrolled checkbox', function () {
   getComponent({
     isDefaultSelected: true
@@ -79,6 +112,21 @@ test('defaultValue for uncontrolled checkbox', function () {
   _userEvent["default"].click(input);
   expect(input).not.toBeChecked();
 });
+test('defaultValue for uncontrolled checkbox, clicking svg', function () {
+  getComponent({
+    isDefaultSelected: true,
+    checkBoxProps: {
+      'data-testid': 'checkbox-icon'
+    }
+  });
+  var input = _testWrapper.screen.getByRole('checkbox');
+  var svg = _testWrapper.screen.getByTestId('checkbox-icon');
+  expect(input).toBeChecked();
+
+  // Ensure it is uncontrolled.
+  _userEvent["default"].click(svg);
+  expect(input).not.toBeChecked();
+});
 test('name for checkbox', function () {
   var name = 'custom';
   getComponent({
@@ -135,4 +183,34 @@ test('indeterminate checkbox', function () {
   // Ensure it can be changed via user interaction, should be unchecked now
   _userEvent["default"].click(input);
   expect(input).not.toBeChecked();
+});
+test('indeterminate checkbox, clicking svg', function () {
+  var _getComponent2 = getComponent({
+      isIndeterminate: true,
+      checkBoxProps: {
+        'data-testid': 'checkbox-icon'
+      }
+    }),
+    rerender = _getComponent2.rerender;
+  var input = _testWrapper.screen.getByRole('checkbox');
+  var svg = _testWrapper.screen.getByTestId('checkbox-icon-indeterminate');
+  var label = _testWrapper.screen.getByText(testLabel);
+  /* eslint-disable jest-dom/prefer-checked */
+  expect(input).toHaveAttribute('aria-checked', 'mixed');
+  expect(label).toHaveClass('is-indeterminate');
+
+  // Ensure it cannot be changed via user interaction
+  _userEvent["default"].click(svg);
+  expect(input).toHaveAttribute('aria-checked', 'mixed');
+  // An indeterminite checkbox can still have the checked attribute
+  expect(input).toBeChecked();
+
+  // Ensure it works normally when toggled off again
+  getComponent({}, {
+    renderFn: rerender
+  });
+  // Reset the variable since the DOM has changed
+  input = _testWrapper.screen.getByRole('checkbox');
+  expect(input).not.toHaveAttribute('aria-checked', 'mixed');
+  expect(label).not.toHaveClass('is-indeterminate');
 });

package/lib/cjs/types/checkboxField.d.ts

@@ -6,4 +6,6 @@ export interface CheckboxFieldProps extends Omit<UseFieldProps<HTMLInputElement>
     onKeyUp?: () => void;
     /** Handler that is called when the element's selection state changes. */
     onChange?: (isSelected: boolean) => void;
+    /** props that are spread directly into the checkbox component */
+    checkBoxProps?: object;
 }

package/lib/components/Checkbox/CheckboxBase.js

@@ -29,8 +29,9 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "checkbox-icon-title"
-  }, omit(props, 'id', 'aria-checked')), ___EmotionJSX("title", {
+    "aria-labelledby": "checkbox-icon-title",
+    "data-testid": "checkbox-icon-indeterminate"
+  }, omit(props, 'id', 'aria-checked', 'data-testid')), ___EmotionJSX("title", {
     id: "checkbox-icon-title"
   }, "Indeterminate Checkbox Icon"), ___EmotionJSX("rect", {
     x: "3.5",

package/lib/components/CheckboxField/CheckboxField.js

@@ -11,7 +11,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useEffect, useMemo } from 'react';
-import { useCheckbox } from 'react-aria';
+import { mergeProps, useCheckbox } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { usePress } from '@react-aria/interactions';
 import { v4 as uuid } from 'uuid';
@@ -23,6 +23,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'CheckboxField';
 var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
+    checkBoxProps = props.checkBoxProps,
     _props$controlProps = props.controlProps,
     controlProps = _props$controlProps === void 0 ? {} : _props$controlProps,
     hasAutoFocus = props.hasAutoFocus,
@@ -73,7 +74,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlInputProps)), label)), helperText && ___EmotionJSX(FieldHelperText, {
+  }, mergeProps(fieldControlInputProps, checkBoxProps))), label)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     sx: {
       pt: 7

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

@@ -54,6 +54,24 @@ test('checkbox interaction', function () {
   expect(input).not.toBeChecked();
   expect(onChange).toHaveBeenNthCalledWith(2, false);
 });
+test('checkbox interaction on svg', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange,
+    checkBoxProps: {
+      'data-testid': 'checkbox-icon'
+    }
+  });
+  var input = screen.getByRole('checkbox');
+  var svg = screen.getByTestId('checkbox-icon');
+  expect(onChange).not.toHaveBeenCalled();
+  userEvent.click(svg);
+  expect(input).toBeChecked();
+  expect(onChange).toHaveBeenNthCalledWith(1, true);
+  userEvent.click(svg);
+  expect(input).not.toBeChecked();
+  expect(onChange).toHaveBeenNthCalledWith(2, false);
+});
 test('isSelected for controlled checkbox', function () {
   getComponent({
     isSelected: true
@@ -65,6 +83,21 @@ test('isSelected for controlled checkbox', function () {
   userEvent.click(input);
   expect(input).toBeChecked();
 });
+test('isSelected for controlled checkbox, clicking svg', function () {
+  getComponent({
+    isSelected: true,
+    checkBoxProps: {
+      'data-testid': 'checkbox-icon'
+    }
+  });
+  var input = screen.getByRole('checkbox');
+  var svg = screen.getByTestId('checkbox-icon');
+  expect(input).toBeChecked();
+
+  // Ensure it is controlled.
+  userEvent.click(svg);
+  expect(input).toBeChecked();
+});
 test('defaultValue for uncontrolled checkbox', function () {
   getComponent({
     isDefaultSelected: true
@@ -76,6 +109,21 @@ test('defaultValue for uncontrolled checkbox', function () {
   userEvent.click(input);
   expect(input).not.toBeChecked();
 });
+test('defaultValue for uncontrolled checkbox, clicking svg', function () {
+  getComponent({
+    isDefaultSelected: true,
+    checkBoxProps: {
+      'data-testid': 'checkbox-icon'
+    }
+  });
+  var input = screen.getByRole('checkbox');
+  var svg = screen.getByTestId('checkbox-icon');
+  expect(input).toBeChecked();
+
+  // Ensure it is uncontrolled.
+  userEvent.click(svg);
+  expect(input).not.toBeChecked();
+});
 test('name for checkbox', function () {
   var name = 'custom';
   getComponent({
@@ -132,4 +180,34 @@ test('indeterminate checkbox', function () {
   // Ensure it can be changed via user interaction, should be unchecked now
   userEvent.click(input);
   expect(input).not.toBeChecked();
+});
+test('indeterminate checkbox, clicking svg', function () {
+  var _getComponent2 = getComponent({
+      isIndeterminate: true,
+      checkBoxProps: {
+        'data-testid': 'checkbox-icon'
+      }
+    }),
+    rerender = _getComponent2.rerender;
+  var input = screen.getByRole('checkbox');
+  var svg = screen.getByTestId('checkbox-icon-indeterminate');
+  var label = screen.getByText(testLabel);
+  /* eslint-disable jest-dom/prefer-checked */
+  expect(input).toHaveAttribute('aria-checked', 'mixed');
+  expect(label).toHaveClass('is-indeterminate');
+
+  // Ensure it cannot be changed via user interaction
+  userEvent.click(svg);
+  expect(input).toHaveAttribute('aria-checked', 'mixed');
+  // An indeterminite checkbox can still have the checked attribute
+  expect(input).toBeChecked();
+
+  // Ensure it works normally when toggled off again
+  getComponent({}, {
+    renderFn: rerender
+  });
+  // Reset the variable since the DOM has changed
+  input = screen.getByRole('checkbox');
+  expect(input).not.toHaveAttribute('aria-checked', 'mixed');
+  expect(label).not.toHaveClass('is-indeterminate');
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.93.0-alpha.2",
+  "version": "2.93.0-alpha.4",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -17,6 +17,7 @@
     "lib"
   ],
   "scripts": {
+    "install-react-version": "cd ../../ && yarn run install-react-18 && yarn && cd packages/astro && yarn",
     "build": "rm -rf lib && yarn run build:types && yarn run build:cjs && yarn run build:esm && cp README.md ./lib && cp MIGRATION.md ./lib",
     "build-ci": "yarn build",
     "append-version": "node ../../append_current_version.js",