@vkontakte/vkui 4.27.0 → 4.28.0

package/dist/cssm/tokenized/index.d.ts

@@ -0,0 +1,22 @@
+export { default as Button } from "../components/Button/Button";
+export type { ButtonProps } from "../components/Button/Button";
+export { Card } from "../components/Card/Card";
+export type { CardProps } from "../components/Card/Card";
+export { CardScroll } from "../components/CardScroll/CardScroll";
+export type { CardScrollProps } from "../components/CardScroll/CardScroll";
+export { default as HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
+export type { HorizontalScrollProps } from "../components/HorizontalScroll/HorizontalScroll";
+export { ButtonGroup } from "../components/ButtonGroup/ButtonGroup";
+export type { ButtonGroupProps } from "../components/ButtonGroup/ButtonGroup";
+export { SegmentedControl } from "../components/SegmentedControl/SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOptionInterface, SegmentedControlValue, } from "../components/SegmentedControl/SegmentedControl";
+export { default as Title } from "../components/Typography/Title/Title";
+export type { TitleProps } from "../components/Typography/Title/Title";
+export { default as Subhead } from "../components/Typography/Subhead/Subhead";
+export type { SubheadProps } from "../components/Typography/Subhead/Subhead";
+export { Pagination } from "../components/Pagination/Pagination";
+export type { PaginationProps } from "../components/Pagination/Pagination";
+export { Calendar } from "../components/Calendar/Calendar";
+export type { CalendarProps } from "../components/Calendar/Calendar";
+export { CalendarRange } from "../components/CalendarRange/CalendarRange";
+export type { CalendarRangeProps } from "../components/CalendarRange/CalendarRange";

package/dist/cssm/tokenized/index.js

@@ -1,5 +1,12 @@
 export { default as Button } from "../components/Button/Button";
 export { Card } from "../components/Card/Card";
 export { CardScroll } from "../components/CardScroll/CardScroll";
+export { default as HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
+export { ButtonGroup } from "../components/ButtonGroup/ButtonGroup";
 export { SegmentedControl } from "../components/SegmentedControl/SegmentedControl";
+export { default as Title } from "../components/Typography/Title/Title";
+export { default as Subhead } from "../components/Typography/Subhead/Subhead";
+export { Pagination } from "../components/Pagination/Pagination";
+export { Calendar } from "../components/Calendar/Calendar";
+export { CalendarRange } from "../components/CalendarRange/CalendarRange";
 //# sourceMappingURL=index.js.map

package/dist/cssm/tokenized/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tokenized/index.ts"],"names":["default","Button","Card","CardScroll","SegmentedControl"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAApB;AAGA,SAASC,IAAT;AAGA,SAASC,UAAT;AAGA,SAASC,gBAAT","sourcesContent":["export { default as Button } from \"../components/Button/Button\";\nexport type { ButtonProps } from \"../components/Button/Button\";\n\nexport { Card } from \"../components/Card/Card\";\nexport type { CardProps } from \"../components/Card/Card\";\n\nexport { CardScroll } from \"../components/CardScroll/CardScroll\";\nexport type { CardScrollProps } from \"../components/CardScroll/CardScroll\";\n\nexport { SegmentedControl } from \"../components/SegmentedControl/SegmentedControl\";\nexport type {\n  SegmentedControlProps,\n  SegmentedControlOptionInterface,\n  SegmentedControlValue,\n} from \"../components/SegmentedControl/SegmentedControl\";\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/tokenized/index.ts"],"names":["default","Button","Card","CardScroll","HorizontalScroll","ButtonGroup","SegmentedControl","Title","Subhead","Pagination","Calendar","CalendarRange"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAApB;AAGA,SAASC,IAAT;AAGA,SAASC,UAAT;AAGA,SAASH,OAAO,IAAII,gBAApB;AAGA,SAASC,WAAT;AAGA,SAASC,gBAAT;AAOA,SAASN,OAAO,IAAIO,KAApB;AAGA,SAASP,OAAO,IAAIQ,OAApB;AAGA,SAASC,UAAT;AAGA,SAASC,QAAT;AAGA,SAASC,aAAT","sourcesContent":["export { default as Button } from \"../components/Button/Button\";\nexport type { ButtonProps } from \"../components/Button/Button\";\n\nexport { Card } from \"../components/Card/Card\";\nexport type { CardProps } from \"../components/Card/Card\";\n\nexport { CardScroll } from \"../components/CardScroll/CardScroll\";\nexport type { CardScrollProps } from \"../components/CardScroll/CardScroll\";\n\nexport { default as HorizontalScroll } from \"../components/HorizontalScroll/HorizontalScroll\";\nexport type { HorizontalScrollProps } from \"../components/HorizontalScroll/HorizontalScroll\";\n\nexport { ButtonGroup } from \"../components/ButtonGroup/ButtonGroup\";\nexport type { ButtonGroupProps } from \"../components/ButtonGroup/ButtonGroup\";\n\nexport { SegmentedControl } from \"../components/SegmentedControl/SegmentedControl\";\nexport type {\n  SegmentedControlProps,\n  SegmentedControlOptionInterface,\n  SegmentedControlValue,\n} from \"../components/SegmentedControl/SegmentedControl\";\n\nexport { default as Title } from \"../components/Typography/Title/Title\";\nexport type { TitleProps } from \"../components/Typography/Title/Title\";\n\nexport { default as Subhead } from \"../components/Typography/Subhead/Subhead\";\nexport type { SubheadProps } from \"../components/Typography/Subhead/Subhead\";\n\nexport { Pagination } from \"../components/Pagination/Pagination\";\nexport type { PaginationProps } from \"../components/Pagination/Pagination\";\n\nexport { Calendar } from \"../components/Calendar/Calendar\";\nexport type { CalendarProps } from \"../components/Calendar/Calendar\";\n\nexport { CalendarRange } from \"../components/CalendarRange/CalendarRange\";\nexport type { CalendarRangeProps } from \"../components/CalendarRange/CalendarRange\";\n"],"file":"index.js"}

package/dist/cssm/unstable/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Forms
+ */
+export { ChipsSelect } from "../components/ChipsSelect/ChipsSelect";
+export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
+export { Dropdown } from "../components/Dropdown/Dropdown";
+export type { DropdownProps } from "../components/Dropdown/Dropdown";
+export { TextTooltip } from "../components/TextTooltip/TextTooltip";
+export type { TextTooltipProps } from "../components/TextTooltip/TextTooltip";
+export { RichTooltip } from "../components/RichTooltip/RichTooltip";
+export type { RichTooltipProps } from "../components/RichTooltip/RichTooltip";
+export { Popper } from "../components/Popper/Popper";
+export type { PopperProps } from "../components/Popper/Popper";
+export { ViewInfinite } from "../components/View/ViewInfinite";
+export type { ViewInfiniteProps } from "../components/View/ViewInfinite";
+export { SimpleCheckbox } from "../components/SimpleCheckbox/SimpleCheckbox";
+export type { SimpleCheckboxProps } from "../components/SimpleCheckbox/SimpleCheckbox";

package/dist/cssm/unstable/index.js

@@ -1,11 +1,11 @@
 /**
  * Forms
  */
-export { default as ChipsSelect } from "./../components/ChipsSelect/ChipsSelect";
+export { ChipsSelect } from "../components/ChipsSelect/ChipsSelect";
 export { Dropdown } from "../components/Dropdown/Dropdown";
 export { TextTooltip } from "../components/TextTooltip/TextTooltip";
 export { RichTooltip } from "../components/RichTooltip/RichTooltip";
 export { Popper } from "../components/Popper/Popper";
-export { default as ViewInfinite } from "./../components/View/ViewInfinite";
-export { default as SimpleCheckbox } from "./../components/SimpleCheckbox/SimpleCheckbox";
+export { ViewInfinite } from "../components/View/ViewInfinite";
+export { SimpleCheckbox } from "../components/SimpleCheckbox/SimpleCheckbox";
 //# sourceMappingURL=index.js.map

package/dist/cssm/unstable/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/unstable/index.ts"],"names":["default","ChipsSelect","Dropdown","TextTooltip","RichTooltip","Popper","ViewInfinite","SimpleCheckbox"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,WAApB;AAGA,SAASC,QAAT;AAGA,SAASC,WAAT;AAGA,SAASC,WAAT;AAGA,SAASC,MAAT;AAGA,SAASL,OAAO,IAAIM,YAApB;AAGA,SAASN,OAAO,IAAIO,cAApB","sourcesContent":["/**\n * Forms\n */\nexport { default as ChipsSelect } from \"./../components/ChipsSelect/ChipsSelect\";\nexport type { ChipsSelectProps } from \"./../components/ChipsSelect/ChipsSelect\";\n\nexport { Dropdown } from \"../components/Dropdown/Dropdown\";\nexport type { DropdownProps } from \"../components/Dropdown/Dropdown\";\n\nexport { TextTooltip } from \"../components/TextTooltip/TextTooltip\";\nexport type { TextTooltipProps } from \"../components/TextTooltip/TextTooltip\";\n\nexport { RichTooltip } from \"../components/RichTooltip/RichTooltip\";\nexport type { RichTooltipProps } from \"../components/RichTooltip/RichTooltip\";\n\nexport { Popper } from \"../components/Popper/Popper\";\nexport type { PopperProps } from \"../components/Popper/Popper\";\n\nexport { default as ViewInfinite } from \"./../components/View/ViewInfinite\";\nexport type { ViewInfiniteProps } from \"./../components/View/ViewInfinite\";\n\nexport { default as SimpleCheckbox } from \"./../components/SimpleCheckbox/SimpleCheckbox\";\nexport type { SimpleCheckboxProps } from \"./../components/SimpleCheckbox/SimpleCheckbox\";\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/unstable/index.ts"],"names":["ChipsSelect","Dropdown","TextTooltip","RichTooltip","Popper","ViewInfinite","SimpleCheckbox"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAT;AAGA,SAASC,QAAT;AAGA,SAASC,WAAT;AAGA,SAASC,WAAT;AAGA,SAASC,MAAT;AAGA,SAASC,YAAT;AAGA,SAASC,cAAT","sourcesContent":["/**\n * Forms\n */\nexport { ChipsSelect } from \"../components/ChipsSelect/ChipsSelect\";\nexport type { ChipsSelectProps } from \"../components/ChipsSelect/ChipsSelect\";\n\nexport { Dropdown } from \"../components/Dropdown/Dropdown\";\nexport type { DropdownProps } from \"../components/Dropdown/Dropdown\";\n\nexport { TextTooltip } from \"../components/TextTooltip/TextTooltip\";\nexport type { TextTooltipProps } from \"../components/TextTooltip/TextTooltip\";\n\nexport { RichTooltip } from \"../components/RichTooltip/RichTooltip\";\nexport type { RichTooltipProps } from \"../components/RichTooltip/RichTooltip\";\n\nexport { Popper } from \"../components/Popper/Popper\";\nexport type { PopperProps } from \"../components/Popper/Popper\";\n\nexport { ViewInfinite } from \"../components/View/ViewInfinite\";\nexport type { ViewInfiniteProps } from \"../components/View/ViewInfinite\";\n\nexport { SimpleCheckbox } from \"../components/SimpleCheckbox/SimpleCheckbox\";\nexport type { SimpleCheckboxProps } from \"../components/SimpleCheckbox/SimpleCheckbox\";\n"],"file":"index.js"}

