@primer/components 32.0.1-rc.44e3df9b → 32.1.0-rc.6f5d2b00

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/browser.esm.js +7 -1
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +7 -1
  5. package/dist/browser.umd.js.map +1 -1
  6. package/docs/content/Checkbox.md +118 -0
  7. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +2 -0
  8. package/lib/Checkbox.d.ts +29 -0
  9. package/lib/Checkbox.js +64 -0
  10. package/lib/Overlay.d.ts +5 -3
  11. package/lib/__tests__/Checkbox.test.d.ts +2 -0
  12. package/lib/__tests__/Checkbox.test.js +189 -0
  13. package/lib/__tests__/Overlay.types.test.d.ts +3 -0
  14. package/lib/__tests__/Overlay.types.test.js +38 -0
  15. package/lib/__tests__/SelectPanel.types.test.d.ts +3 -0
  16. package/lib/__tests__/SelectPanel.types.test.js +44 -0
  17. package/lib/index.d.ts +2 -0
  18. package/lib/index.js +8 -0
  19. package/lib/stories/Checkbox.stories.js +227 -0
  20. package/lib-esm/Checkbox.d.ts +29 -0
  21. package/lib-esm/Checkbox.js +44 -0
  22. package/lib-esm/Overlay.d.ts +5 -3
  23. package/lib-esm/__tests__/Checkbox.test.d.ts +2 -0
  24. package/lib-esm/__tests__/Checkbox.test.js +169 -0
  25. package/lib-esm/__tests__/Overlay.types.test.d.ts +3 -0
  26. package/lib-esm/__tests__/Overlay.types.test.js +29 -0
  27. package/lib-esm/__tests__/SelectPanel.types.test.d.ts +3 -0
  28. package/lib-esm/__tests__/SelectPanel.types.test.js +29 -0
  29. package/lib-esm/index.d.ts +2 -0
  30. package/lib-esm/index.js +1 -0
  31. package/lib-esm/stories/Checkbox.stories.js +197 -0
  32. package/package.json +1 -1
  33. package/src/Checkbox.tsx +75 -0
  34. package/src/Overlay.tsx +7 -4
  35. package/src/__tests__/Checkbox.test.tsx +155 -0
  36. package/src/__tests__/Overlay.types.test.tsx +15 -0
  37. package/src/__tests__/SelectPanel.types.test.tsx +31 -0
  38. package/src/__tests__/__snapshots__/Checkbox.test.tsx.snap +16 -0
  39. package/src/index.ts +3 -0
  40. package/src/stories/Checkbox.stories.tsx +164 -0
  41. package/stats.html +1 -1
