@charcoal-ui/react 4.0.0-beta.8 → 4.0.0-rc.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.
Files changed (90) hide show
  1. package/dist/_lib/compat.d.ts +0 -12
  2. package/dist/_lib/compat.d.ts.map +1 -1
  3. package/dist/_lib/createDivComponent.d.ts +2 -2
  4. package/dist/_lib/createDivComponent.d.ts.map +1 -1
  5. package/dist/components/Button/index.d.ts +2 -6
  6. package/dist/components/Button/index.d.ts.map +1 -1
  7. package/dist/components/Clickable/index.d.ts +4 -7
  8. package/dist/components/Clickable/index.d.ts.map +1 -1
  9. package/dist/components/IconButton/index.d.ts +1 -2
  10. package/dist/components/IconButton/index.d.ts.map +1 -1
  11. package/dist/components/Modal/Dialog/index.d.ts +1 -1
  12. package/dist/components/Modal/Dialog/index.d.ts.map +1 -1
  13. package/dist/components/Modal/ModalPlumbing.d.ts +6 -6
  14. package/dist/components/Modal/ModalPlumbing.d.ts.map +1 -1
  15. package/dist/components/Modal/index.d.ts.map +1 -1
  16. package/dist/components/Modal/useCustomModalOverlay.d.ts +1 -0
  17. package/dist/components/Modal/useCustomModalOverlay.d.ts.map +1 -1
  18. package/dist/components/TagItem/index.d.ts +2 -6
  19. package/dist/components/TagItem/index.d.ts.map +1 -1
  20. package/dist/components/TextArea/index.d.ts +1 -1
  21. package/dist/components/TextArea/index.d.ts.map +1 -1
  22. package/dist/components/TextField/AssistiveText/index.d.ts +2 -2
  23. package/dist/components/TextField/AssistiveText/index.d.ts.map +1 -1
  24. package/dist/components/TextField/index.d.ts +3 -3
  25. package/dist/components/TextField/index.d.ts.map +1 -1
  26. package/dist/core/CharcoalProvider.d.ts +4 -11
  27. package/dist/core/CharcoalProvider.d.ts.map +1 -1
  28. package/dist/index.cjs.js +300 -334
  29. package/dist/index.cjs.js.map +1 -1
  30. package/dist/index.css +2 -5
  31. package/dist/index.css.map +1 -1
  32. package/dist/index.d.ts +0 -1
  33. package/dist/index.d.ts.map +1 -1
  34. package/dist/index.esm.js +233 -265
  35. package/dist/index.esm.js.map +1 -1
  36. package/dist/layered.css +1214 -0
  37. package/dist/layered.css.map +1 -0
  38. package/package.json +17 -13
  39. package/src/README.mdx +68 -0
  40. package/src/SSR.mdx +67 -0
  41. package/src/_lib/compat.ts +0 -11
  42. package/src/_lib/index.ts +1 -1
  43. package/src/components/Button/__snapshots__/index.story.storyshot +9 -9
  44. package/src/components/Button/index.tsx +4 -10
  45. package/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot +5 -5
  46. package/src/components/Checkbox/CheckboxInput/index.css +4 -5
  47. package/src/components/Checkbox/__snapshots__/index.story.storyshot +6 -6
  48. package/src/components/Clickable/__snapshots__/index.story.storyshot +2 -2
  49. package/src/components/Clickable/index.story.tsx +1 -1
  50. package/src/components/Clickable/index.tsx +7 -12
  51. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +7 -6
  52. package/src/components/DropdownSelector/ListItem/index.story.tsx +11 -5
  53. package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +3 -3
  54. package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +1 -1
  55. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +14 -14
  56. package/src/components/Icon/__snapshots__/index.story.storyshot +1 -1
  57. package/src/components/IconButton/__snapshots__/index.story.storyshot +3 -3
  58. package/src/components/IconButton/index.tsx +3 -6
  59. package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot +4 -4
  60. package/src/components/Modal/Dialog/index.tsx +2 -1
  61. package/src/components/Modal/__snapshots__/index.story.storyshot +102 -261
  62. package/src/components/Modal/index.story.tsx +26 -11
  63. package/src/components/Modal/index.tsx +5 -6
  64. package/src/components/Modal/useCustomModalOverlay.tsx +20 -0
  65. package/src/components/Radio/__snapshots__/index.story.storyshot +40 -65
  66. package/src/components/Radio/index.story.tsx +14 -7
  67. package/src/components/Radio/index.test.tsx +20 -27
  68. package/src/components/SegmentedControl/__snapshots__/index.story.storyshot +2 -2
  69. package/src/components/Switch/__snapshots__/index.story.storyshot +4 -4
  70. package/src/components/TagItem/__snapshots__/index.story.storyshot +8 -8
  71. package/src/components/TagItem/index.tsx +4 -8
  72. package/src/components/TextArea/__snapshots__/TextArea.story.storyshot +11 -11
  73. package/src/components/TextField/TextField.story.tsx +8 -9
  74. package/src/components/TextField/__snapshots__/TextField.story.storyshot +20 -26
  75. package/src/components/TextField/index.tsx +2 -2
  76. package/src/core/CharcoalProvider.tsx +5 -29
  77. package/src/index.ts +0 -5
  78. package/src/type.d.ts +2 -13
  79. package/dist/components/Modal/__stories__/InternalScrollStory.d.ts +0 -4
  80. package/dist/components/Modal/__stories__/InternalScrollStory.d.ts.map +0 -1
  81. package/dist/core/ComponentAbstraction.d.ts +0 -24
  82. package/dist/core/ComponentAbstraction.d.ts.map +0 -1
  83. package/dist/styled.d.ts +0 -95
  84. package/dist/styled.d.ts.map +0 -1
  85. package/src/components/Button/__snapshots__/index.test.tsx.snap +0 -11
  86. package/src/components/Button/index.test.tsx +0 -32
  87. package/src/components/Modal/__stories__/InternalScrollStory.tsx +0 -75
  88. package/src/components/a11y.test.tsx +0 -99
  89. package/src/core/ComponentAbstraction.tsx +0 -48
  90. package/src/styled.ts +0 -3
