@zohodesk/components 1.2.25 → 1.2.27

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 (29) hide show
  1. package/.cli/UnValidatedFiles.html +101 -0
  2. package/README.md +12 -0
  3. package/es/DateTime/DateWidget.js +13 -4
  4. package/es/DropBox/DropBox.js +5 -15
  5. package/es/DropBox/utils/isMobilePopover.js +17 -0
  6. package/es/MultiSelect/MultiSelect.js +75 -92
  7. package/es/MultiSelect/MultiSelectWithAvatar.js +73 -90
  8. package/es/Tag/Tag.js +1 -1
  9. package/es/v1/DateTime/DateWidget.js +13 -4
  10. package/es/v1/DropBox/DropBox.js +3 -14
  11. package/es/v1/DropBox/utils/isMobilePopover.js +17 -0
  12. package/es/v1/MultiSelect/MultiSelect.js +75 -93
  13. package/es/v1/MultiSelect/MultiSelectWithAvatar.js +74 -91
  14. package/es/v1/Tag/Tag.js +1 -1
  15. package/lib/DateTime/DateWidget.js +21 -11
  16. package/lib/DropBox/DropBox.js +3 -13
  17. package/lib/DropBox/utils/isMobilePopover.js +25 -0
  18. package/lib/MultiSelect/MultiSelect.js +74 -91
  19. package/lib/MultiSelect/MultiSelectWithAvatar.js +72 -89
  20. package/lib/Tag/Tag.js +1 -1
  21. package/lib/v1/DateTime/DateWidget.js +21 -11
  22. package/lib/v1/DropBox/DropBox.js +3 -13
  23. package/lib/v1/DropBox/utils/isMobilePopover.js +25 -0
  24. package/lib/v1/MultiSelect/MultiSelect.js +76 -93
  25. package/lib/v1/MultiSelect/MultiSelectWithAvatar.js +71 -90
  26. package/lib/v1/Tag/Tag.js +1 -1
  27. package/package.json +8 -8
  28. package/propValidationArg.json +8 -4
  29. package/result.json +1 -1
package/.cli/UnValidatedFiles.html ADDED
@@ -0,0 +1,101 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <link rel="preconnect" href="https://fonts.googleapis.com">
6
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7
+ <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
8
+
9
+ <title>Unvalidated Files</title>
10
+ <style>
11
+ body {
12
+ margin: 0;
13
+ padding: 0;
14
+ font-family: 'Asap Condensed', sans-serif;
15
+ }
16
+
17
+ table {
18
+ width: 100%;
19
+ border-collapse: collapse;
20
+ }
21
+
22
+ th {
23
+ position: sticky;
24
+ top: 0;
25
+ background-color: #001C30;
26
+ color: #F5F5F5;
27
+ }
28
+
29
+ th,
30
+ td {
31
+ border: 1px solid black;
32
+ padding: 8px;
33
+ }
34
+
35
+ tr:nth-child(even) {
36
+ background-color: #EDEEF7;
37
+ }
38
+
39
+ .table-container {
40
+ margin-bottom: 20px;
41
+ }
42
+ </style>
43
+ </head>
44
+
45
+ <body>
46
+ <div id="table-container"></div>
47
+ <script>
48
+ const jsonData = {}
49
+ const tableContainer = document.getElementById('table-container');
50
+ const table = document.createElement('table');
51
+ const thead = document.createElement('thead');
52
+ const tbody = document.createElement('tbody');
53
+
54
+ const headerRow = document.createElement('tr');
55
+ const headers = ['No', 'Component', 'FilePath'];
56
+ headers.forEach(header => {
57
+ const th = document.createElement('th');
58
+ th.textContent = header;
59
+ headerRow.appendChild(th);
60
+ });
61
+ thead.appendChild(headerRow);
62
+ table.appendChild(thead);
63
+ var componentCount = 1;
64
+ function generateRows(component, data, innerComponent = '') {
65
+
66
+ const filePath = data.filePath ? data.filePath : '';
67
+
68
+ const row = document.createElement('tr');
69
+ const numbers = document.createElement('td');
70
+ const componentCell = document.createElement('td');
71
+ const filePathCell = document.createElement('td');
72
+
73
+ numbers.textContent = componentCount;
74
+ componentCell.textContent = component;
75
+ filePathCell.textContent = filePath;
76
+
77
+ row.appendChild(numbers);
78
+ row.appendChild(componentCell);
79
+ row.appendChild(filePathCell);
80
+ tbody.appendChild(row);
81
+
82
+ if (data.innerComponent) {
83
+ Object.entries(data.innerComponent).forEach(([innerComp, innerData]) => {
84
+ generateRows(innerComp, innerData, component);
85
+ });
86
+ }
87
+ componentCount++;
88
+ }
89
+
90
+ Object.entries(jsonData).forEach(([component, data]) => {
91
+ generateRows(component, data);
92
+ });
93
+
94
+ table.appendChild(tbody);
95
+ tableContainer.appendChild(table);
96
+
97
+ generateTable(jsonData);
98
+ </script>
99
+ </body>
100
+
101
+ </html>
package/README.md CHANGED
@@ -32,6 +32,18 @@ In this Package, we Provide Some Basic Components to Build Web App
32
32
  - TextBoxIcon
