@primer/components 32.0.2-rc.859381a1 → 32.1.1-rc.b4502a34

package/lib-esm/stories/Checkbox.stories.js

@@ -0,0 +1,197 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { BaseStyles, Box, Checkbox, Text, ThemeProvider } from '..';
+import { action } from '@storybook/addon-actions';
+import { COMMON, get } from '../constants';
+export default {
+  title: 'Forms/Checkbox',
+  component: Checkbox,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
+      paddingTop: 5
+    }, Story())));
+  }],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+const StyledLabel = styled.label.withConfig({
+  displayName: "Checkboxstories__StyledLabel",
+  componentId: "sdupvr-0"
+})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], COMMON);
+const StyledSubLabel = styled(Text).withConfig({
+  displayName: "Checkboxstories__StyledSubLabel",
+  componentId: "sdupvr-1"
+})(["color:", ";font-size:13px;", ""], get('colors.fg.muted'), COMMON);
+export const Default = args => {
+  const [isChecked, setChecked] = useState(false);
+
+  const handleChange = event => {
+    setChecked(event.target.checked);
+    action('Change event triggered');
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "controlled-checkbox",
+    onChange: handleChange,
+    checked: isChecked
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "always-checked-checkbox",
+    checked: true
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "always-checked-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always checked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"true\""))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "always-unchecked-checkbox",
+    checked: false
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "always-unchecked-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always unchecked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"false\""))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: "disabled-checkbox",
+    disabled: true,
+    checked: false
+  }), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "disabled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Inactive"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "disabled=\"true\""))));
+};
+export const Uncontrolled = args => {
+  const checkboxRef = useRef(null);
+  useLayoutEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.checked = true;
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "uncontrolled-checkbox",
+    ref: checkboxRef
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "uncontrolled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Uncontrolled checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "Checked by default")));
+};
+Uncontrolled.displayName = "Uncontrolled";
+export const Indeterminate = args => {
+  const [checkboxes, setCheckboxes] = useState([false, false, false, false]);
+
+  const handleChange = (_, index) => {
+    const newCheckboxes = [...checkboxes];
+    newCheckboxes[index] = !checkboxes[index];
+    setCheckboxes(newCheckboxes);
+  };
+
+  const handleIndeterminateChange = () => {
+    if (checkboxes.every(checkbox => checkbox)) {
+      return setCheckboxes(checkboxes.map(() => false));
+    }
+
+    const newCheckboxes = checkboxes.map(() => true);
+    setCheckboxes(newCheckboxes);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: "indeterminate-checkbox",
+    checked: checkboxes.every(Boolean),
+    onChange: handleIndeterminateChange,
+    indeterminate: !checkboxes.every(Boolean)
+  }), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), checkboxes.map((field, index) => /*#__PURE__*/React.createElement(Box, {
+    key: `sub-checkbox-${index}`,
+    as: "form",
+    sx: {
+      p: 1,
+      pl: 7,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: `sub-checkbox-${index}`,
+    checked: checkboxes[index],
+    onChange: event => handleChange(event, index)
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: `sub-checkbox-${index}`
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Checkbox ", index + 1)))));
+};

package/lib-esm/utils/testing.d.ts

@@ -541,4 +541,5 @@ interface BehavesAsComponent {
 }
 export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void;
 export declare function checkExports(path: string, exports: Record<any, any>): void;
+export declare function checkStoriesForAxeViolations(name: string): void;
 export {};

package/lib-esm/utils/testing.js

@@ -3,6 +3,8 @@ import { promisify } from 'util';
 import renderer from 'react-test-renderer';
 import enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import { ThemeProvider } from '..';
 import { default as defaultTheme } from '../theme';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -219,4 +221,26 @@ export function checkExports(path, exports) {
 
     expect(mod).toSetExports(exports);
   });
+}
+expect.extend(toHaveNoViolations);
+export function checkStoriesForAxeViolations(name) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
+
+
+  const {
+    default: _meta,
+    ...Stories
+  } = stories;
+  Object.values(Stories).map(Story => {
+    if (typeof Story !== 'function') return;
+    it(`story ${Story.storyName} should have no axe violations`, async () => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Story, null));
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+      cleanup();
+    });
+  });
 }

package/package-lock.json

