@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/dialog-ng/dialog-ng__template.js

@@ -1,70 +0,0 @@
-export default `<div
-  ng-show="dialog.active"
-  ng-class="[!dialog.inSidebar && dialog.dialogStyles.container]"
-  ng-click="dialog.handleClick($event)"
-  ng-attr-data-portaltarget="{{!dialog.inSidebar  ? 'dialog-ng-popup-container' : null}}"
-  ng-attr-data-test="ring-dialog-container"
->
-  <div ng-class="[dialog.dialogStyles.innerContainer]">
-    <div data-anchor="dialog-container"
-      ng-attr-data-in-sidebar="{{dialog.inSidebar  ? 'true' : 'false'}}"
-      ng-attr-data-test="{{dialog.active ? 'ring-dialog' : null}}"
-      ng-class="[
-        dialog.styles.dialogContainer,
-        dialog.cssClass,
-        dialog.wideDialog && dialog.styles.wide,
-        dialog.autoWidth && dialog.styles.autoWidth,
-        dialog.inSidebar && dialog.styles.inSidebar,
-        !dialog.inSidebar && dialog.dialogStyles.content,
-        !dialog.inSidebar && dialog.islandStyles.island
-      ]"
-    >
-      <div ng-class="[dialog.islandStyles.header, dialog.styles.header]"
-        data-anchor="dialog-header"
-        ng-show="dialog.title">
-        <span ng-class="dialog.islandStyles.title">{{ dialog.title }}</span>
-      </div>
-
-      <div ng-class="[dialog.styles.scrollableWrapper, dialog.islandStyles.scrollableWrapper, dialog.scrollableWrapperClassName]">
-        <div ng-class="[dialog.styles.content, dialog.islandStyles.content]">
-          <form name="dialog.dialogForm" class="ring-form ring-js-shortcuts"
-            novalidate>
-            <rg-dialog-content></rg-dialog-content>
-
-            <div class="ring-form__group" ng-show="dialog.error">
-              <div ng-class="dialog.styles.error" ng-bind-html="dialog.error"></div>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      <div ng-class="dialog.styles.footer"
-        ng-if="dialog.description.length || dialog.buttons.length">
-        <div ng-class="dialog.styles.footerDescription"
-          ng-if="dialog.description && dialog.description.length">
-          <div ng-repeat="line in dialog.description">{{ line }}</div>
-        </div>
-
-        <div ng-class="dialog.styles.footerItems">
-          <rg-button
-            ng-repeat="button in dialog.buttons"
-            ng-class="[dialog.styles.footerItem , button.cssClasses]"
-            mode="{{button.default ? 'primary' : ''}}"
-            text="button.text"
-            ng-disabled="(button.default && dialog.dialogForm.$invalid) || button.disabled"
-            ng-if="!button.hidden"
-            data-test="dialog-footer-button"
-
-            rg-promised-click="dialog.action(button)"
-            promised-mode="loader"
-          >{{ button.label }}
-          </rg-button>
-        </div>
-      </div>
-
-      <div data-anchor="dialog-custom-footer-container"></div>
-
-      <div tabindex="-1" ng-show="false" data-anchor="focus-trap-fallback"></div>
-    </div>
-  </div>
-</div>`;

package/components/docked-panel-ng/docked-panel-ng.css

@@ -1,28 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.dockedPanel {
-  margin-top: calc(unit * 4);
-  padding-left: 0;
-
-  border-top: none;
-}
-
-.fixed.fixed {
-  position: fixed;
-  z-index: 2;
-  top: auto;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  width: 100%;
-  margin-left: 0;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  padding-left: calc(unit * 4);
-
-  border-top: 1px solid var(--ring-popup-border-color);
-  background-color: var(--ring-content-background-color);
-}

package/components/docked-panel-ng/docked-panel-ng.js