33
33
  - Tooltip
34
34
 
35
+ # 1.2.27
36
+
37
+ - **DateWidget** - The issue with the YearView Open State Reset on Blur Event in DidMount has been resolved
38
+
39
+
40
+ # 1.2.26
41
+
42
+ - ** MultiSelect, MultiSelectWithAvatar ** - Mobile Header Render Issue in Mobile Responsive Fixed.
43
+ - ** isMobilePopover ** - Function added in Dropbox.
44
+ - ** Tag ** - closeTitle not working issue fixed ( because value sends in wrong prop key data-title)
45
+
46
+
35
47
  # 1.2.25
36
48
 
37
49
  - **RippleEffect** - cssClassPropOfChild prop added
package/es/DateTime/DateWidget.js CHANGED
@@ -909,7 +909,8 @@ class DateWidgetComponent extends React.Component {
909
909
  if (isAllowedDateType) {
910
910
  // if (focusOrder !== oldFocusOrder) {
911
911
  const {
912
- dateFormatSelection = {}
912
+ dateFormatSelection = {},
913
+ isFocused
913
914
  } = this.state;
914
915
  const {
915
916
  order = []
@@ -931,9 +932,17 @@ class DateWidgetComponent extends React.Component {
931
932
 
932
933
  if (isPopupOpen) {
933
934
  if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
934
- this.DateTimeYearViewToggle(true, isMonthOpen);
935
- } else if (yearViewTypes.indexOf(focusedType) === -1 && isYearView) {
936
- this.DateTimeYearViewToggle(false, false);
935
+ if (!isFocused && isYearView) {
936
+ this.DateTimeYearViewToggle(true, oldIsMonthOpen);
937
+ } else {
938
+ this.DateTimeYearViewToggle(true, isMonthOpen);
939
+ }
940
+ } else if (yearViewTypes.indexOf(focusedType) === -1) {
941
+ if (!isFocused && isYearView) {
942
+ this.DateTimeYearViewToggle(isYearView, oldIsMonthOpen);
943
+ } else {
944
+ this.DateTimeYearViewToggle(false, false);
945
+ }
937
946
  }
938
947
  } // }
939
948
 
package/es/DropBox/DropBox.js CHANGED
@@ -1,15 +1,16 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
- import React, { useRef, Fragment, useContext } from 'react';
3
+ import React, { useRef, useContext } from 'react';
4
4
  import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
5
- import Modal from '../Modal/Modal';
6
- import { getLibraryConfig } from '../Provider/Config';
5
+ import Modal from '../Modal/Modal'; // import { getLibraryConfig } from '../Provider/Config';
6
+
7
7
  import LibraryContext from '../Provider/LibraryContextInit';
8
8
  import cssJSLogic from './css/cssJSLogic';
9
9
  import DropBoxElement from './DropBoxElement/DropBoxElement';
10
10
  import { DropBoxDefaultProps } from './props/defaultProps';
11
11
  import { DropBoxPropTypes } from './props/propTypes';
12
12
  import { stopPropagation } from './../utils/Common';
13
+ import isMobilePopover from './utils/isMobilePopover';
13
14
  import style from './css/DropBox.module.css';
14
15
  export default function DropBox(props) {
15
16
  const dropBoxRef = useRef(null);
@@ -37,18 +38,7 @@ export default function DropBox(props) {
37
38
  const {
38
39
  direction
39
40
  } = DropBoxContext || {};
40
- let windowWidth,
41
- mobileWidth = getLibraryConfig('mobileWidth'),
42
- isModel = false;
43
-
44
- if (needResponsive) {
45
- windowWidth = window.innerWidth;
46
-
47
- if (windowWidth <= mobileWidth) {
48
- isModel = true;
49
- }
50
- }
51
-
41
+ let isModel = isMobilePopover(needResponsive);
52
42
  const {
53
43
  zIndexStyle
54
44
  } = cssJSLogic(props);
package/es/DropBox/utils/isMobilePopover.js ADDED
@@ -0,0 +1,17 @@
1
+ import { getLibraryConfig } from '../../Provider/Config';
2
+ export default function isMobilePopover(needResponsive) {
3
+ // let { needResponsive } = props;
4
+ let windowWidth,
5
+ mobileWidth = getLibraryConfig('mobileWidth'),
6
+ isModel = false;
7
+
8
+ if (needResponsive) {
9
+ windowWidth = window.innerWidth;
10
+
11
+ if (windowWidth <= mobileWidth) {
12
+ isModel = true;
13
+ }
14
+ }
15
+
16
+ return isModel ? true : false;
17
+ }
package/es/MultiSelect/MultiSelect.js CHANGED
@@ -14,10 +14,11 @@ import Suggestions from './Suggestions';
14
14
  import EmptyState from './EmptyState';
15
15
  import CssProvider from '../Provider/CssProvider';
16
16
  import { getUniqueId } from '../Provider/IdProvider';
17
- import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
18
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
17
+ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox'; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
18
+
19
19
  import MultiSelectHeader from './MultiSelectHeader';
20
20
  import Loader from '@zohodesk/svg/lib/Loader/Loader';
21
+ import isMobilePopover from '../DropBox/utils/isMobilePopover';
21
22
  /**** Icons ****/
22
23
 
23
24
  import { Icon } from '@zohodesk/icons';
@@ -838,17 +839,6 @@ export class MultiSelectComponent extends React.Component {
838
839
  });
839
840
  }
840
841
 
841
- responsiveFunc(_ref) {
842
- let {
843
- mediaQueryOR
844
- } = _ref;
845
- return {
846
- tabletMode: mediaQueryOR([{
847
- maxWidth: 700
848
- }])
849
- };
850
- }
851
-
852
842
  getSelectionUI() {
853
843
  let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
854
844
  let {
@@ -1021,6 +1011,7 @@ export class MultiSelectComponent extends React.Component {
1021
1011
  searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
1022
1012
  noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
1023
1013
  });
1014
+ let isModel = isMobilePopover(needResponsive);
1024
1015
  return /*#__PURE__*/React.createElement("div", {
1025
1016
  className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
1026
1017
  "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -1028,85 +1019,77 @@ export class MultiSelectComponent extends React.Component {
1028
1019
  "data-title": isDisabled ? title : null,
1029
1020
  onClick: this.handleInputFocus,
1030
1021
  "data-selector-id": dataSelectorId
1031
- }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
1032
- query: this.responsiveFunc,
1033
- responsiveId: "Helmet"
1034
- }, _ref2 => {
1035
- let {
1036
- tabletMode
1037
- } = _ref2;
1038
- return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
1039
- animationStyle: animationStyle,
1040
- boxPosition: position || `${defaultDropBoxPosition}`,
1041
- getRef: getContainerRef,
1042
- isActive: isPopupReady,
1043
- isAnimate: isAnimate,
1044
- isArrow: false,
1045
- onClick: removeClose,
1046
- needResponsive: needResponsive,
1047
- isPadding: false,
1048
- isBoxPaddingNeed: isBoxPaddingNeed,
1049
- palette: palette,
1050
- htmlId: setAriaId,
1051
- a11y: {
1052
- role: 'listbox',
1053
- ariaMultiselectable: true
1054
- },
1055
- size: boxSize,
1056
- alignBox: "row",
1057
- isResponsivePadding: getFooter ? false : true
1058
- }, /*#__PURE__*/React.createElement(Box, {
1059
- flexible: true
1060
- }, /*#__PURE__*/React.createElement(Card, {
1061
- customClass: `${style.box} ${style[`${palette}Box`]}`,
1062
- onScroll: this.handleScroll
1063
- }, tabletMode && /*#__PURE__*/React.createElement(MobileHeader, {
1064
- selectedOptions: selectedOptions,
1065
- i18nKeys: i18nKeys,
1066
- onClick: this.handlePopupClose
1067
- }, /*#__PURE__*/React.createElement("div", {
1068
- className: style.effect
1069
- }, this.getSelectionUI(true))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
1070
- onSelect: this.handleSelectAll,
1071
- selectAllText: selectAllText,
1072
- suggestions: suggestions,
1073
- dataId: dataId
1074
- })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
1075
- align: "both",
1076
- className: style.loader
1077
- }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
1078
- shrink: true,
1079
- customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
1080
- eleRef: this.suggestionContainerRef
1081
- }, isSearching ? /*#__PURE__*/React.createElement("div", {
1082
- className: style[palette]
1083
- }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
1084
- suggestions: suggestions,
1085
- getRef: this.suggestionItemRef,
1086
- hoverOption: hoverOption,
1087
- onClick: this.handleSelectOption,
1088
- onMouseEnter: this.handleMouseEnter,
1089
- needBorder: false,
1090
- dataId: `${dataId}_Options`,
1091
- palette: palette,
1092
- selectedOptions: selectedOptionIds,
1093
- a11y: {
1094
- role: 'option'
1095
- }
1096
- }) : /*#__PURE__*/React.createElement(EmptyState, {
1097
- isLoading: isFetchingOptions,
1098
- options: options,
1099
- searchString: searchStr,
1100
- suggestions: suggestions,
1101
- dataId: dataId,
1102
- palette: palette,
1103
- i18nKeys: i18nKeys,
1104
- htmlId: ariaErrorId
1105
- }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
1106
- isCover: false,
1107
- align: "both"
1108
- }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
1109
- }) : null);
1022
+ }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
1023
+ animationStyle: animationStyle,
1024
+ boxPosition: position || `${defaultDropBoxPosition}`,
1025
+ getRef: getContainerRef,
1026
+ isActive: isPopupReady,
1027
+ isAnimate: isAnimate,
1028
+ isArrow: false,
1029
+ onClick: removeClose,
1030
+ needResponsive: needResponsive,
1031
+ isPadding: false,
1032
+ isBoxPaddingNeed: isBoxPaddingNeed,
1033
+ palette: palette,
1034
+ htmlId: setAriaId,
1035
+ a11y: {
1036
+ role: 'listbox',
1037
+ ariaMultiselectable: true
1038
+ },
1039
+ size: boxSize,
1040
+ alignBox: "row",
1041
+ isResponsivePadding: getFooter ? false : true
1042
+ }, /*#__PURE__*/React.createElement(Box, {
1043
+ flexible: true
1044
+ }, /*#__PURE__*/React.createElement(Card, {
1045
+ customClass: `${style.box} ${style[`${palette}Box`]}`,
1046
+ onScroll: this.handleScroll
1047
+ }, isModel ? /*#__PURE__*/React.createElement(MobileHeader, {
1048
+ selectedOptions: selectedOptions,
1049
+ i18nKeys: i18nKeys,
1050
+ onClick: this.handlePopupClose
1051
+ }, /*#__PURE__*/React.createElement("div", {
1052
+ className: style.effect
1053
+ }, this.getSelectionUI(true))) : null, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
1054
+ onSelect: this.handleSelectAll,
1055
+ selectAllText: selectAllText,
1056
+ suggestions: suggestions,
1057
+ dataId: dataId
1058
+ })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
1059
+ align: "both",
1060
+ className: style.loader
1061
+ }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
1062
+ shrink: true,
1063
+ customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
1064
+ eleRef: this.suggestionContainerRef
1065
+ }, isSearching ? /*#__PURE__*/React.createElement("div", {
1066
+ className: style[palette]
1067
+ }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
1068
+ suggestions: suggestions,
1069
+ getRef: this.suggestionItemRef,
1070
+ hoverOption: hoverOption,
1071
+ onClick: this.handleSelectOption,
1072
+ onMouseEnter: this.handleMouseEnter,
1073
+ needBorder: false,
1074
+ dataId: `${dataId}_Options`,
1075
+ palette: palette,
1076
+ selectedOptions: selectedOptionIds,
1077
+ a11y: {
1078
+ role: 'option'
1079
+ }
1080
+ }) : /*#__PURE__*/React.createElement(EmptyState, {
1081
+ isLoading: isFetchingOptions,
1082
+ options: options,
1083
+ searchString: searchStr,
1084
+ suggestions: suggestions,
1085
+ dataId: dataId,
1086
+ palette: palette,
1087
+ i18nKeys: i18nKeys,
1088
+ htmlId: ariaErrorId
1089
+ }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
1090
+ isCover: false,
1091
+ align: "both"
1092
+ }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null))) : null);
1110
1093
  }
