@instructure/ui-drilldown 10.19.2-snapshot-2 → 10.19.2-snapshot-4

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

@@ -1,1022 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = require("@testing-library/react");
-var _vitest = require("vitest");
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-require("@testing-library/jest-dom");
-var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
-var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
-var _IconCheckSolid = require("@instructure/ui-icons/lib/IconCheckSolid.js");
-var _index = require("../index");
-var _Drilldown16 = _interopRequireDefault(require("../__examples__/Drilldown.examples"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _Drilldown, _Drilldown2, _Drilldown3, _Drilldown4, _Drilldown5, _Drilldown6, _Drilldown7, _Drilldown8, _Drilldown9, _Drilldown$Page, _button, _Drilldown$Page2, _button2, _Drilldown$Page3, _Drilldown$Page4, _button3, _Drilldown$Page5, _button4, _Drilldown$Page6, _Drilldown$Page7, _button5, _Drilldown$Page8, _button6, _Drilldown$Page9, _Drilldown10, _button7, _Drilldown$Page10, _Drilldown11, _button8, _Drilldown$Page11, _button9, _Drilldown$Page12, _button10, _Drilldown$Page13, _Drilldown12, _button11, _Drilldown$Page14, _Drilldown13, _button12, _Drilldown$Page15, _button13, _Drilldown$Page16, _button14, _Drilldown$Page17, _button15, _Drilldown$Page18, _button16, _Drilldown$Page19, _button17, _Drilldown$Page20, _button18, _Drilldown$Page21, _button19, _Drilldown$Page22, _Drilldown14, _Drilldown15;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-// eslint-disable-next-line no-restricted-imports
-const data = Array(5).fill(0).map((_v, ind) => ({
-  label: `option ${ind}`,
-  id: `opt_${ind}`
-}));
-describe('<Drilldown />', () => {
-  let consoleWarningMock;
-  let consoleErrorMock;
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution and expect for messages
-    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleWarningMock.mockRestore();
-    consoleErrorMock.mockRestore();
-  });
-  describe('rootPageId prop', () => {
-    it('should set the initial page and render it', async () => {
-      (0, _react.render)(_Drilldown || (_Drilldown = (0, _jsxRuntime.jsxs)(_index.Drilldown, {
-        rootPageId: "page1",
-        children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option-01"
-          })
-        }), (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page1",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option11",
-            children: "Option-11"
-          })
-        })]
-      })));
-      const drilldown = _react.screen.getByRole('menu');
-      const options = _react.screen.getAllByRole('menuitem');
-      const rootlessOption = _react.screen.queryByText('Option-01');
-      expect(drilldown).toBeInTheDocument();
-      expect(rootlessOption).not.toBeInTheDocument();
-      expect(options.length).toBe(1);
-      expect(options[0]).toHaveTextContent('Option-11');
-      expect(options[0]).toHaveAttribute('id', 'option11');
-    });
-  });
-  describe('children prop', () => {
-    it('should not allow non-DrilldownPage children', async () => {
-      (0, _react.render)(_Drilldown2 || (_Drilldown2 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)("div", {
-          id: "testDiv",
-          children: "DIV-child"
-        })
-      })));
-      const drilldown = _react.screen.queryByRole('menu');
-      const options = _react.screen.queryAllByRole('menuitem');
-      const notAllowedChild = _react.screen.queryByText('DIV-child');
-      expect(drilldown).not.toBeInTheDocument();
-      expect(options.length).toBe(0);
-      expect(notAllowedChild).not.toBeInTheDocument();
-    });
-    it('should not crash for weird option ids', async () => {
-      const onSelect = _vitest.vi.fn();
-      const weirdID = 'some"_weird!@#$%^&*()\\|`id';
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        onSelect: onSelect,
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: data.map(option => (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: weirdID + option.id,
-            value: weirdID + option.id,
-            "data-testid": weirdID + option.id,
-            children: option.label
-          }, weirdID + option.id))
-        })
-      }));
-      const option_1 = _react.screen.getByTestId(weirdID + 'opt_1');
-      await _userEvent.default.click(option_1);
-      await (0, _react.waitFor)(() => {
-        expect(onSelect).toHaveBeenCalled();
-      });
-    });
-  });
-  describe('id prop', () => {
-    it('should put id attr on the drilldown', async () => {
-      (0, _react.render)(_Drilldown3 || (_Drilldown3 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        id: "testId",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        })
-      })));
-      const drilldown = _react.screen.getByRole('menu');
-      expect(drilldown).toBeInTheDocument();
-      expect(drilldown).toHaveAttribute('id', 'testId');
-    });
-  });
-  describe('label prop', () => {
-    it('should be added as aria-label', async () => {
-      (0, _react.render)(_Drilldown4 || (_Drilldown4 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        label: "testLabel",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        })
-      })));
-      const drilldown = _react.screen.getByRole('menu');
-      expect(drilldown).toBeInTheDocument();
-      expect(drilldown).toHaveAttribute('aria-label', 'testLabel');
-    });
-  });
-  describe('disabled prop', () => {
-    it('should disable all options', async () => {
-      (0, _react.render)(_Drilldown5 || (_Drilldown5 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        disabled: true,
-        children: (0, _jsxRuntime.jsxs)(_index.Drilldown.Page, {
-          id: "page0",
-          renderActionLabel: "Action",
-          children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option02",
-            children: "Option"
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option03",
-            children: "Option"
-          })]
-        })
-      })));
-      const options = _react.screen.getAllByRole('menuitem');
-      expect(options.length).toBe(4); // header action + 3 options
-
-      options.forEach(option => {
-        expect(option).toHaveAttribute('aria-disabled', 'true');
-      });
-    });
-  });
-  describe('as prop', () => {
-    it('should be "ul" by default', async () => {
-      const _render = (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: "option01",
-              children: "Option"
-            })
-          })
-        }))),
-        container = _render.container;
-      const drilldownList = container.querySelector('[class$="-options__list"]');
-      expect(drilldownList === null || drilldownList === void 0 ? void 0 : drilldownList.tagName).toBe('UL');
-    });
-    it('should render as passed element', async () => {
-      const _render2 = (0, _react.render)(_Drilldown7 || (_Drilldown7 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          as: "ol",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              children: "Option"
-            })
-          })
-        }))),
-        container = _render2.container;
-      const drilldownList = container.querySelector('[class$="-options__list"]');
-      expect(drilldownList === null || drilldownList === void 0 ? void 0 : drilldownList.tagName).toBe('OL');
-    });
-  });
-  describe('role prop', () => {
-    it('should be "menu" by default', async () => {
-      const _render3 = (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: "option01",
-              children: "Option"
-            })
-          })
-        }))),
-        container = _render3.container;
-      const drilldown = container.querySelector('div[id^="Drilldown_"]');
-      expect(drilldown).toHaveAttribute('role', 'menu');
-    });
-    it('should apply passed role', async () => {
-      const _render4 = (0, _react.render)(_Drilldown9 || (_Drilldown9 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          role: "list",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              children: "Option"
-            })
-          })
-        }))),
-        container = _render4.container;
-      const drilldown = container.querySelector('div[id^="Drilldown_"]');
-      expect(drilldown).toHaveAttribute('role', 'list');
-    });
-  });
-  describe('elementRef prop (and ref static prop)', () => {
-    it('should give back the drilldown element when there is no trigger', async () => {
-      const elementRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        elementRef: elementRef,
-        children: _Drilldown$Page || (_Drilldown$Page = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const drilldown = _react.screen.getByRole('menu');
-      expect(drilldown).toBeInTheDocument();
-      expect(elementRef).toHaveBeenCalledWith(drilldown);
-    });
-    it('should give back the Popover root when drilldown has trigger and is closed', async () => {
-      const elementRef = _vitest.vi.fn();
-      const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          elementRef: elementRef,
-          trigger: _button || (_button = (0, _jsxRuntime.jsx)("button", {
-            children: "Toggle"
-          })),
-          children: _Drilldown$Page2 || (_Drilldown$Page2 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              children: "Option"
-            })
-          }))
-        })),
-        container = _render5.container;
-      const trigger = _react.screen.getByText('Toggle');
-      const positionId = trigger.getAttribute('data-position-target');
-      const drilldownRoot = container.querySelector(`span[data-position="${positionId}"]`);
-      expect(drilldownRoot).toBeInTheDocument();
-      expect(elementRef).toHaveBeenCalledWith(drilldownRoot);
-    });
-    it('should give back the the Popover root when drilldown has trigger and is open', async () => {
-      const elementRef = _vitest.vi.fn();
-      const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          elementRef: elementRef,
-          trigger: _button2 || (_button2 = (0, _jsxRuntime.jsx)("button", {
-            children: "Toggle"
-          })),
-          defaultShow: true,
-          children: _Drilldown$Page3 || (_Drilldown$Page3 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              children: "Option"
-            })
-          }))
-        })),
-        container = _render6.container;
-      const trigger = _react.screen.getByText('Toggle');
-      const positionId = trigger.getAttribute('data-position-target');
-      const drilldownRoot = container.querySelector(`span[data-position="${positionId}"]`);
-      expect(drilldownRoot).toBeInTheDocument();
-      expect(elementRef).toHaveBeenCalledWith(drilldownRoot);
-    });
-  });
-  describe('drilldownRef prop', () => {
-    it('should give back the drilldown element when there is no trigger', async () => {
-      const drilldownRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        drilldownRef: drilldownRef,
-        children: _Drilldown$Page4 || (_Drilldown$Page4 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const drilldown = _react.screen.getByRole('menu');
-      expect(drilldownRef).toHaveBeenCalledWith(drilldown);
-    });
-    it("shouldn't be called when drilldown has trigger and is closed", async () => {
-      const drilldownRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        drilldownRef: drilldownRef,
-        trigger: _button3 || (_button3 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        children: _Drilldown$Page5 || (_Drilldown$Page5 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      expect(drilldownRef).not.toHaveBeenCalled();
-    });
-    it('should give back the drilldown element when drilldown has trigger and is open', async () => {
-      const drilldownRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        drilldownRef: drilldownRef,
-        trigger: _button4 || (_button4 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        defaultShow: true,
-        children: _Drilldown$Page6 || (_Drilldown$Page6 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const drilldown = _react.screen.getByRole('menu');
-      expect(drilldownRef).toHaveBeenCalledWith(drilldown);
-    });
-  });
-  describe('popoverRef prop', () => {
-    it('should not be called when there is no trigger', async () => {
-      const popoverRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        popoverRef: popoverRef,
-        children: _Drilldown$Page7 || (_Drilldown$Page7 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      expect(popoverRef).not.toHaveBeenCalled();
-    });
-    it('should give back the Popover component when drilldown has trigger and is closed', async () => {
-      const popoverRef = _vitest.vi.fn();
-      const _render7 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          popoverRef: popoverRef,
-          trigger: _button5 || (_button5 = (0, _jsxRuntime.jsx)("button", {
-            children: "Toggle"
-          })),
-          children: _Drilldown$Page8 || (_Drilldown$Page8 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              children: "Option"
-            })
-          }))
-        })),
-        container = _render7.container;
-      const trigger = _react.screen.getByText('Toggle');
-      const positionId = trigger.getAttribute('data-position-target');
-      const popoverRoot = container.querySelector(`span[data-position="${positionId}"]`);
-      expect(popoverRoot).toBeInTheDocument();
-      expect(popoverRef).toHaveBeenCalled();
-
-      // Popover component's public ref prop
-      expect(popoverRef.mock.calls[0][0].ref).toBe(popoverRoot);
-    });
-    it('should give back the Popover component when drilldown has trigger and is open', async () => {
-      const popoverRef = _vitest.vi.fn();
-      const _render8 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          popoverRef: popoverRef,
-          trigger: _button6 || (_button6 = (0, _jsxRuntime.jsx)("button", {
-            children: "Toggle"
-          })),
-          defaultShow: true,
-          children: _Drilldown$Page9 || (_Drilldown$Page9 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              children: "Option"
-            })
-          }))
-        })),
-        container = _render8.container;
-      const trigger = _react.screen.getByText('Toggle');
-      const positionId = trigger.getAttribute('data-position-target');
-      const popoverRoot = container.querySelector(`span[data-position="${positionId}"]`);
-      expect(popoverRoot).toBeInTheDocument();
-      expect(popoverRef).toHaveBeenCalled();
-
-      // Popover component's public ref prop
-      expect(popoverRef.mock.calls[0][0].ref).toBe(popoverRoot);
-    });
-  });
-  describe('onSelect prop', () => {
-    it('should fire when option is selected', async () => {
-      const onSelect = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        onSelect: onSelect,
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: data.map(option => (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: option.id,
-            value: option.id,
-            "data-testid": option.id,
-            children: option.label
-          }, option.id))
-        })
-      }));
-      const option_1 = _react.screen.getByTestId('opt_1');
-      await _userEvent.default.click(option_1);
-      await (0, _react.waitFor)(() => {
-        expect(onSelect).toHaveBeenCalled();
-        const args = onSelect.mock.calls[0][1];
-        const event = onSelect.mock.calls[0][0];
-        expect(args.value).toBe('opt_1');
-        expect(args.isSelected).toBe(true);
-        expect(args.selectedOption.props).toHaveProperty('id', 'opt_1');
-        expect(args.selectedOption.props).toHaveProperty('role', 'menuitem');
-        expect(args.selectedOption.props).toHaveProperty('value', 'opt_1');
-        expect(args.drilldown.props).toHaveProperty('role', 'menu');
-        expect(args.drilldown.hide).toBeInstanceOf(Function);
-        expect(event.target).toBe(option_1);
-      });
-    });
-    it('should not fire when drilldown is disabled', async () => {
-      const onSelect = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        onSelect: onSelect,
-        disabled: true,
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: data.map(option => (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: option.id,
-            "data-testid": option.id,
-            children: option.label
-          }, option.id))
-        })
-      }));
-      const option_1 = _react.screen.getByTestId('opt_1');
-      await _userEvent.default.click(option_1);
-      await (0, _react.waitFor)(() => {
-        expect(onSelect).not.toHaveBeenCalled();
-      });
-    });
-  });
-  describe('with a trigger', () => {
-    it('should not show content by default', async () => {
-      (0, _react.render)(_Drilldown10 || (_Drilldown10 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: (0, _jsxRuntime.jsx)("button", {
-          children: "click me"
-        }),
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option0",
-            children: "Option 0"
-          })
-        })
-      })));
-      const option_0 = _react.screen.queryByText('Option 0');
-      expect(option_0).not.toBeInTheDocument();
-    });
-    it('should render into a mountNode', async () => {
-      const container = document.createElement('div');
-      container.setAttribute('data-testid', 'container');
-      document.body.appendChild(container);
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        mountNode: container,
-        trigger: _button7 || (_button7 = (0, _jsxRuntime.jsx)("button", {
-          children: "Options"
-        })),
-        children: _Drilldown$Page10 || (_Drilldown$Page10 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option0",
-            children: "Option 0"
-          })
-        }))
-      }));
-      const optionsContainer = _react.screen.getByTestId('container');
-      const trigger = _react.screen.getByRole('button');
-      expect(optionsContainer).not.toHaveTextContent('Option 0');
-      await _userEvent.default.click(trigger);
-      await (0, _react.waitFor)(() => {
-        const updatedOptionsContainer = _react.screen.getByTestId('container');
-        expect(updatedOptionsContainer).toHaveTextContent('Option 0');
-      });
-    });
-    it('should have an aria-haspopup attribute', async () => {
-      (0, _react.render)(_Drilldown11 || (_Drilldown11 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: (0, _jsxRuntime.jsx)("button", {
-          children: "Options"
-        }),
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option0",
-            children: "Option 0"
-          })
-        })
-      })));
-      const trigger = _react.screen.getByRole('button');
-      expect(trigger).toHaveAttribute('aria-haspopup');
-    });
-    it('should call onToggle when Drilldown is opened', async () => {
-      const onToggle = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button8 || (_button8 = (0, _jsxRuntime.jsx)("button", {
-          children: "Options"
-        })),
-        onToggle: onToggle,
-        "data-testid": "drilldown",
-        children: _Drilldown$Page11 || (_Drilldown$Page11 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option0",
-            children: "Option 0"
-          })
-        }))
-      }));
-      const trigger = _react.screen.getByRole('button');
-      await _userEvent.default.click(trigger);
-      await (0, _react.waitFor)(() => {
-        expect(onToggle).toHaveBeenCalled();
-        const args = onToggle.mock.calls[0][1];
-        expect(args).toHaveProperty('shown', true);
-        expect(args).toHaveProperty('pageHistory', ['page0']);
-        expect(args.goToPage).toBeInstanceOf(Function);
-        expect(args.goToPreviousPage).toBeInstanceOf(Function);
-        expect(args.drilldown.props).toHaveProperty('role', 'menu');
-        expect(args.drilldown.props).toHaveProperty('data-testid', 'drilldown');
-      });
-    });
-    it('should call onToggle when Drilldown is closed', async () => {
-      const onToggle = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button9 || (_button9 = (0, _jsxRuntime.jsx)("button", {
-          children: "Options"
-        })),
-        onToggle: onToggle,
-        defaultShow: true,
-        children: _Drilldown$Page12 || (_Drilldown$Page12 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option0",
-            children: "Option 0"
-          })
-        }))
-      }));
-      const trigger = _react.screen.getByRole('button');
-      await _userEvent.default.click(trigger);
-      await (0, _react.waitFor)(() => {
-        expect(onToggle).toHaveBeenCalled();
-        const args = onToggle.mock.calls[0][1];
-        expect(args).toHaveProperty('shown', false);
-        expect(args).toHaveProperty('pageHistory', ['page0']);
-        expect(args).toHaveProperty('drilldown');
-        expect(args.goToPage).toBeInstanceOf(Function);
-        expect(args.goToPreviousPage).toBeInstanceOf(Function);
-      });
-    });
-  });
-  describe('placement prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button10 || (_button10 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        defaultShow: true,
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        placement: 'top start',
-        children: _Drilldown$Page13 || (_Drilldown$Page13 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.placement).toBe('top start');
-    });
-  });
-  describe('defaultShow prop', () => {
-    it('should display Popover on render', async () => {
-      (0, _react.render)(_Drilldown12 || (_Drilldown12 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        }),
-        defaultShow: true,
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        })
-      })));
-      const popoverContent = _react.screen.getByText('Option');
-      expect(popoverContent).toBeVisible();
-    });
-  });
-  describe('show prop', () => {
-    it('should display popover', async () => {
-      const onToggle = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button11 || (_button11 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        show: true,
-        onToggle: onToggle,
-        children: _Drilldown$Page14 || (_Drilldown$Page14 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverContent = _react.screen.getByText('Option');
-      expect(popoverContent).toBeVisible();
-    });
-    it('should give error if onToggle is not provided (controllable)', async () => {
-      (0, _react.render)(_Drilldown13 || (_Drilldown13 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        }),
-        show: true,
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        })
-      })));
-      const popoverContent = _react.screen.getByText('Option');
-      expect(popoverContent).toBeVisible();
-      expect(popoverContent).toBeVisible();
-      expect(consoleErrorMock).toHaveBeenCalled();
-    });
-  });
-  describe('onFocus prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      const onFocus = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button12 || (_button12 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        onFocus: onFocus,
-        children: _Drilldown$Page15 || (_Drilldown$Page15 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.onFocus).toEqual(onFocus);
-    });
-  });
-  describe('onMouseOver prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      const onMouseOver = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button13 || (_button13 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        onMouseOver: onMouseOver,
-        children: _Drilldown$Page16 || (_Drilldown$Page16 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.onMouseOver).toEqual(onMouseOver);
-    });
-  });
-  describe('shouldContainFocus prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button14 || (_button14 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        shouldContainFocus: true,
-        children: _Drilldown$Page17 || (_Drilldown$Page17 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.shouldContainFocus).toEqual(true);
-    });
-  });
-  describe('shouldReturnFocus prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button15 || (_button15 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        shouldReturnFocus: false,
-        children: _Drilldown$Page18 || (_Drilldown$Page18 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.shouldReturnFocus).toEqual(false);
-    });
-  });
-  describe('withArrow prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button16 || (_button16 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        withArrow: false,
-        children: _Drilldown$Page19 || (_Drilldown$Page19 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.withArrow).toEqual(false);
-    });
-  });
-  describe('offsetX prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button17 || (_button17 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        offsetX: '2rem',
-        children: _Drilldown$Page20 || (_Drilldown$Page20 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.offsetX).toEqual('2rem');
-    });
-  });
-  describe('offsetY prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button18 || (_button18 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        offsetY: '2rem',
-        children: _Drilldown$Page21 || (_Drilldown$Page21 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.offsetY).toEqual('2rem');
-    });
-  });
-  describe('positionContainerDisplay prop', () => {
-    it('should be passed to Popover', async () => {
-      let popoverRef = null;
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        trigger: _button19 || (_button19 = (0, _jsxRuntime.jsx)("button", {
-          children: "Toggle"
-        })),
-        popoverRef: e => {
-          popoverRef = e;
-        },
-        positionContainerDisplay: "block",
-        children: _Drilldown$Page22 || (_Drilldown$Page22 = (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            children: "Option"
-          })
-        }))
-      }));
-      const popoverProps = popoverRef.props;
-      expect(popoverProps.positionContainerDisplay).toEqual('block');
-    });
-  });
-  describe('for a11y', () => {
-    it('should be accessible', async () => {
-      const _render9 = (0, _react.render)(_Drilldown14 || (_Drilldown14 = (0, _jsxRuntime.jsxs)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: [(0, _jsxRuntime.jsxs)(_index.Drilldown.Page, {
-            id: "page0",
-            renderTitle: "Page Title",
-            renderActionLabel: "Action Label",
-            children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item01",
-              children: "Item1"
-            }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item02",
-              subPageId: "page1",
-              children: "Item2"
-            }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item03",
-              description: "This is a description",
-              children: "Item3"
-            }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item04",
-              renderLabelInfo: "After",
-              children: "Item4"
-            }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item05",
-              disabled: true,
-              children: "Item5"
-            }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item06",
-              href: "/",
-              children: "Item6"
-            }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item07",
-              renderBeforeLabel: (0, _jsxRuntime.jsx)(_IconCheckSolid.IconCheckSolid, {}),
-              children: "Item7"
-            }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item08",
-              renderAfterLabel: (0, _jsxRuntime.jsx)(_IconCheckSolid.IconCheckSolid, {}),
-              children: "Item8"
-            }), (0, _jsxRuntime.jsx)(_index.Drilldown.Separator, {
-              id: "sep1"
-            }), (0, _jsxRuntime.jsxs)(_index.Drilldown.Group, {
-              id: "group1",
-              renderGroupTitle: "Multi-select group",
-              selectableType: "multiple",
-              children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-                id: "groupItem11",
-                children: "GroupItem"
-              }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-                id: "groupItem12",
-                children: "GroupItem"
-              }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-                id: "groupItem13",
-                children: "GroupItem"
-              })]
-            }), (0, _jsxRuntime.jsxs)(_index.Drilldown.Group, {
-              id: "group2",
-              renderGroupTitle: "Single-select group",
-              selectableType: "single",
-              children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-                id: "groupItem21",
-                children: "GroupItem"
-              }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-                id: "groupItem22",
-                children: "GroupItem"
-              }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-                id: "groupItem23",
-                children: "GroupItem"
-              })]
-            })]
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page1",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "item11",
-              children: "Item1"
-            })
-          })]
-        }))),
-        container = _render9.container;
-
-      // axe-check is more strict now, and expects "list" role to have "listitem" children, but we use "role='none'" children. After discussing it with the A11y team, we agreed to ignore this error because the screen readers can read the component perfectly.
-      // TODO: try to remove this ignore if axe-check is updated and isn't this strict anymore
-      // https://dequeuniversity.com/rules/axe/4.6/aria-required-children?application=axeAPI
-      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container, {
-        ignores: ['aria-required-children']
-      });
-      expect(axeCheck).toBe(true);
-    });
-    it('should meet a11y standarts when drilldown is open', async () => {
-      const _render10 = (0, _react.render)(_Drilldown15 || (_Drilldown15 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-          defaultShow: true,
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option0",
-              children: "Option 0"
-            })
-          })
-        }))),
-        container = _render10.container;
-      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
-      expect(axeCheck).toBe(true);
-    });
-  });
-  describe('with generated examples', () => {
-    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.Drilldown, _Drilldown16.default);
-    it.each(generatedComponents)('should be accessible with example: $description', async ({
-      content
-    }) => {
-      const _render11 = (0, _react.render)(content),
-        container = _render11.container;
-      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container, {
-        // axe-check is more strict now, and expects "list" role to have "listitem" children, but we use "role='none'" children. After discussing it with the A11y team, we agreed to ignore this error because the screen readers can read the component perfectly.
-        // TODO: try to remove this ignore if axe-check is updated and isn't this strict anymore
-        // https://dequeuniversity.com/rules/axe/4.6/aria-required-children?application=axeAPI
-        ignores: ['aria-required-children']
-      });
-      expect(axeCheck).toBe(true);
-    });
-  });
-});