@megafon/ui-core 7.5.0 → 7.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium b__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-checkbox{margin:0 5px 12px}.mfui-checkbox__inner{display:inline-block;position:relative}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:32px;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding:4px 15px 4px 33px}.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input{top:6px}.mfui-checkbox_font-size_small{font-size:12px;line-height:16px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding:1px 15px 4px 33px}.mfui-checkbox_font-size_small .mfui-checkbox__custom-input{top:0}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-checkbox_bottom-margin{margin-bottom:12px}.mfui-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-checkbox_single .mfui-checkbox__inner{padding-left:32px}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding-top:3px}.mfui-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding-top:6px}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
@@ -32,7 +32,9 @@ export interface ICheckboxProps {
32
32
  error?: boolean;
33
33
  /** Дополнительный контент справа */
34
34
  extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
35
- children: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
35
+ /** Отключить нижний отступ */
36
+ disableBottomMargin?: boolean;
37
+ children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
36
38
  /** Обработчик изменения значения */
37
39
  onChange?: (checked: boolean) => void;
38
40
  }
@@ -29,6 +29,8 @@ var Checkbox = function Checkbox(_ref) {
29
29
  extraContent = _ref.extraContent,
30
30
  dataAttrs = _ref.dataAttrs,
31
31
  classes = _ref.classes,
32
+ _ref$disableBottomMar = _ref.disableBottomMargin,
33
+ disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
32
34
  onChange = _ref.onChange;
33
35
  var isTouch = detectTouch();
34
36
  var _React$useState = React.useState(checked),
@@ -50,7 +52,9 @@ var Checkbox = function Checkbox(_ref) {
50
52
  color: color,
51
53
  checked: isChecked,
52
54
  disabled: disabled,
53
- error: error
55
+ error: error,
56
+ 'bottom-margin': !disableBottomMargin,
57
+ single: !children && !extraContent
54
58
  }, className)
55
59
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", _extends({
56
60
  className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--base);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:15px;font-weight:500;line-height:24px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}
