@zohodesk/components 1.4.21 → 1.4.23

package/es/ColorSelect/_shared/ColoredTag/ColoredTag.js

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import { propTypes } from "./props/propTypes";
+import Tag from "../../../Tag/Tag";
+import { DUMMY_OBJECT } from "../../../utils/Common.js";
+
+function ColoredTag(props) {
+  const {
+    colorConfig,
+    customAttributes,
+    isActive,
+    ...rest
+  } = props;
+  const {
+    textColor,
+    backgroundColor,
+    borderColor
+  } = colorConfig || DUMMY_OBJECT;
+  const style = useMemo(() => ({
+    '--tag_bg_color': backgroundColor,
+    '--tag_text_color': textColor,
+    '--tag_border_color': borderColor
+  }), [backgroundColor, textColor, borderColor]);
+  const composedAttributes = useMemo(() => ({ ...customAttributes,
+    style
+  }), [customAttributes, style]);
+  return /*#__PURE__*/React.createElement(Tag, { ...rest,
+    active: isActive,
+    customAttributes: composedAttributes
+  });
+}
+
+ColoredTag.propTypes = propTypes;
+export default ColoredTag;

package/es/ColorSelect/_shared/ColoredTag/__tests__/ColoredTag.spec.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ColoredTag from "../ColoredTag";
+describe('ColoredTag', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with isActive true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with colorConfig', () => {
+    const colorConfig = {
+      backgroundColor: 'lightsteelblue',
+      textColor: 'dodgerblue',
+      borderColor: 'dodgerblue'
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      colorConfig: colorConfig
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      customAttributes: {
+        'data-custom-attribute': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      text: 'Colored Tag'
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColoredTag rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="1"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with colorConfig 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="3"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    style="--tag_bg_color: lightsteelblue; --tag_text_color: dodgerblue; --tag_border_color: dodgerblue;"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="3"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with customAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="4"
+    class="container effect    medium lgRadius default   "
+    data-custom-attribute="true"
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="4"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with isActive true 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="2"
+    class="container effect selected activedefault   medium lgRadius default   "
+    data-id="tag_TagSelected"
+    data-selector-id="tag"
+    data-test-id="tag_TagSelected"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="2"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with text 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="5"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    data-title="Colored Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="5"
+    >
+      Colored Tag
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/ColorSelect/_shared/ColoredTag/props/propTypes.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import { propTypes as tagPropTypes } from "../../../../Tag/props/propTypes";
+export const propTypes = { ...tagPropTypes,
+  isActive: PropTypes.bool,
+  colorConfig: PropTypes.shape({
+    textColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    borderColor: PropTypes.string
+  })
+};

package/es/ColorSelect/_shared/helpers/renderHelpers.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ColoredTag from "../ColoredTag/ColoredTag";
+import ColorIndicator from "../ColorIndicator/ColorIndicator";
+import { DUMMY_OBJECT } from "../../../utils/Common";
+export function renderColoredTag(data) {
+  const {
+    option,
+    ...otherData
+  } = data || DUMMY_OBJECT;
+  const {
+    colorConfig,
+    value,
+    id
+  } = option || DUMMY_OBJECT;
+  const {
+    text,
+    background,
+    border
+  } = colorConfig || DUMMY_OBJECT;
+
+  function getColorConfig() {
+    return {
+      backgroundColor: background,
+      textColor: text,
+      borderColor: border
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(ColoredTag, {
+    text: value,
+    id: id,
+    ...otherData,
+    colorConfig: getColorConfig()
+  });
+}
+export function renderColorIndicator(data) {
+  const {
+    colorConfig
+  } = data;
+  return /*#__PURE__*/React.createElement(ColorIndicator, {
+    colorConfig: colorConfig
+  });
+}

package/es/ColorSelect/props/defaultProps.js

@@ -0,0 +1,12 @@
+import { MultiSelect_defaultProps } from "../../MultiSelect/props/defaultProps";
+import { Select_defaultProps } from "../../Select/props/defaultProps";
+export const ColorSingleSelect_defaultProps = { ...Select_defaultProps,
+  className: '',
+  options: [],
+  customProps: {},
+  customClass: {}
+};
+export const ColorMultiSelect_defaultProps = { ...MultiSelect_defaultProps,
+  options: [],
+  customProps: {}
+};

package/es/ColorSelect/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import { Select_propTypes } from "../../Select/props/propTypes";
+import { MultiSelect_propTypes } from "../../MultiSelect/props/propTypes";
+export const propTypes = {
+  renderCustomColorIndicator: PropTypes.element
+};
+export const ColorSingleSelect_propTypes = { ...Select_propTypes,
+  ...propTypes,
+  placeholder: PropTypes.string,
+  customClass: PropTypes.shape({
+    selectClass: PropTypes.string
+  }),
+  renderRightPlaceholderNode: PropTypes.node
+};
+export const ColorMultiSelect_propTypes = { ...MultiSelect_propTypes,
+  ...propTypes
+};

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

@@ -618,10 +618,8 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -695,9 +693,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>
@@ -718,10 +713,8 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -795,9 +788,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>
@@ -818,10 +808,8 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -895,9 +883,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>

package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,10 +11,8 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="container effect  placeHolder  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -69,9 +67,6 @@ exports[`DateWidget rendering the defult props 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,10 +27,8 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -102,9 +100,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>
@@ -125,10 +120,8 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -200,9 +193,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>
@@ -223,10 +213,8 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -298,9 +286,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/es/ListItem/ListItem.js

@@ -75,6 +75,7 @@ export default class ListItem extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderBeforeChildren,
       renderValueRightPlaceholderNode
     } = this.props;
     let {
@@ -124,7 +125,11 @@ export default class ListItem extends React.Component {
       className: style.leftBox
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.titleBox
-    }, value ? /*#__PURE__*/React.createElement(Box, {
+    }, isRenderable(renderBeforeChildren) ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
+      className: style.beforeChild
+    }, renderNode(renderBeforeChildren)) : null, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value

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,6 +8,14 @@ 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();
+  });
   test('ListItem with renderValueRightPlaceholderNode', () => {
     const {
       asFragment

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

@@ -78,6 +78,53 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
 </DocumentFragment>
 `;
 
+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

@@ -67,6 +67,7 @@ export const ListItem_Props = {
     ListItemProps: PropTypes.object
   }),
   secondaryValue: PropTypes.string,
+  renderBeforeChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 export const ListItemWithAvatar_Props = {

package/es/MultiSelect/MultiSelect.js

@@ -36,6 +36,9 @@ import MobileHeader from "./MobileHeader/MobileHeader";
 /* eslint-disable react/no-unused-prop-types */
 
 const dummyArray = [];
+const a11yProps = {
+  role: 'option'
+};
 export class MultiSelectComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -934,6 +937,7 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       ariaErrorId,
       customProps,
+      renderCustomSelectedValue,
       isFocus,
       isPopupReady,
       renderCustomClearComponent,
@@ -978,7 +982,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,
@@ -1174,6 +1182,8 @@ export class MultiSelectComponent extends React.Component {
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
       className: style[palette]
     }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      a11y: a11yProps,
+      needBorder: false,
       key: searchStr.trim(),
       suggestions: suggestions,
       isVirtualizerEnabled: isVirtualizerEnabled,
@@ -1183,13 +1193,9 @@ export class MultiSelectComponent extends React.Component {
       hoverOption: hoverOption,
       onClick: this.handleSelectOption,
       onMouseEnter: this.handleMouseEnter,
-      needBorder: false,
       dataId: `${dataId}_Options`,
       palette: palette,
       selectedOptions: selectedOptionIds,
-      a11y: {
-        role: 'option'
-      },
       limit: limit,
       limitReachedMessage: limitReachedMessage,
       ...SuggestionsProps

package/es/MultiSelect/SelectedOptions.js

@@ -23,7 +23,11 @@ export default class SelectedOptions extends React.PureComponent {
       size,
       palette,
       dataId,
-      limit
+      limit,
+      renderCustomSelectedValue,
+      isPopupOpen,
+      isPopupReady,
+      isDisabled: isInputDisabled
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
     const selectedData = limit && limit > 0 ? selectedOptions.slice(0, limit) : selectedOptions;
@@ -69,6 +73,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

@@ -10,6 +10,7 @@ import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
 import ListItemWithIcon from "../ListItem/ListItemWithIcon";
 import { Container, Box } from "../Layout";
 import { DUMMY_OBJECT, DUMMY_ARRAY } from "../utils/Common";
+import { renderNode } from '@zohodesk/utils';
 
 function SuggestionsVirtualizerContainer(_ref) {
   let {
@@ -44,6 +45,7 @@ export default class Suggestions extends React.PureComponent {
       needTick,
       needBorder,
       selectedOptions = DUMMY_ARRAY,
+      renderBeforeChildren,
       activeId,
       hoverId,
       listItemSize,
@@ -161,7 +163,8 @@ export default class Suggestions extends React.PureComponent {
       size: listItemSize,
       palette: palette,
       a11y: list_a11y,
-      secondaryValue: secondaryValue
+      secondaryValue: secondaryValue,
+      renderBeforeChildren: renderNode(renderBeforeChildren, suggestion)
     });
   }