@pingux/astro 1.33.0 → 1.33.1-alpha.1

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

@@ -20,7 +20,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _themeUi = require("theme-ui");
+var _CheckboxBase = _interopRequireDefault(require("./CheckboxBase"));
 
 var _react2 = require("@emotion/react");
 
@@ -35,12 +35,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * **Note: Requires a label. It's recommended to use `CheckboxField` for a complete solution.**
  */
 var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _react2.jsx)(_themeUi.Checkbox, (0, _extends2["default"])({
-    ref: ref,
-    __css: {
-      top: 0,
-      left: 0
-    }
+  return (0, _react2.jsx)(_CheckboxBase["default"], (0, _extends2["default"])({
+    ref: ref
   }, props));
 });
 Checkbox.displayName = 'Checkbox';

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

@@ -32,5 +32,7 @@ test('default checkbox', function () {
   var input = _react2.screen.getByRole('checkbox');
 
   expect(input).toBeInstanceOf(HTMLInputElement);
-  expect(input).toBeInTheDocument();
+  expect(input).toBeInTheDocument(); // Should be visually hidden
+
+  expect(input).not.toBeVisible();
 });

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _themeUi = require("theme-ui");
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Checkbox component from Theme UI, renders a visually hidden input + svg icons for the
+ * checked and unchecked states.
+ */
+var DefaultCheckbox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_themeUi.Checkbox, (0, _extends2["default"])({
+    ref: ref,
+    __css: {
+      top: 0,
+      left: 0
+    }
+  }, props));
+});
+
+var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
+  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), (0, _react2.jsx)("rect", {
+    x: "3.5",
+    y: "3.5",
+    width: "17",
+    height: "17",
+    rx: "1.5",
+    fill: "#4462ED",
+    stroke: "#4462ED"
+  }), (0, _react2.jsx)("rect", {
+    x: "6.5",
+    y: "11",
+    width: "11",
+    height: "2",
+    fill: "white"
+  }));
+};
+/**
+ * Renders a visually hidden default checkbox since the Theme UI checkbox does not support
+ * indeterminism. This allows us to have the necessary ARIA attributes and visual presentation.
+ */
+
+
+var IndeterminateCheckbox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  /* eslint-disable no-param-reassign */
+  if (ref !== null && ref !== void 0 && ref.current) ref.current.indeterminate = true;
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(DefaultCheckbox, (0, _extends2["default"])({
+    ref: ref
+  }, props))), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: IndeterminateCheckboxIcon,
+    mr: 2
+  }, props)));
+});
+var CheckboxBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  /* eslint-disable react/prop-types */
+  return props.isIndeterminate ? (0, _react2.jsx)(IndeterminateCheckbox, (0, _extends2["default"])({
+    ref: ref
+  }, props)) : (0, _react2.jsx)(DefaultCheckbox, (0, _extends2["default"])({
+    ref: ref
+  }, props));
+});
+var _default = CheckboxBase;
+exports["default"] = _default;

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

@@ -73,6 +73,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hasAutoFocus = props.hasAutoFocus,
       helperText = props.helperText,
       isDefaultSelected = props.isDefaultSelected,
