@pingux/astro 1.33.0 → 1.33.1-alpha.1

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -6,19 +6,23 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/every";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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 from 'react';
+import React, { useEffect, useState } from 'react';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import CheckboxField from './CheckboxField';
 import Link from '../Link';
 import Text from '../Text';
 import statuses from '../../utils/devUtils/constants/statuses';
+import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/CheckboxField',
@@ -43,7 +47,7 @@ export default {
     status: {
       control: {
         type: 'select',
-        options: statuses
+        options: _Object$values(statuses)
       },
       defaultValue: statuses.DEFAULT
     },
@@ -114,4 +118,97 @@ export var HelperText = function HelperText() {
     helperText: "Here is some helpful text...",
     label: "Click me"
   });
+};
+export var Indeterminate = function Indeterminate() {
+  // Whether the parent checkbox is indeterminate (default is true for our example)
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIndeterminate = _useState2[0],
+      setIsIndeterminate = _useState2[1]; // Whether the parent checkbox should be checked, this is set independently from indeterminism
+
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isCompleted = _useState4[0],
+      setIsCompleted = _useState4[1]; // The state of the sub-checkboxes
+
+
+  var _useState5 = useState([{
+    label: 'Apple Chunks',
+    isSelected: true
+  }, {
+    label: 'Blueberries',
+    isSelected: false
+  }, {
+    label: 'Grapes',
+    isSelected: false
+  }, {
+    label: 'Strawberry Slices',
+    isSelected: true
+  }]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      subCheckboxes = _useState6[0],
+      setSubCheckboxes = _useState6[1]; // Determine which checkbox needs its state updated
+
+
+  var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {
+    var changeAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+    var newSubCheckboxes = _mapInstanceProperty(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+      if (changeAll || index === changedIndex) return _objectSpread(_objectSpread({}, checkbox), {}, {
+        isSelected: isSelected
+      });
+      return checkbox;
+    });
+
+    setSubCheckboxes(newSubCheckboxes);
+  }; // Update all sub-checkbox states when the parent checkbox is pressed
+
+
+  var handleParentCheckboxChange = function handleParentCheckboxChange(isSelected) {
+    handleSubCheckboxChange(isSelected, null, true);
+  };
+
+  useEffect(function () {
+    // Determine if all sub-checkboxes are selected / unselected or if there is a mix
+    // and update the parent checkbox
+    if (_everyInstanceProperty(subCheckboxes).call(subCheckboxes, function (item) {
+      return item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(true);
+    } else if (_everyInstanceProperty(subCheckboxes).call(subCheckboxes, function (item) {
+      return !item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(false);
+    } else {
+      setIsIndeterminate(true);
+      setIsCompleted(false);
+    }
+  }, [isIndeterminate, subCheckboxes]);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CheckboxField, {
+    label: "Fruit Salad Recipe",
+    isIndeterminate: isIndeterminate,
+    isSelected: isCompleted,
+    onChange: handleParentCheckboxChange
+  }), ___EmotionJSX(Box, {
+    ml: "lg"
+  }, _mapInstanceProperty(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+    return ___EmotionJSX(CheckboxField, {
+      key: checkbox.label,
+      label: checkbox.label,
+      isSelected: checkbox.isSelected,
+      onChange: function onChange(isSelected) {
+        return handleSubCheckboxChange(isSelected, index);
+      }
+    });
+  })));
+};
+Indeterminate.parameters = {
+  docs: {
+    description: {
+      story: 'When a `CheckboxField` is indeterminate, it\'s necessary to control the state in order to determine how it should function when pressed. Here is an example of how to do that.'
+    }
+  }
 };

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

@@ -12,7 +12,12 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(CheckboxField, _extends({}, defaultProps, props)));
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+
+  return renderFn(___EmotionJSX(CheckboxField, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -81,4 +86,33 @@ test('read only checkbox', function () {
   });
   var input = screen.getByRole('checkbox');
   expect(input).toHaveAttribute('readonly');
+});
+test('indeterminate checkbox', function () {
+  var _getComponent = getComponent({
+    isIndeterminate: true
+  }),
+      rerender = _getComponent.rerender;
+
+  var input = screen.getByRole('checkbox');
+  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(input);
+  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'); // Ensure it can be changed via user interaction, should be unchecked now
+
+  userEvent.click(input);
+  expect(input).not.toBeChecked();
 });

package/lib/components/Modal/Modal.js

@@ -86,7 +86,12 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useDialog = useDialog(contentProps, modalRef),
       dialogProps = _useDialog.dialogProps,
-      titleProps = _useDialog.titleProps;
+      titleProps = _useDialog.titleProps; // Prevents extra dialog focus from being called.
+
+
+  dialogProps.onMouseDown = function (e) {
+    return e.preventDefault();
+  };
 
   var _useStatusClasses = useStatusClasses(className, {
     isDarkMode: others.variant === 'modal.dark'

package/lib/components/Modal/tests/Modal.unit.test.js

@@ -2,13 +2,20 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../../utils/testUtils/testAxe';
 import { render, screen, queryByAttribute } from '../../../utils/testUtils/testWrapper';
-import { OverlayProvider, Modal } from '../../../index'; // For testing the modal alone
+import { CheckboxField, OverlayProvider, Modal } from '../../../index'; // For testing the modal alone
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, props)));
+};
+
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, props, ___EmotionJSX(CheckboxField, {
+    "aria-label": "checkbox"
+  }))));
 }; // **********
 // Unit tests
 // **********
@@ -185,4 +192,16 @@ test('should auto focus the first tabbable element if "hasAutoFocus" is true', f
   });
   var button = screen.queryByRole('button');
   expect(button).toHaveFocus();
+});
+test('checkbox should not have focus outline on click', function () {
+  getComponentWithCheckbox({
+    isOpen: true
+  });
+  var checkbox = screen.getByRole('checkbox');
+  userEvent.click(checkbox);
+  expect(checkbox).toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
+  userEvent.click(checkbox);
+  expect(checkbox).not.toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
 });

package/lib/hooks/useField/useField.js

@@ -9,7 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isReadOnly", "isRequired", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
 
 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; }
 
@@ -55,6 +55,7 @@ var useField = function useField() {
       id = props.id,
       isDefaultSelected = props.isDefaultSelected,
       isDisabled = props.isDisabled,
+      isIndeterminate = props.isIndeterminate,
       isReadOnly = props.isReadOnly,
       isRequired = props.isRequired,
       isSelected = props.isSelected,
@@ -181,6 +182,7 @@ var useField = function useField() {
     disabled: isDisabled,
     id: id,
     isFocused: hasFocusWithin,
+    isIndeterminate: isIndeterminate,
     maxLength: maxLength,
     name: name,
     onChange: fieldOnChange,

package/package.json

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