@vkontakte/vkui 4.27.1 → 4.28.1

package/dist/cssm/hooks/useDateInput.js

@@ -0,0 +1,163 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from "react";
+import { useBooleanState } from "./useBooleanState";
+import { useGlobalEventListener } from "./useGlobalEventListener";
+import { useDOM } from "../lib/dom";
+export function useDateInput(_ref) {
+  var maxElement = _ref.maxElement,
+      refs = _ref.refs,
+      autoFocus = _ref.autoFocus,
+      disabled = _ref.disabled,
+      elementsConfig = _ref.elementsConfig,
+      onChange = _ref.onChange,
+      onInternalValueChange = _ref.onInternalValueChange,
+      getInternalValue = _ref.getInternalValue,
+      value = _ref.value;
+
+  var _useDOM = useDOM(),
+      document = _useDOM.document;
+
+  var _useBooleanState = useBooleanState(false),
+      open = _useBooleanState.value,
+      openCalendar = _useBooleanState.setTrue,
+      closeCalendar = _useBooleanState.setFalse;
+
+  var rootRef = React.useRef(null);
+  var calendarRef = React.useRef(null);
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      internalValue = _React$useState2[0],
+      setInternalValue = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      focusedElement = _React$useState4[0],
+      setFocusedElement = _React$useState4[1];
+
+  var _useDOM2 = useDOM(),
+      window = _useDOM2.window;
+
+  var removeFocusFromField = React.useCallback(function () {
+    if (open) {
+      var _getSelection;
+
+      setFocusedElement(null);
+      closeCalendar();
+      (_getSelection = window.getSelection()) === null || _getSelection === void 0 ? void 0 : _getSelection.removeAllRanges();
+      setInternalValue(getInternalValue(value));
+    }
+  }, [closeCalendar, getInternalValue, open, value, window]);
+  var handleClickOutside = React.useCallback(function (e) {
+    var _rootRef$current, _calendarRef$current;
+
+    if (!((_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 && _rootRef$current.contains(e.target)) && !((_calendarRef$current = calendarRef.current) !== null && _calendarRef$current !== void 0 && _calendarRef$current.contains(e.target))) {
+      removeFocusFromField();
+    }
+  }, [removeFocusFromField]);
+  var selectFirst = React.useCallback(function () {
+    setFocusedElement(0);
+  }, []);
+  useGlobalEventListener(document, "click", handleClickOutside, {
+    capture: true
+  });
+  React.useEffect(function () {
+    setInternalValue(getInternalValue(value));
+  }, [getInternalValue, value]);
+  React.useEffect(function () {
+    if (autoFocus) {
+      selectFirst();
+    }
+  }, [autoFocus, selectFirst]);
+  React.useEffect(function () {
+    if (disabled || focusedElement === null) {
+      return;
+    }
+
+    var range = window.document.createRange();
+    var element = refs[focusedElement].current;
+
+    if (element) {
+      element.focus();
+      openCalendar();
+      range.selectNodeContents(element);
+      var selection = window.getSelection();
+      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+    }
+  }, [disabled, focusedElement, openCalendar, refs, window]);
+  var clear = React.useCallback(function () {
+    onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+    selectFirst();
+  }, [onChange, selectFirst]);
+  var handleFieldEnter = React.useCallback(function () {
+    if (!open) {
+      selectFirst();
+    }
+  }, [open, selectFirst]);
+  var handleKeyDown = React.useCallback(function (e) {
+    if (focusedElement === null) {
+      return;
+    }
+
+    var _value = _toConsumableArray(internalValue);
+
+    var config = elementsConfig(focusedElement);
+
+    if (/^\d+$/.test(e.key)) {
+      if (_value[focusedElement].length >= config.length) {
+        _value[focusedElement] = e.key;
+      } else {
+        _value[focusedElement] += e.key;
+
+        if (_value[focusedElement].length >= config.length && focusedElement < maxElement) {
+          setFocusedElement(focusedElement + 1);
+        }
+      }
+    } else if (e.key === "Backspace") {
+      if (!_value[focusedElement]) {
+        setFocusedElement(focusedElement <= 0 ? maxElement : focusedElement - 1);
+      } else {
+        _value[focusedElement] = _value[focusedElement].slice(0, -1);
+      }
+    } else if (e.key === "ArrowDown" || e.key === "Down") {
+      var currentValue = Number(_value[focusedElement]);
+      _value[focusedElement] = String(currentValue <= config.min ? config.max : currentValue - 1).padStart(config.length, "0");
+    } else if (e.key === "ArrowUp" || e.key === "Up") {
+      var _currentValue = Number(_value[focusedElement]);
+
+      _value[focusedElement] = String(_currentValue >= config.max ? config.min : _currentValue + 1).padStart(config.length, "0");
+    } else if (e.key === "Enter" || e.key === "Tab" && focusedElement === maxElement || e.key === "Tab" && e.shiftKey && focusedElement === 0) {
+      removeFocusFromField();
+      return;
+    } else if (e.key === "ArrowLeft" || e.key === "Left" || e.key === "Tab" && e.shiftKey) {
+      setFocusedElement(focusedElement <= 0 ? maxElement : focusedElement - 1);
+    } else if (e.key === "ArrowRight" || e.key === "Right" || e.key === "Tab") {
+      setFocusedElement(focusedElement >= maxElement ? 0 : focusedElement + 1);
+    } else if (e.key === "Delete" || e.key === "Del") {
+      _value[focusedElement] = "";
+    } else {
+      return;
+    }
+
+    e.preventDefault();
+    setInternalValue(_value);
+    onInternalValueChange(_value);
+  }, [elementsConfig, focusedElement, internalValue, maxElement, onInternalValueChange, removeFocusFromField]);
+  return {
+    rootRef: rootRef,
+    calendarRef: calendarRef,
+    open: open,
+    openCalendar: openCalendar,
+    closeCalendar: closeCalendar,
+    internalValue: internalValue,
+    focusedElement: focusedElement,
+    setFocusedElement: setFocusedElement,
+    handleKeyDown: handleKeyDown,
+    clear: clear,
+    handleFieldEnter: handleFieldEnter,
+    removeFocusFromField: removeFocusFromField
+  };
+}
+//# sourceMappingURL=useDateInput.js.map

package/dist/cssm/hooks/useDateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useDateInput.ts"],"names":["React","useBooleanState","useGlobalEventListener","useDOM","useDateInput","maxElement","refs","autoFocus","disabled","elementsConfig","onChange","onInternalValueChange","getInternalValue","value","document","open","openCalendar","setTrue","closeCalendar","setFalse","rootRef","useRef","calendarRef","useState","internalValue","setInternalValue","focusedElement","setFocusedElement","window","removeFocusFromField","useCallback","getSelection","removeAllRanges","handleClickOutside","e","current","contains","target","selectFirst","capture","useEffect","range","createRange","element","focus","selectNodeContents","selection","addRange","clear","undefined","handleFieldEnter","handleKeyDown","_value","config","test","key","length","slice","currentValue","Number","String","min","max","padStart","shiftKey","preventDefault"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useBooleanState } from \"./useBooleanState\";\nimport { useGlobalEventListener } from \"./useGlobalEventListener\";\nimport { useDOM } from \"../lib/dom\";\n\nexport interface UseDateInputDependencies<T, D> {\n  maxElement: number;\n  refs: Array<React.RefObject<T>>;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  value?: D;\n  elementsConfig(index: number): {\n    length: number;\n    min: number;\n    max: number;\n  };\n  onInternalValueChange(value: string[]): void;\n  getInternalValue(value?: D | undefined): string[];\n  onChange?(value?: D | undefined): void;\n}\n\nexport function useDateInput<T extends HTMLElement, D>({\n  maxElement,\n  refs,\n  autoFocus,\n  disabled,\n  elementsConfig,\n  onChange,\n  onInternalValueChange,\n  getInternalValue,\n  value,\n}: UseDateInputDependencies<T, D>) {\n  const { document } = useDOM();\n  const {\n    value: open,\n    setTrue: openCalendar,\n    setFalse: closeCalendar,\n  } = useBooleanState(false);\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const calendarRef = React.useRef<HTMLDivElement>(null);\n  const [internalValue, setInternalValue] = React.useState<string[]>([]);\n  const [focusedElement, setFocusedElement] = React.useState<number | null>(\n    null\n  );\n  const { window } = useDOM();\n\n  const removeFocusFromField = React.useCallback(() => {\n    if (open) {\n      setFocusedElement(null);\n      closeCalendar();\n      window!.getSelection()?.removeAllRanges();\n      setInternalValue(getInternalValue(value));\n    }\n  }, [closeCalendar, getInternalValue, open, value, window]);\n\n  const handleClickOutside = React.useCallback(\n    (e: MouseEvent) => {\n      if (\n        !rootRef.current?.contains(e.target as Node | null) &&\n        !calendarRef.current?.contains(e.target as Node | null)\n      ) {\n        removeFocusFromField();\n      }\n    },\n    [removeFocusFromField]\n  );\n\n  const selectFirst = React.useCallback(() => {\n    setFocusedElement(0);\n  }, []);\n\n  useGlobalEventListener(document, \"click\", handleClickOutside, {\n    capture: true,\n  });\n\n  React.useEffect(() => {\n    setInternalValue(getInternalValue(value));\n  }, [getInternalValue, value]);\n\n  React.useEffect(() => {\n    if (autoFocus) {\n      selectFirst();\n    }\n  }, [autoFocus, selectFirst]);\n\n  React.useEffect(() => {\n    if (disabled || focusedElement === null) {\n      return;\n    }\n\n    const range = window!.document.createRange();\n\n    let element = refs[focusedElement].current;\n\n    if (element) {\n      element.focus();\n      openCalendar();\n      range.selectNodeContents(element as Node);\n\n      const selection = window!.getSelection();\n      selection?.removeAllRanges();\n      selection?.addRange(range);\n    }\n  }, [disabled, focusedElement, openCalendar, refs, window]);\n\n  const clear = React.useCallback(() => {\n    onChange?.(undefined);\n    selectFirst();\n  }, [onChange, selectFirst]);\n\n  const handleFieldEnter = React.useCallback(() => {\n    if (!open) {\n      selectFirst();\n    }\n  }, [open, selectFirst]);\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLSpanElement>) => {\n      if (focusedElement === null) {\n        return;\n      }\n\n      const _value = [...internalValue];\n      const config = elementsConfig(focusedElement);\n\n      if (/^\\d+$/.test(e.key)) {\n        if (_value[focusedElement].length >= config.length) {\n          _value[focusedElement] = e.key;\n        } else {\n          _value[focusedElement] += e.key;\n          if (\n            _value[focusedElement].length >= config.length &&\n            focusedElement < maxElement\n          ) {\n            setFocusedElement(focusedElement + 1);\n          }\n        }\n      } else if (e.key === \"Backspace\") {\n        if (!_value[focusedElement]) {\n          setFocusedElement(\n            focusedElement <= 0 ? maxElement : focusedElement - 1\n          );\n        } else {\n          _value[focusedElement] = _value[focusedElement].slice(0, -1);\n        }\n      } else if (e.key === \"ArrowDown\" || e.key === \"Down\") {\n        let currentValue = Number(_value[focusedElement]);\n        _value[focusedElement] = String(\n          currentValue <= config.min ? config.max : currentValue - 1\n        ).padStart(config.length, \"0\");\n      } else if (e.key === \"ArrowUp\" || e.key === \"Up\") {\n        let currentValue = Number(_value[focusedElement]);\n        _value[focusedElement] = String(\n          currentValue >= config.max ? config.min : currentValue + 1\n        ).padStart(config.length, \"0\");\n      } else if (\n        e.key === \"Enter\" ||\n        (e.key === \"Tab\" && focusedElement === maxElement) ||\n        (e.key === \"Tab\" && e.shiftKey && focusedElement === 0)\n      ) {\n        removeFocusFromField();\n        return;\n      } else if (\n        e.key === \"ArrowLeft\" ||\n        e.key === \"Left\" ||\n        (e.key === \"Tab\" && e.shiftKey)\n      ) {\n        setFocusedElement(\n          focusedElement <= 0 ? maxElement : focusedElement - 1\n        );\n      } else if (\n        e.key === \"ArrowRight\" ||\n        e.key === \"Right\" ||\n        e.key === \"Tab\"\n      ) {\n        setFocusedElement(\n          focusedElement >= maxElement ? 0 : focusedElement + 1\n        );\n      } else if (e.key === \"Delete\" || e.key === \"Del\") {\n        _value[focusedElement] = \"\";\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      setInternalValue(_value);\n      onInternalValueChange(_value);\n    },\n    [\n      elementsConfig,\n      focusedElement,\n      internalValue,\n      maxElement,\n      onInternalValueChange,\n      removeFocusFromField,\n    ]\n  );\n\n  return {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    focusedElement,\n    setFocusedElement,\n    handleKeyDown,\n    clear,\n    handleFieldEnter,\n    removeFocusFromField,\n  };\n}\n"],"file":"useDateInput.js"}

