@jetbrains/ring-ui-built 7.0.14 → 7.0.16

package/README.md

@@ -3,6 +3,13 @@
 
 [![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://github.com/JetBrains#jetbrains-on-github)
 
+- [Design guildelines](https://www.jetbrains.com/help/ring-ui/welcome.html)
+- [Usage examples in Storybook][docsite]
+- [GitHub repository](https://github.com/JetBrains/ring-ui)
+- [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)
+- [Builds in TeamCity][ci-project]
+- [npm package][npm-package]
+
 This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
 
 ## Try now
@@ -84,14 +91,6 @@ in a same build process, you can use the following configuration:
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md)
 
-## Links
-
-- [Living style guide][docsite]
-- [GitHub repository](https://github.com/JetBrains/ring-ui)
-- [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)
-- [Builds in TeamCity][ci-project]
-- [npm package][npm-package]
-
 [docsite]: https://jetbrains.github.io/ring-ui
 [ci-project]: https://teamcity.jetbrains.com/project.html?projectId=JetBrainsUi_RingUi&tab=projectOverview
 [ci-bt]: https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_RingUi_GeminiTests&tab=buildTypeStatusDiv

package/components/_helpers/button__classes.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-var styles = {"glyph":"glyph_rui_2d39","heightS":"heightS_rui_0b90","heightM":"heightM_rui_0b90","heightL":"heightL_rui_0b90","button":"button_rui_0b90","block":"block_rui_0b90","inline":"inline_rui_0b90","icon":"icon_rui_0b90","withNormalIcon":"withNormalIcon_rui_0b90","active":"active_rui_0b90","danger":"danger_rui_0b90","disabled":"disabled_rui_0b90","primaryBlock":"primaryBlock_rui_0b90","loader":"loader_rui_0b90","loaderBackground":"loaderBackground_rui_0b90","iconOnly":"iconOnly_rui_0b90","text-loading":"text-loading_rui_0b90","progress":"progress_rui_0b90","delayed":"delayed_rui_0b90","short":"short_rui_0b90","dropdownIcon":"dropdownIcon_rui_0b90","primary":"primary_rui_0b90"};
+var styles = {"glyph":"glyph_rui_2d39","heightS":"heightS_rui_0b90","heightM":"heightM_rui_0b90","heightL":"heightL_rui_0b90","button":"button_rui_0b90","block":"block_rui_0b90","inline":"inline_rui_0b90","icon":"icon_rui_0b90","withNormalIcon":"withNormalIcon_rui_0b90","active":"active_rui_0b90","disabled":"disabled_rui_0b90","danger":"danger_rui_0b90","flat":"flat_rui_0b90","whiteText":"whiteText_rui_0b90","primaryBlock":"primaryBlock_rui_0b90 flat_rui_0b90 whiteText_rui_0b90","success":"success_rui_0b90 flat_rui_0b90 whiteText_rui_0b90","error":"error_rui_0b90 flat_rui_0b90 whiteText_rui_0b90","secondary":"secondary_rui_0b90 flat_rui_0b90","ghost":"ghost_rui_0b90 flat_rui_0b90","iconOnly":"iconOnly_rui_0b90","loader":"loader_rui_0b90","loaderBackground":"loaderBackground_rui_0b90","progress":"progress_rui_0b90","delayed":"delayed_rui_0b90","short":"short_rui_0b90","dropdownIcon":"dropdownIcon_rui_0b90"};
 
 function getButtonClasses(_ref) {
   let {
@@ -9,6 +9,10 @@ function getButtonClasses(_ref) {
     disabled,
     loader,
     primary,
+    success,
+    error,
+    secondary,
+    ghost,
     short,
     inline,
     danger,
@@ -19,15 +23,18 @@ function getButtonClasses(_ref) {
   } = _ref;
   const iconOnly = icon && !children;
   const primaryBlock = primary && !inline;
-  const withNormalIcon = icon && !active && !danger && !primary && !disabled && (!inline || iconOnly);
+  const withNormalIcon = iconOnly && inline && !active && !danger && !primary && !disabled;
   return classNames(styles.button, className, styles["height".concat(height)], inline ? styles.inline : styles.block, {
     [styles.active]: active,
     [styles.danger]: danger,
     [styles.delayed]: delayed,
     [styles.withNormalIcon]: withNormalIcon,
     [styles.loader]: loader,
-    [styles.primary]: primary,
     [styles.primaryBlock]: primaryBlock,
+    [styles.success]: success,
+    [styles.error]: error,
+    [styles.secondary]: secondary,
+    [styles.ghost]: ghost,
     [styles.short]: short,
     [styles.disabled]: disabled,
     [styles.iconOnly]: iconOnly

package/components/_helpers/caption.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 
-var styles = {"button":"button_rui_0b90","active":"active_rui_0b90","primary":"primary_rui_0b90","buttonGroup":"buttonGroup_rui_bbca common_rui_bbca buttonGroup_rui_f4fc","common":"common_rui_bbca","split":"split_rui_bbca common_rui_bbca buttonGroup_rui_f4fc","caption":"caption_rui_bbca font_rui_8bff","help":"help_rui_bbca"};
+var styles = {"button":"button_rui_0b90","active":"active_rui_0b90","flat":"flat_rui_0b90","buttonGroup":"buttonGroup_rui_bbca common_rui_bbca buttonGroup_rui_f4fc","common":"common_rui_bbca","disabled":"disabled_rui_bbca","split":"split_rui_bbca common_rui_bbca buttonGroup_rui_f4fc","caption":"caption_rui_bbca font_rui_8bff","help":"help_rui_bbca"};
 
 class Caption extends PureComponent {
   render() {

package/components/_helpers/dialog__body-scroll-preventer.js

@@ -1,7 +1,7 @@
 import 'core-js/modules/web.dom-collections.iterator.js';
 import scrollbarWidth from 'scrollbar-width';
 
-var styles = {"header":"header_rui_1d72","scrollableWrapper":"scrollableWrapper_rui_1d72","container":"container_rui_381e","nativeDialog":"nativeDialog_rui_381e","innerContainer":"innerContainer_rui_381e","content":"content_rui_381e","panel":"panel_rui_381e","clickableOverlay":"clickableOverlay_rui_381e","closeIconOutside":"closeIconOutside_rui_381e","closeIconInside":"closeIconInside_rui_381e","closeButton":"closeButton_rui_381e","closeIcon":"closeIcon_rui_381e","closeButtonOutside":"closeButtonOutside_rui_381e","closeButtonInside":"closeButtonInside_rui_381e","documentWithoutScroll":"documentWithoutScroll_rui_381e","popupTarget":"popupTarget_rui_381e","dense":"dense_rui_381e"};
+var styles = {"header":"header_rui_1d72","scrollableWrapper":"scrollableWrapper_rui_1d72","container":"container_rui_381e","nativeDialog":"nativeDialog_rui_381e","innerContainer":"innerContainer_rui_381e","content":"content_rui_381e","panel":"panel_rui_381e","clickableOverlay":"clickableOverlay_rui_381e","closeIconOutside":"closeIconOutside_rui_381e","closeIcon":"closeIcon_rui_381e","closeButton":"closeButton_rui_381e","closeButtonOutside":"closeButtonOutside_rui_381e","closeButtonInside":"closeButtonInside_rui_381e","documentWithoutScroll":"documentWithoutScroll_rui_381e","popupTarget":"popupTarget_rui_381e","dense":"dense_rui_381e"};
 
 const isPrevented = new Set();
 let previousDocumentWidth = null;

package/components/auth/iframe-flow.js

@@ -42,6 +42,10 @@ import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader-screen/loader-screen.js';

package/components/auth-dialog/auth-dialog.js

@@ -28,6 +28,10 @@ import 'sniffr';
 import '../tab-trap/tab-trap.js';
 import '../global/dom.js';
 import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '@jetbrains/icons/chevron-down';

package/components/auth-dialog-service/auth-dialog-service.d.ts

@@ -1,5 +1,5 @@
 import AuthDialog, { AuthDialogProps } from '../auth-dialog/auth-dialog';
 export declare const reactRoot: import("react-dom/client").Root;
-type AuthDialogAttributes = JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
+type AuthDialogAttributes = React.JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
 export default function showAuthDialog(props?: AuthDialogAttributes): () => void;
 export {};

package/components/auth-dialog-service/auth-dialog-service.js

@@ -39,6 +39,10 @@ import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../heading/heading.js';

package/components/avatar/avatar.d.ts

@@ -36,4 +36,4 @@ export default class Avatar extends PureComponent<AvatarProps> {
     handleSuccess: () => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;
+export type AvatarAttrs = React.JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/button/button.d.ts

@@ -10,6 +10,10 @@ export interface ButtonBaseProps {
     delayed?: boolean | null | undefined;
     loader?: boolean | null | undefined;
     primary?: boolean | null | undefined;
+    success?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    secondary?: boolean | null | undefined;
+    ghost?: boolean | null | undefined;
     short?: boolean | null | undefined;
     /**
      * @deprecated Use inline instead
@@ -45,6 +49,6 @@ export declare class Button extends PureComponent<ButtonProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export { Size as IconSize };
-export type ContainerProps<T extends ButtonProps> = JSX.LibraryManagedAttributes<typeof Button, T>;
+export type ContainerProps<T extends ButtonProps> = React.JSX.LibraryManagedAttributes<typeof Button, T>;
 export type ButtonAttrs = ContainerProps<ButtonButtonProps> | ContainerProps<ButtonLinkProps>;
 export default Button;

package/components/button/button.js

@@ -16,7 +16,7 @@ import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 
-const _excluded = ["active", "danger", "delayed", "loader", "primary", "short", "text", "dropdown", "height", "icon", "iconSize", "iconClassName", "iconSuppressSizeWarning", "className", "children", "inline"];
+const _excluded = ["active", "danger", "delayed", "loader", "primary", "success", "error", "secondary", "ghost", "short", "text", "dropdown", "height", "icon", "iconSize", "iconClassName", "iconSuppressSizeWarning", "className", "children", "inline"];
 const warnText = deprecate(() => {}, 'Button: "text" prop is deprecated and will be removed in 8.0. Use inline instead.');
 /**
  * @name Button
@@ -39,6 +39,10 @@ class Button extends PureComponent {
         delayed,
         loader,
         primary,
+        success,
+        error,
+        secondary,
+        ghost,
         short,
         text,
         dropdown,
@@ -66,7 +70,6 @@ class Button extends PureComponent {
         className: classNames(styles.icon, iconClassName),
         glyph: icon,
         size: iconSize,
-        loading: loader && isInline,
         suppressSizeWarning: iconSuppressSizeWarning
       }), children, dropdown && jsx(Icon, {
         glyph: isInline ? chevron12pxDown : chevronDownIcon,
@@ -78,7 +81,7 @@ class Button extends PureComponent {
     }, props), {}, {
       className: classes,
       children: jsxs(Fragment, {
-        children: [loader && !isInline && jsx("div", {
+        children: [loader && jsx("div", {
           className: styles.loaderBackground
         }), content]
       })

package/components/button/button__classes.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from './button';
-export declare function getButtonClasses({ className, active, disabled, loader, primary, short, inline, danger, delayed, icon, height, children, }: ButtonProps): string;
+export declare function getButtonClasses({ className, active, disabled, loader, primary, success, error, secondary, ghost, short, inline, danger, delayed, icon, height, children, }: ButtonProps): string;

package/components/button-group/button-group.js

@@ -1,7 +1,7 @@
 import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.regexp.exec.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { PureComponent } from 'react';
+import { PureComponent, Children } from 'react';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { ControlLabel } from '../control-label/control-label.js';
@@ -25,7 +25,9 @@ class ButtonGroup extends PureComponent {
         help
       } = _this$props,
       restProps = _objectWithoutProperties(_this$props, _excluded);
-    const classes = classNames(split ? styles.split : styles.buttonGroup, className);
+    const classes = classNames(split ? styles.split : styles.buttonGroup, className, {
+      [styles.disabled]: Children.toArray(this.props.children).every(child => child != null && typeof child === 'object' && 'props' in child && child.props.disabled)
+    });
     return jsxs(Fragment, {
       children: [label && jsx(ControlLabel, {
         children: label

package/components/confirm/confirm.d.ts

@@ -33,4 +33,4 @@ export default class Confirm extends PureComponent<ConfirmProps> {
     onEscPress: () => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;
+export type ConfirmAttributes = React.JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;

package/components/confirm/confirm.js

@@ -28,6 +28,11 @@ import 'sniffr';
 import '../tab-trap/tab-trap.js';
 import '../global/dom.js';
 import '../popup/popup.target.js';
+import '../popup/popup.js';
+import 'core-js/modules/es.string.replace.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '@jetbrains/icons/chevron-down';
@@ -36,7 +41,6 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';

package/components/confirm-service/confirm-service.js

@@ -40,6 +40,10 @@ import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../panel/panel.js';

package/components/contenteditable/contenteditable.d.ts

@@ -20,7 +20,7 @@ declare class ContentEditableBase extends Component<ContentEditableBaseProps> {
     componentDidUpdate(prevProps: ContentEditableBaseProps): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
+type ContentEditableBaseAttrs = React.JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
 export type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
 declare const ContentEditable: ({ children, ...props }: ContentEditableProps) => import("react/jsx-runtime").JSX.Element;
 export default ContentEditable;

package/components/date-picker/date-picker.d.ts

@@ -47,4 +47,4 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
     getAnchorText: () => string;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type DatePickerAttrs = JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;
+export type DatePickerAttrs = React.JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;

package/components/dialog/dialog.d.ts

@@ -47,4 +47,4 @@ export default class Dialog extends PureComponent<DialogProps> {
     nativeDialog: React.RefObject<HTMLDialogElement>;
     render(): false | import("react/jsx-runtime").JSX.Element;
 }
-export type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;
+export type DialogAttrs = React.JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;

package/components/dialog/dialog.js

@@ -11,7 +11,8 @@ import joinDataTestAttributes from '../global/data-tests.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import TabTrap from '../tab-trap/tab-trap.js';
 import { Button } from '../button/button.js';
-import { PopupTarget } from '../popup/popup.target.js';
+import { PopupTarget, PopupTargetContext } from '../popup/popup.target.js';
+import { getPopupContainer } from '../popup/popup.js';
 import { p as preventerFactory, s as styles } from '../_helpers/dialog__body-scroll-preventer.js';
 import '../island/adaptive-island-hoc.js';
 import '../global/linear-function.js';
@@ -37,6 +38,9 @@ import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
 import 'scrollbar-width';
 
 const _excluded = ["show", "showCloseButton", "onOverlayClick", "onCloseAttempt", "onEscPress", "onCloseClick", "children", "className", "contentClassName", "trapFocus", "data-test", "closeButtonInside", "portalTarget", "label", "closeButtonTitle", "dense", "shortcutOptions", "native", "modal", "preventBodyScroll"];
@@ -208,19 +212,32 @@ class Dialog extends PureComponent {
         })
       });
     }
-    return show && /*#__PURE__*/createPortal(jsx(PopupTarget, {
-      id: this.uid,
-      className: styles.popupTarget,
-      children: target => jsxs(TabTrap, _objectSpread2(_objectSpread2({
-        trapDisabled: !trapFocus,
-        "data-test": joinDataTestAttributes('ring-dialog-container', dataTest),
-        ref: this.dialogRef,
-        className: classes,
-        role: "presentation"
-      }, restProps), {}, {
-        children: [content, target]
-      }))
-    }), portalTarget instanceof HTMLElement ? portalTarget : document.body);
+    return show && jsx(PopupTargetContext.Consumer, {
+      children: contextTarget => {
+        let targetElement = document.body;
+        if (portalTarget instanceof HTMLElement) {
+          targetElement = portalTarget;
+        } else if (contextTarget != null) {
+          const container = getPopupContainer(contextTarget);
+          if (container != null) {
+            targetElement = container;
+          }
+        }
+        return /*#__PURE__*/createPortal(jsx(PopupTarget, {
+          id: this.uid,
+          className: styles.popupTarget,
+          children: target => jsxs(TabTrap, _objectSpread2(_objectSpread2({
+            trapDisabled: !trapFocus,
+            "data-test": joinDataTestAttributes('ring-dialog-container', dataTest),
+            ref: this.dialogRef,
+            className: classes,
+            role: "presentation"
+          }, restProps), {}, {
+            children: [content, target]
+          }))
+        }), targetElement);
+      }
+    });
   }
 }
 _defineProperty(Dialog, "defaultProps", {

package/components/dropdown/dropdown.d.ts

@@ -13,13 +13,15 @@ export interface DropdownChildProps {
     onContextMenu?: () => void | undefined;
     dontCloseOnAnchorClick: boolean;
 }
+export type DropdownChildrenFunction = (props: Omit<PopupAttrs, 'children'>) => ReactNode;
+export type DropdownChildren = ReactElement<PopupAttrs> | DropdownChildrenFunction;
 export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /**
      * 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: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode);
-    children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode);
+    children: DropdownChildren;
     initShown: boolean;
     disabled?: boolean | null | undefined;
     clickMode: boolean;
@@ -66,5 +68,5 @@ export default class Dropdown extends Component<DropdownProps, DropdownState> {
     _clearTimer(): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type DropdownAttrs = JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
+export type DropdownAttrs = React.JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
 export { Anchor };

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

@@ -1,19 +1,21 @@
-import { ReactElement, ReactNodeArray, HTMLAttributes, SyntheticEvent, Ref } from 'react';
+import { ReactElement, HTMLAttributes, SyntheticEvent, Ref, ReactNode } from 'react';
 import { SelectHandlerParams } from '../list/list';
-import { AnchorProps, DropdownAttrs } from '../dropdown/dropdown';
+import { AnchorProps, DropdownAttrs, DropdownChildrenFunction } 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);
+    anchor: ReactElement | ReactNode[] | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
     activeListItemId?: string | null | undefined;
     listId?: string | undefined;
 }
+type OnSelectHandler<T> = ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
 export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
-    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
+    anchor: ReactElement | ReactNode[] | 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;
+    onSelect?: OnSelectHandler<T>;
     menuProps?: PopupMenuAttrs<T> | null | undefined;
+    children?: DropdownChildrenFunction;
 }
 declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
     ref?: Ref<PopupMenu>;

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

@@ -65,7 +65,7 @@ import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 
 const _excluded = ["anchor", "pinned", "active", "activeListItemId", "listId"],
-  _excluded2 = ["id", "anchor", "ariaLabel", "data", "onSelect", "menuProps"],
+  _excluded2 = ["id", "anchor", "ariaLabel", "data", "onSelect", "menuProps", "children"],
   _excluded3 = ["pinned", "active"];
 const defaultAriaLabel = 'Dropdown menu';
 function DropdownAnchorWrapper(_ref) {
@@ -110,25 +110,45 @@ function DropdownAnchorWrapper(_ref) {
     children: anchor
   }));
 }
-const DropdownMenu = /*#__PURE__*/forwardRef(function DropdownMenu(_ref2, forwardedRef) {
+function renderDropdownMenuChildren(_ref2) {
+  let {
+    children,
+    popupMenuProps
+  } = _ref2;
+  if (!children) {
+    return jsx(PopupMenu, _objectSpread2({}, popupMenuProps));
+  }
+  return popupProps => children(_objectSpread2(_objectSpread2({}, popupProps), popupMenuProps));
+}
+const DropdownMenu = /*#__PURE__*/forwardRef(function DropdownMenu(_ref3, forwardedRef) {
   let {
       id,
       anchor,
       ariaLabel,
       data,
       onSelect,
-      menuProps
-    } = _ref2,
-    restDropdownProps = _objectWithoutProperties(_ref2, _excluded2);
+      menuProps,
+      children
+    } = _ref3,
+    restDropdownProps = _objectWithoutProperties(_ref3, _excluded2);
   const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
+  const popupMenuProps = useMemo(() => _objectSpread2({
+    ref: forwardedRef,
+    id: listId,
+    ariaLabel: ariaLabel || defaultAriaLabel,
+    closeOnSelect: true,
+    activateFirstItem: true,
+    data,
+    onSelect
+  }, menuProps), [ariaLabel, data, forwardedRef, listId, menuProps, onSelect]);
   return jsx(ActiveItemContext.Provider, {
     children: jsx(Dropdown, _objectSpread2(_objectSpread2({
-      anchor: _ref3 => {
+      anchor: _ref4 => {
         let {
             pinned,
             active
-          } = _ref3,
-          restAnchorProps = _objectWithoutProperties(_ref3, _excluded3);
+          } = _ref4,
+          restAnchorProps = _objectWithoutProperties(_ref4, _excluded3);
         return jsx(ActiveItemContext.ValueContext.Consumer, {
           children: activeItemId => jsx(DropdownAnchorWrapper, _objectSpread2({
             anchor: anchor,
@@ -140,15 +160,10 @@ const DropdownMenu = /*#__PURE__*/forwardRef(function DropdownMenu(_ref2, forwar
         });
       }
     }, restDropdownProps), {}, {
-      children: jsx(PopupMenu, _objectSpread2({
-        ref: forwardedRef,
-        id: listId,
-        ariaLabel: ariaLabel || defaultAriaLabel,
-        closeOnSelect: true,
-        activateFirstItem: true,
-        data: data,
-        onSelect: onSelect
-      }, menuProps))
+      children: renderDropdownMenuChildren({
+        children,
+        popupMenuProps
+      })
     }))
   });
 });

package/components/global/focus-sensor-hoc.d.ts

@@ -14,6 +14,6 @@ export interface FocusSensorAddProps<T extends HTMLElement> {
     onFocusRestore: () => void;
 }
 type RestProps<P, T extends HTMLElement> = Omit<P, keyof FocusSensorAddProps<T>>;
-export type FocusSensorProps<P extends FocusSensorAddProps<T>, T extends HTMLElement, C extends ComponentType<P>> = RestProps<JSX.LibraryManagedAttributes<C, P>, T> & FocusSensorOuterProps<T>;
+export type FocusSensorProps<P extends FocusSensorAddProps<T>, T extends HTMLElement, C extends ComponentType<P>> = RestProps<React.JSX.LibraryManagedAttributes<C, P>, T> & FocusSensorOuterProps<T>;
 export default function focusSensorHOC<T extends HTMLElement, P extends FocusSensorAddProps<T>, C extends ComponentType<P>>(ComposedComponent: C): ComponentType<FocusSensorProps<P, T, typeof ComposedComponent>>;
 export {};

package/components/header/header.d.ts

@@ -19,7 +19,7 @@ declare class Header extends Component<HeaderProps> {
     };
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
+export type HeaderAttrs = React.JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
 export default Header;
 export { default as Logo } from './logo';
 export { default as Tray } from './tray';

package/components/header/profile.d.ts

@@ -13,7 +13,7 @@ export interface ProfileTranslations {
     logout?: string | null | undefined;
     certificateMismatch?: string | null | undefined;
 }
-export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'> {
     closeOnSelect: boolean;
     renderPopupItems: (items: ListDataItem[]) => readonly ListDataItem[];
     translations?: ProfileTranslations | null | undefined;
@@ -46,4 +46,4 @@ export default class Profile extends PureComponent<ProfileProps> {
     static Size: typeof Size;
     render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 }
-export type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;
+export type ProfileAttrs = React.JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;

package/components/icon/icon.d.ts

@@ -28,5 +28,5 @@ export default class Icon extends PureComponent<IconProps> {
     } | undefined;
     render(): import("react/jsx-runtime").JSX.Element | null;
 }
-export type IconAttrs = JSX.LibraryManagedAttributes<typeof Icon, IconProps>;
+export type IconAttrs = React.JSX.LibraryManagedAttributes<typeof Icon, IconProps>;
 export { Color, Size };

package/components/input/input.d.ts

@@ -70,7 +70,7 @@ export declare class Input extends PureComponent<InputProps> {
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type ContainerProps<P extends InputProps> = JSX.LibraryManagedAttributes<typeof Input, P>;
+export type ContainerProps<P extends InputProps> = React.JSX.LibraryManagedAttributes<typeof Input, P>;
 export type InputSpecificAttrs = ContainerProps<InputSpecificProps>;
 export type TextAreaSpecificAttrs = ContainerProps<TextAreaSpecificProps>;
 export type InputAttrs = InputSpecificAttrs | TextAreaSpecificAttrs;

package/components/list/list.d.ts

@@ -166,4 +166,4 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     /** @override */
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type ListAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof List, ListProps<T>>;
+export type ListAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof List, ListProps<T>>;

package/components/loader-inline/loader-inline.d.ts

@@ -8,5 +8,5 @@ export interface LoaderInlineProps extends HTMLAttributes<HTMLDivElement> {
 declare class LoaderInline extends PureComponent<LoaderInlineProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
+export type LoaderInlineAtrrs = React.JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
 export default LoaderInline;

package/components/login-dialog/login-dialog.d.ts

@@ -33,4 +33,4 @@ export default class LoginDialog extends Component<LoginDialogProps> {
     onMessage: (event: MessageEvent) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;
+export type LoginDialogAttrs = React.JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;

package/components/login-dialog/login-dialog.js

@@ -39,6 +39,10 @@ import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader/loader.js';

package/components/login-dialog/service.js

@@ -39,6 +39,10 @@ import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader-screen/loader-screen.js';

package/components/message/message.d.ts

@@ -51,5 +51,5 @@ export default class Message extends Component<MessageProps> {
     getTailOffset(): number;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
+export type MessageAttrs = React.JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
 export {};

package/components/pager/pager.d.ts

@@ -76,5 +76,5 @@ export default class Pager extends PureComponent<PagerProps> {
     getPagerContent(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
+export type PagerAttrs = React.JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
 export {};

package/components/popup/popup.d.ts

@@ -145,5 +145,5 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     };
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type PopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, PopupProps>;
-export type BasePopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, BasePopupProps>;
+export type PopupAttrs = React.JSX.LibraryManagedAttributes<typeof Popup, PopupProps>;
+export type BasePopupAttrs = React.JSX.LibraryManagedAttributes<typeof Popup, BasePopupProps>;