@skbkontur/react-ui 0.0.0-1e20264c71 → 0.0.0-1fb0cccdc2

package/components/Dropdown/Dropdown/Dropdown.js

@@ -0,0 +1,180 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["caption", "icon"];
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { filterProps } from "../../../lib/filterProps";
+import { MenuHeader } from "../../MenuHeader";
+import { MenuItem } from "../../MenuItem";
+import { MenuSeparator } from "../../MenuSeparator";
+import { Select } from "../../Select";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { rootNode } from "../../../lib/rootNode";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getDropdownTheme } from "../getDropdownTheme";
+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,
+  menuPos: true,
+  'aria-describedby': true
+};
+export var DropdownDataTids = {
+  root: 'Dropdown__root'
+};
+/**
+ * Выпадающее меню.
+ *
+ */
+
+export var Dropdown = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Dropdown, _React$Component);
+
+  function Dropdown() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+    _this.renderMain = function (_ref) {
+      var caption = _ref.caption,
+          icon = _ref.icon,
+          props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+      var items = React.Children.map(_this.props.children, function (item) {
+        return item;
+      }) || [];
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this.setRootNode
+      }, _this.props), /*#__PURE__*/React.createElement(Select, _extends({
+        "data-tid": DropdownDataTids.root,
+        ref: _this._refSelect
+      }, filterProps(props, PASS_PROPS), {
+        value: caption,
+        items: items,
+        _icon: icon,
+        renderValue: renderValue,
+        size: _this.props.size,
+        "aria-label": _this.props['aria-label']
+      })));
+    };
+
+    _this._refSelect = function (element) {
+      _this._select = element;
+    };
+
+    return _this;
+  }
+
+  var _proto = Dropdown.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = getDropdownTheme(theme);
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: _this2.theme
+      }, _this2.renderMain(_this2.props));
+    });
+  };
+  /**
+  * @public
+  */
+
+
+  _proto.open = function open() {
+    if (this._select) {
+      this._select.open();
+    }
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto.close = function close() {
+    if (this._select) {
+      this._select.close();
+    }
+  };
+
+  return Dropdown;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Dropdown', _class2.displayName = 'Dropdown', _class2.Header = MenuHeader, _class2.MenuItem = MenuItem, _class2.Separator = MenuSeparator, _class2.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]),
+
+  /**
+  * Вызывается при закрытии меню.
+  */
+  onClose: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  onMouseOver: PropTypes.func,
+
+  /**
+  * Вызывается при открытии меню.
+  */
+  onOpen: PropTypes.func
+}, _temp)) || _class;
+
+function renderValue(value) {
+  return value;
+}

