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

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

@@ -22,13 +22,14 @@ var _Drilldown, _Drilldown$Option, _Drilldown2, _Drilldown3, _Drilldown4, _Drill
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react';
+
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { IconCheckSolid } from '@instructure/ui-icons';
 import { Drilldown } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<Drilldown.Option />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -42,22 +43,29 @@ describe('<Drilldown.Option />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should allow setting "selected" property on Options', async () => {
-    render(_Drilldown || (_Drilldown = /*#__PURE__*/React.createElement(Drilldown, {
-      rootPageId: "page0"
-    }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-      id: "page0"
-    }, /*#__PURE__*/React.createElement(Drilldown.Group, {
-      id: "group0"
-    }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-      id: "groupOption01"
-    }, "Option - 1"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-      selected: true,
-      id: "groupOption02"
-    }, "Option - 2"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-      id: "groupOption03"
-    }, "Option - 3"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-      id: "groupOption04"
-    }, "Option - 4"))))));
+    render(_Drilldown || (_Drilldown = _jsx(Drilldown, {
+      rootPageId: "page0",
+      children: _jsx(Drilldown.Page, {
+        id: "page0",
+        children: _jsxs(Drilldown.Group, {
+          id: "group0",
+          children: [_jsx(Drilldown.Option, {
+            id: "groupOption01",
+            children: "Option - 1"
+          }), _jsx(Drilldown.Option, {
+            selected: true,
+            id: "groupOption02",
+            children: "Option - 2"
+          }), _jsx(Drilldown.Option, {
+            id: "groupOption03",
+            children: "Option - 3"
+          }), _jsx(Drilldown.Option, {
+            id: "groupOption04",
+            children: "Option - 4"
+          })]
+        })
+      })
+    })));
     const selectedOption = screen.getByLabelText('Option - 2');
     expect(selectedOption).toBeInTheDocument();
     expect(selectedOption).toHaveAttribute('id', 'groupOption02');