@@ -0,0 +1,197 @@
1
+ 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); }
2
+
3
+ import React, { useLayoutEffect, useRef, useState } from 'react';
4
+ import styled from 'styled-components';
5
+ import { BaseStyles, Box, Checkbox, Text, ThemeProvider } from '..';
6
+ import { action } from '@storybook/addon-actions';
7
+ import { COMMON, get } from '../constants';
8
+ export default {
9
+ title: 'Forms/Checkbox',
10
+ component: Checkbox,
11
+ decorators: [Story => {
12
+ return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
13
+ paddingTop: 5
14
+ }, Story())));
15
+ }],
16
+ argTypes: {
17
+ sx: {
18
+ table: {
19
+ disable: true
20
+ }
21
+ },
22
+ disabled: {
23
+ name: 'Disabled',
24
+ defaultValue: false,
25
+ control: {
26
+ type: 'boolean'
27
+ }
28
+ }
29
+ }
30
+ };
31
+ const StyledLabel = styled.label.withConfig({
32
+ displayName: "Checkboxstories__StyledLabel",
33
+ componentId: "sdupvr-0"
34
+ })(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], COMMON);
35
+ const StyledSubLabel = styled(Text).withConfig({
36
+ displayName: "Checkboxstories__StyledSubLabel",
37
+ componentId: "sdupvr-1"
38
+ })(["color:", ";font-size:13px;", ""], get('colors.fg.muted'), COMMON);
39
+ export const Default = args => {
40
+ const [isChecked, setChecked] = useState(false);
41
+
42
+ const handleChange = event => {
43
+ setChecked(event.target.checked);
44
+ action('Change event triggered');
45
+ };
46
+
47
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
48
+ as: "form",
49
+ sx: {
50
+ p: 3,
51
+ display: 'flex',
52
+ alignItems: 'flex-start'
53
+ }
54
+ }, /*#__PURE__*/React.createElement(Checkbox, _extends({
55
+ id: "controlled-checkbox",
56
+ onChange: handleChange,
57
+ checked: isChecked
58
+ }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
59
+ htmlFor: "controlled-checkbox"
60
+ }, /*#__PURE__*/React.createElement(Text, {
61
+ sx: {
62
+ display: 'block'
63
+ }
64
+ }, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), /*#__PURE__*/React.createElement(Box, {
65
+ as: "form",
66
+ sx: {
67
+ p: 3,
68
+ display: 'flex',
69
+ alignItems: 'flex-start'
70
+ }
71
+ }, /*#__PURE__*/React.createElement(Checkbox, _extends({
72
+ id: "always-checked-checkbox",
73
+ checked: true
74
+ }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
75
+ htmlFor: "always-checked-checkbox"
76
+ }, /*#__PURE__*/React.createElement(Text, {
77
+ sx: {
78
+ display: 'block'
79
+ }
80
+ }, "Always checked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"true\""))), /*#__PURE__*/React.createElement(Box, {
81
+ as: "form",
82
+ sx: {
83
+ p: 3,
84
+ display: 'flex',
85
+ alignItems: 'flex-start'
86
+ }
87
+ }, /*#__PURE__*/React.createElement(Checkbox, _extends({
88
+ id: "always-unchecked-checkbox",
89
+ checked: false
90
+ }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
91
+ htmlFor: "always-unchecked-checkbox"
92
+ }, /*#__PURE__*/React.createElement(Text, {
93
+ sx: {
94
+ display: 'block'
95
+ }
96
+ }, "Always unchecked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"false\""))), /*#__PURE__*/React.createElement(Box, {
97
+ as: "form",
98
+ sx: {
99
+ p: 3,
100
+ display: 'flex',
101
+ alignItems: 'flex-start'
102
+ }
103
+ }, /*#__PURE__*/React.createElement(Checkbox, {
104
+ id: "disabled-checkbox",
105
+ disabled: true,
106
+ checked: false
107
+ }), /*#__PURE__*/React.createElement(StyledLabel, {
108
+ htmlFor: "disabled-checkbox"
109
+ }, /*#__PURE__*/React.createElement(Text, {
110
+ sx: {
111
+ display: 'block'
112
+ }
113
+ }, "Inactive"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "disabled=\"true\""))));
114
+ };
115
+ export const Uncontrolled = args => {
116
+ const checkboxRef = useRef(null);
117
+ useLayoutEffect(() => {
118
+ if (checkboxRef.current) {
119
+ checkboxRef.current.checked = true;
120
+ }
121
+ }, []);
122
+ return /*#__PURE__*/React.createElement(Box, {
123
+ as: "form",
124
+ sx: {
125
+ p: 3,
126
+ display: 'flex',
127
+ alignItems: 'flex-start'
128
+ }
129
+ }, /*#__PURE__*/React.createElement(Checkbox, _extends({
130
+ id: "uncontrolled-checkbox",
131
+ ref: checkboxRef
132
+ }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
133
+ htmlFor: "uncontrolled-checkbox"
134
+ }, /*#__PURE__*/React.createElement(Text, {
135
+ sx: {
136
+ display: 'block'
137
+ }
138
+ }, "Uncontrolled checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "Checked by default")));
139
+ };
140
+ Uncontrolled.displayName = "Uncontrolled";
141
+ export const Indeterminate = args => {
142
+ const [checkboxes, setCheckboxes] = useState([false, false, false, false]);
143
+
144
+ const handleChange = (_, index) => {
145
+ const newCheckboxes = [...checkboxes];
146
+ newCheckboxes[index] = !checkboxes[index];
147
+ setCheckboxes(newCheckboxes);
148
+ };
149
+
150
+ const handleIndeterminateChange = () => {
151
+ if (checkboxes.every(checkbox => checkbox)) {
152
+ return setCheckboxes(checkboxes.map(() => false));
153
+ }
154
+
155
+ const newCheckboxes = checkboxes.map(() => true);
156
+ setCheckboxes(newCheckboxes);
157
+ };
158
+
159
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
160
+ as: "form",
161
+ sx: {
162
+ p: 3,
163
+ display: 'flex',
164
+ alignItems: 'flex-start'
165
+ }
166
+ }, /*#__PURE__*/React.createElement(Checkbox, {
167
+ id: "indeterminate-checkbox",
168
+ checked: checkboxes.every(Boolean),
169
+ onChange: handleIndeterminateChange,
170
+ indeterminate: !checkboxes.every(Boolean)
171
+ }), /*#__PURE__*/React.createElement(StyledLabel, {
172
+ htmlFor: "controlled-checkbox"
173
+ }, /*#__PURE__*/React.createElement(Text, {
174
+ sx: {
175
+ display: 'block'
176
+ }
177
+ }, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), checkboxes.map((field, index) => /*#__PURE__*/React.createElement(Box, {
178
+ key: `sub-checkbox-${index}`,
179
+ as: "form",
180
+ sx: {
181
+ p: 1,
182
+ pl: 7,
183
+ display: 'flex',
184
+ alignItems: 'flex-start'
185
+ }
186
+ }, /*#__PURE__*/React.createElement(Checkbox, _extends({
187
+ id: `sub-checkbox-${index}`,
188
+ checked: checkboxes[index],
189
+ onChange: event => handleChange(event, index)
190
+ }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
191
+ htmlFor: `sub-checkbox-${index}`
192
+ }, /*#__PURE__*/React.createElement(Text, {
193
+ sx: {
194
+ display: 'block'
195
+ }
196
+ }, "Checkbox ", index + 1)))));
197
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "32.0.1-rc.44e3df9b",
3
+ "version": "32.1.0-rc.6f5d2b00",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -0,0 +1,75 @@
1
+ import styled from 'styled-components'
2
+ import {useProvidedRefOrCreate} from './hooks'
3
+ import React, {InputHTMLAttributes, ReactElement, useLayoutEffect} from 'react'
4
+ import sx, {SxProp} from './sx'
5
+
6
+ export type CheckboxProps = {
7
+ /**
8
+ * Apply indeterminate visual appearance to the checkbox
9
+ */
10
+ indeterminate?: boolean
11
+ /**
12
+ * Apply inactive visual appearance to the checkbox
13
+ */
14
+ disabled?: boolean
15
+ /**
16
+ * Forward a ref to the underlying input element
17
+ */
18
+ ref?: React.RefObject<HTMLInputElement>
19
+ /**
20
+ * Indicates whether the checkbox must be checked
21
+ */
22
+ required?: boolean
23
+
24
+ /**
25
+ * Indicates whether the checkbox validation state
26
+ */
27
+ validationStatus?: 'error' | 'success' // TODO: hoist to Validation typings
28
+ } & InputHTMLAttributes<HTMLInputElement> &
29
+ SxProp
30
+
31
+ const StyledCheckbox = styled.input`
32
+ cursor: pointer;
33
+
34
+ ${props => props.disabled && `cursor: not-allowed;`}
35
+
36
+ ${sx}
37
+ `
38
+
39
+ /**
40
+ * An accessible, native checkbox component
41
+ */
42
+ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
43
+ (
44
+ {checked, indeterminate, disabled, sx: sxProp, required, validationStatus, ...rest}: CheckboxProps,
45
+ ref
46
+ ): ReactElement => {
47
+ const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
48
+
49
+ useLayoutEffect(() => {
50
+ if (checkboxRef.current) {
51
+ checkboxRef.current.indeterminate = indeterminate || false
52
+ }
53
+ }, [indeterminate, checked, checkboxRef])
54
+
55
+ return (
56
+ <StyledCheckbox
57
+ type="checkbox"
58
+ disabled={disabled}
59
+ aria-disabled={disabled ? 'true' : 'false'}
60
+ ref={ref || checkboxRef}
61
+ checked={indeterminate ? false : checked}
62
+ aria-checked={indeterminate ? 'mixed' : checked ? 'true' : 'false'}
63
+ sx={sxProp}
64
+ required={required}
65
+ aria-required={required ? 'true' : 'false'}
66
+ aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
67
+ {...rest}
68
+ />
69
+ )
70
+ }
71
+ )
72
+
73
+ Checkbox.displayName = 'Checkbox'
74
+
75
+ export default Checkbox
package/src/Overlay.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import styled from 'styled-components'
2
- import React, {ReactElement, useEffect, useRef} from 'react'
2
+ import React, {ComponentPropsWithRef, ReactElement, useEffect, useRef} from 'react'
3
3
  import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
4
4
  import {get} from './constants'
5
5
  import {AriaRole, Merge} from './utils/types'
@@ -9,6 +9,7 @@ import sx, {SxProp} from './sx'
9
9
  import {useCombinedRefs} from './hooks/useCombinedRefs'
10
10
  import {AnchorSide} from './behaviors/anchoredPosition'
11
11
  import {useTheme} from './ThemeProvider'
12
+ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
12
13
 
13
14
  type StyledOverlayProps = {
14
15
  width?: keyof typeof widthMap
@@ -95,7 +96,7 @@ type BaseOverlayProps = {
95
96
  children?: React.ReactNode
96
97
  }
97
98
 
98
- export type OverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
99
+ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
99
100
 
100
101
  /**
101
102
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
@@ -114,7 +115,7 @@ export type OverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
114
115
  * @param left Optional. Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
115
116
  * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
116
117
  */
117
- const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
118
+ const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
118
119
  (
119
120
  {
120
121
  onClickOutside,
@@ -190,7 +191,9 @@ const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
190
191
  </Portal>
191
192
  )
192
193
  }
193
- )
194
+ ) as PolymorphicForwardRefComponent<'div', OwnOverlayProps>
195
+
196
+ export type OverlayProps = ComponentPropsWithRef<typeof Overlay>
194
197
 
195
198
  Overlay.defaultProps = {
196
199
  height: 'auto',
@@ -0,0 +1,155 @@
1
+ import React from 'react'
2
+ import {Checkbox} from '..'
3
+ import {behavesAsComponent, checkExports} from '../utils/testing'
4
+ import {render, cleanup} from '@testing-library/react'
5
+ import {toHaveNoViolations} from 'jest-axe'
6
+ import 'babel-polyfill'
7
+ import '@testing-library/jest-dom'
8
+ import userEvent from '@testing-library/user-event'
9
+
10
+ expect.extend(toHaveNoViolations)
11
+
12
+ describe('Checkbox', () => {
13
+ beforeEach(() => {
14
+ jest.resetAllMocks()
15
+ cleanup()
16
+ })
17
+ behavesAsComponent({Component: Checkbox})
18
+
19
+ checkExports('Checkbox', {
20
+ default: Checkbox
21
+ })
22
+
23
+ it('renders a valid checkbox input', () => {
24
+ const {getByRole} = render(<Checkbox />)
25
+
26
+ const checkbox = getByRole('checkbox')
27
+
28
+ expect(checkbox).toBeDefined()
29
+ })
30
+
31
+ it('renders an unchecked checkbox by default', () => {
32
+ const {getByRole} = render(<Checkbox />)
33
+
34
+ const checkbox = getByRole('checkbox') as HTMLInputElement
35
+
36
+ expect(checkbox.checked).toEqual(false)
37
+ })
38
+
39
+ it('renders an active checkbox when checked attribute is passed', () => {
40
+ const handleChange = jest.fn()
41
+ const {getByRole} = render(<Checkbox checked onChange={handleChange} />)
42
+
43
+ const checkbox = getByRole('checkbox') as HTMLInputElement
44
+
45
+ expect(checkbox.checked).toEqual(true)
46
+ })
47
+
48
+ it('accepts a change handler that can alter the checkbox state', () => {
49
+ const handleChange = jest.fn()
50
+ const {getByRole} = render(<Checkbox onChange={handleChange} />)
51
+
52
+ const checkbox = getByRole('checkbox') as HTMLInputElement
53
+
54
+ expect(checkbox.checked).toEqual(false)
55
+
56
+ userEvent.click(checkbox)
57
+ expect(handleChange).toHaveBeenCalled()
58
+ expect(checkbox.checked).toEqual(true)
59
+
60
+ userEvent.click(checkbox)
61
+ expect(handleChange).toHaveBeenCalled()
62
+ expect(checkbox.checked).toEqual(false)
63
+ })
64
+
65
+ it('renders an indeterminate prop correctly', () => {
66
+ const handleChange = jest.fn()
67
+ const {getByRole} = render(<Checkbox indeterminate checked onChange={handleChange} />)
68
+
69
+ const checkbox = getByRole('checkbox') as HTMLInputElement
70
+
71
+ expect(checkbox.indeterminate).toEqual(true)
72
+ expect(checkbox.checked).toEqual(false)
73
+ })
74
+
75
+ it('renders an inactive checkbox state correctly', () => {
76
+ const handleChange = jest.fn()
77
+ const {getByRole, rerender} = render(<Checkbox disabled onChange={handleChange} />)
78
+
79
+ const checkbox = getByRole('checkbox') as HTMLInputElement
80
+
81
+ expect(checkbox.disabled).toEqual(true)
82
+ expect(checkbox.checked).toEqual(false)
83
+ expect(checkbox).toHaveAttribute('aria-disabled', 'true')
84
+
85
+ userEvent.click(checkbox)
86
+
87
+ expect(checkbox.disabled).toEqual(true)
88
+ expect(checkbox.checked).toEqual(false)
89
+ expect(checkbox).toHaveAttribute('aria-disabled', 'true')
90
+
91
+ // remove disabled attribute and retest
92
+ rerender(<Checkbox onChange={handleChange} />)
93
+
94
+ expect(checkbox).toHaveAttribute('aria-disabled', 'false')
95
+ })
96
+
97
+ it('renders an uncontrolled component correctly', () => {
98
+ const {getByRole} = render(<Checkbox defaultChecked />)
99
+
100
+ const checkbox = getByRole('checkbox') as HTMLInputElement
101
+
102
+ expect(checkbox.checked).toEqual(true)
103
+
104
+ userEvent.click(checkbox)
105
+
106
+ expect(checkbox.checked).toEqual(false)
107
+ })
108
+
109
+ it('renders an aria-checked attribute correctly', () => {
110
+ const handleChange = jest.fn()
111
+ const {getByRole, rerender} = render(<Checkbox checked={false} onChange={handleChange} />)
112
+
113
+ const checkbox = getByRole('checkbox') as HTMLInputElement
114
+
115
+ expect(checkbox).toHaveAttribute('aria-checked', 'false')
116
+
117
+ rerender(<Checkbox checked={true} onChange={handleChange} />)
118
+
119
+ expect(checkbox).toHaveAttribute('aria-checked', 'true')
120
+
121
+ rerender(<Checkbox indeterminate checked onChange={handleChange} />)
122
+
123
+ expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
124
+ })
125
+
126
+ it('renders an invalid aria state when validation prop indicates an error', () => {
127
+ const handleChange = jest.fn()
128
+ const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
129
+
130
+ const checkbox = getByRole('checkbox') as HTMLInputElement
131
+
132
+ expect(checkbox).toHaveAttribute('aria-invalid', 'false')
133
+
134
+ rerender(<Checkbox onChange={handleChange} validationStatus="success" />)
135
+
136
+ expect(checkbox).toHaveAttribute('aria-invalid', 'false')
137
+
138
+ rerender(<Checkbox onChange={handleChange} validationStatus="error" />)
139
+
140
+ expect(checkbox).toHaveAttribute('aria-invalid', 'true')
141
+ })
142
+
143
+ it('renders an aria state indicating the field is required', () => {
144
+ const handleChange = jest.fn()
145
+ const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
146
+
147
+ const checkbox = getByRole('checkbox') as HTMLInputElement
148
+
149
+ expect(checkbox).toHaveAttribute('aria-required', 'false')
150
+
151
+ rerender(<Checkbox onChange={handleChange} required />)
152
+
153
+ expect(checkbox).toHaveAttribute('aria-required', 'true')
154
+ })
155
+ })
@@ -5,6 +5,21 @@ export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
5
5
  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
6
6
  }
7
7
 
8
+ export function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement>) {
9
+ return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} onMouseDown={() => null} />
10
+ }
11
+
12
+ export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement>) {
13
+ // @ts-expect-error href should not be allowed on a <div>
14
+ return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
15
+ }
16
+
17
+ export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement>) {
18
+ return (
19
+ <Overlay as="a" returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
20
+ )
21
+ }
22
+
8
23
  export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