package/components/Dropdown/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Dropdown.tsx"],"names":["React","PropTypes","filterProps","MenuHeader","MenuItem","MenuSeparator","Select","CommonWrapper","rootNode","ThemeContext","getDropdownTheme","PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","menuPos","DropdownDataTids","root","Dropdown","renderMain","caption","icon","props","items","Children","map","children","item","setRootNode","_refSelect","renderValue","element","_select","render","theme","open","close","Component","__KONTUR_REACT_UI__","displayName","Header","Separator","propTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func","value"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterProps } from '../../lib/filterProps';\nimport { MenuHeader } from '../MenuHeader';\nimport { MenuItem } from '../MenuItem';\nimport { MenuSeparator } from '../MenuSeparator';\nimport { Select } from '../Select';\nimport { Nullable } from '../../typings/utility-types';\nimport { ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DropdownContainerProps } from '../../internal/DropdownContainer';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { getDropdownTheme } from './getDropdownTheme';\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  'aria-describedby': true,\n};\n\nexport interface DropdownProps\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    CommonProps,\n    Pick<DropdownContainerProps, 'menuPos'> {\n  /**\n   * Подпись на кнопке.\n   */\n  caption: React.ReactNode;\n  /**\n   * Иконка слева от текста кнопки\n   */\n  icon?: React.ReactElement<any>;\n  width?: React.CSSProperties['width'];\n\n  /** @ignore */\n  _renderButton?: (params: any) => JSX.Element;\n\n  /**\n   * Отключает использование портала\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Визуально отключает Dropdown\n   */\n  disabled?: boolean;\n\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  maxMenuHeight?: number;\n  menuAlign?: 'left' | 'right';\n  menuWidth?: number | string;\n  size?: SizeProp;\n\n  /**\n   * Смотри Button.\n   */\n  use?: ButtonUse;\n\n  /**\n   * Вызывается при закрытии меню.\n   */\n  onClose?: () => void;\n  /**\n   * Вызывается при открытии меню.\n   */\n  onOpen?: () => void;\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\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 * Выпадающее меню.\n *\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  public static propTypes = {\n    /**\n     * Подпись на кнопке.\n     */\n    caption: PropTypes.node.isRequired,\n\n    /**\n     * Отключает использование портала\n     */\n    disablePortal: PropTypes.bool,\n\n    /**\n     * Визуально отключает Dropdown\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Визуально показать наличие ошибки.\n     */\n    error: PropTypes.bool,\n\n    /**\n     * Иконка слева от текста кнопки\n     */\n    icon: PropTypes.node,\n\n    maxMenuHeight: PropTypes.number,\n\n    menuAlign: PropTypes.oneOf(['left', 'right']),\n\n    menuWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n    /**\n     * Смотри Button.\n     */\n    use: PropTypes.any,\n\n    /**\n     * Визуально показать наличие предупреждения.\n     */\n    warning: PropTypes.bool,\n\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    /**\n     * Вызывается при закрытии меню.\n     */\n    onClose: PropTypes.func,\n\n    onMouseEnter: PropTypes.func,\n\n    onMouseLeave: PropTypes.func,\n\n    onMouseOver: PropTypes.func,\n\n    /**\n     * Вызывается при открытии меню.\n     */\n    onOpen: PropTypes.func,\n  };\n\n  private _select: Nullable<DropdownSelectType>;\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getDropdownTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain(this.props)}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain = ({ caption, icon, ...props }: CommonWrapperRestProps<DropdownProps>) => {\n    const items = React.Children.map(this.props.children, (item) => item) || [];\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Select<React.ReactNode, React.ReactNode>\n          data-tid={DropdownDataTids.root}\n          ref={this._refSelect}\n          {...filterProps(props, PASS_PROPS)}\n          value={caption}\n          items={items}\n          _icon={icon}\n          renderValue={renderValue}\n          size={this.props.size}\n          aria-label={this.props['aria-label']}\n        />\n      </CommonWrapper>\n    );\n  };\n\n  /**\n   * @public\n   */\n  public open() {\n    if (this._select) {\n      this._select.open();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public close() {\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/Dropdown/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Dropdown/Dropdown.js",
+  "module": "Dropdown",
+  "types": "../Dropdown.d.ts",
+  "sideEffects": false
+}

package/components/Dropdown/Dropdown.d.ts

