@zohodesk/components 1.4.11 → 1.4.13

package/es/DateTime/validator.js

@@ -1,327 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,137 +0,0 @@
-/* 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

@@ -1,28 +0,0 @@
-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

@@ -1,95 +0,0 @@
-// 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>
-`;