@zohodesk/dot 1.0.0-temp-187.1 → 1.0.0-temp-199

package/es/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -0,0 +1,47 @@
+import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
+export const themeAppearanceImports = {
+  Lib_LightMode_Component: () => import(
+  /* webpackChunkName: 'Lib_LightMode_Component' */
+  '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'),
+  Lib_DarkMode_Component: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Component' */
+  '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css'),
+  Lib_PureDarkMode_Component: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Component' */
+  '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'),
+  Lib_LightMode_Dot: () => import(
+  /* webpackChunkName: 'Lib_LightMode_Dot' */
+  "./../../../assets/Appearance/light/mode/Dot_LightMode.module.css"),
+  Lib_DarkMode_Dot: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Dot' */
+  "./../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css"),
+  Lib_PureDarkMode_Dot: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Dot' */
+  "./../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css"),
+  Lib_LightMode_SVG: () => import(
+  /* webpackChunkName: 'Lib_LightMode_SVG' */
+  '@zohodesk/svg/assets/Appearance/light/mode/SVG_LightMode.module.css'),
+  Lib_DarkMode_SVG: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_SVG' */
+  '@zohodesk/svg/assets/Appearance/dark/mode/SVG_DarkMode.module.css'),
+  Lib_PureDarkMode_SVG: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_SVG' */
+  '@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css')
+};
+export const themeAppearanceMapping = {
+  [LIBRARY_COMPONENT]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Component',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Component',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Component'
+  },
+  [LIBRARY_DOT]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Dot',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Dot',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Dot'
+  },
+  [LIBRARY_SVG]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_SVG',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_SVG',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_SVG'
+  }
+};

package/es/DotProvider/utils/themeColorAssetsConfig.js

