@zohodesk/components 1.0.0-temp-166 → 1.0.0-temp-167

package/lib/Button/__tests__/Button.spec.js

@@ -0,0 +1,62 @@
+// import React from 'react';
+// import Button from '../Button';
+// import {render} from "@testing-library/react"
+// describe('Button component', () => {
+//     test('Should be render with the basic set of default props', () => {
+//         const { asFragment } = render(<Button />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     const palette = ['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled'];
+//     test.each(palette)('Should render palette of buttons - %s', (palette) => {
+//       const { asFragment } = render(<Button palette={palette} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const size = ['small', 'medium', 'large', 'xlarge'];
+//     test.each(size)('Should render Sizes of buttons - %s', (size) => {
+//       const { asFragment } = render(<Button size={size} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const status = ['loading', 'success', 'none'];
+//     test.each(status)('Should render Status of buttons - %s', (status) => {
+//       const { asFragment } = render(<Button status={status} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const customStatus = ['loading', 'success'];
+//     test.each(customStatus)('Should render CustomStatusclassname of buttons - %s', (customStatus) => {
+//         const { asFragment } = render(<Button status={customStatus} customClass={{customStatus:"customStautusClassName"}} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with disabled is true', () => {
+//         const { asFragment } = render(<Button disabled />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with isBold is false', () => {
+//         const { asFragment } = render(<Button isBold={false} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with rounded is true', () => {
+//         const { asFragment } = render(<Button rounded />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with needAppearance is false', () => {
+//         const { asFragment } = render(<Button needAppearance={false} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customButtonclass with buttonClass ', () => {
+//         const { asFragment } = render(<Button customClass={{customButton:"customButtonClass"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customstatusSize props with buttonClass ', () => {
+//         const { asFragment } = render(<Button customClass={{customStatusSize:"customButtonClass"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customstyle ', () => {
+//         const { asFragment } = render(<Button customStyle={{bold: "buttonBold"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the customstyle with medium ', () => {
+//         const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+// });
+"use strict";

package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -0,0 +1,440 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button component Should be render with the basic set customButtonclass with buttonClass  1`] = `
+<DocumentFragment>
+  <button
+    class="customButtonClass bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set customstatusSize props with buttonClass  1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set customstyle  1`] = `
+<DocumentFragment>
+  <button
+    class="bold buttonBold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props with disabled is true 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp_disabled"
+    data-selector-id="button"
+    data-test-id="buttonComp_disabled"
+    disabled=""
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props with isBold is false 1`] = `
+<DocumentFragment>
+  <button
+    class="primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props with needAppearance is false 1`] = `
+<DocumentFragment>
+  <button
+    class="bold"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props with rounded is true 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary rounded medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the customstyle with medium  1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary buttonMedium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render CustomStatusclassname of buttons - loading 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium loader"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    disabled=""
+    type="button"
+  >
+    Button
+    <div
+      class="overlay"
+    >
+      <div
+        class="loading mediumloading"
+      >
+        <div
+          class="customStautusClassName loadingelement primaryelement"
+        />
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render CustomStatusclassname of buttons - success 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium loader"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+    <div
+      class="overlay"
+    >
+      <div
+        class="success"
+      >
+        <div
+          class="customStautusClassName successelement primarysuccess"
+        />
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Sizes of buttons - large 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary large"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Sizes of buttons - medium 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Sizes of buttons - small 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary small"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Sizes of buttons - xlarge 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary xlarge"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Status of buttons - loading 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium loader"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    disabled=""
+    type="button"
+  >
+    Button
+    <div
+      class="overlay"
+    >
+      <div
+        class="loading mediumloading"
+      >
+        <div
+          class="loadingelement primaryelement"
+        />
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Status of buttons - none 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Status of buttons - success 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium loader"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+    <div
+      class="overlay"
+    >
+      <div
+        class="success"
+      >
+        <div
+          class="successelement primarysuccess"
+        />
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - dangerFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold dangerfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - info 1`] = `
+<DocumentFragment>
+  <button
+    class="bold medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - plainPrimary 1`] = `
+<DocumentFragment>
+  <button
+    class="bold plainprimary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - plainSecondary 1`] = `
+<DocumentFragment>
+  <button
+    class="bold plainsecondary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - primary 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - primaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primaryfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - secondary 1`] = `
+<DocumentFragment>
+  <button
+    class="bold secondary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - secondaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold secondaryfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - successFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold successfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - tertiaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold tertiaryfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;

package/lib/Buttongroup/Buttongroup.js

@@ -61,7 +61,7 @@ var Buttongroup = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props.dataId,
           dataSelectorId = _this$props.dataSelectorId;
       var btnGroup = [];
