@stack-spot/citric-react 0.37.1 → 0.39.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 (189) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/citric.css +2844 -2844
  3. package/dist/components/Accordion.d.ts +1 -1
  4. package/dist/components/Accordion.js +1 -1
  5. package/dist/components/Alert.d.ts +1 -1
  6. package/dist/components/Alert.js +1 -1
  7. package/dist/components/AsyncContent.d.ts +1 -1
  8. package/dist/components/AsyncContent.js +1 -1
  9. package/dist/components/Avatar.d.ts +1 -1
  10. package/dist/components/Avatar.js +1 -1
  11. package/dist/components/AvatarGroup.d.ts +1 -1
  12. package/dist/components/AvatarGroup.js +1 -1
  13. package/dist/components/Badge.d.ts +1 -1
  14. package/dist/components/Badge.js +1 -1
  15. package/dist/components/Blockquote.d.ts +1 -1
  16. package/dist/components/Blockquote.js +1 -1
  17. package/dist/components/Breadcrumb.d.ts +1 -1
  18. package/dist/components/Breadcrumb.js +1 -1
  19. package/dist/components/Button.d.ts +1 -1
  20. package/dist/components/Button.js +1 -1
  21. package/dist/components/ButtonLink.d.ts +1 -1
  22. package/dist/components/ButtonLink.js +1 -1
  23. package/dist/components/Card.d.ts +1 -1
  24. package/dist/components/Card.js +1 -1
  25. package/dist/components/Checkbox.d.ts +1 -1
  26. package/dist/components/Checkbox.js +1 -1
  27. package/dist/components/CheckboxGroup.d.ts +1 -1
  28. package/dist/components/CheckboxGroup.d.ts.map +1 -1
  29. package/dist/components/CheckboxGroup.js +2 -2
  30. package/dist/components/CheckboxGroup.js.map +1 -1
  31. package/dist/components/Circle.d.ts +1 -1
  32. package/dist/components/Circle.js +1 -1
  33. package/dist/components/Divider.d.ts +1 -1
  34. package/dist/components/Divider.js +1 -1
  35. package/dist/components/ErrorBoundary.d.ts +1 -1
  36. package/dist/components/ErrorBoundary.js +1 -1
  37. package/dist/components/ErrorMessage.d.ts +1 -1
  38. package/dist/components/ErrorMessage.js +1 -1
  39. package/dist/components/FallbackBoundary.d.ts +1 -1
  40. package/dist/components/FallbackBoundary.js +1 -1
  41. package/dist/components/Favorite.d.ts +1 -1
  42. package/dist/components/Favorite.js +1 -1
  43. package/dist/components/FieldGroup.d.ts +1 -1
  44. package/dist/components/FieldGroup.js +1 -1
  45. package/dist/components/Form.d.ts +2 -2
  46. package/dist/components/Form.js +1 -1
  47. package/dist/components/FormGroup.d.ts +1 -1
  48. package/dist/components/FormGroup.js +1 -1
  49. package/dist/components/Icon.d.ts +1 -1
  50. package/dist/components/Icon.js +1 -1
  51. package/dist/components/IconBox.d.ts +3 -3
  52. package/dist/components/IconBox.js +1 -1
  53. package/dist/components/ImageBox.d.ts +3 -3
  54. package/dist/components/ImageBox.js +1 -1
  55. package/dist/components/ImageWithFallback.d.ts +1 -1
  56. package/dist/components/ImageWithFallback.js +1 -1
  57. package/dist/components/Input.d.ts +1 -1
  58. package/dist/components/Input.js +1 -1
  59. package/dist/components/Link.d.ts +1 -1
  60. package/dist/components/Link.js +1 -1
  61. package/dist/components/LoadingPanel.d.ts +1 -1
  62. package/dist/components/LoadingPanel.js +1 -1
  63. package/dist/components/MenuOverlay/Menu.d.ts +1 -1
  64. package/dist/components/MenuOverlay/Menu.js +1 -1
  65. package/dist/components/MenuOverlay/index.d.ts +1 -1
  66. package/dist/components/MenuOverlay/index.js +1 -1
  67. package/dist/components/Overlay/index.d.ts +4 -1
  68. package/dist/components/Overlay/index.d.ts.map +1 -1
  69. package/dist/components/Overlay/index.js +4 -1
  70. package/dist/components/Overlay/index.js.map +1 -1
  71. package/dist/components/Pagination.d.ts +1 -1
  72. package/dist/components/Pagination.js +1 -1
  73. package/dist/components/ProgressBar.d.ts +1 -1
  74. package/dist/components/ProgressBar.js +1 -1
  75. package/dist/components/ProgressCircular.d.ts +1 -1
  76. package/dist/components/ProgressCircular.js +1 -1
  77. package/dist/components/RadioGroup.d.ts +1 -1
  78. package/dist/components/RadioGroup.js +1 -1
  79. package/dist/components/Rating.d.ts +1 -1
  80. package/dist/components/Rating.js +1 -1
  81. package/dist/components/Select/MultiSelect.d.ts +1 -1
  82. package/dist/components/Select/MultiSelect.js +1 -1
  83. package/dist/components/Select/RichSelect.d.ts +1 -1
  84. package/dist/components/Select/RichSelect.js +1 -1
  85. package/dist/components/Select/SimpleSelect.d.ts +1 -1
  86. package/dist/components/Select/SimpleSelect.js +1 -1
  87. package/dist/components/Select/index.d.ts +1 -1
  88. package/dist/components/Select/index.js +1 -1
  89. package/dist/components/SelectBox.d.ts +1 -1
  90. package/dist/components/SelectBox.js +1 -1
  91. package/dist/components/Skeleton.d.ts +1 -1
  92. package/dist/components/Skeleton.js +1 -1
  93. package/dist/components/Slider.d.ts +1 -1
  94. package/dist/components/Slider.js +1 -1
  95. package/dist/components/SmartTable.d.ts +1 -1
  96. package/dist/components/SmartTable.js +1 -1
  97. package/dist/components/Stepper.d.ts +1 -1
  98. package/dist/components/Stepper.js +1 -1
  99. package/dist/components/Table.d.ts +3 -3
  100. package/dist/components/Table.js +1 -1
  101. package/dist/components/Tabs/index.d.ts +1 -1
  102. package/dist/components/Tabs/index.js +1 -1
  103. package/dist/components/Textarea.d.ts +1 -1
  104. package/dist/components/Textarea.js +1 -1
  105. package/dist/components/Tooltip.d.ts +1 -1
  106. package/dist/components/Tooltip.js +1 -1
  107. package/dist/context/CitricProvider.d.ts +1 -1
  108. package/dist/context/CitricProvider.js +1 -1
  109. package/dist/overlay.js +1 -1
  110. package/dist/theme.css +415 -415
  111. package/package.json +2 -1
  112. package/scripts/build-css.ts +49 -49
  113. package/src/components/Accordion.tsx +130 -130
  114. package/src/components/Alert.tsx +24 -24
  115. package/src/components/AsyncContent.tsx +70 -70
  116. package/src/components/Avatar.tsx +45 -45
  117. package/src/components/AvatarGroup.tsx +49 -49
  118. package/src/components/Badge.tsx +47 -47
  119. package/src/components/Blockquote.tsx +18 -18
  120. package/src/components/Breadcrumb.tsx +33 -33
  121. package/src/components/Button.tsx +105 -105
  122. package/src/components/ButtonLink.tsx +45 -45
  123. package/src/components/Card.tsx +68 -68
  124. package/src/components/Checkbox.tsx +51 -51
  125. package/src/components/CheckboxGroup.tsx +153 -152
  126. package/src/components/Circle.tsx +43 -43
  127. package/src/components/CitricComponent.ts +47 -47
  128. package/src/components/Divider.tsx +24 -24
  129. package/src/components/ErrorBoundary.tsx +75 -75
  130. package/src/components/ErrorMessage.tsx +11 -11
  131. package/src/components/FallbackBoundary.tsx +40 -40
  132. package/src/components/Favorite.tsx +57 -57
  133. package/src/components/FieldGroup.tsx +46 -46
  134. package/src/components/Form.tsx +36 -36
  135. package/src/components/FormGroup.tsx +57 -57
  136. package/src/components/Icon.tsx +35 -35
  137. package/src/components/IconBox.tsx +134 -134
  138. package/src/components/ImageBox.tsx +125 -125
  139. package/src/components/ImageWithFallback.tsx +65 -65
  140. package/src/components/Input.tsx +49 -49
  141. package/src/components/Link.tsx +55 -55
  142. package/src/components/LoadingPanel.tsx +8 -8
  143. package/src/components/MenuOverlay/Menu.tsx +158 -158
  144. package/src/components/MenuOverlay/context.ts +20 -20
  145. package/src/components/MenuOverlay/index.tsx +55 -55
  146. package/src/components/MenuOverlay/keyboard.ts +60 -60
  147. package/src/components/MenuOverlay/types.ts +171 -171
  148. package/src/components/Overlay/context.ts +10 -10
  149. package/src/components/Overlay/index.tsx +167 -164
  150. package/src/components/Overlay/types.ts +70 -70
  151. package/src/components/Pagination.tsx +133 -133
  152. package/src/components/ProgressBar.tsx +45 -45
  153. package/src/components/ProgressCircular.tsx +45 -45
  154. package/src/components/RadioGroup.tsx +146 -146
  155. package/src/components/Rating.tsx +98 -98
  156. package/src/components/Select/MultiSelect.tsx +217 -217
  157. package/src/components/Select/RichSelect.tsx +128 -128
  158. package/src/components/Select/SimpleSelect.tsx +73 -73
  159. package/src/components/Select/hooks.ts +133 -133
  160. package/src/components/Select/index.tsx +35 -35
  161. package/src/components/Select/types.ts +134 -134
  162. package/src/components/SelectBox.tsx +167 -167
  163. package/src/components/Skeleton.tsx +53 -53
  164. package/src/components/Slider.tsx +89 -89
  165. package/src/components/SmartTable.tsx +227 -227
  166. package/src/components/Stepper.tsx +163 -163
  167. package/src/components/Table.tsx +234 -234
  168. package/src/components/Tabs/TabController.ts +54 -54
  169. package/src/components/Tabs/index.tsx +87 -87
  170. package/src/components/Tabs/types.ts +54 -54
  171. package/src/components/Tabs/utils.ts +6 -6
  172. package/src/components/Text.ts +111 -111
  173. package/src/components/Textarea.tsx +27 -27
  174. package/src/components/Tooltip.tsx +72 -72
  175. package/src/components/layout.tsx +101 -101
  176. package/src/context/CitricContext.tsx +4 -4
  177. package/src/context/CitricProvider.tsx +14 -14
  178. package/src/context/hooks.ts +6 -6
  179. package/src/index.ts +58 -58
  180. package/src/overlay.ts +341 -341
  181. package/src/types.ts +216 -216
  182. package/src/utils/ValueController.ts +28 -28
  183. package/src/utils/acessibility.ts +92 -92
  184. package/src/utils/checkbox.ts +121 -121
  185. package/src/utils/css.ts +119 -119
  186. package/src/utils/options.ts +9 -9
  187. package/src/utils/radio.ts +93 -93
  188. package/src/utils/react.ts +6 -6
  189. package/tsconfig.json +10 -10