@@ -0,0 +1,221 @@
+import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
+export const themeColorImports = {
+  Lib_Blue_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_Component' */
+  "../libraryChunks/themes/component/blue/Blue_Light_Component"),
+  Lib_Blue_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_Component' */
+  "../libraryChunks/themes/component/blue/Blue_Dark_Component"),
+  Lib_Blue_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_Component' */
+  "../libraryChunks/themes/component/blue/Blue_PureDark_Component"),
+  Lib_Green_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_Component' */
+  "../libraryChunks/themes/component/green/Green_Light_Component"),
+  Lib_Green_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_Component' */
+  "../libraryChunks/themes/component/green/Green_Dark_Component"),
+  Lib_Green_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_Component' */
+  "../libraryChunks/themes/component/green/Green_PureDark_Component"),
+  Lib_Orange_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_Component' */
+  "../libraryChunks/themes/component/orange/Orange_Light_Component"),
+  Lib_Orange_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_Component' */
+  "../libraryChunks/themes/component/orange/Orange_Dark_Component"),
+  Lib_Orange_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_Component' */
+  "../libraryChunks/themes/component/orange/Orange_PureDark_Component"),
+  Lib_Red_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_Component' */
+  "../libraryChunks/themes/component/red/Red_Light_Component"),
+  Lib_Red_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_Component' */
+  "../libraryChunks/themes/component/red/Red_Dark_Component"),
+  Lib_Red_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_Component' */
+  "../libraryChunks/themes/component/red/Red_PureDark_Component"),
+  Lib_Yellow_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_Component' */
+  "../libraryChunks/themes/component/yellow/Yellow_Light_Component"),
+  Lib_Yellow_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_Component' */
+  "../libraryChunks/themes/component/yellow/Yellow_Dark_Component"),
+  Lib_Yellow_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_Component' */
+  "../libraryChunks/themes/component/yellow/Yellow_PureDark_Component"),
+  Lib_Blue_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_Dot' */
+  "../libraryChunks/themes/dot/blue/Blue_Light_Dot"),
+  Lib_Blue_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_Dot' */
+  "../libraryChunks/themes/dot/blue/Blue_Dark_Dot"),
+  Lib_Blue_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_Dot' */
+  "../libraryChunks/themes/dot/blue/Blue_PureDark_Dot"),
+  Lib_Green_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_Dot' */
+  "../libraryChunks/themes/dot/green/Green_Light_Dot"),
+  Lib_Green_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_Dot' */
+  "../libraryChunks/themes/dot/green/Green_Dark_Dot"),
+  Lib_Green_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_Dot' */
+  "../libraryChunks/themes/dot/green/Green_PureDark_Dot"),
+  Lib_Orange_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_Dot' */
+  "../libraryChunks/themes/dot/orange/Orange_Light_Dot"),
+  Lib_Orange_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_Dot' */
+  "../libraryChunks/themes/dot/orange/Orange_Dark_Dot"),
+  Lib_Orange_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_Dot' */
+  "../libraryChunks/themes/dot/orange/Orange_PureDark_Dot"),
+  Lib_Red_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_Dot' */
+  "../libraryChunks/themes/dot/red/Red_Light_Dot"),
+  Lib_Red_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_Dot' */
+  "../libraryChunks/themes/dot/red/Red_Dark_Dot"),
+  Lib_Red_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_Dot' */
+  "../libraryChunks/themes/dot/red/Red_PureDark_Dot"),
+  Lib_Yellow_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_Dot' */
+  "../libraryChunks/themes/dot/yellow/Yellow_Light_Dot"),
+  Lib_Yellow_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_Dot' */
+  "../libraryChunks/themes/dot/yellow/Yellow_Dark_Dot"),
+  Lib_Yellow_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_Dot' */
+  "../libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot"),
+  Lib_Blue_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_SVG' */
+  "../libraryChunks/themes/svg/blue/Blue_Light_SVG"),
+  Lib_Blue_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_SVG' */
+  "../libraryChunks/themes/svg/blue/Blue_Dark_SVG"),
+  Lib_Blue_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_SVG' */
+  "../libraryChunks/themes/svg/blue/Blue_PureDark_SVG"),
+  Lib_Green_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_SVG' */
+  "../libraryChunks/themes/svg/green/Green_Light_SVG"),
+  Lib_Green_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_SVG' */
+  "../libraryChunks/themes/svg/green/Green_Dark_SVG"),
+  Lib_Green_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_SVG' */
+  "../libraryChunks/themes/svg/green/Green_PureDark_SVG"),
+  Lib_Orange_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_SVG' */
+  "../libraryChunks/themes/svg/orange/Orange_Light_SVG"),
+  Lib_Orange_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_SVG' */
+  "../libraryChunks/themes/svg/orange/Orange_Dark_SVG"),
+  Lib_Orange_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_SVG' */
+  "../libraryChunks/themes/svg/orange/Orange_PureDark_SVG"),
+  Lib_Red_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_SVG' */
+  "../libraryChunks/themes/svg/red/Red_Light_SVG"),
+  Lib_Red_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_SVG' */
+  "../libraryChunks/themes/svg/red/Red_Dark_SVG"),
+  Lib_Red_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_SVG' */
+  "../libraryChunks/themes/svg/red/Red_PureDark_SVG"),
+  Lib_Yellow_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_SVG' */
+  "../libraryChunks/themes/svg/yellow/Yellow_Light_SVG"),
+  Lib_Yellow_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_SVG' */
+  "../libraryChunks/themes/svg/yellow/Yellow_Dark_SVG"),
+  Lib_Yellow_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_SVG' */
+  "../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG")
+};
+export const themeColorMapping = {
+  [LIBRARY_COMPONENT]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Component'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Component'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Component'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Component'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Component'
+    }
+  },
+  [LIBRARY_DOT]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Dot'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Dot'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Dot'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Dot'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Dot'
+    }
+  },
+  [LIBRARY_SVG]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_SVG'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_SVG'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_SVG'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_SVG'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_SVG'
+    }
+  }
+};

package/es/common/dot_boxShadow.module.css

