@zohodesk/components 1.2.48 → 1.2.50

package/README.md

@@ -32,6 +32,29 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+
+# 1.2.50
+
+- **DateTime (v0&v1), CalendarView (v0&v1)**
+
+  - Week starting day customization support added with `weekStartDay` props and week holiday customization support with `holidays` prop
+  
+- **DateWidget (v0&v1)**
+
+  - Support has been added for `weekStartDay`, `holidays` props
+
+- **DaysRow (v0&v1)**
+
+  - `holidays` prop added for holiday column indication
+
+# 1.2.49 
+
+- **Popup**
+  - `isOutsideScrollBlocked` prop supported - Scroll blocking behaviours supported
+  - Fixed popup re-positioning on window resize not working properly - Issue fixed
+- **DropBoxElement**
+  - The dot-ui-element attribute has been added to facilitate the use of component-level CSS selectors
+
 # 1.2.48
 
 - **ResizeObserver**
@@ -104,7 +127,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **LibraryContext** - coloredTagVariant, hasTagColorInheritedToText properties added
 - **Tag** - customAttributes prop supported
-- **TextBoxIcon** - needInputFocusOnParentClick prop supported
+- **TextBoxIcon** - needInputFocusOnWrapperClick prop supported
 
 # 1.2.38
 

package/es/DateTime/CalendarView.js

@@ -31,10 +31,12 @@ export default class CalendarView extends React.PureComponent {
       dayNamesShort,
       todayMonth,
       todayDate,
-      todayYear
+      todayYear,
+      weekStartDay,
+      holidays
     } = this.props;
     const userSeeDate = new Date(year, month, 1);
-    const userSeeDay = userSeeDate.getDay() + 1;
+    const userSeeDay = (userSeeDate.getDay() - weekStartDay + dayNames.length) % dayNames.length + 1;
     const userSeeYear = userSeeDate.getFullYear();
     const userSeeMonth = userSeeDate.getMonth();
     const monthEnd = getMonthEnd(month, year);
