@skbkontur/react-ui 0.0.0-a18e664e8f → 0.0.0-a2ba583fb2

package/components/DateInput/helpers/InternalDateMediator.d.ts

@@ -1,11 +1,11 @@
 import { InternalDate } from '../../../lib/date/InternalDate';
-import { InternalDateComponentType, InternalDateTypesOrder } from '../../../lib/date/types';
+import { InputKeyResult, InternalDateComponentType, InternalDateTypesOrder } from '../../../lib/date/types';
 import { DatePickerLocale } from '../../DatePicker/locale';
 import { DateInputProps } from '../DateInput';
 export declare class InternalDateMediator {
     iDate: InternalDate;
     update: (props: DateInputProps, locale: DatePickerLocale) => InternalDateMediator;
-    inputKey(key: string, type: InternalDateComponentType | null, inputMode: boolean): boolean;
+    inputKey(key: string, type: InternalDateComponentType | null, inputMode: boolean): InputKeyResult;
     paste: (pasted: string) => InternalDateMediator;
     restore: () => boolean;
     shiftDateComponent(type: InternalDateComponentType | null, step: number): boolean;

package/components/DateInput/helpers/SelectionHelpers/SelectionHelpers.js

@@ -1,12 +1,13 @@
+import { globalObject, isBrowser } from '@skbkontur/global-object';
 export var selectNodeContents = function selectNodeContents(node, start, end) {
   if (!node) {
     return;
   }
 
-  if ('createRange' in document) {
+  if (isBrowser(globalObject) && 'createRange' in globalObject.document) {
     try {
-      var selection = window.getSelection();
-      var range = window.document.createRange();
+      var selection = globalObject.getSelection();
+      var range = globalObject.document.createRange();
 
       if (start !== undefined && end !== undefined) {
         range.setStart(node, start);
@@ -23,12 +24,11 @@ export var selectNodeContents = function selectNodeContents(node, start, end) {
       }
     } catch (e) {// empty block
     }
-  } // @ts-ignore (IE specific api)
-
+  }
 
-  if (typeof document.body.createTextRange === 'function') {
-    // @ts-ignore
-    var _range = document.body.createTextRange();
+  if (isBrowser(globalObject) && 'createTextRange' in globalObject.document.body) {
+    // @ts-expect-error: IE-specific API.
+    var _range = globalObject.document.body.createTextRange();
 
     _range.moveToElementText(node);
 
@@ -40,9 +40,9 @@ export var selectNodeContents = function selectNodeContents(node, start, end) {
   }
 };
 export var removeAllSelections = function removeAllSelections() {
-  var selection = window.getSelection();
+  var selection = globalObject.getSelection == null ? void 0 : globalObject.getSelection();
 
-  if (selection !== null) {
+  if (selection) {
     try {
       // Fix IE from issue not working (https://github.com/skbkontur/retail-ui/issues/1205)
       selection.removeAllRanges();

package/components/DateInput/helpers/SelectionHelpers/SelectionHelpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SelectionHelpers.tsx"],"names":["selectNodeContents","node","start","end","document","selection","window","getSelection","range","createRange","undefined","setStart","setEnd","removeAllRanges","addRange","e","body","createTextRange","moveToElementText","select","removeAllSelections"],"mappings":"AAAA,OAAO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,IAAD,EAA2BC,KAA3B,EAA2CC,GAA3C,EAA4D;AAC5F,MAAI,CAACF,IAAL,EAAW;AACT;AACD;AACD,MAAI,iBAAiBG,QAArB,EAA+B;AAC7B,QAAI;AACF,UAAMC,SAAS,GAAGC,MAAM,CAACC,YAAP,EAAlB;AACA,UAAMC,KAAK,GAAGF,MAAM,CAACF,QAAP,CAAgBK,WAAhB,EAAd;AACA,UAAIP,KAAK,KAAKQ,SAAV,IAAuBP,GAAG,KAAKO,SAAnC,EAA8C;AAC5CF,QAAAA,KAAK,CAACG,QAAN,CAAeV,IAAf,EAAqBC,KAArB;AACAM,QAAAA,KAAK,CAACI,MAAN,CAAaX,IAAb,EAAmBE,GAAnB;AACD,OAHD,MAGO;AACLK,QAAAA,KAAK,CAACR,kBAAN,CAAyBC,IAAzB;AACD;AACD,UAAII,SAAS,KAAK,IAAlB,EAAwB;AACtB;AACAA,QAAAA,SAAS,CAACQ,eAAV;AACAR,QAAAA,SAAS,CAACS,QAAV,CAAmBN,KAAnB;AACA;AACD;AACF,KAfD,CAeE,OAAOO,CAAP,EAAU;AACV;AACD;AACF;;AAED;AACA,MAAI,OAAOX,QAAQ,CAACY,IAAT,CAAcC,eAArB,KAAyC,UAA7C,EAAyD;AACvD;AACA,QAAMT,MAAK,GAAGJ,QAAQ,CAACY,IAAT,CAAcC,eAAd,EAAd;AACAT,IAAAA,MAAK,CAACU,iBAAN,CAAwBjB,IAAxB;AACA,QAAI,OAAOO,MAAK,CAACW,MAAb,KAAwB,UAA5B,EAAwC;AACtCX,MAAAA,MAAK,CAACW,MAAN;AACD;AACD;AACD;AACF,CAnCM;;AAqCP,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACvC,MAAMf,SAAS,GAAGC,MAAM,CAACC,YAAP,EAAlB;AACA,MAAIF,SAAS,KAAK,IAAlB,EAAwB;AACtB,QAAI;AACF;AACAA,MAAAA,SAAS,CAACQ,eAAV;AACD,KAHD,CAGE,OAAOE,CAAP,EAAU;AACV;AACD;AACF;AACF,CAVM","sourcesContent":["export const selectNodeContents = (node: HTMLElement | null, start?: number, end?: number) => {\n  if (!node) {\n    return;\n  }\n  if ('createRange' in document) {\n    try {\n      const selection = window.getSelection();\n      const range = window.document.createRange();\n      if (start !== undefined && end !== undefined) {\n        range.setStart(node, start);\n        range.setEnd(node, end);\n      } else {\n        range.selectNodeContents(node);\n      }\n      if (selection !== null) {\n        // Fix IE from issue not working (https://github.com/skbkontur/retail-ui/issues/1205)\n        selection.removeAllRanges();\n        selection.addRange(range);\n        return;\n      }\n    } catch (e) {\n      // empty block\n    }\n  }\n\n  // @ts-ignore (IE specific api)\n  if (typeof document.body.createTextRange === 'function') {\n    // @ts-ignore\n    const range = document.body.createTextRange();\n    range.moveToElementText(node);\n    if (typeof range.select === 'function') {\n      range.select();\n    }\n    return;\n  }\n};\n\nexport const removeAllSelections = () => {\n  const selection = window.getSelection();\n  if (selection !== null) {\n    try {\n      // Fix IE from issue not working (https://github.com/skbkontur/retail-ui/issues/1205)\n      selection.removeAllRanges();\n    } catch (e) {\n      // empty block\n    }\n  }\n};\n"]}
+{"version":3,"sources":["SelectionHelpers.tsx"],"names":["globalObject","isBrowser","selectNodeContents","node","start","end","document","selection","getSelection","range","createRange","undefined","setStart","setEnd","removeAllRanges","addRange","e","body","createTextRange","moveToElementText","select","removeAllSelections"],"mappings":"AAAA,SAASA,YAAT,EAAuBC,SAAvB,QAAwC,0BAAxC;;AAEA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,IAAD,EAA2BC,KAA3B,EAA2CC,GAA3C,EAA4D;AAC5F,MAAI,CAACF,IAAL,EAAW;AACT;AACD;AACD,MAAIF,SAAS,CAACD,YAAD,CAAT,IAA2B,iBAAiBA,YAAY,CAACM,QAA7D,EAAuE;AACrE,QAAI;AACF,UAAMC,SAAS,GAAGP,YAAY,CAACQ,YAAb,EAAlB;AACA,UAAMC,KAAK,GAAGT,YAAY,CAACM,QAAb,CAAsBI,WAAtB,EAAd;AACA,UAAIN,KAAK,KAAKO,SAAV,IAAuBN,GAAG,KAAKM,SAAnC,EAA8C;AAC5CF,QAAAA,KAAK,CAACG,QAAN,CAAeT,IAAf,EAAqBC,KAArB;AACAK,QAAAA,KAAK,CAACI,MAAN,CAAaV,IAAb,EAAmBE,GAAnB;AACD,OAHD,MAGO;AACLI,QAAAA,KAAK,CAACP,kBAAN,CAAyBC,IAAzB;AACD;AACD,UAAII,SAAS,KAAK,IAAlB,EAAwB;AACtB;AACAA,QAAAA,SAAS,CAACO,eAAV;AACAP,QAAAA,SAAS,CAACQ,QAAV,CAAmBN,KAAnB;AACA;AACD;AACF,KAfD,CAeE,OAAOO,CAAP,EAAU;AACV;AACD;AACF;;AAED,MAAIf,SAAS,CAACD,YAAD,CAAT,IAA2B,qBAAqBA,YAAY,CAACM,QAAb,CAAsBW,IAA1E,EAAgF;AAC9E;AACA,QAAMR,MAAK,GAAGT,YAAY,CAACM,QAAb,CAAsBW,IAAtB,CAA2BC,eAA3B,EAAd;AACAT,IAAAA,MAAK,CAACU,iBAAN,CAAwBhB,IAAxB;AACA,QAAI,OAAOM,MAAK,CAACW,MAAb,KAAwB,UAA5B,EAAwC;AACtCX,MAAAA,MAAK,CAACW,MAAN;AACD;AACD;AACD;AACF,CAlCM;;AAoCP,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACvC,MAAMd,SAAS,GAAGP,YAAY,CAACQ,YAAhB,oBAAGR,YAAY,CAACQ,YAAb,EAAlB;AACA,MAAID,SAAJ,EAAe;AACb,QAAI;AACF;AACAA,MAAAA,SAAS,CAACO,eAAV;AACD,KAHD,CAGE,OAAOE,CAAP,EAAU;AACV;AACD;AACF;AACF,CAVM","sourcesContent":["import { globalObject, isBrowser } from '@skbkontur/global-object';\n\nexport const selectNodeContents = (node: HTMLElement | null, start?: number, end?: number) => {\n  if (!node) {\n    return;\n  }\n  if (isBrowser(globalObject) && 'createRange' in globalObject.document) {\n    try {\n      const selection = globalObject.getSelection();\n      const range = globalObject.document.createRange();\n      if (start !== undefined && end !== undefined) {\n        range.setStart(node, start);\n        range.setEnd(node, end);\n      } else {\n        range.selectNodeContents(node);\n      }\n      if (selection !== null) {\n        // Fix IE from issue not working (https://github.com/skbkontur/retail-ui/issues/1205)\n        selection.removeAllRanges();\n        selection.addRange(range);\n        return;\n      }\n    } catch (e) {\n      // empty block\n    }\n  }\n\n  if (isBrowser(globalObject) && 'createTextRange' in globalObject.document.body) {\n    // @ts-expect-error: IE-specific API.\n    const range = globalObject.document.body.createTextRange();\n    range.moveToElementText(node);\n    if (typeof range.select === 'function') {\n      range.select();\n    }\n    return;\n  }\n};\n\nexport const removeAllSelections = () => {\n  const selection = globalObject.getSelection?.();\n  if (selection) {\n    try {\n      // Fix IE from issue not working (https://github.com/skbkontur/retail-ui/issues/1205)\n      selection.removeAllRanges();\n    } catch (e) {\n      // empty block\n    }\n  }\n};\n"]}

package/components/DateInput/helpers/inputNumber/inputNumber.js

@@ -1,31 +1,68 @@
 import { LENGTH_DATE, LENGTH_MONTH, LENGTH_YEAR } from "../../../../lib/date/constants";
 import { InternalDateComponentType } from "../../../../lib/date/types";
-export var inputNumber = function inputNumber(type, prev, key, inputMode) {
+export var inputNumber = function inputNumber(type, prev, key, inputMode, maxValue) {
   var nextInputMode = false;
   var nextValue;
+  var firstDigits = getFirstDigits(type, maxValue);
+  var maxLength = getMaxLength(type);
+
+  if (!inputMode) {
+    nextValue = key;
+    nextInputMode = Number(key) <= firstDigits;
+  } else {
+    nextValue = addKey(prev, key, maxLength);
+    nextInputMode = nextValue.length < maxLength;
+
+    if (!isCorrectDate(nextValue, maxValue, maxLength)) {
+      nextValue = prev + '';
+      nextInputMode = true;
+    }
+  }
+
+  return {
+    nextValue: nextValue,
+    nextInputMode: nextInputMode
+  };
+};
+
+function addKey(prev, key, length) {
+  var value = key;
+
+  if (prev !== null) {
+    value = "" + prev + key;
+  }
+
+  return value.slice(-length);
+}
+
+function isCorrectDate(value, maxValue, length) {
+  return Number(value) <= maxValue && (Number(value) !== 0 || value.length !== length);
+}
+
+function getFirstDigits(type, maxValue) {
   var first = 10;
-  var length = LENGTH_YEAR;
 
   if (type === InternalDateComponentType.Month) {
     first = 1;
-    length = LENGTH_MONTH;
   }
 
   if (type === InternalDateComponentType.Date) {
-    first = 3;
-    length = LENGTH_DATE;
+    first = Math.floor(maxValue / 10);
   }
 
-  if (!inputMode) {
-    nextValue = key;
-    nextInputMode = Number(key) <= first;
-  } else {
-    nextValue = ("" + (prev === null ? '' : prev) + key).slice(-length);
-    nextInputMode = nextValue.length < length;
+  return first;
+}
+
+function getMaxLength(type) {
+  var length = LENGTH_YEAR;
+
+  if (type === InternalDateComponentType.Month) {
+    length = LENGTH_MONTH;
   }
 
-  return {
-    nextValue: nextValue,
-    nextInputMode: nextInputMode
-  };
-};
+  if (type === InternalDateComponentType.Date) {
+    length = LENGTH_DATE;
+  }
+
+  return length;
+}

package/components/DateInput/helpers/inputNumber/inputNumber.js.map

@@ -1 +1 @@
-{"version":3,"sources":["inputNumber.tsx"],"names":["LENGTH_DATE","LENGTH_MONTH","LENGTH_YEAR","InternalDateComponentType","inputNumber","type","prev","key","inputMode","nextInputMode","nextValue","first","length","Month","Date","Number","slice"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,6BAAvD;AACA,SAAmCC,yBAAnC,QAAoE,yBAApE;;AAEA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc;AACzBC,IADyB;AAEzBC,IAFyB;AAGzBC,GAHyB;AAIzBC,SAJyB;AAK2C;AACpE,MAAIC,aAAa,GAAG,KAApB;AACA,MAAIC,SAAJ;AACA,MAAIC,KAAK,GAAG,EAAZ;AACA,MAAIC,MAAc,GAAGV,WAArB;AACA,MAAIG,IAAI,KAAKF,yBAAyB,CAACU,KAAvC,EAA8C;AAC5CF,IAAAA,KAAK,GAAG,CAAR;AACAC,IAAAA,MAAM,GAAGX,YAAT;AACD;AACD,MAAII,IAAI,KAAKF,yBAAyB,CAACW,IAAvC,EAA6C;AAC3CH,IAAAA,KAAK,GAAG,CAAR;AACAC,IAAAA,MAAM,GAAGZ,WAAT;AACD;AACD,MAAI,CAACQ,SAAL,EAAgB;AACdE,IAAAA,SAAS,GAAGH,GAAZ;AACAE,IAAAA,aAAa,GAAGM,MAAM,CAACR,GAAD,CAAN,IAAeI,KAA/B;AACD,GAHD,MAGO;AACLD,IAAAA,SAAS,GAAG,OAAGJ,IAAI,KAAK,IAAT,GAAgB,EAAhB,GAAqBA,IAAxB,IAA+BC,GAA/B,EAAqCS,KAArC,CAA2C,CAACJ,MAA5C,CAAZ;AACAH,IAAAA,aAAa,GAAGC,SAAS,CAACE,MAAV,GAAmBA,MAAnC;AACD;AACD,SAAO,EAAEF,SAAS,EAATA,SAAF,EAAaD,aAAa,EAAbA,aAAb,EAAP;AACD,CA1BM","sourcesContent":["import { LENGTH_DATE, LENGTH_MONTH, LENGTH_YEAR } from '../../../lib/date/constants';\nimport { InternalDateComponentRaw, InternalDateComponentType } from '../../../lib/date/types';\n\nexport const inputNumber = (\n  type: InternalDateComponentType | null,\n  prev: InternalDateComponentRaw,\n  key: string,\n  inputMode: boolean,\n): { nextValue: InternalDateComponentRaw; nextInputMode: boolean } => {\n  let nextInputMode = false;\n  let nextValue: string;\n  let first = 10;\n  let length: number = LENGTH_YEAR;\n  if (type === InternalDateComponentType.Month) {\n    first = 1;\n    length = LENGTH_MONTH;\n  }\n  if (type === InternalDateComponentType.Date) {\n    first = 3;\n    length = LENGTH_DATE;\n  }\n  if (!inputMode) {\n    nextValue = key;\n    nextInputMode = Number(key) <= first;\n  } else {\n    nextValue = `${prev === null ? '' : prev}${key}`.slice(-length);\n    nextInputMode = nextValue.length < length;\n  }\n  return { nextValue, nextInputMode };\n};\n"]}
+{"version":3,"sources":["inputNumber.tsx"],"names":["LENGTH_DATE","LENGTH_MONTH","LENGTH_YEAR","InternalDateComponentType","inputNumber","type","prev","key","inputMode","maxValue","nextInputMode","nextValue","firstDigits","getFirstDigits","maxLength","getMaxLength","Number","addKey","length","isCorrectDate","value","slice","first","Month","Date","Math","floor"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,6BAAvD;AACA,SAAmCC,yBAAnC,QAAoE,yBAApE;;AAEA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc;AACzBC,IADyB;AAEzBC,IAFyB;AAGzBC,GAHyB;AAIzBC,SAJyB;AAKzBC,QALyB;AAM2C;AACpE,MAAIC,aAAa,GAAG,KAApB;AACA,MAAIC,SAAJ;AACA,MAAMC,WAAW,GAAGC,cAAc,CAACR,IAAD,EAAOI,QAAP,CAAlC;AACA,MAAMK,SAAS,GAAGC,YAAY,CAACV,IAAD,CAA9B;;AAEA,MAAI,CAACG,SAAL,EAAgB;AACdG,IAAAA,SAAS,GAAGJ,GAAZ;AACAG,IAAAA,aAAa,GAAGM,MAAM,CAACT,GAAD,CAAN,IAAeK,WAA/B;AACD,GAHD,MAGO;AACLD,IAAAA,SAAS,GAAGM,MAAM,CAACX,IAAD,EAAOC,GAAP,EAAYO,SAAZ,CAAlB;AACAJ,IAAAA,aAAa,GAAGC,SAAS,CAACO,MAAV,GAAmBJ,SAAnC;AACA,QAAI,CAACK,aAAa,CAACR,SAAD,EAAYF,QAAZ,EAAsBK,SAAtB,CAAlB,EAAoD;AAClDH,MAAAA,SAAS,GAAGL,IAAI,GAAG,EAAnB;AACAI,MAAAA,aAAa,GAAG,IAAhB;AACD;AACF;;AAED,SAAO,EAAEC,SAAS,EAATA,SAAF,EAAaD,aAAa,EAAbA,aAAb,EAAP;AACD,CAzBM;;AA2BP,SAASO,MAAT,CAAgBX,IAAhB,EAAgDC,GAAhD,EAA6DW,MAA7D,EAA6E;AAC3E,MAAIE,KAAK,GAAGb,GAAZ;AACA,MAAID,IAAI,KAAK,IAAb,EAAmB;AACjBc,IAAAA,KAAK,QAAMd,IAAN,GAAaC,GAAlB;AACD;AACD,SAAOa,KAAK,CAACC,KAAN,CAAY,CAACH,MAAb,CAAP;AACD;;AAED,SAASC,aAAT,CAAuBC,KAAvB,EAAsCX,QAAtC,EAAwDS,MAAxD,EAAwE;AACtE,SAAOF,MAAM,CAACI,KAAD,CAAN,IAAiBX,QAAjB,KAA8BO,MAAM,CAACI,KAAD,CAAN,KAAkB,CAAlB,IAAuBA,KAAK,CAACF,MAAN,KAAiBA,MAAtE,CAAP;AACD;;AAED,SAASL,cAAT,CAAwBR,IAAxB,EAAgEI,QAAhE,EAAkF;AAChF,MAAIa,KAAK,GAAG,EAAZ;AACA,MAAIjB,IAAI,KAAKF,yBAAyB,CAACoB,KAAvC,EAA8C;AAC5CD,IAAAA,KAAK,GAAG,CAAR;AACD;AACD,MAAIjB,IAAI,KAAKF,yBAAyB,CAACqB,IAAvC,EAA6C;AAC3CF,IAAAA,KAAK,GAAGG,IAAI,CAACC,KAAL,CAAWjB,QAAQ,GAAG,EAAtB,CAAR;AACD;AACD,SAAOa,KAAP;AACD;;AAED,SAASP,YAAT,CAAsBV,IAAtB,EAA8D;AAC5D,MAAIa,MAAM,GAAGhB,WAAb;AACA,MAAIG,IAAI,KAAKF,yBAAyB,CAACoB,KAAvC,EAA8C;AAC5CL,IAAAA,MAAM,GAAGjB,YAAT;AACD;AACD,MAAII,IAAI,KAAKF,yBAAyB,CAACqB,IAAvC,EAA6C;AAC3CN,IAAAA,MAAM,GAAGlB,WAAT;AACD;AACD,SAAOkB,MAAP;AACD","sourcesContent":["import { LENGTH_DATE, LENGTH_MONTH, LENGTH_YEAR } from '../../../lib/date/constants';\nimport { InternalDateComponentRaw, InternalDateComponentType } from '../../../lib/date/types';\n\nexport const inputNumber = (\n  type: InternalDateComponentType | null,\n  prev: InternalDateComponentRaw,\n  key: string,\n  inputMode: boolean,\n  maxValue: number,\n): { nextValue: InternalDateComponentRaw; nextInputMode: boolean } => {\n  let nextInputMode = false;\n  let nextValue;\n  const firstDigits = getFirstDigits(type, maxValue);\n  const maxLength = getMaxLength(type);\n\n  if (!inputMode) {\n    nextValue = key;\n    nextInputMode = Number(key) <= firstDigits;\n  } else {\n    nextValue = addKey(prev, key, maxLength);\n    nextInputMode = nextValue.length < maxLength;\n    if (!isCorrectDate(nextValue, maxValue, maxLength)) {\n      nextValue = prev + '';\n      nextInputMode = true;\n    }\n  }\n\n  return { nextValue, nextInputMode };\n};\n\nfunction addKey(prev: InternalDateComponentRaw, key: string, length: number) {\n  let value = key;\n  if (prev !== null) {\n    value = `${prev}${key}`;\n  }\n  return value.slice(-length);\n}\n\nfunction isCorrectDate(value: string, maxValue: number, length: number) {\n  return Number(value) <= maxValue && (Number(value) !== 0 || value.length !== length);\n}\n\nfunction getFirstDigits(type: InternalDateComponentType | null, maxValue: number) {\n  let first = 10;\n  if (type === InternalDateComponentType.Month) {\n    first = 1;\n  }\n  if (type === InternalDateComponentType.Date) {\n    first = Math.floor(maxValue / 10);\n  }\n  return first;\n}\n\nfunction getMaxLength(type: InternalDateComponentType | null) {\n  let length = LENGTH_YEAR;\n  if (type === InternalDateComponentType.Month) {\n    length = LENGTH_MONTH;\n  }\n  if (type === InternalDateComponentType.Date) {\n    length = LENGTH_DATE;\n  }\n  return length;\n}\n"]}

package/components/DateInput/helpers/inputNumber.d.ts

@@ -1,5 +1,5 @@
 import { InternalDateComponentRaw, InternalDateComponentType } from '../../../lib/date/types';
-export declare const inputNumber: (type: InternalDateComponentType | null, prev: InternalDateComponentRaw, key: string, inputMode: boolean) => {
+export declare const inputNumber: (type: InternalDateComponentType | null, prev: InternalDateComponentRaw, key: string, inputMode: boolean, maxValue: number) => {
     nextValue: InternalDateComponentRaw;
     nextInputMode: boolean;
 };

package/components/DatePicker/DatePicker/DatePicker.js

@@ -1,11 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _dec, _class, _class2, _temp;
+
 import PropTypes from 'prop-types';
 import React from 'react';
-import { findDOMNode } from 'react-dom';
+import { LocaleContext } from "../../../lib/locale";
+import { locale } from "../../../lib/locale/decorators";
+import { InternalDateGetter } from "../../../lib/date/InternalDateGetter";
+import { ArrowAUpIcon16Light } from "../../../internal/icons2022/ArrowAUpIcon/ArrowAUp16Light";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { InternalDate } from "../../../lib/date/InternalDate";
-import { InternalDateTransformer } from "../../../lib/date/InternalDateTransformer";
 import { MAX_FULLDATE, MIN_FULLDATE } from "../../../lib/date/constants";
 import { InternalDateOrder, InternalDateSeparator, InternalDateValidateCheck } from "../../../lib/date/types";
 import { DateInput } from "../../DateInput";
@@ -14,9 +22,15 @@ import { filterProps } from "../../../lib/filterProps";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { isMobile } from "../../../lib/client";
 import { NativeDateInput } from "../../../internal/NativeDateInput";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { isNonNullable } from "../../../lib/utils";
-import { Picker } from "../Picker";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { Calendar } from "../../Calendar";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { Button } from "../../Button";
+import { getTodayDate } from "../../Calendar/CalendarUtils";
 import { styles } from "../DatePicker.styles";
+import { DatePickerLocaleHelper } from "../locale";
 var INPUT_PASS_PROPS = {
   autoFocus: true,
   disabled: true,
@@ -26,8 +40,15 @@ var INPUT_PASS_PROPS = {
   onKeyDown: true
 };
 export var MIN_WIDTH = 120;
-export var DatePicker = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(DatePicker, _React$Component);
+export var DatePickerDataTids = {
+  root: 'DatePicker__root',
+  input: 'DatePicker__input',
+  label: 'DatePicker__label',
+  pickerRoot: 'Picker__root',
+  pickerTodayWrapper: 'Picker__todayWrapper'
+};
+export var DatePicker = (_dec = locale('DatePicker', DatePickerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(DatePicker, _React$PureComponent);
 
   function DatePicker() {
     var _this;
@@ -36,37 +57,59 @@ export var DatePicker = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(DatePicker.defaultProps);
+    _this.calendar = null;
     _this.state = {
       opened: false,
-      canUseMobileNativeDatePicker: false
+      canUseMobileNativeDatePicker: false,
+      today: getTodayDate()
     };
     _this.input = null;
     _this.focused = false;
-    _this.internalDate = _this.parseValueToDate(_this.props.value);
-    _this.minDate = _this.parseValueToDate(_this.props.minDate);
-    _this.maxDate = _this.parseValueToDate(_this.props.maxDate);
 
     _this.renderMain = function (props) {
       var picker = null;
-      var date = _this.internalDate ? _this.internalDate.toNativeFormat() : null;
+
+      var _this$getProps = _this.getProps(),
+          minDate = _this$getProps.minDate,
+          maxDate = _this$getProps.maxDate;
 
       if (_this.state.opened) {
-        picker = /*#__PURE__*/React.createElement(DropdownContainer, {
-          getParent: function getParent() {
-            return findDOMNode(_assertThisInitialized(_this));
-          },
-          offsetY: 2,
+        picker = /*#__PURE__*/React.createElement(LocaleContext.Provider, {
+          value: {
+            locale: {
+              Calendar: {
+                months: _this.locale.months,
+                dayCellChooseDateAriaLabel: _this.locale.dayCellChooseDateAriaLabel,
+                selectMonthAriaLabel: _this.locale.selectMonthAriaLabel,
+                selectYearAriaLabel: _this.locale.selectYearAriaLabel,
+                selectChosenAriaLabel: _this.locale.selectChosenAriaLabel
+              }
+            }
+          }
+        }, /*#__PURE__*/React.createElement(DropdownContainer, {
+          menuPos: _this.props.menuPos,
+          "data-tid": DatePickerDataTids.root,
+          getParent: _this.getParent,
+          offsetY: parseInt(_this.theme.datePickerMenuOffsetY),
           align: _this.props.menuAlign
-        }, /*#__PURE__*/React.createElement(Picker, {
-          value: date,
-          minDate: _this.minDate && _this.minDate.toNativeFormat() || undefined,
-          maxDate: _this.maxDate && _this.maxDate.toNativeFormat() || undefined,
-          onPick: _this.handlePick,
-          onSelect: _this.handleSelect,
-          enableTodayLink: _this.props.enableTodayLink,
-          isHoliday: _this.isHoliday
-        }));
+        }, /*#__PURE__*/React.createElement("div", {
+          "data-tid": DatePickerDataTids.pickerRoot,
+          className: styles.calendarWrapper(_this.theme),
+          onMouseDown: function onMouseDown(e) {
+            return e.preventDefault();
+          }
+        }, /*#__PURE__*/React.createElement(Calendar, {
+          ref: function ref(c) {
+            return _this.calendar = c;
+          },
+          maxDate: _this.parseValueToDate(maxDate),
+          minDate: _this.parseValueToDate(minDate),
+          onValueChange: _this.handleValueChange,
+          isHoliday: _this.props.isHoliday,
+          value: _this.parseValueToDate(_this.props.value)
+        }), _this.props.enableTodayLink && _this.renderTodayLink(), ' ')));
       }
 
       return /*#__PURE__*/React.createElement("label", {
@@ -74,26 +117,46 @@ export var DatePicker = /*#__PURE__*/function (_React$Component) {
         style: _this.getRootStyle(),
         onMouseEnter: _this.props.onMouseEnter,
         onMouseLeave: _this.props.onMouseLeave,
-        onMouseOver: _this.props.onMouseOver
+        onMouseOver: _this.props.onMouseOver,
+        "data-tid": DatePickerDataTids.label
       }, /*#__PURE__*/React.createElement(DateInput, _extends({}, filterProps(props, INPUT_PASS_PROPS), {
         ref: _this.getInputRef,
         value: _this.props.value || '',
         width: "100%",
         withIcon: true,
-        minDate: _this.props.minDate,
-        maxDate: _this.props.maxDate,
+        minDate: minDate,
+        maxDate: maxDate,
         onBlur: _this.handleBlur,
         onFocus: _this.handleFocus,
-        onValueChange: _this.props.onValueChange
+        onValueChange: _this.props.onValueChange,
+        "data-tid": DatePickerDataTids.input
       })), _this.state.canUseMobileNativeDatePicker && /*#__PURE__*/React.createElement(NativeDateInput, {
         onValueChange: _this.props.onValueChange,
         value: _this.props.value || '',
-        minDate: _this.props.minDate,
-        maxDate: _this.props.maxDate,
+        minDate: minDate,
+        maxDate: maxDate,
         disabled: _this.props.disabled
       }), !_this.state.canUseMobileNativeDatePicker && picker);
     };
 
+    _this.handleSelectToday = function (today) {
+      return function () {
+        _this.handleSelect(today);
+
+        if (_this.calendar) {
+          var _this$state$today = _this.state.today,
+              month = _this$state$today.month,
+              year = _this$state$today.year;
+
+          _this.calendar.scrollToMonth(month, year);
+        }
+      };
+    };
+
+    _this.getParent = function () {
+      return getRootNode(_assertThisInitialized(_this));
+    };
+
     _this.getRootStyle = function () {
       var width = _this.props.width;
       return isNonNullable(width) ? {
@@ -137,40 +200,22 @@ export var DatePicker = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.handlePick = function (dateShape) {
-      _this.handleSelect(dateShape);
+    _this.handleValueChange = function (value) {
+      _this.handleSelect(value);
 
       _this.blur();
     };
 
-    _this.handleSelect = function (_ref) {
-      var date = _ref.date,
-          month = _ref.month,
-          year = _ref.year;
-      var value = InternalDateTransformer.dateToInternalString({
-        date: date,
-        month: month + 1,
-        year: year
-      });
+    _this.handleSelect = function (value) {
+      if (!value) {
+        return null;
+      }
 
       if (_this.props.onValueChange) {
         _this.props.onValueChange(value);
       }
     };
 
-    _this.isHoliday = function (_ref2) {
-      var date = _ref2.date,
-          month = _ref2.month,
-          year = _ref2.year,
-          isWeekend = _ref2.isWeekend;
-      var dateString = InternalDateTransformer.dateToInternalString({
-        date: date,
-        month: month + 1,
-        year: year
-      });
-      return _this.props.isHoliday(dateString, isWeekend);
-    };
-
     return _this;
   }
 
@@ -188,17 +233,13 @@ export var DatePicker = /*#__PURE__*/function (_React$Component) {
     }
   };
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    var disabled = nextProps.disabled;
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    var disabled = this.props.disabled;
     var opened = this.state.opened;
 
     if (disabled && opened) {
       this.close();
     }
-
-    this.internalDate = this.parseValueToDate(nextProps.value);
-    this.minDate = this.parseValueToDate(nextProps.minDate);
-    this.maxDate = this.parseValueToDate(nextProps.maxDate);
   }
   /**
   * @public
@@ -241,7 +282,18 @@ export var DatePicker = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, this.renderMain);
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: ThemeFactory.create({
+          calendarBottomSeparatorBorder: 'none'
+        }, theme)
+      }, /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this2.setRootNode
+      }, _this2.props), _this2.renderMain));
+    });
   };
 
   _proto.parseValueToDate = function parseValueToDate(value) {
@@ -256,16 +308,53 @@ export var DatePicker = /*#__PURE__*/function (_React$Component) {
     if (date.validate({
       checks: [InternalDateValidateCheck.NotNull, InternalDateValidateCheck.Native]
     })) {
-      return date;
+      return date.toString({
+        withPad: true
+      });
     }
 
     return undefined;
   };
 
+  _proto.renderTodayLink = function renderTodayLink() {
+    var _cx;
+
+    var _this$locale = this.locale,
+        order = _this$locale.order,
+        separator = _this$locale.separator;
+    var today = new InternalDate({
+      order: order,
+      separator: separator
+    }).setComponents(InternalDateGetter.getTodayComponents()).toString({
+      withPad: true,
+      withSeparator: true
+    });
+
+    if (isTheme2022(this.theme)) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          margin: 8
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        "aria-label": this.locale.todayAriaLabel,
+        "data-tid": DatePickerDataTids.pickerTodayWrapper,
+        width: "100%",
+        onClick: this.handleSelectToday(today),
+        icon: /*#__PURE__*/React.createElement(ArrowAUpIcon16Light, null)
+      }, this.locale.today));
+    }
+
+    return /*#__PURE__*/React.createElement("button", {
+      "aria-label": this.locale.todayAriaLabel,
+      "data-tid": DatePickerDataTids.pickerTodayWrapper,
+      className: cx((_cx = {}, _cx[styles.todayLinkWrapper(this.theme)] = true, _cx)),
+      onClick: this.handleSelectToday(today),
+      tabIndex: -1
+    }, this.locale.today + " " + today);
+  };
+
   return DatePicker;
-}(React.Component);
-DatePicker.__KONTUR_REACT_UI__ = 'DatePicker';
-DatePicker.propTypes = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'DatePicker', _class2.propTypes = {
   autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
 
@@ -299,17 +388,11 @@ DatePicker.propTypes = {
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   onMouseOver: PropTypes.func,
-  isHoliday: PropTypes.func.isRequired
-};
-DatePicker.defaultProps = {
+  isHoliday: PropTypes.func
+}, _class2.defaultProps = {
   minDate: MIN_FULLDATE,
-  maxDate: MAX_FULLDATE,
-  isHoliday: function isHoliday(_day, isWeekend) {
-    return isWeekend;
-  }
-};
-
-DatePicker.validate = function (value, range) {
+  maxDate: MAX_FULLDATE
+}, _class2.validate = function (value, range) {
   if (range === void 0) {
     range = {};
   }
@@ -334,4 +417,4 @@ DatePicker.validate = function (value, range) {
   return internalDate.validate({
     checks: [InternalDateValidateCheck.NotNull, InternalDateValidateCheck.Number, InternalDateValidateCheck.Native, InternalDateValidateCheck.Limits, InternalDateValidateCheck.Range]
   });
-};
+}, _temp)) || _class) || _class);