@zohodesk/components 1.6.14 → 1.6.15

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 (51) hide show
  1. package/README.md +7 -0
  2. package/es/Avatar/Avatar.js +1 -2
  3. package/es/Button/css/cssJSLogic.js +4 -5
  4. package/es/DateTime/DateTime.js +3 -6
  5. package/es/DateTime/DateWidget.js +2 -5
  6. package/es/DateTime/YearView.js +5 -6
  7. package/es/DateTime/common.js +2 -9
  8. package/es/DateTime/dateFormatUtils/dateFormat.js +55 -76
  9. package/es/DateTime/dateFormatUtils/index.js +7 -12
  10. package/es/DateTime/dateFormatUtils/timeChange.js +3 -4
  11. package/es/DateTime/dateFormatUtils/yearChange.js +3 -4
  12. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +5 -6
  13. package/es/Layout/utils.js +1 -2
  14. package/es/ListItem/ListContainer.js +4 -5
  15. package/es/Modal/Portal/Portal.js +4 -5
  16. package/es/MultiSelect/AdvancedGroupMultiSelect.js +91 -103
  17. package/es/MultiSelect/AdvancedMultiSelect.js +74 -80
  18. package/es/MultiSelect/MultiSelect.js +4 -13
  19. package/es/MultiSelect/Suggestions.js +14 -17
  20. package/es/Popup/Popup.js +1 -4
  21. package/es/Provider/IdProvider.js +4 -5
  22. package/es/Provider/LibraryContext.js +11 -12
  23. package/es/Provider/NumberGenerator/NumberGenerator.js +15 -17
  24. package/es/Provider/ZindexProvider.js +4 -5
  25. package/es/Responsive/CustomResponsive.js +8 -11
  26. package/es/Responsive/ResizeComponent.js +1 -3
  27. package/es/Responsive/Responsive.js +9 -12
  28. package/es/Responsive/sizeObservers.js +1 -5
  29. package/es/ResponsiveDropBox/ResponsiveDropBox.js +10 -14
  30. package/es/Select/GroupSelect.js +98 -103
  31. package/es/Select/Select.js +110 -114
  32. package/es/Select/SelectWithAvatar.js +91 -95
  33. package/es/Select/SelectWithIcon.js +104 -109
  34. package/es/Select/__tests__/Select.spec.js +6 -9
  35. package/es/Tab/Tab.js +29 -30
  36. package/es/Tab/TabContent.js +16 -19
  37. package/es/Tab/TabContentWrapper.js +19 -22
  38. package/es/Tab/TabWrapper.js +15 -16
  39. package/es/Tab/Tabs.js +80 -87
  40. package/es/Typography/css/cssJSLogic.js +4 -5
  41. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -2
  42. package/es/utils/Common.js +10 -31
  43. package/es/utils/datetime/common.js +2 -6
  44. package/es/utils/dropDownUtils.js +7 -11
  45. package/es/utils/getInitial.js +1 -3
  46. package/es/v1/Button/css/cssJSLogic.js +4 -8
  47. package/es/v1/Label/css/cssJSLogic.js +4 -5
  48. package/es/v1/Switch/css/cssJSLogic.js +4 -5
  49. package/es/v1/helpers/colorHelpers/colorHelper.js +28 -39
  50. package/lib/Select/Select.js +3 -1
  51. package/package.json +2 -2
package/README.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
4
4
 
5
+
6
+ # 1.6.15
7
+
8
+ - **Select**
9
+ - Added `closePopup` callback support to `getFooter` prop, allowing footer actions to close the popup programmatically.
10
+
11
+
5
12
  # 1.6.14
6
13
 
7
14
  - **v1/Button**
