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

package/README.md

@@ -32,6 +32,28 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-256
+
+ - **Button** - Safari browser focus issue fix and `customProps` validation.
+
+ - **Switch** - Click handling issue fix.
+
+ - **Tabs, Tab** -  Screen Reader fix.
+
+# 1.0.0-alpha-255
+
+ - **CalenderView, DateTime** - Today and selected date issue fix.
+
+ - `Accesssility`- Screen Reader fix.
+
+# 1.0.0-alpha-254
+
+ - **AppContainer** - accessibility theme css has been added.
+
+ - **Button** - `customProps` support.
+
+ - **DropBox** - Focus scope navigation support.
+
 # 1.0.0-alpha-253
 
  - **Tabs, Tooltip** - If condition check added  to reduce murphy error logs.

package/es/Button/Button.module.css

@@ -24,23 +24,26 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
-.default {
+.native {
   composes: varClass;
-  transition: all var(--zd_transition2) ease 0s;
+  /* transition: all var(--zd_transition2) ease 0s; */
   letter-spacing: var(--button_letter_spacing);
   opacity: var(--button_opacity);
+  transition-property: background-color, color, border; 
+  transition-duration: var(--zd_transition2); 
+  transition-timing-function: ease;
   border: 0;
   cursor: var(--button_cursor);
 }
 
-.default:disabled {
+.native:disabled {
   pointer-events: none;
   --button_cursor: not-allowed;
   --button_opacity: 0.4;
 }
 
 .container {
-  composes: default;
+  composes: native;
   composes: dotted from '../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);

package/es/Button/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   size: 'medium',
   status: 'none',
   text: 'Button',
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };

package/es/Button/props/propTypes.js

@@ -18,5 +18,6 @@ export const propTypes = {
     customButton: PropTypes.string,
     customStatus: PropTypes.string,
     customStatusSize: PropTypes.string
-  })
+  }),
+  customProps: PropTypes.object
 };

package/es/DateTime/CalendarView.js

@@ -64,10 +64,11 @@ export default class CalendarView extends React.PureComponent {
             tdclass += ` ${style.sunday}`;
           }
           if (incremleti >= userSeeDay && incremday <= monthEnd) {
-            if (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
+            if (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
               isSelectedDay = true;
             } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
               isToday = true;
+              isSelectedDay = false;
             } else {
               isSelectedDay = false;
               isToday = false;
@@ -93,17 +94,22 @@ export default class CalendarView extends React.PureComponent {
             }
             const prevMonthEnd = getMonthEnd(prevMonth, prevYear);
             const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
-            isSelectedDay = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+
+            // isSelectedDay =
+            prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+            // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
             output = /*#__PURE__*/React.createElement(Span, {
-              i: i,
-              isActive: isSelectedDay,
+              i: i
+              //isActive={isSelectedDay}
+              ,
               tdclass: `${tdclass} ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: prevDate,
               userSeeMonth: prevMonth,
               userSeeYear: prevYear,
-              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`,
-              isToday: isToday
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
+              // isToday={isToday}
             });
           } else if (incremleti > monthEnd) {
             let nextMonth = userSeeMonth + 1;
@@ -113,17 +119,23 @@ export default class CalendarView extends React.PureComponent {
               nextYear = userSeeYear + 1;
             }
             const nextDate = incremleti - (userSeeDay - 1) - monthEnd;
-            isSelectedDay = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+
+            // isSelectedDay =
+            nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+
+            // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
             output = /*#__PURE__*/React.createElement(Span, {
-              i: i,
-              isActive: isSelectedDay,
+              i: i
+              // isActive={isSelectedDay}
+              ,
               tdclass: `${tdclass}  ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: nextDate,
               userSeeMonth: nextMonth,
               userSeeYear: nextYear,
-              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`,
-              isToday: isToday
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
+              //isToday={isToday}
             });
           } else {
             output = /*#__PURE__*/React.createElement(Box, {

package/es/DateTime/DateTime.js

@@ -134,7 +134,7 @@ export default class DateTime extends React.PureComponent {
       defaultHour = parseInt(defaultHour);
       defaultMin = parseInt(defaultMin);
     }
-    const dateObj = isDateTimeField ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : new Date();
+    const dateObj = isDateTimeField ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : todayObj;
     date = dateObj.getDate();
     month = dateObj.getMonth();
     year = dateObj.getFullYear();

package/es/DateTime/DateTime.module.css

@@ -124,6 +124,16 @@
   color: var(--zdt_datetime_invaliddate_text);
 }
 
+.today {
+  border: 1px solid var(--zdt_datetime_today_border);
+  border-radius: 50%;
+}
+
+.today:hover {
+  border: 1px solid var(--zdt_datetime_today_border);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
+}
+
 .active,
 .active:hover,
 .active.today,
@@ -136,15 +146,7 @@
   border-radius: 50%;
 }
 
-.today {
-  border: 1px solid var(--zdt_datetime_today_border);
-  border-radius: 50%;
-}
 
-.today:hover {
-  border: 1px solid var(--zdt_datetime_today_border);
-  background-color: var(--zdt_datetime_datestr_hover_bg);
-}
 
 .timesection {
   padding-top: var(--zd_size5);

package/es/Switch/Switch.js

@@ -55,8 +55,7 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      tabIndex: isReadOnly || disabled ? '-1' : '0',
-      onClick: !disabled || !isReadOnly ? this.onChange : null
+      tabIndex: isReadOnly || disabled ? '-1' : '0'
     }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -67,8 +66,8 @@ export default class Switch extends React.Component {
       value: value,
       checked: checked,
       disabled: disabled,
-      readOnly: isReadOnly
-      // onClick={!disabled || !isReadOnly ? this.onChange : null}
+      readOnly: isReadOnly,
+      onClick: !disabled || !isReadOnly ? this.onChange : null
     }), /*#__PURE__*/React.createElement("label", {
       htmlFor: id,
       "data-id": dataId,
@@ -78,9 +77,8 @@ export default class Switch extends React.Component {
       palette: labelPalette,
       id: id,
       size: labelSize,
-      type: "subtitle"
-      // onClick={!disabled || !isReadOnly ? this.onChange : null}
-      ,
+      type: "subtitle",
+      onClick: !disabled || !isReadOnly ? this.onChange : null,
       customClass: customLabel
     }, LabelProps)));
   }