package/dist/cssm/hooks/useKeyboardInputTracker.d.ts

@@ -1 +1,3 @@
+export declare const ENABLE_KEYBOARD_INPUT_EVENT_NAME = "enableKeyboardInput";
+export declare const DISABLE_KEYBOARD_INPUT_EVENT_NAME = "disableKeyboardInput";
 export declare function useKeyboardInputTracker(): boolean;

package/dist/cssm/hooks/useKeyboardInputTracker.js

@@ -3,6 +3,8 @@ import * as React from "react";
 import { Keys, pressedKey } from "../lib/accessibility";
 import { useDOM } from "../lib/dom";
 import { useGlobalEventListener } from "./useGlobalEventListener";
+export var ENABLE_KEYBOARD_INPUT_EVENT_NAME = "enableKeyboardInput";
+export var DISABLE_KEYBOARD_INPUT_EVENT_NAME = "disableKeyboardInput";
 export function useKeyboardInputTracker() {
   var _useDOM = useDOM(),
       document = _useDOM.document;
@@ -12,11 +14,14 @@ export function useKeyboardInputTracker() {
       isKeyboardInputActive = _React$useState2[0],
       toggleKeyboardInput = _React$useState2[1];
 
-  var enableKeyboardInput = React.useCallback(function (e) {
+  var enableKeyboardInput = React.useCallback(function () {
+    toggleKeyboardInput(true);
+  }, []);
+  var handleKeydown = React.useCallback(function (e) {
     if (pressedKey(e) === Keys.TAB) {
-      toggleKeyboardInput(true);
+      enableKeyboardInput();
     }
-  }, []);
+  }, [enableKeyboardInput]);
   var disableKeyboardInput = React.useCallback(function () {
     toggleKeyboardInput(false);
   }, []);
@@ -24,9 +29,11 @@ export function useKeyboardInputTracker() {
     passive: true,
     capture: true
   };
-  useGlobalEventListener(document, "keydown", enableKeyboardInput, eventOptions);
+  useGlobalEventListener(document, "keydown", handleKeydown, eventOptions);
   useGlobalEventListener(document, "mousedown", disableKeyboardInput, eventOptions);
   useGlobalEventListener(document, "touchstart", disableKeyboardInput, eventOptions);
+  useGlobalEventListener(document, ENABLE_KEYBOARD_INPUT_EVENT_NAME, enableKeyboardInput, eventOptions);
+  useGlobalEventListener(document, DISABLE_KEYBOARD_INPUT_EVENT_NAME, disableKeyboardInput, eventOptions);
   return isKeyboardInputActive;
 }
 //# sourceMappingURL=useKeyboardInputTracker.js.map

package/dist/cssm/hooks/useKeyboardInputTracker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useKeyboardInputTracker.ts"],"names":["React","Keys","pressedKey","useDOM","useGlobalEventListener","useKeyboardInputTracker","document","useState","isKeyboardInputActive","toggleKeyboardInput","enableKeyboardInput","useCallback","e","TAB","disableKeyboardInput","eventOptions","passive","capture"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf;AACA,SAASC,MAAT;AACA,SAASC,sBAAT;AAEA,OAAO,SAASC,uBAAT,GAA4C;AACjD,gBAAqBF,MAAM,EAA3B;AAAA,MAAQG,QAAR,WAAQA,QAAR;;AAEA,wBACEN,KAAK,CAACO,QAAN,CAAwB,KAAxB,CADF;AAAA;AAAA,MAAOC,qBAAP;AAAA,MAA8BC,mBAA9B;;AAGA,MAAMC,mBAAmB,GAAGV,KAAK,CAACW,WAAN,CAAkB,UAACC,CAAD,EAAsB;AAClE,QAAIV,UAAU,CAACU,CAAD,CAAV,KAAkBX,IAAI,CAACY,GAA3B,EAAgC;AAC9BJ,MAAAA,mBAAmB,CAAC,IAAD,CAAnB;AACD;AACF,GAJ2B,EAIzB,EAJyB,CAA5B;AAMA,MAAMK,oBAAoB,GAAGd,KAAK,CAACW,WAAN,CAAkB,YAAM;AACnDF,IAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD,GAF4B,EAE1B,EAF0B,CAA7B;AAIA,MAAMM,YAAY,GAAG;AACnBC,IAAAA,OAAO,EAAE,IADU;AAEnBC,IAAAA,OAAO,EAAE;AAFU,GAArB;AAKAb,EAAAA,sBAAsB,CACpBE,QADoB,EAEpB,SAFoB,EAGpBI,mBAHoB,EAIpBK,YAJoB,CAAtB;AAMAX,EAAAA,sBAAsB,CACpBE,QADoB,EAEpB,WAFoB,EAGpBQ,oBAHoB,EAIpBC,YAJoB,CAAtB;AAMAX,EAAAA,sBAAsB,CACpBE,QADoB,EAEpB,YAFoB,EAGpBQ,oBAHoB,EAIpBC,YAJoB,CAAtB;AAOA,SAAOP,qBAAP;AACD","sourcesContent":["import * as React from \"react\";\nimport { Keys, pressedKey } from \"../lib/accessibility\";\nimport { useDOM } from \"../lib/dom\";\nimport { useGlobalEventListener } from \"./useGlobalEventListener\";\n\nexport function useKeyboardInputTracker(): boolean {\n  const { document } = useDOM();\n\n  const [isKeyboardInputActive, toggleKeyboardInput] =\n    React.useState<boolean>(false);\n\n  const enableKeyboardInput = React.useCallback((e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB) {\n      toggleKeyboardInput(true);\n    }\n  }, []);\n\n  const disableKeyboardInput = React.useCallback(() => {\n    toggleKeyboardInput(false);\n  }, []);\n\n  const eventOptions = {\n    passive: true,\n    capture: true,\n  };\n\n  useGlobalEventListener(\n    document,\n    \"keydown\",\n    enableKeyboardInput,\n    eventOptions\n  );\n  useGlobalEventListener(\n    document,\n    \"mousedown\",\n    disableKeyboardInput,\n    eventOptions\n  );\n  useGlobalEventListener(\n    document,\n    \"touchstart\",\n    disableKeyboardInput,\n    eventOptions\n  );\n\n  return isKeyboardInputActive;\n}\n"],"file":"useKeyboardInputTracker.js"}
+{"version":3,"sources":["../../../src/hooks/useKeyboardInputTracker.ts"],"names":["React","Keys","pressedKey","useDOM","useGlobalEventListener","ENABLE_KEYBOARD_INPUT_EVENT_NAME","DISABLE_KEYBOARD_INPUT_EVENT_NAME","useKeyboardInputTracker","document","useState","isKeyboardInputActive","toggleKeyboardInput","enableKeyboardInput","useCallback","handleKeydown","e","TAB","disableKeyboardInput","eventOptions","passive","capture"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf;AACA,SAASC,MAAT;AACA,SAASC,sBAAT;AAEA,OAAO,IAAMC,gCAAgC,GAAG,qBAAzC;AACP,OAAO,IAAMC,iCAAiC,GAAG,sBAA1C;AAEP,OAAO,SAASC,uBAAT,GAA4C;AACjD,gBAAqBJ,MAAM,EAA3B;AAAA,MAAQK,QAAR,WAAQA,QAAR;;AAEA,wBACER,KAAK,CAACS,QAAN,CAAwB,KAAxB,CADF;AAAA;AAAA,MAAOC,qBAAP;AAAA,MAA8BC,mBAA9B;;AAGA,MAAMC,mBAAmB,GAAGZ,KAAK,CAACa,WAAN,CAAkB,YAAM;AAClDF,IAAAA,mBAAmB,CAAC,IAAD,CAAnB;AACD,GAF2B,EAEzB,EAFyB,CAA5B;AAIA,MAAMG,aAAa,GAAGd,KAAK,CAACa,WAAN,CACpB,UAACE,CAAD,EAAsB;AACpB,QAAIb,UAAU,CAACa,CAAD,CAAV,KAAkBd,IAAI,CAACe,GAA3B,EAAgC;AAC9BJ,MAAAA,mBAAmB;AACpB;AACF,GALmB,EAMpB,CAACA,mBAAD,CANoB,CAAtB;AASA,MAAMK,oBAAoB,GAAGjB,KAAK,CAACa,WAAN,CAAkB,YAAM;AACnDF,IAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD,GAF4B,EAE1B,EAF0B,CAA7B;AAIA,MAAMO,YAAY,GAAG;AACnBC,IAAAA,OAAO,EAAE,IADU;AAEnBC,IAAAA,OAAO,EAAE;AAFU,GAArB;AAKAhB,EAAAA,sBAAsB,CAACI,QAAD,EAAW,SAAX,EAAsBM,aAAtB,EAAqCI,YAArC,CAAtB;AACAd,EAAAA,sBAAsB,CACpBI,QADoB,EAEpB,WAFoB,EAGpBS,oBAHoB,EAIpBC,YAJoB,CAAtB;AAMAd,EAAAA,sBAAsB,CACpBI,QADoB,EAEpB,YAFoB,EAGpBS,oBAHoB,EAIpBC,YAJoB,CAAtB;AAMAd,EAAAA,sBAAsB,CACpBI,QADoB,EAEpBH,gCAFoB,EAGpBO,mBAHoB,EAIpBM,YAJoB,CAAtB;AAMAd,EAAAA,sBAAsB,CACpBI,QADoB,EAEpBF,iCAFoB,EAGpBW,oBAHoB,EAIpBC,YAJoB,CAAtB;AAOA,SAAOR,qBAAP;AACD","sourcesContent":["import * as React from \"react\";\nimport { Keys, pressedKey } from \"../lib/accessibility\";\nimport { useDOM } from \"../lib/dom\";\nimport { useGlobalEventListener } from \"./useGlobalEventListener\";\n\nexport const ENABLE_KEYBOARD_INPUT_EVENT_NAME = \"enableKeyboardInput\";\nexport const DISABLE_KEYBOARD_INPUT_EVENT_NAME = \"disableKeyboardInput\";\n\nexport function useKeyboardInputTracker(): boolean {\n  const { document } = useDOM();\n\n  const [isKeyboardInputActive, toggleKeyboardInput] =\n    React.useState<boolean>(false);\n\n  const enableKeyboardInput = React.useCallback(() => {\n    toggleKeyboardInput(true);\n  }, []);\n\n  const handleKeydown = React.useCallback(\n    (e: KeyboardEvent) => {\n      if (pressedKey(e) === Keys.TAB) {\n        enableKeyboardInput();\n      }\n    },\n    [enableKeyboardInput]\n  );\n\n  const disableKeyboardInput = React.useCallback(() => {\n    toggleKeyboardInput(false);\n  }, []);\n\n  const eventOptions = {\n    passive: true,\n    capture: true,\n  };\n\n  useGlobalEventListener(document, \"keydown\", handleKeydown, eventOptions);\n  useGlobalEventListener(\n    document,\n    \"mousedown\",\n    disableKeyboardInput,\n    eventOptions\n  );\n  useGlobalEventListener(\n    document,\n    \"touchstart\",\n    disableKeyboardInput,\n    eventOptions\n  );\n  useGlobalEventListener(\n    document,\n    ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n    enableKeyboardInput,\n    eventOptions\n  );\n  useGlobalEventListener(\n    document,\n    DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n    disableKeyboardInput,\n    eventOptions\n  );\n\n  return isKeyboardInputActive;\n}\n"],"file":"useKeyboardInputTracker.js"}

