@megafon/ui-core 6.0.0-beta.4 → 6.0.1

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

@@ -1 +1,343 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-text-field{color:var(--content);font-family:inherit;font-size:15px;line-height:24px}.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field .mfui-text-field__field:focus,.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field .mfui-text-field__field:hover,.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field .mfui-text-field__field_resized{border-color:var(--content)}.mfui-text-field__field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:var(--content);display:block;font-family:inherit;font-size:15px;line-height:24px;margin:0;opacity:1;outline:none;padding:25px 56px 9px 16px;-webkit-transition:border-color .3s;transition:border-color .3s;width:100%}.mfui-text-field__field_textarea,.mfui-text-field__field_type_flexible{-webkit-box-sizing:content-box;box-sizing:content-box;overflow-x:hidden;overflow-y:auto;padding-top:28px;resize:none}.mfui-text-field__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-text-field__field_no-icon{padding-right:16px}.mfui-text-field__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:4px;width:12px}.mfui-text-field__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-text-field__resizer:active svg,.mfui-text-field__resizer:hover svg{stroke:var(--spbSky3)}.mfui-text-field__field::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-text-field__field:focus::-webkit-input-placeholder{opacity:1}.mfui-text-field__field:focus:-ms-input-placeholder{opacity:1}.mfui-text-field__field:focus::-moz-placeholder{opacity:1}.mfui-text-field__field:focus::-ms-input-placeholder{opacity:1}.mfui-text-field__field:focus::placeholder{opacity:1}.mfui-text-field__field::-webkit-scrollbar{width:16px}.mfui-text-field__field::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-text-field__field::-webkit-scrollbar-thumb:hover{background-color:#999}.mfui-text-field__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;left:16px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:18px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-text-field__field_textarea{scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-text-field__field_textarea~.mfui-text-field__label{top:16px}.mfui-text-field__field:-webkit-autofill~.mfui-text-field__label,.mfui-text-field__field:focus~.mfui-text-field__label,.mfui-text-field__field:not(:placeholder-shown)~.mfui-text-field__label{-webkit-transform:scale(.8) translate(-11%,-75%);transform:scale(.8) translate(-11%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-text-field__field_textarea:not(:-moz-placeholder-shown)~.mfui-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-text-field__field_textarea:not(:-ms-input-placeholder)~.mfui-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-text-field__field_textarea:focus~.mfui-text-field__label,.mfui-text-field__field_textarea:not(:placeholder-shown)~.mfui-text-field__label{-webkit-transform:scale(.8) translate(-11%,-50%);transform:scale(.8) translate(-11%,-50%)}.mfui-text-field__field-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:relative}.mfui-text-field__field-bottom-wrapper{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;margin-top:0;overflow:hidden}.mfui-text-field__field-bottom-wrapper_filled{margin-top:8px}.mfui-text-field__notice-text{height:0;opacity:0;-webkit-transition:height,opacity;transition:height,opacity;-webkit-transition-duration:.3s;transition-duration:.3s}.mfui-text-field__notice-text_active{height:100%;opacity:1}.mfui-text-field__icon-box{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;top:0;z-index:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;padding-right:16px;text-align:center;fill:var(--content)}.mfui-text-field__icon-box_custom-handler,.mfui-text-field__icon-box_error,.mfui-text-field__icon-box_password,.mfui-text-field__icon_clear{cursor:pointer}.mfui-text-field__icon,.mfui-text-field__icon-box svg{display:block;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-text-field__icon_clear{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-text-field__icon_clear:hover{fill:var(--stcBlack)}.mfui-text-field__require-mark{color:var(--fury)}.mfui-text-field__counter{margin-left:auto}.mfui-text-field_valid:not(.mfui-text-field_disabled) .mfui-text-field__field{border-color:var(--brandGreen)}.mfui-text-field_valid:not(.mfui-text-field_disabled) .mfui-text-field__icon{fill:var(--brandGreen)}.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__field{border-color:var(--fury)}.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__icon{fill:var(--fury)}.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__icon_clear:hover{fill:var(--fury80)}.mfui-text-field_disabled .mfui-text-field__field{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--content);cursor:default}.mfui-text-field_disabled .mfui-text-field__icon-box{cursor:default!important}.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__counter_error,.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-bottom-wrapper{color:var(--fury)}.mfui-text-field_theme_white .mfui-text-field__icon{fill:var(--stcWhite)}.mfui-text-field_theme_white .mfui-text-field__counter,.mfui-text-field_theme_white .mfui-text-field__field-bottom-wrapper{color:var(--stcWhite)}.mfui-text-field_theme_white .mfui-text-field__field::-webkit-scrollbar-thumb{background-color:rgba(51,51,51,.2)}.mfui-text-field_theme_white .mfui-text-field__field::-webkit-scrollbar-thumb:hover{background-color:rgba(51,51,51,.5)}.mfui-text-field_theme_white .mfui-text-field__resizer svg{stroke:var(--stcWhite20)}.mfui-text-field_theme_white .mfui-text-field__resizer:active svg,.mfui-text-field_theme_white .mfui-text-field__resizer:hover svg{stroke:var(--stcWhite50)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field{border-color:var(--base)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):not(:-moz-placeholder-shown){border-color:var(--spbSky2)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):not(:-ms-input-placeholder){border-color:var(--spbSky2)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):not(:placeholder-shown){border-color:var(--spbSky2)}.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):hover{border-color:var(--stcBlack)}.mfui-text-field_theme_white.mfui-text-field_disabled .mfui-text-field__field{background-color:var(--stcWhite20);border-color:var(--stcWhite20);color:var(--stcWhite)}.mfui-text-field_theme_white.mfui-text-field_disabled .mfui-text-field__label{color:var(--stcWhite50)}.mfui-text-field_icon .mfui-text-field__field{padding-right:55px}.mfui-text-field_password .mfui-text-field__field{font:small-caption;font-size:19px;line-height:24px}.mfui-text-field input::-ms-clear,.mfui-text-field input::-ms-reveal{display:none}
+.mfui-text-field {
+  color: var(--content);
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:hover,
+.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field_resized,
+.mfui-text-field:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:focus {
+  border-color: var(--content);
+}
+.mfui-text-field__field {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 25px 56px 9px 16px;
+  border: 1px solid var(--spbSky2);
+  border-radius: 12px;
+  color: var(--content);
+  background-color: var(--base);
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  opacity: 1;
+  -webkit-transition: border-color 0.3s;
+  transition: border-color 0.3s;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  caret-color: var(--brandGreen);
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-text-field__field_textarea,
+.mfui-text-field__field_type_flexible {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  padding-top: 28px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  resize: none;
+}
+.mfui-text-field__field_resized {
+  -webkit-transition: height 0.1s;
+  transition: height 0.1s;
+  will-change: height;
+}
+.mfui-text-field__field_no-icon {
+  padding-right: 16px;
+}
+.mfui-text-field__resizer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  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;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  width: 12px;
+  height: 12px;
+  padding: 4px;
+  cursor: ns-resize;
+}
+.mfui-text-field__resizer svg {
+  -webkit-transition: stroke 0.3s;
+  transition: stroke 0.3s;
+  stroke: var(--spbSky2);
+}
+.mfui-text-field__resizer:hover svg,
+.mfui-text-field__resizer:active svg {
+  stroke: var(--spbSky3);
+}
+.mfui-text-field__field::-webkit-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-text-field__field:-moz-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-text-field__field:-ms-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-text-field__field::-moz-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-text-field__field::-ms-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-text-field__field::placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-text-field__field:focus::-webkit-input-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus:-moz-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus:-ms-input-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus::-moz-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus::-ms-input-placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field:focus::placeholder {
+  opacity: 1;
+}
+.mfui-text-field__field::-webkit-scrollbar {
+  width: 16px;
+}
+.mfui-text-field__field::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  border-radius: 16px;
+  background-color: #D8D8D8;
+  background-clip: padding-box;
+}
+.mfui-text-field__field::-webkit-scrollbar-thumb:hover {
+  background-color: #999999;
+}
+.mfui-text-field__label {
+  position: absolute;
+  top: 18px;
+  left: 16px;
+  z-index: 1;
+  display: block;
+  overflow: auto;
+  color: var(--spbSky3);
+  -webkit-transition: top 0.5s, -webkit-transform 0.5s;
+  transition: top 0.5s, -webkit-transform 0.5s;
+  transition: transform 0.5s, top 0.5s;
+  transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
+  pointer-events: none;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-text-field__field_textarea {
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+}
+.mfui-text-field__field_textarea ~ .mfui-text-field__label {
+  top: 16px;
+}
+.mfui-text-field__field:focus ~ .mfui-text-field__label,
+.mfui-text-field__field:not(:placeholder-shown) ~ .mfui-text-field__label,
+.mfui-text-field__field:-webkit-autofill ~ .mfui-text-field__label {
+  -webkit-transform: scale(0.8) translate(-11%, -75%);
+          transform: scale(0.8) translate(-11%, -75%);
+  -webkit-transition-duration: 0.2s, 0.01s;
+          transition-duration: 0.2s, 0.01s;
+}
+.mfui-text-field__field_textarea:focus ~ .mfui-text-field__label,
+.mfui-text-field__field_textarea:not(:placeholder-shown) ~ .mfui-text-field__label {
+  -webkit-transform: scale(0.8) translate(-11%, -50%);
+          transform: scale(0.8) translate(-11%, -50%);
+}
+.mfui-text-field__field-wrapper {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+}
+.mfui-text-field__field-bottom-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-top: 0;
+  overflow: hidden;
+  color: var(--spbSky3);
+  font-size: 12px;
+  line-height: 18px;
+}
+.mfui-text-field__field-bottom-wrapper_filled {
+  margin-top: 8px;
+}
+.mfui-text-field__notice-text {
+  height: 0;
+  opacity: 0;
+  -webkit-transition: height, opacity;
+  transition: height, opacity;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-text-field__notice-text_active {
+  height: 100%;
+  opacity: 1;
+}
+.mfui-text-field__icon-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  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;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding-right: 16px;
+  text-align: center;
+  fill: var(--content);
+}
+.mfui-text-field__icon-box_error,
+.mfui-text-field__icon-box_password,
+.mfui-text-field__icon-box_custom-handler,
+.mfui-text-field__icon_clear {
+  cursor: pointer;
+}
+.mfui-text-field__icon,
+.mfui-text-field__icon-box svg {
+  display: block;
+  width: 32px;
+  height: 32px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mfui-text-field__icon_clear {
+  -webkit-transition: fill 0.3s;
+  transition: fill 0.3s;
+  fill: var(--spbSky3);
+}
+.mfui-text-field__icon_clear:hover {
+  fill: var(--stcBlack);
+}
+.mfui-text-field__require-mark {
+  color: var(--fury);
+}
+.mfui-text-field__counter {
+  margin-left: auto;
+}
+.mfui-text-field_valid:not(.mfui-text-field_disabled) .mfui-text-field__field {
+  border-color: var(--brandGreen);
+}
+.mfui-text-field_valid:not(.mfui-text-field_disabled) .mfui-text-field__icon {
+  fill: var(--brandGreen);
+}
+.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__field {
+  border-color: var(--fury);
+}
+.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__icon {
+  fill: var(--fury);
+}
+.mfui-text-field_error:not(.mfui-text-field_disabled) .mfui-text-field__icon_clear:hover {
+  fill: var(--fury80);
+}
+.mfui-text-field_disabled .mfui-text-field__field {
+  border-color: var(--spbSky0);
+  color: var(--content);
+  background-color: var(--spbSky0);
+  cursor: default;
+}
+.mfui-text-field_disabled .mfui-text-field__icon-box {
+  cursor: default !important;
+}
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__counter_error,
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-bottom-wrapper {
+  color: var(--fury);
+}
+.mfui-text-field_theme_white .mfui-text-field__icon {
+  fill: var(--stcWhite);
+}
+.mfui-text-field_theme_white .mfui-text-field__field-bottom-wrapper,
+.mfui-text-field_theme_white .mfui-text-field__counter {
+  color: var(--stcWhite);
+}
+.mfui-text-field_theme_white .mfui-text-field__field::-webkit-scrollbar-thumb {
+  background-color: rgba(51, 51, 51, 0.2);
+}
+.mfui-text-field_theme_white .mfui-text-field__field::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(51, 51, 51, 0.5);
+}
+.mfui-text-field_theme_white .mfui-text-field__resizer svg {
+  stroke: var(--stcWhite20);
+}
+.mfui-text-field_theme_white .mfui-text-field__resizer:hover svg,
+.mfui-text-field_theme_white .mfui-text-field__resizer:active svg {
+  stroke: var(--stcWhite50);
+}
+.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field {
+  border-color: var(--base);
+}
+.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):not(:placeholder-shown) {
+  border-color: var(--spbSky2);
+}
+.mfui-text-field_theme_white:not(.mfui-text-field_disabled):not(.mfui-text-field_error):not(.mfui-text-field_valid) .mfui-text-field__field:not(:focus):hover {
+  border-color: var(--stcBlack);
+}
+.mfui-text-field_theme_white.mfui-text-field_disabled .mfui-text-field__field {
+  border-color: var(--stcWhite20);
+  color: var(--stcWhite);
+  background-color: var(--stcWhite20);
+}
+.mfui-text-field_theme_white.mfui-text-field_disabled .mfui-text-field__label {
+  color: var(--stcWhite50);
+}
+.mfui-text-field_icon .mfui-text-field__field {
+  padding-right: 55px;
+}
+.mfui-text-field_password .mfui-text-field__field {
+  font: small-caption;
+  font-size: 19px;
+  line-height: 24px;
+}
+.mfui-text-field input::-ms-clear,
+.mfui-text-field input::-ms-reveal {
+  display: none;
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './TextField.scss';
+import './TextField.less';
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -12,7 +12,7 @@ export declare const MinTextareaHeight: {
     readonly ONE_ROW: 24;
     readonly THREE_ROWS: number;
 };
-type MinTextareaHeightType = (typeof MinTextareaHeight)[keyof typeof MinTextareaHeight];
+declare type MinTextareaHeightType = typeof MinTextareaHeight[keyof typeof MinTextareaHeight];
 interface IMaskSelection {
     start: number;
     end: number;
@@ -21,7 +21,7 @@ export interface IMaskState {
     value: string;
     selection: IMaskSelection;
 }
-export type TextFieldProps = {
+export declare type TextFieldProps = {
     /** Включить режим textarea. Fixed - это alias для textarea=true. */
     textarea?: boolean | 'fixed' | 'flexible';
     /** Лейбл */