@@ -46091,13 +46091,118 @@
       }
     },
     "@types/jest": {
-      "version": "26.0.23",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.23.tgz",
-      "integrity": "sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==",
+      "version": "27.0.2",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.0.2.tgz",
+      "integrity": "sha512-4dRxkS/AFX0c5XW6IPMNOydLn2tEhNhJV7DnYK+0bjoJZ+QTmfucBlihX7aoEsh/ocYtkLC73UbnBXBXIxsULA==",
       "dev": true,
       "requires": {
-        "jest-diff": "^26.0.0",
-        "pretty-format": "^26.0.0"
+        "jest-diff": "^27.0.0",
+        "pretty-format": "^27.0.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "27.2.4",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.2.4.tgz",
+          "integrity": "sha512-IDO2ezTxeMvQAHxzG/ZvEyA47q0aVfzT95rGFl7bZs/Go0aIucvfDbS2rmnoEdXxlLQhcolmoG/wvL/uKx4tKA==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^16.0.0",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "16.0.4",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+          "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^2.0.1"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "27.2.4",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.2.4.tgz",
+          "integrity": "sha512-NUjw22WJHldzxyps2YjLZkUj6q1HvjqFezkB9Y2cklN8NtVZN/kZEXGZdFw4uny3oENzV5EEMESrkI0YDUH8vg==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^27.2.4",
+            "ansi-regex": "^5.0.1",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^17.0.1"
+          }
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
     "@types/jest-axe": {
@@ -50719,9 +50824,9 @@
       "dev": true
     },
     "diff-sequences": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
+      "version": "27.0.6",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.0.6.tgz",
+      "integrity": "sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==",
       "dev": true
     },
     "diffie-hellman": {
@@ -55670,17 +55775,45 @@
       }
     },
     "jest-diff": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
-      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
+      "version": "27.2.4",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.2.4.tgz",
+      "integrity": "sha512-bLAVlDSCR3gqUPGv+4nzVpEXGsHh98HjUL7Vb2hVyyuBDoQmja8eJb0imUABsuxBeUVmf47taJSAd9nDrwWKEg==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
-        "diff-sequences": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
+        "diff-sequences": "^27.0.6",
+        "jest-get-type": "^27.0.6",
+        "pretty-format": "^27.2.4"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "27.2.4",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.2.4.tgz",
+          "integrity": "sha512-IDO2ezTxeMvQAHxzG/ZvEyA47q0aVfzT95rGFl7bZs/Go0aIucvfDbS2rmnoEdXxlLQhcolmoG/wvL/uKx4tKA==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^16.0.0",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "16.0.4",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+          "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -55691,9 +55824,9 @@
           }
         },
         "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -55721,6 +55854,32 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "pretty-format": {
+          "version": "27.2.4",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.2.4.tgz",
+          "integrity": "sha512-NUjw22WJHldzxyps2YjLZkUj6q1HvjqFezkB9Y2cklN8NtVZN/kZEXGZdFw4uny3oENzV5EEMESrkI0YDUH8vg==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^27.2.4",
+            "ansi-regex": "^5.0.1",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^17.0.1"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+              "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+              "dev": true
+            }
+          }
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -56128,9 +56287,9 @@
       }
     },
     "jest-get-type": {
-      "version": "26.3.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+      "version": "27.0.6",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.0.6.tgz",
+      "integrity": "sha512-XTkK5exIeUbbveehcSR8w0bhH+c0yloW/Wpl+9vZrjzztCPWrxhHwkIFpZzCt71oRBsgxmuUfxEqOYoZI2macg==",
       "dev": true
     },
     "jest-haste-map": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "32.0.2-rc.859381a1",
+  "version": "32.1.1-rc.b4502a34",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -87,7 +87,7 @@
     "@testing-library/user-event": "13.1.9",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
-    "@types/jest": "26.0.23",
+    "@types/jest": "27.0.2",
     "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",

package/src/ActionList/Item.tsx