@@ -1,10 +1,13 @@
-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 {
+import React, { AriaAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { MenuHeader } from '../MenuHeader';
+import { MenuItem } from '../MenuItem';
+import { MenuSeparator } from '../MenuSeparator';
+import { ButtonUse } from '../Button';
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+import { DropdownContainerProps } from '../../internal/DropdownContainer';
+import { SizeProp } from '../../lib/types/props';
+export interface DropdownProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps, Pick<DropdownContainerProps, 'menuPos'> {
     /**
      * Подпись на кнопке.
      */
@@ -25,17 +28,17 @@ export interface DropdownProps {
      */
     disabled?: boolean;
     /**
-     * Визуально показать наличие ошибки.
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     /**
-     * Визуально показать наличие предупреждения.
+     * Состояние валидации при предупреждении.
      */
     warning?: boolean;
     maxMenuHeight?: number;
     menuAlign?: 'left' | 'right';
     menuWidth?: number | string;
-    size?: ButtonSize;
+    size?: SizeProp;
     /**
      * Смотри Button.
      */
@@ -52,10 +55,16 @@ export interface DropdownProps {
     onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
     onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
 }
+export declare const DropdownDataTids: {
+    readonly root: "Dropdown__root";
+};
 /**
  * Выпадающее меню.
+ *
  */
-export default class Dropdown extends React.Component<DropdownProps> {
+export declare class Dropdown extends React.Component<DropdownProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static Header: typeof MenuHeader;
     static MenuItem: typeof MenuItem;
     static Separator: typeof MenuSeparator;
@@ -82,7 +91,7 @@ export default class Dropdown extends React.Component<DropdownProps> {
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         maxMenuHeight: PropTypes.Requireable<number>;
         menuAlign: PropTypes.Requireable<string>;
-        menuWidth: PropTypes.Requireable<React.ReactText>;
+        menuWidth: PropTypes.Requireable<string | number>;
         size: PropTypes.Requireable<string>;
         /**
          * Смотри Button.
@@ -92,7 +101,7 @@ export default class Dropdown extends React.Component<DropdownProps> {
          * Визуально показать наличие предупреждения.
          */
         warning: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<number>;
+        width: PropTypes.Requireable<string | number>;
         /**
          * Вызывается при закрытии меню.
          */
@@ -106,7 +115,10 @@ export default class Dropdown extends React.Component<DropdownProps> {
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
     };
     private _select;
+    private setRootNode;
+    private theme;
     render(): JSX.Element;
+    renderMain: ({ caption, icon, ...props }: CommonWrapperRestProps<DropdownProps>) => JSX.Element;
     /**
      * @public
      */

package/components/Dropdown/Dropdown.md

@@ -0,0 +1,44 @@
+```jsx harmony
+import { Dropdown, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+<Dropdown caption="Click">
+  <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
+  <MenuSeparator />
+  <MenuHeader>Here goes the header</MenuHeader>
+  <MenuItem onClick={() => alert('Pow')} comment="With comment.">
+    Pow
+  </MenuItem>
+</Dropdown>;
+```
+
+У Dropdown есть 3 стандартных размера.
+
+```jsx harmony
+import { Gapped, MenuItem, MenuSeparator, MenuHeader } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <Dropdown caption="Маленький" size={'small'}>
+    <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
+    <MenuSeparator />
+    <MenuHeader>Here goes the header</MenuHeader>
+    <MenuItem onClick={() => alert('Pow')} comment="With comment.">
+      Pow
+    </MenuItem>
+  </Dropdown>
+  <Dropdown caption="Средний" size={'medium'}>
+    <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
+    <MenuSeparator />
+    <MenuHeader>Here goes the header</MenuHeader>
+    <MenuItem onClick={() => alert('Pow')} comment="With comment.">
+      Pow
+    </MenuItem>
+  </Dropdown>
+  <Dropdown caption="Большой" size={'large'}>
+    <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
+    <MenuSeparator />
+    <MenuHeader>Here goes the header</MenuHeader>
+    <MenuItem onClick={() => alert('Pow')} comment="With comment.">
+      Pow
+    </MenuItem>
+  </Dropdown>
+</Gapped>
+```

package/components/Dropdown/getDropdownTheme/getDropdownTheme.js

@@ -0,0 +1,32 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getDropdownTheme = function getDropdownTheme(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);
+};

package/components/Dropdown/getDropdownTheme/getDropdownTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getDropdownTheme.ts"],"names":["ThemeFactory","getDropdownTheme","theme","create","selectDefaultBg","dropdownDefaultBg","selectMenuOffsetY","dropdownMenuOffsetY","selectBorderColorHover","dropdownMenuHoverBorderColor","selectBorderColorTransition","dropdownMenuBorderColorTransition","selectBorderWidth","dropdownBorderWidth","selectOutlineWidth","dropdownOutlineWidth","selectLineHeightSmall","dropdownLineHeightSmall","selectFontSizeSmall","dropdownFontSizeSmall","selectPaddingXSmall","dropdownPaddingXSmall","selectPaddingYSmall","dropdownPaddingYSmall","selectIconSizeSmall","dropdownIconSizeSmall","selectBorderRadiusSmall","dropdownButtonBorderRadiusSmall","selectLineHeightMedium","dropdownLineHeightMedium","selectFontSizeMedium","dropdownFontSizeMedium","selectPaddingXMedium","dropdownPaddingXMedium","selectPaddingYMedium","dropdownPaddingYMedium","selectIconSizeMedium","dropdownIconSizeMedium","selectBorderRadiusMedium","dropdownButtonBorderRadiusMedium","selectLineHeightLarge","dropdownLineHeightLarge","selectFontSizeLarge","dropdownFontSizeLarge","selectPaddingXLarge","dropdownPaddingXLarge","selectPaddingYLarge","dropdownPaddingYLarge","selectIconSizeLarge","dropdownIconSizeLarge","selectBorderRadiusLarge","dropdownButtonBorderRadiusLarge","selectBgDisabled","dropdownBgDisabled","selectBorderColorDisabled","dropdownBorderColorDisabled","selectTextColorDisabled","dropdownTextColorDisabled"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,eAAe,EAAEF,KAAK,CAACG,iBADzB;AAEEC,IAAAA,iBAAiB,EAAEJ,KAAK,CAACK,mBAF3B;AAGEC,IAAAA,sBAAsB,EAAEN,KAAK,CAACO,4BAHhC;AAIEC,IAAAA,2BAA2B,EAAER,KAAK,CAACS,iCAJrC;;AAMEC,IAAAA,iBAAiB,EAAEV,KAAK,CAACW,mBAN3B;AAOEC,IAAAA,kBAAkB,EAAEZ,KAAK,CAACa,oBAP5B;;AASEC,IAAAA,qBAAqB,EAAEd,KAAK,CAACe,uBAT/B;AAUEC,IAAAA,mBAAmB,EAAEhB,KAAK,CAACiB,qBAV7B;AAWEC,IAAAA,mBAAmB,EAAElB,KAAK,CAACmB,qBAX7B;AAYEC,IAAAA,mBAAmB,EAAEpB,KAAK,CAACqB,qBAZ7B;AAaEC,IAAAA,mBAAmB,EAAEtB,KAAK,CAACuB,qBAb7B;AAcEC,IAAAA,uBAAuB,EAAExB,KAAK,CAACyB,+BAdjC;;AAgBEC,IAAAA,sBAAsB,EAAE1B,KAAK,CAAC2B,wBAhBhC;AAiBEC,IAAAA,oBAAoB,EAAE5B,KAAK,CAAC6B,sBAjB9B;AAkBEC,IAAAA,oBAAoB,EAAE9B,KAAK,CAAC+B,sBAlB9B;AAmBEC,IAAAA,oBAAoB,EAAEhC,KAAK,CAACiC,sBAnB9B;AAoBEC,IAAAA,oBAAoB,EAAElC,KAAK,CAACmC,sBApB9B;AAqBEC,IAAAA,wBAAwB,EAAEpC,KAAK,CAACqC,gCArBlC;;AAuBEC,IAAAA,qBAAqB,EAAEtC,KAAK,CAACuC,uBAvB/B;AAwBEC,IAAAA,mBAAmB,EAAExC,KAAK,CAACyC,qBAxB7B;AAyBEC,IAAAA,mBAAmB,EAAE1C,KAAK,CAAC2C,qBAzB7B;AA0BEC,IAAAA,mBAAmB,EAAE5C,KAAK,CAAC6C,qBA1B7B;AA2BEC,IAAAA,mBAAmB,EAAE9C,KAAK,CAAC+C,qBA3B7B;AA4BEC,IAAAA,uBAAuB,EAAEhD,KAAK,CAACiD,+BA5BjC;;AA8BEC,IAAAA,gBAAgB,EAAElD,KAAK,CAACmD,kBA9B1B;AA+BEC,IAAAA,yBAAyB,EAAEpD,KAAK,CAACqD,2BA/BnC;AAgCEC,IAAAA,uBAAuB,EAAEtD,KAAK,CAACuD,yBAhCjC,EADK;;AAmCLvD,EAAAA,KAnCK,CAAP;;AAqCD,CAtCM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\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/getDropdownTheme/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Dropdown/getDropdownTheme.js",
+  "module": "getDropdownTheme",
+  "types": "../getDropdownTheme.d.ts",
+  "sideEffects": false
+}

package/components/Dropdown/getDropdownTheme.d.ts

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

package/components/Dropdown/index/index.js

@@ -0,0 +1 @@
+export * from "../Dropdown";

package/components/Dropdown/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './Dropdown';\n"]}

package/components/Dropdown/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Dropdown/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/Dropdown/index.d.ts

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

package/components/Dropdown/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/Dropdown/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/DropdownMenu/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { PopupMenu } from "../../../internal/PopupMenu";
+import { isProductionEnv, isTestEnv } from "../../../lib/currentEnvironment";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { getDropdownMenuTheme } from "../getDropdownMenuTheme";
+export
+/**
+* Меню, раскрывающееся по клику на переданный в `caption` элемент
+*/
+var DropdownMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(DropdownMenu, _React$Component);
+
+  function DropdownMenu(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.getProps = createPropsGetter(DropdownMenu.defaultProps);
+    _this.popupMenu = null;
+
+    _this.open = function () {
+      if (_this.popupMenu) {
+        _this.popupMenu.open();
+      }
+    };
+
+    _this.close = function () {
+      if (_this.popupMenu) {
+        _this.popupMenu.close();
+      }
+    };
+
+    _this.refPopupMenu = function (ref) {
+      return _this.popupMenu = ref;
+    };
+
+    if (!props.caption && !isProductionEnv) {
+      throw new Error('Prop "caption" is required!!!');
+    }
+
+    return _this;
+  }
+
+  var _proto = DropdownMenu.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: getDropdownMenuTheme(theme)
+      }, _this2.renderMain());
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    if (!this.props.caption) {
+      return null;
+    }
+
+    var _this$getProps = this.getProps(),
+        positions = _this$getProps.positions,
+        disableAnimations = _this$getProps.disableAnimations;
+
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(PopupMenu, {
+      "aria-label": this.props['aria-label'],
+      ref: this.refPopupMenu,
+      caption: this.props.caption,
+      menuMaxHeight: this.props.menuMaxHeight,
+      menuWidth: this.props.menuWidth,
+      preventIconsOffset: this.props.preventIconsOffset,
+      popupHasPin: false,
+      positions: positions,
+      disableAnimations: disableAnimations,
+      header: this.props.header,
+      footer: this.props.footer,
+      width: this.props.width,
+      onClose: this.props.onClose,
+      onOpen: this.props.onOpen,
+      popupMenuId: this.props.popupMenuId
+    }, this.props.children));
+  };
+
+  return DropdownMenu;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'DropdownMenu', _class2.displayName = 'DropdownMenu', _class2.defaultProps = {
+  disableAnimations: isTestEnv,
+  positions: ['bottom left', 'bottom right', 'top left', 'top right']
+}, _temp)) || _class;