@@ -23,6 +23,8 @@ export interface IRowProps {
23
23
  target?: '_self' | '_blank';
24
24
  /** rel - аргумент тега <a> */
25
25
  rel?: string;
26
+ /** Автоматическая высота */
27
+ autoHeight?: boolean;
26
28
  /** Обработчик клика */
27
29
  onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
28
30
  /** Дочерние элементы: Badges, Switcher, Selector */
@@ -30,6 +30,8 @@ var Row = function Row(_ref) {
30
30
  _ref$target = _ref.target,
31
31
  target = _ref$target === void 0 ? '_self' : _ref$target,
32
32
  rel = _ref.rel,
33
+ _ref$autoHeight = _ref.autoHeight,
34
+ autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
33
35
  onClick = _ref.onClick,
34
36
  children = _ref.children,
35
37
  className = _ref.className,
@@ -47,7 +49,8 @@ var Row = function Row(_ref) {
47
49
  size: size,
48
50
  view: backgroundView,
49
51
  pointer: isActive,
50
- 'has-arrow': showArrow && !showLoader
52
+ 'has-arrow': showArrow && !showLoader,
53
+ 'auto-height': autoHeight
51
54
  }, [className, classes.root]),
52
55
  href: href,
53
56
  target: href ? target : undefined,
@@ -65,7 +68,8 @@ var Row = function Row(_ref) {
65
68
  className: cn('header')
66
69
  }, /*#__PURE__*/React.createElement(Header, {
67
70
  className: cn('title', [classes.title]),
68
- as: isSmallSize ? 'h5' : 'h3'
71
+ as: isSmallSize ? 'h5' : 'h3',
72
+ space: isSmallSize ? 'tight' : 'wide'
69
73
  }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
70
74
  className: cn('sub-title', [classes.subtitle])
71
75
  }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -0,0 +1 @@
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-value-field{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-value-field_position_left{margin-right:auto}.mfui-value-field_position_right{margin-left:auto}.mfui-value-field_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-value-field_interactive.mfui-value-field:hover,.mfui-value-field_interactive.mfui-value-field_focus{border-color:var(--content)}.mfui-value-field_disabled{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-value-field_disabled,.mfui-value-field_disabled.mfui-value-field_interactive:hover{border-color:var(--spbSky0)}.mfui-value-field__box{overflow:hidden}.mfui-value-field__line{font-weight:500}.mfui-value-field__unit{margin-left:4px}.mfui-value-field_interactive .mfui-value-field__line{height:0;opacity:0;visibility:hidden}.mfui-value-field_interactive:not(.mfui-value-field_disabled) .mfui-value-field__input{cursor:text}.mfui-value-field__prefix{color:var(--spbSky3);margin-right:4px}.mfui-value-field__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-value-field__input::-webkit-inner-spin-button,.mfui-value-field__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-value-field__input[type=number]{-moz-appearance:textfield}.mfui-value-field_theme_gray.mfui-value-field_interactive{background-color:transparent;border-color:var(--spbSky3)}.mfui-value-field_theme_gray.mfui-value-field_disabled{background-color:var(--base);border:none;color:var(--spbSky2)}.mfui-value-field_theme_gray.mfui-value-field_disabled .mfui-value-field__prefix{color:var(--spbSky2)}.mfui-value-field_theme_color.mfui-value-field_interactive{border-color:var(--base)}
@@ -0,0 +1,40 @@
1
+ import * as React from 'react';
2
+ import './ValueField.scss';
3
+ export declare const Field: {
4
+ readonly LINE: "line";
5
+ readonly INPUT: "input";
6
+ };
7
+ export type FieldType = (typeof Field)[keyof typeof Field];
8
+ export interface IValueField {
9
+ /** Дополнительный класс корневого элемента */
10
+ className?: string;
11
+ /** Значение */
12
+ value?: string | number;
13
+ /** Отображаемый текст при отсутствии значения */
14
+ placeholder?: string;
15
+ /** Префикс для значения */
16
+ valuePrefix?: string;
17
+ /** Единица измерения значения */
18
+ valueUnit?: string;
19
+ /** Позиционирование */
20
+ position?: 'left' | 'right';
21
+ /** Цветовая тема */
22
+ theme?: 'default' | 'gray' | 'color';
23
+ /** Тип поля */
24
+ fieldType?: FieldType;
25
+ /** Отключение поля ввода */
26
+ disabled?: boolean;
27
+ /** Переводит компонент в контролируемое состояние */
28
+ isControlled?: boolean;
29
+ /** Дополнительные data атрибуты к внутренним элементам */
30
+ dataAttrs?: {
31
+ root?: Record<string, string>;
32
+ input?: Record<string, string>;
33
+ };
34
+ /** Обработчик изменения значения */
35
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
36
+ /** Обработчик потери фокуса */
37
+ onBlur?: () => void;
38
+ }
39
+ declare const ValueField: React.FC<IValueField>;
40
+ export default ValueField;
@@ -0,0 +1,107 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import "core-js/modules/es.array.includes.js";
4
+ import "core-js/modules/es.string.trim.js";
5
+ import * as React from 'react';
6
+ import { useEffect, useState } from 'react';
7
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
8
+ import "./ValueField.css";
9
+ export var Field = {
10
+ LINE: 'line',
11
+ INPUT: 'input'
12
+ };
13
+ var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
14
+ var sanitizeValue = function sanitizeValue(value) {
15
+ if (typeof value === 'string' && value.trim() === '') {
16
+ return null;
17
+ }
18
+ return value;
19
+ };
20
+ var cn = cnCreate('mfui-value-field');
21
+ var ValueField = function ValueField(_ref) {
22
+ var className = _ref.className,
23
+ value = _ref.value,
24
+ placeholder = _ref.placeholder,
25
+ valuePrefix = _ref.valuePrefix,
26
+ valueUnit = _ref.valueUnit,
27
+ _ref$position = _ref.position,
28
+ position = _ref$position === void 0 ? 'left' : _ref$position,
29
+ _ref$theme = _ref.theme,
30
+ theme = _ref$theme === void 0 ? 'default' : _ref$theme,
31
+ _ref$fieldType = _ref.fieldType,
32
+ fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
33
+ disabled = _ref.disabled,
34
+ _ref$isControlled = _ref.isControlled,
35
+ isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
36
+ dataAttrs = _ref.dataAttrs,
37
+ onChange = _ref.onChange,
38
+ onBlur = _ref.onBlur;
39
+ var _a;
40
+ var _useState = useState(value !== null && value !== void 0 ? value : ''),
41
+ _useState2 = _slicedToArray(_useState, 2),
42
+ inputValue = _useState2[0],
43
+ setInputValue = _useState2[1];
44
+ var currentValue = isControlled ? value : inputValue;
45
+ var inputRef = React.useRef(null);
46
+ var _React$useState = React.useState(false),
47
+ _React$useState2 = _slicedToArray(_React$useState, 2),
48
+ isFocused = _React$useState2[0],
49
+ setIsFocused = _React$useState2[1];
50
+ var isFieldInput = fieldType === Field.INPUT;
51
+ var RootElement = isFieldInput ? 'label' : 'div';
52
+ var handleInputBlur = function handleInputBlur() {
53
+ setIsFocused(false);
54
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur();
55
+ };
56
+ var handleInputFocus = function handleInputFocus() {
57
+ setIsFocused(true);
58
+ };
59
+ var handleInputChange = function handleInputChange(e) {
60
+ !isControlled && setInputValue(e.target.value);
61
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
62
+ };
63
+ var handleKeyDown = function handleKeyDown(e) {
64
+ var _a;
65
+ if (e.key === 'Enter') {
66
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
67
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur();
68
+ return;
69
+ }
70
+ if (charsAllowedByNumberInput.includes(e.key)) {
71
+ e.preventDefault();
72
+ }
73
+ };
74
+ useEffect(function () {
75
+ !isControlled && setInputValue(value !== null && value !== void 0 ? value : '');
76
+ }, [isControlled, value]);
77
+ return /*#__PURE__*/React.createElement(RootElement, _extends({
78
+ className: cn({
79
+ interactive: isFieldInput,
80
+ theme: theme,
81
+ position: position,
82
+ focus: isFocused,
83
+ disabled: disabled
84
+ }, [className])
85
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!valuePrefix && /*#__PURE__*/React.createElement("div", {
86
+ className: cn('prefix')
87
+ }, valuePrefix), /*#__PURE__*/React.createElement("div", {
88
+ className: cn('box')
89
+ }, isFieldInput && /*#__PURE__*/React.createElement("input", _extends({
90
+ className: cn('input'),
91
+ type: "number",
92
+ value: currentValue,
93
+ placeholder: placeholder,
94
+ onChange: handleInputChange,
95
+ onBlur: handleInputBlur,
96
+ onFocus: handleInputFocus,
97
+ onKeyDown: handleKeyDown,
98
+ disabled: disabled
99
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
100
+ ref: inputRef
101
+ })), /*#__PURE__*/React.createElement("div", {
102
+ className: cn('line')
103
+ }, (_a = sanitizeValue(currentValue)) !== null && _a !== void 0 ? _a : placeholder)), !!valueUnit && /*#__PURE__*/React.createElement("div", {
104
+ className: cn('unit')
105
+ }, valueUnit));
106
+ };
107
+ export default ValueField;
@@ -77,3 +77,4 @@ export { default as useDragAndDrop } from './components/UploadForm/UploadField/c
77
77
  export { default as useGradient } from './components/Carousel/useGradient';
78
78
  export { default as usePagination } from './components/Pagination/usePagination';
79
79
  export { default as utils } from './components/Modal/utils/utils';
80
+ export { default as ValueField } from './components/ValueField/ValueField';
package/dist/es/index.js CHANGED
@@ -76,4 +76,5 @@ export { default as UploadFileItemIcon } from "./components/UploadForm/UploadFil
76
76
  export { default as useDragAndDrop } from "./components/UploadForm/UploadField/components/useDragAndDrop";
77
77
  export { default as useGradient } from "./components/Carousel/useGradient";
78
78
  export { default as usePagination } from "./components/Pagination/usePagination";
79
- export { default as utils } from "./components/Modal/utils/utils";
79
+ export { default as utils } from "./components/Modal/utils/utils";
80
+ export { default as ValueField } from "./components/ValueField/ValueField";
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium b__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-checkbox{margin:0 5px 12px}.mfui-checkbox__inner{display:inline-block;position:relative}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:32px;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding:4px 15px 4px 33px}.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input{top:6px}.mfui-checkbox_font-size_small{font-size:12px;line-height:16px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding:1px 15px 4px 33px}.mfui-checkbox_font-size_small .mfui-checkbox__custom-input{top:0}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-checkbox_bottom-margin{margin-bottom:12px}.mfui-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-checkbox_single .mfui-checkbox__inner{padding-left:32px}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding-top:3px}.mfui-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding-top:6px}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
@@ -32,7 +32,9 @@ export interface ICheckboxProps {
32
32
  error?: boolean;
33
33
  /** Дополнительный контент справа */
34
34
  extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
35
- children: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
35
+ /** Отключить нижний отступ */
36
+ disableBottomMargin?: boolean;
37
+ children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
36
38
  /** Обработчик изменения значения */
37
39
  onChange?: (checked: boolean) => void;
38
40
  }
@@ -38,6 +38,8 @@ var Checkbox = function Checkbox(_ref) {
38
38
  extraContent = _ref.extraContent,
39
39
  dataAttrs = _ref.dataAttrs,
40
40
  classes = _ref.classes,
41
+ _ref$disableBottomMar = _ref.disableBottomMargin,
42
+ disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
41
43
  onChange = _ref.onChange;
42
44
  var isTouch = (0, _uiHelpers.detectTouch)();
43
45
  var _React$useState = React.useState(checked),
@@ -59,7 +61,9 @@ var Checkbox = function Checkbox(_ref) {
59
61
  color: color,
60
62
  checked: isChecked,
61
63
  disabled: disabled,
62
- error: error
64
+ error: error,
65
+ 'bottom-margin': !disableBottomMargin,
66
+ single: !children && !extraContent
63
67
  }, className)
64
68
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
65
69
  className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--base);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:15px;font-weight:500;line-height:24px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}
