@skbkontur/react-ui 4.14.0-next.0 → 4.14.0-next.1

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 (46) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/cjs/components/Button/Button.d.ts +2 -6
  3. package/cjs/components/Button/Button.js +14 -5
  4. package/cjs/components/Button/Button.js.map +1 -1
  5. package/cjs/components/DropdownMenu/DropdownMenu.d.ts +1 -1
  6. package/cjs/components/DropdownMenu/DropdownMenu.js +2 -1
  7. package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
  8. package/cjs/components/Kebab/Kebab.d.ts +4 -1
  9. package/cjs/components/Kebab/Kebab.js +9 -3
  10. package/cjs/components/Kebab/Kebab.js.map +1 -1
  11. package/cjs/components/Modal/Modal.d.ts +3 -3
  12. package/cjs/components/Modal/Modal.js +20 -2
  13. package/cjs/components/Modal/Modal.js.map +1 -1
  14. package/cjs/components/SidePage/SidePage.d.ts +3 -3
  15. package/cjs/components/SidePage/SidePage.js +8 -1
  16. package/cjs/components/SidePage/SidePage.js.map +1 -1
  17. package/cjs/components/Switcher/Switcher.d.ts +4 -2
  18. package/cjs/components/Switcher/Switcher.js +13 -3
  19. package/cjs/components/Switcher/Switcher.js.map +1 -1
  20. package/cjs/internal/PopupMenu/PopupMenu.d.ts +8 -0
  21. package/cjs/internal/PopupMenu/PopupMenu.js +23 -3
  22. package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
  23. package/cjs/typings/html.d.ts +1 -0
  24. package/components/Button/Button/Button.js +13 -4
  25. package/components/Button/Button/Button.js.map +1 -1
  26. package/components/Button/Button.d.ts +2 -6
  27. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +2 -1
  28. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
  29. package/components/DropdownMenu/DropdownMenu.d.ts +1 -1
  30. package/components/Kebab/Kebab/Kebab.js +6 -1
  31. package/components/Kebab/Kebab/Kebab.js.map +1 -1
  32. package/components/Kebab/Kebab.d.ts +4 -1
  33. package/components/Modal/Modal/Modal.js +28 -10
  34. package/components/Modal/Modal/Modal.js.map +1 -1
  35. package/components/Modal/Modal.d.ts +3 -3
  36. package/components/SidePage/SidePage/SidePage.js +9 -3
  37. package/components/SidePage/SidePage/SidePage.js.map +1 -1
  38. package/components/SidePage/SidePage.d.ts +3 -3
  39. package/components/Switcher/Switcher/Switcher.js +8 -2
  40. package/components/Switcher/Switcher/Switcher.js.map +1 -1
  41. package/components/Switcher/Switcher.d.ts +4 -2
  42. package/internal/PopupMenu/PopupMenu/PopupMenu.js +13 -2
  43. package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
  44. package/internal/PopupMenu/PopupMenu.d.ts +8 -0
  45. package/package.json +1 -1
  46. package/typings/html.d.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+ # [4.14.0-next.1](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.14.0-next.0...@skbkontur/react-ui@4.14.0-next.1) (2023-06-01)