@@ -1,169 +0,0 @@
-import angular from 'angular';
-
-import scheduleRAF from '../global/schedule-raf';
-import {getDocumentScrollTop, getWindowHeight} from '../global/dom';
-
-import styles from './docked-panel-ng.css';
-
-const scheduleAction = scheduleRAF();
-
-/**
- * @name Docked Panel Ng
- */
-
-const angularModule = angular.module('Ring.docked-panel', []);
-
-angularModule.directive('rgDockedPanel', function rgDockedPanelDirective($parse) {
-  return {
-    link: function link(scope, element, attrs) {
-      const TOGGLE_GAP = 8;
-      const CSS_CLASS_NAME = styles.dockedPanel;
-      const DOCKED_CSS_CLASS_NAME = styles.fixed;
-      const dockedPanelClass = attrs.rgDockedPanelClass || '';
-      const config = attrs.rgDockedPanelConfig ? $parse(attrs.rgDockedPanelConfig)(scope) : null;
-      let initialPanelPos;
-      let isDocked;
-
-      /**
-       * Container
-       * @type {Element} panel
-       */
-      const panel = element[0];
-
-      panel.classList.add(CSS_CLASS_NAME);
-
-      function getYPosition(node) {
-        const clientRect = node.getBoundingClientRect();
-        return clientRect.top + clientRect.height + getScrollContainerScrollTop();
-      }
-
-      /**
-       * Save panel initial rects and left margin and container-node for further use
-       */
-      function saveInitialPos() {
-        initialPanelPos = getYPosition(panel);
-      }
-
-      function getInitialUndockedPosition() {
-        return (config || {}).container ? getYPosition(config.container) : initialPanelPos;
-      }
-
-      function getScrollContainerScrollTop() {
-        if (config && config.scrollContainer) {
-          return config.scrollContainer.scrollTop;
-        }
-        return getDocumentScrollTop();
-      }
-
-      function getScrollContainerHeight() {
-        if (config && config.scrollContainer) {
-          return config.scrollContainer.getBoundingClientRect().height;
-        }
-        return getWindowHeight();
-      }
-
-      function onBeforeDock() {
-        if (config) {
-          if (config.beforeDock) {
-            scope.$eval(config.beforeDock(element));
-          }
-          if (config.className) {
-            panel.classList.add(config.className);
-          }
-        }
-      }
-
-      function onBeforeUndock() {
-        if (config) {
-          if (config.beforeUndock) {
-            scope.$eval(config.beforeUndock(element));
-          }
-          if (config.className) {
-            panel.classList.remove(config.className);
-          }
-        }
-      }
-
-      /**
-       * Docks the panel to the bottom of the page
-       */
-      function dock() {
-        onBeforeDock();
-
-        panel.classList.add(DOCKED_CSS_CLASS_NAME);
-        if (dockedPanelClass) {
-          panel.classList.add(dockedPanelClass);
-        }
-        isDocked = true;
-      }
-
-      function undock() {
-        onBeforeUndock();
-
-        panel.classList.remove(DOCKED_CSS_CLASS_NAME);
-        if (dockedPanelClass) {
-          panel.classList.remove(dockedPanelClass);
-        }
-        isDocked = false;
-      }
-
-      function onResize() {
-        if (config) {
-          if (config && config.onResize) {
-            scope.$eval(config.onResize(element, isDocked));
-          }
-        }
-      }
-
-      /**
-       * Check panel position
-       */
-      function checkPanelPosition() {
-        const currentPanelRect = panel.getBoundingClientRect();
-
-        if (currentPanelRect.top + currentPanelRect.height > getScrollContainerHeight() &&
-          !isDocked) {
-          dock();
-        } else if (
-          isDocked &&
-          currentPanelRect.top + currentPanelRect.height +
-            getScrollContainerScrollTop() >= getInitialUndockedPosition() + TOGGLE_GAP
-        ) {
-          undock();
-        }
-      }
-
-      function init() {
-        const _onResize = () => {
-          checkPanelPosition();
-          onResize();
-        };
-        const scrollListener = () => scheduleAction(checkPanelPosition);
-
-        /**
-         * Wait until all content on the page is loaded
-         */
-        scope.$applyAsync(() => {
-          const scrollContainer = (config || {}).scrollContainer || window;
-
-          scrollContainer.addEventListener('scroll', scrollListener);
-          window.addEventListener('resize', _onResize);
-
-          scope.$on('$destroy', () => {
-            scrollContainer.removeEventListener('scroll', scrollListener);
-            window.removeEventListener('resize', _onResize);
-          });
-
-          scheduleAction(() => {
-            saveInitialPos();
-            checkPanelPosition();
-          });
-        });
-      }
-
-      init();
-    }
-  };
-});
-
-export default angularModule.name;

package/components/docked-panel-ng/docked-panel-ng.stories.js

@@ -1,39 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import PanelNG from '../panel-ng/panel-ng';
-import ButtonNG from '../button-ng/button-ng';
-
-import DockedPanelNG from './docked-panel-ng';
-
-export default {
-  title: 'Legacy Angular/Docked Panel Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Creates a panel docked at the bottom of the page.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG, DockedPanelNG, PanelNG]);
-
-  return `
-      <div>
-        <textarea aria-label="Description" placeholder="Add description" rows="70" cols="100"></textarea>
-      </div>
-      <div rg-panel rg-docked-panel rg-docked-panel-class="customCssClass">
-        <rg-button mode="primary">Save</rg-button>
-        <rg-button >Cancel</rg-button>
-      </div>
-      <br/>
-      <div>
-        <textarea aria-label="Description" placeholder="Add steps" rows="10" cols="50"></textarea>
-      </div>
-    </div>
-    `;
-};
-
-basic.storyName = 'Docked Panel Ng';

