@zohodesk/components 1.0.0-alpha-237 → 1.0.0-alpha-240

package/es/DateTime/DateTime.js

@@ -5,7 +5,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import datetime from '@zohodesk/datetimejs';
 import CalendarView from './CalendarView';
-import DropBox from '../DropBox/DropBox';
 import YearView from './YearView';
 import DateTimePopupHeader from './DateTimePopupHeader';
 import DateTimePopupFooter from './DateTimePopupFooter';
@@ -14,6 +13,9 @@ import style from './DateTime.module.css';
 import { formatDate, getMonthEnd } from '../utils/datetime/common';
 import { getIsEmptyValue } from '../utils/Common';
 import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from './constants';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { Box } from '../Layout';
 import { getHourDetails } from './dateFormatUtils';
 
 function title(date, year, month) {
@@ -619,6 +621,17 @@ export default class DateTime extends React.PureComponent {
     });
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     const {
       date,
@@ -648,7 +661,10 @@ export default class DateTime extends React.PureComponent {
       isPadding,
       i18nKeys,
       is24Hour,
-      isDefaultPosition
+      isDefaultPosition,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll
     } = this.props;
     const {
       timeText = 'Time',
@@ -722,23 +738,34 @@ export default class DateTime extends React.PureComponent {
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
       className: `${style.dropBox} ${className}`,
       "data-id": `${dataId}_dateBoxContainer`
-    }, childEle) : isReady ? /*#__PURE__*/React.createElement(DropBox, {
-      size: boxSize,
-      boxPosition: position,
-      isActive: isActive,
-      isArrow: false,
-      isAnimate: isAnimate,
-      animationStyle: "bounce",
-      getRef: getRef,
-      onClick: onClick,
-      dataId: `${dataId}_dateBoxContainer`,
-      needResponsive: needResponsive,
-      isAbsolutePositioningNeeded: isAbsolute,
-      customClass: {
-        customDropBoxWrap: className
-      },
-      isPadding: isPadding
-    }, childEle) : null;
+    }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        size: boxSize,
+        boxPosition: position,
+        isActive: isActive,
+        isArrow: false,
+        isAnimate: isAnimate,
+        animationStyle: "bounce",
+        getRef: getRef,
+        onClick: onClick,
+        dataId: `${dataId}_dateBoxContainer`,
+        needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolute,
+        customClass: {
+          customDropBoxWrap: className
+        },
+        isPadding: isPadding,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll
+      }, /*#__PURE__*/React.createElement(Box, null, childEle));
+    }) : null;
   }
 
 }

package/es/DateTime/DateWidget.js

@@ -978,7 +978,11 @@ class DateWidgetComponent extends React.Component {
       needErrorOnBlur,
       htmlId,
       iconOnHover,
-      is24Hour
+      is24Hour,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll
     } = this.props;
     const {
       selected: value = '',
@@ -1058,7 +1062,11 @@ class DateWidgetComponent extends React.Component {
       needAction: isDateTime,
       onDateSelect: !isDateTime ? this.handleSelect : null,
       i18nKeys: i18nKeys,
-      is24Hour: is24Hour
+      is24Hour: is24Hour,
+      isAbsolute: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll
     }));
   }
 

package/es/DateTime/DateWidget.module.css

@@ -36,7 +36,3 @@
 .placeHolder input {
   color: var(--zdt_datewidget_placeholder_text);
 }
-.placeHolder input::selection {
-  color: var(--zdt_datewidget_placeholder_selection_text);
-  background: var(--zdt_datewidget_placeholder_selection_bg);
-}