7
+
8
+
9
+ ### Features
10
+
11
+ * **Button, Modal, SidePage, Switcher:** pass props for a11y ([#3163](https://github.com/skbkontur/retail-ui/issues/3163)) ([694e8d9](https://github.com/skbkontur/retail-ui/commit/694e8d97fb07842cc925cfdacc35b167fb1ff9b3))
12
+
13
+
14
+
15
+
16
+
6
17
  # [4.14.0-next.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.13.4...@skbkontur/react-ui@4.14.0-next.0) (2023-05-15)
7
18
 
8
19
 
@@ -1,9 +1,9 @@
1
- import React, { AriaAttributes } from 'react';
1
+ import React, { AriaAttributes, HTMLAttributes } from 'react';
2
2
  import { CommonProps } from '../../internal/CommonWrapper';
3
3
  export declare type ButtonSize = 'small' | 'medium' | 'large';
4
4
  export declare type ButtonType = 'button' | 'submit' | 'reset';
5
5
  export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
6
- export interface ButtonProps extends CommonProps {
6
+ export interface ButtonProps extends CommonProps, Pick<AriaAttributes, 'aria-haspopup' | 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-checked'>, Pick<HTMLAttributes<unknown>, 'role'> {
7
7
  /** @ignore */
8
8
  _noPadding?: boolean;
9
9
  /** @ignore */
@@ -115,10 +115,6 @@ export interface ButtonProps extends CommonProps {
115
115
  * CSS-свойство `width`.
116
116
  */
117
117
  width?: number | string;
118
- /**
119
- * Атрибут для указания id элемента(-ов), описывающих его
120
- */
121
- 'aria-describedby'?: AriaAttributes['aria-describedby'];
122
118
  }
123
119
  export interface ButtonState {
124
120
  focusedByTab: boolean;
@@ -164,8 +164,6 @@ var _Button = require("./Button.styles");var _class, _class2, _temp;
164
164
 
165
165
 
166
166
 
167
-
168
-
169
167
 
170
168
 
171
169
 
@@ -438,6 +436,17 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
438
436
 
439
437
 
440
438
 
439
+
440
+
441
+
442
+
443
+
444
+
445
+
446
+
447
+
448
+
449
+
441
450
 
442
451
 
443
452
 
@@ -476,8 +485,8 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
476
485
  * @public
477
486
  */;_proto.focus = function focus() {var _this$node;(_this$node = this.node) == null ? void 0 : _this$node.focus();} /**
478
487
  * @public
479
- */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null ? void 0 : _this$node2.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx7, _cx8;var _this$props = this.props,corners = _this$props.corners,active = _this$props.active,disabled = _this$props.disabled,borderless = _this$props.borderless,checked = _this$props.checked,error = _this$props.error,warning = _this$props.warning,loading = _this$props.loading,arrow = _this$props.arrow,narrow = _this$props.narrow,icon = _this$props.icon,_noPadding = _this$props._noPadding,_noRightPadding = _this$props._noRightPadding,visuallyFocused = _this$props.visuallyFocused,align = _this$props.align,disableFocus = _this$props.disableFocus,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onKeyDown = _this$props.onKeyDown,onClick = _this$props.onClick,width = _this$props.width,children = _this$props.children,ariaDescribedby = _this$props['aria-describedby'];var _this$getProps = this.getProps(),use = _this$getProps.use,type = _this$getProps.type;var sizeClass = this.getSizeClassName();var isFocused = this.state.focusedByTab || visuallyFocused;var isLink = use === 'link';var rootProps = { // By default the type attribute is 'submit'. IE8 will fire a click event
488
+ */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null ? void 0 : _this$node2.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx7, _cx8;var _this$props = this.props,corners = _this$props.corners,active = _this$props.active,disabled = _this$props.disabled,borderless = _this$props.borderless,checked = _this$props.checked,error = _this$props.error,warning = _this$props.warning,loading = _this$props.loading,arrow = _this$props.arrow,narrow = _this$props.narrow,icon = _this$props.icon,_noPadding = _this$props._noPadding,_noRightPadding = _this$props._noRightPadding,visuallyFocused = _this$props.visuallyFocused,align = _this$props.align,disableFocus = _this$props.disableFocus,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onKeyDown = _this$props.onKeyDown,onClick = _this$props.onClick,width = _this$props.width,children = _this$props.children,ariaDescribedby = _this$props['aria-describedby'],ariaHasPopup = _this$props['aria-haspopup'],ariaControls = _this$props['aria-controls'],ariaLabel = _this$props['aria-label'],ariaChecked = _this$props['aria-checked'],role = _this$props.role;var _this$getProps = this.getProps(),use = _this$getProps.use,type = _this$getProps.type;var sizeClass = this.getSizeClassName();var isFocused = this.state.focusedByTab || visuallyFocused;var isLink = use === 'link';var rootProps = { // By default the type attribute is 'submit'. IE8 will fire a click event
480
489
  // on this button if somewhere on the page user presses Enter while some
481
490
  // input is focused. So we set type to 'button' by default.
482
- type: type, className: (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = true, _cx[_Button.styles[use](this.theme)] = true, _cx[_Button.activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[_Button.styles.focus(this.theme)] = isFocused, _cx[_Button.styles.checked(this.theme)] = checked, _cx[_Button.styles.checkedFocused(this.theme)] = checked && isFocused, _cx[_Button.styles.disabled(this.theme)] = disabled || loading, _cx[_Button.styles.checkedDisabled(this.theme)] = checked && disabled, _cx[_Button.styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[_Button.styles.narrow()] = narrow, _cx[_Button.styles.noPadding()] = _noPadding, _cx[_Button.styles.noRightPadding()] = _noRightPadding, _cx)), style: (0, _extends2.default)({ textAlign: align }, corners), disabled: disabled || loading, onClick: onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, tabIndex: disableFocus ? -1 : 0, title: this.props.title };var wrapProps = { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Button.styles.wrap(this.theme)] = true, _cx2[_Button.styles.wrapArrow()] = arrow === true, _cx2[_Button.styles.wrapArrowLeft()] = arrow === 'left', _cx2[this.getSizeWrapClassName()] = true, _cx2)), style: { width: width } };var innerShadowNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.globalClasses.innerShadow });var outlineNode = null;if (!isFocused || isLink) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.outline(), (_cx3 = {}, _cx3[_Button.styles.outlineWarning(this.theme)] = warning, _cx3[_Button.styles.outlineError(this.theme)] = error, _cx3[_Button.styles.outlineLink()] = isLink, _cx3[_Button.styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[_Button.styles.outlineLinkError(this.theme)] = isLink && error, _cx3)) });}var loadingNode = null;if (loading && !icon) {loadingNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.styles.loading() }, this.getLoadingSpinner());}var iconNode = null;if (icon) {var _cx4;iconNode = /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.styles.icon(), this.getSizeIconClassName(), (_cx4 = {}, _cx4[_Button.styles.iconNoRightMargin()] = !children, _cx4[_Button.styles.iconLink(this.theme)] = isLink, _cx4)) }, loading ? this.getLoadingSpinner() : icon);}var arrowNode = null;if (arrow) {var _cx5;arrowNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Button.styles.arrow()] = true, _cx5[_Button.styles.arrowWarning(this.theme)] = !checked && warning, _cx5[_Button.styles.arrowError(this.theme)] = !checked && error, _cx5[_Button.styles.arrowFocus(this.theme)] = !checked && isFocused, _cx5[_Button.styles.arrowLeft()] = arrow === 'left', _cx5)) }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperTop) }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperBottom) }));} // Force disable all props and features, that cannot be use with Link
483
- if (isLink) {var _cx6;rootProps.className = (0, _Emotion.cx)((_cx6 = {}, _cx6[_Button.styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[_Button.styles.link(this.theme)] = true, _cx6[_Button.styles.linkFocus(this.theme)] = isFocused, _cx6[_Button.styles.linkDisabled(this.theme)] = disabled || loading, _cx6));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(this.theme), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;arrowNode = null;}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("span", wrapProps, /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({ "data-tid": ButtonDataTids.root, ref: this._ref }, rootProps, { "aria-describedby": ariaDescribedby }), innerShadowNode, outlineNode, loadingNode, arrowNode, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx7 = {}, _cx7[_Button.styles.captionTranslated()] = active || checked, _cx7[_Button.styles.captionLink()] = isLink, _cx7[_Button.styles.captionDisabled()] = !checked && disabled, _cx7)) }, iconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)((_cx8 = {}, _cx8[_Button.styles.visibilityHidden()] = !!loadingNode, _cx8)) }, children)))));};_proto.getLoadingSpinner = function getLoadingSpinner() {return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, type: "mini" });};_proto.getSizeClassName = function getSizeClassName() {var _cx9, _cx10, _cx11;switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx10));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx11));}};_proto.getSizeIconClassName = function getSizeIconClassName() {switch (this.getProps().size) {case 'large':return _Button.styles.iconLarge(this.theme);case 'medium':return _Button.styles.iconMedium(this.theme);case 'small':default:return _Button.styles.iconSmall(this.theme);}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.getProps().size) {case 'large':return _Button.styles.wrapLarge(this.theme);case 'medium':return _Button.styles.wrapMedium(this.theme);case 'small':default:return _Button.styles.wrapSmall(this.theme);}};return Button;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = { use: 'default', size: 'small', type: 'button' }, _temp)) || _class;exports.Button = Button;var isButton = (0, _utils.isReactUIComponent)('Button');exports.isButton = isButton;
491
+ type: type, role: role, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup, 'aria-controls': ariaControls, 'aria-label': ariaLabel, 'aria-checked': ariaChecked, className: (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = true, _cx[_Button.styles[use](this.theme)] = true, _cx[_Button.activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[_Button.styles.focus(this.theme)] = isFocused, _cx[_Button.styles.checked(this.theme)] = checked, _cx[_Button.styles.checkedFocused(this.theme)] = checked && isFocused, _cx[_Button.styles.disabled(this.theme)] = disabled || loading, _cx[_Button.styles.checkedDisabled(this.theme)] = checked && disabled, _cx[_Button.styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[_Button.styles.narrow()] = narrow, _cx[_Button.styles.noPadding()] = _noPadding, _cx[_Button.styles.noRightPadding()] = _noRightPadding, _cx)), style: (0, _extends2.default)({ textAlign: align }, corners), disabled: disabled || loading, onClick: onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, tabIndex: disableFocus ? -1 : 0, title: this.props.title };var wrapProps = { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Button.styles.wrap(this.theme)] = true, _cx2[_Button.styles.wrapArrow()] = arrow === true, _cx2[_Button.styles.wrapArrowLeft()] = arrow === 'left', _cx2[this.getSizeWrapClassName()] = true, _cx2)), style: { width: width } };var innerShadowNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.globalClasses.innerShadow });var outlineNode = null;if (!isFocused || isLink) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.outline(), (_cx3 = {}, _cx3[_Button.styles.outlineWarning(this.theme)] = warning, _cx3[_Button.styles.outlineError(this.theme)] = error, _cx3[_Button.styles.outlineLink()] = isLink, _cx3[_Button.styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[_Button.styles.outlineLinkError(this.theme)] = isLink && error, _cx3)) });}var loadingNode = null;if (loading && !icon) {loadingNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.styles.loading() }, this.getLoadingSpinner());}var iconNode = null;if (icon) {var _cx4;iconNode = /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.styles.icon(), this.getSizeIconClassName(), (_cx4 = {}, _cx4[_Button.styles.iconNoRightMargin()] = !children, _cx4[_Button.styles.iconLink(this.theme)] = isLink, _cx4)) }, loading ? this.getLoadingSpinner() : icon);}var arrowNode = null;if (arrow) {var _cx5;arrowNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Button.styles.arrow()] = true, _cx5[_Button.styles.arrowWarning(this.theme)] = !checked && warning, _cx5[_Button.styles.arrowError(this.theme)] = !checked && error, _cx5[_Button.styles.arrowFocus(this.theme)] = !checked && isFocused, _cx5[_Button.styles.arrowLeft()] = arrow === 'left', _cx5)) }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperTop) }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperBottom) }));} // Force disable all props and features, that cannot be use with Link
492
+ if (isLink) {var _cx6;rootProps.className = (0, _Emotion.cx)((_cx6 = {}, _cx6[_Button.styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[_Button.styles.link(this.theme)] = true, _cx6[_Button.styles.linkFocus(this.theme)] = isFocused, _cx6[_Button.styles.linkDisabled(this.theme)] = disabled || loading, _cx6));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(this.theme), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;arrowNode = null;}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("span", wrapProps, /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({ "data-tid": ButtonDataTids.root, ref: this._ref }, rootProps), innerShadowNode, outlineNode, loadingNode, arrowNode, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx7 = {}, _cx7[_Button.styles.captionTranslated()] = active || checked, _cx7[_Button.styles.captionLink()] = isLink, _cx7[_Button.styles.captionDisabled()] = !checked && disabled, _cx7)) }, iconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)((_cx8 = {}, _cx8[_Button.styles.visibilityHidden()] = !!loadingNode, _cx8)) }, children)))));};_proto.getLoadingSpinner = function getLoadingSpinner() {return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, type: "mini" });};_proto.getSizeClassName = function getSizeClassName() {var _cx9, _cx10, _cx11;switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx10));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx11));}};_proto.getSizeIconClassName = function getSizeIconClassName() {switch (this.getProps().size) {case 'large':return _Button.styles.iconLarge(this.theme);case 'medium':return _Button.styles.iconMedium(this.theme);case 'small':default:return _Button.styles.iconSmall(this.theme);}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.getProps().size) {case 'large':return _Button.styles.wrapLarge(this.theme);case 'medium':return _Button.styles.wrapMedium(this.theme);case 'small':default:return _Button.styles.wrapSmall(this.theme);}};return Button;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = { use: 'default', size: 'small', type: 'button' }, _temp)) || _class;exports.Button = Button;var isButton = (0, _utils.isReactUIComponent)('Button');exports.isButton = isButton;
@@ -1 +1 @@
1
- {"version":3,"sources":["Button.tsx"],"names":["ButtonDataTids","root","Button","rootNode","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","keyListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","renderMain","corners","active","borderless","checked","error","warning","arrow","narrow","icon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","ariaDescribedby","use","type","sizeClass","getSizeClassName","isFocused","isLink","rootProps","className","styles","activeStyles","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","globalClasses","innerShadow","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightMargin","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","link","linkFocus","linkDisabled","Object","assign","wrapLink","undefined","setRootNode","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeMedium","sizeMediumIE11","sizeSmall","sizeSmallIE11","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","React","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { isReactUIComponent } from '../../lib/utils';\nimport { isIE11, isEdge } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\n\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';\n\nexport interface ButtonProps extends CommonProps {\n /** @ignore */\n _noPadding?: boolean;\n\n /** @ignore */\n _noRightPadding?: boolean;\n\n /**\n * Применяет к кнопке стили псевдокласса `:active`.\n */\n active?: boolean;\n\n /**\n * CSS-свойство `text-align`.\n */\n align?: React.CSSProperties['textAlign'];\n\n /**\n * Превращает обычную кнопку в кнопку со стрелкой.\n */\n arrow?: boolean | 'left';\n\n /**\n * Даёт кнопке фокус после окончания загрузки страницы.\n */\n autoFocus?: boolean;\n\n /**\n * Убирает обводку у кнопки.\n */\n borderless?: boolean;\n\n /**\n * @ignore\n */\n checked?: boolean;\n\n children?: React.ReactNode;\n\n /** @ignore */\n corners?: React.CSSProperties;\n\n /**\n * Отключенное состояние кнопки.\n */\n disabled?: boolean;\n\n /** @ignore */\n disableFocus?: boolean;\n\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n\n /**\n * Иконка слева от текста кнопки.\n */\n icon?: React.ReactElement<any>;\n\n /**\n * Переводит кнопку в состояние загрузки.\n */\n loading?: boolean;\n\n /**\n * Сужает кнопку.\n */\n narrow?: boolean;\n\n /**\n * HTML-событие `onblur`.\n */\n onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onclick`.\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onfocus`.\n */\n onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `keydown`.\n */\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onmouseenter`.\n */\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onmouseover`.\n */\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * Задаёт размер кнопки.\n *\n * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n */\n size?: ButtonSize;\n\n /**\n * HTML-атрибут `type`.\n */\n type?: ButtonType;\n\n /**\n * HTML-атрибут `title`.\n */\n title?: string;\n\n /**\n * Стиль кнопки.\n *\n * **Допустимые значения**: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`.\n */\n use?: ButtonUse;\n\n /** @ignore */\n visuallyFocused?: boolean;\n\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n\n /**\n * CSS-свойство `width`.\n */\n width?: number | string;\n\n /**\n * Атрибут для указания id элемента(-ов), описывающих его\n */\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport interface ButtonState {\n focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n root: 'Button__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;\n\n@rootNode\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n public static __KONTUR_REACT_UI__ = 'Button';\n public static __BUTTON__ = true;\n\n public static defaultProps: DefaultProps = {\n use: 'default',\n size: 'small',\n type: 'button',\n };\n\n private getProps = createPropsGetter(Button.defaultProps);\n\n public state = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private node: HTMLButtonElement | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n public static getDerivedStateFromProps(props: ButtonProps) {\n if (props.loading || props.disabled) {\n return { focusedByTab: false };\n }\n return null;\n }\n\n /**\n * @public\n */\n public focus() {\n this.node?.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n this.node?.blur();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n corners,\n active,\n disabled,\n borderless,\n checked,\n error,\n warning,\n loading,\n arrow,\n narrow,\n icon,\n _noPadding,\n _noRightPadding,\n visuallyFocused,\n align,\n disableFocus,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onClick,\n width,\n children,\n 'aria-describedby': ariaDescribedby,\n } = this.props;\n const { use, type } = this.getProps();\n const sizeClass = this.getSizeClassName();\n\n const isFocused = this.state.focusedByTab || visuallyFocused;\n const isLink = use === 'link';\n const rootProps = {\n // By default the type attribute is 'submit'. IE8 will fire a click event\n // on this button if somewhere on the page user presses Enter while some\n // input is focused. So we set type to 'button' by default.\n type,\n className: cx({\n [styles.root(this.theme)]: true,\n [styles[use](this.theme)]: true,\n [activeStyles[use](this.theme)]: active,\n [sizeClass]: true,\n [styles.focus(this.theme)]: isFocused,\n [styles.checked(this.theme)]: checked,\n [styles.checkedFocused(this.theme)]: checked && isFocused,\n [styles.disabled(this.theme)]: disabled || loading,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n [styles.narrow()]: narrow,\n [styles.noPadding()]: _noPadding,\n [styles.noRightPadding()]: _noRightPadding,\n }),\n style: {\n textAlign: align,\n ...corners,\n },\n disabled: disabled || loading,\n onClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n tabIndex: disableFocus ? -1 : 0,\n title: this.props.title,\n };\n\n const wrapProps = {\n className: cx({\n [styles.wrap(this.theme)]: true,\n [styles.wrapArrow()]: arrow === true,\n [styles.wrapArrowLeft()]: arrow === 'left',\n [this.getSizeWrapClassName()]: true,\n }),\n style: {\n width,\n },\n };\n\n const innerShadowNode = <div className={globalClasses.innerShadow} />;\n\n let outlineNode = null;\n if (!isFocused || isLink) {\n outlineNode = (\n <div\n className={cx(styles.outline(), {\n [styles.outlineWarning(this.theme)]: warning,\n [styles.outlineError(this.theme)]: error,\n [styles.outlineLink()]: isLink,\n [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n [styles.outlineLinkError(this.theme)]: isLink && error,\n })}\n />\n );\n }\n\n let loadingNode = null;\n if (loading && !icon) {\n loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n }\n\n let iconNode = null;\n if (icon) {\n iconNode = (\n <span\n className={cx(styles.icon(), this.getSizeIconClassName(), {\n [styles.iconNoRightMargin()]: !children,\n [styles.iconLink(this.theme)]: isLink,\n })}\n >\n {loading ? this.getLoadingSpinner() : icon}\n </span>\n );\n }\n\n let arrowNode = null;\n if (arrow) {\n arrowNode = (\n <div\n className={cx({\n [styles.arrow()]: true,\n [styles.arrowWarning(this.theme)]: !checked && warning,\n [styles.arrowError(this.theme)]: !checked && error,\n [styles.arrowFocus(this.theme)]: !checked && isFocused,\n [styles.arrowLeft()]: arrow === 'left',\n })}\n >\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)} />\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)} />\n </div>\n );\n }\n\n // Force disable all props and features, that cannot be use with Link\n if (isLink) {\n rootProps.className = cx({\n [styles.root(this.theme)]: true,\n [sizeClass]: true,\n [styles.link(this.theme)]: true,\n [styles.linkFocus(this.theme)]: isFocused,\n [styles.linkDisabled(this.theme)]: disabled || loading,\n });\n Object.assign(wrapProps, {\n className: cx(styles.wrap(this.theme), styles.wrapLink()),\n style: { width: wrapProps.style.width },\n });\n rootProps.style.textAlign = undefined;\n arrowNode = null;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <span {...wrapProps}>\n <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps} aria-describedby={ariaDescribedby}>\n {innerShadowNode}\n {outlineNode}\n {loadingNode}\n {arrowNode}\n <div\n className={cx(styles.caption(), globalClasses.caption, {\n [styles.captionTranslated()]: active || checked,\n [styles.captionLink()]: isLink,\n [styles.captionDisabled()]: !checked && disabled,\n })}\n >\n {iconNode}\n <span className={cx({ [styles.visibilityHidden()]: !!loadingNode })}>{children}</span>\n </div>\n </button>\n </span>\n </CommonWrapper>\n );\n }\n\n private getLoadingSpinner() {\n return <Spinner caption={null} dimmed type=\"mini\" />;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx(styles.sizeLarge(this.theme), { [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge });\n case 'medium':\n return cx(styles.sizeMedium(this.theme), { [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge });\n case 'small':\n default:\n return cx(styles.sizeSmall(this.theme), { [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge });\n }\n }\n\n private getSizeIconClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.iconLarge(this.theme);\n case 'medium':\n return styles.iconMedium(this.theme);\n case 'small':\n default:\n return styles.iconSmall(this.theme);\n }\n }\n\n private getSizeWrapClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.wrapLarge(this.theme);\n case 'medium':\n return styles.wrapMedium(this.theme);\n case 'small':\n default:\n return styles.wrapSmall(this.theme);\n }\n }\n\n private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n if (!this.props.disabled && !this.props.disableFocus) {\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 this.props.onFocus?.(e);\n }\n };\n\n private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n this.setState({ focusedByTab: false });\n if (!this.props.disabled && !this.props.disableFocus) {\n this.props.onBlur?.(e);\n }\n };\n\n private _ref = (node: HTMLButtonElement | null) => {\n this.node = node;\n };\n}\n\nexport const isButton = isReactUIComponent<ButtonProps>('Button');\n"]}
1
+ {"version":3,"sources":["Button.tsx"],"names":["ButtonDataTids","root","Button","rootNode","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","keyListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","renderMain","corners","active","borderless","checked","error","warning","arrow","narrow","icon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","ariaDescribedby","ariaHasPopup","ariaControls","ariaLabel","ariaChecked","role","use","type","sizeClass","getSizeClassName","isFocused","isLink","rootProps","className","styles","activeStyles","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","globalClasses","innerShadow","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightMargin","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","link","linkFocus","linkDisabled","Object","assign","wrapLink","undefined","setRootNode","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeMedium","sizeMediumIE11","sizeSmall","sizeSmallIE11","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","React","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\n\nimport { isReactUIComponent } from '../../lib/utils';\nimport { isIE11, isEdge } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\n\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';\n\nexport interface ButtonProps\n extends CommonProps,\n Pick<AriaAttributes, 'aria-haspopup' | 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-checked'>,\n Pick<HTMLAttributes<unknown>, 'role'> {\n /** @ignore */\n _noPadding?: boolean;\n\n /** @ignore */\n _noRightPadding?: boolean;\n\n /**\n * Применяет к кнопке стили псевдокласса `:active`.\n */\n active?: boolean;\n\n /**\n * CSS-свойство `text-align`.\n */\n align?: React.CSSProperties['textAlign'];\n\n /**\n * Превращает обычную кнопку в кнопку со стрелкой.\n */\n arrow?: boolean | 'left';\n\n /**\n * Даёт кнопке фокус после окончания загрузки страницы.\n */\n autoFocus?: boolean;\n\n /**\n * Убирает обводку у кнопки.\n */\n borderless?: boolean;\n\n /**\n * @ignore\n */\n checked?: boolean;\n\n children?: React.ReactNode;\n\n /** @ignore */\n corners?: React.CSSProperties;\n\n /**\n * Отключенное состояние кнопки.\n */\n disabled?: boolean;\n\n /** @ignore */\n disableFocus?: boolean;\n\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n\n /**\n * Иконка слева от текста кнопки.\n */\n icon?: React.ReactElement<any>;\n\n /**\n * Переводит кнопку в состояние загрузки.\n */\n loading?: boolean;\n\n /**\n * Сужает кнопку.\n */\n narrow?: boolean;\n\n /**\n * HTML-событие `onblur`.\n */\n onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onclick`.\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onfocus`.\n */\n onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `keydown`.\n */\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onmouseenter`.\n */\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onmouseover`.\n */\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * Задаёт размер кнопки.\n *\n * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n */\n size?: ButtonSize;\n\n /**\n * HTML-атрибут `type`.\n */\n type?: ButtonType;\n\n /**\n * HTML-атрибут `title`.\n */\n title?: string;\n\n /**\n * Стиль кнопки.\n *\n * **Допустимые значения**: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`.\n */\n use?: ButtonUse;\n\n /** @ignore */\n visuallyFocused?: boolean;\n\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n\n /**\n * CSS-свойство `width`.\n */\n width?: number | string;\n}\n\nexport interface ButtonState {\n focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n root: 'Button__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;\n\n@rootNode\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n public static __KONTUR_REACT_UI__ = 'Button';\n public static __BUTTON__ = true;\n\n public static defaultProps: DefaultProps = {\n use: 'default',\n size: 'small',\n type: 'button',\n };\n\n private getProps = createPropsGetter(Button.defaultProps);\n\n public state = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private node: HTMLButtonElement | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n public static getDerivedStateFromProps(props: ButtonProps) {\n if (props.loading || props.disabled) {\n return { focusedByTab: false };\n }\n return null;\n }\n\n /**\n * @public\n */\n public focus() {\n this.node?.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n this.node?.blur();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n corners,\n active,\n disabled,\n borderless,\n checked,\n error,\n warning,\n loading,\n arrow,\n narrow,\n icon,\n _noPadding,\n _noRightPadding,\n visuallyFocused,\n align,\n disableFocus,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onClick,\n width,\n children,\n 'aria-describedby': ariaDescribedby,\n 'aria-haspopup': ariaHasPopup,\n 'aria-controls': ariaControls,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n } = this.props;\n const { use, type } = this.getProps();\n const sizeClass = this.getSizeClassName();\n\n const isFocused = this.state.focusedByTab || visuallyFocused;\n const isLink = use === 'link';\n const rootProps = {\n // By default the type attribute is 'submit'. IE8 will fire a click event\n // on this button if somewhere on the page user presses Enter while some\n // input is focused. So we set type to 'button' by default.\n type,\n role,\n 'aria-describedby': ariaDescribedby,\n 'aria-haspopup': ariaHasPopup,\n 'aria-controls': ariaControls,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n className: cx({\n [styles.root(this.theme)]: true,\n [styles[use](this.theme)]: true,\n [activeStyles[use](this.theme)]: active,\n [sizeClass]: true,\n [styles.focus(this.theme)]: isFocused,\n [styles.checked(this.theme)]: checked,\n [styles.checkedFocused(this.theme)]: checked && isFocused,\n [styles.disabled(this.theme)]: disabled || loading,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n [styles.narrow()]: narrow,\n [styles.noPadding()]: _noPadding,\n [styles.noRightPadding()]: _noRightPadding,\n }),\n style: {\n textAlign: align,\n ...corners,\n },\n disabled: disabled || loading,\n onClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n tabIndex: disableFocus ? -1 : 0,\n title: this.props.title,\n };\n\n const wrapProps = {\n className: cx({\n [styles.wrap(this.theme)]: true,\n [styles.wrapArrow()]: arrow === true,\n [styles.wrapArrowLeft()]: arrow === 'left',\n [this.getSizeWrapClassName()]: true,\n }),\n style: {\n width,\n },\n };\n\n const innerShadowNode = <div className={globalClasses.innerShadow} />;\n\n let outlineNode = null;\n if (!isFocused || isLink) {\n outlineNode = (\n <div\n className={cx(styles.outline(), {\n [styles.outlineWarning(this.theme)]: warning,\n [styles.outlineError(this.theme)]: error,\n [styles.outlineLink()]: isLink,\n [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n [styles.outlineLinkError(this.theme)]: isLink && error,\n })}\n />\n );\n }\n\n let loadingNode = null;\n if (loading && !icon) {\n loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n }\n\n let iconNode = null;\n if (icon) {\n iconNode = (\n <span\n className={cx(styles.icon(), this.getSizeIconClassName(), {\n [styles.iconNoRightMargin()]: !children,\n [styles.iconLink(this.theme)]: isLink,\n })}\n >\n {loading ? this.getLoadingSpinner() : icon}\n </span>\n );\n }\n\n let arrowNode = null;\n if (arrow) {\n arrowNode = (\n <div\n className={cx({\n [styles.arrow()]: true,\n [styles.arrowWarning(this.theme)]: !checked && warning,\n [styles.arrowError(this.theme)]: !checked && error,\n [styles.arrowFocus(this.theme)]: !checked && isFocused,\n [styles.arrowLeft()]: arrow === 'left',\n })}\n >\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)} />\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)} />\n </div>\n );\n }\n\n // Force disable all props and features, that cannot be use with Link\n if (isLink) {\n rootProps.className = cx({\n [styles.root(this.theme)]: true,\n [sizeClass]: true,\n [styles.link(this.theme)]: true,\n [styles.linkFocus(this.theme)]: isFocused,\n [styles.linkDisabled(this.theme)]: disabled || loading,\n });\n Object.assign(wrapProps, {\n className: cx(styles.wrap(this.theme), styles.wrapLink()),\n style: { width: wrapProps.style.width },\n });\n rootProps.style.textAlign = undefined;\n arrowNode = null;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <span {...wrapProps}>\n <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>\n {innerShadowNode}\n {outlineNode}\n {loadingNode}\n {arrowNode}\n <div\n className={cx(styles.caption(), globalClasses.caption, {\n [styles.captionTranslated()]: active || checked,\n [styles.captionLink()]: isLink,\n [styles.captionDisabled()]: !checked && disabled,\n })}\n >\n {iconNode}\n <span className={cx({ [styles.visibilityHidden()]: !!loadingNode })}>{children}</span>\n </div>\n </button>\n </span>\n </CommonWrapper>\n );\n }\n\n private getLoadingSpinner() {\n return <Spinner caption={null} dimmed type=\"mini\" />;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx(styles.sizeLarge(this.theme), { [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge });\n case 'medium':\n return cx(styles.sizeMedium(this.theme), { [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge });\n case 'small':\n default:\n return cx(styles.sizeSmall(this.theme), { [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge });\n }\n }\n\n private getSizeIconClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.iconLarge(this.theme);\n case 'medium':\n return styles.iconMedium(this.theme);\n case 'small':\n default:\n return styles.iconSmall(this.theme);\n }\n }\n\n private getSizeWrapClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.wrapLarge(this.theme);\n case 'medium':\n return styles.wrapMedium(this.theme);\n case 'small':\n default:\n return styles.wrapSmall(this.theme);\n }\n }\n\n private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n if (!this.props.disabled && !this.props.disableFocus) {\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 this.props.onFocus?.(e);\n }\n };\n\n private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n this.setState({ focusedByTab: false });\n if (!this.props.disabled && !this.props.disableFocus) {\n this.props.onBlur?.(e);\n }\n };\n\n private _ref = (node: HTMLButtonElement | null) => {\n this.node = node;\n };\n}\n\nexport const isButton = isReactUIComponent<ButtonProps>('Button');\n"]}
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { PopupMenuProps } from '../../internal/PopupMenu';
3
3
  import { PopupPositionsType } from '../../internal/Popup';