+      isIndeterminate = props.isIndeterminate,
       status = props.status;
 
   var checkboxProps = _objectSpread(_objectSpread({
@@ -89,11 +90,21 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return checkboxRef.current;
   });
+  (0, _react.useEffect)(function () {
+    if (checkboxRef.current && isIndeterminate) {
+      checkboxRef.current.indeterminate = true;
+    } else if (checkboxRef.current && !isIndeterminate) {
+      checkboxRef.current.indeterminate = false;
+    }
+  }, [isIndeterminate]);
 
   var _useCheckbox = (0, _checkbox.useCheckbox)(checkboxProps, state, checkboxRef),
       inputProps = _useCheckbox.inputProps;
 
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, props), {}, {
+    statusClasses: {
+      isIndeterminate: isIndeterminate
+    },
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
@@ -131,8 +142,8 @@ CheckboxField.propTypes = _objectSpread({
   isDisabled: _propTypes["default"].bool,
 
   /**
-   * Indeterminism is presentational only. The indeterminate visual representation remains
-   * regardless of user interaction.
+   * Indeterminism is presentational only. The indeterminate visual representation remains until
+   * this prop is set to false regardless of user interaction.
   */
   isIndeterminate: _propTypes["default"].bool,
 

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

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
@@ -22,13 +26,19 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Required = exports.HelperText = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.Required = exports.Indeterminate = exports.HelperText = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
+
+var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
@@ -40,8 +50,14 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
+var _Box = _interopRequireDefault(require("../Box"));
+
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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) { (0, _defineProperty2["default"])(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; }
@@ -69,7 +85,7 @@ var _default = {
     status: {
       control: {
         type: 'select',
-        options: _statuses["default"]
+        options: (0, _values["default"])(_statuses["default"])
       },
       defaultValue: _statuses["default"].DEFAULT
     },
@@ -156,4 +172,98 @@ var HelperText = function HelperText() {
   });
 };
 
-exports.HelperText = HelperText;
+exports.HelperText = HelperText;
+
+var Indeterminate = function Indeterminate() {
+  // Whether the parent checkbox is indeterminate (default is true for our example)
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isIndeterminate = _useState2[0],
+      setIsIndeterminate = _useState2[1]; // Whether the parent checkbox should be checked, this is set independently from indeterminism
+
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isCompleted = _useState4[0],
+      setIsCompleted = _useState4[1]; // The state of the sub-checkboxes
+
+
+  var _useState5 = (0, _react.useState)([{
+    label: 'Apple Chunks',
+    isSelected: true
+  }, {
+    label: 'Blueberries',
+    isSelected: false
+  }, {
+    label: 'Grapes',
+    isSelected: false
+  }, {
+    label: 'Strawberry Slices',
+    isSelected: true
+  }]),
+      _useState6 = (0, _slicedToArray2["default"])(_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 = (0, _map["default"])(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);
+  };
+
+  (0, _react.useEffect)(function () {
+    // Determine if all sub-checkboxes are selected / unselected or if there is a mix
+    // and update the parent checkbox
+    if ((0, _every["default"])(subCheckboxes).call(subCheckboxes, function (item) {
+      return item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(true);
+    } else if ((0, _every["default"])(subCheckboxes).call(subCheckboxes, function (item) {
+      return !item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(false);
+    } else {
+      setIsIndeterminate(true);
+      setIsCompleted(false);
+    }
+  }, [isIndeterminate, subCheckboxes]);
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CheckboxField["default"], {
+    label: "Fruit Salad Recipe",
+    isIndeterminate: isIndeterminate,
+    isSelected: isCompleted,
+    onChange: handleParentCheckboxChange
+  }), (0, _react2.jsx)(_Box["default"], {
+    ml: "lg"
+  }, (0, _map["default"])(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+    return (0, _react2.jsx)(_CheckboxField["default"], {
+      key: checkbox.label,
+      label: checkbox.label,
+      isSelected: checkbox.isSelected,
+      onChange: function onChange(isSelected) {
+        return handleSubCheckboxChange(isSelected, index);
+      }
+    });
+  })));
+};
+
+exports.Indeterminate = Indeterminate;
+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/cjs/components/CheckboxField/CheckboxField.test.js

@@ -23,7 +23,12 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_CheckboxField["default"], (0, _extends2["default"])({}, defaultProps, props)));
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react2.jsx)(_CheckboxField["default"], (0, _extends2["default"])({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -113,4 +118,37 @@ test('read only checkbox', function () {
   var input = _testWrapper.screen.getByRole('checkbox');
 
   expect(input).toHaveAttribute('readonly');
+});
+test('indeterminate checkbox', function () {
+  var _getComponent = getComponent({
+    isIndeterminate: true
+  }),
+      rerender = _getComponent.rerender;
+
+  var input = _testWrapper.screen.getByRole('checkbox');
+
+  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(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 = _testWrapper.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["default"].click(input);
+
+  expect(input).not.toBeChecked();
 });

package/lib/cjs/components/Modal/Modal.js

@@ -126,7 +126,12 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useDialog = (0, _dialog.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 = (0, _hooks.useStatusClasses)(className, {
     isDarkMode: others.variant === 'modal.dark'

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

@@ -18,6 +18,13 @@ var _react2 = require("@emotion/react");
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, props)));
+};
+
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, props, (0, _react2.jsx)(_index.CheckboxField, {
+    "aria-label": "checkbox"
+  }))));
 }; // **********
 // Unit tests
 // **********
@@ -219,4 +226,21 @@ test('should auto focus the first tabbable element if "hasAutoFocus" is true', f
   var button = _testWrapper.screen.queryByRole('button');
 
   expect(button).toHaveFocus();
+});
+test('checkbox should not have focus outline on click', function () {
+  getComponentWithCheckbox({
+    isOpen: true
+  });
+
+  var checkbox = _testWrapper.screen.getByRole('checkbox');
+
+  _userEvent["default"].click(checkbox);
+
+  expect(checkbox).toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
+
+  _userEvent["default"].click(checkbox);
+
+  expect(checkbox).not.toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
 });

package/lib/cjs/hooks/useField/useField.js

@@ -52,7 +52,7 @@ var _hooks = require("../../hooks");
 
 var _constants = require("../../components/Label/constants");
 
-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; }
 