@@ -97,8 +97,7 @@ export default class Avatar extends React.Component {
97
97
  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
98
98
 
99
99
 
100
- getInitialByFullName() {
101
- let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
100
+ getInitialByFullName(fullName = '') {
102
101
  fullName = (fullName || '').trim();
103
102
  let nameList = fullName.split(' ');
104
103
 
@@ -1,9 +1,8 @@
1
1
  import { compileClassNames } from '@zohodesk/utils';
2
- export default function cssJSLogic(_ref) {
3
- let {
4
- props,
5
- style
6
- } = _ref;
2
+ export default function cssJSLogic({
3
+ props,
4
+ style
5
+ }) {
7
6
  let {
8
7
  customClass,
9
8
  needAppearance,
@@ -21,8 +21,7 @@ import { Box } from "../Layout";
21
21
  import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from "./dateFormatUtils";
22
22
  import { getDateText } from "./dateFormatUtils/dateFormat";
23
23
 
24
- function title(date, year, month) {
25
- let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
24
+ function title(date, year, month, monthNames = []) {
26
25
  const HeadingText = `${monthNames[month] || ''} ${year}`;
27
26
  return HeadingText;
28
27
  }
@@ -166,8 +165,7 @@ export default class DateTime extends React.PureComponent {
166
165
  return hours;
167
166
  }
168
167
 
169
- handleGetSelectedDate() {
170
- let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
168
+ handleGetSelectedDate(selectedInfo = {}) {
171
169
  const {
172
170
  min,
173
171
  max,
@@ -283,8 +281,7 @@ export default class DateTime extends React.PureComponent {
283
281
  }
284
282
  }
285
283
 
286
- handleChange() {
287
- let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
284
+ handleChange(selectedInfo = {}) {
288
285
  const {
289
286
  onError,
290
287
  onChange,
@@ -724,8 +724,7 @@ class DateWidgetComponent extends React.Component {
724
724
  }
725
725
  }
726
726
 
727
- handleSelection() {
728
- let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
727
+ handleSelection(focusOrder = 0) {
729
728
  const isAllowedDateType = this.handleGetAllowedType();
730
729
 
731
730
  if (isAllowedDateType) {
@@ -921,9 +920,7 @@ class DateWidgetComponent extends React.Component {
921
920
  });
922
921
  }
923
922
 
924
- handleBlurSelectionRange() {
925
- let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
926
- let oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
923
+ handleBlurSelectionRange(focusOrder = '', oldFocusOrder = '') {
927
924
  const isAllowedDateType = this.handleGetAllowedType();
928
925
 
929
926
  if (isAllowedDateType) {
@@ -194,12 +194,11 @@ export default class YearView extends React.PureComponent {
194
194
  onSelectYear && onSelectYear(year);
195
195
  }
196
196
 
197
- renderListItem(_ref) {
198
- let {
199
- index,
200
- style: virtualizerStyle,
201
- ref
202
- } = _ref;
197
+ renderListItem({
198
+ index,
199
+ style: virtualizerStyle,
200
+ ref
201
+ }) {
203
202
  const {
204
203
  years
205
204
  } = this;
@@ -1,16 +1,9 @@
1
- export function bind() {
2
- for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
3
- handlers[_key] = arguments[_key];
4
- }
5
-
1
+ export function bind(...handlers) {
6
2
  handlers.forEach(handler => {
7
3
  this[handler] = this[handler].bind(this);
8
4
  });
9
5
  }
10
- export function formatValue() {
11
- let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
12
- let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
13
- let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
6
+ export function formatValue(values = [], valueField = 'id', textField = 'name') {
14
7
  return values && values.map(value => {
15
8
  let formattedValue = value;
16
9
 
@@ -12,9 +12,7 @@ import { formatDate } from "../../utils/datetime/common";
12
12
  import { defaultFormat, supportedPatterns, // patternChangeStr,
13
13
  patternSplitStr, INCONSTANT, flags } from "../constants";
14
14
 
15
- function getDateFormatString() {
16
- let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
17
- let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
15
+ function getDateFormatString(dateFormatArr = [], datePatternArr = []) {
18
16
  return dateFormatArr.reduce((res, dateStr, index) => {
19
17
  const patternStr = datePatternArr[index] || '';
20
18
  res += dateStr + patternStr;
@@ -22,14 +20,8 @@ function getDateFormatString() {
22
20
  }, '');
23
21
  }
24
22
 
25
- function getIsValidPattern() {
26
- let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
27
- let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
28
-
29
- const isValueInArray = function () {
30
- let possibleFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
31
- return possibleFormat.some(str => dateFormatArr.indexOf(str) >= 0);
32
- };
23
+ function getIsValidPattern(dateFormatArr = [], datePatternArr = []) {
24
+ const isValueInArray = (possibleFormat = []) => possibleFormat.some(str => dateFormatArr.indexOf(str) >= 0);
33
25
 
34
26
  const haveDay = isValueInArray(flags.day);
35
27
  const haveMonth = isValueInArray(flags.month);
@@ -38,14 +30,12 @@ function getIsValidPattern() {
38
30
  return haveDay && haveMonth && (haveYear || !haveYear) && isValidPattern;
39
31
  }
40
32
 
41
- export function getDateFormatDetails() {
42
- let dateFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
43
- let {
44
- isHideCurrentYear,
45
- value,
46
- timeZone,
47
- isDateTime
48
- } = arguments.length > 1 ? arguments[1] : undefined;
33
+ export function getDateFormatDetails(dateFormat = '', {
34
+ isHideCurrentYear,
35
+ value,
36
+ timeZone,
37
+ isDateTime
38
+ }) {
49
39
  let dayInfo = {};
50
40
  let monthInfo = {};
51
41
  let yearInfo = {};
@@ -126,11 +116,10 @@ export function getDateFormatDetails() {
126
116
  };
127
117
  }
128
118
 
129
- function getDisplayFormatValue(dateVal, formatVal) {
130
- let {
131
- i18nShortMonths = [],
132
- i18nMonths = []
133
- } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
119
+ function getDisplayFormatValue(dateVal, formatVal, {
120
+ i18nShortMonths = [],
121
+ i18nMonths = []
122
+ } = {}) {
134
123
  const {
135
124
  length,
136
125
  type
@@ -151,11 +140,10 @@ function getDisplayFormatValue(dateVal, formatVal) {
151
140
  return addZero(dateVal, length);
152
141
  }
153
142
 
154
- function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder) {
155
- let {
156
- i18nShortMonths,
157
- i18nMonths
158
- } = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
143
+ function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder, {
144
+ i18nShortMonths,
145
+ i18nMonths
146
+ } = {}) {
159
147
  const dateString = dateFormatArr.reduce((res, formatVal, index) => {
160
148
  const {
161
149
  type: dateFormatVal = ''
@@ -172,15 +160,11 @@ function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder) {
172
160
  return dateString;
173
161
  }
174
162
 
175
- export function getDateTimeString() {
176
- let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
177
- let dateFormatDetails = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
178
- let isDateTime = arguments.length > 2 ? arguments[2] : undefined;
179
- let {
180
- i18nShortMonths,
181
- i18nMonths,
182
- is24Hour
183
- } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
163
+ export function getDateTimeString(values = {}, dateFormatDetails = {}, isDateTime, {
164
+ i18nShortMonths,
165
+ i18nMonths,
166
+ is24Hour
167
+ } = {}) {
184
168
  const {
185
169
  day,
186
170
  month,
@@ -220,10 +204,9 @@ export function getDateText(value, isDateTime, timeZone) {
220
204
 
221
205
  return value ? isDateTime ? timeZone ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : new Date(value) : timeZone ? datetime.toDate(value) : new Date(value) : new Date();
222
206
  }
223
- export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
224
- let {
225
- is24Hour
226
- } = _ref;
207
+ export function getDateDetails(value, localValues, isDateTime, timeZone, {
208
+ is24Hour
209
+ }) {
227
210
  const {
228
211
  day,
229
212
  month,
@@ -273,10 +256,9 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
273
256
 
274
257
  return localValues;
275
258
  }
276
- export function getIsValidDate(values, isDateTime, _ref2) {
277
- let {
278
- is24Hour
279
- } = _ref2;
259
+ export function getIsValidDate(values, isDateTime, {
260
+ is24Hour
261
+ }) {
280
262
  const {
281
263
  day,
282
264
  month,
@@ -437,22 +419,20 @@ export function getSelectedDate(values, props) {
437
419
  };
438
420
  }
439
421
 
440
- function getDateFormatLength(type, length) {
441
- let formatVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
442
- let {
443
- i18nShortMonths,
444
- i18nMonths,
445
- selectedValue,
446
- day,
447
- month,
448
- year,
449
- hour,
450
- minute,
451
- noon,
452
- timeZone,
453
- isDateTime,
454
- is24Hour
455
- } = arguments.length > 3 ? arguments[3] : undefined;
422
+ function getDateFormatLength(type, length, formatVal = '', {
423
+ i18nShortMonths,
424
+ i18nMonths,
425
+ selectedValue,
426
+ day,
427
+ month,
428
+ year,
429
+ hour,
430
+ minute,
431
+ noon,
432
+ timeZone,
433
+ isDateTime,
434
+ is24Hour
435
+ }) {
456
436
  const {
457
437
  month: selectedMonth
458
438
  } = getDateDetails(selectedValue, {
@@ -479,20 +459,19 @@ function getDateFormatLength(type, length) {
479
459
  return length;
480
460
  }
481
461
 
482
- export function getDateFormatSelection(dateFormatDetails, isDateTime) {
483
- let {
484
- i18nShortMonths,
485
- i18nMonths,
486
- selectedValue,
487
- day,
488
- month,
489
- year,
490
- hour,
491
- minute,
492
- noon,
493
- timeZone,
494
- is24Hour
495
- } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
462
+ export function getDateFormatSelection(dateFormatDetails, isDateTime, {
463
+ i18nShortMonths,
464
+ i18nMonths,
465
+ selectedValue,
466
+ day,
467
+ month,
468
+ year,
469
+ hour,
470
+ minute,
471
+ noon,
472
+ timeZone,
473
+ is24Hour
474
+ } = {}) {
496
475
  const {
497
476
  dateFormatArr = [],
498
477
  patternArr = []
@@ -9,9 +9,7 @@ import { getDateText } from "./dateFormat";
9
9
  export function convertYearToTwoDigit(year) {
10
10
  return parseInt(year.toString().slice(-2));
11
11
  }
12
- export function addZero() {
13
- let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
14
- let length = arguments.length > 1 ? arguments[1] : undefined;
12
+ export function addZero(value = '', length) {
15
13
  let newValue = value.toString();
16
14
 
17
15
  for (let i = 0; i < length; i++) {
@@ -98,9 +96,7 @@ export function getYearDetails(yearLength) {
98
96
  currentYear: year
99
97
  };
100
98
  }
101
- export function convertTwoDigitToYear() {
102
- let digitValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
103
- let selectedYear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
99
+ export function convertTwoDigitToYear(digitValue = '', selectedYear = '') {
104
100
  const dateObj = new Date();
105
101
  let year = dateObj.getFullYear();
106
102
  const digitValueStr = addZero(digitValue.toString(), 2);
@@ -224,12 +220,11 @@ export function getIsEmptyYear(value, yearLength) {
224
220
  } = getYearDetails(yearLength);
225
221
  return getIsEmptyValue(value, startPoint, endPoint);
226
222
  }
227
- export function getIsCurrentYear(_ref) {
228
- let {
229
- isDateTime,
230
- value,
231
- timeZone
232
- } = _ref;
223
+ export function getIsCurrentYear({
224
+ isDateTime,
225
+ value,
226
+ timeZone
227
+ }) {
233
228
  let isCurrentYear = false;
234
229
 
235
230
  if (value && value !== INVALID_DATE) {
@@ -1,10 +1,9 @@
1
1
  /** * Methods ** */
2
2
  import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from "./index";
3
3
  import { getKeyValue, getIsEmptyValue } from "../../utils/Common";
4
- export function getChangedHour(values, event, focusOrders, keyActions) {
5
- let {
6
- is24Hour = false
7
- } = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
4
+ export function getChangedHour(values, event, focusOrders, keyActions, {
5
+ is24Hour = false
6
+ } = {}) {
8
7
  const {
9
8
  keyCode,
10
9
  which
@@ -1,10 +1,9 @@
1
1
  /** * Methods ** */
2
2
  import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from "./index";
3
3
  import { getKeyValue } from "../../utils/Common";
4
- export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
5
- let {
6
- yearInfo
7
- } = _ref;
4
+ export function getChangedYear(values, event, focusOrders, keyActions, {
5
+ yearInfo
6
+ }) {
8
7
  const {
9
8
  keyCode,
10
9
  which
@@ -1,12 +1,11 @@
1
1
  import { useContext } from 'react';
2
2
  import LibraryContext from "../../../Provider/LibraryContextInit";
3
3
  import { compileClassNames } from '@zohodesk/utils';
4
- export default function cssJSLogic(_ref) {
5
- let {
6
- props,
7
- style,
8
- customState
9
- } = _ref;
4
+ export default function cssJSLogic({
5
+ props,
6
+ style,
7
+ customState
8
+ }) {
10
9
  const DropBoxElementContext = useContext(LibraryContext);
11
10
  const {
12
11
  boxPosition,
@@ -15,8 +15,7 @@ export function createProps(propTypes, props, classNames) {
15
15
  export function isInteger(value) {
16
16
  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
17
17
  }
18
- export function setProps(childProps, props) {
19
- let values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
18
+ export function setProps(childProps, props, values = {}) {
20
19
  Object.keys(values).forEach(value => {
21
20
  if (props[value]) {
22
21
  if (value === 'dataId') {
@@ -36,11 +36,10 @@ const ListContainer = props => {
36
36
  eleRef,
37
37
  align
38
38
  } = props;
39
- const responsiveFunc = useCallback(_ref => {
40
- let {
41
- mediaQueryOR,
42
- isTouchDevice
43
- } = _ref;
39
+ const responsiveFunc = useCallback(({
40
+ mediaQueryOR,
41
+ isTouchDevice
42
+ }) => {
44
43
  return {
45
44
  mobileToTab: mediaQueryOR([{
46
45
  maxWidth: 700
@@ -3,11 +3,10 @@ import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
3
3
  import { getLibraryConfig } from "../../Provider/Config";
4
4
  import { defaultProps } from "./props/defaultProps";
5
5
  import { propTypes } from "./props/propTypes";
6
- export default function Portal(_ref) {
7
- let {
8
- children,
9
- portalId
10
- } = _ref;
6
+ export default function Portal({
7
+ children,
8
+ portalId
9
+ }) {
11
10
  const getPortalContainer = useCallback(() => {
12
11
  const getConfigPortalContainer = getLibraryConfig('getPortalContainer');
13
12