@zohodesk/components 1.0.0-temp-58 → 1.0.0-temp-61

package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap

@@ -1,163 +1,163 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Ribbon component should the palette is danger 1`] = `
-<span
-  className="basic palette_danger large default"
-  data-id="ribbonComp"
->
-  danger
-</span>
-`;
-
-exports[`Ribbon component should the palette is dark 1`] = `
-<span
-  className="basic palette_dark large default"
-  data-id="ribbonComp"
->
-  dark
-</span>
-`;
-
-exports[`Ribbon component should the palette is default 1`] = `
-<span
-  className="basic palette_default large default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the palette is info 1`] = `
-<span
-  className="basic palette_info large default"
-  data-id="ribbonComp"
->
-  info
-</span>
-`;
-
-exports[`Ribbon component should the palette is primary 1`] = `
-<span
-  className="basic palette_primary large default"
-  data-id="ribbonComp"
->
-  primary
-</span>
-`;
-
-exports[`Ribbon component should the palette is secondary 1`] = `
-<span
-  className="basic palette_secondary large default"
-  data-id="ribbonComp"
->
-  secondary
-</span>
-`;
-
-exports[`Ribbon component should the size is large 1`] = `
-<span
-  className="basic palette_default large default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is medium 1`] = `
-<span
-  className="basic palette_default small default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is small 1`] = `
-<span
-  className="basic palette_default small default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is xlarge 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is box 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is dafault 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is flag 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is plain 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is ribbon 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is stamp 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is sticker 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is tag 1`] = `
-<span
-  className="basic  large tag"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ribbon component should the palette is danger 1`] = `
+<span
+  className="basic palette_danger large default"
+  data-id="ribbonComp"
+>
+  danger
+</span>
+`;
+
+exports[`Ribbon component should the palette is dark 1`] = `
+<span
+  className="basic palette_dark large default"
+  data-id="ribbonComp"
+>
+  dark
+</span>
+`;
+
+exports[`Ribbon component should the palette is default 1`] = `
+<span
+  className="basic palette_default large default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the palette is info 1`] = `
+<span
+  className="basic palette_info large default"
+  data-id="ribbonComp"
+>
+  info
+</span>
+`;
+
+exports[`Ribbon component should the palette is primary 1`] = `
+<span
+  className="basic palette_primary large default"
+  data-id="ribbonComp"
+>
+  primary
+</span>
+`;
+
+exports[`Ribbon component should the palette is secondary 1`] = `
+<span
+  className="basic palette_secondary large default"
+  data-id="ribbonComp"
+>
+  secondary
+</span>
+`;
+
+exports[`Ribbon component should the size is large 1`] = `
+<span
+  className="basic palette_default large default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is medium 1`] = `
+<span
+  className="basic palette_default small default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is small 1`] = `
+<span
+  className="basic palette_default small default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is xlarge 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is box 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is dafault 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is flag 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is plain 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is ribbon 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is stamp 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is sticker 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is tag 1`] = `
+<span
+  className="basic  large tag"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;

package/es/RippleEffect/RippleEffect.module.css