package/components/dropdown/anchor.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ButtonAttrs } from '../button/button';
-declare const _default: React.MemoExoticComponent<{
-    ({ children, className, ...restProps }: ButtonAttrs): React.JSX.Element;
-    propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-    };
-}>;
-export default _default;

package/components/dropdown/anchor.js

@@ -1,16 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import chevronDown from '@jetbrains/icons/chevron-10px';
-import classNames from 'classnames';
-import Icon from '../icon/icon';
-import Button from '../button/button';
-import styles from './dropdown.css';
-const Anchor = ({ children, className, ...restProps }) => (<Button data-test-ring-dropdown-anchor text className={classNames(styles.anchor, className)} {...restProps}>
-    {children}
-    <Icon glyph={chevronDown} className={styles.chevron}/>
-  </Button>);
-Anchor.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-};
-export default memo(Anchor);

package/components/dropdown/dropdown.css

@@ -1,18 +0,0 @@
-@import "../global/variables.css";
-
-.dropdown {
-  display: inline-block;
-}
-
-.anchor.anchor {
-  margin: 0 -3px;
-  padding: 0 3px;
-
-  font: inherit;
-}
-
-.chevron {
-  margin-left: 2px;
-
-  line-height: normal;
-}

package/components/dropdown/dropdown.d.ts

@@ -1,87 +0,0 @@
-import React, { Component, HTMLAttributes, ReactNode, ReactElement } from 'react';
-import PropTypes from 'prop-types';
-import { PopupAttrs } from '../popup/popup';
-import Anchor from './anchor';
-export interface AnchorProps {
-    active: boolean;
-    pinned: boolean;
-}
-export interface DropdownChildProps {
-    hidden: boolean;
-    onCloseAttempt: () => void;
-    onMouseDown?: () => void | undefined;
-    onContextMenu?: () => void | undefined;
-    dontCloseOnAnchorClick: boolean;
-}
-export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
-    anchor: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode);
-    children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode);
-    initShown: boolean;
-    disabled?: boolean | null | undefined;
-    clickMode: boolean;
-    hoverMode: boolean;
-    hoverShowTimeOut: number;
-    hoverHideTimeOut: number;
-    onShow: (() => void);
-    onHide: (() => void);
-    activeClassName?: string | null | undefined;
-    'data-test'?: string | null | undefined;
-}
-interface DropdownState {
-    show: boolean;
-    pinned: boolean;
-}
-/**
- * @name Dropdown
- */
-export default class Dropdown extends Component<DropdownProps, DropdownState> {
-    static propTypes: {
-        /**
-         * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
-         * React element should render some interactive HTML element like `button` or `a`
-         */
-        anchor: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>>;
-        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactElementLike | ((...args: any[]) => any) | null | undefined>>>;
-        initShown: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        activeClassName: PropTypes.Requireable<string>;
-        clickMode: PropTypes.Requireable<boolean>;
-        hoverMode: PropTypes.Requireable<boolean>;
-        hoverShowTimeOut: PropTypes.Requireable<number>;
-        hoverHideTimeOut: PropTypes.Requireable<number>;
-        disabled: PropTypes.Requireable<boolean>;
-        onShow: PropTypes.Requireable<(...args: any[]) => any>;
-        onHide: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-    };
-    static defaultProps: {
-        initShown: boolean;
-        clickMode: boolean;
-        hoverMode: boolean;
-        hoverShowTimeOut: number;
-        hoverHideTimeOut: number;
-        disabled: boolean;
-        onShow: () => void;
-        onHide: () => void;
-        onMouseEnter: () => void;
-        onMouseLeave: () => void;
-    };
-    state: {
-        show: boolean;
-        pinned: boolean;
-    };
-    onClick: () => void;
-    onChildCloseAttempt: () => void;
-    hoverTimer?: number | null;
-    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void;
-    handlePopupInteraction: () => void;
-    toggle(show?: boolean): void;
-    _toggle(show: boolean, pinned?: boolean): void;
-    _clearTimer(): void;
-    render(): React.JSX.Element;
-}
-export type DropdownAttrs = JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
-export { Anchor };

package/components/dropdown/dropdown.js

