@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.
- package/dist/components/common/AdaptiveModalDrawer/index.d.ts +11 -0
- package/dist/components/common/AdaptiveModalDrawer/index.js +31 -0
- package/dist/components/common/AdaptiveModalDrawer/index.stories.d.ts +5 -0
- package/dist/components/common/AdaptiveModalDrawer/index.stories.js +44 -0
- package/dist/components/common/AppCardLink/index.js +1 -2
- package/dist/components/common/BgCard/index.js +1 -2
- package/dist/components/common/BgCard/styles.js +1 -2
- package/dist/components/common/Calendar/index.js +1 -2
- package/dist/components/common/Calendar/index.stories.js +1 -2
- package/dist/components/common/Calendar/styles.js +1 -2
- package/dist/components/common/Divider/index.js +1 -2
- package/dist/components/common/Drawer/index.js +1 -2
- package/dist/components/common/Drawer/index.stories.js +1 -2
- package/dist/components/common/Drawer/styles.js +1 -2
- package/dist/components/common/Dropdown/index.js +1 -2
- package/dist/components/common/Dropdown/styles.js +8 -9
- package/dist/components/common/EntityAutocompleteOptionsDrawer/index.js +1 -2
- package/dist/components/common/EntityAutocompleteOptionsDrawer/index.stories.js +1 -2
- package/dist/components/common/Flag/index.js +1 -2
- package/dist/components/common/Flag/styles.js +1 -2
- package/dist/components/common/InvoiceboxSpinner/index.js +1 -2
- package/dist/components/common/InvoiceboxSpinner/styles.js +1 -2
- package/dist/components/common/Modal/assets/CollapseIcon.d.ts +1 -0
- package/dist/components/common/Modal/assets/CollapseIcon.js +42 -0
- package/dist/components/common/Modal/assets/ExpandIcon.d.ts +1 -0
- package/dist/components/common/Modal/assets/ExpandIcon.js +42 -0
- package/dist/components/common/Modal/context.d.ts +9 -0
- package/dist/components/common/Modal/context.js +14 -0
- package/dist/components/common/Modal/index.d.ts +15 -0
- package/dist/components/common/Modal/index.js +165 -0
- package/dist/components/common/Modal/index.stories.d.ts +6 -0
- package/dist/components/common/Modal/index.stories.js +76 -0
- package/dist/components/common/Modal/palette.d.ts +9 -0
- package/dist/components/common/Modal/palette.js +23 -0
- package/dist/components/common/Modal/styles.d.ts +25 -0
- package/dist/components/common/Modal/styles.js +69 -0
- package/dist/components/common/PointsLoader/index.js +1 -2
- package/dist/components/common/QRCode/index.js +2 -2
- package/dist/components/common/ReadOnlyLabelValueField/index.js +1 -2
- package/dist/components/common/Scrollbar/index.js +1 -2
- package/dist/components/common/Scrollbar/styles.js +1 -2
- package/dist/components/common/SecondaryButton/index.js +3 -4
- package/dist/components/common/SecondaryButton/styles.js +1 -2
- package/dist/components/common/Skeleton/index.js +1 -2
- package/dist/components/common/Skeleton/styles.js +1 -2
- package/dist/components/common/Toast/index.js +1 -2
- package/dist/components/common/Tooltip/index.js +1 -2
- package/dist/components/common/Typography/index.js +3 -4
- package/dist/components/common/WarningIcon/index.js +1 -2
- package/dist/components/common/WentWrongModal/assets/icons.d.ts +3 -0
- package/dist/components/common/WentWrongModal/assets/icons.js +84 -0
- package/dist/components/common/WentWrongModal/assets/racoonImage.d.ts +1 -0
- package/dist/components/common/WentWrongModal/assets/racoonImage.js +9 -0
- package/dist/components/common/WentWrongModal/index.d.ts +23 -0
- package/dist/components/common/WentWrongModal/index.js +193 -0
- package/dist/components/common/WentWrongModal/index.stories.d.ts +6 -0
- package/dist/components/common/WentWrongModal/index.stories.js +60 -0
- package/dist/components/common/WentWrongModal/index.test.d.ts +1 -0
- package/dist/components/common/WentWrongModal/index.test.js +209 -0
- package/dist/components/common/WentWrongModal/palette.d.ts +11 -0
- package/dist/components/common/WentWrongModal/palette.js +22 -0
- package/dist/components/common/WentWrongModal/styles.d.ts +24 -0
- package/dist/components/common/WentWrongModal/styles.js +88 -0
- package/dist/components/form/Autocomplete/components/Autocomplete/index.js +1 -2
- package/dist/components/form/Autocomplete/components/Autocomplete/index.stories.js +1 -2
- package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/index.js +1 -2
- package/dist/components/form/Checkbox/index.js +3 -4
- package/dist/components/form/Checkbox/index.stories.js +1 -2
- package/dist/components/form/CodeInput/index.js +1 -2
- package/dist/components/form/CodeInput/index.stories.js +1 -2
- package/dist/components/form/CountrySelect/components/CountryItem/index.js +1 -2
- package/dist/components/form/CountrySelect/index.js +3 -4
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.js +1 -2
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js +1 -2
- package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.js +2 -2
- package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.stories.js +1 -2
- package/dist/components/form/CurrencyInput/CurrencyInputString/index.js +2 -2
- package/dist/components/form/CurrencyInput/CurrencyInputString/index.stories.js +1 -2
- package/dist/components/form/DateInput/components/CalendarIcon/index.js +1 -2
- package/dist/components/form/DateInput/components/MobileDrawerDateCalendar/index.js +1 -2
- package/dist/components/form/DateInput/components/MobileDrawerDateCalendar/index.stories.js +1 -2
- package/dist/components/form/DateInput/index.js +1 -2
- package/dist/components/form/DateInput/index.stories.js +1 -2
- package/dist/components/form/DateTimeInput/components/MobileDatePicker/index.js +1 -2
- package/dist/components/form/DateTimeInput/components/MobileDatePicker/index.stories.js +1 -2
- package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/index.js +1 -2
- package/dist/components/form/DateTimeInput/components/MobileDrawerDateTimeCalendar/index.stories.js +1 -2
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/components/WheelColumn/index.js +1 -2
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/index.js +1 -2
- package/dist/components/form/DateTimeInput/components/MobileWheelPicker/index.stories.js +1 -2
- package/dist/components/form/DateTimeInput/components/TimePicker/index.js +1 -2
- package/dist/components/form/DateTimeInput/components/TimePicker/index.stories.js +1 -2
- package/dist/components/form/DateTimeInput/index.js +1 -2
- package/dist/components/form/DateTimeInput/index.stories.js +1 -2
- package/dist/components/form/InputLabel/index.js +1 -2
- package/dist/components/form/InputLabel/styles.js +1 -2
- package/dist/components/form/ModernPlaceholder/index.js +1 -2
- package/dist/components/form/PhoneInput/index.js +1 -2
- package/dist/components/form/PhoneInput/index.stories.js +1 -2
- package/dist/components/form/PositiveIntegerInput/index.js +1 -2
- package/dist/components/form/PositiveIntegerInput/index.stories.js +1 -2
- package/dist/components/form/PureInput/index.js +3 -4
- package/dist/components/form/PureInput/styles.js +2 -2
- package/dist/components/form/ResetButton/index.js +1 -2
- package/dist/components/form/SearchInput/index.js +1 -2
- package/dist/components/form/SearchInput/index.stories.js +1 -2
- package/dist/components/form/Select/components/Input/index.js +1 -2
- package/dist/components/form/Select/components/Loader/index.js +1 -2
- package/dist/components/form/Select/components/MultipleValue/index.js +1 -2
- package/dist/components/form/Select/components/MultipleValue/styles.js +1 -2
- package/dist/components/form/Select/index.js +1 -2
- package/dist/components/form/Select/index.stories.js +1 -2
- package/dist/components/form/Select/styles.js +1 -2
- package/dist/components/form/TagsInput/index.js +1 -2
- package/dist/components/form/TagsInput/index.stories.js +1 -2
- package/dist/components/form/TagsInput/styles.js +2 -2
- package/dist/components/form/TextInput/index.js +1 -2
- package/dist/components/form/TextInput/index.stories.js +1 -2
- package/dist/components/form/Toggle/index.js +3 -4
- package/dist/components/form/Toggle/index.stories.js +1 -2
- package/dist/components/form/Toggle/styles.js +10 -10
- package/dist/components/form/_hooks/useInputStyles.js +1 -2
- package/dist/components/form/common/DrawerHeader/index.js +1 -2
- package/dist/esm/components/common/AdaptiveModalDrawer/index.js +24 -0
- package/dist/esm/components/common/AdaptiveModalDrawer/index.stories.js +37 -0
- package/dist/esm/components/common/Dropdown/styles.js +7 -7
- package/dist/esm/components/common/Modal/assets/CollapseIcon.js +35 -0
- package/dist/esm/components/common/Modal/assets/ExpandIcon.js +35 -0
- package/dist/esm/components/common/Modal/context.js +8 -0
- package/dist/esm/components/common/Modal/index.js +147 -0
- package/dist/esm/components/common/Modal/index.stories.js +69 -0
- package/dist/esm/components/common/Modal/palette.js +16 -0
- package/dist/esm/components/common/Modal/styles.js +61 -0
- package/dist/esm/components/common/QRCode/index.js +2 -2
- package/dist/esm/components/common/SecondaryButton/index.js +2 -2
- package/dist/esm/components/common/Typography/index.js +2 -2
- package/dist/esm/components/common/WentWrongModal/assets/icons.js +77 -0
- package/dist/esm/components/common/WentWrongModal/assets/racoonImage.js +3 -0
- package/dist/esm/components/common/WentWrongModal/index.js +186 -0
- package/dist/esm/components/common/WentWrongModal/index.stories.js +53 -0
- package/dist/esm/components/common/WentWrongModal/index.test.js +208 -0
- package/dist/esm/components/common/WentWrongModal/palette.js +15 -0
- package/dist/esm/components/common/WentWrongModal/styles.js +81 -0
- package/dist/esm/components/form/Checkbox/index.js +2 -2
- package/dist/esm/components/form/CountrySelect/index.js +2 -2
- package/dist/esm/components/form/CurrencyInput/CurrencyInputNumber/index.js +2 -2
- package/dist/esm/components/form/CurrencyInput/CurrencyInputString/index.js +2 -2
- package/dist/esm/components/form/PureInput/index.js +2 -2
- package/dist/esm/components/form/PureInput/styles.js +2 -2
- package/dist/esm/components/form/TagsInput/styles.js +2 -2
- package/dist/esm/components/form/Toggle/index.js +2 -2
- package/dist/esm/components/form/Toggle/styles.js +10 -10
- package/dist/esm/hooks/useQueryFilter/context.js +40 -0
- package/dist/esm/hooks/useQueryFilter/helpers.js +58 -0
- package/dist/esm/hooks/useQueryFilter/index.js +123 -0
- package/dist/esm/hooks/useQueryFilter/index.stories.js +71 -0
- package/dist/esm/hooks/useQueryFilter/index.test.js +180 -0
- package/dist/esm/index.js +4 -1
- package/dist/esm/palette/context.js +5 -1
- package/dist/esm/palette/provider.js +5 -1
- package/dist/hooks/useQueryFilter/context.d.ts +35 -0
- package/dist/hooks/useQueryFilter/context.js +48 -0
- package/dist/hooks/useQueryFilter/helpers.d.ts +17 -0
- package/dist/hooks/useQueryFilter/helpers.js +64 -0
- package/dist/hooks/useQueryFilter/index.d.ts +19 -0
- package/dist/hooks/useQueryFilter/index.js +163 -0
- package/dist/hooks/useQueryFilter/index.stories.d.ts +4 -0
- package/dist/hooks/useQueryFilter/index.stories.js +75 -0
- package/dist/hooks/useQueryFilter/index.test.d.ts +1 -0
- package/dist/hooks/useQueryFilter/index.test.js +183 -0
- package/dist/hooks/useUnupdatableHandler/index.stories.js +1 -2
- package/dist/index.d.ts +8 -0
- package/dist/index.js +136 -0
- package/dist/palette/context.d.ts +4 -0
- package/dist/palette/context.js +52 -48
- package/dist/palette/provider.js +53 -50
- package/dist/palette/usePalette.d.ts +2 -0
- 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
|
|
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
|
|
14
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.
|
|
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
|
|
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
|
|
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
|
|
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
|
|
19
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.
|
|
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
|
|
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.
|
|
75
|
+
return $palette.activeBg;
|
|
70
76
|
}, function (_ref11) {
|
|
71
77
|
var $variant = _ref11.$variant;
|
|
72
|
-
return INPUT_VARIANT_MAP[$variant].
|
|
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 (
|
|
83
|
-
var $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
|
|
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
|
|
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 (
|
|
51
|
-
var $isVisible =
|
|
50
|
+
}, function (_ref0) {
|
|
51
|
+
var $isVisible = _ref0.$isVisible;
|
|
52
52
|
return $isVisible ? visible : hidden;
|
|
53
|
-
}, function (
|
|
54
|
-
var $isAbove =
|
|
55
|
-
$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 (
|
|
58
|
-
var $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);
|