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

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/Drawer/Drawer.js

@@ -149,7 +149,8 @@ export default class Drawer extends React.Component {
       onClose,
       needFocusScope,
       customProps,
-      a11y
+      a11y,
+      customDrawerClass
     } = this.props;
     const {
       focusScopeProps = {}
@@ -174,7 +175,7 @@ export default class Drawer extends React.Component {
       return child;
     });
     let content = /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]} ${customDrawerClass}`,
       "data-a11y-need-focus-style": "false",
       tabindex: -1,
       eleRef: this.createRef,
@@ -281,8 +282,4 @@ export default class Drawer extends React.Component {
 
 }
 Drawer.propTypes = Drawer_propTypes;
-Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
-//   Drawer.docs = {
-//     componentGroup: 'Template'
-//   };
-// }
+Drawer.defaultProps = Drawer_defaultProps;

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

@@ -12,7 +12,7 @@ exports[`Drawer rendering the isActive true 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="container columns drawerModal small shrinkOff"
+      class="container columns drawerModal small  shrinkOff"
       data-a11y-need-focus-style="false"
       data-id="boxComponent"
       data-selector-id="box"

package/es/Drawer/props/defaultProps.js

@@ -15,6 +15,7 @@ export const Drawer_defaultProps = {
   subDrawerActive: false,
   subDrawerClass: '',
   customClass: '',
+  customDrawerClass: '',
   needAutoZindex: true,
   onBodyClick: () => {},
   needFocusScope: false,

package/es/Drawer/props/propTypes.js

@@ -32,6 +32,7 @@ export const Footer_propTypes = {
 export const Drawer_propTypes = {
   children: PropTypes.node,
   customClass: PropTypes.string,
+  customDrawerClass: PropTypes.string,
   forwardRef: PropTypes.object,
   isActive: PropTypes.bool,
   needAutoZindex: PropTypes.bool,

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/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/v1/form/fields/CurrencyField/CurrencyField.js

@@ -72,6 +72,7 @@ function CurrencyField(props) {
   }
 
   let uniqueId = htmlId ? htmlId : getNextId();
+  const isFocusable = !needReadOnlyStyle || !isReadOnly && needReadOnlyStyle;
 
   function handleChange(value) {
     onChange && onChange(id, value);
@@ -124,7 +125,7 @@ function CurrencyField(props) {
     onChange: handleChange,
     dataId: dataId,
     onBlur: handleonBlur,
-    onFocus: handleonFocus,
+    onFocus: isFocusable && handleonFocus,
     onKeyDown: onKeyDown,
     placeHolder: placeHolder,
     borderColor: borderColor,

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

@@ -73,6 +73,8 @@ function StatusDropdown(props) {
     isRestrictScroll,
     positionsOffset,
     targetOffset,
+    renderTargetElement,
+    renderFooterElement,
     a11y = {}
   } = props;
   const [optionsList, setOptionsList] = useState(options);
@@ -149,7 +151,11 @@ function StatusDropdown(props) {
     className: style.posRel,
     onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined,
     onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, renderTargetElement ? renderTargetElement({
+    handleTogglePopup,
+    isPopupOpen,
+    getTargetRef
+  }) : /*#__PURE__*/React.createElement(Container, {
     tagName: "button",
     alignBox: "row",
     className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
@@ -289,7 +295,7 @@ function StatusDropdown(props) {
       getEmptyState: emptySearchSVG
     }) : /*#__PURE__*/React.createElement("div", {
       className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)))));
+    }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null));
   }) : null);
 }
 

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

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

package/lib/DotProvider/DotProvider.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _useDotProvider = _interopRequireDefault(require("./hooks/useDotProvider"));
+
+var _excluded = ["tag", "themeAppearance", "themeColor", "baseZoomUnit", "baseFontUnit", "zoomUnitVariable", "fontUnitVariable", "themeAppearanceAttr", "themeColorAttr", "providerRef", "onAssetsDownloadSuccess", "getAssetsPromises", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var DotProvider = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$tag = props.tag,
+      Element = _props$tag === void 0 ? 'div' : _props$tag,
+      themeAppearance = props.themeAppearance,
+      themeColor = props.themeColor,
+      baseZoomUnit = props.baseZoomUnit,
+      baseFontUnit = props.baseFontUnit,
+      zoomUnitVariable = props.zoomUnitVariable,
+      fontUnitVariable = props.fontUnitVariable,
+      themeAppearanceAttr = props.themeAppearanceAttr,
+      themeColorAttr = props.themeColorAttr,
+      providerRef = props.providerRef,
+      onAssetsDownloadSuccess = props.onAssetsDownloadSuccess,
+      getAssetsPromises = props.getAssetsPromises,
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var wrapperElementRef = (0, _react.useRef)(null);
+  var getProviderElement = (0, _react.useCallback)(function () {
+    if (typeof providerRef === 'function') {
+      return providerRef();
+    } else if (Element !== _react["default"].Fragment) {
+      return wrapperElementRef.current;
+    } else {
+      return document.documentElement;
+    }
+  }, [providerRef, Element]);
+  var getEleRef = (0, _react.useCallback)(function (ele) {
+    wrapperElementRef.current = ele;
+
+    if (ref && typeof ref === 'function') {
+      ref(ele);
+    } else if (ref && _typeof(ref) === 'object') {
+      ref.current = ele;
+    }
+  }, [ref]);
+  (0, _useDotProvider["default"])({
+    themeAppearance: themeAppearance,
+    themeColor: themeColor,
+    themeAppearanceAttr: themeAppearanceAttr,
+    themeColorAttr: themeColorAttr,
+    baseZoomUnit: baseZoomUnit,
+    baseFontUnit: baseFontUnit,
+    zoomUnitVariable: zoomUnitVariable,
+    fontUnitVariable: fontUnitVariable,
+    getProviderElement: getProviderElement,
+    onAssetsDownloadSuccess: onAssetsDownloadSuccess,
+    getAssetsPromises: getAssetsPromises
+  });
+  return /*#__PURE__*/_react["default"].createElement(Element, _extends({}, rest, {
+    ref: getEleRef
+  }), children);
+});
+DotProvider.propTypes = _propTypes.propTypes;
+DotProvider.defaultProps = _defaultProps.defaultProps;
+var _default = DotProvider;
+exports["default"] = _default;