@instructure/ui-drilldown 10.16.1-snapshot-0 → 10.16.1

package/lib/Drilldown/DrilldownOption/__new-tests__/DrilldownOption.test.js

@@ -1,13 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _IconCheckSolid3 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
 var _index = require("../../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _Drilldown, _Drilldown$Option, _Drilldown2, _Drilldown3, _Drilldown4, _Drilldown5, _Drilldown6, _Drilldown7, _Drilldown8, _Drilldown9, _Drilldown10, _Drilldown11, _Drilldown12, _Drilldown13, _Drilldown14, _Drilldown15, _Drilldown16, _IconCheckSolid, _Drilldown17, _Drilldown18, _IconCheckSolid2, _Drilldown19, _Drilldown20, _Drilldown21;
 /*
  * The MIT License (MIT)
@@ -45,89 +45,115 @@ describe('<Drilldown.Option />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should allow setting "selected" property on Options', async () => {
-    (0, _react2.render)(_Drilldown || (_Drilldown = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-      rootPageId: "page0"
-    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-      id: "page0"
-    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
-      id: "group0"
-    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-      id: "groupOption01"
-    }, "Option - 1"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-      selected: true,
-      id: "groupOption02"
-    }, "Option - 2"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-      id: "groupOption03"
-    }, "Option - 3"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-      id: "groupOption04"
-    }, "Option - 4"))))));
-    const selectedOption = _react2.screen.getByLabelText('Option - 2');
+    (0, _react.render)(_Drilldown || (_Drilldown = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+      rootPageId: "page0",
+      children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+        id: "page0",
+        children: (0, _jsxRuntime.jsxs)(_index.Drilldown.Group, {
+          id: "group0",
+          children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "groupOption01",
+            children: "Option - 1"
+          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            selected: true,
+            id: "groupOption02",
+            children: "Option - 2"
+          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "groupOption03",
+            children: "Option - 3"
+          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "groupOption04",
+            children: "Option - 4"
+          })]
+        })
+      })
+    })));
+    const selectedOption = _react.screen.getByLabelText('Option - 2');
     expect(selectedOption).toBeInTheDocument();
     expect(selectedOption).toHaveAttribute('id', 'groupOption02');
     expect(selectedOption).toHaveAttribute('aria-checked', 'true');
   });
   describe('id prop', () => {
     it('should throw warning the id is not provided', async () => {
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, _Drilldown$Option || (_Drilldown$Option = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, null, "Option1")))));
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: _Drilldown$Option || (_Drilldown$Option = (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            children: "Option1"
+          }))
+        })
+      }));
       const expectedErrorMessage = "Warning: Drilldown.Option without id won't be rendered. It is needed to internally track the options.";
       expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should throw warning the id is duplicated', async () => {
-      (0, _react2.render)(_Drilldown2 || (_Drilldown2 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, "Option1"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, "Option2")))));
+      (0, _react.render)(_Drilldown2 || (_Drilldown2 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsxs)(_index.Drilldown.Page, {
+          id: "page0",
+          children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: "Option1"
+          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: "Option2"
+          })]
+        })
+      })));
       const expectedErrorMessage = 'Warning: Duplicate id: "option1"! Make sure all options have unique ids, otherwise they won\'t be rendered.';
       expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should not render the options with duplicated id', async () => {
-      (0, _react2.render)(_Drilldown3 || (_Drilldown3 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, "Option1"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, "Option2"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, "Option3")))));
-      const menuitems = _react2.screen.queryAllByRole('menuitem');
-      const option = _react2.screen.queryByText('Option2');
+      (0, _react.render)(_Drilldown3 || (_Drilldown3 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsxs)(_index.Drilldown.Page, {
+          id: "page0",
+          children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: "Option1"
+          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: "Option2"
+          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: "Option3"
+          })]
+        })
+      })));
+      const menuitems = _react.screen.queryAllByRole('menuitem');
+      const option = _react.screen.queryByText('Option2');
       expect(menuitems.length).toBe(0);
       expect(option).not.toBeInTheDocument();
     });
   });
   describe('children function prop', () => {
     it('should throw warning if it returns nothing', async () => {
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, () => null))));
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: () => null
+          })
+        })
+      }));
       const expectedErrorMessage = 'Warning: There are no "children" prop provided for option with id: "option1", so it won\'t be rendered.';
       expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should provide props as parameters', async () => {
       const childrenFunction = _vitest.vi.fn(() => 'Option');
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, childrenFunction))));
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: childrenFunction
+          })
+        })
+      }));
       expect(childrenFunction).toHaveBeenCalledWith({
         id: 'option1',
         variant: 'default',
@@ -138,14 +164,17 @@ describe('<Drilldown.Option />', () => {
   describe('elementRef prop', () => {
     it('should give back to ref for the option wrapper (Options.Item)', async () => {
       const elementRef = _vitest.vi.fn();
-      const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-          id: "option1",
-          elementRef: elementRef
-        }, "Option")))),
+      const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+          rootPageId: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+            id: "page0",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "option1",
+              elementRef: elementRef,
+              children: "Option"
+            })
+          })
+        })),
         container = _render.container;
       const option = container.querySelector('li');
       expect(elementRef).toHaveBeenCalledWith(option);
@@ -153,90 +182,109 @@ describe('<Drilldown.Option />', () => {
   });
   describe('subPageId prop', () => {
     it('should display arrow icon', async () => {
-      const _render2 = (0, _react2.render)(_Drilldown4 || (_Drilldown4 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-          id: "option1",
-          subPageId: "page1"
-        }, "Option"))))),
+      const _render2 = (0, _react.render)(_Drilldown4 || (_Drilldown4 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+          rootPageId: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+            id: "page0",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "option1",
+              subPageId: "page1",
+              children: "Option"
+            })
+          })
+        }))),
         container = _render2.container;
       const icon = container.querySelector('svg');
       expect(icon).toBeInTheDocument();
       expect(icon).toHaveAttribute('name', 'IconArrowOpenEnd');
     });
     it('should indicate subpage fo SR', async () => {
-      (0, _react2.render)(_Drilldown5 || (_Drilldown5 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        subPageId: "page1"
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+      (0, _react.render)(_Drilldown5 || (_Drilldown5 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            subPageId: "page1",
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       expect(option).toHaveAttribute('role', 'button');
       expect(option).toHaveAttribute('aria-haspopup', 'true');
     });
   });
   describe('disabled prop', () => {
     it('should mark option as disabled for SR', async () => {
-      (0, _react2.render)(_Drilldown6 || (_Drilldown6 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        disabled: true
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+      (0, _react.render)(_Drilldown6 || (_Drilldown6 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            disabled: true,
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       expect(option).toHaveAttribute('aria-disabled', 'true');
     });
   });
   describe('href prop', () => {
     it('should display option as link', async () => {
-      (0, _react2.render)(_Drilldown7 || (_Drilldown7 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        href: "/helloWorld"
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+      (0, _react.render)(_Drilldown7 || (_Drilldown7 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            href: "/helloWorld",
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       expect(option.tagName).toBe('A');
       expect(option).toHaveAttribute('href', '/helloWorld');
     });
     it('should throw warning if subPageId is provided too', async () => {
-      (0, _react2.render)(_Drilldown8 || (_Drilldown8 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        href: "/helloWorld",
-        subPageId: "page1"
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+      (0, _react.render)(_Drilldown8 || (_Drilldown8 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            href: "/helloWorld",
+            subPageId: "page1",
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       const expectedErrorMessage = 'Warning: Drilldown.Option with id "option1" has subPageId, so it will ignore the "href" property.';
       expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
       expect(option.tagName).not.toBe('A');
       expect(option).not.toHaveAttribute('href');
     });
     it('should throw warning if option is in selectable group', async () => {
-      (0, _react2.render)(_Drilldown9 || (_Drilldown9 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
-        id: "group0",
-        selectableType: "multiple"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "groupOption01",
-        href: "/helloWorld"
-      }, "Option"))))));
-      const option = _react2.screen.getByLabelText('Option');
+      (0, _react.render)(_Drilldown9 || (_Drilldown9 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Group, {
+            id: "group0",
+            selectableType: "multiple",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "groupOption01",
+              href: "/helloWorld",
+              children: "Option"
+            })
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       const expectedErrorMessage = 'Warning: Drilldown.Option with id "groupOption01" is in a selectable group, so it will ignore the "href" property.';
       expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
       expect(option.tagName).not.toBe('A');
@@ -245,44 +293,53 @@ describe('<Drilldown.Option />', () => {
   });
   describe('as prop', () => {
     it('should render option as `li` by default', async () => {
-      (0, _react2.render)(_Drilldown10 || (_Drilldown10 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+      (0, _react.render)(_Drilldown10 || (_Drilldown10 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       const wrapper = option.parentElement;
       expect(option).toHaveAttribute('id', 'option1');
       expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.tagName).toBe('LI');
     });
     it('should force option to be `li` while the parent is "ul" or "ol"', async () => {
-      (0, _react2.render)(_Drilldown11 || (_Drilldown11 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+      (0, _react.render)(_Drilldown11 || (_Drilldown11 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
         rootPageId: "page0",
-        as: "ol"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        as: "div"
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+        as: "ol",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            as: "div",
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       const wrapper = option.parentElement;
       expect(option).toHaveAttribute('id', 'option1');
       expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.tagName).toBe('LI');
     });
     it('should render option as specified html element, when the parent in non-list element', async () => {
-      (0, _react2.render)(_Drilldown12 || (_Drilldown12 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+      (0, _react.render)(_Drilldown12 || (_Drilldown12 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
         rootPageId: "page0",
-        as: "div"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        as: "div"
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+        as: "div",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            as: "div",
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       const wrapper = option.parentElement;
       expect(option).toHaveAttribute('id', 'option1');
       expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.tagName).toBe('DIV');
@@ -290,39 +347,48 @@ describe('<Drilldown.Option />', () => {
   });
   describe('role prop', () => {
     it('should be "menuitem" by default', async () => {
-      (0, _react2.render)(_Drilldown13 || (_Drilldown13 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1"
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+      (0, _react.render)(_Drilldown13 || (_Drilldown13 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       expect(option).toHaveAttribute('role', 'menuitem');
     });
     it('should be applied on prop', async () => {
-      (0, _react2.render)(_Drilldown14 || (_Drilldown14 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        role: "presentation"
-      }, "Option")))));
-      const option = _react2.screen.getByLabelText('Option');
+      (0, _react.render)(_Drilldown14 || (_Drilldown14 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            role: "presentation",
+            children: "Option"
+          })
+        })
+      })));
+      const option = _react.screen.getByLabelText('Option');
       expect(option).toHaveAttribute('role', 'presentation');
     });
   });
   describe('renderLabelInfo prop', () => {
     it('should display tag next to the label', async () => {
-      const _render3 = (0, _react2.render)(_Drilldown15 || (_Drilldown15 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-          id: "option1",
-          renderLabelInfo: "Info"
-        }, "Option"))))),
+      const _render3 = (0, _react.render)(_Drilldown15 || (_Drilldown15 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+          rootPageId: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+            id: "page0",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "option1",
+              renderLabelInfo: "Info",
+              children: "Option"
+            })
+          })
+        }))),
         container = _render3.container;
       const tag = container.querySelector('[class$="optionLabelInfo"]');
       expect(tag).toBeInTheDocument();
@@ -330,14 +396,17 @@ describe('<Drilldown.Option />', () => {
     });
     it('as function should have option props as params', async () => {
       const infoFunction = _vitest.vi.fn(() => 'Info');
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        renderLabelInfo: infoFunction
-      }, "Option"))));
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            renderLabelInfo: infoFunction,
+            children: "Option"
+          })
+        })
+      }));
       expect(infoFunction).toHaveBeenCalledWith({
         variant: 'default',
         vAlign: 'start',
@@ -349,29 +418,35 @@ describe('<Drilldown.Option />', () => {
   });
   describe('renderBeforeLabel prop', () => {
     it('should display icon before the label', async () => {
-      const _render4 = (0, _react2.render)(_Drilldown16 || (_Drilldown16 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-          id: "option1",
-          renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconCheckSolid3.IconCheckSolid, null)
-        }, "Option"))))),
+      const _render4 = (0, _react.render)(_Drilldown16 || (_Drilldown16 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+          rootPageId: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+            id: "page0",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "option1",
+              renderBeforeLabel: (0, _jsxRuntime.jsx)(_IconCheckSolid3.IconCheckSolid, {}),
+              children: "Option"
+            })
+          })
+        }))),
         container = _render4.container;
       const icon = container.querySelector('svg');
       expect(icon).toBeInTheDocument();
       expect(icon).toHaveAttribute('name', 'IconCheck');
     });
     it('as function should have option props as params', async () => {
-      const beforeLabelFunction = _vitest.vi.fn(() => _IconCheckSolid || (_IconCheckSolid = /*#__PURE__*/_react.default.createElement(_IconCheckSolid3.IconCheckSolid, null)));
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        renderBeforeLabel: beforeLabelFunction
-      }, "Option"))));
+      const beforeLabelFunction = _vitest.vi.fn(() => _IconCheckSolid || (_IconCheckSolid = (0, _jsxRuntime.jsx)(_IconCheckSolid3.IconCheckSolid, {})));
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            renderBeforeLabel: beforeLabelFunction,
+            children: "Option"
+          })
+        })
+      }));
       expect(beforeLabelFunction).toHaveBeenCalledWith(expect.objectContaining({
         variant: 'default',
         vAlign: 'start',
@@ -381,46 +456,56 @@ describe('<Drilldown.Option />', () => {
       }), expect.any(Object));
     });
     it('should throw warning if it is in selectable group', async () => {
-      (0, _react2.render)(_Drilldown17 || (_Drilldown17 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
-        id: "group1",
-        selectableType: "multiple"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "groupOption1",
-        renderBeforeLabel: "Before"
-      }, "Option"))))));
+      (0, _react.render)(_Drilldown17 || (_Drilldown17 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Group, {
+            id: "group1",
+            selectableType: "multiple",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "groupOption1",
+              renderBeforeLabel: "Before",
+              children: "Option"
+            })
+          })
+        })
+      })));
       const expectedErrorMessage = 'Warning: The prop "renderBeforeLabel" is reserved on item with id: "groupOption1". When this option is a selectable member of a Drilldown.Group, selection indicator will render before the label.';
       expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
   });
   describe('renderAfterLabel prop', () => {
     it('should display icon before the label', async () => {
-      const _render5 = (0, _react2.render)(_Drilldown18 || (_Drilldown18 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-          id: "option1",
-          renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconCheckSolid3.IconCheckSolid, null)
-        }, "Option"))))),
+      const _render5 = (0, _react.render)(_Drilldown18 || (_Drilldown18 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+          rootPageId: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+            id: "page0",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "option1",
+              renderAfterLabel: (0, _jsxRuntime.jsx)(_IconCheckSolid3.IconCheckSolid, {}),
+              children: "Option"
+            })
+          })
+        }))),
         container = _render5.container;
       const icon = container.querySelector('svg');
       expect(icon).toBeInTheDocument();
       expect(icon).toHaveAttribute('name', 'IconCheck');
     });
     it('as function should have option props as params', async () => {
-      const beforeLabelFunction = _vitest.vi.fn(() => _IconCheckSolid2 || (_IconCheckSolid2 = /*#__PURE__*/_react.default.createElement(_IconCheckSolid3.IconCheckSolid, null)));
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        renderAfterLabel: beforeLabelFunction
-      }, "Option"))));
+      const beforeLabelFunction = _vitest.vi.fn(() => _IconCheckSolid2 || (_IconCheckSolid2 = (0, _jsxRuntime.jsx)(_IconCheckSolid3.IconCheckSolid, {})));
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            renderAfterLabel: beforeLabelFunction,
+            children: "Option"
+          })
+        })
+      }));
       expect(beforeLabelFunction).toHaveBeenCalledWith(expect.objectContaining({
         variant: 'default',
         vAlign: 'start',
@@ -430,74 +515,89 @@ describe('<Drilldown.Option />', () => {
       }), expect.any(Object));
     });
     it('should throw warning if it has subPageId', async () => {
-      (0, _react2.render)(_Drilldown19 || (_Drilldown19 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        subPageId: "page1",
-        renderAfterLabel: "after"
-      }, "Option")))));
+      (0, _react.render)(_Drilldown19 || (_Drilldown19 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            subPageId: "page1",
+            renderAfterLabel: "after",
+            children: "Option"
+          })
+        })
+      })));
       const expectedErrorMessage = 'Warning: The prop "renderAfterLabel" is reserved on item with id: "option1". When it has "subPageId" provided, a navigation arrow will render after the label.';
       expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
   });
   describe('description prop', () => {
     it('should display description under the option', async () => {
-      (0, _react2.render)(_Drilldown20 || (_Drilldown20 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        description: "This is a description."
-      }, "Option")))));
-      const description = _react2.screen.getByText('This is a description.');
+      (0, _react.render)(_Drilldown20 || (_Drilldown20 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            description: "This is a description.",
+            children: "Option"
+          })
+        })
+      })));
+      const description = _react.screen.getByText('This is a description.');
       expect(description).toBeInTheDocument();
     });
     it('as a function should display description under the option', async () => {
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        description: () => 'This is a description.'
-      }, "Option"))));
-      const description = _react2.screen.getByText('This is a description.');
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            description: () => 'This is a description.',
+            children: "Option"
+          })
+        })
+      }));
+      const description = _react.screen.getByText('This is a description.');
       expect(description).toBeInTheDocument();
     });
   });
   describe('descriptionRole prop', () => {
     it('should set the role of description', async () => {
-      (0, _react2.render)(_Drilldown21 || (_Drilldown21 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        description: "This is a description.",
-        descriptionRole: "button"
-      }, "Option")))));
-      const description = _react2.screen.getByText('This is a description.');
+      (0, _react.render)(_Drilldown21 || (_Drilldown21 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            description: "This is a description.",
+            descriptionRole: "button",
+            children: "Option"
+          })
+        })
+      })));
+      const description = _react.screen.getByText('This is a description.');
       expect(description).toHaveAttribute('role', 'button');
     });
   });
   describe('onOptionClick callback', () => {
     it('should fire on click with correct params', async () => {
       const onOptionClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option1",
-        onOptionClick: onOptionClick
-      }, "Option"))));
-      const option = _react2.screen.getByText('Option');
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option1",
+            onOptionClick: onOptionClick,
+            children: "Option"
+          })
+        })
+      }));
+      const option = _react.screen.getByText('Option');
       await _userEvent.default.click(option);
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onOptionClick).toHaveBeenCalledTimes(1);
         const args = onOptionClick.mock.calls[0][1];
         expect(args).toHaveProperty('optionId', 'option1');