package/dist/default_scheme.js.tmp

@@ -0,0 +1,24 @@
+/******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	!function() {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = function(exports) {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+/******/ })()
+;

package/dist/fonts.js.tmp

@@ -0,0 +1,24 @@
+/******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	!function() {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = function(exports) {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+/******/ })()
+;

package/dist/hooks/useAppearance.d.ts

@@ -1 +1 @@
-export declare const useAppearance: () => "dark" | "light" | undefined;
+export declare const useAppearance: () => import("@vkontakte/vk-bridge").AppearanceType;

package/dist/hooks/useAppearance.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
+import { AppearanceProviderContext } from "../components/AppearanceProvider/AppearanceProviderContext";
 export var useAppearance = function useAppearance() {
-  return React.useContext(ConfigProviderContext).appearance;
+  return React.useContext(AppearanceProviderContext);
 };
 //# sourceMappingURL=useAppearance.js.map

package/dist/hooks/useAppearance.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useAppearance.ts"],"names":["React","ConfigProviderContext","useAppearance","useContext","appearance"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,qBAAT;AAEA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SAC3BF,KAAK,CAACG,UAAN,CAAiBF,qBAAjB,EAAwCG,UADb;AAAA,CAAtB","sourcesContent":["import * as React from \"react\";\nimport { ConfigProviderContext } from \"../components/ConfigProvider/ConfigProviderContext\";\n\nexport const useAppearance = () =>\n  React.useContext(ConfigProviderContext).appearance;\n"],"file":"useAppearance.js"}
+{"version":3,"sources":["../../src/hooks/useAppearance.ts"],"names":["React","AppearanceProviderContext","useAppearance","useContext"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,yBAAT;AAEA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SAAMF,KAAK,CAACG,UAAN,CAAiBF,yBAAjB,CAAN;AAAA,CAAtB","sourcesContent":["import * as React from \"react\";\nimport { AppearanceProviderContext } from \"../components/AppearanceProvider/AppearanceProviderContext\";\n\nexport const useAppearance = () => React.useContext(AppearanceProviderContext);\n"],"file":"useAppearance.js"}

