@skbkontur/react-ui 1.12.1 → 2.0.0-beta.4

package/components/Dropdown/Dropdown.d.ts

@@ -1,120 +1,84 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import MenuHeader from '../MenuHeader/MenuHeader';
-import MenuItem from '../MenuItem/MenuItem';
-import MenuSeparator from '../MenuSeparator/MenuSeparator';
-import { ButtonUse, ButtonSize } from '../Button';
-export interface DropdownProps {
-    /**
-     * Подпись на кнопке.
-     */
-    caption: React.ReactNode;
-    /**
-     * Иконка слева от текста кнопки
-     */
-    icon?: React.ReactElement<any>;
-    width?: React.CSSProperties['width'];
-    /** @ignore */
-    _renderButton?: (params: any) => JSX.Element;
-    /**
-     * Отключает использование портала
-     */
-    disablePortal?: boolean;
-    /**
-     * Визуально отключает Dropdown
-     */
-    disabled?: boolean;
-    /**
-     * Визуально показать наличие ошибки.
-     */
-    error?: boolean;
-    /**
-     * Визуально показать наличие предупреждения.
-     */
-    warning?: boolean;
-    maxMenuHeight?: number;
-    menuAlign?: 'left' | 'right';
-    menuWidth?: number | string;
-    size?: ButtonSize;
-    /**
-     * Смотри Button.
-     */
-    use?: ButtonUse;
-    /**
-     * Вызывается при закрытии меню.
-     */
-    onClose?: () => void;
-    /**
-     * Вызывается при открытии меню.
-     */
-    onOpen?: () => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
-}
-/**
- * Выпадающее меню.
- */
-export default class Dropdown extends React.Component<DropdownProps> {
-    static __KONTUR_REACT_UI__: string;
-    static Header: typeof MenuHeader;
-    static MenuItem: typeof MenuItem;
-    static Separator: typeof MenuSeparator;
-    static propTypes: {
-        /**
-         * Подпись на кнопке.
-         */
-        caption: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * Отключает использование портала
-         */
-        disablePortal: PropTypes.Requireable<boolean>;
-        /**
-         * Визуально отключает Dropdown
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Визуально показать наличие ошибки.
-         */
-        error: PropTypes.Requireable<boolean>;
-        /**
-         * Иконка слева от текста кнопки
-         */
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        maxMenuHeight: PropTypes.Requireable<number>;
-        menuAlign: PropTypes.Requireable<string>;
-        menuWidth: PropTypes.Requireable<string | number>;
-        size: PropTypes.Requireable<string>;
-        /**
-         * Смотри Button.
-         */
-        use: PropTypes.Requireable<any>;
-        /**
-         * Визуально показать наличие предупреждения.
-         */
-        warning: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
-        /**
-         * Вызывается при закрытии меню.
-         */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Вызывается при открытии меню.
-         */
-        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    private _select;
-    render(): JSX.Element;
-    /**
-     * @public
-     */
-    open(): void;
-    /**
-     * @public
-     */
-    close(): void;
-    private _refSelect;
-}
+import type { AriaAttributes, HTMLAttributes, JSX } from 'react';
+import React from 'react';
+import { MenuItem } from '../MenuItem/index.js';
+import type { ButtonUse } from '../Button/index.js';
+import type { CommonProps } from '../../internal/CommonWrapper/types.js';
+import type { TGetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';
+import type { SizeProp } from '../../lib/types/props.js';
+export interface DropdownProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, CommonProps {
+    /** Текст кнопки-меню. */
+    caption: React.ReactNode;
+    /** Добавляет иконку слева от текста кнопки. */
+    icon?: React.ReactElement;
+    /** Ширина кнопки-меню. Если `menuWidth` не задан, такая же минимальная ширина применяется к раскрывающемуся меню. */
+    width?: React.CSSProperties['width'];
+    /** @ignore */
+    _renderButton?: (params: any) => JSX.Element;
+    /** Отключает использование портала. */
+    disablePortal?: boolean;
+    /** Блокирует компонент. */
+    disabled?: boolean;
+    /** Показывает состояние ошибки. */
+    error?: boolean;
+    /** Показывает состояние предупреждения. */
+    warning?: boolean;
+    /** Ограничивает максимальную высоту раскрывающегося меню. */
+    maxMenuHeight?: number;
+    /** Фиксирует положение раскрывающегося меню относительно кнопки-меню. */
+    menuPos?: 'top' | 'bottom';
+    /** Выравнивает раскрывающееся меню относительно кнопки-меню. */
+    menuAlign?: 'left' | 'right';
+    /** Ширина раскрывающегося меню. */
+    menuWidth?: number | string;
+    /** Размер кнопки-меню. */
+    size?: SizeProp;
+    /** Визуальный стиль кнопки-меню. */
+    use?: ButtonUse;
+    /** @ignore */
+    corners?: React.CSSProperties;
+    /** Вызывается при закрытии раскрывающегося меню. */
+    onClose?: () => void;
+    /** Вызывается при открытии раскрывающегося меню. */
+    onOpen?: () => void;
+    /** Вызывается при наведении курсора (событие `onmouseenter`). Разницу с `onMouseOver` смотрите в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave). */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Вызывается при уходе курсора с элемента (событие `onmouseleave`). */
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Вызывается при движении курсора над элементом (событие `onmouseover`). */
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+export declare const DropdownDataTids: {
+    readonly root: "Dropdown__root";
+};
+/**
+ * Кнопка-меню `Dropdown` открывает раскрывающееся меню с командами, объединенными по смыслу.
+ *
+ * Используйте кнопку-меню:
+ * * когда не хватает места для нескольких кнопок.
+ * * когда названия действий очень длинные.
+ * * когда действия редко используются или объединены по смыслу.
+ *
+ * Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом `Select`.
+ */
+export declare class Dropdown extends React.Component<DropdownProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static Header: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLDivElement, import("../MenuHeader/MenuHeader.js").MenuHeaderProps> & Record<never, never>;
+    static MenuItem: typeof MenuItem;
+    static Separator: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLDivElement, CommonProps> & Record<never, never>;
+    private _select;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private theme;
+    render(): React.JSX.Element;
+    renderMain: () => React.JSX.Element;
+    /**
+     * @public
+     */
+    open(): void;
+    /**
+     * @public
+     */
+    close(): void;
+    private _refSelect;
+}

package/components/Dropdown/Dropdown.js

@@ -1,118 +1,142 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var PropTypes = tslib_1.__importStar(require("prop-types"));
-var filterProps_1 = tslib_1.__importDefault(require("../filterProps"));
-var MenuHeader_1 = tslib_1.__importDefault(require("../MenuHeader/MenuHeader"));
-var MenuItem_1 = tslib_1.__importDefault(require("../MenuItem/MenuItem"));
-var MenuSeparator_1 = tslib_1.__importDefault(require("../MenuSeparator/MenuSeparator"));
-var Select_1 = tslib_1.__importDefault(require("../Select"));
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { filterProps } from '../../lib/filterProps.js';
+import { MenuHeader } from '../MenuHeader/index.js';
+import { MenuItem } from '../MenuItem/index.js';
+import { MenuSeparator } from '../MenuSeparator/index.js';
+import { Select } from '../Select/index.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getDropdownTheme } from './getDropdownTheme.js';
 var PASS_PROPS = {
-  _renderButton: true,
-  error: true,
-  disabled: true,
-  disablePortal: true,
-  menuAlign: true,
-  menuWidth: true,
-  maxMenuHeight: true,
-  use: true,
-  size: true,
-  warning: true,
-  width: true,
-  onOpen: true,
-  onClose: true,
-  onMouseEnter: true,
-  onMouseLeave: true,
-  onMouseOver: true,
-  diadocLink: true,
-  diadocLinkIcon: true };
-
-/**
- * Выпадающее меню.
+    _renderButton: true,
+    error: true,
+    disabled: true,
+    disablePortal: true,
+    menuAlign: true,
+    menuWidth: true,
+    maxMenuHeight: true,
+    use: true,
+    size: true,
+    warning: true,
+    width: true,
+    onOpen: true,
+    onClose: true,
+    onMouseEnter: true,
+    onMouseLeave: true,
+    onMouseOver: true,
+    menuPos: true,
+    corners: true,
+    id: true,
+    'aria-describedby': true,
+    'aria-label': true,
+};
+export var DropdownDataTids = {
+    root: 'Dropdown__root',
+};
+/**
+ * Кнопка-меню `Dropdown` открывает раскрывающееся меню с командами, объединенными по смыслу.
+ *
+ * Используйте кнопку-меню:
+ * * когда не хватает места для нескольких кнопок.
+ * * когда названия действий очень длинные.
+ * * когда действия редко используются или объединены по смыслу.
+ *
+ * Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом `Select`.
  */
-var Dropdown = /** @class */function (_super) {
-  tslib_1.__extends(Dropdown, _super);
-  function Dropdown() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this._refSelect = function (element) {
-      _this._select = element;
-    };
-    return _this;
-  }
-  Dropdown.prototype.render = function () {
-    var items = React.Children.map(this.props.children, function (item) {return item;});
-    return React.createElement(Select_1["default"], tslib_1.__assign({ ref: this._refSelect }, filterProps_1["default"](this.props, PASS_PROPS), { value: this.props.caption, items: items, _icon: this.props.icon, renderValue: renderValue }));
-  };
-  /**
-   * @public
-   */
-  Dropdown.prototype.open = function () {
-    if (this._select) {
-      this._select.open();
+var Dropdown = /** @class */ (function (_super) {
+    __extends(Dropdown, _super);
+    function Dropdown() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderMain = function () {
+            var _a = _this.props, caption = _a.caption, icon = _a.icon, rest = __rest(_a, ["caption", "icon"]);
+            var items = React.Children.map(_this.props.children, function (item) { return item; }) || [];
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, rest),
+                React.createElement(Select, __assign({ "data-tid": DropdownDataTids.root, ref: _this._refSelect }, filterProps(rest, PASS_PROPS), { value: caption, items: items, _icon: icon, renderValue: renderValue }))));
+        };
+        _this._refSelect = function (element) {
+            _this._select = element;
+        };
+        return _this;
     }
-  };
-  /**
-   * @public
-   */
-  Dropdown.prototype.close = function () {
-    if (this._select) {
-      this._select.close();
-    }
-  };
-  Dropdown.__KONTUR_REACT_UI__ = 'Dropdown';
-  Dropdown.Header = MenuHeader_1["default"];
-  Dropdown.MenuItem = MenuItem_1["default"];
-  Dropdown.Separator = MenuSeparator_1["default"];
-  Dropdown.propTypes = {
-    /**
-     * Подпись на кнопке.
-     */
-    caption: PropTypes.node.isRequired,
-    /**
-     * Отключает использование портала
-     */
-    disablePortal: PropTypes.bool,
-    /**
-     * Визуально отключает Dropdown
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Визуально показать наличие ошибки.
-     */
-    error: PropTypes.bool,
-    /**
-     * Иконка слева от текста кнопки
-     */
-    icon: PropTypes.node,
-    maxMenuHeight: PropTypes.number,
-    menuAlign: PropTypes.oneOf(['left', 'right']),
-    menuWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    /**
-     * Смотри Button.
-     */
-    use: PropTypes.any,
-    /**
-     * Визуально показать наличие предупреждения.
-     */
-    warning: PropTypes.bool,
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /**
-     * Вызывается при закрытии меню.
+    Dropdown.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = getDropdownTheme(theme);
+            return React.createElement(ThemeContext.Provider, { value: _this.theme }, _this.renderMain());
+        }));
+    };
+    /**
+     * @public
      */
-    onClose: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    onMouseOver: PropTypes.func,
-    /**
-     * Вызывается при открытии меню.
+    Dropdown.prototype.open = function () {
+        if (this._select) {
+            this._select.open();
+        }
+    };
+    /**
+     * @public
      */
-    onOpen: PropTypes.func };
-
-  return Dropdown;
-}(React.Component);
-exports["default"] = Dropdown;
+    Dropdown.prototype.close = function () {
+        if (this._select) {
+            this._select.close();
+        }
+    };
+    Dropdown.__KONTUR_REACT_UI__ = 'Dropdown';
+    Dropdown.displayName = 'Dropdown';
+    Dropdown.Header = MenuHeader;
+    Dropdown.MenuItem = MenuItem;
+    Dropdown.Separator = MenuSeparator;
+    Dropdown = __decorate([
+        rootNode
+    ], Dropdown);
+    return Dropdown;
+}(React.Component));
+export { Dropdown };
 function renderValue(value) {
-  return value;
-}
+    return value;
+}
+//# sourceMappingURL=Dropdown.js.map

