armtek-uikit-react 1.0.269 → 1.0.271

package/lib/esm/ui/Form/Period/Period.js

@@ -9,12 +9,15 @@ import { AdornmentContainer } from "../../Adornment/Adornment.js";
 import { Popper } from "../../Popper/Popper.js";
 import "../../Popper/PopperBase.js";
 const DELIMITER = " - ";
+const COMPLETE_DATE_REGEX = /^\d{2}\.\d{2}\.\d{4}$/;
+const COMPLETE_PERIOD_REGEX = new RegExp(`\\d{2}\\.\\d{2}\\.\\d{4}${DELIMITER}\\d{2}\\.\\d{2}\\.\\d{4}`);
 const format = "dd.MM.yyyy";
 function getPeriodDisplay(date1, date2) {
   if (date1 && date2) return DateService(date1).format(format) + DELIMITER + DateService(date2).format(format);
   return "";
 }
 function validateDate(date, minDate, maxDate) {
+  if (!COMPLETE_DATE_REGEX.test(date)) return null;
   const startParts = date.split(".");
   const startTimeStamp = Date.parse(`${startParts[2]}-${startParts[1]}-${startParts[0]}`);
   if (isNaN(startTimeStamp) === false) {
@@ -25,6 +28,55 @@ function validateDate(date, minDate, maxDate) {
   }
   return null;
 }
+function parseSerializedDateTuple(value) {
+  const boundaryIndex = value.indexOf("),");
+  if (boundaryIndex < 0) return null;
+  const leftPart = value.slice(0, boundaryIndex + 1).trim();
+  const rightPart = value.slice(boundaryIndex + 2).trim();
+  const leftDate = new Date(leftPart);
+  const rightDate = new Date(rightPart);
+  if (Number.isNaN(leftDate.getTime()) || Number.isNaN(rightDate.getTime()) || rightDate.getTime() < leftDate.getTime()) return null;
+  return [leftDate, rightDate];
+}
+function isBackspaceAtPeriodBoundary(prevValue, nextValue) {
+  return (prevValue.endsWith(".") || prevValue.endsWith(" ") || prevValue.endsWith("-")) && prevValue.length > nextValue.length;
+}
+function normalizePeriodInput(rawValue) {
+  return rawValue.replace(/[^\d -.]/g, "").replace(/^(\d{2})$/, "$1.").replace(/^(\d{2})(\d)$/, "$1.$2").replace(/^(\d{2})\.(\d{2})$/, "$1.$2.").replace(/^(\d{2})\.(\d{2})(\d)$/, "$1.$2.$3").replace(/^(\d{2})\.(\d{2})\.(\d{4})$/, "$1.$2.$3" + DELIMITER).replace(new RegExp(`^(\\d{2})\\.(\\d{2})\\.(\\d{4})${DELIMITER}(\\d{2})$`), `$1.$2.$3${DELIMITER}$4.`).replace(new RegExp(`^(\\d{2})\\.(\\d{2})\\.(\\d{4})${DELIMITER}(\\d{2})(\\d)$`), `$1.$2.$3${DELIMITER}$4.$5`).replace(new RegExp(`^(\\d{2})\\.(\\d{2})\\.(\\d{4})${DELIMITER}(\\d{2})\\.(\\d{2})$`), "$1.$2.$3 - $4.$5.").replace(new RegExp(`^(\\d{2})\\.(\\d{2})\\.(\\d{4})${DELIMITER}(\\d{2})\\.(\\d{2})(\\d)$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2})\\.(\\d{2})\\.(\\d{4})${DELIMITER}(\\d{2})\\.(\\d{2})\\.(\\d{4})$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2})\\.(\\d{2})\\.(\\d{4})${DELIMITER}(\\d{2})\\.(\\d{2})\\.(\\d{4})(\\d)$`), "$1.$2.$3 - $4.$5.$6");
+}
+function parsePeriodInputForChange(value, minDate, maxDate) {
+  const valueParts = value.split(DELIMITER);
+  let startDateValid = null;
+  let endDateValid = null;
+  if (COMPLETE_DATE_REGEX.test(valueParts[0])) {
+    startDateValid = validateDate(valueParts[0], minDate, maxDate);
+    if (!startDateValid) return {
+      type: "invalid-start"
+    };
+  }
+  if (COMPLETE_PERIOD_REGEX.test(value) && valueParts.length === 2) {
+    endDateValid = validateDate(valueParts[1], minDate, maxDate);
+    if (!endDateValid) return {
+      type: "invalid-end"
+    };
+  }
+  if (startDateValid && endDateValid && startDateValid.getTime() <= endDateValid.getTime()) return {
+    type: "complete",
+    value: [startDateValid, endDateValid]
+  };
+  return {
+    type: "partial"
+  };
+}
+function parseStrictPeriodValue(value, minDate, maxDate) {
+  const valueParts = value.split(DELIMITER);
+  if (valueParts.length !== 2) return null;
+  const startDateValid = validateDate(valueParts[0], minDate, maxDate);
+  const endDateValid = validateDate(valueParts[1], minDate, maxDate);
+  if (!startDateValid || !endDateValid) return null;
+  if (endDateValid.getTime() < startDateValid.getTime()) return null;
+  return [startDateValid, endDateValid];
+}
 const Period = forwardRef((props, ref) => {
   const {
     onChange,
@@ -45,11 +97,56 @@ const Period = forwardRef((props, ref) => {
   const displayText = defaultValue ? getPeriodDisplay(defaultValue[0], defaultValue[1]) : "";
   const [textValue, setTextValue] = useState(displayText);
   const btnRef = useRef();
+  const inputRef = useRef(null);
+  const didSyncFromRefValueRef = useRef(false);
+  const datesEqual = (left, right) => {
+    var _a, _b, _c, _d;
+    return (((_a = left[0]) == null ? void 0 : _a.getTime()) || 0) === (((_b = right[0]) == null ? void 0 : _b.getTime()) || 0) && (((_c = left[1]) == null ? void 0 : _c.getTime()) || 0) === (((_d = right[1]) == null ? void 0 : _d.getTime()) || 0);
+  };
+  const setInputRef = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+    if (node && !Array.isArray(props.value) && !didSyncFromRefValueRef.current) {
+      syncFromInputValue(node.value);
+      didSyncFromRefValueRef.current = true;
+    }
+  };
   const [startValue, endValue] = value || [];
   useEffect(() => {
     if (startValue && endValue) setTextValue(getPeriodDisplay(startValue, endValue));
     else if (startValue === null && endValue === null) setTextValue("");
   }, [startValue, endValue]);
+  const syncFromInputValue = (nextInputValue) => {
+    if (Array.isArray(props.value)) return;
+    if (!nextInputValue) {
+      setTextValue((prev) => prev === "" ? prev : "");
+      setCurrentValue((prev) => datesEqual(prev, [null, null]) ? prev : [null, null]);
+      return;
+    }
+    const valueParts = nextInputValue.split(DELIMITER);
+    if (valueParts.length !== 2) {
+      const serializedDates = parseSerializedDateTuple(nextInputValue);
+      if (!serializedDates) return;
+      const normalizedText2 = getPeriodDisplay(serializedDates[0], serializedDates[1]);
+      setCurrentValue((prev) => datesEqual(prev, serializedDates) ? prev : serializedDates);
+      setTextValue((prev) => prev === normalizedText2 ? prev : normalizedText2);
+      return;
+    }
+    const startDate = validateDate(valueParts[0], minDate, maxDate);
+    const endDate = validateDate(valueParts[1], minDate, maxDate);
+    if (!startDate || !endDate || endDate.getTime() < startDate.getTime()) {
+      setTextValue((prev) => prev === nextInputValue ? prev : nextInputValue);
+      setCurrentValue((prev) => datesEqual(prev, [null, null]) ? prev : [null, null]);
+      return;
+    }
+    const normalizedText = getPeriodDisplay(startDate, endDate);
+    setCurrentValue((prev) => {
+      const nextPeriod = [startDate, endDate];
+      return datesEqual(prev, nextPeriod) ? prev : nextPeriod;
+    });
+    setTextValue((prev) => prev === normalizedText ? prev : normalizedText);
+  };
   const handleClick = (e) => {
     e.stopPropagation();
     setActive((prev) => !prev);
@@ -79,43 +176,26 @@ const Period = forwardRef((props, ref) => {
   };
   const handleChange = (e) => {
     if (disabled) return;
-    let value2 = e.target.value;
-    const bs = (textValue.endsWith(".") || textValue.endsWith(" ") || textValue.endsWith("-")) && textValue.length > value2.length;
-    if (!bs) {
-      value2 = value2.replace(/[^\d -.]/g, "").replace(/^(\d{2})$/, "$1.").replace(/^(\d{2})(\d)$/, "$1.$2").replace(/^(\d{2})\.(\d{2})$/, "$1.$2.").replace(/^(\d{2})\.(\d{2})(\d)$/, "$1.$2.$3").replace(/^(\d{2})\.(\d{2})\.(\d{4})$/, "$1.$2.$3" + DELIMITER).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2})$`), `$1.$2.$3${DELIMITER}$4.`).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2})(d)$`), `$1.$2.$3${DELIMITER}$4.$5`).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2})$`), "$1.$2.$3 - $4.$5.").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2})(d)$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2}).(\\d{4})$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2}).(\\d{4})(\\d)$`), "$1.$2.$3 - $4.$5.$6");
-    }
-    let startDateValid = null;
-    let endDateValid = null;
-    const valueParts = value2.split(DELIMITER);
-    if (valueParts[0].match(/^\d{2}\.\d{2}\.\d{4}$/)) {
-      startDateValid = validateDate(valueParts[0], minDate, maxDate);
-      if (!startDateValid) {
-        setTextValue("");
-        handleSelect([null, null]);
-        return;
-      }
-    }
+    const rawValue = e.target.value;
+    const value2 = isBackspaceAtPeriodBoundary(textValue, rawValue) ? rawValue : normalizePeriodInput(rawValue);
     setTextValue(value2);
     setCurrentValue([null, null]);
