@instructure/ui-drilldown 8.21.1-snapshot.10

package/lib/Drilldown/locator.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DrilldownLocator", {
+  enumerable: true,
+  get: function () {
+    return _DrilldownLocator.DrilldownLocator;
+  }
+});
+exports.default = void 0;
+
+var _DrilldownLocator = require("./DrilldownLocator");
+
+/*
+ * 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.
+ */
+var _default = _DrilldownLocator.DrilldownLocator;
+exports.default = _default;

package/lib/Drilldown/props.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
+
+var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
+
+var _DrilldownPage = require("./DrilldownPage");
+
+/*
+ * 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.
+ */
+const propTypes = {
+  rootPageId: _propTypes.default.string.isRequired,
+  children: _Children.Children.oneOf([_DrilldownPage.DrilldownPage]),
+  id: _propTypes.default.string,
+  label: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  rotateFocus: _propTypes.default.bool,
+  as: _propTypes.default.elementType,
+  role: _propTypes.default.string,
+  elementRef: _propTypes.default.func,
+  drilldownRef: _propTypes.default.func,
+  overflowX: _propTypes.default.oneOf(['auto', 'hidden', 'visible']),
+  overflowY: _propTypes.default.oneOf(['auto', 'hidden', 'visible']),
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  trigger: _propTypes.default.node,
+  placement: _PositionPropTypes.PositionPropTypes.placement,
+  defaultShow: _propTypes.default.bool,
+  show: (0, _controllable.controllable)(_propTypes.default.bool, 'onToggle', 'defaultShow'),
+  onToggle: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  onDismiss: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
+  popoverRef: _propTypes.default.func,
+  mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
+  positionTarget: _PositionPropTypes.PositionPropTypes.mountNode,
+  constrain: _PositionPropTypes.PositionPropTypes.constrain,
+  shouldHideOnSelect: _propTypes.default.bool,
+  shouldContainFocus: _propTypes.default.bool,
+  shouldReturnFocus: _propTypes.default.bool,
+  withArrow: _propTypes.default.bool,
+  offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+exports.propTypes = propTypes;
+const allowedProps = ['rootPageId', 'children', 'id', 'label', 'disabled', 'rotateFocus', 'as', 'role', 'overflowX', 'overflowY', 'height', 'width', 'maxHeight', 'maxWidth', // Popover version props
+'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'elementRef', 'drilldownRef', 'popoverRef', 'mountNode', 'positionTarget', 'constrain', 'shouldHideOnSelect', 'shouldContainFocus', 'shouldReturnFocus', 'withArrow', 'offsetX', 'offsetY'];
+exports.allowedProps = allowedProps;

package/lib/Drilldown/styles.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, _props, state) => {
+  const hasHighlightedOption = state.hasHighlightedOption;
+  return {
+    drilldown: {
+      label: 'drilldown',
+      overflow: 'visible',
+      // needed for focus ring!
+      ...(hasHighlightedOption && {
+        '&:focus::before': {
+          display: 'none'
+        }
+      })
+    },
+    container: {
+      label: 'drilldown__container'
+    },
+    headerBack: {
+      label: 'drilldown__headerBack',
+      minHeight: '1.25em'
+    },
+    headerTitle: {
+      label: 'drilldown__headerTitle',
+      fontWeight: componentTheme.headerTitleFontWeight
+    },
+    optionContainer: {
+      label: 'drilldown__optionContainer',
+      alignItems: 'center',
+      display: 'flex',
+      height: '100%'
+    },
+    optionLabelInfo: {
+      label: 'drilldown__optionLabelInfo',
+      display: 'flex',
+      flexShrink: 0,
+      height: '100%',
+      alignItems: 'center',
+      paddingInlineStart: componentTheme.labelInfoPadding
+    },
+    optionContent: {
+      label: 'drilldown__optionContent',
+      flexGrow: 1
+    },
+    // we use it in the index file
+    headerActionColor: componentTheme.headerActionColor
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/Drilldown/theme.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * 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.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+        typography = theme.typography,
+        spacing = theme.spacing;
+  const componentVariables = {
+    headerTitleFontWeight: typography.fontWeightBold,
+    headerActionColor: colors.textLink,
+    labelInfoPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Drilldown", {
+  enumerable: true,
+  get: function () {
+    return _Drilldown.Drilldown;
+  }
+});
+
+var _Drilldown = require("./Drilldown");

package/lib/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@instructure/ui-drilldown",
+  "version": "8.21.1-snapshot.10+44e7e13f1",
+  "description": "A drilldown menu component",
+  "author": "Instructure, Inc. Engineering and Product Design",
+  "module": "./es/index.js",
+  "main": "./lib/index.js",
+  "types": "./types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instructure/instructure-ui.git"
+  },
+  "homepage": "https://instructure.github.io/instructure-ui/",
+  "bugs": "https://github.com/instructure/instructure-ui/issues",
+  "scripts": {
+    "lint": "ui-test --lint",
+    "lint:fix": "ui-test --lint --fix",
+    "clean": "ui-build --clean",
+    "build": "ui-build --modules es,cjs",
+    "build:watch": "yarn ts:check --watch & ui-build --watch",
+    "build:types": "tsc -p tsconfig.build.json",
+    "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@instructure/console": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/emotion": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/shared-types": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-dom-utils": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-icons": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-options": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-popover": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-position": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-prop-types": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-react-utils": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-selectable": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-testable": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-utils": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-view": "8.21.1-snapshot.10+44e7e13f1",
+    "prop-types": "^15"
+  },
+  "devDependencies": {
+    "@instructure/ui-babel-preset": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-color-utils": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-test-locator": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-test-utils": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/ui-themes": "8.21.1-snapshot.10+44e7e13f1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8 <=17"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "gitHead": "44e7e13f1720680be9f7e76a3d3ec0cf94e88d5b"
+}

package/src/Drilldown/DrilldownGroup/index.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+
+/** @jsx jsx */
+import { Component } from 'react'
+
+import { withStyle } from '@instructure/emotion'
+import { optionsThemeGenerator } from '@instructure/ui-options'
+
+import { propTypes, allowedProps } from './props'
+import type { DrilldownGroupProps } from './props'
+
+/**
+---
+parent: Drilldown
+id: Drilldown.Group
+---
+@module DrilldownGroup
+@tsProps
+**/
+// needed for listing the available theme variables on docs page,
+// we pass the themeOverrides to Options
+@withStyle(null, optionsThemeGenerator)
+class DrilldownGroup extends Component<DrilldownGroupProps> {
+  static readonly componentId = 'Drilldown.Group'
+
+  static propTypes = propTypes
+  static allowedProps = allowedProps
+  static defaultProps = {
+    disabled: false,
+    withoutSeparators: false,
+    role: 'group'
+  }
+
+  render() {
+    // this component is only used for prop validation.
+    // Drilldown.Group is parsed in Drilldown as an Options component.
+    return null
+  }
+}
+
+export default DrilldownGroup
+export { DrilldownGroup }

package/src/Drilldown/DrilldownGroup/props.ts

@@ -0,0 +1,149 @@
+/*
+ * 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.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Children } from '@instructure/ui-prop-types'
+
+import DrilldownOption from '../DrilldownOption'
+import DrilldownSeparator from '../DrilldownSeparator'
+
+import type {
+  OtherHTMLAttributes,
+  PropValidators,
+  OptionsTheme,
+  AsElementType
+} from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+import Drilldown from '../index'
+import type { DrilldownOptionValue } from '../DrilldownOption/props'
+import type { OptionChild, SeparatorChild } from '../props'
+
+type GroupChildren = OptionChild | SeparatorChild
+
+type DrilldownGroupOwnProps = {
+  id: string
+
+  /**
+   * Children of type:
+   * `<Drilldown.Option />`, `<Drilldown.Separator />`
+   */
+  children?: GroupChildren | GroupChildren[] // TODO: type Children.oneOf([DrilldownOption, DrilldownSeparator])
+
+  /**
+   * The label of the option group.
+   */
+  renderGroupTitle?: React.ReactNode | (() => React.ReactNode)
+
+  /**
+   * Hides the separators around the group.
+   */
+  withoutSeparators?: boolean
+
+  /**
+   * Is the option group disabled.
+   */
+  disabled?: boolean
+
+  /**
+   * The ARIA role of the element.
+   */
+  role?: string
+
+  /**
+   * Element type to render as. By default, it inherits Drilldown's `as` prop.
+   */
+  as?: AsElementType
+
+  /**
+   * Provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+
+  // selection props
+  /**
+   * Makes the option group selectable (with "check" icon indicators).
+   * Can be set to a single-select (radio) or a multi-select (checkbox) group.
+   */
+  selectableType?: 'single' | 'multiple'
+
+  /**
+   * An array of the values for the selected items on initial render. Works only with "selectableType" set. If "selectableType" is "single", the array has to have 1 item.
+   */
+  defaultSelected?: DrilldownOptionValue[]
+
+  /**
+   * Callback fired when an option within the `<Drilldown.Group />` is selected
+   */
+  onSelect?: (
+    event: React.SyntheticEvent,
+    args: {
+      value: DrilldownOptionValue[]
+      isSelected: boolean
+      selectedOption: OptionChild
+      drilldown: Drilldown
+    }
+  ) => void
+}
+
+type PropKeys = keyof DrilldownGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type DrilldownGroupProps = DrilldownGroupOwnProps &
+  WithStyleProps<OptionsTheme, null> &
+  OtherHTMLAttributes<DrilldownGroupOwnProps>
+
+const propTypes: PropValidators<PropKeys> = {
+  id: PropTypes.string.isRequired,
+  children: Children.oneOf([DrilldownOption, DrilldownSeparator]),
+  renderGroupTitle: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  withoutSeparators: PropTypes.bool,
+  disabled: PropTypes.bool,
+  role: PropTypes.string,
+  as: PropTypes.elementType,
+  elementRef: PropTypes.func,
+  selectableType: PropTypes.oneOf(['single', 'multiple']),
+  defaultSelected: PropTypes.array,
+  onSelect: PropTypes.func
+}
+
+const allowedProps: AllowedPropKeys = [
+  'id',
+  'children',
+  'renderGroupTitle',
+  'withoutSeparators',
+  'disabled',
+  'role',
+  'as',
+  'elementRef',
+  'selectableType',
+  'defaultSelected',
+  'onSelect'
+]
+
+export type { DrilldownGroupProps, GroupChildren }
+export { propTypes, allowedProps }

