@skbkontur/react-ui 3.8.1 → 3.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/CHANGELOG.md +15 -2
  2. package/cjs/components/CurrencyLabel/CurrencyLabel.js +5 -14
  3. package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
  4. package/cjs/components/Dropdown/Dropdown.d.ts +1 -0
  5. package/cjs/components/Dropdown/Dropdown.js +1 -0
  6. package/cjs/components/Dropdown/Dropdown.js.map +1 -1
  7. package/cjs/components/Dropdown/Dropdown.md +0 -1
  8. package/cjs/components/DropdownMenu/DropdownMenu.d.ts +17 -3
  9. package/cjs/components/DropdownMenu/DropdownMenu.js +15 -1
  10. package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
  11. package/cjs/components/DropdownMenu/DropdownMenu.md +87 -6
  12. package/cjs/components/Kebab/Kebab.d.ts +5 -2
  13. package/cjs/components/Kebab/Kebab.js +3 -0
  14. package/cjs/components/Kebab/Kebab.js.map +1 -1
  15. package/cjs/components/Kebab/Kebab.md +249 -3
  16. package/cjs/components/MenuHeader/MenuHeader.d.ts +5 -1
  17. package/cjs/components/MenuHeader/MenuHeader.js +5 -1
  18. package/cjs/components/MenuHeader/MenuHeader.js.map +1 -1
  19. package/cjs/components/MenuHeader/MenuHeader.md +23 -0
  20. package/cjs/components/MenuItem/MenuItem.d.ts +10 -1
  21. package/cjs/components/MenuItem/MenuItem.js +11 -1
  22. package/cjs/components/MenuItem/MenuItem.js.map +1 -1
  23. package/cjs/components/MenuItem/MenuItem.md +106 -4
  24. package/cjs/components/MenuSeparator/MenuSeparator.d.ts +3 -1
  25. package/cjs/components/MenuSeparator/MenuSeparator.js +3 -1
  26. package/cjs/components/MenuSeparator/MenuSeparator.js.map +1 -1
  27. package/cjs/components/MenuSeparator/MenuSeparator.md +14 -0
  28. package/cjs/components/Toggle/Toggle.d.ts +4 -0
  29. package/cjs/components/Toggle/Toggle.js +7 -1
  30. package/cjs/components/Toggle/Toggle.js.map +1 -1
  31. package/cjs/components/Toggle/Toggle.md +13 -0
  32. package/cjs/components/Toggle/Toggle.styles.d.ts +1 -0
  33. package/cjs/components/Toggle/Toggle.styles.js +6 -7
  34. package/cjs/components/Toggle/Toggle.styles.js.map +1 -1
  35. package/cjs/components/TooltipMenu/TooltipMenu.d.ts +26 -8
  36. package/cjs/components/TooltipMenu/TooltipMenu.js +24 -6
  37. package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
  38. package/cjs/components/TooltipMenu/TooltipMenu.md +76 -8
  39. package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +5 -11
  40. package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
  41. package/components/Dropdown/Dropdown/Dropdown.js +1 -0
  42. package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
  43. package/components/Dropdown/Dropdown.d.ts +1 -0
  44. package/components/Dropdown/Dropdown.md +0 -1
  45. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +1 -1
  46. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
  47. package/components/DropdownMenu/DropdownMenu.d.ts +17 -3
  48. package/components/DropdownMenu/DropdownMenu.md +87 -6
  49. package/components/Kebab/Kebab/Kebab.js.map +1 -1
  50. package/components/Kebab/Kebab.d.ts +5 -2
  51. package/components/Kebab/Kebab.md +249 -3
  52. package/components/MenuHeader/MenuHeader/MenuHeader.js +5 -1
  53. package/components/MenuHeader/MenuHeader/MenuHeader.js.map +1 -1
  54. package/components/MenuHeader/MenuHeader.d.ts +5 -1
  55. package/components/MenuHeader/MenuHeader.md +23 -0
  56. package/components/MenuItem/MenuItem/MenuItem.js +4 -1
  57. package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
  58. package/components/MenuItem/MenuItem.d.ts +10 -1
  59. package/components/MenuItem/MenuItem.md +106 -4
  60. package/components/MenuSeparator/MenuSeparator/MenuSeparator.js +3 -1
  61. package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map +1 -1
  62. package/components/MenuSeparator/MenuSeparator.d.ts +3 -1
  63. package/components/MenuSeparator/MenuSeparator.md +14 -0
  64. package/components/Toggle/Toggle/Toggle.js +5 -3
  65. package/components/Toggle/Toggle/Toggle.js.map +1 -1
  66. package/components/Toggle/Toggle.d.ts +4 -0
  67. package/components/Toggle/Toggle.md +13 -0
  68. package/components/Toggle/Toggle.styles/Toggle.styles.js +3 -3
  69. package/components/Toggle/Toggle.styles/Toggle.styles.js.map +1 -1
  70. package/components/Toggle/Toggle.styles.d.ts +1 -0
  71. package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +9 -6
  72. package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
  73. package/components/TooltipMenu/TooltipMenu.d.ts +26 -8
  74. package/components/TooltipMenu/TooltipMenu.md +76 -8
  75. package/package.json +2 -2
  76. package/cjs/components/CurrencyLabel/CurrencyLabel.styles.d.ts +0 -4
  77. package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js +0 -9
  78. package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js.map +0 -1
  79. package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js +0 -10
  80. package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js.map +0 -1
  81. package/components/CurrencyLabel/CurrencyLabel.styles/package.json +0 -6
  82. package/components/CurrencyLabel/CurrencyLabel.styles.d.ts +0 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.8.2](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@3.8.1...@skbkontur/react-ui@3.8.2) (2021-10-29)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **CurrencyLabel:** revert color, inherit it from page ([#2595](https://github.com/skbkontur/retail-ui/issues/2595)) ([bb7b20c](https://github.com/skbkontur/retail-ui/commit/bb7b20c610ab07a03938dfa7c17589878a088f99))
12
+ * **Toggle:** add id prop ([#2597](https://github.com/skbkontur/retail-ui/issues/2597)) ([82846db](https://github.com/skbkontur/retail-ui/commit/82846dbacff71a844867b88f7acb1c33eaef8bb9))
13
+ * **Toggle:** remove interaction in checked disabled mode ([#2596](https://github.com/skbkontur/retail-ui/issues/2596)) ([513240f](https://github.com/skbkontur/retail-ui/commit/513240fd43a03f4b8334dded086212199fc89a99))
14
+
15
+
16
+
17
+
18
+
6
19
  ## [3.8.1](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@3.8.0...@skbkontur/react-ui@3.8.1) (2021-10-28)
7
20
 
8
21
 
@@ -280,12 +293,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
280
293
  * **react-ui:** default theme has changed
281
294
  * Color of focus border and background of active menu items changed from `#5199db` to `#1D85D0`
282
295
  * **Tooltip,Hint:** It may affect position of Tooltips and Hints over your element due default wrapper removal. Also default offsets were changed.
283
- * **ThemeProvider:** component `ThemeProvider` was removed please use `ThemeContext` instead. See https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext
296
+ * **ThemeProvider:** component `ThemeProvider` was removed please use `ThemeContext` instead. See [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext).
284
297
  * **ThemeConsumer:** component `ThemeConsumer` was deprecated and removed please use `ThemeContext` instead
285
298
  * **Select, Dropdown:** Prop `diadocLinkIcon` was deprecated use prop `_renderButton` instead
286
299
  * **MenuItem:** Prop `alkoLink` was deprecated please use `link` instead
287
300
  * **LocaleProvider:** Component `LocaleProvider` has been removed, please use `LocaleContext` instead
288
- * **Spinner, Loader:** Cloud prop in `Spinner` and `Loader` components has been removed, behavior moved to `@skbkontur/react-ui-addons` see [migration] (https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MIGRATION.md)
301
+ * **Spinner, Loader:** Cloud prop in `Spinner` and `Loader` components has been removed, behavior moved to `@skbkontur/react-ui-addons` see [migration](https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MIGRATION.md).
289
302
  * **SpinnerOld:** Component `SpinnerOld` has been removed, please use component from @skbkontur/react-ui-addons
290
303
  * **Logotype:** Component `Logotype` has been removed, please use component from @skbkontur/react-ui-addons
291
304
  * **Fias:** Component `Fias` has been removed, please use component from @skbkontur/react-ui-addons
@@ -3,9 +3,6 @@
3
3
  var _constants = require("../CurrencyInput/constants");
4
4
  var _CurrencyHelper = require("../CurrencyInput/CurrencyHelper");
5
5
  var _CommonWrapper = require("../../internal/CommonWrapper");
6
- var _ThemeContext = require("../../lib/theming/ThemeContext");
7
-
8
- var _CurrencyLabel = require("./CurrencyLabel.styles");
9
6
 
10
7
 
11
8
 
@@ -24,18 +21,12 @@ var defaultProps = {
24
21
  var CurrencyLabel = function CurrencyLabel(props) {var
25
22
  value = props.value,fractionDigits = props.fractionDigits,currencySymbol = props.currencySymbol;
26
23
  return /*#__PURE__*/(
27
- _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
28
- function (theme) {
29
- return /*#__PURE__*/(
30
- _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
31
- _react.default.createElement("span", { className: _CurrencyLabel.styles.root(theme) },
32
- _CurrencyHelper.CurrencyHelper.format(value, { fractionDigits: fractionDigits }),
33
- currencySymbol && String.fromCharCode(0xa0) /*   */,
34
- currencySymbol)));
35
-
36
-
24
+ _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
25
+ _react.default.createElement("span", null,
26
+ _CurrencyHelper.CurrencyHelper.format(value, { fractionDigits: fractionDigits }),
27
+ currencySymbol && String.fromCharCode(0xa0) /*   */,
28
+ currencySymbol)));
37
29
 
38
- }));
39
30
 
40
31
 
41
32
  };exports.CurrencyLabel = CurrencyLabel;
@@ -1 +1 @@
1
- {"version":3,"sources":["CurrencyLabel.tsx"],"names":["defaultProps","fractionDigits","CurrencyLabel","props","value","currencySymbol","theme","styles","root","CurrencyHelper","format","String","fromCharCode","__KONTUR_REACT_UI__","propTypes","MAX_SAFE_DIGITS","Error","destructString","fraction","length","Number","isInteger"],"mappings":"kLAAA;;AAEA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;;AAYO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,cAAc,EAAE,CADU,EAArB,C;;;AAIA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4C;AAC/DC,EAAAA,KAD+D,GACrBD,KADqB,CAC/DC,KAD+D,CACxDH,cADwD,GACrBE,KADqB,CACxDF,cADwD,CACxCI,cADwC,GACrBF,KADqB,CACxCE,cADwC;AAEvE;AACE,iCAAC,0BAAD,CAAc,QAAd;AACG,cAACC,KAAD,EAAW;AACV;AACE,qCAAC,4BAAD,EAAmBH,KAAnB;AACE,+CAAM,SAAS,EAAEI,sBAAOC,IAAP,CAAYF,KAAZ,CAAjB;AACGG,uCAAeC,MAAf,CAAsBN,KAAtB,EAA6B,EAAEH,cAAc,EAAdA,cAAF,EAA7B,CADH;AAEGI,QAAAA,cAAc,IAAIM,MAAM,CAACC,YAAP,CAAoB,IAApB,CAFrB,CAE+C,YAF/C;AAGGP,QAAAA,cAHH,CADF,CADF;;;;AASD,KAXH,CADF;;;AAeD,CAjBM,C;;AAmBPH,aAAa,CAACW,mBAAd,GAAoC,eAApC;;AAEAX,aAAa,CAACF,YAAd,GAA6BA,YAA7B;;AAEAE,aAAa,CAACY,SAAd,GAA0B;AACxBb,EAAAA,cAAc,EAAE,wBAACE,KAAD,EAAqD;AACnE,QAAIA,KAAK,CAACF,cAAN,GAAuBc,0BAA3B,EAA4C;AAC1C,aAAO,IAAIC,KAAJ;AACL,0DAAkDD,0BAAlD,4EADK,CAAP;;;AAID,KANkE;;AAQ9CN,mCAAeQ,cAAf,CAA8BN,MAAM,CAACR,KAAK,CAACC,KAAP,CAApC,KAAsD,EAAEc,QAAQ,EAAE,EAAZ,EARR,CAQ3DA,QAR2D,QAQ3DA,QAR2D;AASnE,QAAIA,QAAQ,CAACC,MAAT,GAAkBhB,KAAK,CAACF,cAA5B,EAA4C;AAC1C,aAAO,IAAIe,KAAJ;AACL,gIADK,CAAP;;;AAID;;AAED,QAAI,CAACI,MAAM,CAACC,SAAP,CAAiBlB,KAAK,CAACF,cAAvB,CAAL,EAA6C;AAC3C,aAAO,IAAIe,KAAJ,2GAAP;;;AAGD;;AAED,WAAO,IAAP;AACD,GAxBuB,EAA1B","sourcesContent":["import React from 'react';\n\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { styles } from './CurrencyLabel.styles';\n\nexport interface CurrencyLabelProps extends CommonProps {\n /**\n * Минимальное количество отображаемых знаков после запятой\n * @default 2\n */\n fractionDigits: number;\n value: number;\n currencySymbol?: React.ReactNode;\n}\n\nexport const defaultProps = {\n fractionDigits: 2,\n};\n\nexport const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {\n const { value, fractionDigits, currencySymbol } = props;\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return (\n <CommonWrapper {...props}>\n <span className={styles.root(theme)}>\n {CurrencyHelper.format(value, { fractionDigits })}\n {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\n {currencySymbol}\n </span>\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n};\n\nCurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';\n\nCurrencyLabel.defaultProps = defaultProps;\n\nCurrencyLabel.propTypes = {\n fractionDigits: (props: CurrencyLabelProps & typeof defaultProps) => {\n if (props.fractionDigits > MAX_SAFE_DIGITS) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.` +\n `\\nSee https://tech.skbkontur.ru/react-ui/#/CurrencyInput?id=why15`,\n );\n }\n\n const { fraction } = CurrencyHelper.destructString(String(props.value)) || { fraction: '' };\n if (fraction.length > props.fractionDigits) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\n `'value' will not be cutted`,\n );\n }\n\n if (!Number.isInteger(props.fractionDigits)) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\n );\n }\n\n return null;\n },\n};\n"]}
1
+ {"version":3,"sources":["CurrencyLabel.tsx"],"names":["defaultProps","fractionDigits","CurrencyLabel","props","value","currencySymbol","CurrencyHelper","format","String","fromCharCode","__KONTUR_REACT_UI__","propTypes","MAX_SAFE_DIGITS","Error","destructString","fraction","length","Number","isInteger"],"mappings":"kLAAA;;AAEA;AACA;AACA;;;;;;;;;;;;AAYO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,cAAc,EAAE,CADU,EAArB,C;;;AAIA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4C;AAC/DC,EAAAA,KAD+D,GACrBD,KADqB,CAC/DC,KAD+D,CACxDH,cADwD,GACrBE,KADqB,CACxDF,cADwD,CACxCI,cADwC,GACrBF,KADqB,CACxCE,cADwC;AAEvE;AACE,iCAAC,4BAAD,EAAmBF,KAAnB;AACE;AACGG,mCAAeC,MAAf,CAAsBH,KAAtB,EAA6B,EAAEH,cAAc,EAAdA,cAAF,EAA7B,CADH;AAEGI,IAAAA,cAAc,IAAIG,MAAM,CAACC,YAAP,CAAoB,IAApB,CAFrB,CAE+C,YAF/C;AAGGJ,IAAAA,cAHH,CADF,CADF;;;;AASD,CAXM,C;;AAaPH,aAAa,CAACQ,mBAAd,GAAoC,eAApC;;AAEAR,aAAa,CAACF,YAAd,GAA6BA,YAA7B;;AAEAE,aAAa,CAACS,SAAd,GAA0B;AACxBV,EAAAA,cAAc,EAAE,wBAACE,KAAD,EAAqD;AACnE,QAAIA,KAAK,CAACF,cAAN,GAAuBW,0BAA3B,EAA4C;AAC1C,aAAO,IAAIC,KAAJ;AACL,0DAAkDD,0BAAlD,4EADK,CAAP;;;AAID,KANkE;;AAQ9CN,mCAAeQ,cAAf,CAA8BN,MAAM,CAACL,KAAK,CAACC,KAAP,CAApC,KAAsD,EAAEW,QAAQ,EAAE,EAAZ,EARR,CAQ3DA,QAR2D,QAQ3DA,QAR2D;AASnE,QAAIA,QAAQ,CAACC,MAAT,GAAkBb,KAAK,CAACF,cAA5B,EAA4C;AAC1C,aAAO,IAAIY,KAAJ;AACL,gIADK,CAAP;;;AAID;;AAED,QAAI,CAACI,MAAM,CAACC,SAAP,CAAiBf,KAAK,CAACF,cAAvB,CAAL,EAA6C;AAC3C,aAAO,IAAIY,KAAJ,2GAAP;;;AAGD;;AAED,WAAO,IAAP;AACD,GAxBuB,EAA1B","sourcesContent":["import React from 'react';\n\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\n\nexport interface CurrencyLabelProps extends CommonProps {\n /**\n * Минимальное количество отображаемых знаков после запятой\n * @default 2\n */\n fractionDigits: number;\n value: number;\n currencySymbol?: React.ReactNode;\n}\n\nexport const defaultProps = {\n fractionDigits: 2,\n};\n\nexport const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {\n const { value, fractionDigits, currencySymbol } = props;\n return (\n <CommonWrapper {...props}>\n <span>\n {CurrencyHelper.format(value, { fractionDigits })}\n {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\n {currencySymbol}\n </span>\n </CommonWrapper>\n );\n};\n\nCurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';\n\nCurrencyLabel.defaultProps = defaultProps;\n\nCurrencyLabel.propTypes = {\n fractionDigits: (props: CurrencyLabelProps & typeof defaultProps) => {\n if (props.fractionDigits > MAX_SAFE_DIGITS) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.` +\n `\\nSee https://tech.skbkontur.ru/react-ui/#/CurrencyInput?id=why15`,\n );\n }\n\n const { fraction } = CurrencyHelper.destructString(String(props.value)) || { fraction: '' };\n if (fraction.length > props.fractionDigits) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\n `'value' will not be cutted`,\n );\n }\n\n if (!Number.isInteger(props.fractionDigits)) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\n );\n }\n\n return null;\n },\n};\n"]}
@@ -55,6 +55,7 @@ export interface DropdownProps extends CommonProps {
55
55
  }
56
56
  /**
57
57
  * Выпадающее меню.
58
+ *
58
59
  */
59
60
  export declare class Dropdown extends React.Component<DropdownProps> {
60
61
  static __KONTUR_REACT_UI__: string;
@@ -88,6 +88,7 @@ var PASS_PROPS = {
88
88
 
89
89
  /**
90
90
  * Выпадающее меню.
91
+ *
91
92
  */var
92
93
  Dropdown = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(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.
93
94
 
@@ -1 +1 @@
1
- {"version":3,"sources":["Dropdown.tsx"],"names":["PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","Dropdown","_select","renderMain","caption","icon","props","items","React","Children","map","children","item","_refSelect","renderValue","element","render","open","close","Component","__KONTUR_REACT_UI__","Header","MenuHeader","MenuItem","Separator","MenuSeparator","propTypes","PropTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func","value"],"mappings":"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","sourcesContent":["import React 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 { ButtonSize, ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\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};\n\nexport interface DropdownProps extends CommonProps {\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?: ButtonSize;\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\n/**\n * Выпадающее меню.\n */\nexport class Dropdown extends React.Component<DropdownProps> {\n public static __KONTUR_REACT_UI__ = '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\n public render() {\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\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 <Select<React.ReactNode, React.ReactNode>\n ref={this._refSelect}\n {...filterProps(props, PASS_PROPS)}\n value={caption}\n items={items}\n _icon={icon}\n renderValue={renderValue}\n />\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"]}
1
+ {"version":3,"sources":["Dropdown.tsx"],"names":["PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","Dropdown","_select","renderMain","caption","icon","props","items","React","Children","map","children","item","_refSelect","renderValue","element","render","open","close","Component","__KONTUR_REACT_UI__","Header","MenuHeader","MenuItem","Separator","MenuSeparator","propTypes","PropTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func","value"],"mappings":"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","sourcesContent":["import React 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 { ButtonSize, ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\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};\n\nexport interface DropdownProps extends CommonProps {\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?: ButtonSize;\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\n/**\n * Выпадающее меню.\n *\n */\nexport class Dropdown extends React.Component<DropdownProps> {\n public static __KONTUR_REACT_UI__ = '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\n public render() {\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\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 <Select<React.ReactNode, React.ReactNode>\n ref={this._refSelect}\n {...filterProps(props, PASS_PROPS)}\n value={caption}\n items={items}\n _icon={icon}\n renderValue={renderValue}\n />\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"]}
@@ -1,6 +1,5 @@
1
1
  ```jsx harmony
2
2
  import { Dropdown, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
3
-
4
3
  <Dropdown caption="Click">
5
4
  <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
6
5
  <MenuSeparator />
@@ -11,15 +11,29 @@ export interface DropdownMenuProps extends CommonProps {
11
11
  width?: React.CSSProperties['width'];
12
12
  /**
13
13
  * Элемент или функция возвращающая элемент,
14
- * если передана, используется вместо ```caption```,
14
+ * если передана, используется вместо `caption`,
15
15
  * в таком случае управлять открытием и закрытием меню
16
16
  * придется в этой функции
17
17
  */
18
18
  caption: PopupMenuProps['caption'];
19
+ /**
20
+ * Произвольный элемент, который будет отрендерен в шапке меню.
21
+ *
22
+ * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
23
+ */
19
24
  header?: React.ReactNode;
25
+ /**
26
+ * Произвольный элемент, который будет отрендерен в подвале меню.
27
+ *
28
+ * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
29
+ */
20
30
  footer?: React.ReactNode;
21
31
  /**
22
- * Массив разрешенных положений меню относительно caption'а.
32
+ * Список позиций доступных для расположения выпадашки относительно `caption`.
33
+ *
34
+ * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
35
+ *
36
+ * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
23
37
  * @default ['bottom left', 'bottom right', 'top left', 'top right']
24
38
  */
25
39
  positions?: PopupPosition[];
@@ -31,7 +45,7 @@ export interface DropdownMenuProps extends CommonProps {
31
45
  disableAnimations: boolean;
32
46
  }
33
47
  /**
34
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент
48
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент
35
49
  */
36
50
  export declare class DropdownMenu extends React.Component<DropdownMenuProps> {
37
51
  static __KONTUR_REACT_UI__: string;
@@ -27,6 +27,20 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
27
27
 
28
28
 
29
29
 
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+
30
44
 
31
45
 
32
46
 
@@ -42,7 +56,7 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
42
56
 
43
57
 
44
58
  /**
45
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент
59
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент
46
60
  */var
47
61
  DropdownMenu = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(DropdownMenu, _React$Component);
48
62
 
@@ -1 +1 @@
1
- {"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","props","popupMenu","open","close","refPopupMenu","ref","handleChangeMenuState","menuVisible","onOpen","onClose","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupMargin","renderMain","menuMaxHeight","menuWidth","positions","disableAnimations","header","footer","width","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"wPAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;AACA;AACA,G;AACaA,Y;;;;;;;;;;AAUX,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAF9BC,SAE8B,GAFG,IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsD/BC,IAAAA,IAtD+B,GAsDxB,YAAY;AACxB,UAAI,MAAKD,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeC,IAAf;AACD;AACF,KA1DqC;;AA4D/BC,IAAAA,KA5D+B,GA4DvB,YAAY;AACzB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,KAAf;AACD;AACF,KAhEqC;;AAkE9BC,IAAAA,YAlE8B,GAkEf,UAACC,GAAD,UAA+B,MAAKJ,SAAL,GAAiBI,GAAhD,EAlEe;;AAoE9BC,IAAAA,qBApE8B,GAoEN,UAACC,WAAD,EAA0B;AACxD,UAAIA,WAAW,IAAI,MAAKP,KAAL,CAAWQ,MAA9B,EAAsC;AACpC,cAAKR,KAAL,CAAWQ,MAAX;AACA;AACD;;AAED,UAAI,CAACD,WAAD,IAAgB,MAAKP,KAAL,CAAWS,OAA/B,EAAwC;AACtC,cAAKT,KAAL,CAAWS,OAAX;AACA;AACD;AACF,KA9EqC,CAGpC,IAAI,CAACT,KAAK,CAACU,OAAP,IAAkB,CAACC,mCAAvB,EAAwC,CACtC,MAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN,CACD,CALmC,aAMrC,C,2CAEMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,oBACE,6BAAC,0BAAD,CAAc,QAAd,IACE,KAAK,EAAEC,2BAAaC,MAAb,CACL,EACEC,WAAW,EAAE,KADf,EADK,EAILH,KAJK,CADT,IAQG,MAAI,CAACI,UAAL,EARH,CADF,CAYD,CAdH,CADF,CAkBD,C,QAEMA,U,GAAP,sBAAoB,CAClB,IAAI,CAAC,KAAKlB,KAAL,CAAWU,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,oBACE,6BAAC,4BAAD,EAAmB,KAAKV,KAAxB,eACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKI,YADZ,EAEE,OAAO,EAAE,KAAKJ,KAAL,CAAWU,OAFtB,EAGE,aAAa,EAAE,KAAKV,KAAL,CAAWmB,aAH5B,EAIE,SAAS,EAAE,KAAKnB,KAAL,CAAWoB,SAJxB,EAKE,iBAAiB,EAAE,KAAKd,qBAL1B,EAME,WAAW,EAAE,KANf,EAOE,SAAS,EAAE,KAAKN,KAAL,CAAWqB,SAPxB,EAQE,iBAAiB,EAAE,KAAKrB,KAAL,CAAWsB,iBARhC,EASE,MAAM,EAAE,KAAKtB,KAAL,CAAWuB,MATrB,EAUE,MAAM,EAAE,KAAKvB,KAAL,CAAWwB,MAVrB,EAWE,KAAK,EAAE,KAAKxB,KAAL,CAAWyB,KAXpB,IAaG,KAAKzB,KAAL,CAAW0B,QAbd,CADF,CADF,CAmBD,C,uBA9D+BC,eAAMC,S,sCAA3B7B,Y,CACG8B,mB,GAAsB,c,CADzB9B,Y,CAGG+B,Y,GAAe,EAC3BR,iBAAiB,EAAES,6BADQ,EAE3BV,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAFgB,E","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPosition } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\n\nexport interface DropdownMenuProps extends 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 header?: React.ReactNode;\n footer?: React.ReactNode;\n /**\n * Массив разрешенных положений меню относительно caption'а.\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions?: PopupPosition[];\n\n onOpen?: () => void;\n onClose?: () => void;\n\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в ```caption``` элемент\n */\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n };\n\n private popupMenu: Nullable<PopupMenu> = null;\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 (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupMargin: '0px',\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain() {\n if (!this.props.caption) {\n return null;\n }\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n ref={this.refPopupMenu}\n caption={this.props.caption}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n onChangeMenuState={this.handleChangeMenuState}\n popupHasPin={false}\n positions={this.props.positions}\n disableAnimations={this.props.disableAnimations}\n header={this.props.header}\n footer={this.props.footer}\n width={this.props.width}\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 private handleChangeMenuState = (menuVisible: boolean) => {\n if (menuVisible && this.props.onOpen) {\n this.props.onOpen();\n return;\n }\n\n if (!menuVisible && this.props.onClose) {\n this.props.onClose();\n return;\n }\n };\n}\n"]}
1
+ {"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","props","popupMenu","open","close","refPopupMenu","ref","handleChangeMenuState","menuVisible","onOpen","onClose","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupMargin","renderMain","menuMaxHeight","menuWidth","positions","disableAnimations","header","footer","width","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"wPAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;AACA;AACA,G;AACaA,Y;;;;;;;;;;AAUX,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAF9BC,SAE8B,GAFG,IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsD/BC,IAAAA,IAtD+B,GAsDxB,YAAY;AACxB,UAAI,MAAKD,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeC,IAAf;AACD;AACF,KA1DqC;;AA4D/BC,IAAAA,KA5D+B,GA4DvB,YAAY;AACzB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,KAAf;AACD;AACF,KAhEqC;;AAkE9BC,IAAAA,YAlE8B,GAkEf,UAACC,GAAD,UAA+B,MAAKJ,SAAL,GAAiBI,GAAhD,EAlEe;;AAoE9BC,IAAAA,qBApE8B,GAoEN,UAACC,WAAD,EAA0B;AACxD,UAAIA,WAAW,IAAI,MAAKP,KAAL,CAAWQ,MAA9B,EAAsC;AACpC,cAAKR,KAAL,CAAWQ,MAAX;AACA;AACD;;AAED,UAAI,CAACD,WAAD,IAAgB,MAAKP,KAAL,CAAWS,OAA/B,EAAwC;AACtC,cAAKT,KAAL,CAAWS,OAAX;AACA;AACD;AACF,KA9EqC,CAGpC,IAAI,CAACT,KAAK,CAACU,OAAP,IAAkB,CAACC,mCAAvB,EAAwC,CACtC,MAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN,CACD,CALmC,aAMrC,C,2CAEMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,oBACE,6BAAC,0BAAD,CAAc,QAAd,IACE,KAAK,EAAEC,2BAAaC,MAAb,CACL,EACEC,WAAW,EAAE,KADf,EADK,EAILH,KAJK,CADT,IAQG,MAAI,CAACI,UAAL,EARH,CADF,CAYD,CAdH,CADF,CAkBD,C,QAEMA,U,GAAP,sBAAoB,CAClB,IAAI,CAAC,KAAKlB,KAAL,CAAWU,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,oBACE,6BAAC,4BAAD,EAAmB,KAAKV,KAAxB,eACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKI,YADZ,EAEE,OAAO,EAAE,KAAKJ,KAAL,CAAWU,OAFtB,EAGE,aAAa,EAAE,KAAKV,KAAL,CAAWmB,aAH5B,EAIE,SAAS,EAAE,KAAKnB,KAAL,CAAWoB,SAJxB,EAKE,iBAAiB,EAAE,KAAKd,qBAL1B,EAME,WAAW,EAAE,KANf,EAOE,SAAS,EAAE,KAAKN,KAAL,CAAWqB,SAPxB,EAQE,iBAAiB,EAAE,KAAKrB,KAAL,CAAWsB,iBARhC,EASE,MAAM,EAAE,KAAKtB,KAAL,CAAWuB,MATrB,EAUE,MAAM,EAAE,KAAKvB,KAAL,CAAWwB,MAVrB,EAWE,KAAK,EAAE,KAAKxB,KAAL,CAAWyB,KAXpB,IAaG,KAAKzB,KAAL,CAAW0B,QAbd,CADF,CADF,CAmBD,C,uBA9D+BC,eAAMC,S,sCAA3B7B,Y,CACG8B,mB,GAAsB,c,CADzB9B,Y,CAGG+B,Y,GAAe,EAC3BR,iBAAiB,EAAES,6BADQ,EAE3BV,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAFgB,E","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPosition } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\n\nexport interface DropdownMenuProps extends 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?: PopupPosition[];\n\n onOpen?: () => void;\n onClose?: () => void;\n\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент\n */\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n };\n\n private popupMenu: Nullable<PopupMenu> = null;\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 (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupMargin: '0px',\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain() {\n if (!this.props.caption) {\n return null;\n }\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n ref={this.refPopupMenu}\n caption={this.props.caption}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n onChangeMenuState={this.handleChangeMenuState}\n popupHasPin={false}\n positions={this.props.positions}\n disableAnimations={this.props.disableAnimations}\n header={this.props.header}\n footer={this.props.footer}\n width={this.props.width}\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 private handleChangeMenuState = (menuVisible: boolean) => {\n if (menuVisible && this.props.onOpen) {\n this.props.onOpen();\n return;\n }\n\n if (!menuVisible && this.props.onClose) {\n this.props.onClose();\n return;\n }\n };\n}\n"]}
@@ -1,4 +1,4 @@
1
- Простой пример
1
+ Базовый пример меню.
2
2
 
3
3
  ```jsx harmony
4
4
  import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
@@ -16,12 +16,12 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
16
16
  </DropdownMenu>;
17
17
  ```
18
18
 
19
- С указанием ширины меню
19
+ Меню с заданной шириной.
20
20
 
21
21
  ```jsx harmony
22
22
  import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
23
23
 
24
- <DropdownMenu caption={<Button use="primary">Открыть меню</Button>} menuWidth={350}>
24
+ <DropdownMenu caption={<Button use="primary">Открыть меню c заданной шириной</Button>} menuWidth={350}>
25
25
  <MenuHeader>Заголовок меню</MenuHeader>
26
26
  <MenuSeparator />
27
27
  <MenuItem>Раз</MenuItem>
@@ -34,12 +34,12 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
34
34
  </DropdownMenu>;
35
35
  ```
36
36
 
37
- С указанием максимальной высоты меню
37
+ Меню с заданной максимальной высотой.
38
38
 
39
39
  ```jsx harmony
40
40
  import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
41
41
 
42
- <DropdownMenu caption={<Button use="primary">Открыть меню</Button>} menuMaxHeight={150}>
42
+ <DropdownMenu caption={<Button use="primary">Открыть меню c заданной высотой</Button>} menuMaxHeight={150}>
43
43
  <MenuHeader>Заголовок меню</MenuHeader>
44
44
  <MenuSeparator />
45
45
  <MenuItem>Раз</MenuItem>
@@ -52,7 +52,58 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
52
52
  </DropdownMenu>;
53
53
  ```
54
54
 
55
- В `caption` можно передать любой элемент
55
+ Меню с выпадашкой слева по центру.
56
+
57
+ ```jsx harmony
58
+ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
59
+
60
+ <DropdownMenu positions={["left middle"]} caption={<Button use="primary">Открыть меню</Button>}>
61
+ <MenuHeader>Заголовок меню</MenuHeader>
62
+ <MenuSeparator />
63
+ <MenuItem>Раз</MenuItem>
64
+ <MenuItem>Два</MenuItem>
65
+ <MenuItem>Три</MenuItem>
66
+ <MenuSeparator />
67
+ <MenuItem>Раз</MenuItem>
68
+ <MenuItem>Два</MenuItem>
69
+ <MenuItem>Три</MenuItem>
70
+ </DropdownMenu>;
71
+ ```
72
+
73
+ Меню c шапкой и подвалом.
74
+
75
+ ```jsx harmony
76
+ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
77
+
78
+ <DropdownMenu
79
+ header={<p>Это шапка в виде обычного текста</p>}
80
+ footer={<Button>А это подвал в виде кнопки</Button>}
81
+ caption={<Button use="primary">Открыть меню</Button>}
82
+ >
83
+ <MenuItem>Раз</MenuItem>
84
+ <MenuItem>Два</MenuItem>
85
+ <MenuItem>Три</MenuItem>
86
+ </DropdownMenu>;
87
+ ```
88
+
89
+ Меню с отключенной анимацией.
90
+
91
+ ```jsx harmony
92
+ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
93
+
94
+ <DropdownMenu
95
+ disableAnimations
96
+ caption={<Button use="primary">Открыть меню без анимации</Button>}
97
+ >
98
+ <MenuHeader>Заголовок меню</MenuHeader>
99
+ <MenuSeparator />
100
+ <MenuItem>Раз</MenuItem>
101
+ <MenuItem>Два</MenuItem>
102
+ <MenuItem>Три</MenuItem>
103
+ </DropdownMenu>;
104
+ ```
105
+
106
+ В `caption` можно передать любой элемент.
56
107
 
57
108
  ```jsx harmony
58
109
  import MenuIcon from '@skbkontur/react-icons/Menu';
@@ -71,3 +122,33 @@ import { MenuItem } from '@skbkontur/react-ui';
71
122
  <MenuItem>Три</MenuItem>
72
123
  </DropdownMenu>;
73
124
  ```
125
+
126
+
127
+ Условный рендер элементов меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
128
+
129
+ ```jsx harmony
130
+ import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
131
+
132
+ const [showItems, setShowItems] = React.useState(false);
133
+
134
+ const hiddenItems = [
135
+ <MenuSeparator />,
136
+ <MenuItem>А я скрываюсь</MenuItem>,
137
+ <MenuItem>И я</MenuItem>,
138
+ <MenuItem>Я с вами</MenuItem>,
139
+ ];
140
+
141
+
142
+ <Gapped>
143
+ <Button onClick={() => setShowItems(!showItems)}>
144
+ {showItems ? 'Спрятать' : 'Показать'} элементы
145
+ </Button>
146
+
147
+ <DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
148
+ <MenuItem>Меня видно всегда</MenuItem>
149
+ <MenuItem>Меня тоже</MenuItem>
150
+ <MenuItem>Ага, и меня!</MenuItem>
151
+ {showItems && hiddenItems}
152
+ </DropdownMenu>
153
+ </Gapped>
154
+ ```
@@ -16,8 +16,11 @@ export interface KebabProps extends CommonProps {
16
16
  onOpen: () => void;
17
17
  size: 'small' | 'medium' | 'large';
18
18
  /**
19
- * Список позиций доступных для расположения выпадашки
20
- * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка
19
+ * Список позиций доступных для расположения выпадашки.
20
+ *
21
+ * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
22
+ *
23
+ * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
21
24
  * @default ['bottom left', 'bottom right', 'top left', 'top right']
22
25
  */
23
26
  positions: PopupPosition[];
@@ -49,6 +49,9 @@ var _Kebab = require("./Kebab.styles");var
49
49
 
50
50
 
51
51
 
52
+
53
+
54
+
52
55
 
53
56
 
54
57
 
@@ -1 +1 @@
1
- {"version":3,"sources":["Kebab.tsx"],"names":["Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","menuMaxHeight","children","icon","iconsmall","size","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPosition } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps {\n disabled?: boolean;\n /**\n * Функция вызываемая при закрытии выпадашки\n * @default () => undefined\n */\n onClose: () => void;\n /**\n * Функция вызываемая при открытии выпадашки\n * @default () => undefined\n */\n onOpen: () => void;\n size: 'small' | 'medium' | 'large';\n /**\n * Список позиций доступных для расположения выпадашки\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions: PopupPosition[];\n menuMaxHeight?: number | string;\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n /**\n * Кастомная иконка\n */\n icon?: React.ReactNode;\n}\n\nexport interface KebabState {\n anchor: Nullable<HTMLElement>;\n focusedByTab: boolean;\n opened: boolean;\n}\n\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n public static __KONTUR_REACT_UI__ = 'Kebab';\n\n public static propTypes = {};\n\n public static defaultProps = {\n onOpen: () => undefined,\n onClose: () => undefined,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n size: 'small',\n disableAnimations: isTestEnv,\n icon: <MenuKebabIcon />,\n };\n\n public state = {\n opened: false,\n focusedByTab: false,\n anchor: null,\n };\n\n private theme!: Theme;\n\n private listener: {\n remove: () => void;\n } = {\n remove: () => undefined,\n };\n\n public componentDidMount() {\n /** addListener'у нужен колбэк в аргумент */\n this.listener = LayoutEvents.addListener(() => undefined);\n }\n\n public componentWillUnmount() {\n this.listener.remove();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.kebabPinOffset,\n popupMargin: theme.kebabMargin,\n popupPinSize: theme.kebabPinSize,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { disabled, positions } = this.props;\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n popupHasPin\n positions={positions}\n onChangeMenuState={this.handleChangeMenuState}\n caption={this.renderCaption}\n disableAnimations={this.props.disableAnimations}\n menuMaxHeight={this.props.menuMaxHeight}\n >\n {!disabled && this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n const { disabled } = this.props;\n const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n this.handleCaptionKeyDown(event, captionProps.openMenu);\n }\n };\n\n const handleCaptionClick = () => {\n if (!disabled) {\n captionProps.toggleMenu();\n }\n };\n\n return (\n <span\n tabIndex={disabled ? -1 : 0}\n onClick={handleCaptionClick}\n onKeyDown={handleCaptionKeyDown}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n className={cx({\n [styles.kebab(this.theme)]: true,\n [styles.opened(this.theme)]: captionProps.opened,\n [styles.disabled()]: disabled,\n [styles.focused(this.theme)]: this.state.focusedByTab,\n })}\n >\n {this.renderIcon()}\n </span>\n );\n };\n\n private handleCaptionKeyDown = (\n e: React.KeyboardEvent<HTMLDivElement>,\n openMenu: PopupMenuCaptionProps['openMenu'],\n ) => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n openMenu(true);\n }\n };\n\n private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n this.setState(\n {\n opened: isOpened,\n focusedByTab: !isOpened && restoreFocus,\n },\n () => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.state.opened) {\n this.props.onOpen();\n } else {\n this.props.onClose();\n }\n },\n );\n };\n\n private handleFocus = () => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private handleBlur = () => {\n this.setState({\n focusedByTab: false,\n });\n };\n\n private renderIcon() {\n return (\n <div\n className={cx({\n [styles.icon()]: true,\n [styles.iconsmall()]: this.props.size === 'small',\n [styles.iconmedium()]: this.props.size === 'medium',\n [styles.iconlarge()]: this.props.size === 'large',\n })}\n >\n {this.props.icon}\n </div>\n );\n }\n}\n\nKebab.propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n /**\n * Размер кебаба small 14px | large 20px\n */\n size: PropTypes.string,\n\n /**\n * Коллбек, вызывающийся перед закрытием кебаба\n */\n onClose: PropTypes.func,\n\n /**\n * Коллбек, вызывающийся перед открытием кебаба\n */\n onOpen: PropTypes.func,\n};\n"]}
1
+ {"version":3,"sources":["Kebab.tsx"],"names":["Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","menuMaxHeight","children","icon","iconsmall","size","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPosition } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps {\n disabled?: boolean;\n /**\n * Функция вызываемая при закрытии выпадашки\n * @default () => undefined\n */\n onClose: () => void;\n /**\n * Функция вызываемая при открытии выпадашки\n * @default () => undefined\n */\n onOpen: () => void;\n size: 'small' | 'medium' | 'large';\n /**\n * Список позиций доступных для расположения выпадашки.\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: PopupPosition[];\n menuMaxHeight?: number | string;\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n /**\n * Кастомная иконка\n */\n icon?: React.ReactNode;\n}\n\nexport interface KebabState {\n anchor: Nullable<HTMLElement>;\n focusedByTab: boolean;\n opened: boolean;\n}\n\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n public static __KONTUR_REACT_UI__ = 'Kebab';\n\n public static propTypes = {};\n\n public static defaultProps = {\n onOpen: () => undefined,\n onClose: () => undefined,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n size: 'small',\n disableAnimations: isTestEnv,\n icon: <MenuKebabIcon />,\n };\n\n public state = {\n opened: false,\n focusedByTab: false,\n anchor: null,\n };\n\n private theme!: Theme;\n\n private listener: {\n remove: () => void;\n } = {\n remove: () => undefined,\n };\n\n public componentDidMount() {\n /** addListener'у нужен колбэк в аргумент */\n this.listener = LayoutEvents.addListener(() => undefined);\n }\n\n public componentWillUnmount() {\n this.listener.remove();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.kebabPinOffset,\n popupMargin: theme.kebabMargin,\n popupPinSize: theme.kebabPinSize,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { disabled, positions } = this.props;\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n popupHasPin\n positions={positions}\n onChangeMenuState={this.handleChangeMenuState}\n caption={this.renderCaption}\n disableAnimations={this.props.disableAnimations}\n menuMaxHeight={this.props.menuMaxHeight}\n >\n {!disabled && this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n const { disabled } = this.props;\n const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n this.handleCaptionKeyDown(event, captionProps.openMenu);\n }\n };\n\n const handleCaptionClick = () => {\n if (!disabled) {\n captionProps.toggleMenu();\n }\n };\n\n return (\n <span\n tabIndex={disabled ? -1 : 0}\n onClick={handleCaptionClick}\n onKeyDown={handleCaptionKeyDown}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n className={cx({\n [styles.kebab(this.theme)]: true,\n [styles.opened(this.theme)]: captionProps.opened,\n [styles.disabled()]: disabled,\n [styles.focused(this.theme)]: this.state.focusedByTab,\n })}\n >\n {this.renderIcon()}\n </span>\n );\n };\n\n private handleCaptionKeyDown = (\n e: React.KeyboardEvent<HTMLDivElement>,\n openMenu: PopupMenuCaptionProps['openMenu'],\n ) => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n openMenu(true);\n }\n };\n\n private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n this.setState(\n {\n opened: isOpened,\n focusedByTab: !isOpened && restoreFocus,\n },\n () => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.state.opened) {\n this.props.onOpen();\n } else {\n this.props.onClose();\n }\n },\n );\n };\n\n private handleFocus = () => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private handleBlur = () => {\n this.setState({\n focusedByTab: false,\n });\n };\n\n private renderIcon() {\n return (\n <div\n className={cx({\n [styles.icon()]: true,\n [styles.iconsmall()]: this.props.size === 'small',\n [styles.iconmedium()]: this.props.size === 'medium',\n [styles.iconlarge()]: this.props.size === 'large',\n })}\n >\n {this.props.icon}\n </div>\n );\n }\n}\n\nKebab.propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n /**\n * Размер кебаба small 14px | large 20px\n */\n size: PropTypes.string,\n\n /**\n * Коллбек, вызывающийся перед закрытием кебаба\n */\n onClose: PropTypes.func,\n\n /**\n * Коллбек, вызывающийся перед открытием кебаба\n */\n onOpen: PropTypes.func,\n};\n"]}