@@ -23,6 +23,8 @@ export interface IRowProps {
23
23
  target?: '_self' | '_blank';
24
24
  /** rel - аргумент тега <a> */
25
25
  rel?: string;
26
+ /** Автоматическая высота */
27
+ autoHeight?: boolean;
26
28
  /** Обработчик клика */
27
29
  onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
28
30
  /** Дочерние элементы: Badges, Switcher, Selector */
@@ -39,6 +39,8 @@ var Row = function Row(_ref) {
39
39
  _ref$target = _ref.target,
40
40
  target = _ref$target === void 0 ? '_self' : _ref$target,
41
41
  rel = _ref.rel,
42
+ _ref$autoHeight = _ref.autoHeight,
43
+ autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
42
44
  onClick = _ref.onClick,
43
45
  children = _ref.children,
44
46
  className = _ref.className,
@@ -56,7 +58,8 @@ var Row = function Row(_ref) {
56
58
  size: size,
57
59
  view: backgroundView,
58
60
  pointer: isActive,
59
- 'has-arrow': showArrow && !showLoader
61
+ 'has-arrow': showArrow && !showLoader,
62
+ 'auto-height': autoHeight
60
63
  }, [className, classes.root]),
61
64
  href: href,
62
65
  target: href ? target : undefined,
@@ -74,7 +77,8 @@ var Row = function Row(_ref) {
74
77
  className: cn('header')
75
78
  }, /*#__PURE__*/React.createElement(_Header["default"], {
76
79
  className: cn('title', [classes.title]),
77
- as: isSmallSize ? 'h5' : 'h3'
80
+ as: isSmallSize ? 'h5' : 'h3',
81
+ space: isSmallSize ? 'tight' : 'wide'
78
82
  }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
79
83
  className: cn('sub-title', [classes.subtitle])
80
84
  }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -0,0 +1 @@
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-value-field{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-value-field_position_left{margin-right:auto}.mfui-value-field_position_right{margin-left:auto}.mfui-value-field_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-value-field_interactive.mfui-value-field:hover,.mfui-value-field_interactive.mfui-value-field_focus{border-color:var(--content)}.mfui-value-field_disabled{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-value-field_disabled,.mfui-value-field_disabled.mfui-value-field_interactive:hover{border-color:var(--spbSky0)}.mfui-value-field__box{overflow:hidden}.mfui-value-field__line{font-weight:500}.mfui-value-field__unit{margin-left:4px}.mfui-value-field_interactive .mfui-value-field__line{height:0;opacity:0;visibility:hidden}.mfui-value-field_interactive:not(.mfui-value-field_disabled) .mfui-value-field__input{cursor:text}.mfui-value-field__prefix{color:var(--spbSky3);margin-right:4px}.mfui-value-field__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-value-field__input::-webkit-inner-spin-button,.mfui-value-field__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-value-field__input[type=number]{-moz-appearance:textfield}.mfui-value-field_theme_gray.mfui-value-field_interactive{background-color:transparent;border-color:var(--spbSky3)}.mfui-value-field_theme_gray.mfui-value-field_disabled{background-color:var(--base);border:none;color:var(--spbSky2)}.mfui-value-field_theme_gray.mfui-value-field_disabled .mfui-value-field__prefix{color:var(--spbSky2)}.mfui-value-field_theme_color.mfui-value-field_interactive{border-color:var(--base)}
@@ -0,0 +1,40 @@
1
+ import * as React from 'react';
2
+ import './ValueField.scss';
3
+ export declare const Field: {
4
+ readonly LINE: "line";
5
+ readonly INPUT: "input";
6
+ };
7
+ export type FieldType = (typeof Field)[keyof typeof Field];
8
+ export interface IValueField {
9
+ /** Дополнительный класс корневого элемента */
10
+ className?: string;
11
+ /** Значение */
12
+ value?: string | number;
13
+ /** Отображаемый текст при отсутствии значения */
14
+ placeholder?: string;
15
+ /** Префикс для значения */
16
+ valuePrefix?: string;
17
+ /** Единица измерения значения */
18
+ valueUnit?: string;
19
+ /** Позиционирование */
20
+ position?: 'left' | 'right';
21
+ /** Цветовая тема */
22
+ theme?: 'default' | 'gray' | 'color';
23
+ /** Тип поля */
24
+ fieldType?: FieldType;
25
+ /** Отключение поля ввода */
26
+ disabled?: boolean;
27
+ /** Переводит компонент в контролируемое состояние */
28
+ isControlled?: boolean;
29
+ /** Дополнительные data атрибуты к внутренним элементам */
30
+ dataAttrs?: {
31
+ root?: Record<string, string>;
32
+ input?: Record<string, string>;
33
+ };
34
+ /** Обработчик изменения значения */
35
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
36
+ /** Обработчик потери фокуса */
37
+ onBlur?: () => void;
38
+ }
39
+ declare const ValueField: React.FC<IValueField>;
40
+ export default ValueField;
@@ -0,0 +1,116 @@
1
+ "use strict";
2
+
3
+ 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); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = exports.Field = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ require("core-js/modules/es.array.includes.js");
11
+ require("core-js/modules/es.string.trim.js");
12
+ var _react = _interopRequireWildcard(require("react"));
13
+ var React = _react;
14
+ var _uiHelpers = require("@megafon/ui-helpers");
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; }
17
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
18
+ var Field = exports.Field = {
19
+ LINE: 'line',
20
+ INPUT: 'input'
21
+ };
22
+ var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
23
+ var sanitizeValue = function sanitizeValue(value) {
24
+ if (typeof value === 'string' && value.trim() === '') {
25
+ return null;
26
+ }
27
+ return value;
28
+ };
29
+ var cn = (0, _uiHelpers.cnCreate)('mfui-value-field');
30
+ var ValueField = function ValueField(_ref) {
31
+ var className = _ref.className,
32
+ value = _ref.value,
33
+ placeholder = _ref.placeholder,
34
+ valuePrefix = _ref.valuePrefix,
35
+ valueUnit = _ref.valueUnit,
36
+ _ref$position = _ref.position,
37
+ position = _ref$position === void 0 ? 'left' : _ref$position,
38
+ _ref$theme = _ref.theme,
39
+ theme = _ref$theme === void 0 ? 'default' : _ref$theme,
40
+ _ref$fieldType = _ref.fieldType,
41
+ fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
42
+ disabled = _ref.disabled,
43
+ _ref$isControlled = _ref.isControlled,
44
+ isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
45
+ dataAttrs = _ref.dataAttrs,
46
+ onChange = _ref.onChange,
47
+ onBlur = _ref.onBlur;
48
+ var _a;
49
+ var _useState = (0, _react.useState)(value !== null && value !== void 0 ? value : ''),
50
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
51
+ inputValue = _useState2[0],
52
+ setInputValue = _useState2[1];
53
+ var currentValue = isControlled ? value : inputValue;
54
+ var inputRef = React.useRef(null);
55
+ var _React$useState = React.useState(false),
56
+ _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
57
+ isFocused = _React$useState2[0],
58
+ setIsFocused = _React$useState2[1];
59
+ var isFieldInput = fieldType === Field.INPUT;
60
+ var RootElement = isFieldInput ? 'label' : 'div';
61
+ var handleInputBlur = function handleInputBlur() {
62
+ setIsFocused(false);
63
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur();
64
+ };
65
+ var handleInputFocus = function handleInputFocus() {
66
+ setIsFocused(true);
67
+ };
68
+ var handleInputChange = function handleInputChange(e) {
69
+ !isControlled && setInputValue(e.target.value);
70
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
71
+ };
72
+ var handleKeyDown = function handleKeyDown(e) {
73
+ var _a;
74
+ if (e.key === 'Enter') {
75
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
76
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur();
77
+ return;
78
+ }
79
+ if (charsAllowedByNumberInput.includes(e.key)) {
80
+ e.preventDefault();
81
+ }
82
+ };
83
+ (0, _react.useEffect)(function () {
84
+ !isControlled && setInputValue(value !== null && value !== void 0 ? value : '');
85
+ }, [isControlled, value]);
86
+ return /*#__PURE__*/React.createElement(RootElement, (0, _extends2["default"])({
87
+ className: cn({
88
+ interactive: isFieldInput,
89
+ theme: theme,
90
+ position: position,
91
+ focus: isFocused,
92
+ disabled: disabled
93
+ }, [className])
94
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!valuePrefix && /*#__PURE__*/React.createElement("div", {
95
+ className: cn('prefix')
96
+ }, valuePrefix), /*#__PURE__*/React.createElement("div", {
97
+ className: cn('box')
98
+ }, isFieldInput && /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
99
+ className: cn('input'),
100
+ type: "number",
101
+ value: currentValue,
102
+ placeholder: placeholder,
103
+ onChange: handleInputChange,
104
+ onBlur: handleInputBlur,
105
+ onFocus: handleInputFocus,
106
+ onKeyDown: handleKeyDown,
107
+ disabled: disabled
108
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
109
+ ref: inputRef
110
+ })), /*#__PURE__*/React.createElement("div", {
111
+ className: cn('line')
112
+ }, (_a = sanitizeValue(currentValue)) !== null && _a !== void 0 ? _a : placeholder)), !!valueUnit && /*#__PURE__*/React.createElement("div", {
113
+ className: cn('unit')
114
+ }, valueUnit));
115
+ };
116
+ var _default = exports["default"] = ValueField;
@@ -77,3 +77,4 @@ export { default as useDragAndDrop } from './components/UploadForm/UploadField/c
77
77
  export { default as useGradient } from './components/Carousel/useGradient';
