@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,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
+ }