@@ -35,6 +35,4 @@
 
     /* desktop notification */
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
-
-
 }

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -117,6 +117,7 @@ export default class CurrencyField extends PureComponent {
     }
 
     let uniqueId = htmlId ? htmlId : this.getNextId();
+    const isFocusable = !needReadOnlyStyle || !isReadOnly && needReadOnlyStyle;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : null,
@@ -149,7 +150,7 @@ export default class CurrencyField extends PureComponent {
       onChange: this.handleChange,
       dataId: dataId,
       onBlur: this.onBlur,
-      onFocus: this.onFocus,
+      onFocus: isFocusable && this.onFocus,
       onKeyDown: onKeyDown,
       placeHolder: placeHolder,
       borderColor: borderColor,

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -164,8 +164,7 @@ export default class TagsMultiSelect extends React.Component {
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      listProps = {}
+      TagProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
@@ -299,8 +298,7 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass,
-          ...listProps
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,12 +48,8 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      toggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
@@ -88,8 +84,7 @@ class DepartmentDropDown extends Component {
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
-      needSearchFetching: needSearchFetching,
-      ...toggleDropDownProps
+      needSearchFetching: needSearchFetching
     });
   }
 

package/es/list/DepartmentDropDown/props/defaultProps.js

@@ -3,6 +3,5 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -20,6 +20,5 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  }),
-  customProps: PropTypes.string
+  })
 };

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -176,6 +176,8 @@ export class StatusDropdown extends React.Component {
       isRestrictScroll,
       positionsOffset,
       targetOffset,
+      renderTargetElement,
+      renderFooterElement,
       a11y = {}
     } = this.props;
     const {
@@ -193,7 +195,11 @@ export class StatusDropdown extends React.Component {
       className: style.posRel,
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
       onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, renderTargetElement ? renderTargetElement({
+      handleTogglePopup: this.handleTogglePopup,
+      isPopupOpen,
+      getTargetRef
+    }) : /*#__PURE__*/React.createElement(Container, {
       tagName: "button",
       alignBox: "row",
       className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
@@ -333,7 +339,7 @@ export class StatusDropdown extends React.Component {
         getEmptyState: this.emptySearchSVG
       }) : /*#__PURE__*/React.createElement("div", {
         className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)))));
+      }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null));
     }) : null);
   }
 

package/es/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js

@@ -7,5 +7,21 @@ describe('StatusDropdown', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(StatusDropdown, null));
     expect(asFragment()).toMatchSnapshot();
+  }), test('rendering target element', () => {
+    const renderTargetElement = _ref => {
+      let {
+        isPopupOpen
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        className: isPopupOpen ? 'popupOpened' : 'popupClosed'
+      }, "Target Element");
+    };
+
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(StatusDropdown, {
+      renderTargetElement: renderTargetElement
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/list/status/StatusDropdown/__tests__/__snapshots__/StatusDropdown.spec.js.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`StatusDropdown rendering target element 1`] = `
+<DocumentFragment>
+  <div
+    class="posRel"
+  >
+    <div
+      class="popupClosed"
+    >
+      Target Element
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`StatusDropdown rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -54,5 +54,7 @@ export const propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,
+  renderTargetElement: PropTypes.func,
+  renderFooterElement: PropTypes.node,
   targetOffset: PropTypes.object
 };

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -6,58 +6,43 @@
   min-height: var(--zd_size35) ;
   cursor: pointer;
 }
-
 [dir=ltr] .withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
 }
-
 [dir=rtl] .withBorder {
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
-
 [dir=ltr] .small {
   padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
 }
-
 [dir=rtl] .small {
   padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
 }
-
 .medium {
   padding: var(--zd_size7) var(--zd_size20) ;
 }
-
 .large {
   height: var(--zd_size48) ;
 }
-
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
 }
-
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
 }