4
4
  import { CommonProps } from '../../internal/CommonWrapper';
5
- export interface DropdownMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
5
+ export interface DropdownMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId'> {
6
6
  /** Максимальная высота меню */
7
7
  menuMaxHeight?: React.CSSProperties['maxWidth'];
8
8
  /** Ширина меню */
@@ -127,6 +127,7 @@ DropdownMenu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/
127
127
 
128
128
 
129
129
 
130
+
130
131
 
131
132
 
132
133
  open = function () {
@@ -141,4 +142,4 @@ DropdownMenu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/
141
142
  }
142
143
  };_this.
143
144
 
144
- refPopupMenu = function (ref) {return _this.popupMenu = ref;};if (!props.caption && !_currentEnvironment.isProductionEnv) {throw new Error('Prop "caption" is required!!!');}return _this;}var _proto = DropdownMenu.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupMargin: '0px' }, 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.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { ref: this.refPopupMenu, caption: this.props.caption, menuMaxHeight: this.props.menuMaxHeight, menuWidth: this.props.menuWidth, 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 }, this.props.children));};return DropdownMenu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'DropdownMenu', _class2.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, positions: ['bottom left', 'bottom right', 'top left', 'top right'] }, _temp)) || _class;exports.DropdownMenu = DropdownMenu;
145
+ refPopupMenu = function (ref) {return _this.popupMenu = ref;};if (!props.caption && !_currentEnvironment.isProductionEnv) {throw new Error('Prop "caption" is required!!!');}return _this;}var _proto = DropdownMenu.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupMargin: '0px' }, 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.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { ref: this.refPopupMenu, caption: this.props.caption, menuMaxHeight: this.props.menuMaxHeight, menuWidth: this.props.menuWidth, 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.default.Component), _class2.__KONTUR_REACT_UI__ = 'DropdownMenu', _class2.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, positions: ['bottom left', 'bottom right', 'top left', 'top right'] }, _temp)) || _class;exports.DropdownMenu = DropdownMenu;
@@ -1 +1 @@
1
- {"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","rootNode","props","getProps","defaultProps","popupMenu","open","close","refPopupMenu","ref","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupMargin","renderMain","positions","disableAnimations","setRootNode","menuMaxHeight","menuWidth","header","footer","width","onClose","onOpen","children","React","Component","__KONTUR_REACT_UI__","isTestEnv"],"mappings":"0UAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,gE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA;AACA;AACA,G;;AAEaA,Y,OADZC,kB;;;;;;;;;;;;;AAcC,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAL9BC,QAK8B,GALnB,0CAAkBH,YAAY,CAACI,YAA/B,CAKmB,OAH9BC,SAG8B,GAHG,IAGH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwD/BC,IAAAA,IAxD+B,GAwDxB,YAAY;AACxB,UAAI,MAAKD,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeC,IAAf;AACD;AACF,KA5DqC;;AA8D/BC,IAAAA,KA9D+B,GA8DvB,YAAY;AACzB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,KAAf;AACD;AACF,KAlEqC;;AAoE9BC,IAAAA,YApE8B,GAoEf,UAACC,GAAD,UAA+B,MAAKJ,SAAL,GAAiBI,GAAhD,EApEe,CAGpC,IAAI,CAACP,KAAK,CAACQ,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,KAAKhB,KAAL,CAAWQ,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,qBAAyC,KAAKP,QAAL,EAAzC,CAAQgB,SAAR,kBAAQA,SAAR,CAAmBC,iBAAnB,kBAAmBA,iBAAnB,CACA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKC,WAAjC,IAAkD,KAAKnB,KAAvD,gBACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKM,YADZ,EAEE,OAAO,EAAE,KAAKN,KAAL,CAAWQ,OAFtB,EAGE,aAAa,EAAE,KAAKR,KAAL,CAAWoB,aAH5B,EAIE,SAAS,EAAE,KAAKpB,KAAL,CAAWqB,SAJxB,EAKE,WAAW,EAAE,KALf,EAME,SAAS,EAAEJ,SANb,EAOE,iBAAiB,EAAEC,iBAPrB,EAQE,MAAM,EAAE,KAAKlB,KAAL,CAAWsB,MARrB,EASE,MAAM,EAAE,KAAKtB,KAAL,CAAWuB,MATrB,EAUE,KAAK,EAAE,KAAKvB,KAAL,CAAWwB,KAVpB,EAWE,OAAO,EAAE,KAAKxB,KAAL,CAAWyB,OAXtB,EAYE,MAAM,EAAE,KAAKzB,KAAL,CAAW0B,MAZrB,IAcG,KAAK1B,KAAL,CAAW2B,QAdd,CADF,CADF,CAoBD,C,uBAnE+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtB5B,Y,GAA6B,EACzCgB,iBAAiB,EAAEa,6BADsB,EAEzCd,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAF8B,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 { PopupPositionsType } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface DropdownMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {\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\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 (\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 const { positions, disableAnimations } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n ref={this.refPopupMenu}\n caption={this.props.caption}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\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 >\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"]}
1
+ {"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","rootNode","props","getProps","defaultProps","popupMenu","open","close","refPopupMenu","ref","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupMargin","renderMain","positions","disableAnimations","setRootNode","menuMaxHeight","menuWidth","header","footer","width","onClose","onOpen","popupMenuId","children","React","Component","__KONTUR_REACT_UI__","isTestEnv"],"mappings":"0UAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,gE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA;AACA;AACA,G;;AAEaA,Y,OADZC,kB;;;;;;;;;;;;;AAcC,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAL9BC,QAK8B,GALnB,0CAAkBH,YAAY,CAACI,YAA/B,CAKmB,OAH9BC,SAG8B,GAHG,IAGH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyD/BC,IAAAA,IAzD+B,GAyDxB,YAAY;AACxB,UAAI,MAAKD,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeC,IAAf;AACD;AACF,KA7DqC;;AA+D/BC,IAAAA,KA/D+B,GA+DvB,YAAY;AACzB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,KAAf;AACD;AACF,KAnEqC;;AAqE9BC,IAAAA,YArE8B,GAqEf,UAACC,GAAD,UAA+B,MAAKJ,SAAL,GAAiBI,GAAhD,EArEe,CAGpC,IAAI,CAACP,KAAK,CAACQ,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,KAAKhB,KAAL,CAAWQ,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,qBAAyC,KAAKP,QAAL,EAAzC,CAAQgB,SAAR,kBAAQA,SAAR,CAAmBC,iBAAnB,kBAAmBA,iBAAnB,CACA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKC,WAAjC,IAAkD,KAAKnB,KAAvD,gBACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKM,YADZ,EAEE,OAAO,EAAE,KAAKN,KAAL,CAAWQ,OAFtB,EAGE,aAAa,EAAE,KAAKR,KAAL,CAAWoB,aAH5B,EAIE,SAAS,EAAE,KAAKpB,KAAL,CAAWqB,SAJxB,EAKE,WAAW,EAAE,KALf,EAME,SAAS,EAAEJ,SANb,EAOE,iBAAiB,EAAEC,iBAPrB,EAQE,MAAM,EAAE,KAAKlB,KAAL,CAAWsB,MARrB,EASE,MAAM,EAAE,KAAKtB,KAAL,CAAWuB,MATrB,EAUE,KAAK,EAAE,KAAKvB,KAAL,CAAWwB,KAVpB,EAWE,OAAO,EAAE,KAAKxB,KAAL,CAAWyB,OAXtB,EAYE,MAAM,EAAE,KAAKzB,KAAL,CAAW0B,MAZrB,EAaE,WAAW,EAAE,KAAK1B,KAAL,CAAW2B,WAb1B,IAeG,KAAK3B,KAAL,CAAW4B,QAfd,CADF,CADF,CAqBD,C,uBApE+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtB7B,Y,GAA6B,EACzCgB,iBAAiB,EAAEc,6BADsB,EAEzCf,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAF8B,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 { PopupPositionsType } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface DropdownMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId'> {\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\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 (\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 const { positions, disableAnimations } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n ref={this.refPopupMenu}\n caption={this.props.caption}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\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"]}
@@ -3,7 +3,7 @@ import { PopupMenuProps } from '../../internal/PopupMenu';
3
3
  import { Nullable } from '../../typings/utility-types';
