@invoicebox/ui 0.1.0-alpha.325 → 0.1.0-alpha.327

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 (178) hide show
  1. package/dist/components/common/AdaptiveModalDrawer/index.d.ts +11 -0
  2. package/dist/components/common/AdaptiveModalDrawer/index.js +31 -0
  3. package/dist/components/common/AdaptiveModalDrawer/index.stories.d.ts +5 -0
  4. package/dist/components/common/AdaptiveModalDrawer/index.stories.js +44 -0
  5. package/dist/components/common/AppCardLink/index.js +1 -2
  6. package/dist/components/common/BgCard/index.js +1 -2
  7. package/dist/components/common/BgCard/styles.js +1 -2
  8. package/dist/components/common/Calendar/index.js +1 -2
  9. package/dist/components/common/Calendar/index.stories.js +1 -2
  10. package/dist/components/common/Calendar/styles.js +1 -2
  11. package/dist/components/common/Divider/index.js +1 -2
  12. package/dist/components/common/Drawer/index.js +1 -2
  13. package/dist/components/common/Drawer/index.stories.js +1 -2
  14. package/dist/components/common/Drawer/styles.js +1 -2
  15. package/dist/components/common/Dropdown/index.js +1 -2
  16. package/dist/components/common/Dropdown/styles.js +8 -9
  17. package/dist/components/common/EntityAutocompleteOptionsDrawer/index.js +1 -2
  18. package/dist/components/common/EntityAutocompleteOptionsDrawer/index.stories.js +1 -2
  19. package/dist/components/common/Flag/index.js +1 -2
  20. package/dist/components/common/Flag/styles.js +1 -2
  21. package/dist/components/common/InvoiceboxSpinner/index.js +1 -2
  22. package/dist/components/common/InvoiceboxSpinner/styles.js +1 -2
  23. package/dist/components/common/Modal/assets/CollapseIcon.d.ts +1 -0
  24. package/dist/components/common/Modal/assets/CollapseIcon.js +42 -0
  25. package/dist/components/common/Modal/assets/ExpandIcon.d.ts +1 -0
  26. package/dist/components/common/Modal/assets/ExpandIcon.js +42 -0
  27. package/dist/components/common/Modal/context.d.ts +9 -0
  28. package/dist/components/common/Modal/context.js +14 -0
  29. package/dist/components/common/Modal/index.d.ts +15 -0
  30. package/dist/components/common/Modal/index.js +165 -0
  31. package/dist/components/common/Modal/index.stories.d.ts +6 -0
  32. package/dist/components/common/Modal/index.stories.js +76 -0
  33. package/dist/components/common/Modal/palette.d.ts +9 -0
  34. package/dist/components/common/Modal/palette.js +23 -0
  35. package/dist/components/common/Modal/styles.d.ts +25 -0
  36. package/dist/components/common/Modal/styles.js +69 -0
  37. package/dist/components/common/PointsLoader/index.js +1 -2
  38. package/dist/components/common/QRCode/index.js +2 -2
  39. package/dist/components/common/ReadOnlyLabelValueField/index.js +1 -2
  40. package/dist/components/common/Scrollbar/index.js +1 -2
  41. package/dist/components/common/Scrollbar/styles.js +1 -2
  42. package/dist/components/common/SecondaryButton/index.js +3 -4
  43. package/dist/components/common/SecondaryButton/styles.js +1 -2
  44. package/dist/components/common/Skeleton/index.js +1 -2
  45. package/dist/components/common/Skeleton/styles.js +1 -2
  46. package/dist/components/common/Toast/index.js +1 -2
  47. package/dist/components/common/Tooltip/index.js +1 -2
  48. package/dist/components/common/Typography/index.js +3 -4
  49. package/dist/components/common/WarningIcon/index.js +1 -2
  50. package/dist/components/common/WentWrongModal/assets/icons.d.ts +3 -0
  51. package/dist/components/common/WentWrongModal/assets/icons.js +84 -0
  52. package/dist/components/common/WentWrongModal/assets/racoonImage.d.ts +1 -0
  53. package/dist/components/common/WentWrongModal/assets/racoonImage.js +9 -0
  54. package/dist/components/common/WentWrongModal/index.d.ts +23 -0
  55. package/dist/components/common/WentWrongModal/index.js +193 -0
  56. package/dist/components/common/WentWrongModal/index.stories.d.ts +6 -0
  57. package/dist/components/common/WentWrongModal/index.stories.js +60 -0
  58. package/dist/components/common/WentWrongModal/index.test.d.ts +1 -0
  59. package/dist/components/common/WentWrongModal/index.test.js +209 -0
  60. package/dist/components/common/WentWrongModal/palette.d.ts +11 -0
  61. package/dist/components/common/WentWrongModal/palette.js +22 -0
  62. package/dist/components/common/WentWrongModal/styles.d.ts +24 -0
  63. package/dist/components/common/WentWrongModal/styles.js +88 -0
  64. package/dist/components/form/Autocomplete/components/Autocomplete/index.js +1 -2
  65. package/dist/components/form/Autocomplete/components/Autocomplete/index.stories.js +1 -2
  66. package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/index.js +1 -2
  67. package/dist/components/form/Checkbox/index.js +3 -4
  68. package/dist/components/form/Checkbox/index.stories.js +1 -2
  69. package/dist/components/form/CodeInput/index.js +1 -2
  70. package/dist/components/form/CodeInput/index.stories.js +1 -2
  71. package/dist/components/form/CountrySelect/components/CountryItem/index.js +1 -2
  72. package/dist/components/form/CountrySelect/index.js +3 -4
  73. package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.js +1 -2
  74. package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js +1 -2
  75. package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.js +2 -2
  76. package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.stories.js +1 -2
  77. package/dist/components/form/CurrencyInput/CurrencyInputString/index.js +2 -2
  78. package/dist/components/form/CurrencyInput/CurrencyInputString/index.stories.js +1 -2
  79. package/dist/components/form/DateInput/components/CalendarIcon/index.js +1 -2
  80. package/dist/components/form/DateInput/components/MobileDrawerDateCalendar/index.js +1 -2
  81. package/dist/components/form/DateInput/components/MobileDrawerDateCalendar/index.stories.js +1 -2
  82. package/dist/components/form/DateInput/index.js +1 -2
  83. package/dist/components/form/DateInput/index.stories.js +1 -2
  84. package/dist/components/form/DateTimeInput/components/MobileDatePicker/index.js +1 -2
  85. package/dist/components/form/DateTimeInput/components/MobileDatePicker/index.stories.js +1 -2
  86. package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/index.js +1 -2
  87. package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/index.stories.js +1 -2
  88. package/dist/components/form/DateTimeInput/components/MobileWheelPicker/components/WheelColumn/index.js +1 -2
  89. package/dist/components/form/DateTimeInput/components/MobileWheelPicker/index.js +1 -2
  90. package/dist/components/form/DateTimeInput/components/MobileWheelPicker/index.stories.js +1 -2
  91. package/dist/components/form/DateTimeInput/components/TimePicker/index.js +1 -2
  92. package/dist/components/form/DateTimeInput/components/TimePicker/index.stories.js +1 -2
  93. package/dist/components/form/DateTimeInput/index.js +1 -2
  94. package/dist/components/form/DateTimeInput/index.stories.js +1 -2
  95. package/dist/components/form/InputLabel/index.js +1 -2
  96. package/dist/components/form/InputLabel/styles.js +1 -2
  97. package/dist/components/form/ModernPlaceholder/index.js +1 -2
  98. package/dist/components/form/PhoneInput/index.js +1 -2
  99. package/dist/components/form/PhoneInput/index.stories.js +1 -2
  100. package/dist/components/form/PositiveIntegerInput/index.js +1 -2
  101. package/dist/components/form/PositiveIntegerInput/index.stories.js +1 -2
  102. package/dist/components/form/PureInput/index.js +3 -4
  103. package/dist/components/form/PureInput/styles.js +2 -2
  104. package/dist/components/form/ResetButton/index.js +1 -2
  105. package/dist/components/form/SearchInput/index.js +1 -2
  106. package/dist/components/form/SearchInput/index.stories.js +1 -2
  107. package/dist/components/form/Select/components/Input/index.js +1 -2
  108. package/dist/components/form/Select/components/Loader/index.js +1 -2
  109. package/dist/components/form/Select/components/MultipleValue/index.js +1 -2
  110. package/dist/components/form/Select/components/MultipleValue/styles.js +1 -2
  111. package/dist/components/form/Select/index.js +1 -2
  112. package/dist/components/form/Select/index.stories.js +1 -2
  113. package/dist/components/form/Select/styles.js +1 -2
  114. package/dist/components/form/TagsInput/index.js +1 -2
  115. package/dist/components/form/TagsInput/index.stories.js +1 -2
  116. package/dist/components/form/TagsInput/styles.js +2 -2
  117. package/dist/components/form/TextInput/index.js +1 -2
  118. package/dist/components/form/TextInput/index.stories.js +1 -2
  119. package/dist/components/form/Toggle/index.js +3 -4
  120. package/dist/components/form/Toggle/index.stories.js +1 -2
  121. package/dist/components/form/Toggle/styles.js +10 -10
  122. package/dist/components/form/_hooks/useInputStyles.js +1 -2
  123. package/dist/components/form/common/DrawerHeader/index.js +1 -2
  124. package/dist/esm/components/common/AdaptiveModalDrawer/index.js +24 -0
  125. package/dist/esm/components/common/AdaptiveModalDrawer/index.stories.js +37 -0
  126. package/dist/esm/components/common/Dropdown/styles.js +7 -7
  127. package/dist/esm/components/common/Modal/assets/CollapseIcon.js +35 -0
  128. package/dist/esm/components/common/Modal/assets/ExpandIcon.js +35 -0
  129. package/dist/esm/components/common/Modal/context.js +8 -0
  130. package/dist/esm/components/common/Modal/index.js +147 -0
  131. package/dist/esm/components/common/Modal/index.stories.js +69 -0
  132. package/dist/esm/components/common/Modal/palette.js +16 -0
  133. package/dist/esm/components/common/Modal/styles.js +61 -0
  134. package/dist/esm/components/common/QRCode/index.js +2 -2
  135. package/dist/esm/components/common/SecondaryButton/index.js +2 -2
  136. package/dist/esm/components/common/Typography/index.js +2 -2
  137. package/dist/esm/components/common/WentWrongModal/assets/icons.js +77 -0
  138. package/dist/esm/components/common/WentWrongModal/assets/racoonImage.js +3 -0
  139. package/dist/esm/components/common/WentWrongModal/index.js +186 -0
  140. package/dist/esm/components/common/WentWrongModal/index.stories.js +53 -0
  141. package/dist/esm/components/common/WentWrongModal/index.test.js +208 -0
  142. package/dist/esm/components/common/WentWrongModal/palette.js +15 -0
  143. package/dist/esm/components/common/WentWrongModal/styles.js +81 -0
  144. package/dist/esm/components/form/Checkbox/index.js +2 -2
  145. package/dist/esm/components/form/CountrySelect/index.js +2 -2
  146. package/dist/esm/components/form/CurrencyInput/CurrencyInputNumber/index.js +2 -2
  147. package/dist/esm/components/form/CurrencyInput/CurrencyInputString/index.js +2 -2
  148. package/dist/esm/components/form/PureInput/index.js +2 -2
  149. package/dist/esm/components/form/PureInput/styles.js +2 -2
  150. package/dist/esm/components/form/TagsInput/styles.js +2 -2
  151. package/dist/esm/components/form/Toggle/index.js +2 -2
  152. package/dist/esm/components/form/Toggle/styles.js +10 -10
  153. package/dist/esm/hooks/useQueryFilter/context.js +40 -0
  154. package/dist/esm/hooks/useQueryFilter/helpers.js +58 -0
  155. package/dist/esm/hooks/useQueryFilter/index.js +123 -0
  156. package/dist/esm/hooks/useQueryFilter/index.stories.js +71 -0
  157. package/dist/esm/hooks/useQueryFilter/index.test.js +180 -0
  158. package/dist/esm/index.js +4 -1
  159. package/dist/esm/palette/context.js +5 -1
  160. package/dist/esm/palette/provider.js +5 -1
  161. package/dist/hooks/useQueryFilter/context.d.ts +35 -0
  162. package/dist/hooks/useQueryFilter/context.js +48 -0
  163. package/dist/hooks/useQueryFilter/helpers.d.ts +17 -0
  164. package/dist/hooks/useQueryFilter/helpers.js +64 -0
  165. package/dist/hooks/useQueryFilter/index.d.ts +19 -0
  166. package/dist/hooks/useQueryFilter/index.js +163 -0
  167. package/dist/hooks/useQueryFilter/index.stories.d.ts +4 -0
  168. package/dist/hooks/useQueryFilter/index.stories.js +75 -0
  169. package/dist/hooks/useQueryFilter/index.test.d.ts +1 -0
  170. package/dist/hooks/useQueryFilter/index.test.js +183 -0
  171. package/dist/hooks/useUnupdatableHandler/index.stories.js +1 -2
  172. package/dist/index.d.ts +8 -0
  173. package/dist/index.js +136 -0
  174. package/dist/palette/context.d.ts +4 -0
  175. package/dist/palette/context.js +52 -48
  176. package/dist/palette/provider.js +53 -50
  177. package/dist/palette/usePalette.d.ts +2 -0
  178. package/package.json +2 -1
