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

package/es/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/es/Buttongroup/Buttongroup.js

@@ -16,7 +16,7 @@ export default class Buttongroup extends React.Component {
       dataSelectorId
     } = this.props;
     let btnGroup = [];
-    children.forEach(child => {
+    children && children.forEach(child => {
       let btnRight = /*#__PURE__*/React.createElement("span", {
         className: style[type]
       }, child);

package/es/DateTime/DateTime.js

@@ -112,8 +112,8 @@ export default class DateTime extends React.PureComponent {
       if (timeZone && value) {
         result = datetime.toDate(datetime.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/es/DropBox/DropBox.js

@@ -12,7 +12,7 @@ import { DropBoxPropTypes } from './props/propTypes';
 import { stopPropagation } from './../utils/Common';
 import style from './css/DropBox.module.css';
 export default function DropBox(props) {
-  const focusRef = useRef(null);
+  const dropBoxRef = useRef(null);
   const DropBoxContext = useContext(LibraryContext);
   const {
     needResponsive,
@@ -21,8 +21,19 @@ export default function DropBox(props) {
     isAbsolutePositioningNeeded,
     isRestrictScroll,
     needFocusScope,
-    onClose
+    onClose,
+    customProps
   } = props;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    autoFocus = true,
+    restoreFocus = true,
+    needArrowLoop = true,
+    needTabLoop = false,
+    enableEnterAction = true
+  } = focusScopeProps;
   const {
     direction
   } = DropBoxContext || {};
@@ -41,22 +52,23 @@ export default function DropBox(props) {
   const {
     zIndexStyle
   } = cssJSLogic(props);
-  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
-    focusClose: onClose,
-    elementRef: focusRef,
-    autoFocus: true,
-    restoreFocus: true,
-    focusArrowLoop: true,
-    enableEnterAction: true
-  }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, _extends({
+    onClose: onClose,
+    elementRef: dropBoxRef,
+    autoFocus: autoFocus,
+    restoreFocus: restoreFocus,
+    needArrowLoop: needArrowLoop,
+    needTabLoop: needTabLoop,
+    enableEnterAction: enableEnterAction
+  }, focusScopeProps), /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: focusRef
+    subContainerRef: dropBoxRef
   }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
-    subContainerRef: focusRef,
+    subContainerRef: dropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle

package/es/DropBox/props/defaultProps.js

@@ -6,7 +6,8 @@ export const defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   needFocusScope: false,
-  needAutoZindex: true
+  needAutoZindex: true,
+  customProps: {}
 };
 export const DropBoxDefaultProps = { ...DropBoxElementDefaultProps,
   ...defaultProps

package/es/DropBox/props/propTypes.js

@@ -7,7 +7,8 @@ export const propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   needFocusScope: PropTypes.bool,
-  needAutoZindex: PropTypes.bool
+  needAutoZindex: PropTypes.bool,
+  customProps: PropTypes.object
 };
 export const DropBoxPropTypes = { ...DropBoxElementPropTypes,
   ...propTypes

package/es/ListItem/ListContainer.js

@@ -54,7 +54,8 @@ const ListContainer = props => {
   const {
     role,
     ariaSelected,
-    ariaLabel
+    ariaLabel,
+    insetFocus = true
   } = a11y;
   const options = {};
 
@@ -73,7 +74,7 @@ const ListContainer = props => {
 
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
-    "data-a11y-inside-focus": true,
+    "data-a11y-inset-focus": insetFocus,
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,

package/es/ListItem/ListItem.js

@@ -82,13 +82,18 @@ export default class ListItem extends React.Component {
       customListItem = '',
       customTickIcon = ''
     } = customClass;
+    const listA11y = {
+      ariaHidden: true,
+      role: 'option',
+      ...a11y
+    };
     let {
-      ariaHidden = true
-    } = a11y;
+      ariaHidden
+    } = listA11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/ListItem/ListItemWithAvatar.js

@@ -87,13 +87,18 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customAvatar = '',
       customAvatarTeam = ''
     } = customClass;
+    const listA11y = {
+      ariaHidden: true,
+      role: 'option',
+      ...a11y
+    };
     let {
-      ariaHidden = true
-    } = a11y;
+      ariaHidden
+    } = listA11y;
     let isDarkPalette = palette === 'dark';
     let dataIdString = value ? value : dataId;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/ListItem/ListItemWithCheckBox.js

@@ -63,6 +63,10 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps,
       needMultiLineText
     } = this.props;
+    const listA11y = {
+      role: 'option',
+      ...a11y
+    };
     let {
       ListItemProps = {},
       ContainerProps = {}
@@ -73,7 +77,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customLabel = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/ListItem/ListItemWithIcon.js

@@ -78,12 +78,17 @@ export default class ListItemWithIcon extends React.Component {
       ListItemProps = {},
       ContainerProps = {}
     } = customProps;
+    const listA11y = {
+      ariaHidden: true,
+      role: 'option',
+      ...a11y
+    };
     let {
-      ariaHidden = true
-    } = a11y;
+      ariaHidden
+    } = listA11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/ListItem/ListItemWithRadio.js

@@ -68,13 +68,17 @@ export default class ListItemWithRadio extends React.Component {
       ListItemProps = {},
       ContainerProps = {}
     } = customProps;
+    const listA11y = {
+      role: 'option',
+      ...a11y
+    };
     let {
       customListItem = '',
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/MultiSelect/props/propTypes.js

@@ -10,7 +10,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   emptyMessage: PropTypes.string.isRequired,
   getContainerRef: PropTypes.func,
   getFooter: PropTypes.func,
-  groupedOptions: PropTypes.array.required,
+  groupedOptions: PropTypes.array.isRequired,
   i18nKeys: PropTypes.shape({
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,

package/es/Select/Select.js

@@ -953,6 +953,8 @@ SelectComponent.defaultProps = Select_defaultProps;
 SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;
+Select.propTypes = Select_propTypes;
+Select.displayName = 'Select';
 export default Select; // if (__DOCS__) {
 //   Select.docs = {
 //     componentGroup: 'Form Elements',