@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/Radio/index.js DELETED
@@ -1,151 +0,0 @@
1
- import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
2
- import React__default, { forwardRef, 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 { i as interceptValue } from '../index-5f37f281.js';
7
- import '../checkboxRadioSwitcher-5b69d7bd.js';
8
- import { g as guid } from '../guid-8ddf77b3.js';
9
- import '../dateValidation-67caec66.js';
10
- import '../_commonjsHelpers-24198af3.js';
11
- import 'react-dom';
12
- import '../style-inject.es-746bb8ed.js';
13
-
14
- const Radio = /*#__PURE__*/forwardRef((_ref, ref) => {
15
- let {
16
- size,
17
- label,
18
- labelPosition,
19
- labelAlignment,
20
- description,
21
- readOnly,
22
- disabled,
23
- required,
24
- isValid,
25
- errorText,
26
- value,
27
- onChange,
28
- checked,
29
- className,
30
- type,
31
- ...restProps
32
- } = _ref;
33
- const randomId = useMemo(guid, []);
34
- const handleChange = e => {
35
- onChange && onChange(interceptValue(e, value));
36
- };
37
- const hasError = !isValid;
38
- return /*#__PURE__*/React__default.createElement("div", {
39
- className: classnames('crs-holder', className, "lp-".concat(labelPosition), "la-".concat(labelAlignment), "t-".concat(type), {
40
- disabled,
41
- error: hasError,
42
- 'read-only': readOnly,
43
- 'input-active': checked
44
- })
45
- }, /*#__PURE__*/React__default.createElement("div", {
46
- className: classnames('label-holder', {
47
- 'has-label': !!label
48
- })
49
- }, label && /*#__PURE__*/React__default.createElement("div", {
50
- className: "crs-item crs-label"
51
- }, /*#__PURE__*/React__default.createElement("label", {
52
- className: "ellipsis-text",
53
- htmlFor: randomId
54
- }, required && "* ", label)), /*#__PURE__*/React__default.createElement("div", {
55
- className: "crs-item crs-component"
56
- }, /*#__PURE__*/React__default.createElement("input", _extends({
57
- type: "radio",
58
- onChange: handleChange,
59
- ref: ref,
60
- id: randomId,
61
- checked: checked
62
- }, restProps)), /*#__PURE__*/React__default.createElement("label", {
63
- className: classnames('radio', 'cr-element', "s-".concat(size), {
64
- active: checked,
65
- 'error-color': !checked && !errorText && hasError
66
- }),
67
- htmlFor: randomId
68
- }))), hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
69
- className: "information-message color-danger"
70
- }, errorText), description && type !== 'tab' && /*#__PURE__*/React__default.createElement("div", {
71
- className: "input-description"
72
- }, description));
73
- });
74
- Radio.propTypes = {
75
- /**
76
- * Radio size
77
- */
78
- size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
79
- /**
80
- * A label will be added to the Radio
81
- */
82
- label: PropTypes.string,
83
- /**
84
- * Specify the label position
85
- */
86
- labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
87
- /**
88
- * Specify the label alignment
89
- */
90
- labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
91
- /**
92
- * Optional description field
93
- */
94
- description: PropTypes.string,
95
- /**
96
- * Will make Radio readonly when set to "true"
97
- */
98
- readOnly: PropTypes.bool,
99
- /**
100
- * Will make Radio disabled when set to "true"
101
- */
102
- disabled: PropTypes.bool,
103
- /**
104
- * Radio will add an extra asterix to the "label". For more info see "ValidatableRadio"(integrated Radio with "Form" organism).
105
- */
106
- required: PropTypes.bool,
107
- /**
108
- * Control Radio validation. For more info see "ValidatableRadio"(integrated Radio with "Form" organism).
109
- */
110
- isValid: PropTypes.bool,
111
- /**
112
- * Shows error text when "isValid" is set to "false".
113
- */
114
- errorText: PropTypes.string,
115
- /**
116
- * Use this prop to get specified value when "onChange" is fired
117
- */
118
- value: PropTypes.any,
119
- /**
120
- * Fires an event when Radio is clicked((event: Event) => void).
121
- */
122
- onChange: PropTypes.func,
123
- /**
124
- * Specifies does the Radio checked or not.
125
- */
126
- checked: PropTypes.bool,
127
- /**
128
- * Needed for "RadioGroup" molecule
129
- */
130
- name: PropTypes.string,
131
- /**
132
- * Type defines the appearance of the radio
133
- */
134
- type: PropTypes.oneOf(['default', 'tab'])
135
- };
136
- Radio.defaultProps = {
137
- size: checkboxRadioSwitcherConfig.size[0],
138
- label: '',
139
- labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
140
- labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0],
141
- description: '',
142
- readOnly: false,
143
- disabled: false,
144
- required: false,
145
- isValid: true,
146
- errorText: '',
147
- checked: false,
148
- type: 'default'
149
- };
150
-
151
- export { Radio as default };
@@ -1,104 +0,0 @@
1
- import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
2
- import React__default, { useState, useCallback } from 'react';
3
- import PropTypes from 'prop-types';
4
- import { c as classnames } from '../index-031ff73c.js';
5
- import { c as childrenOf } from '../index-5f37f281.js';
6
- import Radio from '../Radio/index.js';
7
- import '../dateValidation-67caec66.js';
8
- import '../_commonjsHelpers-24198af3.js';
9
- import 'react-dom';
10
- import '../configs-00612ce0.js';
11
- import '../checkboxRadioSwitcher-5b69d7bd.js';
12
- import '../style-inject.es-746bb8ed.js';
13
- import '../guid-8ddf77b3.js';
14
-
15
- function RadioGroup(props) {
16
- const {
17
- defaultValue,
18
- name,
19
- options,
20
- descriptionKey,
21
- disabled,
22
- onChange,
23
- required,
24
- type,
25
- ...restProps
26
- } = props;
27
- const [valueState, setValueState] = useState(defaultValue);
28
- const isControlled = !!props.value;
29
- const value = isControlled ? props.value : valueState;
30
- const handleChange = useCallback(e => {
31
- !isControlled && setValueState(e.target.value);
32
- onChange && onChange(e);
33
- }, [isControlled, onChange]);
34
- return /*#__PURE__*/React__default.createElement("div", {
35
- className: classnames('cha-ra-group', "t-".concat(type))
36
- }, options.map(option => {
37
- const isOptionsString = typeof option === 'string';
38
- const optionValue = isOptionsString ? option : option.value;
39
- const label = isOptionsString ? option : option.label;
40
- return /*#__PURE__*/React__default.createElement(Radio, _extends({
41
- key: optionValue,
42
- name: name,
43
- label: label,
44
- description: option[descriptionKey],
45
- disabled: disabled || option.disabled,
46
- checked: optionValue === value,
47
- onChange: handleChange
48
- }, restProps, {
49
- value: optionValue,
50
- type: type
51
- }));
52
- }));
53
- }
54
- RadioGroup.propTypes = {
55
- /**
56
- * Disabled state
57
- */
58
- disabled: PropTypes.bool,
59
- /**
60
- * Validation state
61
- */
62
- required: PropTypes.bool,
63
- /**
64
- * Options/items for radio group
65
- */
66
- options: PropTypes.arrayOf(PropTypes.oneOfType([childrenOf([Radio]), PropTypes.shape({
67
- label: Radio.propTypes.label,
68
- value: Radio.propTypes.value,
69
- disabled: Radio.propTypes.disabled
70
- })])),
71
- /**
72
- * Initial value.
73
- */
74
- defaultValue: Radio.propTypes.value,
75
- /**
76
- * Name of appropriate radio group
77
- */
78
- name: Radio.propTypes.name.isRequired,
79
- /**
80
- * Selected option's value
81
- */
82
- value: Radio.propTypes.value,
83
- /**
84
- * Fires an event on change((event: Event) => void)
85
- */
86
- onChange: PropTypes.func,
87
- /**
88
- * Type defines the appearance of the radio
89
- */
90
- type: PropTypes.oneOf(['default', 'tab']),
91
- /**
92
- * Description definer: one of keys from your object
93
- */
94
- descriptionKey: PropTypes.string
95
- };
96
- RadioGroup.defaultProps = {
97
- disabled: false,
98
- required: false,
99
- options: [],
100
- type: 'default',
101
- descriptionKey: 'description'
102
- };
103
-
104
- export { RadioGroup as default };
package/Range/index.js DELETED
@@ -1,191 +0,0 @@
1
- import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
2
- import React__default, { useState, useRef, useCallback } from 'react';
3
- import PropTypes from 'prop-types';
4
- import { c as classnames } from '../index-031ff73c.js';
5
- import { c as createSliderWithTooltip, R as Range } from '../rangeAndSlider-693a3d41.js';
6
- import useWidth from '../hooks/useWidth.js';
7
- import '../dateValidation-67caec66.js';
8
- import 'react-dom';
9
- import useToggle from '../hooks/useToggle.js';
10
- import '../configs-00612ce0.js';
11
- import '../_commonjsHelpers-24198af3.js';
12
- import '../index-45eafea6.js';
13
- import '../react-lifecycles-compat.es-6e1f3768.js';
14
- import '../style-inject.es-746bb8ed.js';
15
- import '../hooks/useWindowSize.js';
16
- import '../hooks/useDebounce.js';
17
-
18
- function formatter(value, tooltipType) {
19
- switch (tooltipType) {
20
- case 'percentage':
21
- return "".concat(value, "%");
22
- case 'currency':
23
- return "$".concat(value);
24
- case 'pixel':
25
- return "".concat(value, "px");
26
- default:
27
- return value;
28
- }
29
- }
30
- const rangeCircleTypes = ['c-type-1', 'c-type-2', 'c-type-3'];
31
- const RangeWithTooltip = createSliderWithTooltip(Range);
32
- const isMiddle = (value, max) => value > max / 3;
33
- const isMax = (value, max) => value >= max * 2 / 3;
34
- function RangeMolecule(props) {
35
- const {
36
- max,
37
- min,
38
- step,
39
- value,
40
- coloring,
41
- disabled,
42
- onChange,
43
- circleTypes,
44
- withTooltip,
45
- defaultValue,
46
- tooltipType,
47
- isSmallHandler,
48
- showCircleOnDrag,
49
- className,
50
- circleSizeBasedOnRange,
51
- ...restProps
52
- } = props;
53
- const isControlled = ('value' in props);
54
- const [sliderValue, setSliderValue] = useState(defaultValue);
55
- const [tooltipVisibility, toggleTooltipVisibility] = useToggle(false);
56
- const localValue = isControlled ? value : sliderValue;
57
- const isGradient = coloring === 'gradient-value';
58
- const leftPercent = localValue[0] * 100 / (max - min);
59
- const divRef = useRef();
60
- const sliderWidth = useWidth(divRef);
61
- const RangeElement = withTooltip ? RangeWithTooltip : Range;
62
- const setCircleStyles = useCallback(i => {
63
- const isMaxValue = isMax(localValue[i], max);
64
- const isMiddleValue = isMiddle(localValue[i], max);
65
- return classnames(circleTypes[i], {
66
- 'max-coloring': isGradient && isMaxValue,
67
- 'max-size': circleSizeBasedOnRange && isMaxValue,
68
- 'min-coloring': !isMiddleValue && !isMaxValue && isGradient,
69
- 'middle-coloring': isGradient && isMiddleValue && !isMaxValue,
70
- 'middle-size': circleSizeBasedOnRange && !isMaxValue && isMiddleValue
71
- });
72
- }, [localValue, max, circleTypes, isGradient, circleSizeBasedOnRange]);
73
- const handleSliderChange = useCallback(val => {
74
- if (val[1] <= max && val[0] >= min) {
75
- !isControlled && setSliderValue(val);
76
- onChange && onChange(val);
77
- }
78
- }, [max, min, isControlled, onChange]);
79
- const tipFormatter = useCallback(value => formatter(value, tooltipType), [tooltipType]);
80
- return /*#__PURE__*/React__default.createElement("div", {
81
- className: classnames('slider-holder ', className, coloring, {
82
- disabled,
83
- 'show-on-drag': showCircleOnDrag
84
- }),
85
- onMouseEnter: toggleTooltipVisibility,
86
- onMouseLeave: toggleTooltipVisibility
87
- }, /*#__PURE__*/React__default.createElement("div", {
88
- className: classnames('slider-comp', {
89
- 'size-small': isSmallHandler
90
- }),
91
- style: {
92
- '--left': "-".concat(leftPercent, "%"),
93
- '--sliderWidth': "".concat(sliderWidth, "px")
94
- }
95
- }, /*#__PURE__*/React__default.createElement("div", {
96
- ref: divRef
97
- }, /*#__PURE__*/React__default.createElement(RangeElement, _extends({
98
- max: max,
99
- min: min,
100
- step: step,
101
- value: localValue,
102
- tipProps: {
103
- prefixCls: 'tooltip-el',
104
- visible: tooltipVisibility && localValue[1] - localValue[0] > max / 20
105
- },
106
- allowCross: false,
107
- tipFormatter: tipFormatter,
108
- onChange: handleSliderChange,
109
- handleStyle: [{
110
- content: "'".concat(setCircleStyles(0), "'")
111
- }, {
112
- content: "'".concat(setCircleStyles(1), "'")
113
- }]
114
- }, restProps)))));
115
- }
116
- RangeMolecule.propTypes = {
117
- /**
118
- * Controlled value.
119
- */
120
- value: PropTypes.array,
121
- /**
122
- * Disabled state.
123
- */
124
- disabled: PropTypes.bool,
125
- /**
126
- * External/Additional className that can be added to 'Range' component.
127
- */
128
- className: PropTypes.string,
129
- /**
130
- * Fires an event on ExtendedInput change((event: Event) => void).
131
- */
132
- onChange: PropTypes.func,
133
- /**
134
- * Show/Hide tooltips on 'Range'.
135
- */
136
- withTooltip: PropTypes.bool,
137
- /**
138
- * Switch on/off small size.
139
- */
140
- isSmallHandler: PropTypes.bool,
141
- /**
142
- * Initial value.
143
- */
144
- defaultValue: PropTypes.array,
145
- /**
146
- * Show/hide circles.
147
- */
148
- showCircleOnDrag: PropTypes.bool,
149
- /**
150
- * Max value.
151
- */
152
- max: PropTypes.number.isRequired,
153
- /**
154
- * Min value.
155
- */
156
- min: PropTypes.number.isRequired,
157
- /**
158
- * Skip steps count.
159
- */
160
- step: PropTypes.number.isRequired,
161
- circleSizeBasedOnRange: PropTypes.bool,
162
- /**
163
- * Various circle type.
164
- */
165
- circleTypes: (props, propName, componentName) => {
166
- const prop = props[propName];
167
- const isCircleTypes = Array.isArray(prop) && prop.length === 2 && prop.every(item => rangeCircleTypes.includes(item));
168
- if (!isCircleTypes) {
169
- return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName));
170
- }
171
- },
172
- /**
173
- * Various tooltip types.
174
- */
175
- tooltipType: PropTypes.oneOf(['default', 'percentage', 'currency', 'pixel']),
176
- /**
177
- * Various themes/colors for component.
178
- */
179
- coloring: PropTypes.oneOf(['primary', 'positive-value', 'negative-value', 'gradient-value'])
180
- };
181
- RangeMolecule.defaultProps = {
182
- disabled: false,
183
- isSmallHandler: true,
184
- withTooltip: false,
185
- coloring: 'primary',
186
- tooltipType: 'default',
187
- showCircleOnDrag: false,
188
- circleSizeBasedOnRange: true
189
- };
190
-
191
- export { RangeMolecule as default };
package/Rating/index.js DELETED
@@ -1,174 +0,0 @@
1
- import { _ as __rest } from '../tslib.es6-f211516f.js';
2
- import * as React from 'react';
3
- import React__default, { useState, useLayoutEffect, isValidElement, cloneElement } from 'react';
4
- import { c as classnames } from '../index-031ff73c.js';
5
- import { s as styleInject } from '../style-inject.es-746bb8ed.js';
6
-
7
- function SvgSquareMajor(props) {
8
- return React.createElement('svg', {
9
- xmlns: 'http://www.w3.org/2000/svg',
10
- width: 24,
11
- height: 24,
12
- viewBox: '0 0 24 24',
13
- strokeLinecap: 'round',
14
- strokeLinejoin: 'round'
15
- }, props, React.createElement('rect', {
16
- width: 18,
17
- height: 18,
18
- x: 3,
19
- y: 3,
20
- rx: 2
21
- }));
22
- }
23
-
24
- var css_248z = "[data-gene-ui-version=\"2.16.3\"] .rating{box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}[data-gene-ui-version=\"2.16.3\"] .rating *>svg{color:unset!important}[data-gene-ui-version=\"2.16.3\"] .rating__wrapper{display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-content:center;position:relative;transition:transform .1s ease-in;width:100%}[data-gene-ui-version=\"2.16.3\"] .rating__wrapper:hover{cursor:pointer;transform:scale(1.1)}[data-gene-ui-version=\"2.16.3\"] .rating__wrapper-readonly{pointer-events:none}[data-gene-ui-version=\"2.16.3\"] .rating__wrapper:focus-visible{outline:.02rem solid var(--hero)}[data-gene-ui-version=\"2.16.3\"] .rating__wrapper-small:not(:first-child){margin-inline-start:.4rem}[data-gene-ui-version=\"2.16.3\"] .rating__wrapper-medium:not(:first-child){margin-inline-start:.8rem}[data-gene-ui-version=\"2.16.3\"] .rating__wrapper-big:not(:first-child){margin-inline-start:1.2rem}[data-gene-ui-version=\"2.16.3\"] .rating__element{height:100%;inset-inline-start:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:7}[data-gene-ui-version=\"2.16.3\"] .rating__icon-small{font-size:3.2rem}[data-gene-ui-version=\"2.16.3\"] .rating__icon-medium{font-size:3.6rem}[data-gene-ui-version=\"2.16.3\"] .rating__icon-big{font-size:4.2rem}";
25
- styleInject(css_248z);
26
-
27
- const sizes = { small: 32, medium: 36, big: 42 };
28
- const Element = ({ isIcon = false, Element, isCompareElement = false, color, bgColor, size }) => {
29
- const currentColor = isCompareElement ? color : bgColor;
30
- const className = `rating__icon rating__icon-${size}`;
31
- const currentSizes = {
32
- width: sizes[size],
33
- height: sizes[size]
34
- };
35
- const elementProps = Object.assign(Object.assign({ fill: currentColor }, currentSizes), { style: Object.assign({ color: currentColor }, currentSizes) });
36
- return isIcon ? (cloneElement(Element, Object.assign(Object.assign({}, elementProps), { className }))) : (React__default.createElement("div", Object.assign({}, elementProps, { className: className }), Element));
37
- };
38
- const calculatePosition = (position) => (position - Math.floor(position)) * 100;
39
- const Rating = (props) => {
40
- const { defaultValue = 0, count = 5, onChange, character = SvgSquareMajor, color = 'var(--hero)', bgColor = 'rgba(var(--hero-rgb), 0.3)', halfAllow = false, readonly = false, size = 'small', value } = props, restProps = __rest(props, ["defaultValue", "count", "onChange", "character", "color", "bgColor", "halfAllow", "readonly", "size", "value"]);
41
- const isControlled = 'value' in props;
42
- const isDefaultValueExist = 'defaultValue' in props;
43
- const isRTLMode = document.dir === 'rtl';
44
- const currentValue = value || defaultValue || 0;
45
- const [rating, setRating] = useState(currentValue);
46
- const [hoveredValue, setHoveredValue] = useState(0);
47
- const [regardingPosition, setRegardingPosition] = useState(0);
48
- const [remainingRating, setRemainingRating] = useState(0);
49
- const [temporaryRating, setTemporaryRating] = useState(0);
50
- const [disableMouseMove, setDisableMouseMove] = useState(false);
51
- const calculateRegardingPosition = (e) => {
52
- const { left, width } = e.currentTarget.getBoundingClientRect();
53
- const getClientPosition = e.clientX - (isRTLMode ? left + width : left);
54
- const getRelativeWidth = Math.abs((getClientPosition / width) * 100);
55
- return halfAllow && getRelativeWidth <= 50 ? 50 : 100;
56
- };
57
- const handleMouseMoveForElement = (e, currentRating) => {
58
- if (readonly)
59
- return;
60
- const regradingPosition = calculateRegardingPosition(e);
61
- setRegardingPosition(regradingPosition);
62
- if (disableMouseMove)
63
- return;
64
- setHoveredValue(currentRating);
65
- setRating(currentRating);
66
- };
67
- useLayoutEffect(() => {
68
- if (isControlled || isDefaultValueExist) {
69
- setRating(currentValue);
70
- setTemporaryRating(currentValue);
71
- }
72
- const ratingDecimalParts = Math.round((currentValue % Math.floor(currentValue)) * 100);
73
- if (ratingDecimalParts > 0) {
74
- setRemainingRating(ratingDecimalParts);
75
- }
76
- if (currentValue < 1) {
77
- setRemainingRating(Math.ceil(currentValue * 100));
78
- }
79
- }, [defaultValue, isDefaultValueExist, value, isControlled, currentValue]);
80
- const mouseLeaveHandler = () => {
81
- setHoveredValue(0);
82
- setRegardingPosition(0);
83
- setDisableMouseMove(false);
84
- setRating(temporaryRating);
85
- };
86
- const ratingController = (currentRating, state, blockMouseMovie = true) => {
87
- setHoveredValue(currentRating);
88
- setRating(0);
89
- setRemainingRating(calculatePosition(state));
90
- setTemporaryRating((prev) => {
91
- if (state !== prev)
92
- return state;
93
- setHoveredValue(0);
94
- setRating(currentValue);
95
- setRemainingRating(calculatePosition(currentValue));
96
- setDisableMouseMove(blockMouseMovie);
97
- return currentValue;
98
- });
99
- };
100
- const getRating = (e, currentRating) => {
101
- if (readonly)
102
- return;
103
- setRegardingPosition(calculateRegardingPosition(e));
104
- const selected = regardingPosition === 50 ? +`${currentRating - 1}.${regardingPosition}` : currentRating;
105
- if (isControlled) {
106
- setDisableMouseMove(true);
107
- setHoveredValue(0);
108
- setRating(selected);
109
- onChange === null || onChange === void 0 ? void 0 : onChange(selected);
110
- return;
111
- }
112
- ratingController(currentRating, selected);
113
- };
114
- const mouseEnterHandler = () => {
115
- setTemporaryRating(rating);
116
- };
117
- const elementsList = Math.round(count) > 0 ? new Array(Math.round(count)).fill(undefined) : [];
118
- const PrimitiveValue = (typeof character === 'string' || typeof character === 'number') && character;
119
- const keyDownHandler = (e, currentRating) => {
120
- if (readonly)
121
- return;
122
- if (e.key === 'Enter') {
123
- if (isControlled) {
124
- setRegardingPosition(100);
125
- onChange === null || onChange === void 0 ? void 0 : onChange(currentRating);
126
- return;
127
- }
128
- setRegardingPosition(0);
129
- ratingController(currentRating + 1, currentRating, false);
130
- }
131
- };
132
- const mouseLeaveHandlerForEveryElement = () => {
133
- setDisableMouseMove(false);
134
- };
135
- return (React__default.createElement("div", Object.assign({}, restProps, { className: "rating", onMouseLeave: mouseLeaveHandler, onMouseEnter: mouseEnterHandler, onBlur: () => setDisableMouseMove(false) }), elementsList.map((_, i) => {
136
- const currentRating = i + 1;
137
- const Icon = typeof character === 'function' &&
138
- isValidElement(character(i)) &&
139
- character(i).type
140
- ? character(i)
141
- : null;
142
- let calculatedWidthFor = 0;
143
- if (currentRating < hoveredValue) {
144
- calculatedWidthFor = 100;
145
- }
146
- else if (hoveredValue === currentRating) {
147
- calculatedWidthFor = regardingPosition;
148
- }
149
- else if (currentRating <= rating) {
150
- calculatedWidthFor = 100;
151
- }
152
- else if (currentRating === Math.ceil(rating)) {
153
- calculatedWidthFor = remainingRating;
154
- }
155
- else {
156
- calculatedWidthFor = 0;
157
- }
158
- const clipPath = isRTLMode
159
- ? `polygon(${100 - calculatedWidthFor}% 0, 100% 0, 100% 100%, ${100 - calculatedWidthFor}% 100%)`
160
- : `polygon( 0 0, ${calculatedWidthFor}% 0, ${calculatedWidthFor}% 100%,0 100%)`;
161
- return (React__default.createElement("div", { className: classnames('rating__wrapper', `rating__wrapper-${size}`, {
162
- 'rating__wrapper-readonly': readonly
163
- }), onMouseMove: (e) => handleMouseMoveForElement(e, currentRating), onMouseLeave: mouseLeaveHandlerForEveryElement, onKeyDown: (e) => keyDownHandler(e, currentRating), onClick: (e) => getRating(e, currentRating), tabIndex: 0, key: i },
164
- Icon && React__default.createElement(Element, { color: color, bgColor: bgColor, size: size, Element: Icon, isIcon: true }),
165
- PrimitiveValue && (React__default.createElement(Element, { color: color, bgColor: bgColor, size: size, Element: PrimitiveValue })),
166
- React__default.createElement("div", { className: "rating__element", style: {
167
- clipPath
168
- } },
169
- Icon && (React__default.createElement(Element, { Element: Icon, isIcon: true, isCompareElement: true, color: color, bgColor: bgColor, size: size })),
170
- PrimitiveValue && (React__default.createElement(Element, { Element: PrimitiveValue, color: color, bgColor: bgColor, size: size, isCompareElement: true })))));
171
- })));
172
- };
173
-
174
- export { Rating as default };
@@ -1,13 +0,0 @@
1
- import { R as RichEditor } from '../RichEditor-78c2617e.js';
2
- import 'react';
3
- import 'prop-types';
4
- import '../index-031ff73c.js';
5
- import '../_commonjsHelpers-24198af3.js';
6
- import '../index-5f37f281.js';
7
- import '../dateValidation-67caec66.js';
8
- import 'react-dom';
9
- import '../style-inject.es-746bb8ed.js';
10
-
11
-
12
-
13
- export { RichEditor as default };