package/es/DateTime/docs/DateTime__default.docs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import DateTime from '../DateTime';
+import datetime from '@zohodesk/datetimejs';
+import data from './timezonedata.json';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class DateTime__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dateTime: '2019-01-01T00:00:00.000',
+      date: '2019-01-01',
+      dateTimeformattedValue: '',
+      dateFormattedValue: ''
+    };
+    this.handleDateTimeChange = this.handleDateTimeChange.bind(this);
+    this.handleGetMethods = this.handleGetMethods.bind(this);
+    this.handleDateChange = this.handleDateChange.bind(this);
+  }
+
+  handleDateTimeChange(dateTime, dateTimeformattedValue) {
+    this.setState({
+      dateTime,
+      dateTimeformattedValue
+    });
+  }
+
+  handleDateChange(date, dateFormattedValue) {
+    this.setState({
+      date,
+      dateFormattedValue
+    });
+  }
+
+  handleGetMethods(methods) {
+    const {
+      resetLocalDate
+    } = methods;
+    this.resetLocalDate = resetLocalDate;
+  }
+
+  render() {
+    const {
+      dateTime,
+      date,
+      dateFormattedValue,
+      dateTimeformattedValue
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '370px',
+        height: '1000px',
+        padding: '30px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, dateFormattedValue), /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(DateTime, {
+      value: date,
+      onChange: this.handleDateChange,
+      dateFormat: "MM.DD.YYYY",
+      timeZone: datetime.tz.unpack(data.timezone),
+      isAbsolute: false,
+      needAction: false,
+      isDateTimeField: false // onSelect={this.handleDateTimeChange}
+      ,
+      getMethods: this.handleGetMethods // onError={() => {
+      //   this.resetLocalDate();
+      // }}
+      ,
+      isDefaultPosition: true
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, dateTimeformattedValue), /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(DateTime, {
+      value: dateTime,
+      onChange: this.handleDateTimeChange,
+      dateFormat: "MM.DD.YYYY",
+      timeZone: datetime.tz.unpack(data.timezone),
+      isAbsolute: false,
+      needAction: false,
+      getMethods: this.handleGetMethods,
+      isDateTimeField: true // onError={() => {
+      //   this.resetLocalDate();
+      // }}
+      ,
+      isDefaultPosition: true
+    })));
+  }
+
+}
+
+if (false) {
+  DateTime__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/DateTime/docs/DateWidget__default.docs.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import DateWidget from '../DateWidget';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import data from './timezonedata.json';
+import datetime from '@zohodesk/datetimejs';
+import { Box, Container } from '../../Layout';
+export default class DateWidget__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dateTime: '2021-08-13T20:00:00.000Z',
+      date: '1999-04-03'
+    };
+    this.handleDateChange = this.handleDateChange.bind(this);
+    this.handleDateTimeChange = this.handleDateTimeChange.bind(this);
+  }
+
+  handleDateChange(date) {
+    this.setState({
+      date
+    });
+  }
+
+  handleDateTimeChange(dateTime) {
+    this.setState({
+      dateTime
+    });
+  }
+
+  render() {
+    const i18nKey = {
+      submitText: 'OK',
+      cancelText: 'Close',
+      timeText: 'Choose Time',
+      nextMonthTitleText: 'Go Next',
+      prevMonthTitleText: 'Go Prev',
+      monthNames: ['ஜனவரி', 'பிப்ரவரி', 'மார்ச்', 'ஏப்ரல்', 'மே', 'ஜூன்', 'ஜூலை', 'ஆகஸ்ட்', 'செப்டம்பர்', 'அக்டோபர்', 'நவம்பர்', 'டிசம்பர்'],
+      monthNamesShort: ['ஜன', 'பிப்', 'மார்', 'ஏப்', 'மே', 'ஜூன்', 'ஜூலை', 'ஆக', 'செப்', 'அக்', 'நவ', 'டிச'],
+      dayNames: ['ஞாயிறு', 'திங்கள்', 'செவ்வாய்', 'புதன்', 'வியாழன்', 'வெள்ளி', 'சனி'],
+      dayNamesShort: ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச'],
+      ampmText: ['மு.ப', 'பி.ப']
+    };
+    const dataFormats = ['YYYY/MM/DD', 'YYYY-MM-DD', 'YYYY.MM.DD', 'YYYY MM DD', 'MM/DD/YYYY', 'MM-DD-YYYY', 'MM.DD.YYYY', 'MM DD YYYY', 'DD/MM/YYYY', 'DD-MM-YYYY', 'DD.MM.YYYY', 'DD MM YYYY', 'YYYY/MMM/DD', 'YYYY-MMM-DD', 'YYYY.MMM.DD', 'YYYY MMM DD', 'MMM/DD/YYYY', 'MMM-DD-YYYY', 'MMM.DD.YYYY', 'MMM DD YYYY', 'DD/MMM/YYYY', 'DD-MMM-YYYY', 'DD.MMM.YYYY', 'DD MMM YYYY', 'DD/MMMM/YYYY', 'DD-MMMM-YYYY', 'DD-MMMM-YYYY', 'DD MMMM YYYY', 'MMMM/DD/YYYY', 'MMMM-DD-YYYY', 'MMMM.DD.YYYY', 'MMMM DD YYYY', 'YYYY/MMMM/DD', 'YYYY-MMMM-DD', 'YYYY.MMMM.DD', 'YYYY MMMM DD', 'DD/MM/YY', 'DD-MM-YY', 'DD.MM.YY', 'DD MM YY', 'MM/DD/YY', 'MM-DD-YY', 'MM.DD.YY', 'MM DD YY', 'YY/MM/DD', 'YY-MM-DD', 'YY.MM.DD', 'YY MM DD', 'DD/MMM/YY', 'DD-MMM-YY', 'DD.MMM.YY', 'DD MMM YY', 'MMM/DD/YY', 'MMM-DD-YY', 'MMM.DD.YY', 'MMM DD YY', 'YY/MMM/DD', 'YY-MMM-DD', 'YY.MMM.DD', 'YY MMM DD', 'DD/MMMM/YY', 'DD-MMMM-YY', 'DD.MMMM.YY', 'DD MMMM YY', 'MMMM/DD/YY', 'MMMM-DD-YY', 'MMMM.DD.YY', 'MMMM DD YY', 'YY/MMMM/DD', 'YY-MMMM-DD', 'YY.MMMM.DD', 'YY MMMM DD'];
+    const {
+      date,
+      dateTime
+    } = this.state;
+    const boxStyle = {
+      padding: '10px',
+      border: '1px solid #000',
+      margin: '5px',
+      minWidth: '300px'
+    };
+    const headingStyle = {
+      fontSize: '14px',
+      textDecoration: 'underline',
+      marginBottom: '10px'
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, dataFormats.map(format => /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: headingStyle
+    }, format), /*#__PURE__*/React.createElement(DateWidget, {
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: dateTime,
+      onSelect: this.handleDateTimeChange,
+      isDateTime: true,
+      position: "bottomLeft",
+      dateFormat: format,
+      timeZone: datetime.tz.unpack(data.timezone),
+      isEditable: true,
+      is24Hour: false,
+      i18nKeys: i18nKey
+    }))), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: headingStyle
+    }, "24 Hours"), /*#__PURE__*/React.createElement(DateWidget, {
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: dateTime,
+      onSelect: this.handleDateTimeChange,
+      isDateTime: true,
+      position: "bottomLeft",
+      dateFormat: "MMM-dd-yyyy",
+      timeZone: datetime.tz.unpack(data.timezone),
+      needDefaultTime: true,
+      is24Hour: true
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: headingStyle
+    }, "Default Time"), /*#__PURE__*/React.createElement(DateWidget, {
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: dateTime,
+      onSelect: this.handleDateTimeChange,
+      isDateTime: true,
+      position: "bottomLeft",
+      dateFormat: "MMM-dd-yyyy",
+      timeZone: datetime.tz.unpack(data.timezone),
+      needDefaultTime: true
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: headingStyle
+    }, "ReadOnly"), /*#__PURE__*/React.createElement(DateWidget, {
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: dateTime,
+      onSelect: this.handleDateTimeChange,
+      isDateTime: true,
+      position: "bottomLeft",
+      dateFormat: "yyyy.MM.dd",
+      timeZone: datetime.tz.unpack(data.timezone),
+      needDefaultTime: false,
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: headingStyle
+    }, "Without Time"), /*#__PURE__*/React.createElement(DateWidget, {
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: date,
+      onSelect: this.handleDateChange,
+      isDateTime: false,
+      position: "bottomLeft",
+      dateFormat: "yyyy.MM.dd",
+      timeZone: datetime.tz.unpack(data.timezone)
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: headingStyle
+    }, "Disabled"), /*#__PURE__*/React.createElement(DateWidget, {
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: date,
+      onSelect: this.handleDateChange,
+      isDateTime: false,
+      position: "bottomLeft",
+      dateFormat: "MM-dd-yyyy",
+      isDisabled: true,
+      timeZone: datetime.tz.unpack(data.timezone)
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: headingStyle
+    }, "Hide Current Year"), /*#__PURE__*/React.createElement(DateWidget, {
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: dateTime,
+      onSelect: this.handleDateTimeChange,
+      isDateTime: true,
+      position: "bottomLeft",
+      dateFormat: "MMM-dd-yyyy",
+      timeZone: datetime.tz.unpack(data.timezone),
+      needDefaultTime: true,
+      is24Hour: true,
+      isEditable: true,
+      isHideCurrentYear: true
+    })))));
+  }
+
+}
+
+if (false) {
+  DateWidget__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/DateTime/docs/timezonedata.json

@@ -0,0 +1 @@
+{ "timezone": "7Q.W 80 70 70 70|0121213412121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121|-3tFE0 1nEe0 1nX0 11B0 1nX0 SgN0 8x10 iy0 5Wp1 1VaX 3dA0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1a00 1fA0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|15e6" }

package/es/DropBox/docs/DropBox__custom.docs.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import DropBox from '../DropBox';
+import styles from '../../common/docStyle.module.css';
+export default class DropBox__custom extends Component {
+  render() {
+    let style = {
+      height: '80px',
+      width: '100px',
+      position: 'relative',
+      display: 'inline-block',
+      background: '#e6e5e5',
+      fontSize: '14px'
+    },
+        boxstyle = {
+      height: '100px',
+      textAlign: 'center',
+      fontSize: 'var(--zd_size20)'
+    },
+        containerStyle = {
+      display: 'inline-block',
+      verticalAlign: 'top',
+      width: 'calc(33.3333333% - 300px)',
+      marginBottom: '150px',
+      marginLeft: '275px'
+    },
+        dropBoxStyle = {
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      justifyContent: 'right'
+    };
+    let sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        dropBoxStyle
+      }
+    }, sizes.map((size, i) => /*#__PURE__*/React.createElement("div", {
+      style: containerStyle,
+      key: i
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(DropBox, {
+      size: size,
+      isActive: true,
+      isModel: false,
+      customClass: {
+        customDropBox: styles.customDropbox,
+        customDropBoxWrap: styles.dropboxSize,
+        customMobileDropBox: styles.mobDropbox,
+        customMobileDropBoxWrap: styles.mobBg
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxstyle
+    }, /*#__PURE__*/React.createElement("li", null, "DropBox"), /*#__PURE__*/React.createElement("li", null, "Size - ", size)))))));
+  }
+
+}
+
+if (false) {
+  DropBox__custom.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}

