@workday/canvas-kit-react 9.0.20 → 9.0.21

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 (6) hide show
  1. package/checkbox/lib/Checkbox.tsx +26 -17
  2. package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map +1 -1
  3. package/dist/commonjs/checkbox/lib/Checkbox.js +22 -16
  4. package/dist/es6/checkbox/lib/Checkbox.d.ts.map +1 -1
  5. package/dist/es6/checkbox/lib/Checkbox.js +23 -17
  6. package/package.json +3 -3
package/checkbox/lib/Checkbox.tsx CHANGED
@@ -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 {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
15
16
  import {SystemIcon} from '@workday/canvas-kit-react/icon';
@@ -132,12 +133,12 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
132
133
  },
133
134
 
134
135
  // States
135
- '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
136
+ '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
136
137
  '~ div:first-of-type': {
137
138
  borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
138
139
  },
139
140
  },
140
- '&:checked ~ div:first-of-type': {
141
+ '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
141
142
  borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
142
143
  backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
143
144
  },
@@ -146,7 +147,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
146
147
  backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
147
148
  opacity: variant === 'inverse' ? '.4' : '1',
148
149
  },
149
- '&:disabled:checked ~ div:first-of-type': {
150
+ '&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
150
151
  borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
151
152
  backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
152
153
  },
@@ -167,7 +168,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
167
168
  outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
168
169
  }),
169
170
  },
170
- '&:checked:focus ~ div:first-of-type': {
171
+ '&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
171
172
  ...focusRing({
172
173
  width: 2,
173
174
  separation: 2,
@@ -192,10 +193,10 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
192
193
  marginLeft: '-6px',
193
194
  },
194
195
  },
195
- '&:checked ~ div:first-of-type': {
196
+ '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
196
197
  borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
197
198
  },
198
- '&:disabled:checked ~ div:first-of-type': {
199
+ '&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
199
200
  borderColor: themePrimary.light,
200
201
  backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
201
202
  },
@@ -219,12 +220,12 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
219
220
  variant === 'inverse' ? `1px solid ${colors.soap300}` : `1px solid ${errorColors.inner}`,
220
221
  boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
221
222
  },
222
- '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
223
+ '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
223
224
  '~ div:first-of-type': {
224
225
  borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
225
226
  },
226
227
  },
227
- '&:checked ~ div:first-of-type': {
228
+ '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
228
229
  borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
229
230
  boxShadow: `
230
231
  0 0 0 2px ${colors.frenchVanilla100},
@@ -236,7 +237,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
236
237
  // Error rings take precedence over focus
237
238
  ...mouseFocusBehavior({
238
239
  ...errorStyles,
239
- '&:not(:checked):focus ~ div:first-of-type': {
240
+ '&:not(:checked):not(:indeterminate):focus ~ div:first-of-type': {
240
241
  border: `1px solid ${errorColors.inner}`,
241
242
  boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
242
243
  },
@@ -266,7 +267,7 @@ const CheckboxBackground = styled('div')<CheckboxProps>(
266
267
  })
267
268
  );
268
269
 
269
- const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked'>>(
270
+ const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked' | 'indeterminate'>>(
270
271
  {
271
272
  display: 'flex',
272
273
  flexDirection: 'column',
@@ -284,9 +285,9 @@ const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked'>>(
284
285
  transition: 'margin 200ms ease',
285
286
  },
286
287
  },
287
- ({checked}) => ({
288
- opacity: checked ? 1 : 0,
289
- transform: checked ? 'scale(1)' : 'scale(0.5)',
288
+ ({checked, indeterminate}) => ({
289
+ opacity: checked || indeterminate ? 1 : 0,
290
+ transform: checked || indeterminate ? 'scale(1)' : 'scale(0.5)',
290
291
  })
291
292
  );
292
293
 
@@ -322,6 +323,13 @@ export const Checkbox = createComponent('input')({
322
323
  Element
323
324
  ) => {
324
325
  const inputId = useUniqueId(id);
326
+ const {localRef, elementRef} = useLocalRef(ref);
327
+ React.useEffect(() => {
328
+ if (typeof indeterminate === 'boolean' && localRef.current) {
329
+ localRef.current.indeterminate = indeterminate;
330
+ }
331
+ }, [indeterminate, localRef]);
332
+
325
333
  return (
326
334
  <CheckboxContainer>
327
335
  <CheckboxInputWrapper disabled={disabled}>
@@ -330,7 +338,7 @@ export const Checkbox = createComponent('input')({
330
338
  checked={checked}
331
339
  disabled={disabled}
332
340
  id={inputId}
333
- ref={ref}
341
+ ref={elementRef}
334
342
  type="checkbox"
335
343
  variant={variant}
336
344
  aria-checked={indeterminate ? 'mixed' : checked}
@@ -338,10 +346,10 @@ export const Checkbox = createComponent('input')({
338
346
  />
339
347
  <CheckboxRipple variant={variant} />
340
348
  <CheckboxBackground variant={variant} checked={checked} disabled={disabled}>
341
- <CheckboxCheck checked={checked}>
349
+ <CheckboxCheck checked={checked} indeterminate={indeterminate}>
342
350
  {indeterminate ? (
343
351
  <IndeterminateBox variant={variant} />
344
- ) : (
352
+ ) : checked ? (
345
353
  <SystemIcon
346
354
  icon={checkSmallIcon}
347
355
  color={
@@ -350,7 +358,7 @@ export const Checkbox = createComponent('input')({
350
358
  : theme.canvas.palette.primary.contrast
351
359
  }
352
360
  />
353
- )}
361
+ ) : null}
354
362
  </CheckboxCheck>
355
363
  </CheckboxBackground>
356
364
  </CheckboxInputWrapper>
@@ -360,6 +368,7 @@ export const Checkbox = createComponent('input')({
360
368
  disabled={disabled}
361
369
  variant={variant}
362
370
  paddingInlineStart={checkboxLabelDistance}
371
+ cursor="pointer"
363
372
  >
364
373
  {label}
365
374
  </LabelText>
package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map CHANGED
@@ -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,EACV,MAAM,kCAAkC,CAAC;AAM1C,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;;CAmEnB,CAAC"}
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;AAM1C,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"}
package/dist/commonjs/checkbox/lib/Checkbox.js CHANGED
@@ -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: ref, type: "checkbox", variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
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,
package/dist/es6/checkbox/lib/Checkbox.d.ts.map CHANGED
@@ -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,EACV,MAAM,kCAAkC,CAAC;AAM1C,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;;CAmEnB,CAAC"}
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;AAM1C,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"}
package/dist/es6/checkbox/lib/Checkbox.js CHANGED
@@ -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, 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: ref, type: "checkbox", variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
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": "9.0.20",
3
+ "version": "9.0.21",
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": "^9.0.20",
52
+ "@workday/canvas-kit-popup-stack": "^9.0.21",
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": "bf423f685cf54a546aacda177189039340d5902e"
69
+ "gitHead": "e6c02a9e7a7c4251bb5b61d70e8d1ee35fce5da1"
70
70
  }