package/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["Dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport { filterProps } from '../../lib/filterProps.js';\nimport { MenuHeader } from '../MenuHeader/index.js';\nimport { MenuItem } from '../MenuItem/index.js';\nimport { MenuSeparator } from '../MenuSeparator/index.js';\nimport { Select } from '../Select/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { ButtonUse } from '../Button/index.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { SizeProp } from '../../lib/types/props.js';\n\nimport { getDropdownTheme } from './getDropdownTheme.js';\n\nconst PASS_PROPS = {\n  _renderButton: true,\n  error: true,\n  disabled: true,\n  disablePortal: true,\n  menuAlign: true,\n  menuWidth: true,\n  maxMenuHeight: true,\n  use: true,\n  size: true,\n  warning: true,\n  width: true,\n  onOpen: true,\n  onClose: true,\n  onMouseEnter: true,\n  onMouseLeave: true,\n  onMouseOver: true,\n  menuPos: true,\n  corners: true,\n  id: true,\n  'aria-describedby': true,\n  'aria-label': true,\n};\n\nexport interface DropdownProps\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    CommonProps {\n  /** Текст кнопки-меню. */\n  caption: React.ReactNode;\n\n  /** Добавляет иконку слева от текста кнопки. */\n  icon?: React.ReactElement;\n\n  /** Ширина кнопки-меню. Если `menuWidth` не задан, такая же минимальная ширина применяется к раскрывающемуся меню. */\n  width?: React.CSSProperties['width'];\n\n  /** @ignore */\n  _renderButton?: (params: any) => JSX.Element;\n\n  /** Отключает использование портала. */\n  disablePortal?: boolean;\n\n  /** Блокирует компонент. */\n  disabled?: boolean;\n\n  /** Показывает состояние ошибки. */\n  error?: boolean;\n\n  /** Показывает состояние предупреждения. */\n  warning?: boolean;\n\n  /** Ограничивает максимальную высоту раскрывающегося меню. */\n  maxMenuHeight?: number;\n\n  /** Фиксирует положение раскрывающегося меню относительно кнопки-меню. */\n  menuPos?: 'top' | 'bottom';\n\n  /** Выравнивает раскрывающееся меню относительно кнопки-меню. */\n  menuAlign?: 'left' | 'right';\n\n  /** Ширина раскрывающегося меню. */\n  menuWidth?: number | string;\n\n  /** Размер кнопки-меню. */\n  size?: SizeProp;\n\n  /** Визуальный стиль кнопки-меню. */\n  use?: ButtonUse;\n\n  /** @ignore */\n  corners?: React.CSSProperties;\n\n  /** Вызывается при закрытии раскрывающегося меню. */\n  onClose?: () => void;\n\n  /** Вызывается при открытии раскрывающегося меню. */\n  onOpen?: () => void;\n\n  /** Вызывается при наведении курсора (событие `onmouseenter`). Разницу с `onMouseOver` смотрите в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave). */\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** Вызывается при уходе курсора с элемента (событие `onmouseleave`). */\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** Вызывается при движении курсора над элементом (событие `onmouseover`). */\n  onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\nexport const DropdownDataTids = {\n  root: 'Dropdown__root',\n} as const;\n\n/**\n * Кнопка-меню `Dropdown` открывает раскрывающееся меню с командами, объединенными по смыслу.\n *\n * Используйте кнопку-меню:\n * * когда не хватает места для нескольких кнопок.\n * * когда названия действий очень длинные.\n * * когда действия редко используются или объединены по смыслу.\n *\n * Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом `Select`.\n */\n@rootNode\nexport class Dropdown extends React.Component<DropdownProps> {\n  public static __KONTUR_REACT_UI__ = 'Dropdown';\n  public static displayName = 'Dropdown';\n\n  public static Header = MenuHeader;\n  public static MenuItem = MenuItem;\n  public static Separator = MenuSeparator;\n\n  private _select: Nullable<DropdownSelectType>;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getDropdownTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain = (): React.JSX.Element => {\n    const { caption, icon, ...rest } = this.props;\n    const items = React.Children.map(this.props.children, (item) => item) || [];\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...rest}>\n        <Select<React.ReactNode, React.ReactNode>\n          data-tid={DropdownDataTids.root}\n          ref={this._refSelect}\n          {...filterProps(rest, PASS_PROPS)}\n          value={caption}\n          items={items}\n          _icon={icon}\n          renderValue={renderValue}\n        />\n      </CommonWrapper>\n    );\n  };\n\n  /**\n   * @public\n   */\n  public open(): void {\n    if (this._select) {\n      this._select.open();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public close(): void {\n    if (this._select) {\n      this._select.close();\n    }\n  }\n\n  private _refSelect = (element: DropdownSelectType): void => {\n    this._select = element;\n  };\n}\n\nfunction renderValue(value: any) {\n  return value;\n}\n"]}

