@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
@@ -1 +1 @@
1
- {"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","TooltipMenu","props","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0C,0BAA1C;;AAEA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,8BAA3C;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,WAAb;;;;;;AAME,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACL,eAAvB,EAAwC;AACtC,YAAM,IAAIM,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,GAZH;;AAcSC,EAAAA,MAdT,GAcE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,YAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEX,YAAY,CAACY,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEF,KAAK,CAACG,oBADxB;AAEEC,cAAAA,WAAW,EAAEJ,KAAK,CAACK,iBAFrB;AAGEC,cAAAA,YAAY,EAAEN,KAAK,CAACO,kBAHtB,EADK;;AAMLP,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACQ,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,GAnCH;;AAqCSA,EAAAA,UArCT,GAqCE,sBAAoB;AAClB,QAAI,CAAC,KAAKZ,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,0BAAC,aAAD,EAAmB,KAAKD,KAAxB;AACE,0BAAC,SAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWa,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKb,KAAL,CAAWc,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKd,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWe,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKf,KAAL,CAAWgB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKhB,KAAL,CAAWiB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKjB,KAAL,CAAWkB,iBARhC;;AAUG,WAAKlB,KAAL,CAAWmB,QAVd,CADF,CADF;;;;AAgBD,GA1DH,sBAAiC3B,KAAK,CAAC4B,SAAvC,EAAarB,W,CACGsB,mB,GAAsB,a,CADzBtB,W,CAGGuB,Y,GAAe,EAC3BJ,iBAAiB,EAAErB,SADQ,E","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPosition } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | {} | MenuHeaderProps>;\n\nexport interface TooltipMenuProps extends CommonProps {\n children?: TooltipMenuChildType | TooltipMenuChildType[];\n /** Максимальная высота меню */\n menuMaxHeight?: number | string;\n /** Ширина меню */\n menuWidth?: number | string;\n /**\n * Элемент или функция возвращающая элемент,\n * если передана, используется вместо ```caption```,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n */\n caption: PopupMenuProps['caption'];\n header?: React.ReactNode;\n footer?: React.ReactNode;\n /** Массив разрешенных положений меню относительно caption'а. */\n positions?: PopupPosition[];\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.\n * Положение зависит от переданного массива ```positions``` и работает так:\n * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,\n * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.\n * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.\n * Если ```positions``` передан или передан пустой массив, используются все возможные положения.\n */\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n };\n constructor(props: TooltipMenuProps) {\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 popupPinOffset: theme.tooltipMenuPinOffset,\n popupMargin: theme.tooltipMenuMargin,\n popupPinSize: theme.tooltipMenuPinSize,\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\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n caption={this.props.caption}\n header={this.props.header}\n footer={this.props.footer}\n positions={this.props.positions}\n popupHasPin={true}\n disableAnimations={this.props.disableAnimations}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n}\n"]}
1
+ {"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","TooltipMenu","props","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0C,0BAA1C;;AAEA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,8BAA3C;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,WAAb;;;;;;AAME,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACL,eAAvB,EAAwC;AACtC,YAAM,IAAIM,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,GAZH;;AAcSC,EAAAA,MAdT,GAcE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,YAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEX,YAAY,CAACY,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEF,KAAK,CAACG,oBADxB;AAEEC,cAAAA,WAAW,EAAEJ,KAAK,CAACK,iBAFrB;AAGEC,cAAAA,YAAY,EAAEN,KAAK,CAACO,kBAHtB,EADK;;AAMLP,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACQ,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,GAnCH;;AAqCSA,EAAAA,UArCT,GAqCE,sBAAoB;AAClB,QAAI,CAAC,KAAKZ,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,0BAAC,aAAD,EAAmB,KAAKD,KAAxB;AACE,0BAAC,SAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWa,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKb,KAAL,CAAWc,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKd,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWe,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKf,KAAL,CAAWgB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKhB,KAAL,CAAWiB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKjB,KAAL,CAAWkB,iBARhC;;AAUG,WAAKlB,KAAL,CAAWmB,QAVd,CADF,CADF;;;;AAgBD,GA1DH,sBAAiC3B,KAAK,CAAC4B,SAAvC,EAAarB,W,CACGsB,mB,GAAsB,a,CADzBtB,W,CAGGuB,Y,GAAe,EAC3BJ,iBAAiB,EAAErB,SADQ,E","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPosition } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | {} | MenuHeaderProps>;\n\nexport interface TooltipMenuProps extends CommonProps {\n children?: TooltipMenuChildType | TooltipMenuChildType[];\n /** Максимальная высота меню */\n menuMaxHeight?: number | string;\n /** Ширина меню */\n menuWidth?: number | string;\n /**\n * Элемент или функция возвращающая элемент,\n * если передана, используется вместо `caption`,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n */\n caption: PopupMenuProps['caption'];\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 /** Список позиций доступных для расположения выпадашки относительно `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 */\n positions?: PopupPosition[];\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n };\n constructor(props: TooltipMenuProps) {\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 popupPinOffset: theme.tooltipMenuPinOffset,\n popupMargin: theme.tooltipMenuMargin,\n popupPinSize: theme.tooltipMenuPinSize,\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\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n caption={this.props.caption}\n header={this.props.header}\n footer={this.props.footer}\n positions={this.props.positions}\n popupHasPin={true}\n disableAnimations={this.props.disableAnimations}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n}\n"]}
@@ -13,14 +13,29 @@ export interface TooltipMenuProps extends CommonProps {
13
13
  menuWidth?: number | string;
14
14
  /**
15
15
  * Элемент или функция возвращающая элемент,
16
- * если передана, используется вместо ```caption```,
16
+ * если передана, используется вместо `caption`,
17
17
  * в таком случае управлять открытием и закрытием меню
18
18
  * придется в этой функции
19
19
  */
20
20
  caption: PopupMenuProps['caption'];
21
+ /**
22
+ * Произвольный элемент, который будет отрендерен в шапке меню.
23
+ *
24
+ * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
25
+ */
21
26
  header?: React.ReactNode;
27
+ /**
28
+ * Произвольный элемент, который будет отрендерен в подвале меню.
29
+ *
30
+ * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
31
+ */
22
32
  footer?: React.ReactNode;
23
- /** Массив разрешенных положений меню относительно caption'а. */
33
+ /** Список позиций доступных для расположения выпадашки относительно `caption`.
34
+ *
35
+ * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
36
+ *
37
+ * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
38
+ */
24
39
  positions?: PopupPosition[];
25
40
  /**
26
41
  * Не показывать анимацию
@@ -28,12 +43,15 @@ export interface TooltipMenuProps extends CommonProps {
28
43
  disableAnimations: boolean;
29
44
  }
30
45
  /**
31
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.
32
- * Положение зависит от переданного массива ```positions``` и работает так:
33
- * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,
34
- * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.
35
- * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.
36
- * Если ```positions``` передан или передан пустой массив, используются все возможные положения.
46
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент.
47
+ *
48
+ * Положение меню задаётся с помощью массива `positions` и работает так:
49
+ * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
50
+ * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
51
+ *
52
+ * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
53
+ *
54
+ * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
37
55
  */
38
56
  export declare class TooltipMenu extends React.Component<TooltipMenuProps> {
39
57
  static __KONTUR_REACT_UI__: string;
@@ -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,15 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
16
16
  </TooltipMenu>;
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
- <TooltipMenu caption={<Button use="primary">Открыть меню</Button>} menuWidth={350}>
24
+ <TooltipMenu
25
+ caption={<Button use="primary">Открыть меню с заданной шириной</Button>}
26
+ menuWidth={350}
27
+ >
25
28
  <MenuHeader>Заголовок меню</MenuHeader>
26
29
  <MenuSeparator />
27
30
  <MenuItem>Раз</MenuItem>
@@ -34,12 +37,15 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
34
37
  </TooltipMenu>;
35
38
  ```
36
39
 
37
- С указанием максимальной высоты меню
40
+ Тултип-меню с заданной максимальной высотой.
38
41
 
39
42
  ```jsx harmony
40
43
  import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
41
44
 
42
- <TooltipMenu caption={<Button use="primary">Открыть меню</Button>} menuMaxHeight={150}>
45
+ <TooltipMenu
46
+ caption={<Button use="primary">Открыть меню с заданной высотой</Button>}
47
+ menuMaxHeight={150}
48
+ >
43
49
  <MenuHeader>Заголовок меню</MenuHeader>
44
50
  <MenuSeparator />
45
51
  <MenuItem>Раз</MenuItem>
@@ -52,7 +58,24 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
52
58
  </TooltipMenu>;
53
59
  ```
54
60
 
55
- В `caption` можно передать любой элемент
61
+ Тултип-меню с отключенной анимацией.
62
+
63
+ ```jsx harmony
64
+ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
65
+
66
+ <TooltipMenu
67
+ disableAnimations
68
+ caption={<Button use="primary">Открыть меню без анимации</Button>}
69
+ >
70
+ <MenuHeader>Заголовок меню</MenuHeader>
71
+ <MenuSeparator />
72
+ <MenuItem>Раз</MenuItem>
73
+ <MenuItem>Два</MenuItem>
74
+ <MenuItem>Три</MenuItem>
75
+ </TooltipMenu>;
76
+ ```
77
+
78
+ В `caption` можно передать любой элемент.
56
79
 
57
80
  ```jsx harmony
58
81
  import { MenuItem } from '@skbkontur/react-ui';
@@ -72,7 +95,7 @@ import MenuIcon from '@skbkontur/react-icons/Menu';
72
95
  </TooltipMenu>;
73
96
  ```
74
97
 
75
- Только справа
98
+ Тултип-меню всегда всплывающее справа от `caption`.
76
99
 
77
100
  ```jsx harmony
78
101
  import { MenuItem } from '@skbkontur/react-ui';
@@ -93,7 +116,7 @@ import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
93
116
  </TooltipMenu>;
94
117
  ```
95
118
 
96
- Меню только сверху выравненное по правому краю `caption`
119
+ Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`.
97
120
 
98
121
  ```jsx harmony
99
122
  import { MenuItem } from '@skbkontur/react-ui';
@@ -113,3 +136,48 @@ import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
113
136
  <MenuItem>Три</MenuItem>
114
137
  </TooltipMenu>;
115
138
  ```
139
+
140
+ Тултип-меню c шапкой и подвалом.
141
+
142
+ ```jsx harmony
143
+ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
144
+
145
+ <TooltipMenu
146
+ header={<p>Это шапка в виде обычного текста</p>}
147
+ footer={<Button>А это подвал в виде кнопки</Button>}
148
+ caption={<Button use="primary">Открыть меню</Button>}
149
+ >
150
+ <MenuItem>Раз</MenuItem>
151
+ <MenuItem>Два</MenuItem>
152
+ <MenuItem>Три</MenuItem>
153
+ </TooltipMenu>;
154
+ ```
155
+
156
+ Условный рендер элементов тултип-меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
157
+
158
+ ```jsx harmony
159
+ import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
160
+
161
+ const [showItems, setShowItems] = React.useState(false);
162
+
163
+ const hiddenItems = [
164
+ <MenuSeparator />,
165
+ <MenuItem>А я скрываюсь</MenuItem>,
166
+ <MenuItem>И я</MenuItem>,
167
+ <MenuItem>Я с вами</MenuItem>,
168
+ ];
169
+
170
+
171
+ <Gapped>
172
+ <Button onClick={() => setShowItems(!showItems)}>
173
+ {showItems ? 'Спрятать' : 'Показать'} элементы
174
+ </Button>
175
+
176
+ <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
177
+ <MenuItem>Меня видно всегда</MenuItem>
178
+ <MenuItem>Меня тоже</MenuItem>
179
+ <MenuItem>Ага, и меня!</MenuItem>
180
+ {showItems && hiddenItems}
181
+ </TooltipMenu>
182
+ </Gapped>
183
+ ```
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@skbkontur/react-ui",
3
- "version": "3.8.1",
3
+ "version": "3.8.2",
4
4
  "description": "UI Components",
5
5
  "main": "cjs/index.js",
6
6
  "module": "index.js",
7
7
  "sideEffects": false,
8
- "homepage": "https://tech.skbkontur.ru/react-ui/3.8.1/",
8
+ "homepage": "https://tech.skbkontur.ru/react-ui/3.8.2/",
9
9
  "repository": {
10
10
  "type": "git",
11
11
  "url": "git@github.com:skbkontur/retail-ui.git"
@@ -1,4 +0,0 @@
1
- import { Theme } from '../../lib/theming/Theme';
2
- export declare const styles: {
3
- root(t: Theme): string;
4
- };
@@ -1,9 +0,0 @@
1
- "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
2
-
3
-
4
- var styles = (0, _Emotion.memoizeStyle)({
5
- root: function root(t) {
6
- return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n color: ", ";\n "])),
7
- t.textColorDefault);
8
-
9
- } });exports.styles = styles;
@@ -1 +0,0 @@
1
- {"version":3,"sources":["CurrencyLabel.styles.ts"],"names":["styles","root","t","css","textColorDefault"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACE,gBADb;;AAGD,GALgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n color: ${t.textColorDefault};\n `;\n },\n});\n"]}
@@ -1,10 +0,0 @@
1
- import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
2
-
3
- var _templateObject;
4
-
5
- import { css, memoizeStyle } from "../../../lib/theming/Emotion";
6
- export var styles = memoizeStyle({
7
- root: function root(t) {
8
- return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n color: ", ";\n "])), t.textColorDefault);
9
- }
10
- });
@@ -1 +0,0 @@
1
- {"version":3,"sources":["CurrencyLabel.styles.ts"],"names":["css","memoizeStyle","styles","root","t","textColorDefault"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACC,gBADb;;AAGD,GALgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n color: ${t.textColorDefault};\n `;\n },\n});\n"]}
@@ -1,6 +0,0 @@
1
- {
2
- "main": "../../../cjs/components/CurrencyLabel/CurrencyLabel.styles.js",
3
- "module": "CurrencyLabel.styles",
4
- "types": "../CurrencyLabel.styles.d.ts",
5
- "sideEffects": false
6
- }
@@ -1,4 +0,0 @@
1
- import { Theme } from '../../lib/theming/Theme';
2
- export declare const styles: {
3
- root(t: Theme): string;
4
- };