package/dist/cssm/hooks/useOrientationChange.d.ts

@@ -0,0 +1,7 @@
+declare type Orientation = "portrait" | "landscape";
+/**
+ * Возвращает текущую ориентация экрана на человеческом языке.
+ * Обновляется при изменении ориентации.
+ */
+export declare function useOrientationChange(): Orientation;
+export {};

package/dist/cssm/hooks/useOrientationChange.js

@@ -0,0 +1,42 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from "react";
+import { useDOM } from "../lib/dom";
+import { useGlobalEventListener } from "./useGlobalEventListener";
+
+/**
+ * Возвращает текущую ориентация экрана на человеческом языке.
+ * Учитывает особенности API на разных платформах.
+ */
+function getOrientation(window) {
+  var _window$screen$orient, _window$screen, _window$screen$orient2;
+
+  if (!window) {
+    return "portrait";
+  }
+
+  var angle = Math.abs((_window$screen$orient = (_window$screen = window.screen) === null || _window$screen === void 0 ? void 0 : (_window$screen$orient2 = _window$screen.orientation) === null || _window$screen$orient2 === void 0 ? void 0 : _window$screen$orient2.angle) !== null && _window$screen$orient !== void 0 ? _window$screen$orient : Number(window.orientation));
+  return angle === 90 ? "landscape" : "portrait";
+}
+/**
+ * Возвращает текущую ориентация экрана на человеческом языке.
+ * Обновляется при изменении ориентации.
+ */
+
+
+export function useOrientationChange() {
+  var _useDOM = useDOM(),
+      window = _useDOM.window;
+
+  var _React$useState = React.useState(function () {
+    return getOrientation(window);
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      orientation = _React$useState2[0],
+      setOrientation = _React$useState2[1];
+
+  useGlobalEventListener(window, "orientationchange", function () {
+    return setOrientation(getOrientation(window));
+  });
+  return orientation;
+}
+//# sourceMappingURL=useOrientationChange.js.map

package/dist/cssm/hooks/useOrientationChange.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useOrientationChange.ts"],"names":["React","useDOM","useGlobalEventListener","getOrientation","window","angle","Math","abs","screen","orientation","Number","useOrientationChange","useState","setOrientation"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT;AACA,SAASC,sBAAT;;AAIA;AACA;AACA;AACA;AACA,SAASC,cAAT,CAAwBC,MAAxB,EAAiE;AAAA;;AAC/D,MAAI,CAACA,MAAL,EAAa;AACX,WAAO,UAAP;AACD;;AAED,MAAMC,KAAK,GAAGC,IAAI,CAACC,GAAL,4CACZH,MAAM,CAACI,MADK,6EACZ,eAAeC,WADH,2DACZ,uBAA4BJ,KADhB,yEACyBK,MAAM,CAACN,MAAM,CAACK,WAAR,CAD/B,CAAd;AAIA,SAAOJ,KAAK,KAAK,EAAV,GAAe,WAAf,GAA6B,UAApC;AACD;AAED;AACA;AACA;AACA;;;AACA,OAAO,SAASM,oBAAT,GAA6C;AAClD,gBAAmBV,MAAM,EAAzB;AAAA,MAAQG,MAAR,WAAQA,MAAR;;AAEA,wBAAsCJ,KAAK,CAACY,QAAN,CAAe;AAAA,WACnDT,cAAc,CAACC,MAAD,CADqC;AAAA,GAAf,CAAtC;AAAA;AAAA,MAAOK,WAAP;AAAA,MAAoBI,cAApB;;AAIAX,EAAAA,sBAAsB,CAACE,MAAD,EAAS,mBAAT,EAA8B;AAAA,WAClDS,cAAc,CAACV,cAAc,CAACC,MAAD,CAAf,CADoC;AAAA,GAA9B,CAAtB;AAIA,SAAOK,WAAP;AACD","sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../lib/dom\";\nimport { useGlobalEventListener } from \"./useGlobalEventListener\";\n\ntype Orientation = \"portrait\" | \"landscape\";\n\n/**\n * Возвращает текущую ориентация экрана на человеческом языке.\n * Учитывает особенности API на разных платформах.\n */\nfunction getOrientation(window: Window | undefined): Orientation {\n  if (!window) {\n    return \"portrait\";\n  }\n\n  const angle = Math.abs(\n    window.screen?.orientation?.angle ?? Number(window.orientation)\n  );\n\n  return angle === 90 ? \"landscape\" : \"portrait\";\n}\n\n/**\n * Возвращает текущую ориентация экрана на человеческом языке.\n * Обновляется при изменении ориентации.\n */\nexport function useOrientationChange(): Orientation {\n  const { window } = useDOM();\n\n  const [orientation, setOrientation] = React.useState(() =>\n    getOrientation(window)\n  );\n\n  useGlobalEventListener(window, \"orientationchange\", () =>\n    setOrientation(getOrientation(window))\n  );\n\n  return orientation;\n}\n"],"file":"useOrientationChange.js"}