package/es/DropBox/docs/DropBox__customOrder.docs.js

@@ -0,0 +1,92 @@
+import React, { Component, Fragment } from 'react';
+import Popup from '../../Popup/Popup';
+import DropBox from '../DropBox';
+
+class DropBox__customOrderComp extends Component {
+  constructor(props) {
+    super(props);
+    this.togglePopup = this.togglePopup.bind(this);
+  }
+
+  togglePopup(e) {
+    let {
+      togglePopup
+    } = this.props;
+    togglePopup && togglePopup(e, 'bottomLeftToRight');
+  }
+
+  render() {
+    let layoutStyle = {
+      padding: 20
+    };
+    let containerStyle = {
+      position: 'relative',
+      display: 'inline-block'
+    };
+    let targetStyle = {
+      height: '40px',
+      width: '40px',
+      borderRadius: '50%',
+      position: 'relative',
+      background: '#e6e5e5',
+      cursor: 'pointer'
+    };
+    let boxStyle = {
+      height: '300px'
+    };
+    let {
+      isPopupOpen,
+      isPopupReady,
+      position,
+      removeClose,
+      getContainerRef,
+      getTargetRef,
+      isAbsolutePositioningNeeded,
+      targetOffset,
+      positionsOffset
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: layoutStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: containerStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: targetStyle,
+      onClick: this.togglePopup,
+      ref: getTargetRef
+    }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+      size: "large",
+      isActive: isPopupReady,
+      boxPosition: position,
+      onClick: removeClose,
+      getRef: getContainerRef,
+      isArrow: false,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      animationStyle: "bounce",
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    })) : null)), /*#__PURE__*/React.createElement("div", {
+      "data-portal": "portal1"
+    }));
+  }
+
+}
+
+DropBox__customOrderComp.displayName = 'DropBox__customOrder';
+let DropBox__customOrder = Popup(DropBox__customOrderComp);
+DropBox__customOrder.defaultProps = {
+  isAbsolutePositioningNeeded: false,
+  customOrder: ['bottomCenter', 'bottomLeftToRight', 'bottomRightToLeft', 'topLeftToRight', 'topRightToLeft', 'rightCenter', 'rightBottomToTop', 'leftTopToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop']
+};
+
+if (false) {
+  DropBox__customOrder.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}
+
+export default DropBox__customOrder;