4
4
  import { PopupPositionsType } from '../../internal/Popup';
5
5
  import { CommonProps } from '../../internal/CommonWrapper';
6
- export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
6
+ export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId'> {
7
7
  disabled?: boolean;
8
8
  size?: 'small' | 'medium' | 'large';
9
9
  /**
@@ -29,6 +29,9 @@ export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' |
29
29
  */
30
30
  'aria-describedby'?: AriaAttributes['aria-describedby'];
31
31
  }
32
+ export declare const KebabDataTids: {
33
+ readonly caption: "Kebab__caption";
34
+ };
32
35
  export interface KebabState {
33
36
  anchor: Nullable<HTMLElement>;
34
37
  focusedByTab: boolean;
@@ -1,4 +1,4 @@
1
- "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Kebab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
1
+ "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.KebabDataTids = exports.Kebab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
2
2
  var _propTypes = _interopRequireDefault(require("prop-types"));
3
3
 
4
4
  var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -17,7 +17,7 @@ var _Emotion = require("../../lib/theming/Emotion");
17
17
  var _rootNode = require("../../lib/rootNode");
18
18
  var _createPropsGetter = require("../../lib/createPropsGetter");
19
19
 
20
- var _Kebab = require("./Kebab.styles");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
20
+ var _Kebab = require("./Kebab.styles");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
21
21
 
22
22
 
23
23
 
@@ -44,6 +44,10 @@ var _Kebab = require("./Kebab.styles");var _class, _class2, _temp;function _getR
44
44
 
45
45
 
46
46
 
47
+
48
+
49
+ var KebabDataTids = {
50
+ caption: 'Kebab__caption' };exports.KebabDataTids = KebabDataTids;var
47
51
 
48
52
 
49
53
 
@@ -138,6 +142,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
138
142
 
139
143
 
140
144
 
145
+
141
146
 
142
147
 
143
148
  renderCaption = function (captionProps) {var _cx;
@@ -156,6 +161,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
156
161
 
157
162
  return /*#__PURE__*/(
158
163
  _react.default.createElement("span", {
164
+ "data-tid": KebabDataTids.caption,
159
165
  tabIndex: disabled ? -1 : 0,
160
166
  onClick: handleCaptionClick,
161
167
  onKeyDown: handleCaptionKeyDown,
@@ -206,7 +212,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
206
212
  _this.setState({
207
213
  focusedByTab: false });
208
214
 
209
- };return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var disabled = this.props.disabled;var _this$getProps = this.getProps(),positions = _this$getProps.positions,disableAnimations = _this$getProps.disableAnimations,onOpen = _this$getProps.onOpen,onClose = _this$getProps.onClose;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: disableAnimations, menuMaxHeight: this.props.menuMaxHeight, onOpen: onOpen, onClose: onClose }, !disabled && this.props.children));};_proto.
215
+ };return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var disabled = this.props.disabled;var _this$getProps = this.getProps(),positions = _this$getProps.positions,disableAnimations = _this$getProps.disableAnimations,onOpen = _this$getProps.onOpen,onClose = _this$getProps.onClose;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: disableAnimations, menuMaxHeight: this.props.menuMaxHeight, onOpen: onOpen, onClose: onClose, popupMenuId: this.props.popupMenuId }, !disabled && this.props.children));};_proto.
210
216
 