package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DropdownMenu.tsx"],"names":["React","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","getDropdownMenuTheme","DropdownMenu","props","getProps","defaultProps","popupMenu","open","close","refPopupMenu","ref","caption","Error","render","theme","renderMain","positions","disableAnimations","setRootNode","menuMaxHeight","menuWidth","preventIconsOffset","header","footer","width","onClose","onOpen","popupMenuId","children","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { getDropdownMenuTheme } from './getDropdownMenuTheme';\n\nexport interface DropdownMenuProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\n  /** Максимальная высота меню */\n  menuMaxHeight?: React.CSSProperties['maxWidth'];\n  /** Ширина меню */\n  menuWidth?: React.CSSProperties['width'];\n  /** Ширина caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).\n   */\n  footer?: React.ReactNode;\n  /**\n   *  Список позиций доступных для расположения выпадашки относительно `caption`.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions?: PopupPositionsType[];\n\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\ntype DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент\n */\n@rootNode\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n  public static displayName = 'DropdownMenu';\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n  };\n\n  private getProps = createPropsGetter(DropdownMenu.defaultProps);\n\n  private popupMenu: Nullable<PopupMenu> = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: DropdownMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return <ThemeContext.Provider value={getDropdownMenuTheme(theme)}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n    const { positions, disableAnimations } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          aria-label={this.props['aria-label']}\n          ref={this.refPopupMenu}\n          caption={this.props.caption}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          preventIconsOffset={this.props.preventIconsOffset}\n          popupHasPin={false}\n          positions={positions}\n          disableAnimations={disableAnimations}\n          header={this.props.header}\n          footer={this.props.footer}\n          width={this.props.width}\n          onClose={this.props.onClose}\n          onOpen={this.props.onOpen}\n          popupMenuId={this.props.popupMenuId}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  public open = (): void => {\n    if (this.popupMenu) {\n      this.popupMenu.open();\n    }\n  };\n\n  public close = (): void => {\n    if (this.popupMenu) {\n      this.popupMenu.close();\n    }\n  };\n\n  private refPopupMenu = (ref: Nullable<PopupMenu>) => (this.popupMenu = ref);\n}\n"]}

