@workday/canvas-kit-react 10.0.0-alpha.476-next.0 → 10.0.0-alpha.478-next.0
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.
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
styled,
|
|
11
11
|
useTheme,
|
|
12
12
|
Themeable,
|
|
13
|
+
useLocalRef,
|
|
13
14
|
} from '@workday/canvas-kit-react/common';
|
|
14
15
|
import {
|
|
15
16
|
borderRadius,
|
|
@@ -138,12 +139,12 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
|
|
|
138
139
|
},
|
|
139
140
|
|
|
140
141
|
// States
|
|
141
|
-
'&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
|
|
142
|
+
'&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
|
|
142
143
|
'~ div:first-of-type': {
|
|
143
144
|
borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
|
|
144
145
|
},
|
|
145
146
|
},
|
|
146
|
-
'&:checked ~ div:first-of-type': {
|
|
147
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
147
148
|
borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
|
|
148
149
|
backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
|
|
149
150
|
},
|
|
@@ -152,7 +153,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
|
|
|
152
153
|
backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
|
|
153
154
|
opacity: variant === 'inverse' ? '.4' : '1',
|
|
154
155
|
},
|
|
155
|
-
'&:disabled:checked ~ div:first-of-type': {
|
|
156
|
+
'&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
|
|
156
157
|
borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
|
|
157
158
|
backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
|
|
158
159
|
},
|
|
@@ -173,7 +174,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
|
|
|
173
174
|
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
|
|
174
175
|
}),
|
|
175
176
|
},
|
|
176
|
-
'&:checked:focus ~ div:first-of-type': {
|
|
177
|
+
'&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
|
|
177
178
|
...focusRing({
|
|
178
179
|
width: 2,
|
|
179
180
|
separation: 2,
|
|
@@ -198,10 +199,10 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
|
|
|
198
199
|
marginLeft: '-6px',
|
|
199
200
|
},
|
|
200
201
|
},
|
|
201
|
-
'&:checked ~ div:first-of-type': {
|
|
202
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
202
203
|
borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
|
|
203
204
|
},
|
|
204
|
-
'&:disabled:checked ~ div:first-of-type': {
|
|
205
|
+
'&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
|
|
205
206
|
borderColor: themePrimary.light,
|
|
206
207
|
backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
|
|
207
208
|
},
|
|
@@ -225,12 +226,12 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
|
|
|
225
226
|
variant === 'inverse' ? `1px solid ${colors.soap300}` : `1px solid ${errorColors.inner}`,
|
|
226
227
|
boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
|
|
227
228
|
},
|
|
228
|
-
'&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
|
|
229
|
+
'&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
|
|
229
230
|
'~ div:first-of-type': {
|
|
230
231
|
borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
|
|
231
232
|
},
|
|
232
233
|
},
|
|
233
|
-
'&:checked ~ div:first-of-type': {
|
|
234
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
234
235
|
borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
|
|
235
236
|
boxShadow: `
|
|
236
237
|
0 0 0 2px ${colors.frenchVanilla100},
|
|
@@ -242,7 +243,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
|
|
|
242
243
|
// Error rings take precedence over focus
|
|
243
244
|
...mouseFocusBehavior({
|
|
244
245
|
...errorStyles,
|
|
245
|
-
'&:not(:checked):focus ~ div:first-of-type': {
|
|
246
|
+
'&:not(:checked):not(:indeterminate):focus ~ div:first-of-type': {
|
|
246
247
|
border: `1px solid ${errorColors.inner}`,
|
|
247
248
|
boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
|
|
248
249
|
},
|
|
@@ -272,7 +273,7 @@ const CheckboxBackground = styled('div')<CheckboxProps>(
|
|
|
272
273
|
})
|
|
273
274
|
);
|
|
274
275
|
|
|
275
|
-
const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked'>>(
|
|
276
|
+
const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked' | 'indeterminate'>>(
|
|
276
277
|
{
|
|
277
278
|
display: 'flex',
|
|
278
279
|
flexDirection: 'column',
|
|
@@ -290,9 +291,9 @@ const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked'>>(
|
|
|
290
291
|
transition: 'margin 200ms ease',
|
|
291
292
|
},
|
|
292
293
|
},
|
|
293
|
-
({checked}) => ({
|
|
294
|
-
opacity: checked ? 1 : 0,
|
|
295
|
-
transform: checked ? 'scale(1)' : 'scale(0.5)',
|
|
294
|
+
({checked, indeterminate}) => ({
|
|
295
|
+
opacity: checked || indeterminate ? 1 : 0,
|
|
296
|
+
transform: checked || indeterminate ? 'scale(1)' : 'scale(0.5)',
|
|
296
297
|
})
|
|
297
298
|
);
|
|
298
299
|
|
|
@@ -328,6 +329,13 @@ export const Checkbox = createComponent('input')({
|
|
|
328
329
|
Element
|
|
329
330
|
) => {
|
|
330
331
|
const inputId = useUniqueId(id);
|
|
332
|
+
const {localRef, elementRef} = useLocalRef(ref);
|
|
333
|
+
React.useEffect(() => {
|
|
334
|
+
if (typeof indeterminate === 'boolean' && localRef.current) {
|
|
335
|
+
localRef.current.indeterminate = indeterminate;
|
|
336
|
+
}
|
|
337
|
+
}, [indeterminate, localRef]);
|
|
338
|
+
|
|
331
339
|
return (
|
|
332
340
|
<CheckboxContainer>
|
|
333
341
|
<CheckboxInputWrapper disabled={disabled}>
|
|
@@ -336,7 +344,7 @@ export const Checkbox = createComponent('input')({
|
|
|
336
344
|
checked={checked}
|
|
337
345
|
disabled={disabled}
|
|
338
346
|
id={inputId}
|
|
339
|
-
ref={
|
|
347
|
+
ref={elementRef}
|
|
340
348
|
type="checkbox"
|
|
341
349
|
variant={variant}
|
|
342
350
|
aria-checked={indeterminate ? 'mixed' : checked}
|
|
@@ -344,10 +352,10 @@ export const Checkbox = createComponent('input')({
|
|
|
344
352
|
/>
|
|
345
353
|
<CheckboxRipple variant={variant} />
|
|
346
354
|
<CheckboxBackground variant={variant} checked={checked} disabled={disabled}>
|
|
347
|
-
<CheckboxCheck checked={checked}>
|
|
355
|
+
<CheckboxCheck checked={checked} indeterminate={indeterminate}>
|
|
348
356
|
{indeterminate ? (
|
|
349
357
|
<IndeterminateBox variant={variant} />
|
|
350
|
-
) : (
|
|
358
|
+
) : checked ? (
|
|
351
359
|
<SystemIcon
|
|
352
360
|
icon={checkSmallIcon}
|
|
353
361
|
color={
|
|
@@ -356,7 +364,7 @@ export const Checkbox = createComponent('input')({
|
|
|
356
364
|
: theme.canvas.palette.primary.contrast
|
|
357
365
|
}
|
|
358
366
|
/>
|
|
359
|
-
)}
|
|
367
|
+
) : null}
|
|
360
368
|
</CheckboxCheck>
|
|
361
369
|
</CheckboxBackground>
|
|
362
370
|
</CheckboxInputWrapper>
|
|
@@ -366,6 +374,7 @@ export const Checkbox = createComponent('input')({
|
|
|
366
374
|
disabled={disabled}
|
|
367
375
|
variant={variant}
|
|
368
376
|
paddingInlineStart={checkboxLabelDistance}
|
|
377
|
+
cursor="pointer"
|
|
369
378
|
>
|
|
370
379
|
{label}
|
|
371
380
|
</LabelText>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CA2EnB,CAAC"}
|
|
@@ -78,12 +78,12 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
|
|
|
78
78
|
cursor: 'pointer',
|
|
79
79
|
},
|
|
80
80
|
// States
|
|
81
|
-
'&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
|
|
81
|
+
'&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
|
|
82
82
|
'~ div:first-of-type': {
|
|
83
83
|
borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.hoverBorder,
|
|
84
84
|
},
|
|
85
85
|
},
|
|
86
|
-
'&:checked ~ div:first-of-type': {
|
|
86
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
87
87
|
borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
|
|
88
88
|
backgroundColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
|
|
89
89
|
},
|
|
@@ -92,7 +92,7 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
|
|
|
92
92
|
backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.disabled.background,
|
|
93
93
|
opacity: variant === 'inverse' ? '.4' : '1',
|
|
94
94
|
},
|
|
95
|
-
'&:disabled:checked ~ div:first-of-type': {
|
|
95
|
+
'&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
|
|
96
96
|
borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
|
|
97
97
|
backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
|
|
98
98
|
},
|
|
@@ -112,7 +112,7 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
|
|
|
112
112
|
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
|
|
113
113
|
}),
|
|
114
114
|
},
|
|
115
|
-
'&:checked:focus ~ div:first-of-type': {
|
|
115
|
+
'&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
|
|
116
116
|
...common_1.focusRing({
|
|
117
117
|
width: 2,
|
|
118
118
|
separation: 2,
|
|
@@ -136,10 +136,10 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
|
|
|
136
136
|
marginLeft: '-6px',
|
|
137
137
|
},
|
|
138
138
|
},
|
|
139
|
-
'&:checked ~ div:first-of-type': {
|
|
139
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
140
140
|
borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
|
|
141
141
|
},
|
|
142
|
-
'&:disabled:checked ~ div:first-of-type': {
|
|
142
|
+
'&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
|
|
143
143
|
borderColor: themePrimary.light,
|
|
144
144
|
backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
|
|
145
145
|
},
|
|
@@ -158,12 +158,12 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
|
|
|
158
158
|
border: variant === 'inverse' ? `1px solid ${tokens_1.colors.soap300}` : `1px solid ${errorColors.inner}`,
|
|
159
159
|
boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
|
|
160
160
|
},
|
|
161
|
-
'&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
|
|
161
|
+
'&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
|
|
162
162
|
'~ div:first-of-type': {
|
|
163
163
|
borderColor: variant === 'inverse' ? `1px solid ${tokens_1.colors.soap300}` : errorColors.inner,
|
|
164
164
|
},
|
|
165
165
|
},
|
|
166
|
-
'&:checked ~ div:first-of-type': {
|
|
166
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
167
167
|
borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : theme.canvas.palette.primary.main,
|
|
168
168
|
boxShadow: `
|
|
169
169
|
0 0 0 2px ${tokens_1.colors.frenchVanilla100},
|
|
@@ -175,7 +175,7 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
|
|
|
175
175
|
// Error rings take precedence over focus
|
|
176
176
|
...common_1.mouseFocusBehavior({
|
|
177
177
|
...errorStyles,
|
|
178
|
-
'&:not(:checked):focus ~ div:first-of-type': {
|
|
178
|
+
'&:not(:checked):not(:indeterminate):focus ~ div:first-of-type': {
|
|
179
179
|
border: `1px solid ${errorColors.inner}`,
|
|
180
180
|
boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
|
|
181
181
|
},
|
|
@@ -215,9 +215,9 @@ const CheckboxCheck = common_1.styled('div')({
|
|
|
215
215
|
marginLeft: '-6px',
|
|
216
216
|
transition: 'margin 200ms ease',
|
|
217
217
|
},
|
|
218
|
-
}, ({ checked }) => ({
|
|
219
|
-
opacity: checked ? 1 : 0,
|
|
220
|
-
transform: checked ? 'scale(1)' : 'scale(0.5)',
|
|
218
|
+
}, ({ checked, indeterminate }) => ({
|
|
219
|
+
opacity: checked || indeterminate ? 1 : 0,
|
|
220
|
+
transform: checked || indeterminate ? 'scale(1)' : 'scale(0.5)',
|
|
221
221
|
}));
|
|
222
222
|
const IndeterminateBox = common_1.styled('div')({
|
|
223
223
|
width: '10px',
|
|
@@ -234,15 +234,21 @@ exports.Checkbox = common_1.createComponent('input')({
|
|
|
234
234
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
235
235
|
theme = common_1.useTheme(), id, disabled, indeterminate, variant, ...elemProps }, ref, Element) => {
|
|
236
236
|
const inputId = common_1.useUniqueId(id);
|
|
237
|
+
const { localRef, elementRef } = common_1.useLocalRef(ref);
|
|
238
|
+
React.useEffect(() => {
|
|
239
|
+
if (typeof indeterminate === 'boolean' && localRef.current) {
|
|
240
|
+
localRef.current.indeterminate = indeterminate;
|
|
241
|
+
}
|
|
242
|
+
}, [indeterminate, localRef]);
|
|
237
243
|
return (React.createElement(CheckboxContainer, null,
|
|
238
244
|
React.createElement(CheckboxInputWrapper, { disabled: disabled },
|
|
239
|
-
React.createElement(CheckboxInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref:
|
|
245
|
+
React.createElement(CheckboxInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: elementRef, type: "checkbox", variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
|
|
240
246
|
React.createElement(CheckboxRipple, { variant: variant }),
|
|
241
247
|
React.createElement(CheckboxBackground, { variant: variant, checked: checked, disabled: disabled },
|
|
242
|
-
React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
|
|
248
|
+
React.createElement(CheckboxCheck, { checked: checked, indeterminate: indeterminate }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : checked ? (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
|
|
243
249
|
? theme.canvas.palette.primary.main
|
|
244
|
-
: theme.canvas.palette.primary.contrast }))))),
|
|
245
|
-
label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance }, label))));
|
|
250
|
+
: theme.canvas.palette.primary.contrast })) : null))),
|
|
251
|
+
label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance, cursor: "pointer" }, label))));
|
|
246
252
|
},
|
|
247
253
|
subComponents: {
|
|
248
254
|
ErrorType: common_1.ErrorType,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CA2EnB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { createComponent, ErrorType, useUniqueId, focusRing, mouseFocusBehavior, getErrorColors, styled, useTheme, } from '@workday/canvas-kit-react/common';
|
|
2
|
+
import { createComponent, ErrorType, useUniqueId, focusRing, mouseFocusBehavior, getErrorColors, styled, useTheme, useLocalRef, } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { borderRadius, colors, inputColors, space, spaceNumbers, } from '@workday/canvas-kit-react/tokens';
|
|
4
4
|
import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
5
5
|
import { checkSmallIcon } from '@workday/canvas-system-icons-web';
|
|
@@ -56,12 +56,12 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
|
|
|
56
56
|
cursor: 'pointer',
|
|
57
57
|
},
|
|
58
58
|
// States
|
|
59
|
-
'&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
|
|
59
|
+
'&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
|
|
60
60
|
'~ div:first-of-type': {
|
|
61
61
|
borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
|
|
62
62
|
},
|
|
63
63
|
},
|
|
64
|
-
'&:checked ~ div:first-of-type': {
|
|
64
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
65
65
|
borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
|
|
66
66
|
backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
|
|
67
67
|
},
|
|
@@ -70,7 +70,7 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
|
|
|
70
70
|
backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
|
|
71
71
|
opacity: variant === 'inverse' ? '.4' : '1',
|
|
72
72
|
},
|
|
73
|
-
'&:disabled:checked ~ div:first-of-type': {
|
|
73
|
+
'&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
|
|
74
74
|
borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
|
|
75
75
|
backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
|
|
76
76
|
},
|
|
@@ -90,7 +90,7 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
|
|
|
90
90
|
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
|
|
91
91
|
}),
|
|
92
92
|
},
|
|
93
|
-
'&:checked:focus ~ div:first-of-type': {
|
|
93
|
+
'&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
|
|
94
94
|
...focusRing({
|
|
95
95
|
width: 2,
|
|
96
96
|
separation: 2,
|
|
@@ -114,10 +114,10 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
|
|
|
114
114
|
marginLeft: '-6px',
|
|
115
115
|
},
|
|
116
116
|
},
|
|
117
|
-
'&:checked ~ div:first-of-type': {
|
|
117
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
118
118
|
borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
|
|
119
119
|
},
|
|
120
|
-
'&:disabled:checked ~ div:first-of-type': {
|
|
120
|
+
'&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
|
|
121
121
|
borderColor: themePrimary.light,
|
|
122
122
|
backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
|
|
123
123
|
},
|
|
@@ -136,12 +136,12 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
|
|
|
136
136
|
border: variant === 'inverse' ? `1px solid ${colors.soap300}` : `1px solid ${errorColors.inner}`,
|
|
137
137
|
boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
|
|
138
138
|
},
|
|
139
|
-
'&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
|
|
139
|
+
'&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
|
|
140
140
|
'~ div:first-of-type': {
|
|
141
141
|
borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
|
|
142
142
|
},
|
|
143
143
|
},
|
|
144
|
-
'&:checked ~ div:first-of-type': {
|
|
144
|
+
'&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
|
|
145
145
|
borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
|
|
146
146
|
boxShadow: `
|
|
147
147
|
0 0 0 2px ${colors.frenchVanilla100},
|
|
@@ -153,7 +153,7 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
|
|
|
153
153
|
// Error rings take precedence over focus
|
|
154
154
|
...mouseFocusBehavior({
|
|
155
155
|
...errorStyles,
|
|
156
|
-
'&:not(:checked):focus ~ div:first-of-type': {
|
|
156
|
+
'&:not(:checked):not(:indeterminate):focus ~ div:first-of-type': {
|
|
157
157
|
border: `1px solid ${errorColors.inner}`,
|
|
158
158
|
boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
|
|
159
159
|
},
|
|
@@ -193,9 +193,9 @@ const CheckboxCheck = styled('div')({
|
|
|
193
193
|
marginLeft: '-6px',
|
|
194
194
|
transition: 'margin 200ms ease',
|
|
195
195
|
},
|
|
196
|
-
}, ({ checked }) => ({
|
|
197
|
-
opacity: checked ? 1 : 0,
|
|
198
|
-
transform: checked ? 'scale(1)' : 'scale(0.5)',
|
|
196
|
+
}, ({ checked, indeterminate }) => ({
|
|
197
|
+
opacity: checked || indeterminate ? 1 : 0,
|
|
198
|
+
transform: checked || indeterminate ? 'scale(1)' : 'scale(0.5)',
|
|
199
199
|
}));
|
|
200
200
|
const IndeterminateBox = styled('div')({
|
|
201
201
|
width: '10px',
|
|
@@ -212,15 +212,21 @@ export const Checkbox = createComponent('input')({
|
|
|
212
212
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
213
213
|
theme = useTheme(), id, disabled, indeterminate, variant, ...elemProps }, ref, Element) => {
|
|
214
214
|
const inputId = useUniqueId(id);
|
|
215
|
+
const { localRef, elementRef } = useLocalRef(ref);
|
|
216
|
+
React.useEffect(() => {
|
|
217
|
+
if (typeof indeterminate === 'boolean' && localRef.current) {
|
|
218
|
+
localRef.current.indeterminate = indeterminate;
|
|
219
|
+
}
|
|
220
|
+
}, [indeterminate, localRef]);
|
|
215
221
|
return (React.createElement(CheckboxContainer, null,
|
|
216
222
|
React.createElement(CheckboxInputWrapper, { disabled: disabled },
|
|
217
|
-
React.createElement(CheckboxInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref:
|
|
223
|
+
React.createElement(CheckboxInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: elementRef, type: "checkbox", variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
|
|
218
224
|
React.createElement(CheckboxRipple, { variant: variant }),
|
|
219
225
|
React.createElement(CheckboxBackground, { variant: variant, checked: checked, disabled: disabled },
|
|
220
|
-
React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(SystemIcon, { icon: checkSmallIcon, color: variant === 'inverse'
|
|
226
|
+
React.createElement(CheckboxCheck, { checked: checked, indeterminate: indeterminate }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : checked ? (React.createElement(SystemIcon, { icon: checkSmallIcon, color: variant === 'inverse'
|
|
221
227
|
? theme.canvas.palette.primary.main
|
|
222
|
-
: theme.canvas.palette.primary.contrast }))))),
|
|
223
|
-
label && (React.createElement(LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance }, label))));
|
|
228
|
+
: theme.canvas.palette.primary.contrast })) : null))),
|
|
229
|
+
label && (React.createElement(LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance, cursor: "pointer" }, label))));
|
|
224
230
|
},
|
|
225
231
|
subComponents: {
|
|
226
232
|
ErrorType,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "10.0.0-alpha.
|
|
3
|
+
"version": "10.0.0-alpha.478-next.0",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^10.0.0-alpha.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^10.0.0-alpha.478-next.0",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
54
54
|
"@workday/design-assets-types": "^0.2.8",
|
|
55
55
|
"chroma-js": "^2.1.0",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
67
67
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "a4655840e394ffa82a088b511bb3560401b943d7"
|
|
70
70
|
}
|