@@ -1,70 +1,70 @@
-.effect {
-  position: relative;
-  border-radius: var(--zd_size4);
-}
-.border {
-  border: solid 1px var(--zdt_rippleeffect_default_border);
-}
-.default.defaultHover {
-  border-color: var(--zdt_rippleeffect_hover_border);
-}
-.hoverEffect:hover.primary.defaultHover, .hoverEffect:focus.primary.defaultHover, .hoverEffect:hover.primary.borderHover, .hoverEffect:focus.primary.borderHover {
-  border-color: var(--zdt_rippleeffect_primary_border);
-}
-.primary.defaultHover, .hoverEffect:hover.primary.active.border, .hoverEffect:focus.primary.active.border {
-  border-color: var(--zdt_rippleeffect_primary_active_border);
-}
-.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover, .hoverEffect:focus.primaryLight.borderHover {
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.defaultHover, .hoverEffect:hover.green.borderHover, .hoverEffect:focus.green.borderHover {
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.hoverEffect:hover.default.defaultHover, .hoverEffect:focus.default.defaultHover {
-  border-color: var(--zdt_rippleeffect_slate_border);
-}
-.hoverEffect:hover.default.borderHover, .hoverEffect:focus.default.borderHover {
-  border-color: var(--zdt_rippleeffect_navy_border);
-}
-.hoverEffect:hover.default.bgHover, .hoverEffect:focus.default.bgHover {
-  background-color: var(--zdt_rippleeffect_hover_bg);
-}
-.hoverEffect:hover.primaryLight.bgHover, .hoverEffect:focus.primaryLight.bgHover {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.primaryFilled {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.hoverEffect:hover.primaryFilled, .hoverEffect:focus.primaryFilled, .primaryFilled.active {
-  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
-}
-.hoverEffect:hover.green.bgHover, .hoverEffect:focus.green.bgHover {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.default.active, .hoverEffect:hover.default.active, .hoverEffect:focus.default.active, .primaryLight.active, .primaryDark.active {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.default.active.border, .hoverEffect:hover.default.active.border, .hoverEffect:focus.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.active {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.green.active.border {
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.primary.active {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.danger.defaultHover, .hoverEffect:hover.danger.borderHover, .hoverEffect:focus.danger.borderHover {
-  border-color: var(--zdt_rippleeffect_danger_border);
-}
-.hoverEffect:hover.danger.bgHover, .hoverEffect:focus.danger.bgHover, .danger.active {
-  background-color: var(--zdt_rippleeffect_danger_bg);
-}
-.hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
-  background-color: var(--zdt_rippleeffect_primary_dark_bg);
-}
-.notAllowed {
-  cursor: not-allowed;
-}
+.effect {
+  position: relative;
+  border-radius: var(--zd_size4);
+}
+.border {
+  border: solid 1px var(--zdt_rippleeffect_default_border);
+}
+.default.defaultHover {
+  border-color: var(--zdt_rippleeffect_hover_border);
+}
+.hoverEffect:hover.primary.defaultHover, .hoverEffect:focus.primary.defaultHover, .hoverEffect:hover.primary.borderHover, .hoverEffect:focus.primary.borderHover {
+  border-color: var(--zdt_rippleeffect_primary_border);
+}
+.primary.defaultHover, .hoverEffect:hover.primary.active.border, .hoverEffect:focus.primary.active.border {
+  border-color: var(--zdt_rippleeffect_primary_active_border);
+}
+.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover, .hoverEffect:focus.primaryLight.borderHover {
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.defaultHover, .hoverEffect:hover.green.borderHover, .hoverEffect:focus.green.borderHover {
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.hoverEffect:hover.default.defaultHover, .hoverEffect:focus.default.defaultHover {
+  border-color: var(--zdt_rippleeffect_slate_border);
+}
+.hoverEffect:hover.default.borderHover, .hoverEffect:focus.default.borderHover {
+  border-color: var(--zdt_rippleeffect_navy_border);
+}
+.hoverEffect:hover.default.bgHover, .hoverEffect:focus.default.bgHover {
+  background-color: var(--zdt_rippleeffect_hover_bg);
+}
+.hoverEffect:hover.primaryLight.bgHover, .hoverEffect:focus.primaryLight.bgHover {
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.primaryFilled {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.hoverEffect:hover.primaryFilled, .hoverEffect:focus.primaryFilled, .primaryFilled.active {
+  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
+}
+.hoverEffect:hover.green.bgHover, .hoverEffect:focus.green.bgHover {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.default.active, .hoverEffect:hover.default.active, .hoverEffect:focus.default.active, .primaryLight.active, .primaryDark.active {
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.default.active.border, .hoverEffect:hover.default.active.border, .hoverEffect:focus.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.active {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.green.active.border {
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.primary.active {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover, .hoverEffect:focus.danger.borderHover {
+  border-color: var(--zdt_rippleeffect_danger_border);
+}
+.hoverEffect:hover.danger.bgHover, .hoverEffect:focus.danger.bgHover, .danger.active {
+  background-color: var(--zdt_rippleeffect_danger_bg);
+}
+.hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
+  background-color: var(--zdt_rippleeffect_primary_dark_bg);
+}
+.notAllowed {
+  cursor: not-allowed;
+}

package/es/Select/GroupSelect.js

@@ -127,7 +127,7 @@ export class GroupSelectComponent extends PureComponent {
       let {
         selectedId,
         hoverIndex
-      } = this.handleGetSelectedId(this.props, allOptionIds);
+      } = this.handleGetSelectedId(this.props, newOptionIds);
       newSelectedId = selectedId;
       this.setState({
         selectedId,

package/es/Select/Select.js

@@ -22,6 +22,7 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString } from '../utils/C
 /**** CSS ****/
 
 import style from './Select.module.css';
+import { getLibraryConfig } from '../Provider/Config';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -715,7 +716,8 @@ export class SelectComponent extends Component {
       htmlId,
       children,
       iconOnHover,
-      customProps
+      customProps,
+      autoComplete
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -783,7 +785,7 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       isFocus: isPopupReady,
-      autoComplete: false,
+      autoComplete: autoComplete,
       customProps: {
         TextBoxProps: TextBoxProps
       }
@@ -830,7 +832,7 @@ export class SelectComponent extends Component {
       onKeyPress: this.handleValueInputChange,
       borderColor: borderColor,
       htmlId: htmlId,
-      autoComplete: false,
+      autoComplete: autoComplete,
       isFocus: isPopupReady,
       customProps: TextBoxProps
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
@@ -865,7 +867,7 @@ export class SelectComponent extends Component {
       onClear: this.handleClearSearch,
       dataId: `${dataId}_search`,
       i18nKeys: TextBoxIcon_i18n,
-      autoComplete: false,
+      autoComplete: autoComplete,
       customProps: {
         TextBoxProps: DropdownSearchTextBoxProps
       }
@@ -905,6 +907,7 @@ export class SelectComponent extends Component {
 }
 SelectComponent.propTypes = {
   animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
   autoSelectDebouneTime: PropTypes.number,
   autoSelectOnType: PropTypes.bool,
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -990,6 +993,7 @@ SelectComponent.propTypes = {
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
   autoSelectOnType: true,
   dataId: 'selectComponent',
   dropBoxSize: 'small',