@zohodesk/components 1.2.62 → 1.3.0

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -1,6 +1,204 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ListItemWithRadio rendering the defult props 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align center 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfCenter"
+      data-id="listItemWithRadioComp_radio"
+      data-selector-id="box"
+      data-test-id="listItemWithRadioComp_radio"
+    >
+      <div
+        class="shrinkOff selfCenter"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   inflex rowdir both"
+          data-id="RadioComp"
+          data-selector-id="container"
+          data-test-id="RadioComp"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+              value=""
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align end 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfEnd"
+      data-id="listItemWithRadioComp_radio"
+      data-selector-id="box"
+      data-test-id="listItemWithRadioComp_radio"
+    >
+      <div
+        class="lhsBox_medium shrinkOff selfEnd"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   inflex rowdir both"
+          data-id="RadioComp"
+          data-selector-id="container"
+          data-test-id="RadioComp"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+              value=""
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -12,58 +210,277 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="iconBox shrinkOff"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
       data-id="listItemWithRadioComp_radio"
       data-selector-id="box"
       data-test-id="listItemWithRadioComp_radio"
     >
       <div
-        aria-checked="false"
-        aria-hidden="true"
-        aria-readonly="false"
-        class="container  pointer hoverEfffect   inflex rowdir both"
-        data-id="RadioComp"
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   inflex rowdir both"
+          data-id="RadioComp"
+          data-selector-id="container"
+          data-test-id="RadioComp"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+              value=""
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
         data-selector-id="container"
-        data-test-id="RadioComp"
-        role="radio"
-        tabindex="-1"
+        data-test-id="containerComponent"
       >
         <div
-          class="radio  
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align start 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
+      data-id="listItemWithRadioComp_radio"
+      data-selector-id="box"
+      data-test-id="listItemWithRadioComp_radio"
+    >
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   inflex rowdir both"
+          data-id="RadioComp"
+          data-selector-id="container"
+          data-test-id="RadioComp"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
             hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+              value=""
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          <input
-            type="hidden"
-            value=""
-          />
-          <label
-            class="radioLabel pointer"
+          List
+        </div>
+        <div
+          class="secondaryField  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithRadio rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
+      data-id="listItemWithRadioComp_radio"
+      data-selector-id="box"
+      data-test-id="listItemWithRadioComp_radio"
+    >
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   inflex rowdir both"
+          data-id="RadioComp"
+          data-selector-id="container"
+          data-test-id="RadioComp"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
           >
-            <svg
-              viewBox="0 0 40 40"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              type="hidden"
+              value=""
+            />
+            <label
+              class="radioLabel pointer"
             >
-              <circle
-                class="rdBox"
-                cx="20"
-                cy="20"
-                r="19"
-              />
-            </svg>
-          </label>
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="value grow basis shrinkOn"
+      class="grow basis shrinkOn"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
-      List
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+      </div>
     </div>
   </li>
 </DocumentFragment>

package/es/ListItem/props/defaultProps.js

@@ -12,7 +12,8 @@ export const ListContainerDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listContainer',
-  needMultiLineText: false
+  needMultiLineText: false,
+  align: 'vertical'
 };
 export const ListItemDefaultProps = {
   active: false,
@@ -47,7 +48,8 @@ export const ListItemWithAvatarDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithAvatar',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start'
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -61,7 +63,9 @@ export const ListItemWithCheckBoxDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithCheckBox',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -78,7 +82,9 @@ export const ListItemWithIconDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -93,5 +99,7 @@ export const ListItemWithRadioDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithRadio',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };

package/es/ListItem/props/propTypes.js

@@ -27,7 +27,8 @@ export const ListContainer_Props = {
   }),
   customClass: PropTypes.string,
   customProps: PropTypes.object,
-  eleRef: PropTypes.func
+  eleRef: PropTypes.func,
+  align: PropTypes.string
 };
 export const ListItem_Props = {
   active: PropTypes.bool,
@@ -91,6 +92,8 @@ export const ListItemWithAvatar_Props = {
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
+  secondaryValue: PropTypes.string,
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,
@@ -127,6 +130,9 @@ export const ListItemWithCheckBox_Props = {
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
+  secondaryValue: PropTypes.string,
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
+  lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
@@ -161,6 +167,9 @@ export const ListItemWithIcon_Props = {
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
+  secondaryValue: PropTypes.string,
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
+  lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,
@@ -193,6 +202,9 @@ export const ListItemWithRadio_Props = {
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
+  secondaryValue: PropTypes.string,
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
+  lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -121,12 +121,14 @@ class AdvancedGroupMultiSelect extends React.Component {
   handleFormatSelectedOptions(selectedOptionDetails, props) {
     let {
       valueField,
-      textField
+      textField,
+      allowValueFallback
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
       valueField,
-      textField
+      textField,
+      allowValueFallback
     });
   }
 
@@ -182,6 +184,9 @@ class AdvancedGroupMultiSelect extends React.Component {
   }
 
   handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
+    const {
+      allowValueFallback
+    } = this.props;
     let newSelectedOptions = selectedGroupOptions.map(option => optionIdGrouping(option.id, option.groupId));
     let selectedOptionsLength = newSelectedOptions.length;
     let formatOptions = this.objectConcat({
@@ -191,7 +196,8 @@ class AdvancedGroupMultiSelect extends React.Component {
     return this.getSelectedOptions({
       selectedOptions: newSelectedOptions,
       normalizedFormatOptions: formatOptions,
-      selectedOptionsLength
+      selectedOptionsLength,
+      allowValueFallback
     });
   }
 
@@ -238,10 +244,12 @@ class AdvancedGroupMultiSelect extends React.Component {
 
   handleGetGroupSelectOptions(props) {
     let {
+      allowValueFallback,
       groupedOptions = []
     } = props;
     return this.getGroupSelectOptions({
-      groupedOptions
+      groupedOptions,
+      allowValueFallback
     });
   }