-    if (value2.match(new RegExp(`\\d{2}\\.\\d{2}\\.\\d{4}${DELIMITER}\\d{2}\\.\\d{2}\\.\\d{4}`))) {
-      if (valueParts.length === 2) {
-        endDateValid = validateDate(valueParts[1], minDate, maxDate);
-        if (!endDateValid) {
-          setTextValue("");
-        }
-      }
+    const parseResult = parsePeriodInputForChange(value2, minDate, maxDate);
+    if (parseResult.type === "invalid-start") {
+      setTextValue("");
+      handleSelect([null, null]);
+      return;
     }
-    if (startDateValid && endDateValid && startDateValid.getTime() <= endDateValid.getTime()) {
-      handleSelect([startDateValid, endDateValid]);
+    if (parseResult.type === "invalid-end") {
+      setTextValue("");
+      return;
     }
+    if (parseResult.type === "complete") handleSelect(parseResult.value);
   };
   const handleBlur = (e) => {
     setActive(false);
-    const value2 = e.target.value;
-    const valueParts = value2.split(DELIMITER);
-    const startDateValid = valueParts[0] ? validateDate(valueParts[0], minDate, maxDate) : null;
-    const endDateValid = valueParts[1] ? validateDate(valueParts[1], minDate, maxDate) : null;
-    if (!startDateValid || !endDateValid || startDateValid && endDateValid && endDateValid.getTime() < startDateValid.getTime()) {
+    const parsedPeriod = parseStrictPeriodValue(e.target.value, minDate, maxDate);
+    if (!parsedPeriod) {
       setTextValue("");
       handleSelect([null, null]);
     }
@@ -129,7 +209,7 @@ const Period = forwardRef((props, ref) => {
     /* @__PURE__ */ jsx(ButtonIcon, { "data-calendar-btn": true, size: "medium", "data-testid": "period-btn", variant: "transparent", color: "neutral", disabled, onClick: handleClick, children: /* @__PURE__ */ jsx("span", { className: "material_icon", ref: btnRef, children: "calendar_today" }) })
   ] });
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "arm-period", "data-testid": "period", children: [
-    /* @__PURE__ */ jsx(TextField, { ref, placeholder: "дд.мм.гггг - дд.мм.гггг", ...restProps, disabled, value: textValue, onBlur: handleBlur, onChange: handleChange, onFocus: () => setActive(false), autoComplete: "off", endAdornment }),
+    /* @__PURE__ */ jsx(TextField, { ref: setInputRef, placeholder: "дд.мм.гггг - дд.мм.гггг", ...restProps, disabled, value: textValue, onBlur: handleBlur, onChange: handleChange, onFocus: () => setActive(false), autoComplete: "off", endAdornment }),
     active && /* @__PURE__ */ jsx(Popper, { anchorEl: btnRef.current, open: active, placement: "bottom-end", children: /* @__PURE__ */ jsx(Card, { className: "arm-period__picker", "data-testid": "period_card", children: /* @__PURE__ */ jsx(DatePicker, { onClickOutside: handleClickOutside, onChange: handleSelect, selectsRange: true, selected: realValue[0], startDate: realValue[0], endDate: realValue[1], minDate: minDate || void 0, maxDate: maxDate || void 0, showMonthDropdown, showYearDropdown, ...datePickerProps }) }) })
   ] }) });
 });

