@skbkontur/react-ui 0.0.0-942b5aade9 → 0.0.0-95a1dbe516

package/cjs/components/CurrencyLabel/CurrencyLabel.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.CurrencyLabelDataTids = exports.CurrencyLabel = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CurrencyLabelDataTids = exports.CurrencyLabel = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("../CurrencyInput/constants");
 var _CurrencyHelper = require("../CurrencyInput/CurrencyHelper");
@@ -41,6 +41,7 @@ var CurrencyLabel = function CurrencyLabel(_ref)
 };exports.CurrencyLabel = CurrencyLabel;
 
 CurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';
+CurrencyLabel.displayName = 'CurrencyLabel';
 
 CurrencyLabel.propTypes = {
   fractionDigits: function fractionDigits(_ref2) {var _ref2$fractionDigits = _ref2.fractionDigits,_fractionDigits = _ref2$fractionDigits === void 0 ? FRACTION_DIGITS_DEFAULT : _ref2$fractionDigits,value = _ref2.value;

package/cjs/components/CurrencyLabel/CurrencyLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CurrencyLabel.tsx"],"names":["FRACTION_DIGITS_DEFAULT","CurrencyLabelDataTids","root","CurrencyLabel","value","fractionDigits","currencySymbol","hideTrailingZeros","rest","CurrencyHelper","format","String","fromCharCode","__KONTUR_REACT_UI__","propTypes","MAX_SAFE_DIGITS","Error","destructString","fraction","length","Number","isInteger"],"mappings":"uTAAA;;AAEA;AACA;AACA,6D;;;;;;;;;;;;;;AAcA,IAAMA,uBAAuB,GAAG,CAAhC;;AAEO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B,C;;;AAIA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;;;;;;AAMU,KALrCC,KAKqC,QALrCA,KAKqC,4BAJrCC,cAIqC,CAJrCA,cAIqC,oCAJpBL,uBAIoB,uBAHrCM,cAGqC,QAHrCA,cAGqC,8BAFrCC,iBAEqC,CAFrCA,iBAEqC,sCAFjB,KAEiB,yBADlCC,IACkC;AACrC;AACE,iCAAC,4BAAD,EAAmBA,IAAnB;AACE,2CAAM,YAAUP,qBAAqB,CAACC,IAAtC;AACGO,mCAAeC,MAAf,CAAsBN,KAAtB,EAA6B,EAAEC,cAAc,EAAdA,cAAF,EAAkBE,iBAAiB,EAAjBA,iBAAlB,EAA7B,CADH;AAEGD,IAAAA,cAAc,IAAIK,MAAM,CAACC,YAAP,CAAoB,IAApB,CAFrB,CAE+C,YAF/C;AAGGN,IAAAA,cAHH,CADF,CADF;;;;AASD,CAhBM,C;;AAkBPH,aAAa,CAACU,mBAAd,GAAoC,eAApC;;AAEAV,aAAa,CAACW,SAAd,GAA0B;AACxBT,EAAAA,cAAc,EAAE,+BAA6E,kCAA1EA,cAA0E,CAA1EA,eAA0E,qCAAzDL,uBAAyD,wBAAhCI,KAAgC,SAAhCA,KAAgC;AAC3F,QAAIC,eAAc,GAAGU,0BAArB,EAAsC;AACpC,aAAO,IAAIC,KAAJ;AACL,0DAAkDD,0BAAlD,4EADK,CAAP;;;AAID;;AAED,gBAAqBN,+BAAeQ,cAAf,CAA8BN,MAAM,CAACP,KAAD,CAApC,KAAgD,EAAEc,QAAQ,EAAE,EAAZ,EAArE,CAAQA,QAAR,SAAQA,QAAR;AACA,QAAIA,QAAQ,CAACC,MAAT,GAAkBd,eAAtB,EAAsC;AACpC,aAAO,IAAIW,KAAJ;AACL,gIADK,CAAP;;;AAID;;AAED,QAAI,CAACI,MAAM,CAACC,SAAP,CAAiBhB,eAAjB,CAAL,EAAuC;AACrC,aAAO,IAAIW,KAAJ,2GAAP;;;AAGD;;AAED,WAAO,IAAP;AACD,GAxBuB,EAA1B","sourcesContent":["import React from 'react';\n\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\n\nexport interface CurrencyLabelProps extends CommonProps {\n  /**\n   * Минимальное количество отображаемых знаков после запятой\n   * @default 2\n   */\n  fractionDigits?: number;\n  value: number;\n  currencySymbol?: React.ReactNode;\n  /** Убрать лишние нули после запятой */\n  hideTrailingZeros?: boolean;\n}\n\nconst FRACTION_DIGITS_DEFAULT = 2;\n\nexport const CurrencyLabelDataTids = {\n  root: 'CurrencyLabel__root',\n} as const;\n\nexport const CurrencyLabel = ({\n  value,\n  fractionDigits = FRACTION_DIGITS_DEFAULT,\n  currencySymbol,\n  hideTrailingZeros = false,\n  ...rest\n}: CurrencyLabelProps): JSX.Element => {\n  return (\n    <CommonWrapper {...rest}>\n      <span data-tid={CurrencyLabelDataTids.root}>\n        {CurrencyHelper.format(value, { fractionDigits, hideTrailingZeros })}\n        {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\n        {currencySymbol}\n      </span>\n    </CommonWrapper>\n  );\n};\n\nCurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';\n\nCurrencyLabel.propTypes = {\n  fractionDigits: ({ fractionDigits = FRACTION_DIGITS_DEFAULT, value }: CurrencyLabelProps) => {\n    if (fractionDigits > MAX_SAFE_DIGITS) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.` +\n          `\\nSee https://tech.skbkontur.ru/react-ui/#/CurrencyInput?id=why15`,\n      );\n    }\n\n    const { fraction } = CurrencyHelper.destructString(String(value)) || { fraction: '' };\n    if (fraction.length > fractionDigits) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\n          `'value' will not be cutted`,\n      );\n    }\n\n    if (!Number.isInteger(fractionDigits)) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\n      );\n    }\n\n    return null;\n  },\n};\n"]}
+{"version":3,"sources":["CurrencyLabel.tsx"],"names":["FRACTION_DIGITS_DEFAULT","CurrencyLabelDataTids","root","CurrencyLabel","value","fractionDigits","currencySymbol","hideTrailingZeros","rest","CurrencyHelper","format","String","fromCharCode","__KONTUR_REACT_UI__","displayName","propTypes","MAX_SAFE_DIGITS","Error","destructString","fraction","length","Number","isInteger"],"mappings":"+TAAA;;AAEA;AACA;AACA,6D;;;;;;;;;;;;;;AAcA,IAAMA,uBAAuB,GAAG,CAAhC;;AAEO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B,C;;;AAIA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;;;;;;AAMU,KALrCC,KAKqC,QALrCA,KAKqC,4BAJrCC,cAIqC,CAJrCA,cAIqC,oCAJpBL,uBAIoB,uBAHrCM,cAGqC,QAHrCA,cAGqC,8BAFrCC,iBAEqC,CAFrCA,iBAEqC,sCAFjB,KAEiB,yBADlCC,IACkC;AACrC;AACE,iCAAC,4BAAD,EAAmBA,IAAnB;AACE,2CAAM,YAAUP,qBAAqB,CAACC,IAAtC;AACGO,mCAAeC,MAAf,CAAsBN,KAAtB,EAA6B,EAAEC,cAAc,EAAdA,cAAF,EAAkBE,iBAAiB,EAAjBA,iBAAlB,EAA7B,CADH;AAEGD,IAAAA,cAAc,IAAIK,MAAM,CAACC,YAAP,CAAoB,IAApB,CAFrB,CAE+C,YAF/C;AAGGN,IAAAA,cAHH,CADF,CADF;;;;AASD,CAhBM,C;;AAkBPH,aAAa,CAACU,mBAAd,GAAoC,eAApC;AACAV,aAAa,CAACW,WAAd,GAA4B,eAA5B;;AAEAX,aAAa,CAACY,SAAd,GAA0B;AACxBV,EAAAA,cAAc,EAAE,+BAA6E,kCAA1EA,cAA0E,CAA1EA,eAA0E,qCAAzDL,uBAAyD,wBAAhCI,KAAgC,SAAhCA,KAAgC;AAC3F,QAAIC,eAAc,GAAGW,0BAArB,EAAsC;AACpC,aAAO,IAAIC,KAAJ;AACL,0DAAkDD,0BAAlD,4EADK,CAAP;;;AAID;;AAED,gBAAqBP,+BAAeS,cAAf,CAA8BP,MAAM,CAACP,KAAD,CAApC,KAAgD,EAAEe,QAAQ,EAAE,EAAZ,EAArE,CAAQA,QAAR,SAAQA,QAAR;AACA,QAAIA,QAAQ,CAACC,MAAT,GAAkBf,eAAtB,EAAsC;AACpC,aAAO,IAAIY,KAAJ;AACL,gIADK,CAAP;;;AAID;;AAED,QAAI,CAACI,MAAM,CAACC,SAAP,CAAiBjB,eAAjB,CAAL,EAAuC;AACrC,aAAO,IAAIY,KAAJ,2GAAP;;;AAGD;;AAED,WAAO,IAAP;AACD,GAxBuB,EAA1B","sourcesContent":["import React from 'react';\n\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\n\nexport interface CurrencyLabelProps extends CommonProps {\n  /**\n   * Минимальное количество отображаемых знаков после запятой\n   * @default 2\n   */\n  fractionDigits?: number;\n  value: number;\n  currencySymbol?: React.ReactNode;\n  /** Убрать лишние нули после запятой */\n  hideTrailingZeros?: boolean;\n}\n\nconst FRACTION_DIGITS_DEFAULT = 2;\n\nexport const CurrencyLabelDataTids = {\n  root: 'CurrencyLabel__root',\n} as const;\n\nexport const CurrencyLabel = ({\n  value,\n  fractionDigits = FRACTION_DIGITS_DEFAULT,\n  currencySymbol,\n  hideTrailingZeros = false,\n  ...rest\n}: CurrencyLabelProps): JSX.Element => {\n  return (\n    <CommonWrapper {...rest}>\n      <span data-tid={CurrencyLabelDataTids.root}>\n        {CurrencyHelper.format(value, { fractionDigits, hideTrailingZeros })}\n        {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\n        {currencySymbol}\n      </span>\n    </CommonWrapper>\n  );\n};\n\nCurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';\nCurrencyLabel.displayName = 'CurrencyLabel';\n\nCurrencyLabel.propTypes = {\n  fractionDigits: ({ fractionDigits = FRACTION_DIGITS_DEFAULT, value }: CurrencyLabelProps) => {\n    if (fractionDigits > MAX_SAFE_DIGITS) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.` +\n          `\\nSee https://tech.skbkontur.ru/react-ui/#/CurrencyInput?id=why15`,\n      );\n    }\n\n    const { fraction } = CurrencyHelper.destructString(String(value)) || { fraction: '' };\n    if (fraction.length > fractionDigits) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\n          `'value' will not be cutted`,\n      );\n    }\n\n    if (!Number.isInteger(fractionDigits)) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\n      );\n    }\n\n    return null;\n  },\n};\n"]}

package/cjs/components/DateInput/CalendarIcon.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.CalendarIcon = void 0;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CalendarIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 
 var _CalendarIcon16Light = require("../../internal/icons2022/CalendarIcon/CalendarIcon16Light");

package/cjs/components/DateInput/DateFragmentsView.d.ts

@@ -8,6 +8,7 @@ interface DateFragmentViewProps {
 }
 export declare class DateFragmentsView extends React.Component<DateFragmentViewProps> {
     private theme;
+    private emotion;
     private rootNode;
     isFragment: (el: HTMLElement | EventTarget) => boolean;
     getRootNode: () => HTMLSpanElement | null;

package/cjs/components/DateInput/DateFragmentsView.js

@@ -1,12 +1,14 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.DateFragmentsView = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.DateFragmentsView = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
+
 
 var _MaskCharLowLine = require("../../internal/MaskCharLowLine");
 var _InternalDateValidator = require("../../lib/date/InternalDateValidator");
 var _types = require("../../lib/date/types");
 
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _Emotion = require("../../lib/theming/Emotion");
-var _SSRSafe = require("../../lib/SSRSafe");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _DateFragmentsView = require("./DateFragmentsView.styles");var
 
@@ -19,6 +21,7 @@ var _DateFragmentsView = require("./DateFragmentsView.styles");var
 
 DateFragmentsView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(DateFragmentsView, _React$Component);function DateFragmentsView() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
+
     rootNode = null;_this.
 
     isFragment = function (el) {
@@ -86,6 +89,25 @@ DateFragmentsView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -108,4 +130,4 @@ DateFragmentsView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose
 
     rootRef = function (el) {
       _this.rootNode = el;
-    };return _this;}var _proto = DateFragmentsView.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;return /*#__PURE__*/_react.default.createElement("span", { ref: this.rootRef, className: _DateFragmentsView.styles.root(this.theme) }, this.props.fragments.map(function (fragment, index) {return fragment.type === _types.InternalDateComponentType.Separator ? _this3.renderSeparator(fragment, index) : _this3.renderDateComponent(fragment, index);}));};_proto.renderSeparator = function renderSeparator(fragment, index) {var _cx;var separatorClassName = (0, _Emotion.cx)((_cx = {}, _cx[_DateFragmentsView.styles.mask(this.theme)] = true, _cx[_DateFragmentsView.styles.delimiterFilled()] = this.props.fragments[index + 1].value !== null, _cx));return /*#__PURE__*/_react.default.createElement("span", { key: index, className: separatorClassName }, fragment.value);};_proto.renderDateComponent = function renderDateComponent(fragment, index) {var _this$props = this.props,inputMode = _this$props.inputMode,onSelectDateComponent = _this$props.onSelectDateComponent,selected = _this$props.selected;var type = fragment.type,value = fragment.value,length = fragment.length,valueWithPad = fragment.valueWithPad;var getValueMask = function getValueMask() {if (value === null || selected === type && inputMode) {return value;}return valueWithPad || value;};var valueMask = getValueMask();var lengthMask = _InternalDateValidator.InternalDateValidator.testParseToNumber(valueMask) ? Math.max(length - valueMask.toString().length, 0) : length;var handleMouseUp = function handleMouseUp(e) {if (_SSRSafe.renderTarget.activeElement && _SSRSafe.renderTarget.activeElement.contains(e.currentTarget)) {onSelectDateComponent(type, e);}};return /*#__PURE__*/_react.default.createElement("span", { key: index, "data-fragment": "", onMouseUp: handleMouseUp }, valueMask, /*#__PURE__*/_react.default.createElement("span", { "data-tid": "DateFragmentsView__placeholder", className: _DateFragmentsView.styles.mask(this.theme) }, Array(lengthMask).fill('').map(function (_, i) {return /*#__PURE__*/_react.default.createElement(_MaskCharLowLine.MaskCharLowLine, { key: i });})));};return DateFragmentsView;}(_react.default.Component);exports.DateFragmentsView = DateFragmentsView;
+    };return _this;}var _proto = DateFragmentsView.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var _this$emotion$cx,_this3 = this;var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme);var styles = (0, _DateFragmentsView.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement("span", { ref: this.rootRef, className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.root()] = true, _this$emotion$cx[styles.selected(this.theme)] = !_isTheme2022, _this$emotion$cx[styles.selectedFor22Themes(this.theme)] = _isTheme2022, _this$emotion$cx)) }, this.props.fragments.map(function (fragment, index) {return fragment.type === _types.InternalDateComponentType.Separator ? _this3.renderSeparator(fragment, index) : _this3.renderDateComponent(fragment, index);}));};_proto.renderSeparator = function renderSeparator(fragment, index) {var _this$emotion$cx2;var styles = (0, _DateFragmentsView.getStyles)(this.emotion);var separatorClassName = this.emotion.cx((_this$emotion$cx2 = {}, _this$emotion$cx2[styles.mask(this.theme)] = true, _this$emotion$cx2[styles.delimiterFilled()] = this.props.fragments[index + 1].value !== null, _this$emotion$cx2));return /*#__PURE__*/_react.default.createElement("span", { key: index, className: separatorClassName }, fragment.value);};_proto.renderDateComponent = function renderDateComponent(fragment, index) {var _this$props = this.props,inputMode = _this$props.inputMode,onSelectDateComponent = _this$props.onSelectDateComponent,selected = _this$props.selected;var type = fragment.type,value = fragment.value,length = fragment.length,valueWithPad = fragment.valueWithPad;var getValueMask = function getValueMask() {if (value === null || selected === type && inputMode) {return value;}return valueWithPad || value;};var valueMask = getValueMask();var lengthMask = _InternalDateValidator.InternalDateValidator.testParseToNumber(valueMask) ? Math.max(length - valueMask.toString().length, 0) : length;var handleMouseUp = function handleMouseUp(e) {var _globalObject$documen, _globalObject$documen2;if ((_globalObject$documen = _globalObject.globalObject.document) != null && (_globalObject$documen2 = _globalObject$documen.activeElement) != null && _globalObject$documen2.contains(e.currentTarget)) {onSelectDateComponent(type, e);}};var styles = (0, _DateFragmentsView.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement("span", { key: index, "data-fragment": "", onMouseUp: handleMouseUp }, valueMask, /*#__PURE__*/_react.default.createElement("span", { "data-tid": "DateFragmentsView__placeholder", className: styles.mask(this.theme) }, Array(lengthMask).fill('').map(function (_, i) {return /*#__PURE__*/_react.default.createElement(_MaskCharLowLine.MaskCharLowLine, { key: i });})));};return DateFragmentsView;}(_react.default.Component);exports.DateFragmentsView = DateFragmentsView;