package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot CHANGED
@@ -1,10 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
4
- .c0 {
5
- color: red;
6
- }
7
-
3
+ exports[`Storybook Tests > react/internals/ListItem > Basic 1`] = `
8
4
  <div
9
5
  data-dark={false}
10
6
  >
@@ -28,8 +24,13 @@ exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
28
24
  Normal Link
29
25
  </a>
30
26
  <a
31
- className="c0 charcoal-list-item"
27
+ className="charcoal-list-item"
32
28
  href="#"
29
+ style={
30
+ Object {
31
+ "color": "red",
32
+ }
33
+ }
33
34
  >
34
35
  Custom Link
35
36
  </a>
package/src/components/DropdownSelector/ListItem/index.story.tsx CHANGED
@@ -1,8 +1,7 @@
1
- import { useState } from 'react'
1
+ import React, { useState } from 'react'
2
2
  import Icon from '../../Icon'
3
3
  import Switch from '../../Switch'
4
4
  import ListItem from '.'
5
- import styled from 'styled-components'
6
5
  import { Meta, StoryObj } from '@storybook/react'
7
6
 
8
7
  export default {
@@ -10,9 +9,16 @@ export default {
10
9
  component: ListItem,
11
10
  } as Meta<typeof ListItem>
12
11
 
13
- const CustomLink = styled.a`
14
- color: red;
15
- `
12
+ const CustomLink = (props: Omit<React.ComponentProps<'a'>, 'style'>) => {
13
+ return (
14
+ <a
15
+ style={{
16
+ color: 'red',
17
+ }}
18
+ {...props}
19
+ />
20
+ )
21
+ }
16
22
 
17
23
  const BasicRender = () => {
18
24
  const [checked, setChecked] = useState(false)
package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/internals/MenuList Basic 1`] = `
3
+ exports[`Storybook Tests > react/internals/MenuList > Basic 1`] = `
4
4
  <div
5
5
  data-dark={false}
6
6
  >
@@ -121,7 +121,7 @@ exports[`Storybook Tests react/internals/MenuList Basic 1`] = `
121
121
  </div>
122
122
  `;
123
123
 
124
- exports[`Storybook Tests react/internals/MenuList Disabled 1`] = `
124
+ exports[`Storybook Tests > react/internals/MenuList > Disabled 1`] = `
125
125
  <div
126
126
  data-dark={false}
127
127
  >
@@ -152,7 +152,7 @@ exports[`Storybook Tests react/internals/MenuList Disabled 1`] = `
152
152
  </div>
153
153
  `;
154
154
 
155
- exports[`Storybook Tests react/internals/MenuList Group 1`] = `
155
+ exports[`Storybook Tests > react/internals/MenuList > Group 1`] = `
156
156
  <div
157
157
  data-dark={false}
158
158
  >
package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/internals/Popover Basic 1`] = `
3
+ exports[`Storybook Tests > react/internals/Popover > Basic 1`] = `
4
4
  <div
5
5
  data-dark={false}
6
6
  >
package/src/components/DropdownSelector/__snapshots__/index.story.storyshot CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
3
+ exports[`Storybook Tests > react/DropdownSelector > AssistiveText 1`] = `
4
4
  <div
5
5
  data-dark={false}
6
6
  >