@@ -85,6 +85,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,
@@ -210,6 +211,7 @@ var useField = function useField() {
     disabled: isDisabled,
     id: id,
     isFocused: hasFocusWithin,
+    isIndeterminate: isIndeterminate,
     maxLength: maxLength,
     name: name,
     onChange: fieldOnChange,

package/lib/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
-import { Checkbox as ThemeUICheckbox } from 'theme-ui';
+import CheckboxBase from './CheckboxBase';
 /**
  * Basic checkbox input.
  * Built on top of the [Checkbox from Theme-UI](https://theme-ui.com/components/checkbox/).
@@ -10,12 +10,8 @@ import { Checkbox as ThemeUICheckbox } from 'theme-ui';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
-  return ___EmotionJSX(ThemeUICheckbox, _extends({
-    ref: ref,
-    __css: {
-      top: 0,
-      left: 0
-    }
+  return ___EmotionJSX(CheckboxBase, _extends({
+    ref: ref
   }, props));
 });
 Checkbox.displayName = 'Checkbox';

package/lib/components/Checkbox/Checkbox.test.js

@@ -22,5 +22,7 @@ test('default checkbox', function () {
   getComponent();
   var input = screen.getByRole('checkbox');
   expect(input).toBeInstanceOf(HTMLInputElement);
-  expect(input).toBeInTheDocument();
+  expect(input).toBeInTheDocument(); // Should be visually hidden
+
+  expect(input).not.toBeVisible();
 });

package/lib/components/Checkbox/CheckboxBase.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import { Checkbox as ThemeUICheckbox } from 'theme-ui';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import Box from '../Box';
+/**
+ * Checkbox component from Theme UI, renders a visually hidden input + svg icons for the
+ * checked and unchecked states.
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DefaultCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(ThemeUICheckbox, _extends({
+    ref: ref,
+    __css: {
+      top: 0,
+      left: 0
+    }
+  }, props));
+});
+
+var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
+  return ___EmotionJSX("svg", _extends({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("rect", {
+    x: "3.5",
+    y: "3.5",
+    width: "17",
+    height: "17",
+    rx: "1.5",
+    fill: "#4462ED",
+    stroke: "#4462ED"
+  }), ___EmotionJSX("rect", {
+    x: "6.5",
+    y: "11",
+    width: "11",
+    height: "2",
+    fill: "white"
+  }));
+};
+/**
+ * Renders a visually hidden default checkbox since the Theme UI checkbox does not support
+ * indeterminism. This allows us to have the necessary ARIA attributes and visual presentation.
+ */
+
+
+var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  /* eslint-disable no-param-reassign */
+  if (ref !== null && ref !== void 0 && ref.current) ref.current.indeterminate = true;
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(DefaultCheckbox, _extends({
+    ref: ref
+  }, props))), ___EmotionJSX(Box, _extends({
+    as: IndeterminateCheckboxIcon,
+    mr: 2
+  }, props)));
+});
+var CheckboxBase = /*#__PURE__*/forwardRef(function (props, ref) {
+  /* eslint-disable react/prop-types */
+  return props.isIndeterminate ? ___EmotionJSX(IndeterminateCheckbox, _extends({
+    ref: ref
+  }, props)) : ___EmotionJSX(DefaultCheckbox, _extends({
+    ref: ref
+  }, props));
+});
+export default CheckboxBase;

package/lib/components/CheckboxField/CheckboxField.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { useCheckbox } from '@react-aria/checkbox';
 import { useToggleState } from '@react-stately/toggle';
 import PropTypes from 'prop-types';
@@ -37,6 +37,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
       hasAutoFocus = props.hasAutoFocus,
       helperText = props.helperText,
       isDefaultSelected = props.isDefaultSelected,
+      isIndeterminate = props.isIndeterminate,
       status = props.status;
 
   var checkboxProps = _objectSpread(_objectSpread({
@@ -53,11 +54,21 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return checkboxRef.current;
   });
+  useEffect(function () {
+    if (checkboxRef.current && isIndeterminate) {
+      checkboxRef.current.indeterminate = true;
+    } else if (checkboxRef.current && !isIndeterminate) {
+      checkboxRef.current.indeterminate = false;
+    }
+  }, [isIndeterminate]);
 
   var _useCheckbox = useCheckbox(checkboxProps, state, checkboxRef),
       inputProps = _useCheckbox.inputProps;
 
   var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+    statusClasses: {
+      isIndeterminate: isIndeterminate
+    },
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
@@ -95,8 +106,8 @@ CheckboxField.propTypes = _objectSpread({
   isDisabled: PropTypes.bool,
 
   /**
-   * Indeterminism is presentational only. The indeterminate visual representation remains
-   * regardless of user interaction.
+   * Indeterminism is presentational only. The indeterminate visual representation remains until
+   * this prop is set to false regardless of user interaction.
   */
   isIndeterminate: PropTypes.bool,