package/es/DropBox/docs/DropBox__fixedPosition.docs.js

@@ -0,0 +1,91 @@
+import React, { Component, Fragment } from 'react';
+import Popup from '../../Popup/Popup';
+import DropBox from '../DropBox';
+
+class DropBox__fixedPositionComp extends Component {
+  constructor(props) {
+    super(props);
+    this.togglePopup = this.togglePopup.bind(this);
+  }
+
+  togglePopup(e) {
+    let {
+      togglePopup
+    } = this.props;
+    togglePopup && togglePopup(e);
+  }
+
+  render() {
+    let layoutStyle = {
+      padding: 20
+    };
+    let containerStyle = {
+      position: 'relative',
+      display: 'inline-block'
+    };
+    let targetStyle = {
+      height: '40px',
+      width: '40px',
+      borderRadius: '50%',
+      position: 'relative',
+      background: '#e6e5e5',
+      cursor: 'pointer'
+    };
+    let boxStyle = {
+      height: '300px'
+    };
+    let {
+      isPopupOpen,
+      isPopupReady,
+      position,
+      removeClose,
+      getContainerRef,
+      getTargetRef,
+      isAbsolutePositioningNeeded,
+      targetOffset,
+      positionsOffset
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: layoutStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: containerStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: targetStyle,
+      onClick: this.togglePopup,
+      ref: getTargetRef
+    }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+      size: "large",
+      isActive: isPopupReady,
+      boxPosition: position,
+      onClick: removeClose,
+      getRef: getContainerRef,
+      isArrow: false,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      animationStyle: "bounce",
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    })) : null)), /*#__PURE__*/React.createElement("div", {
+      "data-portal": "portal1"
+    }));
+  }
+
+}
+
+DropBox__fixedPositionComp.displayName = 'DropBox__fixedPosition';
+let DropBox__fixedPosition = Popup(DropBox__fixedPositionComp);
+DropBox__fixedPosition.defaultProps = {
+  isAbsolutePositioningNeeded: false
+};
+
+if (false) {
+  DropBox__fixedPosition.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}
+
+export default DropBox__fixedPosition;