@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

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 (248) hide show
  1. package/Avatar.js +63 -0
  2. package/CHANGELOG.md +7 -0
  3. package/Divider.js +23 -0
  4. package/{GeneUIProvider/index.js → GeneUIProvider.js} +52 -65
  5. package/HelperText.js +69 -0
  6. package/Info.js +64 -0
  7. package/Label.js +38 -0
  8. package/Loader.js +21 -0
  9. package/Pill.js +64 -0
  10. package/TextLink.js +20 -0
  11. package/{index-65217440.js → Tooltip.js} +104 -80
  12. package/{lib → components}/atoms/Avatar/Avatar.d.ts +7 -6
  13. package/components/atoms/Avatar/index.d.ts +1 -0
  14. package/{lib → components}/atoms/Divider/Divider.d.ts +5 -5
  15. package/components/atoms/Divider/index.d.ts +1 -0
  16. package/{lib → components}/atoms/HelperText/HelperText.d.ts +6 -5
  17. package/components/atoms/HelperText/index.d.ts +1 -0
  18. package/{lib → components}/atoms/Info/Info.d.ts +5 -5
  19. package/components/atoms/Info/index.d.ts +1 -0
  20. package/{lib → components}/atoms/Label/Label.d.ts +3 -3
  21. package/components/atoms/Label/index.d.ts +1 -0
  22. package/{lib → components}/atoms/Loader/Loader.d.ts +5 -5
  23. package/components/atoms/Loader/index.d.ts +1 -0
  24. package/{lib → components}/atoms/Pill/Pill.d.ts +7 -6
  25. package/components/atoms/Pill/index.d.ts +1 -0
  26. package/{lib → components}/atoms/TextLink/TextLink.d.ts +5 -5
  27. package/components/atoms/TextLink/index.d.ts +1 -0
  28. package/{lib → components}/molecules/Tooltip/Tooltip.d.ts +26 -21
  29. package/components/molecules/Tooltip/index.d.ts +1 -0
  30. package/components/providers/GeneUIProvider/GeneUIProvider.d.ts +30 -0
  31. package/components/providers/GeneUIProvider/index.d.ts +1 -0
  32. package/hooks/index.d.ts +2 -20
  33. package/hooks/useDebounceCallback/index.d.ts +1 -0
  34. package/hooks/useDebounceCallback/useDebounceCallback.d.ts +2 -0
  35. package/hooks/useEllipsisDetection/index.d.ts +1 -1
  36. package/hooks/useEllipsisDetection/useEllipsisDetection.d.ts +2 -2
  37. package/{index-031ff73c.js → index-ce02421b.js} +4 -4
  38. package/index.d.ts +11 -121
  39. package/index.js +12 -159
  40. package/package.json +24 -43
  41. package/tokens-0abb4e1b.js +6 -0
  42. package/types/index.d.ts +0 -3
  43. package/useEllipsisDetection-46d712b6.js +34 -0
  44. package/ActionableList/index.js +0 -1694
  45. package/AdvancedSearch/index.js +0 -892
  46. package/Alert/index.js +0 -98
  47. package/Avatar/index.js +0 -58
  48. package/Badge/index.js +0 -29
  49. package/Breadcrumb/index.js +0 -130
  50. package/BusyLoader/index.js +0 -31
  51. package/Button/index.js +0 -30
  52. package/Card/index.js +0 -502
  53. package/CardList/index.js +0 -662
  54. package/CellMeasurerCache-80be385d.js +0 -229
  55. package/Charts/index.js +0 -17662
  56. package/Checkbox/index.js +0 -229
  57. package/CheckboxGroup/index.js +0 -203
  58. package/CheckboxGroupWithSearch/index.js +0 -280
  59. package/Collapse/index.js +0 -195
  60. package/ColorPicker/index.js +0 -210
  61. package/ComboBox/index.js +0 -524
  62. package/Copy/index.js +0 -56
  63. package/Counter/index.js +0 -312
  64. package/DateFilter/index.js +0 -183
  65. package/DatePicker/index.js +0 -1229
  66. package/DatePickerInput/index.js +0 -883
  67. package/Divider/index.js +0 -23
  68. package/Drawer/index.js +0 -261
  69. package/Dropdown/index.js +0 -43
  70. package/Editor/index.js +0 -22975
  71. package/Empty/index.js +0 -76
  72. package/ExtendedInput/index.js +0 -590
  73. package/Form/index.js +0 -85
  74. package/FormContainer/index.js +0 -189
  75. package/FormableCheckbox/index.js +0 -24
  76. package/FormableDatePicker/index.js +0 -43
  77. package/FormableDropdown/index.js +0 -50
  78. package/FormableEditor/index.js +0 -26
  79. package/FormableHOC-85f89a81.js +0 -83
  80. package/FormableMultiSelectDropdown/index.js +0 -50
  81. package/FormableNumberInput/index.js +0 -34
  82. package/FormableRadio/index.js +0 -22
  83. package/FormableSwitcher/index.js +0 -22
  84. package/FormableTextInput/index.js +0 -34
  85. package/FormableUploader/index.js +0 -44
  86. package/Grid/index.js +0 -167
  87. package/HelperText/index.js +0 -86
  88. package/Holder/index.js +0 -261
  89. package/Icon/index.js +0 -62
  90. package/Image/index.js +0 -45
  91. package/ImagePreview/index.js +0 -217
  92. package/Info/index.js +0 -41
  93. package/InfoOutline-dd2e89d9.js +0 -29
  94. package/InteractiveWidget/index.js +0 -78
  95. package/KeyValue/index.js +0 -22
  96. package/Label/index.js +0 -48
  97. package/LinkButton/index.js +0 -34
  98. package/Loader/index.js +0 -23
  99. package/Menu/index.js +0 -281
  100. package/MobileNavigation/index.js +0 -94
  101. package/MobilePopup/index.js +0 -182
  102. package/Modal/index.js +0 -251
  103. package/ModuleTitle/index.js +0 -141
  104. package/NavigationMenu/index.js +0 -222
  105. package/Notification/index.js +0 -120
  106. package/Option/index.js +0 -184
  107. package/Overlay/index.js +0 -187
  108. package/Overspread/index.js +0 -291
  109. package/Pagination/index.js +0 -261
  110. package/Paper/index.js +0 -96
  111. package/Pill/index.js +0 -67
  112. package/Popover/index.js +0 -725
  113. package/PopoverV2/index.js +0 -19
  114. package/Portal/index.js +0 -58
  115. package/Products/index.js +0 -115
  116. package/Profile/index.js +0 -589
  117. package/Progress/index.js +0 -200
  118. package/QRCode/index.js +0 -814
  119. package/Radio/index.js +0 -151
  120. package/RadioGroup/index.js +0 -104
  121. package/Range/index.js +0 -191
  122. package/Rating/index.js +0 -174
  123. package/RichEditor/index.js +0 -13
  124. package/RichEditor-78c2617e.js +0 -228
  125. package/Scrollbar/index.js +0 -1585
  126. package/Search/index.js +0 -75
  127. package/SearchWithDropdown/index.js +0 -140
  128. package/Section/index.js +0 -61
  129. package/SkeletonLoader/index.js +0 -81
  130. package/Slider/index.js +0 -261
  131. package/Status/index.js +0 -97
  132. package/Steps/index.js +0 -314
  133. package/SuggestionList/index.js +0 -385
  134. package/Switcher/index.js +0 -193
  135. package/Table/index.js +0 -57
  136. package/TableCompositions/index.js +0 -16995
  137. package/Tabs/index.js +0 -235
  138. package/Tag/index.js +0 -102
  139. package/TextLink/index.js +0 -20
  140. package/Textarea/index.js +0 -242
  141. package/Time/index.js +0 -62
  142. package/TimePicker/index.js +0 -575
  143. package/Timeline/index.js +0 -113
  144. package/Title/index.js +0 -65
  145. package/Toaster/index.js +0 -116
  146. package/Tooltip/index.js +0 -6
  147. package/TransferList/index.js +0 -493
  148. package/Uploader/index.js +0 -992
  149. package/ValidatableCheckbox/index.js +0 -123
  150. package/ValidatableDatePicker/index.js +0 -316
  151. package/ValidatableDropdown/index.js +0 -141
  152. package/ValidatableElements/index.js +0 -67
  153. package/ValidatableMultiSelectDropdown/index.js +0 -152
  154. package/ValidatableNumberInput/index.js +0 -204
  155. package/ValidatableRadio/index.js +0 -116
  156. package/ValidatableSwitcher/index.js +0 -93
  157. package/ValidatableTextInput/index.js +0 -167
  158. package/ValidatableTimeInput/index.js +0 -174
  159. package/ValidatableUploader/index.js +0 -98
  160. package/Widget/index.js +0 -225
  161. package/_commonjsHelpers-24198af3.js +0 -35
  162. package/_rollupPluginBabelHelpers-a83240e1.js +0 -11
  163. package/callAfterDelay-7272faca.js +0 -12
  164. package/checkTimeValidation-e56771be.js +0 -16
  165. package/checkboxRadioSwitcher-5b69d7bd.js +0 -4
  166. package/clsx.m-2bb6df4b.js +0 -3
  167. package/config-1053d64d.js +0 -20
  168. package/configs-00612ce0.js +0 -103
  169. package/configs.js +0 -111
  170. package/dateValidation-67caec66.js +0 -225
  171. package/debounce-4419bc2f.js +0 -17
  172. package/guid-8ddf77b3.js +0 -16
  173. package/hooks/useBodyScroll.js +0 -16
  174. package/hooks/useClick.js +0 -18
  175. package/hooks/useClickOutside.js +0 -25
  176. package/hooks/useDebounce.js +0 -28
  177. package/hooks/useDeviceType.js +0 -17
  178. package/hooks/useDidMount.js +0 -15
  179. package/hooks/useForceUpdate.js +0 -8
  180. package/hooks/useHover.js +0 -20
  181. package/hooks/useImgDownload.js +0 -18
  182. package/hooks/useKeyDown.js +0 -21
  183. package/hooks/useMount.js +0 -13
  184. package/hooks/useMutationObserver.js +0 -21
  185. package/hooks/usePrevious.js +0 -10
  186. package/hooks/useThrottle.js +0 -16
  187. package/hooks/useToggle.js +0 -11
  188. package/hooks/useUpdatableRef.js +0 -14
  189. package/hooks/useUpdate.js +0 -10
  190. package/hooks/useWidth.js +0 -16
  191. package/hooks/useWindowSize.js +0 -40
  192. package/index-122432cd.js +0 -270
  193. package/index-262edd7a.js +0 -77
  194. package/index-2f5aa51e.js +0 -6483
  195. package/index-370f9acd.js +0 -4
  196. package/index-45eafea6.js +0 -90
  197. package/index-480fd7d9.js +0 -10032
  198. package/index-5f37f281.js +0 -168
  199. package/index-73aaa093.js +0 -1940
  200. package/index.mobile.d.ts +0 -14
  201. package/lib/atoms/Avatar/index.d.ts +0 -1
  202. package/lib/atoms/Badge/Badge.d.ts +0 -36
  203. package/lib/atoms/Badge/index.d.ts +0 -1
  204. package/lib/atoms/BusyLoader/BusyLoader.d.ts +0 -32
  205. package/lib/atoms/BusyLoader/BusyLoaderHolderHOC.d.ts +0 -8
  206. package/lib/atoms/BusyLoader/index.d.ts +0 -1
  207. package/lib/atoms/Button/Button.d.ts +0 -70
  208. package/lib/atoms/Button/index.d.ts +0 -1
  209. package/lib/atoms/Divider/index.d.ts +0 -1
  210. package/lib/atoms/Empty/Empty.d.ts +0 -39
  211. package/lib/atoms/Empty/index.d.ts +0 -1
  212. package/lib/atoms/Empty/utils.d.ts +0 -9
  213. package/lib/atoms/HelperText/index.d.ts +0 -1
  214. package/lib/atoms/Image/Image.d.ts +0 -51
  215. package/lib/atoms/Image/index.d.ts +0 -1
  216. package/lib/atoms/ImagePreview/ImagePreview.d.ts +0 -56
  217. package/lib/atoms/ImagePreview/ImagePreviewHOC.d.ts +0 -4
  218. package/lib/atoms/ImagePreview/Magnifier.d.ts +0 -40
  219. package/lib/atoms/ImagePreview/index.d.ts +0 -1
  220. package/lib/atoms/Info/index.d.ts +0 -1
  221. package/lib/atoms/KeyValue/KeyValue.d.ts +0 -29
  222. package/lib/atoms/KeyValue/index.d.ts +0 -1
  223. package/lib/atoms/Label/index.d.ts +0 -1
  224. package/lib/atoms/LinkButton/LinkButton.d.ts +0 -46
  225. package/lib/atoms/LinkButton/index.d.ts +0 -1
  226. package/lib/atoms/Loader/index.d.ts +0 -1
  227. package/lib/atoms/Pill/index.d.ts +0 -1
  228. package/lib/atoms/Rating/DefaultSvg.d.ts +0 -3
  229. package/lib/atoms/Rating/Rating.d.ts +0 -49
  230. package/lib/atoms/Rating/index.d.ts +0 -1
  231. package/lib/atoms/TextLink/index.d.ts +0 -1
  232. package/lib/molecules/Copy/Copy.d.ts +0 -38
  233. package/lib/molecules/Copy/index.d.ts +0 -1
  234. package/lib/molecules/InteractiveWidget/InteractiveWidget.d.ts +0 -70
  235. package/lib/molecules/InteractiveWidget/InteractiveWidgetIcon.d.ts +0 -8
  236. package/lib/molecules/InteractiveWidget/index.d.ts +0 -1
  237. package/lib/molecules/Tooltip/index.d.ts +0 -1
  238. package/lib/providers/GeneUIProvider/GeneUIProvider.d.ts +0 -30
  239. package/lib/providers/GeneUIProvider/index.d.ts +0 -1
  240. package/localization-4ba17032.js +0 -46
  241. package/objectWithoutPropertiesLoose-e1596bdb.js +0 -62
  242. package/rangeAndSlider-693a3d41.js +0 -8684
  243. package/react-beautiful-dnd.esm-b637016a.js +0 -10116
  244. package/react-lifecycles-compat.es-6e1f3768.js +0 -158
  245. package/redux-e591c1b8.js +0 -536
  246. package/tokens-8ab1179c.js +0 -6
  247. package/tslib.es6-f211516f.js +0 -35
  248. package/useEllipsisDetection-c1c9ad94.js +0 -38