package/components/DropdownMenu/DropdownMenu/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DropdownMenu/DropdownMenu.js",
+  "module": "DropdownMenu",
+  "types": "../DropdownMenu.d.ts",
+  "sideEffects": false
+}

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,45 +1,63 @@
-import * as React from 'react';
-import { PopupMenuProps } from '../internal/PopupMenu';
-import { PopupPosition } from '../Popup';
-export interface DropdownMenuProps {
+import React, { AriaAttributes } from 'react';
+import { PopupMenuProps } from '../../internal/PopupMenu';
+import { PopupPositionsType } from '../../internal/Popup';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface DropdownMenuProps extends Pick<AriaAttributes, 'aria-label'>, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>, CommonProps {
     /** Максимальная высота меню */
     menuMaxHeight?: React.CSSProperties['maxWidth'];
     /** Ширина меню */
     menuWidth?: React.CSSProperties['width'];
+    /** Ширина caption */
+    width?: React.CSSProperties['width'];
     /**
      * Элемент или функция возвращающая элемент,
-     * если передана, используется вместо ```caption```,
+     * если передана, используется вместо `caption`,
      * в таком случае управлять открытием и закрытием меню
      * придется в этой функции
      */
     caption: PopupMenuProps['caption'];
+    /**
+     * Произвольный элемент, который будет отрендерен в шапке меню.
+     *
+     * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
+     */
     header?: React.ReactNode;
+    /**
+     * Произвольный элемент, который будет отрендерен в подвале меню.
+     *
+     * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).
+     */
     footer?: React.ReactNode;
     /**
-     * Массив разрешенных положений меню относительно caption'а.
+     *  Список позиций доступных для расположения выпадашки относительно `caption`.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
      * @default ['bottom left', 'bottom right', 'top left', 'top right']
      */
-    positions?: PopupPosition[];
-    onOpen?: () => void;
-    onClose?: () => void;
+    positions?: PopupPositionsType[];
     /**
      * Не показывать анимацию
      */
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
 }
+declare type DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;
 /**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент
  */
-export default class DropdownMenu extends React.Component<DropdownMenuProps> {
-    static defaultProps: {
-        disableAnimations: boolean;
-        positions: string[];
-    };
+export declare class DropdownMenu extends React.Component<DropdownMenuProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
     private popupMenu;
+    private setRootNode;
     constructor(props: DropdownMenuProps);
-    render(): JSX.Element | null;
+    render(): JSX.Element;
+    renderMain(): JSX.Element | null;
     open: () => void;
     close: () => void;
     private refPopupMenu;
-    private handleChangeMenuState;
 }
+export {};