package/src/Drilldown/DrilldownLocator.ts

@@ -0,0 +1,101 @@
+/*
+ * 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.
+ */
+
+import { locator } from '@instructure/ui-test-locator'
+import { find, findAll, parseQueryArguments } from '@instructure/ui-test-utils'
+
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+import { OptionsItemLocator } from '@instructure/ui-options/es/Options/Item/OptionsItemLocator'
+// @ts-expect-error bypass no type definition found error
+import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocator'
+/* eslint-enable no-restricted-imports */
+
+import { Drilldown } from './index'
+
+const customMethods = {
+  // return the wrapper Option.Items
+  findAllOptions: async (...args: any[]) => {
+    return await findAll('[role^=menuitem]', ...args)
+  },
+  findAllOptionWrappers: async (...args: any[]) => {
+    return await OptionsItemLocator.findAll(...args)
+  },
+  findOptionWrapperByOptionId: async (
+    _element: any,
+    optionId: string,
+    ...args: any[]
+  ) => {
+    return OptionsItemLocator.find(`:has(#${optionId})`, ...args)
+  },
+  findSizableContainer: async (...args: any[]) => {
+    return await find('[class$=-drilldown__container]', ...args)
+  },
+  findSelectableContainer: async (...args: any[]) => {
+    return await find('[id^=Selectable_][id$=-list]', ...args)
+  },
+  findHeaderTitle: async (...args: any[]) => {
+    return await find('[id^=DrilldownHeader-Title]', ...args)
+  },
+  findHeaderActionOption: async (...args: any[]) => {
+    return await find('[id^=DrilldownHeader-Action]', ...args)
+  },
+  findHeaderBackOption: async (...args: any[]) => {
+    return await find('[id^=DrilldownHeader-Back]', ...args)
+  },
+  findHeaderSeparator: async (...args: any[]) => {
+    return await find('[id^=DrilldownHeader-Separator]', ...args)
+  },
+  findAllSeparators: async (...args: any[]) => {
+    return await findAll('[class$=-separator]', ...args)
+  },
+  findAllGroupLabels: async (...args: any[]) => {
+    return await findAll('[class$=-options__label]', ...args)
+  },
+  findLabelInfo: async (...args: any[]) => {
+    return await find('[class$=-drilldown__optionLabelInfo]', ...args)
+  },
+  findDescription: async (...args: any[]) => {
+    return await find('[class$=__description]', ...args)
+  },
+  findPopoverRoot: (...args: any[]) => {
+    return PopoverLocator.find(...args)
+  },
+  findPopoverTrigger: (...args: any[]) => {
+    return PopoverLocator.findTrigger(...args)
+  },
+  findPopoverContent: (...args: any[]) => {
+    const { element, selector, options } = parseQueryArguments(...args)
+    return PopoverLocator.findContent(element, selector, {
+      ...options,
+      customMethods: {
+        ...options.customMethods,
+        ...customMethods
+      }
+    })
+  }
+}
+
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+export const DrilldownLocator = locator(Drilldown.selector, customMethods)