package/cjs/components/DateInput/DateFragmentsView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DateFragmentsView.tsx"],"names":["DateFragmentsView","rootNode","isFragment","el","fragments","Array","from","querySelectorAll","some","fragment","contains","getRootNode","rootRef","render","theme","renderMain","styles","root","props","map","index","type","InternalDateComponentType","Separator","renderSeparator","renderDateComponent","separatorClassName","mask","delimiterFilled","value","inputMode","onSelectDateComponent","selected","length","valueWithPad","getValueMask","valueMask","lengthMask","InternalDateValidator","testParseToNumber","Math","max","toString","handleMouseUp","e","renderTarget","activeElement","currentTarget","fill","_","i","React","Component"],"mappings":"6PAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,+D;;;;;;;;;AASaA,iB;;AAEHC,IAAAA,Q,GAAmC,I;;AAEpCC,IAAAA,U,GAAa,UAACC,EAAD,EAA4C;AAC9D,UAAI,MAAKF,QAAT,EAAmB;AACjB;AACA,YAAMG,SAA4B,GAAGC,KAAK,CAACC,IAAN,CAAW,MAAKL,QAAL,CAAcM,gBAAd,CAA+B,iBAA/B,CAAX,CAArC;AACA,eAAOH,SAAS,CAACI,IAAV,CAAe,UAACC,QAAD,UAAcA,QAAQ,KAAKN,EAAb,IAAmBM,QAAQ,CAACC,QAAT,CAAkBP,EAAlB,CAAjC,EAAf,CAAP;AACD;AACD,aAAO,KAAP;AACD,K;;AAEMQ,IAAAA,W,GAAc,oBAAM,MAAKV,QAAX,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EbW,IAAAA,O,GAAU,UAACT,EAAD,EAAgC;AAChD,YAAKF,QAAL,GAAgBE,EAAhB;AACD,K,+DA5EMU,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,mBACnB,oBACE,uCAAM,GAAG,EAAE,KAAKH,OAAhB,EAAyB,SAAS,EAAEI,0BAAOC,IAAP,CAAY,KAAKH,KAAjB,CAApC,IACG,KAAKI,KAAL,CAAWd,SAAX,CAAqBe,GAArB,CAAyB,UAACV,QAAD,EAAWW,KAAX,UACxBX,QAAQ,CAACY,IAAT,KAAkBC,iCAA0BC,SAA5C,GACI,MAAI,CAACC,eAAL,CAAqBf,QAArB,EAA+BW,KAA/B,CADJ,GAEI,MAAI,CAACK,mBAAL,CAAyBhB,QAAzB,EAAmCW,KAAnC,CAHoB,EAAzB,CADH,CADF,CASD,C,QAEOI,e,GAAR,yBAAwBf,QAAxB,EAAwDW,KAAxD,EAAoF,SAClF,IAAMM,kBAAkB,GAAG,gCACxBV,0BAAOW,IAAP,CAAY,KAAKb,KAAjB,CADwB,IACE,IADF,MAExBE,0BAAOY,eAAP,EAFwB,IAEG,KAAKV,KAAL,CAAWd,SAAX,CAAqBgB,KAAK,GAAG,CAA7B,EAAgCS,KAAhC,KAA0C,IAF7C,OAA3B,CAKA,oBACE,uCAAM,GAAG,EAAET,KAAX,EAAkB,SAAS,EAAEM,kBAA7B,IACGjB,QAAQ,CAACoB,KADZ,CADF,CAKD,C,QAEOJ,mB,GAAR,6BAA4BhB,QAA5B,EAA4DW,KAA5D,EAAwF,CACtF,kBAAuD,KAAKF,KAA5D,CAAQY,SAAR,eAAQA,SAAR,CAAmBC,qBAAnB,eAAmBA,qBAAnB,CAA0CC,QAA1C,eAA0CA,QAA1C,CACA,IAAQX,IAAR,GAA8CZ,QAA9C,CAAQY,IAAR,CAAcQ,KAAd,GAA8CpB,QAA9C,CAAcoB,KAAd,CAAqBI,MAArB,GAA8CxB,QAA9C,CAAqBwB,MAArB,CAA6BC,YAA7B,GAA8CzB,QAA9C,CAA6ByB,YAA7B,CAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM,CACzB,IAAIN,KAAK,KAAK,IAAV,IAAmBG,QAAQ,KAAKX,IAAb,IAAqBS,SAA5C,EAAwD,CACtD,OAAOD,KAAP,CACD,CAED,OAAOK,YAAY,IAAIL,KAAvB,CACD,CAND,CAQA,IAAMO,SAAS,GAAGD,YAAY,EAA9B,CAEA,IAAME,UAAU,GAAGC,6CAAsBC,iBAAtB,CAAwCH,SAAxC,IACfI,IAAI,CAACC,GAAL,CAASR,MAAM,GAAGG,SAAS,CAACM,QAAV,GAAqBT,MAAvC,EAA+C,CAA/C,CADe,GAEfA,MAFJ,CAIA,IAAMU,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA0C,CAC9D,IAAIC,sBAAaC,aAAb,IAA8BD,sBAAaC,aAAb,CAA2BpC,QAA3B,CAAoCkC,CAAC,CAACG,aAAtC,CAAlC,EAAwF,CACtFhB,qBAAqB,CAACV,IAAD,EAAOuB,CAAP,CAArB,CACD,CACF,CAJD,CAMA,oBACE,uCAAM,GAAG,EAAExB,KAAX,EAAkB,iBAAc,EAAhC,EAAmC,SAAS,EAAEuB,aAA9C,IACGP,SADH,eAEE,uCAAM,YAAS,gCAAf,EAAgD,SAAS,EAAEpB,0BAAOW,IAAP,CAAY,KAAKb,KAAjB,CAA3D,IACGT,KAAK,CAACgC,UAAD,CAAL,CACEW,IADF,CACO,EADP,EAEE7B,GAFF,CAEM,UAAC8B,CAAD,EAAIC,CAAJ,uBACH,6BAAC,gCAAD,IAAiB,GAAG,EAAEA,CAAtB,GADG,EAFN,CADH,CAFF,CADF,CAYD,C,4BAvFoCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { MaskCharLowLine } from '../../internal/MaskCharLowLine';\nimport { InternalDateValidator } from '../../lib/date/InternalDateValidator';\nimport { InternalDateComponentType, InternalDateFragment } from '../../lib/date/types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { renderTarget } from '../../lib/SSRSafe';\n\nimport { styles } from './DateFragmentsView.styles';\n\ninterface DateFragmentViewProps {\n  selected: InternalDateComponentType | null;\n  fragments: InternalDateFragment[];\n  inputMode: boolean;\n  onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLSpanElement>) => void;\n}\n\nexport class DateFragmentsView extends React.Component<DateFragmentViewProps> {\n  private theme!: Theme;\n  private rootNode: HTMLSpanElement | null = null;\n\n  public isFragment = (el: HTMLElement | EventTarget): boolean => {\n    if (this.rootNode) {\n      // NOTE: NodeList doesn't support method 'forEach' in IE11\n      const fragments: HTMLSpanElement[] = Array.from(this.rootNode.querySelectorAll('[data-fragment]'));\n      return fragments.some((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n    }\n    return false;\n  };\n\n  public getRootNode = () => this.rootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    return (\n      <span ref={this.rootRef} className={styles.root(this.theme)}>\n        {this.props.fragments.map((fragment, index) =>\n          fragment.type === InternalDateComponentType.Separator\n            ? this.renderSeparator(fragment, index)\n            : this.renderDateComponent(fragment, index),\n        )}\n      </span>\n    );\n  }\n\n  private renderSeparator(fragment: InternalDateFragment, index: number): JSX.Element {\n    const separatorClassName = cx({\n      [styles.mask(this.theme)]: true,\n      [styles.delimiterFilled()]: this.props.fragments[index + 1].value !== null,\n    });\n\n    return (\n      <span key={index} className={separatorClassName}>\n        {fragment.value}\n      </span>\n    );\n  }\n\n  private renderDateComponent(fragment: InternalDateFragment, index: number): JSX.Element {\n    const { inputMode, onSelectDateComponent, selected } = this.props;\n    const { type, value, length, valueWithPad } = fragment;\n\n    const getValueMask = () => {\n      if (value === null || (selected === type && inputMode)) {\n        return value;\n      }\n\n      return valueWithPad || value;\n    };\n\n    const valueMask = getValueMask();\n\n    const lengthMask = InternalDateValidator.testParseToNumber(valueMask)\n      ? Math.max(length - valueMask.toString().length, 0)\n      : length;\n\n    const handleMouseUp = (e: React.MouseEvent<HTMLSpanElement>) => {\n      if (renderTarget.activeElement && renderTarget.activeElement.contains(e.currentTarget)) {\n        onSelectDateComponent(type, e);\n      }\n    };\n\n    return (\n      <span key={index} data-fragment=\"\" onMouseUp={handleMouseUp}>\n        {valueMask}\n        <span data-tid=\"DateFragmentsView__placeholder\" className={styles.mask(this.theme)}>\n          {Array(lengthMask)\n            .fill('')\n            .map((_, i) => (\n              <MaskCharLowLine key={i} />\n            ))}\n        </span>\n      </span>\n    );\n  }\n\n  private rootRef = (el: HTMLSpanElement | null) => {\n    this.rootNode = el;\n  };\n}\n"]}
+{"version":3,"sources":["DateFragmentsView.tsx"],"names":["DateFragmentsView","rootNode","isFragment","el","fragments","Array","from","querySelectorAll","some","fragment","contains","getRootNode","rootRef","render","emotion","theme","renderMain","_isTheme2022","styles","cx","root","selected","selectedFor22Themes","props","map","index","type","InternalDateComponentType","Separator","renderSeparator","renderDateComponent","separatorClassName","mask","delimiterFilled","value","inputMode","onSelectDateComponent","length","valueWithPad","getValueMask","valueMask","lengthMask","InternalDateValidator","testParseToNumber","Math","max","toString","handleMouseUp","e","globalObject","document","activeElement","currentTarget","fill","_","i","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { MaskCharLowLine } from '../../internal/MaskCharLowLine';\nimport { InternalDateValidator } from '../../lib/date/InternalDateValidator';\nimport { InternalDateComponentType, InternalDateFragment } from '../../lib/date/types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './DateFragmentsView.styles';\n\ninterface DateFragmentViewProps {\n  selected: InternalDateComponentType | null;\n  fragments: InternalDateFragment[];\n  inputMode: boolean;\n  onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLSpanElement>) => void;\n}\n\nexport class DateFragmentsView extends React.Component<DateFragmentViewProps> {\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private rootNode: HTMLSpanElement | null = null;\n\n  public isFragment = (el: HTMLElement | EventTarget): boolean => {\n    if (this.rootNode) {\n      // NOTE: NodeList doesn't support method 'forEach' in IE11\n      const fragments: HTMLSpanElement[] = Array.from(this.rootNode.querySelectorAll('[data-fragment]'));\n      return fragments.some((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n    }\n    return false;\n  };\n\n  public getRootNode = () => this.rootNode;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private renderMain() {\n    const _isTheme2022 = isTheme2022(this.theme);\n    const styles = getStyles(this.emotion);\n\n    return (\n      <span\n        ref={this.rootRef}\n        className={this.emotion.cx({\n          [styles.root()]: true,\n          [styles.selected(this.theme)]: !_isTheme2022,\n          [styles.selectedFor22Themes(this.theme)]: _isTheme2022,\n        })}\n      >\n        {this.props.fragments.map((fragment, index) =>\n          fragment.type === InternalDateComponentType.Separator\n            ? this.renderSeparator(fragment, index)\n            : this.renderDateComponent(fragment, index),\n        )}\n      </span>\n    );\n  }\n\n  private renderSeparator(fragment: InternalDateFragment, index: number): JSX.Element {\n    const styles = getStyles(this.emotion);\n    const separatorClassName = this.emotion.cx({\n      [styles.mask(this.theme)]: true,\n      [styles.delimiterFilled()]: this.props.fragments[index + 1].value !== null,\n    });\n\n    return (\n      <span key={index} className={separatorClassName}>\n        {fragment.value}\n      </span>\n    );\n  }\n\n  private renderDateComponent(fragment: InternalDateFragment, index: number): JSX.Element {\n    const { inputMode, onSelectDateComponent, selected } = this.props;\n    const { type, value, length, valueWithPad } = fragment;\n\n    const getValueMask = () => {\n      if (value === null || (selected === type && inputMode)) {\n        return value;\n      }\n\n      return valueWithPad || value;\n    };\n\n    const valueMask = getValueMask();\n\n    const lengthMask = InternalDateValidator.testParseToNumber(valueMask)\n      ? Math.max(length - valueMask.toString().length, 0)\n      : length;\n\n    const handleMouseUp = (e: React.MouseEvent<HTMLSpanElement>) => {\n      if (globalObject.document?.activeElement?.contains(e.currentTarget)) {\n        onSelectDateComponent(type, e);\n      }\n    };\n    const styles = getStyles(this.emotion);\n\n    return (\n      <span key={index} data-fragment=\"\" onMouseUp={handleMouseUp}>\n        {valueMask}\n        <span data-tid=\"DateFragmentsView__placeholder\" className={styles.mask(this.theme)}>\n          {Array(lengthMask)\n            .fill('')\n            .map((_, i) => (\n              <MaskCharLowLine key={i} />\n            ))}\n        </span>\n      </span>\n    );\n  }\n\n  private rootRef = (el: HTMLSpanElement | null) => {\n    this.rootNode = el;\n  };\n}\n"]}