package/dist/cssm/hooks/usePagination.d.ts

@@ -0,0 +1,34 @@
+interface UsePagintaionProps {
+    /**
+     * Текущая страница.
+     */
+    currentPage?: number;
+    /**
+     * Кол-во всегда видимых страниц по краям текущей страницы.
+     */
+    siblingCount?: number;
+    /**
+     * Кол-во всегда видимых страниц в начале и в конце.
+     */
+    boundaryCount?: number;
+    /**
+     * Общее кол-во страниц.
+     */
+    totalPages?: number;
+}
+export declare type PaginationPageType = "start-ellipsis" | "end-ellipsis" | number;
+export declare type UsePaginationResult = PaginationPageType[];
+/**
+ * Хук взаимствован у @mui с некоторыми изменениями.
+ *  [usePagination.js](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js).
+ *
+ * Примеры вывода:
+ *           v
+ * [1, 2, 3, 4, 5, 'end-ellipsis', 10]
+ *                          v
+ * [1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]
+ *                          v
+ * [1, 'start-ellipsis', 6, 7, 8, 9, 10]
+ */
+export declare const usePagination: ({ currentPage, siblingCount, boundaryCount, totalPages: endPage, }?: UsePagintaionProps) => UsePaginationResult;
+export {};

package/dist/cssm/hooks/usePagination.js