211
217
  renderIcon = function renderIcon() {var _cx2;
212
218
  var _this$getProps2 = this.getProps(),size = _this$getProps2.size,icon = _this$getProps2.icon;
@@ -1 +1 @@
1
- {"version":3,"sources":["Kebab.tsx"],"names":["Kebab","rootNode","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","theme","opened","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","menuMaxHeight","children","size","icon","iconsmall","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } 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, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } 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';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {\n disabled?: boolean;\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?: PopupPositionsType[];\n menuMaxHeight?: number | string;\n /**\n * Не показывать анимацию\n */\n disableAnimations?: boolean;\n /**\n * Кастомная иконка\n */\n icon?: React.ReactNode;\n /**\n * Атрибут для указания id элемента(-ов), описывающих его\n */\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport interface KebabState {\n anchor: Nullable<HTMLElement>;\n focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<\n Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations' | 'icon'>\n>;\n\n@rootNode\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: 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 private getProps = createPropsGetter(Kebab.defaultProps);\n\n public state: KebabState = {\n focusedByTab: false,\n anchor: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\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 } = this.props;\n const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n popupHasPin\n positions={positions}\n onChangeMenuState={this.handleChangeMenuState}\n caption={this.renderCaption}\n disableAnimations={disableAnimations}\n menuMaxHeight={this.props.menuMaxHeight}\n onOpen={onOpen}\n onClose={onClose}\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 aria-describedby={this.props['aria-describedby']}\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 focusedByTab: !isOpened && restoreFocus,\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 const { size, icon } = this.getProps();\n return (\n <div\n className={cx({\n [styles.icon()]: true,\n [styles.iconsmall()]: size === 'small',\n [styles.iconmedium()]: size === 'medium',\n [styles.iconlarge()]: size === 'large',\n })}\n >\n {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":["KebabDataTids","caption","Kebab","rootNode","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","theme","opened","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","menuMaxHeight","popupMenuId","children","size","icon","iconsmall","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } 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, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } 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';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId'> {\n disabled?: boolean;\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?: PopupPositionsType[];\n menuMaxHeight?: number | string;\n /**\n * Не показывать анимацию\n */\n disableAnimations?: boolean;\n /**\n * Кастомная иконка\n */\n icon?: React.ReactNode;\n /**\n * Атрибут для указания id элемента(-ов), описывающих его\n */\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n anchor: Nullable<HTMLElement>;\n focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<\n Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations' | 'icon'>\n>;\n\n@rootNode\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: 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 private getProps = createPropsGetter(Kebab.defaultProps);\n\n public state: KebabState = {\n focusedByTab: false,\n anchor: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\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 } = this.props;\n const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n popupHasPin\n positions={positions}\n onChangeMenuState={this.handleChangeMenuState}\n caption={this.renderCaption}\n disableAnimations={disableAnimations}\n menuMaxHeight={this.props.menuMaxHeight}\n onOpen={onOpen}\n onClose={onClose}\n popupMenuId={this.props.popupMenuId}\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 data-tid={KebabDataTids.caption}\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 aria-describedby={this.props['aria-describedby']}\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 focusedByTab: !isOpened && restoreFocus,\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 const { size, icon } = this.getProps();\n return (\n <div\n className={cx({\n [styles.icon()]: true,\n [styles.iconsmall()]: size === 'small',\n [styles.iconmedium()]: size === 'medium',\n [styles.iconlarge()]: size === 'large',\n })}\n >\n {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,9 +1,9 @@
1
- import React from 'react';
1
+ import React, { AriaAttributes, HTMLAttributes } from 'react';
2
2
  import { CommonProps } from '../../internal/CommonWrapper';
3
3
  import { ModalFooter } from './ModalFooter';
4
4
  import { ModalHeader } from './ModalHeader';
5
5
  import { ModalBody } from './ModalBody';
6
- export interface ModalProps extends CommonProps {
6
+ export interface ModalProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
7
7
  /**
8
8
  * Отключает событие onClose, также дизейблит кнопку закрытия модалки
9
9
  */
@@ -45,7 +45,7 @@ export declare const ModalDataTids: {
45
45
  readonly content: "modal-content";
46
46
  readonly close: "modal-close";
47
47
  };
48
- declare type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock'>>;
48
+ declare type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role'>>;
49
49
  /**
50
50
  * Модальное окно
51
51
  *
@@ -68,6 +68,9 @@ var mountedModalsCount = 0;
68
68
 
69
69
 
70
70
 
71
+
72
+
73
+
71
74
 
72
75
 
73
76
 
@@ -106,6 +109,7 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
106
109
 
107
110
 
108
111
 
112
+
109
113
  getProps = (0, _createPropsGetter.createPropsGetter)(Modal.defaultProps);_this.
110
114
 
111
115
  state = {
@@ -249,6 +253,20 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
249
253
 
250
254
 
251
255
 
256
+
257
+
258
+
259
+
260
+
261
+
262
+
263
+
264
+
265
+
266
+
267
+
268
+
269
+
252
270
 
253
271
 
254
272
 
@@ -339,5 +357,5 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
339
357
 
340
358
  setHasPanel = function (hasPanel) {if (hasPanel === void 0) {hasPanel = false;}
341
359
  _this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
342
- };return _this;}var _proto = Modal.prototype;_proto.componentDidMount = function componentDidMount() {this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);if (mountedModalsCount === 0) {window.addEventListener('resize', this.throttledCheckHorizontalScroll);}mountedModalsCount++;window.addEventListener('keydown', this.handleKeyDown);this.checkHorizontalScrollAppearance();if (this.containerNode) {this.containerNode.addEventListener('scroll', LayoutEvents.emit);}};_proto.componentWillUnmount = function componentWillUnmount() {if (--mountedModalsCount === 0) {window.removeEventListener('resize', this.throttledCheckHorizontalScroll);LayoutEvents.emit();}window.removeEventListener('keydown', this.handleKeyDown);if ((0, _utils.isNonNullable)(this.stackSubscription)) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);if (this.containerNode) {this.containerNode.removeEventListener('scroll', LayoutEvents.emit);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$state = this.state,hasHeader = _this$state.hasHeader,hasFooter = _this$state.hasFooter,hasPanel = _this$state.hasPanel;var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll, setHasHeader: this.setHasHeader, setHasFooter: this.setHasFooter, setHasPanel: this.setHasPanel };if (!this.props.noClose) {modalContextProps.close = { disableClose: this.props.disableClose, requestClose: this.requestClose };}if (!hasFooter) {modalContextProps.additionalPadding = true;}if (hasFooter && hasPanel) {modalContextProps.additionalPadding = true;}var style = {};var containerStyle = {};if (this.props.width) {style.width = this.props.width;} else {containerStyle.width = 'auto';}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.styles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { className: _Modal.styles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement("div", { ref: this.refContainer, className: _Modal.styles.container(), onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, "data-tid": ModalDataTids.container }, /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var _cx, _cx2, _cx3, _cx4, _cx5;var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_Modal.styles.centerContainer()] = true, _cx[_Modal.styles.mobileCenterContainer()] = isMobile, _cx[_Modal.styles.alignTop()] = Boolean(_this3.props.alignTop), _cx)), style: isMobile ? undefined : containerStyle, "data-tid": ModalDataTids.content }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Modal.styles.window(_this3.theme)] = true, _cx2[_Modal.styles.mobileWindow()] = isMobile, _cx2)), style: isMobile ? undefined : style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this3.handleResize, fullHeight: isMobile }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: _this3.getProps().disableFocusLock, autoFocus: false, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Modal.styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container') }, !hasHeader && !_this3.props.noClose && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_Modal.styles.closeWrapper(_this3.theme)] = true, _cx4[_Modal.styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4)) }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Modal.styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)), requestClose: _this3.requestClose, disableClose: _this3.props.disableClose })), /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, _this3.props.children)))));})))));};return Modal;}(_react.default.Component);exports.Modal = Modal;Modal.__KONTUR_REACT_UI__ = 'Modal';Modal.Header = _ModalHeader.ModalHeader;Modal.Body = _ModalBody.ModalBody;Modal.Footer = _ModalFooter.ModalFooter;Modal.defaultProps = { // NOTE: в ie нормально не работает
343
- disableFocusLock: _client.isIE11 };
360
+ };return _this;}var _proto = Modal.prototype;_proto.componentDidMount = function componentDidMount() {this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);if (mountedModalsCount === 0) {window.addEventListener('resize', this.throttledCheckHorizontalScroll);}mountedModalsCount++;window.addEventListener('keydown', this.handleKeyDown);this.checkHorizontalScrollAppearance();if (this.containerNode) {this.containerNode.addEventListener('scroll', LayoutEvents.emit);}};_proto.componentWillUnmount = function componentWillUnmount() {if (--mountedModalsCount === 0) {window.removeEventListener('resize', this.throttledCheckHorizontalScroll);LayoutEvents.emit();}window.removeEventListener('keydown', this.handleKeyDown);if ((0, _utils.isNonNullable)(this.stackSubscription)) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);if (this.containerNode) {this.containerNode.removeEventListener('scroll', LayoutEvents.emit);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$props = this.props,noClose = _this$props.noClose,disableClose = _this$props.disableClose,width = _this$props.width,alignTop = _this$props.alignTop,children = _this$props.children,ariaLabel = _this$props['aria-label'],ariaLabelledby = _this$props['aria-labelledby'];var _this$state = this.state,hasHeader = _this$state.hasHeader,hasFooter = _this$state.hasFooter,hasPanel = _this$state.hasPanel;var _this$getProps = this.getProps(),role = _this$getProps.role,disableFocusLock = _this$getProps.disableFocusLock;var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll, setHasHeader: this.setHasHeader, setHasFooter: this.setHasFooter, setHasPanel: this.setHasPanel };if (!noClose) {modalContextProps.close = { disableClose: disableClose, requestClose: this.requestClose };}if (!hasFooter) {modalContextProps.additionalPadding = true;}if (hasFooter && hasPanel) {modalContextProps.additionalPadding = true;}var style = {};var containerStyle = {};if (width) {style.width = width;} else {containerStyle.width = 'auto';}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.styles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { className: _Modal.styles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement("div", { "aria-labelledby": ariaLabelledby, ref: this.refContainer, className: _Modal.styles.container(), onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, "data-tid": ModalDataTids.container }, /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var _cx, _cx2, _cx3, _cx4, _cx5;var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement("div", { "aria-modal": true, "aria-label": ariaLabel, role: role, className: (0, _Emotion.cx)((_cx = {}, _cx[_Modal.styles.centerContainer()] = true, _cx[_Modal.styles.mobileCenterContainer()] = isMobile, _cx[_Modal.styles.alignTop()] = Boolean(alignTop), _cx)), style: isMobile ? undefined : containerStyle, "data-tid": ModalDataTids.content }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Modal.styles.window(_this3.theme)] = true, _cx2[_Modal.styles.mobileWindow()] = isMobile, _cx2)), style: isMobile ? undefined : style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this3.handleResize, fullHeight: isMobile }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: disableFocusLock, autoFocus: false, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Modal.styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container') }, !hasHeader && !noClose && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_Modal.styles.closeWrapper(_this3.theme)] = true, _cx4[_Modal.styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4)) }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Modal.styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)), requestClose: _this3.requestClose, disableClose: disableClose })), /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, children)))));})))));};return Modal;}(_react.default.Component);exports.Modal = Modal;Modal.__KONTUR_REACT_UI__ = 'Modal';Modal.Header = _ModalHeader.ModalHeader;Modal.Body = _ModalBody.ModalBody;Modal.Footer = _ModalFooter.ModalFooter;Modal.defaultProps = { // NOTE: в ie нормально не работает
361
+ disableFocusLock: _client.isIE11, role: 'dialog' };