package/dist/hooks/useBooleanState.d.ts

@@ -0,0 +1,6 @@
+export declare const useBooleanState: (defaultValue?: boolean) => {
+    value: boolean;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+};

package/dist/hooks/useBooleanState.js

@@ -0,0 +1,27 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from "react";
+export var useBooleanState = function useBooleanState() {
+  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+  var _React$useState = React.useState(defaultValue),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1];
+
+  var setTrue = React.useCallback(function () {
+    setValue(true);
+  }, []);
+  var setFalse = React.useCallback(function () {
+    setValue(false);
+  }, []);
+  var toggle = React.useCallback(function () {
+    setValue(!value);
+  }, [value]);
+  return {
+    value: value,
+    setTrue: setTrue,
+    setFalse: setFalse,
+    toggle: toggle
+  };
+};
+//# sourceMappingURL=useBooleanState.js.map

package/dist/hooks/useBooleanState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useBooleanState.ts"],"names":["React","useBooleanState","defaultValue","useState","value","setValue","setTrue","useCallback","setFalse","toggle"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAA0B;AAAA,MAAzBC,YAAyB,uEAAV,KAAU;;AACvD,wBAA0BF,KAAK,CAACG,QAAN,CAAeD,YAAf,CAA1B;AAAA;AAAA,MAAOE,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAMC,OAAO,GAAGN,KAAK,CAACO,WAAN,CAAkB,YAAM;AACtCF,IAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,GAFe,EAEb,EAFa,CAAhB;AAIA,MAAMG,QAAQ,GAAGR,KAAK,CAACO,WAAN,CAAkB,YAAM;AACvCF,IAAAA,QAAQ,CAAC,KAAD,CAAR;AACD,GAFgB,EAEd,EAFc,CAAjB;AAIA,MAAMI,MAAM,GAAGT,KAAK,CAACO,WAAN,CAAkB,YAAM;AACrCF,IAAAA,QAAQ,CAAC,CAACD,KAAF,CAAR;AACD,GAFc,EAEZ,CAACA,KAAD,CAFY,CAAf;AAIA,SAAO;AAAEA,IAAAA,KAAK,EAALA,KAAF;AAASE,IAAAA,OAAO,EAAPA,OAAT;AAAkBE,IAAAA,QAAQ,EAARA,QAAlB;AAA4BC,IAAAA,MAAM,EAANA;AAA5B,GAAP;AACD,CAhBM","sourcesContent":["import * as React from \"react\";\n\nexport const useBooleanState = (defaultValue = false) => {\n  const [value, setValue] = React.useState(defaultValue);\n\n  const setTrue = React.useCallback(() => {\n    setValue(true);\n  }, []);\n\n  const setFalse = React.useCallback(() => {\n    setValue(false);\n  }, []);\n\n  const toggle = React.useCallback(() => {\n    setValue(!value);\n  }, [value]);\n\n  return { value, setTrue, setFalse, toggle };\n};\n"],"file":"useBooleanState.js"}