@@ -0,0 +1,67 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import * as React from "react";
+
+/**
+ * Хук взаимствован у @mui с некоторыми изменениями.
+ *  [usePagination.js](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js).
+ *
+ * Примеры вывода:
+ *           v
+ * [1, 2, 3, 4, 5, 'end-ellipsis', 10]
+ *                          v
+ * [1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]
+ *                          v
+ * [1, 'start-ellipsis', 6, 7, 8, 9, 10]
+ */
+export var usePagination = function usePagination() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$currentPage = _ref.currentPage,
+      currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+      _ref$siblingCount = _ref.siblingCount,
+      siblingCount = _ref$siblingCount === void 0 ? 1 : _ref$siblingCount,
+      _ref$boundaryCount = _ref.boundaryCount,
+      boundaryCount = _ref$boundaryCount === void 0 ? 1 : _ref$boundaryCount,
+      _ref$totalPages = _ref.totalPages,
+      endPage = _ref$totalPages === void 0 ? 1 : _ref$totalPages;
+
+  return React.useMemo(function () {
+    var range = function range(from, to) {
+      var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      var range = [];
+      var i = from;
+
+      while (i <= to) {
+        range.push(i);
+        i += step;
+      }
+
+      return range;
+    };
+
+    var startPages = range(1, Math.min(boundaryCount, endPage));
+    var endPages = range(Math.max(endPage - boundaryCount + 1, boundaryCount + 1), endPage);
+    var lowerBoundaryWhenCurrentPageHigh = endPage - boundaryCount - 1 - 2 * siblingCount;
+    var siblingsStart = Math.max(Math.min(currentPage - siblingCount, lowerBoundaryWhenCurrentPageHigh), boundaryCount + 2);
+    var upperBounadryWhenCurrentPageLow = boundaryCount + 2 + 2 * siblingCount;
+    var siblingsEnd = Math.min(Math.max(currentPage + siblingCount, upperBounadryWhenCurrentPageLow), endPages.length > 0 ? endPages[0] - 2 : endPage - 1);
+    var pages = startPages;
+
+    if (siblingsStart > boundaryCount + 2) {
+      pages.push("start-ellipsis");
+    } else if (boundaryCount + 1 < endPage - boundaryCount) {
+      pages.push(boundaryCount + 1);
+    }
+
+    pages.push.apply(pages, _toConsumableArray(range(siblingsStart, siblingsEnd)));
+
+    if (siblingsEnd < endPage - boundaryCount - 1) {
+      pages.push("end-ellipsis");
+    } else if (endPage - boundaryCount > boundaryCount) {
+      pages.push(endPage - boundaryCount);
+    }
+
+    pages.push.apply(pages, _toConsumableArray(endPages));
+    return pages;
+  }, [currentPage, endPage, siblingCount, boundaryCount]);
+};
+//# sourceMappingURL=usePagination.js.map

