@megafon/ui-core 2.0.0-beta.96 → 2.0.0

package/dist/es/components/TextField/TextField.css

@@ -5,133 +5,111 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-text-field {
+.mfui-text-field {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
   color: #333333;
 }
-.mfui-beta-text-field__field {
+.mfui-text-field__field {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
-  display: block;
   position: relative;
   z-index: 1;
-  width: 100%;
+  display: block;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  width: 100%;
   min-height: 48px;
-  outline: none;
+  margin: 0;
   padding: 11px 19px;
+  border-radius: 0;
   background-color: transparent;
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   opacity: 1;
-  border-radius: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  margin: 0;
 }
-.mfui-beta-text-field__field_type_fixed {
+.mfui-text-field__field_type_fixed {
   resize: none;
 }
-.mfui-beta-text-field__field_type_flexible {
-  resize: vertical;
+.mfui-text-field__field_type_flexible {
   overflow: hidden;
+  resize: vertical;
 }
-.mfui-beta-text-field__field_scrolling {
+.mfui-text-field__field_scrolling {
   overflow: auto;
 }
-.mfui-beta-text-field__placeholder-input,
-.mfui-beta-text-field__placeholder-textarea {
-  color: #737373;
-  padding-left: 20px;
-  font-weight: 400;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  position: absolute;
-  left: 0;
-  z-index: 0;
-}
-.mfui-beta-text-field__placeholder-input {
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
-.mfui-beta-text-field__placeholder-textarea {
-  top: 13px;
-}
-.mfui-beta-text-field input::-webkit-input-placeholder {
+.mfui-text-field input::-webkit-input-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-text-field input:-moz-placeholder {
+.mfui-text-field input:-moz-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-text-field input:-ms-input-placeholder {
+.mfui-text-field input:-ms-input-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-text-field input::-ms-clear,
-.mfui-beta-text-field input::-ms-reveal {
+.mfui-text-field input::-ms-clear,
+.mfui-text-field input::-ms-reveal {
   display: none;
 }
-.mfui-beta-text-field__field-wrapper {
+.mfui-text-field__field-wrapper {
   position: relative;
   -webkit-box-flex: 1;
       -ms-flex: 1 0 100px;
           flex: 1 0 100px;
   background: #FFFFFF;
 }
-.mfui-beta-text-field__icon-box {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-text-field__icon-box {
   position: absolute;
-  z-index: 0;
   top: 0;
   right: 0;
   bottom: 0;
+  z-index: 3;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  padding-right: 16px;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  cursor: pointer;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding-right: 16px;
   text-align: center;
 }
-.mfui-beta-text-field__icon-box_error,
-.mfui-beta-text-field__icon-box_password,
-.mfui-beta-text-field__icon-box_custom-handler {
-  z-index: 3;
+.mfui-text-field__icon-box_error,
+.mfui-text-field__icon-box_password,
+.mfui-text-field__icon-box_custom-handler {
+  cursor: pointer;
 }
-.mfui-beta-text-field__icon {
+.mfui-text-field__icon {
+  display: block;
   width: 32px;
   height: 32px;
-  display: block;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
-.mfui-beta-text-field__text {
+.mfui-text-field__text {
+  margin-top: 4px;
   font-size: 12px;
   line-height: 16px;
-  margin-top: 4px;
 }
-.mfui-beta-text-field__require-mark {
+.mfui-text-field__require-mark {
+  margin-left: 1px;
+  color: #F62434;
   font-size: 20px;
   line-height: 0;
-  color: #F62434;
-  margin-left: 1px;
 }
-.mfui-beta-text-field__wrap {
+.mfui-text-field__wrap {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -139,84 +117,83 @@ h5 {
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.mfui-beta-text-field__counter {
-  opacity: 0.5;
+.mfui-text-field__counter {
   margin-top: 4px;
   margin-left: auto;
+  opacity: 0.5;
 }
-.mfui-beta-text-field__counter_error {
+.mfui-text-field__counter_error {
   color: #F62434;
   opacity: 1;
 }
-.mfui-beta-text-field_theme_default .mfui-beta-text-field__field {
-  color: #333333;
+.mfui-text-field_theme_default .mfui-text-field__field {
   border: 1px solid #D8D8D8;
+  color: #333333;
   background-color: transparent;
 }
-.mfui-beta-text-field_theme_default .mfui-beta-text-field__field-wrapper_no-touch:hover .mfui-beta-text-field__field,
-.mfui-beta-text-field_theme_default .mfui-beta-text-field__field:focus {
+.mfui-text-field_theme_default .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
+.mfui-text-field_theme_default .mfui-text-field__field:focus {
   border-color: #333333;
 }
-.mfui-beta-text-field_theme_default.mfui-beta-text-field_valid .mfui-beta-text-field__field-wrapper_no-touch:hover .mfui-beta-text-field__field,
-.mfui-beta-text-field_theme_default.mfui-beta-text-field_valid .mfui-beta-text-field__field {
+.mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
+.mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field {
   border-color: #00B956;
 }
-.mfui-beta-text-field_theme_default.mfui-beta-text-field_valid .mfui-beta-text-field__icon {
+.mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__icon {
   fill: #00B956;
 }
-.mfui-beta-text-field_theme_default.mfui-beta-text-field_error .mfui-beta-text-field__field-wrapper:hover .mfui-beta-text-field__field,
-.mfui-beta-text-field_theme_default.mfui-beta-text-field_error .mfui-beta-text-field__field {
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field {
   border-color: #F62434;
 }
-.mfui-beta-text-field_theme_default.mfui-beta-text-field_error .mfui-beta-text-field__icon {
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__icon {
   fill: #F62434;
 }
-.mfui-beta-text-field_theme_default.mfui-beta-text-field_error .mfui-beta-text-field__text_error {
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__text_error {
   color: #F62434;
 }
-.mfui-beta-text-field_theme_white .mfui-beta-text-field__field {
-  color: #333333;
+.mfui-text-field_theme_white .mfui-text-field__field {
   border: 1px solid #FFFFFF;
+  color: #333333;
 }
-.mfui-beta-text-field_theme_white .mfui-beta-text-field__field-wrapper:hover .mfui-beta-text-field__field,
-.mfui-beta-text-field_theme_white .mfui-beta-text-field__field:focus {
+.mfui-text-field_theme_white .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
+.mfui-text-field_theme_white .mfui-text-field__field:focus {
   border-color: #333333;
 }
-.mfui-beta-text-field_theme_white.mfui-beta-text-field_error .mfui-beta-text-field__field-wrapper:hover .mfui-beta-text-field__field,
-.mfui-beta-text-field_theme_white.mfui-beta-text-field_error .mfui-beta-text-field__field {
+.mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
+.mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__field {
   border-color: #F62434;
 }
-.mfui-beta-text-field_theme_white.mfui-beta-text-field_error .mfui-beta-text-field__icon {
+.mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__icon {
   fill: #F62434;
 }
-.mfui-beta-text-field_theme_white.mfui-beta-text-field_error .mfui-beta-text-field__text_error {
+.mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__text_error {
   color: #F62434;
 }
-.mfui-beta-text-field__text_success {
+.mfui-text-field__text_success {
   color: #00B956;
 }
-.mfui-beta-text-field_disabled .mfui-beta-text-field__field-wrapper {
+.mfui-text-field_disabled .mfui-text-field__field-wrapper {
   background-color: #EDEDED !important;
 }
-.mfui-beta-text-field_disabled .mfui-beta-text-field__field {
+.mfui-text-field_disabled .mfui-text-field__field {
   border-color: #EDEDED !important;
-  cursor: default !important;
   color: #333333 !important;
+  cursor: default !important;
   -webkit-text-fill-color: #333333 !important;
 }
-.mfui-beta-text-field_disabled .mfui-beta-text-field__icon-box {
+.mfui-text-field_disabled .mfui-text-field__icon-box {
   cursor: default !important;
 }
-.mfui-beta-text-field_icon .mfui-beta-text-field__field {
+.mfui-text-field_icon .mfui-text-field__field {
   padding-right: 55px;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-text-field_icon.mfui-beta-text-field_size_large .mfui-beta-text-field__field {
+  .mfui-text-field_icon.mfui-text-field_size_large .mfui-text-field__field {
     padding-right: 65px;
   }
 }
-.mfui-beta-text-field_password .mfui-beta-text-field__field,
-.mfui-beta-text-field_password .mfui-beta-text-field__placeholder {
+.mfui-text-field_password .mfui-text-field__field {
   font: small-caption;
   font-size: 19px;
 }

package/dist/es/components/TextField/TextField.d.ts

@@ -8,7 +8,15 @@ export declare const TextareaTypes: {
     readonly FIXED: "fixed";
     readonly FLEXIBLE: "flexible";
 };
-export interface ITextFieldProps {
+interface IMaskSelection {
+    start: number;
+    end: number;
+}
+export interface IMaskState {
+    value: string;
+    selection: IMaskSelection;
+}
+export declare type TextFieldProps = {
     /** Включить режим textarea. Fixed - это alias для textarea=true. */
     textarea?: boolean | 'fixed' | 'flexible';
     /** Лейбл */
@@ -52,7 +60,7 @@ export interface ITextFieldProps {
     className?: string;
     /** Дополнительные классы элементов */
     classes?: {
-        input?: string | null;
+        input?: string;
     };
     /** Аргумент элемента input */
     inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';
@@ -60,6 +68,8 @@ export interface ITextFieldProps {
     isControlled?: boolean;
     /** Обработчик изменения значения */
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Обработчик изменения значения маскированного инпута до обработки маской */
+    onBeforeMaskChange?: (value: string, newState: IMaskState, oldState: IMaskState) => void;
     /** Обработчик выхода из фокуса */
     onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик входа в фокус */
@@ -68,6 +78,6 @@ export interface ITextFieldProps {
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик клика добавленной иконки */
     onCustomIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-}
-declare const TextField: React.FC<ITextFieldProps>;
+};
+declare const TextField: React.FC<TextFieldProps>;
 export default TextField;