@@ -65,39 +73,52 @@ describe('<Drilldown.Option />', () => {
   });
   describe('id prop', () => {
     it('should throw warning the id is not provided', async () => {
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, _Drilldown$Option || (_Drilldown$Option = /*#__PURE__*/React.createElement(Drilldown.Option, null, "Option1")))));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _Drilldown$Option || (_Drilldown$Option = _jsx(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 () => {
-      render(_Drilldown2 || (_Drilldown2 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, "Option1"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, "Option2")))));
+      render(_Drilldown2 || (_Drilldown2 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsxs(Drilldown.Page, {
+          id: "page0",
+          children: [_jsx(Drilldown.Option, {
+            id: "option1",
+            children: "Option1"
+          }), _jsx(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 () => {
-      render(_Drilldown3 || (_Drilldown3 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, "Option1"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, "Option2"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, "Option3")))));
+      render(_Drilldown3 || (_Drilldown3 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsxs(Drilldown.Page, {
+          id: "page0",
+          children: [_jsx(Drilldown.Option, {
+            id: "option1",
+            children: "Option1"
+          }), _jsx(Drilldown.Option, {
+            id: "option1",
+            children: "Option2"
+          }), _jsx(Drilldown.Option, {
+            id: "option1",
+            children: "Option3"
+          })]
+        })
+      })));
       const menuitems = screen.queryAllByRole('menuitem');
       const option = screen.queryByText('Option2');
       expect(menuitems.length).toBe(0);
@@ -106,25 +127,31 @@ describe('<Drilldown.Option />', () => {
   });
   describe('children function prop', () => {
     it('should throw warning if it returns nothing', async () => {
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, () => null))));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(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 = vi.fn(() => 'Option');
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, childrenFunction))));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            children: childrenFunction
+          })
+        })
+      }));
       expect(childrenFunction).toHaveBeenCalledWith({
         id: 'option1',
         variant: 'default',
@@ -135,14 +162,17 @@ describe('<Drilldown.Option />', () => {
   describe('elementRef prop', () => {
     it('should give back to ref for the option wrapper (Options.Item)', async () => {
       const elementRef = vi.fn();
-      const _render = render(/*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option1",
-          elementRef: elementRef
-        }, "Option")))),
+      const _render = render(_jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option1",
+              elementRef: elementRef,
+              children: "Option"
+            })
+          })
+        })),
         container = _render.container;
       const option = container.querySelector('li');
       expect(elementRef).toHaveBeenCalledWith(option);
@@ -150,28 +180,34 @@ describe('<Drilldown.Option />', () => {
   });
   describe('subPageId prop', () => {
     it('should display arrow icon', async () => {
-      const _render2 = render(_Drilldown4 || (_Drilldown4 = /*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option1",
-          subPageId: "page1"
-        }, "Option"))))),
+      const _render2 = render(_Drilldown4 || (_Drilldown4 = _jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(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 () => {
-      render(_Drilldown5 || (_Drilldown5 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        subPageId: "page1"
-      }, "Option")))));
+      render(_Drilldown5 || (_Drilldown5 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            subPageId: "page1",
+            children: "Option"
+          })
+        })
+      })));
       const option = screen.getByLabelText('Option');
       expect(option).toHaveAttribute('role', 'button');
       expect(option).toHaveAttribute('aria-haspopup', 'true');
@@ -179,42 +215,51 @@ describe('<Drilldown.Option />', () => {
   });
   describe('disabled prop', () => {
     it('should mark option as disabled for SR', async () => {
-      render(_Drilldown6 || (_Drilldown6 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        disabled: true
-      }, "Option")))));
+      render(_Drilldown6 || (_Drilldown6 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            disabled: true,
+            children: "Option"
+          })
+        })
+      })));
       const option = screen.getByLabelText('Option');
       expect(option).toHaveAttribute('aria-disabled', 'true');
     });
   });
   describe('href prop', () => {
     it('should display option as link', async () => {
-      render(_Drilldown7 || (_Drilldown7 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        href: "/helloWorld"
-      }, "Option")))));
+      render(_Drilldown7 || (_Drilldown7 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            href: "/helloWorld",
+            children: "Option"
+          })
+        })
+      })));
       const option = screen.getByLabelText('Option');
       expect(option.tagName).toBe('A');
       expect(option).toHaveAttribute('href', '/helloWorld');
     });
     it('should throw warning if subPageId is provided too', async () => {
-      render(_Drilldown8 || (_Drilldown8 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        href: "/helloWorld",
-        subPageId: "page1"
-      }, "Option")))));
+      render(_Drilldown8 || (_Drilldown8 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            href: "/helloWorld",
+            subPageId: "page1",
+            children: "Option"
+          })
+        })
+      })));
       const option = 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));
@@ -222,17 +267,21 @@ describe('<Drilldown.Option />', () => {
       expect(option).not.toHaveAttribute('href');
     });
     it('should throw warning if option is in selectable group', async () => {
-      render(_Drilldown9 || (_Drilldown9 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Group, {
-        id: "group0",
-        selectableType: "multiple"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "groupOption01",
-        href: "/helloWorld"
-      }, "Option"))))));
+      render(_Drilldown9 || (_Drilldown9 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Group, {
+            id: "group0",
+            selectableType: "multiple",
+            children: _jsx(Drilldown.Option, {
+              id: "groupOption01",
+              href: "/helloWorld",
+              children: "Option"
+            })
+          })
+        })
+      })));
       const option = 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));
@@ -242,43 +291,52 @@ describe('<Drilldown.Option />', () => {
   });
   describe('as prop', () => {
     it('should render option as `li` by default', async () => {
-      render(_Drilldown10 || (_Drilldown10 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, "Option")))));
+      render(_Drilldown10 || (_Drilldown10 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            children: "Option"
+          })
+        })
+      })));
       const option = 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 () => {
-      render(_Drilldown11 || (_Drilldown11 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown11 || (_Drilldown11 = _jsx(Drilldown, {
         rootPageId: "page0",
-        as: "ol"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        as: "div"
-      }, "Option")))));
+        as: "ol",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            as: "div",
+            children: "Option"
+          })
+        })
+      })));
       const option = 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 () => {
-      render(_Drilldown12 || (_Drilldown12 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown12 || (_Drilldown12 = _jsx(Drilldown, {
         rootPageId: "page0",
-        as: "div"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        as: "div"
-      }, "Option")))));
+        as: "div",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            as: "div",
+            children: "Option"
+          })
+        })
+      })));
       const option = screen.getByLabelText('Option');
       const wrapper = option.parentElement;
       expect(option).toHaveAttribute('id', 'option1');
@@ -287,39 +345,48 @@ describe('<Drilldown.Option />', () => {
   });
   describe('role prop', () => {
     it('should be "menuitem" by default', async () => {
-      render(_Drilldown13 || (_Drilldown13 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1"
-      }, "Option")))));
+      render(_Drilldown13 || (_Drilldown13 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            children: "Option"
+          })
+        })
+      })));
       const option = screen.getByLabelText('Option');
       expect(option).toHaveAttribute('role', 'menuitem');
     });
     it('should be applied on prop', async () => {
-      render(_Drilldown14 || (_Drilldown14 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        role: "presentation"
-      }, "Option")))));
+      render(_Drilldown14 || (_Drilldown14 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            role: "presentation",
+            children: "Option"
+          })
+        })
+      })));
       const option = screen.getByLabelText('Option');
       expect(option).toHaveAttribute('role', 'presentation');
     });
   });
   describe('renderLabelInfo prop', () => {
     it('should display tag next to the label', async () => {
-      const _render3 = render(_Drilldown15 || (_Drilldown15 = /*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option1",
-          renderLabelInfo: "Info"
-        }, "Option"))))),
+      const _render3 = render(_Drilldown15 || (_Drilldown15 = _jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option1",
+              renderLabelInfo: "Info",
+              children: "Option"
+            })
+          })
+        }))),
         container = _render3.container;
       const tag = container.querySelector('[class$="optionLabelInfo"]');
       expect(tag).toBeInTheDocument();
@@ -327,14 +394,17 @@ describe('<Drilldown.Option />', () => {
     });
     it('as function should have option props as params', async () => {
       const infoFunction = vi.fn(() => 'Info');
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        renderLabelInfo: infoFunction
-      }, "Option"))));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            renderLabelInfo: infoFunction,
+            children: "Option"
+          })
+        })
+      }));
       expect(infoFunction).toHaveBeenCalledWith({
         variant: 'default',
         vAlign: 'start',
@@ -346,29 +416,35 @@ describe('<Drilldown.Option />', () => {
   });
   describe('renderBeforeLabel prop', () => {
     it('should display icon before the label', async () => {
-      const _render4 = render(_Drilldown16 || (_Drilldown16 = /*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option1",
-          renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
-        }, "Option"))))),
+      const _render4 = render(_Drilldown16 || (_Drilldown16 = _jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option1",
+              renderBeforeLabel: _jsx(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 = vi.fn(() => _IconCheckSolid || (_IconCheckSolid = /*#__PURE__*/React.createElement(IconCheckSolid, null)));
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        renderBeforeLabel: beforeLabelFunction
-      }, "Option"))));
+      const beforeLabelFunction = vi.fn(() => _IconCheckSolid || (_IconCheckSolid = _jsx(IconCheckSolid, {})));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            renderBeforeLabel: beforeLabelFunction,
+            children: "Option"
+          })
+        })
+      }));
       expect(beforeLabelFunction).toHaveBeenCalledWith(expect.objectContaining({
         variant: 'default',
         vAlign: 'start',
@@ -378,46 +454,56 @@ describe('<Drilldown.Option />', () => {
       }), expect.any(Object));
     });
     it('should throw warning if it is in selectable group', async () => {
-      render(_Drilldown17 || (_Drilldown17 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Group, {
-        id: "group1",
-        selectableType: "multiple"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "groupOption1",
-        renderBeforeLabel: "Before"
-      }, "Option"))))));
+      render(_Drilldown17 || (_Drilldown17 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Group, {
+            id: "group1",
+            selectableType: "multiple",
+            children: _jsx(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 = render(_Drilldown18 || (_Drilldown18 = /*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option1",
-          renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
-        }, "Option"))))),
+      const _render5 = render(_Drilldown18 || (_Drilldown18 = _jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option1",
+              renderAfterLabel: _jsx(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 = vi.fn(() => _IconCheckSolid2 || (_IconCheckSolid2 = /*#__PURE__*/React.createElement(IconCheckSolid, null)));
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        renderAfterLabel: beforeLabelFunction
-      }, "Option"))));
+      const beforeLabelFunction = vi.fn(() => _IconCheckSolid2 || (_IconCheckSolid2 = _jsx(IconCheckSolid, {})));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            renderAfterLabel: beforeLabelFunction,
+            children: "Option"
+          })
+        })
+      }));
       expect(beforeLabelFunction).toHaveBeenCalledWith(expect.objectContaining({
         variant: 'default',
         vAlign: 'start',
@@ -427,56 +513,68 @@ describe('<Drilldown.Option />', () => {
       }), expect.any(Object));
     });
     it('should throw warning if it has subPageId', async () => {
-      render(_Drilldown19 || (_Drilldown19 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        subPageId: "page1",
-        renderAfterLabel: "after"
-      }, "Option")))));
+      render(_Drilldown19 || (_Drilldown19 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(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 () => {
-      render(_Drilldown20 || (_Drilldown20 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        description: "This is a description."
-      }, "Option")))));
+      render(_Drilldown20 || (_Drilldown20 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            description: "This is a description.",
+            children: "Option"
+          })
+        })
+      })));
       const description = screen.getByText('This is a description.');
       expect(description).toBeInTheDocument();
     });
     it('as a function should display description under the option', async () => {
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        description: () => 'This is a description.'
-      }, "Option"))));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            description: () => 'This is a description.',
+            children: "Option"
+          })
+        })
+      }));
       const description = screen.getByText('This is a description.');
       expect(description).toBeInTheDocument();
     });
   });
   describe('descriptionRole prop', () => {
     it('should set the role of description', async () => {
-      render(_Drilldown21 || (_Drilldown21 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        description: "This is a description.",
-        descriptionRole: "button"
-      }, "Option")))));
+      render(_Drilldown21 || (_Drilldown21 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            description: "This is a description.",
+            descriptionRole: "button",
+            children: "Option"
+          })
+        })
+      })));
       const description = screen.getByText('This is a description.');
       expect(description).toHaveAttribute('role', 'button');
     });