78
78
  export { default as usePagination } from './components/Pagination/usePagination';
79
79
  export { default as utils } from './components/Modal/utils/utils';
80
+ export { default as ValueField } from './components/ValueField/ValueField';
package/dist/lib/index.js CHANGED
@@ -429,6 +429,12 @@ Object.defineProperty(exports, "UploadFileItemIcon", {
429
429
  return _UploadFileItemIcon["default"];
430
430
  }
431
431
  });
432
+ Object.defineProperty(exports, "ValueField", {
433
+ enumerable: true,
434
+ get: function get() {
435
+ return _ValueField["default"];
436
+ }
437
+ });
432
438
  Object.defineProperty(exports, "checkBreakpointsPropTypes", {
433
439
  enumerable: true,
434
440
  get: function get() {
@@ -556,4 +562,5 @@ var _useDragAndDrop = _interopRequireDefault(require("./components/UploadForm/Up
556
562
  var _useGradient = _interopRequireDefault(require("./components/Carousel/useGradient"));
557
563
  var _usePagination = _interopRequireDefault(require("./components/Pagination/usePagination"));
558
564
  var _utils = _interopRequireDefault(require("./components/Modal/utils/utils"));
565
+ var _ValueField = _interopRequireDefault(require("./components/ValueField/ValueField"));
559
566
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "7.5.0",
3
+ "version": "7.6.1",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -104,5 +104,5 @@
104
104
  "simplebar-react": "^3.2.5",
105
105
  "swiper": "^11.1.1"
106
106
  },
107
- "gitHead": "2254ae9321758f64bbf0756457946865b494cedb"
107
+ "gitHead": "2590ce49ccafa95751c3121f9168eccd8b12eaf8"
108
108
  }