package/dist/hooks/useCalendar.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface UseCalendarDependencies {
+    value?: Array<Date | null> | Date;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    shouldDisableDate?(value: Date): boolean;
+}
+export declare function useCalendar({ value, disablePast, disableFuture, shouldDisableDate, }: UseCalendarDependencies): {
+    viewDate: Date;
+    setViewDate: React.Dispatch<React.SetStateAction<Date>>;
+    setPrevMonth: () => void;
+    setNextMonth: () => void;
+    focusedDay: Date | undefined;
+    setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    isDayFocused: (day: Date) => boolean;
+    isDayDisabled: (day: Date) => boolean;
+    resetSelectedDay: () => void;
+};

package/dist/hooks/useCalendar.js

@@ -0,0 +1,64 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from "react";
+import { subMonths, addMonths, isSameDay, isBefore, endOfDay, isAfter, startOfDay } from "date-fns";
+export function useCalendar(_ref) {
+  var _ref2;
+
+  var value = _ref.value,
+      disablePast = _ref.disablePast,
+      disableFuture = _ref.disableFuture,
+      shouldDisableDate = _ref.shouldDisableDate;
+
+  var _React$useState = React.useState((_ref2 = Array.isArray(value) ? value[0] : value) !== null && _ref2 !== void 0 ? _ref2 : new Date()),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      viewDate = _React$useState2[0],
+      setViewDate = _React$useState2[1];
+
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      focusedDay = _React$useState4[0],
+      setFocusedDay = _React$useState4[1];
+
+  var setPrevMonth = React.useCallback(function () {
+    return setViewDate(subMonths(viewDate, 1));
+  }, [viewDate]);
+  var setNextMonth = React.useCallback(function () {
+    return setViewDate(addMonths(viewDate, 1));
+  }, [viewDate]);
+  var isDayFocused = React.useCallback(function (day) {
+    return Boolean(focusedDay && isSameDay(day, focusedDay));
+  }, [focusedDay]);
+  var isDayDisabled = React.useCallback(function (day) {
+    var now = new Date();
+    var disabled = false;
+
+    if (disablePast) {
+      disabled = isBefore(endOfDay(day), now);
+    }
+
+    if (disableFuture) {
+      disabled = isAfter(startOfDay(day), now);
+    }
+
+    if (shouldDisableDate) {
+      disabled = shouldDisableDate(day);
+    }
+
+    return disabled;
+  }, [disableFuture, disablePast, shouldDisableDate]);
+  var resetSelectedDay = React.useCallback(function () {
+    setFocusedDay(undefined);
+  }, [setFocusedDay]);
+  return {
+    viewDate: viewDate,
+    setViewDate: setViewDate,
+    setPrevMonth: setPrevMonth,
+    setNextMonth: setNextMonth,
+    focusedDay: focusedDay,
+    setFocusedDay: setFocusedDay,
+    isDayFocused: isDayFocused,
+    isDayDisabled: isDayDisabled,
+    resetSelectedDay: resetSelectedDay
+  };
+}
+//# sourceMappingURL=useCalendar.js.map