@@ -65,8 +67,8 @@ export default class CalendarView extends React.PureComponent {
           isSelectedDay = false;
           let tdclass = `${style.datesStr} ${style.grid}`;
 
-          if (i === 1) {
-            tdclass += ` ${style.sunday}`;
+          if (holidays.includes(i - 1)) {
+            tdclass += ` ${style.holiday}`;
           }
 
           if (incremleti >= userSeeDay && incremday <= monthEnd) {
@@ -170,7 +172,8 @@ export default class CalendarView extends React.PureComponent {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
       dayNames: dayNames,
       dayNamesShort: dayNamesShort,
-      ariaLabel: dayNamesShort
+      ariaLabel: dayNamesShort,
+      holidays: holidays
     }), /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_dateContainer`,
       "data-test-id": `${dataId}_dateContainer`,

package/es/DateTime/DateTime.js

@@ -650,7 +650,9 @@ export default class DateTime extends React.PureComponent {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
-      customProps = {}
+      customProps = {},
+      weekStartDay,
+      holidays
     } = this.props;
     const {
       TimeProps = {}
@@ -669,6 +671,16 @@ export default class DateTime extends React.PureComponent {
       dayNamesShort = dayNamesShortDefault
     } = i18nKeys;
     const showmonthtxt = title(date, year, month, monthNames);
+    let customDayNames = dayNames,
+        customDayNamesShort = dayNamesShort,
+        customizedHolidays = holidays;
+
+    if (weekStartDay !== 0) {
+      customDayNames = [...dayNames.slice(weekStartDay), ...dayNames.slice(0, weekStartDay)];
+      customDayNamesShort = [...dayNamesShort.slice(weekStartDay), ...dayNamesShort.slice(0, weekStartDay)];
+      customizedHolidays = holidays.map(dayIndex => customDayNames.indexOf(dayNames[dayIndex]));
+    }
+
     const childEle = /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${innerClass}`,
       "data-id": `${dataId}_Calendar`,
@@ -690,11 +702,13 @@ export default class DateTime extends React.PureComponent {
       year: year,
       month: month,
       onSelect: this.dateSelect,
-      dayNames: dayNames,
-      dayNamesShort: dayNamesShort,
+      dayNames: customDayNames,
+      dayNamesShort: customDayNamesShort,
       todayDate: todayDate,
       todayMonth: todayMonth,
-      todayYear: todayYear
+      todayYear: todayYear,
+      weekStartDay: weekStartDay,
+      holidays: customizedHolidays
     }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
       timeText: timeText,
       dataId: dataId,

package/es/DateTime/DateTime.module.css

@@ -112,9 +112,9 @@
   margin-bottom: 0 ;
 }
 
-.sunday,
-.sunday:hover,
-.invalidDate.sunday:hover {
+.holiday,
+.holiday:hover,
+.invalidDate.holiday:hover {
   color: var(--zdt_datetime_invalid_hover_text);
 }
 
@@ -122,7 +122,7 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.sunday,.inActiveDate.sunday:hover {
+.invalidDate.holiday,.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -155,7 +155,7 @@ cursor: no-drop;
 {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.sunday:hover{
+.inActiveDate:hover, .inActiveDate.holiday:hover{
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/es/DateTime/DateWidget.js

@@ -1004,6 +1004,8 @@ class DateWidgetComponent extends React.Component {
       a11y,
       boxSize,
       onError,
+      weekStartDay,
+      holidays,
       customProps = {}
     } = this.props;
     const {
@@ -1106,7 +1108,9 @@ class DateWidgetComponent extends React.Component {
       dropBoxPortalId: dropBoxPortalId,
       boxSize: boxSize,
       onError: onError,
-      customProps: DateTimeProps
+      customProps: DateTimeProps,
+      weekStartDay: weekStartDay,
+      holidays: holidays
     }));
   }
 

package/es/DateTime/DaysRow.js

@@ -13,7 +13,8 @@ export default class DaysRow extends PureComponent {
   render() {
     const {
       dayNames,
-      dayNamesShort
+      dayNamesShort,
+      holidays
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -21,7 +22,7 @@ export default class DaysRow extends PureComponent {
       className: style.days
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
-      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
+      className: `${style.daysStr} ${style.grid} ${holidays.includes(index) ? style.holiday : ''}`,
       "data-title": dayName,
       "aria-label": dayName
     }, dayNamesShort[index])));

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

@@ -96,7 +96,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
         >
           <div
             aria-label="Sunday"
-            class="daysStr grid sunday shrinkOff"
+            class="daysStr grid holiday shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -178,7 +178,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="25"
-              class="datesStr grid sunday invalidDate   shrinkOff"
+              class="datesStr grid holiday invalidDate   shrinkOff"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -248,7 +248,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="2"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -318,7 +318,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="9"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -388,7 +388,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="16"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -458,7 +458,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="23"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -528,7 +528,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="30"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"

package/es/DateTime/props/defaultProps.js

@@ -1,6 +1,8 @@
 export const CalendarView_defaultProps = {
   dataId: 'dateContainer',
-  needBorder: true
+  needBorder: true,
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const Span_defaultProps = {
   dataId: 'calendar-view'
@@ -21,7 +23,9 @@ export const DateTime_defaultProps = {
   is24Hour: false,
   isDefaultPosition: false,
   customDateFormat: null,
-  customProps: {}
+  customProps: {},
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const DateWidget_defaultProps = {
   borderColor: 'default',
@@ -44,7 +48,9 @@ export const DateWidget_defaultProps = {
   needErrorOnBlur: false,
   isEditable: false,
   iconOnHover: false,
-  is24Hour: false
+  is24Hour: false,
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const YearView_defaultProps = {
   dataId: 'dateContainer',

package/es/DateTime/props/propTypes.js

@@ -11,7 +11,9 @@ export const CalendarView_propTypes = {
   dayNamesShort: PropTypes.array,
   todayMonth: PropTypes.string,
   todayDate: PropTypes.string,
-  todayYear: PropTypes.string
+  todayYear: PropTypes.string,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const Span_propTypes = {
   dataId: PropTypes.string,
@@ -73,7 +75,9 @@ export const DateTime_propTypes = {
   targetOffset: PropTypes.string,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const DateWidget_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -142,7 +146,9 @@ export const DateWidget_propTypes = {
   dropBoxPortalId: PropTypes.string,
   a11y: PropTypes.object,
   getPopupProps: PropTypes.func,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const YearView_propTypes = {
   onSelectMonth: PropTypes.func,
@@ -169,7 +175,8 @@ export const DateTimePopupHeader_propTypes = {
 };
 export const DaysRow_propTypes = {
   dayNames: PropTypes.array,
-  dayNamesShort: PropTypes.object
+  dayNamesShort: PropTypes.object,
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const Time_propTypes = {
   timeText: PropTypes.string,

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 import React from 'react';
 import useDropboxPosCalc from "./useDropboxPosCalc";
 import cssJSLogic from "./css/cssJSLogic";
@@ -108,7 +109,8 @@ export default function DropBoxElement(props) {
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
     onAnimationEnd: isAnimate && FireOnAnimationEnd,
-    "data-a11y-focus-main-area": true
+    "data-a11y-focus-main-area": true,
+    "dot-ui-element": "dropbox"
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,

package/es/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap

@@ -9,6 +9,7 @@ exports[`DropBoxElement rendering the defult props 1`] = `
     data-position="bottomStart"
     data-selector-id="dropBox"
     data-test-id="dropBox"
+    dot-ui-element="dropbox"
   >
     <div
       class="subContainer bottom_shadow radius defaultPalette"

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

@@ -9,6 +9,7 @@ exports[`DropBox rendering the defult props 1`] = `
     data-position="bottomStart"
     data-selector-id="dropBox"
     data-test-id="dropBox"
+    dot-ui-element="dropbox"
   >
     <div
       class="subContainer bottom_shadow radius defaultPalette"

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

@@ -19,6 +19,7 @@ exports[`DropDown rendering the defult props 1`] = `
       data-position="bottomMid"
       data-selector-id="dropBox"
       data-test-id="dropBox"
+      dot-ui-element="dropbox"
     >
       <div
         class="subContainer bottom_shadow radius defaultPalette"

package/es/Popup/Popup.js

@@ -1,13 +1,14 @@
 /**** Libraries ****/
 import React from 'react';
-import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
+import { PopupPropTypes, ContextTypes } from "./props/propTypes";
 /**** Methods ****/
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../utils/Common.js";
 import viewPort from "./viewPort";
 import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.js";
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
+import { addIntersectionObserver, removeIntersectionObserver } from "./intersectionObserver";
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -89,6 +90,12 @@ const Popup = function (Component) {
       this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
       this.handleDocumentFocus = this.handleDocumentFocus.bind(this);
       this.handleGetNeedPrevent = this.handleGetNeedPrevent.bind(this);
+      this.handleBlockScroll = this.handleBlockScroll.bind(this);
+      this.handlePositionChange = this.handlePositionChange.bind(this);
+      this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
+      this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
+      this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
+      this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
@@ -101,6 +108,7 @@ const Popup = function (Component) {
         scrollDebounceTime
       } = this.getScrollDebounceTime(this);
       this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
+      this.handleDebouncedPositionChange = debounce(this.handlePositionChange.bind(this), 100);
     }
 
     componentDidMount() {
@@ -144,7 +152,9 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling
+        needResizeHandling: propResizeHandling,
+        isAbsolutePositioningNeeded,
+        isOutsideScrollBlocked
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -154,6 +164,16 @@ const Popup = function (Component) {
           this.size = null;
           this.popupObserver.disconnect();
         }
+
+        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          if (isPopupReady) {
+            addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+            this.addScrollBlockListeners();
+          } else {
+            removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+            this.removeScrollBlockListeners();
+          }
+        }
       }
     }
 
@@ -169,6 +189,8 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
+      removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+      this.removeScrollBlockListeners();
       let noPopups = true;
 
       for (const i in popups) {
@@ -193,6 +215,82 @@ const Popup = function (Component) {
       }
     }
 
+    addScrollBlockListeners() {
+      document.addEventListener('wheel', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('touchmove', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('scroll', this.handleDebouncedPositionChange, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('keydown', this.preventKeyboardScroll, {
+        capture: true,
+        passive: false
+      });
+    }
+
+    removeScrollBlockListeners() {
+      document.removeEventListener('wheel', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('touchmove', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('keydown', this.preventKeyboardScroll, {
+        capture: true,
+        passive: false
+      });
+    }
+
+    handleBlockScroll(event) {
+      // const targetElement = this.placeHolderElement;
+      const containerElement = this.dropElement;
+
+      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target)) {
+        // --- Scroll exclude Target & Container elements --- For reference. Will adopt in future
+        // if(
+        //   (containerElement && (containerElement !== event.target && !containerElement.contains(event.target)))
+        //   && (targetElement && (targetElement !== event.target && !targetElement.contains(event.target)))
+        // ) {
+        event.preventDefault();
+      }
+    }
+
+    handlePositionChange(event) {
+      const targetElement = this.placeHolderElement;
+      const containerElement = this.dropElement;
+
+      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && targetElement && targetElement !== event.target && !targetElement.contains(event.target) && event.target.contains(targetElement)) {
+        this.handlePopupPosition(this.state.position); // this.closePopupOnly(event);
+      }
+    }
+
+    preventKeyboardScroll(event) {
+      const containerElement = this.dropElement;
+      const keys = [32, 37, 38, 39, 40]; // Space, Arrow keys
+
+      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && keys.includes(event.keyCode)) {
+        event.preventDefault();
+      }
+    }
+
+    handleIntersectionObserver(entry) {
+      if (entry.intersectionRatio === 0) {
+        this.closePopupOnly();
+      }
+    }
+
     getGroup() {
       const {
         popupGroup
@@ -523,13 +621,15 @@ const Popup = function (Component) {
                 } = betterPosition || {};
                 const {
                   left: oldLeft = '',
-                  top: oldTop = ''
+                  top: oldTop = '',
+                  bottom: oldBottom = ''
                 } = positionsOffset[position] || {};
                 const {
                   left = '',
-                  top = ''
+                  top = '',
+                  bottom = ''
                 } = viewsOffset[view] || {};
-                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
                 //   placeHolderElement,
                 //   scrollContainer
                 // );
@@ -635,9 +735,8 @@ const Popup = function (Component) {
   }
 
   Popup.displayName = Component.displayName || Component.name || Popup.name;
-  Popup.contextTypes = {
-    direction: PropTypes.string
-  };
+  Popup.contextTypes = ContextTypes;
+  Popup.propTypes = PopupPropTypes;
   return hoistStatics(Popup, Component);
 };
 

package/es/Popup/intersectionObserver.js

@@ -0,0 +1,39 @@
+let observerCallbacks = null;
+let intersectionObserver = null;
+
+function handleObserverCallbacks(entries) {
+  entries.map((entry, i) => {
+    let oldCallbacks = observerCallbacks.get(entry.target);
+    oldCallbacks.length && oldCallbacks.forEach(callback => {
+      callback && callback(entry);
+    });
+  });
+}
+
+export function addIntersectionObserver(element, callback, options) {
+  if (intersectionObserver === null && observerCallbacks === null) {
+    intersectionObserver = new IntersectionObserver(entries => {
+      handleObserverCallbacks(entries);
+    }, options);
+    observerCallbacks = new Map();
+  }
+
+  intersectionObserver.observe(element);
+  let oldCallbacks = observerCallbacks.get(element) || [];
+  observerCallbacks.set(element, [...oldCallbacks, callback]);
+}
+export function removeIntersectionObserver(element, callback) {
+  let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
+  oldCallbacks = oldCallbacks.filter(handler => handler !== callback);
+
+  if (intersectionObserver && oldCallbacks.length === 0) {
+    observerCallbacks.delete(element);
+    intersectionObserver.unobserve(element);
+  }
+
+  if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
+    intersectionObserver.disconnect();
+    intersectionObserver = null;
+    observerCallbacks = null;
+  }
+}

package/es/Popup/props/propTypes.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+export const ContextTypes = {
+  direction: PropTypes.string
+};
+export const PopupPropTypes = {
+  popupGroup: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  closeOnScroll: PropTypes.bool,
+  isOutsideScrollBlocked: PropTypes.bool,
+  needResizeHandling: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  scrollDebounceTime: PropTypes.number,
+  customOrder: PropTypes.arrayOf(PropTypes.string),
+  checkBeforeClose: PropTypes.func
+};
+export const PopupWrappersPropTypes = {
+  openPopupOnly: PropTypes.func,
+  closePopupOnly: PropTypes.func,
+  togglePopup: PropTypes.func,
+  removeClose: PropTypes.func,
+  isPopupReady: PropTypes.bool,
+  position: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  getTargetRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  ...PopupPropTypes,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object
+};

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

@@ -9,6 +9,7 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
     data-position="bottomStart"
     data-selector-id="dropBox"
     data-test-id="dropBox"
+    dot-ui-element="dropbox"
   >
     <div
       class="subContainer bottom_shadow radius defaultPalette"

package/es/TextBox/TextBox.js

@@ -169,7 +169,7 @@ export default class TextBox extends React.PureComponent {
       ref: this.inputRef,
       type: type,
       value: value,
-      onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : '',
+      onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : null,
       onKeyPress: onKeyPress,
       onMouseDown: onMouseDown,
       ...options,