@salutejs/plasma-new-hope 0.330.0-dev.0 → 0.331.0-canary.1655.16175078069.0

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 (151) hide show
  1. package/cjs/components/Drawer/Drawer.css +7 -5
  2. package/cjs/components/Drawer/Drawer.js +1 -1
  3. package/cjs/components/Drawer/Drawer.js.map +1 -1
  4. package/cjs/components/Modal/Modal.css +9 -6
  5. package/cjs/components/Modal/Modal.js +7 -3
  6. package/cjs/components/Modal/Modal.js.map +1 -1
  7. package/cjs/components/Modal/Modal.styles.js +6 -4
  8. package/cjs/components/Modal/Modal.styles.js.map +1 -1
  9. package/cjs/components/Modal/{Modal.styles_1gt0sfn.css → Modal.styles_1obtvtw.css} +4 -3
  10. package/cjs/components/Notification/NotificationsProvider.css +7 -3
  11. package/cjs/components/Popup/Popup.js +53 -3
  12. package/cjs/components/Popup/Popup.js.map +1 -1
  13. package/cjs/components/Popup/Popup.styles.js +31 -19
  14. package/cjs/components/Popup/Popup.styles.js.map +1 -1
  15. package/cjs/components/Popup/Popup.styles_1dvwxdu.css +6 -0
  16. package/cjs/components/Popup/Popup.tokens.js +9 -1
  17. package/cjs/components/Popup/Popup.tokens.js.map +1 -1
  18. package/cjs/components/Popup/PopupContext.css +7 -3
  19. package/cjs/components/Popup/utils/getHandleStyles.js +58 -0
  20. package/cjs/components/Popup/utils/getHandleStyles.js.map +1 -0
  21. package/cjs/components/Popup/utils/getRatioBasedOnPlacement.js +36 -0
  22. package/cjs/components/Popup/utils/getRatioBasedOnPlacement.js.map +1 -0
  23. package/cjs/components/Popup/utils/getResizeDirections.js +73 -0
  24. package/cjs/components/Popup/utils/getResizeDirections.js.map +1 -0
  25. package/cjs/components/Popup/utils/index.js.map +1 -1
  26. package/cjs/components/_Icon/Icon.assets/ResizeDiagonal.js +30 -0
  27. package/cjs/components/_Icon/Icon.assets/ResizeDiagonal.js.map +1 -0
  28. package/cjs/components/_Icon/Icons/IconResizeDiagonal.js +30 -0
  29. package/cjs/components/_Icon/Icons/IconResizeDiagonal.js.map +1 -0
  30. package/cjs/index.css +9 -6
  31. package/emotion/cjs/components/Drawer/Drawer.js +3 -2
  32. package/emotion/cjs/components/Modal/Modal.js +8 -4
  33. package/emotion/cjs/components/Modal/Modal.styles.js +11 -6
  34. package/emotion/cjs/components/Popup/Popup.js +56 -4
  35. package/emotion/cjs/components/Popup/Popup.styles.js +22 -8
  36. package/emotion/cjs/components/Popup/Popup.tokens.js +9 -1
  37. package/emotion/cjs/components/Popup/utils/getHandleStyles.js +61 -0
  38. package/emotion/cjs/components/Popup/utils/getRatioBasedOnPlacement.js +54 -0
  39. package/emotion/cjs/components/Popup/utils/getResizeDirections.js +82 -0
  40. package/emotion/cjs/components/Popup/utils/index.js +16 -0
  41. package/emotion/cjs/components/_Icon/Icon.assets/ResizeDiagonal.js +83 -0
  42. package/emotion/cjs/components/_Icon/Icons/IconResizeDiagonal.js +86 -0
  43. package/emotion/cjs/components/_Icon/index.js +4 -0
  44. package/emotion/es/components/Drawer/Drawer.js +3 -2
  45. package/emotion/es/components/Modal/Modal.js +9 -5
  46. package/emotion/es/components/Modal/Modal.styles.js +8 -6
  47. package/emotion/es/components/Popup/Popup.js +52 -5
  48. package/emotion/es/components/Popup/Popup.styles.js +16 -8
  49. package/emotion/es/components/Popup/Popup.tokens.js +9 -1
  50. package/emotion/es/components/Popup/utils/getHandleStyles.js +51 -0
  51. package/emotion/es/components/Popup/utils/getRatioBasedOnPlacement.js +44 -0
  52. package/emotion/es/components/Popup/utils/getResizeDirections.js +72 -0
  53. package/emotion/es/components/Popup/utils/index.js +3 -0
  54. package/emotion/es/components/_Icon/Icon.assets/ResizeDiagonal.js +68 -0
  55. package/emotion/es/components/_Icon/Icons/IconResizeDiagonal.js +71 -0
  56. package/emotion/es/components/_Icon/index.js +1 -0
  57. package/es/components/Drawer/Drawer.css +7 -5
  58. package/es/components/Drawer/Drawer.js +1 -1
  59. package/es/components/Drawer/Drawer.js.map +1 -1
  60. package/es/components/Modal/Modal.css +9 -6
  61. package/es/components/Modal/Modal.js +10 -6
  62. package/es/components/Modal/Modal.js.map +1 -1
  63. package/es/components/Modal/Modal.styles.js +6 -5
  64. package/es/components/Modal/Modal.styles.js.map +1 -1
  65. package/es/components/Modal/{Modal.styles_1gt0sfn.css → Modal.styles_1obtvtw.css} +4 -3
  66. package/es/components/Notification/NotificationsProvider.css +7 -3
  67. package/es/components/Popup/Popup.js +53 -4
  68. package/es/components/Popup/Popup.js.map +1 -1
  69. package/es/components/Popup/Popup.styles.js +30 -20
  70. package/es/components/Popup/Popup.styles.js.map +1 -1
  71. package/es/components/Popup/Popup.styles_1dvwxdu.css +6 -0
  72. package/es/components/Popup/Popup.tokens.js +9 -1
  73. package/es/components/Popup/Popup.tokens.js.map +1 -1
  74. package/es/components/Popup/PopupContext.css +7 -3
  75. package/es/components/Popup/utils/getHandleStyles.js +54 -0
  76. package/es/components/Popup/utils/getHandleStyles.js.map +1 -0
  77. package/es/components/Popup/utils/getRatioBasedOnPlacement.js +32 -0
  78. package/es/components/Popup/utils/getRatioBasedOnPlacement.js.map +1 -0
  79. package/es/components/Popup/utils/getResizeDirections.js +69 -0
  80. package/es/components/Popup/utils/getResizeDirections.js.map +1 -0
  81. package/es/components/Popup/utils/index.js.map +1 -1
  82. package/es/components/_Icon/Icon.assets/ResizeDiagonal.js +22 -0
  83. package/es/components/_Icon/Icon.assets/ResizeDiagonal.js.map +1 -0
  84. package/es/components/_Icon/Icons/IconResizeDiagonal.js +22 -0
  85. package/es/components/_Icon/Icons/IconResizeDiagonal.js.map +1 -0
  86. package/es/index.css +9 -6
  87. package/package.json +3 -2
  88. package/styled-components/cjs/components/Drawer/Drawer.js +3 -2
  89. package/styled-components/cjs/components/Modal/Modal.js +8 -4
  90. package/styled-components/cjs/components/Modal/Modal.styles.js +50 -8
  91. package/styled-components/cjs/components/Popup/Popup.js +56 -4
  92. package/styled-components/cjs/components/Popup/Popup.styles.js +67 -8
  93. package/styled-components/cjs/components/Popup/Popup.tokens.js +9 -1
  94. package/styled-components/cjs/components/Popup/utils/getHandleStyles.js +61 -0
  95. package/styled-components/cjs/components/Popup/utils/getRatioBasedOnPlacement.js +54 -0
  96. package/styled-components/cjs/components/Popup/utils/getResizeDirections.js +82 -0
  97. package/styled-components/cjs/components/Popup/utils/index.js +16 -0
  98. package/styled-components/cjs/components/_Icon/Icon.assets/ResizeDiagonal.js +83 -0
  99. package/styled-components/cjs/components/_Icon/Icons/IconResizeDiagonal.js +86 -0
  100. package/styled-components/cjs/components/_Icon/index.js +4 -0
  101. package/styled-components/es/components/Drawer/Drawer.js +3 -2
  102. package/styled-components/es/components/Modal/Modal.js +9 -5
  103. package/styled-components/es/components/Modal/Modal.styles.js +8 -4
  104. package/styled-components/es/components/Popup/Popup.js +52 -5
  105. package/styled-components/es/components/Popup/Popup.styles.js +22 -4
  106. package/styled-components/es/components/Popup/Popup.tokens.js +9 -1
  107. package/styled-components/es/components/Popup/utils/getHandleStyles.js +51 -0
  108. package/styled-components/es/components/Popup/utils/getRatioBasedOnPlacement.js +44 -0
  109. package/styled-components/es/components/Popup/utils/getResizeDirections.js +72 -0
  110. package/styled-components/es/components/Popup/utils/index.js +3 -0
  111. package/styled-components/es/components/_Icon/Icon.assets/ResizeDiagonal.js +68 -0
  112. package/styled-components/es/components/_Icon/Icons/IconResizeDiagonal.js +71 -0
  113. package/styled-components/es/components/_Icon/index.js +1 -0
  114. package/types/components/Breadcrumbs/utils/index.d.ts +1 -1
  115. package/types/components/Carousel/CarouselOld/Carousel.d.ts +2 -2
  116. package/types/components/Combobox/ComboboxNew/utils/sizeToIconSize.d.ts +1 -1
  117. package/types/components/Drawer/Drawer.d.ts +2 -2
  118. package/types/components/Drawer/Drawer.d.ts.map +1 -1
  119. package/types/components/Drawer/Drawer.types.d.ts +1 -1
  120. package/types/components/Drawer/Drawer.types.d.ts.map +1 -1
  121. package/types/components/Modal/Modal.d.ts +1 -1
  122. package/types/components/Modal/Modal.d.ts.map +1 -1
  123. package/types/components/Modal/Modal.styles.d.ts +1 -0
  124. package/types/components/Modal/Modal.styles.d.ts.map +1 -1
  125. package/types/components/Popup/Popup.d.ts +1 -1
  126. package/types/components/Popup/Popup.d.ts.map +1 -1
  127. package/types/components/Popup/Popup.styles.d.ts +2 -0
  128. package/types/components/Popup/Popup.styles.d.ts.map +1 -1
  129. package/types/components/Popup/Popup.tokens.d.ts +8 -0
  130. package/types/components/Popup/Popup.tokens.d.ts.map +1 -1
  131. package/types/components/Popup/Popup.types.d.ts +52 -0
  132. package/types/components/Popup/Popup.types.d.ts.map +1 -1
  133. package/types/components/Popup/utils/getHandleStyles.d.ts +29 -0
  134. package/types/components/Popup/utils/getHandleStyles.d.ts.map +1 -0
  135. package/types/components/Popup/utils/getRatioBasedOnPlacement.d.ts +3 -0
  136. package/types/components/Popup/utils/getRatioBasedOnPlacement.d.ts.map +1 -0
  137. package/types/components/Popup/utils/getResizeDirections.d.ts +14 -0
  138. package/types/components/Popup/utils/getResizeDirections.d.ts.map +1 -0
  139. package/types/components/Popup/utils/index.d.ts +3 -0
  140. package/types/components/Popup/utils/index.d.ts.map +1 -1
  141. package/types/components/Select/utils/sizeToIconSize.d.ts +1 -1
  142. package/types/components/Table/ui/HeadCell/HeadCell.d.ts +1 -1
  143. package/types/components/Tree/utils/sizeToIconSize.d.ts +1 -1
  144. package/types/components/_Icon/Icon.assets/ResizeDiagonal.d.ts +4 -0
  145. package/types/components/_Icon/Icon.assets/ResizeDiagonal.d.ts.map +1 -0
  146. package/types/components/_Icon/Icons/IconResizeDiagonal.d.ts +4 -0
  147. package/types/components/_Icon/Icons/IconResizeDiagonal.d.ts.map +1 -0
  148. package/types/components/_Icon/index.d.ts +1 -0
  149. package/types/components/_Icon/index.d.ts.map +1 -1
  150. package/cjs/components/Popup/Popup.styles_gq4luz.css +0 -4
  151. package/es/components/Popup/Popup.styles_gq4luz.css +0 -4