@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports["default"] = exports.Default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _ = require(".");
10
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
10
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
12
11
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
13
12
  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
14
13
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -10,8 +10,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _excluded = ["children"];
11
11
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
12
12
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
13
- function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
14
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
13
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
14
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
15
15
  var Wrapper = function Wrapper(_ref) {
16
16
  var children = _ref.children,
17
17
  other = _objectWithoutProperties(_ref, _excluded);
@@ -12,8 +12,7 @@ var _PureInput = require("../PureInput");
12
12
  var _useInputFocus2 = require("../../../hooks/useInputFocus");
13
13
  var _useInputStyles2 = require("../_hooks/useInputStyles");
14
14
  var _useElementWidth2 = require("../_hooks/useElementWidth");
15
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
15
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
17
16
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
18
17
  var CHILDREN_RIGHT_OFFSET = 12;
19
18
  var CHILDREN_GAP = 8;
@@ -8,8 +8,7 @@ exports["default"] = exports.Default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _addonActions = require("@storybook/addon-actions");
10
10
  var _ = require(".");
11
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
11
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
13
12
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
14
13
  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
15
14
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -11,12 +11,11 @@ var S = _styles;
11
11
  var _Typography = require("../../common/Typography");
12
12
  var _palette = require("../../../palette");
13
13
  var _excluded = ["checked", "variant", "label", "onChange", "disabled", "alwaysHighlighted"];
14
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
15
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
14
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
16
15
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
17
16
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
18
- function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
19
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
17
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
18
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
20
19
  var Toggle = exports.Toggle = function Toggle(_ref) {
21
20
  var checked = _ref.checked,
22
21
  _ref$variant = _ref.variant,
@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports["default"] = exports.Default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _index = require("./index");
10
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
10
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
12
11
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
13
12
  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
14
13
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -64,22 +64,22 @@ var StyledInput = exports.StyledInput = _styledComponents["default"].input.withC
64
64
  }, function (_ref9) {
65
65
  var $variant = _ref9.$variant;
66
66
  return INPUT_VARIANT_MAP[$variant].circleSize;
67
+ }, function (_ref0) {
68
+ var $palette = _ref0.$palette;
69
+ return $palette.circle;
70
+ }, function (_ref1) {
71
+ var $variant = _ref1.$variant;
72
+ return INPUT_VARIANT_MAP[$variant].leftChecked;
67
73
  }, function (_ref10) {
68
74
  var $palette = _ref10.$palette;
69
- return $palette.circle;
75
+ return $palette.activeBg;
70
76
  }, function (_ref11) {
71
77
  var $variant = _ref11.$variant;
72
- return INPUT_VARIANT_MAP[$variant].leftChecked;
78
+ return INPUT_VARIANT_MAP[$variant].border;
73
79
  }, function (_ref12) {
74
80
  var $palette = _ref12.$palette;
75
- return $palette.activeBg;
76
- }, function (_ref13) {
77
- var $variant = _ref13.$variant;
78
- return INPUT_VARIANT_MAP[$variant].border;
79
- }, function (_ref14) {
80
- var $palette = _ref14.$palette;
81
81
  return $palette.disabledBorder;
82
- }, function (_ref15) {
83
- var $palette = _ref15.$palette;
82
+ }, function (_ref13) {
83
+ var $palette = _ref13.$palette;
84
84
  return $palette.activeBg;
85
85
  }, _reducedMotion.reducedMotion);
