@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,9 +1,9 @@
1
- import { isNil } from 'lodash'
2
-
3
- export function defaultRenderLabel(option: any) {
4
- return isNil(option) ? '' : `${option}`
5
- }
6
-
7
- export function defaultRenderKey(option: any) {
8
- return ['string', 'number'].includes(typeof option) ? `${option}` : undefined
9
- }
1
+ import { isNil } from 'lodash'
2
+
3
+ export function defaultRenderLabel(option: any) {
4
+ return isNil(option) ? '' : `${option}`
5
+ }
6
+
7
+ export function defaultRenderKey(option: any) {
8
+ return ['string', 'number'].includes(typeof option) ? `${option}` : undefined
9
+ }
@@ -1,93 +1,93 @@
1
- import { useEffect, useMemo, useRef, useState } from 'react'
2
- import { defaultRenderKey } from './options'
3
-
4
- export interface RadioGroupHookParams<T, F = string> {
5
- /**
6
- * The initial value for the radio group.
7
- */
8
- initialValue?: T,
9
- /**
10
- * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
11
- * @param filter the current filter.
12
- * @param option the current option.
13
- * @returns true if the option should pass the filter, false if the option should be discarded.
14
- */
15
- applyFilter?: (filter: F, option: T) => boolean,
16
- /**
17
- * The full set of options for the radio group.
18
- */
19
- options: T[],
20
- /**
21
- * A function that produces a unique id for an option.
22
- * @param option the current option.
23
- * @returns a unique key.
24
- */
25
- renderKey: (option: T) => string | number | undefined,
26
- /**
27
- * A function to call whenever the value changes.
28
- * @param newValue the new value.
29
- * @param previousValue the previous value.
30
- */
31
- onChange?: (newValue: T | undefined, previousValue: T | undefined) => void,
32
- }
33
-
34
- /**
35
- * Use this hook to easily implement filtering for a radio group.
36
- * @param params the parameters to create the controls.
37
- * @returns the checkbox controls.
38
- */
39
- export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<T, F>) {
40
- const [value, setValue] = useState(params.initialValue)
41
- const [filter, setFilter] = useState<F | undefined>()
42
- const previousValue = useRef(value)
43
- const renderKey = params.renderKey ?? defaultRenderKey
44
-
45
- useEffect(() => {
46
- params.onChange?.(value, previousValue.current)
47
- previousValue.current = value
48
- }, [value])
49
-
50
- const { options, isUnfilteredButChecked } = useMemo(() => {
51
- if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
52
- const valueKey = value ? renderKey(value) : undefined
53
- const isValueFilteredOut = value && !params.applyFilter?.(filter, value)
54
- const filtered = params.options.filter(o => params.applyFilter?.(filter, o))
55
- return {
56
- options: isValueFilteredOut ? [value, ...filtered] : filtered,
57
- isUnfilteredButChecked: (o: T) => isValueFilteredOut && renderKey(o) === valueKey,
58
- }
59
- }, [params.options, filter])
60
-
61
- return {
62
- /**
63
- * The current filter applied.
64
- */
65
- filter,
66
- /**
67
- * Apply a new filter.
68
- */
69
- setFilter: setFilter,
70
- /**
71
- * The options that should be passed to the radio group.
72
- */
73
- options,
74
- /**
75
- * The value that should be passed to the radio group.
76
- */
77
- value,
78
- /**
79
- * Changes the current value, should be passed to the property `onChange` of the radio group.
80
- */
81
- setValue,
82
- /**
83
- * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
84
- */
85
- renderKey,
86
- /**
87
- * A function that returns true if the option is filtered out, but checked.
88
- * @param option the option to check.
89
- * @returns true if the option was filtered out, but is checked; false otherwise.
90
- */
91
- isUnfilteredButChecked,
92
- }
93
- }
1
+ import { useEffect, useMemo, useRef, useState } from 'react'
2
+ import { defaultRenderKey } from './options'
3
+
4
+ export interface RadioGroupHookParams<T, F = string> {
5
+ /**
6
+ * The initial value for the radio group.
7
+ */
8
+ initialValue?: T,
9
+ /**
10
+ * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
11
+ * @param filter the current filter.
12
+ * @param option the current option.
13
+ * @returns true if the option should pass the filter, false if the option should be discarded.
14
+ */
15
+ applyFilter?: (filter: F, option: T) => boolean,
16
+ /**
17
+ * The full set of options for the radio group.
18
+ */
19
+ options: T[],
20
+ /**
21
+ * A function that produces a unique id for an option.
22
+ * @param option the current option.
23
+ * @returns a unique key.
24
+ */
25
+ renderKey: (option: T) => string | number | undefined,
26
+ /**
27
+ * A function to call whenever the value changes.
28
+ * @param newValue the new value.
29
+ * @param previousValue the previous value.
30
+ */
31
+ onChange?: (newValue: T | undefined, previousValue: T | undefined) => void,
32
+ }
33
+
34
+ /**
35
+ * Use this hook to easily implement filtering for a radio group.
36
+ * @param params the parameters to create the controls.
37
+ * @returns the checkbox controls.
38
+ */
39
+ export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<T, F>) {
40
+ const [value, setValue] = useState(params.initialValue)
41
+ const [filter, setFilter] = useState<F | undefined>()
42
+ const previousValue = useRef(value)
43
+ const renderKey = params.renderKey ?? defaultRenderKey
44
+
45
+ useEffect(() => {
46
+ params.onChange?.(value, previousValue.current)
47
+ previousValue.current = value
48
+ }, [value])
49
+
50
+ const { options, isUnfilteredButChecked } = useMemo(() => {
51
+ if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
52
+ const valueKey = value ? renderKey(value) : undefined
53
+ const isValueFilteredOut = value && !params.applyFilter?.(filter, value)
54
+ const filtered = params.options.filter(o => params.applyFilter?.(filter, o))
55
+ return {
56
+ options: isValueFilteredOut ? [value, ...filtered] : filtered,
57
+ isUnfilteredButChecked: (o: T) => isValueFilteredOut && renderKey(o) === valueKey,
58
+ }
59
+ }, [params.options, filter])
60
+
61
+ return {
62
+ /**
63
+ * The current filter applied.
64
+ */
65
+ filter,
66
+ /**
67
+ * Apply a new filter.
68
+ */
69
+ setFilter: setFilter,
70
+ /**
71
+ * The options that should be passed to the radio group.
72
+ */
73
+ options,
74
+ /**
75
+ * The value that should be passed to the radio group.
76
+ */
77
+ value,
78
+ /**
79
+ * Changes the current value, should be passed to the property `onChange` of the radio group.
80
+ */
81
+ setValue,
82
+ /**
83
+ * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
84
+ */
85
+ renderKey,
86
+ /**
87
+ * A function that returns true if the option is filtered out, but checked.
88
+ * @param option the option to check.
89
+ * @returns true if the option was filtered out, but is checked; false otherwise.
90
+ */
91
+ isUnfilteredButChecked,
92
+ }
93
+ }
@@ -1,6 +1,6 @@
1
- /* eslint-disable react/display-name */
2
- import { forwardRef } from 'react'
3
-
4
- export function withRef<T extends (...args: any[]) => any>(fc: T): T {
5
- return forwardRef((props, ref) => fc({ ...props, ref })) as any
6
- }
1
+ /* eslint-disable react/display-name */
2
+ import { forwardRef } from 'react'
3
+
4
+ export function withRef<T extends (...args: any[]) => any>(fc: T): T {
5
+ return forwardRef((props, ref) => fc({ ...props, ref })) as any
6
+ }
package/tsconfig.json CHANGED
@@ -1,10 +1,10 @@
1
- {
2
- "extends": "../../tsconfig.json",
3
- "include": ["src"],
4
- "compilerOptions": {
5
- "outDir": "dist",
6
- "paths": {
7
- "css/*": ["../css/*"]
8
- }
9
- }
10
- }
1
+ {
2
+ "extends": "../../tsconfig.json",
3
+ "include": ["src"],
4
+ "compilerOptions": {
5
+ "outDir": "dist",
6
+ "paths": {
7
+ "css/*": ["../css/*"]
8
+ }
9
+ }
10
+ }