1111
1094
 
1112
1095
  }
package/es/MultiSelect/MultiSelectWithAvatar.js CHANGED
@@ -15,10 +15,11 @@ import Suggestions from './Suggestions';
15
15
  import EmptyState from './EmptyState';
16
16
  import CssProvider from '../Provider/CssProvider';
17
17
  import { getUniqueId } from '../Provider/IdProvider';
18
- import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
19
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
18
+ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox'; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
19
+
20
20
  import Loader from '@zohodesk/svg/lib/Loader/Loader';
21
21
  import MultiSelectHeader from './MultiSelectHeader';
22
+ import isMobilePopover from '../DropBox/utils/isMobilePopover';
22
23
  /**** CSS ****/
23
24
 
24
25
  import style from './MultiSelect.module.css';
@@ -54,17 +55,6 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
54
55
  });
55
56
  }
56
57
 
57
- responsiveFunc(_ref) {
58
- let {
59
- mediaQueryOR
60
- } = _ref;
61
- return {
62
- tabletMode: mediaQueryOR([{
63
- maxWidth: 700
64
- }])
65
- };
66
- }
67
-
68
58
  render() {
69
59
  let {
70
60
  isReadOnly,
@@ -117,6 +107,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
117
107
  const setAriaId = this.getNextAriaId();
118
108
  const ariaErrorId = this.getNextAriaId();
119
109
  const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
110
+ let isModel = isMobilePopover(needResponsive);
120
111
  return /*#__PURE__*/React.createElement("div", {
121
112
  className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
122
113
  "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -124,83 +115,75 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
124
115
  "data-title": isDisabled ? title : null,
125
116
  onClick: this.handleInputFocus,
126
117
  "data-selector-id": dataSelectorId
127
- }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
128
- query: this.responsiveFunc,
129
- responsiveId: "Helmet"
130
- }, _ref2 => {
131
- let {
132
- tabletMode
133
- } = _ref2;
134
- return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
135
- animationStyle: animationStyle,
136
- boxPosition: position || `${defaultDropBoxPosition}Center`,
137
- getRef: getContainerRef,
138
- isActive: isPopupReady,
139
- isAnimate: isAnimate,
140
- isArrow: false,
141
- onClick: removeClose,
142
- needResponsive: needResponsive,
143
- isPadding: false,
144
- isBoxPaddingNeed: isBoxPaddingNeed,
145
- palette: palette,
146
- htmlId: setAriaId,
147
- a11y: {
148
- ariaMultiselectable: true,
149
- role: 'listbox'
150
- },
151
- isResponsivePadding: true,
152
- alignBox: "row"
153
- }, /*#__PURE__*/React.createElement(Box, {
154
- flexible: true
155
- }, /*#__PURE__*/React.createElement(Card, {
156
- customClass: `${style.box} ${style[`${palette}Box`]}`,
157
- onScroll: this.handleScroll
158
- }, tabletMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileHeader, {
159
- selectedOptions: selectedOptions,
160
- i18nKeys: i18nKeys,
161
- onClick: this.handlePopupClose
162
- }, /*#__PURE__*/React.createElement("div", {
163
- className: style.effect
164
- }, this.getSelectionUI(true)))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
165
- onSelect: this.handleSelectAll,
166
- selectAllText: selectAllText,
167
- suggestions: suggestions,
168
- dataId: dataId
169
- })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
170
- align: "both",
171
- className: style.loader
172
- }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
173
- shrink: true,
174
- customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
175
- eleRef: this.suggestionContainerRef
176
- }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
177
- needTick: keepSelectedOptions,
178
- suggestions: suggestions,
179
- getRef: this.suggestionItemRef,
180
- hoverOption: hoverOption,
181
- onClick: this.handleSelectOption,
182
- onMouseEnter: this.handleMouseEnter,
183
- needBorder: false,
184
- dataId: `${dataId}_Options`,
185
- palette: palette,
186
- selectedOptions: selectedOptionIds,
187
- a11y: {
188
- role: 'option'
189
- }
190
- }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
191
- isLoading: isFetchingOptions,
192
- options: options,
193
- searchString: searchStr,
194
- suggestions: suggestions,
195
- dataId: dataId,
196
- palette: palette,
197
- i18nKeys: i18nKeys,
198
- htmlId: ariaErrorId
199
- }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
200
- isCover: false,
201
- align: "both"
202
- }, /*#__PURE__*/React.createElement(Loader, null))))));
203
- }) : null);
118
+ }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
119
+ animationStyle: animationStyle,
120
+ boxPosition: position || `${defaultDropBoxPosition}Center`,
121
+ getRef: getContainerRef,
122
+ isActive: isPopupReady,
123
+ isAnimate: isAnimate,
124
+ isArrow: false,
125
+ onClick: removeClose,
126
+ needResponsive: needResponsive,
127
+ isPadding: false,
128
+ isBoxPaddingNeed: isBoxPaddingNeed,
129
+ palette: palette,
130
+ htmlId: setAriaId,
131
+ a11y: {
132
+ ariaMultiselectable: true,
133
+ role: 'listbox'
134
+ },
135
+ isResponsivePadding: true,
136
+ alignBox: "row"
137
+ }, /*#__PURE__*/React.createElement(Box, {
138
+ flexible: true
139
+ }, /*#__PURE__*/React.createElement(Card, {
140
+ customClass: `${style.box} ${style[`${palette}Box`]}`,
141
+ onScroll: this.handleScroll
142
+ }, isModel ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileHeader, {
143
+ selectedOptions: selectedOptions,
144
+ i18nKeys: i18nKeys,
145
+ onClick: this.handlePopupClose
146
+ }, /*#__PURE__*/React.createElement("div", {
147
+ className: style.effect
148
+ }, this.getSelectionUI(true)))) : null, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
149
+ onSelect: this.handleSelectAll,
150
+ selectAllText: selectAllText,
151
+ suggestions: suggestions,
152
+ dataId: dataId
153
+ })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
154
+ align: "both",
155
+ className: style.loader
156
+ }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
157
+ shrink: true,
158
+ customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
159
+ eleRef: this.suggestionContainerRef
160
+ }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
161
+ needTick: keepSelectedOptions,
162
+ suggestions: suggestions,
163
+ getRef: this.suggestionItemRef,
164
+ hoverOption: hoverOption,
165
+ onClick: this.handleSelectOption,
166
+ onMouseEnter: this.handleMouseEnter,
167
+ needBorder: false,
168
+ dataId: `${dataId}_Options`,
169
+ palette: palette,
170
+ selectedOptions: selectedOptionIds,
171
+ a11y: {
172
+ role: 'option'
173
+ }
174
+ }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
175
+ isLoading: isFetchingOptions,
176
+ options: options,
177
+ searchString: searchStr,
178
+ suggestions: suggestions,
179
+ dataId: dataId,
180
+ palette: palette,
181
+ i18nKeys: i18nKeys,
182
+ htmlId: ariaErrorId
183
+ }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
184
+ isCover: false,
185
+ align: "both"
186
+ }, /*#__PURE__*/React.createElement(Loader, null)))))) : null);
204
187
  }