@@ -509,86 +609,98 @@ describe('<Drilldown.Option />', () => {
       });
     });
     it('should provide goToPreviousPage method that throws a warning, if there is no previous page', async () => {
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-        id: "option01",
-        onOptionClick: (_e, {
-          goToPreviousPage
-        }) => {
-          goToPreviousPage();
-        }
-      }, "Option"))));
-      const option = _react2.screen.getByText('Option');
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: "option01",
+            onOptionClick: (_e, {
+              goToPreviousPage
+            }) => {
+              goToPreviousPage();
+            },
+            children: "Option"
+          })
+        })
+      }));
+      const option = _react.screen.getByText('Option');
       await _userEvent.default.click(option);
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         const expectedErrorMessage = 'Warning: There is no previous page to go to. The current page history is: [page0].';
         expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
       });
     });
     describe('provide goToPage method', () => {
       it("should throws warning if page doesn't exist", async () => {
-        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-          id: "option01",
-          onOptionClick: (_e, {
-            goToPage
-          }) => {
-            goToPage('page1');
-          }
-        }, "Option"))));
-        const option = _react2.screen.getByText('Option');
+        (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+          rootPageId: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+            id: "page0",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "option01",
+              onOptionClick: (_e, {
+                goToPage
+              }) => {
+                goToPage('page1');
+              },
+              children: "Option"
+            })
+          })
+        }));
+        const option = _react.screen.getByText('Option');
         await _userEvent.default.click(option);