package/dist/cssm/hooks/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/usePagination.ts"],"names":["React","usePagination","currentPage","siblingCount","boundaryCount","totalPages","endPage","useMemo","range","from","to","step","i","push","startPages","Math","min","endPages","max","lowerBoundaryWhenCurrentPageHigh","siblingsStart","upperBounadryWhenCurrentPageLow","siblingsEnd","length","pages"],"mappings":"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","sourcesContent":["import * as React from \"react\";\n\ninterface UsePagintaionProps {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n}\n\nexport type PaginationPageType = \"start-ellipsis\" | \"end-ellipsis\" | number;\n\nexport type UsePaginationResult = PaginationPageType[];\n\n/**\n * Хук взаимствован у @mui с некоторыми изменениями.\n *  [usePagination.js](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js).\n *\n * Примеры вывода:\n *           v\n * [1, 2, 3, 4, 5, 'end-ellipsis', 10]\n *                          v\n * [1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]\n *                          v\n * [1, 'start-ellipsis', 6, 7, 8, 9, 10]\n */\nexport const usePagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages: endPage = 1,\n}: UsePagintaionProps = {}): UsePaginationResult =>\n  React.useMemo(() => {\n    const range = (from: number, to: number, step = 1) => {\n      const range = [];\n      let i = from;\n\n      while (i <= to) {\n        range.push(i);\n        i += step;\n      }\n\n      return range;\n    };\n\n    const startPages = range(1, Math.min(boundaryCount, endPage));\n    const endPages = range(\n      Math.max(endPage - boundaryCount + 1, boundaryCount + 1),\n      endPage\n    );\n\n    const lowerBoundaryWhenCurrentPageHigh =\n      endPage - boundaryCount - 1 - 2 * siblingCount;\n    const siblingsStart = Math.max(\n      Math.min(currentPage - siblingCount, lowerBoundaryWhenCurrentPageHigh),\n      boundaryCount + 2\n    );\n\n    const upperBounadryWhenCurrentPageLow =\n      boundaryCount + 2 + 2 * siblingCount;\n    const siblingsEnd = Math.min(\n      Math.max(currentPage + siblingCount, upperBounadryWhenCurrentPageLow),\n      endPages.length > 0 ? endPages[0] - 2 : endPage - 1\n    );\n\n    const pages: UsePaginationResult = startPages;\n\n    if (siblingsStart > boundaryCount + 2) {\n      pages.push(\"start-ellipsis\");\n    } else if (boundaryCount + 1 < endPage - boundaryCount) {\n      pages.push(boundaryCount + 1);\n    }\n\n    pages.push(...range(siblingsStart, siblingsEnd));\n\n    if (siblingsEnd < endPage - boundaryCount - 1) {\n      pages.push(\"end-ellipsis\");\n    } else if (endPage - boundaryCount > boundaryCount) {\n      pages.push(endPage - boundaryCount);\n    }\n\n    pages.push(...endPages);\n\n    return pages;\n  }, [currentPage, endPage, siblingCount, boundaryCount]);\n"],"file":"usePagination.js"}