package/components/Dropdown/getDropdownTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getDropdownTheme: (theme: Theme) => Theme;

package/components/Dropdown/getDropdownTheme.js

@@ -0,0 +1,33 @@
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+export var getDropdownTheme = function (theme) {
+    return ThemeFactory.create({
+        selectDefaultBg: theme.dropdownDefaultBg,
+        selectMenuOffsetY: theme.dropdownMenuOffsetY,
+        selectBorderColorHover: theme.dropdownMenuHoverBorderColor,
+        selectBorderColorTransition: theme.dropdownMenuBorderColorTransition,
+        selectBorderWidth: theme.dropdownBorderWidth,
+        selectOutlineWidth: theme.dropdownOutlineWidth,
+        selectLineHeightSmall: theme.dropdownLineHeightSmall,
+        selectFontSizeSmall: theme.dropdownFontSizeSmall,
+        selectPaddingXSmall: theme.dropdownPaddingXSmall,
+        selectPaddingYSmall: theme.dropdownPaddingYSmall,
+        selectIconSizeSmall: theme.dropdownIconSizeSmall,
+        selectBorderRadiusSmall: theme.dropdownButtonBorderRadiusSmall,
+        selectLineHeightMedium: theme.dropdownLineHeightMedium,
+        selectFontSizeMedium: theme.dropdownFontSizeMedium,
+        selectPaddingXMedium: theme.dropdownPaddingXMedium,
+        selectPaddingYMedium: theme.dropdownPaddingYMedium,
+        selectIconSizeMedium: theme.dropdownIconSizeMedium,
+        selectBorderRadiusMedium: theme.dropdownButtonBorderRadiusMedium,
+        selectLineHeightLarge: theme.dropdownLineHeightLarge,
+        selectFontSizeLarge: theme.dropdownFontSizeLarge,
+        selectPaddingXLarge: theme.dropdownPaddingXLarge,
+        selectPaddingYLarge: theme.dropdownPaddingYLarge,
+        selectIconSizeLarge: theme.dropdownIconSizeLarge,
+        selectBorderRadiusLarge: theme.dropdownButtonBorderRadiusLarge,
+        selectBgDisabled: theme.dropdownBgDisabled,
+        selectBorderColorDisabled: theme.dropdownBorderColorDisabled,
+        selectTextColorDisabled: theme.dropdownTextColorDisabled,
+    }, theme);
+};
+//# sourceMappingURL=getDropdownTheme.js.map

