armtek-uikit-react 1.0.268 → 1.0.270

package/lib/cjs/ui/Chip/Chip.cjs

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const clsx = require("clsx");
-function Chip(props) {
+const Chip = React.forwardRef((props, ref) => {
   let {
     size,
     text,
     icon,
     onClose,
+    closeAriaLabel,
     shape = "circle",
     as,
     variant = "contained",
@@ -18,15 +20,24 @@ function Chip(props) {
     ...restProps
   } = props;
   let Component = as || "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Component, { "data-testid": "chip", ...restProps, className: clsx("arm-chip", className, {
+  let isComponentButton = Component === "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, "data-testid": "chip", ...restProps, ...isComponentButton ? {
+    disabled
+  } : {}, "aria-disabled": disabled ? true : void 0, tabIndex: disabled && !isComponentButton ? -1 : restProps.tabIndex, className: clsx("arm-chip", className, {
     "arm-chip_disabled": !!disabled,
     ["arm-chip_" + size]: !!size
   }, ["arm-chip_" + variant], ["arm-chip_" + color], ["arm-chip_" + shape]), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "arm-chip__inner", children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx("material_icon", "arm-chip__icon", ["arm-chip__icon_" + size]), children: icon }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arm-chip__text", children: text || children }),
-    onClose && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "chip-close", className: clsx("material_icon_solid", {
+    onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "chip-close", "aria-label": closeAriaLabel, disabled: !!disabled, className: clsx("material_icon_solid", {
       "arm-chip__close_disabled": !!disabled
-    }, ["arm-chip__close_" + size], ["arm-chip__close_" + color], "arm-chip__close"), onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mis", children: "cancel" }) })
+    }, ["arm-chip__close_" + size], ["arm-chip__close_" + color], "arm-chip__close"), onClick: (e) => {
+      if (disabled) return;
+      onClose(e);
+    }, onKeyDown: (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") onClose(e);
+    }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mis", "aria-hidden": true, children: "cancel" }) })
   ] }) }) });
-}
+});
 exports.default = Chip;

package/lib/cjs/ui/Chip/Chip.d.ts

@@ -1,10 +1,11 @@
-import { ComponentPropsWithoutRef, ElementType, MouseEvent, HTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, RefAttributes } from 'react';
 import { ColorStatusType, ColorThemeType, ColorType, SizeType, VariantType, ShapeType } from '../../types/theme';
 type OwnProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpanElement>>> = Omit<ComponentPropsWithoutRef<T>, 'color'> & {
     size?: Exclude<SizeType, 'large' | 'extraLarge'>;
     color?: ColorType | ColorThemeType | ColorStatusType;
     text?: string;
-    onClose?: (e: MouseEvent) => void;
+    onClose?: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    closeAriaLabel?: string;
     icon?: string;
     variant?: Exclude<VariantType, 'transparent'>;
     shape?: ShapeType;
@@ -12,5 +13,6 @@ type OwnProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpanElement
     disabled?: boolean;
 };
 export type ChipProps<T extends ElementType = 'span'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
-declare function Chip<T extends ElementType = 'span'>(props: ChipProps<T>): import("react/jsx-runtime").JSX.Element;
+type ChipComponent = <T extends ElementType = 'span'>(props: ChipProps<T> & RefAttributes<HTMLElement>) => ReactElement | null;
+declare const Chip: ChipComponent;
 export default Chip;

package/lib/cjs/ui/Form/DateField/DateField.cjs