@@ -484,14 +582,17 @@ describe('<Drilldown.Option />', () => {
   describe('onOptionClick callback', () => {
     it('should fire on click with correct params', async () => {
       const onOptionClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option1",
-        onOptionClick: onOptionClick
-      }, "Option"))));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option1",
+            onOptionClick: onOptionClick,
+            children: "Option"
+          })
+        })
+      }));
       const option = screen.getByText('Option');
       await userEvent.click(option);
       await waitFor(() => {
@@ -506,18 +607,21 @@ describe('<Drilldown.Option />', () => {
       });
     });
     it('should provide goToPreviousPage method that throws a warning, if there is no previous page', async () => {
-      render(/*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01",
-        onOptionClick: (_e, {
-          goToPreviousPage
-        }) => {
-          goToPreviousPage();
-        }
-      }, "Option"))));
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            onOptionClick: (_e, {
+              goToPreviousPage
+            }) => {
+              goToPreviousPage();
+            },
+            children: "Option"
+          })
+        })
+      }));
       const option = screen.getByText('Option');
       await userEvent.click(option);
       await waitFor(() => {
@@ -527,18 +631,21 @@ describe('<Drilldown.Option />', () => {
     });
     describe('provide goToPage method', () => {
       it("should throws warning if page doesn't exist", async () => {
-        render(/*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01",
-          onOptionClick: (_e, {
-            goToPage
-          }) => {
-            goToPage('page1');
-          }
-        }, "Option"))));
+        render(_jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              onOptionClick: (_e, {
+                goToPage
+              }) => {
+                goToPage('page1');
+              },
+              children: "Option"
+            })
+          })
+        }));
         const option = screen.getByText('Option');
         await userEvent.click(option);
         await waitFor(() => {
@@ -547,19 +654,22 @@ describe('<Drilldown.Option />', () => {
         });
       });
       it('should throws warning if if no page id is provided', async () => {
-        render(/*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01",
-          onOptionClick: (_e, {
-            goToPage
-          }) => {
-            // @ts-expect-error we want this to fail
-            goToPage();
-          }
-        }, "Option"))));
+        render(_jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              onOptionClick: (_e, {
+                goToPage
+              }) => {
+                // @ts-expect-error we want this to fail
+                goToPage();
+              },
+              children: "Option"
+            })
+          })
+        }));
         const option = screen.getByText('Option');
         await userEvent.click(option);
         await waitFor(() => {
@@ -568,21 +678,24 @@ describe('<Drilldown.Option />', () => {
         });
       });
       it('should throws warning if parameter is not string', async () => {
-        render(/*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01",
-          onOptionClick: (_e, {
-            goToPage
-          }) => {
-            // @ts-expect-error we want this to fail
-            goToPage({
-              page: 'page1'
-            });
-          }
-        }, "Option"))));
+        render(_jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              onOptionClick: (_e, {
+                goToPage
+              }) => {
+                // @ts-expect-error we want this to fail
+                goToPage({
+                  page: 'page1'
+                });
+              },
+              children: "Option"
+            })
+          })
+        }));
         const option = screen.getByText('Option');
         await userEvent.click(option);
         await waitFor(() => {