-        await (0, _react2.waitFor)(() => {
+        await (0, _react.waitFor)(() => {
           const expectedErrorMessage = 'Warning: Cannot go to page because page with id: "page1" doesn\'t exist.';
           expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
         });
       });
       it('should throws warning if if no page id is provided', async () => {
-        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-          id: "option01",
-          onOptionClick: (_e, {
-            goToPage
-          }) => {
-            // @ts-expect-error we want this to fail
-            goToPage();
-          }
-        }, "Option"))));
-        const option = _react2.screen.getByText('Option');
+        (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+          rootPageId: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+            id: "page0",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "option01",
+              onOptionClick: (_e, {
+                goToPage
+              }) => {
+                // @ts-expect-error we want this to fail
+                goToPage();
+              },
+              children: "Option"
+            })
+          })
+        }));
+        const option = _react.screen.getByText('Option');
         await _userEvent.default.click(option);
-        await (0, _react2.waitFor)(() => {
+        await (0, _react.waitFor)(() => {
           const expectedErrorMessage = 'Warning: Cannot go to page because there was no page id provided.';
           expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
         });
       });
       it('should throws warning if parameter is not string', async () => {
-        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
-          id: "option01",
-          onOptionClick: (_e, {
-            goToPage
-          }) => {
-            // @ts-expect-error we want this to fail
-            goToPage({
-              page: 'page1'
-            });
-          }
-        }, "Option"))));
-        const option = _react2.screen.getByText('Option');
+        (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+          rootPageId: "page0",
+          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+            id: "page0",
+            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+              id: "option01",
+              onOptionClick: (_e, {
+                goToPage
+              }) => {
+                // @ts-expect-error we want this to fail
+                goToPage({
+                  page: 'page1'
+                });
+              },
+              children: "Option"
+            })
+          })
+        }));
+        const option = _react.screen.getByText('Option');
         await _userEvent.default.click(option);
-        await (0, _react2.waitFor)(() => {
+        await (0, _react.waitFor)(() => {
           const expectedErrorMessage = 'Warning: Cannot go to page because parameter newPageId has to be string (valid page id). Current newPageId is "object".';
           expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
         });