kui-complex 0.0.16 → 0.0.18

package/dist/index.js

@@ -429,6 +429,36 @@ var DesktopMenuPanel = function (_a) {
 var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"])), kuiBasic.theme.palette.background.light1);
 var templateObject_1$d;
 
+var InputWithMask = React.forwardRef(function (_a, ref) {
+    var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
+    var handleChange = function (e, field) {
+        field.onChange(e);
+        if (inputProps.onChange) {
+            inputProps.onChange(e);
+        }
+    };
+    var forwardedRef = function (elem, field) {
+        if (ref) {
+            // eslint-disable-next-line no-param-reassign
+            // @ts-ignore
+            ref.current = elem;
+        }
+        field.ref(elem);
+    };
+    var getError = function (fieldState) {
+        var _a;
+        return typeof error !== "undefined" && String(error).length > 0
+            ? error
+            : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    };
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
+            var field = _a.field, fieldState = _a.fieldState;
+            return (jsxRuntime.jsx(kuiBasic.InputWithMask, __assign({ errorMessage: getError(fieldState) }, field, inputProps, { onChange: function (e) {
+                    return handleChange(e, field);
+                }, value: field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
+        } }));
+});
+
 var InputWithController = React.forwardRef(function (_a, ref) {
     var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
     var handleChange = function (e, field) {
@@ -897,10 +927,10 @@ var Popper = React.forwardRef(function (props, ref) {
     // Распожить стрелочку к контенту посередине контента
     return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n            body {\n              position: relative;\n            }\n          "], ["\n            body {\n              position: relative;\n            }\n          "]))) }), jsxRuntime.jsx(StyledPopper, __assign({ ref: forwardedRef, style: position, open: !!open }, other, { children: children }))] }), document.body);
 });
-var StyledPopper = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  max-width: 215px;\n  position: absolute;\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n"], ["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  max-width: 215px;\n  position: absolute;\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n"])), function (_a) {
+var StyledPopper = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  max-width: 215px;\n  position: absolute;\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"], ["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  max-width: 215px;\n  position: absolute;\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"])), function (_a) {
     var open = _a.open;
     return (open ? 1 : 0);
-});
+}, kuiBasic.theme.breakpoints.xxs);
 var templateObject_1$1, templateObject_2;
 
 var Tooltip = React.forwardRef(function (props, ref) {
@@ -945,6 +975,7 @@ exports.InputSelectDropdown = InputSelectDropdown;
 exports.InputTextAreaMobile = InputTextAreaMobile;
 exports.InputWithController = InputWithController;
 exports.InputWithDatePicker = InputWithDatePicker;
+exports.InputWithMask = InputWithMask;
 exports.InputWithMonthPicker = InputWithMonthPicker;
 exports.MenuItem = MenuItem;
 exports.MenuPanel = MenuPanel;