@@ -113,7 +113,7 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
113
113
  </div>
114
114
  `;
115
115
 
116
- exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
116
+ exports[`Storybook Tests > react/DropdownSelector > CustomChildren 1`] = `
117
117
  <div
118
118
  data-dark={false}
119
119
  >
@@ -226,7 +226,7 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
226
226
  </div>
227
227
  `;
228
228
 
229
- exports[`Storybook Tests react/DropdownSelector Default 1`] = `
229
+ exports[`Storybook Tests > react/DropdownSelector > Default 1`] = `
230
230
  <div
231
231
  data-dark={false}
232
232
  >
@@ -327,7 +327,7 @@ exports[`Storybook Tests react/DropdownSelector Default 1`] = `
327
327
  </div>
328
328
  `;
329
329
 
330
- exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
330
+ exports[`Storybook Tests > react/DropdownSelector > Disabled 1`] = `
331
331
  <div
332
332
  data-dark={false}
333
333
  >
@@ -434,7 +434,7 @@ exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
434
434
  </div>
435
435
  `;
436
436
 
437
- exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
437
+ exports[`Storybook Tests > react/DropdownSelector > DisabledItem 1`] = `
438
438
  <div
439
439
  data-dark={false}
440
440
  >
@@ -550,7 +550,7 @@ exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
550
550
  </div>
551
551
  `;
552
552
 
553
- exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
553
+ exports[`Storybook Tests > react/DropdownSelector > InFormTag 1`] = `
554
554
  <div
555
555
  data-dark={false}
556
556
  >
@@ -670,7 +670,7 @@ exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
670
670
  </div>
671
671
  `;
672
672
 
673
- exports[`Storybook Tests react/DropdownSelector InModal 1`] = `
673
+ exports[`Storybook Tests > react/DropdownSelector > InModal 1`] = `
674
674
  <div
675
675
  data-dark={false}
676
676
  >
@@ -690,7 +690,7 @@ exports[`Storybook Tests react/DropdownSelector InModal 1`] = `
690
690
  </div>
691
691
  `;
692
692
 
693
- exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
693
+ exports[`Storybook Tests > react/DropdownSelector > Invalid 1`] = `
694
694
  <div
695
695
  data-dark={false}
696
696
  >
@@ -796,7 +796,7 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
796
796
  </div>
797
797
  `;
798
798
 
799
- exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
799
+ exports[`Storybook Tests > react/DropdownSelector > InvalidAssistiveText 1`] = `
800
800
  <div
801
801
  data-dark={false}
802
802
  >
@@ -910,7 +910,7 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
910
910
  </div>
911
911
  `;
912
912
 
913
- exports[`Storybook Tests react/DropdownSelector Label 1`] = `
913
+ exports[`Storybook Tests > react/DropdownSelector > Label 1`] = `
914
914
  <div
915
915
  data-dark={false}
916
916
  >
@@ -1001,7 +1001,7 @@ exports[`Storybook Tests react/DropdownSelector Label 1`] = `
1001
1001
  </div>
1002
1002
  `;
1003
1003
 
1004
- exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
1004
+ exports[`Storybook Tests > react/DropdownSelector > LongNames 1`] = `
1005
1005
  <div
1006
1006
  data-dark={false}
1007
1007
  >
@@ -1106,7 +1106,7 @@ exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
1106
1106
  </div>
1107
1107
  `;
1108
1108
 
1109
- exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
1109
+ exports[`Storybook Tests > react/DropdownSelector > RequiredText 1`] = `
1110
1110
  <div
1111
1111
  data-dark={false}
1112
1112
  >
@@ -1202,7 +1202,7 @@ exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
1202
1202
  </div>
1203
1203
  `;
1204
1204
 
1205
- exports[`Storybook Tests react/DropdownSelector Section 1`] = `
1205
+ exports[`Storybook Tests > react/DropdownSelector > Section 1`] = `
1206
1206
  <div
1207
1207
  data-dark={false}
1208
1208
  >
@@ -1322,7 +1322,7 @@ exports[`Storybook Tests react/DropdownSelector Section 1`] = `
1322
1322
  </div>
1323
1323
  `;
1324
1324
 
1325
- exports[`Storybook Tests react/DropdownSelector SubLabel 1`] = `
1325
+ exports[`Storybook Tests > react/DropdownSelector > SubLabel 1`] = `
1326
1326
  <div
1327
1327
  data-dark={false}
1328
1328
  >
package/src/components/Icon/__snapshots__/index.story.storyshot CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/Icon Default 1`] = `
3
+ exports[`Storybook Tests > react/Icon > Default 1`] = `
4
4
  <div
5
5
  data-dark={false}
6
6
  >