package/dist/hooks/useCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useCalendar.ts"],"names":["React","subMonths","addMonths","isSameDay","isBefore","endOfDay","isAfter","startOfDay","useCalendar","value","disablePast","disableFuture","shouldDisableDate","useState","Array","isArray","Date","viewDate","setViewDate","focusedDay","setFocusedDay","setPrevMonth","useCallback","setNextMonth","isDayFocused","day","Boolean","isDayDisabled","now","disabled","resetSelectedDay","undefined"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,SADF,EAEEC,SAFF,EAGEC,SAHF,EAIEC,QAJF,EAKEC,QALF,EAMEC,OANF,EAOEC,UAPF,QAQO,UARP;AAiBA,OAAO,SAASC,WAAT,OAKqB;AAAA;;AAAA,MAJ1BC,KAI0B,QAJ1BA,KAI0B;AAAA,MAH1BC,WAG0B,QAH1BA,WAG0B;AAAA,MAF1BC,aAE0B,QAF1BA,aAE0B;AAAA,MAD1BC,iBAC0B,QAD1BA,iBAC0B;;AAC1B,wBAAgCZ,KAAK,CAACa,QAAN,UAC7BC,KAAK,CAACC,OAAN,CAAcN,KAAd,IAAuBA,KAAK,CAAC,CAAD,CAA5B,GAAkCA,KADL,yCACe,IAAIO,IAAJ,EADf,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAGA,yBAAoClB,KAAK,CAACa,QAAN,EAApC;AAAA;AAAA,MAAOM,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,YAAY,GAAGrB,KAAK,CAACsB,WAAN,CACnB;AAAA,WAAMJ,WAAW,CAACjB,SAAS,CAACgB,QAAD,EAAW,CAAX,CAAV,CAAjB;AAAA,GADmB,EAEnB,CAACA,QAAD,CAFmB,CAArB;AAIA,MAAMM,YAAY,GAAGvB,KAAK,CAACsB,WAAN,CACnB;AAAA,WAAMJ,WAAW,CAAChB,SAAS,CAACe,QAAD,EAAW,CAAX,CAAV,CAAjB;AAAA,GADmB,EAEnB,CAACA,QAAD,CAFmB,CAArB;AAKA,MAAMO,YAAY,GAAGxB,KAAK,CAACsB,WAAN,CACnB,UAACG,GAAD;AAAA,WAAeC,OAAO,CAACP,UAAU,IAAIhB,SAAS,CAACsB,GAAD,EAAMN,UAAN,CAAxB,CAAtB;AAAA,GADmB,EAEnB,CAACA,UAAD,CAFmB,CAArB;AAKA,MAAMQ,aAAa,GAAG3B,KAAK,CAACsB,WAAN,CACpB,UAACG,GAAD,EAAe;AACb,QAAMG,GAAG,GAAG,IAAIZ,IAAJ,EAAZ;AACA,QAAIa,QAAQ,GAAG,KAAf;;AACA,QAAInB,WAAJ,EAAiB;AACfmB,MAAAA,QAAQ,GAAGzB,QAAQ,CAACC,QAAQ,CAACoB,GAAD,CAAT,EAAgBG,GAAhB,CAAnB;AACD;;AACD,QAAIjB,aAAJ,EAAmB;AACjBkB,MAAAA,QAAQ,GAAGvB,OAAO,CAACC,UAAU,CAACkB,GAAD,CAAX,EAAkBG,GAAlB,CAAlB;AACD;;AACD,QAAIhB,iBAAJ,EAAuB;AACrBiB,MAAAA,QAAQ,GAAGjB,iBAAiB,CAACa,GAAD,CAA5B;AACD;;AAED,WAAOI,QAAP;AACD,GAfmB,EAgBpB,CAAClB,aAAD,EAAgBD,WAAhB,EAA6BE,iBAA7B,CAhBoB,CAAtB;AAmBA,MAAMkB,gBAAgB,GAAG9B,KAAK,CAACsB,WAAN,CAAkB,YAAM;AAC/CF,IAAAA,aAAa,CAACW,SAAD,CAAb;AACD,GAFwB,EAEtB,CAACX,aAAD,CAFsB,CAAzB;AAIA,SAAO;AACLH,IAAAA,QAAQ,EAARA,QADK;AAELC,IAAAA,WAAW,EAAXA,WAFK;AAGLG,IAAAA,YAAY,EAAZA,YAHK;AAILE,IAAAA,YAAY,EAAZA,YAJK;AAKLJ,IAAAA,UAAU,EAAVA,UALK;AAMLC,IAAAA,aAAa,EAAbA,aANK;AAOLI,IAAAA,YAAY,EAAZA,YAPK;AAQLG,IAAAA,aAAa,EAAbA,aARK;AASLG,IAAAA,gBAAgB,EAAhBA;AATK,GAAP;AAWD","sourcesContent":["import * as React from \"react\";\nimport {\n  subMonths,\n  addMonths,\n  isSameDay,\n  isBefore,\n  endOfDay,\n  isAfter,\n  startOfDay,\n} from \"date-fns\";\n\nexport interface UseCalendarDependencies {\n  value?: Array<Date | null> | Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  shouldDisableDate?(value: Date): boolean;\n}\n\nexport function useCalendar({\n  value,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n}: UseCalendarDependencies) {\n  const [viewDate, setViewDate] = React.useState(\n    (Array.isArray(value) ? value[0] : value) ?? new Date()\n  );\n  const [focusedDay, setFocusedDay] = React.useState<Date>();\n\n  const setPrevMonth = React.useCallback(\n    () => setViewDate(subMonths(viewDate, 1)),\n    [viewDate]\n  );\n  const setNextMonth = React.useCallback(\n    () => setViewDate(addMonths(viewDate, 1)),\n    [viewDate]\n  );\n\n  const isDayFocused = React.useCallback(\n    (day: Date) => Boolean(focusedDay && isSameDay(day, focusedDay)),\n    [focusedDay]\n  );\n\n  const isDayDisabled = React.useCallback(\n    (day: Date) => {\n      const now = new Date();\n      let disabled = false;\n      if (disablePast) {\n        disabled = isBefore(endOfDay(day), now);\n      }\n      if (disableFuture) {\n        disabled = isAfter(startOfDay(day), now);\n      }\n      if (shouldDisableDate) {\n        disabled = shouldDisableDate(day);\n      }\n\n      return disabled;\n    },\n    [disableFuture, disablePast, shouldDisableDate]\n  );\n\n  const resetSelectedDay = React.useCallback(() => {\n    setFocusedDay(undefined);\n  }, [setFocusedDay]);\n\n  return {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  };\n}\n"],"file":"useCalendar.js"}