package/dist/cssm/index.d.ts

@@ -68,6 +68,8 @@ export type { ModalDismissButtonProps } from "./components/ModalDismissButton/Mo
  */
 export { Badge } from "./components/Badge/Badge";
 export type { BadgeProps } from "./components/Badge/Badge";
+export { ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
+export type { ButtonGroupProps } from "./components/ButtonGroup/ButtonGroup";
 export { default as Button } from "./components/Button/Button";
 export type { ButtonProps } from "./components/Button/Button";
 export { default as IconButton } from "./components/IconButton/IconButton";
@@ -148,6 +150,8 @@ export { SubnavigationBar } from "./components/SubnavigationBar/SubnavigationBar
 export type { SubnavigationBarProps } from "./components/SubnavigationBar/SubnavigationBar";
 export { SubnavigationButton } from "./components/SubnavigationButton/SubnavigationButton";
 export type { SubnavigationButtonProps } from "./components/SubnavigationButton/SubnavigationButton";
+export { Pagination } from "./components/Pagination/Pagination";
+export type { PaginationProps } from "./components/Pagination/Pagination";
 /**
  * Forms
  */
@@ -199,10 +203,14 @@ export { SliderSwitch } from "./components/SliderSwitch/SliderSwitch";
 export type { SliderSwitchProps, SliderSwitchOptionInterface, } from "./components/SliderSwitch/SliderSwitch";
 export { SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
 export type { SegmentedControlProps, SegmentedControlOptionInterface, SegmentedControlValue, } from "./components/SegmentedControl/SegmentedControl";
+export { Calendar } from "./components/Calendar/Calendar";
+export { CalendarRange } from "./components/CalendarRange/CalendarRange";
+export { DateInput } from "./components/DateInput/DateInput";
+export { DateRangeInput } from "./components/DateRangeInput/DateRangeInput";
 /**
  * Helpers
  */
-export { default as Div } from "./components/Div/Div";
+export { Div } from "./components/Div/Div";
 export type { DivProps } from "./components/Div/Div";
 export { default as Tappable } from "./components/Tappable/Tappable";
 export type { TappableProps } from "./components/Tappable/Tappable";
@@ -227,6 +235,7 @@ export type { ConfigProviderProps } from "./components/ConfigProvider/ConfigProv
 export { ConfigProviderContext, WebviewType, } from "./components/ConfigProvider/ConfigProviderContext";
 export { AppearanceProvider } from "./components/AppearanceProvider/AppearanceProvider";
 export { Scheme, Appearance } from "./helpers/scheme";
+export { LocaleProviderContext } from "./components/LocaleProviderContext/LocaleProviderContext";
 /**
  * Advertisement
  */
@@ -241,7 +250,7 @@ export { default as Headline } from "./components/Typography/Headline/Headline";
 export type { HeadlineProps } from "./components/Typography/Headline/Headline";
 export { default as Text } from "./components/Typography/Text/Text";
 export type { TextProps } from "./components/Typography/Text/Text";
-export { default as Caption } from "./components/Typography/Caption/Caption";
+export { Caption } from "./components/Typography/Caption/Caption";
 export type { CaptionProps } from "./components/Typography/Caption/Caption";
 export { default as Subhead } from "./components/Typography/Subhead/Subhead";
 export type { SubheadProps } from "./components/Typography/Subhead/Subhead";
@@ -258,6 +267,7 @@ export { useInsets } from "./hooks/useInsets";
 export { usePlatform } from "./hooks/usePlatform";
 export { useAdaptivity } from "./hooks/useAdaptivity";
 export { useAppearance } from "./hooks/useAppearance";
+export { usePagination } from "./hooks/usePagination";
 /**
  * Utils
  */

package/dist/cssm/index.js

@@ -46,6 +46,7 @@ export { default as ModalDismissButton } from "./components/ModalDismissButton/M
  * Blocks
  */
 export { Badge } from "./components/Badge/Badge";
+export { ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
 export { default as Button } from "./components/Button/Button";
 export { default as IconButton } from "./components/IconButton/IconButton";
 export { Card } from "./components/Card/Card";
@@ -87,6 +88,7 @@ export { WriteBar } from "./components/WriteBar/WriteBar";
 export { WriteBarIcon } from "./components/WriteBarIcon/WriteBarIcon";
 export { SubnavigationBar } from "./components/SubnavigationBar/SubnavigationBar";
 export { SubnavigationButton } from "./components/SubnavigationButton/SubnavigationButton";
+export { Pagination } from "./components/Pagination/Pagination";
 
 /**
  * Forms
@@ -115,11 +117,15 @@ export { default as CustomSelectOption } from "./components/CustomSelectOption/C
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { SliderSwitch } from "./components/SliderSwitch/SliderSwitch";
 export { SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
-
+export { Calendar } from "./components/Calendar/Calendar";
+export { CalendarRange } from "./components/CalendarRange/CalendarRange";
+export { DateInput } from "./components/DateInput/DateInput";
+export { DateRangeInput } from "./components/DateRangeInput/DateRangeInput";
 /**
  * Helpers
  */
-export { default as Div } from "./components/Div/Div";
+
+export { Div } from "./components/Div/Div";
 export { default as Tappable } from "./components/Tappable/Tappable";
 export { Touch } from "./components/Touch/Touch";
 export { default as PanelSpinner } from "./components/PanelSpinner/PanelSpinner";
@@ -138,6 +144,7 @@ export { default as ConfigProvider } from "./components/ConfigProvider/ConfigPro
 export { ConfigProviderContext, WebviewType } from "./components/ConfigProvider/ConfigProviderContext";
 export { AppearanceProvider } from "./components/AppearanceProvider/AppearanceProvider";
 export { Scheme, Appearance } from "./helpers/scheme";
+export { LocaleProviderContext } from "./components/LocaleProviderContext/LocaleProviderContext";
 /**
  * Advertisement
  */
@@ -150,7 +157,7 @@ export { default as PromoBanner } from "./components/PromoBanner/PromoBanner";
 export { default as Title } from "./components/Typography/Title/Title";
 export { default as Headline } from "./components/Typography/Headline/Headline";
 export { default as Text } from "./components/Typography/Text/Text";
-export { default as Caption } from "./components/Typography/Caption/Caption";
+export { Caption } from "./components/Typography/Caption/Caption";
 export { default as Subhead } from "./components/Typography/Subhead/Subhead";
 
 /**
@@ -167,6 +174,7 @@ export { useInsets } from "./hooks/useInsets";
 export { usePlatform } from "./hooks/usePlatform";
 export { useAdaptivity } from "./hooks/useAdaptivity";
 export { useAppearance } from "./hooks/useAppearance";
+export { usePagination } from "./hooks/usePagination";
 /**
  * Utils
  */