9
24
  return (
10
25
  <Overlay
@@ -0,0 +1,31 @@
1
+ import React from 'react'
2
+ import {SelectPanel} from '../SelectPanel'
3
+
4
+ export function shouldAcceptCallWithNoProps() {
5
+ return (
6
+ <SelectPanel
7
+ placeholderText=""
8
+ open={false}
9
+ onOpenChange={() => null}
10
+ items={[]}
11
+ selected={[]}
12
+ onSelectedChange={() => null}
13
+ onFilterChange={() => null}
14
+ />
15
+ )
16
+ }
17
+
18
+ export function shouldAcceptDOMPropsOnOverlay() {
19
+ return (
20
+ <SelectPanel
21
+ placeholderText=""
22
+ open={false}
23
+ onOpenChange={() => null}
24
+ items={[]}
25
+ selected={[]}
26
+ onSelectedChange={() => null}
27
+ onFilterChange={() => null}
28
+ overlayProps={{onMouseDown: () => null}}
29
+ />
30
+ )
31
+ }
@@ -0,0 +1,16 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Checkbox renders consistently 1`] = `
4
+ .c0 {
5
+ cursor: pointer;
6
+ }
7
+
8
+ <input
9
+ aria-checked="false"
10
+ aria-disabled="false"
11
+ aria-invalid="false"
12
+ aria-required="false"
13
+ className="c0"
14
+ type="checkbox"
15
+ />
16
+ `;
package/src/index.ts CHANGED
@@ -169,4 +169,7 @@ export type {TruncateProps} from './Truncate'
169
169
  export {default as UnderlineNav} from './UnderlineNav'
170
170
  export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav'
171
171
 
172
+ export {default as Checkbox} from './Checkbox'
173
+ export type {CheckboxProps} from './Checkbox'
174
+
172
175
  export {SSRProvider, useSSRSafeId} from './utils/ssr'