@@ -1,171 +1,171 @@
1
- import { WithStyle } from '@stack-spot/portal-theme'
2
- import { BaseOverlayProps } from '../Overlay/types'
3
-
4
- interface CustomLabel {
5
- /**
6
- * A unique identifier for this label. This is also used to read this label to screen readers.
7
- */
8
- id: string,
9
- /**
10
- * A custom label that can be made up of any React component.
11
- */
12
- element: React.ReactNode,
13
- }
14
-
15
- interface Action {
16
- /**
17
- * The label of the action.
18
- */
19
- label: string | CustomLabel,
20
- /**
21
- * Function to run on a click.
22
- */
23
- onClick?: (event?: React.MouseEvent) => void,
24
- /**
25
- * URL to open on a click.
26
- */
27
- href?: string,
28
- /**
29
- * Target of the URL to open.
30
- */
31
- target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'],
32
- /**
33
- * Language of the linked document.
34
- */
35
- lang?: React.AnchorHTMLAttributes<HTMLAnchorElement>['lang'],
36
- /**
37
- * Language of the destination URL.
38
- */
39
- hrefLang?: React.AnchorHTMLAttributes<HTMLAnchorElement>['hrefLang'],
40
- /**
41
- * The title of the action.
42
- */
43
- title?: string,
44
- /**
45
- * Whether or not this link/button is disabled.
46
- *
47
- * @default false
48
- */
49
- disabled?: boolean,
50
- }
51
-
52
- interface ItemWithIcon {
53
- /**
54
- * An Icon to appear at the left of the item.
55
- */
56
- icon?: React.ReactElement,
57
- /**
58
- * An Icon to appear at the right of the item.
59
- */
60
- iconRight?: React.ReactElement,
61
- }
62
-
63
- export interface MenuAction extends ItemWithIcon, Action, WithStyle {
64
- /**
65
- * Whether or not this option is currently active.
66
- */
67
- active?: boolean,
68
- }
69
-
70
- interface MenuGroup extends WithStyle {
71
- /**
72
- * If this group is rendered as a section with its items right below it or a collapsible, which requires a click to open a submenu.
73
- */
74
- type?: 'section' | 'collapsible',
75
- /**
76
- * The items of this group.
77
- */
78
- children: MenuItem[],
79
- }
80
-
81
- export interface MenuSection extends MenuGroup {
82
- type: 'section',
83
- /**
84
- * The section's title.
85
- */
86
- label?: string,
87
- }
88
-
89
- export interface MenuCollapsible extends MenuGroup, ItemWithIcon {
90
- type?: 'collapsible',
91
- /**
92
- * The title of the collapsible menu.
93
- */
94
- label: string,
95
- }
96
-
97
- export type MenuItem = MenuSection | MenuCollapsible | MenuAction
98
-
99
- export interface MenuState {
100
- items: MenuItem[],
101
- parent?: MenuState,
102
- label?: string,
103
- }
104
-
105
- export interface BaseMenuProps {
106
- /**
107
- * The options in the menu.
108
- */
109
- items: MenuItem[],
110
- /**
111
- * A header for the menu.
112
- */
113
- header?: React.ReactNode,
114
- /**
115
- * Whether or not to render spaces between the items and the sides of the menu.
116
- *
117
- * @default false
118
- */
119
- spaced?: boolean,
120
- /**
121
- * Wheter or not to render borders.
122
- *
123
- * @default false
124
- */
125
- showBorders?: boolean,
126
- /**
127
- * Whether or not to use rounded corners for each menu item.
128
- *
129
- * @default false
130
- */
131
- roundedItems?: boolean,
132
- /**
133
- * Use 'square' for sharp corners and 'circle' for rounded corners.
134
- *
135
- * @default 'circle'
136
- */
137
- appearance?: 'square' | 'circle',
138
- /**
139
- * The level of the background color. Use this to lighten or darken the background.
140
- *
141
- * @default 300
142
- */
143
- bgLevel?: 300 | 400 | 500 | 600,
144
- /**
145
- * Whether or not to render shadows behind the menu.
146
- *
147
- * @default true
148
- */
149
- showShadows?: boolean,
150
- /**
151
- * A class for the menu element.
152
- */
153
- menuClass?: string,
154
- /**
155
- * Styles for the menu element.
156
- */
157
- menuStyle?: React.CSSProperties,
158
- }
159
-
160
- export type MenuProps = React.JSX.IntrinsicElements['div'] & BaseMenuProps
161
-
162
- export interface BaseMenuOverlayProps extends
163
- BaseMenuProps, Omit<BaseOverlayProps<'div'>, 'tag' | 'onRenderChild' | 'content' | 'triggerOn' | 'reference' | 'children'> {
164
- /**
165
- * A unique id for this menu. If not provided, a random number will be used.
166
- */
167
- id?: string,
168
- children?: React.ReactElement,
169
- }
170
-
171
- export type MenuOverlayProps = Omit<React.JSX.IntrinsicElements['div'], 'content' | 'children'> & BaseMenuOverlayProps
1
+ import { WithStyle } from '@stack-spot/portal-theme'
2
+ import { BaseOverlayProps } from '../Overlay/types'
3
+
4
+ interface CustomLabel {
5
+ /**
6
+ * A unique identifier for this label. This is also used to read this label to screen readers.
7
+ */
8
+ id: string,
9
+ /**
10
+ * A custom label that can be made up of any React component.
11
+ */
12
+ element: React.ReactNode,
13
+ }
14
+
15
+ interface Action {
16
+ /**
17
+ * The label of the action.
18
+ */
19
+ label: string | CustomLabel,
20
+ /**
21
+ * Function to run on a click.
22
+ */
23
+ onClick?: (event?: React.MouseEvent) => void,
24
+ /**
25
+ * URL to open on a click.
26
+ */
27
+ href?: string,
28
+ /**
29
+ * Target of the URL to open.
30
+ */
31
+ target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'],
32
+ /**
33
+ * Language of the linked document.
34
+ */
35
+ lang?: React.AnchorHTMLAttributes<HTMLAnchorElement>['lang'],
36
+ /**
37
+ * Language of the destination URL.
38
+ */
39
+ hrefLang?: React.AnchorHTMLAttributes<HTMLAnchorElement>['hrefLang'],
40
+ /**
41
+ * The title of the action.
42
+ */
43
+ title?: string,
44
+ /**
45
+ * Whether or not this link/button is disabled.
46
+ *
47
+ * @default false
48
+ */
49
+ disabled?: boolean,
50
+ }
51
+
52
+ interface ItemWithIcon {
53
+ /**
54
+ * An Icon to appear at the left of the item.
55
+ */
56
+ icon?: React.ReactElement,
57
+ /**
58
+ * An Icon to appear at the right of the item.
59
+ */
60
+ iconRight?: React.ReactElement,
61
+ }
62
+
63
+ export interface MenuAction extends ItemWithIcon, Action, WithStyle {
64
+ /**
65
+ * Whether or not this option is currently active.
66
+ */
67
+ active?: boolean,
68
+ }
69
+
70
+ interface MenuGroup extends WithStyle {
71
+ /**
72
+ * If this group is rendered as a section with its items right below it or a collapsible, which requires a click to open a submenu.
73
+ */
74
+ type?: 'section' | 'collapsible',
75
+ /**
76
+ * The items of this group.
77
+ */
78
+ children: MenuItem[],
79
+ }
80
+
81
+ export interface MenuSection extends MenuGroup {
82
+ type: 'section',
83
+ /**
84
+ * The section's title.
85
+ */
86
+ label?: string,
87
+ }
88
+
89
+ export interface MenuCollapsible extends MenuGroup, ItemWithIcon {
90
+ type?: 'collapsible',
91
+ /**
92
+ * The title of the collapsible menu.
93
+ */
94
+ label: string,
95
+ }
96
+
97
+ export type MenuItem = MenuSection | MenuCollapsible | MenuAction
98
+
99
+ export interface MenuState {
100
+ items: MenuItem[],
101
+ parent?: MenuState,
102
+ label?: string,
103
+ }
104
+
105
+ export interface BaseMenuProps {
106
+ /**
107
+ * The options in the menu.
108
+ */
109
+ items: MenuItem[],
110
+ /**
111
+ * A header for the menu.
112
+ */
113
+ header?: React.ReactNode,
114
+ /**
115
+ * Whether or not to render spaces between the items and the sides of the menu.
116
+ *
117
+ * @default false
118
+ */
119
+ spaced?: boolean,
120
+ /**
121
+ * Wheter or not to render borders.
122
+ *
123
+ * @default false
124
+ */
125
+ showBorders?: boolean,
126
+ /**
127
+ * Whether or not to use rounded corners for each menu item.
128
+ *
129
+ * @default false
130
+ */
131
+ roundedItems?: boolean,
132
+ /**
133
+ * Use 'square' for sharp corners and 'circle' for rounded corners.
134
+ *
135
+ * @default 'circle'
136
+ */
137
+ appearance?: 'square' | 'circle',
138
+ /**
139
+ * The level of the background color. Use this to lighten or darken the background.
140
+ *
141
+ * @default 300
142
+ */
143
+ bgLevel?: 300 | 400 | 500 | 600,
144
+ /**
145
+ * Whether or not to render shadows behind the menu.
146
+ *
147
+ * @default true
148
+ */
149
+ showShadows?: boolean,
150
+ /**
151
+ * A class for the menu element.
152
+ */
153
+ menuClass?: string,
154
+ /**
155
+ * Styles for the menu element.
156
+ */
157
+ menuStyle?: React.CSSProperties,
158
+ }
159
+
160
+ export type MenuProps = React.JSX.IntrinsicElements['div'] & BaseMenuProps
161
+
162
+ export interface BaseMenuOverlayProps extends
163
+ BaseMenuProps, Omit<BaseOverlayProps<'div'>, 'tag' | 'onRenderChild' | 'content' | 'triggerOn' | 'reference' | 'children'> {
164
+ /**
165
+ * A unique id for this menu. If not provided, a random number will be used.
166
+ */
167
+ id?: string,
168
+ children?: React.ReactElement,
169
+ }
170
+
171
+ export type MenuOverlayProps = Omit<React.JSX.IntrinsicElements['div'], 'content' | 'children'> & BaseMenuOverlayProps
@@ -1,10 +1,10 @@
1
- import { createContext, useContext } from 'react'
2
- import { OverlayController } from './types'
3
-
4
- const context = createContext<OverlayController | undefined>(undefined)
5
-
6
- export const OverlayProvider = context.Provider
7
-
8
- export function useOverlayController() {
9
- return useContext(context)
10
- }
1
+ import { createContext, useContext } from 'react'
2
+ import { OverlayController } from './types'
3
+
4
+ const context = createContext<OverlayController | undefined>(undefined)
5
+
6
+ export const OverlayProvider = context.Provider
7
+
8
+ export function useOverlayController() {
9
+ return useContext(context)
10
+ }