package/cjs/components/DateInput/DateFragmentsView.styles.d.ts

@@ -1,7 +1,9 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    root(t: Theme): string;
+export declare const getStyles: (emotion: Emotion) => {
+    root(): string;
     selected(t: Theme): string;
+    selectedFor22Themes(t: Theme): string;
     mask(t: Theme): string;
     delimiterFilled(): string;
 };

package/cjs/components/DateInput/DateFragmentsView.styles.js

@@ -1,35 +1,50 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var styles = (0, _Emotion.memoizeStyle)({
-  root: function root(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: text;\n\n      & ::selection {\n        background: ", ";\n      }\n      & ::-moz-selection {\n        background: ", ";\n      }\n    "])),
 
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root() {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        cursor: text;\n      "])));
 
 
-    t.dateInputComponentSelectedBgColor,
+      },
 
+      selected: function selected(t) {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        & ::selection {\n          background: ", ";\n        }\n        & ::-moz-selection {\n          background: ", ";\n        }\n      "])),
 
-    t.dateInputComponentSelectedBgColor);
+        t.dateInputComponentSelectedBgColor,
 
 
-  },
+        t.dateInputComponentSelectedBgColor);
 
-  selected: function selected(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-color: ", ";\n      background-color: ", ";\n    "])),
-    t.dateInputComponentSelectedBgColor,
-    t.dateInputComponentSelectedBgColor);
 
-  },
+      },
 
