@zohodesk/components 1.0.0-alpha-254 → 1.0.0-alpha-255

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 (12) hide show
  1. package/README.md +14 -0
  2. package/es/DateTime/CalendarView.js +23 -11
  3. package/es/DateTime/DateTime.js +1 -1
  4. package/es/DateTime/DateTime.module.css +10 -8
  5. package/es/Tab/Tab.js +1 -1
  6. package/es/Tab/Tabs.js +4 -3
  7. package/lib/DateTime/CalendarView.js +23 -11
  8. package/lib/DateTime/DateTime.js +1 -1
  9. package/lib/DateTime/DateTime.module.css +10 -8
  10. package/lib/Tab/Tab.js +1 -1
  11. package/lib/Tab/Tabs.js +4 -3
  12. package/package.json +1 -1
package/README.md CHANGED
@@ -32,6 +32,20 @@ In this Package, we Provide Some Basic Components to Build Web App
32
32
  - TextBoxIcon
33
33
  - Tooltip
34
34
 
35
+ # 1.0.0-alpha-255
36
+
37
+ - **CalenderView, DateTime** - Today and selected date issue fix.
38
+
39
+ - `Accesssility`- Screen Reader fix.
40
+
41
+ # 1.0.0-alpha-254
42
+
43
+ - **AppContainer** - accessibility theme css has been added.
44
+
45
+ - **Button** - `customProps` support.
46
+
47
+ - **DropBox** - Focus scope navigation support.
48
+
35
49
  # 1.0.0-alpha-253
36
50
 
37
51
  - **Tabs, Tooltip** - If condition check added to reduce murphy error logs.
package/es/DateTime/CalendarView.js CHANGED
@@ -64,10 +64,11 @@ export default class CalendarView extends React.PureComponent {
64
64
  tdclass += ` ${style.sunday}`;
65
65
  }