package/es/Tab/Tab.js

@@ -80,10 +80,10 @@ export default function Tab(_ref) {
     adjust: true,
     href: isLink ? href : undefined,
     "data-key": id,
-    role: "tab",
+    role: "link",
     "aria-controls": id,
     "aria-selected": isActive ? true : false,
-    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '-1',
+    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
     "aria-label": text ? text : null
   }, customProps), /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",

package/es/Tab/Tabs.js

@@ -424,16 +424,17 @@ class Tabs extends React.Component {
       }, classProps));
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, /*#__PURE__*/React.createElement(Container, _extends({
       className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
-      eleRef: getTargetRef,
+      eleRef: getTargetRef
+    }, MoreButtonProps, {
       "aria-label": "MoreTabs",
-      role: "tab",
+      role: "link",
       tagName: "button"
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }), /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {

package/lib/Button/Button.module.css

@@ -24,23 +24,26 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
-.default {
+.native {
   composes: varClass;
-  transition: all var(--zd_transition2) ease 0s;
+  /* transition: all var(--zd_transition2) ease 0s; */
   letter-spacing: var(--button_letter_spacing);
   opacity: var(--button_opacity);
+  transition-property: background-color, color, border; 
+  transition-duration: var(--zd_transition2); 
+  transition-timing-function: ease;
   border: 0;
   cursor: var(--button_cursor);
 }
 
-.default:disabled {
+.native:disabled {
   pointer-events: none;
   --button_cursor: not-allowed;
   --button_opacity: 0.4;
 }
 
 .container {
-  composes: default;
+  composes: native;
   composes: dotted from '../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);

package/lib/Button/props/defaultProps.js

@@ -17,6 +17,7 @@ var defaultProps = {
   size: 'medium',
   status: 'none',
   text: 'Button',
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Button/props/propTypes.js

@@ -25,6 +25,7 @@ var propTypes = {
     customButton: _propTypes["default"].string,
     customStatus: _propTypes["default"].string,
     customStatusSize: _propTypes["default"].string
-  })
+  }),
+  customProps: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/DateTime/CalendarView.js

@@ -87,10 +87,11 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
               tdclass += " ".concat(_DateTimeModule["default"].sunday);
             }
             if (incremleti >= userSeeDay && incremday <= monthEnd) {
-              if (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
+              if (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
                 isSelectedDay = true;
               } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
                 isToday = true;
+                isSelectedDay = false;
               } else {
                 isSelectedDay = false;
                 isToday = false;
@@ -116,17 +117,22 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
               }
               var prevMonthEnd = (0, _common.getMonthEnd)(prevMonth, prevYear);
               var prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
-              isSelectedDay = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+
+              // isSelectedDay =
+              prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+              // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
               output = /*#__PURE__*/_react["default"].createElement(Span, {
-                i: i,
-                isActive: isSelectedDay,
+                i: i
+                //isActive={isSelectedDay}
+                ,
                 tdclass: "".concat(tdclass, " ").concat(_DateTimeModule["default"].invalidDate),
                 handleSelect: _this2.handleSelect,
                 incremday: prevDate,
                 userSeeMonth: prevMonth,
                 userSeeYear: prevYear,
-                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate"),
-                isToday: isToday
+                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate")
+                // isToday={isToday}
               });
             } else if (incremleti > monthEnd) {
               var nextMonth = userSeeMonth + 1;
@@ -136,17 +142,23 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
                 nextYear = userSeeYear + 1;
               }
               var nextDate = incremleti - (userSeeDay - 1) - monthEnd;
-              isSelectedDay = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+
+              // isSelectedDay =
+              nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+
+              // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+
               output = /*#__PURE__*/_react["default"].createElement(Span, {
-                i: i,
-                isActive: isSelectedDay,
+                i: i
+                // isActive={isSelectedDay}
+                ,
                 tdclass: "".concat(tdclass, "  ").concat(_DateTimeModule["default"].invalidDate),
                 handleSelect: _this2.handleSelect,
                 incremday: nextDate,
                 userSeeMonth: nextMonth,
                 userSeeYear: nextYear,
-                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate"),
-                isToday: isToday
+                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate")
+                //isToday={isToday}
               });
             } else {
               output = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/DateTime/DateTime.js

@@ -167,7 +167,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         defaultHour = parseInt(defaultHour);
         defaultMin = parseInt(defaultMin);
       }
-      var dateObj = isDateTimeField ? _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone)) : value ? _datetimejs["default"].toDate(value) : new Date();
+      var dateObj = isDateTimeField ? _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone)) : value ? _datetimejs["default"].toDate(value) : todayObj;
       date = dateObj.getDate();
       month = dateObj.getMonth();
       year = dateObj.getFullYear();