-
-.value,
-.multiLineValue {
+.value,.multiLineValue {
   line-height: 1.5385;
 }
-
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
-.multiLineValue {
+.multiLineValue{
   word-break: break-word;
-  -webkit-line-clamp: 2;
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
 }
-
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
@@ -65,56 +50,44 @@
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
-
 .primary.hover, .primary.effect:hover, .selected {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-
 .secondary.hover, .secondary.effect:hover {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-
 .list.active.default, .list.active.primary {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-
 .list.active.secondary {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-
 .secondary.hover,
 .secondary.effect:hover,
 .list.active.secondary {
   color: var(--zdt_statuslistitem_secondary_effect_text);
 }
-
 .tickIcon {
   color: var(--zdt_statuslistitem_tickicon);
   position: absolute;
-  top: 50% ;
+  top:50% ;
   transform: translateY(-50%);
 }
-
 [dir=ltr] .tickIcon {
   right: var(--zd_size20) ;
 }
-
 [dir=rtl] .tickIcon {
   left: var(--zd_size20) ;
 }
-
-.tickIcon>i {
+.tickIcon > i {
   display: block;
 }
-
 [dir=ltr] .active.withTick {
   padding-right: var(--zd_size39) ;
 }
-
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
-
 /* Status Type */
 .statusType {
   width: var(--zd_size8) ;
@@ -127,15 +100,12 @@
 [dir=rtl] .statusType {
   margin-left: var(--zd_size13) ;
 }
-
 .black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-
 .orange {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-
 .green {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/es/lookup/header/Search/LookupSearch.module.css

@@ -1,20 +1,25 @@
-.searchStyle,
-.boxStyle {
+.wrapper {
   transition: var(--zd_transition1);
-  width: var(--zd_size96) ;
+  width: var(--zd_size160) ;
   height: var(--zd_size28) ;
   position: relative;
-}.searchStyle, .boxStyle {
-  background: none;
 }
-.boxStyle {
-  width: var(--zd_size160) ;
+.boxType {
+  border: 1px solid transparent;
   border-radius: 4px;
-  border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.searchStyle:hover, .boxStyle:hover {
+.borderType {
+  border-bottom: 1px solid transparent;
+}
+.boxType, .borderType {
+  border-color: var(--zdt_lookupsearch_boxstyle_border);
+}
+.boxType:hover, .borderType:hover {
   border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
+.boxType.active, .borderType.active {
+  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
+}
 .focusWidth {
   width: var(--zd_size220) ;
 }
@@ -22,36 +27,31 @@
   position: relative;
   height: var(--zd_size28) ;
   cursor: pointer;
+  padding: 0 var(--zd_size9) ;
 }
 .drpSearchBox::after {
   content: '';
   position: absolute;
-  top: var(--zd_size8) ;
-  bottom: var(--zd_size8) ;
+  top: var(--zd_size4) ;
+  bottom: var(--zd_size4) ;
 }
 [dir=ltr] .drpSearchBox::after {
-  right: calc( var(--zd_size1) * -1 ) ;
+  right: var(--zd_size6) ;
   border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
 [dir=rtl] .drpSearchBox::after {
-  left: calc( var(--zd_size1) * -1 ) ;
+  left: var(--zd_size6) ;
   border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.inputBox, .drpSearchBox {
-  padding: 0 var(--zd_size9) ;
-}
-[dir=ltr] .searchIconBox {
-  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9) ;
+[dir=ltr] .searchIcon {
+  padding-right: var(--zd_size8) ;
 }
-[dir=rtl] .searchIconBox {
-  padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0 ;
+[dir=rtl] .searchIcon {
+  padding-left: var(--zd_size8) ;
 }
 .active, .boxStyle.active, .lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
-[dir=ltr] .iconArrow {
-  margin-left: var(--zd_size5) ;
-}
-[dir=rtl] .iconArrow {
-  margin-right: var(--zd_size5) ;
-}
+.iconArrow {
+  margin: 0 var(--zd_size6) ;
+}