@@ -275,6 +275,7 @@ const BaseVisualContainer = styled.div<{variant?: ItemProps['variant']; disabled
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
 `
 
 const ColoredVisualContainer = styled(BaseVisualContainer)`
@@ -285,7 +286,6 @@ const ColoredVisualContainer = styled(BaseVisualContainer)`
 `
 
 const LeadingVisualContainer = styled(ColoredVisualContainer)`
-  flex-shrink: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -317,6 +317,7 @@ const MultiSelectIcon = styled.svg<{selected?: boolean}>`
   rect {
     fill: ${({selected}) => (selected ? get('colors.accent.fg') : get('colors.canvas.default'))};
     stroke: ${({selected}) => (selected ? get('colors.accent.fg') : get('colors.border.default'))};
+    shape-rendering: auto; // this is a workaround to override global style in github/github, see primer/react#1666
   }
   path {
     fill: ${get('colors.fg.onEmphasis')};

package/src/ActionList2/Item.tsx

@@ -91,7 +91,7 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       variant = 'default',
       disabled = false,
       selected = undefined,
-      onSelect = () => null,
+      onSelect,
       sx: sxProp = {},
       id,
       _PrivateItemWrapper,
@@ -168,6 +168,7 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
 
     const clickHandler = React.useCallback(
       event => {
+        if (typeof onSelect !== 'function') return
         if (disabled) return
         if (!event.defaultPrevented) onSelect(event)
       },
@@ -176,8 +177,8 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
 
     const keyPressHandler = React.useCallback(
       event => {
+        if (typeof onSelect !== 'function') return
         if (disabled) return
-
         if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
           onSelect(event)
         }

package/src/ActionList2/List.tsx

@@ -40,12 +40,7 @@ export const List = React.forwardRef<HTMLUListElement, ListProps>(
     }
 
     return (
-      <ListBox
-        sx={merge(styles, sxProp as SxProp)}
-        aria-multiselectable={selectionVariant === 'multiple' ? true : undefined}
-        {...props}
-        ref={forwardedRef}
-      >
+      <ListBox sx={merge(styles, sxProp as SxProp)} {...props} ref={forwardedRef}>
         <ListContext.Provider value={{variant, selectionVariant, showDividers}}>{props.children}</ListContext.Provider>
       </ListBox>
     )

package/src/ActionList2/Selection.tsx

@@ -38,7 +38,8 @@ export const Selection: React.FC<SelectionProps> = ({selected}) => {
       sx={{
         rect: {
           fill: selected ? 'accent.fg' : 'canvas.default',
-          stroke: selected ? 'accent.fg' : 'border.default'
+          stroke: selected ? 'accent.fg' : 'border.default',
+          shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
         },
         path: {
           fill: 'fg.onEmphasis',

package/src/Checkbox.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components'
+import {useProvidedRefOrCreate} from './hooks'
+import React, {InputHTMLAttributes, ReactElement, useLayoutEffect} from 'react'
+import sx, {SxProp} from './sx'
+
+export type CheckboxProps = {
+  /**
+   * Apply indeterminate visual appearance to the checkbox
+   */
+  indeterminate?: boolean
+  /**
+   * Apply inactive visual appearance to the checkbox
+   */
+  disabled?: boolean
+  /**
+   * Forward a ref to the underlying input element
+   */
+  ref?: React.RefObject<HTMLInputElement>
+  /**
+   * Indicates whether the checkbox must be checked
+   */
+  required?: boolean
+
+  /**
+   * Indicates whether the checkbox validation state
+   */
+  validationStatus?: 'error' | 'success' // TODO: hoist to Validation typings
+} & InputHTMLAttributes<HTMLInputElement> &
+  SxProp
+
+const StyledCheckbox = styled.input`
+  cursor: pointer;
+
+  ${props => props.disabled && `cursor: not-allowed;`}
+
+  ${sx}
+`
+
+/**
+ * An accessible, native checkbox component
+ */
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {checked, indeterminate, disabled, sx: sxProp, required, validationStatus, ...rest}: CheckboxProps,
+    ref
+  ): ReactElement => {
+    const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
+
+    useLayoutEffect(() => {
+      if (checkboxRef.current) {
+        checkboxRef.current.indeterminate = indeterminate || false
+      }
+    }, [indeterminate, checked, checkboxRef])
+
+    return (
+      <StyledCheckbox
+        type="checkbox"
+        disabled={disabled}
+        aria-disabled={disabled ? 'true' : 'false'}
+        ref={ref || checkboxRef}
+        checked={indeterminate ? false : checked}
+        aria-checked={indeterminate ? 'mixed' : checked ? 'true' : 'false'}
+        sx={sxProp}
+        required={required}
+        aria-required={required ? 'true' : 'false'}
+        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
+        {...rest}
+      />
+    )
+  }
+)
+
+Checkbox.displayName = 'Checkbox'
+
+export default Checkbox