package/lib/DateTime/DateTime.module.css

@@ -124,6 +124,16 @@
   color: var(--zdt_datetime_invaliddate_text);
 }
 
+.today {
+  border: 1px solid var(--zdt_datetime_today_border);
+  border-radius: 50%;
+}
+
+.today:hover {
+  border: 1px solid var(--zdt_datetime_today_border);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
+}
+
 .active,
 .active:hover,
 .active.today,
@@ -136,15 +146,7 @@
   border-radius: 50%;
 }
 
-.today {
-  border: 1px solid var(--zdt_datetime_today_border);
-  border-radius: 50%;
-}
 
-.today:hover {
-  border: 1px solid var(--zdt_datetime_today_border);
-  background-color: var(--zdt_datetime_datestr_hover_bg);
-}
 
 .timesection {
   padding-top: var(--zd_size5);

package/lib/Switch/Switch.js

@@ -82,8 +82,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "data-title": disabled ? disableTitle : title,
         "aria-checked": checked,
         role: "switch",
-        tabIndex: isReadOnly || disabled ? '-1' : '0',
-        onClick: !disabled || !isReadOnly ? this.onChange : null
+        tabIndex: isReadOnly || disabled ? '-1' : '0'
       }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
       }, /*#__PURE__*/_react["default"].createElement("input", {
@@ -94,8 +93,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         value: value,
         checked: checked,
         disabled: disabled,
-        readOnly: isReadOnly
-        // onClick={!disabled || !isReadOnly ? this.onChange : null}
+        readOnly: isReadOnly,
+        onClick: !disabled || !isReadOnly ? this.onChange : null
       }), /*#__PURE__*/_react["default"].createElement("label", {
         htmlFor: id,
         "data-id": dataId,
@@ -105,9 +104,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         palette: labelPalette,
         id: id,
         size: labelSize,
-        type: "subtitle"
-        // onClick={!disabled || !isReadOnly ? this.onChange : null}
-        ,
+        type: "subtitle",
+        onClick: !disabled || !isReadOnly ? this.onChange : null,
         customClass: customLabel
       }, LabelProps)));
     }

package/lib/Tab/Tab.js

@@ -89,10 +89,10 @@ function Tab(_ref) {
     adjust: true,
     href: isLink ? href : undefined,
     "data-key": id,
-    role: "tab",
+    role: "link",
     "aria-controls": id,
     "aria-selected": isActive ? true : false,
-    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '-1',
+    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
     "aria-label": text ? text : null
   }, customProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",

package/lib/Tab/Tabs.js

@@ -459,16 +459,17 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, classProps));
       }), _react["default"].Children.count(moreTabs) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TabsModule["default"].menu, " ")
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
         align: "both",
         onClick: this.togglePopup,
         dataId: "moreTabs",
-        eleRef: getTargetRef,
+        eleRef: getTargetRef
+      }, MoreButtonProps, {
         "aria-label": "MoreTabs",
-        role: "tab",
+        role: "link",
         tagName: "button"
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,
         size: iconSize
       })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-254",
+  "version": "1.0.0-alpha-256",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -48,7 +48,7 @@
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/svg": "1.0.0-beta.48",
-    "@zohodesk/a11y": "1.3.4"
+    "@zohodesk/a11y": "1.3.7"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -63,21 +63,36 @@
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/a11y": "1.3.4"
+    "@zohodesk/a11y": "1.3.7"
   },
   "react-cli": {
     "preprocess": {
       "runner": "./preprocess/index.js"
     },
+    "css":{
+      "plugins": {
+        "hasRTL": true
+      },
+      "exclude": {
+        "rtl": [
+          "@zohodesk/icons",
+          "@zohodesk/variables"
+        ]
+      }
+    },
     "docs": {
+      "plugins": {
+        "hasRTL": true
+      },
+      "exclude": {
+        "rtl": [
+          "@zohodesk/icons",
+          "@zohodesk/variables"
+        ]
+      },
       "disableES5Transpile": true,
       "componentFolder": "./src",
-      "cssUniqueness": "false",
-      "rtlExclude": [
-        "@zohodesk/icons",
-        "@zohodesk/variables"
-      ],
-      "hasRTL": true
+      "cssUniqueness": "false"
     }
   }
 }