205
188
 
206
189
  }
package/es/Tag/Tag.js CHANGED
@@ -130,7 +130,7 @@ export default class Tag extends PureComponent {
130
130
  ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}
131
131
  ${customTagClose} ${style[`close${closePalette}`]}`,
132
132
  dataId: `${dataId}_RemoveTag`,
133
- "data-title": closeTitle,
133
+ title: closeTitle,
134
134
  onClick: this.handleRemove,
135
135
  a11y: {
136
136
  ariaLabel: clearLabel
package/es/v1/DateTime/DateWidget.js CHANGED
@@ -909,7 +909,8 @@ class DateWidgetComponent extends React.Component {
909
909
  if (isAllowedDateType) {
910
910
  // if (focusOrder !== oldFocusOrder) {
911
911
  const {
912
- dateFormatSelection = {}
912
+ dateFormatSelection = {},
913
+ isFocused
913
914
  } = this.state;
914
915
  const {
915
916
  order = []
@@ -931,9 +932,17 @@ class DateWidgetComponent extends React.Component {
931
932
 
932
933
  if (isPopupOpen) {
933
934
  if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
934
- this.DateTimeYearViewToggle(true, isMonthOpen);
935
- } else if (yearViewTypes.indexOf(focusedType) === -1 && isYearView) {
936
- this.DateTimeYearViewToggle(false, false);
935
+ if (!isFocused && isYearView) {
936
+ this.DateTimeYearViewToggle(true, oldIsMonthOpen);
937
+ } else {
938
+ this.DateTimeYearViewToggle(true, isMonthOpen);
939
+ }
940
+ } else if (yearViewTypes.indexOf(focusedType) === -1) {
941
+ if (!isFocused && isYearView) {
942
+ this.DateTimeYearViewToggle(isYearView, oldIsMonthOpen);
943
+ } else {
944
+ this.DateTimeYearViewToggle(false, false);
945
+ }
937
946
  }
938
947
  } // }
939
948