@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-b08da15166

package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js

@@ -1,18 +1,19 @@
 import React from 'react';
-import { MAX_SAFE_DIGITS } from "..\\..\\CurrencyInput\\constants";
-import { CurrencyHelper } from "..\\..\\CurrencyInput\\CurrencyHelper";
+import { MAX_SAFE_DIGITS } from "../../CurrencyInput/constants";
+import { CurrencyHelper } from "../../CurrencyInput/CurrencyHelper";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
 export var defaultProps = {
   fractionDigits: 2
 };
-export var CurrencyLabel = function CurrencyLabel(_ref) {
-  var value = _ref.value,
-      fractionDigits = _ref.fractionDigits,
-      currencySymbol = _ref.currencySymbol;
-  return React.createElement("span", null, CurrencyHelper.format(value, {
+export var CurrencyLabel = function CurrencyLabel(props) {
+  var value = props.value,
+      fractionDigits = props.fractionDigits,
+      currencySymbol = props.currencySymbol;
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("span", null, CurrencyHelper.format(value, {
     fractionDigits: fractionDigits
   }), currencySymbol && String.fromCharCode(0xa0)
   /*   */
-  , currencySymbol);
+  , currencySymbol));
 };
 CurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';
 CurrencyLabel.defaultProps = defaultProps;
@@ -22,10 +23,10 @@ CurrencyLabel.propTypes = {
       return new Error("[CurrencyLabel]: Prop 'fractionDigits' exceeds " + MAX_SAFE_DIGITS + "." + "\nSee https://tech.skbkontur.ru/react-ui/#/CurrencyInput?id=why15");
     }
 
-    var _ref2 = CurrencyHelper.destructString(String(props.value)) || {
+    var _ref = CurrencyHelper.destructString(String(props.value)) || {
       fraction: ''
     },
-        fraction = _ref2.fraction;
+        fraction = _ref.fraction;
 
     if (fraction.length > props.fractionDigits) {
       return new Error("[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property," + "'value' will not be cutted");

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

@@ -1 +1 @@
-{"version":3,"sources":["CurrencyLabel.tsx"],"names":["React","MAX_SAFE_DIGITS","CurrencyHelper","defaultProps","fractionDigits","CurrencyLabel","value","currencySymbol","format","String","fromCharCode","__KONTUR_REACT_UI__","propTypes","props","Error","destructString","fraction","length","Number","isInteger"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,eAAT,QAAgC,4BAAhC;AACA,SAASC,cAAT,QAA+B,iCAA/B;;;;;;;;;;;;AAYA,OAAO,IAAMC,YAAY,GAAG;AAC1BC,EAAAA,cAAc,EAAE,CADU,EAArB;;;AAIP,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,YAAGC,KAAH,QAAGA,KAAH,CAAUF,cAAV,QAAUA,cAAV,CAA0BG,cAA1B,QAA0BA,cAA1B;AAC3B;AACGL,IAAAA,cAAc,CAACM,MAAf,CAAsBF,KAAtB,EAA6B,EAAEF,cAAc,EAAdA,cAAF,EAA7B,CADH;AAEGG,IAAAA,cAAc,IAAIE,MAAM,CAACC,YAAP,CAAoB,IAApB,CAFrB,CAE+C,YAF/C;AAGGH,IAAAA,cAHH,CAD2B,GAAtB;;;;AAQPF,aAAa,CAACM,mBAAd,GAAoC,eAApC;;AAEAN,aAAa,CAACF,YAAd,GAA6BA,YAA7B;;AAEAE,aAAa,CAACO,SAAd,GAA0B;AACxBR,EAAAA,cAAc,EAAE,wBAACS,KAAD,EAA+B;AAC7C,QAAIA,KAAK,CAACT,cAAN,GAAuBH,eAA3B,EAA4C;AAC1C,aAAO,IAAIa,KAAJ;AACL,0DAAkDb,eAAlD,4EADK,CAAP;;;AAID,KAN4C;;AAQxBC,IAAAA,cAAc,CAACa,cAAf,CAA8BN,MAAM,CAACI,KAAK,CAACP,KAAP,CAApC,KAAsD,EAAEU,QAAQ,EAAE,EAAZ,EAR9B,CAQrCA,QARqC,SAQrCA,QARqC;AAS7C,QAAIA,QAAQ,CAACC,MAAT,GAAkBJ,KAAK,CAACT,cAA5B,EAA4C;AAC1C,aAAO,IAAIU,KAAJ;AACL,gIADK,CAAP;;;AAID;;AAED,QAAI,CAACI,MAAM,CAACC,SAAP,CAAiBN,KAAK,CAACT,cAAvB,CAAL,EAA6C;AAC3C,aAAO,IAAIU,KAAJ,2GAAP;;;AAGD;;AAED,WAAO,IAAP;AACD,GAxBuB,EAA1B","sourcesContent":["import React from 'react';\r\n\r\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\r\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\r\n\r\nexport type CurrencyLabelProps = {\r\n  /**\r\n   * Количество отображаемых знаков после запятой\r\n   * @default 2\r\n   */\r\n  fractionDigits: number;\r\n  value: number;\r\n  currencySymbol?: React.ReactNode;\r\n} & typeof defaultProps;\r\n\r\nexport const defaultProps = {\r\n  fractionDigits: 2,\r\n};\r\n\r\nexport const CurrencyLabel = ({ value, fractionDigits, currencySymbol }: CurrencyLabelProps): JSX.Element => (\r\n  <span>\r\n    {CurrencyHelper.format(value, { fractionDigits })}\r\n    {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\r\n    {currencySymbol}\r\n  </span>\r\n);\r\n\r\nCurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';\r\n\r\nCurrencyLabel.defaultProps = defaultProps;\r\n\r\nCurrencyLabel.propTypes = {\r\n  fractionDigits: (props: CurrencyLabelProps) => {\r\n    if (props.fractionDigits > MAX_SAFE_DIGITS) {\r\n      return new Error(\r\n        `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.` +\r\n          `\\nSee https://tech.skbkontur.ru/react-ui/#/CurrencyInput?id=why15`,\r\n      );\r\n    }\r\n\r\n    const { fraction } = CurrencyHelper.destructString(String(props.value)) || { fraction: '' };\r\n    if (fraction.length > props.fractionDigits) {\r\n      return new Error(\r\n        `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\r\n          `'value' will not be cutted`,\r\n      );\r\n    }\r\n\r\n    if (!Number.isInteger(props.fractionDigits)) {\r\n      return new Error(\r\n        `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\r\n      );\r\n    }\r\n\r\n    return null;\r\n  },\r\n};\r\n"]}
+{"version":3,"sources":["CurrencyLabel.tsx"],"names":["React","MAX_SAFE_DIGITS","CurrencyHelper","CommonWrapper","defaultProps","fractionDigits","CurrencyLabel","props","value","currencySymbol","format","String","fromCharCode","__KONTUR_REACT_UI__","propTypes","Error","destructString","fraction","length","Number","isInteger"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,eAAT,QAAgC,4BAAhC;AACA,SAASC,cAAT,QAA+B,iCAA/B;AACA,SAASC,aAAT,QAA2C,8BAA3C;;;;;;;;;;;;AAYA,OAAO,IAAMC,YAAY,GAAG;AAC1BC,EAAAA,cAAc,EAAE,CADU,EAArB;;;AAIP,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4C;AACvE,MAAQC,KAAR,GAAkDD,KAAlD,CAAQC,KAAR,CAAeH,cAAf,GAAkDE,KAAlD,CAAeF,cAAf,CAA+BI,cAA/B,GAAkDF,KAAlD,CAA+BE,cAA/B;AACA;AACE,wBAAC,aAAD,EAAmBF,KAAnB;AACE;AACGL,IAAAA,cAAc,CAACQ,MAAf,CAAsBF,KAAtB,EAA6B,EAAEH,cAAc,EAAdA,cAAF,EAA7B,CADH;AAEGI,IAAAA,cAAc,IAAIE,MAAM,CAACC,YAAP,CAAoB,IAApB,CAFrB,CAE+C,YAF/C;AAGGH,IAAAA,cAHH,CADF,CADF;;;;AASD,CAXM;;AAaPH,aAAa,CAACO,mBAAd,GAAoC,eAApC;;AAEAP,aAAa,CAACF,YAAd,GAA6BA,YAA7B;;AAEAE,aAAa,CAACQ,SAAd,GAA0B;AACxBT,EAAAA,cAAc,EAAE,wBAACE,KAAD,EAAqD;AACnE,QAAIA,KAAK,CAACF,cAAN,GAAuBJ,eAA3B,EAA4C;AAC1C,aAAO,IAAIc,KAAJ;AACL,0DAAkDd,eAAlD,4EADK,CAAP;;;AAID;;AAED,eAAqBC,cAAc,CAACc,cAAf,CAA8BL,MAAM,CAACJ,KAAK,CAACC,KAAP,CAApC,KAAsD,EAAES,QAAQ,EAAE,EAAZ,EAA3E,CAAQA,QAAR,QAAQA,QAAR;AACA,QAAIA,QAAQ,CAACC,MAAT,GAAkBX,KAAK,CAACF,cAA5B,EAA4C;AAC1C,aAAO,IAAIU,KAAJ;AACL,gIADK,CAAP;;;AAID;;AAED,QAAI,CAACI,MAAM,CAACC,SAAP,CAAiBb,KAAK,CAACF,cAAvB,CAAL,EAA6C;AAC3C,aAAO,IAAIU,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\nexport const defaultProps = {\n  fractionDigits: 2,\n};\n\nexport const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {\n  const { value, fractionDigits, currencySymbol } = props;\n  return (\n    <CommonWrapper {...props}>\n      <span>\n        {CurrencyHelper.format(value, { fractionDigits })}\n        {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\n        {currencySymbol}\n      </span>\n    </CommonWrapper>\n  );\n};\n\nCurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';\n\nCurrencyLabel.defaultProps = defaultProps;\n\nCurrencyLabel.propTypes = {\n  fractionDigits: (props: CurrencyLabelProps & typeof defaultProps) => {\n    if (props.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(props.value)) || { fraction: '' };\n    if (fraction.length > props.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(props.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/components/CurrencyLabel/CurrencyLabel/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\CurrencyLabel\\CurrencyLabel.js",
+  "main": "../../../cjs/components/CurrencyLabel/CurrencyLabel.js",
   "module": "CurrencyLabel",
-  "types": "..\\CurrencyLabel.d.ts",
+  "types": "../CurrencyLabel.d.ts",
   "sideEffects": false
 }

package/components/CurrencyLabel/CurrencyLabel.d.ts

@@ -1,23 +1,24 @@
 import React from 'react';
-export declare type CurrencyLabelProps = {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface CurrencyLabelProps extends CommonProps {
     /**
-     * Количество отображаемых знаков после запятой
+     * Минимальное количество отображаемых знаков после запятой
      * @default 2
      */
     fractionDigits: number;
     value: number;
     currencySymbol?: React.ReactNode;
-} & typeof defaultProps;
+}
 export declare const defaultProps: {
     fractionDigits: number;
 };
 export declare const CurrencyLabel: {
-    ({ value, fractionDigits, currencySymbol }: CurrencyLabelProps): JSX.Element;
+    (props: CurrencyLabelProps): JSX.Element;
     __KONTUR_REACT_UI__: string;
     defaultProps: {
         fractionDigits: number;
     };
     propTypes: {
-        fractionDigits: (props: CurrencyLabelProps) => Error | null;
+        fractionDigits: (props: CurrencyLabelProps & typeof defaultProps) => Error | null;
     };
 };

package/components/CurrencyLabel/CurrencyLabel.md

@@ -1,23 +1,23 @@
-To render rubles
-
-```jsx
-<CurrencyLabel value={12356.1} currencySymbol={'₽'} />
-```
-
-...or dollars
-
-```jsx
-<CurrencyLabel value={12356.1} currencySymbol={'$'} />
-```
-
-...or nothing
-
-```jsx
-<CurrencyLabel value={12356.1} />
-```
-
-Count of fraction digits can be changed
-
-```jsx
-<CurrencyLabel value={3562001.1} fractionDigits={3} currencySymbol={'₽'} />
-```
+To render rubles
+
+```jsx
+<CurrencyLabel value={12356.1} currencySymbol={'₽'} />
+```
+
+...or dollars
+
+```jsx
+<CurrencyLabel value={12356.1} currencySymbol={'$'} />
+```
+
+...or nothing
+
+```jsx
+<CurrencyLabel value={12356.1} />
+```
+
+Count of fraction digits can be changed
+
+```jsx
+<CurrencyLabel value={3562001.1} fractionDigits={3} currencySymbol={'₽'} />
+```

package/components/CurrencyLabel/index/index.js

@@ -1 +1 @@
-export * from "..\\CurrencyLabel";
+export * from "../CurrencyLabel";

package/components/CurrencyLabel/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './CurrencyLabel';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './CurrencyLabel';\n"]}

package/components/CurrencyLabel/index/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\CurrencyLabel\\index.js",
+  "main": "../../../cjs/components/CurrencyLabel/index.js",
   "module": "index",
-  "types": "..\\index.d.ts",
+  "types": "../index.d.ts",
   "sideEffects": false
 }

package/components/CurrencyLabel/package.json

@@ -1,5 +1,5 @@
 {
-  "main": "..\\..\\cjs\\components\\CurrencyLabel\\index.js",
+  "main": "../../cjs/components/CurrencyLabel/index.js",
   "module": "index",
   "types": "index.d.ts",
   "sideEffects": false

package/components/DateInput/DateFragmentsView/DateFragmentsView.js

@@ -1,14 +1,12 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import cn from 'classnames';
-import { CHAR_MASK } from "..\\..\\..\\lib\\date\\constants";
-import { InternalDateValidator } from "..\\..\\..\\lib\\date\\InternalDateValidator";
-import { InternalDateComponentType } from "..\\..\\..\\lib\\date\\types";
-import { ThemeContext } from "..\\..\\..\\lib\\theming\\ThemeContext";
-import { jsStyles } from "..\\DateFragmentsView.styles";
-export var DateFragmentsView =
-/*#__PURE__*/
-function (_React$Component) {
+import { MaskCharLowLine } from "../../../internal/MaskCharLowLine";
+import { InternalDateValidator } from "../../../lib/date/InternalDateValidator";
+import { InternalDateComponentType } from "../../../lib/date/types";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../DateFragmentsView.styles";
+export var DateFragmentsView = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(DateFragmentsView, _React$Component);
 
   function DateFragmentsView() {
@@ -19,7 +17,6 @@ function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.theme = void 0;
     _this.rootNode = null;
 
     _this.isFragment = function (el) {
@@ -50,7 +47,7 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
       return _this2.renderMain();
     });
@@ -59,19 +56,19 @@ function (_React$Component) {
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
-    return React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", {
       ref: this.rootRef,
-      className: jsStyles.root(this.theme)
+      className: styles.root(this.theme)
     }, this.props.fragments.map(function (fragment, index) {
       return fragment.type === InternalDateComponentType.Separator ? _this3.renderSeparator(fragment, index) : _this3.renderDateComponent(fragment, index);
     }));
   };
 
   _proto.renderSeparator = function renderSeparator(fragment, index) {
-    var _cn;
+    var _cx;
 
-    var separatorClassName = cn((_cn = {}, _cn[jsStyles.mask(this.theme)] = true, _cn[jsStyles.delimiterFilled()] = this.props.fragments[index + 1].value !== null, _cn));
-    return React.createElement("span", {
+    var separatorClassName = cx((_cx = {}, _cx[styles.mask(this.theme)] = true, _cx[styles.delimiterFilled()] = this.props.fragments[index + 1].value !== null, _cx));
+    return /*#__PURE__*/React.createElement("span", {
       key: index,
       className: separatorClassName
     }, fragment.value);
@@ -95,13 +92,17 @@ function (_React$Component) {
       }
     };
 
-    return React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", {
       key: index,
       "data-fragment": "",
       onMouseUp: handleMouseUp
-    }, valueMask, React.createElement("span", {
-      className: jsStyles.mask(this.theme)
-    }, CHAR_MASK.repeat(lengthMask)));
+    }, valueMask, /*#__PURE__*/React.createElement("span", {
+      className: styles.mask(this.theme)
+    }, Array(lengthMask).fill('').map(function (_, i) {
+      return /*#__PURE__*/React.createElement(MaskCharLowLine, {
+        key: i
+      });
+    })));
   };
 
   return DateFragmentsView;

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

@@ -1 +1 @@
-{"version":3,"sources":["DateFragmentsView.tsx"],"names":["React","cn","CHAR_MASK","InternalDateValidator","InternalDateComponentType","ThemeContext","jsStyles","DateFragmentsView","theme","rootNode","isFragment","el","fragments","Array","from","querySelectorAll","some","fragment","contains","getRootNode","rootRef","render","renderMain","root","props","map","index","type","Separator","renderSeparator","renderDateComponent","separatorClassName","mask","delimiterFilled","value","inputMode","onSelectDateComponent","selected","length","valueWithPad","valueMask","lengthMask","testParseToNumber","Math","max","toString","handleMouseUp","e","document","activeElement","currentTarget","repeat","Component"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { CHAR_MASK } from '../../lib/date/constants';\r\nimport { InternalDateValidator } from '../../lib/date/InternalDateValidator';\r\nimport { InternalDateComponentType, InternalDateFragment } from '../../lib/date/types';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { jsStyles } from './DateFragmentsView.styles';\r\n\r\ninterface DateFragmentViewProps {\r\n  selected: InternalDateComponentType | null;\r\n  fragments: InternalDateFragment[];\r\n  inputMode: boolean;\r\n  onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLSpanElement>) => void;\r\n}\r\n\r\nexport class DateFragmentsView extends React.Component<DateFragmentViewProps, {}> {\r\n  private theme!: Theme;\r\n  private rootNode: HTMLSpanElement | null = null;\r\n\r\n  public isFragment = (el: HTMLElement | EventTarget): boolean => {\r\n    if (this.rootNode) {\r\n      // NOTE: NodeList doesn't support method 'forEach' in IE11\r\n      const fragments: HTMLSpanElement[] = Array.from(this.rootNode.querySelectorAll('[data-fragment]'));\r\n      return fragments.some(fragment => fragment === el || fragment.contains(el as HTMLSpanElement));\r\n    }\r\n    return false;\r\n  };\r\n\r\n  public getRootNode = () => this.rootNode;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    return (\r\n      <span ref={this.rootRef} className={jsStyles.root(this.theme)}>\r\n        {this.props.fragments.map((fragment, index) =>\r\n          fragment.type === InternalDateComponentType.Separator\r\n            ? this.renderSeparator(fragment, index)\r\n            : this.renderDateComponent(fragment, index),\r\n        )}\r\n      </span>\r\n    );\r\n  }\r\n\r\n  private renderSeparator(fragment: InternalDateFragment, index: number): JSX.Element {\r\n    const separatorClassName = cn({\r\n      [jsStyles.mask(this.theme)]: true,\r\n      [jsStyles.delimiterFilled()]: this.props.fragments[index + 1].value !== null,\r\n    });\r\n\r\n    return (\r\n      <span key={index} className={separatorClassName}>\r\n        {fragment.value}\r\n      </span>\r\n    );\r\n  }\r\n\r\n  private renderDateComponent(fragment: InternalDateFragment, index: number): JSX.Element {\r\n    const { inputMode, onSelectDateComponent, selected } = this.props;\r\n    const { type, value, length, valueWithPad } = fragment;\r\n\r\n    const valueMask = value === null || (selected === type && inputMode) ? value : valueWithPad || value;\r\n    const lengthMask = InternalDateValidator.testParseToNumber(valueMask)\r\n      ? Math.max(length - valueMask!.toString().length, 0)\r\n      : length;\r\n\r\n    const handleMouseUp = (e: React.MouseEvent<HTMLSpanElement>) => {\r\n      if (document.activeElement && document.activeElement.contains(e.currentTarget)) {\r\n        onSelectDateComponent(type, e);\r\n      }\r\n    };\r\n\r\n    return (\r\n      <span key={index} data-fragment=\"\" onMouseUp={handleMouseUp}>\r\n        {valueMask}\r\n        <span className={jsStyles.mask(this.theme)}>{CHAR_MASK.repeat(lengthMask)}</span>\r\n      </span>\r\n    );\r\n  }\r\n\r\n  private rootRef = (el: HTMLSpanElement | null) => {\r\n    this.rootNode = el;\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["DateFragmentsView.tsx"],"names":["React","MaskCharLowLine","InternalDateValidator","InternalDateComponentType","ThemeContext","cx","styles","DateFragmentsView","rootNode","isFragment","el","fragments","Array","from","querySelectorAll","some","fragment","contains","getRootNode","rootRef","render","theme","renderMain","root","props","map","index","type","Separator","renderSeparator","renderDateComponent","separatorClassName","mask","delimiterFilled","value","inputMode","onSelectDateComponent","selected","length","valueWithPad","valueMask","lengthMask","testParseToNumber","Math","max","toString","handleMouseUp","e","document","activeElement","currentTarget","fill","_","i","Component"],"mappings":"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","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';\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 valueMask = value === null || (selected === type && inputMode) ? value : valueWithPad || value;\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 (document.activeElement && document.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 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/components/DateInput/DateFragmentsView/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\DateInput\\DateFragmentsView.js",
+  "main": "../../../cjs/components/DateInput/DateFragmentsView.js",
   "module": "DateFragmentsView",
-  "types": "..\\DateFragmentsView.d.ts",
+  "types": "../DateFragmentsView.d.ts",
   "sideEffects": false
 }

package/components/DateInput/DateFragmentsView.d.ts

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

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

@@ -1,58 +1,19 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: inherit !important;\n    "]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      background-color: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      font-family: kontur-mask-char, Segoe UI, Helevetica Neue, sans-serif;\n      cursor: text;\n\n      & ::selection {\n        background: ", ";\n      }\n      & ::-moz-selection {\n        background: ", ";\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, memoizeStyle } from "..\\..\\..\\lib\\theming\\Emotion";
-var styles = {
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject(), t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedBgColor);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      cursor: text;\n\n      & ::selection {\n        background: ", ";\n      }\n      & ::-moz-selection {\n        background: ", ";\n      }\n    "])), t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedBgColor);
   },
   selected: function selected(t) {
-    return css(_templateObject2(), t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedBgColor);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      background-color: ", ";\n    "])), t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedBgColor);
   },
   mask: function mask(t) {
-    return css(_templateObject3(), t.dateInputMaskColor);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.dateInputMaskColor);
   },
   delimiterFilled: function delimiterFilled() {
-    return css(_templateObject4());
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: inherit;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["DateFragmentsView.styles.ts"],"names":["css","memoizeStyle","styles","root","t","dateInputComponentSelectedBgColor","selected","mask","dateInputMaskColor","delimiterFilled","jsStyles"],"mappings":"whCAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;;;;;AAKkBI,IAAAA,CAAC,CAACC,iCALpB;;;AAQkBD,IAAAA,CAAC,CAACC,iCARpB;;;AAWD,GAbY;;AAebC,EAAAA,QAfa,oBAeJF,CAfI,EAeM;AACjB,WAAOJ,GAAP;AACkBI,IAAAA,CAAC,CAACC,iCADpB;AAEsBD,IAAAA,CAAC,CAACC,iCAFxB;;AAID,GApBY;;AAsBbE,EAAAA,IAtBa,gBAsBRH,CAtBQ,EAsBE;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACI,kBADb;;AAGD,GA1BY;;AA4BbC,EAAAA,eA5Ba,6BA4BK;AAChB,WAAOT,GAAP;;;AAGD,GAhCY,EAAf;;;AAmCA,OAAO,IAAMU,QAAQ,GAAGT,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      font-family: kontur-mask-char, Segoe UI, Helevetica Neue, sans-serif;\r\n      cursor: text;\r\n\r\n      & ::selection {\r\n        background: ${t.dateInputComponentSelectedBgColor};\r\n      }\r\n      & ::-moz-selection {\r\n        background: ${t.dateInputComponentSelectedBgColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  selected(t: Theme) {\r\n    return css`\r\n      border-color: ${t.dateInputComponentSelectedBgColor};\r\n      background-color: ${t.dateInputComponentSelectedBgColor};\r\n    `;\r\n  },\r\n\r\n  mask(t: Theme) {\r\n    return css`\r\n      color: ${t.dateInputMaskColor};\r\n    `;\r\n  },\r\n\r\n  delimiterFilled() {\r\n    return css`\r\n      color: inherit !important;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["DateFragmentsView.styles.ts"],"names":["css","memoizeStyle","styles","root","t","dateInputComponentSelectedBgColor","selected","mask","dateInputMaskColor","delimiterFilled"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;;;;AAIkBI,IAAAA,CAAC,CAACC,iCAJpB;;;AAOkBD,IAAAA,CAAC,CAACC,iCAPpB;;;AAUD,GAZgC;;AAcjCC,EAAAA,QAdiC,oBAcxBF,CAdwB,EAcd;AACjB,WAAOJ,GAAP;AACkBI,IAAAA,CAAC,CAACC,iCADpB;AAEsBD,IAAAA,CAAC,CAACC,iCAFxB;;AAID,GAnBgC;;AAqBjCE,EAAAA,IArBiC,gBAqB5BH,CArB4B,EAqBlB;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACI,kBADb;;AAGD,GAzBgC;;AA2BjCC,EAAAA,eA3BiC,6BA2Bf;AAChB,WAAOT,GAAP;;;AAGD,GA/BgC,EAAD,CAA3B","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"]}

package/components/DateInput/DateFragmentsView.styles/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\DateInput\\DateFragmentsView.styles.js",
+  "main": "../../../cjs/components/DateInput/DateFragmentsView.styles.js",
   "module": "DateFragmentsView.styles",
-  "types": "..\\DateFragmentsView.styles.d.ts",
+  "types": "../DateFragmentsView.styles.d.ts",
   "sideEffects": false
 }

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

@@ -1,6 +1,7 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    selected(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    mask(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    selected(t: Theme): string;
+    mask(t: Theme): string;
     delimiterFilled(): string;
 };

package/components/DateInput/DateInput/DateInput.js

@@ -4,22 +4,22 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _dec, _class, _class2, _temp;
 
 import React from 'react';
-import cn from 'classnames';
-import { ConditionalHandler } from "..\\..\\..\\lib\\ConditionalHandler";
-import { LENGTH_FULLDATE, MAX_FULLDATE, MIN_FULLDATE } from "..\\..\\..\\lib\\date\\constants";
-import { InternalDateComponentType } from "..\\..\\..\\lib\\date\\types";
-import { DatePickerLocaleHelper } from "..\\..\\DatePicker\\locale";
-import { InputLikeText } from "..\\..\\..\\internal\\InputLikeText";
-import { locale } from "..\\..\\..\\lib\\locale\\decorators";
-import { ThemeContext } from "..\\..\\..\\lib\\theming\\ThemeContext";
-import { CalendarIcon } from "..\\..\\..\\internal\\icons\\16px";
-import { DateFragmentsView } from "..\\DateFragmentsView";
-import { jsStyles } from "..\\DateInput.styles";
-import { Actions, extractAction } from "..\\helpers\\DateInputKeyboardActions";
-import { InternalDateMediator } from "..\\helpers\\InternalDateMediator";
-export var DateInput = (_dec = locale('DatePicker', DatePickerLocaleHelper), _dec(_class = (_temp = _class2 =
-/*#__PURE__*/
-function (_React$Component) {
+import { ConditionalHandler } from "../../../lib/ConditionalHandler";
+import { LENGTH_FULLDATE, MAX_FULLDATE, MIN_FULLDATE } from "../../../lib/date/constants";
+import { InternalDateComponentType } from "../../../lib/date/types";
+import { DatePickerLocaleHelper } from "../../DatePicker/locale";
+import { InputLikeText } from "../../../internal/InputLikeText";
+import { locale } from "../../../lib/locale/decorators";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CalendarIcon } from "../../../internal/icons/16px";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { DateFragmentsView } from "../DateFragmentsView";
+import { styles } from "../DateInput.styles";
+import { Actions, extractAction } from "../helpers/DateInputKeyboardActions";
+import { InternalDateMediator } from "../helpers/InternalDateMediator";
+export var DateInput = (_dec = locale('DatePicker', DatePickerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(DateInput, _React$Component);
 
   function DateInput(props) {
@@ -32,9 +32,7 @@ function (_React$Component) {
     _this.isMouseDown = false;
     _this.isMouseFocus = false;
     _this.ignoringDelimiter = false;
-    _this.locale = void 0;
     _this.blurEvent = null;
-    _this.theme = void 0;
     _this.conditionalHandler = new ConditionalHandler().add(Actions.MoveSelectionLeft, function () {
       return _this.shiftSelection(-1);
     }).add(Actions.MoveSelectionRight, function () {
@@ -91,13 +89,13 @@ function (_React$Component) {
           disabled = _this$props$disabled === void 0 ? false : _this$props$disabled;
 
       if (withIcon) {
-        var _cn;
+        var _cx;
 
         var theme = _this.theme;
-        var iconStyles = cn((_cn = {}, _cn[jsStyles.icon(theme)] = true, _cn[jsStyles.iconSmall(theme)] = size === 'small', _cn[jsStyles.iconMedium(theme)] = size === 'medium', _cn[jsStyles.iconLarge(theme)] = size === 'large', _cn[jsStyles.iconDisabled(theme)] = disabled, _cn));
-        return React.createElement("span", {
+        var iconStyles = cx((_cx = {}, _cx[styles.icon(theme)] = true, _cx[styles.iconSmall(theme)] = size === 'small', _cx[styles.iconMedium(theme)] = size === 'medium', _cx[styles.iconLarge(theme)] = size === 'large', _cx[styles.iconDisabled(theme)] = disabled, _cx));
+        return /*#__PURE__*/React.createElement("span", {
           className: iconStyles
-        }, React.createElement(CalendarIcon, null));
+        }, /*#__PURE__*/React.createElement(CalendarIcon, null));
       }
 
       return null;
@@ -378,6 +376,10 @@ function (_React$Component) {
 
   _proto.componentDidMount = function componentDidMount() {
     this.updateFromProps();
+
+    if (this.props.autoFocus) {
+      this.focus();
+    }
   };
 
   _proto.blur = function blur() {
@@ -401,20 +403,24 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(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 fragments = focused || valueFormatted !== '' ? this.iDateMediator.getFragments() : [];
-    return React.createElement(InputLikeText, {
+    var showValue = Boolean(focused || valueFormatted);
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(InputLikeText, {
       width: this.props.width,
       ref: this.inputLikeTextRef,
       size: this.props.size,
@@ -423,6 +429,7 @@ function (_React$Component) {
       warning: this.props.warning,
       onBlur: this.handleBlur,
       onFocus: this.handleFocus,
+      onClick: this.props.onClick,
       onKeyDown: this.handleKeyDown,
       onMouseDownCapture: this.handleMouseDownCapture,
       onPaste: this.handlePaste,
@@ -430,14 +437,18 @@ function (_React$Component) {
       onDoubleClickCapture: this.handleDoubleClick,
       onMouseDragStart: this.handleMouseDragStart,
       onMouseDragEnd: this.handleMouseDragEnd,
-      value: this.iDateMediator.getInternalString()
-    }, React.createElement(DateFragmentsView, {
+      value: this.iDateMediator.getInternalString(),
+      inputMode: 'numeric',
+      takeContentWidth: true
+    }, /*#__PURE__*/React.createElement("span", {
+      className: cx(styles.value(), (_cx2 = {}, _cx2[styles.valueVisible()] = showValue, _cx2))
+    }, /*#__PURE__*/React.createElement(DateFragmentsView, {
       ref: this.dateFragmentsViewRef,
-      fragments: fragments,
+      fragments: this.iDateMediator.getFragments(),
       onSelectDateComponent: this.handleSelectDateComponent,
       selected: selected,
       inputMode: inputMode
-    }));
+    }))));
   };
 
   return DateInput;
@@ -447,4 +458,4 @@ function (_React$Component) {
   maxDate: MAX_FULLDATE,
   size: 'small',
   width: 125
-}, _temp)) || _class);
+}, _temp)) || _class) || _class);