66
66
  if (incremleti >= userSeeDay && incremday <= monthEnd) {
67
- if (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
67
+ if (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
68
68
  isSelectedDay = true;
69
69
  } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
70
70
  isToday = true;
71
+ isSelectedDay = false;
71
72
  } else {
72
73
  isSelectedDay = false;
73
74
  isToday = false;
@@ -93,17 +94,22 @@ export default class CalendarView extends React.PureComponent {
93
94
  }
94
95
  const prevMonthEnd = getMonthEnd(prevMonth, prevYear);
95
96
  const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
96
- isSelectedDay = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
97
+
98
+ // isSelectedDay =
99
+ prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
100
+ // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
101
+
97
102
  output = /*#__PURE__*/React.createElement(Span, {
98
- i: i,
99
- isActive: isSelectedDay,
103
+ i: i
104
+ //isActive={isSelectedDay}
105
+ ,
100
106
  tdclass: `${tdclass} ${style.invalidDate}`,
101
107
  handleSelect: this.handleSelect,
102
108
  incremday: prevDate,
103
109
  userSeeMonth: prevMonth,
104
110
  userSeeYear: prevYear,
105
- dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`,
106
- isToday: isToday
111
+ dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
112
+ // isToday={isToday}
107
113
  });
108
114
  } else if (incremleti > monthEnd) {
109
115
  let nextMonth = userSeeMonth + 1;
@@ -113,17 +119,23 @@ export default class CalendarView extends React.PureComponent {
113
119
  nextYear = userSeeYear + 1;
114
120
  }
115
121
  const nextDate = incremleti - (userSeeDay - 1) - monthEnd;
116
- isSelectedDay = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
122
+
123
+ // isSelectedDay =
124
+ nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
125
+
126
+ // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
127
+
117
128
  output = /*#__PURE__*/React.createElement(Span, {
118
- i: i,
119
- isActive: isSelectedDay,
129
+ i: i
130
+ // isActive={isSelectedDay}
131
+ ,
120
132
  tdclass: `${tdclass} ${style.invalidDate}`,
121
133
  handleSelect: this.handleSelect,
122
134
  incremday: nextDate,
123
135
  userSeeMonth: nextMonth,
124
136
  userSeeYear: nextYear,
125
- dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`,
126
- isToday: isToday
137
+ dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
138
+ //isToday={isToday}
127
139
  });
128
140
  } else {
129
141
  output = /*#__PURE__*/React.createElement(Box, {
package/es/DateTime/DateTime.js CHANGED
@@ -134,7 +134,7 @@ export default class DateTime extends React.PureComponent {
134
134
  defaultHour = parseInt(defaultHour);
135
135
  defaultMin = parseInt(defaultMin);
136
136
  }
137
- const dateObj = isDateTimeField ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : new Date();
137
+ const dateObj = isDateTimeField ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : todayObj;
138
138
  date = dateObj.getDate();
139
139
  month = dateObj.getMonth();
140
140
  year = dateObj.getFullYear();
package/es/DateTime/DateTime.module.css CHANGED
@@ -124,6 +124,16 @@
124
124
  color: var(--zdt_datetime_invaliddate_text);
125
125
  }
126
126
 
127
+ .today {
128
+ border: 1px solid var(--zdt_datetime_today_border);
129
+ border-radius: 50%;
130
+ }
131
+
132
+ .today:hover {
133
+ border: 1px solid var(--zdt_datetime_today_border);
134
+ background-color: var(--zdt_datetime_datestr_hover_bg);
135
+ }
136
+
127
137
  .active,
128
138
  .active:hover,
129
139
  .active.today,
@@ -136,15 +146,7 @@
136
146
  border-radius: 50%;
137
147
  }
138
148
 
139
- .today {
140
- border: 1px solid var(--zdt_datetime_today_border);
141
- border-radius: 50%;
142
- }
143
149
 
144
- .today:hover {
145
- border: 1px solid var(--zdt_datetime_today_border);
146
- background-color: var(--zdt_datetime_datestr_hover_bg);
147
- }
148
150
 
149
151
  .timesection {
150
152
  padding-top: var(--zd_size5);
package/es/Tab/Tab.js CHANGED
@@ -83,7 +83,7 @@ export default function Tab(_ref) {
83
83
  role: "tab",
84
84
  "aria-controls": id,
85
85
  "aria-selected": isActive ? true : false,
86
- tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '-1',
86
+ tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
87
87
  "aria-label": text ? text : null
88
88
  }, customProps), /*#__PURE__*/React.createElement(Container, {
89
89
  alignBox: "row",
package/es/Tab/Tabs.js CHANGED
@@ -424,16 +424,17 @@ class Tabs extends React.Component {
424
424
  }, classProps));
425
425
  }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
426
426
  className: `${tabsStyle.menu} `
427
- }, /*#__PURE__*/React.createElement(Container, {
427
+ }, /*#__PURE__*/React.createElement(Container, _extends({
428
428
  className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
429
429
  align: "both",
430
430
  onClick: this.togglePopup,
431
431
  dataId: "moreTabs",
432
- eleRef: getTargetRef,
432
+ eleRef: getTargetRef
433
+ }, MoreButtonProps, {
433
434
  "aria-label": "MoreTabs",
434
435
  role: "tab",
435
436
  tagName: "button"
436
- }, /*#__PURE__*/React.createElement(Icon, {
437
+ }), /*#__PURE__*/React.createElement(Icon, {
437
438
  name: iconName,
438
439
  size: iconSize
439
440
  })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
package/lib/DateTime/CalendarView.js CHANGED
@@ -87,10 +87,11 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
87
87
  tdclass += " ".concat(_DateTimeModule["default"].sunday);
88
88
  }
89
89
  if (incremleti >= userSeeDay && incremday <= monthEnd) {
90
- if (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
90
+ if (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
91
91
  isSelectedDay = true;
92
92
  } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
93
93
  isToday = true;
94
+ isSelectedDay = false;
94
95
  } else {
95
96
  isSelectedDay = false;
96
97
  isToday = false;
@@ -116,17 +117,22 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
116
117
  }
117
118
  var prevMonthEnd = (0, _common.getMonthEnd)(prevMonth, prevYear);
118
119
  var prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
119
- isSelectedDay = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
120
+
121
+ // isSelectedDay =
122
+ prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
123
+ // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
124
+
120
125
  output = /*#__PURE__*/_react["default"].createElement(Span, {
121
- i: i,
122
- isActive: isSelectedDay,
126
+ i: i
127
+ //isActive={isSelectedDay}
128
+ ,
123
129
  tdclass: "".concat(tdclass, " ").concat(_DateTimeModule["default"].invalidDate),
124
130
  handleSelect: _this2.handleSelect,
125
131
  incremday: prevDate,
126
132
  userSeeMonth: prevMonth,
127
133
  userSeeYear: prevYear,
128
- dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate"),
129
- isToday: isToday
134
+ dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate")
135
+ // isToday={isToday}
130
136
  });
131
137
  } else if (incremleti > monthEnd) {
132
138
  var nextMonth = userSeeMonth + 1;
@@ -136,17 +142,23 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
136
142
  nextYear = userSeeYear + 1;
137
143
  }
138
144
  var nextDate = incremleti - (userSeeDay - 1) - monthEnd;
139
- isSelectedDay = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
145
+
146
+ // isSelectedDay =
147
+ nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
148
+
149
+ // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
150
+
140
151
  output = /*#__PURE__*/_react["default"].createElement(Span, {
141
- i: i,
142
- isActive: isSelectedDay,
152
+ i: i
153
+ // isActive={isSelectedDay}
154
+ ,
143
155
  tdclass: "".concat(tdclass, " ").concat(_DateTimeModule["default"].invalidDate),
144
156
  handleSelect: _this2.handleSelect,
145
157
  incremday: nextDate,
146
158
  userSeeMonth: nextMonth,
147
159
  userSeeYear: nextYear,
148
- dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate"),
149
- isToday: isToday
160
+ dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate")
161
+ //isToday={isToday}
150
162
  });
151
163
  } else {
152
164
  output = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
package/lib/DateTime/DateTime.js CHANGED
@@ -167,7 +167,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
167
167
  defaultHour = parseInt(defaultHour);
168
168
  defaultMin = parseInt(defaultMin);
169
169
  }
170
- var dateObj = isDateTimeField ? _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone)) : value ? _datetimejs["default"].toDate(value) : new Date();
170
+ var dateObj = isDateTimeField ? _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone)) : value ? _datetimejs["default"].toDate(value) : todayObj;
171
171
  date = dateObj.getDate();