@@ -1,159 +0,0 @@
-import React, { cloneElement, Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import dataTests from '../global/data-tests';
-import { isArray } from '../global/typescript-utils';
-import Anchor from './anchor';
-import styles from './dropdown.css';
-/**
- * @name Dropdown
- */
-export default class Dropdown extends Component {
-    static propTypes = {
-        /**
-         * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
-         * React element should render some interactive HTML element like `button` or `a`
-         */
-        anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-        children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
-        initShown: PropTypes.bool,
-        className: PropTypes.string,
-        activeClassName: PropTypes.string,
-        clickMode: PropTypes.bool,
-        hoverMode: PropTypes.bool,
-        hoverShowTimeOut: PropTypes.number,
-        hoverHideTimeOut: PropTypes.number,
-        disabled: PropTypes.bool,
-        onShow: PropTypes.func,
-        onHide: PropTypes.func,
-        onMouseEnter: PropTypes.func,
-        onMouseLeave: PropTypes.func,
-        'data-test': PropTypes.string
-    };
-    static defaultProps = {
-        initShown: false,
-        clickMode: true,
-        hoverMode: false,
-        hoverShowTimeOut: 300,
-        hoverHideTimeOut: 600,
-        disabled: false,
-        onShow: () => { },
-        onHide: () => { },
-        onMouseEnter: () => { },
-        onMouseLeave: () => { }
-    };
-    state = {
-        show: this.props.initShown,
-        pinned: false
-    };
-    onClick = () => {
-        if (this.props.disabled) {
-            return;
-        }
-        const { show, pinned } = this.state;
-        let nextPinned = pinned;
-        if (this.props.hoverMode) {
-            if (!pinned) {
-                nextPinned = true;
-                if (show) {
-                    this.setState({ pinned: true });
-                    return;
-                }
-            }
-            else {
-                nextPinned = false;
-            }
-        }
-        this._toggle(!show, nextPinned);
-    };
-    onChildCloseAttempt = () => {
-        let nextPinned = this.state.pinned;
-        if (this.props.hoverMode) {
-            nextPinned = false;
-        }
-        this._toggle(false, nextPinned);
-    };
-    hoverTimer;
-    onMouseEnter = (event) => {
-        if (this.props.disabled) {
-            return;
-        }
-        this._clearTimer();
-        this.props.onMouseEnter?.(event);
-        this.hoverTimer = window.setTimeout(() => {
-            if (!this.state.show) {
-                this._toggle(true);
-            }
-        }, this.props.hoverShowTimeOut);
-    };
-    onMouseLeave = (event) => {
-        if (this.props.disabled) {
-            return;
-        }
-        this.props.onMouseLeave?.(event);
-        if (this.state.pinned) {
-            return;
-        }
-        this._clearTimer();
-        this.hoverTimer = window.setTimeout(() => {
-            if (this.state.show) {
-                this._toggle(false);
-            }
-        }, this.props.hoverHideTimeOut);
-    };
-    handlePopupInteraction = () => {
-        this.setState(({ pinned }) => (pinned ? null : { pinned: true }));
-    };
-    toggle(show = !this.state.show) {
-        this._toggle(show);
-    }
-    _toggle(show, pinned = this.state.pinned) {
-        this.setState({ show, pinned }, () => (show ? this.props.onShow() : this.props.onHide()));
-    }
-    _clearTimer() {
-        if (this.hoverTimer) {
-            clearTimeout(this.hoverTimer);
-            this.hoverTimer = null;
-        }
-    }
-    render() {
-        const { show, pinned } = this.state;
-        const { initShown, onShow, onHide, hoverShowTimeOut, hoverHideTimeOut, children, anchor, className, activeClassName, hoverMode, clickMode, 'data-test': dataTest, disabled, ...restProps } = this.props;
-        const classes = classNames(styles.dropdown, className, {
-            [activeClassName ?? '']: activeClassName != null && show
-        });
-        let anchorElement;
-        const active = hoverMode ? pinned : show;
-        switch (typeof anchor) {
-            case 'string':
-                anchorElement = (<Anchor active={active}>{anchor}</Anchor>);
-                break;
-            case 'function':
-                anchorElement = anchor({ active: show, pinned });
-                break;
-            default:
-                if (isArray(anchor) || typeof anchor.type === 'string') {
-                    anchorElement = anchor;
-                }
-                else {
-                    anchorElement = cloneElement(anchor, { active });
-                }
-        }
-        const childProps = {
-            hidden: !show,
-            onCloseAttempt: this.onChildCloseAttempt,
-            onMouseDown: hoverMode ? this.handlePopupInteraction : undefined,
-            onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
-            dontCloseOnAnchorClick: true
-        };
-        return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onClick={clickMode ? this.onClick : undefined} 
-        // anchorElement should be a `button` or an `a`
-        role="presentation" onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
-        {anchorElement}
-        {typeof children === 'function'
-                ? children(childProps)
-                : cloneElement(children, childProps)}
-      </div>);
-    }
-}
-export { Anchor };

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,26 +0,0 @@
-import React, { ReactElement, ReactNodeArray, HTMLAttributes, SyntheticEvent } from 'react';
-import { SelectHandlerParams } from '../list/list';
-import { AnchorProps, DropdownAttrs } from '../dropdown/dropdown';
-import PopupMenu, { PopupMenuAttrs } from '../popup-menu/popup-menu';
-import { ListDataItem } from '../list/consts';
-export interface DropdownAnchorWrapperProps extends AnchorProps {
-    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
-    activeListItemId?: string | null | undefined;
-    listId?: string | undefined;
-}
-export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
-    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
-    data?: readonly ListDataItem<T>[] | undefined;
-    ariaLabel?: string | null | undefined;
-    onSelect?: ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
-    menuProps?: PopupMenuAttrs<T> | null | undefined;
-}
-declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
-    ref?: React.Ref<PopupMenu<unknown>> | undefined;
-}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
-    ListProps: {
-        Type: typeof import("../list/consts").Type;
-        Dimension: typeof import("../list/consts").Dimension;
-    };
-};
-export default _default;