package/Checkbox/index.js DELETED
@@ -1,229 +0,0 @@
1
- import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
2
- import React__default, { forwardRef, useState, useMemo } from 'react';
3
- import PropTypes from 'prop-types';
4
- import { c as classnames } from '../index-031ff73c.js';
5
- import { c as checkboxRadioSwitcherConfig } from '../configs-00612ce0.js';
6
- import { n as noop, i as interceptValue, s as stopEvent } from '../index-5f37f281.js';
7
- import { T as Tooltip } from '../index-65217440.js';
8
- import '../checkboxRadioSwitcher-5b69d7bd.js';
9
- import { g as guid } from '../guid-8ddf77b3.js';
10
- import '../dateValidation-67caec66.js';
11
- import '../_commonjsHelpers-24198af3.js';
12
- import 'react-dom';
13
- import '../tslib.es6-f211516f.js';
14
- import '../GeneUIProvider/index.js';
15
- import '../style-inject.es-746bb8ed.js';
16
-
17
- const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
18
- const {
19
- size,
20
- label,
21
- labelPosition,
22
- labelTooltip,
23
- labelAlignment,
24
- description,
25
- indeterminate,
26
- readOnly,
27
- disabled,
28
- required,
29
- isValid,
30
- errorText,
31
- defaultChecked,
32
- onChange,
33
- value,
34
- className,
35
- onKeyPress,
36
- checked,
37
- onWrapperClick,
38
- onMouseEnter,
39
- onMouseLeave,
40
- ...restProps
41
- } = props;
42
- const [checkedState, setCheckedState] = useState(defaultChecked);
43
- const isControlled = 'checked' in props && typeof checked !== 'undefined';
44
- const localChecked = isControlled ? checked : checkedState;
45
- const randomId = useMemo(guid, []);
46
- const handleChange = e => {
47
- const {
48
- checked
49
- } = e.target;
50
- !isControlled && setCheckedState(checked);
51
- onChange(interceptValue(e, value));
52
- };
53
- const handleKeyPress = e => {
54
- if (e.which === 13 || e.keyCode === 13) {
55
- // need this for prevent form default submit
56
- stopEvent(e);
57
- const {
58
- checked
59
- } = e.target;
60
-
61
- // need this because in event time checkbox value is old.
62
- const changedEvent = {
63
- ...e
64
- };
65
- changedEvent.target.checked = !checked;
66
- !isControlled && setCheckedState(checked => !checked);
67
- onChange(interceptValue(changedEvent, value));
68
- }
69
- onKeyPress(e);
70
- };
71
- const hasError = !isValid;
72
- return /*#__PURE__*/React__default.createElement("div", {
73
- onMouseEnter: onMouseEnter,
74
- onMouseLeave: onMouseLeave,
75
- className: classnames('crs-holder', className, "lp-".concat(labelPosition), "la-".concat(labelAlignment), {
76
- disabled,
77
- error: hasError,
78
- 'read-only': readOnly
79
- }),
80
- onClick: onWrapperClick
81
- }, /*#__PURE__*/React__default.createElement("div", {
82
- className: classnames('label-holder', {
83
- 'has-label': !!label
84
- })
85
- }, label && /*#__PURE__*/React__default.createElement(Tooltip, {
86
- position: "auto",
87
- title: label,
88
- isVisible: labelTooltip
89
- }, /*#__PURE__*/React__default.createElement("div", {
90
- className: "crs-item crs-label"
91
- }, /*#__PURE__*/React__default.createElement("label", {
92
- className: "ellipsis-text",
93
- title: labelTooltip,
94
- htmlFor: randomId
95
- }, required && "* ", label))), /*#__PURE__*/React__default.createElement("div", {
96
- className: "crs-item crs-component"
97
- }, /*#__PURE__*/React__default.createElement("input", _extends({
98
- type: "checkbox",
99
- onKeyPress: handleKeyPress,
100
- onChange: handleChange,
101
- checked: localChecked,
102
- disabled: disabled,
103
- value: value,
104
- ref: ref,
105
- id: randomId
106
- }, restProps)), /*#__PURE__*/React__default.createElement("label", {
107
- className: classnames('checkbox', 'cr-element', "s-".concat(size), {
108
- indeterminate,
109
- active: !indeterminate && localChecked,
110
- 'error-color': !indeterminate && !localChecked && !errorText && hasError
111
- }),
112
- htmlFor: randomId
113
- }))), hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
114
- className: "information-message color-danger"
115
- }, errorText), description && /*#__PURE__*/React__default.createElement("div", {
116
- className: "input-description"
117
- }, description));
118
- });
119
- Checkbox.propTypes = {
120
- /**
121
- * At what point an element becomes focusable when a user is interacting with the page via a keyboard
122
- */
123
- tabIndex: PropTypes.number,
124
- /**
125
- * Use this prop to control Checkbox state. Note that when you specify this prop, the Checkbox will not functionate itself
126
- */
127
- checked: PropTypes.bool,
128
- /**
129
- * Checkbox size
130
- */
131
- size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
132
- /**
133
- * Use this prop to add an additional label to Checkbox
134
- */
135
- label: PropTypes.node,
136
- /**
137
- * Tooltip for label
138
- */
139
- labelTooltip: PropTypes.string,
140
- /**
141
- * Specify "label" position
142
- */
143
- labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
144
- /**
145
- * Specify "label" alignment
146
- */
147
- labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
148
- /**
149
- * Use this prop to add an additional description field to the Checkbox
150
- */
151
- description: PropTypes.node,
152
- /**
153
- * Use this prop to make checkbox neither checked nor unchecked
154
- */
155
- indeterminate: PropTypes.bool,
156
- /**
157
- * Makes Checkbox readonly when set to "true"
158
- */
159
- readOnly: PropTypes.bool,
160
- /**
161
- * Makes Checkbox disabled when set to "true"
162
- */
163
- disabled: PropTypes.bool,
164
- /**
165
- * Checkbox adds an extra asterisk to the "label". For more info see "ValidatableCheckbox"(integrated Checkbox with "Form" organism).
166
- */
167
- required: PropTypes.bool,
168
- /**
169
- * Control Checkbox validation. For more info see "ValidatableCheckbox"(integrated Checkbox with "Form" organism).
170
- */
171
- isValid: PropTypes.bool,
172
- /**
173
- * Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
174
- */
175
- errorText: PropTypes.node,
176
- /**
177
- * This prop will only applied once as defaultState for "checked" when Checkbox mounts.
178
- * Note that specifying this prop does not mean to control it.
179
- */
180
- defaultChecked: PropTypes.bool,
181
- /**
182
- * Fires an event when Checkbox is clicked or "enter" key is pressed((event: Event) => void).
183
- */
184
- onChange: PropTypes.func,
185
- /**
186
- * Fires an event when any key is pressed((event: Event) => void).
187
- */
188
- onKeyPress: PropTypes.func,
189
- /**
190
- * Fires an event when mouse enter((event: Event) => void).
191
- */
192
- onMouseEnter: PropTypes.func,
193
- /**
194
- * Fires an event when mouse leave((event: Event) => void).
195
- */
196
- onMouseLeave: PropTypes.func,
197
- /**
198
- * Fires an event when clicking on parent/wrapper of input ((event: Event) => void).
199
- */
200
- onWrapperClick: PropTypes.func,
201
- /**
202
- * Use this prop to get specified value when "onChange" is fired
203
- */
204
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
205
- /**
206
- * Additional className
207
- */
208
- className: PropTypes.string
209
- };
210
- Checkbox.defaultProps = {
211
- tabIndex: 0,
212
- size: checkboxRadioSwitcherConfig.size[0],
213
- label: '',
214
- labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
215
- labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0],
216
- description: '',
217
- indeterminate: false,
218
- readOnly: false,
219
- disabled: false,
220
- required: false,
221
- isValid: true,
222
- errorText: '',
223
- defaultChecked: false,
224
- onKeyPress: noop,
225
- onChange: noop,
226
- onWrapperClick: noop
227
- };
228
-
229
- export { Checkbox as default };
@@ -1,203 +0,0 @@
1
- import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
2
- import React__default, { useState, useEffect, useCallback } from 'react';
3
- import { c as classnames } from '../index-031ff73c.js';
4
- import PropTypes from 'prop-types';
5
- import { c as checkboxRadioSwitcherConfig } from '../configs-00612ce0.js';
6
- import { n as noop } from '../index-5f37f281.js';
7
- import Checkbox from '../Checkbox/index.js';
8
- import '../dateValidation-67caec66.js';
9
- import '../_commonjsHelpers-24198af3.js';
10
- import 'react-dom';
11
- import '../index-65217440.js';
12
- import '../tslib.es6-f211516f.js';
13
- import '../GeneUIProvider/index.js';
14
- import '../style-inject.es-746bb8ed.js';
15
- import '../checkboxRadioSwitcher-5b69d7bd.js';
16
- import '../guid-8ddf77b3.js';
17
-
18
- function CheckboxGroup(props) {
19
- const {
20
- defaultSelected,
21
- hoveredState,
22
- labelAlignment,
23
- showSelectAll,
24
- labelPosition,
25
- checkAllText,
26
- description,
27
- errorText,
28
- className,
29
- disabled,
30
- onChange,
31
- readOnly,
32
- required,
33
- isValid,
34
- data,
35
- size,
36
- ...restProps
37
- } = props;
38
- const [valueState, setValueState] = useState(defaultSelected);
39
- const isControlled = 'value' in props && props.value;
40
- const values = isControlled ? props.value : valueState;
41
- useEffect(() => {
42
- setValueState(defaultSelected);
43
- }, [defaultSelected]);
44
- const handleChange = useCallback(e => {
45
- const {
46
- checked,
47
- value
48
- } = e.target;
49
- const newValues = checked ? values.concat(value) : values.filter(item => item !== value);
50
- !isControlled && setValueState(newValues);
51
- onChange && onChange(newValues);
52
- }, [isControlled, onChange, values]);
53
- const handleChangeAll = useCallback(e => {
54
- const {
55
- checked
56
- } = e.target;
57
- const newValues = checked ? data.filter(option => !option.disabled).map(option => option.value) : [];
58
- !isControlled && setValueState(newValues);
59
- onChange && onChange(newValues);
60
- }, [data, isControlled, onChange]);
61
- const dataLength = data.filter(item => !item.disabled).length;
62
- const valuesLength = values.length;
63
- return /*#__PURE__*/React__default.createElement("div", _extends({
64
- className: classnames('cha-ra-group', className)
65
- }, restProps), showSelectAll && data.length > 1 && /*#__PURE__*/React__default.createElement(Checkbox, {
66
- value: "all",
67
- disabled: dataLength ? disabled : true,
68
- checked: valuesLength === dataLength,
69
- indeterminate: valuesLength > 0 && valuesLength < dataLength,
70
- onChange: handleChangeAll,
71
- label: checkAllText,
72
- size: size,
73
- labelPosition: labelPosition,
74
- labelAlignment: labelAlignment,
75
- readOnly: readOnly
76
- }), data.map((option, index) => {
77
- const isTypeofString = typeof option === 'string';
78
- const label = isTypeofString ? option : option.label;
79
- const value = isTypeofString ? option : option.value;
80
- return /*#__PURE__*/React__default.createElement(Checkbox, {
81
- labelTooltip: option.labelTooltip || '',
82
- className: classnames(option.className, {
83
- active: hoveredState === index
84
- }),
85
- key: value,
86
- disabled: disabled || option.disabled,
87
- label: label,
88
- value: value,
89
- checked: values.includes(value),
90
- onChange: handleChange,
91
- description: description || option.description,
92
- readOnly: readOnly || option.readOnly,
93
- required: required || option.required,
94
- isValid: !(isValid || option.isValid),
95
- errorText: errorText || option.errorText,
96
- size: size,
97
- labelPosition: labelPosition,
98
- labelAlignment: labelAlignment
99
- });
100
- }));
101
- }
102
- CheckboxGroup.propTypes = {
103
- /** Initially selected value */
104
- defaultSelected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])),
105
- /**
106
- * Disables events
107
- */
108
- disabled: PropTypes.bool,
109
- /**
110
- * If data item is typeof string than value will apply both as checkbox label and value,
111
- * Label: The text of the associated element.
112
- * Value: The input value
113
- * Disabled: A checkbox can appear disabled and be unable to change states
114
- * readOnly: A checkbox can be read-only and unable to change states.
115
- * required: If true, the input element will be required.
116
- * labelTooltip: Tooltip for label.
117
- * description: Checkbox description.
118
- * isValid: Check validity of input value
119
- * errorText: Displays custom error text when input value is not valid
120
- */
121
- data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
122
- label: PropTypes.node,
123
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
124
- disabled: PropTypes.bool,
125
- description: PropTypes.string,
126
- labelTooltip: PropTypes.string,
127
- readOnly: PropTypes.bool,
128
- required: PropTypes.bool,
129
- isValid: PropTypes.bool,
130
- errorText: PropTypes.string
131
- })])),
132
- /**
133
- * Custom text for checkAll checkbox
134
- */
135
- checkAllText: PropTypes.string,
136
- /**
137
- * Displays select all checkbox
138
- */
139
- showSelectAll: PropTypes.bool,
140
- /**
141
- * Array of values of the input elements
142
- */
143
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
144
- /**
145
- * Fires an event when Checkbox is clicked or "enter" key is pressed
146
- * (event: SyntheticEvent) => void
147
- */
148
- onChange: PropTypes.func,
149
- /**
150
- * Additional className which applies to group holder div element
151
- */
152
- className: PropTypes.string,
153
- /**
154
- * Accepts same values as Checkbox component(check in Checkbox component(molecules) propTable)
155
- */
156
- size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
157
- /**
158
- * Specify "label" position
159
- */
160
- labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
161
- /**
162
- * Specify "label" alignment
163
- */
164
- labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
165
- /**
166
- * Description for checkboxes
167
- */
168
- description: PropTypes.string,
169
- /**
170
- * Define is field read only or no.
171
- */
172
- readOnly: PropTypes.bool,
173
- /**
174
- * Define is field required or no.
175
- */
176
- required: PropTypes.bool,
177
- /**
178
- * Additional state for field validation
179
- */
180
- isValid: PropTypes.bool,
181
- /**
182
- * Text that will be shown id field is invalid
183
- */
184
- errorText: PropTypes.string
185
- };
186
- CheckboxGroup.defaultProps = {
187
- defaultSelected: [],
188
- disabled: false,
189
- showSelectAll: true,
190
- data: [],
191
- description: '',
192
- checkAllText: 'Select All',
193
- readOnly: false,
194
- required: false,
195
- isValid: true,
196
- onChange: noop,
197
- errorText: '',
198
- size: checkboxRadioSwitcherConfig.size[0],
199
- labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
200
- labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0]
201
- };
202
-
203
- export { CheckboxGroup as default };