-      children.forEach(function (child) {
+      children && children.forEach(function (child) {
         var btnRight = /*#__PURE__*/_react["default"].createElement("span", {
           className: _ButtongroupModule["default"][type]
         }, child);

package/lib/DateTime/DateTime.js

@@ -182,8 +182,8 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         if (timeZone && value) {
           result = _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone));
         } else {
-          value = value.replace('Z', '');
-          result = new Date(value);
+          value = value ? value.replace('Z', '') : null;
+          result = value ? new Date(value) : new Date();
         }
       } else {
         if (value) {

package/lib/DropBox/DropBox.js

@@ -38,7 +38,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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); }
 
 function DropBox(props) {
-  var focusRef = (0, _react.useRef)(null);
+  var dropBoxRef = (0, _react.useRef)(null);
   var DropBoxContext = (0, _react.useContext)(_LibraryContextInit["default"]);
   var needResponsive = props.needResponsive,
       portalId = props.portalId,
@@ -46,7 +46,20 @@ function DropBox(props) {
       isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
       isRestrictScroll = props.isRestrictScroll,
       needFocusScope = props.needFocusScope,
-      onClose = props.onClose;
+      onClose = props.onClose,
+      customProps = props.customProps;
+  var _customProps$focusSco = customProps.focusScopeProps,
+      focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
+  var _focusScopeProps$auto = focusScopeProps.autoFocus,
+      autoFocus = _focusScopeProps$auto === void 0 ? true : _focusScopeProps$auto,
+      _focusScopeProps$rest = focusScopeProps.restoreFocus,
+      restoreFocus = _focusScopeProps$rest === void 0 ? true : _focusScopeProps$rest,
+      _focusScopeProps$need = focusScopeProps.needArrowLoop,
+      needArrowLoop = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
+      _focusScopeProps$need2 = focusScopeProps.needTabLoop,
+      needTabLoop = _focusScopeProps$need2 === void 0 ? false : _focusScopeProps$need2,
+      _focusScopeProps$enab = focusScopeProps.enableEnterAction,
+      enableEnterAction = _focusScopeProps$enab === void 0 ? true : _focusScopeProps$enab;
 
   var _ref = DropBoxContext || {},
       direction = _ref.direction;
@@ -66,22 +79,23 @@ function DropBox(props) {
   var _cssJSLogic = (0, _cssJSLogic2["default"])(props),
       zIndexStyle = _cssJSLogic.zIndexStyle;
 
-  var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
-    focusClose: onClose,
-    elementRef: focusRef,
-    autoFocus: true,
-    restoreFocus: true,
-    focusArrowLoop: true,
-    enableEnterAction: true
-  }, /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
+  var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], _extends({
+    onClose: onClose,
+    elementRef: dropBoxRef,
+    autoFocus: autoFocus,
+    restoreFocus: restoreFocus,
+    needArrowLoop: needArrowLoop,
+    needTabLoop: needTabLoop,
+    enableEnterAction: enableEnterAction
+  }, focusScopeProps), /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: focusRef
+    subContainerRef: dropBoxRef
   }))) : /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
-    subContainerRef: focusRef,
+    subContainerRef: dropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle

package/lib/DropBox/props/defaultProps.js

@@ -20,7 +20,8 @@ var defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   needFocusScope: false,
-  needAutoZindex: true
+  needAutoZindex: true,
+  customProps: {}
 };
 exports.defaultProps = defaultProps;
 

package/lib/DropBox/props/propTypes.js

@@ -24,7 +24,8 @@ var propTypes = {
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
   needFocusScope: _propTypes["default"].bool,
-  needAutoZindex: _propTypes["default"].bool
+  needAutoZindex: _propTypes["default"].bool,
+  customProps: _propTypes["default"].object
 };
 exports.propTypes = propTypes;
 

package/lib/ListItem/ListContainer.js

@@ -70,7 +70,9 @@ var ListContainer = function ListContainer(props) {
 
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected,
-      ariaLabel = a11y.ariaLabel;
+      ariaLabel = a11y.ariaLabel,
+      _a11y$insetFocus = a11y.insetFocus,
+      insetFocus = _a11y$insetFocus === void 0 ? true : _a11y$insetFocus;
   var options = {};
 
   if (isLink) {
@@ -88,7 +90,7 @@ var ListContainer = function ListContainer(props) {
 
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     role: role,
-    "data-a11y-inside-focus": true,
+    "data-a11y-inset-focus": insetFocus,
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,

package/lib/ListItem/ListItem.js

@@ -25,6 +25,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -125,12 +131,17 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customTi = customClass.customTickIcon,
           customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi;
-      var _a11y$ariaHidden = a11y.ariaHidden,
-          ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+
+      var listA11y = _objectSpread({
+        ariaHidden: true,
+        role: 'option'
+      }, a11y);
+
+      var ariaHidden = listA11y.ariaHidden;
       var tickIconPalette = _ListItemModule["default"]["".concat(palette, "Tick")] ? _ListItemModule["default"]["".concat(palette, "Tick")] : '';
       var dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
+        a11y: listA11y,
         size: size,
         palette: palette,
         highlight: highlight,