@zohodesk/components 1.4.15 → 1.4.17

package/es/DateTime/validator.js

@@ -0,0 +1,327 @@
+import typeChecker from "./typeChecker";
+import { clone } from "./objectUtils";
+const validator = {
+  combinePropsValidation: (currentProps, type, validateOn, validationObj, defaultCheckPropsRules, defaultValidateRules) => {
+    let newType = type.toLowerCase();
+    let newValidation = clone({}, validationObj);
+    let validationRules = newValidation.rules;
+    let validationRulesOrder = newValidation.rulesOrder;
+    let validationMessages = newValidation.messages;
+    let newValidationRulesOrder = validationRulesOrder ? [...validationRulesOrder] : [];
+    let newValidationRules = validationRules ? validationRules : {};
+    let checkPropsRules = defaultCheckPropsRules;
+    let checkPropsOrder = [];
+
+    for (let i = 0; i < checkPropsRules.length; i++) {
+      let prop = checkPropsRules[i];
+
+      if (Object.prototype.hasOwnProperty.call(currentProps, prop)) {
+        if (newValidationRulesOrder.indexOf(prop) === -1) {
+          checkPropsOrder.push(prop);
+        }
+
+        if (!Object.prototype.hasOwnProperty.call(newValidationRules, prop)) {
+          newValidationRules[prop] = currentProps[prop];
+        }
+      }
+    }
+
+    newValidationRulesOrder = !Object.prototype.hasOwnProperty.call(newValidation, 'rulesOrder') ? checkPropsOrder.concat(newValidationRulesOrder) : validationRulesOrder;
+    let isRulesFound = Object.keys(newValidationRules).length;
+    newValidationRules = isRulesFound ? validator.composeRulesForValidation(newType, defaultValidateRules, newValidationRules) : newValidationRules;
+    return {
+      validate: newValidation.validate,
+      validateOn: Object.prototype.hasOwnProperty.call(newValidation, 'validateOn') ? newValidation.validateOn : validateOn,
+      validationRules: newValidationRules,
+      validationRulesOrder: newValidationRulesOrder,
+      validationMessages
+    };
+  },
+  executeValidation: (text, inputTag, validationObj, fieldType) => {
+    let {
+      validation
+    } = validationObj;
+    let validationRulesOrder = validation.validationRulesOrder || [];
+    let validationRules = validation.validationRules || {};
+    let validationMessages = validation.validationMessages || {};
+    let {
+      onPassValidation
+    } = validationObj;
+    let {
+      onFailValidation
+    } = validationObj;
+    let skipIfEmptyField = null;
+
+    if (validationRules.required === false && (fieldType !== 'radio' || fieldType !== 'checkbox')) {
+      skipIfEmptyField = val => {
+        if (fieldType === 'onegroup' || fieldType === 'multigroup') {
+          return !val || !(val.length > 0);
+        }
+
+        let value = (val || '').trim();
+        return value.length < 1;
+      };
+    }
+
+    if (skipIfEmptyField === null || skipIfEmptyField(text) === false) {
+      for (let i = 0, len = validationRulesOrder.length; i < len; i++) {
+        let rule = validationRulesOrder[i];
+
+        if (!validationRules[rule] || !typeChecker.isFunction(validationRules[rule])) {
+          continue;
+        }
+
+        let isInValid = validationRules[rule](text, inputTag);
+
+        if (isInValid) {
+          let message = validationMessages[rule] && typeChecker.isFunction(validationMessages[rule]) ? validationMessages[rule](text, inputTag) : validationMessages[rule];
+          onFailValidation && onFailValidation(rule, message, inputTag);
+          return;
+        }
+      }
+    }
+
+    onPassValidation && onPassValidation(text, inputTag);
+  },
+  composeRulesForValidation: (type, defaultValidateRules, newValidationRules) => {
+    let defaultPatterns = validator.regexs;
+
+    for (let i = 0, len = defaultValidateRules.length; i < len; i++) {
+      let rule = defaultValidateRules[i];
+      let ruleInfo = newValidationRules[rule] || '';
+
+      if (ruleInfo && !typeChecker.isFunction(ruleInfo)) {
+        if (rule === 'required' && ruleInfo === true) {
+          newValidationRules[rule] = (val, el) => {
+            if (el.willValidate && el.validity.valueMissing) {
+              return true;
+            }
+
+            if (type === 'radio' || type === 'checkbox') {
+              return el.checked === false;
+            }
+
+            if (type === 'onegroup' || type === 'multigroup') {
+              return !val || val.length < 1;
+            }
+
+            let value = (val || '').replace(/\s{2,}/g, ' ').trim();
+            return value.length < 1;
+          };
+        } else if (rule === 'maxLength' && !Number.isNaN(ruleInfo) && Number.isFinite(ruleInfo)) {
+          let maxLength = Number(ruleInfo);
+
+          newValidationRules[rule] = (val, el) => {
+            if (el.willValidate && el.validity.tooLong) {
+              return true;
+            }
+
+            let value = val || '';
+
+            if (type !== 'multigroup') {
+              value = val.trim();
+            }
+
+            return !(value.length <= maxLength);
+          };
+        } else if (rule === 'minLength' && !Number.isNaN(ruleInfo) && Number.isFinite(ruleInfo)) {
+          let minLength = Number(ruleInfo);
+
+          newValidationRules[rule] = val => {
+            let value = val || '';
+
+            if (type !== 'multigroup') {
+              value = val.trim();
+            }
+
+            return !(value.length >= minLength);
+          };
+        } else if (rule === 'rangeLength' && /^([-+\d]+)*([,]{1,1}([-+\d]+))$/.test(ruleInfo) === true) {
+          let rangeLength = ruleInfo;
+          rangeLength = rangeLength.split(',').map(a => Number(a));
+
+          newValidationRules[rule] = val => {
+            let value = (val || '').trim();
+            return !(value.length >= rangeLength[0] && value.length <= rangeLength[1]);
+          };
+        } else if (rule === 'step' && ruleInfo) {
+          let step = Number(ruleInfo);
+          let stepTypes = ['number', 'range', 'date', 'datetime', 'datetime-local', 'month', 'time', 'week'];
+
+          newValidationRules[rule] = (val, el) => {
+            if (stepTypes.indexOf(type) !== -1) {
+              if (el.willValidate && el.validity.stepMismatch) {
+                return true;
+              }
+
+              return false;
+            }
+
+            let value = (val || '').trim();
+            value = Number(value);
+
+            if (Number.isNaN(value) || !Number.isFinite(value) || Number.isNaN(step) || !Number.isFinite(step)) {
+              return true;
+            }
+
+            return !(value % step === 0);
+          };
+        } else if (rule === 'max') {
+          let max = Number(ruleInfo);
+          let maxTypes = ['number', 'range', 'date', 'datetime', 'datetime-local', 'month', 'time', 'week'];
+
+          newValidationRules[rule] = (val, el) => {
+            if (maxTypes.indexOf(type) !== -1) {
+              if (el.willValidate && el.validity.rangeOverflow) {
+                return true;
+              }
+
+              return false;
+            }
+
+            let value = (val || '').trim();
+            value = Number(value);
+
+            if (Number.isNaN(value) || !Number.isFinite(value) || Number.isNaN(max) || !Number.isFinite(max)) {
+              return true;
+            }
+
+            return !(value <= max);
+          };
+        } else if (rule === 'min') {
+          let min = Number(ruleInfo);
+          let minTypes = ['number', 'range', 'date', 'datetime', 'datetime-local', 'month', 'time', 'week'];
+
+          newValidationRules[rule] = (val, el) => {
+            if (minTypes.indexOf(type) !== -1) {
+              if (el.willValidate && el.validity.rangeUnderflow) {
+                return true;
+              }
+
+              return false;
+            }
+
+            let value = (val || '').trim();
+            value = Number(value);
+
+            if (Number.isNaN(value) || !Number.isFinite(value) || Number.isNaN(min) || !Number.isFinite(min)) {
+              return true;
+            }
+
+            return !(value >= min);
+          };
+        } else if (rule === 'range' && /^([-+\d]+)*([,]{1,1}([-+\d]+))$/.test(ruleInfo) === true) {
+          let ranges;
+          ranges = ranges.split(',').map(a => Number(a));
+
+          newValidationRules[rule] = val => {
+            let value = (val || '').trim();
+            value = Number(value);
+
+            if (Number.isNaN(value) || !Number.isFinite(value)) {
+              return true;
+            }
+
+            return !(value >= ranges[0] && value <= ranges[1]);
+          };
+        } else if ((rule === 'digits' || rule === 'integer' || rule === 'double') && ruleInfo === true) {
+          newValidationRules[rule] = val => {
+            let value = (val || '').trim();
+            value = Number(value);
+
+            if (Number.isNaN(value) || !Number.isFinite(value)) {
+              return true;
+            }
+
+            let condition = true;
+
+            if (rule === 'integer') {
+              condition = Number.isSafeInteger(value);
+            }
+
+            if (rule === 'double') {
+              condition = -Number.MAX_VALUE <= value && Number.MAX_VALUE >= value;
+            }
+
+            return !defaultPatterns[rule].test(value) && condition;
+          };
+        } else if ((rule === 'timezonedate' || rule === 'datetimezone' || rule === 'date' || rule === 'datetime') && ruleInfo === true) {
+          newValidationRules[rule] = val => {
+            let value = (val || '').trim();
+
+            if (!defaultPatterns[rule].test(value)) {
+              return true;
+            }
+
+            if (rule === 'datetime') {
+              let index = 0;
+              value = value.split('T')[index]; //let timings = value[1].replace("Z","").split(":")
+              //let
+              //if( !defaultPatterns[rule].test(value); )
+            }
+
+            value = value.replace('/', '-');
+            value = value.replace(':', '-');
+            let values = value.split('-'); // Extract the string into month, date and year
+
+            let yy = parseInt(values[0]);
+            let mm = parseInt(values[1]);
+            let dd = parseInt(values[2]); // Create list of days of a month [assume there is no leap year by default]
+
+            let ListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+            if (mm === 1 || mm > 2) {
+              if (dd > ListofDays[mm - 1]) {
+                return true;
+              }
+            }
+
+            if (mm === 2) {
+              let lyear = false;
+
+              if (!(yy % 4) && yy % 100 || !(yy % 400)) {
+                lyear = true;
+              }
+
+              if (lyear === false && dd >= 29) {
+                return true;
+              }
+
+              if (lyear === true && dd > 29) {
+                return true;
+              }
+            }
+          };
+        } else if (rule === 'pattern' && ruleInfo && ruleInfo.constructor === RegExp) {
+          newValidationRules[rule] = val => {
+            let value = (val || '').trim();
+            return !new RegExp(ruleInfo).test(value);
+          };
+        } else if ((rule === 'email' || rule === 'month' || rule === 'time' || rule === 'phone' || rule === 'url' || rule === 'hexcode' || rule === 'cleartextpattern') && ruleInfo === true) {
+          newValidationRules[rule] = val => {
+            let value = (val || '').trim();
+            return !defaultPatterns[rule].test(value);
+          };
+        }
+      }
+    }
+
+    return newValidationRules;
+  },
+  regexs: {
+    integer: /^[-+]?[0-9]+$/,
+    digits: /^[0-9]+$/,
+    double: /^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/,
+    email: /^[\w]([\w\-.+'/]*)@([\w\-.]*)(\.[A-z]{2,22}(\.[a-zA-Z]{2}){0,2})$/,
+    phone: /(\+?( |-|\.)?\d{1,2}( |-|\.)?)?(\(?\d{3}\)?|\d{3})( |-|\.)?(\d{3}( |-|\.)?\d{4})/g,
+    hexcode: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+    month: /^(\d{4,6})[/\-:](1[0-2]|0[1-9])$/,
+    date: /^(\d{4,6})[/-](1[0-2]|0[1-9])[/\-:](0[1-9]|1[0-9]|2[0-9]|3[0-1])$/,
+    time: /^([0-9]|0[0-9]|1[0-9]|2[0-3])[-/:][0-5][0-9]$/,
+    datetime: /^(\d{4,6})[/-](1[0-2]|0[1-9])[/\-:](0[1-9]|1[0-9]|2[0-9]|3[0-1])[T](([0-9]|0[0-9]|1[0-9]|2[0-3])[-/:][0-5][0-9])$/,
+    datetimezone: /^(\d{4,6})[/-](1[0-2]|0[1-9])[/\-:](0[1-9]|1[0-9]|2[0-9]|3[0-1])[T](([0-9]|0[0-9]|1[0-9]|2[0-3])[-/:][0-5][0-9][-/:.][0-9]{3}[Z])$/,
+    url: /^(ht|f)tp(s?):\/\/[-.\w]+[.][\w]+(\/?)([A-z0-9\-.?,:'/+=&%$#_@]*)?$/,
+    cleartextpattern: /^([A-z0-9_\-.$@?,:'/!\s]|[^\u{0000}-\u{007F}])+$/u
+  }
+};
+export default validator;

package/es/DropBox/DropBox.js

@@ -0,0 +1,80 @@
+import React, { useRef, useContext } from 'react';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+import Portal from "../Modal/Portal/Portal"; // import { getLibraryConfig } from '../Provider/Config';
+
+import LibraryContext from "../Provider/LibraryContextInit";
+import cssJSLogic from "./css/cssJSLogic";
+import DropBoxElement from "./DropBoxElement/DropBoxElement";
+import { DropBoxDefaultProps } from "./props/defaultProps";
+import { DropBoxPropTypes } from "./props/propTypes";
+import { stopPropagation } from "./../utils/Common";
+import isMobilePopover from "./utils/isMobilePopover";
+import style from "./css/DropBox.module.css";
+export default function DropBox(props) {
+  const dropBoxRef = useRef(null);
+  const DropBoxContext = useContext(LibraryContext);
+  const {
+    needResponsive,
+    portalId,
+    isActive,
+    isAbsolutePositioningNeeded,
+    isRestrictScroll,
+    needFocusScope,
+    onClose,
+    customProps
+  } = props;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    needAutoFocus = true,
+    needRestoreFocus = true,
+    needListNavigation = true,
+    needFocusLoop = false,
+    needEnterAction = true
+  } = focusScopeProps;
+  const {
+    direction
+  } = DropBoxContext || {};
+  let isModel = isMobilePopover(needResponsive);
+  const {
+    zIndexStyle
+  } = cssJSLogic(props);
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    onClose: onClose,
+    elementRef: dropBoxRef,
+    needAutoFocus: needAutoFocus,
+    needRestoreFocus: needRestoreFocus,
+    needListNavigation: needListNavigation,
+    needFocusLoop: needFocusLoop,
+    needEnterAction: needEnterAction,
+    ...focusScopeProps
+  }, /*#__PURE__*/React.createElement(DropBoxElement, {
+    isModel: isModel,
+    direction: direction,
+    ...props,
+    zIndexStyle: zIndexStyle,
+    subContainerRef: dropBoxRef
+  })) : /*#__PURE__*/React.createElement(DropBoxElement, {
+    isModel: isModel,
+    subContainerRef: dropBoxRef,
+    direction: direction,
+    ...props,
+    zIndexStyle: zIndexStyle
+  });
+  return isModel && isActive ? /*#__PURE__*/React.createElement(Portal, {
+    portalId: portalId
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `${style.freezeLayer} ${style.freeze}`,
+    style: zIndexStyle,
+    onClick: stopPropagation
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Portal, {
+    portalId: portalId
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
+    className: style.freezeLayer,
+    style: zIndexStyle,
+    onClick: stopPropagation
+  }) : null, dropBoxEle)) : dropBoxEle;
+}
+DropBox.propTypes = DropBoxPropTypes;
+DropBox.defaultProps = DropBoxDefaultProps;

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -0,0 +1,137 @@
+/* eslint-disable react/no-unknown-property */
+import React from 'react';
+import useDropboxPosCalc from "./useDropboxPosCalc";
+import cssJSLogic from "./css/cssJSLogic";
+import { positionMapping } from "../DropBoxPositionMapping.js";
+import { DropBoxElementDefaultProps } from "./props/defaultProps";
+import { DropBoxElementPropTypes } from "./props/propTypes";
+import { mergeStyle } from '@zohodesk/utils';
+import style from "./css/DropBoxElement.module.css";
+export default function DropBoxElement(props) {
+  let {
+    children,
+    isAnimate,
+    isArrow,
+    arrowPosition,
+    boxPosition,
+    size,
+    onClick,
+    isActive,
+    dataId,
+    dataSelectorId,
+    isModel,
+    isAbsolutePositioningNeeded,
+    tourId,
+    htmlId,
+    a11y,
+    tabIndex,
+    palette,
+    subContainerRef,
+    customStyle,
+    animationStyle
+  } = props;
+  let isAbsolute = isAbsolutePositioningNeeded;
+
+  const FireOnAnimationEnd = () => {
+    let eleClassList = subContainerRef && subContainerRef.current.classList;
+    let animationStyles = animationStyle == 'default' ? style.fadeInScale : style[animationStyle];
+    animationStyles.split(' ').map(rmStyle => {
+      if (eleClassList && eleClassList.contains(rmStyle)) {
+        eleClassList.remove(rmStyle);
+      }
+    });
+  };
+
+  const getRef = ele => {
+    const {
+      getRef,
+      forwardRef
+    } = props;
+    getRef && getRef(ele);
+
+    if (forwardRef) {
+      forwardRef.current = ele;
+    }
+  };
+
+  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
+    isAbsolute = true;
+  }
+
+  const {
+    role,
+    ariaMultiselectable,
+    ariaLabelledby
+  } = a11y;
+  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
+  const boxDirection = positionMapping[boxPosition].direction;
+
+  if (isAbsolute) {
+    arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
+    boxPosition = positionMapping[boxPosition].positionStyle;
+  } else {
+    arrowPosition = positionMapping[boxPosition].arrowPosition;
+  }
+
+  const {
+    arrowstyle,
+    boxstyle,
+    needBoxStyle
+  } = useDropboxPosCalc(props);
+  const mergedStyle = mergeStyle(style, customStyle);
+  const {
+    boxClassName,
+    subContainerClass,
+    inlineStyle
+  } = cssJSLogic({
+    props,
+    style: mergedStyle,
+    customState: {
+      boxPosition,
+      boxDirection,
+      boxstyle,
+      needBoxStyle,
+      isAbsolute
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: boxClassName,
+    "data-id": `${dataId}`,
+    "data-test-id": `${dataId}`,
+    "data-selector-id": dataSelectorId,
+    ref: getRef,
+    style: inlineStyle,
+    "data-tour": tourId,
+    "data-position": boxPosition,
+    "data-box-direction": boxDirection,
+    "data-arrow-position": arrowPosition,
+    id: htmlId,
+    role: role,
+    "aria-multiselectable": ariaMultiselectable,
+    "aria-labelledby": ariaLabelledby,
+    tabIndex: tabIndex,
+    onAnimationEnd: isAnimate && FireOnAnimationEnd,
+    "data-a11y-focus-main-area": true,
+    "dot-ui-element": "dropbox"
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: "-1",
+    className: `${subContainerClass} ${style[`${palette}Palette`]}`,
+    onClick: onClick,
+    "data-id": `${dataId}_subcontainer`,
+    "data-test-id": `${dataId}_subcontainer`,
+    "data-selector-id": `${dataSelectorId}_subcontainer`,
+    ref: subContainerRef
+  }, isModel ? /*#__PURE__*/React.createElement("div", {
+    className: style.closeBar
+  }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
+    className: style.arrowPosition,
+    style: arrowstyle,
+    "data-id": `${dataId}_arrow`,
+    "data-test-id": `${dataId}_arrow`,
+    "data-selector-id": `${dataSelectorId}_arrow`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.arrowShape
+  })), children));
+}
+DropBoxElement.propTypes = DropBoxElementPropTypes;
+DropBoxElement.defaultProps = DropBoxElementDefaultProps;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DropBoxElement from "../DropBoxElement";
+describe('DropBoxElement', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DropBoxElement, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders when isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DropBoxElement, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders when isActive is true and isArrow is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DropBoxElement, {
+      isActive: true,
+      isArrow: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropBoxElement rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="main hidden container bottomStart default"
+    data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
+    data-id="dropBox"
+    data-position="bottomStart"
+    data-selector-id="dropBox"
+    data-test-id="dropBox"
+    dot-ui-element="dropbox"
+  >
+    <div
+      class="subContainer shadow radius defaultPalette"
+      data-id="dropBox_subcontainer"
+      data-selector-id="dropBox_subcontainer"
+      data-test-id="dropBox_subcontainer"
+      tabindex="-1"
+    >
+      <div
+        class="arrowPosition"
+        data-id="dropBox_arrow"
+        data-selector-id="dropBox_arrow"
+        data-test-id="dropBox_arrow"
+      >
+        <div
+          class="arrowShape"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DropBoxElement renders when isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class="main container bottomStart default boxDirection arrow"
+    data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
+    data-id="dropBox"
+    data-position="bottomStart"
+    data-selector-id="dropBox"
+    data-test-id="dropBox"
+    dot-ui-element="dropbox"
+  >
+    <div
+      class="subContainer shadow radius defaultPalette"
+      data-id="dropBox_subcontainer"
+      data-selector-id="dropBox_subcontainer"
+      data-test-id="dropBox_subcontainer"
+      tabindex="-1"
+    >
+      <div
+        class="arrowPosition"
+        data-id="dropBox_arrow"
+        data-selector-id="dropBox_arrow"
+        data-test-id="dropBox_arrow"
+      >
+        <div
+          class="arrowShape"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DropBoxElement renders when isActive is true and isArrow is false 1`] = `
+<DocumentFragment>
+  <div
+    class="main container bottomStart default paddingSpace"
+    data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
+    data-id="dropBox"
+    data-position="bottomStart"
+    data-selector-id="dropBox"
+    data-test-id="dropBox"
+    dot-ui-element="dropbox"
+  >
+    <div
+      class="subContainer shadow radius defaultPalette"
+      data-id="dropBox_subcontainer"
+      data-selector-id="dropBox_subcontainer"
+      data-test-id="dropBox_subcontainer"
+      tabindex="-1"
+    />
+  </div>
+</DocumentFragment>
+`;