172
172
  month = dateObj.getMonth();
173
173
  year = dateObj.getFullYear();
package/lib/DateTime/DateTime.module.css CHANGED
@@ -124,6 +124,16 @@
124
124
  color: var(--zdt_datetime_invaliddate_text);
125
125
  }
126
126
 
127
+ .today {
128
+ border: 1px solid var(--zdt_datetime_today_border);
129
+ border-radius: 50%;
130
+ }
131
+
132
+ .today:hover {
133
+ border: 1px solid var(--zdt_datetime_today_border);
134
+ background-color: var(--zdt_datetime_datestr_hover_bg);
135
+ }
136
+
127
137
  .active,
128
138
  .active:hover,
129
139
  .active.today,
@@ -136,15 +146,7 @@
136
146
  border-radius: 50%;
137
147
  }
138
148
 
139
- .today {
140
- border: 1px solid var(--zdt_datetime_today_border);
141
- border-radius: 50%;
142
- }
143
149
 
144
- .today:hover {
145
- border: 1px solid var(--zdt_datetime_today_border);
146
- background-color: var(--zdt_datetime_datestr_hover_bg);
147
- }
148
150
 
149
151
  .timesection {
150
152
  padding-top: var(--zd_size5);
package/lib/Tab/Tab.js CHANGED
@@ -92,7 +92,7 @@ function Tab(_ref) {
92
92
  role: "tab",
93
93
  "aria-controls": id,
94
94
  "aria-selected": isActive ? true : false,
95
- tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '-1',
95
+ tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
96
96
  "aria-label": text ? text : null
97
97
  }, customProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
98
98
  alignBox: "row",
package/lib/Tab/Tabs.js CHANGED
@@ -459,16 +459,17 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
459
459
  }, classProps));
460
460
  }), _react["default"].Children.count(moreTabs) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
461
461
  className: "".concat(_TabsModule["default"].menu, " ")
462
- }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
462
+ }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
463
463
  className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
464
464
  align: "both",
465
465
  onClick: this.togglePopup,
466
466
  dataId: "moreTabs",
467
- eleRef: getTargetRef,
467
+ eleRef: getTargetRef
468
+ }, MoreButtonProps, {
468
469
  "aria-label": "MoreTabs",
469
470
  role: "tab",
470
471
  tagName: "button"
471
- }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
472
+ }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
472
473
  name: iconName,
473
474
  size: iconSize
474
475
  })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-alpha-254",
3
+ "version": "1.0.0-alpha-255",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,