@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

package/es/ListItem/ListItem.module.css

@@ -70,6 +70,12 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
+[dir=ltr] .beforeChild{
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .beforeChild{
+  margin-left: var(--zd_size10) ;
+}
 .value, .multiLineValue {
   line-height: 1.5385;
 }

package/es/ListItem/__tests__/ListItem.spec.js

@@ -8,4 +8,12 @@ describe('ListItem', () => {
     } = render( /*#__PURE__*/React.createElement(ListItem, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderBeforeChildren', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      renderBeforeChildren: /*#__PURE__*/React.createElement("span", null, "Before children")
+    }, "Content"));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListItem Should render with renderBeforeChildren 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItem"
+    data-selector-id="listItem"
+    data-test-id="listItem"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="beforeChild basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span>
+            Before children
+          </span>
+        </div>
+        <div
+          class="children basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          Content
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`ListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li

package/es/ListItem/props/propTypes.js

@@ -65,7 +65,8 @@ export const ListItem_Props = {
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
-  secondaryValue: PropTypes.string
+  secondaryValue: PropTypes.string,
+  renderBeforeChildren: PropTypes.node
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,

package/es/MultiSelect/MultiSelect.js

@@ -89,7 +89,7 @@ export class MultiSelectComponent extends React.Component {
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {
       selectedOptions,
       options,
@@ -882,6 +882,7 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       ariaErrorId,
       customProps,
+      renderCustomSelectedValue,
       isFocus,
       isPopupReady,
       renderCustomClearComponent,
@@ -926,7 +927,11 @@ export class MultiSelectComponent extends React.Component {
       onSelect: this.handleClickSelectedOption,
       size: size,
       palette: palette,
-      dataId: `${dataId}_selectedOptions`
+      dataId: `${dataId}_selectedOptions`,
+      renderCustomSelectedValue: renderCustomSelectedValue,
+      isPopupReady: isPopupReady,
+      isPopupOpen: isPopupOpen,
+      isDisabled: isDisabled
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -1034,8 +1039,12 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll
+      needSelectAll,
+      customProps
     } = this.props;
+    let {
+      SuggestionsProps = {}
+    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1125,7 +1134,8 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      }
+      },
+      ...SuggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/SelectedOptions.js

@@ -22,7 +22,11 @@ export default class SelectedOptions extends React.PureComponent {
       onSelect,
       size,
       palette,
-      dataId
+      dataId,
+      renderCustomSelectedValue,
+      isPopupOpen,
+      isPopupReady,
+      isDisabled: isInputDisabled
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
     return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.map(option => {
@@ -67,6 +71,25 @@ export default class SelectedOptions extends React.PureComponent {
           iconName: icon,
           iconSize: iconSize
         }));
+      } else if (optionType === 'custom') {
+        return /*#__PURE__*/React.createElement(Box, {
+          className: `${style.tag} ${style[size]}`,
+          key: `${id}customTag`,
+          dataId: dataId
+        }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
+          onRemove: isDisabled || isReadOnly ? null : onRemove,
+          palette: isDarkPalette,
+          onSelectTag: isReadOnly ? null : onSelect,
+          getRef: getRef,
+          isReadOnly: isReadOnly,
+          isPopupReady: isPopupReady,
+          isPopupOpen: isPopupOpen,
+          isDisabled: isInputDisabled,
+          size,
+          highLightedSelectOptions,
+          isActive: highLightedSelectOptions.indexOf(id) >= 0,
+          option
+        }) : renderCustomSelectedValue);
       }
 
       return /*#__PURE__*/React.createElement(Box, {

package/es/MultiSelect/Suggestions.js

@@ -19,6 +19,7 @@ export default class Suggestions extends React.PureComponent {
       needTick,
       needBorder,
       selectedOptions = [],
+      renderBeforeChildren,
       activeId,
       hoverId,
       dataId,
@@ -136,7 +137,8 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        renderBeforeChildren: renderBeforeChildren ? typeof renderBeforeChildren === 'function' ? renderBeforeChildren(suggestion) : renderBeforeChildren : null
       });
     })));
   }

package/es/MultiSelect/__tests__/MultiSelect.spec.js

@@ -1,6 +1,35 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import MultiSelect from "../MultiSelect";
+const options = [{
+  id: 1,
+  text: 'custom 1',
+  optionType: 'custom'
+}, {
+  id: 2,
+  text: 'custom 2',
+  optionType: 'custom'
+}, {
+  id: 3,
+  text: 'custom 3',
+  optionType: 'custom'
+}, {
+  id: 4,
+  text: 'custom 4',
+  optionType: 'custom'
+}, {
+  id: 5,
+  text: 'custom 5',
+  optionType: 'custom'
+}, {
+  id: 6,
+  text: 'custom 6',
+  optionType: 'custom'
+}, {
+  id: 7,
+  text: 'custom 7',
+  optionType: 'custom'
+}];
 describe('MultiSelect', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +37,13 @@ describe('MultiSelect', () => {
     } = render( /*#__PURE__*/React.createElement(MultiSelect, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, {
+      options: options,
+      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, "MultiSelect Custom Value")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/SelectedOptions.spec.js

@@ -25,4 +25,17 @@ describe('SelectedOptions', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        value: 'SelectedObject1',
+        optionType: 'custom'
+      }],
+      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, " SelectedOptions Custom Value")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/Suggestions.spec.js

@@ -10,4 +10,16 @@ describe('Suggestions', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderBeforeChildren', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        value: 'Suggestions Option 1',
+        id: '1'
+      }],
+      renderBeforeChildren: () => /*#__PURE__*/React.createElement("span", null, "Suggestions Before Children")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -25,10 +25,10 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="multiSelect_textBox"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="multiSelect_textBox"
         >
           <div
             class="grow basis shrinkOff"

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -25,10 +25,10 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="textBoxIcon"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="textBoxIcon"
         >
           <div
             class="grow basis shrinkOff"
@@ -98,10 +98,10 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="textBoxIcon"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="textBoxIcon"
         >
           <div
             class="grow basis shrinkOff"
@@ -346,10 +346,10 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="textBoxIcon"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="textBoxIcon"
         >
           <div
             class="grow basis shrinkOff"

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

@@ -1,5 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper     effect"
+    data-id="multiSelect"
+    data-selector-id="multiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+          "
+        />
+        <div
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="multiSelect_textBox"
+          data-selector-id="textBoxIcon"
+          data-test-id="multiSelect_textBox"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="icon  shrinkOff"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="rightPlaceholder inflex rowdir vCenter"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`MultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -25,10 +110,10 @@ exports[`MultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="multiSelect_textBox"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="multiSelect_textBox"
         >
           <div
             class="grow basis shrinkOff"

package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -25,10 +25,10 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
           "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="multiSelectWithAvatar_textBox"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="multiSelectWithAvatar_textBox"
         >
           <div
             class="grow basis shrinkOff"

package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap

@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="tag medium shrinkOff"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <span>
+       SelectedOptions Custom Value
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SelectedOptions rendering the basic select options 1`] = `
 <DocumentFragment>
   <div

package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -1,5 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Suggestions Should render with renderBeforeChildren 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Suggestions Option 1"
+        aria-selected="false"
+        class="list medium  default     withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Suggestions Option 1"
+        data-selector-id="listItem"
+        data-test-id="Suggestions Option 1"
+        data-title="Suggestions Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="beforeChild basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <span>
+                Suggestions Before Children
+              </span>
+            </div>
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Suggestions Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Suggestions rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/es/MultiSelect/props/propTypes.js

@@ -116,7 +116,8 @@ export const MultiSelect_propTypes = {
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
   renderCustomClearComponent: PropTypes.func,
-  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -153,7 +154,11 @@ export const SelectedOptions_propTypes = {
   })),
   size: PropTypes.oneOf(['medium', 'xmedium']),
   palette: PropTypes.string,
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({
@@ -183,7 +188,8 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  }))
+  })),
+  renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,

package/es/Popup/Popup.js

@@ -196,7 +196,7 @@ const Popup = function (Component) {
       }
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const {
         isPopupOpen
       } = this.state;
@@ -556,10 +556,10 @@ const Popup = function (Component) {
 
       if (entry.isIntersecting === true) {
         this.isTargetElementVisible = true;
-        dropElement && dropElement.setAttribute('data-visible', 'visible');
+        dropElement.setAttribute('data-visible', 'visible');
       } else if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
         this.isTargetElementVisible = false;
-        dropElement && dropElement.setAttribute('data-visible', 'hidden');
+        dropElement.setAttribute('data-visible', 'hidden');
       }
     }
 

package/es/Select/ArrowIcon/ArrowIcon.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from "../../Layout";
+import Icon from '@zohodesk/icons/es/Icon';
+import style from "./ArrowIcon.module.css";
+
+const ArrowIcon = props => {
+  const {
+    dataId,
+    isRotated,
+    customClass,
+    a11yAttributes
+  } = props;
+  const {
+    iconClass = '',
+    containerClass = ''
+  } = customClass;
+  return /*#__PURE__*/React.createElement(Container, {
+    isInline: true,
+    isCover: false,
+    align: "both",
+    dataId: `${dataId}_downIcon`,
+    className: `${style.arrowIcon} ${isRotated ? style.rotated : ''} ${containerClass}`,
+    ...a11yAttributes,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: "7",
+    iconClass: iconClass
+  }));
+};
+
+ArrowIcon.defaultProps = {
+  dataId: 'arrowIcon',
+  isRotated: false,
+  customClass: {},
+  a11yAttributes: {}
+};
+ArrowIcon.propTypes = {
+  dataId: PropTypes.string,
+  isRotated: PropTypes.bool,
+  customClass: PropTypes.shape({
+    iconClass: PropTypes.string,
+    containerClass: PropTypes.string
+  }),
+  a11yAttributes: PropTypes.object
+};
+export default ArrowIcon;