package/lib/esm/ui/Form/Select/Select.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { TextField } from "../TextField/TextField.js";
-import { forwardRef, useState, useRef, useImperativeHandle, useMemo } from "react";
+import { forwardRef, useState, useRef, useImperativeHandle, useLayoutEffect, useMemo } from "react";
 import clsx from "clsx";
 import useClickOutside from "../../../lib/hooks/useClickOutside.js";
 import ButtonIcon from "../../ButtonIcon/ButtonIcon.js";
@@ -37,6 +37,8 @@ function Select(props, ref) {
     beforeList,
     query,
     optionClassName,
+    onBlur: inputOnBlur,
+    onFocus: inputOnFocus,
     ...inputProps
   } = props;
   let [active, setActive] = useState(!!defaultOpen);
@@ -49,6 +51,40 @@ function Select(props, ref) {
   useImperativeHandle(ref, () => {
     return inputRef.current;
   }, []);
+  useLayoutEffect(() => {
+    var _a2;
+    if (value !== void 0 || multiple || search) return;
+    if (!inputRef.current) return;
+    const inputElement = inputRef.current;
+    const syncSelectedValue = (nextInputValue) => {
+      setSelected((prevSelected) => {
+        if (Array.isArray(prevSelected)) return prevSelected;
+        if (!nextInputValue) return prevSelected === "" ? prevSelected : "";
+        const optionExists = options.some((item) => getOptionValue(item) === nextInputValue);
+        if (!optionExists || prevSelected === nextInputValue) return prevSelected;
+        return nextInputValue;
+      });
+    };
+    syncSelectedValue(inputElement.value);
+    const inputValueDescriptor = Object.getOwnPropertyDescriptor(inputElement, "value");
+    if (!(inputValueDescriptor == null ? void 0 : inputValueDescriptor.get) || !(inputValueDescriptor == null ? void 0 : inputValueDescriptor.set)) return;
+    Object.defineProperty(inputElement, "value", {
+      configurable: true,
+      enumerable: (_a2 = inputValueDescriptor.enumerable) != null ? _a2 : true,
+      get() {
+        var _a3;
+        return (_a3 = inputValueDescriptor.get) == null ? void 0 : _a3.call(this);
+      },
+      set(nextValue) {
+        var _a3;
+        (_a3 = inputValueDescriptor.set) == null ? void 0 : _a3.call(this, nextValue);
+        syncSelectedValue(nextValue);
+      }
+    });
+    return () => {
+      Object.defineProperty(inputElement, "value", inputValueDescriptor);
+    };
+  }, [multiple, options, search, value]);
   const handleOpen = () => {
     if (open !== void 0) return;
     if (!inputProps.disabled) {
@@ -92,12 +128,14 @@ function Select(props, ref) {
   const handleSearch = (e) => {
     setQ(e.target.value);
   };
-  const handleFocus = search ? () => {
+  const handleFocus = search ? (e) => {
     setFocused(true);
-  } : void 0;
-  const handleBlur = !!search ? () => {
+    if (inputOnFocus) inputOnFocus(e);
+  } : inputOnFocus;
+  const handleBlur = !!search ? (e) => {
     setFocused(false);
-  } : void 0;
+    if (inputOnBlur) inputOnBlur(e);
+  } : inputOnBlur;
   const handleSelectAll = (e) => {
     if (props.disabled) return;
     let value2 = options.filter((item) => !item.disabled).map((item) => getOptionValue(item));

package/lib/esm/ui/Form/TimeField/TimeField.d.ts

@@ -5,6 +5,7 @@ declare const TimeField: import("react").ForwardRefExoticComponent<{
     value?: Date | string | null;
     showTime?: boolean;
     showTimeOnly?: boolean;
+    preserveIncompleteTimeInput?: boolean;
     inputProps?: Omit<import("../TextField").TextFieldProps, "onChange" | "value"> & import("../../../types/theme").DataAttributes;
     showMonthYearPicker?: boolean;
     showYearPicker?: boolean;
@@ -21,6 +22,7 @@ declare const TimeField: import("react").ForwardRefExoticComponent<{
     value?: Date | string | null;
     showTime?: boolean;
     showTimeOnly?: boolean;
+    preserveIncompleteTimeInput?: boolean;
     inputProps?: Omit<import("../TextField").TextFieldProps, "onChange" | "value"> & import("../../../types/theme").DataAttributes;
     showMonthYearPicker?: boolean;
     showYearPicker?: boolean;

package/lib/esm/ui/Form/TimeField/TimeField.js

@@ -2,7 +2,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { DateField } from "../DateField/DateField.js";
 import { forwardRef } from "react";
 const TimeField = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DateField, { ...props, showTime: true, ref, showTimeOnly: true }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DateField, { ...props, showTime: true, ref, showTimeOnly: true, preserveIncompleteTimeInput: true }) });
 });
 export {
   TimeField as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "armtek-uikit-react",
-  "version": "1.0.269",
+  "version": "1.0.271",
   "description": "Armtek UIKit for React",
   "main": "lib/cjs/index.cjs",
   "module": "lib/esm/index.js",
@@ -26,7 +26,7 @@
   "scripts": {
     "start": "storybook dev -p 3001 --no-open --config-dir ./config/storybook",
     "build:storybook": "storybook build --config-dir ./config/storybook",
-    "clean:build": "node -e \"const fs=require('fs'); fs.rmSync('lib',{recursive:true,force:true}); fs.rmSync('types',{recursive:true,force:true});\"",
+    "clean:build": "node -e \"const fs=require('fs'); const path=require('path'); const rmOpts={recursive:true,force:true,maxRetries:10,retryDelay:200}; const clean=(dir)=>{ if(!fs.existsSync(dir)) return; for (const entry of fs.readdirSync(dir)) fs.rmSync(path.join(dir, entry), rmOpts); }; clean('lib'); clean('types');\"",
     "build:esm": "vite build --config vite.config.ts --mode esm",
     "build:cjs": "vite build --config vite.config.ts --mode cjs",
     "build": "npm run clean:build && npm run build-types && npm run build:esm && npm run build:cjs && node config/postbuild-vite.mjs",
@@ -74,11 +74,11 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^9.1.7",
     "fs-extra": "^11.1.1",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^26.1.0",
     "prettier": "^3.0.1",
+    "react-hook-form": "^7.73.1",
     "sass": "^1.84.0",
     "storybook": "^10.3.5",
     "ts-node": "^10.9.1",