@@ -38,6 +38,7 @@ const DateField = React.forwardRef((props, ref) => {
     showTimeOnly,
     disabled,
     value,
+    preserveIncompleteTimeInput,
     ...datepickerProps
   } = props;
   let format = "dd.MM.yyyy";
@@ -46,9 +47,70 @@ const DateField = React.forwardRef((props, ref) => {
   const [date, setDate] = React.useState(null);
   const [open, setOpen] = React.useState(false);
   const [text, setText] = React.useState(dateToText(value, format));
+  const inputRef = React.useRef(null);
+  const setInputRef = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
   React.useEffect(() => {
     if (value) setText(dateToText(value, format));
   }, [value]);
+  const syncFromInputValue = (nextInputValue) => {
+    if (value !== void 0) return;
+    if (!nextInputValue) {
+      setText("");
+      setDate(null);
+      return;
+    }
+    let parsedDate = null;
+    const parsedTimestamp = Date.parse(nextInputValue);
+    if (!Number.isNaN(parsedTimestamp)) parsedDate = new Date(parsedTimestamp);
+    if (showTimeOnly) {
+      if (preserveIncompleteTimeInput && /^\d{1,2}:?$/.test(nextInputValue)) {
+        setText(nextInputValue.endsWith(":") ? nextInputValue : `${nextInputValue}:`);
+        setDate(null);
+        return;
+      }
+      const timeParts = nextInputValue.split(":").map(Number);
+      if (timeParts.length >= 2 && Number.isFinite(timeParts[0]) && Number.isFinite(timeParts[1])) {
+        const today = /* @__PURE__ */ new Date();
+        today.setHours(timeParts[0], timeParts[1], timeParts[2] || 0, 0);
+        parsedDate = new Date(today.getTime());
+      }
+    }
+    if (!parsedDate) {
+      setText(nextInputValue);
+      setDate(null);
+      return;
+    }
+    setDate(parsedDate);
+    setText(dateToText(parsedDate, format));
+  };
+  React.useLayoutEffect(() => {
+    var _a;
+    if (value !== void 0 || !inputRef.current) return;
+    const inputElement = inputRef.current;
+    syncFromInputValue(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: (_a = inputValueDescriptor.enumerable) != null ? _a : true,
+      get() {
+        var _a2;
+        return (_a2 = inputValueDescriptor.get) == null ? void 0 : _a2.call(this);
+      },
+      set(nextValue) {
+        var _a2;
+        (_a2 = inputValueDescriptor.set) == null ? void 0 : _a2.call(this, nextValue);
+        syncFromInputValue(nextValue);
+      }
+    });
+    return () => {
+      Object.defineProperty(inputElement, "value", inputValueDescriptor);
+    };
+  }, [format, preserveIncompleteTimeInput, showTimeOnly, value]);
   const handleChange = (d) => {
     setDate(d);
     if (!showTime || showTime && d && d.getHours() > 0) setOpen(false);
@@ -141,7 +203,7 @@ const DateField = React.forwardRef((props, ref) => {
   if (!(dateValue instanceof Date && !isNaN(dateValue.getDate()))) dateValue = null;
   const calendarBtn = /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { disabled, size: "medium", variant: "transparent", onClick: handleClick, color: "neutral", "data-testid": "datefield-btn", children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref: btnRef, className: "material_icon", children: inputIcon }) });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { ref, label, placeholder, className, error, helperText, ...inputProps, value: text || "", disabled, onChange: handleChangeText, onPaste: handlePaste, endAdornment: calendarBtn }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { ref: setInputRef, label, placeholder, className, error, helperText, ...inputProps, value: text || "", disabled, onChange: handleChangeText, onPaste: handlePaste, endAdornment: calendarBtn }),
     open && /* @__PURE__ */ jsxRuntime.jsx(ui_BackDrop_BackDrop.default, { onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(ui_Popper_PopperBase.PopperBase, { anchorEl: btnRef.current, className: "arm-datefield-popper", open, placement: "bottom-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       backgroundColor: "#fff",
       width: "100%"

package/lib/cjs/ui/Form/DateField/DateField.d.ts

@@ -15,6 +15,7 @@ type OwnProps = {
     value?: Date | string | null;
     showTime?: boolean;
     showTimeOnly?: boolean;
+    preserveIncompleteTimeInput?: boolean;
     inputProps?: Omit<TextFieldProps, 'onChange' | 'value'> & DataAttributes;
     showMonthYearPicker?: boolean;
     showYearPicker?: boolean;

package/lib/cjs/ui/Form/DateField/testUtils.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react_esm = require("../../../node_modules/@testing-library/react/dist/@testing-library/react.esm.cjs");
+const dom_esm = require("../../../node_modules/@testing-library/dom/dist/@testing-library/dom.esm.cjs");
+const backspaceKey = {
+  key: "Backspace",
+  code: 8,
+  inputType: "deleteContentBackward"
+};
+const sharedEventConfig = {
+  key: backspaceKey.key,
+  charCode: backspaceKey.code,
+  keyCode: backspaceKey.code,
+  which: backspaceKey.code
+};
+function dateBackspace() {
+  const input = dom_esm.screen.getByTestId("textfield_input");
+  let actuallyTyped = input.value;
+  const downEvent = react_esm.fireEvent.keyDown(input, sharedEventConfig);
+  if (downEvent) {
+    actuallyTyped = actuallyTyped.slice(0, -1);
+    react_esm.fireEvent.change(input, {
+      target: {
+        value: actuallyTyped
+      },
+      inputType: backspaceKey.inputType,
+      bubbles: true,
+      cancelable: true
+    });
+  }
+  react_esm.fireEvent.keyUp(input, sharedEventConfig);
+}
+exports.dateBackspace = dateBackspace;

package/lib/cjs/ui/Form/DateField/testUtils.d.ts

@@ -0,0 +1 @@
+export declare function dateBackspace(): void;

package/lib/cjs/ui/Form/DatePicker/DatePicker.cjs

@@ -11,6 +11,7 @@ const ui_Stack_Stack = require("../../Stack/Stack.cjs");
 const ui_Form_Select_Select = require("../Select/Select.cjs");
 const clsx = require("clsx");
 require("../../Button/Button.cjs");
+require("../../Chip/Chip.cjs");
 const renderDayContents = (day) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "customDay", children: day });
 };

package/lib/cjs/ui/Form/Password/Password.d.ts

@@ -6,8 +6,12 @@ export declare const Password: import("react").ForwardRefExoticComponent<{
     errorTooltip?: string;
     success?: boolean;
     helperText?: string | import("react").ReactNode;
+    startAdornment?: string | import("react").ReactNode;
     endAdornment?: string | import("react").ReactNode;
     multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
     focused?: boolean;
     editable?: boolean;
     classes?: Partial<{

package/lib/cjs/ui/Form/Period/Period.cjs

@@ -9,15 +9,17 @@ const ui_Form_DatePicker_DatePicker = require("../DatePicker/DatePicker.cjs");
 const lib_services_DateService = require("../../../lib/services/DateService.cjs");
 const ui_Adornment_Adornment = require("../../Adornment/Adornment.cjs");
 const ui_Popper_Popper = require("../../Popper/Popper.cjs");
-require("@popperjs/core");
-require("clsx");
+require("../../Popper/PopperBase.cjs");
 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 lib_services_DateService.DateService(date1).format(format) + DELIMITER + lib_services_DateService.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) {
@@ -28,6 +30,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 = React.forwardRef((props, ref) => {
   const {
     onChange,
@@ -48,11 +99,56 @@ const Period = React.forwardRef((props, ref) => {
   const displayText = defaultValue ? getPeriodDisplay(defaultValue[0], defaultValue[1]) : "";
   const [textValue, setTextValue] = React.useState(displayText);
   const btnRef = React.useRef();
+  const inputRef = React.useRef(null);
+  const didSyncFromRefValueRef = React.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 || [];
   React.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);
@@ -82,43 +178,26 @@ const Period = React.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]);
     }
@@ -132,7 +211,7 @@ const Period = React.forwardRef((props, ref) => {
     /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-calendar-btn": true, size: "medium", "data-testid": "period-btn", variant: "transparent", color: "neutral", disabled, onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material_icon", ref: btnRef, children: "calendar_today" }) })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "arm-period", "data-testid": "period", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { ref, placeholder: "дд.мм.гггг - дд.мм.гггг", ...restProps, disabled, value: textValue, onBlur: handleBlur, onChange: handleChange, onFocus: () => setActive(false), autoComplete: "off", endAdornment }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { ref: setInputRef, placeholder: "дд.мм.гггг - дд.мм.гггг", ...restProps, disabled, value: textValue, onBlur: handleBlur, onChange: handleChange, onFocus: () => setActive(false), autoComplete: "off", endAdornment }),
     active && /* @__PURE__ */ jsxRuntime.jsx(ui_Popper_Popper.Popper, { anchorEl: btnRef.current, open: active, placement: "bottom-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Card_Card.default, { className: "arm-period__picker", "data-testid": "period_card", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_DatePicker_DatePicker.default, { 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/cjs/ui/Form/Period/Period.d.ts

@@ -28,5 +28,5 @@ declare const Period: import("react").ForwardRefExoticComponent<{
     showMonthDropdown?: boolean;
     showYearDropdown?: boolean;
     datePickerProps?: DatePickerProps;
-} & Omit<TextFieldProps, "onChange" | "defaultValue" | "value"> & import("react").RefAttributes<unknown>>;
+} & Omit<TextFieldProps, "defaultValue" | "onChange" | "value"> & import("react").RefAttributes<unknown>>;
 export default Period;

package/lib/cjs/ui/Form/Select/Select.cjs

@@ -39,6 +39,8 @@ function Select(props, ref) {
     beforeList,
     query,
     optionClassName,
+    onBlur: inputOnBlur,
+    onFocus: inputOnFocus,
     ...inputProps
   } = props;
   let [active, setActive] = React.useState(!!defaultOpen);
@@ -51,6 +53,40 @@ function Select(props, ref) {
   React.useImperativeHandle(ref, () => {
     return inputRef.current;
   }, []);
+  React.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) {
@@ -94,12 +130,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/cjs/ui/Form/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import { TextFieldProps } from '../TextField/TextField';
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent, KeyboardEvent, ReactNode } from 'react';
 export type OptionType = {
     text: string;
     value: string;
@@ -42,7 +42,7 @@ export type SelectOptionsType<T extends boolean> = {
     value?: T extends true ? string[] : string;
     inline?: boolean;
     multiple?: T;
-    onClick: (e: MouseEvent, option: OptionType) => void;
+    onClick: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>, option: OptionType) => void;
     listStyle?: 'checkbox' | 'default';
     onSelectAll?: (e: MouseEvent) => void;
     onClear?: (e: MouseEvent) => void;

package/lib/cjs/ui/Form/Select/SelectSummary.d.ts

@@ -1,7 +1,7 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, KeyboardEvent } from 'react';
 import { OptionType } from '../../../ui/Form/Select/Select';
 export type SelectSummaryProps = {
-    onClose: (e: MouseEvent, option: OptionType) => void;
+    onClose: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>, option: OptionType) => void;
     options: OptionType[];
     value: string[];
 } & Omit<SelectSummaryControlsProps, 'countSelected' | 'countTotal'>;
@@ -9,7 +9,7 @@ export declare const SelectSummary: (props: SelectSummaryProps) => import("react
 type SelectSummaryChipsProps = {
     options: OptionType[];
     disabled?: boolean;
-    onDelete: (e: MouseEvent, option: OptionType) => void;
+    onDelete: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>, option: OptionType) => void;
 };
 export declare const SelectSummaryChips: (props: SelectSummaryChipsProps) => import("react/jsx-runtime").JSX.Element;
 type SelectSummaryControlsProps = {

package/lib/cjs/ui/Form/TextArea/TextArea.cjs

@@ -5,25 +5,30 @@ const ui_Form_TextField_TextField = require("../TextField/TextField.cjs");
 const React = require("react");
 const clsx = require("clsx");
 const TextArea = React.forwardRef((props, ref) => {
-  var _a, _b;
   let {
     className,
+    style,
+    minRows = 3,
+    maxRows = 10,
+    rows,
     ...restProps
   } = props;
-  let [minHeight, setMinHeight] = React.useState(0);
   let textareaRef = React.useRef(null);
+  const getRowsCount = (value) => {
+    if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+    return Math.max(1, Math.floor(value));
+  };
+  const normalizedRows = getRowsCount(rows);
+  const normalizedMinRows = getRowsCount(minRows);
+  const initialRows = normalizedRows !== void 0 ? normalizedRows : normalizedMinRows;
   React.useImperativeHandle(ref, () => {
     return textareaRef.current;
   }, []);
-  React.useEffect(() => {
-    if (textareaRef.current && "clientHeight" in textareaRef.current) setMinHeight(textareaRef.current.clientHeight);
-  }, [textareaRef]);
-  let textHeight = (((_a = textareaRef.current) == null ? void 0 : _a.scrollHeight) || 0) < minHeight ? minHeight : (_b = textareaRef.current) == null ? void 0 : _b.scrollHeight;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { ref: textareaRef, ...restProps, className: clsx("arm-textarea", ["arm-textarea_size_" + restProps.size], className), multiline: true, classes: {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { ref: textareaRef, ...restProps, rows: initialRows, minRows: normalizedMinRows, maxRows, className: clsx("arm-textarea", ["arm-textarea_size_" + restProps.size], className), multiline: true, classes: {
     root: "arm-textarea__root",
     ...restProps.classes
   }, style: {
-    height: textHeight + "px"
+    ...style
   } }) });
 });
 exports.default = TextArea;

package/lib/cjs/ui/Form/TextArea/TextArea.d.ts

@@ -1,6 +1,12 @@
 import { TextFieldProps } from '../TextField/TextField';
-export type TextAreaProps = {} & TextFieldProps;
+export type TextAreaProps = {
+    minRows?: number;
+    maxRows?: number;
+} & TextFieldProps;
 declare const TextArea: import("react").ForwardRefExoticComponent<{
+    minRows?: number;
+    maxRows?: number;
+} & {
     label?: string;
     size?: Exclude<import("../../../types/theme").SizeType, "extraLarge" | "medium">;
     variant?: import("../../../types/theme").VariantType;
@@ -8,8 +14,12 @@ declare const TextArea: import("react").ForwardRefExoticComponent<{
     errorTooltip?: string;
     success?: boolean;
     helperText?: string | import("react").ReactNode;
+    startAdornment?: string | import("react").ReactNode;
     endAdornment?: string | import("react").ReactNode;
     multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
     focused?: boolean;
     editable?: boolean;
     classes?: Partial<{