package/components/dropdown-menu/dropdown-menu.js

@@ -1,56 +0,0 @@
-import React, { useMemo, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import List, { ActiveItemContext } from '../list/list';
-import Dropdown from '../dropdown/dropdown';
-import PopupMenu from '../popup-menu/popup-menu';
-import getUID from '../global/get-uid';
-import Anchor from '../dropdown/anchor';
-import { isArray } from '../global/typescript-utils';
-const { children, ...dropdownPropTypes } = Dropdown.propTypes || {};
-const { id: idPropType, data: dataPropType, ariaLabel: ariaLabelPropType, onSelect: onSelectPropType } = PopupMenu.propTypes || {};
-const defaultAriaLabel = 'Dropdown menu';
-function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listId, ...restProps }) {
-    const anchorAriaProps = useMemo(() => ({
-        ...(listId ? { 'aria-haspopup': true } : {}),
-        ...(activeListItemId ? { 'aria-activedescendant': activeListItemId, 'aria-owns': listId } : {}),
-        ...(active ? { 'aria-expanded': true } : {})
-    }), [active, activeListItemId, listId]);
-    const anchorProps = useMemo(() => ({ active, pinned, ...restProps, ...anchorAriaProps }), [pinned, active, restProps, anchorAriaProps]);
-    const anchorComponentProps = useMemo(() => ({ ...anchorProps, pinned: `${anchorProps.pinned}` }), [anchorProps]);
-    if (typeof anchor === 'string') {
-        return (<Anchor {...anchorComponentProps}>{anchor}</Anchor>);
-    }
-    if (typeof anchor === 'function') {
-        return anchor(({ active, pinned, ...restProps }), anchorAriaProps);
-    }
-    if (!isArray(anchor)) {
-        return cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
-    }
-    return (<div {...anchorAriaProps}>{anchor}</div>);
-}
-DropdownAnchorWrapper.propTypes = {
-    anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
-    pinned: PropTypes.bool,
-    active: PropTypes.bool,
-    activeListItemId: PropTypes.string,
-    listId: PropTypes.string
-};
-const DropdownMenu = React.forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, ...restDropdownProps }, forwardedRef) {
-    const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
-    return (<ActiveItemContext.Provider>
-      <Dropdown anchor={({ pinned, active, ...restAnchorProps }) => (<ActiveItemContext.ValueContext.Consumer>
-            {activeItemId => (<DropdownAnchorWrapper anchor={anchor} pinned={pinned} active={active} activeListItemId={activeItemId} listId={listId} {...restAnchorProps}/>)}
-          </ActiveItemContext.ValueContext.Consumer>)} {...restDropdownProps}>
-        <PopupMenu ref={forwardedRef} id={listId} ariaLabel={ariaLabel || defaultAriaLabel} closeOnSelect activateFirstItem data={data} onSelect={onSelect} {...menuProps}/>
-      </Dropdown>
-    </ActiveItemContext.Provider>);
-});
-DropdownMenu.propTypes = {
-    id: idPropType,
-    data: dataPropType,
-    ariaLabel: ariaLabelPropType,
-    onSelect: onSelectPropType,
-    menuProps: PropTypes.object,
-    ...dropdownPropTypes
-};
-export default Object.assign(DropdownMenu, { ListProps: List.ListProps });