npm - @zohodesk/components - Versions diffs - 1.2.34 → 1.2.36 - Mend

@zohodesk/components 1.2.34 → 1.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (280) hide show

package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap ADDED Viewed

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`ListItemWithRadio rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox shrinkOff"
+      data-id="listItemWithRadioComp_radio"
+      data-selector-id="box"
+      data-test-id="listItemWithRadioComp_radio"
+    >
+      <div
+        aria-checked="false"
+        aria-hidden="true"
+        aria-readonly="false"
+        class="container  pointer hoverEfffect   inflex rowdir both"
+        data-id="RadioComp"
+        data-selector-id="container"
+        data-test-id="RadioComp"
+        role="radio"
+        tabindex="-1"
+      >
+        <div
+          class="radio
+            hoverprimary medium filled centerPathprimary  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            type="hidden"
+            value=""
+          />
+          <label
+            class="radioLabel pointer"
+          >
+            <svg
+              viewBox="0 0 40 40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                class="rdBox"
+                cx="20"
+                cy="20"
+                r="19"
+              />
+            </svg>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="value grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      List
+    </div>
+  </li>
+</DocumentFragment>
+`;

package/lib/Modal/__tests__/Modal.spec.js ADDED Viewed

@@ -0,0 +1,22 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Modal = _interopRequireDefault(require("../Modal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('Modal', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      "data-portal": "testPortal"
+    }), /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+      portalId: "testPortal"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Modal Div Check")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Modal["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Modal outer div check"))))),
+        baseElement = _render.baseElement;
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/lib/Modal/__tests__/__snapshots__/Modal.spec.js.snap ADDED Viewed

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Modal rendering the defult props 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        data-portal="testPortal"
+      >
+        <div>
+          Modal Div Check
+        </div>
+      </div>
+      <div />
+    </div>
+  </div>
+  <div
+    class="container"
+    data-portal="CPortal1"
+  >
+    <div>
+      Modal outer div check
+    </div>
+  </div>
+</body>
+`;

package/lib/MultiSelect/AdvancedGroupMultiSelect.js CHANGED Viewed

@@ -1013,7 +1013,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
-        isGroupSelect: true
+        isGroupSelect: true,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1084,7 +1085,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             role: 'listbox',
             ariaMultiselectable: true
           },
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
@@ -1127,7 +1129,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             listItemSize: listItemSize,
             a11y: {
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,

package/lib/MultiSelect/AdvancedMultiSelect.js CHANGED Viewed

@@ -494,7 +494,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         isReadOnly: isReadOnly,
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
-        onSelect: this.handleClickSelectedOption
+        onSelect: this.handleClickSelectedOption,
+        dataId: "".concat(dataIdMultiSelectComp, "_selectedOptions")
       }), moreCount > 0 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].more,
         onClick: this.handleMoreClick,
@@ -503,7 +504,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
         adjust: true,
-        shrink: true
+        shrink: true,
+        dataId: "".concat(dataIdMultiSelectComp, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              ")
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -566,7 +568,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y: {
             role: 'listbox',
             ariaMultiselectable: true
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_dropbox")
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
@@ -598,7 +601,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_Options")
         }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/MultiSelect/MobileHeader/__tests__/MobileHeader.spec.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _MobileHeader = _interopRequireDefault(require("../MobileHeader"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('MobileHeader', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MobileHeader["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap ADDED Viewed

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`MobileHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <div
+      class="header flex rowdir alignBetween vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="cardHeading grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      />
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button
+          class="buttonText bold plainprimary medium"
+          data-id="buttonComp"
+          data-selector-id="button"
+          data-test-id="buttonComp"
+          type="button"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/MultiSelect/MultiSelect.js CHANGED Viewed

@@ -978,7 +978,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
         size: size,
-        palette: palette
+        palette: palette,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1114,7 +1115,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         },
         size: boxSize,
         alignBox: "row",
-        isResponsivePadding: getFooter ? false : true
+        isResponsivePadding: getFooter ? false : true,
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {

package/lib/MultiSelect/MultiSelectWithAvatar.js CHANGED Viewed

@@ -186,7 +186,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           role: 'listbox'
         },
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {

package/lib/MultiSelect/SelectedOptions.js CHANGED Viewed

@@ -66,7 +66,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           onRemove = _this$props.onRemove,
           onSelect = _this$props.onSelect,
           size = _this$props.size,
-          palette = _this$props.palette;
+          palette = _this$props.palette,
+          dataId = _this$props.dataId;
       var isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedOptions.map(function (option) {
         var id = option.id,
@@ -91,7 +92,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         if (optionType === 'avatar') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "photoTag")
+            key: "".concat(id, "photoTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             hasAvatar: true,
@@ -100,7 +102,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "iconTag")
+            key: "".concat(id, "iconTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             iconName: icon,
@@ -110,7 +113,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-          key: "".concat(id, "tag")
+          key: "".concat(id, "tag"),
+          dataId: dataId
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0
         })));

package/lib/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _AdvancedGroupMultiSelect = _interopRequireDefault(require("../AdvancedGroupMultiSelect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('AdvancedGroupMultiSelect', function () {
+  test('rendering the defult props', function () {
+    var mockOnChange = jest.fn();
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AdvancedGroupMultiSelect["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _AdvancedMultiSelect = _interopRequireDefault(require("../AdvancedMultiSelect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('AdvancedMultiSelect', function () {
+  test('rendering the defult props', function () {
+    var mockOnChange = jest.fn();
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AdvancedMultiSelect["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/EmptyState.spec.js ADDED Viewed

@@ -0,0 +1,22 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _EmptyState = _interopRequireDefault(require("../EmptyState"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('EmptyState', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      searchString: [],
+      suggestions: [],
+      options: []
+    })),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/MultiSelect.spec.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('MultiSelect', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/MultiSelectHeader.spec.js ADDED Viewed

@@ -0,0 +1,28 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _MultiSelectHeader = _interopRequireDefault(require("../MultiSelectHeader"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('MultiSelectHeader', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      suggestions: [Option]
+    })),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the basic value', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      suggestions: [1, 2, 3]
+    })),
+        asFragment = _render2.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _MultiSelectWithAvatar = _interopRequireDefault(require("../MultiSelectWithAvatar"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('MultiSelectWithAvatar', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/SelectedOptions.spec.js ADDED Viewed

@@ -0,0 +1,35 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _SelectedOptions = _interopRequireDefault(require("../SelectedOptions"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('SelectedOptions', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      selectedOptions: []
+    })),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the basic select options', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        value: 'SelectedObject1'
+      }, {
+        value: 'SelectedObject2'
+      }, {
+        value: 'SelectedObject3'
+      }]
+    })),
+        asFragment = _render2.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/Suggestions.spec.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Suggestions = _interopRequireDefault(require("../Suggestions"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('Suggestions', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: []
+    })),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap ADDED Viewed

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper  effect"
+    data-id="multiSelect"
+    data-selector-id="advancedGroupMultiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default  flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap ADDED Viewed

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`AdvancedMultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;