package/src/components/IconButton/__snapshots__/index.story.storyshot CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/IconButton Default 1`] = `
3
+ exports[`Storybook Tests > react/IconButton > Default 1`] = `
4
4
  <div
5
5
  data-dark={false}
6
6
  >
@@ -18,7 +18,7 @@ exports[`Storybook Tests react/IconButton Default 1`] = `
18
18
  </div>
19
19
  `;
20
20
 
21
- exports[`Storybook Tests react/IconButton IsActive 1`] = `
21
+ exports[`Storybook Tests > react/IconButton > IsActive 1`] = `
22
22
  <div
23
23
  data-dark={false}
24
24
  >
@@ -35,7 +35,7 @@ exports[`Storybook Tests react/IconButton IsActive 1`] = `
35
35
  </div>
36
36
  `;
37
37
 
38
- exports[`Storybook Tests react/IconButton Overlay 1`] = `
38
+ exports[`Storybook Tests > react/IconButton > Overlay 1`] = `
39
39
  <div
40
40
  data-dark={false}
41
41
  >
package/src/components/IconButton/index.tsx CHANGED
@@ -12,8 +12,7 @@ export type IconButtonProps<T extends React.ElementType = 'button'> = {
12
12
  readonly size?: Size
13
13
  readonly icon: keyof KnownIconType
14
14
  readonly isActive?: boolean
15
- as?: T
16
- componentAs?: React.ComponentPropsWithRef<T>['as']
15
+ component?: T
17
16
  } & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>
18
17
 
19
18
  const IconButton = forwardRef(function IconButtonInner<
@@ -24,20 +23,18 @@ const IconButton = forwardRef(function IconButtonInner<
24
23
  size = 'M',
25
24
  icon,
26
25
  isActive = false,
27
- componentAs,
28
- as,
26
+ component,
29
27
  ...rest
30
28
  }: IconButtonProps<T>,
31
29
  ref: ForwardedRef<HTMLButtonElement>
32
30
  ) {
33
31
  validateIconSize(size, icon)
34
- const Component = useMemo(() => as ?? 'button', [as])
32
+ const Component = useMemo(() => component ?? 'button', [component])
35
33
  const classNames = useClassNames('charcoal-icon-button', rest.className)
36
34
 
37
35
  return (
38
36
  <Component
39
37
  {...rest}
40
- as={componentAs}
41
38
  ref={ref}
42
39
  className={classNames}
43
40
  data-size={size}
package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/LoadingSpinner Default 1`] = `
3
+ exports[`Storybook Tests > react/LoadingSpinner > Default 1`] = `
4
4
  <div
5
5
  data-dark={false}
6
6
  >
@@ -24,7 +24,7 @@ exports[`Storybook Tests react/LoadingSpinner Default 1`] = `
24
24
  </div>
25
25
  `;
26
26
 
27
- exports[`Storybook Tests react/LoadingSpinner Padding 1`] = `
27
+ exports[`Storybook Tests > react/LoadingSpinner > Padding 1`] = `
28
28
  <div
29
29
  data-dark={false}
30
30
  >
@@ -48,7 +48,7 @@ exports[`Storybook Tests react/LoadingSpinner Padding 1`] = `
48
48
  </div>
49
49
  `;
50
50
 
51
- exports[`Storybook Tests react/LoadingSpinner Size 1`] = `
51
+ exports[`Storybook Tests > react/LoadingSpinner > Size 1`] = `
52
52
  <div
53
53
  data-dark={false}
54
54
  >
@@ -72,7 +72,7 @@ exports[`Storybook Tests react/LoadingSpinner Size 1`] = `
72
72
  </div>
73
73
  `;
74
74
 
75
- exports[`Storybook Tests react/LoadingSpinner Transparent 1`] = `
75
+ exports[`Storybook Tests > react/LoadingSpinner > Transparent 1`] = `
76
76
  <div
77
77
  data-dark={false}
78
78
  >
package/src/components/Modal/Dialog/index.tsx CHANGED
@@ -13,7 +13,7 @@ export const Dialog = forwardRef<
13
13
  size: Size
14
14
  bottomSheet: BottomSheet
15
15
  }
16
- >(function Dialog({ size, bottomSheet, css, className, ...props }, forwardRef) {
16
+ >(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {
17
17
  const ref = useForwardedRef(forwardRef)
18
18
  const { dialogProps } = useDialog(
19
19
  {
@@ -31,6 +31,7 @@ export const Dialog = forwardRef<
31
31
  tabIndex={dialogProps.tabIndex}
32
32
  aria-labelledby={dialogProps['aria-labelledby']}
33
33
  onBlur={dialogProps.onBlur}
34
+ data-size={size}
34
35
  ref={ref}
35
36
  {...props}
36
37
  />