package/dist/hooks/useDateInput.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface UseDateInputDependencies<T, D> {
+    maxElement: number;
+    refs: Array<React.RefObject<T>>;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    value?: D;
+    elementsConfig(index: number): {
+        length: number;
+        min: number;
+        max: number;
+    };
+    onInternalValueChange(value: string[]): void;
+    getInternalValue(value?: D | undefined): string[];
+    onChange?(value?: D | undefined): void;
+}
+export declare function useDateInput<T extends HTMLElement, D>({ maxElement, refs, autoFocus, disabled, elementsConfig, onChange, onInternalValueChange, getInternalValue, value, }: UseDateInputDependencies<T, D>): {
+    rootRef: React.RefObject<HTMLDivElement>;
+    calendarRef: React.RefObject<HTMLDivElement>;
+    open: boolean;
+    openCalendar: () => void;
+    closeCalendar: () => void;
+    internalValue: string[];
+    focusedElement: number | null;
+    setFocusedElement: React.Dispatch<React.SetStateAction<number | null>>;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
+    clear: () => void;
+    handleFieldEnter: () => void;
+    removeFocusFromField: () => void;
+};

package/dist/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/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":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,eAAT;AACA,SAASC,sBAAT;AACA,SAASC,MAAT;AAkBA,OAAO,SAASC,YAAT,OAU4B;AAAA,MATjCC,UASiC,QATjCA,UASiC;AAAA,MARjCC,IAQiC,QARjCA,IAQiC;AAAA,MAPjCC,SAOiC,QAPjCA,SAOiC;AAAA,MANjCC,QAMiC,QANjCA,QAMiC;AAAA,MALjCC,cAKiC,QALjCA,cAKiC;AAAA,MAJjCC,QAIiC,QAJjCA,QAIiC;AAAA,MAHjCC,qBAGiC,QAHjCA,qBAGiC;AAAA,MAFjCC,gBAEiC,QAFjCA,gBAEiC;AAAA,MADjCC,KACiC,QADjCA,KACiC;;AACjC,gBAAqBV,MAAM,EAA3B;AAAA,MAAQW,QAAR,WAAQA,QAAR;;AACA,yBAIIb,eAAe,CAAC,KAAD,CAJnB;AAAA,MACSc,IADT,oBACEF,KADF;AAAA,MAEWG,YAFX,oBAEEC,OAFF;AAAA,MAGYC,aAHZ,oBAGEC,QAHF;;AAKA,MAAMC,OAAO,GAAGpB,KAAK,CAACqB,MAAN,CAA6B,IAA7B,CAAhB;AACA,MAAMC,WAAW,GAAGtB,KAAK,CAACqB,MAAN,CAA6B,IAA7B,CAApB;;AACA,wBAA0CrB,KAAK,CAACuB,QAAN,CAAyB,EAAzB,CAA1C;AAAA;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,yBAA4CzB,KAAK,CAACuB,QAAN,CAC1C,IAD0C,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AAGA,iBAAmBxB,MAAM,EAAzB;AAAA,MAAQyB,MAAR,YAAQA,MAAR;;AAEA,MAAMC,oBAAoB,GAAG7B,KAAK,CAAC8B,WAAN,CAAkB,YAAM;AACnD,QAAIf,IAAJ,EAAU;AAAA;;AACRY,MAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACAT,MAAAA,aAAa;AACb,uBAAAU,MAAM,CAAEG,YAAR,kEAAwBC,eAAxB;AACAP,MAAAA,gBAAgB,CAACb,gBAAgB,CAACC,KAAD,CAAjB,CAAhB;AACD;AACF,GAP4B,EAO1B,CAACK,aAAD,EAAgBN,gBAAhB,EAAkCG,IAAlC,EAAwCF,KAAxC,EAA+Ce,MAA/C,CAP0B,CAA7B;AASA,MAAMK,kBAAkB,GAAGjC,KAAK,CAAC8B,WAAN,CACzB,UAACI,CAAD,EAAmB;AAAA;;AACjB,QACE,sBAACd,OAAO,CAACe,OAAT,6CAAC,iBAAiBC,QAAjB,CAA0BF,CAAC,CAACG,MAA5B,CAAD,KACA,0BAACf,WAAW,CAACa,OAAb,iDAAC,qBAAqBC,QAArB,CAA8BF,CAAC,CAACG,MAAhC,CAAD,CAFF,EAGE;AACAR,MAAAA,oBAAoB;AACrB;AACF,GARwB,EASzB,CAACA,oBAAD,CATyB,CAA3B;AAYA,MAAMS,WAAW,GAAGtC,KAAK,CAAC8B,WAAN,CAAkB,YAAM;AAC1CH,IAAAA,iBAAiB,CAAC,CAAD,CAAjB;AACD,GAFmB,EAEjB,EAFiB,CAApB;AAIAzB,EAAAA,sBAAsB,CAACY,QAAD,EAAW,OAAX,EAAoBmB,kBAApB,EAAwC;AAC5DM,IAAAA,OAAO,EAAE;AADmD,GAAxC,CAAtB;AAIAvC,EAAAA,KAAK,CAACwC,SAAN,CAAgB,YAAM;AACpBf,IAAAA,gBAAgB,CAACb,gBAAgB,CAACC,KAAD,CAAjB,CAAhB;AACD,GAFD,EAEG,CAACD,gBAAD,EAAmBC,KAAnB,CAFH;AAIAb,EAAAA,KAAK,CAACwC,SAAN,CAAgB,YAAM;AACpB,QAAIjC,SAAJ,EAAe;AACb+B,MAAAA,WAAW;AACZ;AACF,GAJD,EAIG,CAAC/B,SAAD,EAAY+B,WAAZ,CAJH;AAMAtC,EAAAA,KAAK,CAACwC,SAAN,CAAgB,YAAM;AACpB,QAAIhC,QAAQ,IAAIkB,cAAc,KAAK,IAAnC,EAAyC;AACvC;AACD;;AAED,QAAMe,KAAK,GAAGb,MAAM,CAAEd,QAAR,CAAiB4B,WAAjB,EAAd;AAEA,QAAIC,OAAO,GAAGrC,IAAI,CAACoB,cAAD,CAAJ,CAAqBS,OAAnC;;AAEA,QAAIQ,OAAJ,EAAa;AACXA,MAAAA,OAAO,CAACC,KAAR;AACA5B,MAAAA,YAAY;AACZyB,MAAAA,KAAK,CAACI,kBAAN,CAAyBF,OAAzB;AAEA,UAAMG,SAAS,GAAGlB,MAAM,CAAEG,YAAR,EAAlB;AACAe,MAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEd,eAAX;AACAc,MAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEC,QAAX,CAAoBN,KAApB;AACD;AACF,GAlBD,EAkBG,CAACjC,QAAD,EAAWkB,cAAX,EAA2BV,YAA3B,EAAyCV,IAAzC,EAA+CsB,MAA/C,CAlBH;AAoBA,MAAMoB,KAAK,GAAGhD,KAAK,CAAC8B,WAAN,CAAkB,YAAM;AACpCpB,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGuC,SAAH,CAAR;AACAX,IAAAA,WAAW;AACZ,GAHa,EAGX,CAAC5B,QAAD,EAAW4B,WAAX,CAHW,CAAd;AAKA,MAAMY,gBAAgB,GAAGlD,KAAK,CAAC8B,WAAN,CAAkB,YAAM;AAC/C,QAAI,CAACf,IAAL,EAAW;AACTuB,MAAAA,WAAW;AACZ;AACF,GAJwB,EAItB,CAACvB,IAAD,EAAOuB,WAAP,CAJsB,CAAzB;AAMA,MAAMa,aAAa,GAAGnD,KAAK,CAAC8B,WAAN,CACpB,UAACI,CAAD,EAA6C;AAC3C,QAAIR,cAAc,KAAK,IAAvB,EAA6B;AAC3B;AACD;;AAED,QAAM0B,MAAM,sBAAO5B,aAAP,CAAZ;;AACA,QAAM6B,MAAM,GAAG5C,cAAc,CAACiB,cAAD,CAA7B;;AAEA,QAAI,QAAQ4B,IAAR,CAAapB,CAAC,CAACqB,GAAf,CAAJ,EAAyB;AACvB,UAAIH,MAAM,CAAC1B,cAAD,CAAN,CAAuB8B,MAAvB,IAAiCH,MAAM,CAACG,MAA5C,EAAoD;AAClDJ,QAAAA,MAAM,CAAC1B,cAAD,CAAN,GAAyBQ,CAAC,CAACqB,GAA3B;AACD,OAFD,MAEO;AACLH,QAAAA,MAAM,CAAC1B,cAAD,CAAN,IAA0BQ,CAAC,CAACqB,GAA5B;;AACA,YACEH,MAAM,CAAC1B,cAAD,CAAN,CAAuB8B,MAAvB,IAAiCH,MAAM,CAACG,MAAxC,IACA9B,cAAc,GAAGrB,UAFnB,EAGE;AACAsB,UAAAA,iBAAiB,CAACD,cAAc,GAAG,CAAlB,CAAjB;AACD;AACF;AACF,KAZD,MAYO,IAAIQ,CAAC,CAACqB,GAAF,KAAU,WAAd,EAA2B;AAChC,UAAI,CAACH,MAAM,CAAC1B,cAAD,CAAX,EAA6B;AAC3BC,QAAAA,iBAAiB,CACfD,cAAc,IAAI,CAAlB,GAAsBrB,UAAtB,GAAmCqB,cAAc,GAAG,CADrC,CAAjB;AAGD,OAJD,MAIO;AACL0B,QAAAA,MAAM,CAAC1B,cAAD,CAAN,GAAyB0B,MAAM,CAAC1B,cAAD,CAAN,CAAuB+B,KAAvB,CAA6B,CAA7B,EAAgC,CAAC,CAAjC,CAAzB;AACD;AACF,KARM,MAQA,IAAIvB,CAAC,CAACqB,GAAF,KAAU,WAAV,IAAyBrB,CAAC,CAACqB,GAAF,KAAU,MAAvC,EAA+C;AACpD,UAAIG,YAAY,GAAGC,MAAM,CAACP,MAAM,CAAC1B,cAAD,CAAP,CAAzB;AACA0B,MAAAA,MAAM,CAAC1B,cAAD,CAAN,GAAyBkC,MAAM,CAC7BF,YAAY,IAAIL,MAAM,CAACQ,GAAvB,GAA6BR,MAAM,CAACS,GAApC,GAA0CJ,YAAY,GAAG,CAD5B,CAAN,CAEvBK,QAFuB,CAEdV,MAAM,CAACG,MAFO,EAEC,GAFD,CAAzB;AAGD,KALM,MAKA,IAAItB,CAAC,CAACqB,GAAF,KAAU,SAAV,IAAuBrB,CAAC,CAACqB,GAAF,KAAU,IAArC,EAA2C;AAChD,UAAIG,aAAY,GAAGC,MAAM,CAACP,MAAM,CAAC1B,cAAD,CAAP,CAAzB;;AACA0B,MAAAA,MAAM,CAAC1B,cAAD,CAAN,GAAyBkC,MAAM,CAC7BF,aAAY,IAAIL,MAAM,CAACS,GAAvB,GAA6BT,MAAM,CAACQ,GAApC,GAA0CH,aAAY,GAAG,CAD5B,CAAN,CAEvBK,QAFuB,CAEdV,MAAM,CAACG,MAFO,EAEC,GAFD,CAAzB;AAGD,KALM,MAKA,IACLtB,CAAC,CAACqB,GAAF,KAAU,OAAV,IACCrB,CAAC,CAACqB,GAAF,KAAU,KAAV,IAAmB7B,cAAc,KAAKrB,UADvC,IAEC6B,CAAC,CAACqB,GAAF,KAAU,KAAV,IAAmBrB,CAAC,CAAC8B,QAArB,IAAiCtC,cAAc,KAAK,CAHhD,EAIL;AACAG,MAAAA,oBAAoB;AACpB;AACD,KAPM,MAOA,IACLK,CAAC,CAACqB,GAAF,KAAU,WAAV,IACArB,CAAC,CAACqB,GAAF,KAAU,MADV,IAECrB,CAAC,CAACqB,GAAF,KAAU,KAAV,IAAmBrB,CAAC,CAAC8B,QAHjB,EAIL;AACArC,MAAAA,iBAAiB,CACfD,cAAc,IAAI,CAAlB,GAAsBrB,UAAtB,GAAmCqB,cAAc,GAAG,CADrC,CAAjB;AAGD,KARM,MAQA,IACLQ,CAAC,CAACqB,GAAF,KAAU,YAAV,IACArB,CAAC,CAACqB,GAAF,KAAU,OADV,IAEArB,CAAC,CAACqB,GAAF,KAAU,KAHL,EAIL;AACA5B,MAAAA,iBAAiB,CACfD,cAAc,IAAIrB,UAAlB,GAA+B,CAA/B,GAAmCqB,cAAc,GAAG,CADrC,CAAjB;AAGD,KARM,MAQA,IAAIQ,CAAC,CAACqB,GAAF,KAAU,QAAV,IAAsBrB,CAAC,CAACqB,GAAF,KAAU,KAApC,EAA2C;AAChDH,MAAAA,MAAM,CAAC1B,cAAD,CAAN,GAAyB,EAAzB;AACD,KAFM,MAEA;AACL;AACD;;AAEDQ,IAAAA,CAAC,CAAC+B,cAAF;AACAxC,IAAAA,gBAAgB,CAAC2B,MAAD,CAAhB;AACAzC,IAAAA,qBAAqB,CAACyC,MAAD,CAArB;AACD,GAvEmB,EAwEpB,CACE3C,cADF,EAEEiB,cAFF,EAGEF,aAHF,EAIEnB,UAJF,EAKEM,qBALF,EAMEkB,oBANF,CAxEoB,CAAtB;AAkFA,SAAO;AACLT,IAAAA,OAAO,EAAPA,OADK;AAELE,IAAAA,WAAW,EAAXA,WAFK;AAGLP,IAAAA,IAAI,EAAJA,IAHK;AAILC,IAAAA,YAAY,EAAZA,YAJK;AAKLE,IAAAA,aAAa,EAAbA,aALK;AAMLM,IAAAA,aAAa,EAAbA,aANK;AAOLE,IAAAA,cAAc,EAAdA,cAPK;AAQLC,IAAAA,iBAAiB,EAAjBA,iBARK;AASLwB,IAAAA,aAAa,EAAbA,aATK;AAULH,IAAAA,KAAK,EAALA,KAVK;AAWLE,IAAAA,gBAAgB,EAAhBA,gBAXK;AAYLrB,IAAAA,oBAAoB,EAApBA;AAZK,GAAP;AAcD","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/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/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/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"}