-  mask: function mask(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
-    t.dateInputMaskColor);
+      selectedFor22Themes: function selectedFor22Themes(t) {
+        var getSelection = function getSelection(background, color) {return (
+            (background || color) && "& ::selection {\n      background: " +
 
-  },
+            background + ";\n      color: " +
+            color + ";\n    }");};
 
-  delimiterFilled: function delimiterFilled() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: inherit;\n    "])));
 
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        cursor: text;\n\n        ", "\n      "])),
 
-  } });exports.styles = styles;
+
+        getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor));
+
+      },
+
+      mask: function mask(t) {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
+        t.dateInputMaskColor);
+
+      },
+
+      delimiterFilled: function delimiterFilled() {
+        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: inherit;\n      "])));
+
+
+      } }));};exports.getStyles = getStyles;

package/cjs/components/DateInput/DateFragmentsView.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DateFragmentsView.styles.ts"],"names":["styles","root","t","css","dateInputComponentSelectedBgColor","selected","mask","dateInputMaskColor","delimiterFilled"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;;;;AAIkBD,IAAAA,CAAC,CAACE,iCAJpB;;;AAOkBF,IAAAA,CAAC,CAACE,iCAPpB;;;AAUD,GAZgC;;AAcjCC,EAAAA,QAdiC,oBAcxBH,CAdwB,EAcd;AACjB,eAAOC,YAAP;AACkBD,IAAAA,CAAC,CAACE,iCADpB;AAEsBF,IAAAA,CAAC,CAACE,iCAFxB;;AAID,GAnBgC;;AAqBjCE,EAAAA,IArBiC,gBAqB5BJ,CArB4B,EAqBlB;AACb,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACK,kBADb;;AAGD,GAzBgC;;AA2BjCC,EAAAA,eA3BiC,6BA2Bf;AAChB,eAAOL,YAAP;;;AAGD,GA/BgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      cursor: text;\n\n      & ::selection {\n        background: ${t.dateInputComponentSelectedBgColor};\n      }\n      & ::-moz-selection {\n        background: ${t.dateInputComponentSelectedBgColor};\n      }\n    `;\n  },\n\n  selected(t: Theme) {\n    return css`\n      border-color: ${t.dateInputComponentSelectedBgColor};\n      background-color: ${t.dateInputComponentSelectedBgColor};\n    `;\n  },\n\n  mask(t: Theme) {\n    return css`\n      color: ${t.dateInputMaskColor};\n    `;\n  },\n\n  delimiterFilled() {\n    return css`\n      color: inherit;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["DateFragmentsView.styles.ts"],"names":["getStyles","emotion","root","css","selected","t","dateInputComponentSelectedBgColor","selectedFor22Themes","getSelection","background","color","dateInputComponentSelectedTextColor","mask","dateInputMaskColor","delimiterFilled"],"mappings":";;AAEA,oD;;;AAGO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;AAGD,OALU;;AAOXC,MAAAA,QAPW,oBAOFC,CAPE,EAOQ;AACjB,eAAOJ,OAAO,CAACE,GAAf;;AAEkBE,QAAAA,CAAC,CAACC,iCAFpB;;;AAKkBD,QAAAA,CAAC,CAACC,iCALpB;;;AAQD,OAhBU;;AAkBXC,MAAAA,mBAlBW,+BAkBSF,CAlBT,EAkBmB;AAC5B,YAAMG,YAAY,GAAG,SAAfA,YAAe,CAACC,UAAD,EAAqBC,KAArB;AACnB,aAACD,UAAU,IAAIC,KAAf;;AAEYD,YAAAA,UAFZ;AAGOC,YAAAA,KAHP,aADmB,GAArB;;;AAOA,eAAOT,OAAO,CAACE,GAAf;;;AAGIK,QAAAA,YAAY,CAACH,CAAC,CAACC,iCAAH,EAAsCD,CAAC,CAACM,mCAAxC,CAHhB;;AAKD,OA/BU;;AAiCXC,MAAAA,IAjCW,gBAiCNP,CAjCM,EAiCI;AACb,eAAOJ,OAAO,CAACE,GAAf;AACWE,QAAAA,CAAC,CAACQ,kBADb;;AAGD,OArCU;;AAuCXC,MAAAA,eAvCW,6BAuCO;AAChB,eAAOb,OAAO,CAACE,GAAf;;;AAGD,OA3CU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        cursor: text;\n      `;\n    },\n\n    selected(t: Theme) {\n      return emotion.css`\n        & ::selection {\n          background: ${t.dateInputComponentSelectedBgColor};\n        }\n        & ::-moz-selection {\n          background: ${t.dateInputComponentSelectedBgColor};\n        }\n      `;\n    },\n\n    selectedFor22Themes(t: Theme) {\n      const getSelection = (background: string, color: string) =>\n        (background || color) &&\n        `& ::selection {\n      background: ${background};\n      color: ${color};\n    }`;\n\n      return emotion.css`\n        cursor: text;\n\n        ${getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor)}\n      `;\n    },\n\n    mask(t: Theme) {\n      return emotion.css`\n        color: ${t.dateInputMaskColor};\n      `;\n    },\n\n    delimiterFilled() {\n      return emotion.css`\n        color: inherit;\n      `;\n    },\n  });\n"]}

package/cjs/components/DateInput/DateInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { InternalDateComponentType } from '../../lib/date/types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 export interface DateInputState {
     selected: InternalDateComponentType | null;
     valueFormatted: string;
@@ -43,7 +44,7 @@ export interface DateInputProps extends CommonProps {
      * Размер поля
      * @default 'small'
      */
-    size?: 'small' | 'large' | 'medium';
+    size?: SizeProp;
     onBlur?: (x0: React.FocusEvent<HTMLElement>) => void;
     onClick?: (x0: React.MouseEvent<HTMLElement>) => void;
     onFocus?: (x0: React.FocusEvent<HTMLElement>) => void;
@@ -58,6 +59,7 @@ export interface DateInputProps extends CommonProps {
 declare type DefaultProps = Required<Pick<DateInputProps, 'value' | 'minDate' | 'maxDate' | 'size' | 'width'>>;
 export declare class DateInput extends React.Component<DateInputProps, DateInputState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
     private iDateMediator;
@@ -69,6 +71,7 @@ export declare class DateInput extends React.Component<DateInputProps, DateInput
     private locale;
     private blurEvent;
     private theme;
+    private emotion;
     private setRootNode;
     private conditionalHandler;
     constructor(props: DateInputProps);
@@ -82,6 +85,7 @@ export declare class DateInput extends React.Component<DateInputProps, DateInput
     private renderMain;
     private renderIcon;
     private handleFocus;
+    private resetFocus;
     private handleBlur;
     private handleMouseDownCapture;
     private handleSelectDateComponent;

package/cjs/components/DateInput/DateInput.js

@@ -1,4 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.DateInputDataTids = exports.DateInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.DateInputDataTids = exports.DateInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _globalObject = require("@skbkontur/global-object");
+
 
 var _ConditionalHandler = require("../../lib/ConditionalHandler");
 var _constants = require("../../lib/date/constants");
@@ -7,14 +10,16 @@ var _types = require("../../lib/date/types");
 var _locale = require("../DatePicker/locale");
 var _InputLikeText = require("../../internal/InputLikeText");
 var _decorators = require("../../lib/locale/decorators");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _px = require("../../internal/icons/16px");
 var _CommonWrapper = require("../../internal/CommonWrapper");
-var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
+var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+
 var _CalendarIcon = require("./CalendarIcon");
 var _DateFragmentsView = require("./DateFragmentsView");
 var _DateInput = require("./DateInput.styles");
@@ -117,6 +122,8 @@ DateInput = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLoca
 
 
 
+
+
 
 
 
@@ -229,6 +236,15 @@ DateInput = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLoca
 
 
 
+
+
+
+
+
+
+
+
+
 
 
 
@@ -242,16 +258,16 @@ DateInput = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLoca
     renderIcon = function () {
       var _this$props = _this.props,withIcon = _this$props.withIcon,_this$props$disabled = _this$props.disabled,disabled = _this$props$disabled === void 0 ? false : _this$props$disabled;
       var size = _this.getProps().size;
-
-      if (withIcon) {var _cx;
+      var styles = (0, _DateInput.getStyles)(_this.emotion);
+      if (withIcon) {var _this$emotion$cx;
         var theme = _this.theme;
         var icon = (0, _ThemeHelpers.isTheme2022)(theme) ? /*#__PURE__*/_react.default.createElement(_CalendarIcon.CalendarIcon, { size: size }) : /*#__PURE__*/_react.default.createElement(_px.CalendarIcon, null);
-        var iconStyles = (0, _Emotion.cx)((_cx = {}, _cx[
-        _DateInput.styles.icon(theme)] = true, _cx[
-        _DateInput.styles.iconSmall(theme)] = size === 'small', _cx[
-        _DateInput.styles.iconMedium(theme)] = size === 'medium', _cx[
-        _DateInput.styles.iconLarge(theme)] = size === 'large', _cx[
-        _DateInput.styles.iconDisabled(theme)] = disabled, _cx));
+        var iconStyles = _this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[
+        styles.icon(theme)] = true, _this$emotion$cx[
+        styles.iconSmall(theme)] = size === 'small', _this$emotion$cx[
+        styles.iconMedium(theme)] = size === 'medium', _this$emotion$cx[
+        styles.iconLarge(theme)] = size === 'large', _this$emotion$cx[
+        styles.iconDisabled(theme)] = disabled, _this$emotion$cx));
 
         return /*#__PURE__*/(
           _react.default.createElement("span", { className: iconStyles, "data-tid": DateInputDataTids.icon },
@@ -273,11 +289,13 @@ DateInput = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLoca
       }
     };_this.
 
+    resetFocus = function () {return _this.updateValue({ focused: false, selected: null, inputMode: false });};_this.
+
     handleBlur = function (e) {
-      var restored = _this.iDateMediator.restore();
-      _this.updateValue({ focused: false, selected: null, inputMode: false });
+      _this.resetFocus();
 
       if (_this.props.onBlur) {
+        var restored = _this.iDateMediator.restore();
         if (restored) {
           e.persist();
           _this.blurEvent = e;
@@ -309,7 +327,7 @@ DateInput = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLoca
     };_this.
 
     handleMouseDragEnd = function () {
-      var selection = getSelection();
+      var selection = _globalObject.globalObject.getSelection == null ? void 0 : _globalObject.globalObject.getSelection();
       if (
       selection &&
       selection.toString().length === _constants.LENGTH_FULLDATE &&
@@ -352,16 +370,22 @@ DateInput = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLoca
       _this.setState({ selected: selected, inputMode: false });
     };_this.
 
-    updateValue = function (state) {if (state === void 0) {state = {};}
+    updateValue = function (state, sync) {if (state === void 0) {state = {};}if (sync === void 0) {sync = true;}
       var valueFormatted = _this.iDateMediator.getString();
 
-      _this.setState((0, _extends2.default)({}, state, { valueFormatted: valueFormatted }), _this.emitChange);
+      var update = function update() {return _this.setState((0, _extends2.default)({}, state, { valueFormatted: valueFormatted }), _this.emitChange);};
+
+      if (sync && _react.default.version.search('18') === 0) {
+        _reactDom.default.flushSync(update);
+      } else {
+        update();
+      }
     };_this.
 
-    updateFromProps = function () {
+    updateFromProps = function (sync) {
       _this.iDateMediator.update(_this.props, _this.locale);
 
-      _this.updateValue();
+      _this.updateValue({}, sync);
     };_this.
 
     fullSelection = function () {
@@ -458,4 +482,4 @@ DateInput = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLoca
         _this.shiftSelection(1);
       }
       _this.updateValue({ inputMode: inputMode });
-    };_this.state = { valueFormatted: '', selected: null, inputMode: false, focused: false, dragged: false };return _this;}var _proto = DateInput.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),value = _this$getProps.value,minDate = _this$getProps.minDate,maxDate = _this$getProps.maxDate;if (prevProps.value !== value || prevProps.minDate !== minDate || prevProps.maxDate !== maxDate || this.iDateMediator.isChangedLocale(this.locale)) {this.updateFromProps();}this.selectNode();};_proto.componentDidMount = function componentDidMount() {this.updateFromProps();if (this.props.autoFocus) {this.focus();}};_proto.blur = function blur() {if (this.inputLikeText) {this.inputLikeText.blur();}};_proto.focus = function focus() {if (this.inputLikeText) {this.inputLikeText.focus();}};_proto.blink = function blink() {if (this.inputLikeText) {this.inputLikeText.blink();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx2;var _this$state2 = this.state,focused = _this$state2.focused,selected = _this$state2.selected,inputMode = _this$state2.inputMode,valueFormatted = _this$state2.valueFormatted;var showValue = Boolean(focused || valueFormatted);var _this$getProps2 = this.getProps(),width = _this$getProps2.width,size = _this$getProps2.size;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { width: width, ref: this.inputLikeTextRef, size: size, disabled: this.props.disabled, error: this.props.error, warning: this.props.warning, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.props.onClick, onKeyDown: this.handleKeyDown, onMouseDownCapture: this.handleMouseDownCapture, onPaste: this.handlePaste, rightIcon: this.renderIcon(), onDoubleClickCapture: this.handleDoubleClick, onMouseDragStart: this.handleMouseDragStart, onMouseDragEnd: this.handleMouseDragEnd, value: this.iDateMediator.getInternalString(), inputMode: 'numeric', takeContentWidth: true }, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_DateInput.styles.value(), (_cx2 = {}, _cx2[_DateInput.styles.valueVisible()] = showValue, _cx2)) }, /*#__PURE__*/_react.default.createElement(_DateFragmentsView.DateFragmentsView, { ref: this.dateFragmentsViewRef, fragments: this.iDateMediator.getFragments(), onSelectDateComponent: this.handleSelectDateComponent, selected: selected, inputMode: inputMode }))));};return DateInput;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'DateInput', _class2.defaultProps = { value: '', minDate: _constants.MIN_FULLDATE, maxDate: _constants.MAX_FULLDATE, size: 'small', width: 125 }, _temp)) || _class) || _class);exports.DateInput = DateInput;
+    };_this.state = { valueFormatted: '', selected: null, inputMode: false, focused: false, dragged: false };return _this;}var _proto = DateInput.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),value = _this$getProps.value,minDate = _this$getProps.minDate,maxDate = _this$getProps.maxDate;if (prevProps.value !== value || prevProps.minDate !== minDate || prevProps.maxDate !== maxDate || this.iDateMediator.isChangedLocale(this.locale)) {this.updateFromProps(false);}this.selectNode();};_proto.componentDidMount = function componentDidMount() {this.updateFromProps(false);if (this.props.autoFocus) {this.focus();}};_proto.blur = function blur() {if (this.inputLikeText) {this.inputLikeText.blur();}};_proto.focus = function focus() {if (this.inputLikeText) {this.inputLikeText.focus();}};_proto.blink = function blink() {if (this.inputLikeText) {this.inputLikeText.blink();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var _this$emotion$cx2;var _this$state2 = this.state,focused = _this$state2.focused,selected = _this$state2.selected,inputMode = _this$state2.inputMode,valueFormatted = _this$state2.valueFormatted;var showValue = Boolean(focused || valueFormatted);var _this$getProps2 = this.getProps(),width = _this$getProps2.width,size = _this$getProps2.size;var styles = (0, _DateInput.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus }, /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { width: width, ref: this.inputLikeTextRef, size: size, disabled: this.props.disabled, error: this.props.error, warning: this.props.warning, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.props.onClick, onKeyDown: this.handleKeyDown, onMouseDownCapture: this.handleMouseDownCapture, onPaste: this.handlePaste, rightIcon: this.renderIcon(), onDoubleClickCapture: this.handleDoubleClick, onMouseDragStart: this.handleMouseDragStart, onMouseDragEnd: this.handleMouseDragEnd, value: this.iDateMediator.getInternalString(), inputMode: 'numeric', takeContentWidth: true }, /*#__PURE__*/_react.default.createElement("span", { className: this.emotion.cx(styles.value(), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.valueVisible()] = showValue, _this$emotion$cx2)) }, /*#__PURE__*/_react.default.createElement(_DateFragmentsView.DateFragmentsView, { ref: this.dateFragmentsViewRef, fragments: this.iDateMediator.getFragments(), onSelectDateComponent: this.handleSelectDateComponent, selected: selected, inputMode: inputMode })))));};return DateInput;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'DateInput', _class2.displayName = 'DateInput', _class2.defaultProps = { value: '', minDate: _constants.MIN_FULLDATE, maxDate: _constants.MAX_FULLDATE, size: 'small', width: 125 }, _temp)) || _class) || _class);exports.DateInput = DateInput;