@@ -7,8 +7,7 @@ exports.useInputStyles = void 0;
7
7
  var _constants = require("../constants");
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _ModernPlaceholder = require("../ModernPlaceholder");
10
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
10
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
12
11
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
13
12
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
14
13
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -10,8 +10,7 @@ var S = _interopRequireWildcard(require("./styles"));
10
10
  var _Cross24Icon = require("./components/Cross24Icon");
11
11
  var _Typography = require("../../../common/Typography");
12
12
  var _palette = require("../../../../palette");
13
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
13
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
15
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
16
15
  var DrawerHeader = exports.DrawerHeader = function DrawerHeader(_ref) {
17
16
  var onClose = _ref.onClose,
@@ -0,0 +1,24 @@
1
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
+ import React from 'react';
3
+ import { useMobile } from '../../../hooks/useMedia';
4
+ import { Drawer } from '../Drawer';
5
+ import { Modal } from '../Modal';
6
+ /** Модалка на десктопе и шторка (Drawer) на мобильных. Скролл фона блокируют сами Modal и Drawer. */
7
+ export var AdaptiveModalDrawer = function AdaptiveModalDrawer(_ref) {
8
+ var children = _ref.children,
9
+ isOpen = _ref.isOpen,
10
+ onClose = _ref.onClose,
11
+ drawerProps = _ref.drawerProps,
12
+ modalProps = _ref.modalProps;
13
+ var isMobile = useMobile();
14
+ if (isMobile) {
15
+ return /*#__PURE__*/React.createElement(Drawer, _extends({
16
+ onClose: onClose,
17
+ isOpen: isOpen
18
+ }, drawerProps), children);
19
+ }
20
+ return /*#__PURE__*/React.createElement(Modal, _extends({
21
+ onClose: onClose,
22
+ isOpen: isOpen
23
+ }, modalProps), children);
24
+ };
@@ -0,0 +1,37 @@
1
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
3
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
4
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
5
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
6
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
7
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
8
+ import React from 'react';
9
+ import { useModal } from '../../../hooks/useModal';
10
+ import { AdaptiveModalDrawer } from '.';
11
+ var meta = {
12
+ title: 'common/AdaptiveModalDrawer',
13
+ component: AdaptiveModalDrawer,
14
+ tags: ['autodocs']
15
+ };
16
+ export default meta;
17
+ export var Default = {
18
+ args: {},
19
+ render: function Render(args) {
20
+ var _useModal = useModal(false),
21
+ _useModal2 = _slicedToArray(_useModal, 3),
22
+ isOpen = _useModal2[0],
23
+ open = _useModal2[1],
24
+ close = _useModal2[2];
25
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
26
+ type: "button",
27
+ onClick: open
28
+ }, "Open"), /*#__PURE__*/React.createElement(AdaptiveModalDrawer, _extends({}, args, {
29
+ onClose: close,
30
+ isOpen: isOpen
31
+ }), /*#__PURE__*/React.createElement("div", {
32
+ style: {
33
+ padding: 24
34
+ }
35
+ }, "\u041C\u043E\u0434\u0430\u043B\u043A\u0430 \u043D\u0430 \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0435, \u0448\u0442\u043E\u0440\u043A\u0430 \u043D\u0430 \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u043C")));
36
+ }
37
+ };
@@ -47,14 +47,14 @@ export var Wrapper = styled.div.withConfig({
47
47
  }, function (_ref9) {
48
48
  var $zIndex = _ref9.$zIndex;
49
49
  return $zIndex !== null && $zIndex !== void 0 ? $zIndex : 5;
50
- }, function (_ref10) {
51
- var $isVisible = _ref10.$isVisible;
50
+ }, function (_ref0) {
51
+ var $isVisible = _ref0.$isVisible;
52
52
  return $isVisible ? visible : hidden;
53
- }, function (_ref11) {
54
- var $isAbove = _ref11.$isAbove,
55
- $positionVertical = _ref11.$positionVertical;
53
+ }, function (_ref1) {
54
+ var $isAbove = _ref1.$isAbove,
55
+ $positionVertical = _ref1.$positionVertical;
56
56
  return $isAbove ? css(["bottom:calc(100% + ", "px);"], $positionVertical) : css(["top:calc(100% + ", "px);"], $positionVertical);
57
- }, function (_ref12) {
58
- var $translateY = _ref12.$translateY;
57
+ }, function (_ref10) {
58
+ var $translateY = _ref10.$translateY;
59
59
  return css(["transform:translateY(", ");"], $translateY);
60
60
  }, reducedMotion);
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ export var CollapseIcon = function CollapseIcon() {
3
+ return /*#__PURE__*/React.createElement("svg", {
4
+ width: "20",
5
+ height: "20",
6
+ viewBox: "0 0 24 24",
7
+ fill: "none",
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ "aria-hidden": true
10
+ }, /*#__PURE__*/React.createElement("path", {
11
+ d: "M20 10H14V4",
12
+ stroke: "currentColor",
13
+ strokeWidth: "1.8",
14
+ strokeLinecap: "round",
15
+ strokeLinejoin: "round"
16
+ }), /*#__PURE__*/React.createElement("path", {
17
+ d: "M4 14H10V20",
18
+ stroke: "currentColor",
19
+ strokeWidth: "1.8",
20
+ strokeLinecap: "round",
21
+ strokeLinejoin: "round"
22
+ }), /*#__PURE__*/React.createElement("path", {
23
+ d: "M14 10L21 3",
24
+ stroke: "currentColor",
25
+ strokeWidth: "1.8",
26
+ strokeLinecap: "round",
27
+ strokeLinejoin: "round"
28
+ }), /*#__PURE__*/React.createElement("path", {
29
+ d: "M10 14L3 21",
30
+ stroke: "currentColor",
31
+ strokeWidth: "1.8",
32
+ strokeLinecap: "round",
33
+ strokeLinejoin: "round"
34
+ }));
35
+ };
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ export var ExpandIcon = function ExpandIcon() {
3
+ return /*#__PURE__*/React.createElement("svg", {
4
+ width: "20",
5
+ height: "20",
6
+ viewBox: "0 0 24 24",
7
+ fill: "none",
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ "aria-hidden": true
10
+ }, /*#__PURE__*/React.createElement("path", {
11
+ d: "M15 3H21V9",
12
+ stroke: "currentColor",
13
+ strokeWidth: "1.8",
14
+ strokeLinecap: "round",
15
+ strokeLinejoin: "round"
16
+ }), /*#__PURE__*/React.createElement("path", {
17
+ d: "M9 21H3V15",
18
+ stroke: "currentColor",
19
+ strokeWidth: "1.8",
20
+ strokeLinecap: "round",
21
+ strokeLinejoin: "round"
22
+ }), /*#__PURE__*/React.createElement("path", {
23
+ d: "M21 3L14 10",
24
+ stroke: "currentColor",
25
+ strokeWidth: "1.8",
26
+ strokeLinecap: "round",
27
+ strokeLinejoin: "round"
28
+ }), /*#__PURE__*/React.createElement("path", {
29
+ d: "M3 21L10 14",
30
+ stroke: "currentColor",
31
+ strokeWidth: "1.8",
32
+ strokeLinecap: "round",
33
+ strokeLinejoin: "round"
34
+ }));
35
+ };
@@ -0,0 +1,8 @@
1
+ import { createContext, useContext } from 'react';
2
+ export var ModalExpansionContext = /*#__PURE__*/createContext({
3
+ isExpandable: false,
4
+ isExpanded: false
5
+ });
6
+ export var useModalExpansion = function useModalExpansion() {
7
+ return useContext(ModalExpansionContext);
8
+ };
@@ -0,0 +1,147 @@
1
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
7
+ import React, { useEffect, useMemo, useRef, useState } from 'react';
8
+ import { createPortal } from 'react-dom';
9
+ import { isDropdownPortalClick } from '../../../hooks/useOutsideClick';
10
+ import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
11
+ import { useComponentPalette } from '../../../palette';
12
+ import { ErrorBoundary } from '../ErrorBoundary';
13
+ import { ExpandIcon } from './assets/ExpandIcon';
14
+ import { CollapseIcon } from './assets/CollapseIcon';
15
+ import { ModalExpansionContext } from './context';
16
+ import * as S from './styles';
17
+ var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
18
+ export var Modal = function Modal(_ref) {
19
+ var onClose = _ref.onClose,
20
+ isOpen = _ref.isOpen,
21
+ children = _ref.children,
22
+ _ref$overflow = _ref.overflow,
23
+ overflow = _ref$overflow === void 0 ? 'auto' : _ref$overflow,
24
+ width = _ref.width,
25
+ isDisabledOutsideClick = _ref.isDisabledOutsideClick,
26
+ isExpandable = _ref.isExpandable;
27
+ var palette = useComponentPalette('modal');
28
+ var contentRef = useRef(null);
29
+ var previousFocusRef = useRef(null);
30
+ var _useState = useState(false),
31
+ _useState2 = _slicedToArray(_useState, 2),
32
+ isExpanded = _useState2[0],
33
+ setIsExpanded = _useState2[1];
34
+ var expansionContextValue = useMemo(function () {
35
+ return {
36
+ isExpandable: Boolean(isExpandable),
37
+ isExpanded: isExpanded
38
+ };
39
+ }, [isExpandable, isExpanded]);
40
+ useLockBodyScroll(isOpen);
41
+ useEffect(function () {
42
+ if (!isOpen) {
43
+ setIsExpanded(false);
44
+ }
45
+ }, [isOpen]);
46
+
47
+ // Фокус переносим в окно при открытии и возвращаем на прежний элемент при закрытии
48
+ useEffect(function () {
49
+ var _contentRef$current;
50
+ if (!isOpen) return undefined;
51
+ previousFocusRef.current = document.activeElement;
52
+ (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus();
53
+ return function () {
54
+ var _previousFocusRef$cur;
55
+ (_previousFocusRef$cur = previousFocusRef.current) === null || _previousFocusRef$cur === void 0 || _previousFocusRef$cur.focus();
56
+ };
57
+ }, [isOpen]);
58
+
59
+ /**
60
+ * Клик вне окна закрывает модалку. Не считаем «снаружи» клики по порталу Dropdown и по другим диалогам
61
+ * поверх неё (role="dialog"): например, Drawer с опциями Select на планшете рендерится порталом в body,
62
+ * и клик по его затемнению иначе закрывал бы и эту модалку.
63
+ */
64
+ useEffect(function () {
65
+ if (!isOpen || isDisabledOutsideClick) return undefined;
66
+ var handleMouseDown = function handleMouseDown(event) {
67
+ var content = contentRef.current;
68
+ var target = event.target;
69
+ if (!content || !(target instanceof Element) || content.contains(target)) return;
70
+ if (isDropdownPortalClick(target)) return;
71
+ var dialog = target.closest('[role="dialog"]');
72
+ if (dialog && dialog !== content) return;
73
+ onClose();
74
+ };
75
+ document.addEventListener('mousedown', handleMouseDown);
76
+ return function () {
77
+ document.removeEventListener('mousedown', handleMouseDown);
78
+ };
79
+ }, [isOpen, isDisabledOutsideClick, onClose]);
80
+
81
+ // Escape закрывает окно, Tab/Shift+Tab не выпускают фокус за его пределы
82
+ useEffect(function () {
83
+ if (!isOpen) return undefined;
84
+ var handleKeyDown = function handleKeyDown(e) {
85
+ var _document$activeEleme;
86
+ // Поверх открыта другая модалка и фокус в ней — Escape и Tab обрабатывает она, а не эта
87
+ var activeDialog = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.closest('[role="dialog"]');
88
+ if (activeDialog && activeDialog !== contentRef.current) return;
89
+ if (e.key === 'Escape') {
90
+ onClose();
91
+ return;
92
+ }
93
+ if (e.key !== 'Tab') return;
94
+ var content = contentRef.current;
95
+ if (!content) return;
96
+ var focusable = Array.from(content.querySelectorAll(FOCUSABLE_SELECTOR));
97
+ if (!focusable.length) {
98
+ e.preventDefault();
99
+ return;
100
+ }
101
+ var first = focusable[0];
102
+ var last = focusable[focusable.length - 1];
103
+ var active = document.activeElement;
104
+ if (e.shiftKey && active === first) {
105
+ e.preventDefault();
106
+ last.focus();
107
+ } else if (!e.shiftKey && (active === last || !content.contains(active))) {
108
+ e.preventDefault();
109
+ first.focus();
110
+ }
111
+ };
112
+ document.addEventListener('keydown', handleKeyDown);
113
+ return function () {
114
+ document.removeEventListener('keydown', handleKeyDown);
115
+ };
116
+ }, [isOpen, onClose]);
117
+ if (!isOpen) return null;
118
+ return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.ContainerInner, {
119
+ $isExpanded: isExpanded
120
+ }, /*#__PURE__*/React.createElement(S.Backdrop, {
121
+ $palette: palette
122
+ }), /*#__PURE__*/React.createElement(S.Content, {
123
+ $palette: palette,
124
+ $overflow: overflow,
125
+ $width: width,
126
+ $isExpandable: isExpandable,
127
+ $isExpanded: isExpanded,
128
+ ref: contentRef,
129
+ role: "dialog",
130
+ "aria-modal": "true",
131
+ tabIndex: -1
132
+ }, isExpandable && /*#__PURE__*/React.createElement(S.ExpandButton, {
133
+ type: "button",
134
+ $palette: palette,
135
+ onClick: function onClick() {
136
+ return setIsExpanded(function (prev) {
137
+ return !prev;
138
+ });
139
+ },
140
+ "aria-label": isExpanded ? 'Свернуть окно' : 'Развернуть окно на весь экран',
141
+ title: isExpanded ? 'Свернуть' : 'Развернуть на весь экран'
142
+ }, isExpanded ? /*#__PURE__*/React.createElement(CollapseIcon, null) : /*#__PURE__*/React.createElement(ExpandIcon, null)), /*#__PURE__*/React.createElement(ModalExpansionContext.Provider, {
143
+ value: expansionContextValue
144
+ }, /*#__PURE__*/React.createElement(ErrorBoundary, null, children))))), document.body);
145
+ };
146
+ export { useModalExpansion } from './context';
147
+ export { modalExpansionFlexItem } from './styles';
@@ -0,0 +1,69 @@
1
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
3
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
4
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
5
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
6
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
7
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
8
+ import React from 'react';
9
+ import { useModal } from '../../../hooks/useModal';
10
+ import { Modal } from '.';
11
+ var meta = {
12
+ title: 'common/Modal',
13
+ component: Modal,
14
+ tags: ['autodocs']
15
+ };
16
+ export default meta;
17
+ export var Default = {
18
+ args: {},
19
+ render: function Render(args) {
20
+ var _useModal = useModal(false),
21
+ _useModal2 = _slicedToArray(_useModal, 3),
22
+ isOpen = _useModal2[0],
23
+ open = _useModal2[1],
24
+ close = _useModal2[2];
25
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
26
+ type: "button",
27
+ onClick: open
28
+ }, "Open"), /*#__PURE__*/React.createElement(Modal, _extends({}, args, {
29
+ onClose: close,
30
+ isOpen: isOpen
31
+ }), /*#__PURE__*/React.createElement("div", {
32
+ style: {
33
+ padding: 24
34
+ }
35
+ }, "Content")));
36
+ }
37
+ };
38
+ export var Expandable = {
39
+ args: {},
40
+ render: function Render(args) {
41
+ var _useModal3 = useModal(false),
42
+ _useModal4 = _slicedToArray(_useModal3, 3),
43
+ isOpen = _useModal4[0],
44
+ open = _useModal4[1],
45
+ close = _useModal4[2];
46
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
47
+ type: "button",
48
+ onClick: open
49
+ }, "Open"), /*#__PURE__*/React.createElement(Modal, _extends({}, args, {
50
+ onClose: close,
51
+ isOpen: isOpen,
52
+ isExpandable: true,
53
+ width: 600,
54
+ overflow: "visible"
55
+ }), /*#__PURE__*/React.createElement("div", {
56
+ style: {
57
+ width: 600,
58
+ flex: 1,
59
+ background: '#f2f4f6',
60
+ borderRadius: 20
61
+ }
62
+ }, /*#__PURE__*/React.createElement("div", {
63
+ style: {
64
+ padding: 24,
65
+ height: 200
66
+ }
67
+ }, "Content"))));
68
+ }
69
+ };
@@ -0,0 +1,16 @@
1
+ import { transformColorByHsl } from '../../../utils/transformColorByHsl';
2
+ import hexToRgba from '../../../utils/hexToRgba';
3
+ export var generateModalPalette = function generateModalPalette(abstractPalette) {
4
+ return {
5
+ bg: abstractPalette.base,
6
+ // тот же затемнённый primary, что и у подложки Drawer
7
+ backdropBg: hexToRgba(transformColorByHsl(abstractPalette.primary, {
8
+ hue: -3.3333333333333144,
9
+ saturation: -0.07435090479937062,
10
+ lightness: 0.08235294117647063
11
+ }), 0.5),
12
+ shadow: '0 10px 30px 0 rgba(53, 63, 71, 0.1)',
13
+ expandButton: hexToRgba(abstractPalette.primary, 0.7),
14
+ expandButtonHoverBg: hexToRgba(abstractPalette.primary, 0.06)
15
+ };
16
+ };
@@ -0,0 +1,61 @@
1
+ import styled, { css } from 'styled-components';
2
+ import { breakpoints } from '../../../breakpoints';
3
+ /**
4
+ * Растяжение flex-элемента по высоте внутри expandable-модалки: занимает свободное
5
+ * место и умеет сжиматься, отдавая скролл вложенному контенту. Вешается на конкретные
6
+ * обёртки по пропу (см. useModalExpansion), а не через селекторы.
7
+ */
8
+ export var modalExpansionFlexItem = css(["flex:1 1 auto;min-height:0;"]);
9
+ export var Container = styled.div.withConfig({
10
+ displayName: "styles__Container",
11
+ componentId: "sc-1kjfcg5-0"
12
+ })(["position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;"]);
13
+ export var ContainerInner = styled.div.withConfig({
14
+ displayName: "styles__ContainerInner",
15
+ componentId: "sc-1kjfcg5-1"
16
+ })(["box-sizing:border-box;width:100%;height:100%;position:relative;display:flex;justify-content:center;overflow:hidden auto;align-items:flex-start;padding:", ";@media ", "{padding:", ";}"], function (_ref) {
17
+ var $isExpanded = _ref.$isExpanded;
18
+ return $isExpanded ? '20px' : '55px 0';
19
+ }, breakpoints.sm, function (_ref2) {
20
+ var $isExpanded = _ref2.$isExpanded;
21
+ return $isExpanded ? '20px' : '15px 0';
22
+ });
23
+ export var Backdrop = styled.div.withConfig({
24
+ displayName: "styles__Backdrop",
25
+ componentId: "sc-1kjfcg5-2"
26
+ })(["position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;background-color:", ";"], function (_ref3) {
27
+ var $palette = _ref3.$palette;
28
+ return $palette.backdropBg;
29
+ });
30
+ export var Content = styled.div.withConfig({
31
+ displayName: "styles__Content",
32
+ componentId: "sc-1kjfcg5-3"
33
+ })(["margin:auto;max-width:calc(100vw - 10px);", " overflow:", ";position:relative;background-color:", ";border-radius:20px;box-shadow:", ";outline:none;", " ", " @media ", "{width:100%;}"], function (_ref4) {
34
+ var $width = _ref4.$width;
35
+ return $width && "width: ".concat($width, "px;");
36
+ }, function (_ref5) {
37
+ var $overflow = _ref5.$overflow;
38
+ return $overflow;
39
+ }, function (_ref6) {
40
+ var $palette = _ref6.$palette;
41
+ return $palette.bg;
42
+ }, function (_ref7) {
43
+ var $palette = _ref7.$palette;
44
+ return $palette.shadow;
45
+ }, function (_ref8) {
46
+ var $isExpandable = _ref8.$isExpandable;
47
+ return $isExpandable && css(["display:flex;flex-direction:column;align-items:center;max-height:100%;overflow:auto;@media ", "{display:block;max-height:none;}"], breakpoints.md);
48
+ }, function (_ref9) {
49
+ var $isExpanded = _ref9.$isExpanded;
50
+ return $isExpanded && css(["width:100%;max-width:100%;height:100%;"]);
51
+ }, breakpoints.md);
52
+ export var ExpandButton = styled.button.withConfig({
53
+ displayName: "styles__ExpandButton",
54
+ componentId: "sc-1kjfcg5-4"
55
+ })(["position:absolute;top:14px;right:14px;z-index:2;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background-color:transparent;cursor:pointer;color:", ";&:hover{background-color:", ";}@media ", "{display:none;}"], function (_ref0) {
56
+ var $palette = _ref0.$palette;
57
+ return $palette.expandButton;
58
+ }, function (_ref1) {
59
+ var $palette = _ref1.$palette;
60
+ return $palette.expandButtonHoverBg;
61
+ }, breakpoints.md);