@availity/mui-checkbox 0.1.1 → 0.1.2
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.
- package/CHANGELOG.md +3 -2
- package/dist/index.d.ts +2 -3
- package/package.json +4 -3
- package/src/lib/Checkbox.stories.tsx +98 -35
- package/src/lib/Checkbox.tsx +12 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-checkbox@0.1.1...@availity/mui-checkbox@0.1.2) (2023-10-17)
|
|
6
|
+
|
|
5
7
|
## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-checkbox@0.1.0...@availity/mui-checkbox@0.1.1) (2023-10-04)
|
|
6
8
|
|
|
7
9
|
## 0.1.0 (2023-10-04)
|
|
8
10
|
|
|
9
|
-
|
|
10
11
|
### Features
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
- **mui-checkbox:** init ([c7200a8](https://github.com/Availity/element/commit/c7200a84175174f43d502b47881dd7e57e02aa0e))
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CheckboxProps as CheckboxProps$1 } from '@mui/material';
|
|
3
3
|
|
|
4
|
-
interface CheckboxProps extends Omit<CheckboxProps$1, 'size'> {
|
|
5
|
-
children?: React.ReactNode;
|
|
4
|
+
interface CheckboxProps extends Omit<CheckboxProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'size' | 'TouchRippleProps' | 'touchRippleRef'> {
|
|
6
5
|
color?: 'primary' | 'error';
|
|
7
6
|
}
|
|
8
|
-
declare const Checkbox: react.ForwardRefExoticComponent<Pick<CheckboxProps, "classes" | "checkedIcon" | "color" | "icon" | "className" | "style" | "form" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "
|
|
7
|
+
declare const Checkbox: react.ForwardRefExoticComponent<Pick<CheckboxProps, "classes" | "checkedIcon" | "color" | "icon" | "className" | "style" | "action" | "disabled" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "form" | "slot" | "title" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "checked" | "edge" | "inputProps" | "inputRef" | "readOnly" | "required" | "indeterminate" | "indeterminateIcon"> & react.RefAttributes<HTMLButtonElement>>;
|
|
9
8
|
|
|
10
9
|
export { Checkbox, CheckboxProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-checkbox",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Availity MUI Checkbox Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -33,8 +33,9 @@
|
|
|
33
33
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@availity/mui-form-utils": "^0.4.
|
|
37
|
-
"@availity/mui-icon": "^0.6.
|
|
36
|
+
"@availity/mui-form-utils": "^0.4.1",
|
|
37
|
+
"@availity/mui-icon": "^0.6.1",
|
|
38
|
+
"@availity/mui-typography": "^0.1.2",
|
|
38
39
|
"@mui/material": "^5.11.9",
|
|
39
40
|
"react": "18.2.0",
|
|
40
41
|
"react-dom": "18.2.0",
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
5
5
|
import { FormControlLabel } from '@availity/mui-form-utils';
|
|
6
|
-
import {
|
|
6
|
+
import { Typography } from '@availity/mui-typography';
|
|
7
|
+
import { Box, FormGroup, FormControl, FormLabel } from '@mui/material';
|
|
7
8
|
import { HeartEmptyIcon, HeartIcon } from '@availity/mui-icon';
|
|
8
9
|
import { Checkbox, CheckboxProps } from './Checkbox';
|
|
9
10
|
|
|
@@ -11,6 +12,13 @@ const meta: Meta<typeof Checkbox> = {
|
|
|
11
12
|
title: 'Components/Checkbox/Checkbox',
|
|
12
13
|
component: Checkbox,
|
|
13
14
|
tags: ['autodocs'],
|
|
15
|
+
argTypes: {
|
|
16
|
+
readOnly: {
|
|
17
|
+
table: {
|
|
18
|
+
disable: true,
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
},
|
|
14
22
|
};
|
|
15
23
|
|
|
16
24
|
export default meta;
|
|
@@ -18,44 +26,87 @@ export default meta;
|
|
|
18
26
|
export const _Checkbox: StoryObj<typeof Checkbox> = {
|
|
19
27
|
render: (args: CheckboxProps) => (
|
|
20
28
|
<>
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
<Checkbox
|
|
24
|
-
<Checkbox
|
|
29
|
+
<Typography variant="h1">Examples</Typography>
|
|
30
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
31
|
+
<Checkbox defaultChecked inputProps={{ 'aria-label': 'Default Checked example' }} />
|
|
32
|
+
<Checkbox inputProps={{ 'aria-label': 'Default Unchecked example' }} />
|
|
33
|
+
<Checkbox inputProps={{ 'aria-label': 'Disabled example' }} disabled />
|
|
34
|
+
<Checkbox inputProps={{ 'aria-label': 'Disabled Checked example' }} disabled checked />
|
|
35
|
+
<Typography variant="h1">Playground</Typography>
|
|
36
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
37
|
+
<Checkbox {...args} />
|
|
25
38
|
</>
|
|
26
39
|
),
|
|
27
40
|
args: {
|
|
28
41
|
color: 'primary',
|
|
42
|
+
inputProps: {
|
|
43
|
+
'aria-label': 'Playground example',
|
|
44
|
+
},
|
|
29
45
|
},
|
|
30
46
|
};
|
|
31
47
|
|
|
32
48
|
export const _CustomCheckbox: StoryObj<typeof Checkbox> = {
|
|
33
49
|
render: (args: CheckboxProps) => (
|
|
34
50
|
<>
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
<Checkbox
|
|
38
|
-
|
|
51
|
+
<Typography variant="h1">Examples</Typography>
|
|
52
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
53
|
+
<Checkbox
|
|
54
|
+
defaultChecked
|
|
55
|
+
inputProps={{ 'aria-label': 'Default Checked example' }}
|
|
56
|
+
color="error"
|
|
57
|
+
icon={<HeartEmptyIcon />}
|
|
58
|
+
checkedIcon={<HeartIcon />}
|
|
59
|
+
/>
|
|
60
|
+
<Checkbox
|
|
61
|
+
inputProps={{ 'aria-label': 'Default Unchecked example' }}
|
|
62
|
+
color="error"
|
|
63
|
+
icon={<HeartEmptyIcon />}
|
|
64
|
+
checkedIcon={<HeartIcon />}
|
|
65
|
+
/>
|
|
66
|
+
<Checkbox
|
|
67
|
+
disabled
|
|
68
|
+
inputProps={{ 'aria-label': 'Disabled example' }}
|
|
69
|
+
color="error"
|
|
70
|
+
icon={<HeartEmptyIcon />}
|
|
71
|
+
checkedIcon={<HeartIcon />}
|
|
72
|
+
/>
|
|
73
|
+
<Checkbox
|
|
74
|
+
disabled
|
|
75
|
+
checked
|
|
76
|
+
inputProps={{ 'aria-label': 'Disabled Checked example' }}
|
|
77
|
+
color="error"
|
|
78
|
+
icon={<HeartEmptyIcon />}
|
|
79
|
+
checkedIcon={<HeartIcon />}
|
|
80
|
+
/>
|
|
81
|
+
<Typography variant="h1">Playground</Typography>
|
|
82
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
83
|
+
<Checkbox {...args} />
|
|
39
84
|
</>
|
|
40
85
|
),
|
|
41
86
|
args: {
|
|
42
87
|
color: 'error',
|
|
43
88
|
icon: <HeartEmptyIcon />,
|
|
44
89
|
checkedIcon: <HeartIcon />,
|
|
90
|
+
inputProps: {
|
|
91
|
+
'aria-label': 'Playground example',
|
|
92
|
+
},
|
|
45
93
|
},
|
|
46
94
|
};
|
|
47
95
|
|
|
48
96
|
export const _LabeledCheckbox: StoryObj<typeof Checkbox> = {
|
|
49
97
|
render: (args: CheckboxProps) => (
|
|
50
98
|
<>
|
|
51
|
-
<
|
|
52
|
-
<
|
|
53
|
-
<FormControlLabel
|
|
99
|
+
<Typography variant="h1">Examples</Typography>
|
|
100
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
101
|
+
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
102
|
+
<FormControlLabel required control={<Checkbox />} label="Required" />
|
|
103
|
+
<FormControlLabel control={<Checkbox disabled />} label="Disabled" />
|
|
104
|
+
<Typography variant="h1">Playground</Typography>
|
|
105
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
106
|
+
<FormControlLabel control={<Checkbox {...args} />} label="Label" />
|
|
54
107
|
</>
|
|
55
108
|
),
|
|
56
|
-
args: {
|
|
57
|
-
children: 'This text is a child of Checkbox',
|
|
58
|
-
},
|
|
109
|
+
args: {},
|
|
59
110
|
};
|
|
60
111
|
|
|
61
112
|
export const _ControlledCheckbox: StoryObj<typeof Checkbox> = {
|
|
@@ -64,9 +115,7 @@ export const _ControlledCheckbox: StoryObj<typeof Checkbox> = {
|
|
|
64
115
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setChecked(event.target.checked);
|
|
65
116
|
return <Checkbox {...args} checked={checked} onChange={handleChange} inputProps={{ 'aria-label': 'controlled' }} />;
|
|
66
117
|
},
|
|
67
|
-
args: {
|
|
68
|
-
children: 'This text is a child of Checkbox',
|
|
69
|
-
},
|
|
118
|
+
args: {},
|
|
70
119
|
};
|
|
71
120
|
export const _IndeterminateCheckbox: StoryObj<typeof Checkbox> = {
|
|
72
121
|
render: (args: CheckboxProps) => {
|
|
@@ -112,23 +161,37 @@ export const _IndeterminateCheckbox: StoryObj<typeof Checkbox> = {
|
|
|
112
161
|
|
|
113
162
|
export const _FormGroupCheckbox: StoryObj<typeof Checkbox> = {
|
|
114
163
|
render: (args: CheckboxProps) => (
|
|
115
|
-
|
|
116
|
-
<
|
|
117
|
-
<
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
164
|
+
<>
|
|
165
|
+
<Typography variant="h1">Examples</Typography>
|
|
166
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
167
|
+
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required>
|
|
168
|
+
<FormLabel component="legend">Vertical Checkboxes</FormLabel>
|
|
169
|
+
<FormGroup>
|
|
170
|
+
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
171
|
+
<FormControlLabel control={<Checkbox />} label="Label 2" />
|
|
172
|
+
<FormControlLabel disabled control={<Checkbox />} label="Label 3" />
|
|
173
|
+
</FormGroup>
|
|
174
|
+
</FormControl>
|
|
175
|
+
|
|
176
|
+
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required>
|
|
177
|
+
<FormLabel component="legend">Horizontal Checkboxes</FormLabel>
|
|
178
|
+
<FormGroup row>
|
|
179
|
+
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
180
|
+
<FormControlLabel control={<Checkbox />} label="Label 2" />
|
|
181
|
+
<FormControlLabel disabled control={<Checkbox />} label="Label 3" />
|
|
182
|
+
</FormGroup>
|
|
183
|
+
</FormControl>
|
|
184
|
+
|
|
185
|
+
<Typography variant="h1">Playground</Typography>
|
|
186
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
187
|
+
|
|
188
|
+
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required={args.required}>
|
|
189
|
+
<FormLabel component="legend">Horizontal Checkbox</FormLabel>
|
|
190
|
+
<FormGroup row>
|
|
191
|
+
<FormControlLabel control={<Checkbox {...args} />} label="Label" />
|
|
192
|
+
</FormGroup>
|
|
193
|
+
</FormControl>
|
|
194
|
+
</>
|
|
132
195
|
),
|
|
133
196
|
args: {
|
|
134
197
|
color: 'primary',
|
package/src/lib/Checkbox.tsx
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import { forwardRef } from 'react';
|
|
2
2
|
import { Checkbox as MuiCheckbox, CheckboxProps as MuiCheckboxProps } from '@mui/material';
|
|
3
3
|
|
|
4
|
-
export interface CheckboxProps
|
|
5
|
-
|
|
4
|
+
export interface CheckboxProps
|
|
5
|
+
extends Omit<
|
|
6
|
+
MuiCheckboxProps,
|
|
7
|
+
| 'centerRipple'
|
|
8
|
+
| 'disableFocusRipple'
|
|
9
|
+
| 'disableRipple'
|
|
10
|
+
| 'disableTouchRipple'
|
|
11
|
+
| 'focusRipple'
|
|
12
|
+
| 'size'
|
|
13
|
+
| 'TouchRippleProps'
|
|
14
|
+
| 'touchRippleRef'
|
|
15
|
+
> {
|
|
6
16
|
color?: 'primary' | 'error';
|
|
7
17
|
}
|
|
8
18
|
|