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