@@ -0,0 +1,86 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "IconResizeDiagonal", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return IconResizeDiagonal;
9
+ }
10
+ });
11
+ var _react = /*#__PURE__*/ _interop_require_default(require("react"));
12
+ var _ResizeDiagonal = require("../Icon.assets/ResizeDiagonal");
13
+ var _IconRoot = require("../IconRoot");
14
+ function _define_property(obj, key, value) {
15
+ if (key in obj) {
16
+ Object.defineProperty(obj, key, {
17
+ value: value,
18
+ enumerable: true,
19
+ configurable: true,
20
+ writable: true
21
+ });
22
+ } else {
23
+ obj[key] = value;
24
+ }
25
+ return obj;
26
+ }
27
+ function _interop_require_default(obj) {
28
+ return obj && obj.__esModule ? obj : {
29
+ default: obj
30
+ };
31
+ }
32
+ function _object_spread(target) {
33
+ for(var i = 1; i < arguments.length; i++){
34
+ var source = arguments[i] != null ? arguments[i] : {};
35
+ var ownKeys = Object.keys(source);
36
+ if (typeof Object.getOwnPropertySymbols === "function") {
37
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
38
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
39
+ }));
40
+ }
41
+ ownKeys.forEach(function(key) {
42
+ _define_property(target, key, source[key]);
43
+ });
44
+ }
45
+ return target;
46
+ }
47
+ function _object_without_properties(source, excluded) {
48
+ if (source == null) return {};
49
+ var target = _object_without_properties_loose(source, excluded);
50
+ var key, i;
51
+ if (Object.getOwnPropertySymbols) {
52
+ var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
53
+ for(i = 0; i < sourceSymbolKeys.length; i++){
54
+ key = sourceSymbolKeys[i];
55
+ if (excluded.indexOf(key) >= 0) continue;
56
+ if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
57
+ target[key] = source[key];
58
+ }
59
+ }
60
+ return target;
61
+ }
62
+ function _object_without_properties_loose(source, excluded) {
63
+ if (source == null) return {};
64
+ var target = {};
65
+ var sourceKeys = Object.keys(source);
66
+ var key, i;
67
+ for(i = 0; i < sourceKeys.length; i++){
68
+ key = sourceKeys[i];
69
+ if (excluded.indexOf(key) >= 0) continue;
70
+ target[key] = source[key];
71
+ }
72
+ return target;
73
+ }
74
+ var IconResizeDiagonal = function(_param) {
75
+ var _param_size = _param.size, size = _param_size === void 0 ? 's' : _param_size, color = _param.color, className = _param.className, rest = _object_without_properties(_param, [
76
+ "size",
77
+ "color",
78
+ "className"
79
+ ]);
80
+ return /*#__PURE__*/ _react.default.createElement(_IconRoot.IconRoot, _object_spread({
81
+ className: className,
82
+ size: size,
83
+ color: color,
84
+ icon: _ResizeDiagonal.ResizeDiagonal
85
+ }, rest));
86
+ };
@@ -123,6 +123,9 @@ _export(exports, {
123
123
  get IconResetOutline () {
124
124
  return _IconResetOutline.IconResetOutline;
125
125
  },
126
+ get IconResizeDiagonal () {
127
+ return _IconResizeDiagonal.IconResizeDiagonal;
128
+ },
126
129
  get IconSaluteOutline16 () {
127
130
  return _IconSaluteOutline.IconSaluteOutline16;
128
131
  },
@@ -210,3 +213,4 @@ var _IconEditOutline = require("./Icons/IconEditOutline");
210
213
  var _IconResetOutline = require("./Icons/IconResetOutline");
211
214
  var _IconDoneCircleOutline = require("./Icons/IconDoneCircleOutline");
212
215
  var _IconTrash = require("./Icons/IconTrash");
216
+ var _IconResizeDiagonal = require("./Icons/IconResizeDiagonal");
@@ -70,7 +70,7 @@ import { useDrawer } from "./hooks";
70
70
  // issue #823
71
71
  export var drawerRoot = function(Root) {
72
72
  return /*#__PURE__*/ forwardRef(function(_param, outerRef) {
73
- var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, rest = _object_without_properties(_param, [
73
+ var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, draggable = _param.draggable, rest = _object_without_properties(_param, [
74
74
  "id",
75
75
  "zIndex",
76
76
  "popupInfo",
@@ -96,7 +96,8 @@ export var drawerRoot = function(Root) {
96
96
  "placement",
97
97
  "closeOnEsc",
98
98
  "closeOnOverlayClick",
99
- "asModal"
99
+ "asModal",
100
+ "draggable"
100
101
  ]);
101
102
  var innerIsOpen = Boolean(isOpen || opened);
102
103
  var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);
@@ -66,7 +66,7 @@ import { classes, tokens } from "./Modal.tokens";
66
66
  import { useModal } from "./hooks";
67
67
  import { base as viewCSS } from "./variations/_view/base";
68
68
  import { getIdLastModal } from "./ModalContext";
69
- import { CloseButton, ModalBody, ModalContent } from "./Modal.styles";
69
+ import { CloseButton, ModalBody, ModalContent, base } from "./Modal.styles";
70
70
  // issue #823
71
71
  var Popup = component(popupConfig);
72
72
  /**
@@ -74,7 +74,7 @@ var Popup = component(popupConfig);
74
74
  * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.
75
75
  */ export var modalRoot = function(Root) {
76
76
  return /*#__PURE__*/ forwardRef(function(_param, outerRootRef) {
77
- var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, rest = _object_without_properties(_param, [
77
+ var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, resizable = _param.resizable, draggable = _param.draggable, rest = _object_without_properties(_param, [
78
78
  "id",
79
79
  "withAnimation",
80
80
  "onClose",
@@ -92,7 +92,9 @@ var Popup = component(popupConfig);
92
92
  "opened",
93
93
  "isOpen",
94
94
  "hasBody",
95
- "hasClose"
95
+ "hasClose",
96
+ "resizable",
97
+ "draggable"
96
98
  ]);
97
99
  var innerIsOpen = Boolean(isOpen || opened);
98
100
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
@@ -147,7 +149,9 @@ var Popup = component(popupConfig);
147
149
  zIndex: zIndex,
148
150
  overlay: hasBody ? overlayNode : /*#__PURE__*/ React.createElement(Root, {
149
151
  view: view
150
- }, overlayNode)
152
+ }, overlayNode),
153
+ draggable: draggable,
154
+ resizable: resizable
151
155
  }, rest), hasBody ? /*#__PURE__*/ React.createElement(Root, {
152
156
  view: view
153
157
  }, /*#__PURE__*/ React.createElement(ModalBody, null, /*#__PURE__*/ React.createElement(ModalContent, null, innerHasClose && /*#__PURE__*/ React.createElement(CloseButton, {
@@ -163,7 +167,7 @@ export var modalConfig = {
163
167
  name: 'Modal',
164
168
  tag: 'div',
165
169
  layout: modalRoot,
166
- base: '',
170
+ base: base,
167
171
  variations: {
168
172
  view: {
169
173
  css: viewCSS
@@ -1,25 +1,29 @@
1
1
  import styled from "styled-components";
2
+ import { css } from "styled-components";
2
3
  import { addFocus } from "../../mixins";
3
4
  import { tokens } from "./Modal.tokens";
5
+ export var base = css([
6
+ "height:100%;"
7
+ ]);
4
8
  export var ModalBody = styled.div.withConfig({
5
9
  displayName: "Modal.styles__ModalBody",
6
- componentId: "sc-65f5e73a-0"
10
+ componentId: "sc-96885df7-0"
7
11
  })([
8
- "border-radius:var(",
12
+ "height:100%;box-sizing:border-box;border-radius:var(",
9
13
  ");padding:var(",
10
14
  ");background:var(",
11
15
  ");box-shadow:var(--shadow-down-soft-l);"
12
16
  ], tokens.modalBodyBorderRadius, tokens.modalBodyPadding, tokens.modalBodyBackground);
13
17
  export var ModalContent = styled.div.withConfig({
14
18
  displayName: "Modal.styles__ModalContent",
15
- componentId: "sc-65f5e73a-1"
19
+ componentId: "sc-96885df7-1"
16
20
  })([
17
21
  "position:relative;padding:var(",
18
22
  ");"
19
23
  ], tokens.modalContentPadding);
20
24
  export var CloseButton = styled.button.withConfig({
21
25
  displayName: "Modal.styles__CloseButton",
22
- componentId: "sc-65f5e73a-2"
26
+ componentId: "sc-96885df7-2"
23
27
  })([
24
28
  "top:0;right:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(",
25
29
  ");padding:0;margin:0;outline:none;cursor:pointer;background:transparent;",
@@ -101,12 +101,15 @@ function _unsupported_iterable_to_array(o, minLen) {
101
101
  }
102
102
  import React, { forwardRef, useRef } from "react";
103
103
  import { useForkRef } from "@salutejs/plasma-core";
104
+ import Draggable from "react-draggable";
105
+ import { Resizable } from "re-resizable";
104
106
  import { canUseDOM, cx, safeUseId } from "../../utils";
105
107
  import { Portal } from "../Portal";
108
+ import { getRatioBasedOnPlacement, getResizeDirections, getHandleStyles } from "./utils";
106
109
  import { PopupRoot } from "./PopupRoot";
107
110
  import { usePopup } from "./hooks";
108
111
  import { classes } from "./Popup.tokens";
109
- import { StyledPortalContainer } from "./Popup.styles";
112
+ import { StyledPortalContainer, base, IconResizeDiagonalStyled } from "./Popup.styles";
110
113
  export var handlePosition = function(placement, offset) {
111
114
  var x = '0rem';
112
115
  var y = '0rem';
@@ -170,7 +173,7 @@ export var handlePosition = function(placement, offset) {
170
173
  0,
171
174
  0
172
175
  ] : _param_offset, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, children = _param.children, overlay = _param.overlay, // eslint-disable-next-line @typescript-eslint/no-unused-vars
173
- role = _param.role, zIndex = _param.zIndex, popupInfo = _param.popupInfo, _param_withAnimation = _param.withAnimation, withAnimation = _param_withAnimation === void 0 ? false : _param_withAnimation, className = _param.className, rest = _object_without_properties(_param, [
176
+ role = _param.role, zIndex = _param.zIndex, popupInfo = _param.popupInfo, _param_withAnimation = _param.withAnimation, withAnimation = _param_withAnimation === void 0 ? false : _param_withAnimation, className = _param.className, draggable = _param.draggable, outerResizable = _param.resizable, rest = _object_without_properties(_param, [
174
177
  "id",
175
178
  "isOpen",
176
179
  "opened",
@@ -183,9 +186,15 @@ export var handlePosition = function(placement, offset) {
183
186
  "zIndex",
184
187
  "popupInfo",
185
188
  "withAnimation",
186
- "className"
189
+ "className",
190
+ "draggable",
191
+ "resizable"
187
192
  ]);
193
+ var _resizable_hiddenIcons, _resizable_hiddenIcons1, _resizable_hiddenIcons2, _resizable_hiddenIcons3;
188
194
  var innerIsOpen = isOpen || opened;
195
+ var resizable = typeof outerResizable === 'boolean' ? {
196
+ disabled: !outerResizable
197
+ } : outerResizable;
189
198
  var uniqId = safeUseId();
190
199
  var innerId = id || uniqId;
191
200
  var _usePopup = usePopup({
@@ -211,7 +220,45 @@ export var handlePosition = function(placement, offset) {
211
220
  frame: frame,
212
221
  animationInfo: animationInfo,
213
222
  setVisible: setVisible
214
- }, rest), children));
223
+ }, rest), /*#__PURE__*/ React.createElement(Draggable, {
224
+ defaultClassName: draggable ? classes.draggablePopupWrapper : undefined,
225
+ defaultClassNameDragging: draggable ? classes.draggingPopupWrapper : undefined,
226
+ disabled: !draggable,
227
+ cancel: ".".concat(classes.resizableHandleWrapper)
228
+ }, /*#__PURE__*/ React.createElement(Resizable, {
229
+ enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
230
+ resizeRatio: getRatioBasedOnPlacement(placement),
231
+ defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
232
+ minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
233
+ minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
234
+ maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
235
+ maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
236
+ handleComponent: {
237
+ topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
238
+ className: classes.resizableTopRightIcon,
239
+ color: "inherit",
240
+ size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
241
+ }),
242
+ bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
243
+ className: classes.resizableBottomRightIcon,
244
+ color: "inherit",
245
+ size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
246
+ }),
247
+ bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
248
+ className: classes.resizableBottomLeftIcon,
249
+ color: "inherit",
250
+ size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
251
+ }),
252
+ topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
253
+ className: classes.resizableTopLeftIcon,
254
+ color: "inherit",
255
+ size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
256
+ })
257
+ },
258
+ className: classes.resizableContainer,
259
+ handleStyles: getHandleStyles(resizable === null || resizable === void 0 ? void 0 : resizable.iconSize),
260
+ handleWrapperClass: classes.resizableHandleWrapper
261
+ }, children))));
215
262
  if (typeof frame !== 'string' && frame && frame.current && canUseDOM) {
216
263
  return /*#__PURE__*/ React.createElement(Portal, {
217
264
  container: frame.current
@@ -238,7 +285,7 @@ export var popupConfig = {
238
285
  name: 'Popup',
239
286
  tag: 'div',
240
287
  layout: popupRoot,
241
- base: '',
288
+ base: base,
242
289
  variations: {},
243
290
  defaults: {}
244
291
  };
@@ -1,26 +1,34 @@
1
1
  import styled from "styled-components";
2
+ import { css } from "styled-components";
3
+ import { IconResizeDiagonal } from "../_Icon";
4
+ import { classes } from "./Popup.tokens";
2
5
  import { DEFAULT_Z_INDEX } from "./utils";
6
+ export var base = css([
7
+ ".",
8
+ "{cursor:grab;}.",
9
+ "{cursor:grabbing;}"
10
+ ], classes.draggablePopupWrapper, classes.draggingPopupWrapper);
3
11
  export var StyledPortal = styled.div.withConfig({
4
12
  displayName: "Popup.styles__StyledPortal",
5
- componentId: "sc-9d33eb36-0"
13
+ componentId: "sc-17a0b623-0"
6
14
  })([
7
15
  ""
8
16
  ]);
9
17
  export var StyledPortalContainer = styled.div.withConfig({
10
18
  displayName: "Popup.styles__StyledPortalContainer",
11
- componentId: "sc-9d33eb36-1"
19
+ componentId: "sc-17a0b623-1"
12
20
  })([
13
21
  "width:0;"
14
22
  ]);
15
23
  export var PopupView = styled.div.withConfig({
16
24
  displayName: "Popup.styles__PopupView",
17
- componentId: "sc-9d33eb36-2"
25
+ componentId: "sc-17a0b623-2"
18
26
  })([
19
27
  "position:relative;max-width:100%;pointer-events:all;"
20
28
  ]);
21
29
  export var PopupRootContainer = styled.div.withConfig({
22
30
  displayName: "Popup.styles__PopupRootContainer",
23
- componentId: "sc-9d33eb36-3"
31
+ componentId: "sc-17a0b623-3"
24
32
  })([
25
33
  "position:",
26
34
  ";z-index:",
@@ -52,3 +60,13 @@ export var PopupRootContainer = styled.div.withConfig({
52
60
  var position = param.position;
53
61
  return position.transform || '';
54
62
  });
63
+ export var IconResizeDiagonalStyled = styled(IconResizeDiagonal).withConfig({
64
+ displayName: "Popup.styles__IconResizeDiagonalStyled",
65
+ componentId: "sc-17a0b623-4"
66
+ })([
67
+ "color:var(--text-secondary);&:hover{color:var(--text-secondary-hover);}&:active{color:var(--text-secondary-active);}&.",
68
+ "{transform:rotate(-90deg);}&.",
69
+ "{transform:rotate(0);}&.",
70
+ "{transform:rotate(90deg);}&.",
71
+ "{transform:rotate(180deg);}"
72
+ ], classes.resizableTopRightIcon, classes.resizableBottomRightIcon, classes.resizableBottomLeftIcon, classes.resizableTopLeftIcon);
@@ -3,5 +3,13 @@ export var classes = {
3
3
  * Класс корневого компонента PopupRoot: `popup-base-root`
4
4
  */ root: 'popup-base-root',
5
5
  endAnimation: 'popup-end-animation',
6
- endTransition: 'popup-end-transition'
6
+ endTransition: 'popup-end-transition',
7
+ resizableContainer: 'resizable-container',
8
+ resizableTopRightIcon: 'resizable-top-right-icon',
9
+ resizableBottomRightIcon: 'resizable-bottom-right-icon',
10
+ resizableBottomLeftIcon: 'resizable-bottom-left-icon',
11
+ resizableTopLeftIcon: 'resizable-top-left-icon',
12
+ resizableHandleWrapper: 'resizable-handle-wrapper',
13
+ draggablePopupWrapper: 'draggable-popup-wrapper',
14
+ draggingPopupWrapper: 'dragging-popup-wrapper'
7
15
  };
@@ -0,0 +1,51 @@
1
+ var getBaseDimension = function(iconSize) {
2
+ switch(iconSize){
3
+ case 'xs':
4
+ {
5
+ return 16;
6
+ }
7
+ case 's':
8
+ {
9
+ return 24;
10
+ }
11
+ case 'm':
12
+ {
13
+ return 36;
14
+ }
15
+ default:
16
+ {
17
+ return 16;
18
+ }
19
+ }
20
+ };
21
+ export var getHandleStyles = function() {
22
+ var iconSize = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 's';
23
+ var size = getBaseDimension(iconSize);
24
+ var offset = size / 2;
25
+ return {
26
+ topRight: {
27
+ width: "".concat(size, "px"),
28
+ height: "".concat(size, "px"),
29
+ top: "-".concat(offset, "px"),
30
+ right: "-".concat(offset, "px")
31
+ },
32
+ bottomRight: {
33
+ width: "".concat(size, "px"),
34
+ height: "".concat(size, "px"),
35
+ right: "-".concat(offset, "px"),
36
+ bottom: "-".concat(offset, "px")
37
+ },
38
+ bottomLeft: {
39
+ width: "".concat(size, "px"),
40
+ height: "".concat(size, "px"),
41
+ bottom: "-".concat(offset, "px"),
42
+ left: "-".concat(offset, "px")
43
+ },
44
+ topLeft: {
45
+ width: "".concat(size, "px"),
46
+ height: "".concat(size, "px"),
47
+ top: "-".concat(offset, "px"),
48
+ left: "-".concat(offset, "px")
49
+ }
50
+ };
51
+ };
@@ -0,0 +1,44 @@
1
+ export var getRatioBasedOnPlacement = function(placement) {
2
+ switch(placement){
3
+ case 'center':
4
+ {
5
+ return [
6
+ 2,
7
+ 2
8
+ ];
9
+ }
10
+ case 'top':
11
+ case 'bottom':
12
+ {
13
+ return [
14
+ 2,
15
+ 1
16
+ ];
17
+ }
18
+ case 'left':
19
+ case 'right':
20
+ {
21
+ return [
22
+ 1,
23
+ 2
24
+ ];
25
+ }
26
+ case 'top-left':
27
+ case 'top-right':
28
+ case 'bottom-left':
29
+ case 'bottom-right':
30
+ {
31
+ return [
32
+ 1,
33
+ 1
34
+ ];
35
+ }
36
+ default:
37
+ {
38
+ return [
39
+ 2,
40
+ 2
41
+ ];
42
+ }
43
+ }
44
+ };
@@ -0,0 +1,72 @@
1
+ export var getResizeDirections = function(directions) {
2
+ if (!directions) {
3
+ return {
4
+ top: true,
5
+ right: true,
6
+ bottom: true,
7
+ left: true,
8
+ topRight: true,
9
+ bottomRight: true,
10
+ bottomLeft: true,
11
+ topLeft: true
12
+ };
13
+ }
14
+ var result = {
15
+ top: false,
16
+ right: false,
17
+ bottom: false,
18
+ left: false,
19
+ topRight: false,
20
+ bottomRight: false,
21
+ bottomLeft: false,
22
+ topLeft: false
23
+ };
24
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
25
+ try {
26
+ for(var _iterator = directions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
27
+ var dir = _step.value;
28
+ switch(dir){
29
+ case 'top':
30
+ result.top = true;
31
+ break;
32
+ case 'right':
33
+ result.right = true;
34
+ break;
35
+ case 'bottom':
36
+ result.bottom = true;
37
+ break;
38
+ case 'left':
39
+ result.left = true;
40
+ break;
41
+ case 'top-right':
42
+ result.topRight = true;
43
+ break;
44
+ case 'top-left':
45
+ result.topLeft = true;
46
+ break;
47
+ case 'bottom-right':
48
+ result.bottomRight = true;
49
+ break;
50
+ case 'bottom-left':
51
+ result.bottomLeft = true;
52
+ break;
53
+ default:
54
+ break;
55
+ }
56
+ }
57
+ } catch (err) {
58
+ _didIteratorError = true;
59
+ _iteratorError = err;
60
+ } finally{
61
+ try {
62
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
63
+ _iterator.return();
64
+ }
65
+ } finally{
66
+ if (_didIteratorError) {
67
+ throw _iteratorError;
68
+ }
69
+ }
70
+ }
71
+ return result;
72
+ };
@@ -1 +1,4 @@
1
+ export * from "./getRatioBasedOnPlacement";
2
+ export * from "./getResizeDirections";
3
+ export * from "./getHandleStyles";
1
4
  export var DEFAULT_Z_INDEX = '9000';
@@ -0,0 +1,68 @@
1
+ function _define_property(obj, key, value) {
2
+ if (key in obj) {
3
+ Object.defineProperty(obj, key, {
4
+ value: value,
5
+ enumerable: true,
6
+ configurable: true,
7
+ writable: true
8
+ });
9
+ } else {
10
+ obj[key] = value;
11
+ }
12
+ return obj;
13
+ }
14
+ function _object_spread(target) {
15
+ for(var i = 1; i < arguments.length; i++){
16
+ var source = arguments[i] != null ? arguments[i] : {};
17
+ var ownKeys = Object.keys(source);
18
+ if (typeof Object.getOwnPropertySymbols === "function") {
19
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
20
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
21
+ }));
22
+ }
23
+ ownKeys.forEach(function(key) {
24
+ _define_property(target, key, source[key]);
25
+ });
26
+ }
27
+ return target;
28
+ }
29
+ function ownKeys(object, enumerableOnly) {
30
+ var keys = Object.keys(object);
31
+ if (Object.getOwnPropertySymbols) {
32
+ var symbols = Object.getOwnPropertySymbols(object);
33
+ if (enumerableOnly) {
34
+ symbols = symbols.filter(function(sym) {
35
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
36
+ });
37
+ }
38
+ keys.push.apply(keys, symbols);
39
+ }
40
+ return keys;
41
+ }
42
+ function _object_spread_props(target, source) {
43
+ source = source != null ? source : {};
44
+ if (Object.getOwnPropertyDescriptors) {
45
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
46
+ } else {
47
+ ownKeys(Object(source)).forEach(function(key) {
48
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
49
+ });
50
+ }
51
+ return target;
52
+ }
53
+ import React from "react";
54
+ export var ResizeDiagonal = function(props) {
55
+ return /*#__PURE__*/ React.createElement("svg", _object_spread_props(_object_spread({
56
+ width: "100%",
57
+ viewBox: "0 0 24 24",
58
+ fill: "none"
59
+ }, props), {
60
+ xmlns: "http://www.w3.org/2000/svg"
61
+ }), /*#__PURE__*/ React.createElement("path", {
62
+ d: "M21.5 13.25C21.5985 13.25 21.6961 13.269 21.7871 13.3066C21.8781 13.3443 21.9606 13.4001 22.0303 13.4697C22.1 13.5394 22.1556 13.6218 22.1934 13.7129C22.2311 13.8039 22.25 13.9015 22.25 14C22.25 14.0985 22.2311 14.1961 22.1934 14.2871C22.1556 14.3782 22.1 14.4606 22.0303 14.5303L14.5303 22.0303C14.4606 22.0999 14.3781 22.1557 14.2871 22.1934C14.1961 22.231 14.0985 22.25 14 22.25C13.9015 22.25 13.8039 22.2311 13.7129 22.1934C13.6218 22.1556 13.5394 22.1 13.4697 22.0303C13.4001 21.9606 13.3443 21.8781 13.3066 21.7871C13.269 21.6961 13.25 21.5985 13.25 21.5C13.25 21.4015 13.269 21.3039 13.3066 21.2129C13.3443 21.1219 13.4001 21.0394 13.4697 20.9697L20.9697 13.4697C21.0394 13.4 21.1218 13.3444 21.2129 13.3066C21.3039 13.2689 21.4015 13.25 21.5 13.25Z",
63
+ fill: "currentColor"
64
+ }), /*#__PURE__*/ React.createElement("path", {
65
+ d: "M20 4.99902C20.0985 4.99902 20.1961 5.01892 20.2871 5.05664C20.3782 5.09438 20.4606 5.15 20.5303 5.21973C20.6 5.28938 20.6556 5.37184 20.6934 5.46289C20.7311 5.55392 20.751 5.65146 20.751 5.75C20.751 5.84855 20.7311 5.94607 20.6934 6.03711C20.6556 6.12816 20.6 6.21062 20.5303 6.28027L6.28027 20.5303C6.13955 20.671 5.94901 20.75 5.75 20.75C5.551 20.75 5.36045 20.671 5.21973 20.5303C5.07901 20.3895 5.00001 20.199 5 20C5 19.801 5.07902 19.6105 5.21973 19.4697L19.4697 5.21973C19.5394 5.14999 19.6218 5.09438 19.7129 5.05664C19.8039 5.01891 19.9015 4.99903 20 4.99902Z",
66
+ fill: "currentColor"
67
+ }));
68
+ };