package/components/Dropdown/getDropdownTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDropdownTheme.js","sourceRoot":"","sources":["../../../components/Dropdown/getDropdownTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,KAAY;IAC3C,OAAO,YAAY,CAAC,MAAM,CACxB;QACE,eAAe,EAAE,KAAK,CAAC,iBAAiB;QACxC,iBAAiB,EAAE,KAAK,CAAC,mBAAmB;QAC5C,sBAAsB,EAAE,KAAK,CAAC,4BAA4B;QAC1D,2BAA2B,EAAE,KAAK,CAAC,iCAAiC;QAEpE,iBAAiB,EAAE,KAAK,CAAC,mBAAmB;QAC5C,kBAAkB,EAAE,KAAK,CAAC,oBAAoB;QAE9C,qBAAqB,EAAE,KAAK,CAAC,uBAAuB;QACpD,mBAAmB,EAAE,KAAK,CAAC,qBAAqB;QAChD,mBAAmB,EAAE,KAAK,CAAC,qBAAqB;QAChD,mBAAmB,EAAE,KAAK,CAAC,qBAAqB;QAChD,mBAAmB,EAAE,KAAK,CAAC,qBAAqB;QAChD,uBAAuB,EAAE,KAAK,CAAC,+BAA+B;QAE9D,sBAAsB,EAAE,KAAK,CAAC,wBAAwB;QACtD,oBAAoB,EAAE,KAAK,CAAC,sBAAsB;QAClD,oBAAoB,EAAE,KAAK,CAAC,sBAAsB;QAClD,oBAAoB,EAAE,KAAK,CAAC,sBAAsB;QAClD,oBAAoB,EAAE,KAAK,CAAC,sBAAsB;QAClD,wBAAwB,EAAE,KAAK,CAAC,gCAAgC;QAEhE,qBAAqB,EAAE,KAAK,CAAC,uBAAuB;QACpD,mBAAmB,EAAE,KAAK,CAAC,qBAAqB;QAChD,mBAAmB,EAAE,KAAK,CAAC,qBAAqB;QAChD,mBAAmB,EAAE,KAAK,CAAC,qBAAqB;QAChD,mBAAmB,EAAE,KAAK,CAAC,qBAAqB;QAChD,uBAAuB,EAAE,KAAK,CAAC,+BAA+B;QAE9D,gBAAgB,EAAE,KAAK,CAAC,kBAAkB;QAC1C,yBAAyB,EAAE,KAAK,CAAC,2BAA2B;QAC5D,uBAAuB,EAAE,KAAK,CAAC,yBAAyB;KACzD,EACD,KAAK,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getDropdownTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      selectDefaultBg: theme.dropdownDefaultBg,\n      selectMenuOffsetY: theme.dropdownMenuOffsetY,\n      selectBorderColorHover: theme.dropdownMenuHoverBorderColor,\n      selectBorderColorTransition: theme.dropdownMenuBorderColorTransition,\n\n      selectBorderWidth: theme.dropdownBorderWidth,\n      selectOutlineWidth: theme.dropdownOutlineWidth,\n\n      selectLineHeightSmall: theme.dropdownLineHeightSmall,\n      selectFontSizeSmall: theme.dropdownFontSizeSmall,\n      selectPaddingXSmall: theme.dropdownPaddingXSmall,\n      selectPaddingYSmall: theme.dropdownPaddingYSmall,\n      selectIconSizeSmall: theme.dropdownIconSizeSmall,\n      selectBorderRadiusSmall: theme.dropdownButtonBorderRadiusSmall,\n\n      selectLineHeightMedium: theme.dropdownLineHeightMedium,\n      selectFontSizeMedium: theme.dropdownFontSizeMedium,\n      selectPaddingXMedium: theme.dropdownPaddingXMedium,\n      selectPaddingYMedium: theme.dropdownPaddingYMedium,\n      selectIconSizeMedium: theme.dropdownIconSizeMedium,\n      selectBorderRadiusMedium: theme.dropdownButtonBorderRadiusMedium,\n\n      selectLineHeightLarge: theme.dropdownLineHeightLarge,\n      selectFontSizeLarge: theme.dropdownFontSizeLarge,\n      selectPaddingXLarge: theme.dropdownPaddingXLarge,\n      selectPaddingYLarge: theme.dropdownPaddingYLarge,\n      selectIconSizeLarge: theme.dropdownIconSizeLarge,\n      selectBorderRadiusLarge: theme.dropdownButtonBorderRadiusLarge,\n\n      selectBgDisabled: theme.dropdownBgDisabled,\n      selectBorderColorDisabled: theme.dropdownBorderColorDisabled,\n      selectTextColorDisabled: theme.dropdownTextColorDisabled,\n    },\n    theme,\n  );\n};\n"]}

package/components/Dropdown/index.d.ts

@@ -1 +1 @@
-export { default, DropdownProps } from './Dropdown';
+export * from './Dropdown.js';

package/components/Dropdown/index.js

@@ -1,4 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var Dropdown_1 = require("./Dropdown");
-exports["default"] = Dropdown_1["default"];
+export * from './Dropdown.js';
+//# sourceMappingURL=index.js.map

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";;AAAA,uCAAoD;AAA3C,6BAAA,OAAO,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/Dropdown/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './Dropdown.js';\n"]}