@stack-spot/citric-react 0.38.0 → 0.39.1

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 (191) hide show
  1. package/CHANGELOG.md +13 -13
  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.d.ts.map +1 -1
  79. package/dist/components/RadioGroup.js +2 -2
  80. package/dist/components/RadioGroup.js.map +1 -1
  81. package/dist/components/Rating.d.ts +1 -1
  82. package/dist/components/Rating.js +1 -1
  83. package/dist/components/Select/MultiSelect.d.ts +1 -1
  84. package/dist/components/Select/MultiSelect.js +1 -1
  85. package/dist/components/Select/RichSelect.d.ts +1 -1
  86. package/dist/components/Select/RichSelect.js +1 -1
  87. package/dist/components/Select/SimpleSelect.d.ts +1 -1
  88. package/dist/components/Select/SimpleSelect.js +1 -1
  89. package/dist/components/Select/index.d.ts +1 -1
  90. package/dist/components/Select/index.js +1 -1
  91. package/dist/components/SelectBox.d.ts +1 -1
  92. package/dist/components/SelectBox.js +1 -1
  93. package/dist/components/Skeleton.d.ts +1 -1
  94. package/dist/components/Skeleton.js +1 -1
  95. package/dist/components/Slider.d.ts +1 -1
  96. package/dist/components/Slider.js +1 -1
  97. package/dist/components/SmartTable.d.ts +1 -1
  98. package/dist/components/SmartTable.js +1 -1
  99. package/dist/components/Stepper.d.ts +1 -1
  100. package/dist/components/Stepper.js +1 -1
  101. package/dist/components/Table.d.ts +3 -3
  102. package/dist/components/Table.js +1 -1
  103. package/dist/components/Tabs/index.d.ts +1 -1
  104. package/dist/components/Tabs/index.js +1 -1
  105. package/dist/components/Textarea.d.ts +1 -1
  106. package/dist/components/Textarea.js +1 -1
  107. package/dist/components/Tooltip.d.ts +1 -1
  108. package/dist/components/Tooltip.js +1 -1
  109. package/dist/context/CitricProvider.d.ts +1 -1
  110. package/dist/context/CitricProvider.js +1 -1
  111. package/dist/overlay.js +1 -1
  112. package/dist/theme.css +415 -415
  113. package/package.json +1 -1
  114. package/scripts/build-css.ts +49 -49
  115. package/src/components/Accordion.tsx +130 -130
  116. package/src/components/Alert.tsx +24 -24
  117. package/src/components/AsyncContent.tsx +70 -70
  118. package/src/components/Avatar.tsx +45 -45
  119. package/src/components/AvatarGroup.tsx +49 -49
  120. package/src/components/Badge.tsx +47 -47
  121. package/src/components/Blockquote.tsx +18 -18
  122. package/src/components/Breadcrumb.tsx +33 -33
  123. package/src/components/Button.tsx +105 -105
  124. package/src/components/ButtonLink.tsx +45 -45
  125. package/src/components/Card.tsx +68 -68
  126. package/src/components/Checkbox.tsx +51 -51
  127. package/src/components/CheckboxGroup.tsx +153 -152
  128. package/src/components/Circle.tsx +43 -43
  129. package/src/components/CitricComponent.ts +47 -47
  130. package/src/components/Divider.tsx +24 -24
  131. package/src/components/ErrorBoundary.tsx +75 -75
  132. package/src/components/ErrorMessage.tsx +11 -11
  133. package/src/components/FallbackBoundary.tsx +40 -40
  134. package/src/components/Favorite.tsx +57 -57
  135. package/src/components/FieldGroup.tsx +46 -46
  136. package/src/components/Form.tsx +36 -36
  137. package/src/components/FormGroup.tsx +57 -57
  138. package/src/components/Icon.tsx +35 -35
  139. package/src/components/IconBox.tsx +134 -134
  140. package/src/components/ImageBox.tsx +125 -125
  141. package/src/components/ImageWithFallback.tsx +65 -65
  142. package/src/components/Input.tsx +49 -49
  143. package/src/components/Link.tsx +55 -55
  144. package/src/components/LoadingPanel.tsx +8 -8
  145. package/src/components/MenuOverlay/Menu.tsx +158 -158
  146. package/src/components/MenuOverlay/context.ts +20 -20
  147. package/src/components/MenuOverlay/index.tsx +55 -55
  148. package/src/components/MenuOverlay/keyboard.ts +60 -60
  149. package/src/components/MenuOverlay/types.ts +171 -171
  150. package/src/components/Overlay/context.ts +10 -10
  151. package/src/components/Overlay/index.tsx +167 -164
  152. package/src/components/Overlay/types.ts +70 -70
  153. package/src/components/Pagination.tsx +133 -133
  154. package/src/components/ProgressBar.tsx +45 -45
  155. package/src/components/ProgressCircular.tsx +45 -45
  156. package/src/components/RadioGroup.tsx +147 -146
  157. package/src/components/Rating.tsx +98 -98
  158. package/src/components/Select/MultiSelect.tsx +217 -217
  159. package/src/components/Select/RichSelect.tsx +128 -128
  160. package/src/components/Select/SimpleSelect.tsx +73 -73
  161. package/src/components/Select/hooks.ts +133 -133
  162. package/src/components/Select/index.tsx +35 -35
  163. package/src/components/Select/types.ts +134 -134
  164. package/src/components/SelectBox.tsx +167 -167
  165. package/src/components/Skeleton.tsx +53 -53
  166. package/src/components/Slider.tsx +89 -89
  167. package/src/components/SmartTable.tsx +227 -227
  168. package/src/components/Stepper.tsx +163 -163
  169. package/src/components/Table.tsx +234 -234
  170. package/src/components/Tabs/TabController.ts +54 -54
  171. package/src/components/Tabs/index.tsx +87 -87
  172. package/src/components/Tabs/types.ts +54 -54
  173. package/src/components/Tabs/utils.ts +6 -6
  174. package/src/components/Text.ts +111 -111
  175. package/src/components/Textarea.tsx +27 -27
  176. package/src/components/Tooltip.tsx +72 -72
  177. package/src/components/layout.tsx +101 -101
  178. package/src/context/CitricContext.tsx +4 -4
  179. package/src/context/CitricProvider.tsx +14 -14
  180. package/src/context/hooks.ts +6 -6
  181. package/src/index.ts +58 -58
  182. package/src/overlay.ts +341 -341
  183. package/src/types.ts +216 -216
  184. package/src/utils/ValueController.ts +28 -28
  185. package/src/utils/acessibility.ts +92 -92
  186. package/src/utils/checkbox.ts +121 -121
  187. package/src/utils/css.ts +119 -119
  188. package/src/utils/options.ts +9 -9
  189. package/src/utils/radio.ts +93 -93
  190. package/src/utils/react.ts +6 -6
  191. 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
+ }